diff --git a/README.md b/README.md
index d479296869..c9e6e17fc2 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
 # ThingsBoard 
-[![Join the chat at https://gitter.im/thingsboard/chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/thingsboard/chat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![ThingsBoard Builds Server Status](https://img.shields.io/teamcity/build/e/ThingsBoard_Build?label=TB%20builds%20server&server=https%3A%2F%2Fbuilds.thingsboard.io&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAALzAAAC8wHS6QoqAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAB9FJREFUeJzVm3+MXUUVx7+zWwqEtnRLWisQ2lKVUisIQmsqYCohpUhpEGsFKSJJTS0qGiGIISJ/8CNGYzSaEKBQEZUiP7RgVbCVdpE0xYKBWgI2rFLZJZQWtFKobPfjH3Pfdu7s3Pvmzntv3/JNNr3bOXPO+Z6ZO3PumVmjFgEYJWmWpDmSZks6VtIESV3Zv29LWmGMubdVPgw7gEOBJcAaYC/18fd2+zyqngAwXdL7M9keSduMMXgyH5R0laRPSRpbwf62CrLDB8AAS4HnAqP2EvA1YBTwPuBnwP46I70H+DPwALAS+B5wBTCu3VyHIJvG98dMX+B/BW1vAvcAnwdmAp3t5hWFbORXR5AvwmPARcCYdnNJAnCBR+gd7HQ9HZgLfAt4PUB8AzCv3f43DGCTQ6o/RAo43gtCL2Da4W9TAUwEBhxiPymRvcabAR8eTl+biQ7neYokdyTXlvR7xPt9etM8GmZ0FDxL+WD42FdBdkTDJd0jyU1wzi7pd473e0+qA8AM4AbgkrK1BDgOWAc8ChyTaq+eM5ud93ofcHpAZiY2sanhZaDDaTfAZ7HJUmlWCJzm6bqLQM6QBanXkfthcxgPNbTEW9z2AT8AzgTmANdikxwXX/d0XOi0bQEmFNj6GPAfhuKnXkB98kNsNjsITwacKkI3MNrrf4UnswXoiiRfwyqgo4D8L2hVZglMw456DDYCRwR0jCH/KuWCgE2oysjX8KsA+V+2jHzm3CrP4PMBx/4JfAU4qETP+EAQ/gKcA/w7gnwNbl5yD7bG0DLyM7DZXw3d2f9PA+YD5wIzK+gLBSEFA/XIA2cAVwLvbSQAt3mGP5Gs7IDO8dg1ZYDGcAfOwujZuIwDn+ObUx09hHx+v7Eh5nndCyIIDgBbgd0lMiv9IABfIF+LeDnVyU97xj5XR/6bwI5sZEaXyH2UuHd+WSbfRXktYjAIAfL9wGdSA/Cgo+gtSio12IKJa3hNKAgZ+TciyL+AlwECKzI/ioLgTvsa+YtTyXeSz8ZW15E3wN88p3JBwCZNMeShIKkBTsRmmSG4a0o/sDSJfGboBE/5pRF9pgI9oSBUJP8mXpLk2bm6pO9Aw+QzI8s8xVFbXRaEf3h911cgD7Cyjg0/L/GxnoLdoUoA3O1vDxUyLWyO4AehCpYX6D2L/LpUhtsaCkIWxRoeT+g/DVsqT8EWYDowC5jh6FxUUc+tJJblOmSPqWp4JUFHl6TDUoxLOlnSdknPSnK3sA2S9lfQs0zS7SkzwQ/A61U6A6dKWufpSMVg5mmMeUPSXyv2v0zSN6oa7ZAdwRqiA5CRf0TS+KpGAxiQ1OFN4z8l6PErVXUxSvmp1hvTqUnk35adPWskPWSM6fPaq84ASXqscg/gi9gcvJuC6o0nfwrhw5EYvIpNn88HStcN4M6KulfTys/lzKlO0lb8P2Lrf6VbLDAF+DLweEX998aSx372bwP6gPlVA3BEAvm9FJwVYtPqjwDXA08n6AZbOYoeeeAWp++mSlPGGLMLeFjSuRW6Iektx4GDJc2TdJ6khZKOruKDh/skXWSM6a/Q5yjn+dDKFrE1vw0VR2m2039x4kj7uJ+SslyJ/+7rtaly4mCM+a+kBaq2TbnVpfWy216jmCzpkIR+7kK/MymHNsbslX0NYoMweMpsjNklaWuKXQ9zJf2eOocvAbzHee5N/ojIgvBVxY3madh3v4b1iWZ/o3zw5kpaS+SFDGCq8jPguUQ/CmsCZfi403dhwjv/AHAQMAl41mvbGBMEhq4/c1PJTwmQr1f7u97pfzj5EnwUead/KAg/ivD7Zkf+HSBpFwiRfwibI3SXkOj29PgEivAggdU+C8JWR+6+CN9dm1tSyHcBLwbIj87ax1Kcxe0DJmVyY4CdEeR/TXnVeRLwc+C3wHF1fP+Qp/uGlABc6Cl5mPziVi8IzwDfAZ6KIN9LyhQt9v1GT/+sFCXTOVBBXuOTd+TGkp+eqWjKSTBwMPAvR+9TjSibjK35l93mWIxdZFKOxPzFseEgAJd7Olt6v+AC8jdIqwRhLbZM758HRH3tYa/vnoqtKZ4JHIk99tvh6HqNVl3RLSB/JfBEBPnBwxXsJ2uf176qxO7hwE3ALq/PfuyVXhdXt4r8+QHyK7K2cXWCMLiTOPqODwTh2IDdD2CP12LwCnUKMankO8kfiAySd2SKgjCEfEEQ+nznsZc7eyLJA9zddPKZIx0c2NcHgMsL5MZhr83XULiTeCSXAEcG2m4PjPCXsEWWBdhbZ/4h6knN4u07Mxv4MbCojtxo7DW6RTRwopMFxt0xeoCJAblLvCDdlWpzRAG42CO2sET2UUfuVbetsYPF9mKq8zwg6Q8lsm7bRJxt8N0cAPdar5FUupYU9X03B2C782wknVUi+0nneacxZk9rXBpGABO8RXA72demJ7fcWyvubIe/TQN2y11MuJ6wA5v3z8HeMbjba+8n5StwJCDb9lYUEI/Fde3mEQ1svnBKRvp32K/LEPYQd1z3XQJfsG3/Sw/gKElLZev8tb8rnizpBEmF1SDZ06ZbJN0saa+kayQtV77qi6QnJF1njFnXdOebAcIXssvQB3yfcGrcCZwEnAfMC8mMKGArNUVT28VubF4/nyZflx8Jr8BVkr4tm83tzn5ek/S8pM2SnpT0gv8H283C/wGTFfhGtexQwQAAAABJRU5ErkJggg==&labelColor=305680)](https://builds.thingsboard.io/viewType.html?buildTypeId=ThingsBoard_Build&guest=1)
 
 ThingsBoard is an open-source IoT platform for data collection, processing, visualization, and device management.
diff --git a/application/pom.xml b/application/pom.xml
index b4bc8b023c..17b179c767 100644
--- a/application/pom.xml
+++ b/application/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>application</artifactId>
diff --git a/application/src/main/data/json/demo/dashboards/firmware.json b/application/src/main/data/json/demo/dashboards/firmware.json
index 7a21e86761..a268823f36 100644
--- a/application/src/main/data/json/demo/dashboards/firmware.json
+++ b/application/src/main/data/json/demo/dashboards/firmware.json
@@ -279,7 +279,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1142,7 +1142,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1448,7 +1448,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1754,7 +1754,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -2060,7 +2060,7 @@
                 "name": "Edit firmware",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit firmware {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"firmwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit firmware {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"firmwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        firmwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    firmwareId: vm.entity.firmwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.firmwareId = formValues.firmwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
diff --git a/application/src/main/data/json/demo/dashboards/software.json b/application/src/main/data/json/demo/dashboards/software.json
index eea81e5368..ebc4e6cd7d 100644
--- a/application/src/main/data/json/demo/dashboards/software.json
+++ b/application/src/main/data/json/demo/dashboards/software.json
@@ -279,7 +279,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1142,7 +1142,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1448,7 +1448,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -1754,7 +1754,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
@@ -2060,7 +2060,7 @@
                 "name": "Edit software",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>Edit software {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content fxLayout=\"column\">\n        <tb-ota-package-autocomplete\n            [useFullEntityId]=\"true\"\n            type=\"SOFTWARE\"\n            [deviceProfileId]=\"entity.deviceProfileId.id\"\n            formControlName=\"softwareId\">\n        </tb-ota-package-autocomplete>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\"  class=\"edit-entity-form\">\n  <mat-toolbar class=\"flex flex-row\" color=\"primary\">\n    <h2>Edit software {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div *ngIf=\"entity.deviceProfileId\" mat-dialog-content class=\"flex flex-col\">\n    <tb-ota-package-autocomplete\n        [useFullEntityId]=\"true\"\n        type=\"SOFTWARE\"\n        [deviceProfileId]=\"entity.deviceProfileId.id\"\n        formControlName=\"softwareId\">\n    </tb-ota-package-autocomplete>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n  </div>\n</form>",
                 "customCss": "form {\n    min-width: 300px !important;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet entityService = $injector.get(widgetContext.servicesMap.get('entityService'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n\n    vm.entityName = entityName;\n    vm.entity = {};\n\n    vm.editEntityFormGroup = vm.fb.group({\n        softwareId: [null]\n    });\n\n    getEntityInfo();\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n\n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveEntity().subscribe(\n            function () {\n                // widgetContext.updateAliases();\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n\n\n    function getEntityInfo() {\n        entityService.getEntity(entityId.entityType, entityId.id).subscribe(\n            function (data) {\n                vm.entity = data;\n                vm.editEntityFormGroup.patchValue({\n                    softwareId: vm.entity.softwareId\n                }, {emitEvent: false});\n            }\n        );\n    }\n\n    function saveEntity() {\n        const formValues = vm.editEntityFormGroup.value;\n        vm.entity.softwareId = formValues.softwareId;\n        return deviceService.saveDevice(vm.entity);\n    }\n}",
                 "customResources": [],
diff --git a/application/src/main/data/json/demo/dashboards/thermostats.json b/application/src/main/data/json/demo/dashboards/thermostats.json
index 223722fee1..94f80322ae 100644
--- a/application/src/main/data/json/demo/dashboards/thermostats.json
+++ b/application/src/main/data/json/demo/dashboards/thermostats.json
@@ -160,7 +160,7 @@
                 "name": "Add",
                 "icon": "add",
                 "type": "customPretty",
-                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\n        (ngSubmit)=\"save()\" class=\"add-entity-form\">\n    <mat-toolbar color=\"primary\">\n        <h2>Add thermostat</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div mat-dialog-content fxLayout=\"column\">\n        <mat-form-field fxFlex class=\"mat-block\">\n            <mat-label>Thermostat name</mat-label>\n            <input matInput formControlName=\"entityName\" required>\n            <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\n                Thermostat name is required.\n            </mat-error>\n        </mat-form-field>\n        <div formGroupName=\"attributes\" fxLayout=\"column\">\n            <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n                High temperature alarm\n            </mat-slide-toggle>\n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>High temperature threshold, °C</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                    [required] = \"addEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n                    formControlName=\"temperatureAlarmThreshold\">\n                <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n                    High temperature threshold is required.\n                </mat-error>\n            </mat-form-field>\n        \n            <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n                Low humidity alarm\n            </mat-slide-toggle>\n                \n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>Low humidity threshold, %</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                    [required] = \"addEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n                    formControlName=\"humidityAlarmThreshold\">\n                <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n                    Low humidity threshold is required.\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\n            Create\n        </button>\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\n      (ngSubmit)=\"save()\" class=\"add-entity-form\">\n  <mat-toolbar color=\"primary\">\n    <h2>Add thermostat</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div mat-dialog-content class=\"flex flex-col\">\n    <mat-form-field class=\"mat-block flex-1\">\n      <mat-label>Thermostat name</mat-label>\n      <input matInput formControlName=\"entityName\" required>\n      <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\n        Thermostat name is required.\n      </mat-error>\n    </mat-form-field>\n    <div formGroupName=\"attributes\" class=\"flex flex-col\">\n      <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n        High temperature alarm\n      </mat-slide-toggle>\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>High temperature threshold, °C</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"addEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n               formControlName=\"temperatureAlarmThreshold\">\n        <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n          High temperature threshold is required.\n        </mat-error>\n      </mat-form-field>\n\n      <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n        Low humidity alarm\n      </mat-slide-toggle>\n\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>Low humidity threshold, %</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"addEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n               formControlName=\"humidityAlarmThreshold\">\n        <mat-error *ngIf=\"addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n          Low humidity threshold is required.\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\n      Create\n    </button>\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n  </div>\n</form>",
                 "customCss": ".add-entity-form{\n    width: 300px;\n}\n",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\n\nopenAddEntityDialog();\n\nfunction openAddEntityDialog() {\n    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();\n}\n\nfunction AddEntityDialogController(instance) {\n    let vm = instance;\n    \n    vm.addEntityFormGroup = vm.fb.group({\n        entityName: ['', [vm.validators.required]],\n        attributes: vm.fb.group({\n            temperatureAlarmFlag: [false],\n            temperatureAlarmThreshold: [{value: null, disabled: true}],\n            humidityAlarmFlag: [false],\n            humidityAlarmThreshold: [{value: null, disabled: true}]\n        })\n    });\n    \n    vm.addEntityFormGroup.get('attributes').get('temperatureAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').enable();\n        } else {\n            vm.addEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').disable();\n        }\n    });\n    \n    vm.addEntityFormGroup.get('attributes').get('humidityAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').enable();\n        } else {\n            vm.addEntityFormGroup.get('attributes').get('humidityAlarmThreshold').disable();\n        }\n    });\n\n    vm.save = function() {\n        vm.addEntityFormGroup.markAsPristine();\n        saveEntityObservable().subscribe(\n            function (entity) {\n                saveAttributes(entity.id).subscribe(\n                    function () {\n                        widgetContext.updateAliases();\n                        vm.dialogRef.close(null);\n                    }\n                );\n            }\n        );\n    };\n    \n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n    \n    function saveEntityObservable() {\n        const formValues = vm.addEntityFormGroup.value;\n        let entity = {\n            name: formValues.entityName,\n            type: \"thermostat\"\n        };\n        return deviceService.saveDevice(entity);\n    }\n    \n    function saveAttributes(entityId) {\n        let attributes = vm.addEntityFormGroup.get('attributes').value;\n        let attributesArray = [];\n        for (let key in attributes) {\n            if(attributes[key] !== null) {\n                attributesArray.push({key: key, value: attributes[key]});\n            }\n        }\n        if (attributesArray.length > 0) {\n            return attributeService.saveEntityAttributes(entityId, \"SERVER_SCOPE\", attributesArray);\n        } else {\n            return widgetContext.rxjs.of([]);\n        }\n    }\n}",
                 "customResources": [],
@@ -180,7 +180,7 @@
                 "name": "Edit",
                 "icon": "edit",
                 "type": "customPretty",
-                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\" class=\"edit-entity-form\">\n    <mat-toolbar color=\"primary\">\n        <h2>Edit thermostat {{entityName}}</h2>\n        <span fxFlex></span>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n    </mat-progress-bar>\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n    <div mat-dialog-content fxLayout=\"column\">\n        <mat-form-field fxFlex class=\"mat-block\">\n            <mat-label>Thermostat name</mat-label>\n            <input matInput formControlName=\"entityName\" readonly>\n        </mat-form-field>\n        <div formGroupName=\"attributes\" fxLayout=\"column\">\n            <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n                High temperature alarm\n            </mat-slide-toggle>\n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>High temperature threshold, °C</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                        [required] = \"editEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n                        formControlName=\"temperatureAlarmThreshold\">\n                <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n                    High temperature threshold is required.\n                </mat-error>\n            </mat-form-field>\n\n            <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n                Low humidity alarm\n            </mat-slide-toggle>\n\n            <mat-form-field fxFlex class=\"mat-block\">\n                <mat-label>Low humidity threshold, %</mat-label>\n                <input type=\"number\" step=\"any\" matInput\n                       [required] = \"editEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n                       formControlName=\"humidityAlarmThreshold\">\n                <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n                    Low humidity threshold is required.\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-raised-button color=\"primary\"\n                type=\"submit\"\n                [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n            Save\n        </button>\n        <button mat-button color=\"primary\"\n                type=\"button\"\n                [disabled]=\"(isLoading$ | async)\"\n                (click)=\"cancel()\" cdkFocusInitial>\n            Cancel\n        </button>\n    </div>\n</form>",
+                "customHtml": "<form #editEntityForm=\"ngForm\" [formGroup]=\"editEntityFormGroup\"\n      (ngSubmit)=\"save()\" class=\"edit-entity-form\">\n  <mat-toolbar color=\"primary\">\n    <h2>Edit thermostat {{entityName}}</h2>\n    <span class=\"flex-1\"></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n      <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n  </mat-progress-bar>\n  <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n  <div mat-dialog-content class=\"flex flex-col\">\n    <mat-form-field class=\"mat-block flex-1\">\n      <mat-label>Thermostat name</mat-label>\n      <input matInput formControlName=\"entityName\" readonly>\n    </mat-form-field>\n    <div formGroupName=\"attributes\" class=\"flex flex-col\">\n      <mat-slide-toggle formControlName=\"temperatureAlarmFlag\">\n        High temperature alarm\n      </mat-slide-toggle>\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>High temperature threshold, °C</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"editEntityFormGroup.get('attributes').get('temperatureAlarmFlag').value\"\n               formControlName=\"temperatureAlarmThreshold\">\n        <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').hasError('required')\">\n          High temperature threshold is required.\n        </mat-error>\n      </mat-form-field>\n\n      <mat-slide-toggle formControlName=\"humidityAlarmFlag\">\n        Low humidity alarm\n      </mat-slide-toggle>\n\n      <mat-form-field class=\"mat-block flex-1\">\n        <mat-label>Low humidity threshold, %</mat-label>\n        <input type=\"number\" step=\"any\" matInput\n               [required] = \"editEntityFormGroup.get('attributes').get('humidityAlarmFlag').value\"\n               formControlName=\"humidityAlarmThreshold\">\n        <mat-error *ngIf=\"editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').hasError('required')\">\n          Low humidity threshold is required.\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <div mat-dialog-actions class=\"flex flex-row items-center justify-end\">\n    <button mat-raised-button color=\"primary\"\n            type=\"submit\"\n            [disabled]=\"(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty\">\n      Save\n    </button>\n    <button mat-button color=\"primary\"\n            type=\"button\"\n            [disabled]=\"(isLoading$ | async)\"\n            (click)=\"cancel()\" cdkFocusInitial>\n      Cancel\n    </button>\n  </div>\n</form>",
                 "customCss": ".edit-entity-form{\n    width: 300px;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\n\nopenEditEntityDialog();\n\nfunction openEditEntityDialog() {\n    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\n}\n\nfunction EditEntityDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId;\n    vm.entityName = entityName;\n    vm.attributes = {};\n    \n    vm.editEntityFormGroup = vm.fb.group({\n        entityName: [''],\n        attributes: vm.fb.group({\n            temperatureAlarmFlag: [false],\n            temperatureAlarmThreshold: [{value: null, disabled: true}],\n            humidityAlarmFlag: [false],\n            humidityAlarmThreshold: [{value: null, disabled: true}]\n        })\n    });\n    \n    vm.editEntityFormGroup.get('attributes').get('temperatureAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').enable();\n        } else {\n            vm.editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').disable();\n        }\n    });\n    \n    vm.editEntityFormGroup.get('attributes').get('humidityAlarmFlag').valueChanges\n    .subscribe(activate => {\n        if (activate) {\n            vm.editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').enable();\n        } else {\n            vm.editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').disable();\n        }\n    });\n    \n    \n    getEntityInfo();\n    \n    \n    vm.save = function() {\n        vm.editEntityFormGroup.markAsPristine();\n        saveAttributes(entityId).subscribe(\n            function () {\n                vm.dialogRef.close(null);\n            }\n        );\n    };\n    \n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n    \n    function getEntityAttributes(attributes) {\n        for (var i = 0; i < attributes.length; i++) {\n            vm.attributes[attributes[i].key] = attributes[i].value;\n        }\n    }\n    \n    function getEntityInfo() {\n        attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE').subscribe(\n            function (attributes) {\n                getEntityAttributes(attributes);\n                vm.editEntityFormGroup.patchValue({\n                    entityName: vm.entityName,\n                    attributes: vm.attributes\n                });\n                // if(vm.attributes.temperatureAlarmFlag) {\n                //     vm.editEntityFormGroup.get('attributes').get('temperatureAlarmThreshold').enable();\n                // }\n                // if(vm.attributes.humidityAlarmFlag) {\n                //     vm.editEntityFormGroup.get('attributes').get('humidityAlarmThreshold').enable();\n                // }\n            }\n        );\n    }\n    \n    function saveAttributes(entityId) {\n        let attributes = vm.editEntityFormGroup.get('attributes').value;\n        let attributesArray = [];\n        for (let key in attributes) {\n            if (attributes[key] !== vm.attributes[key]) {\n                attributesArray.push({key: key, value: attributes[key]});\n            }\n        }\n        if (attributesArray.length > 0) {\n            return attributeService.saveEntityAttributes(entityId, \"SERVER_SCOPE\", attributesArray);\n        } else {\n            return widgetContext.rxjs.of([]);\n        }\n    }\n}",
                 "customResources": [],
diff --git a/application/src/main/data/json/edge/instructions/install/centos/instructions.md b/application/src/main/data/json/edge/instructions/install/centos/instructions.md
index bcc1967dfd..86c5acad56 100644
--- a/application/src/main/data/json/edge/instructions/install/centos/instructions.md
+++ b/application/src/main/data/json/edge/instructions/install/centos/instructions.md
@@ -56,13 +56,13 @@ sudo yum update
 sudo yum -y install https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm
 # Install packages
 sudo yum -y install epel-release yum-utils
-sudo yum-config-manager --enable pgdg15
-sudo yum install postgresql15-server postgresql15
+sudo yum-config-manager --enable pgdg16
+sudo yum install postgresql16-server postgresql16 postgresql16-contrib
 # Initialize your PostgreSQL DB
-sudo /usr/pgsql-15/bin/postgresql-15-setup initdb
-sudo systemctl start postgresql-15
+sudo /usr/pgsql-16/bin/postgresql-16-setup initdb
+sudo systemctl start postgresql-16
 # Optional: Configure PostgreSQL to start on boot
-sudo systemctl enable --now postgresql-15
+sudo systemctl enable --now postgresql-16
 
 {:copy-code}
 ```
@@ -74,12 +74,12 @@ sudo systemctl enable --now postgresql-15
 sudo yum -y install https://download.postgresql.org/pub/repos/yum/reporpms/EL-8-x86_64/pgdg-redhat-repo-latest.noarch.rpm
 # Install packages
 sudo dnf -qy module disable postgresql
-sudo dnf -y install postgresql15 postgresql15-server
+sudo dnf -y install postgresql16 postgresql16-server postgresql16-contrib
 # Initialize your PostgreSQL DB
-sudo /usr/pgsql-15/bin/postgresql-15-setup initdb
-sudo systemctl start postgresql-15
+sudo /usr/pgsql-16/bin/postgresql-16-setup initdb
+sudo systemctl start postgresql-16
 # Optional: Configure PostgreSQL to start on boot
-sudo systemctl enable --now postgresql-15
+sudo systemctl enable --now postgresql-16
 
 {:copy-code}
 ```
@@ -101,7 +101,7 @@ After configuring the password, edit the pg_hba.conf to use MD5 authentication w
 Edit pg_hba.conf file:
 
 ```bash
-sudo nano /var/lib/pgsql/15/data/pg_hba.conf
+sudo nano /var/lib/pgsql/16/data/pg_hba.conf
 {:copy-code}
 ```
 
@@ -121,7 +121,7 @@ host    all             all             127.0.0.1/32            md5
 Finally, you should restart the PostgreSQL service to initialize the new configuration:
 
 ```bash
-sudo systemctl restart postgresql-15.service
+sudo systemctl restart postgresql-16.service
 {:copy-code}
 ```
 
diff --git a/application/src/main/data/json/edge/instructions/install/docker/instructions.md b/application/src/main/data/json/edge/instructions/install/docker/instructions.md
index 9910124b3e..23f484f2ec 100644
--- a/application/src/main/data/json/edge/instructions/install/docker/instructions.md
+++ b/application/src/main/data/json/edge/instructions/install/docker/instructions.md
@@ -38,7 +38,7 @@ services:
     ${EXTRA_HOSTS}
   postgres:
     restart: always
-    image: "postgres:15"
+    image: "postgres:16"
     ports:
       - "5432"
     environment:
diff --git a/application/src/main/data/json/edge/instructions/install/ubuntu/instructions.md b/application/src/main/data/json/edge/instructions/install/ubuntu/instructions.md
index fe9601443f..992b5e2ee2 100644
--- a/application/src/main/data/json/edge/instructions/install/ubuntu/instructions.md
+++ b/application/src/main/data/json/edge/instructions/install/ubuntu/instructions.md
@@ -49,7 +49,7 @@ echo "deb http://apt.postgresql.org/pub/repos/apt/ ${RELEASE}"-pgdg main | sudo
 
 # install and launch the postgresql service:
 sudo apt update
-sudo apt -y install postgresql-15
+sudo apt -y install postgresql-16
 sudo service postgresql start
 {:copy-code}
 ```
diff --git a/application/src/main/data/json/edge/instructions/upgrade/docker/upgrade_db.md b/application/src/main/data/json/edge/instructions/upgrade/docker/upgrade_db.md
index d922fa9155..a594ebe4e7 100644
--- a/application/src/main/data/json/edge/instructions/upgrade/docker/upgrade_db.md
+++ b/application/src/main/data/json/edge/instructions/upgrade/docker/upgrade_db.md
@@ -21,7 +21,7 @@ services:
     entrypoint: upgrade-tb-edge.sh
   postgres:
     restart: always
-    image: "postgres:15"
+    image: "postgres:16"
     ports:
       - "5432"
     environment:
diff --git a/application/src/main/data/json/system/scada_symbols/conical-tank.svg b/application/src/main/data/json/system/scada_symbols/conical-tank.svg
new file mode 100644
index 0000000000..7ae8f41934
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/conical-tank.svg
@@ -0,0 +1,1210 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="1e3" height="1e3" fill="none" version="1.1" viewBox="0 0 1e3 1e3"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Conical tank",
+  "description": "Conical tank with current volume value and level visualizations.",
+  "searchTags": [
+    "conical tank",
+    "stand tank"
+  ],
+  "widgetSizeX": 5,
+  "widgetSizeY": 5,
+  "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "var color = ctx.properties.tankColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "fluid",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n} else {\n    var liquidPattern = element.reference('fill');\n\n    var valueSet = element.remember('valueSet');\n    if (!valueSet) {\n        element.remember('valueSet', true);\n        element.attr({height: 0});\n        liquidPattern.transform({translateY: 590});\n    }\n\n    var currentVolume = ctx.values.currentVolume; \n    var tankCapacity = ctx.values.tankCapacity; \n\n    var height = currentVolume / tankCapacity;\n    height = Math.max(0, Math.min(1, height))*930; \n    \n    var elementHeight = element.remember('height');\n    if (height !== elementHeight) {\n        element.remember('height', height);\n        ctx.api.cssAnimate(element, 500).attr({height: height});\n        ctx.api.cssAnimate(liquidPattern, 500).transform({ translateY: 590 + height });\n    }\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "fluid-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n} else {\n    var color = ctx.properties.fluidColor;\n    element.attr({fill: color, 'fill-opacity': 1});\n    \n    var valueSet = element.remember('valueSet');\n    if (!valueSet) {\n        element.remember('valueSet', true);\n        element.attr({height: 0});\n    }\n    \n    var currentVolume = ctx.values.currentVolume; \n    var tankCapacity = ctx.values.tankCapacity; \n\n    var height = currentVolume / tankCapacity;\n    height = Math.max(0, Math.min(1, height))*930; \n    \n    var elementHeight = element.remember('height');\n    if (height !== elementHeight) {\n        element.remember('height', height);\n        ctx.api.cssAnimate(element, 500).attr({height: height});\n    }\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "stand",
+      "stateRenderFunction": "if (ctx.properties.stand) {\n    element.show();\n}",
+      "actions": null
+    },
+    {
+      "tag": "top-layer",
+      "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-box",
+      "stateRenderFunction": "if (!ctx.properties.valueBox) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-box-background",
+      "stateRenderFunction": "if (ctx.properties.valueBox) {\n    var color = ctx.properties.valueBoxColor;\n    element.attr({fill: color});\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-text",
+      "stateRenderFunction": "if (ctx.properties.valueBox) {\n  var valueTextFont = ctx.properties.valueTextFont;\n  var valueTextColor = ctx.properties.valueTextColor;\n  var currentVolume = ctx.values.currentVolume;\n  var valueText = ctx.api.formatValue(currentVolume, 0, ctx.properties.valueUnits, false);\n  ctx.api.font(element, valueTextFont, valueTextColor);\n  ctx.api.text(element, valueText);\n}",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "tankCapacity",
+      "name": "{i18n:scada.symbol.tank-capacity}",
+      "hint": "{i18n:scada.symbol.tank-capacity-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "GET_ATTRIBUTE",
+        "defaultValue": null,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": "SERVER_SCOPE",
+          "key": "tankCapacity"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "currentVolume",
+      "name": "{i18n:scada.symbol.current-volume}",
+      "hint": "{i18n:scada.symbol.current-volume-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "GET_TIME_SERIES",
+        "defaultValue": null,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "liquidVolume"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "stand",
+      "name": "Stand",
+      "type": "switch",
+      "default": false,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "tankColor",
+      "name": "{i18n:scada.symbol.tank-color}",
+      "type": "color",
+      "default": "#E5E5E5",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "fluidColor",
+      "name": "{i18n:scada.symbol.fluid-color}",
+      "type": "color",
+      "default": "#1EC1F480",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueBox",
+      "name": "{i18n:scada.symbol.value-box}",
+      "type": "switch",
+      "default": true,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueBoxColor",
+      "name": "{i18n:scada.symbol.value-box}",
+      "type": "color",
+      "default": "#F3F3F3",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueUnits",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "units",
+      "default": "gal",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueTextFont",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "font",
+      "default": {
+        "size": 36,
+        "sizeUnit": "px",
+        "family": "Roboto",
+        "weight": "500",
+        "style": "normal"
+      },
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueTextColor",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "color",
+      "default": "#0000008A",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "scale",
+      "name": "{i18n:scada.symbol.scale}",
+      "type": "switch",
+      "default": true,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "transparent",
+      "name": "{i18n:scada.symbol.transparent-mode}",
+      "type": "switch",
+      "default": false,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<path d="m457 989h86l450.92-350.4c2.558-1.988 1.796-6.033-1.308-6.959-156.39-46.641-300.37-46.641-492.61-46.641-191.53 0-397 0-494.43 46.126-2.6425 1.251-2.9303 4.803-0.62172 6.597l452.05 351.28z" fill="#E5E5E5" tb:tag="background"/><path d="m457 989h86l450.92-350.4c2.558-1.988 1.796-6.033-1.308-6.959-156.39-46.641-300.37-46.641-492.61-46.641-191.53 0-397 0-494.43 46.126-2.6425 1.251-2.9303 4.803-0.62172 6.597l452.05 351.28z" fill="url(#paint0_linear_2901_184325)"/><path d="m5.8708 636.54 451.64 350.96h84.972l450.52-350.08c1.592-1.237 1.12-3.759-0.817-4.337-156.15-46.568-299.91-46.578-492.18-46.578-95.777 0-194.97 1e-3 -282.4 5.763-87.482 5.765-162.95 17.289-211.38 40.219-1.564 0.74-1.8291 2.902-0.34315 4.056z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><path d="m0 28c0-6.6274 5.3726-12 12-12h976c6.627 0 12 5.3726 12 12v600.93c0 6.069-4.237 11.156-10.271 11.818-214.38 23.527-809.37 19.922-979.62 0.081-5.9674-0.696-10.107-5.748-10.107-11.755v-601.08z" fill="#E5E5E5" tb:tag="background"/><path d="m0 28c0-6.6274 5.3726-12 12-12h976c6.627 0 12 5.3726 12 12v600.93c0 6.069-4.237 11.156-10.271 11.818-214.38 23.527-809.37 19.922-979.62 0.081-5.9674-0.696-10.107-5.748-10.107-11.755v-601.08z" fill="url(#paint1_linear_2901_184325)"/><path d="m1.5 28c0-5.799 4.701-10.5 10.5-10.5h976c5.799 0 10.5 4.701 10.5 10.5v600.93c0 5.363-3.718 9.754-8.934 10.327-107.1 11.753-309.36 16.735-506.19 16.294-196.83-0.44-388.06-6.303-473.09-16.212-5.1475-0.6-8.7805-4.953-8.7805-10.265v-601.08z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><path d="m0 27c0-5.5228 4.4772-10 10-10h980c5.523 0 10 4.4772 10 10v603.09c0 3.098-1.436 6.022-3.889 7.915l-456.61 352.5h-80l-455.62-352.5c-2.4478-1.894-3.8809-4.815-3.8809-7.91v-603.09z" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><mask id="mask0_2901_184328" x="16" y="30" width="968" height="946" style="mask-type:alpha" maskUnits="userSpaceOnUse">
+  <path d="m177.68 48h654.82c117.67 0 151.5-9.8385 151.5-9.8385v583.29c0 3.084-1.423 5.995-3.856 7.89l-444.06 345.81c-0.703 0.547-1.568 0.844-2.458 0.844h-68.749c-0.892 0-1.759-0.299-2.462-0.848l-442.55-345.81c-2.4254-1.895-3.8428-4.801-3.8428-7.879v-591.31s-5.4994 17.846 161.66 17.846z" fill="#D9D9D9"/>
+ </mask><g mask="url(#mask0_2901_184328)">
+  <rect transform="scale(1,-1)" x="9" y="-980" width="984" height="500" fill="#1ec1f4" fill-opacity=".5" tb:tag="fluid-background"/>
+  <rect transform="scale(1,-1)" x="9" y="-980" width="984" height="500" fill="url(#liquid)" tb:tag="fluid"/>
+ </g><g tb:tag="top-layer">
+  <path d="m457 989h86l446.4-346.88c3.14-2.44 1.153-7.474-2.811-7.161-177.75 14.046-302.08 14.046-492.59 14.046-186.75 0-368 0-479.24-13.232-4.0643-0.483-6.2013 4.761-2.9694 7.272l445.21 345.96z" fill="#E5E5E5" tb:tag="background"/>
+  <path d="m457 989h86l446.4-346.88c3.14-2.44 1.153-7.474-2.811-7.161-177.75 14.046-302.08 14.046-492.59 14.046-186.75 0-368 0-479.24-13.232-4.0643-0.483-6.2013 4.761-2.9694 7.272l445.21 345.96z" fill="url(#paint0_linear_2901_184325)"/>
+  <path d="m12.714 641.86 444.8 345.64h84.972l445.99-346.57c1.936-1.505 0.742-4.68-1.773-4.482-177.81 14.051-302.19 14.051-492.68 14.051h-0.135c-186.67 0-367.97 0-479.3-13.242-2.5392-0.302-3.9161 3.009-1.8718 4.598z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <mask id="path-637-inside-1_2901_184325" fill="white">
+   <path d="m14 14c-6.6274 0-12 5.3726-12 12v604.85c0 3.15 1.2942 6.03 4.3096 6.942 70.687 21.365 906.31 24.365 988.32 0.266 3.626-1.065 5.373-4.516 5.373-8.295v-603.77c0-6.6274-5.373-12-12-12h-974zm789 38c-3.866 0-7 3.134-7 7v572c0 3.866 3.134 7 7 7h44c3.866 0 7-3.134 7-7v-572c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill-rule="evenodd"/>
+  </mask>
+  <path d="m14 14c-6.6274 0-12 5.3726-12 12v604.85c0 3.15 1.2942 6.03 4.3096 6.942 70.687 21.365 906.31 24.365 988.32 0.266 3.626-1.065 5.373-4.516 5.373-8.295v-603.77c0-6.6274-5.373-12-12-12h-974zm789 38c-3.866 0-7 3.134-7 7v572c0 3.866 3.134 7 7 7h44c3.866 0 7-3.134 7-7v-572c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill="#E5E5E5" fill-rule="evenodd" tb:tag="background"/>
+  <path d="m14 14c-6.6274 0-12 5.3726-12 12v604.85c0 3.15 1.2942 6.03 4.3096 6.942 70.687 21.365 906.31 24.365 988.32 0.266 3.626-1.065 5.373-4.516 5.373-8.295v-603.77c0-6.6274-5.373-12-12-12h-974zm789 38c-3.866 0-7 3.134-7 7v572c0 3.866 3.134 7 7 7h44c3.866 0 7-3.134 7-7v-572c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill="url(#paint628_linear_2901_184325)" fill-rule="evenodd"/>
+  <path d="m6.3096 637.8-0.868 2.871h1e-5l0.86799-2.871zm988.32 0.266 0.846 2.879-0.846-2.879zm-989.63-612.06c0-4.9706 4.0294-9 9-9v-6c-8.2843 0-15 6.7157-15 15h6zm0 604.85v-604.85h-6v604.85h6zm2.1776 4.07c-1.2242-0.37-2.1776-1.597-2.1776-4.07h-6c0 3.828 1.635 8.36 6.4416 9.813l1.736-5.743zm986.6 0.26c-9.882 2.904-31.569 5.482-62.478 7.67-30.779 2.178-70.379 3.953-115.85 5.339-90.934 2.773-205.25 3.989-319.23 3.785-113.98-0.204-227.59-1.829-317.11-4.737-44.764-1.454-83.482-3.228-113.2-5.304-29.877-2.087-50.293-4.46-58.739-7.013l-1.736 5.743c9.2257 2.789 30.386 5.183 60.057 7.255 29.827 2.084 68.629 3.861 113.43 5.316 89.601 2.911 203.28 4.536 317.29 4.74 114.02 0.204 228.4-1.012 319.42-3.788 45.507-1.387 85.197-3.165 116.09-5.351 30.762-2.178 53.128-4.778 63.747-7.898l-1.692-5.757zm3.219-5.417c0 2.966-1.307 4.855-3.219 5.417l1.692 5.757c5.337-1.569 7.527-6.583 7.527-11.174h-6zm0-603.77v603.77h6v-603.77h-6zm-9-9c4.971 0 9 4.0294 9 9h6c0-8.2843-6.716-15-15-15v6zm-974 0h974v-6h-974v6zm785 42c0-2.2091 1.791-4 4-4v-6c-5.523 0-10 4.4771-10 10h6zm0 572v-572h-6v572h6zm4 4c-2.209 0-4-1.791-4-4h-6c0 5.523 4.477 10 10 10v-6zm44 0h-44v6h44v-6zm4-4c0 2.209-1.791 4-4 4v6c5.523 0 10-4.477 10-10h-6zm0-572v572h6v-572h-6zm-4-4c2.209 0 4 1.7909 4 4h6c0-5.5229-4.477-10-10-10v6zm-44 0h44v-6h-44v6z" fill="#000" fill-opacity=".12" mask="url(#path-637-inside-1_2901_184325)"/>
+  <path d="m794.5 59c0-4.6944 3.806-8.5 8.5-8.5h44c4.694 0 8.5 3.8056 8.5 8.5v572c0 4.694-3.806 8.5-8.5 8.5h-44c-4.694 0-8.5-3.806-8.5-8.5v-572z" stroke="#727171" stroke-width="3"/>
+ </g><g transform="translate(0,44)" filter="url(#filter0_ii_1694_158298)" tb:tag="value-box">
+  <path d="m381 272c0-6.627 5.373-12 12-12h216c6.627 0 12 5.373 12 12v56c0 6.627-5.373 12-12 12h-216c-6.627 0-12-5.373-12-12z" fill="#f3f3f3" tb:tag="value-box-background"/>
+  <path d="m382.5 272c0-5.799 4.701-10.5 10.5-10.5h216c5.799 0 10.5 4.701 10.5 10.5v56c0 5.799-4.701 10.5-10.5 10.5h-216c-5.799 0-10.5-4.701-10.5-10.5z" stroke="#727171" stroke-width="3"/>
+  <text x="500.74219" y="300.07812" fill="#727171" font-family="Roboto" font-size="32px" font-weight="500" text-anchor="middle" tb:tag="value-text" xml:space="preserve"><tspan dominant-baseline="middle">1660 gal</tspan></text>
+ </g><ellipse cx="500" cy="16" rx="496" ry="16" fill="#5D5C5C"/><rect transform="rotate(-90 451.5 998.5)" x="451.5" y="998.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><g style="display: none;" tb:tag="stand">
+  <rect x="107" y="949" width="80" height="24" rx="7" fill="#fff" style=""/>
+  <rect x="107" y="949" width="80" height="24" rx="7" fill="url(#paint629_linear_2901_184325)" style=""/>
+  <rect x="108.5" y="950.5" width="77" height="21" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <rect x="811" y="949" width="80" height="24" rx="7" fill="#fff" style=""/>
+  <rect x="811" y="949" width="80" height="24" rx="7" fill="url(#paint630_linear_2901_184325)" style=""/>
+  <rect x="812.5" y="950.5" width="77" height="21" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m131 949v-227l32 25v202h-32z" fill="#fff" style=""/>
+  <path d="m131 949v-227l32 25v202h-32z" fill="url(#paint631_linear_2901_184325)" style=""/>
+  <path d="m132.5 947.5v-222.42l29 22.657v199.77h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m835 949v-202l32-25v227h-32z" fill="#fff" style=""/>
+  <path d="m835 949v-202l32-25v227h-32z" fill="url(#paint632_linear_2901_184325)" style=""/>
+  <path d="m836.5 947.5v-199.77l29-22.657v222.42h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <circle cx="891" cy="575" r="32" fill="url(#paint633_radial_2901_184325)" style=""/>
+  <circle cx="891" cy="575" r="30.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <circle cx="107" cy="575" r="32" fill="url(#paint634_radial_2901_184325)" style=""/>
+  <circle cx="107" cy="575" r="30.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m91 958v-381c0-8.837 7.1634-16 16-16 8.837 0 16 7.163 16 16v381h-32z" fill="#fff" style=""/>
+  <path d="m91 958v-381c0-8.837 7.1634-16 16-16 8.837 0 16 7.163 16 16v381h-32z" fill="url(#paint635_linear_2901_184325)" style=""/>
+  <path d="m92.5 956.5v-379.5c0-8.008 6.4919-14.5 14.5-14.5 8.008 0 14.5 6.492 14.5 14.5v379.5h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m875 957v-380c0-8.837 7.163-16 16-16s16 7.163 16 16v380h-32z" fill="#fff" style=""/>
+  <path d="m875 957v-380c0-8.837 7.163-16 16-16s16 7.163 16 16v380h-32z" fill="url(#paint636_linear_2901_184325)" style=""/>
+  <path d="m876.5 955.5v-378.5c0-8.008 6.492-14.5 14.5-14.5s14.5 6.492 14.5 14.5v378.5h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <rect x="57" y="957" width="100" height="29" rx="7" fill="#fff" style=""/>
+  <rect x="57" y="957" width="100" height="29" rx="7" fill="url(#paint637_linear_2901_184325)" style=""/>
+  <rect x="58.5" y="958.5" width="97" height="26" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <rect x="841" y="957" width="100" height="29" rx="7" fill="#fff" style=""/>
+  <rect x="841" y="957" width="100" height="29" rx="7" fill="url(#paint638_linear_2901_184325)" style=""/>
+  <rect x="842.5" y="958.5" width="97" height="26" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+ </g><path d="m336.32 0s-336.32 0-336.32 167.5v820.9c0 6.628 8.9543 11.601 20 11.601h960c11.045 0 20-4.973 20-11.601v-820.9c0-167.5-330.35-167.5-330.35-167.5h-169.65zm335.35 203c-6.4433 0-11.667 3.134-11.667 7v751c0 3.866 5.2233 7 11.667 7h73.333c6.4433 0 11.667-3.134 11.667-7v-751c0-3.866-5.2233-7-11.667-7z" fill="#000" fill-opacity="0" style="stroke-width:1.6667" tb:tag="clickArea"/><defs>
+  <linearGradient id="paint0_linear_2901_184325" x1="1e3" x2="2.2785" y1="818.55" y2="867.09" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2901_184325" x1="1e3" x2=".67698" y1="336.15" y2="308.6" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint628_linear_2901_184325" x1="1e3" x2="2.661" y1="336.64" y2="309.42" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint629_linear_2901_184325" x1="108.82" x2="129.39" y1="961" y2="994.88" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint630_linear_2901_184325" x1="812.82" x2="833.39" y1="961" y2="994.88" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint631_linear_2901_184325" x1="131" x2="163" y1="809.06" y2="809.1" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint632_linear_2901_184325" x1="835" x2="867" y1="809.58" y2="809.62" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <radialGradient id="paint633_radial_2901_184325" cx="0" cy="0" r="1" gradientTransform="translate(891 575) rotate(90) scale(32)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#D9D9D9" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </radialGradient>
+  <radialGradient id="paint634_radial_2901_184325" cx="0" cy="0" r="1" gradientTransform="translate(107 575) rotate(90) scale(32)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#D9D9D9" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </radialGradient>
+  <linearGradient id="paint635_linear_2901_184325" x1="91" x2="123" y1="783" y2="783.02" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint636_linear_2901_184325" x1="875" x2="907" y1="783" y2="783.02" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint637_linear_2901_184325" x1="59.273" x2="83.733" y1="971.5" y2="1013.2" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint638_linear_2901_184325" x1="843.27" x2="867.73" y1="971.5" y2="1013.2" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <filter id="filter0_ii_1694_158298" x="377" y="256" width="248" height="88" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="4" dy="4"/>
+   <feGaussianBlur stdDeviation="3"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1694_158298"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-4" dy="-4"/>
+   <feGaussianBlur stdDeviation="2"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+   <feBlend in2="effect1_innerShadow_1694_158298" result="effect2_innerShadow_1694_158298"/>
+  </filter>
+  <pattern id="liquid" width="584" height="201" patternUnits="userSpaceOnUse">
+   <rect width="584" height="201" fill="url(#base-liquid)" stroke-width="0"/>
+  </pattern>
+  <pattern id="base-liquid" width="584" height="201" patternTransform="translate(8,791)" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid">
+   <circle cx="93" cy="33" r="8" fill="url(#paint1_linear_1687_130892)" style="fill:url(#paint1_linear_1687_130892)"/>
+   <circle cx="67" cy="166" r="8" fill="url(#paint2_linear_1687_130892)" style="fill:url(#paint2_linear_1687_130892)"/>
+   <circle cx="27" cy="193" r="8" fill="url(#paint3_linear_1687_130892)" style="fill:url(#paint3_linear_1687_130892)"/>
+   <circle cx="59" cy="130" r="8" fill="url(#paint4_linear_1687_130892)" style="fill:url(#paint4_linear_1687_130892)"/>
+   <circle cx="10" cy="49" r="8" fill="url(#paint5_linear_1687_130892)" style="fill:url(#paint5_linear_1687_130892)"/>
+   <circle cx="10" cy="170" r="8" fill="url(#paint6_linear_1687_130892)" style="fill:url(#paint6_linear_1687_130892)"/>
+   <circle cx="56" cy="41" r="5" fill="url(#paint7_linear_1687_130892)" style="fill:url(#paint7_linear_1687_130892)"/>
+   <circle cx="41" cy="20" r="5" fill="url(#paint8_linear_1687_130892)" style="fill:url(#paint8_linear_1687_130892)"/>
+   <circle cx="74" cy="110" r="4" fill="url(#paint9_linear_1687_130892)" style="fill:url(#paint9_linear_1687_130892)"/>
+   <circle cx="223" cy="128" r="4" fill="url(#paint10_linear_1687_130892)" style="fill:url(#paint10_linear_1687_130892)"/>
+   <circle cx="8" cy="87" r="4" fill="url(#paint11_linear_1687_130892)" style="fill:url(#paint11_linear_1687_130892)"/>
+   <circle cx="37" cy="73" r="5" fill="url(#paint12_linear_1687_130892)" style="fill:url(#paint12_linear_1687_130892)"/>
+   <circle cx="61" cy="92" r="5" fill="url(#paint13_linear_1687_130892)" style="fill:url(#paint13_linear_1687_130892)"/>
+   <circle cx="33.5" cy="150.5" r="2.5" fill="url(#paint14_linear_1687_130892)" style="fill:url(#paint14_linear_1687_130892)"/>
+   <circle cx="56.5" cy="182.5" r="2.5" fill="url(#paint15_linear_1687_130892)" style="fill:url(#paint15_linear_1687_130892)"/>
+   <circle cx="72.5" cy="73.5" r="2.5" fill="url(#paint16_linear_1687_130892)" style="fill:url(#paint16_linear_1687_130892)"/>
+   <circle cx="44.5" cy="106.5" r="2.5" fill="url(#paint17_linear_1687_130892)" style="fill:url(#paint17_linear_1687_130892)"/>
+   <circle cx="27.5" cy="117.5" r="2.5" fill="url(#paint18_linear_1687_130892)" style="fill:url(#paint18_linear_1687_130892)"/>
+   <circle cx="16.5" cy="63.5" r="2.5" fill="url(#paint19_linear_1687_130892)" style="fill:url(#paint19_linear_1687_130892)"/>
+   <circle cx="4" cy="29" r="4" fill="url(#paint20_linear_1687_130892)" style="fill:url(#paint20_linear_1687_130892)"/>
+   <circle cx="4" cy="150" r="4" fill="url(#paint21_linear_1687_130892)" style="fill:url(#paint21_linear_1687_130892)"/>
+   <circle cx="9.5" cy="110.5" r="9.5" fill="url(#paint22_linear_1687_130892)" style="fill:url(#paint22_linear_1687_130892)"/>
+   <circle cx="101" cy="196" r="5" fill="url(#paint23_linear_1687_130892)" style="fill:url(#paint23_linear_1687_130892)"/>
+   <circle cx="75.5" cy="62.5" r="2.5" fill="url(#paint24_linear_1687_130892)" style="fill:url(#paint24_linear_1687_130892)"/>
+   <circle cx="75.5" cy="49.5" r="2.5" fill="url(#paint25_linear_1687_130892)" style="fill:url(#paint25_linear_1687_130892)"/>
+   <circle cx="109" cy="119" r="5" fill="url(#paint26_linear_1687_130892)" style="fill:url(#paint26_linear_1687_130892)"/>
+   <circle cx="80.5" cy="140.5" r="2.5" fill="url(#paint27_linear_1687_130892)" style="fill:url(#paint27_linear_1687_130892)"/>
+   <circle cx="73" cy="189" r="5" fill="url(#paint28_linear_1687_130892)" style="fill:url(#paint28_linear_1687_130892)"/>
+   <circle cx="112" cy="153" r="5" fill="url(#paint29_linear_1687_130892)" style="fill:url(#paint29_linear_1687_130892)"/>
+   <circle cx="93.5" cy="89.5" r="2.5" fill="url(#paint30_linear_1687_130892)" style="fill:url(#paint30_linear_1687_130892)"/>
+   <circle cx="219" cy="33" r="8" fill="url(#paint31_linear_1687_130892)" style="fill:url(#paint31_linear_1687_130892)"/>
+   <circle cx="193" cy="166" r="8" fill="url(#paint32_linear_1687_130892)" style="fill:url(#paint32_linear_1687_130892)"/>
+   <circle cx="153" cy="193" r="8" fill="url(#paint33_linear_1687_130892)" style="fill:url(#paint33_linear_1687_130892)"/>
+   <circle cx="181" cy="138" r="8" fill="url(#paint34_linear_1687_130892)" style="fill:url(#paint34_linear_1687_130892)"/>
+   <circle cx="119" cy="63" r="8" fill="url(#paint35_linear_1687_130892)" style="fill:url(#paint35_linear_1687_130892)"/>
+   <circle cx="136" cy="170" r="8" fill="url(#paint36_linear_1687_130892)" style="fill:url(#paint36_linear_1687_130892)"/>
+   <circle cx="182" cy="41" r="5" fill="url(#paint37_linear_1687_130892)" style="fill:url(#paint37_linear_1687_130892)"/>
+   <circle cx="167" cy="20" r="5" fill="url(#paint38_linear_1687_130892)" style="fill:url(#paint38_linear_1687_130892)"/>
+   <circle cx="200" cy="110" r="4" fill="url(#paint39_linear_1687_130892)" style="fill:url(#paint39_linear_1687_130892)"/>
+   <circle cx="134" cy="87" r="4" fill="url(#paint40_linear_1687_130892)" style="fill:url(#paint40_linear_1687_130892)"/>
+   <circle cx="163" cy="73" r="5" fill="url(#paint41_linear_1687_130892)" style="fill:url(#paint41_linear_1687_130892)"/>
+   <circle cx="187" cy="92" r="5" fill="url(#paint42_linear_1687_130892)" style="fill:url(#paint42_linear_1687_130892)"/>
+   <circle cx="159.5" cy="150.5" r="2.5" fill="url(#paint43_linear_1687_130892)" style="fill:url(#paint43_linear_1687_130892)"/>
+   <circle cx="182.5" cy="182.5" r="2.5" fill="url(#paint44_linear_1687_130892)" style="fill:url(#paint44_linear_1687_130892)"/>
+   <circle cx="198.5" cy="73.5" r="2.5" fill="url(#paint45_linear_1687_130892)" style="fill:url(#paint45_linear_1687_130892)"/>
+   <circle cx="170.5" cy="106.5" r="2.5" fill="url(#paint46_linear_1687_130892)" style="fill:url(#paint46_linear_1687_130892)"/>
+   <circle cx="153.5" cy="117.5" r="2.5" fill="url(#paint47_linear_1687_130892)" style="fill:url(#paint47_linear_1687_130892)"/>
+   <circle cx="142.5" cy="63.5" r="2.5" fill="url(#paint48_linear_1687_130892)" style="fill:url(#paint48_linear_1687_130892)"/>
+   <circle cx="130" cy="29" r="4" fill="url(#paint49_linear_1687_130892)" style="fill:url(#paint49_linear_1687_130892)"/>
+   <circle cx="130" cy="150" r="4" fill="url(#paint50_linear_1687_130892)" style="fill:url(#paint50_linear_1687_130892)"/>
+   <circle cx="135.5" cy="110.5" r="9.5" fill="url(#paint51_linear_1687_130892)" style="fill:url(#paint51_linear_1687_130892)"/>
+   <circle cx="232" cy="180" r="5" fill="url(#paint52_linear_1687_130892)" style="fill:url(#paint52_linear_1687_130892)"/>
+   <circle cx="213.5" cy="66.5" r="2.5" fill="url(#paint53_linear_1687_130892)" style="fill:url(#paint53_linear_1687_130892)"/>
+   <circle cx="165.5" cy="36.5" r="2.5" fill="url(#paint54_linear_1687_130892)" style="fill:url(#paint54_linear_1687_130892)"/>
+   <circle cx="233" cy="103" r="5" fill="url(#paint55_linear_1687_130892)" style="fill:url(#paint55_linear_1687_130892)"/>
+   <circle cx="206.5" cy="140.5" r="2.5" fill="url(#paint56_linear_1687_130892)" style="fill:url(#paint56_linear_1687_130892)"/>
+   <circle cx="224.5" cy="198.5" r="2.5" fill="url(#paint57_linear_1687_130892)" style="fill:url(#paint57_linear_1687_130892)"/>
+   <circle cx="199" cy="189" r="5" fill="url(#paint58_linear_1687_130892)" style="fill:url(#paint58_linear_1687_130892)"/>
+   <circle cx="238" cy="153" r="5" fill="url(#paint59_linear_1687_130892)" style="fill:url(#paint59_linear_1687_130892)"/>
+   <circle cx="219.5" cy="89.5" r="2.5" fill="url(#paint60_linear_1687_130892)" style="fill:url(#paint60_linear_1687_130892)"/>
+   <circle cx="68.5" cy="7.5" r="2.5" fill="url(#paint61_linear_1687_130892)" style="fill:url(#paint61_linear_1687_130892)"/>
+   <circle cx="202.5" cy="12.5" r="2.5" fill="url(#paint62_linear_1687_130892)" style="fill:url(#paint62_linear_1687_130892)"/>
+   <circle cx="114" cy="5" r="5" fill="url(#paint63_linear_1687_130892)" style="fill:url(#paint63_linear_1687_130892)"/>
+   <circle cx="355" cy="33" r="8" fill="url(#paint64_linear_1687_130892)" style="fill:url(#paint64_linear_1687_130892)"/>
+   <circle cx="329" cy="166" r="8" fill="url(#paint65_linear_1687_130892)" style="fill:url(#paint65_linear_1687_130892)"/>
+   <circle cx="289" cy="193" r="8" fill="url(#paint66_linear_1687_130892)" style="fill:url(#paint66_linear_1687_130892)"/>
+   <circle cx="320" cy="136" r="8" fill="url(#paint67_linear_1687_130892)" style="fill:url(#paint67_linear_1687_130892)"/>
+   <circle cx="272" cy="49" r="8" fill="url(#paint68_linear_1687_130892)" style="fill:url(#paint68_linear_1687_130892)"/>
+   <circle cx="272" cy="170" r="8" fill="url(#paint69_linear_1687_130892)" style="fill:url(#paint69_linear_1687_130892)"/>
+   <circle cx="318" cy="41" r="5" fill="url(#paint70_linear_1687_130892)" style="fill:url(#paint70_linear_1687_130892)"/>
+   <circle cx="303" cy="20" r="5" fill="url(#paint71_linear_1687_130892)" style="fill:url(#paint71_linear_1687_130892)"/>
+   <circle cx="336" cy="110" r="4" fill="url(#paint72_linear_1687_130892)" style="fill:url(#paint72_linear_1687_130892)"/>
+   <circle cx="485" cy="128" r="4" fill="url(#paint73_linear_1687_130892)" style="fill:url(#paint73_linear_1687_130892)"/>
+   <circle cx="547" cy="92" r="4" fill="url(#paint74_linear_1687_130892)" style="fill:url(#paint74_linear_1687_130892)"/>
+   <circle cx="270" cy="87" r="4" fill="url(#paint75_linear_1687_130892)" style="fill:url(#paint75_linear_1687_130892)"/>
+   <circle cx="299" cy="73" r="5" fill="url(#paint76_linear_1687_130892)" style="fill:url(#paint76_linear_1687_130892)"/>
+   <circle cx="323" cy="92" r="5" fill="url(#paint77_linear_1687_130892)" style="fill:url(#paint77_linear_1687_130892)"/>
+   <circle cx="295.5" cy="150.5" r="2.5" fill="url(#paint78_linear_1687_130892)" style="fill:url(#paint78_linear_1687_130892)"/>
+   <circle cx="318.5" cy="182.5" r="2.5" fill="url(#paint79_linear_1687_130892)" style="fill:url(#paint79_linear_1687_130892)"/>
+   <circle cx="334.5" cy="73.5" r="2.5" fill="url(#paint80_linear_1687_130892)" style="fill:url(#paint80_linear_1687_130892)"/>
+   <circle cx="306.5" cy="106.5" r="2.5" fill="url(#paint81_linear_1687_130892)" style="fill:url(#paint81_linear_1687_130892)"/>
+   <circle cx="289.5" cy="117.5" r="2.5" fill="url(#paint82_linear_1687_130892)" style="fill:url(#paint82_linear_1687_130892)"/>
+   <circle cx="243.5" cy="67.5" r="2.5" fill="url(#paint83_linear_1687_130892)" style="fill:url(#paint83_linear_1687_130892)"/>
+   <circle cx="257" cy="20" r="4" fill="url(#paint84_linear_1687_130892)" style="fill:url(#paint84_linear_1687_130892)"/>
+   <circle cx="266" cy="150" r="4" fill="url(#paint85_linear_1687_130892)" style="fill:url(#paint85_linear_1687_130892)"/>
+   <circle cx="261.5" cy="126.5" r="9.5" fill="url(#paint86_linear_1687_130892)" style="fill:url(#paint86_linear_1687_130892)"/>
+   <circle cx="510.5" cy="43.5" r="9.5" fill="url(#paint87_linear_1687_130892)" style="fill:url(#paint87_linear_1687_130892)"/>
+   <circle cx="520.5" cy="128.5" r="9.5" fill="url(#paint88_linear_1687_130892)" style="fill:url(#paint88_linear_1687_130892)"/>
+   <circle cx="363" cy="196" r="5" fill="url(#paint89_linear_1687_130892)" style="fill:url(#paint89_linear_1687_130892)"/>
+   <circle cx="342.5" cy="83.5" r="2.5" fill="url(#paint90_linear_1687_130892)" style="fill:url(#paint90_linear_1687_130892)"/>
+   <circle cx="368.5" cy="89.5" r="2.5" fill="url(#paint91_linear_1687_130892)" style="fill:url(#paint91_linear_1687_130892)"/>
+   <circle cx="371" cy="119" r="5" fill="url(#paint92_linear_1687_130892)" style="fill:url(#paint92_linear_1687_130892)"/>
+   <circle cx="547" cy="119" r="5" fill="url(#paint93_linear_1687_130892)" style="fill:url(#paint93_linear_1687_130892)"/>
+   <circle cx="342.5" cy="140.5" r="2.5" fill="url(#paint94_linear_1687_130892)" style="fill:url(#paint94_linear_1687_130892)"/>
+   <circle cx="335" cy="189" r="5" fill="url(#paint95_linear_1687_130892)" style="fill:url(#paint95_linear_1687_130892)"/>
+   <circle cx="374" cy="153" r="5" fill="url(#paint96_linear_1687_130892)" style="fill:url(#paint96_linear_1687_130892)"/>
+   <circle cx="515" cy="176" r="5" fill="url(#paint97_linear_1687_130892)" style="fill:url(#paint97_linear_1687_130892)"/>
+   <circle cx="355.5" cy="89.5" r="2.5" fill="url(#paint98_linear_1687_130892)" style="fill:url(#paint98_linear_1687_130892)"/>
+   <circle cx="481" cy="33" r="8" fill="url(#paint99_linear_1687_130892)" style="fill:url(#paint99_linear_1687_130892)"/>
+   <circle cx="547" cy="23" r="8" fill="url(#paint100_linear_1687_130892)" style="fill:url(#paint100_linear_1687_130892)"/>
+   <circle cx="455" cy="166" r="8" fill="url(#paint101_linear_1687_130892)" style="fill:url(#paint101_linear_1687_130892)"/>
+   <circle cx="415" cy="193" r="8" fill="url(#paint102_linear_1687_130892)" style="fill:url(#paint102_linear_1687_130892)"/>
+   <circle cx="443" cy="138" r="8" fill="url(#paint103_linear_1687_130892)" style="fill:url(#paint103_linear_1687_130892)"/>
+   <circle cx="576" cy="153" r="8" fill="url(#paint104_linear_1687_130892)" style="fill:url(#paint104_linear_1687_130892)"/>
+   <circle cx="381" cy="63" r="8" fill="url(#paint105_linear_1687_130892)" style="fill:url(#paint105_linear_1687_130892)"/>
+   <circle cx="398" cy="170" r="8" fill="url(#paint106_linear_1687_130892)" style="fill:url(#paint106_linear_1687_130892)"/>
+   <circle cx="539" cy="193" r="8" fill="url(#paint107_linear_1687_130892)" style="fill:url(#paint107_linear_1687_130892)"/>
+   <circle cx="444" cy="41" r="5" fill="url(#paint108_linear_1687_130892)" style="fill:url(#paint108_linear_1687_130892)"/>
+   <circle cx="579" cy="39" r="5" fill="url(#paint109_linear_1687_130892)" style="fill:url(#paint109_linear_1687_130892)"/>
+   <circle cx="568" cy="196" r="5" fill="url(#paint110_linear_1687_130892)" style="fill:url(#paint110_linear_1687_130892)"/>
+   <circle cx="515" cy="10" r="5" fill="url(#paint111_linear_1687_130892)" style="fill:url(#paint111_linear_1687_130892)"/>
+   <circle cx="429" cy="20" r="5" fill="url(#paint112_linear_1687_130892)" style="fill:url(#paint112_linear_1687_130892)"/>
+   <circle cx="462" cy="110" r="4" fill="url(#paint113_linear_1687_130892)" style="fill:url(#paint113_linear_1687_130892)"/>
+   <circle cx="396" cy="87" r="4" fill="url(#paint114_linear_1687_130892)" style="fill:url(#paint114_linear_1687_130892)"/>
+   <circle cx="425" cy="73" r="5" fill="url(#paint115_linear_1687_130892)" style="fill:url(#paint115_linear_1687_130892)"/>
+   <circle cx="505" cy="76" r="5" fill="url(#paint116_linear_1687_130892)" style="fill:url(#paint116_linear_1687_130892)"/>
+   <circle cx="449" cy="92" r="5" fill="url(#paint117_linear_1687_130892)" style="fill:url(#paint117_linear_1687_130892)"/>
+   <circle cx="421.5" cy="150.5" r="2.5" fill="url(#paint118_linear_1687_130892)" style="fill:url(#paint118_linear_1687_130892)"/>
+   <circle cx="444.5" cy="182.5" r="2.5" fill="url(#paint119_linear_1687_130892)" style="fill:url(#paint119_linear_1687_130892)"/>
+   <circle cx="460.5" cy="73.5" r="2.5" fill="url(#paint120_linear_1687_130892)" style="fill:url(#paint120_linear_1687_130892)"/>
+   <circle cx="528.5" cy="90.5" r="2.5" fill="url(#paint121_linear_1687_130892)" style="fill:url(#paint121_linear_1687_130892)"/>
+   <circle cx="432.5" cy="106.5" r="2.5" fill="url(#paint122_linear_1687_130892)" style="fill:url(#paint122_linear_1687_130892)"/>
+   <circle cx="568.5" cy="89.5" r="2.5" fill="url(#paint123_linear_1687_130892)" style="fill:url(#paint123_linear_1687_130892)"/>
+   <circle cx="415.5" cy="117.5" r="2.5" fill="url(#paint124_linear_1687_130892)" style="fill:url(#paint124_linear_1687_130892)"/>
+   <circle cx="404.5" cy="63.5" r="2.5" fill="url(#paint125_linear_1687_130892)" style="fill:url(#paint125_linear_1687_130892)"/>
+   <circle cx="540.5" cy="46.5" r="2.5" fill="url(#paint126_linear_1687_130892)" style="fill:url(#paint126_linear_1687_130892)"/>
+   <circle cx="392" cy="29" r="4" fill="url(#paint127_linear_1687_130892)" style="fill:url(#paint127_linear_1687_130892)"/>
+   <circle cx="392" cy="150" r="4" fill="url(#paint128_linear_1687_130892)" style="fill:url(#paint128_linear_1687_130892)"/>
+   <circle cx="397.5" cy="110.5" r="9.5" fill="url(#paint129_linear_1687_130892)" style="fill:url(#paint129_linear_1687_130892)"/>
+   <circle cx="494" cy="180" r="5" fill="url(#paint130_linear_1687_130892)" style="fill:url(#paint130_linear_1687_130892)"/>
+   <circle cx="475.5" cy="66.5" r="2.5" fill="url(#paint131_linear_1687_130892)" style="fill:url(#paint131_linear_1687_130892)"/>
+   <circle cx="427.5" cy="36.5" r="2.5" fill="url(#paint132_linear_1687_130892)" style="fill:url(#paint132_linear_1687_130892)"/>
+   <circle cx="495" cy="103" r="5" fill="url(#paint133_linear_1687_130892)" style="fill:url(#paint133_linear_1687_130892)"/>
+   <circle cx="468.5" cy="140.5" r="2.5" fill="url(#paint134_linear_1687_130892)" style="fill:url(#paint134_linear_1687_130892)"/>
+   <circle cx="540.5" cy="148.5" r="2.5" fill="url(#paint135_linear_1687_130892)" style="fill:url(#paint135_linear_1687_130892)"/>
+   <circle cx="486.5" cy="198.5" r="2.5" fill="url(#paint136_linear_1687_130892)" style="fill:url(#paint136_linear_1687_130892)"/>
+   <circle cx="461" cy="189" r="5" fill="url(#paint137_linear_1687_130892)" style="fill:url(#paint137_linear_1687_130892)"/>
+   <circle cx="557" cy="167" r="5" fill="url(#paint138_linear_1687_130892)" style="fill:url(#paint138_linear_1687_130892)"/>
+   <circle cx="557" cy="66" r="5" fill="url(#paint139_linear_1687_130892)" style="fill:url(#paint139_linear_1687_130892)"/>
+   <circle cx="500" cy="153" r="5" fill="url(#paint140_linear_1687_130892)" style="fill:url(#paint140_linear_1687_130892)"/>
+   <circle cx="481.5" cy="89.5" r="2.5" fill="url(#paint141_linear_1687_130892)" style="fill:url(#paint141_linear_1687_130892)"/>
+   <circle cx="525.5" cy="73.5" r="2.5" fill="url(#paint142_linear_1687_130892)" style="fill:url(#paint142_linear_1687_130892)"/>
+   <circle cx="330.5" cy="7.5" r="2.5" fill="url(#paint143_linear_1687_130892)" style="fill:url(#paint143_linear_1687_130892)"/>
+   <circle cx="464.5" cy="12.5" r="2.5" fill="url(#paint144_linear_1687_130892)" style="fill:url(#paint144_linear_1687_130892)"/>
+   <circle cx="376" cy="5" r="5" fill="url(#paint145_linear_1687_130892)" style="fill:url(#paint145_linear_1687_130892)"/>
+   <path d="m0 0h584v197c0 2.209-1.791 4-4 4h-576c-2.2092 0-4-1.791-4-4z" fill="#1EC1F4" fill-opacity=".5" style="fill-opacity:0"/>
+  </pattern>
+  <linearGradient id="paint1_linear_1687_130892" x1="99.316" x2="101" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint2_linear_1687_130892" x1="73.316" x2="75" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint3_linear_1687_130892" x1="33.316" x2="35" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint4_linear_1687_130892" x1="65.316" x2="67" y1="914.26" y2="929" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint5_linear_1687_130892" x1="16.316" x2="18" y1="833.26" y2="848" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_1687_130892" x1="16.316" x2="18" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint7_linear_1687_130892" x1="62.947" x2="64" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint8_linear_1687_130892" x1="47.947" x2="49" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint9_linear_1687_130892" x1="81.158" x2="82" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint10_linear_1687_130892" x1="230.16" x2="231" y1="915.63" y2="923" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint11_linear_1687_130892" x1="15.158" x2="16" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint12_linear_1687_130892" x1="43.947" x2="45" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint13_linear_1687_130892" x1="67.947" x2="69" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint14_linear_1687_130892" x1="40.974" x2="41.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint15_linear_1687_130892" x1="63.974" x2="64.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint16_linear_1687_130892" x1="79.974" x2="80.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint17_linear_1687_130892" x1="51.974" x2="52.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint18_linear_1687_130892" x1="34.974" x2="35.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint19_linear_1687_130892" x1="23.974" x2="24.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint20_linear_1687_130892" x1="11.158" x2="12" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint21_linear_1687_130892" x1="11.158" x2="12" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint22_linear_1687_130892" x1="15.5" x2="17.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint23_linear_1687_130892" x1="107.95" x2="109" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint24_linear_1687_130892" x1="82.974" x2="83.5" y1="851.4" y2="856" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint25_linear_1687_130892" x1="82.974" x2="83.5" y1="838.4" y2="843" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint26_linear_1687_130892" x1="115.95" x2="117" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint27_linear_1687_130892" x1="87.974" x2="88.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint28_linear_1687_130892" x1="79.947" x2="81" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint29_linear_1687_130892" x1="118.95" x2="120" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint30_linear_1687_130892" x1="100.97" x2="101.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint31_linear_1687_130892" x1="225.32" x2="227" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint32_linear_1687_130892" x1="199.32" x2="201" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint33_linear_1687_130892" x1="159.32" x2="161" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint34_linear_1687_130892" x1="187.32" x2="189" y1="922.26" y2="937" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint35_linear_1687_130892" x1="125.32" x2="127" y1="847.26" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint36_linear_1687_130892" x1="142.32" x2="144" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint37_linear_1687_130892" x1="188.95" x2="190" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint38_linear_1687_130892" x1="173.95" x2="175" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint39_linear_1687_130892" x1="207.16" x2="208" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint40_linear_1687_130892" x1="141.16" x2="142" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint41_linear_1687_130892" x1="169.95" x2="171" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint42_linear_1687_130892" x1="193.95" x2="195" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint43_linear_1687_130892" x1="166.97" x2="167.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint44_linear_1687_130892" x1="189.97" x2="190.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint45_linear_1687_130892" x1="205.97" x2="206.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint46_linear_1687_130892" x1="177.97" x2="178.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint47_linear_1687_130892" x1="160.97" x2="161.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint48_linear_1687_130892" x1="149.97" x2="150.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint49_linear_1687_130892" x1="137.16" x2="138" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint50_linear_1687_130892" x1="137.16" x2="138" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint51_linear_1687_130892" x1="141.5" x2="143.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint52_linear_1687_130892" x1="238.95" x2="240" y1="966.79" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint53_linear_1687_130892" x1="220.97" x2="221.5" y1="855.4" y2="860" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint54_linear_1687_130892" x1="172.97" x2="173.5" y1="825.4" y2="830" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint55_linear_1687_130892" x1="239.95" x2="241" y1="889.79" y2="899" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint56_linear_1687_130892" x1="213.97" x2="214.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint57_linear_1687_130892" x1="231.97" x2="232.5" y1="987.4" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint58_linear_1687_130892" x1="205.95" x2="207" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint59_linear_1687_130892" x1="244.95" x2="246" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint60_linear_1687_130892" x1="226.97" x2="227.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint61_linear_1687_130892" x1="75.974" x2="76.5" y1="796.4" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint62_linear_1687_130892" x1="209.97" x2="210.5" y1="801.4" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint63_linear_1687_130892" x1="120.95" x2="122" y1="791.79" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint64_linear_1687_130892" x1="361.32" x2="363" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint65_linear_1687_130892" x1="335.32" x2="337" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint66_linear_1687_130892" x1="295.32" x2="297" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint67_linear_1687_130892" x1="326.32" x2="328" y1="920.26" y2="935" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint68_linear_1687_130892" x1="278.32" x2="280" y1="833.26" y2="848" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint69_linear_1687_130892" x1="278.32" x2="280" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint70_linear_1687_130892" x1="324.95" x2="326" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint71_linear_1687_130892" x1="309.95" x2="311" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint72_linear_1687_130892" x1="343.16" x2="344" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint73_linear_1687_130892" x1="492.16" x2="493" y1="915.63" y2="923" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint74_linear_1687_130892" x1="554.16" x2="555" y1="879.63" y2="887" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint75_linear_1687_130892" x1="277.16" x2="278" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint76_linear_1687_130892" x1="305.95" x2="307" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint77_linear_1687_130892" x1="329.95" x2="331" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint78_linear_1687_130892" x1="302.97" x2="303.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint79_linear_1687_130892" x1="325.97" x2="326.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint80_linear_1687_130892" x1="341.97" x2="342.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint81_linear_1687_130892" x1="313.97" x2="314.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint82_linear_1687_130892" x1="296.97" x2="297.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint83_linear_1687_130892" x1="250.97" x2="251.5" y1="856.4" y2="861" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint84_linear_1687_130892" x1="264.16" x2="265" y1="807.63" y2="815" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint85_linear_1687_130892" x1="273.16" x2="274" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint86_linear_1687_130892" x1="267.5" x2="269.5" y1="909.5" y2="927" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint87_linear_1687_130892" x1="516.5" x2="518.5" y1="826.5" y2="844" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint88_linear_1687_130892" x1="526.5" x2="528.5" y1="911.5" y2="929" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint89_linear_1687_130892" x1="369.95" x2="371" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint90_linear_1687_130892" x1="349.97" x2="350.5" y1="872.4" y2="877" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint91_linear_1687_130892" x1="375.97" x2="376.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint92_linear_1687_130892" x1="377.95" x2="379" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint93_linear_1687_130892" x1="553.95" x2="555" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint94_linear_1687_130892" x1="349.97" x2="350.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint95_linear_1687_130892" x1="341.95" x2="343" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint96_linear_1687_130892" x1="380.95" x2="382" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint97_linear_1687_130892" x1="521.95" x2="523" y1="962.79" y2="972" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint98_linear_1687_130892" x1="362.97" x2="363.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint99_linear_1687_130892" x1="487.32" x2="489" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint100_linear_1687_130892" x1="553.32" x2="555" y1="807.26" y2="822" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint101_linear_1687_130892" x1="461.32" x2="463" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint102_linear_1687_130892" x1="421.32" x2="423" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint103_linear_1687_130892" x1="449.32" x2="451" y1="922.26" y2="937" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint104_linear_1687_130892" x1="582.32" x2="584" y1="937.26" y2="952" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint105_linear_1687_130892" x1="387.32" x2="389" y1="847.26" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint106_linear_1687_130892" x1="404.32" x2="406" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint107_linear_1687_130892" x1="545.32" x2="547" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint108_linear_1687_130892" x1="450.95" x2="452" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint109_linear_1687_130892" x1="585.95" x2="587" y1="825.79" y2="835" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint110_linear_1687_130892" x1="574.95" x2="576" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint111_linear_1687_130892" x1="521.95" x2="523" y1="796.79" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint112_linear_1687_130892" x1="435.95" x2="437" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint113_linear_1687_130892" x1="469.16" x2="470" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint114_linear_1687_130892" x1="403.16" x2="404" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint115_linear_1687_130892" x1="431.95" x2="433" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint116_linear_1687_130892" x1="511.95" x2="513" y1="862.79" y2="872" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint117_linear_1687_130892" x1="455.95" x2="457" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint118_linear_1687_130892" x1="428.97" x2="429.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint119_linear_1687_130892" x1="451.97" x2="452.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint120_linear_1687_130892" x1="467.97" x2="468.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint121_linear_1687_130892" x1="535.97" x2="536.5" y1="879.4" y2="884" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint122_linear_1687_130892" x1="439.97" x2="440.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint123_linear_1687_130892" x1="575.97" x2="576.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint124_linear_1687_130892" x1="422.97" x2="423.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint125_linear_1687_130892" x1="411.97" x2="412.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint126_linear_1687_130892" x1="547.97" x2="548.5" y1="835.4" y2="840" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint127_linear_1687_130892" x1="399.16" x2="400" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint128_linear_1687_130892" x1="399.16" x2="400" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint129_linear_1687_130892" x1="403.5" x2="405.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint130_linear_1687_130892" x1="500.95" x2="502" y1="966.79" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint131_linear_1687_130892" x1="482.97" x2="483.5" y1="855.4" y2="860" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint132_linear_1687_130892" x1="434.97" x2="435.5" y1="825.4" y2="830" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint133_linear_1687_130892" x1="501.95" x2="503" y1="889.79" y2="899" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint134_linear_1687_130892" x1="475.97" x2="476.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint135_linear_1687_130892" x1="547.97" x2="548.5" y1="937.4" y2="942" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint136_linear_1687_130892" x1="493.97" x2="494.5" y1="987.4" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint137_linear_1687_130892" x1="467.95" x2="469" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint138_linear_1687_130892" x1="563.95" x2="565" y1="953.79" y2="963" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint139_linear_1687_130892" x1="563.95" x2="565" y1="852.79" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint140_linear_1687_130892" x1="506.95" x2="508" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint141_linear_1687_130892" x1="488.97" x2="489.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint142_linear_1687_130892" x1="532.97" x2="533.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint143_linear_1687_130892" x1="337.97" x2="338.5" y1="796.4" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint144_linear_1687_130892" x1="471.97" x2="472.5" y1="801.4" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint145_linear_1687_130892" x1="382.95" x2="384" y1="791.79" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/extra-long-horizontal-pipe.svg b/application/src/main/data/json/system/scada_symbols/extra-long-horizontal-pipe.svg
new file mode 100644
index 0000000000..fac383ed55
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/extra-long-horizontal-pipe.svg
@@ -0,0 +1,426 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="800" height="200" fill="none" version="1.1" viewBox="0 0 800 200"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Extra long horizontal pipe",
+  "description": "Extra long horizontal pipe with fluid and leak visualizations.",
+  "searchTags": [
+    "pipe",
+    "horizontal pipe",
+    "long pipe"
+  ],
+  "widgetSizeX": 4,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "fluid",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill').first();\n\nvar fluidAnimation = ctx.api.cssAnimation(liquidPattern);\n\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            if (elementFlowDirection !== flowDirection || !fluidAnimation) {\n                element.remember('flowDirection', flowDirection);\n                fluidAnimation = animateFlow(liquidPattern, flowDirection);\n            } else {\n                fluidAnimation.play();\n            }\n        } else {\n            if (fluidAnimation) {\n                fluidAnimation.pause();\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        fluidAnimation = animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow) {\n        if (fluidAnimation) {\n            fluidAnimation.speed(ctx.values.flowAnimationSpeed);\n        }\n    }\n} else {\n    if (fluidAnimation) {\n        fluidAnimation.pause();\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetCssAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    return ctx.api.cssAnimate(liquidPattern, 1000).relative(deltaX, 0).loop();\n}",
+      "actions": null
+    },
+    {
+      "tag": "fluid-background",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nif (fluid) {\n    var color = ctx.properties.fluidColor;\n    element.attr({fill: color});\n    element.show();\n} else {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "leak",
+      "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "fluid",
+      "name": "{i18n:scada.symbol.fluid-presence}",
+      "hint": "{i18n:scada.symbol.fluid-presence-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.present}",
+      "falseLabel": "{i18n:scada.symbol.absent}",
+      "stateLabel": "{i18n:scada.symbol.fluid-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flow",
+      "name": "{i18n:scada.symbol.flow-presence}",
+      "hint": "{i18n:scada.symbol.flow-presence-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.present}",
+      "falseLabel": "{i18n:scada.symbol.absent}",
+      "stateLabel": "{i18n:scada.symbol.flow-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flowDirection",
+      "name": "{i18n:scada.symbol.flow-direction}",
+      "hint": "{i18n:scada.symbol.flow-direction-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.forward}",
+      "falseLabel": "{i18n:scada.symbol.reverse}",
+      "stateLabel": "{i18n:scada.symbol.forward}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": true,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flowAnimationSpeed",
+      "name": "{i18n:scada.symbol.flow-animation-speed}",
+      "hint": "{i18n:scada.symbol.flow-animation-speed-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": 1,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "leak",
+      "name": "{i18n:scada.symbol.leak}",
+      "hint": "{i18n:scada.symbol.leak-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.leak-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    }
+  ],
+  "properties": [
+    {
+      "id": "fluidColor",
+      "name": "{i18n:scada.symbol.fluid-color}",
+      "type": "color",
+      "default": "#1EC1F480",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "pipeColor",
+      "name": "{i18n:scada.symbol.pipe-color}",
+      "type": "color",
+      "default": "#FFFFFF",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<path d="m14 64h772v72h-772v-72z" fill="#fff" tb:tag="pipe-background"/><path d="m14 64h772v72h-772v-72z" fill="url(#paint0_linear_2910_72033)"/><path d="m15.5 65.5h769v69h-769v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><rect x="787.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><rect x="14" y="64" width="772" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="772" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><g style="display: none;" tb:tag="leak">
+  <path d="m470.53 93.395c0-0.3006 7.47-0.7515 7.47-0.7515l-7.975 0.1503s-6.461-1.9539-7.874-2.48c-1.212-0.526-11.319 3.3214-12.328 3.4717h-0.202l0.101-0.0751 3.533-3.0812c-0.505 0.3006-8.694 6.1772-9.905 6.6281-1.312 0.3757-11.29 1.1272-12.098 1.503-0.202 0.0752-2.782 0.0752-3.085 0.0752-1.11-0.1503-2.624-0.9019-3.331-1.1273-0.909-0.3006-2.827-1.1273-2.423-1.503 0.404-0.3758 2.928-5.4861 3.836-5.8618 0.808-0.3758 10.455-2.1794 10.858-2.48 0.404-0.3006 1.313-2.48 1.414-2.7054l-1.515 2.4048s-0.807 0.3757-1.716 0.4509c-0.908 0.0752-9.243 1.4279-9.243 1.4279l0.606-2.7055c-0.101 0.1503-1.009 1.8788-1.817 3.1564-0.303 0.526-0.606 0.9769-0.808 1.2775-0.807 1.0522-2.322 3.1564-3.23 3.5321-0.808 0.3758-2.625 0.1503-4.038-0.4509s-5.034-1.7756-5.942-2.0011c-0.909-0.3006-2.538-2.057-3.043-2.7334v-0.0751c-0.504-0.6764-0.605-1.954-0.303-2.5552 0.404-0.6763 0.303-1.6533 0.606-2.7054s5.653-4.96 5.653-4.96-0.101 0-0.201 0.0752c-0.606 0.3006-2.928 1.503-4.039 2.1794-1.211 0.7515-2.119 1.1272-2.523 1.1272-0.101 0-0.202-0.0751-0.404-0.1503-0.606-0.526-1.817-2.0291-2.726-3.3066-1.11-1.5782-4.442-4.0582-4.946-4.6594-0.505-0.6012 0.706-3.6824 0.908-3.983-0.202 0.3006-1.918 3.0812-2.322 3.4569l-0.101 0.0752c-0.504 0.1503-1.817-0.3758-3.028-0.9018-1.413-0.6012-5.451-0.6764-6.36-0.977s-6.966-2.7054-7.369-2.8557c0.303 0.1503 2.523 1.4279 4.441 2.5551 0.707 0.3758 1.313 0.7515 1.717 1.0521 1.918 1.2025 0.908 0.6012 2.322 0.8267 1.312 0.2254 4.542 1.0521 6.359 0.977 1.717-0.0752 2.726 0.526 3.635 1.1272 0.908 0.6012 1.615 2.5552 4.038 4.3588 2.422 1.8036 2.725 4.8097 3.23 5.4109 0.101 0.0751 0.101 0.1503 0.101 0.2254 0.101 0.6764-1.312 1.9539-1.918 3.2315-0.707 1.3527-3.029 1.2024-3.836 1.2024-0.909 0.0752-1.313 0.0752-1.716 0.4509-0.404 0.3758-2.726-0.1503-3.534-0.1503-0.908 0.0752-4.34 1.3528-5.249 0.7515-0.909-0.6012 1.413-4.1333 1.312-4.8096v-0.3006c-0.101-0.3758-0.101-0.5261-0.605-1.3527-0.505-0.9019 2.624-2.7055 2.826-2.7806-0.202 0.0751-2.12 0.8266-2.524 1.1272-0.403 0.3006-0.706 0.9018-0.807 0.977 0 0-1.413-0.6012-2.322-0.8267-0.909-0.3006-4.139-1.0521-5.048-1.3527-0.908-0.3006-2.523-1.3728-3.028-2.0492-0.505-0.6012-8.189-3.6274-8.694-4.3037-0.504-0.6012-3.723-0.5593-3.723-0.5593s1.366 1.1071 2.228 1.1071c0.569 0 0.688-0.0218 0.991 0.354 0.302 0.3757 2.102 0.9387 3.564 1.6077 1.625 0.7444 3.878 1.3075 4.322 1.8694 1.009 1.2775 2.12 1.7486 3.028 2.3498 0.909 0.6012 1.514 1.2024 2.827 1.503 1.312 0.2254 3.129 0.4509 4.543 0.7515 1.413 0.2255 0.504 0.977 0.605 1.6533 0.101 0.6764 0.505 0.3006 0.505 0.977 0.101 0.6763-0.303 0.977-0.707 1.3527-0.101 0.0752-0.101 0.1503-0.202 0.2255-0.302 0.6012-0.605 1.8787-1.312 2.4799-0.808 0.6764-7.167 3.7576-8.48 4.1334-0.101 0-0.202 0.0751-0.303 0.0751-0.504 0.0752-1.312 0.1503-2.221 0.0752-1.918-0.0752-4.239-0.3006-5.047-0.6764-1.413-0.6012-4.24-1.7285-4.745-2.7054-0.504-0.977-4.744-2.7055-5.653-3.3067s-10.87-5.6109-11.678-5.2351c-0.807 0.3758-4.442-0.3758-8.076-0.5261-1.817-0.0751-3.23-0.4509-4.744-1.1272-1.515-0.6012-3.13-1.4279-5.452-2.2546-4.442-1.6533-9.287-6.6132-9.59-6.989 0.202 0.3006 1.615 2.5551 2.524 3.1563 0.908 0.6013 2.423 1.8037 2.423 1.8037l-2.726-0.5261s2.322 0.8267 3.634 1.1273c1.413 0.2254 1.514 1.2024 4.24 2.4048 2.827 1.1273 6.562 2.9309 7.47 3.2315 0.909 0.3006 1.817 0.5261 2.726 0.8267s7.067-0.0752 8.48 0.1503c1.413 0.2254 3.23 0.8266 3.23 1.1272s0 0.3006-1.211 1.0522c-1.212 0.7515-7.47 0.7515-7.874 0.8266-0.404 0-3.13-0.4509-4.947-0.0751-1.716 0.4509-4.442-0.3758-4.946-0.3758-0.404 0 2.725 0.8267 3.23 0.8267 0.404 0 3.533 0.1503 4.038 0.0751 0.404 0-0.404 0.3758-0.808 0.3758-0.403 0-0.807 1.0521-1.211 1.4278-0.404 0.3758-1.514 2.1043-2.322 3.1564-0.807 1.0521 0.404 3.3066 0.404 3.3066s-0.202-1.6533 0.202-2.3296c0.404-0.6764 1.11-1.7285 1.615-1.7285 0.404 0 0.303-1.3527 1.918-2.4049 1.615-1.1272 3.029-1.2024 4.745-1.2775 1.817-0.0752 13.764 3.6824 16.159 4.4339 1.708 0.5359 3.292 2.0036 4.604 2.2291 1.413 0.2254 5.956 1.2775 9.086 2.1042 3.23 0.8267 8.479 4.4341 8.479 4.4341h-0.201c-0.404 0-1.313 0-2.019-0.226-0.808-0.225-3.837-1.653-4.543-1.9536l-0.101-0.0751 0.101 0.0751c0.202 0.0756 0.505 0.3006 0.908 0.5256 0.303 0.226 1.212 0.827 1.817 1.203 0.303 0.15 0.505 0.301 0.505 0.301-0.101 0-6.106-1.122-8.563-0.561s-10.073 6.873-10.073 6.873 7.971-5.035 10.817-5.536c2.494-0.439 5.148-0.207 7.648 0.089 2.537 0.302 5.037 0.788 5.219 0.788 0.403 0 1.413 0.902 2.322 1.202 0.908 0.301 4.34 2.706 4.845 3.382 0.505 0.601-1.716 5.035-1.312 4.735 0.404-0.376 1.817-4.059 2.221-4.134 0.404 0 0.504 0.301 0.908 0.601 0.505 0.301 2.524 3.157 3.029 3.157 0.404 0-0.808 0.676-1.212 1.052-0.403 0.376-0.706 1.728-0.605 2.33 0.101 0.601-1.01 1.277-1.212 1.352 0.202-0.075 1.716-0.751 1.615-1.052 0-0.3 1.01-2.705 1.919-3.081 0.807-0.376 1.817 0.225 2.725 0.451 0.909 0.301 2.12 2.33 2.625 2.63 0.505 0.301 2.423 1.321 2.927 1.998 0.505 0.601 3.13 1.459 3.635 2.136 0.504 0.601-1.817 3.456-2.12 4.734-0.303 1.353 0.908 4.584 0.908 4.584s-0.303-2.63-0.404-3.983c-0.1-1.277 1.919-3.081 2.322-3.156 0.404 0 0.909 0.3 1.414 0.902 0.504 0.601 1.211 2.555 1.716 3.231 0.505 0.601 0.606 1.654 1.615 2.856 0.606 0.827 0.909 1.202 1.01 1.428-0.202-0.451-0.606-1.503-0.606-1.804 0-0.3-1.615-2.254-1.615-2.856-0.101-0.676-2.221-4.509-2.524-6.463-0.202-1.953 2.322-7.74 2.12-8.717-0.101-0.977-1.514-1.578-1.615-2.856-0.101-1.353 1.817-3.757 4.845-4.283 2.625-0.451 7.471 0.751 8.783 1.052 0.101 0 0.101 0 0.202 0.075h0.101c-0.202-0.075-3.735-1.428-5.553-1.954-1.817-0.526-4.34-1.052-4.542-1.353 0-0.3 1.615-1.728 2.423-2.104 0.807-0.3758 2.523-1.1273 3.836-1.2024 1.312-0.0752 1.817 0.2254 2.725 0.8266 0.909 0.6012 3.186 0.6012 5.609 1.8038 2.221 1.127 5.35 2.555 5.653 2.63-0.303-0.225-5.249-3.307-4.845-3.682 0.403-0.376 6.949-0.5263 9.977-0.7518 3.13-0.1503 16.496-3.0812 17.808-3.1563 1.313-0.0752 2.847 0 6.263 0.2545 3.412 0 7.854-1.4865 7.854-1.4865s-3.836-1.2776-3.937-1.5782zm-68.711 17.389c-0.404 0.075-1.514 0.301-1.918 0-0.505-0.376-2.12-0.751-2.625-1.954-0.403-0.977-2.927-2.405-3.836-2.931-0.202-0.15-0.302-0.15-0.302-0.15 1.009-0.376 6.258 0.752 6.763 1.127 0.505 0.376 0 1.578 0.505 1.954s1.514 1.954 1.514 1.954h-0.101zm1.515-0.902c-0.101-0.15-0.202-0.3-0.303-0.375-0.505-0.602-1.414-0.602-1.515-1.203-0.101-0.676 0.808-1.052 1.212-1.428 0.404-0.375 3.634 0.451 3.634 0.451s6.461 2.555 6.663 3.908c0 0.376 0 0.752-0.101 1.052-0.202 0.752-0.606 1.278-0.505 1.954 0.101 0.977 0.202 2.33-1.11 2.029-1.313-0.225-2.019-2.179-4.442-3.682-1.918-1.278-2.928-2.104-3.533-2.706zm10.498-5.786c-0.302 0.375-0.706 0.902-1.009 1.428-0.707 1.352-0.606 2.329-1.514 2.404-0.909 0.076-1.818-0.225-3.231-0.826-0.706-0.301-1.413-0.526-2.12-0.752-0.706-0.225-1.11-0.375-1.11-0.375s1.615-1.128 2.624-0.827c0.909 0.3 1.414 0.225 1.818-0.075 0.403-0.376 5.148-1.954 5.552-2.029-0.101 0.075-0.505 0.451-1.01 1.052zm3.231-4.058c-0.404 0.375-1.615 1.728-1.615 1.728h-0.101c-0.404 0.075-2.726 0.526-4.24 1.202-0.909 0.376-3.231 1.278-5.654 1.879-0.201 0.075-0.504 0.151-0.706 0.226-1.918 0.451-3.735 0.751-4.846 0.526-2.725-0.526-5.047-1.654-6.864-1.879-1.818-0.225-2.221 0.15-3.635-0.451-1.413-0.601-1.918-1.202-3.331-2.104s-2.019-1.8789-2.928-2.4801c-0.605-0.3758 0.346-0.451 0.346-0.977 0.569-0.4761 1.139-0.4761 1.139-0.4761s0.837-0.3506 2.15-0.8015c1.312-0.3757 5.425-1.962 9.237-1.4128 3.345 0.4822 5.382-0.0192 8.732 0.4359 3.611 0.4906 4.744-0.4219 8.076 1.006 3.23 1.4279 7.571 0.6473 7.571 0.6473s-2.927 2.5551-3.331 2.9313z" fill="#5C5A5A" style=""/>
+  <path d="m379.31 95.377c-0.505 0.3006-1.11 0.6012-1.716 0.6764-1.11 0.1503-2.221 0-3.23-0.1503-4.139-0.6764-8.379-2.0291-11.004-4.5091-0.505-0.4509-1.009-0.9769-1.716-1.3527-1.615-0.9018-4.031-3.9565-6.05-3.8813-6.832-3.3215-14.318-2.0714-17.649-3.875 1.514 0.6012 9 1.0319 10.817 1.1071 3.533 0.1503 5.694 1.6607 7.741 2.3921 1.695 0.6056 4.131 2.4535 5.04 3.0547s5.148 2.3297 5.653 3.3066c0.505 0.977 3.332 2.1043 4.745 2.7055 1.413 0.4509 5.754 0.8266 7.369 0.526z" fill="#8B8B8B" style=""/>
+  <path d="m406.87 86.118c-0.202 1.3528-0.908 2.7055-2.019 3.7576-0.202 0.2255-0.505 0.4509-0.807 0.5261-0.909 0.3757-2.019 0.1503-3.029 0.2254-0.908 0.0752-1.716 0.3758-2.625 0.4509-0.504 0.0752-1.11 0.0752-1.615 0-1.11-0.0751-1.896-0.4889-3.245 0-0.843 0.6934-2.067 0.6769-3.206 0.6769-0.419 0-0.845 0.1423-0.845-0.3964 0-0.4081 0.216-0.3556 0.276-0.7107 0.202-0.6764 0.937-2.0915 1.139-2.7679 0.101-0.3757 0.531-0.7097 0.632-1.0855 0-0.1503 0-0.5261 0.202-0.6764v0.3006c0.101 0.6764-1.174 3.5693-0.265 4.1705 0.908 0.6012 3.394-0.0371 4.202-0.1123 0.908-0.0751 3.129 0.4509 3.533 0.1503 0.404-0.3757 0.808-0.3757 1.716-0.4509 0.909-0.0751 3.13 0.1503 3.836-1.2024 0.707-1.2024 2.019-2.48 1.918-3.2315 0.202 0 0.202 0.2254 0.202 0.3757z" fill="#8B8B8B" style=""/>
+  <path d="m413.73 79.07c-0.808 0.7515-1.918 1.3527-2.827 1.9539-1.211 0.6764-2.322 1.4279-3.533 2.1043-0.101-0.3006-0.404-0.6012-0.505-0.977 0.101 0.1503 0.303 0.1503 0.404 0.1503 0.404 0 1.312-0.3757 2.524-1.1273 1.009-0.6012 3.331-1.7284 3.937-2.1042z" fill="#8B8B8B" style=""/>
+  <path d="m397.58 73.734c-0.1 0.0752-0.1 0.1503-0.201 0.2255-0.101 0.0751-0.202 0.0751-0.303 0.0751-0.404 0.0752-0.808 0.0752-1.313 0-1.514-0.1503-2.826-0.8266-4.34-1.1272-0.707-0.1503-1.515-0.1503-2.221-0.3006-0.606-0.0752-1.212-0.2255-1.818-0.451-0.706-0.2254-1.514-0.3757-2.22-0.6012-2.019-1.2024-4.442-2.5551-4.442-2.5551s6.562 2.5551 7.47 2.8557c0.909 0.3006 4.947 0.3758 6.36 0.977 1.312 0.6012 2.524 1.1273 3.028 0.9018z" fill="#8B8B8B" style=""/>
+  <path d="m390.31 84.707c-1.414-0.9018-3.231-1.2024-5.048-1.503-0.707-0.0752-1.413-0.2255-1.918-0.5261-0.404-0.2254-0.707-0.526-1.01-0.8266-0.706-0.6764-0.987-0.5494-1.693-1.2258-0.303-0.3006-0.57-0.5536-1.139-1.1071-0.943-0.3589-1.139 0-2.277-0.5536-1.139-1.1072-3.372-1.5178-4.886-2.4948-0.303-0.3757-1.175-0.6763-1.377-0.8266-0.505-0.3006-3.416-0.5536-3.416-0.5536s4.793-0.198 5.298 0.4784c0.504 0.6012 5.685 2.742 7.169 3.2019 0.764 0.2368 2.12 2.8557 3.028 3.1563 0.909 0.3006 4.139 1.0521 5.048 1.3527 0.908 0.3006 2.322 0.8267 2.322 0.8267 0.1 0.1503 0 0.3757-0.101 0.6012z" fill="#8B8B8B" style=""/>
+  <path d="m389.4 88.69c-0.101 0.3757-0.202 0.8266-0.303 0.9769 0 0.6012-0.101 1.2776-0.606 1.7285-0.202 0.2254-0.504 0.3757-0.807 0.526-0.909 0.5261-1.817 0.977-2.827 1.5031-0.606 0.3006-1.211 0.6763-1.918 0.9018-0.505 0.1503-1.009 0.3006-1.514 0.526-0.505 0.2255-1.01 0.4509-1.514 0.6764-0.909 0.3006-1.818 0.5261-2.827 0.5261h-0.202c-0.202-0.0752-0.202-0.2255-0.101-0.3758 0.101-0.0751 0.202-0.1503 0.303-0.1503 0.909 0 1.716 0 2.221-0.0752 0.101 0 0.202-0.0751 0.303-0.0751 1.312-0.3758 7.672-3.457 8.48-4.1333 0.706-0.6764 1.009-1.9539 1.312-2.5551z" fill="#8B8B8B" style=""/>
+  <path d="m405.56 104.92c-1.01 0.451-2.12 0.827-3.231 1.127-0.807 0.151-1.615 0.301-2.423 0.151-0.605-0.076-1.11-0.376-1.615-0.602-0.908-0.375-1.918-0.526-2.927-0.751-1.01-0.226-2.019-0.376-3.13-0.526-0.404 0-0.807-0.075-1.211-0.15-0.505-0.076-0.909-0.301-1.414-0.451-0.908-0.376-1.716-0.752-2.523-1.203-0.707-0.451-1.414-0.902-2.019-1.428-1.01-0.901-2.928-2.0287-3.029-3.3063 0-0.3006 0.101-0.6763 0.303-0.9018 0 0.5261 0.101 1.3527 0.707 1.7285 0.908 0.6012 1.514 1.5786 2.927 2.4796 1.414 0.902 1.918 1.503 3.332 2.105 1.413 0.601 1.817 0.225 3.634 0.451 1.817 0.225 4.139 1.427 6.864 1.878 1.414 0.376 3.534 0 5.755-0.601z" fill="#8B8B8B" style=""/>
+  <path d="m385.46 102.07v0.376c-1.514-0.075-2.928-0.451-4.341-0.977-0.606-0.376-1.514-0.977-1.817-1.203-0.303-0.225-0.707-0.4505-0.909-0.5257 0.707 0.3007 3.735 1.7287 4.543 1.9537 0.707 0.226 1.615 0.226 2.019 0.226 0.202 0.075 0.303 0.075 0.505 0.15z" fill="#8B8B8B" style=""/>
+  <path d="m415.45 102.44c-0.808 0-1.616 0.225-2.322 0.451-2.827 0.827-5.553 1.578-8.379 2.254v-0.075c0.202-0.075 0.505-0.15 0.707-0.225 2.422-0.677 4.744-1.503 5.653-1.879 1.514-0.676 3.836-1.127 4.24-1.202 0.101 0.3 0.101 0.676 0.101 0.676z" fill="#8B8B8B" style=""/>
+  <path d="m413.83 104.1c-0.101 0.15-0.303 0.375-0.404 0.526-0.101 0.3-0.303 0.526-0.404 0.826-0.303 0.827-0.404 1.654-0.707 2.405-0.1 0.151-0.1 0.301-0.201 0.451-0.303 0.226-0.707 0.301-1.111 0.226-0.404-0.076-0.807-0.301-1.11-0.451-0.909-0.451-1.918-0.902-2.928-1.278-0.303-0.075-0.606-0.225-0.908-0.451 0.605 0.226 1.413 0.451 2.12 0.752 1.413 0.601 2.321 0.826 3.23 0.826 0.908-0.075 0.808-1.052 1.514-2.404 0.202-0.526 0.505-0.977 0.909-1.428z" fill="#8B8B8B" style=""/>
+  <path d="m427.36 105c-0.202-0.075-0.202-0.075-0.303-0.075-2.019-0.601-4.139-1.203-6.259-1.729-1.01-0.3-2.12-0.526-3.23-0.676-0.202 0-0.404-0.075-0.505-0.15-0.202-0.151-0.202-0.301-0.101-0.526 0.101-0.075 0.101-0.151 0.202-0.151 0.202 0.301 2.826 0.827 4.543 1.353 1.918 0.526 5.451 1.879 5.653 1.954z" fill="#8B8B8B" style=""/>
+  <path d="m424.94 89.742c-0.101 0.3006-0.202 0.6012-0.404 0.8267-0.807 1.6533-2.019 3.1563-3.331 4.5842-0.101 0.1503-0.303 0.3006-0.505 0.3757-0.404 0.1503-0.807 0-1.11-0.0751-2.221-0.7515-1.501-0.2255-3.722-0.977-0.404-0.1503-0.807-0.2254-1.11-0.4509-0.404-0.2255-0.47-0.4122-1.091-0.6675-0.569-0.2343-0.735-0.253-1.138-0.5536-0.404-0.3006-0.57 0-0.57 0-0.201-0.2255-0.569-0.5536 0-0.5536h0.57c0.569 0 0.311 0.5723 1.219 0.8729 0.909 0.3006 1.804 0.526 3.217 1.0521 1.413 0.6012 3.23 0.8267 4.038 0.4509 0.808-0.3757 2.423-2.48 3.23-3.5321 0.101-0.3757 0.404-0.8267 0.707-1.3527z" fill="#8B8B8B" style=""/>
+  <path d="m434.43 87.486c-0.101 0.0752-0.202 0.1503-0.404 0.2255-1.312 0.3006-2.524 0.6763-3.836 0.9769-0.808 0.2255-1.615 0.451-2.524 0.6013-0.404 0.0751-1.817 0.4509-1.615-0.0752 0-0.0751 0-0.0751 0.101-0.0751l8.278-1.6534z" fill="#8B8B8B" style=""/>
+  <path d="m443.84 97.232-3.416 0.5536c-1.708 0-2.689 0.2731-3.9 0.4234-1.515 0.2254-3.227 0.0994-4.64 0.4752-0.706 0.1503-1.494 0.3006-2.201 0.3006-0.404 0-1.211-0.0751-1.514-0.3006 0.303 0.0752 0.606 0.0752 0.808-0.0751 0.807-0.3758 7.849-0.851 9.061-1.2268 1.211-0.3757 5.399 0.1503 5.802-0.1503z" fill="#8B8B8B" style=""/>
+  <path d="m471.04 92.73c-0.101 0.0751-0.101 0.1503-0.202 0.1503-0.101 0.0751-0.303 0-0.403 0-3.534-0.4509-5.982-2.2904-9.516-2.2904-1.716 0-10.817 3.3214-11.387 3.3214 0-0.5536 1.139-1.1072 2.278-1.6607 1.11-0.0752 10.145-2.5267 11.356-2.0006 1.413 0.5261 7.773 2.48 7.874 2.48z" fill="#8B8B8B" style=""/>
+  <path d="m402.02 111.54c-1.212-0.151-2.625 0.15-3.533-0.451-0.808-0.451-1.01-1.278-1.515-1.879-0.706-0.977-2.019-1.578-2.927-2.48-0.202-0.15-0.505-0.451-0.505-0.676v-0.075c0.909 0.526 3.432 1.954 3.836 2.93 0.505 1.128 2.12 1.579 2.625 1.954 0.404 0.301 1.514 0.151 1.918 0 0 0.151 0.101 0.376 0.101 0.677z" fill="#8B8B8B" style=""/>
+  <path d="m412.92 115.29c-0.101 0.526-0.303 1.052-0.605 1.503-0.101 0.3-0.404 0.601-0.707 0.601s-0.404-0.15-0.606-0.301c-1.11-0.977-2.221-1.878-3.129-2.931-0.202-0.225-0.404-0.526-0.707-0.751-0.404-0.451-0.908-0.752-1.413-1.203-0.909-0.676-1.716-1.503-2.423-2.329 0.606 0.601 1.615 1.428 3.533 2.705 2.423 1.503 3.029 3.457 4.442 3.683 1.413 0.225 1.211-1.052 1.111-2.029-0.101-0.677 0.302-1.278 0.504-1.954v0.3c0 0.526 0.101 0.977 0.101 1.503-0.101 0.301 0 0.752-0.101 1.203z" fill="#8B8B8B" style=""/>
+ </g><defs>
+  <linearGradient id="paint0_linear_2910_72033" x1="214.72" x2="214.68" y1="64" y2="136.01" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <pattern id="liquid" width="172" height="72" patternUnits="userSpaceOnUse"><rect x="-172" width="688" height="72" fill="url(#baseLiquid)" stroke-width="0"/></pattern>
+  <pattern id="baseLiquid" width="172" height="72" patternTransform="translate(14,-8)" patternUnits="userSpaceOnUse">
+   <circle transform="rotate(-90)" cx="-15" cy="21" r="8" fill="url(#paint28_linear_1182_32781-5)"/>
+   <circle transform="rotate(-90)" cx="-15" cy="150" r="8" fill="url(#paint29_linear_1182_32781-1)"/>
+   <circle transform="rotate(-90)" cx="-16" cy="113" r="8" fill="url(#paint30_linear_1182_32781-7)"/>
+   <circle transform="rotate(-90)" cx="-58" cy="34" r="8" fill="url(#paint31_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-58" cy="155" r="8" fill="url(#paint32_linear_1182_32781-3)"/>
+   <circle transform="rotate(-90)" cx="-26" cy="33" r="5" fill="url(#paint33_linear_1182_32781-1)"/>
+   <circle transform="rotate(-90)" cx="-26" cy="162" r="5" fill="url(#paint34_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-37" cy="5" r="5" fill="url(#paint35_linear_1182_32781-6)"/>
+   <circle transform="rotate(-90)" cx="-8" cy="94" r="4" fill="url(#paint36_linear_1182_32781-9)"/>
+   <circle transform="rotate(-90)" cx="-60" cy="72" r="4" fill="url(#paint37_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-37" cy="112" r="5" fill="url(#paint38_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-39" cy="59" r="5" fill="url(#paint39_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-62" cy="115" r="5" fill="url(#paint40_linear_1182_32781-6)"/>
+   <circle transform="rotate(-90)" cx="-42" cy="139" r="5" fill="url(#paint41_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-21" cy="76" r="5" fill="url(#paint42_linear_1182_32781-1)"/>
+   <circle transform="rotate(-90)" cx="-50.5" cy="126.5" r="2.5" fill="url(#paint43_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-46.5" cy="169.5" r="2.5" fill="url(#paint44_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-9.5" cy="57.5" r="2.5" fill="url(#paint45_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-35.5" cy="96.5" r="2.5" fill="url(#paint46_linear_1182_32781-9)"/>
+   <circle transform="rotate(-90)" cx="-23.5" cy="91.5" r="2.5" fill="url(#paint47_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-40.5" cy="22.5" r="2.5" fill="url(#paint48_linear_1182_32781-88)"/>
+   <circle transform="rotate(-90)" cx="-23.5" cy="124.5" r="2.5" fill="url(#paint49_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-47.5" cy="86.5" r="2.5" fill="url(#paint50_linear_1182_32781-6)"/>
+   <circle transform="rotate(-90)" cx="-21.5" cy="51.5" r="2.5" fill="url(#paint51_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-51.5" cy="48.5" r="2.5" fill="url(#paint52_linear_1182_32781-3)"/>
+   <circle transform="rotate(-90)" cx="-64" cy="14" r="4" fill="url(#paint53_linear_1182_32781-83)"/>
+   <circle transform="rotate(-90)" cx="-64" cy="135" r="4" fill="url(#paint54_linear_1182_32781-33)"/>
+   <circle transform="rotate(-90)" cx="-58.5" cy="95.5" r="9.5" fill="url(#paint55_linear_1182_32781-8)"/>
+   <path d="m0 0h172v72h-172z" fill="url(#paint84_linear_1182_32781-8)" stroke-width=".57735"/>
+  </pattern>
+  <linearGradient id="paint28_linear_1182_32781-5" x1="19.316" x2="21" y1="8.2632" y2="23" gradientTransform="translate(-36,6)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint29_linear_1182_32781-1" x1="148.32" x2="150" y1="8.2632" y2="23" gradientTransform="translate(-165,135)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint30_linear_1182_32781-7" x1="111.32" x2="113" y1="9.2632" y2="24" gradientTransform="translate(-129,97)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint31_linear_1182_32781-4" x1="32.316" x2="34" y1="51.263" y2="66" gradientTransform="translate(-92,-24)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint32_linear_1182_32781-3" x1="153.32" x2="155" y1="51.263" y2="66" gradientTransform="translate(-213,97)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint33_linear_1182_32781-1" x1="31.947" x2="33" y1="21.789" y2="31" gradientTransform="translate(-59,7)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint34_linear_1182_32781-4" x1="160.95" x2="162" y1="21.789" y2="31" gradientTransform="translate(-188,136)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint35_linear_1182_32781-6" x1="3.9474" x2="5" y1="32.79" y2="42" gradientTransform="translate(-42,-32)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint36_linear_1182_32781-9" x1="93.158" x2="94" y1="4.6316" y2="12" gradientTransform="translate(-102,86)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint37_linear_1182_32781-4" x1="71.158" x2="72" y1="56.632" y2="64" gradientTransform="translate(-132,12)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint38_linear_1182_32781-2" x1="110.95" x2="112" y1="32.79" y2="42" gradientTransform="translate(-149,75)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint39_linear_1182_32781-2" x1="57.947" x2="59" y1="34.79" y2="44" gradientTransform="translate(-98,20)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint40_linear_1182_32781-6" x1="113.95" x2="115" y1="57.79" y2="67" gradientTransform="translate(-177,53)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint41_linear_1182_32781-4" x1="137.95" x2="139" y1="37.79" y2="47" gradientTransform="translate(-181,97)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint42_linear_1182_32781-1" x1="74.947" x2="76" y1="16.789" y2="26" gradientTransform="translate(-97,55)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint43_linear_1182_32781-2" x1="125.97" x2="126.5" y1="48.395" y2="53" gradientTransform="translate(-177,76)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint44_linear_1182_32781-8" x1="168.97" x2="169.5" y1="44.395" y2="49" gradientTransform="translate(-216,123)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint45_linear_1182_32781-8" x1="56.974" x2="57.5" y1="7.3947" y2="12" gradientTransform="translate(-67,48)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint46_linear_1182_32781-9" x1="95.974" x2="96.5" y1="33.395" y2="38" gradientTransform="translate(-132,61)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint47_linear_1182_32781-2" x1="90.974" x2="91.5" y1="21.395" y2="26" gradientTransform="translate(-115,68)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint48_linear_1182_32781-88" x1="21.974" x2="22.5" y1="38.395" y2="43" gradientTransform="translate(-63,-18)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint49_linear_1182_32781-8" x1="123.97" x2="124.5" y1="21.395" y2="26" gradientTransform="translate(-148,101)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint50_linear_1182_32781-6" x1="85.974" x2="86.5" y1="45.395" y2="50" gradientTransform="translate(-134,39)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint51_linear_1182_32781-8" x1="50.974" x2="51.5" y1="19.395" y2="24" gradientTransform="translate(-73,30)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint52_linear_1182_32781-3" x1="47.974" x2="48.5" y1="49.395" y2="54" gradientTransform="translate(-100,-3)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint53_linear_1182_32781-83" x1="13.158" x2="14" y1="60.632" y2="68" gradientTransform="translate(-78,-50)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint54_linear_1182_32781-33" x1="134.16" x2="135" y1="60.632" y2="68" gradientTransform="translate(-199,71)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint55_linear_1182_32781-8" x1="93.5" x2="95.5" y1="50.5" y2="68" gradientTransform="translate(-154,37)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint84_linear_1182_32781-8" x1="248" x2="248" y1="1.8513e-7" y2="72" gradientTransform="scale(.33333 1)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" offset=".10895"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".11331"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".88736"/>
+   <stop stop-color="#727171" offset=".89138"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/extra-long-vertical-pipe.svg b/application/src/main/data/json/system/scada_symbols/extra-long-vertical-pipe.svg
new file mode 100644
index 0000000000..6edd1a1bad
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/extra-long-vertical-pipe.svg
@@ -0,0 +1,438 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200" height="800" fill="none" version="1.1" viewBox="0 0 200 800" xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg">
+ <tb:metadata><![CDATA[{
+  "title": "Extra long vertical pipe",
+  "description": "Extra long vertical pipe with fluid and leak visualizations.",
+  "searchTags": [
+    "pipe",
+    "vertical pipe",
+    "long pipe"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 4,
+  "tags": [
+    {
+      "tag": "fluid",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill').first();\n\nvar fluidAnimation = ctx.api.cssAnimation(liquidPattern);\n\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            if (elementFlowDirection !== flowDirection || !fluidAnimation) {\n                element.remember('flowDirection', flowDirection);\n                fluidAnimation = animateFlow(liquidPattern, flowDirection);\n            } else {\n                fluidAnimation.play();\n            }\n        } else {\n            if (fluidAnimation) {\n                fluidAnimation.pause();\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        fluidAnimation = animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow) {\n        if (fluidAnimation) {\n            fluidAnimation.speed(ctx.values.flowAnimationSpeed);\n        }\n    }\n} else {\n    if (fluidAnimation) {\n        fluidAnimation.pause();\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetCssAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    return ctx.api.cssAnimate(liquidPattern, 1000).relative(deltaX, 0).loop();\n}",
+      "actions": null
+    },
+    {
+      "tag": "fluid-background",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nif (fluid) {\n    var color = ctx.properties.fluidColor;\n    element.attr({fill: color});\n    element.show();\n} else {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "leak",
+      "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "fluid",
+      "name": "{i18n:scada.symbol.fluid-presence}",
+      "hint": "{i18n:scada.symbol.fluid-presence-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.present}",
+      "falseLabel": "{i18n:scada.symbol.absent}",
+      "stateLabel": "{i18n:scada.symbol.fluid-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flow",
+      "name": "{i18n:scada.symbol.flow-presence}",
+      "hint": "{i18n:scada.symbol.flow-presence-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.present}",
+      "falseLabel": "{i18n:scada.symbol.absent}",
+      "stateLabel": "{i18n:scada.symbol.flow-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flowDirection",
+      "name": "{i18n:scada.symbol.flow-direction}",
+      "hint": "{i18n:scada.symbol.flow-direction-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.forward}",
+      "falseLabel": "{i18n:scada.symbol.reverse}",
+      "stateLabel": "{i18n:scada.symbol.forward}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": true,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flowAnimationSpeed",
+      "name": "{i18n:scada.symbol.flow-animation-speed}",
+      "hint": "{i18n:scada.symbol.flow-animation-speed-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": 1,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "leak",
+      "name": "{i18n:scada.symbol.leak}",
+      "hint": "{i18n:scada.symbol.leak-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.leak-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    }
+  ],
+  "properties": [
+    {
+      "id": "fluidColor",
+      "name": "{i18n:scada.symbol.fluid-color}",
+      "type": "color",
+      "default": "#1EC1F480",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "pipeColor",
+      "name": "{i18n:scada.symbol.pipe-color}",
+      "type": "color",
+      "default": "#FFFFFF",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+ <path d="m64 786v-772h72v772h-72z" fill="#fff" tb:tag="pipe-background"/>
+ <path d="m64 786v-772h72v772h-72z" fill="url(#paint0_linear_2910_72034)"/>
+ <path d="m65.5 784.5v-769h69v769h-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ <rect transform="rotate(-90 51.5 798.5)" x="51.5" y="798.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ <rect transform="rotate(-90 51.5 12.5)" x="51.5" y="12.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ <rect transform="rotate(90)" x="14" y="-136" width="772" height="72" fill="#1ec1f4" stroke-width="0" style="display:none" tb:tag="fluid-background"/>
+ <rect transform="rotate(90)" x="14" y="-136" width="772" height="72" fill="url(#liquid)" stroke-width="0" style="display:none" tb:tag="fluid"/>
+ <g style="display:none" tb:tag="leak">
+  <path d="m93.395 329.47c-0.3006 0-0.7515-7.47-0.7515-7.47l0.1503 7.975s-1.9539 6.461-2.48 7.874c-0.526 1.212 3.3214 11.319 3.4717 12.328v0.202l-0.0751-0.101-3.0812-3.533c0.3006 0.505 6.1772 8.694 6.6281 9.905 0.3757 1.312 1.1272 11.29 1.503 12.098 0.0752 0.202 0.0752 2.782 0.0752 3.085-0.1503 1.11-0.9019 2.624-1.1273 3.331-0.3006 0.909-1.1273 2.827-1.503 2.423-0.3758-0.404-5.4861-2.928-5.8618-3.836-0.3758-0.808-2.1794-10.455-2.48-10.858-0.3006-0.404-2.48-1.313-2.7054-1.414l2.4048 1.515s0.3757 0.807 0.4509 1.716c0.0752 0.908 1.4279 9.243 1.4279 9.243l-2.7055-0.606c0.1503 0.101 1.8788 1.009 3.1564 1.817 0.526 0.303 0.9769 0.606 1.2775 0.808 1.0522 0.807 3.1564 2.322 3.5321 3.23 0.3758 0.808 0.1503 2.625-0.4509 4.038s-1.7756 5.034-2.0011 5.942c-0.3006 0.909-2.057 2.538-2.7334 3.043h-0.0751c-0.6764 0.504-1.954 0.605-2.5552 0.303-0.6763-0.404-1.6533-0.303-2.7054-0.606s-4.96-5.653-4.96-5.653 0 0.101 0.0752 0.201c0.3006 0.606 1.503 2.928 2.1794 4.039 0.7515 1.211 1.1272 2.119 1.1272 2.523 0 0.101-0.0751 0.202-0.1503 0.404-0.526 0.606-2.0291 1.817-3.3066 2.726-1.5782 1.11-4.0582 4.442-4.6594 4.946-0.6012 0.505-3.6824-0.706-3.983-0.908 0.3006 0.202 3.0812 1.918 3.4569 2.322l0.0752 0.101c0.1503 0.504-0.3758 1.817-0.9018 3.028-0.6012 1.413-0.6764 5.451-0.977 6.36s-2.7054 6.966-2.8557 7.369c0.1503-0.303 1.4279-2.523 2.5551-4.441 0.3758-0.707 0.7515-1.313 1.0521-1.717 1.2025-1.918 0.6012-0.908 0.8267-2.322 0.2254-1.312 1.0521-4.542 0.977-6.359-0.0752-1.717 0.526-2.726 1.1272-3.635 0.6012-0.908 2.5552-1.615 4.3588-4.038 1.8036-2.422 4.8097-2.725 5.4109-3.23 0.0751-0.101 0.1503-0.101 0.2254-0.101 0.6764-0.101 1.9539 1.312 3.2315 1.918 1.3527 0.707 1.2024 3.029 1.2024 3.836 0.0752 0.909 0.0752 1.313 0.4509 1.716 0.3758 0.404-0.1503 2.726-0.1503 3.534 0.0752 0.908 1.3528 4.34 0.7515 5.249-0.6012 0.909-4.1333-1.413-4.8096-1.312h-0.3006c-0.3758 0.101-0.5261 0.101-1.3527 0.605-0.9019 0.505-2.7055-2.624-2.7806-2.826 0.0751 0.202 0.8266 2.12 1.1272 2.524 0.3006 0.403 0.9018 0.706 0.977 0.807 0 0-0.6012 1.413-0.8267 2.322-0.3006 0.909-1.0521 4.139-1.3527 5.048-0.3006 0.908-1.3728 2.523-2.0492 3.028-0.6012 0.505-3.6274 8.189-4.3037 8.694-0.6012 0.504-0.5593 3.723-0.5593 3.723s1.1071-1.366 1.1071-2.228c0-0.569-0.0218-0.688 0.354-0.991 0.3757-0.302 0.9387-2.102 1.6077-3.564 0.7444-1.625 1.3075-3.878 1.8694-4.322 1.2775-1.009 1.7486-2.12 2.3498-3.028 0.6012-0.909 1.2024-1.514 1.503-2.827 0.2254-1.312 0.4509-3.129 0.7515-4.543 0.2255-1.413 0.977-0.504 1.6533-0.605 0.6764-0.101 0.3006-0.505 0.977-0.505 0.6763-0.101 0.977 0.303 1.3527 0.707 0.0752 0.101 0.1503 0.101 0.2255 0.202 0.6012 0.302 1.8787 0.605 2.4799 1.312 0.6764 0.808 3.7576 7.167 4.1334 8.48 0 0.101 0.0751 0.202 0.0751 0.303 0.0752 0.504 0.1503 1.312 0.0752 2.221-0.0752 1.918-0.3006 4.239-0.6764 5.047-0.6012 1.413-1.7285 4.24-2.7054 4.745-0.977 0.504-2.7055 4.744-3.3067 5.653s-5.6109 10.87-5.2351 11.678c0.3758 0.807-0.3758 4.442-0.5261 8.076-0.0751 1.817-0.4509 3.23-1.1272 4.744-0.6012 1.515-1.4279 3.13-2.2546 5.452-1.6533 4.442-6.6132 9.287-6.989 9.59 0.3006-0.202 2.5551-1.615 3.1563-2.524 0.6013-0.908 1.8037-2.423 1.8037-2.423l-0.5261 2.726s0.8267-2.322 1.1273-3.634c0.2254-1.413 1.2024-1.514 2.4048-4.24 1.1273-2.827 2.9309-6.562 3.2315-7.47 0.3006-0.909 0.5261-1.817 0.8267-2.726s-0.0752-7.067 0.1503-8.48c0.2254-1.413 0.8266-3.23 1.1272-3.23s0.3006 0 1.0522 1.211c0.7515 1.212 0.7515 7.47 0.8266 7.874 0 0.404-0.4509 3.13-0.0751 4.947 0.4509 1.716-0.3758 4.442-0.3758 4.946 0 0.404 0.8267-2.725 0.8267-3.23 0-0.404 0.1503-3.533 0.0751-4.038 0-0.404 0.3758 0.404 0.3758 0.808 0 0.403 1.0521 0.807 1.4278 1.211 0.3758 0.404 2.1043 1.514 3.1564 2.322 1.0521 0.807 3.3066-0.404 3.3066-0.404s-1.6533 0.202-2.3296-0.202c-0.6764-0.404-1.7285-1.11-1.7285-1.615 0-0.404-1.3527-0.303-2.4049-1.918-1.1272-1.615-1.2024-3.029-1.2775-4.745-0.0752-1.817 3.6824-13.764 4.4339-16.159 0.5359-1.708 2.0036-3.292 2.2291-4.604 0.2254-1.413 1.2775-5.956 2.1042-9.086 0.8267-3.23 4.4341-8.479 4.4341-8.479v0.201c0 0.404 0 1.313-0.226 2.019-0.225 0.808-1.653 3.837-1.9536 4.543l-0.0751 0.101 0.0751-0.101c0.0756-0.202 0.3006-0.505 0.5256-0.908 0.226-0.303 0.827-1.212 1.203-1.817 0.15-0.303 0.301-0.505 0.301-0.505 0 0.101-1.122 6.106-0.561 8.563s6.873 10.073 6.873 10.073-5.035-7.971-5.536-10.817c-0.439-2.494-0.207-5.148 0.089-7.648 0.302-2.537 0.788-5.037 0.788-5.219 0-0.403 0.902-1.413 1.202-2.322 0.301-0.908 2.706-4.34 3.382-4.845 0.601-0.505 5.035 1.716 4.735 1.312-0.376-0.404-4.059-1.817-4.134-2.221 0-0.404 0.301-0.504 0.601-0.908 0.301-0.505 3.157-2.524 3.157-3.029 0-0.404 0.676 0.808 1.052 1.212 0.376 0.403 1.728 0.706 2.33 0.605 0.601-0.101 1.277 1.01 1.352 1.212-0.075-0.202-0.751-1.716-1.052-1.615-0.3 0-2.705-1.01-3.081-1.919-0.376-0.807 0.225-1.817 0.451-2.725 0.301-0.909 2.33-2.12 2.63-2.625 0.301-0.505 1.321-2.423 1.998-2.927 0.601-0.505 1.459-3.13 2.136-3.635 0.601-0.504 3.456 1.817 4.734 2.12 1.353 0.303 4.584-0.908 4.584-0.908s-2.63 0.303-3.983 0.404c-1.277 0.1-3.081-1.919-3.156-2.322 0-0.404 0.3-0.909 0.902-1.414 0.601-0.504 2.555-1.211 3.231-1.716 0.601-0.505 1.654-0.606 2.856-1.615 0.827-0.606 1.202-0.909 1.428-1.01-0.451 0.202-1.503 0.606-1.804 0.606-0.3 0-2.254 1.615-2.856 1.615-0.676 0.101-4.509 2.221-6.463 2.524-1.953 0.202-7.74-2.322-8.717-2.12-0.977 0.101-1.578 1.514-2.856 1.615-1.353 0.101-3.757-1.817-4.283-4.845-0.451-2.625 0.751-7.471 1.052-8.783 0-0.101 0-0.101 0.075-0.202v-0.101c-0.075 0.202-1.428 3.735-1.954 5.553-0.526 1.817-1.052 4.34-1.353 4.542-0.3 0-1.728-1.615-2.104-2.423-0.3758-0.807-1.1273-2.523-1.2024-3.836-0.0752-1.312 0.2254-1.817 0.8266-2.725 0.6012-0.909 0.6012-3.186 1.8038-5.609 1.127-2.221 2.555-5.35 2.63-5.653-0.225 0.303-3.307 5.249-3.682 4.845-0.376-0.403-0.5263-6.949-0.7518-9.977-0.1503-3.13-3.0812-16.496-3.1563-17.808-0.0752-1.313 0-2.847 0.2545-6.263 0-3.412-1.4865-7.854-1.4865-7.854s-1.2776 3.836-1.5782 3.937zm17.389 68.711c0.075 0.404 0.301 1.514 0 1.918-0.376 0.505-0.751 2.12-1.954 2.625-0.977 0.403-2.405 2.927-2.931 3.836-0.15 0.202-0.15 0.302-0.15 0.302-0.376-1.009 0.752-6.258 1.127-6.763 0.376-0.505 1.578 0 1.954-0.505s1.954-1.514 1.954-1.514v0.101zm-0.902-1.515c-0.15 0.101-0.3 0.202-0.375 0.303-0.602 0.505-0.602 1.414-1.203 1.515-0.676 0.101-1.052-0.808-1.428-1.212-0.375-0.404 0.451-3.634 0.451-3.634s2.555-6.461 3.908-6.663c0.376 0 0.752 0 1.052 0.101 0.752 0.202 1.278 0.606 1.954 0.505 0.977-0.101 2.33-0.202 2.029 1.11-0.225 1.313-2.179 2.019-3.682 4.442-1.278 1.918-2.104 2.928-2.706 3.533zm-5.786-10.498c0.375 0.302 0.902 0.706 1.428 1.009 1.352 0.707 2.329 0.606 2.404 1.514 0.076 0.909-0.225 1.818-0.826 3.231-0.301 0.706-0.526 1.413-0.752 2.12-0.225 0.706-0.375 1.11-0.375 1.11s-1.128-1.615-0.827-2.624c0.3-0.909 0.225-1.414-0.075-1.818-0.376-0.403-1.954-5.148-2.029-5.552 0.075 0.101 0.451 0.505 1.052 1.01zm-4.058-3.231c0.375 0.404 1.728 1.615 1.728 1.615v0.101c0.075 0.404 0.526 2.726 1.202 4.24 0.376 0.909 1.278 3.231 1.879 5.654 0.075 0.201 0.151 0.504 0.226 0.706 0.451 1.918 0.751 3.735 0.526 4.846-0.526 2.725-1.654 5.047-1.879 6.864-0.225 1.818 0.15 2.221-0.451 3.635-0.601 1.413-1.202 1.918-2.104 3.331s-1.8789 2.019-2.4801 2.928c-0.3758 0.605-0.451-0.346-0.977-0.346-0.4761-0.569-0.4761-1.139-0.4761-1.139s-0.3506-0.837-0.8015-2.15c-0.3757-1.312-1.962-5.425-1.4128-9.237 0.4822-3.345-0.0192-5.382 0.4359-8.732 0.4906-3.611-0.4219-4.744 1.006-8.076 1.4279-3.23 0.6473-7.571 0.6473-7.571s2.5551 2.927 2.9313 3.331z" fill="#5C5A5A" style=""/>
+  <path d="m95.377 420.69c0.3006 0.505 0.6012 1.11 0.6764 1.716 0.1503 1.111 0 2.221-0.1503 3.231-0.6764 4.138-2.0291 8.378-4.5091 11.003-0.4509 0.505-0.9769 1.01-1.3527 1.716-0.9018 1.615-3.9565 4.031-3.8813 6.05-3.3215 6.832-2.0714 14.318-3.875 17.65 0.6012-1.515 1.0319-9.001 1.1071-10.818 0.1503-3.533 1.6607-5.693 2.3921-7.74 0.6056-1.695 2.4535-4.132 3.0547-5.041 0.6012-0.908 2.3297-5.148 3.3066-5.653 0.977-0.505 2.1043-3.331 2.7055-4.745 0.4509-1.413 0.8266-5.754 0.526-7.369z" fill="#8B8B8B" style=""/>
+  <path d="m86.118 393.13c1.3528 0.202 2.7055 0.908 3.7576 2.019 0.2255 0.202 0.4509 0.504 0.5261 0.807 0.3757 0.909 0.1503 2.019 0.2254 3.029 0.0752 0.908 0.3758 1.716 0.4509 2.625 0.0752 0.504 0.0752 1.11 0 1.615-0.0751 1.11-0.4889 1.896 0 3.245 0.6934 0.843 0.6769 2.067 0.6769 3.206 0 0.419 0.1423 0.845-0.3964 0.845-0.4081 0-0.3556-0.216-0.7107-0.276-0.6764-0.202-2.0915-0.937-2.7679-1.139-0.3757-0.101-0.7097-0.531-1.0855-0.632-0.1503 0-0.5261 0-0.6764-0.202h0.3006c0.6764-0.101 3.5693 1.174 4.1705 0.265s-0.0371-3.394-0.1123-4.202c-0.0751-0.908 0.4509-3.129 0.1503-3.533-0.3757-0.404-0.3757-0.808-0.4509-1.716-0.0751-0.909 0.1503-3.13-1.2024-3.836-1.2024-0.707-2.48-2.019-3.2315-1.918 0-0.202 0.2254-0.202 0.3757-0.202z" fill="#8B8B8B" style=""/>
+  <path d="m79.07 386.27c0.7515 0.808 1.3527 1.918 1.9539 2.827 0.6764 1.211 1.4279 2.322 2.1043 3.533-0.3006 0.101-0.6012 0.404-0.977 0.505 0.1503-0.101 0.1503-0.303 0.1503-0.404 0-0.404-0.3757-1.312-1.1273-2.524-0.6012-1.009-1.7284-3.331-2.1042-3.937z" fill="#8B8B8B" style=""/>
+  <path d="m73.734 402.42c0.0752 0.101 0.1503 0.101 0.2255 0.201 0.0751 0.101 0.0751 0.202 0.0751 0.303 0.0752 0.404 0.0752 0.808 0 1.313-0.1503 1.514-0.8266 2.826-1.1272 4.341-0.1503 0.706-0.1503 1.514-0.3006 2.22-0.0752 0.606-0.2255 1.212-0.451 1.818-0.2254 0.706-0.3757 1.514-0.6012 2.22-1.2024 2.019-2.5551 4.442-2.5551 4.442s2.5551-6.561 2.8557-7.47 0.3758-4.947 0.977-6.36c0.6012-1.312 1.1273-2.524 0.9018-3.028z" fill="#8B8B8B" style=""/>
+  <path d="m84.707 409.69c-0.9018 1.414-1.2024 3.231-1.503 5.048-0.0752 0.707-0.2255 1.413-0.5261 1.918-0.2255 0.404-0.5261 0.707-0.8267 1.01-0.6763 0.706-0.5494 0.987-1.2257 1.693-0.3006 0.303-0.5536 0.57-1.1072 1.139-0.3588 0.943 0 1.139-0.5535 2.277-1.1072 1.139-1.5178 3.372-2.4948 4.886-0.3758 0.303-0.6764 1.175-0.8267 1.377-0.3006 0.505-0.5535 3.416-0.5535 3.416s-0.198-4.793 0.4784-5.298c0.6012-0.504 2.742-5.685 3.2018-7.169 0.2369-0.764 2.8558-2.12 3.1564-3.028 0.3006-0.909 1.0521-4.139 1.3527-5.048 0.3006-0.908 0.8267-2.322 0.8267-2.322 0.1503-0.1 0.3757 0 0.6012 0.101z" fill="#8B8B8B" style=""/>
+  <path d="m88.69 410.6c0.3757 0.101 0.8266 0.202 0.9769 0.303 0.6012 0 1.2776 0.101 1.7285 0.606 0.2255 0.202 0.3758 0.504 0.5261 0.807 0.526 0.909 0.9769 1.817 1.503 2.827 0.3006 0.606 0.6764 1.211 0.9018 1.918 0.1503 0.505 0.3006 1.009 0.5261 1.514 0.2254 0.505 0.4509 1.01 0.6763 1.514 0.3006 0.909 0.5261 1.818 0.5261 2.827v0.202c-0.0752 0.202-0.2255 0.202-0.3758 0.101-0.0751-0.101-0.1503-0.202-0.1503-0.303 0-0.909 0-1.716-0.0751-2.221 0-0.101-0.0752-0.202-0.0752-0.303-0.3757-1.312-3.4569-7.672-4.1333-8.48-0.6763-0.706-1.9539-1.009-2.5551-1.312z" fill="#8B8B8B" style=""/>
+  <path d="m104.92 394.44c0.451 1.01 0.827 2.12 1.127 3.231 0.151 0.807 0.301 1.615 0.151 2.423-0.076 0.605-0.376 1.11-0.602 1.615-0.375 0.908-0.526 1.918-0.751 2.927-0.226 1.01-0.376 2.019-0.526 3.13 0 0.404-0.075 0.807-0.15 1.211-0.076 0.505-0.301 0.909-0.451 1.414-0.376 0.908-0.752 1.716-1.203 2.523-0.451 0.707-0.902 1.414-1.428 2.019-0.901 1.01-2.0287 2.928-3.3063 3.029-0.3006 0-0.6763-0.101-0.9018-0.303 0.5261 0 1.3527-0.101 1.7285-0.707 0.6012-0.908 1.5786-1.514 2.4796-2.927 0.902-1.414 1.503-1.918 2.105-3.332 0.601-1.413 0.225-1.817 0.451-3.634 0.225-1.817 1.427-4.139 1.878-6.864 0.376-1.414 0-3.534-0.601-5.755z" fill="#8B8B8B" style=""/>
+  <path d="m102.07 414.54h0.376c-0.075 1.514-0.451 2.928-0.977 4.341-0.376 0.606-0.977 1.514-1.203 1.817-0.225 0.303-0.4505 0.707-0.5257 0.909 0.3007-0.707 1.7287-3.736 1.9537-4.543 0.226-0.707 0.226-1.615 0.226-2.019 0.075-0.202 0.075-0.303 0.15-0.505z" fill="#8B8B8B" style=""/>
+  <path d="m102.44 384.55c0 0.808 0.225 1.615 0.451 2.322 0.827 2.827 1.578 5.552 2.254 8.379h-0.075c-0.075-0.202-0.15-0.505-0.225-0.707-0.677-2.423-1.503-4.744-1.879-5.653-0.676-1.514-1.127-3.836-1.202-4.24 0.3-0.101 0.676-0.101 0.676-0.101z" fill="#8B8B8B" style=""/>
+  <path d="m104.1 386.17c0.15 0.101 0.375 0.303 0.526 0.404 0.3 0.101 0.526 0.303 0.826 0.404 0.827 0.303 1.654 0.404 2.405 0.707 0.15 0.1 0.301 0.1 0.451 0.201 0.225 0.303 0.301 0.707 0.225 1.111-0.075 0.404-0.3 0.807-0.45 1.11-0.451 0.909-0.902 1.918-1.278 2.928-0.075 0.303-0.225 0.606-0.451 0.908 0.226-0.605 0.451-1.413 0.752-2.12 0.601-1.413 0.826-2.321 0.826-3.23-0.075-0.908-1.052-0.808-2.405-1.514-0.526-0.202-0.977-0.505-1.427-0.909z" fill="#8B8B8B" style=""/>
+  <path d="m105 372.64c-0.075 0.202-0.075 0.202-0.075 0.303-0.601 2.019-1.203 4.139-1.729 6.259-0.3 1.01-0.526 2.12-0.676 3.23 0 0.202-0.075 0.404-0.15 0.505-0.151 0.202-0.301 0.202-0.526 0.101-0.075-0.101-0.151-0.101-0.151-0.202 0.301-0.202 0.827-2.826 1.353-4.542 0.526-1.919 1.879-5.452 1.954-5.654z" fill="#8B8B8B" style=""/>
+  <path d="m89.742 375.06c0.3006 0.101 0.6012 0.202 0.8267 0.404 1.6533 0.807 3.1563 2.019 4.5842 3.331 0.1503 0.101 0.3006 0.303 0.3757 0.505 0.1503 0.403 0 0.807-0.0751 1.11-0.7515 2.221-0.2255 1.501-0.977 3.722-0.1503 0.403-0.2254 0.807-0.4509 1.11-0.2255 0.404-0.4122 0.47-0.6675 1.091-0.2343 0.569-0.253 0.734-0.5536 1.138s0 0.569 0 0.569c-0.2255 0.202-0.5536 0.57-0.5536 0v-0.569c0-0.569 0.5723-0.311 0.8729-1.219 0.3006-0.909 0.526-1.804 1.0521-3.217 0.6012-1.413 0.8267-3.231 0.4509-4.038-0.3757-0.808-2.48-2.423-3.5321-3.231-0.3757-0.101-0.8267-0.403-1.3527-0.706z" fill="#8B8B8B" style=""/>
+  <path d="m87.486 365.57c0.0752 0.101 0.1503 0.202 0.2255 0.404 0.3006 1.312 0.6763 2.524 0.9769 3.836 0.2255 0.808 0.451 1.615 0.6013 2.524 0.0751 0.404 0.4509 1.817-0.0752 1.615-0.0751 0-0.0751 0-0.0751-0.101l-1.6534-8.278z" fill="#8B8B8B" style=""/>
+  <path d="m97.232 356.16 0.5536 3.416c0 1.708 0.2731 2.689 0.4234 3.9 0.2254 1.515 0.0994 3.227 0.4752 4.64 0.1503 0.706 0.3006 1.494 0.3006 2.201 0 0.404-0.0752 1.211-0.3006 1.514 0.0751-0.303 0.0751-0.606-0.0752-0.808-0.3757-0.807-0.8509-7.849-1.2267-9.061-0.3758-1.211 0.1503-5.399-0.1503-5.802z" fill="#8B8B8B" style=""/>
+  <path d="m92.73 328.96c0.0751 0.101 0.1503 0.101 0.1503 0.202 0.0751 0.101 0 0.303 0 0.403-0.4509 3.534-2.2904 5.982-2.2904 9.516 0 1.716 3.3214 10.817 3.3214 11.387-0.5536 0-1.1072-1.139-1.6607-2.278-0.0752-1.11-2.5267-10.145-2.0006-11.356 0.5261-1.413 2.48-7.773 2.48-7.874z" fill="#8B8B8B" style=""/>
+  <path d="m111.54 397.98c-0.151 1.212 0.15 2.625-0.451 3.533-0.451 0.808-1.278 1.01-1.879 1.515-0.977 0.706-1.578 2.019-2.48 2.927-0.15 0.202-0.451 0.505-0.676 0.505h-0.075c0.526-0.909 1.954-3.432 2.93-3.836 1.128-0.505 1.579-2.12 1.954-2.625 0.301-0.404 0.151-1.514 0-1.918 0.151 0 0.376-0.101 0.677-0.101z" fill="#8B8B8B" style=""/>
+  <path d="m115.29 387.08c0.526 0.101 1.052 0.303 1.503 0.605 0.3 0.101 0.601 0.404 0.601 0.707s-0.15 0.404-0.301 0.606c-0.977 1.11-1.878 2.221-2.931 3.129-0.225 0.202-0.526 0.404-0.751 0.707-0.451 0.404-0.752 0.908-1.203 1.413-0.676 0.909-1.503 1.716-2.329 2.423 0.601-0.606 1.428-1.615 2.705-3.533 1.503-2.423 3.457-3.029 3.683-4.442 0.225-1.413-1.052-1.211-2.029-1.111-0.677 0.101-1.278-0.302-1.954-0.504h0.3c0.526 0 0.977-0.101 1.503-0.101 0.301 0.101 0.752 0 1.203 0.101z" fill="#8B8B8B" style=""/>
+ </g>
+ <defs>
+  <linearGradient id="paint0_linear_2910_72034" x1="64" x2="136.01" y1="585.28" y2="585.32" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <pattern id="liquid" width="172" height="72" patternUnits="userSpaceOnUse">
+   <rect x="-172" width="688" height="72" fill="url(#baseLiquid)" stroke-width="0"/>
+  </pattern>
+  <pattern id="baseLiquid" width="172" height="72" patternTransform="translate(14,8)" patternUnits="userSpaceOnUse">
+   <circle transform="rotate(-90)" cx="-15" cy="21" r="8" fill="url(#paint28_linear_1182_32781-5)"/>
+   <circle transform="rotate(-90)" cx="-15" cy="150" r="8" fill="url(#paint29_linear_1182_32781-1)"/>
+   <circle transform="rotate(-90)" cx="-16" cy="113" r="8" fill="url(#paint30_linear_1182_32781-7)"/>
+   <circle transform="rotate(-90)" cx="-58" cy="34" r="8" fill="url(#paint31_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-58" cy="155" r="8" fill="url(#paint32_linear_1182_32781-3)"/>
+   <circle transform="rotate(-90)" cx="-26" cy="33" r="5" fill="url(#paint33_linear_1182_32781-1)"/>
+   <circle transform="rotate(-90)" cx="-26" cy="162" r="5" fill="url(#paint34_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-37" cy="5" r="5" fill="url(#paint35_linear_1182_32781-6)"/>
+   <circle transform="rotate(-90)" cx="-8" cy="94" r="4" fill="url(#paint36_linear_1182_32781-9)"/>
+   <circle transform="rotate(-90)" cx="-60" cy="72" r="4" fill="url(#paint37_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-37" cy="112" r="5" fill="url(#paint38_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-39" cy="59" r="5" fill="url(#paint39_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-62" cy="115" r="5" fill="url(#paint40_linear_1182_32781-6)"/>
+   <circle transform="rotate(-90)" cx="-42" cy="139" r="5" fill="url(#paint41_linear_1182_32781-4)"/>
+   <circle transform="rotate(-90)" cx="-21" cy="76" r="5" fill="url(#paint42_linear_1182_32781-1)"/>
+   <circle transform="rotate(-90)" cx="-50.5" cy="126.5" r="2.5" fill="url(#paint43_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-46.5" cy="169.5" r="2.5" fill="url(#paint44_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-9.5" cy="57.5" r="2.5" fill="url(#paint45_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-35.5" cy="96.5" r="2.5" fill="url(#paint46_linear_1182_32781-9)"/>
+   <circle transform="rotate(-90)" cx="-23.5" cy="91.5" r="2.5" fill="url(#paint47_linear_1182_32781-2)"/>
+   <circle transform="rotate(-90)" cx="-40.5" cy="22.5" r="2.5" fill="url(#paint48_linear_1182_32781-88)"/>
+   <circle transform="rotate(-90)" cx="-23.5" cy="124.5" r="2.5" fill="url(#paint49_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-47.5" cy="86.5" r="2.5" fill="url(#paint50_linear_1182_32781-6)"/>
+   <circle transform="rotate(-90)" cx="-21.5" cy="51.5" r="2.5" fill="url(#paint51_linear_1182_32781-8)"/>
+   <circle transform="rotate(-90)" cx="-51.5" cy="48.5" r="2.5" fill="url(#paint52_linear_1182_32781-3)"/>
+   <circle transform="rotate(-90)" cx="-64" cy="14" r="4" fill="url(#paint53_linear_1182_32781-83)"/>
+   <circle transform="rotate(-90)" cx="-64" cy="135" r="4" fill="url(#paint54_linear_1182_32781-33)"/>
+   <circle transform="rotate(-90)" cx="-58.5" cy="95.5" r="9.5" fill="url(#paint55_linear_1182_32781-8)"/>
+   <path d="m0 0h172v72h-172z" fill="url(#paint84_linear_1182_32781-8)" stroke-width=".57735"/>
+  </pattern>
+  <linearGradient id="paint28_linear_1182_32781-5" x1="19.316" x2="21" y1="8.2632" y2="23" gradientTransform="translate(-36,6)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint29_linear_1182_32781-1" x1="148.32" x2="150" y1="8.2632" y2="23" gradientTransform="translate(-165,135)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint30_linear_1182_32781-7" x1="111.32" x2="113" y1="9.2632" y2="24" gradientTransform="translate(-129,97)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint31_linear_1182_32781-4" x1="32.316" x2="34" y1="51.263" y2="66" gradientTransform="translate(-92,-24)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint32_linear_1182_32781-3" x1="153.32" x2="155" y1="51.263" y2="66" gradientTransform="translate(-213,97)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint33_linear_1182_32781-1" x1="31.947" x2="33" y1="21.789" y2="31" gradientTransform="translate(-59,7)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint34_linear_1182_32781-4" x1="160.95" x2="162" y1="21.789" y2="31" gradientTransform="translate(-188,136)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint35_linear_1182_32781-6" x1="3.9474" x2="5" y1="32.79" y2="42" gradientTransform="translate(-42,-32)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint36_linear_1182_32781-9" x1="93.158" x2="94" y1="4.6316" y2="12" gradientTransform="translate(-102,86)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint37_linear_1182_32781-4" x1="71.158" x2="72" y1="56.632" y2="64" gradientTransform="translate(-132,12)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint38_linear_1182_32781-2" x1="110.95" x2="112" y1="32.79" y2="42" gradientTransform="translate(-149,75)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint39_linear_1182_32781-2" x1="57.947" x2="59" y1="34.79" y2="44" gradientTransform="translate(-98,20)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint40_linear_1182_32781-6" x1="113.95" x2="115" y1="57.79" y2="67" gradientTransform="translate(-177,53)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint41_linear_1182_32781-4" x1="137.95" x2="139" y1="37.79" y2="47" gradientTransform="translate(-181,97)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint42_linear_1182_32781-1" x1="74.947" x2="76" y1="16.789" y2="26" gradientTransform="translate(-97,55)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint43_linear_1182_32781-2" x1="125.97" x2="126.5" y1="48.395" y2="53" gradientTransform="translate(-177,76)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint44_linear_1182_32781-8" x1="168.97" x2="169.5" y1="44.395" y2="49" gradientTransform="translate(-216,123)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint45_linear_1182_32781-8" x1="56.974" x2="57.5" y1="7.3947" y2="12" gradientTransform="translate(-67,48)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint46_linear_1182_32781-9" x1="95.974" x2="96.5" y1="33.395" y2="38" gradientTransform="translate(-132,61)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint47_linear_1182_32781-2" x1="90.974" x2="91.5" y1="21.395" y2="26" gradientTransform="translate(-115,68)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint48_linear_1182_32781-88" x1="21.974" x2="22.5" y1="38.395" y2="43" gradientTransform="translate(-63,-18)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint49_linear_1182_32781-8" x1="123.97" x2="124.5" y1="21.395" y2="26" gradientTransform="translate(-148,101)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint50_linear_1182_32781-6" x1="85.974" x2="86.5" y1="45.395" y2="50" gradientTransform="translate(-134,39)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint51_linear_1182_32781-8" x1="50.974" x2="51.5" y1="19.395" y2="24" gradientTransform="translate(-73,30)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint52_linear_1182_32781-3" x1="47.974" x2="48.5" y1="49.395" y2="54" gradientTransform="translate(-100,-3)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint53_linear_1182_32781-83" x1="13.158" x2="14" y1="60.632" y2="68" gradientTransform="translate(-78,-50)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint54_linear_1182_32781-33" x1="134.16" x2="135" y1="60.632" y2="68" gradientTransform="translate(-199,71)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint55_linear_1182_32781-8" x1="93.5" x2="95.5" y1="50.5" y2="68" gradientTransform="translate(-154,37)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint84_linear_1182_32781-8" x1="248" x2="248" y1="1.8513e-7" y2="72" gradientTransform="scale(.33333 1)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" offset=".10895"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".11331"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".88736"/>
+   <stop stop-color="#727171" offset=".89138"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-broken-pipe.svg b/application/src/main/data/json/system/scada_symbols/horizontal-broken-pipe.svg
new file mode 100644
index 0000000000..60d4e07719
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-broken-pipe.svg
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Horizontal broken pipe",
+  "description": "Horizontal broken pipe.",
+  "searchTags": [
+    "pipe",
+    "horizontal pipe",
+    "broken pipe"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "pipeColor",
+      "name": "{i18n:scada.symbol.pipe-color}",
+      "type": "color",
+      "default": "#FFFFFF",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<g tb:tag="clickArea">
+  <path d="m14 64s53.5 0.2293 60.5 0 17-6.5 17-6.5l-14.5 21.5 14.5 6.5-10.5 9 14.5 11-18.5 6.5 10 6-2.5 11.5 7 14s-10-7.5-17-7.5h-60.5v-72z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m14 64s53.5 0.2293 60.5 0 17-6.5 17-6.5l-14.5 21.5 14.5 6.5-10.5 9 14.5 11-18.5 6.5 10 6-2.5 11.5 7 14s-10-7.5-17-7.5h-60.5v-72z" fill="url(#paint0_linear_2474_252376)"/>
+  <path d="m86.266 62.02c0.1879-0.0889 0.3731-0.1777 0.5555-0.2661l-12.062 17.886 13.968 6.2614-8.7036 7.4602-1.4118 1.2101 13.759 10.438-15.869 5.576-3.0127 1.058 2.7382 1.643 9.0774 5.447-2.2715 10.448-0.1123 0.517 0.2365 0.473 4.5114 9.023c-0.4206-0.249-0.8606-0.502-1.3163-0.755-3.3898-1.883-7.9357-3.939-11.854-3.939h-59v-68.994l0.8066 0.0033c1.4767 0.0058 3.5942 0.0139 6.1569 0.0228 5.1255 0.0179 12.032 0.0394 19.158 0.0538 14.23 0.0286 29.393 0.0289 32.927-0.0868 3.8302-0.1255 8.3197-1.8722 11.717-3.4792z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m105.5 56.5s13.5 7.395 18.5 7.5 62 0 62 0v72s-54.5-0.086-62 0-18.5 4.5-18.5 4.5l6-13.5-15-14 16.5-5-7.5-6 6-13-18-13 19.5-4.5-7.5-15z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m105.5 56.5s13.5 7.395 18.5 7.5 62 0 62 0v72s-54.5-0.086-62 0-18.5 4.5-18.5 4.5l6-13.5-15-14 16.5-5-7.5-6 6-13-18-13 19.5-4.5-7.5-15z" fill="url(#paint1_linear_2474_252376)"/>
+  <path d="m184.5 65.503v68.995l-0.854-2e-3c-1.505-2e-3 -3.663-5e-3 -6.277-8e-3 -5.227-7e-3 -12.274-0.015-19.555-0.02-14.556-0.011-30.069-0.011-33.831 0.032-3.973 0.046-8.768 1.225-12.479 2.346-1.18 0.357-2.264 0.712-3.197 1.031l4.564-10.268 0.434-0.976-0.782-0.73-13.096-12.223 14.008-4.244 2.727-0.827-2.225-1.78-6.583-5.267 5.508-11.933 0.518-1.1215-1.002-0.7231-15.321-11.065 16.28-3.757 1.857-0.4284-0.852-1.704-5.435-10.87c1.009 0.5039 2.144 1.0566 3.335 1.611 2.02 0.9404 4.222 1.8953 6.25 2.6248 1.981 0.7123 3.962 1.2726 5.476 1.3044 2.522 0.0529 18.049 0.0528 32.908 0.0397 7.438-0.0066 14.72-0.0164 20.142-0.0246 2.711-0.0041 4.957-0.0078 6.526-0.0105l0.956-0.0017z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <rect x="187.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_2474_252376" x1="32.98" x2="32.532" y1="64" y2="136" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2474_252376" x1="129.76" x2="129.33" y1="64" y2="136" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-tank.svg b/application/src/main/data/json/system/scada_symbols/horizontal-tank.svg
index 646957a6b4..6452715db4 100644
--- a/application/src/main/data/json/system/scada_symbols/horizontal-tank.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-tank.svg
@@ -36,6 +36,11 @@
       "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 17;\n        var majorIntervalLength = 568 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(715, y, 747, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = (100 - i * (100/majorIntervals)).toFixed(0);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 705, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(727, minorY, 747, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
     {
       "tag": "top-layer",
       "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
@@ -555,7 +560,7 @@
     }
   ]
 }]]></tb:metadata>
-<path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="#E5E5E5" tb:tag="background"/><path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="url(#paint0_linear_1694_158298)"/><path d="m177.27 0.4874c198.56-1.0967 560.65 1.9e-5 640.18 0 79.522-1.9e-5 183.55 15 183.55 220v169c0 192.5-105.53 211.5-184.55 211.5s-516.64-0.5-639.18-0.5c-122.53 0-176.55-68.001-176.55-219 5.26e-4 -151-6.59e-4 -49.502-2.47e-4 -119s-22.006-260.91 176.55-262.01z" fill="#4A4848" fill-opacity=".5"/><mask id="mask0_1694_158298" x="17" y="16" width="968" height="570" style="mask-type:alpha" maskUnits="userSpaceOnUse">
+<path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="#E5E5E5" tb:tag="background"/><path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="url(#paint0_linear_1694_158298)"/><path d="m177.27 0.4874c198.56-1.0967 560.65 1.9e-5 640.18 0 79.522-1.9e-5 183.55 15 183.55 220v169c0 192.5-105.53 211.5-184.55 211.5s-516.64-0.5-639.18-0.5c-122.53 0-176.55-68.001-176.55-219 5.26e-4 -151-6.59e-4 -49.502-2.47e-4 -119s-22.006-260.91 176.55-262.01z" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><mask id="mask0_1694_158298" x="17" y="16" width="968" height="570" style="mask-type:alpha" maskUnits="userSpaceOnUse">
   <path d="m178.68 16h654.82c117.67 0 151.5 98.586 151.5 184.16v204.18c0 135.62-68.502 181.66-162.5 181.66h-627.98c-129 0-177.5-66.558-177.5-181.66s0.0023-129.32 0-212.19c-3e-4 -9.509-5.4994-176.16 161.66-176.16z" fill="#D9D9D9"/>
  </mask><g mask="url(#mask0_1694_158298)">
   <rect transform="scale(1,-1)" x="9" y="-585" width="984" height="200" fill="#1EC1F4" fill-opacity=".5" tb:tag="fluid-background"/>
diff --git a/application/src/main/data/json/system/scada_symbols/large-conical-tank.svg b/application/src/main/data/json/system/scada_symbols/large-conical-tank.svg
new file mode 100644
index 0000000000..c8b40477ef
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/large-conical-tank.svg
@@ -0,0 +1,1220 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="1e3" height="1400" fill="none" version="1.1" viewBox="0 0 1e3 1400"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Large conical tank",
+  "description": "Large conical tank with current volume value and level visualizations.",
+  "searchTags": [
+    "conical tank",
+    "stand tank",
+    "large tank"
+  ],
+  "widgetSizeX": 5,
+  "widgetSizeY": 7,
+  "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "var color = ctx.properties.tankColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "fluid",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n} else {\n    var liquidPattern = element.reference('fill');\n\n    var valueSet = element.remember('valueSet');\n    if (!valueSet) {\n        element.remember('valueSet', true);\n        element.attr({height: 0});\n        liquidPattern.transform({translateY: 590});\n    }\n\n    var currentVolume = ctx.values.currentVolume; \n    var tankCapacity = ctx.values.tankCapacity; \n\n    var height = currentVolume / tankCapacity;\n    height = Math.max(0, Math.min(1, height))*1340; \n    \n    var elementHeight = element.remember('height');\n    if (height !== elementHeight) {\n        element.remember('height', height);\n        ctx.api.cssAnimate(element, 500).attr({height: height});\n        ctx.api.cssAnimate(liquidPattern, 500).transform({ translateY: 590 + height });\n    }\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "fluid-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n} else {\n    var color = ctx.properties.fluidColor;\n    element.attr({fill: color, 'fill-opacity': 1});\n    \n    var valueSet = element.remember('valueSet');\n    if (!valueSet) {\n        element.remember('valueSet', true);\n        element.attr({height: 0});\n    }\n    \n    var currentVolume = ctx.values.currentVolume; \n    var tankCapacity = ctx.values.tankCapacity; \n\n    var height = currentVolume / tankCapacity;\n    height = Math.max(0, Math.min(1, height))*1340; \n    \n    var elementHeight = element.remember('height');\n    if (height !== elementHeight) {\n        element.remember('height', height);\n        ctx.api.cssAnimate(element, 500).attr({height: height});\n    }\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "stand",
+      "stateRenderFunction": "if (ctx.properties.stand) {\n    element.show();\n}",
+      "actions": null
+    },
+    {
+      "tag": "top-layer",
+      "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-box",
+      "stateRenderFunction": "if (!ctx.properties.valueBox) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-box-background",
+      "stateRenderFunction": "if (ctx.properties.valueBox) {\n    var color = ctx.properties.valueBoxColor;\n    element.attr({fill: color});\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-text",
+      "stateRenderFunction": "if (ctx.properties.valueBox) {\n  var valueTextFont = ctx.properties.valueTextFont;\n  var valueTextColor = ctx.properties.valueTextColor;\n  var currentVolume = ctx.values.currentVolume;\n  var valueText = ctx.api.formatValue(currentVolume, 0, ctx.properties.valueUnits, false);\n  ctx.api.font(element, valueTextFont, valueTextColor);\n  ctx.api.text(element, valueText);\n}",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "tankCapacity",
+      "name": "{i18n:scada.symbol.tank-capacity}",
+      "hint": "{i18n:scada.symbol.tank-capacity-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "GET_ATTRIBUTE",
+        "defaultValue": null,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": "SERVER_SCOPE",
+          "key": "tankCapacity"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "currentVolume",
+      "name": "{i18n:scada.symbol.current-volume}",
+      "hint": "{i18n:scada.symbol.current-volume-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "GET_TIME_SERIES",
+        "defaultValue": null,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "liquidVolume"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "stand",
+      "name": "Stand",
+      "type": "switch",
+      "default": false,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "tankColor",
+      "name": "{i18n:scada.symbol.tank-color}",
+      "type": "color",
+      "default": "#E5E5E5",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "fluidColor",
+      "name": "{i18n:scada.symbol.fluid-color}",
+      "type": "color",
+      "default": "#1EC1F480",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueBox",
+      "name": "{i18n:scada.symbol.value-box}",
+      "type": "switch",
+      "default": true,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueBoxColor",
+      "name": "{i18n:scada.symbol.value-box}",
+      "type": "color",
+      "default": "#F3F3F3",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueUnits",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "units",
+      "default": "gal",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueTextFont",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "font",
+      "default": {
+        "size": 36,
+        "sizeUnit": "px",
+        "family": "Roboto",
+        "weight": "500",
+        "style": "normal"
+      },
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueTextColor",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "color",
+      "default": "#0000008A",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "scale",
+      "name": "{i18n:scada.symbol.scale}",
+      "type": "switch",
+      "default": true,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "transparent",
+      "name": "{i18n:scada.symbol.transparent-mode}",
+      "type": "switch",
+      "default": false,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<path d="m457 1389h86l450.92-350.4c2.558-1.99 1.796-6.03-1.308-6.96-156.39-46.64-300.37-46.64-492.61-46.64-191.53 0-397 0-494.43 46.13-2.6425 1.25-2.9303 4.8-0.62172 6.59l452.05 351.28z" fill="#E5E5E5" tb:tag="background"/><path d="m457 1389h86l450.92-350.4c2.558-1.99 1.796-6.03-1.308-6.96-156.39-46.64-300.37-46.64-492.61-46.64-191.53 0-397 0-494.43 46.13-2.6425 1.25-2.9303 4.8-0.62172 6.59l452.05 351.28z" fill="url(#paint0_linear_2901_184330)"/><path d="m5.8708 1036.5 451.64 350.96h84.972l450.52-350.08c1.592-1.24 1.12-3.76-0.817-4.34-156.15-46.57-299.91-46.58-492.18-46.58-95.777 0-194.97 1e-3 -282.4 5.763-87.482 5.765-162.95 17.287-211.38 40.217-1.564 0.74-1.8291 2.9-0.34315 4.06z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><path d="m0 29.5c0-6.6274 5.3726-12 12-12h976c6.627 0 12 5.3726 12 12v999.43c0 6.07-4.237 11.16-10.271 11.82-214.38 23.53-809.37 19.92-979.62 0.08-5.9674-0.69-10.107-5.75-10.107-11.75v-999.58z" fill="#E5E5E5" tb:tag="background"/><path d="m0 29.5c0-6.6274 5.3726-12 12-12h976c6.627 0 12 5.3726 12 12v999.43c0 6.07-4.237 11.16-10.271 11.82-214.38 23.53-809.37 19.92-979.62 0.08-5.9674-0.69-10.107-5.75-10.107-11.75v-999.58z" fill="url(#paint1_linear_2901_184330)"/><path d="m1.5 29.5c0-5.799 4.701-10.5 10.5-10.5h976c5.799 0 10.5 4.701 10.5 10.5v999.43c0 5.36-3.718 9.76-8.934 10.33-107.1 11.75-309.36 16.73-506.19 16.29-196.83-0.44-388.06-6.3-473.09-16.21-5.1475-0.6-8.7805-4.95-8.7805-10.26v-999.58z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><path d="m0 26c0-4.4183 3.5817-8 8-8h984c4.418 0 8 3.5817 8 8v1003.1c0 3.1-1.436 6.02-3.889 7.91l-456.61 352.5h-80l-455.62-352.5c-2.4478-1.89-3.8809-4.81-3.8809-7.91v-1003.1z" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><mask id="mask0_2901_184330" x="16" y="22" width="968" height="1352" style="mask-type:alpha" maskUnits="userSpaceOnUse">
+  <path d="m177.68 40h654.82c117.67 0 151.5-9.8385 151.5-9.8385v989.29c0 3.09-1.423 6-3.856 7.89l-444.06 345.82c-0.703 0.54-1.568 0.84-2.458 0.84h-68.749c-0.892 0-1.759-0.3-2.462-0.85l-442.55-345.81c-2.4254-1.89-3.8428-4.8-3.8428-7.88v-997.31s-5.4994 17.846 161.66 17.846z" fill="#D9D9D9"/>
+ </mask><g mask="url(#mask0_2901_184330)">
+  <rect transform="scale(1,-1)" x="9" y="-1380" width="984" height="500" fill="#1ec1f4" fill-opacity=".5" tb:tag="fluid-background"/>
+  <rect transform="scale(1,-1)" x="9" y="-1380" width="984" height="500" fill="url(#liquid)" tb:tag="fluid"/>
+ </g><g tb:tag="top-layer">
+  <path d="m457 1387h86l446.4-346.88c3.14-2.44 1.153-7.48-2.811-7.17-177.75 14.05-302.08 14.05-492.59 14.05-186.75 0-368 0-479.24-13.23-4.0643-0.49-6.2013 4.76-2.9694 7.27l445.21 345.96z" fill="#E5E5E5" tb:tag="background"/>
+  <path d="m457 1387h86l446.4-346.88c3.14-2.44 1.153-7.48-2.811-7.17-177.75 14.05-302.08 14.05-492.59 14.05-186.75 0-368 0-479.24-13.23-4.0643-0.49-6.2013 4.76-2.9694 7.27l445.21 345.96z" fill="url(#paint627_linear_2901_184330)"/>
+  <path d="m12.714 1039.9 444.8 345.64h84.972l445.99-346.57c1.936-1.5 0.742-4.68-1.773-4.48-177.81 14.05-302.19 14.05-492.68 14.05h-0.135c-186.67 0-367.97 0-479.3-13.24-2.5392-0.3-3.9161 3.01-1.8718 4.6z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <mask id="path-637-inside-1_2901_184330" fill="white">
+   <path d="m14 13c-6.6274 0-12 5.3726-12 12v1005.8c0 3.15 1.2942 6.03 4.3096 6.95 70.687 21.36 906.31 24.36 988.32 0.26 3.626-1.06 5.373-4.51 5.373-8.29v-1004.8c0-6.6274-5.373-12-12-12h-974zm789 27c-3.866 0-7 3.134-7 7v982c0 3.87 3.134 7 7 7h44c3.866 0 7-3.13 7-7v-982c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill-rule="evenodd"/>
+  </mask>
+  <path d="m14 13c-6.6274 0-12 5.3726-12 12v1005.8c0 3.15 1.2942 6.03 4.3096 6.95 70.687 21.36 906.31 24.36 988.32 0.26 3.626-1.06 5.373-4.51 5.373-8.29v-1004.8c0-6.6274-5.373-12-12-12h-974zm789 27c-3.866 0-7 3.134-7 7v982c0 3.87 3.134 7 7 7h44c3.866 0 7-3.13 7-7v-982c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill="#E5E5E5" fill-rule="evenodd" tb:tag="background"/>
+  <path d="m14 13c-6.6274 0-12 5.3726-12 12v1005.8c0 3.15 1.2942 6.03 4.3096 6.95 70.687 21.36 906.31 24.36 988.32 0.26 3.626-1.06 5.373-4.51 5.373-8.29v-1004.8c0-6.6274-5.373-12-12-12h-974zm789 27c-3.866 0-7 3.134-7 7v982c0 3.87 3.134 7 7 7h44c3.866 0 7-3.13 7-7v-982c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill="url(#paint628_linear_2901_184330)" fill-rule="evenodd"/>
+  <path d="m6.3096 1037.8-0.868 2.87h1e-5l0.86799-2.87zm988.32 0.26 0.846 2.88-0.846-2.88zm-989.63-1013.1c0-4.9705 4.0294-9 9-9v-6c-8.2843 0-15 6.7158-15 15h6zm0 1005.8v-1005.8h-6v1005.8h6zm2.1776 4.07c-1.2242-0.37-2.1776-1.59-2.1776-4.07h-6c0 3.83 1.635 8.36 6.4416 9.82l1.736-5.75zm986.6 0.26c-9.882 2.91-31.569 5.49-62.478 7.67-30.779 2.18-70.379 3.96-115.85 5.34-90.934 2.78-205.25 3.99-319.23 3.79-113.98-0.21-227.59-1.83-317.11-4.74-44.764-1.45-83.482-3.23-113.2-5.3-29.877-2.09-50.293-4.46-58.739-7.02l-1.736 5.75c9.2256 2.79 30.386 5.18 60.057 7.25 29.827 2.09 68.629 3.86 113.43 5.32 89.601 2.91 203.28 4.53 317.29 4.74 114.02 0.2 228.4-1.01 319.42-3.79 45.507-1.39 85.197-3.16 116.09-5.35 30.762-2.18 53.128-4.78 63.747-7.9l-1.692-5.76zm3.219-5.41c0 2.96-1.307 4.85-3.219 5.41l1.692 5.76c5.337-1.57 7.527-6.58 7.527-11.17h-6zm0-1004.8v1004.8h6v-1004.8h-6zm-9-9c4.971 0 9 4.0294 9 9h6c0-8.2843-6.716-15-15-15v6zm-974 0h974v-6h-974v6zm785 31c0-2.2091 1.791-4 4-4v-6c-5.523 0-10 4.4771-10 10h6zm0 982v-982h-6v982h6zm4 4c-2.209 0-4-1.79-4-4h-6c0 5.52 4.477 10 10 10v-6zm44 0h-44v6h44v-6zm4-4c0 2.21-1.791 4-4 4v6c5.523 0 10-4.48 10-10h-6zm0-982v982h6v-982h-6zm-4-4c2.209 0 4 1.7909 4 4h6c0-5.5229-4.477-10-10-10v6zm-44 0h44v-6h-44v6z" fill="#000" fill-opacity=".12" mask="url(#path-637-inside-1_2901_184330)"/>
+  <path d="m794.5 47c0-4.6944 3.806-8.5 8.5-8.5h44c4.694 0 8.5 3.8056 8.5 8.5v982c0 4.69-3.806 8.5-8.5 8.5h-44c-4.694 0-8.5-3.81-8.5-8.5v-982z" stroke="#727171" stroke-width="3"/>
+ </g><g transform="translate(0,235)" filter="url(#filter0_ii_1694_158298)" tb:tag="value-box">
+  <path d="m381 272c0-6.627 5.373-12 12-12h216c6.627 0 12 5.373 12 12v56c0 6.627-5.373 12-12 12h-216c-6.627 0-12-5.373-12-12z" fill="#f3f3f3" tb:tag="value-box-background"/>
+  <path d="m382.5 272c0-5.799 4.701-10.5 10.5-10.5h216c5.799 0 10.5 4.701 10.5 10.5v56c0 5.799-4.701 10.5-10.5 10.5h-216c-5.799 0-10.5-4.701-10.5-10.5z" stroke="#727171" stroke-width="3"/>
+  <text x="500.74219" y="300.07812" fill="#727171" font-family="Roboto" font-size="32px" font-weight="500" text-anchor="middle" tb:tag="value-text" xml:space="preserve"><tspan dominant-baseline="middle">1660 gal</tspan></text>
+ </g><ellipse cx="500" cy="16" rx="496" ry="16" fill="#5D5C5C"/><rect transform="rotate(-90 451.5 1398.5)" x="451.5" y="1398.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><g style="display: none;" tb:tag="stand">
+  <rect x="107" y="1363" width="80" height="24" rx="7" fill="#fff" style=""/>
+  <rect x="107" y="1363" width="80" height="24" rx="7" fill="url(#paint629_linear_2901_184330)" style=""/>
+  <rect x="108.5" y="1364.5" width="77" height="21" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <rect x="811" y="1363" width="80" height="24" rx="7" fill="#fff" style=""/>
+  <rect x="811" y="1363" width="80" height="24" rx="7" fill="url(#paint630_linear_2901_184330)" style=""/>
+  <rect x="812.5" y="1364.5" width="77" height="21" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m131 1363v-227l32 25v202h-32z" fill="#fff" style=""/>
+  <path d="m131 1363v-227l32 25v202h-32z" fill="url(#paint631_linear_2901_184330)" style=""/>
+  <path d="m132.5 1361.5v-222.42l29 22.65v199.77h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m835 1363v-202l32-25v227h-32z" fill="#fff" style=""/>
+  <path d="m835 1363v-202l32-25v227h-32z" fill="url(#paint632_linear_2901_184330)" style=""/>
+  <path d="m836.5 1361.5v-199.77l29-22.65v222.42h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <circle cx="891" cy="989" r="32" fill="url(#paint633_radial_2901_184330)" style=""/>
+  <circle cx="891" cy="989" r="30.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <circle cx="107" cy="989" r="32" fill="url(#paint634_radial_2901_184330)" style=""/>
+  <circle cx="107" cy="989" r="30.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m91 1372v-381c0-8.837 7.1634-16 16-16 8.837 0 16 7.163 16 16v381h-32z" fill="#fff" style=""/>
+  <path d="m91 1372v-381c0-8.837 7.1634-16 16-16 8.837 0 16 7.163 16 16v381h-32z" fill="url(#paint635_linear_2901_184330)" style=""/>
+  <path d="m92.5 1370.5v-379.5c0-8.008 6.4919-14.5 14.5-14.5 8.008 0 14.5 6.492 14.5 14.5v379.5h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <path d="m875 1371v-380c0-8.837 7.163-16 16-16s16 7.163 16 16v380h-32z" fill="#fff" style=""/>
+  <path d="m875 1371v-380c0-8.837 7.163-16 16-16s16 7.163 16 16v380h-32z" fill="url(#paint636_linear_2901_184330)" style=""/>
+  <path d="m876.5 1369.5v-378.5c0-8.008 6.492-14.5 14.5-14.5s14.5 6.492 14.5 14.5v378.5h-29z" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <rect x="57" y="1371" width="100" height="29" rx="7" fill="#fff" style=""/>
+  <rect x="57" y="1371" width="100" height="29" rx="7" fill="url(#paint637_linear_2901_184330)" style=""/>
+  <rect x="58.5" y="1372.5" width="97" height="26" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+  <rect x="841" y="1371" width="100" height="29" rx="7" fill="#fff" style=""/>
+  <rect x="841" y="1371" width="100" height="29" rx="7" fill="url(#paint638_linear_2901_184330)" style=""/>
+  <rect x="842.5" y="1372.5" width="97" height="26" rx="5.5" stroke="#000" stroke-opacity=".12" stroke-width="3" style=""/>
+ </g><path d="m336.32 0s-336.32 0-336.32 234.5v1149.3c0 9.2792 8.9543 16.241 20 16.241h960c11.045 0 20-6.9622 20-16.241v-1149.3c0-234.5-330.35-234.5-330.35-234.5h-169.65zm335.35 284.2c-6.4433 0-11.667 4.3876-11.667 9.8v1051.4c0 5.4124 5.2233 9.8 11.667 9.8h73.333c6.4433 0 11.667-4.3876 11.667-9.8v-1051.4c0-5.4124-5.2233-9.8-11.667-9.8z" fill="#000" fill-opacity="0" tb:tag="clickArea"/><defs>
+  <linearGradient id="paint0_linear_2901_184330" x1="1e3" x2="2.2785" y1="1218.6" y2="1267.1" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2901_184330" x1="1e3" x2=".6771" y1="736.15" y2="708.6" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint627_linear_2901_184330" x1="1e3" x2="2.2785" y1="1216.6" y2="1265.1" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint628_linear_2901_184330" x1="1e3" x2="2.199" y1="537.49" y2="520.73" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint629_linear_2901_184330" x1="108.82" x2="129.39" y1="1375" y2="1408.9" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint630_linear_2901_184330" x1="812.82" x2="833.39" y1="1375" y2="1408.9" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint631_linear_2901_184330" x1="131" x2="163" y1="1223.1" y2="1223.1" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint632_linear_2901_184330" x1="835" x2="867" y1="1223.6" y2="1223.6" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <radialGradient id="paint633_radial_2901_184330" cx="0" cy="0" r="1" gradientTransform="translate(891 989) rotate(90) scale(32)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#D9D9D9" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </radialGradient>
+  <radialGradient id="paint634_radial_2901_184330" cx="0" cy="0" r="1" gradientTransform="translate(107 989) rotate(90) scale(32)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#D9D9D9" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </radialGradient>
+  <linearGradient id="paint635_linear_2901_184330" x1="91" x2="123" y1="1197" y2="1197" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint636_linear_2901_184330" x1="875" x2="907" y1="1197" y2="1197" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint637_linear_2901_184330" x1="59.273" x2="83.733" y1="1385.5" y2="1427.2" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint638_linear_2901_184330" x1="843.27" x2="867.73" y1="1385.5" y2="1427.2" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" stop-opacity=".2" offset="0"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <filter id="filter0_ii_1694_158298" x="377" y="256" width="248" height="88" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="4" dy="4"/>
+   <feGaussianBlur stdDeviation="3"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1694_158298"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-4" dy="-4"/>
+   <feGaussianBlur stdDeviation="2"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+   <feBlend in2="effect1_innerShadow_1694_158298" result="effect2_innerShadow_1694_158298"/>
+  </filter>
+  <pattern id="liquid" width="584" height="201" patternUnits="userSpaceOnUse">
+   <rect width="584" height="201" fill="url(#base-liquid)" stroke-width="0"/>
+  </pattern>
+  <pattern id="base-liquid" width="584" height="201" patternTransform="translate(8,791)" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid">
+   <circle cx="93" cy="33" r="8" fill="url(#paint1_linear_1687_130892)" style="fill:url(#paint1_linear_1687_130892)"/>
+   <circle cx="67" cy="166" r="8" fill="url(#paint2_linear_1687_130892)" style="fill:url(#paint2_linear_1687_130892)"/>
+   <circle cx="27" cy="193" r="8" fill="url(#paint3_linear_1687_130892)" style="fill:url(#paint3_linear_1687_130892)"/>
+   <circle cx="59" cy="130" r="8" fill="url(#paint4_linear_1687_130892)" style="fill:url(#paint4_linear_1687_130892)"/>
+   <circle cx="10" cy="49" r="8" fill="url(#paint5_linear_1687_130892)" style="fill:url(#paint5_linear_1687_130892)"/>
+   <circle cx="10" cy="170" r="8" fill="url(#paint6_linear_1687_130892)" style="fill:url(#paint6_linear_1687_130892)"/>
+   <circle cx="56" cy="41" r="5" fill="url(#paint7_linear_1687_130892)" style="fill:url(#paint7_linear_1687_130892)"/>
+   <circle cx="41" cy="20" r="5" fill="url(#paint8_linear_1687_130892)" style="fill:url(#paint8_linear_1687_130892)"/>
+   <circle cx="74" cy="110" r="4" fill="url(#paint9_linear_1687_130892)" style="fill:url(#paint9_linear_1687_130892)"/>
+   <circle cx="223" cy="128" r="4" fill="url(#paint10_linear_1687_130892)" style="fill:url(#paint10_linear_1687_130892)"/>
+   <circle cx="8" cy="87" r="4" fill="url(#paint11_linear_1687_130892)" style="fill:url(#paint11_linear_1687_130892)"/>
+   <circle cx="37" cy="73" r="5" fill="url(#paint12_linear_1687_130892)" style="fill:url(#paint12_linear_1687_130892)"/>
+   <circle cx="61" cy="92" r="5" fill="url(#paint13_linear_1687_130892)" style="fill:url(#paint13_linear_1687_130892)"/>
+   <circle cx="33.5" cy="150.5" r="2.5" fill="url(#paint14_linear_1687_130892)" style="fill:url(#paint14_linear_1687_130892)"/>
+   <circle cx="56.5" cy="182.5" r="2.5" fill="url(#paint15_linear_1687_130892)" style="fill:url(#paint15_linear_1687_130892)"/>
+   <circle cx="72.5" cy="73.5" r="2.5" fill="url(#paint16_linear_1687_130892)" style="fill:url(#paint16_linear_1687_130892)"/>
+   <circle cx="44.5" cy="106.5" r="2.5" fill="url(#paint17_linear_1687_130892)" style="fill:url(#paint17_linear_1687_130892)"/>
+   <circle cx="27.5" cy="117.5" r="2.5" fill="url(#paint18_linear_1687_130892)" style="fill:url(#paint18_linear_1687_130892)"/>
+   <circle cx="16.5" cy="63.5" r="2.5" fill="url(#paint19_linear_1687_130892)" style="fill:url(#paint19_linear_1687_130892)"/>
+   <circle cx="4" cy="29" r="4" fill="url(#paint20_linear_1687_130892)" style="fill:url(#paint20_linear_1687_130892)"/>
+   <circle cx="4" cy="150" r="4" fill="url(#paint21_linear_1687_130892)" style="fill:url(#paint21_linear_1687_130892)"/>
+   <circle cx="9.5" cy="110.5" r="9.5" fill="url(#paint22_linear_1687_130892)" style="fill:url(#paint22_linear_1687_130892)"/>
+   <circle cx="101" cy="196" r="5" fill="url(#paint23_linear_1687_130892)" style="fill:url(#paint23_linear_1687_130892)"/>
+   <circle cx="75.5" cy="62.5" r="2.5" fill="url(#paint24_linear_1687_130892)" style="fill:url(#paint24_linear_1687_130892)"/>
+   <circle cx="75.5" cy="49.5" r="2.5" fill="url(#paint25_linear_1687_130892)" style="fill:url(#paint25_linear_1687_130892)"/>
+   <circle cx="109" cy="119" r="5" fill="url(#paint26_linear_1687_130892)" style="fill:url(#paint26_linear_1687_130892)"/>
+   <circle cx="80.5" cy="140.5" r="2.5" fill="url(#paint27_linear_1687_130892)" style="fill:url(#paint27_linear_1687_130892)"/>
+   <circle cx="73" cy="189" r="5" fill="url(#paint28_linear_1687_130892)" style="fill:url(#paint28_linear_1687_130892)"/>
+   <circle cx="112" cy="153" r="5" fill="url(#paint29_linear_1687_130892)" style="fill:url(#paint29_linear_1687_130892)"/>
+   <circle cx="93.5" cy="89.5" r="2.5" fill="url(#paint30_linear_1687_130892)" style="fill:url(#paint30_linear_1687_130892)"/>
+   <circle cx="219" cy="33" r="8" fill="url(#paint31_linear_1687_130892)" style="fill:url(#paint31_linear_1687_130892)"/>
+   <circle cx="193" cy="166" r="8" fill="url(#paint32_linear_1687_130892)" style="fill:url(#paint32_linear_1687_130892)"/>
+   <circle cx="153" cy="193" r="8" fill="url(#paint33_linear_1687_130892)" style="fill:url(#paint33_linear_1687_130892)"/>
+   <circle cx="181" cy="138" r="8" fill="url(#paint34_linear_1687_130892)" style="fill:url(#paint34_linear_1687_130892)"/>
+   <circle cx="119" cy="63" r="8" fill="url(#paint35_linear_1687_130892)" style="fill:url(#paint35_linear_1687_130892)"/>
+   <circle cx="136" cy="170" r="8" fill="url(#paint36_linear_1687_130892)" style="fill:url(#paint36_linear_1687_130892)"/>
+   <circle cx="182" cy="41" r="5" fill="url(#paint37_linear_1687_130892)" style="fill:url(#paint37_linear_1687_130892)"/>
+   <circle cx="167" cy="20" r="5" fill="url(#paint38_linear_1687_130892)" style="fill:url(#paint38_linear_1687_130892)"/>
+   <circle cx="200" cy="110" r="4" fill="url(#paint39_linear_1687_130892)" style="fill:url(#paint39_linear_1687_130892)"/>
+   <circle cx="134" cy="87" r="4" fill="url(#paint40_linear_1687_130892)" style="fill:url(#paint40_linear_1687_130892)"/>
+   <circle cx="163" cy="73" r="5" fill="url(#paint41_linear_1687_130892)" style="fill:url(#paint41_linear_1687_130892)"/>
+   <circle cx="187" cy="92" r="5" fill="url(#paint42_linear_1687_130892)" style="fill:url(#paint42_linear_1687_130892)"/>
+   <circle cx="159.5" cy="150.5" r="2.5" fill="url(#paint43_linear_1687_130892)" style="fill:url(#paint43_linear_1687_130892)"/>
+   <circle cx="182.5" cy="182.5" r="2.5" fill="url(#paint44_linear_1687_130892)" style="fill:url(#paint44_linear_1687_130892)"/>
+   <circle cx="198.5" cy="73.5" r="2.5" fill="url(#paint45_linear_1687_130892)" style="fill:url(#paint45_linear_1687_130892)"/>
+   <circle cx="170.5" cy="106.5" r="2.5" fill="url(#paint46_linear_1687_130892)" style="fill:url(#paint46_linear_1687_130892)"/>
+   <circle cx="153.5" cy="117.5" r="2.5" fill="url(#paint47_linear_1687_130892)" style="fill:url(#paint47_linear_1687_130892)"/>
+   <circle cx="142.5" cy="63.5" r="2.5" fill="url(#paint48_linear_1687_130892)" style="fill:url(#paint48_linear_1687_130892)"/>
+   <circle cx="130" cy="29" r="4" fill="url(#paint49_linear_1687_130892)" style="fill:url(#paint49_linear_1687_130892)"/>
+   <circle cx="130" cy="150" r="4" fill="url(#paint50_linear_1687_130892)" style="fill:url(#paint50_linear_1687_130892)"/>
+   <circle cx="135.5" cy="110.5" r="9.5" fill="url(#paint51_linear_1687_130892)" style="fill:url(#paint51_linear_1687_130892)"/>
+   <circle cx="232" cy="180" r="5" fill="url(#paint52_linear_1687_130892)" style="fill:url(#paint52_linear_1687_130892)"/>
+   <circle cx="213.5" cy="66.5" r="2.5" fill="url(#paint53_linear_1687_130892)" style="fill:url(#paint53_linear_1687_130892)"/>
+   <circle cx="165.5" cy="36.5" r="2.5" fill="url(#paint54_linear_1687_130892)" style="fill:url(#paint54_linear_1687_130892)"/>
+   <circle cx="233" cy="103" r="5" fill="url(#paint55_linear_1687_130892)" style="fill:url(#paint55_linear_1687_130892)"/>
+   <circle cx="206.5" cy="140.5" r="2.5" fill="url(#paint56_linear_1687_130892)" style="fill:url(#paint56_linear_1687_130892)"/>
+   <circle cx="224.5" cy="198.5" r="2.5" fill="url(#paint57_linear_1687_130892)" style="fill:url(#paint57_linear_1687_130892)"/>
+   <circle cx="199" cy="189" r="5" fill="url(#paint58_linear_1687_130892)" style="fill:url(#paint58_linear_1687_130892)"/>
+   <circle cx="238" cy="153" r="5" fill="url(#paint59_linear_1687_130892)" style="fill:url(#paint59_linear_1687_130892)"/>
+   <circle cx="219.5" cy="89.5" r="2.5" fill="url(#paint60_linear_1687_130892)" style="fill:url(#paint60_linear_1687_130892)"/>
+   <circle cx="68.5" cy="7.5" r="2.5" fill="url(#paint61_linear_1687_130892)" style="fill:url(#paint61_linear_1687_130892)"/>
+   <circle cx="202.5" cy="12.5" r="2.5" fill="url(#paint62_linear_1687_130892)" style="fill:url(#paint62_linear_1687_130892)"/>
+   <circle cx="114" cy="5" r="5" fill="url(#paint63_linear_1687_130892)" style="fill:url(#paint63_linear_1687_130892)"/>
+   <circle cx="355" cy="33" r="8" fill="url(#paint64_linear_1687_130892)" style="fill:url(#paint64_linear_1687_130892)"/>
+   <circle cx="329" cy="166" r="8" fill="url(#paint65_linear_1687_130892)" style="fill:url(#paint65_linear_1687_130892)"/>
+   <circle cx="289" cy="193" r="8" fill="url(#paint66_linear_1687_130892)" style="fill:url(#paint66_linear_1687_130892)"/>
+   <circle cx="320" cy="136" r="8" fill="url(#paint67_linear_1687_130892)" style="fill:url(#paint67_linear_1687_130892)"/>
+   <circle cx="272" cy="49" r="8" fill="url(#paint68_linear_1687_130892)" style="fill:url(#paint68_linear_1687_130892)"/>
+   <circle cx="272" cy="170" r="8" fill="url(#paint69_linear_1687_130892)" style="fill:url(#paint69_linear_1687_130892)"/>
+   <circle cx="318" cy="41" r="5" fill="url(#paint70_linear_1687_130892)" style="fill:url(#paint70_linear_1687_130892)"/>
+   <circle cx="303" cy="20" r="5" fill="url(#paint71_linear_1687_130892)" style="fill:url(#paint71_linear_1687_130892)"/>
+   <circle cx="336" cy="110" r="4" fill="url(#paint72_linear_1687_130892)" style="fill:url(#paint72_linear_1687_130892)"/>
+   <circle cx="485" cy="128" r="4" fill="url(#paint73_linear_1687_130892)" style="fill:url(#paint73_linear_1687_130892)"/>
+   <circle cx="547" cy="92" r="4" fill="url(#paint74_linear_1687_130892)" style="fill:url(#paint74_linear_1687_130892)"/>
+   <circle cx="270" cy="87" r="4" fill="url(#paint75_linear_1687_130892)" style="fill:url(#paint75_linear_1687_130892)"/>
+   <circle cx="299" cy="73" r="5" fill="url(#paint76_linear_1687_130892)" style="fill:url(#paint76_linear_1687_130892)"/>
+   <circle cx="323" cy="92" r="5" fill="url(#paint77_linear_1687_130892)" style="fill:url(#paint77_linear_1687_130892)"/>
+   <circle cx="295.5" cy="150.5" r="2.5" fill="url(#paint78_linear_1687_130892)" style="fill:url(#paint78_linear_1687_130892)"/>
+   <circle cx="318.5" cy="182.5" r="2.5" fill="url(#paint79_linear_1687_130892)" style="fill:url(#paint79_linear_1687_130892)"/>
+   <circle cx="334.5" cy="73.5" r="2.5" fill="url(#paint80_linear_1687_130892)" style="fill:url(#paint80_linear_1687_130892)"/>
+   <circle cx="306.5" cy="106.5" r="2.5" fill="url(#paint81_linear_1687_130892)" style="fill:url(#paint81_linear_1687_130892)"/>
+   <circle cx="289.5" cy="117.5" r="2.5" fill="url(#paint82_linear_1687_130892)" style="fill:url(#paint82_linear_1687_130892)"/>
+   <circle cx="243.5" cy="67.5" r="2.5" fill="url(#paint83_linear_1687_130892)" style="fill:url(#paint83_linear_1687_130892)"/>
+   <circle cx="257" cy="20" r="4" fill="url(#paint84_linear_1687_130892)" style="fill:url(#paint84_linear_1687_130892)"/>
+   <circle cx="266" cy="150" r="4" fill="url(#paint85_linear_1687_130892)" style="fill:url(#paint85_linear_1687_130892)"/>
+   <circle cx="261.5" cy="126.5" r="9.5" fill="url(#paint86_linear_1687_130892)" style="fill:url(#paint86_linear_1687_130892)"/>
+   <circle cx="510.5" cy="43.5" r="9.5" fill="url(#paint87_linear_1687_130892)" style="fill:url(#paint87_linear_1687_130892)"/>
+   <circle cx="520.5" cy="128.5" r="9.5" fill="url(#paint88_linear_1687_130892)" style="fill:url(#paint88_linear_1687_130892)"/>
+   <circle cx="363" cy="196" r="5" fill="url(#paint89_linear_1687_130892)" style="fill:url(#paint89_linear_1687_130892)"/>
+   <circle cx="342.5" cy="83.5" r="2.5" fill="url(#paint90_linear_1687_130892)" style="fill:url(#paint90_linear_1687_130892)"/>
+   <circle cx="368.5" cy="89.5" r="2.5" fill="url(#paint91_linear_1687_130892)" style="fill:url(#paint91_linear_1687_130892)"/>
+   <circle cx="371" cy="119" r="5" fill="url(#paint92_linear_1687_130892)" style="fill:url(#paint92_linear_1687_130892)"/>
+   <circle cx="547" cy="119" r="5" fill="url(#paint93_linear_1687_130892)" style="fill:url(#paint93_linear_1687_130892)"/>
+   <circle cx="342.5" cy="140.5" r="2.5" fill="url(#paint94_linear_1687_130892)" style="fill:url(#paint94_linear_1687_130892)"/>
+   <circle cx="335" cy="189" r="5" fill="url(#paint95_linear_1687_130892)" style="fill:url(#paint95_linear_1687_130892)"/>
+   <circle cx="374" cy="153" r="5" fill="url(#paint96_linear_1687_130892)" style="fill:url(#paint96_linear_1687_130892)"/>
+   <circle cx="515" cy="176" r="5" fill="url(#paint97_linear_1687_130892)" style="fill:url(#paint97_linear_1687_130892)"/>
+   <circle cx="355.5" cy="89.5" r="2.5" fill="url(#paint98_linear_1687_130892)" style="fill:url(#paint98_linear_1687_130892)"/>
+   <circle cx="481" cy="33" r="8" fill="url(#paint99_linear_1687_130892)" style="fill:url(#paint99_linear_1687_130892)"/>
+   <circle cx="547" cy="23" r="8" fill="url(#paint100_linear_1687_130892)" style="fill:url(#paint100_linear_1687_130892)"/>
+   <circle cx="455" cy="166" r="8" fill="url(#paint101_linear_1687_130892)" style="fill:url(#paint101_linear_1687_130892)"/>
+   <circle cx="415" cy="193" r="8" fill="url(#paint102_linear_1687_130892)" style="fill:url(#paint102_linear_1687_130892)"/>
+   <circle cx="443" cy="138" r="8" fill="url(#paint103_linear_1687_130892)" style="fill:url(#paint103_linear_1687_130892)"/>
+   <circle cx="576" cy="153" r="8" fill="url(#paint104_linear_1687_130892)" style="fill:url(#paint104_linear_1687_130892)"/>
+   <circle cx="381" cy="63" r="8" fill="url(#paint105_linear_1687_130892)" style="fill:url(#paint105_linear_1687_130892)"/>
+   <circle cx="398" cy="170" r="8" fill="url(#paint106_linear_1687_130892)" style="fill:url(#paint106_linear_1687_130892)"/>
+   <circle cx="539" cy="193" r="8" fill="url(#paint107_linear_1687_130892)" style="fill:url(#paint107_linear_1687_130892)"/>
+   <circle cx="444" cy="41" r="5" fill="url(#paint108_linear_1687_130892)" style="fill:url(#paint108_linear_1687_130892)"/>
+   <circle cx="579" cy="39" r="5" fill="url(#paint109_linear_1687_130892)" style="fill:url(#paint109_linear_1687_130892)"/>
+   <circle cx="568" cy="196" r="5" fill="url(#paint110_linear_1687_130892)" style="fill:url(#paint110_linear_1687_130892)"/>
+   <circle cx="515" cy="10" r="5" fill="url(#paint111_linear_1687_130892)" style="fill:url(#paint111_linear_1687_130892)"/>
+   <circle cx="429" cy="20" r="5" fill="url(#paint112_linear_1687_130892)" style="fill:url(#paint112_linear_1687_130892)"/>
+   <circle cx="462" cy="110" r="4" fill="url(#paint113_linear_1687_130892)" style="fill:url(#paint113_linear_1687_130892)"/>
+   <circle cx="396" cy="87" r="4" fill="url(#paint114_linear_1687_130892)" style="fill:url(#paint114_linear_1687_130892)"/>
+   <circle cx="425" cy="73" r="5" fill="url(#paint115_linear_1687_130892)" style="fill:url(#paint115_linear_1687_130892)"/>
+   <circle cx="505" cy="76" r="5" fill="url(#paint116_linear_1687_130892)" style="fill:url(#paint116_linear_1687_130892)"/>
+   <circle cx="449" cy="92" r="5" fill="url(#paint117_linear_1687_130892)" style="fill:url(#paint117_linear_1687_130892)"/>
+   <circle cx="421.5" cy="150.5" r="2.5" fill="url(#paint118_linear_1687_130892)" style="fill:url(#paint118_linear_1687_130892)"/>
+   <circle cx="444.5" cy="182.5" r="2.5" fill="url(#paint119_linear_1687_130892)" style="fill:url(#paint119_linear_1687_130892)"/>
+   <circle cx="460.5" cy="73.5" r="2.5" fill="url(#paint120_linear_1687_130892)" style="fill:url(#paint120_linear_1687_130892)"/>
+   <circle cx="528.5" cy="90.5" r="2.5" fill="url(#paint121_linear_1687_130892)" style="fill:url(#paint121_linear_1687_130892)"/>
+   <circle cx="432.5" cy="106.5" r="2.5" fill="url(#paint122_linear_1687_130892)" style="fill:url(#paint122_linear_1687_130892)"/>
+   <circle cx="568.5" cy="89.5" r="2.5" fill="url(#paint123_linear_1687_130892)" style="fill:url(#paint123_linear_1687_130892)"/>
+   <circle cx="415.5" cy="117.5" r="2.5" fill="url(#paint124_linear_1687_130892)" style="fill:url(#paint124_linear_1687_130892)"/>
+   <circle cx="404.5" cy="63.5" r="2.5" fill="url(#paint125_linear_1687_130892)" style="fill:url(#paint125_linear_1687_130892)"/>
+   <circle cx="540.5" cy="46.5" r="2.5" fill="url(#paint126_linear_1687_130892)" style="fill:url(#paint126_linear_1687_130892)"/>
+   <circle cx="392" cy="29" r="4" fill="url(#paint127_linear_1687_130892)" style="fill:url(#paint127_linear_1687_130892)"/>
+   <circle cx="392" cy="150" r="4" fill="url(#paint128_linear_1687_130892)" style="fill:url(#paint128_linear_1687_130892)"/>
+   <circle cx="397.5" cy="110.5" r="9.5" fill="url(#paint129_linear_1687_130892)" style="fill:url(#paint129_linear_1687_130892)"/>
+   <circle cx="494" cy="180" r="5" fill="url(#paint130_linear_1687_130892)" style="fill:url(#paint130_linear_1687_130892)"/>
+   <circle cx="475.5" cy="66.5" r="2.5" fill="url(#paint131_linear_1687_130892)" style="fill:url(#paint131_linear_1687_130892)"/>
+   <circle cx="427.5" cy="36.5" r="2.5" fill="url(#paint132_linear_1687_130892)" style="fill:url(#paint132_linear_1687_130892)"/>
+   <circle cx="495" cy="103" r="5" fill="url(#paint133_linear_1687_130892)" style="fill:url(#paint133_linear_1687_130892)"/>
+   <circle cx="468.5" cy="140.5" r="2.5" fill="url(#paint134_linear_1687_130892)" style="fill:url(#paint134_linear_1687_130892)"/>
+   <circle cx="540.5" cy="148.5" r="2.5" fill="url(#paint135_linear_1687_130892)" style="fill:url(#paint135_linear_1687_130892)"/>
+   <circle cx="486.5" cy="198.5" r="2.5" fill="url(#paint136_linear_1687_130892)" style="fill:url(#paint136_linear_1687_130892)"/>
+   <circle cx="461" cy="189" r="5" fill="url(#paint137_linear_1687_130892)" style="fill:url(#paint137_linear_1687_130892)"/>
+   <circle cx="557" cy="167" r="5" fill="url(#paint138_linear_1687_130892)" style="fill:url(#paint138_linear_1687_130892)"/>
+   <circle cx="557" cy="66" r="5" fill="url(#paint139_linear_1687_130892)" style="fill:url(#paint139_linear_1687_130892)"/>
+   <circle cx="500" cy="153" r="5" fill="url(#paint140_linear_1687_130892)" style="fill:url(#paint140_linear_1687_130892)"/>
+   <circle cx="481.5" cy="89.5" r="2.5" fill="url(#paint141_linear_1687_130892)" style="fill:url(#paint141_linear_1687_130892)"/>
+   <circle cx="525.5" cy="73.5" r="2.5" fill="url(#paint142_linear_1687_130892)" style="fill:url(#paint142_linear_1687_130892)"/>
+   <circle cx="330.5" cy="7.5" r="2.5" fill="url(#paint143_linear_1687_130892)" style="fill:url(#paint143_linear_1687_130892)"/>
+   <circle cx="464.5" cy="12.5" r="2.5" fill="url(#paint144_linear_1687_130892)" style="fill:url(#paint144_linear_1687_130892)"/>
+   <circle cx="376" cy="5" r="5" fill="url(#paint145_linear_1687_130892)" style="fill:url(#paint145_linear_1687_130892)"/>
+   <path d="m0 0h584v197c0 2.209-1.791 4-4 4h-576c-2.2092 0-4-1.791-4-4z" fill="#1EC1F4" fill-opacity=".5" style="fill-opacity:0"/>
+  </pattern>
+  <linearGradient id="paint1_linear_1687_130892" x1="99.316" x2="101" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint2_linear_1687_130892" x1="73.316" x2="75" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint3_linear_1687_130892" x1="33.316" x2="35" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint4_linear_1687_130892" x1="65.316" x2="67" y1="914.26" y2="929" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint5_linear_1687_130892" x1="16.316" x2="18" y1="833.26" y2="848" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_1687_130892" x1="16.316" x2="18" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint7_linear_1687_130892" x1="62.947" x2="64" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint8_linear_1687_130892" x1="47.947" x2="49" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint9_linear_1687_130892" x1="81.158" x2="82" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint10_linear_1687_130892" x1="230.16" x2="231" y1="915.63" y2="923" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint11_linear_1687_130892" x1="15.158" x2="16" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint12_linear_1687_130892" x1="43.947" x2="45" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint13_linear_1687_130892" x1="67.947" x2="69" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint14_linear_1687_130892" x1="40.974" x2="41.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint15_linear_1687_130892" x1="63.974" x2="64.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint16_linear_1687_130892" x1="79.974" x2="80.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint17_linear_1687_130892" x1="51.974" x2="52.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint18_linear_1687_130892" x1="34.974" x2="35.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint19_linear_1687_130892" x1="23.974" x2="24.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint20_linear_1687_130892" x1="11.158" x2="12" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint21_linear_1687_130892" x1="11.158" x2="12" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint22_linear_1687_130892" x1="15.5" x2="17.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint23_linear_1687_130892" x1="107.95" x2="109" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint24_linear_1687_130892" x1="82.974" x2="83.5" y1="851.4" y2="856" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint25_linear_1687_130892" x1="82.974" x2="83.5" y1="838.4" y2="843" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint26_linear_1687_130892" x1="115.95" x2="117" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint27_linear_1687_130892" x1="87.974" x2="88.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint28_linear_1687_130892" x1="79.947" x2="81" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint29_linear_1687_130892" x1="118.95" x2="120" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint30_linear_1687_130892" x1="100.97" x2="101.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint31_linear_1687_130892" x1="225.32" x2="227" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint32_linear_1687_130892" x1="199.32" x2="201" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint33_linear_1687_130892" x1="159.32" x2="161" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint34_linear_1687_130892" x1="187.32" x2="189" y1="922.26" y2="937" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint35_linear_1687_130892" x1="125.32" x2="127" y1="847.26" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint36_linear_1687_130892" x1="142.32" x2="144" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint37_linear_1687_130892" x1="188.95" x2="190" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint38_linear_1687_130892" x1="173.95" x2="175" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint39_linear_1687_130892" x1="207.16" x2="208" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint40_linear_1687_130892" x1="141.16" x2="142" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint41_linear_1687_130892" x1="169.95" x2="171" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint42_linear_1687_130892" x1="193.95" x2="195" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint43_linear_1687_130892" x1="166.97" x2="167.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint44_linear_1687_130892" x1="189.97" x2="190.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint45_linear_1687_130892" x1="205.97" x2="206.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint46_linear_1687_130892" x1="177.97" x2="178.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint47_linear_1687_130892" x1="160.97" x2="161.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint48_linear_1687_130892" x1="149.97" x2="150.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint49_linear_1687_130892" x1="137.16" x2="138" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint50_linear_1687_130892" x1="137.16" x2="138" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint51_linear_1687_130892" x1="141.5" x2="143.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint52_linear_1687_130892" x1="238.95" x2="240" y1="966.79" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint53_linear_1687_130892" x1="220.97" x2="221.5" y1="855.4" y2="860" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint54_linear_1687_130892" x1="172.97" x2="173.5" y1="825.4" y2="830" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint55_linear_1687_130892" x1="239.95" x2="241" y1="889.79" y2="899" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint56_linear_1687_130892" x1="213.97" x2="214.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint57_linear_1687_130892" x1="231.97" x2="232.5" y1="987.4" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint58_linear_1687_130892" x1="205.95" x2="207" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint59_linear_1687_130892" x1="244.95" x2="246" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint60_linear_1687_130892" x1="226.97" x2="227.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint61_linear_1687_130892" x1="75.974" x2="76.5" y1="796.4" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint62_linear_1687_130892" x1="209.97" x2="210.5" y1="801.4" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint63_linear_1687_130892" x1="120.95" x2="122" y1="791.79" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint64_linear_1687_130892" x1="361.32" x2="363" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint65_linear_1687_130892" x1="335.32" x2="337" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint66_linear_1687_130892" x1="295.32" x2="297" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint67_linear_1687_130892" x1="326.32" x2="328" y1="920.26" y2="935" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint68_linear_1687_130892" x1="278.32" x2="280" y1="833.26" y2="848" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint69_linear_1687_130892" x1="278.32" x2="280" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint70_linear_1687_130892" x1="324.95" x2="326" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint71_linear_1687_130892" x1="309.95" x2="311" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint72_linear_1687_130892" x1="343.16" x2="344" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint73_linear_1687_130892" x1="492.16" x2="493" y1="915.63" y2="923" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint74_linear_1687_130892" x1="554.16" x2="555" y1="879.63" y2="887" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint75_linear_1687_130892" x1="277.16" x2="278" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint76_linear_1687_130892" x1="305.95" x2="307" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint77_linear_1687_130892" x1="329.95" x2="331" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint78_linear_1687_130892" x1="302.97" x2="303.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint79_linear_1687_130892" x1="325.97" x2="326.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint80_linear_1687_130892" x1="341.97" x2="342.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint81_linear_1687_130892" x1="313.97" x2="314.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint82_linear_1687_130892" x1="296.97" x2="297.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint83_linear_1687_130892" x1="250.97" x2="251.5" y1="856.4" y2="861" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint84_linear_1687_130892" x1="264.16" x2="265" y1="807.63" y2="815" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint85_linear_1687_130892" x1="273.16" x2="274" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint86_linear_1687_130892" x1="267.5" x2="269.5" y1="909.5" y2="927" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint87_linear_1687_130892" x1="516.5" x2="518.5" y1="826.5" y2="844" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint88_linear_1687_130892" x1="526.5" x2="528.5" y1="911.5" y2="929" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint89_linear_1687_130892" x1="369.95" x2="371" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint90_linear_1687_130892" x1="349.97" x2="350.5" y1="872.4" y2="877" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint91_linear_1687_130892" x1="375.97" x2="376.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint92_linear_1687_130892" x1="377.95" x2="379" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint93_linear_1687_130892" x1="553.95" x2="555" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint94_linear_1687_130892" x1="349.97" x2="350.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint95_linear_1687_130892" x1="341.95" x2="343" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint96_linear_1687_130892" x1="380.95" x2="382" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint97_linear_1687_130892" x1="521.95" x2="523" y1="962.79" y2="972" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint98_linear_1687_130892" x1="362.97" x2="363.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint99_linear_1687_130892" x1="487.32" x2="489" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint100_linear_1687_130892" x1="553.32" x2="555" y1="807.26" y2="822" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint101_linear_1687_130892" x1="461.32" x2="463" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint102_linear_1687_130892" x1="421.32" x2="423" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint103_linear_1687_130892" x1="449.32" x2="451" y1="922.26" y2="937" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint104_linear_1687_130892" x1="582.32" x2="584" y1="937.26" y2="952" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint105_linear_1687_130892" x1="387.32" x2="389" y1="847.26" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint106_linear_1687_130892" x1="404.32" x2="406" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint107_linear_1687_130892" x1="545.32" x2="547" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint108_linear_1687_130892" x1="450.95" x2="452" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint109_linear_1687_130892" x1="585.95" x2="587" y1="825.79" y2="835" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint110_linear_1687_130892" x1="574.95" x2="576" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint111_linear_1687_130892" x1="521.95" x2="523" y1="796.79" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint112_linear_1687_130892" x1="435.95" x2="437" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint113_linear_1687_130892" x1="469.16" x2="470" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint114_linear_1687_130892" x1="403.16" x2="404" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint115_linear_1687_130892" x1="431.95" x2="433" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint116_linear_1687_130892" x1="511.95" x2="513" y1="862.79" y2="872" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint117_linear_1687_130892" x1="455.95" x2="457" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint118_linear_1687_130892" x1="428.97" x2="429.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint119_linear_1687_130892" x1="451.97" x2="452.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint120_linear_1687_130892" x1="467.97" x2="468.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint121_linear_1687_130892" x1="535.97" x2="536.5" y1="879.4" y2="884" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint122_linear_1687_130892" x1="439.97" x2="440.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint123_linear_1687_130892" x1="575.97" x2="576.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint124_linear_1687_130892" x1="422.97" x2="423.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint125_linear_1687_130892" x1="411.97" x2="412.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint126_linear_1687_130892" x1="547.97" x2="548.5" y1="835.4" y2="840" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint127_linear_1687_130892" x1="399.16" x2="400" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint128_linear_1687_130892" x1="399.16" x2="400" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint129_linear_1687_130892" x1="403.5" x2="405.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint130_linear_1687_130892" x1="500.95" x2="502" y1="966.79" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint131_linear_1687_130892" x1="482.97" x2="483.5" y1="855.4" y2="860" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint132_linear_1687_130892" x1="434.97" x2="435.5" y1="825.4" y2="830" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint133_linear_1687_130892" x1="501.95" x2="503" y1="889.79" y2="899" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint134_linear_1687_130892" x1="475.97" x2="476.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint135_linear_1687_130892" x1="547.97" x2="548.5" y1="937.4" y2="942" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint136_linear_1687_130892" x1="493.97" x2="494.5" y1="987.4" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint137_linear_1687_130892" x1="467.95" x2="469" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint138_linear_1687_130892" x1="563.95" x2="565" y1="953.79" y2="963" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint139_linear_1687_130892" x1="563.95" x2="565" y1="852.79" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint140_linear_1687_130892" x1="506.95" x2="508" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint141_linear_1687_130892" x1="488.97" x2="489.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint142_linear_1687_130892" x1="532.97" x2="533.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint143_linear_1687_130892" x1="337.97" x2="338.5" y1="796.4" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint144_linear_1687_130892" x1="471.97" x2="472.5" y1="801.4" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint145_linear_1687_130892" x1="382.95" x2="384" y1="791.79" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/long-horizontal-broken-pipe.svg b/application/src/main/data/json/system/scada_symbols/long-horizontal-broken-pipe.svg
new file mode 100644
index 0000000000..69d06fac24
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/long-horizontal-broken-pipe.svg
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="400" height="200" fill="none" version="1.1" viewBox="0 0 400 200"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Long horizontal broken pipe",
+  "description": "Long horizontal broken pipe.",
+  "searchTags": [
+    "long pipe",
+    "horizontal pipe",
+    "broken pipe"
+  ],
+  "widgetSizeX": 2,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "pipeColor",
+      "name": "{i18n:scada.symbol.pipe-color}",
+      "type": "color",
+      "default": "#FFFFFF",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<g tb:tag="clickArea">
+  <path d="m14 64s158.08 0.2293 165.06 0c6.982-0.2293 16.955-6 16.955-6l-14.461 21 14.461 6.5-10.472 9 14.461 11-18.45 6.5 9.973 6-2.494 11.5 6.982 14.5s-9.973-8-16.955-8h-165.06v-72z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m14 64s158.08 0.2293 165.06 0c6.982-0.2293 16.955-6 16.955-6l-14.461 21 14.461 6.5-10.472 9 14.461 11-18.45 6.5 9.973 6-2.494 11.5 6.982 14.5s-9.973-8-16.955-8h-165.06v-72z" fill="url(#paint0_linear_2474_252377)"/>
+  <path d="m190.75 62.288c0.237-0.1035 0.47-0.2069 0.698-0.3097l-11.136 16.171-1.02 1.4814 1.641 0.7374 12.308 5.5325-8.682 7.4618-1.406 1.2087 13.723 10.439-15.827 5.575-3.004 1.058 11.782 7.089-2.265 10.45-0.11 0.504 0.224 0.465 4.49 9.325c-0.401-0.252-0.818-0.509-1.25-0.766-3.376-2.005-7.926-4.21-11.862-4.21h-163.56v-68.998l0.2749 4e-4 5.029 0.0069c4.3361 0.0058 10.538 0.0139 18.003 0.0228 14.929 0.018 34.907 0.0394 55.103 0.0538 40.363 0.0286 81.673 0.0289 85.197-0.0868 3.794-0.1246 8.256-1.7286 11.646-3.2108z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m218 57s13.5 6.895 18.5 7 149.5 0 149.5 0v72s-142-0.086-149.5 0-18.5 5-18.5 5l6-14-15-14 16.5-5-7.5-6 6-13-18-13 19.5-4.5-7.5-14.5z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m218 57s13.5 6.895 18.5 7 149.5 0 149.5 0v72s-142-0.086-149.5 0-18.5 5-18.5 5l6-14-15-14 16.5-5-7.5-6 6-13-18-13 19.5-4.5-7.5-14.5z" fill="url(#paint1_linear_2474_252377)"/>
+  <path d="m384.5 65.501v68.998h-0.096l-4.519-3e-3c-3.898-2e-3 -9.474-5e-3 -16.189-8e-3 -13.43-7e-3 -31.414-0.015-49.633-0.02-36.428-0.011-73.818-0.011-77.58 0.032-3.999 0.046-8.811 1.363-12.523 2.61-1.157 0.389-2.223 0.777-3.144 1.127l4.563-10.646 0.415-0.969-0.771-0.719-13.096-12.223 14.008-4.244 2.727-0.827-2.225-1.78-6.583-5.267 5.508-11.933 0.518-1.1215-1.002-0.7231-15.321-11.065 16.28-3.757 1.883-0.4345-0.888-1.7162-5.428-10.495c1.018 0.4748 2.167 0.9969 3.374 1.5206 2.019 0.877 4.219 1.7672 6.244 2.4474 1.982 0.6654 3.95 1.1843 5.446 1.2158 2.522 0.0529 39.926 0.0528 76.658 0.0397 18.375-0.0066 36.594-0.0164 50.219-0.0246 6.812-0.0041 12.476-0.0078 16.437-0.0105l4.595-0.0031 0.123-1e-4z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect x="387.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_2474_252377" x1="32.929" x2="32.48" y1="64" y2="136" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2474_252377" x1="329.76" x2="329.33" y1="64" y2="136" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/long-vertical-broken-pipe.svg b/application/src/main/data/json/system/scada_symbols/long-vertical-broken-pipe.svg
new file mode 100644
index 0000000000..b66def3a97
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/long-vertical-broken-pipe.svg
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="400" fill="none" version="1.1" viewBox="0 0 200 400"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Long vertical broken pipe",
+  "description": "Long vertical broken pipe.",
+  "searchTags": [
+    "long pipe",
+    "vertical pipe",
+    "broken pipe"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 2,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "pipeColor",
+      "name": "{i18n:scada.symbol.pipe-color}",
+      "type": "color",
+      "default": "#FFFFFF",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<g tb:tag="clickArea">
+  <path d="m64 386s0.2293-158.08 0-165.06c-0.2293-6.982-6-16.955-6-16.955l21 14.461 6.5-14.461 9 10.472 11-14.461 6.5 18.45 6-9.973 11.5 2.494 14.5-6.982s-8 9.973-8 16.955v165.06h-72z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m64 386s0.2293-158.08 0-165.06c-0.2293-6.982-6-16.955-6-16.955l21 14.461 6.5-14.461 9 10.472 11-14.461 6.5 18.45 6-9.973 11.5 2.494 14.5-6.982s-8 9.973-8 16.955v165.06h-72z" fill="url(#paint0_linear_2474_252379)"/>
+  <path d="m62.288 209.25c-0.1035-0.237-0.2069-0.47-0.3097-0.698l16.171 11.136 1.4814 1.02 0.7374-1.641 5.5325-12.308 7.4618 8.682 1.2087 1.406 10.439-13.723 5.575 15.827 1.058 3.004 7.089-11.782 10.45 2.265 0.504 0.11 0.465-0.224 9.325-4.49c-0.252 0.401-0.509 0.818-0.766 1.25-2.005 3.376-4.21 7.926-4.21 11.862v163.56h-68.998l4e-4 -0.275 0.0069-5.029c0.0058-4.336 0.0139-10.538 0.0228-18.003 0.018-14.928 0.0394-34.906 0.0538-55.102 0.0286-40.363 0.0289-81.673-0.0868-85.197-0.1246-3.794-1.7286-8.256-3.2108-11.646z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m57 182s6.895-13.5 7-18.5 0-149.5 0-149.5h72s-0.086 142 0 149.5 5 18.5 5 18.5l-14-6-14 15-5-16.5-6 7.5-13-6-13 18-4.5-19.5-14.5 7.5z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m57 182s6.895-13.5 7-18.5 0-149.5 0-149.5h72s-0.086 142 0 149.5 5 18.5 5 18.5l-14-6-14 15-5-16.5-6 7.5-13-6-13 18-4.5-19.5-14.5 7.5z" fill="url(#paint1_linear_2474_252379)"/>
+  <path d="m65.501 15.5h68.998v0.0957l-3e-3 4.5197c-2e-3 3.8974-5e-3 9.4736-8e-3 16.188-7e-3 13.43-0.015 31.414-0.02 49.633-0.011 36.428-0.011 73.818 0.032 77.58 0.046 3.999 1.363 8.811 2.61 12.523 0.389 1.157 0.777 2.223 1.127 3.144l-10.646-4.563-0.969-0.415-0.719 0.771-12.223 13.096-4.244-14.008-0.827-2.727-1.78 2.225-5.267 6.583-11.933-5.508-1.1215-0.518-0.7231 1.002-11.065 15.321-3.757-16.28-0.4345-1.883-1.7162 0.888-10.495 5.428c0.4748-1.018 0.9969-2.167 1.5206-3.374 0.877-2.019 1.7672-4.219 2.4474-6.244 0.6654-1.982 1.1843-3.95 1.2158-5.446 0.0529-2.522 0.0528-39.926 0.0397-76.658-0.0066-18.375-0.0164-36.594-0.0246-50.219-0.0041-6.8125-0.0078-12.477-0.0105-16.438l-0.0031-4.5947-1e-4 -0.123z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <rect transform="rotate(-90 51.5 398.5)" x="51.5" y="398.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect transform="rotate(-90 51.5 12.5)" x="51.5" y="12.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_2474_252379" x1="64" x2="136" y1="367.07" y2="367.52" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2474_252379" x1="64" x2="136" y1="70.24" y2="70.67" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/small-cylindrical-tank.svg b/application/src/main/data/json/system/scada_symbols/small-cylindrical-tank.svg
new file mode 100644
index 0000000000..153994b2c7
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/small-cylindrical-tank.svg
@@ -0,0 +1,1376 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" fill="none" version="1.1" viewBox="0 0 600 600"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Small cylindrical tank",
+  "description": "Small cylindrical tank with current volume value and level visualizations.",
+  "searchTags": [
+    "tank",
+    "small tank"
+  ],
+  "widgetSizeX": 3,
+  "widgetSizeY": 3,
+  "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "var color = ctx.properties.tankColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "fluid",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n} else {\n    var liquidPattern = element.reference('fill');\n\n    var valueSet = element.remember('valueSet');\n    if (!valueSet) {\n        element.remember('valueSet', true);\n        element.attr({height: 0});\n        liquidPattern.transform({translateY: 590});\n    }\n\n    var currentVolume = ctx.values.currentVolume; \n    var tankCapacity = ctx.values.tankCapacity; \n\n    var height = currentVolume / tankCapacity;\n    height = Math.max(0, Math.min(1, height))*525; \n    \n    var elementHeight = element.remember('height');\n    if (height !== elementHeight) {\n        element.remember('height', height);\n        ctx.api.cssAnimate(element, 500).attr({height: height});\n        ctx.api.cssAnimate(liquidPattern, 500).transform({ translateY: 590 + height });\n    }\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "fluid-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n} else {\n    var color = ctx.properties.fluidColor;\n    element.attr({fill: color, 'fill-opacity': 1});\n    \n    var valueSet = element.remember('valueSet');\n    if (!valueSet) {\n        element.remember('valueSet', true);\n        element.attr({height: 0});\n    }\n    \n    var currentVolume = ctx.values.currentVolume; \n    var tankCapacity = ctx.values.tankCapacity; \n\n    var height = currentVolume / tankCapacity;\n    height = Math.max(0, Math.min(1, height))*525; \n    \n    var elementHeight = element.remember('height');\n    if (height !== elementHeight) {\n        element.remember('height', height);\n        ctx.api.cssAnimate(element, 500).attr({height: height});\n    }\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "scale",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 45;\n        var majorIntervalLength = 525 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = (100 - i * (100/majorIntervals)).toFixed(0);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "actions": null
+    },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "top-layer",
+      "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-box",
+      "stateRenderFunction": "if (!ctx.properties.valueBox) {\n    element.hide();\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-box-background",
+      "stateRenderFunction": "if (ctx.properties.valueBox) {\n    var color = ctx.properties.valueBoxColor;\n    element.attr({fill: color});\n}",
+      "actions": null
+    },
+    {
+      "tag": "value-text",
+      "stateRenderFunction": "if (ctx.properties.valueBox) {\n  var valueTextFont = ctx.properties.valueTextFont;\n  var valueTextColor = ctx.properties.valueTextColor;\n  var currentVolume = ctx.values.currentVolume;\n  var valueText = ctx.api.formatValue(currentVolume, 0, ctx.properties.valueUnits, false);\n  ctx.api.font(element, valueTextFont, valueTextColor);\n  ctx.api.text(element, valueText);\n}",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "tankCapacity",
+      "name": "{i18n:scada.symbol.tank-capacity}",
+      "hint": "{i18n:scada.symbol.tank-capacity-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "GET_ATTRIBUTE",
+        "defaultValue": null,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": "SERVER_SCOPE",
+          "key": "tankCapacity"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "currentVolume",
+      "name": "{i18n:scada.symbol.current-volume}",
+      "hint": "{i18n:scada.symbol.current-volume-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "GET_TIME_SERIES",
+        "defaultValue": null,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "liquidVolume"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "warning",
+      "name": "{i18n:scada.symbol.warning-state}",
+      "hint": "{i18n:scada.symbol.warning-state-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.warning}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "key": "state",
+          "scope": null
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "compareToValue": true,
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "critical",
+      "name": "{i18n:scada.symbol.critical-state}",
+      "hint": "{i18n:scada.symbol.critical-state-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.critical}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "key": "state",
+          "scope": null
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "compareToValue": true,
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "criticalAnimation",
+      "name": "{i18n:scada.symbol.critical-state-animation}",
+      "hint": "{i18n:scada.symbol.critical-state-animation-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.animation}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "key": "state",
+          "scope": null
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "compareToValue": true,
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "tankColor",
+      "name": "{i18n:scada.symbol.tank-color}",
+      "type": "color",
+      "default": "#E5E5E5",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "fluidColor",
+      "name": "{i18n:scada.symbol.fluid-color}",
+      "type": "color",
+      "default": "#1EC1F480",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueBox",
+      "name": "{i18n:scada.symbol.value-box}",
+      "type": "switch",
+      "default": true,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueBoxColor",
+      "name": "{i18n:scada.symbol.value-box}",
+      "type": "color",
+      "default": "#F3F3F3",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueUnits",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "units",
+      "default": "gal",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueTextFont",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "font",
+      "default": {
+        "size": 36,
+        "sizeUnit": "px",
+        "family": "Roboto",
+        "weight": "500",
+        "style": "normal"
+      },
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "valueTextColor",
+      "name": "{i18n:scada.symbol.value-text}",
+      "type": "color",
+      "default": "#0000008A",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "valueBox",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "scale",
+      "name": "{i18n:scada.symbol.scale}",
+      "type": "switch",
+      "default": true,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "transparent",
+      "name": "{i18n:scada.symbol.transparent-mode}",
+      "type": "switch",
+      "default": false,
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "majorIntervals",
+      "name": "{i18n:scada.symbol.major-ticks}",
+      "type": "number",
+      "default": 5,
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.intervals}",
+      "divider": true,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": 1,
+      "max": null,
+      "step": 1
+    },
+    {
+      "id": "majorFont",
+      "name": "{i18n:scada.symbol.major-ticks}",
+      "type": "font",
+      "default": {
+        "size": 24,
+        "sizeUnit": "px",
+        "family": "Roboto",
+        "weight": "500",
+        "style": "normal"
+      },
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "majorColor",
+      "name": "{i18n:scada.symbol.major-ticks-color}",
+      "type": "color",
+      "default": "#00000061",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.normal}",
+      "divider": true,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "majorWarningColor",
+      "name": "{i18n:scada.symbol.major-ticks-color}",
+      "type": "color",
+      "default": "#FAA405",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.warning}",
+      "divider": true,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "majorCriticalColor",
+      "name": "{i18n:scada.symbol.major-ticks-color}",
+      "type": "color",
+      "default": "#D12730",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.critical}",
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "minorIntervals",
+      "name": "{i18n:scada.symbol.minor-ticks}",
+      "type": "number",
+      "default": 5,
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.intervals}",
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": 1,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "minorColor",
+      "name": "{i18n:scada.symbol.minor-ticks-color}",
+      "type": "color",
+      "default": "#0000001F",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.normal}",
+      "divider": true,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "minorWarningColor",
+      "name": "{i18n:scada.symbol.minor-ticks-color}",
+      "type": "color",
+      "default": "#FAA405",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.warning}",
+      "divider": true,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "minorCriticalColor",
+      "name": "{i18n:scada.symbol.minor-ticks-color}",
+      "type": "color",
+      "default": "#D12730",
+      "required": null,
+      "subLabel": "{i18n:scada.symbol.critical}",
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": "scale",
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<path d="m0 26.5c0-6.6274 5.3726-12 12-12h576c6.627 0 12 5.3726 12 12v548.52c0 3.768-1.746 7.322-5.28 8.627-64.25 23.735-536.96 20.807-590.57-0.264-2.9213-1.148-4.1543-4.137-4.1543-7.276v-549.6z" fill="#E5E5E5" tb:tag="background"/><path d="m0 26.5c0-6.6274 5.3726-12 12-12h576c6.627 0 12 5.3726 12 12v548.52c0 3.768-1.746 7.322-5.28 8.627-64.25 23.735-536.96 20.807-590.57-0.264-2.9213-1.148-4.1543-4.137-4.1543-7.276v-549.6z" fill="url(#paint0_linear_2901_184349)"/><path d="m0 27.5c0-6.6274 5.3726-12 12-12h576c6.627 0 12 5.3726 12 12v547.58c0 3.487-1.49 6.781-4.751 8.015-58.505 22.135-525.21 22.606-589.71 1.011-3.7027-1.24-5.5357-4.859-5.5357-8.763v-547.84z" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><rect transform="scale(1,-1)" x="8" y="-568" width="584" height="201" fill="#1ec1f4" fill-opacity=".5" tb:tag="fluid-background"/><rect transform="scale(1,-1)" x="8" y="-568" width="584" height="201" fill="url(#liquid)" style="fill:url(#pattern17033)" tb:tag="fluid"/><mask id="path-150-inside-1_2901_184349" fill="white">
+  <path d="m12 15c-6.6274 0-12 5.3726-12 12v548.85c0 3.15 1.2395 6.145 4.1742 7.29 53.699 20.948 526.2 23.858 590.52 0.263 3.547-1.302 5.301-4.861 5.301-8.64v-547.77c0-6.6274-5.373-12-12-12h-576zm391 28c-3.866 0-7 3.134-7 7v511c0 3.866 3.134 7 7 7h44c3.866 0 7-3.134 7-7v-511c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill-rule="evenodd"/>
+ </mask><g tb:tag="top-layer">
+  <path d="m12 15c-6.6274 0-12 5.3726-12 12v548.85c0 3.15 1.2395 6.145 4.1742 7.29 53.699 20.948 526.2 23.858 590.52 0.263 3.547-1.302 5.301-4.861 5.301-8.64v-547.77c0-6.6274-5.373-12-12-12h-576zm391 28c-3.866 0-7 3.134-7 7v511c0 3.866 3.134 7 7 7h44c3.866 0 7-3.134 7-7v-511c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill="#E5E5E5" tb:tag="background" fill-rule="evenodd"/>
+  <path d="m12 15c-6.6274 0-12 5.3726-12 12v548.85c0 3.15 1.2395 6.145 4.1742 7.29 53.699 20.948 526.2 23.858 590.52 0.263 3.547-1.302 5.301-4.861 5.301-8.64v-547.77c0-6.6274-5.373-12-12-12h-576zm391 28c-3.866 0-7 3.134-7 7v511c0 3.866 3.134 7 7 7h44c3.866 0 7-3.134 7-7v-511c0-3.866-3.134-7-7-7h-44z" clip-rule="evenodd" fill="url(#paint146_linear_2901_184349)" fill-rule="evenodd"/>
+  <path d="m4.1742 583.14-1.0903 2.795h1e-5l1.0903-2.795zm590.52 0.263-1.033-2.817 1.033 2.817zm-591.7-556.41c0-4.9705 4.0294-9 9-9v-6c-8.2843 0-15 6.7158-15 15h6zm0 548.85v-548.85h-6v548.85h6zm2.2645 4.495c-1.3094-0.511-2.2645-1.979-2.2645-4.495h-6c0 3.784 1.5239 8.306 6.084 10.085l2.1806-5.59zm588.4 0.241c-7.66 2.81-21.745 5.318-40.939 7.457-19.097 2.129-42.974 3.865-70.033 5.222-54.113 2.715-120.83 3.908-187.23 3.71-66.404-0.198-132.46-1.788-185.25-4.634-26.398-1.424-49.448-3.16-67.552-5.189-18.234-2.044-31.106-4.353-37.397-6.807l-2.1805 5.59c7.1334 2.782 20.774 5.147 38.91 7.18 18.265 2.047 41.442 3.791 67.898 5.217 52.918 2.854 119.08 4.445 185.55 4.643s133.3-0.996 187.55-3.717c27.122-1.361 51.132-3.104 70.397-5.252 19.167-2.136 33.919-4.698 42.34-7.787l-2.066-5.633zm3.334-5.823c0 2.961-1.335 5.09-3.334 5.823l2.066 5.633c5.095-1.869 7.268-6.86 7.268-11.456h-6zm0-547.77v547.77h6v-547.77h-6zm-9-9c4.971 0 9 4.0294 9 9h6c0-8.2843-6.716-15-15-15v6zm-576 0h576v-6h-576v6zm387 32c0-2.2091 1.791-4 4-4v-6c-5.523 0-10 4.4771-10 10h6zm0 511v-511h-6v511h6zm4 4c-2.209 0-4-1.791-4-4h-6c0 5.523 4.477 10 10 10v-6zm44 0h-44v6h44v-6zm4-4c0 2.209-1.791 4-4 4v6c5.523 0 10-4.477 10-10h-6zm0-511v511h6v-511h-6zm-4-4c2.209 0 4 1.7909 4 4h6c0-5.5228-4.477-10-10-10v6zm-44 0h44v-6h-44v6z" fill="#000" fill-opacity=".12" mask="url(#path-150-inside-1_2901_184349)"/>
+  <path d="m394.5 50c0-4.6944 3.806-8.5 8.5-8.5h44c4.694 0 8.5 3.8056 8.5 8.5v511c0 4.694-3.806 8.5-8.5 8.5h-44c-4.694 0-8.5-3.806-8.5-8.5v-511z" stroke="#727171" stroke-width="3"/>
+ </g><ellipse cx="300" cy="16" rx="292" ry="16" fill="#5D5C5C"/><g tb:tag="scale">
+  <line x1="339" x2="371" y1="47.821" y2="47.821" stroke="#000" stroke-opacity=".38" stroke-width="3"/>
+  <line x1="351" x2="371" y1="68.542" y2="68.542" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="89.263" y2="89.263" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="109.98" y2="109.98" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="130.7" y2="130.7" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="339" x2="371" y1="151.42" y2="151.42" stroke="#000" stroke-opacity=".38" stroke-width="3"/>
+  <line x1="351" x2="371" y1="172.15" y2="172.15" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="192.87" y2="192.87" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="213.59" y2="213.59" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="234.31" y2="234.31" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="339" x2="371" y1="255.03" y2="255.03" stroke="#000" stroke-opacity=".38" stroke-width="3"/>
+  <line x1="351" x2="371" y1="275.75" y2="275.75" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="296.47" y2="296.47" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="317.19" y2="317.19" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="337.91" y2="337.91" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="339" x2="371" y1="358.63" y2="358.63" stroke="#000" stroke-opacity=".38" stroke-width="3"/>
+  <line x1="351" x2="371" y1="379.35" y2="379.35" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="400.08" y2="400.08" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="420.8" y2="420.8" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="441.52" y2="441.52" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="339" x2="371" y1="462.24" y2="462.24" stroke="#000" stroke-opacity=".38" stroke-width="3"/>
+  <line x1="351" x2="371" y1="482.96" y2="482.96" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="503.68" y2="503.68" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="524.4" y2="524.4" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="351" x2="371" y1="545.12" y2="545.12" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <line x1="339" x2="371" y1="565.84" y2="565.84" stroke="#000" stroke-opacity=".38" stroke-width="3"/>
+  <path d="m298.58 42.879v17.121h-2.824v-13.77l-4.184 1.4179v-2.332l6.668-2.4375h0.34zm17.301 7.1602v2.789c0 1.336-0.133 2.4766-0.399 3.4219-0.257 0.9375-0.632 1.6992-1.125 2.2852-0.492 0.5859-1.082 1.0156-1.769 1.289-0.68 0.2735-1.441 0.4102-2.285 0.4102-0.672 0-1.297-0.086-1.875-0.2578-0.571-0.1719-1.086-0.4414-1.547-0.8086s-0.856-0.8399-1.184-1.418c-0.32-0.5859-0.57-1.2852-0.75-2.0977-0.172-0.8125-0.257-1.7539-0.257-2.8242v-2.789c0-1.3438 0.132-2.4766 0.398-3.3985 0.266-0.9297 0.644-1.6836 1.137-2.2617 0.492-0.5859 1.078-1.0117 1.757-1.2773 0.688-0.2657 1.454-0.3985 2.297-0.3985 0.68 0 1.305 0.086 1.875 0.2578 0.578 0.1641 1.094 0.4258 1.547 0.7852 0.461 0.3594 0.852 0.8281 1.172 1.4062 0.328 0.5704 0.578 1.2618 0.75 2.0743 0.172 0.8046 0.258 1.7422 0.258 2.8125zm-2.824 3.1875v-3.6094c0-0.6797-0.039-1.2774-0.117-1.793-0.079-0.5234-0.196-0.9648-0.352-1.3242-0.148-0.3672-0.336-0.6641-0.563-0.8906-0.226-0.2344-0.484-0.4024-0.773-0.5039-0.289-0.1094-0.613-0.1641-0.973-0.1641-0.437 0-0.828 0.0859-1.172 0.2578-0.343 0.1641-0.632 0.4297-0.867 0.7969-0.234 0.3672-0.414 0.8516-0.539 1.4531-0.117 0.5938-0.176 1.3164-0.176 2.168v3.6094c0 0.6875 0.039 1.2929 0.118 1.8164 0.078 0.5234 0.195 0.9726 0.351 1.3476 0.156 0.3672 0.344 0.6719 0.563 0.9141 0.226 0.2344 0.484 0.4062 0.773 0.5156 0.297 0.1094 0.621 0.1641 0.973 0.1641 0.445 0 0.84-0.086 1.183-0.2578 0.344-0.1719 0.633-0.4454 0.868-0.8204 0.234-0.3828 0.41-0.8789 0.527-1.4882 0.117-0.6094 0.176-1.3399 0.176-2.1914zm16.715-3.1875v2.789c0 1.336-0.133 2.4766-0.399 3.4219-0.258 0.9375-0.633 1.6992-1.125 2.2852-0.492 0.5859-1.082 1.0156-1.769 1.289-0.68 0.2735-1.442 0.4102-2.286 0.4102-0.671 0-1.296-0.086-1.875-0.2578-0.57-0.1719-1.086-0.4414-1.546-0.8086-0.461-0.3672-0.856-0.8399-1.184-1.418-0.32-0.5859-0.57-1.2852-0.75-2.0977-0.172-0.8125-0.258-1.7539-0.258-2.8242v-2.789c0-1.3438 0.133-2.4766 0.399-3.3985 0.265-0.9297 0.644-1.6836 1.136-2.2617 0.492-0.5859 1.078-1.0117 1.758-1.2773 0.688-0.2657 1.453-0.3985 2.297-0.3985 0.68 0 1.305 0.086 1.875 0.2578 0.578 0.1641 1.094 0.4258 1.547 0.7852 0.461 0.3594 0.851 0.8281 1.172 1.4062 0.328 0.5704 0.578 1.2618 0.75 2.0743 0.172 0.8046 0.258 1.7422 0.258 2.8125zm-2.825 3.1875v-3.6094c0-0.6797-0.039-1.2774-0.117-1.793-0.078-0.5234-0.195-0.9648-0.351-1.3242-0.149-0.3672-0.336-0.6641-0.563-0.8906-0.226-0.2344-0.484-0.4024-0.773-0.5039-0.289-0.1094-0.614-0.1641-0.973-0.1641-0.438 0-0.828 0.0859-1.172 0.2578-0.344 0.1641-0.633 0.4297-0.867 0.7969s-0.414 0.8516-0.539 1.4531c-0.117 0.5938-0.176 1.3164-0.176 2.168v3.6094c0 0.6875 0.039 1.2929 0.117 1.8164 0.078 0.5234 0.196 0.9726 0.352 1.3476 0.156 0.3672 0.344 0.6719 0.562 0.9141 0.227 0.2344 0.485 0.4062 0.774 0.5156 0.297 0.1094 0.621 0.1641 0.972 0.1641 0.446 0 0.84-0.086 1.184-0.2578 0.344-0.1719 0.633-0.4454 0.867-0.8204 0.235-0.3828 0.41-0.8789 0.528-1.4882 0.117-0.6094 0.175-1.3399 0.175-2.1914z" fill="#000" fill-opacity=".38"/>
+  <path d="m315.91 157.35c0 1.062-0.246 1.957-0.738 2.683-0.492 0.727-1.164 1.278-2.016 1.653-0.844 0.367-1.797 0.55-2.859 0.55-1.063 0-2.02-0.183-2.871-0.55-0.852-0.375-1.524-0.926-2.016-1.653-0.492-0.726-0.738-1.621-0.738-2.683 0-0.703 0.136-1.34 0.41-1.91 0.273-0.579 0.66-1.075 1.16-1.489 0.508-0.422 1.102-0.746 1.781-0.972 0.688-0.227 1.438-0.34 2.25-0.34 1.078 0 2.043 0.199 2.895 0.597 0.851 0.399 1.519 0.95 2.004 1.653 0.492 0.703 0.738 1.523 0.738 2.461zm-2.836-0.141c0-0.57-0.117-1.07-0.351-1.5-0.235-0.43-0.563-0.762-0.985-0.996s-0.91-0.352-1.465-0.352c-0.562 0-1.05 0.118-1.465 0.352-0.414 0.234-0.738 0.566-0.972 0.996-0.227 0.43-0.34 0.93-0.34 1.5 0 0.578 0.113 1.078 0.34 1.5 0.226 0.414 0.551 0.731 0.972 0.949 0.422 0.219 0.918 0.328 1.489 0.328 0.57 0 1.062-0.109 1.476-0.328 0.414-0.218 0.735-0.535 0.961-0.949 0.227-0.422 0.34-0.922 0.34-1.5zm2.449-7.781c0 0.851-0.226 1.609-0.679 2.273-0.446 0.664-1.063 1.188-1.852 1.571-0.789 0.375-1.687 0.562-2.695 0.562-1.016 0-1.922-0.187-2.719-0.562-0.789-0.383-1.41-0.907-1.863-1.571-0.446-0.664-0.668-1.422-0.668-2.273 0-1.016 0.222-1.871 0.668-2.567 0.453-0.703 1.074-1.238 1.863-1.605s1.691-0.551 2.707-0.551 1.918 0.184 2.707 0.551 1.406 0.902 1.852 1.605c0.453 0.696 0.679 1.551 0.679 2.567zm-2.824 0.094c0-0.508-0.101-0.954-0.305-1.336-0.195-0.391-0.472-0.696-0.832-0.914-0.359-0.219-0.785-0.329-1.277-0.329s-0.918 0.106-1.277 0.317c-0.36 0.211-0.637 0.508-0.832 0.89-0.196 0.383-0.293 0.84-0.293 1.372 0 0.523 0.097 0.98 0.293 1.371 0.195 0.382 0.472 0.683 0.832 0.902 0.367 0.219 0.797 0.328 1.289 0.328s0.918-0.109 1.277-0.328c0.36-0.219 0.637-0.52 0.832-0.902 0.195-0.391 0.293-0.848 0.293-1.371zm17.067 2.519v2.789c0 1.336-0.133 2.477-0.399 3.422-0.258 0.938-0.633 1.699-1.125 2.285s-1.082 1.016-1.769 1.289c-0.68 0.274-1.442 0.41-2.286 0.41-0.671 0-1.296-0.086-1.875-0.257-0.57-0.172-1.086-0.442-1.546-0.809-0.461-0.367-0.856-0.84-1.184-1.418-0.32-0.586-0.57-1.285-0.75-2.098-0.172-0.812-0.258-1.754-0.258-2.824v-2.789c0-1.344 0.133-2.477 0.399-3.398 0.265-0.93 0.644-1.684 1.136-2.262 0.492-0.586 1.078-1.012 1.758-1.277 0.688-0.266 1.453-0.399 2.297-0.399 0.68 0 1.305 0.086 1.875 0.258 0.578 0.164 1.094 0.426 1.547 0.785 0.461 0.359 0.851 0.828 1.172 1.406 0.328 0.571 0.578 1.262 0.75 2.075 0.172 0.804 0.258 1.742 0.258 2.812zm-2.825 3.188v-3.61c0-0.679-0.039-1.277-0.117-1.793-0.078-0.523-0.195-0.965-0.351-1.324-0.149-0.367-0.336-0.664-0.563-0.891-0.226-0.234-0.484-0.402-0.773-0.504-0.289-0.109-0.614-0.164-0.973-0.164-0.438 0-0.828 0.086-1.172 0.258-0.344 0.164-0.633 0.43-0.867 0.797s-0.414 0.852-0.539 1.453c-0.117 0.594-0.176 1.317-0.176 2.168v3.61c0 0.687 0.039 1.293 0.117 1.816s0.196 0.973 0.352 1.348c0.156 0.367 0.344 0.671 0.562 0.914 0.227 0.234 0.485 0.406 0.774 0.515 0.297 0.11 0.621 0.164 0.972 0.164 0.446 0 0.84-0.086 1.184-0.257 0.344-0.172 0.633-0.446 0.867-0.821 0.235-0.383 0.41-0.879 0.528-1.488 0.117-0.609 0.175-1.34 0.175-2.191z" fill="#000" fill-opacity=".38"/>
+  <path d="m313.29 246.83h0.352v2.309h-0.2c-1.007 0-1.879 0.156-2.613 0.468-0.726 0.313-1.324 0.743-1.793 1.289-0.469 0.547-0.82 1.188-1.055 1.922-0.226 0.727-0.339 1.5-0.339 2.321v2.683c0 0.68 0.074 1.281 0.222 1.805 0.149 0.516 0.356 0.949 0.621 1.301 0.274 0.343 0.586 0.605 0.938 0.785 0.351 0.18 0.73 0.269 1.137 0.269 0.421 0 0.804-0.086 1.148-0.257 0.344-0.18 0.637-0.426 0.879-0.739 0.242-0.312 0.426-0.683 0.551-1.113s0.187-0.898 0.187-1.406c0-0.485-0.062-0.938-0.187-1.36-0.117-0.429-0.293-0.804-0.528-1.125-0.234-0.328-0.527-0.582-0.879-0.761-0.343-0.188-0.742-0.282-1.195-0.282-0.562 0-1.074 0.133-1.535 0.399-0.453 0.265-0.82 0.613-1.102 1.043-0.273 0.422-0.421 0.871-0.445 1.347l-1.078-0.351c0.063-0.727 0.223-1.379 0.48-1.957 0.266-0.578 0.614-1.07 1.043-1.477 0.43-0.406 0.926-0.715 1.489-0.925 0.57-0.219 1.195-0.329 1.875-0.329 0.828 0 1.547 0.157 2.156 0.469 0.609 0.313 1.113 0.738 1.512 1.278 0.406 0.531 0.707 1.14 0.902 1.828 0.203 0.679 0.305 1.39 0.305 2.132 0 0.821-0.125 1.586-0.375 2.297-0.25 0.703-0.617 1.321-1.102 1.852-0.476 0.531-1.058 0.945-1.746 1.242-0.68 0.297-1.453 0.445-2.32 0.445-0.914 0-1.731-0.175-2.449-0.527-0.711-0.352-1.317-0.836-1.817-1.453-0.492-0.617-0.867-1.328-1.125-2.133s-0.387-1.656-0.387-2.555v-1.171c0-1.297 0.164-2.52 0.493-3.668 0.328-1.157 0.832-2.176 1.511-3.059 0.688-0.883 1.567-1.574 2.637-2.074 1.07-0.508 2.348-0.762 3.832-0.762zm16.481 7.207v2.789c0 1.336-0.133 2.477-0.399 3.422-0.258 0.938-0.633 1.699-1.125 2.285s-1.082 1.016-1.769 1.289c-0.68 0.274-1.442 0.41-2.286 0.41-0.671 0-1.296-0.086-1.875-0.257-0.57-0.172-1.086-0.442-1.546-0.809-0.461-0.367-0.856-0.84-1.184-1.418-0.32-0.586-0.57-1.285-0.75-2.098-0.172-0.812-0.258-1.754-0.258-2.824v-2.789c0-1.344 0.133-2.477 0.399-3.398 0.265-0.93 0.644-1.684 1.136-2.262 0.492-0.586 1.078-1.012 1.758-1.277 0.688-0.266 1.453-0.399 2.297-0.399 0.68 0 1.305 0.086 1.875 0.258 0.578 0.164 1.094 0.426 1.547 0.785 0.461 0.359 0.851 0.828 1.172 1.406 0.328 0.571 0.578 1.262 0.75 2.075 0.172 0.804 0.258 1.742 0.258 2.812zm-2.825 3.188v-3.61c0-0.679-0.039-1.277-0.117-1.793-0.078-0.523-0.195-0.965-0.351-1.324-0.149-0.367-0.336-0.664-0.563-0.891-0.226-0.234-0.484-0.402-0.773-0.504-0.289-0.109-0.614-0.164-0.973-0.164-0.438 0-0.828 0.086-1.172 0.258-0.344 0.164-0.633 0.43-0.867 0.797s-0.414 0.852-0.539 1.453c-0.117 0.594-0.176 1.317-0.176 2.168v3.61c0 0.687 0.039 1.293 0.117 1.816s0.196 0.973 0.352 1.348c0.156 0.367 0.344 0.671 0.562 0.914 0.227 0.234 0.485 0.406 0.774 0.515 0.297 0.11 0.621 0.164 0.972 0.164 0.446 0 0.84-0.086 1.184-0.257 0.344-0.172 0.633-0.446 0.867-0.821 0.235-0.383 0.41-0.879 0.528-1.488 0.117-0.609 0.175-1.34 0.175-2.191z" fill="#000" fill-opacity=".38"/>
+  <path d="m316.51 359.92v2.25h-12.305l-0.094-1.699 7.36-11.531h2.261l-2.449 4.195-4.23 6.785h9.457zm-2.133-10.98v17.062h-2.824v-17.062h2.824zm15.391 7.101v2.789c0 1.336-0.133 2.477-0.399 3.422-0.258 0.938-0.633 1.699-1.125 2.285s-1.082 1.016-1.769 1.289c-0.68 0.274-1.442 0.41-2.286 0.41-0.671 0-1.296-0.086-1.875-0.257-0.57-0.172-1.086-0.442-1.546-0.809-0.461-0.367-0.856-0.84-1.184-1.418-0.32-0.586-0.57-1.285-0.75-2.098-0.172-0.812-0.258-1.754-0.258-2.824v-2.789c0-1.344 0.133-2.477 0.399-3.398 0.265-0.93 0.644-1.684 1.136-2.262 0.492-0.586 1.078-1.012 1.758-1.277 0.688-0.266 1.453-0.399 2.297-0.399 0.68 0 1.305 0.086 1.875 0.258 0.578 0.164 1.094 0.426 1.547 0.785 0.461 0.359 0.851 0.828 1.172 1.406 0.328 0.571 0.578 1.262 0.75 2.075 0.172 0.804 0.258 1.742 0.258 2.812zm-2.825 3.188v-3.61c0-0.679-0.039-1.277-0.117-1.793-0.078-0.523-0.195-0.965-0.351-1.324-0.149-0.367-0.336-0.664-0.563-0.891-0.226-0.234-0.484-0.402-0.773-0.504-0.289-0.109-0.614-0.164-0.973-0.164-0.438 0-0.828 0.086-1.172 0.258-0.344 0.164-0.633 0.43-0.867 0.797s-0.414 0.852-0.539 1.453c-0.117 0.594-0.176 1.317-0.176 2.168v3.61c0 0.687 0.039 1.293 0.117 1.816s0.196 0.973 0.352 1.348c0.156 0.367 0.344 0.671 0.562 0.914 0.227 0.234 0.485 0.406 0.774 0.515 0.297 0.11 0.621 0.164 0.972 0.164 0.446 0 0.84-0.086 1.184-0.257 0.344-0.172 0.633-0.446 0.867-0.821 0.235-0.383 0.41-0.879 0.528-1.488 0.117-0.609 0.175-1.34 0.175-2.191z" fill="#000" fill-opacity=".38"/>
+  <path d="m316.2 465.75v2.25h-11.437v-1.934l5.554-6.058c0.61-0.688 1.09-1.281 1.442-1.781 0.351-0.5 0.598-0.95 0.738-1.348 0.149-0.406 0.223-0.801 0.223-1.184 0-0.539-0.102-1.011-0.305-1.418-0.195-0.414-0.484-0.738-0.867-0.972-0.383-0.243-0.848-0.364-1.395-0.364-0.632 0-1.164 0.137-1.593 0.411-0.43 0.273-0.754 0.652-0.973 1.136-0.219 0.477-0.328 1.024-0.328 1.641h-2.824c0-0.992 0.226-1.899 0.679-2.719 0.453-0.828 1.11-1.484 1.969-1.969 0.86-0.492 1.895-0.738 3.106-0.738 1.14 0 2.109 0.192 2.906 0.574 0.797 0.383 1.402 0.926 1.816 1.629 0.422 0.703 0.633 1.535 0.633 2.496 0 0.532-0.086 1.059-0.258 1.582-0.172 0.524-0.418 1.047-0.738 1.571-0.313 0.515-0.684 1.035-1.113 1.558-0.43 0.516-0.903 1.039-1.418 1.571l-3.692 4.066h7.875zm13.575-7.711v2.789c0 1.336-0.133 2.477-0.399 3.422-0.258 0.938-0.633 1.699-1.125 2.285s-1.082 1.016-1.769 1.289c-0.68 0.274-1.442 0.41-2.286 0.41-0.671 0-1.296-0.086-1.875-0.257-0.57-0.172-1.086-0.442-1.546-0.809-0.461-0.367-0.856-0.84-1.184-1.418-0.32-0.586-0.57-1.285-0.75-2.098-0.172-0.812-0.258-1.754-0.258-2.824v-2.789c0-1.344 0.133-2.477 0.399-3.398 0.265-0.93 0.644-1.684 1.136-2.262 0.492-0.586 1.078-1.012 1.758-1.277 0.688-0.266 1.453-0.399 2.297-0.399 0.68 0 1.305 0.086 1.875 0.258 0.578 0.164 1.094 0.426 1.547 0.785 0.461 0.359 0.851 0.828 1.172 1.406 0.328 0.571 0.578 1.262 0.75 2.075 0.172 0.804 0.258 1.742 0.258 2.812zm-2.825 3.188v-3.61c0-0.679-0.039-1.277-0.117-1.793-0.078-0.523-0.195-0.965-0.351-1.324-0.149-0.367-0.336-0.664-0.563-0.891-0.226-0.234-0.484-0.402-0.773-0.504-0.289-0.109-0.614-0.164-0.973-0.164-0.438 0-0.828 0.086-1.172 0.258-0.344 0.164-0.633 0.43-0.867 0.797s-0.414 0.852-0.539 1.453c-0.117 0.594-0.176 1.317-0.176 2.168v3.61c0 0.687 0.039 1.293 0.117 1.816s0.196 0.973 0.352 1.348c0.156 0.367 0.344 0.671 0.562 0.914 0.227 0.234 0.485 0.406 0.774 0.515 0.297 0.11 0.621 0.164 0.972 0.164 0.446 0 0.84-0.086 1.184-0.257 0.344-0.172 0.633-0.446 0.867-0.821 0.235-0.383 0.41-0.879 0.528-1.488 0.117-0.609 0.175-1.34 0.175-2.191z" fill="#000" fill-opacity=".38"/>
+  <path d="m329.77 560.04v2.789c0 1.336-0.133 2.477-0.399 3.422-0.258 0.938-0.633 1.699-1.125 2.285s-1.082 1.016-1.769 1.289c-0.68 0.274-1.442 0.41-2.286 0.41-0.671 0-1.296-0.086-1.875-0.257-0.57-0.172-1.086-0.442-1.546-0.809-0.461-0.367-0.856-0.84-1.184-1.418-0.32-0.586-0.57-1.285-0.75-2.098-0.172-0.812-0.258-1.754-0.258-2.824v-2.789c0-1.344 0.133-2.477 0.399-3.398 0.265-0.93 0.644-1.684 1.136-2.262 0.492-0.586 1.078-1.012 1.758-1.277 0.688-0.266 1.453-0.399 2.297-0.399 0.68 0 1.305 0.086 1.875 0.258 0.578 0.164 1.094 0.426 1.547 0.785 0.461 0.359 0.851 0.828 1.172 1.406 0.328 0.571 0.578 1.262 0.75 2.075 0.172 0.804 0.258 1.742 0.258 2.812zm-2.825 3.188v-3.61c0-0.679-0.039-1.277-0.117-1.793-0.078-0.523-0.195-0.965-0.351-1.324-0.149-0.367-0.336-0.664-0.563-0.891-0.226-0.234-0.484-0.402-0.773-0.504-0.289-0.109-0.614-0.164-0.973-0.164-0.438 0-0.828 0.086-1.172 0.258-0.344 0.164-0.633 0.43-0.867 0.797s-0.414 0.852-0.539 1.453c-0.117 0.594-0.176 1.317-0.176 2.168v3.61c0 0.687 0.039 1.293 0.117 1.816s0.196 0.973 0.352 1.348c0.156 0.367 0.344 0.671 0.562 0.914 0.227 0.234 0.485 0.406 0.774 0.515 0.297 0.11 0.621 0.164 0.972 0.164 0.446 0 0.84-0.086 1.184-0.257 0.344-0.172 0.633-0.446 0.867-0.821 0.235-0.383 0.41-0.879 0.528-1.488 0.117-0.609 0.175-1.34 0.175-2.191z" fill="#000" fill-opacity=".38"/>
+ </g><g transform="translate(-201,6)" filter="url(#filter0_ii_1694_158298)" tb:tag="value-box">
+  <path d="m381 272c0-6.627 5.373-12 12-12h216c6.627 0 12 5.373 12 12v56c0 6.627-5.373 12-12 12h-216c-6.627 0-12-5.373-12-12z" fill="#f3f3f3" tb:tag="value-box-background"/>
+  <path d="m382.5 272c0-5.799 4.701-10.5 10.5-10.5h216c5.799 0 10.5 4.701 10.5 10.5v56c0 5.799-4.701 10.5-10.5 10.5h-216c-5.799 0-10.5-4.701-10.5-10.5z" stroke="#727171" stroke-width="3"/>
+  <text x="500.74219" y="300.07812" fill="#727171" font-family="Roboto" font-size="32px" font-weight="500" text-anchor="middle" tb:tag="value-text" xml:space="preserve"><tspan dominant-baseline="middle">1660 gal</tspan></text>
+ </g><path d="m201.79 0s-201.79 0-201.79 100.5v492.54c0 3.9768 5.3726 6.9606 12 6.9606h576c6.627 0 12-2.9838 12-6.9606v-492.54c0-100.5-198.21-100.5-198.21-100.5h-101.79zm201.21 121.8c-3.866 0-7 1.8804-7 4.2v450.6c0 2.3196 3.134 4.2 7 4.2h44c3.866 0 7-1.8804 7-4.2v-450.6c0-2.3196-3.134-4.2-7-4.2z" fill="#000" fill-opacity="0" style="stroke-width:.7746" tb:tag="clickArea"/><defs>
+  <pattern id="pattern17033" patternTransform="translate(-79.813 574.69)" xlink:href="#liquid"/>
+  <linearGradient id="paint0_linear_2901_184349" x1="600" x2=".019179" y1="110.96" y2="104.56" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint146_linear_2901_184349" x1="600" x2=".14447" y1="309.46" y2="298.67" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <filter id="filter0_ii_1694_158298" x="377" y="256" width="248" height="88" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="4" dy="4"/>
+   <feGaussianBlur stdDeviation="3"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1694_158298"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-4" dy="-4"/>
+   <feGaussianBlur stdDeviation="2"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+   <feBlend in2="effect1_innerShadow_1694_158298" result="effect2_innerShadow_1694_158298"/>
+  </filter>
+  <pattern id="liquid" width="584" height="201" patternUnits="userSpaceOnUse">
+   <rect width="584" height="201" fill="url(#base-liquid)" stroke-width="0"/>
+  </pattern>
+  <pattern id="base-liquid" width="584" height="201" patternTransform="translate(8,791)" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid">
+   <circle cx="93" cy="33" r="8" fill="url(#paint1_linear_1687_130892)" style="fill:url(#paint1_linear_1687_130892)"/>
+   <circle cx="67" cy="166" r="8" fill="url(#paint2_linear_1687_130892)" style="fill:url(#paint2_linear_1687_130892)"/>
+   <circle cx="27" cy="193" r="8" fill="url(#paint3_linear_1687_130892)" style="fill:url(#paint3_linear_1687_130892)"/>
+   <circle cx="59" cy="130" r="8" fill="url(#paint4_linear_1687_130892)" style="fill:url(#paint4_linear_1687_130892)"/>
+   <circle cx="10" cy="49" r="8" fill="url(#paint5_linear_1687_130892)" style="fill:url(#paint5_linear_1687_130892)"/>
+   <circle cx="10" cy="170" r="8" fill="url(#paint6_linear_1687_130892)" style="fill:url(#paint6_linear_1687_130892)"/>
+   <circle cx="56" cy="41" r="5" fill="url(#paint7_linear_1687_130892)" style="fill:url(#paint7_linear_1687_130892)"/>
+   <circle cx="41" cy="20" r="5" fill="url(#paint8_linear_1687_130892)" style="fill:url(#paint8_linear_1687_130892)"/>
+   <circle cx="74" cy="110" r="4" fill="url(#paint9_linear_1687_130892)" style="fill:url(#paint9_linear_1687_130892)"/>
+   <circle cx="223" cy="128" r="4" fill="url(#paint10_linear_1687_130892)" style="fill:url(#paint10_linear_1687_130892)"/>
+   <circle cx="8" cy="87" r="4" fill="url(#paint11_linear_1687_130892)" style="fill:url(#paint11_linear_1687_130892)"/>
+   <circle cx="37" cy="73" r="5" fill="url(#paint12_linear_1687_130892)" style="fill:url(#paint12_linear_1687_130892)"/>
+   <circle cx="61" cy="92" r="5" fill="url(#paint13_linear_1687_130892)" style="fill:url(#paint13_linear_1687_130892)"/>
+   <circle cx="33.5" cy="150.5" r="2.5" fill="url(#paint14_linear_1687_130892)" style="fill:url(#paint14_linear_1687_130892)"/>
+   <circle cx="56.5" cy="182.5" r="2.5" fill="url(#paint15_linear_1687_130892)" style="fill:url(#paint15_linear_1687_130892)"/>
+   <circle cx="72.5" cy="73.5" r="2.5" fill="url(#paint16_linear_1687_130892)" style="fill:url(#paint16_linear_1687_130892)"/>
+   <circle cx="44.5" cy="106.5" r="2.5" fill="url(#paint17_linear_1687_130892)" style="fill:url(#paint17_linear_1687_130892)"/>
+   <circle cx="27.5" cy="117.5" r="2.5" fill="url(#paint18_linear_1687_130892)" style="fill:url(#paint18_linear_1687_130892)"/>
+   <circle cx="16.5" cy="63.5" r="2.5" fill="url(#paint19_linear_1687_130892)" style="fill:url(#paint19_linear_1687_130892)"/>
+   <circle cx="4" cy="29" r="4" fill="url(#paint20_linear_1687_130892)" style="fill:url(#paint20_linear_1687_130892)"/>
+   <circle cx="4" cy="150" r="4" fill="url(#paint21_linear_1687_130892)" style="fill:url(#paint21_linear_1687_130892)"/>
+   <circle cx="9.5" cy="110.5" r="9.5" fill="url(#paint22_linear_1687_130892)" style="fill:url(#paint22_linear_1687_130892)"/>
+   <circle cx="101" cy="196" r="5" fill="url(#paint23_linear_1687_130892)" style="fill:url(#paint23_linear_1687_130892)"/>
+   <circle cx="75.5" cy="62.5" r="2.5" fill="url(#paint24_linear_1687_130892)" style="fill:url(#paint24_linear_1687_130892)"/>
+   <circle cx="75.5" cy="49.5" r="2.5" fill="url(#paint25_linear_1687_130892)" style="fill:url(#paint25_linear_1687_130892)"/>
+   <circle cx="109" cy="119" r="5" fill="url(#paint26_linear_1687_130892)" style="fill:url(#paint26_linear_1687_130892)"/>
+   <circle cx="80.5" cy="140.5" r="2.5" fill="url(#paint27_linear_1687_130892)" style="fill:url(#paint27_linear_1687_130892)"/>
+   <circle cx="73" cy="189" r="5" fill="url(#paint28_linear_1687_130892)" style="fill:url(#paint28_linear_1687_130892)"/>
+   <circle cx="112" cy="153" r="5" fill="url(#paint29_linear_1687_130892)" style="fill:url(#paint29_linear_1687_130892)"/>
+   <circle cx="93.5" cy="89.5" r="2.5" fill="url(#paint30_linear_1687_130892)" style="fill:url(#paint30_linear_1687_130892)"/>
+   <circle cx="219" cy="33" r="8" fill="url(#paint31_linear_1687_130892)" style="fill:url(#paint31_linear_1687_130892)"/>
+   <circle cx="193" cy="166" r="8" fill="url(#paint32_linear_1687_130892)" style="fill:url(#paint32_linear_1687_130892)"/>
+   <circle cx="153" cy="193" r="8" fill="url(#paint33_linear_1687_130892)" style="fill:url(#paint33_linear_1687_130892)"/>
+   <circle cx="181" cy="138" r="8" fill="url(#paint34_linear_1687_130892)" style="fill:url(#paint34_linear_1687_130892)"/>
+   <circle cx="119" cy="63" r="8" fill="url(#paint35_linear_1687_130892)" style="fill:url(#paint35_linear_1687_130892)"/>
+   <circle cx="136" cy="170" r="8" fill="url(#paint36_linear_1687_130892)" style="fill:url(#paint36_linear_1687_130892)"/>
+   <circle cx="182" cy="41" r="5" fill="url(#paint37_linear_1687_130892)" style="fill:url(#paint37_linear_1687_130892)"/>
+   <circle cx="167" cy="20" r="5" fill="url(#paint38_linear_1687_130892)" style="fill:url(#paint38_linear_1687_130892)"/>
+   <circle cx="200" cy="110" r="4" fill="url(#paint39_linear_1687_130892)" style="fill:url(#paint39_linear_1687_130892)"/>
+   <circle cx="134" cy="87" r="4" fill="url(#paint40_linear_1687_130892)" style="fill:url(#paint40_linear_1687_130892)"/>
+   <circle cx="163" cy="73" r="5" fill="url(#paint41_linear_1687_130892)" style="fill:url(#paint41_linear_1687_130892)"/>
+   <circle cx="187" cy="92" r="5" fill="url(#paint42_linear_1687_130892)" style="fill:url(#paint42_linear_1687_130892)"/>
+   <circle cx="159.5" cy="150.5" r="2.5" fill="url(#paint43_linear_1687_130892)" style="fill:url(#paint43_linear_1687_130892)"/>
+   <circle cx="182.5" cy="182.5" r="2.5" fill="url(#paint44_linear_1687_130892)" style="fill:url(#paint44_linear_1687_130892)"/>
+   <circle cx="198.5" cy="73.5" r="2.5" fill="url(#paint45_linear_1687_130892)" style="fill:url(#paint45_linear_1687_130892)"/>
+   <circle cx="170.5" cy="106.5" r="2.5" fill="url(#paint46_linear_1687_130892)" style="fill:url(#paint46_linear_1687_130892)"/>
+   <circle cx="153.5" cy="117.5" r="2.5" fill="url(#paint47_linear_1687_130892)" style="fill:url(#paint47_linear_1687_130892)"/>
+   <circle cx="142.5" cy="63.5" r="2.5" fill="url(#paint48_linear_1687_130892)" style="fill:url(#paint48_linear_1687_130892)"/>
+   <circle cx="130" cy="29" r="4" fill="url(#paint49_linear_1687_130892)" style="fill:url(#paint49_linear_1687_130892)"/>
+   <circle cx="130" cy="150" r="4" fill="url(#paint50_linear_1687_130892)" style="fill:url(#paint50_linear_1687_130892)"/>
+   <circle cx="135.5" cy="110.5" r="9.5" fill="url(#paint51_linear_1687_130892)" style="fill:url(#paint51_linear_1687_130892)"/>
+   <circle cx="232" cy="180" r="5" fill="url(#paint52_linear_1687_130892)" style="fill:url(#paint52_linear_1687_130892)"/>
+   <circle cx="213.5" cy="66.5" r="2.5" fill="url(#paint53_linear_1687_130892)" style="fill:url(#paint53_linear_1687_130892)"/>
+   <circle cx="165.5" cy="36.5" r="2.5" fill="url(#paint54_linear_1687_130892)" style="fill:url(#paint54_linear_1687_130892)"/>
+   <circle cx="233" cy="103" r="5" fill="url(#paint55_linear_1687_130892)" style="fill:url(#paint55_linear_1687_130892)"/>
+   <circle cx="206.5" cy="140.5" r="2.5" fill="url(#paint56_linear_1687_130892)" style="fill:url(#paint56_linear_1687_130892)"/>
+   <circle cx="224.5" cy="198.5" r="2.5" fill="url(#paint57_linear_1687_130892)" style="fill:url(#paint57_linear_1687_130892)"/>
+   <circle cx="199" cy="189" r="5" fill="url(#paint58_linear_1687_130892)" style="fill:url(#paint58_linear_1687_130892)"/>
+   <circle cx="238" cy="153" r="5" fill="url(#paint59_linear_1687_130892)" style="fill:url(#paint59_linear_1687_130892)"/>
+   <circle cx="219.5" cy="89.5" r="2.5" fill="url(#paint60_linear_1687_130892)" style="fill:url(#paint60_linear_1687_130892)"/>
+   <circle cx="68.5" cy="7.5" r="2.5" fill="url(#paint61_linear_1687_130892)" style="fill:url(#paint61_linear_1687_130892)"/>
+   <circle cx="202.5" cy="12.5" r="2.5" fill="url(#paint62_linear_1687_130892)" style="fill:url(#paint62_linear_1687_130892)"/>
+   <circle cx="114" cy="5" r="5" fill="url(#paint63_linear_1687_130892)" style="fill:url(#paint63_linear_1687_130892)"/>
+   <circle cx="355" cy="33" r="8" fill="url(#paint64_linear_1687_130892)" style="fill:url(#paint64_linear_1687_130892)"/>
+   <circle cx="329" cy="166" r="8" fill="url(#paint65_linear_1687_130892)" style="fill:url(#paint65_linear_1687_130892)"/>
+   <circle cx="289" cy="193" r="8" fill="url(#paint66_linear_1687_130892)" style="fill:url(#paint66_linear_1687_130892)"/>
+   <circle cx="320" cy="136" r="8" fill="url(#paint67_linear_1687_130892)" style="fill:url(#paint67_linear_1687_130892)"/>
+   <circle cx="272" cy="49" r="8" fill="url(#paint68_linear_1687_130892)" style="fill:url(#paint68_linear_1687_130892)"/>
+   <circle cx="272" cy="170" r="8" fill="url(#paint69_linear_1687_130892)" style="fill:url(#paint69_linear_1687_130892)"/>
+   <circle cx="318" cy="41" r="5" fill="url(#paint70_linear_1687_130892)" style="fill:url(#paint70_linear_1687_130892)"/>
+   <circle cx="303" cy="20" r="5" fill="url(#paint71_linear_1687_130892)" style="fill:url(#paint71_linear_1687_130892)"/>
+   <circle cx="336" cy="110" r="4" fill="url(#paint72_linear_1687_130892)" style="fill:url(#paint72_linear_1687_130892)"/>
+   <circle cx="485" cy="128" r="4" fill="url(#paint73_linear_1687_130892)" style="fill:url(#paint73_linear_1687_130892)"/>
+   <circle cx="547" cy="92" r="4" fill="url(#paint74_linear_1687_130892)" style="fill:url(#paint74_linear_1687_130892)"/>
+   <circle cx="270" cy="87" r="4" fill="url(#paint75_linear_1687_130892)" style="fill:url(#paint75_linear_1687_130892)"/>
+   <circle cx="299" cy="73" r="5" fill="url(#paint76_linear_1687_130892)" style="fill:url(#paint76_linear_1687_130892)"/>
+   <circle cx="323" cy="92" r="5" fill="url(#paint77_linear_1687_130892)" style="fill:url(#paint77_linear_1687_130892)"/>
+   <circle cx="295.5" cy="150.5" r="2.5" fill="url(#paint78_linear_1687_130892)" style="fill:url(#paint78_linear_1687_130892)"/>
+   <circle cx="318.5" cy="182.5" r="2.5" fill="url(#paint79_linear_1687_130892)" style="fill:url(#paint79_linear_1687_130892)"/>
+   <circle cx="334.5" cy="73.5" r="2.5" fill="url(#paint80_linear_1687_130892)" style="fill:url(#paint80_linear_1687_130892)"/>
+   <circle cx="306.5" cy="106.5" r="2.5" fill="url(#paint81_linear_1687_130892)" style="fill:url(#paint81_linear_1687_130892)"/>
+   <circle cx="289.5" cy="117.5" r="2.5" fill="url(#paint82_linear_1687_130892)" style="fill:url(#paint82_linear_1687_130892)"/>
+   <circle cx="243.5" cy="67.5" r="2.5" fill="url(#paint83_linear_1687_130892)" style="fill:url(#paint83_linear_1687_130892)"/>
+   <circle cx="257" cy="20" r="4" fill="url(#paint84_linear_1687_130892)" style="fill:url(#paint84_linear_1687_130892)"/>
+   <circle cx="266" cy="150" r="4" fill="url(#paint85_linear_1687_130892)" style="fill:url(#paint85_linear_1687_130892)"/>
+   <circle cx="261.5" cy="126.5" r="9.5" fill="url(#paint86_linear_1687_130892)" style="fill:url(#paint86_linear_1687_130892)"/>
+   <circle cx="510.5" cy="43.5" r="9.5" fill="url(#paint87_linear_1687_130892)" style="fill:url(#paint87_linear_1687_130892)"/>
+   <circle cx="520.5" cy="128.5" r="9.5" fill="url(#paint88_linear_1687_130892)" style="fill:url(#paint88_linear_1687_130892)"/>
+   <circle cx="363" cy="196" r="5" fill="url(#paint89_linear_1687_130892)" style="fill:url(#paint89_linear_1687_130892)"/>
+   <circle cx="342.5" cy="83.5" r="2.5" fill="url(#paint90_linear_1687_130892)" style="fill:url(#paint90_linear_1687_130892)"/>
+   <circle cx="368.5" cy="89.5" r="2.5" fill="url(#paint91_linear_1687_130892)" style="fill:url(#paint91_linear_1687_130892)"/>
+   <circle cx="371" cy="119" r="5" fill="url(#paint92_linear_1687_130892)" style="fill:url(#paint92_linear_1687_130892)"/>
+   <circle cx="547" cy="119" r="5" fill="url(#paint93_linear_1687_130892)" style="fill:url(#paint93_linear_1687_130892)"/>
+   <circle cx="342.5" cy="140.5" r="2.5" fill="url(#paint94_linear_1687_130892)" style="fill:url(#paint94_linear_1687_130892)"/>
+   <circle cx="335" cy="189" r="5" fill="url(#paint95_linear_1687_130892)" style="fill:url(#paint95_linear_1687_130892)"/>
+   <circle cx="374" cy="153" r="5" fill="url(#paint96_linear_1687_130892)" style="fill:url(#paint96_linear_1687_130892)"/>
+   <circle cx="515" cy="176" r="5" fill="url(#paint97_linear_1687_130892)" style="fill:url(#paint97_linear_1687_130892)"/>
+   <circle cx="355.5" cy="89.5" r="2.5" fill="url(#paint98_linear_1687_130892)" style="fill:url(#paint98_linear_1687_130892)"/>
+   <circle cx="481" cy="33" r="8" fill="url(#paint99_linear_1687_130892)" style="fill:url(#paint99_linear_1687_130892)"/>
+   <circle cx="547" cy="23" r="8" fill="url(#paint100_linear_1687_130892)" style="fill:url(#paint100_linear_1687_130892)"/>
+   <circle cx="455" cy="166" r="8" fill="url(#paint101_linear_1687_130892)" style="fill:url(#paint101_linear_1687_130892)"/>
+   <circle cx="415" cy="193" r="8" fill="url(#paint102_linear_1687_130892)" style="fill:url(#paint102_linear_1687_130892)"/>
+   <circle cx="443" cy="138" r="8" fill="url(#paint103_linear_1687_130892)" style="fill:url(#paint103_linear_1687_130892)"/>
+   <circle cx="576" cy="153" r="8" fill="url(#paint104_linear_1687_130892)" style="fill:url(#paint104_linear_1687_130892)"/>
+   <circle cx="381" cy="63" r="8" fill="url(#paint105_linear_1687_130892)" style="fill:url(#paint105_linear_1687_130892)"/>
+   <circle cx="398" cy="170" r="8" fill="url(#paint106_linear_1687_130892)" style="fill:url(#paint106_linear_1687_130892)"/>
+   <circle cx="539" cy="193" r="8" fill="url(#paint107_linear_1687_130892)" style="fill:url(#paint107_linear_1687_130892)"/>
+   <circle cx="444" cy="41" r="5" fill="url(#paint108_linear_1687_130892)" style="fill:url(#paint108_linear_1687_130892)"/>
+   <circle cx="579" cy="39" r="5" fill="url(#paint109_linear_1687_130892)" style="fill:url(#paint109_linear_1687_130892)"/>
+   <circle cx="568" cy="196" r="5" fill="url(#paint110_linear_1687_130892)" style="fill:url(#paint110_linear_1687_130892)"/>
+   <circle cx="515" cy="10" r="5" fill="url(#paint111_linear_1687_130892)" style="fill:url(#paint111_linear_1687_130892)"/>
+   <circle cx="429" cy="20" r="5" fill="url(#paint112_linear_1687_130892)" style="fill:url(#paint112_linear_1687_130892)"/>
+   <circle cx="462" cy="110" r="4" fill="url(#paint113_linear_1687_130892)" style="fill:url(#paint113_linear_1687_130892)"/>
+   <circle cx="396" cy="87" r="4" fill="url(#paint114_linear_1687_130892)" style="fill:url(#paint114_linear_1687_130892)"/>
+   <circle cx="425" cy="73" r="5" fill="url(#paint115_linear_1687_130892)" style="fill:url(#paint115_linear_1687_130892)"/>
+   <circle cx="505" cy="76" r="5" fill="url(#paint116_linear_1687_130892)" style="fill:url(#paint116_linear_1687_130892)"/>
+   <circle cx="449" cy="92" r="5" fill="url(#paint117_linear_1687_130892)" style="fill:url(#paint117_linear_1687_130892)"/>
+   <circle cx="421.5" cy="150.5" r="2.5" fill="url(#paint118_linear_1687_130892)" style="fill:url(#paint118_linear_1687_130892)"/>
+   <circle cx="444.5" cy="182.5" r="2.5" fill="url(#paint119_linear_1687_130892)" style="fill:url(#paint119_linear_1687_130892)"/>
+   <circle cx="460.5" cy="73.5" r="2.5" fill="url(#paint120_linear_1687_130892)" style="fill:url(#paint120_linear_1687_130892)"/>
+   <circle cx="528.5" cy="90.5" r="2.5" fill="url(#paint121_linear_1687_130892)" style="fill:url(#paint121_linear_1687_130892)"/>
+   <circle cx="432.5" cy="106.5" r="2.5" fill="url(#paint122_linear_1687_130892)" style="fill:url(#paint122_linear_1687_130892)"/>
+   <circle cx="568.5" cy="89.5" r="2.5" fill="url(#paint123_linear_1687_130892)" style="fill:url(#paint123_linear_1687_130892)"/>
+   <circle cx="415.5" cy="117.5" r="2.5" fill="url(#paint124_linear_1687_130892)" style="fill:url(#paint124_linear_1687_130892)"/>
+   <circle cx="404.5" cy="63.5" r="2.5" fill="url(#paint125_linear_1687_130892)" style="fill:url(#paint125_linear_1687_130892)"/>
+   <circle cx="540.5" cy="46.5" r="2.5" fill="url(#paint126_linear_1687_130892)" style="fill:url(#paint126_linear_1687_130892)"/>
+   <circle cx="392" cy="29" r="4" fill="url(#paint127_linear_1687_130892)" style="fill:url(#paint127_linear_1687_130892)"/>
+   <circle cx="392" cy="150" r="4" fill="url(#paint128_linear_1687_130892)" style="fill:url(#paint128_linear_1687_130892)"/>
+   <circle cx="397.5" cy="110.5" r="9.5" fill="url(#paint129_linear_1687_130892)" style="fill:url(#paint129_linear_1687_130892)"/>
+   <circle cx="494" cy="180" r="5" fill="url(#paint130_linear_1687_130892)" style="fill:url(#paint130_linear_1687_130892)"/>
+   <circle cx="475.5" cy="66.5" r="2.5" fill="url(#paint131_linear_1687_130892)" style="fill:url(#paint131_linear_1687_130892)"/>
+   <circle cx="427.5" cy="36.5" r="2.5" fill="url(#paint132_linear_1687_130892)" style="fill:url(#paint132_linear_1687_130892)"/>
+   <circle cx="495" cy="103" r="5" fill="url(#paint133_linear_1687_130892)" style="fill:url(#paint133_linear_1687_130892)"/>
+   <circle cx="468.5" cy="140.5" r="2.5" fill="url(#paint134_linear_1687_130892)" style="fill:url(#paint134_linear_1687_130892)"/>
+   <circle cx="540.5" cy="148.5" r="2.5" fill="url(#paint135_linear_1687_130892)" style="fill:url(#paint135_linear_1687_130892)"/>
+   <circle cx="486.5" cy="198.5" r="2.5" fill="url(#paint136_linear_1687_130892)" style="fill:url(#paint136_linear_1687_130892)"/>
+   <circle cx="461" cy="189" r="5" fill="url(#paint137_linear_1687_130892)" style="fill:url(#paint137_linear_1687_130892)"/>
+   <circle cx="557" cy="167" r="5" fill="url(#paint138_linear_1687_130892)" style="fill:url(#paint138_linear_1687_130892)"/>
+   <circle cx="557" cy="66" r="5" fill="url(#paint139_linear_1687_130892)" style="fill:url(#paint139_linear_1687_130892)"/>
+   <circle cx="500" cy="153" r="5" fill="url(#paint140_linear_1687_130892)" style="fill:url(#paint140_linear_1687_130892)"/>
+   <circle cx="481.5" cy="89.5" r="2.5" fill="url(#paint141_linear_1687_130892)" style="fill:url(#paint141_linear_1687_130892)"/>
+   <circle cx="525.5" cy="73.5" r="2.5" fill="url(#paint142_linear_1687_130892)" style="fill:url(#paint142_linear_1687_130892)"/>
+   <circle cx="330.5" cy="7.5" r="2.5" fill="url(#paint143_linear_1687_130892)" style="fill:url(#paint143_linear_1687_130892)"/>
+   <circle cx="464.5" cy="12.5" r="2.5" fill="url(#paint144_linear_1687_130892)" style="fill:url(#paint144_linear_1687_130892)"/>
+   <circle cx="376" cy="5" r="5" fill="url(#paint145_linear_1687_130892)" style="fill:url(#paint145_linear_1687_130892)"/>
+   <path d="m0 0h584v197c0 2.209-1.791 4-4 4h-576c-2.2092 0-4-1.791-4-4z" fill="#1EC1F4" fill-opacity=".5" style="fill-opacity:0"/>
+  </pattern>
+  <linearGradient id="paint1_linear_1687_130892" x1="99.316" x2="101" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint2_linear_1687_130892" x1="73.316" x2="75" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint3_linear_1687_130892" x1="33.316" x2="35" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint4_linear_1687_130892" x1="65.316" x2="67" y1="914.26" y2="929" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint5_linear_1687_130892" x1="16.316" x2="18" y1="833.26" y2="848" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_1687_130892" x1="16.316" x2="18" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint7_linear_1687_130892" x1="62.947" x2="64" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint8_linear_1687_130892" x1="47.947" x2="49" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint9_linear_1687_130892" x1="81.158" x2="82" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint10_linear_1687_130892" x1="230.16" x2="231" y1="915.63" y2="923" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint11_linear_1687_130892" x1="15.158" x2="16" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint12_linear_1687_130892" x1="43.947" x2="45" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint13_linear_1687_130892" x1="67.947" x2="69" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint14_linear_1687_130892" x1="40.974" x2="41.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint15_linear_1687_130892" x1="63.974" x2="64.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint16_linear_1687_130892" x1="79.974" x2="80.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint17_linear_1687_130892" x1="51.974" x2="52.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint18_linear_1687_130892" x1="34.974" x2="35.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint19_linear_1687_130892" x1="23.974" x2="24.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint20_linear_1687_130892" x1="11.158" x2="12" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint21_linear_1687_130892" x1="11.158" x2="12" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint22_linear_1687_130892" x1="15.5" x2="17.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint23_linear_1687_130892" x1="107.95" x2="109" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint24_linear_1687_130892" x1="82.974" x2="83.5" y1="851.4" y2="856" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint25_linear_1687_130892" x1="82.974" x2="83.5" y1="838.4" y2="843" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint26_linear_1687_130892" x1="115.95" x2="117" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint27_linear_1687_130892" x1="87.974" x2="88.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint28_linear_1687_130892" x1="79.947" x2="81" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint29_linear_1687_130892" x1="118.95" x2="120" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint30_linear_1687_130892" x1="100.97" x2="101.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint31_linear_1687_130892" x1="225.32" x2="227" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint32_linear_1687_130892" x1="199.32" x2="201" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint33_linear_1687_130892" x1="159.32" x2="161" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint34_linear_1687_130892" x1="187.32" x2="189" y1="922.26" y2="937" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint35_linear_1687_130892" x1="125.32" x2="127" y1="847.26" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint36_linear_1687_130892" x1="142.32" x2="144" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint37_linear_1687_130892" x1="188.95" x2="190" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint38_linear_1687_130892" x1="173.95" x2="175" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint39_linear_1687_130892" x1="207.16" x2="208" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint40_linear_1687_130892" x1="141.16" x2="142" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint41_linear_1687_130892" x1="169.95" x2="171" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint42_linear_1687_130892" x1="193.95" x2="195" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint43_linear_1687_130892" x1="166.97" x2="167.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint44_linear_1687_130892" x1="189.97" x2="190.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint45_linear_1687_130892" x1="205.97" x2="206.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint46_linear_1687_130892" x1="177.97" x2="178.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint47_linear_1687_130892" x1="160.97" x2="161.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint48_linear_1687_130892" x1="149.97" x2="150.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint49_linear_1687_130892" x1="137.16" x2="138" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint50_linear_1687_130892" x1="137.16" x2="138" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint51_linear_1687_130892" x1="141.5" x2="143.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint52_linear_1687_130892" x1="238.95" x2="240" y1="966.79" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint53_linear_1687_130892" x1="220.97" x2="221.5" y1="855.4" y2="860" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint54_linear_1687_130892" x1="172.97" x2="173.5" y1="825.4" y2="830" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint55_linear_1687_130892" x1="239.95" x2="241" y1="889.79" y2="899" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint56_linear_1687_130892" x1="213.97" x2="214.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint57_linear_1687_130892" x1="231.97" x2="232.5" y1="987.4" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint58_linear_1687_130892" x1="205.95" x2="207" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint59_linear_1687_130892" x1="244.95" x2="246" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint60_linear_1687_130892" x1="226.97" x2="227.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint61_linear_1687_130892" x1="75.974" x2="76.5" y1="796.4" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint62_linear_1687_130892" x1="209.97" x2="210.5" y1="801.4" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint63_linear_1687_130892" x1="120.95" x2="122" y1="791.79" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint64_linear_1687_130892" x1="361.32" x2="363" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint65_linear_1687_130892" x1="335.32" x2="337" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint66_linear_1687_130892" x1="295.32" x2="297" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint67_linear_1687_130892" x1="326.32" x2="328" y1="920.26" y2="935" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint68_linear_1687_130892" x1="278.32" x2="280" y1="833.26" y2="848" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint69_linear_1687_130892" x1="278.32" x2="280" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint70_linear_1687_130892" x1="324.95" x2="326" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint71_linear_1687_130892" x1="309.95" x2="311" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint72_linear_1687_130892" x1="343.16" x2="344" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint73_linear_1687_130892" x1="492.16" x2="493" y1="915.63" y2="923" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint74_linear_1687_130892" x1="554.16" x2="555" y1="879.63" y2="887" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint75_linear_1687_130892" x1="277.16" x2="278" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint76_linear_1687_130892" x1="305.95" x2="307" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint77_linear_1687_130892" x1="329.95" x2="331" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint78_linear_1687_130892" x1="302.97" x2="303.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint79_linear_1687_130892" x1="325.97" x2="326.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint80_linear_1687_130892" x1="341.97" x2="342.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint81_linear_1687_130892" x1="313.97" x2="314.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint82_linear_1687_130892" x1="296.97" x2="297.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint83_linear_1687_130892" x1="250.97" x2="251.5" y1="856.4" y2="861" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint84_linear_1687_130892" x1="264.16" x2="265" y1="807.63" y2="815" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint85_linear_1687_130892" x1="273.16" x2="274" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint86_linear_1687_130892" x1="267.5" x2="269.5" y1="909.5" y2="927" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint87_linear_1687_130892" x1="516.5" x2="518.5" y1="826.5" y2="844" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint88_linear_1687_130892" x1="526.5" x2="528.5" y1="911.5" y2="929" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint89_linear_1687_130892" x1="369.95" x2="371" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint90_linear_1687_130892" x1="349.97" x2="350.5" y1="872.4" y2="877" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint91_linear_1687_130892" x1="375.97" x2="376.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint92_linear_1687_130892" x1="377.95" x2="379" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint93_linear_1687_130892" x1="553.95" x2="555" y1="905.79" y2="915" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint94_linear_1687_130892" x1="349.97" x2="350.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint95_linear_1687_130892" x1="341.95" x2="343" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint96_linear_1687_130892" x1="380.95" x2="382" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint97_linear_1687_130892" x1="521.95" x2="523" y1="962.79" y2="972" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint98_linear_1687_130892" x1="362.97" x2="363.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint99_linear_1687_130892" x1="487.32" x2="489" y1="817.26" y2="832" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint100_linear_1687_130892" x1="553.32" x2="555" y1="807.26" y2="822" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint101_linear_1687_130892" x1="461.32" x2="463" y1="950.26" y2="965" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint102_linear_1687_130892" x1="421.32" x2="423" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint103_linear_1687_130892" x1="449.32" x2="451" y1="922.26" y2="937" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint104_linear_1687_130892" x1="582.32" x2="584" y1="937.26" y2="952" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint105_linear_1687_130892" x1="387.32" x2="389" y1="847.26" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint106_linear_1687_130892" x1="404.32" x2="406" y1="954.26" y2="969" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint107_linear_1687_130892" x1="545.32" x2="547" y1="977.26" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint108_linear_1687_130892" x1="450.95" x2="452" y1="827.79" y2="837" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint109_linear_1687_130892" x1="585.95" x2="587" y1="825.79" y2="835" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint110_linear_1687_130892" x1="574.95" x2="576" y1="982.79" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint111_linear_1687_130892" x1="521.95" x2="523" y1="796.79" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint112_linear_1687_130892" x1="435.95" x2="437" y1="806.79" y2="816" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint113_linear_1687_130892" x1="469.16" x2="470" y1="897.63" y2="905" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint114_linear_1687_130892" x1="403.16" x2="404" y1="874.63" y2="882" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint115_linear_1687_130892" x1="431.95" x2="433" y1="859.79" y2="869" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint116_linear_1687_130892" x1="511.95" x2="513" y1="862.79" y2="872" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint117_linear_1687_130892" x1="455.95" x2="457" y1="878.79" y2="888" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint118_linear_1687_130892" x1="428.97" x2="429.5" y1="939.4" y2="944" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint119_linear_1687_130892" x1="451.97" x2="452.5" y1="971.4" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint120_linear_1687_130892" x1="467.97" x2="468.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint121_linear_1687_130892" x1="535.97" x2="536.5" y1="879.4" y2="884" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint122_linear_1687_130892" x1="439.97" x2="440.5" y1="895.4" y2="900" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint123_linear_1687_130892" x1="575.97" x2="576.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint124_linear_1687_130892" x1="422.97" x2="423.5" y1="906.4" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint125_linear_1687_130892" x1="411.97" x2="412.5" y1="852.4" y2="857" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint126_linear_1687_130892" x1="547.97" x2="548.5" y1="835.4" y2="840" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".3" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint127_linear_1687_130892" x1="399.16" x2="400" y1="816.63" y2="824" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint128_linear_1687_130892" x1="399.16" x2="400" y1="937.63" y2="945" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint129_linear_1687_130892" x1="403.5" x2="405.5" y1="893.5" y2="911" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint130_linear_1687_130892" x1="500.95" x2="502" y1="966.79" y2="976" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint131_linear_1687_130892" x1="482.97" x2="483.5" y1="855.4" y2="860" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint132_linear_1687_130892" x1="434.97" x2="435.5" y1="825.4" y2="830" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint133_linear_1687_130892" x1="501.95" x2="503" y1="889.79" y2="899" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".2" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint134_linear_1687_130892" x1="475.97" x2="476.5" y1="929.4" y2="934" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint135_linear_1687_130892" x1="547.97" x2="548.5" y1="937.4" y2="942" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint136_linear_1687_130892" x1="493.97" x2="494.5" y1="987.4" y2="992" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".25" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint137_linear_1687_130892" x1="467.95" x2="469" y1="975.79" y2="985" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint138_linear_1687_130892" x1="563.95" x2="565" y1="953.79" y2="963" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint139_linear_1687_130892" x1="563.95" x2="565" y1="852.79" y2="862" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".05" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint140_linear_1687_130892" x1="506.95" x2="508" y1="939.79" y2="949" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint141_linear_1687_130892" x1="488.97" x2="489.5" y1="878.4" y2="883" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint142_linear_1687_130892" x1="532.97" x2="533.5" y1="862.4" y2="867" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint143_linear_1687_130892" x1="337.97" x2="338.5" y1="796.4" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint144_linear_1687_130892" x1="471.97" x2="472.5" y1="801.4" y2="806" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".4" offset="0"/>
+   <stop stop-opacity=".15" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint145_linear_1687_130892" x1="382.95" x2="384" y1="791.79" y2="801" gradientTransform="translate(-8,-791)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" stop-opacity=".25" offset="0"/>
+   <stop stop-opacity=".1" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/small-spherical-tank.svg b/application/src/main/data/json/system/scada_symbols/small-spherical-tank.svg
index 48e6d755f2..2d2a5ca76c 100644
--- a/application/src/main/data/json/system/scada_symbols/small-spherical-tank.svg
+++ b/application/src/main/data/json/system/scada_symbols/small-spherical-tank.svg
@@ -37,6 +37,11 @@
       "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 23;\n        var majorIntervalLength = 560 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(268, y, 300, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = (100 - i * (100/majorIntervals)).toFixed(0);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 258, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(280, minorY, 300, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
     {
       "tag": "top-layer",
       "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
@@ -556,7 +561,7 @@
     }
   ]
 }]]></tb:metadata>
-<circle cx="300" cy="300" r="300" fill="#E5E5E5" tb:tag="background"/><circle cx="300" cy="300" r="300" fill="url(#paint0_radial_1711_268272)"/><circle cx="300" cy="300" r="298.5" stroke="#000" stroke-opacity=".12" stroke-width="3"/><circle cx="300" cy="300" r="300" fill="#4A4848" fill-opacity=".5"/><mask id="mask0_1711_268272" x="16" y="16" width="568" height="568" style="mask-type:alpha" maskUnits="userSpaceOnUse">
+<circle cx="300" cy="300" r="300" fill="#E5E5E5" tb:tag="background"/><circle cx="300" cy="300" r="300" fill="url(#paint0_radial_1711_268272)"/><circle cx="300" cy="300" r="298.5" stroke="#000" stroke-opacity=".12" stroke-width="3"/><circle cx="300" cy="300" r="300" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><mask id="mask0_1711_268272" x="16" y="16" width="568" height="568" style="mask-type:alpha" maskUnits="userSpaceOnUse">
   <circle cx="300" cy="300" r="284" fill="#D9D9D9"/>
  </mask><g mask="url(#mask0_1711_268272)">
   <rect transform="scale(1,-1)" y="-584" width="600" height="200" fill="#1ec1f4" fill-opacity=".5" tb:tag="fluid-background"/>
diff --git a/application/src/main/data/json/system/scada_symbols/spherical-tank.svg b/application/src/main/data/json/system/scada_symbols/spherical-tank.svg
index 7cb36206a4..2c4128bdeb 100644
--- a/application/src/main/data/json/system/scada_symbols/spherical-tank.svg
+++ b/application/src/main/data/json/system/scada_symbols/spherical-tank.svg
@@ -37,6 +37,11 @@
       "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 23;\n        var majorIntervalLength = 960 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(458, y, 490, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = (100 - i * (100/majorIntervals)).toFixed(0);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 448, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(470, minorY, 490, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
     {
       "tag": "top-layer",
       "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
@@ -556,7 +561,7 @@
     }
   ]
 }]]></tb:metadata>
-<path d="m1e3 500c0 276.14-223.86 500-500 500s-500-223.86-500-500 223.86-500 500-500 500 223.86 500 500z" fill="#E5E5E5" tb:tag="background"/><path d="m1e3 500c0 276.14-223.86 500-500 500s-500-223.86-500-500 223.86-500 500-500 500 223.86 500 500z" fill="url(#paint0_radial_1711_251491)"/><path d="m998.5 500c0 275.31-223.19 498.5-498.5 498.5s-498.5-223.19-498.5-498.5 223.19-498.5 498.5-498.5 498.5 223.19 498.5 498.5z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><circle cx="500" cy="500" r="500" fill="#4A4848" fill-opacity=".5"/><mask id="mask0_1711_251491" x="16" y="16" width="968" height="968" style="mask-type:alpha" maskUnits="userSpaceOnUse">
+<path d="m1e3 500c0 276.14-223.86 500-500 500s-500-223.86-500-500 223.86-500 500-500 500 223.86 500 500z" fill="#E5E5E5" tb:tag="background"/><path d="m1e3 500c0 276.14-223.86 500-500 500s-500-223.86-500-500 223.86-500 500-500 500 223.86 500 500z" fill="url(#paint0_radial_1711_251491)"/><path d="m998.5 500c0 275.31-223.19 498.5-498.5 498.5s-498.5-223.19-498.5-498.5 223.19-498.5 498.5-498.5 498.5 223.19 498.5 498.5z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><circle cx="500" cy="500" r="500" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><mask id="mask0_1711_251491" x="16" y="16" width="968" height="968" style="mask-type:alpha" maskUnits="userSpaceOnUse">
   <circle cx="500" cy="500" r="484" fill="#D9D9D9"/>
  </mask><g mask="url(#mask0_1711_251491)">
   <rect transform="scale(1,-1)" x="8" y="-984" width="984" height="200" fill="#1EC1F4" fill-opacity=".5" tb:tag="fluid-background"/>
diff --git a/application/src/main/data/json/system/scada_symbols/stand-horizontal-tank.svg b/application/src/main/data/json/system/scada_symbols/stand-horizontal-tank.svg
index a47d208f41..014ea43994 100644
--- a/application/src/main/data/json/system/scada_symbols/stand-horizontal-tank.svg
+++ b/application/src/main/data/json/system/scada_symbols/stand-horizontal-tank.svg
@@ -37,6 +37,11 @@
       "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 17;\n        var majorIntervalLength = 568 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(715, y, 747, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = (100 - i * (100/majorIntervals)).toFixed(0);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 705, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(727, minorY, 747, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
+    {
+      "tag": "scale-background",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n    element.hide();\n}",
+      "actions": null
+    },
     {
       "tag": "top-layer",
       "stateRenderFunction": "if (ctx.properties.transparent || !ctx.properties.scale) {\n    element.hide();\n}",
@@ -556,7 +561,7 @@
     }
   ]
 }]]></tb:metadata>
-<path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="#E5E5E5" tb:tag="background"/><path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="url(#paint0_linear_1694_158298)"/><path d="m177.27 0.4874c198.56-1.0967 560.65 1.9e-5 640.18 0 79.522-1.9e-5 183.55 15 183.55 220v169c0 192.5-105.53 211.5-184.55 211.5s-516.64-0.5-639.18-0.5c-122.53 0-176.55-68.001-176.55-219 5.26e-4 -151-6.59e-4 -49.502-2.47e-4 -119s-22.006-260.91 176.55-262.01z" fill="#4A4848" fill-opacity=".5"/><mask id="mask0_1694_158298" x="17" y="16" width="968" height="570" style="mask-type:alpha" maskUnits="userSpaceOnUse">
+<path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="#E5E5E5" tb:tag="background"/><path d="m174 600c-174 0-174-151.63-174-239 4.9551e-6 -1.386 9.6938e-6 -2.741 1.4223e-5 -4.065 1.18e-8 -4e-3 -1.4223e-5 -113.93-1.4223e-5 -113.94 0-87.373-8.3346e-7 -243 174-243h653.5c173 0 172.5 156.06 172.5 243v118c0 86.939 0 239-172.5 239h-653.5z" fill="url(#paint0_linear_1694_158298)"/><path d="m177.27 0.4874c198.56-1.0967 560.65 1.9e-5 640.18 0 79.522-1.9e-5 183.55 15 183.55 220v169c0 192.5-105.53 211.5-184.55 211.5s-516.64-0.5-639.18-0.5c-122.53 0-176.55-68.001-176.55-219 5.26e-4 -151-6.59e-4 -49.502-2.47e-4 -119s-22.006-260.91 176.55-262.01z" fill="#4A4848" fill-opacity=".5" tb:tag="scale-background"/><mask id="mask0_1694_158298" x="17" y="16" width="968" height="570" style="mask-type:alpha" maskUnits="userSpaceOnUse">
   <path d="m178.68 16h654.82c117.67 0 151.5 98.586 151.5 184.16v204.18c0 135.62-68.502 181.66-162.5 181.66h-627.98c-129 0-177.5-66.558-177.5-181.66s0.0023-129.32 0-212.19c-3e-4 -9.509-5.4994-176.16 161.66-176.16z" fill="#D9D9D9"/>
  </mask><g mask="url(#mask0_1694_158298)">
   <rect transform="scale(1,-1)" x="9" y="-585" width="984" height="200" fill="#1EC1F4" fill-opacity=".5" tb:tag="fluid-background"/>
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-broken-pipe.svg b/application/src/main/data/json/system/scada_symbols/vertical-broken-pipe.svg
new file mode 100644
index 0000000000..6cf06df995
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/vertical-broken-pipe.svg
@@ -0,0 +1,97 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200"><tb:metadata xmlns=""><![CDATA[{
+  "title": "Vertical broken pipe",
+  "description": "Vertical broken pipe.",
+  "searchTags": [
+    "pipe",
+    "vertical pipe",
+    "broken pipe"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "id": "pipeColor",
+      "name": "{i18n:scada.symbol.pipe-color}",
+      "type": "color",
+      "default": "#FFFFFF",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+<g tb:tag="clickArea">
+  <path d="m63.5 186.5s0.2293-53.5 0-60.5-6.5-17-6.5-17l21.5 14.5 6.5-14.5 9 10.5 11-14.5 6.5 18.5 6-10 11.5 2.5 14-7s-7.5 10-7.5 17v60.5h-72z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m63.5 186.5s0.2293-53.5 0-60.5-6.5-17-6.5-17l21.5 14.5 6.5-14.5 9 10.5 11-14.5 6.5 18.5 6-10 11.5 2.5 14-7s-7.5 10-7.5 17v60.5h-72z" fill="url(#paint0_linear_2474_252378)"/>
+  <path d="m61.52 114.23c-0.0889-0.188-0.1777-0.374-0.2661-0.556l16.407 11.066 1.4782 0.997 0.7293-1.627 5.5321-12.341 7.4602 8.703 1.2101 1.412 1.1238-1.481 9.314-12.278 5.576 15.868 1.058 3.013 1.643-2.738 5.447-9.078 10.448 2.272 0.517 0.112 0.473-0.236 9.023-4.512c-0.249 0.421-0.502 0.861-0.755 1.317-1.883 3.389-3.939 7.935-3.939 11.853v59h-68.994l0.0033-0.807c0.0058-1.476 0.0139-3.594 0.0228-6.157 0.0179-5.125 0.0394-12.032 0.0538-19.158 0.0286-14.23 0.0289-29.393-0.0868-32.927-0.1255-3.83-1.8722-8.32-3.4792-11.717z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m58 94.5s7.395-13.5 7.5-18.5 0-62 0-62h72s-0.086 54.5 0 62 4.5 18.5 4.5 18.5l-13.5-6-14 15-5-16.5-6 7.5-13-6-13 18-4.5-19.5-15 7.5z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m58 94.5s7.395-13.5 7.5-18.5 0-62 0-62h72s-0.086 54.5 0 62 4.5 18.5 4.5 18.5l-13.5-6-14 15-5-16.5-6 7.5-13-6-13 18-4.5-19.5-15 7.5z" fill="url(#paint1_linear_2474_252378)"/>
+  <path d="m67.003 15.5h68.995l-2e-3 0.8543c-2e-3 1.5049-5e-3 3.6632-8e-3 6.2766-7e-3 5.2267-0.015 12.274-0.02 19.555-0.011 14.556-0.011 30.069 0.032 33.831 0.046 3.9731 1.225 8.7675 2.346 12.479 0.357 1.1792 0.712 2.2636 1.031 3.1964l-10.268-4.5635-0.976-0.4341-0.73 0.7813-12.223 13.096-4.244-14.008-0.827-2.7275-1.78 2.2255-5.267 6.5829-13.055-6.0254-0.7231 1.0013-11.065 15.321-3.757-16.28-0.4284-1.8563-12.574 6.2868c0.5039-1.009 1.0566-2.1442 1.611-3.3352 0.9404-2.0204 1.8953-4.222 2.6248-6.2504 0.7123-1.9804 1.2726-3.9616 1.3044-5.4761 0.0529-2.5216 0.0528-18.048 0.0397-32.908-0.0066-7.4379-0.0164-14.72-0.0246-20.142-0.0041-2.711-0.0078-4.9572-0.0105-6.5257l-0.0017-0.9564z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <rect transform="rotate(-90 51.5 198.5)" x="51.5" y="198.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect transform="rotate(-90 51.5 12.5)" x="51.5" y="12.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_2474_252378" x1="63.5" x2="135.5" y1="167.52" y2="167.97" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2474_252378" x1="65.5" x2="137.5" y1="70.24" y2="70.67" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/widget_bundles/scada_fluid_system.json b/application/src/main/data/json/system/widget_bundles/scada_fluid_system.json
index bcb92dce1d..8659427bea 100644
--- a/application/src/main/data/json/system/widget_bundles/scada_fluid_system.json
+++ b/application/src/main/data/json/system/widget_bundles/scada_fluid_system.json
@@ -11,8 +11,10 @@
   "widgetTypeFqns": [
     "horizontal_pipe",
     "long_horizontal_pipe",
+    "extra_long_horizontal_pipe",
     "vertical_pipe",
     "long_vertical_pipe",
+    "extra_long_vertical_pipe",
     "left_bottom_elbow_pipe",
     "bottom_right_elbow_pipe",
     "top_right_elbow_pipe",
@@ -28,6 +30,10 @@
     "right_drain_pipe",
     "short_left_drain_pipe",
     "short_right_drain_pipe",
+    "horizontal_broken_pipe",
+    "vertical_broken_pipe",
+    "long_horizontal_broken_pipe",
+    "long_vertical_broken_pipe",
     "top_flow_meter",
     "right_flow_meter",
     "bottom_flow_meter",
@@ -58,6 +64,7 @@
     "stand_vertical_tank",
     "cylindrical_tank",
     "stand_cylindrical_tank",
+    "small_cylindrical_tank",
     "vertical_short_tank",
     "stand_vertical_short_tank",
     "large_cylindrical_tank",
@@ -68,6 +75,8 @@
     "stand_horizontal_tank",
     "spherical_tank",
     "small_spherical_tank",
+    "conical_tank",
+    "large_conical_tank",
     "elevated_tank",
     "pool"
   ]
diff --git a/application/src/main/data/json/system/widget_types/asset_admin_table.json b/application/src/main/data/json/system/widget_types/asset_admin_table.json
index cd373b9635..10a96e0043 100644
--- a/application/src/main/data/json/system/widget_types/asset_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/asset_admin_table.json
@@ -18,7 +18,7 @@
     "dataKeySettingsDirective": "tb-entities-table-key-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-entities-table-basic-config",
-    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Asset admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Asset admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6985800247727296,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.10073938422359707,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add asset\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addAssetForm=\\\"ngForm\\\" [formGroup]=\\\"addAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add asset</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"addAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addAssetForm.invalid || !addAssetForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddAssetDialog();\\n\\nfunction openAddAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, AddAssetDialogController).subscribe();\\n}\\n\\nfunction AddAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addAssetFormGroup.markAsPristine();\\n        let asset = {\\n            name: vm.addAssetFormGroup.get('assetName').value,\\n            type: vm.addAssetFormGroup.get('assetType').value,\\n            label: vm.addAssetFormGroup.get('assetLabel').value\\n        };\\n        assetService.saveAsset(asset).subscribe(\\n            function (asset) {\\n                saveAttributes(asset.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit asset\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editAssetForm=\\\"ngForm\\\" [formGroup]=\\\"editAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit asset</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"editAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            type=\\\"submit\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editAssetForm.invalid || !editAssetForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditAssetDialog();\\n\\nfunction openEditAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, EditAssetDialogController).subscribe();\\n}\\n\\nfunction EditAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.asset = null;\\n    vm.attributes = {};\\n    \\n    vm.editAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editAssetFormGroup.markAsPristine();\\n        vm.asset.name = vm.editAssetFormGroup.get('assetName').value,\\n        vm.asset.type = vm.editAssetFormGroup.get('assetType').value,\\n        vm.asset.label = vm.editAssetFormGroup.get('assetLabel').value\\n        assetService.saveAsset(vm.asset).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        assetService.getAsset(entityId.id).subscribe(\\n            function (asset) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.asset = asset;\\n                        vm.editAssetFormGroup.patchValue(\\n                            {\\n                                assetName: vm.asset.name,\\n                                assetType: vm.asset.type,\\n                                assetLabel: vm.asset.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete asset\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\n\\nopenDeleteAssetDialog();\\n\\nfunction openDeleteAssetDialog() {\\n    let title = \\\"Are you sure you want to delete the asset \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the asset and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteAsset();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteAsset() {\\n    assetService.deleteAsset(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\",\"titleFont\":null,\"titleColor\":null}"
+    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Asset admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Asset admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6985800247727296,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.10073938422359707,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add asset\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addAssetForm=\\\"ngForm\\\" [formGroup]=\\\"addAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Add asset</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Asset name</mat-label>\\n        <input matInput formControlName=\\\"assetName\\\" required>\\n        <mat-error *ngIf=\\\"addAssetFormGroup.get('assetName').hasError('required')\\\">\\n          Asset name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"assetType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'ASSET'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"assetLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addAssetForm.invalid || !addAssetForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddAssetDialog();\\n\\nfunction openAddAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, AddAssetDialogController).subscribe();\\n}\\n\\nfunction AddAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addAssetFormGroup.markAsPristine();\\n        let asset = {\\n            name: vm.addAssetFormGroup.get('assetName').value,\\n            type: vm.addAssetFormGroup.get('assetType').value,\\n            label: vm.addAssetFormGroup.get('assetLabel').value\\n        };\\n        assetService.saveAsset(asset).subscribe(\\n            function (asset) {\\n                saveAttributes(asset.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit asset\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editAssetForm=\\\"ngForm\\\" [formGroup]=\\\"editAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Edit asset</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding\\\" class=\\\"flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Asset name</mat-label>\\n        <input matInput formControlName=\\\"assetName\\\" required>\\n        <mat-error *ngIf=\\\"editAssetFormGroup.get('assetName').hasError('required')\\\">\\n          Asset name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"assetType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'ASSET'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"assetLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            type=\\\"submit\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editAssetForm.invalid || !editAssetForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditAssetDialog();\\n\\nfunction openEditAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, EditAssetDialogController).subscribe();\\n}\\n\\nfunction EditAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.asset = null;\\n    vm.attributes = {};\\n    \\n    vm.editAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editAssetFormGroup.markAsPristine();\\n        vm.asset.name = vm.editAssetFormGroup.get('assetName').value,\\n        vm.asset.type = vm.editAssetFormGroup.get('assetType').value,\\n        vm.asset.label = vm.editAssetFormGroup.get('assetLabel').value\\n        assetService.saveAsset(vm.asset).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        assetService.getAsset(entityId.id).subscribe(\\n            function (asset) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.asset = asset;\\n                        vm.editAssetFormGroup.patchValue(\\n                            {\\n                                assetName: vm.asset.name,\\n                                assetType: vm.asset.type,\\n                                assetLabel: vm.asset.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete asset\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\n\\nopenDeleteAssetDialog();\\n\\nfunction openDeleteAssetDialog() {\\n    let title = \\\"Are you sure you want to delete the asset \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the asset and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteAsset();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteAsset() {\\n    assetService.deleteAsset(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\",\"titleFont\":null,\"titleColor\":null}"
   },
   "externalId": null,
   "tags": [
diff --git a/application/src/main/data/json/system/widget_types/basic_gpio_control.json b/application/src/main/data/json/system/widget_types/basic_gpio_control.json
index df54377dc5..2471997b46 100644
--- a/application/src/main/data/json/system/widget_types/basic_gpio_control.json
+++ b/application/src/main/data/json/system/widget_types/basic_gpio_control.json
@@ -9,8 +9,8 @@
     "sizeX": 4,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"gpio-row flex flex-row\" *ngFor=\"let row of rows\"\n           [style.height.px]=\"prefferedRowHeight\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row items-center\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"switch-panel flex flex-row items-center justify-start\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.height.px]=\"prefferedRowHeight\"\n                 [style.background-color]=\"switchPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n          <mat-slide-toggle\n              [disabled]=\"!rpcEnabled || executingRpcRequest\"\n              [checked]=\"cell.enabled\"\n              (change)=\"gpioToggleChange($event, cell)\"\n              (click)=\"gpioClick($event, cell)\">\n          </mat-slide-toggle>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"switch-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"switchPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n  <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [class.!hidden]=\"!rpcErrorText\">{{rpcErrorText}}</span>\n  <mat-progress-bar [class.!hidden]=\"!executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/basic_gpio_panel.json b/application/src/main/data/json/system/widget_types/basic_gpio_panel.json
index 5a46e216a1..568b6efe75 100644
--- a/application/src/main/data/json/system/widget_types/basic_gpio_panel.json
+++ b/application/src/main/data/json/system/widget_types/basic_gpio_panel.json
@@ -9,8 +9,8 @@
     "sizeX": 5,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n    <section fxLayout=\"row\" *ngFor=\"let row of rows\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"led-panel\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{backgroundColor: ledPanelBackgroundColor}\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"led-panel\"\n                      [ngStyle]=\"{height: prefferedRowHeight+'px', backgroundColor: ledPanelBackgroundColor}\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n</div>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"flex flex-row\" *ngFor=\"let row of rows\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"led-panel flex flex-row\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.background-color]=\"ledPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"led-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"ledPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n</div>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-panel-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n    var i, gpio;\n    \n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    \n    scope.gpioList = [];\n    scope.gpioByPin = {};\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false,\n                colorOn: tinycolor(gpio.color).lighten(20).toHexString(),\n                colorOff: tinycolor(gpio.color).darken().toHexString()\n            }\n        );\n        scope.gpioByPin[gpio.pin] = scope.gpioList[scope.gpioList.length-1];\n    }\n\n    scope.ledPanelBackgroundColor = settings.ledPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }    \n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    var changed = false;\n    for (var d = 0; d < self.ctx.data.length; d++) {\n        var cellData = self.ctx.data[d];\n        var dataKey = cellData.dataKey;\n        var gpio = self.ctx.$scope.gpioByPin[dataKey.label];\n        if (gpio) {\n            var enabled = false;\n            if (cellData.data.length > 0) {\n                var tvPair = cellData.data[cellData.data.length - 1];\n                enabled = (tvPair[1] === true || tvPair[1] === 'true');\n            }\n            if (gpio.enabled != enabled) {\n                changed = true;\n                gpio.enabled = enabled;\n            }\n        }\n    }\n    if (changed) {\n        self.ctx.detectChanges();\n    }    \n}\n\nself.onResize = function() {\n    var rowCount = self.ctx.$scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    self.ctx.$scope.prefferedRowHeight = prefferedRowHeight;\n    \n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n   \n    cssParser.createStyleElement(namespace, css); \n   \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/device_admin_table.json b/application/src/main/data/json/system/widget_types/device_admin_table.json
index 014734df54..96fd7b8919 100644
--- a/application/src/main/data/json/system/widget_types/device_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/device_admin_table.json
@@ -18,7 +18,7 @@
     "dataKeySettingsDirective": "tb-entities-table-key-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-entities-table-basic-config",
-    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Device admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Device admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.8332260553092266,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.08583217494773887,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add device\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"addDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add device</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"addDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addDeviceForm.invalid || !addDeviceForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddDeviceDialog();\\n\\nfunction openAddDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();\\n}\\n\\nfunction AddDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addDeviceFormGroup.markAsPristine();\\n        let device = {\\n            name: vm.addDeviceFormGroup.get('deviceName').value,\\n            type: vm.addDeviceFormGroup.get('deviceType').value,\\n            label: vm.addDeviceFormGroup.get('deviceLabel').value\\n        };\\n        deviceService.saveDevice(device).subscribe(\\n            function (device) {\\n                saveAttributes(device.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit device\",\"icon\":\"edit\",\"useShowWidgetActionFunction\":null,\"showWidgetActionFunction\":\"return true;\",\"type\":\"customPretty\",\"customHtml\":\"<form #editDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"editDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit device</h2>\\n    <span fxFlex></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"editDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editDeviceForm.invalid || !editDeviceForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditDeviceDialog();\\n\\nfunction openEditDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();\\n}\\n\\nfunction EditDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.device = null;\\n    vm.attributes = {};\\n    \\n    vm.editDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editDeviceFormGroup.markAsPristine();\\n        if (vm.editDeviceFormGroup.get('deviceType').value !== vm.device.type) {\\n            delete vm.device.deviceProfileId;\\n        }\\n        vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,\\n        vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,\\n        vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value\\n        deviceService.saveDevice(vm.device).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        deviceService.getDevice(entityId.id).subscribe(\\n            function (device) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.device = device;\\n                        vm.editDeviceFormGroup.patchValue(\\n                            {\\n                                deviceName: vm.device.name,\\n                                deviceType: vm.device.type,\\n                                deviceLabel: vm.device.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"openInSeparateDialog\":false,\"openInPopover\":false,\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete device\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\n\\nopenDeleteDeviceDialog();\\n\\nfunction openDeleteDeviceDialog() {\\n    let title = \\\"Are you sure you want to delete the device \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the device and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteDevice();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteDevice() {\\n    deviceService.deleteDevice(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\"}"
+    "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"Device admin table\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"showCellActionsMenu\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":false,\"displayEntityLabel\":false,\"displayEntityType\":false,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Device admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity name\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.8332260553092266,\"funcBody\":\"return 'Simulated';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Entity type\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.08583217494773887,\"funcBody\":\"return 'Device';\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add device\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"addDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Add device</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Device name</mat-label>\\n        <input matInput formControlName=\\\"deviceName\\\" required>\\n        <mat-error *ngIf=\\\"addDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n          Device name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"deviceType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'DEVICE'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"deviceLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addDeviceForm.invalid || !addDeviceForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddDeviceDialog();\\n\\nfunction openAddDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();\\n}\\n\\nfunction AddDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addDeviceFormGroup.markAsPristine();\\n        let device = {\\n            name: vm.addDeviceFormGroup.get('deviceName').value,\\n            type: vm.addDeviceFormGroup.get('deviceType').value,\\n            label: vm.addDeviceFormGroup.get('deviceLabel').value\\n        };\\n        deviceService.saveDevice(device).subscribe(\\n            function (device) {\\n                saveAttributes(device.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit device\",\"icon\":\"edit\",\"useShowWidgetActionFunction\":null,\"showWidgetActionFunction\":\"return true;\",\"type\":\"customPretty\",\"customHtml\":\"<form #editDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"editDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar class=\\\"flex flex-row\\\" color=\\\"primary\\\">\\n    <h2>Edit device</h2>\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n    <div class=\\\"mat-padding flex flex-col\\\">\\n      <mat-form-field class=\\\"mat-block\\\">\\n        <mat-label>Device name</mat-label>\\n        <input matInput formControlName=\\\"deviceName\\\" required>\\n        <mat-error *ngIf=\\\"editDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n          Device name is required.\\n        </mat-error>\\n      </mat-form-field>\\n      <div class=\\\"flex flex-row gap-2\\\">\\n        <tb-entity-subtype-autocomplete\\n            class=\\\"max-w-50% flex-full\\\"\\n            formControlName=\\\"deviceType\\\"\\n            [required]=\\\"true\\\"\\n            [entityType]=\\\"'DEVICE'\\\"\\n        ></tb-entity-subtype-autocomplete>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Label</mat-label>\\n          <input matInput formControlName=\\\"deviceLabel\\\">\\n        </mat-form-field>\\n      </div>\\n      <div formGroupName=\\\"attributes\\\" class=\\\"flex flex-row gap-2\\\">\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Latitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n        </mat-form-field>\\n        <mat-form-field class=\\\"mat-block max-w-50% flex-full\\\">\\n          <mat-label>Longitude</mat-label>\\n          <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n        </mat-form-field>\\n      </div>\\n    </div>\\n  </div>\\n  <div mat-dialog-actions class=\\\"flex flex-row\\\">\\n    <span class=\\\"flex-1\\\"></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editDeviceForm.invalid || !editDeviceForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditDeviceDialog();\\n\\nfunction openEditDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();\\n}\\n\\nfunction EditDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.device = null;\\n    vm.attributes = {};\\n    \\n    vm.editDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editDeviceFormGroup.markAsPristine();\\n        if (vm.editDeviceFormGroup.get('deviceType').value !== vm.device.type) {\\n            delete vm.device.deviceProfileId;\\n        }\\n        vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,\\n        vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,\\n        vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value\\n        deviceService.saveDevice(vm.device).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        deviceService.getDevice(entityId.id).subscribe(\\n            function (device) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.device = device;\\n                        vm.editDeviceFormGroup.patchValue(\\n                            {\\n                                deviceName: vm.device.name,\\n                                deviceType: vm.device.type,\\n                                deviceLabel: vm.device.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"openInSeparateDialog\":false,\"openInPopover\":false,\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete device\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\n\\nopenDeleteDeviceDialog();\\n\\nfunction openDeleteDeviceDialog() {\\n    let title = \\\"Are you sure you want to delete the device \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the device and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteDevice();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteDevice() {\\n    deviceService.deleteDevice(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]},\"configMode\":\"basic\"}"
   },
   "tags": [
     "provisioning",
diff --git a/application/src/main/data/json/system/widget_types/device_claiming_widget.json b/application/src/main/data/json/system/widget_types/device_claiming_widget.json
index 4ac8654ab4..02b3d1aa53 100644
--- a/application/src/main/data/json/system/widget_types/device_claiming_widget.json
+++ b/application/src/main/data/json/system/widget_types/device_claiming_widget.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 4.5,
     "resources": [],
-    "templateHtml": "<form *ngIf=\"claimDeviceFormGroup\" #claimDeviceForm=\"ngForm\" [formGroup]=\"claimDeviceFormGroup\"\n      tb-toast toastTarget=\"{{ toastTargetId }}\"\n      class=\"claim-form\" (ngSubmit)=\"claim(claimDeviceForm)\">\n    <fieldset [disabled]=\"(isLoading$ | async) || loading\">\n        <mat-form-field class=\"mat-block\">\n            <mat-label *ngIf=\"showLabel\">{{deviceLabel}}</mat-label>\n            <input matInput formControlName=\"deviceName\" required>\n            <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceName').hasError('required')\">\n                {{requiredErrorDevice}}\n            </mat-error>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"secretKeyField\" class=\"mat-block\">\n            <mat-label *ngIf=\"showLabel\">{{secretKeyLabel}}</mat-label>\n            <input matInput formControlName=\"deviceSecret\" required>\n            <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceSecret').hasError('required')\">\n                {{requiredErrorSecretKey}}\n            </mat-error>\n        </mat-form-field>\n    </fieldset>\n    <div class=\"mat-block\" fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\" [disabled]=\"(isLoading$ | async) || claimDeviceForm.invalid || !claimDeviceForm.dirty\">\n            {{labelClaimButon}}\n        </button>\n    </div>\n</form>\n",
+    "templateHtml": "<form *ngIf=\"claimDeviceFormGroup\" #claimDeviceForm=\"ngForm\" [formGroup]=\"claimDeviceFormGroup\"\n      tb-toast toastTarget=\"{{ toastTargetId }}\"\n      class=\"claim-form\" (ngSubmit)=\"claim(claimDeviceForm)\">\n  <fieldset [disabled]=\"(isLoading$ | async) || loading\">\n    <mat-form-field class=\"mat-block\">\n      <mat-label *ngIf=\"showLabel\">{{deviceLabel}}</mat-label>\n      <input matInput formControlName=\"deviceName\" required>\n      <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceName').hasError('required')\">\n        {{requiredErrorDevice}}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field *ngIf=\"secretKeyField\" class=\"mat-block\">\n      <mat-label *ngIf=\"showLabel\">{{secretKeyLabel}}</mat-label>\n      <input matInput formControlName=\"deviceSecret\" required>\n      <mat-error *ngIf=\"claimDeviceFormGroup.get('deviceSecret').hasError('required')\">\n        {{requiredErrorSecretKey}}\n      </mat-error>\n    </mat-form-field>\n  </fieldset>\n  <div class=\"mat-block flex flex-row items-center justify-end\">\n    <button mat-button mat-raised-button color=\"primary\"\n            type=\"submit\" [disabled]=\"(isLoading$ | async) || claimDeviceForm.invalid || !claimDeviceForm.dirty\">\n      {{labelClaimButon}}\n    </button>\n  </div>\n</form>\n",
     "templateCss": ".claim-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n",
     "controllerScript": "let $scope;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n}\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    let $injector = $scope.$injector;\n    let utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    let $translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    let deviceService = $scope.$injector.get(self.ctx.servicesMap.get('deviceService'));\n    let settings = self.ctx.settings || {};\n    \n    $scope.toastTargetId = 'device-claiming-widget' + utils.guid();\n    $scope.secretKeyField = settings.deviceSecret;\n    $scope.showLabel = settings.showLabel;\n\n    let titleTemplate = \"\";\n    let successfulClaim = utils.customTranslation(settings.successfulClaimDevice, settings.successfulClaimDevice) || $translate.instant('widgets.input-widgets.claim-successful');\n    let failedClaimDevice = utils.customTranslation(settings.failedClaimDevice, settings.failedClaimDevice) || $translate.instant('widgets.input-widgets.claim-failed');\n    let deviceNotFound = utils.customTranslation(settings.deviceNotFound, settings.deviceNotFound) || $translate.instant('widgets.input-widgets.claim-not-found');\n    \n    if (settings.widgetTitle && settings.widgetTitle.length) {\n        titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n    } else {\n        titleTemplate = self.ctx.widgetConfig.title;\n    }\n    self.ctx.widgetTitle = titleTemplate;\n    \n    $scope.deviceLabel = utils.customTranslation(settings.deviceLabel, settings.deviceLabel) || $translate.instant('widgets.input-widgets.device-name');\n    $scope.requiredErrorDevice= utils.customTranslation(settings.requiredErrorDevice, settings.requiredErrorDevice) || $translate.instant('widgets.input-widgets.device-name-required');\n    \n    $scope.secretKeyLabel = utils.customTranslation(settings.secretKeyLabel, settings.secretKeyLabel) || $translate.instant('widgets.input-widgets.secret-key');\n    $scope.requiredErrorSecretKey= utils.customTranslation(settings.requiredErrorSecretKey, settings.requiredErrorSecretKey) || $translate.instant('widgets.input-widgets.secret-key-required');\n    \n    $scope.labelClaimButon = utils.customTranslation(settings.labelClaimButon, settings.labelClaimButon) || $translate.instant('widgets.input-widgets.claim-device');\n    \n    $scope.claimDeviceFormGroup = $scope.fb.group(\n        {deviceName: ['', [$scope.validators.required]]}\n    );\n    if ($scope.secretKeyField) {\n        $scope.claimDeviceFormGroup.addControl('deviceSecret', $scope.fb.control('', [$scope.validators.required]));\n    }\n    \n    $scope.claim = function(claimDeviceForm) {\n        $scope.loading = true;\n\n        let deviceName = $scope.claimDeviceFormGroup.get('deviceName').value;\n        let claimRequest = {};\n        if ($scope.secretKeyField) {\n            claimRequest.secretKey = $scope.claimDeviceFormGroup.get('deviceSecret').value;\n        }\n        deviceService.claimDevice(deviceName, claimRequest, { ignoreErrors: true }).subscribe(\n            function (data) {\n                successClaim(claimDeviceForm);\n                self.ctx.detectChanges();\n            },\n            function (error) {\n                $scope.loading = false;\n                if(error.status == 404) {\n                    $scope.showErrorToast(deviceNotFound, 'bottom', 'left', $scope.toastTargetId);\n                } else {\n                    let errorMessage = failedClaimDevice;\n                    if (error.status !== 400) {\n                        if (error.error && error.error.message) {\n                            errorMessage = error.error.message;\n                        }\n                    }\n                    $scope.showErrorToast(errorMessage, 'bottom', 'left', $scope.toastTargetId);\n                }    \n                self.ctx.detectChanges();\n            }\n        );\n    }\n\n    function successClaim(claimDeviceForm) {\n        let deviceObj = {\n            deviceName: ''\n        };\n        if ($scope.secretKeyField) {\n            deviceObj.deviceSecret = '';\n        }    \n        claimDeviceForm.resetForm();    \n        $scope.claimDeviceFormGroup.reset(deviceObj);\n        $scope.loading = false;\n        $scope.showSuccessToast(successfulClaim, 2000, 'bottom', 'left', $scope.toastTargetId);\n        self.ctx.updateAliases();\n    }\n    \n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/gateway_configuration.json b/application/src/main/data/json/system/widget_types/gateway_configuration.json
index 985426ef94..ba7b5822cd 100644
--- a/application/src/main/data/json/system/widget_types/gateway_configuration.json
+++ b/application/src/main/data/json/system/widget_types/gateway_configuration.json
@@ -8,7 +8,15 @@
     "type": "static",
     "sizeX": 8,
     "sizeY": 6.5,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-form\n    [ctx]=\"ctx\">\n</tb-gateway-form>\n",
     "templateCss": "",
     "controllerScript": "self.onInit = function() {\n}\n",
diff --git a/application/src/main/data/json/system/widget_types/gateway_configuration__single_device_.json b/application/src/main/data/json/system/widget_types/gateway_configuration__single_device_.json
index a7b3291666..c666109aa3 100644
--- a/application/src/main/data/json/system/widget_types/gateway_configuration__single_device_.json
+++ b/application/src/main/data/json/system/widget_types/gateway_configuration__single_device_.json
@@ -8,7 +8,15 @@
     "type": "latest",
     "sizeX": 7.5,
     "sizeY": 9,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-form\n    [ctx]=\"ctx\"\n    [isStateForm]=\"true\">\n</tb-gateway-form>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
     "controllerScript": "self.onInit = function() {\n}\n\n\nself.onDestroy = function() {\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\t\t\t\n        dataKeysOptional: true,\n        singleEntity: true\n    };\n}\n\n",
diff --git a/application/src/main/data/json/system/widget_types/gateway_connectors.json b/application/src/main/data/json/system/widget_types/gateway_connectors.json
index 43f95194b8..649ec8e884 100644
--- a/application/src/main/data/json/system/widget_types/gateway_connectors.json
+++ b/application/src/main/data/json/system/widget_types/gateway_connectors.json
@@ -8,7 +8,15 @@
     "type": "latest",
     "sizeX": 11,
     "sizeY": 8,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-connector [device]=\"entityId\" *ngIf=\"entityId\" [ctx]=\"ctx\"></tb-gateway-connector>",
     "templateCss": "",
     "controllerScript": "self.onInit = function() {\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        self.ctx.$scope.entityId = self.ctx.datasources[0].entity.id;\n    }\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.gatewayConnectors?.onDataUpdated();\n};\n\nself.typeParameters  = function() {\n    return {\n        dataKeysOptional: true,\n        singleEntity: true\n    };\n}",
diff --git a/application/src/main/data/json/system/widget_types/gateway_custom_statistics.json b/application/src/main/data/json/system/widget_types/gateway_custom_statistics.json
index 7090490ea6..8726b3798e 100644
--- a/application/src/main/data/json/system/widget_types/gateway_custom_statistics.json
+++ b/application/src/main/data/json/system/widget_types/gateway_custom_statistics.json
@@ -8,7 +8,15 @@
     "type": "timeseries",
     "sizeX": 8,
     "sizeY": 5,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-statistics [ctx]=ctx></tb-gateway-statistics>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
     "controllerScript": "self.onInit = function() {   \n};\n\nself.onDataUpdated = function() {\n};\n\nself.onLatestDataUpdated = function() {\n};\n\nself.onResize = function() {\n};\n\nself.onEditModeChanged = function() {\n};\n\nself.onDestroy = function() {\n};\n\nself.typeParameters = function() {\n    return {\n        hasAdditionalLatestDataKeys: false,\n        dataKeysOptional: true\n    };\n}\n",
diff --git a/application/src/main/data/json/system/widget_types/gateway_general_chart_statistics.json b/application/src/main/data/json/system/widget_types/gateway_general_chart_statistics.json
index 7e1974d5b7..a00e27228e 100644
--- a/application/src/main/data/json/system/widget_types/gateway_general_chart_statistics.json
+++ b/application/src/main/data/json/system/widget_types/gateway_general_chart_statistics.json
@@ -8,7 +8,15 @@
     "type": "timeseries",
     "sizeX": 8,
     "sizeY": 5,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-statistics [ctx]=ctx [general]='true'></tb-gateway-statistics>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
     "controllerScript": "self.onInit = function() {   \n};\n\nself.onDataUpdated = function() {\n};\n\nself.onLatestDataUpdated = function() {\n};\n\nself.onResize = function() {\n};\n\nself.onEditModeChanged = function() {\n};\n\nself.onDestroy = function() {\n};\n\nself.typeParameters = function() {\n    return {\n        hasAdditionalLatestDataKeys: false\n    };\n}\n",
diff --git a/application/src/main/data/json/system/widget_types/gateway_general_configuration.json b/application/src/main/data/json/system/widget_types/gateway_general_configuration.json
index e2129c0271..9c7ca54d07 100644
--- a/application/src/main/data/json/system/widget_types/gateway_general_configuration.json
+++ b/application/src/main/data/json/system/widget_types/gateway_general_configuration.json
@@ -8,7 +8,15 @@
     "type": "latest",
     "sizeX": 11,
     "sizeY": 8,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-configuration [device]=\"entityId\" *ngIf=\"entityId\"></tb-gateway-configuration>",
     "templateCss": "",
     "controllerScript": "self.onInit = function() {\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        self.ctx.$scope.entityId = self.ctx.datasources[0].entity.id;\n    }\n};\n\nself.typeParameters  = function() {\n    return {\n        dataKeysOptional: true,\n        singleEntity: true\n    };\n}",
diff --git a/application/src/main/data/json/system/widget_types/gateway_logs.json b/application/src/main/data/json/system/widget_types/gateway_logs.json
index 45b380e544..2c2ae913d1 100644
--- a/application/src/main/data/json/system/widget_types/gateway_logs.json
+++ b/application/src/main/data/json/system/widget_types/gateway_logs.json
@@ -8,7 +8,15 @@
     "type": "timeseries",
     "sizeX": 7.5,
     "sizeY": 3,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-logs [ctx]=\"ctx\">\n    \n</tb-gateway-logs>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
     "controllerScript": "self.onInit = function() {\n};\n\nself.typeParameters  = function() {\n    return {\n        dataKeysOptional: true,\n        singleEntity: true\n    };\n}",
diff --git a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json
index b2e03f19a7..f2b95881d5 100644
--- a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json
+++ b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_control.json
@@ -9,8 +9,8 @@
     "sizeX": 6,
     "sizeY": 10.5,
     "resources": [],
-    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"gpio-row flex flex-row\" *ngFor=\"let row of rows\"\n           [style.height.px]=\"prefferedRowHeight\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row items-center\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"switch-panel flex flex-row items-center justify-start\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.height.px]=\"prefferedRowHeight\"\n                 [style.background-color]=\"switchPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n          <mat-slide-toggle\n              [disabled]=\"!rpcEnabled || executingRpcRequest\"\n              [checked]=\"cell.enabled\"\n              (change)=\"gpioToggleChange($event, cell)\"\n              (click)=\"gpioClick($event, cell)\">\n          </mat-slide-toggle>\n          <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"switch-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"switchPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n  <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [class.!hidden]=\"!rpcErrorText\">{{rpcErrorText}}</span>\n  <mat-progress-bar [class.!hidden]=\"!executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json
index 1bbe2482f2..6595ec473b 100644
--- a/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json
+++ b/application/src/main/data/json/system/widget_types/raspberry_pi_gpio_panel.json
@@ -9,8 +9,8 @@
     "sizeX": 7,
     "sizeY": 10.5,
     "resources": [],
-    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n    <section fxLayout=\"row\" *ngFor=\"let row of rows\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"led-panel\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{backgroundColor: ledPanelBackgroundColor}\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"led-panel\"\n                      [ngStyle]=\"{height: prefferedRowHeight+'px', backgroundColor: ledPanelBackgroundColor}\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n</div>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateHtml": "<div class=\"gpio-panel\" style=\"height: 100%;\">\n  <section class=\"flex flex-row\" *ngFor=\"let row of rows\">\n    <section class=\"flex flex-1 flex-row\" *ngFor=\"let cell of row; let $index = index\">\n      <section class=\"flex flex-1 flex-row\" [class.justify-end]=\"$index===0\" [class.justify-start]=\"$index!==0\" *ngIf=\"cell\">\n        <span class=\"gpio-left-label\" [class.!hidden]=\"$index!==0\">{{ cell.label }}</span>\n        <section class=\"led-panel flex flex-row\" [class.col-0]=\"$index===0\" [class.col-1]=\"$index!==0\"\n                 [style.background-color]=\"ledPanelBackgroundColor\">\n          <span class=\"pin\" [class.!hidden]=\"$index!==0\">{{cell.pin}}</span>\n          <span class=\"led-container\">\n                        <tb-led-light [size]=\"prefferedRowHeight\"\n                                      [colorOn]=\"cell.colorOn\"\n                                      [colorOff]=\"cell.colorOff\"\n                                      [offOpacity]=\"'0.9'\"\n                                      [enabled]=\"cell.enabled\">\n                        </tb-led-light>\n                    </span>\n          <span class=\"pin\" [class.!hidden]=\"$index!==1\">{{cell.pin}}</span>\n        </section>\n        <span class=\"gpio-right-label\" [class.!hidden]=\"$index!==1\">{{ cell.label }}</span>\n      </section>\n      <section class=\"flex flex-1 flex-row\" *ngIf=\"!cell\">\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==0\"></span>\n        <span class=\"led-panel\"\n              [style.height.px]=\"prefferedRowHeight\"\n              [style.background-color]=\"ledPanelBackgroundColor\"></span>\n        <span class=\"flex-1\" [class.!hidden]=\"$index!==1\"></span>\n      </section>\n    </section>\n  </section>\n</div>",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.gpio-panel tb-led-light > div {\n    margin: auto;\n}\n\n.led-panel {\n    margin: 0;\n    width: 66px;\n    min-width: 66px;\n}\n\n.led-container {\n    width: 48px;\n    min-width: 48px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.led-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.led-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-panel-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n    var i, gpio;\n    \n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    \n    scope.gpioList = [];\n    scope.gpioByPin = {};\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false,\n                colorOn: tinycolor(gpio.color).lighten(20).toHexString(),\n                colorOff: tinycolor(gpio.color).darken().toHexString()\n            }\n        );\n        scope.gpioByPin[gpio.pin] = scope.gpioList[scope.gpioList.length-1];\n    }\n\n    scope.ledPanelBackgroundColor = settings.ledPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }    \n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    var changed = false;\n    for (var d = 0; d < self.ctx.data.length; d++) {\n        var cellData = self.ctx.data[d];\n        var dataKey = cellData.dataKey;\n        var gpio = self.ctx.$scope.gpioByPin[dataKey.label];\n        if (gpio) {\n            var enabled = false;\n            if (cellData.data.length > 0) {\n                var tvPair = cellData.data[cellData.data.length - 1];\n                enabled = (tvPair[1] === true || tvPair[1] === 'true');\n            }\n            if (gpio.enabled != enabled) {\n                changed = true;\n                gpio.enabled = enabled;\n            }\n        }\n    }\n    if (changed) {\n        self.ctx.detectChanges();\n    }    \n}\n\nself.onResize = function() {\n    var rowCount = self.ctx.$scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    self.ctx.$scope.prefferedRowHeight = prefferedRowHeight;\n    \n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n   \n    cssParser.createStyleElement(namespace, css); \n   \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/rpc_button.json b/application/src/main/data/json/system/widget_types/rpc_button.json
index a5edbcc5a3..cd9b5d567a 100644
--- a/application/src/main/data/json/system/widget_types/rpc_button.json
+++ b/application/src/main/data/json/system/widget_types/rpc_button.json
@@ -9,7 +9,7 @@
     "sizeX": 4,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendCommand()\"\n                    [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
+    "templateHtml": "<div class=\"tb-rpc-button flex flex-col\">\n  <div class=\"title-container flex max-w-20% flex-full flex-row items-center justify-center\"\n       [class.!hidden]=\"!showTitle\">\n    <span class=\"button-title\">{{title}}</span>\n  </div>\n  <div class=\"button-container flex flex-full flex-col items-center justify-center\"\n       [class]=\"{\n          'max-w-80%': showTitle,\n          'max-w-100%': !showTitle\n       }\"\n       [style.padding-top]=\"showTitle ? '5px': '10px'\">\n    <div>\n      <button mat-button (click)=\"sendCommand()\"\n              [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n              [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n              [style]=\"customStyle\">\n        {{buttonLable}}\n      </button>\n    </div>\n  </div>\n  <div class=\"error-container flex flex-row items-center justify-center\" [style.background]=\"error?.length ? 'rgba(255,255,255,0.25)' : 'none'\">\n    <span class=\"button-error\">{{ error }}</span>\n  </div>\n</div>",
     "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-mdc-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
     "controllerScript": "var requestPersistent = false;\nvar persistentPollingInterval = 5000;\n\nself.onInit = function() {\n    if (self.ctx.settings.requestPersistent) {\n        requestPersistent = self.ctx.settings.requestPersistent;\n    }\n    if (self.ctx.settings.persistentPollingInterval) {\n        persistentPollingInterval = self.ctx.settings.persistentPollingInterval;\n    }\n    \n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges();\n    });\n};\n\nfunction init() {\n    let rpcEnabled = self.ctx.defaultSubscription.rpcEnabled;\n\n    self.ctx.$scope.buttonLable = self.ctx.settings.buttonText;\n    self.ctx.$scope.showTitle = self.ctx.settings.title &&\n        self.ctx.settings.title.length ? true : false;\n    self.ctx.$scope.title = self.ctx.settings.title;\n    self.ctx.$scope.styleButton = self.ctx.settings.styleButton;\n\n    if (self.ctx.settings.styleButton.isPrimary ===\n        false) {\n        self.ctx.$scope.customStyle = {\n            'background-color': self.ctx.$scope.styleButton.bgColor,\n            'color': self.ctx.$scope.styleButton.textColor\n        };\n    }\n\n    if (!rpcEnabled) {\n        self.ctx.$scope.error =\n            'Target device is not set!';\n    }\n\n    self.ctx.$scope.sendCommand = function() {\n        var rpcMethod = self.ctx.settings.methodName;\n        var rpcParams = self.ctx.settings.methodParams;\n        if (rpcParams.length) {\n            try {\n                rpcParams = JSON.parse(rpcParams);\n            } catch (e) {}\n        }\n        var timeout = self.ctx.settings.requestTimeout;\n        var oneWayElseTwoWay = self.ctx.settings.oneWayElseTwoWay ?\n            true : false;\n\n        var commandPromise;\n        if (oneWayElseTwoWay) {\n            commandPromise = self.ctx.controlApi.sendOneWayCommand(\n                rpcMethod, rpcParams, timeout, requestPersistent, persistentPollingInterval);\n        } else {\n            commandPromise = self.ctx.controlApi.sendTwoWayCommand(\n                rpcMethod, rpcParams, timeout, requestPersistent, persistentPollingInterval);\n        }\n        commandPromise.subscribe(\n            function success() {\n                self.ctx.$scope.error = \"\";\n                self.ctx.detectChanges();\n            },\n            function fail(rejection) {\n                if (self.ctx.settings.showError) {\n                    self.ctx.$scope.error =\n                        rejection.status + \": \" +\n                        rejection.statusText;\n                    self.ctx.detectChanges();\n                }\n            }\n        );\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.controlApi.completedCommand();\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/service_rpc.json b/application/src/main/data/json/system/widget_types/service_rpc.json
index 23cc13adf0..c21814f312 100644
--- a/application/src/main/data/json/system/widget_types/service_rpc.json
+++ b/application/src/main/data/json/system/widget_types/service_rpc.json
@@ -8,9 +8,17 @@
     "type": "rpc",
     "sizeX": 8.5,
     "sizeY": 5.5,
-    "resources": [],
+    "resources": [
+      {
+        "url": {
+          "entityType": "TB_RESOURCE",
+          "id": "${RESOURCE:gateway-management-extension.js}"
+        },
+        "isModule": true
+      }
+    ],
     "templateHtml": "<tb-gateway-service-rpc [ctx]=\"ctx\"></tb-gateway-service-rpc>",
-    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
+    "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section.flex-1 {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n\n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
     "controllerScript": "\nself.onInit = function() {\n};",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
diff --git a/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json b/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json
index 7054be76be..6467ba1836 100644
--- a/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_boolean_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-checkbox formControlName=\"checkboxValue\"\n                                  (change)=\"changed()\"\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\n                        {{currentValue}}\n                    </mat-checkbox>\n                </div>\n            </div>\n\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-checkbox formControlName=\"checkboxValue\"\n                                  (change)=\"changed()\"\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\n                        {{currentValue}}\n                    </mat-checkbox>\n                </div>\n            </div>\n\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\r\n    overflow: hidden;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.attribute-update-form__grid {\r\n    display: flex;\r\n}\r\n.grid__element:first-child {\r\n    flex: 1;\r\n}\r\n\r\n.grid__element {\r\n    display: flex;\r\n}\r\n\r\n.attribute-update-form .mat-button.mat-icon-button {\r\n    width: 32px;\r\n    min-width: 32px;\r\n    height: 32px;\r\n    min-height: 32px;\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    line-height: 20px;\r\n}\r\n\r\n.attribute-update-form .mat-icon-button mat-icon {\r\n    width: 20px;\r\n    min-width: 20px;\r\n    height: 20px;\r\n    min-height: 20px;\r\n    font-size: 20px;\r\n}\r\n\r\n.tb-toast {\r\n    font-size: 14px!important;\r\n}",
     "controllerScript": "let settings;\nlet utils;\nlet translate;\nlet http;\nlet $scope;\nlet map;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n        init();\n        self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n\n    settings.trueValue = utils.defaultValue(utils.customTranslation(settings.trueValue, settings.trueValue), true);\n    settings.falseValue = utils.defaultValue(utils.customTranslation(settings.falseValue, settings.falseValue), false);\n\n    map = {\n        true: settings.trueValue,\n        false: settings.falseValue\n    };\n    \n    $scope.checkboxValue = false;\n    $scope.currentValue = map[$scope.checkboxValue];\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({checkboxValue: [$scope.checkboxValue]});\n\n    $scope.changed = function() {\n        $scope.checkboxValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n        $scope.currentValue = map[$scope.checkboxValue];\n        $scope.updateAttribute();\n    };\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function() {\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [{\n                    key: $scope.currentKey,\n                    value: $scope.checkboxValue\n                }]\n            );\n\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                       $scope.originalValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            $scope.checkboxValue = self.ctx.data[0].data[0][1] === 'true';\n            $scope.currentValue = map[$scope.checkboxValue];\n            $scope.attributeUpdateFormGroup.get('checkboxValue').patchValue($scope.checkboxValue);\n            self.ctx.detectChanges();\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_device_attribute.json b/application/src/main/data/json/system/widget_types/update_device_attribute.json
index 3cb54b9d84..1e7b356ca6 100644
--- a/application/src/main/data/json/system/widget_types/update_device_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_device_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 4,
     "sizeY": 2,
     "resources": [],
-    "templateHtml": "<div class=\"tb-rpc-button\" fxLayout=\"column\">\n    <div fxFlex=\"20\" class=\"title-container\" fxLayout=\"row\"\n        fxLayoutAlign=\"center center\" [fxShow]=\"showTitle\">\n        <span class=\"button-title\">{{title}}</span>\n    </div>\n    <div fxFlex=\"{{showTitle ? 80 : 100}}\" [ngStyle]=\"{paddingTop: showTitle ? '5px': '10px'}\"\n        class=\"button-container\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <div>\n            <button mat-button (click)=\"sendUpdate()\"\n                    [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n                    [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n                    [ngStyle]=\"customStyle\">\n                {{buttonLable}}\n            </button>\n        </div>\n    </div>\n    <div class=\"error-container\" [ngStyle]=\"{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span class=\"button-error\">{{ error }}</span>\n    </div>\n</div>",
+    "templateHtml": "<div class=\"tb-rpc-button flex flex-col\">\n  <div class=\"title-container flex max-w-20% flex-full flex-row items-center justify-center\"\n       [class.!hidden]=\"!showTitle\">\n    <span class=\"button-title\">{{title}}</span>\n  </div>\n  <div class=\"button-container flex flex-full flex-col items-center justify-center\"\n       [class]=\"{\n          'max-w-80%': showTitle,\n          'max-w-100%': !showTitle\n       }\"\n       [style.padding-top]=\"showTitle ? '5px': '10px'\">\n    <div>\n      <button mat-button (click)=\"sendCommand()\"\n              [class.mat-mdc-raised-button]=\"styleButton?.isRaised\"\n              [color]=\"styleButton?.isPrimary ? 'primary' : ''\"\n              [style]=\"customStyle\">\n        {{buttonLable}}\n      </button>\n    </div>\n  </div>\n  <div class=\"error-container flex flex-row items-center justify-center\" [style.background]=\"error?.length ? 'rgba(255,255,255,0.25)' : 'none'\">\n    <span class=\"button-error\">{{ error }}</span>\n  </div>\n</div>",
     "templateCss": ".tb-rpc-button {\n    width: 100%;\n    height: 100%;\n}\n\n.tb-rpc-button .title-container {\n    font-weight: 500;\n    white-space: nowrap;\n    margin: 10px 0;\n}\n\n.tb-rpc-button .button-container div{\n    min-width: 80%\n}\n\n.tb-rpc-button .button-container .mat-mdc-button{\n    width: 100%;\n    margin: 0;\n}\n\n.tb-rpc-button .error-container {\n    position: absolute;\n    top: 2%;\n    right: 0;\n    left: 0;\n    z-index: 4;\n    height: 14px;\n}\n\n.tb-rpc-button .error-container .button-error {\n    color: #ff3315;\n    white-space: nowrap;\n}",
     "controllerScript": "self.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges();\n    });\n};\n\nfunction init() {\n    self.ctx.$scope.buttonLable = self.ctx.settings.buttonText;\n    self.ctx.$scope.showTitle = self.ctx.settings.title &&\n        self.ctx.settings.title.length ? true : false;\n    self.ctx.$scope.title = self.ctx.settings.title;\n    self.ctx.$scope.styleButton = self.ctx.settings.styleButton;\n    let entityAttributeType = self.ctx.settings.entityAttributeType;\n    let entityParameters = JSON.parse(self.ctx.settings.entityParameters);\n\n    if (self.ctx.settings.styleButton.isPrimary ===\n        false) {\n        self.ctx.$scope.customStyle = {\n            'background-color': self.ctx.$scope.styleButton\n                .bgColor,\n            'color': self.ctx.$scope.styleButton.textColor\n        };\n    }\n\n    let attributeService = self.ctx.$scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n\n    self.ctx.$scope.sendUpdate = function() {\n        let attributes = [];\n        for (let key in entityParameters) {\n            attributes.push({\n                \"key\": key,\n                \"value\": entityParameters[key]\n            });\n        }\n        \n        let entityId = {\n            entityType: \"DEVICE\",\n            id: self.ctx.defaultSubscription.targetDeviceId\n        };\n        attributeService.saveEntityAttributes(entityId,\n            entityAttributeType, attributes).subscribe(\n            function success() {\n                self.ctx.$scope.error = \"\";\n                self.ctx.detectChanges();\n            },\n            function fail(rejection) {\n                if (self.ctx.settings.showError) {\n                    self.ctx.$scope.error =\n                        rejection.status + \": \" +\n                        rejection.statusText;\n                        self.ctx.detectChanges();\n                }\n            }\n\n        );\n    };\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_double_timeseries.json b/application/src/main/data/json/system/widget_types/update_double_timeseries.json
index 38b5a8e501..01357bdddd 100644
--- a/application/src/main/data/json/system/widget_types/update_double_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_double_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet utils;\nlet translate;\nlet http;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-timeseries-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\n        {currentValue: [undefined, [$scope.validators.required,\n                                    $scope.validators.min(settings.minValue),\n                                    $scope.validators.max(settings.maxValue)]]}\n    );\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            );\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        dataKeyOptional: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_integer_timeseries.json b/application/src/main/data/json/system/widget_types/update_integer_timeseries.json
index 52039b96e9..c2d352069d 100644
--- a/application/src/main/data/json/system/widget_types/update_integer_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_integer_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n<form *ngIf=\"attributeUpdateFormGroup\"\n      class=\"attribute-update-form\"\n      [formGroup]=\"attributeUpdateFormGroup\"\n      (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n        <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n            <div class=\"grid__element\">\n                <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                [hideRequiredMarker]=\"!settings.showLabel\">\n                    <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                    <input matInput\n                           formControlName=\"currentValue\"\n                           required\n                           type=\"number\"\n                           step=\"1\"\n                           pattern=\"^-?[0-9]+$\"\n                           (focus)=\"isFocused = true\"\n                           (blur)=\"changeFocus()\"\n                           max=\"{{settings.maxValue}}\"\n                           min=\"{{settings.minValue}}\"/>\n                    <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                        {{requiredErrorMessage}}\n                    </mat-error>\n                </mat-form-field>    \n            </div>\n\n            <div class=\"grid__element\">\n                <button mat-icon-button class=\"applyChanges\"\n                           type=\"submit\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                           matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>check</mat-icon>\n                </button>\n                <button mat-icon-button class=\"discardChanges\"\n                           type=\"button\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                           (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                           matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n            {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !dataKeyDetected\">\n            {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !isValidParameter\">\n            {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n        </div>\n    </div>\n</form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n<form *ngIf=\"attributeUpdateFormGroup\"\n      class=\"attribute-update-form\"\n      [formGroup]=\"attributeUpdateFormGroup\"\n      (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n        <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n            <div class=\"grid__element\">\n                <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                [hideRequiredMarker]=\"!settings.showLabel\">\n                    <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                    <input matInput\n                           formControlName=\"currentValue\"\n                           required\n                           type=\"number\"\n                           step=\"1\"\n                           pattern=\"^-?[0-9]+$\"\n                           (focus)=\"isFocused = true\"\n                           (blur)=\"changeFocus()\"\n                           max=\"{{settings.maxValue}}\"\n                           min=\"{{settings.minValue}}\"/>\n                    <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                        {{requiredErrorMessage}}\n                    </mat-error>\n                </mat-form-field>    \n            </div>\n\n            <div class=\"grid__element\">\n                <button mat-icon-button class=\"applyChanges\"\n                           type=\"submit\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                           matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>check</mat-icon>\n                </button>\n                <button mat-icon-button class=\"discardChanges\"\n                           type=\"button\"\n                           [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                           (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                           matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                           matTooltipPosition=\"above\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n            {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n            {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n        </div>\n        <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || isValidParameter\">\n            {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n        </div>\n    </div>\n</form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}\n",
     "controllerScript": "let $scope;\nlet settings;\nlet utils;\nlet translate;\nlet http;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-timeseries-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\n        {currentValue: [undefined, [$scope.validators.required,\n                                    $scope.validators.min(settings.minValue),\n                                    $scope.validators.max(settings.maxValue),\n                                    $scope.validators.pattern(/^-?[0-9]+$/)]]}\n    );\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            );\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        dataKeyOptional: true\n    }\n}\n\nself.onDestroy = function() {\n\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_location_timeseries.json b/application/src/main/data/json/system/widget_types/update_location_timeseries.json
index f868683a6f..33d4009415 100644
--- a/application/src/main/data/json/system/widget_types/update_location_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_location_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          [ngClass]=\"{'small-width': smallWidthContainer}\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\" \n                    [ngClass]=\"{'horizontal-alignment': isHorizontal && !changeAlignment}\">\n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLat\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"90\"\n                               min=\"-90\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                    \n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLng\"\n                               required\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"180\"\n                               min=\"-180\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"getLocation\"\n                            type=\"button\"\n                            (click)=\"getCoordinate()\"\n                            *ngIf=\"settings.showGetLocation\"\n                            matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>my_location</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"applyChanges\"\n                            type=\"submit\"\n                            [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                            matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                            type=\"button\"\n                            [disabled]=\"disableButton()\"\n                            (click)=\"discardChange()\"\n                            matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [class.small-width]=\"smallWidthContainer\"\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   required\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required')\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    margin: 0;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentLat: [undefined, [$scope.validators.required,\r\n                                    $scope.validators.min(-90),\r\n                                    $scope.validators.max(90)]],\r\n        currentLng: [undefined, [$scope.validators.required,\r\n                                    $scope.validators.min(-180),\r\n                                    $scope.validators.max(180)]]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"timeseries\"){\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityTimeseries(\r\n                datasource.entity.id,\r\n                'scope',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json b/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json
index cf5d300751..7f914f8443 100644
--- a/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_boolean_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\r\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\r\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let settings;\nlet attributeService;\nlet utils;\nlet translate;\nlet $scope;\nlet map;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n        init();\n        self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n\n    settings.trueValue = utils.defaultValue(utils.customTranslation(settings.trueValue, settings.trueValue), true);\n    settings.falseValue = utils.defaultValue(utils.customTranslation(settings.falseValue, settings.falseValue), false);\n\n    map = {\n        true: settings.trueValue,\n        false: settings.falseValue\n    };\n    \n    $scope.checkboxValue = false;\n    $scope.currentValue = map[$scope.checkboxValue];\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({checkboxValue: [$scope.checkboxValue]});\n\n    $scope.changed = function() {\n        $scope.checkboxValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n        $scope.currentValue = map[$scope.checkboxValue];\n        $scope.updateAttribute();\n    };\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function() {\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.checkboxValue\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                   $scope.originalValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            $scope.checkboxValue = self.ctx.data[0].data[0][1] === 'true';\n            $scope.currentValue = map[$scope.checkboxValue];\n            $scope.attributeUpdateFormGroup.get('checkboxValue').patchValue($scope.checkboxValue);\n            self.ctx.detectChanges();\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_date_attribute.json b/application/src/main/data/json/system/widget_types/update_server_date_attribute.json
index 3a1cdabc86..d460cc235c 100644
--- a/application/src/main/data/json/system/widget_types/update_server_date_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_date_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired && (attributeUpdateFormGroup.get('currentValue').value)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired && (attributeUpdateFormGroup.get('currentValue').value)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n\r\n    $scope.datePickerType = settings.showTimeInput ? 'datetime' : 'date'; \r\n    \r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\r\n    $scope.labelValue = translate.instant('widgets.input-widgets.date');\r\n    \r\n    if (settings.showTimeInput) {\r\n        $scope.labelValue += \" & \" + translate.instant('widgets.input-widgets.time');\r\n    }\r\n    \r\n    var validators = [];\r\n    \r\n    if (settings.isRequired) {\r\n        validators.push($scope.validators.required);\r\n    }\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, validators]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.clear = function(event) {\r\n        event.stopPropagation();\r\n        $scope.attributeUpdateFormGroup.get('currentValue').patchValue(undefined);\r\n    }\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n            var currentValueInMilliseconds;\r\n            \r\n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value) {\r\n                currentValueInMilliseconds = undefined;\r\n            } else {\r\n                currentValueInMilliseconds = $scope.attributeUpdateFormGroup.get('currentValue').value.getTime();\r\n            }\r\n            \r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SERVER_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: currentValueInMilliseconds\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n    \r\n    $scope.isValidDate = function(date) {\r\n      return date instanceof Date && !isNaN(date);\r\n    }\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                $scope.originalValue = moment(self.ctx.data[0].data[0][1]).toDate();\r\n\r\n                if (!$scope.isValidDate($scope.originalValue)) {\r\n                    $scope.originalValue = undefined;\r\n                }\r\n                \r\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n}\r\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_double_attribute.json b/application/src/main/data/json/system/widget_types/update_server_double_attribute.json
index ddfe7b36d1..b7dab2b2a6 100644
--- a/application/src/main/data/json/system/widget_types/update_server_double_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_double_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [$scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue)];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n    \n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_image_attribute.json b/application/src/main/data/json/system/widget_types/update_server_image_attribute.json
index 79af76660c..b2b3c9600f 100644
--- a/application/src/main/data/json/system/widget_types/update_server_image_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_image_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <tb-image-input fxFlex\n                        formControlName=\"currentValue\"\n                        [showPreview]=\"settings.displayPreview\"\n                        [showClearButton]=\"settings.displayClearButton\"\n                        >\n                    </tb-image-input>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\">\n          <tb-image-input class=\"flex-1\"\n                          formControlName=\"currentValue\"\n                          [showPreview]=\"settings.displayPreview\"\n                          [showClearButton]=\"settings.displayClearButton\"\n          >\n          </tb-image-input>\n        </div>\n\n        <div class=\"grid__element\">\n          <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                  (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.tb-image-preview-container div,\n.tb-flow-drop label {\n    font-size: 16px !important;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.displayPreview = utils.defaultValue(settings.displayPreview, true);\r\n    settings.displayClearButton = utils.defaultValue(settings.displayClearButton, false);\r\n    settings.displayApplyButton = utils.defaultValue(settings.displayApplyButton, true);\r\n    settings.displayDiscardButton = utils.defaultValue(settings.displayDiscardButton, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, []]}\r\n    );\r\n    \r\n    $scope.attributeUpdateFormGroup.valueChanges.subscribe( () => {\r\n        self.ctx.detectChanges();\r\n        if (!settings.displayApplyButton) {\r\n            $scope.updateAttribute();\r\n        }\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SERVER_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    if (settings.displayApplyButton) {\r\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    }\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            var value = self.ctx.data[0].data[0][1];\r\n            if (settings.displayApplyButton || !$scope.originalValue) {\r\n                $scope.originalValue = value;\r\n            }\r\n            $scope.attributeUpdateFormGroup.get('currentValue').patchValue(value, {emitEvent: false});\r\n            self.ctx.detectChanges();\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n    $scope.attributeUpdateFormGroup.valueChanges.unsubscribe();\r\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json b/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json
index ea4fecdb42..066d3487ef 100644
--- a/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_integer_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [\n        $scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue),\n        $scope.validators.pattern(/^-?[0-9]+$/)\n    ];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n            \n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_location_attribute.json b/application/src/main/data/json/system/widget_types/update_server_location_attribute.json
index 0d007ca955..281de28846 100644
--- a/application/src/main/data/json/system/widget_types/update_server_location_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_location_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          [ngClass]=\"{'small-width': smallWidthContainer}\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\" \n                    [ngClass]=\"{'horizontal-alignment': isHorizontal && !changeAlignment}\">\n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLat\"\n                               [required]=\"settings.isLatRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"90\"\n                               min=\"-90\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                    \n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLng\"\n                               [required]=\"settings.isLngRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"180\"\n                               min=\"-180\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"getLocation\"\n                            type=\"button\"\n                            (click)=\"getCoordinate()\"\n                            *ngIf=\"settings.showGetLocation\"\n                            matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>my_location</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"applyChanges\"\n                            type=\"submit\"\n                            [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                            matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                            type=\"button\"\n                            [disabled]=\"disableButton()\"\n                            (click)=\"discardChange()\"\n                            matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" >\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [class.small-width]=\"smallWidthContainer\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   [required]=\"settings.isLatRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   [required]=\"settings.isLngRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n        {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    settings.isLatRequired = utils.defaultValue(settings.isLatRequired, true);\r\n    settings.isLngRequired = utils.defaultValue(settings.isLngRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n    \r\n    var validatorsLat = [$scope.validators.min(-90), $scope.validators.max(90)];\r\n    var validatorsLng = [$scope.validators.min(-180), $scope.validators.max(180)];\r\n    \r\n    if (settings.isLatRequired) {\r\n        validatorsLat.push($scope.validators.required);\r\n    }\r\n    \r\n    if (settings.isLngRequired) {\r\n        validatorsLng.push($scope.validators.required);\r\n    }\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\r\n        currentLat: [undefined, validatorsLat],\r\n        currentLng: [undefined, validatorsLng]\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType && datasource.entityId) {\r\n                $scope.entityName = datasource.entityName;\r\n                if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                } else {\r\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                }\r\n\r\n                $scope.entityDetected = true;\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"attribute\") {\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SERVER_SCOPE',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_server_string_attribute.json b/application/src/main/data/json/system/widget_types/update_server_string_attribute.json
index d8c33bffcc..ed4f8038e1 100644
--- a/application/src/main/data/json/system/widget_types/update_server_string_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_server_string_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [];\n    if (utils.isDefinedAndNotNull(settings.minLength)) {\n        validators.push($scope.validators.minLength(settings.minLength));\n    }\n    if (utils.isDefinedAndNotNull(settings.maxLength)) {\n        validators.push($scope.validators.maxLength(settings.maxLength));\n    }\n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n    \n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n            \n            var value = $scope.attributeUpdateFormGroup.get('currentValue').value;\n            \n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value.length) {\n                value = null;\n            }\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SERVER_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json
index 765c6381f2..232d09195f 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_boolean_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [fxShow]=\"entityDetected && !isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\r\n    <form *ngIf=\"attributeUpdateFormGroup\"\r\n          class=\"attribute-update-form\"\r\n          [formGroup]=\"attributeUpdateFormGroup\"\r\n          (ngSubmit)=\"updateAttribute()\">\r\n        <div style=\"padding: 0 8px; margin: auto 0;\">\r\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\r\n                <div class=\"grid__element\">\r\n                    <mat-checkbox formControlName=\"checkboxValue\"\r\n                                  (change)=\"changed()\"\r\n                                  aria-label=\"{{'widgets.input-widgets.switch-timeseries-value' | translate}}\">\r\n                        {{currentValue}}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\r\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\r\n            </div>\r\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\r\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\r\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>",
     "templateCss": ".attribute-update-form {\r\n    overflow: hidden;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.attribute-update-form__grid {\r\n    display: flex;\r\n}\r\n.grid__element:first-child {\r\n    flex: 1;\r\n}\r\n\r\n.grid__element {\r\n    display: flex;\r\n}\r\n\r\n.attribute-update-form .mat-button.mat-icon-button {\r\n    width: 32px;\r\n    min-width: 32px;\r\n    height: 32px;\r\n    min-height: 32px;\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    line-height: 20px;\r\n}\r\n\r\n.attribute-update-form .mat-icon-button mat-icon {\r\n    width: 20px;\r\n    min-width: 20px;\r\n    height: 20px;\r\n    min-height: 20px;\r\n    font-size: 20px;\r\n}\r\n\r\n.tb-toast {\r\n    font-size: 14px!important;\r\n}",
     "controllerScript": "let settings;\nlet attributeService;\nlet utils;\nlet translate;\nlet $scope;\nlet map;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n        init();\n        self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n\n    settings.trueValue = utils.defaultValue(utils.customTranslation(settings.trueValue, settings.trueValue), true);\n    settings.falseValue = utils.defaultValue(utils.customTranslation(settings.falseValue, settings.falseValue), false);\n\n    map = {\n        true: settings.trueValue,\n        false: settings.falseValue\n    };\n    \n    $scope.checkboxValue = false;\n    $scope.currentValue = map[$scope.checkboxValue];\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({checkboxValue: [$scope.checkboxValue]});\n\n    $scope.changed = function() {\n        $scope.checkboxValue = $scope.attributeUpdateFormGroup.get('checkboxValue').value;\n        $scope.currentValue = map[$scope.checkboxValue];\n        $scope.updateAttribute();\n    };\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function() {\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.checkboxValue || false\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            $scope.checkboxValue = self.ctx.data[0].data[0][1] === 'true';\n            $scope.currentValue = map[$scope.checkboxValue];\n            $scope.attributeUpdateFormGroup.get('checkboxValue').patchValue($scope.checkboxValue);\n            self.ctx.detectChanges();\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json
index 2225111ff7..8d775ba24a 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_date_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired\n                                    && (attributeUpdateFormGroup.get('currentValue').value\n                                    || originalValue)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\">\n                        <mat-label *ngIf=\"settings.showLabel\">{{ labelValue }}</mat-label>\n                        <mat-datetimepicker-toggle [for]=\"datePicker\" matPrefix></mat-datetimepicker-toggle>\n                        <mat-datetimepicker #datePicker type=\"{{datePickerType}}\"\n                                            openOnFocus=\"true\"></mat-datetimepicker>\n                        <input matInput formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               [matDatetimepicker]=\"datePicker\"\n                               (focus)=\"isFocused = true;\"\n                               (blur)=\"isFocused = false;\">\n                        <button *ngIf=\"!settings.isRequired\n                                    && (attributeUpdateFormGroup.get('currentValue').value\n                                    || originalValue)\"\n                                type=\"button\"\n                                mat-icon-button matSuffix\n                                (click)=\"clear($event)\">\n                            <mat-icon>{{'clear'}}</mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                          {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n\r\n    $scope.datePickerType = settings.showTimeInput ? 'datetime' : 'date'; \r\n    \r\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\r\n    $scope.labelValue = translate.instant('widgets.input-widgets.date');\r\n    \r\n    \r\n    if (settings.showTimeInput) {\r\n        $scope.labelValue += \" & \" + translate.instant('widgets.input-widgets.time');\r\n    }\r\n    \r\n    var validators = [];\r\n    \r\n    if (settings.isRequired) {\r\n        validators.push($scope.validators.required);\r\n    }\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, validators]}\r\n    );\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType === 'DEVICE') {\r\n                if (datasource.entityType && datasource.entityId) {\r\n                    $scope.entityName = datasource.entityName;\r\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                    } else {\r\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                    }\r\n    \r\n                    $scope.entityDetected = true;\r\n                }\r\n            } else {\r\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.clear = function(event) {\r\n        event.stopPropagation();\r\n        $scope.attributeUpdateFormGroup.get('currentValue').patchValue(undefined);\r\n    }\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n            var currentValueInMilliseconds;\r\n            \r\n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value) {\r\n                currentValueInMilliseconds = undefined;\r\n            } else {\r\n                currentValueInMilliseconds = $scope.attributeUpdateFormGroup.get('currentValue').value.getTime();\r\n            }\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SHARED_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: currentValueInMilliseconds\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n    \r\n    $scope.isValidDate = function(date) {\r\n      return date instanceof Date && !isNaN(date);\r\n    }\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                $scope.originalValue = moment(self.ctx.data[0].data[0][1]).toDate();\r\n                \r\n                if (!$scope.isValidDate($scope.originalValue)) {\r\n                    $scope.originalValue = undefined;\r\n                }\r\n                \r\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n}\r\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json
index 29c96f71b4..e2cd304a54 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_double_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n    \n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [\n        $scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue)\n    ];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n        \n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json
index 895ef845c9..1feedab987 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_image_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3.5,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <tb-image-input fxFlex\n                        formControlName=\"currentValue\"\n                        [showPreview]=\"settings.displayPreview\"\n                        [showClearButton]=\"settings.displayClearButton\"\n                        >\n                    </tb-image-input>\n                </div>\n    \n                <div class=\"grid__element\">\n                    <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\">\n          <tb-image-input class=\"flex-1\"\n                          formControlName=\"currentValue\"\n                          [showPreview]=\"settings.displayPreview\"\n                          [showClearButton]=\"settings.displayClearButton\"\n          >\n          </tb-image-input>\n        </div>\n\n        <div class=\"grid__element\">\n          <button *ngIf=\"settings.displayApplyButton\" mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button *ngIf=\"settings.displayDiscardButton\" mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || !attributeUpdateFormGroup.dirty && settings.displayApplyButton\"\n                  (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue)\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.tb-image-preview-container div,\n.tb-flow-drop label {\n    font-size: 16px !important;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\nfunction init() {\r\n\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.displayPreview = utils.defaultValue(settings.displayPreview, true);\r\n    settings.displayClearButton = utils.defaultValue(settings.displayClearButton, false);\r\n    settings.displayApplyButton = utils.defaultValue(settings.displayApplyButton, true);\r\n    settings.displayDiscardButton = utils.defaultValue(settings.displayDiscardButton, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false;\r\n    $scope.entityDetected = false;\r\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n    \r\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\r\n        {currentValue: [undefined, []]}\r\n    );\r\n    \r\n    $scope.attributeUpdateFormGroup.valueChanges.subscribe( () => {\r\n        self.ctx.detectChanges();\r\n         if (!settings.displayApplyButton) {\r\n            $scope.updateAttribute();\r\n        }\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        \r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType === 'DEVICE') {\r\n                if (datasource.entityType && datasource.entityId) {\r\n                    $scope.entityName = datasource.entityName;\r\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                    } else {\r\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                    }\r\n    \r\n                    $scope.entityDetected = true;\r\n                }\r\n            } else {\r\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length) {\r\n            if (datasource.dataKeys[0].type !== \"attribute\") {\r\n                $scope.isValidParameter = false;\r\n            } else {\r\n                $scope.currentKey = datasource.dataKeys[0].name;\r\n                $scope.dataKeyType = datasource.dataKeys[0].type;\r\n                $scope.dataKeyDetected = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n    \r\n    $scope.updateAttribute = function () {\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SHARED_SCOPE',\r\n                [\r\n                    {\r\n                        key: $scope.currentKey,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    if (settings.displayApplyButton) {\r\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\r\n                    }\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            var value = self.ctx.data[0].data[0][1];\r\n            if (settings.displayApplyButton || !$scope.originalValue) {\r\n                $scope.originalValue = value;\r\n            }\r\n            $scope.attributeUpdateFormGroup.get('currentValue').patchValue(value, {emitEvent: false});\r\n            self.ctx.detectChanges();\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nself.onResize = function() {\r\n\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 1,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n    $scope.attributeUpdateFormGroup.valueChanges.unsubscribe();\r\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json
index c4dd5b2dba..4235127d7a 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_integer_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               type=\"number\"\n                               step=\"1\"\n                               pattern=\"^-?[0-9]+$\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"{{settings.maxValue}}\"\n                               min=\"{{settings.minValue}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n    \n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [\n        $scope.validators.min(settings.minValue),\n        $scope.validators.max(settings.maxValue),\n        $scope.validators.pattern(/^-?[0-9]+$/)\n    ];\n    \n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue(correctValue($scope.originalValue));\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nfunction correctValue(value) {\n    if (typeof value !== \"number\") {\n        return 0;\n    }\n    return value;\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json
index fa053fed72..6f2067dec0 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_location_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          [ngClass]=\"{'small-width': smallWidthContainer}\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\" \n                    [ngClass]=\"{'horizontal-alignment': isHorizontal && !changeAlignment}\">\n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLat\"\n                               [required]=\"settings.isLatRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"90\"\n                               min=\"-90\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>\n                    \n                    <mat-form-field class=\"mat-block\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentLng\"\n                               [required]=\"settings.isLngRequired\"\n                               type=\"number\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               max=\"180\"\n                               min=\"-180\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"getLocation\"\n                            type=\"button\"\n                            (click)=\"getCoordinate()\"\n                            *ngIf=\"settings.showGetLocation\"\n                            matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>my_location</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"applyChanges\"\n                            type=\"submit\"\n                            [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                            matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                            type=\"button\"\n                            [disabled]=\"disableButton()\"\n                            (click)=\"discardChange()\"\n                            matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                            matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n  <form *ngIf=\"attributeUpdateFormGroup\"\n        class=\"attribute-update-form\"\n        [formGroup]=\"attributeUpdateFormGroup\"\n        [class.small-width]=\"smallWidthContainer\"\n        (ngSubmit)=\"updateAttribute()\">\n    <div style=\"padding: 0 8px; margin: auto 0;\">\n      <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n        <div class=\"grid__element\"\n             [class.horizontal-alignment]=\"isHorizontal && !changeAlignment\">\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? latLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLat\"\n                   [required]=\"settings.isLatRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"90\"\n                   min=\"-90\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLat').hasError('required') && settings.isLatRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field class=\"mat-block\"\n                          floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                          [hideRequiredMarker]=\"!settings.showLabel\">\n            <mat-label>{{ settings.showLabel ? lngLabel : '' }}</mat-label>\n            <input matInput\n                   formControlName=\"currentLng\"\n                   [required]=\"settings.isLngRequired\"\n                   type=\"number\"\n                   (focus)=\"isFocused = true\"\n                   (blur)=\"changeFocus()\"\n                   max=\"180\"\n                   min=\"-180\"/>\n            <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentLng').hasError('required') && settings.isLngRequired\">\n              {{requiredErrorMessage}}\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div class=\"grid__element\">\n          <button mat-icon-button class=\"getLocation\"\n                  type=\"button\"\n                  (click)=\"getCoordinate()\"\n                  *ngIf=\"settings.showGetLocation\"\n                  matTooltip=\"{{ 'widgets.input-widgets.get-location' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>my_location</mat-icon>\n          </button>\n          <button mat-icon-button class=\"applyChanges\"\n                  type=\"submit\"\n                  [disabled]=\"disableButton() || attributeUpdateFormGroup.invalid || attributeUpdateFormGroup.pristine\"\n                  matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>check</mat-icon>\n          </button>\n          <button mat-icon-button class=\"discardChanges\"\n                  type=\"button\"\n                  [disabled]=\"disableButton()\"\n                  (click)=\"discardChange()\"\n                  matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                  matTooltipPosition=\"above\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n        {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n      </div>\n      <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n           [class.!hidden]=\"!entityDetected || isValidParameter\">\n        {{ 'widgets.input-widgets.no-coordinate-specified' | translate }}\n      </div>\n    </div>\n  </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex-direction: column;\n    flex: 1;\n}\n\n.grid__element.horizontal-alignment {\n    flex-direction: row;\n}\n\n.grid__element:last-child {\n    align-items: center;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    margin: 0;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-button.getLocation {\n    margin-right: 10px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.attribute-update-form mat-form-field{\n    width: 100%;\n    padding-right: 5px;\n}\n\n.attribute-update-form.small-width mat-form-field{\n    width: 150px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet utils;\r\nlet translate;\r\n\r\nself.onInit = function() {\r\n    self.ctx.ngZone.run(function() {\r\n       init(); \r\n       self.ctx.detectChanges(true);\r\n    });\r\n};\r\n\r\n\r\nfunction init() {\r\n    $scope = self.ctx.$scope;\r\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\r\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\r\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\r\n    $scope.toastTargetId = 'input-widget' + utils.guid();\r\n    settings = utils.deepClone(self.ctx.settings) || {};\r\n    \r\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\r\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\r\n    settings.showGetLocation = utils.defaultValue(settings.showGetLocation, true);\r\n    settings.enableHighAccuracy = utils.defaultValue(settings.enableHighAccuracy, false);\r\n    settings.isLatRequired = utils.defaultValue(settings.isLatRequired, true);\r\n    settings.isLngRequired = utils.defaultValue(settings.isLngRequired, true);\r\n    $scope.settings = settings;\r\n    $scope.isValidParameter = true;\r\n    $scope.dataKeyDetected = false; \r\n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\r\n\r\n    $scope.isHorizontal = (settings.inputFieldsAlignment === 'row');\r\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-coordinate-required');\r\n    $scope.latLabel = utils.customTranslation(settings.latLabel, settings.latLabel) || translate.instant('widgets.input-widgets.latitude');\r\n    $scope.lngLabel = utils.customTranslation(settings.lngLabel, settings.lngLabel) || translate.instant('widgets.input-widgets.longitude');\r\n\r\n    var validatorsLat = [$scope.validators.min(-90), $scope.validators.max(90)];\r\n    var validatorsLng = [$scope.validators.min(-180), $scope.validators.max(180)];\r\n    \r\n    if (settings.isLatRequired) {\r\n        validatorsLat.push($scope.validators.required);\r\n    }\r\n    \r\n    if (settings.isLngRequired) {\r\n        validatorsLng.push($scope.validators.required);\r\n    }\r\n\r\n    $scope.attributeUpdateFormGroup = $scope.fb.group({\r\n        currentLat: [undefined, validatorsLat],\r\n        currentLng: [undefined, validatorsLng],\r\n    });\r\n\r\n    if (self.ctx.datasources && self.ctx.datasources.length) {\r\n        var datasource = self.ctx.datasources[0];\r\n        if (datasource.type === 'entity') {\r\n            if (datasource.entityType === 'DEVICE') {\r\n                if (datasource.entityType && datasource.entityId) {\r\n                    $scope.entityName = datasource.entityName;\r\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\r\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\r\n                    } else {\r\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\r\n                    }\r\n    \r\n                    $scope.entityDetected = true;\r\n                }\r\n            } else {\r\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\r\n            }\r\n        }\r\n        if (datasource.dataKeys.length > 1) {\r\n            $scope.dataKeyDetected = true;\r\n            for (let i = 0; i < datasource.dataKeys.length; i++) {\r\n                if (datasource.dataKeys[i].type != \"attribute\"){\r\n                    $scope.isValidParameter = false;\r\n                }\r\n                if (datasource.dataKeys[i].name !== settings.latKeyName && datasource.dataKeys[i].name !== settings.lngKeyName){\r\n                    $scope.dataKeyDetected = false;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\r\n\r\n    $scope.updateAttribute = function () {\r\n        $scope.isFocused = false;\r\n        if ($scope.entityDetected) {\r\n            var datasource = self.ctx.datasources[0];\r\n\r\n            attributeService.saveEntityAttributes(\r\n                datasource.entity.id,\r\n                'SHARED_SCOPE',\r\n                [\r\n                    {\r\n                        key: settings.latKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLat').value\r\n                    },{\r\n                        key: settings.lngKeyName,\r\n                        value: $scope.attributeUpdateFormGroup.get('currentLng').value\r\n                    }\r\n                ]\r\n            ).subscribe(\r\n                function success() {\r\n                    $scope.originalLat = $scope.attributeUpdateFormGroup.get('currentLat').value;\r\n                    $scope.originalLng = $scope.attributeUpdateFormGroup.get('currentLng').value;\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                },\r\n                function fail() {\r\n                    if (settings.showResultMessage) {\r\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n    };\r\n\r\n    $scope.changeFocus = function () {\r\n        if ($scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng) {\r\n            $scope.isFocused = false;\r\n        }\r\n    };\r\n    \r\n    $scope.discardChange = function() {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            'currentLat': $scope.originalLat,\r\n            'currentLng': $scope.originalLng\r\n        });\r\n        $scope.isFocused = false;\r\n        $scope.attributeUpdateFormGroup.markAsPristine();\r\n        self.onDataUpdated();\r\n    };\r\n    \r\n    $scope.disableButton = function () {\r\n        return $scope.attributeUpdateFormGroup.get('currentLat').value === $scope.originalLat && $scope.attributeUpdateFormGroup.get('currentLng').value === $scope.originalLng || $scope.currentLng === null || $scope.currentLat === null;\r\n    };\r\n    \r\n    $scope.getCoordinate = function() {\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(showPosition, function (){\r\n                $scope.showErrorToast(translate.instant('widgets.input-widgets.blocked-location'), \r\n                                    'bottom', 'left', $scope.toastTargetId);\r\n            }, {\r\n                enableHighAccuracy: settings.enableHighAccuracy\r\n            });\r\n        } else {\r\n            $scope.showErrorToast(translate.instant('widgets.input-widgets.no-support-geolocation'), 'bottom', 'left', $scope.toastTargetId);\r\n        }\r\n    };\r\n    \r\n    function showPosition(position) {\r\n        $scope.attributeUpdateFormGroup.setValue({\r\n            currentLat: correctValue(position.coords.latitude),\r\n            currentLng: correctValue(position.coords.longitude)\r\n        });\r\n        $scope.attributeUpdateFormGroup.markAsDirty();\r\n        $scope.isFocused = true;\r\n    }\r\n    \r\n    self.onResize();\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n    try {\r\n        if ($scope.dataKeyDetected) {\r\n            if (!$scope.isFocused) {\r\n                for(let i = 0; i < self.typeParameters().maxDataKeys; i++){\r\n                    if(self.ctx.data[i].dataKey.name === self.ctx.settings.latKeyName && $scope.attributeUpdateFormGroup.get('currentLat').pristine){\r\n                        $scope.originalLat = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLat').patchValue(correctValue($scope.originalLat));\r\n                    } else if(self.ctx.data[i].dataKey.name === self.ctx.settings.lngKeyName && $scope.attributeUpdateFormGroup.get('currentLng').pristine){\r\n                        $scope.originalLng = self.ctx.data[i].data[0][1];\r\n                        $scope.attributeUpdateFormGroup.get('currentLng').patchValue(correctValue($scope.originalLng));\r\n                    }\r\n                }\r\n                self.ctx.detectChanges();\r\n            }\r\n        }\r\n    } catch (e) {\r\n        console.log(e);\r\n    }\r\n};\r\n\r\nfunction correctValue(value) {\r\n    if (typeof value !== \"number\") {\r\n        return 0;\r\n    }\r\n    return value;\r\n}\r\n\r\nself.onResize = function() {\r\n    $scope.smallWidthContainer = (self.ctx.$container && self.ctx.$container[0].offsetWidth < 320);\r\n    $scope.changeAlignment = ($scope.isHorizontal && self.ctx.$container && self.ctx.$container[0].offsetWidth < 480);\r\n    self.ctx.detectChanges();\r\n};\r\n\r\nself.typeParameters = function() {\r\n    return {\r\n        maxDatasources: 1,\r\n        maxDataKeys: 2,\r\n        singleEntity: true\r\n    };\r\n};\r\n\r\nself.onDestroy = function() {\r\n\r\n};",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json b/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json
index 7578838066..e9a00672bd 100644
--- a/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json
+++ b/application/src/main/data/json/system/widget_types/update_shared_string_attribute.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               [required]=\"settings.isRequired\"\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required') && settings.isRequired\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"(originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty) && (originalValue === attributeUpdateFormGroup.get('currentValue').value || settings.isRequired)\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-attribute' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\" [innerHtml]=\"message\"></div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-attribute-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\"\n                 [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.timeseries-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet attributeService;\nlet utils;\nlet translate;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    attributeService = $scope.$injector.get(self.ctx.servicesMap.get('attributeService'));\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    settings.isRequired = utils.defaultValue(settings.isRequired, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false; \n    $scope.message = translate.instant('widgets.input-widgets.no-entity-selected');\n    \n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-attribute-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [];\n    if (utils.isDefinedAndNotNull(settings.minLength)) {\n        validators.push($scope.validators.minLength(settings.minLength));\n    }\n    if (utils.isDefinedAndNotNull(settings.maxLength)) {\n        validators.push($scope.validators.maxLength(settings.maxLength));\n    }\n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n    \n    $scope.attributeUpdateFormGroup = $scope.fb.group({\n        currentValue: [undefined, validators]\n    });\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType === 'DEVICE') {\n                if (datasource.entityType && datasource.entityId) {\n                    $scope.entityName = datasource.entityName;\n                    if (settings.widgetTitle && settings.widgetTitle.length) {\n                        $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                    } else {\n                        $scope.titleTemplate = self.ctx.widgetConfig.title;\n                    }\n    \n                    $scope.entityDetected = true;\n                }\n            } else {\n                $scope.message = translate.instant('widgets.input-widgets.not-allowed-entity');\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"attribute\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n            var value = $scope.attributeUpdateFormGroup.get('currentValue').value;\n            \n            if (!$scope.attributeUpdateFormGroup.get('currentValue').value.length) {\n                value = null;\n            }\n\n            attributeService.saveEntityAttributes(\n                datasource.entity.id,\n                'SHARED_SCOPE',\n                [\n                    {\n                        key: $scope.currentKey,\n                        value\n                    }\n                ]\n            ).subscribe(\n                function success() {\n                    $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                    if (settings.showResultMessage) {\n                        $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                    }\n                },\n                function fail() {\n                    if (settings.showResultMessage) {\n                        $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                    }\n                }\n            );\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n}\n\nself.onDataUpdated = function() {\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/system/widget_types/update_string_timeseries.json b/application/src/main/data/json/system/widget_types/update_string_timeseries.json
index d54224ef36..e6fc91f316 100644
--- a/application/src/main/data/json/system/widget_types/update_string_timeseries.json
+++ b/application/src/main/data/json/system/widget_types/update_string_timeseries.json
@@ -9,7 +9,7 @@
     "sizeX": 7.5,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [fxShow]=\"entityDetected && isValidParameter && dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxHide]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [fxShow]=\"entityDetected && !isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
+    "templateHtml": "<div tb-toast toastTarget=\"{{ toastTargetId }}\" style=\"width: 100%; height: 100%;\">\n    <form *ngIf=\"attributeUpdateFormGroup\"\n          class=\"attribute-update-form\"\n          [formGroup]=\"attributeUpdateFormGroup\"\n          (ngSubmit)=\"updateAttribute()\">\n        <div style=\"padding: 0 8px; margin: auto 0;\">\n            <div class=\"attribute-update-form__grid\" [class.!hidden]=\"!entityDetected || !isValidParameter || !dataKeyDetected\">\n                <div class=\"grid__element\">\n                    <mat-form-field class=\"mat-block\" style=\"width: 100%;\"\n                                    floatLabel=\"{{settings.showLabel ? 'auto' : 'always'}}\"\n                                    [hideRequiredMarker]=\"!settings.showLabel\">\n                        <mat-label>{{ settings.showLabel ? labelValue : '' }}</mat-label>\n                        <input matInput\n                               formControlName=\"currentValue\"\n                               required\n                               (focus)=\"isFocused = true\"\n                               (blur)=\"changeFocus()\"\n                               maxlength=\"{{settings.maxLength}}\"\n                               minlength=\"{{settings.minLength}}\"/>\n                        <mat-error *ngIf=\"attributeUpdateFormGroup.get('currentValue').hasError('required')\">\n                            {{requiredErrorMessage}}\n                        </mat-error>\n                    </mat-form-field>    \n                </div>\n    \n                <div class=\"grid__element\">\n                    <button mat-icon-button class=\"applyChanges\"\n                               type=\"submit\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value || attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty\"\n                               matTooltip=\"{{ 'widgets.input-widgets.update-timeseries' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>check</mat-icon>\n                    </button>\n                    <button mat-icon-button class=\"discardChanges\"\n                               type=\"button\"\n                               [disabled]=\"originalValue === attributeUpdateFormGroup.get('currentValue').value\"\n                               (click)=\"attributeUpdateFormGroup.get('currentValue').patchValue(originalValue); isFocused = false\"\n                               matTooltip=\"{{ 'widgets.input-widgets.discard-changes' | translate }}\"\n                               matTooltipPosition=\"above\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n    \n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"entityDetected\">\n                {{ 'widgets.input-widgets.no-entity-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || dataKeyDetected\">\n                {{ 'widgets.input-widgets.no-timeseries-selected' | translate }}\n            </div>\n            <div style=\"text-align: center; font-size: 18px; color: #a0a0a0;\" [class.!hidden]=\"!entityDetected || isValidParameter\">\n                {{ 'widgets.input-widgets.attribute-not-allowed' | translate }}\n            </div>\n        </div>\n    </form>\n</div>",
     "templateCss": ".attribute-update-form {\n    overflow: hidden;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n.attribute-update-form__grid {\n    display: flex;\n}\n.grid__element:first-child {\n    flex: 1;\n}\n.grid__element:last-child {\n    margin-top: 19px;\n    margin-left: 7px;\n}\n.grid__element {\n    display: flex;\n}\n\n.attribute-update-form .mat-button.mat-icon-button {\n    width: 32px;\n    min-width: 32px;\n    height: 32px;\n    min-height: 32px;\n    padding: 0 !important;\n    margin: 0 !important;\n    line-height: 20px;\n}\n\n.attribute-update-form .mat-icon-button mat-icon {\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    min-height: 20px;\n    font-size: 20px;\n}\n\n.tb-toast {\n    font-size: 14px!important;\n}",
     "controllerScript": "let $scope;\nlet settings;\nlet utils;\nlet translate;\nlet http;\n\nself.onInit = function() {\n    self.ctx.ngZone.run(function() {\n       init(); \n       self.ctx.detectChanges(true);\n    });\n};\n\n\nfunction init() {\n\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    translate = $scope.$injector.get(self.ctx.servicesMap.get('translate'));\n    http = $scope.$injector.get(self.ctx.servicesMap.get('http'));\n    $scope.toastTargetId = 'input-widget' + utils.guid();\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showLabel = utils.defaultValue(settings.showLabel, true);\n    settings.showResultMessage = utils.defaultValue(settings.showResultMessage, true);\n    $scope.settings = settings;\n    $scope.isValidParameter = true;\n    $scope.dataKeyDetected = false;\n    $scope.requiredErrorMessage = utils.customTranslation(settings.requiredErrorMessage, settings.requiredErrorMessage) || translate.instant('widgets.input-widgets.entity-timeseries-required');\n    $scope.labelValue = utils.customTranslation(settings.labelValue, settings.labelValue) || translate.instant('widgets.input-widgets.value');\n    \n    var validators = [];\n    if (utils.isDefinedAndNotNull(settings.minLength)) {\n        validators.push($scope.validators.minLength(settings.minLength));\n    }\n    if (utils.isDefinedAndNotNull(settings.maxLength)) {\n        validators.push($scope.validators.maxLength(settings.maxLength));\n    }\n    if (settings.isRequired) {\n        validators.push($scope.validators.required);\n    }\n\n    $scope.attributeUpdateFormGroup = $scope.fb.group(\n        {currentValue: [undefined, validators]}\n    );\n\n    if (self.ctx.datasources && self.ctx.datasources.length) {\n        var datasource = self.ctx.datasources[0];\n        if (datasource.type === 'entity') {\n            if (datasource.entityType && datasource.entityId) {\n                $scope.entityName = datasource.entityName;\n                if (settings.widgetTitle && settings.widgetTitle.length) {\n                    $scope.titleTemplate = utils.customTranslation(settings.widgetTitle, settings.widgetTitle);\n                } else {\n                    $scope.titleTemplate = self.ctx.widgetConfig.title;\n                }\n\n                $scope.entityDetected = true;\n            }\n        }\n        if (datasource.dataKeys.length) {\n            if (datasource.dataKeys[0].type !== \"timeseries\") {\n                $scope.isValidParameter = false;\n            } else {\n                $scope.currentKey = datasource.dataKeys[0].name;\n                $scope.dataKeyType = datasource.dataKeys[0].type;\n                $scope.dataKeyDetected = true;\n            }\n        }\n    }\n\n    self.ctx.widgetTitle = utils.createLabelFromDatasource(self.ctx.datasources[0], $scope.titleTemplate);\n\n    $scope.updateAttribute = function () {\n        $scope.isFocused = false;\n        if ($scope.entityDetected) {\n            var datasource = self.ctx.datasources[0];\n\n            let observable = saveEntityTimeseries(\n                datasource.entityType,\n                datasource.entityId,\n                [\n                    {\n                        key: $scope.currentKey,\n                        value: $scope.attributeUpdateFormGroup.get('currentValue').value\n                    }\n                ]\n            );\n            if (observable) {\n                observable.subscribe(\n                    function success() {\n                        $scope.originalValue = $scope.attributeUpdateFormGroup.get('currentValue').value;\n                        if (settings.showResultMessage) {\n                            $scope.showSuccessToast(translate.instant('widgets.input-widgets.update-successful'), 1000, 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    },\n                    function fail() {\n                        if (settings.showResultMessage) {\n                            $scope.showErrorToast(translate.instant('widgets.input-widgets.update-failed'), 'bottom', 'left', $scope.toastTargetId);\n                        }\n                    }\n                );\n            }\n        }\n    };\n\n    $scope.changeFocus = function () {\n        if ($scope.attributeUpdateFormGroup.get('currentValue').value === $scope.originalValue) {\n            $scope.isFocused = false;\n        }\n    }\n\n    function saveEntityTimeseries(entityType, entityId, telemetries) {\n        var telemetriesData = {};\n        for (var a = 0; a < telemetries.length; a++) {\n            if (typeof telemetries[a].value !== 'undefined' && telemetries[a].value !== null) {\n                telemetriesData[telemetries[a].key] = telemetries[a].value;\n            }\n        }\n        if (Object.keys(telemetriesData).length) {\n            var url = '/api/plugins/telemetry/' + entityType + '/' + entityId + '/timeseries/scope';\n            return http.post(url, telemetriesData);\n        }\n        return null;\n    }\n}\n\nself.onDataUpdated = function() {\n\n    try {\n        if ($scope.dataKeyDetected) {\n            if (!$scope.isFocused) {\n                $scope.originalValue = self.ctx.data[0].data[0][1];\n                $scope.attributeUpdateFormGroup.get('currentValue').patchValue($scope.originalValue);\n                self.ctx.detectChanges();\n            }\n        }\n    } catch (e) {\n        console.log(e);\n    }\n}\n\nself.onResize = function() {\n\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    }\n}\n\nself.onDestroy = function() {\n\n}\n",
     "settingsSchema": "",
diff --git a/application/src/main/data/json/tenant/dashboards/gateways.json b/application/src/main/data/resources/dashboards/gateways_dashboard.json
similarity index 98%
rename from application/src/main/data/json/tenant/dashboards/gateways.json
rename to application/src/main/data/resources/dashboards/gateways_dashboard.json
index 338762286c..25afa810cb 100644
--- a/application/src/main/data/json/tenant/dashboards/gateways.json
+++ b/application/src/main/data/resources/dashboards/gateways_dashboard.json
@@ -1892,7 +1892,7 @@
             "useMarkdownTextFunction": false,
             "markdownTextPattern": "<div class=\"action-buttons-container\">\r\n  <button mat-raised-button color=\"primary\"\r\n     (click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[0], ctx.datasources[0].entity.id)\"\r\n  >{{ 'gateway.launch-command' | translate }}\r\n </button>\r\n</div>",
             "applyDefaultMarkdownStyle": false,
-            "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: center;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
+            "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: center;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n    line-height: 36px;\n}"
           },
           "title": "Service command",
           "showTitleIcon": false,
@@ -1919,7 +1919,15 @@
                 "customHtml": "<div class=\"container\">\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\n        <h2>{{ 'gateway.launch-command' | translate }}</h2>\n        <span fxFlex></span>\n        <div [tb-help]=\"'gatewayInstall'\"></div>\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n            <mat-icon class=\"material-icons\">close</mat-icon>\n        </button>\n    </mat-toolbar>\n    <tb-gateway-command [deviceId]=\"entityId\"></tb-gateway-command>\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <button mat-button color=\"primary\"\n            type=\"button\"\n            (click)=\"cancel()\" cdkFocusInitial>\n            {{ 'action.close' | translate }}\n        </button>\n    </div>\n</div>\n",
                 "customCss": ".container {\n    display: grid;\n    grid-template-rows: min-content minmax(auto, 1fr) min-content;\n    height: 100%;\n    max-height: 100vh;\n    width: 600px;\n    max-width: 100%;\n}",
                 "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenCommands();\n\nfunction openCommands() {\n    customDialog.customDialog(htmlTemplate, CommandsDialogController, {panelClass: \"test\"}).subscribe();\n}\n\nfunction CommandsDialogController(instance) {\n    let vm = instance;\n    \n    vm.entityId = entityId.id;\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n}\n",
-                "customResources": [],
+                "customResources": [
+                  {
+                    "url": {
+                      "entityType": "TB_RESOURCE",
+                      "id": "${RESOURCE:gateway-management-extension.js}"
+                    },
+                    "isModule": true
+                  }
+                ],
                 "openInSeparateDialog": false,
                 "openInPopover": false,
                 "id": "337c767b-3217-d3d3-b955-7b0bd0858a1d"
@@ -2000,7 +2008,7 @@
             "useMarkdownTextFunction": true,
             "markdownTextFunction": "let buttonsHtml = \"\" \nctx.actionsApi.getActionDescriptors('elementClick').forEach((btn, index)=>{\n    let disabled =false;\n    if (index == 2) {\n        disabled = data[0] && data[0].RemoteLoggingLevel ? data[0].RemoteLoggingLevel == \"NONE\" : true;\n    } else if (index == 4) {\n        const conf = data[0].general_configuration? JSON.parse(data[0].general_configuration): {};\n        disabled = !conf.remoteShell;\n    }\n    buttonsHtml += `<button mat-raised-button disabled=${disabled} color=\"primary\"(click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[${index}], ctx.datasources[0].entity.id)\" fxFlex fxflex.md=\"50\">${btn.displayName}</button>`\n});\n\nreturn `<div class=\"action-buttons-container\" fxLayout=\"columnd\" fxLayout.md=\"row wrap\" fxLayoutGap=\"5px\" >${buttonsHtml}</div>`;",
             "applyDefaultMarkdownStyle": false,
-            "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: start;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
+            "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: start;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n    line-height: 36px;\n}"
           },
           "title": "General configuration",
           "showTitleIcon": false,
@@ -2159,17 +2167,17 @@
               }
             },
             {
-              "type": "entity",
+              "type": "entityCount",
               "entityAliasId": "a75d9031-ba51-8da4-81be-de65061b72f4",
               "filterId": "44038462-1bae-e075-7b31-283341cb2295",
               "dataKeys": [
                 {
                   "name": "count",
-                  "type": "entityField",
+                  "type": "count",
                   "label": "modbusCount",
-                  "color": "#4caf50",
+                  "color": "#ff5722",
                   "settings": {},
-                  "_hash": 0.9300660062254784,
+                  "_hash": 0.46402083951505624,
                   "aggregationType": null,
                   "units": null,
                   "decimals": null,
@@ -2192,7 +2200,7 @@
                 {
                   "name": "count",
                   "type": "count",
-                  "label": "grcpCount",
+                  "label": "grpcCount",
                   "color": "#f44336",
                   "settings": {},
                   "_hash": 0.16110429492126088,
@@ -2605,9 +2613,9 @@
           "padding": "0px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div style=\"width: 100%; height: 100%; padding: 0;\" fxFlex fxLayout=\"column\">\r\n  <mat-tab-group [(selectedIndex)]=\"selectedTabIndex\">\r\n    <mat-tab label=\"All\" value=\"gateway_devices_0\"></mat-tab>\r\n    <mat-tab *ngIf=\"${mqttCount}\" label=\"MQTT\" value=\"gateway_devices_1\"></mat-tab>\r\n    <mat-tab *ngIf=\"${modbusCount}\" label=\"MODBUS\" value=\"gateway_devices_2\"></mat-tab>\r\n    <mat-tab *ngIf=\"${grpcCount}\" label=\"GRPC\" value=\"gateway_devices_3\"></mat-tab>\r\n    <mat-tab *ngIf=\"${opcuaCount}\" label=\"OPCUA\" value=\"gateway_devices_4\"> </mat-tab>\r\n    <mat-tab *ngIf=\"${bleCount}\" label=\"BLE\" value=\"gateway_devices_6\"></mat-tab>\r\n    <mat-tab *ngIf=\"${requestCount}\" label=\"REQUEST\" value=\"gateway_devices_7\"></mat-tab>\r\n    <mat-tab *ngIf=\"${canCount}\" label=\"CAN\" value=\"gateway_devices_8\"></mat-tab>\r\n    <mat-tab *ngIf=\"${bacnetCount}\" label=\"BACNET\" value=\"gateway_devices_9\"></mat-tab>\r\n    <mat-tab *ngIf=\"${odbcCount}\" label=\"ODBC\" value=\"gateway_devices_10\"></mat-tab>\r\n    <mat-tab *ngIf=\"${restCount}\" label=\"REST\" value=\"gateway_devices_11\"></mat-tab>\r\n    <mat-tab *ngIf=\"${snmpCount}\" label=\"SNMP\" value=\"gateway_devices_12\"></mat-tab>\r\n    <mat-tab *ngIf=\"${ftpCount}\" label=\"FTP\" value=\"gateway_devices_13\"></mat-tab>\r\n    <mat-tab *ngIf=\"${socketCount}\" label=\"SOCKET\" value=\"gateway_devices_14\"></mat-tab>\r\n    <mat-tab *ngIf=\"${xmppCount}\" label=\"XMPP\" value=\"gateway_devices_15\"></mat-tab>\r\n    <mat-tab *ngIf=\"${occpCount}\" label=\"OCCP\" value=\"gateway_devices_16\"></mat-tab>\r\n    <mat-tab *ngIf=\"${customCount}\" label=\"CUSTOM\" value=\"gateway_devices_17\"></mat-tab>\r\n  </mat-tab-group><tb-dashboard-state *ngIf=\"selectedTabIndex == 1\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_1\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 2\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_2\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 3\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_3\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 4\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_4\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 6\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_6\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 7\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_7\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 8\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_8\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 9\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_9\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 10\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_10\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 11\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_11\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 12\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_12\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 13\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_13\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 14\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_14\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 15\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_15\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 16\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_16\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 17\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_17\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"!selectedTabIndex\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_0\"></tb-dashboard-state>\r\n</div>\r\n",
+            "markdownTextPattern": "<div style=\"width: 100%; height: 100%; padding: 0;\" fxFlex fxLayout=\"column\">\n  <mat-tab-group class=devices-tabs>\n    <mat-tab label=\"All\" value=\"gateway_devices_0\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_0\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${mqttCount}\" label=\"MQTT\" value=\"gateway_devices_1\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_1\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${modbusCount}\" label=\"MODBUS\" value=\"gateway_devices_2\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_2\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${grpcCount}\" label=\"GRPC\" value=\"gateway_devices_3\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_3\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${opcuaCount}\" label=\"OPCUA\" value=\"gateway_devices_4\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_4\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${bleCount}\" label=\"BLE\" value=\"gateway_devices_6\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_6\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${requestCount}\" label=\"REQUEST\" value=\"gateway_devices_7\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_7\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${canCount}\" label=\"CAN\" value=\"gateway_devices_8\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_8\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${bacnetCount}\" label=\"BACNET\" value=\"gateway_devices_9\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_9\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${odbcCount}\" label=\"ODBC\" value=\"gateway_devices_10\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_10\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${restCount}\" label=\"REST\" value=\"gateway_devices_11\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_11\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${snmpCount}\" label=\"SNMP\" value=\"gateway_devices_12\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_12\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${ftpCount}\" label=\"FTP\" value=\"gateway_devices_13\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_13\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${socketCount}\" label=\"SOCKET\" value=\"gateway_devices_14\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_14\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${xmppCount}\" label=\"XMPP\" value=\"gateway_devices_15\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_15\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${ocppCount}\" label=\"OCPP\" value=\"gateway_devices_16\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_16\"></tb-dashboard-state>\n    </mat-tab>\n    <mat-tab *ngIf=\"${customCount}\" label=\"CUSTOM\" value=\"gateway_devices_17\">\n      <tb-dashboard-state [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_17\"></tb-dashboard-state>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n",
             "applyDefaultMarkdownStyle": false,
-            "markdownCss": ".mat-mdc-form-field-subscript-wrapper {\n    display: none !important;\n}"
+            "markdownCss": ".mat-mdc-form-field-subscript-wrapper {\n    display: none !important;\n}\n\n.devices-tabs {\n    height: 100%;\n}\n\n::ng-deep .mat-mdc-tab-body-wrapper {\n  height: 100%;\n}"
           },
           "title": "Gateway devices",
           "showTitleIcon": false,
@@ -6208,7 +6216,7 @@
         }
       },
       "gateway_devices_16": {
-        "name": "gateway_devices_occp",
+        "name": "gateway_devices_ocpp",
         "root": false,
         "layouts": {
           "main": {
diff --git a/application/src/main/data/resources/js_modules/gateway-management-extension.js b/application/src/main/data/resources/js_modules/gateway-management-extension.js
new file mode 100644
index 0000000000..76693b0890
--- /dev/null
+++ b/application/src/main/data/resources/js_modules/gateway-management-extension.js
@@ -0,0 +1 @@
+System.register(["@angular/core","@angular/material/sort","@angular/material/table","@angular/material/paginator","@shared/public-api","@angular/common","@angular/material/divider","@angular/material/tabs","@angular/flex-layout/flex","@angular/flex-layout/extended","@ngx-translate/core","@core/public-api","@angular/forms","@angular/material/button","@angular/material/card","@angular/material/input","@angular/material/form-field","@angular/material/select","@angular/material/core","rxjs","rxjs/operators","tslib","@angular/material/tooltip","@angular/cdk/collections","@angular/material/icon","@angular/material/expansion","@shared/directives/truncate-with-tooltip.directive","@shared/components/dialog/json-object-edit-dialog.component","@angular/material/dialog","@shared/components/directives/tb-json-to-string.directive","@angular/material/slide-toggle","@shared/components/button/toggle-password.component","@shared/components/toggle-header.component","@shared/components/toggle-select.component","@ngrx/store","@angular/router","@angular/material/toolbar","@shared/components/json-content.component","@shared/import-export/import-export.service","@shared/components/toast.directive","@angular/material/checkbox","@shared/components/entity/entity-gateway-select.component","@shared/components/help.component","@shared/components/hint-tooltip-icon.component","@shared/components/help-popup.component","@shared/components/popover.service","@angular/material/chips","@shared/components/icon.component","@angular/material/menu","@shared/decorators/coercion","@shared/components/json-object-edit.component","@shared/components/markdown.component","@shared/components/tb-error.component","@shared/components/file-input.component","@shared/components/button/copy-button.component"],(function(e){"use strict";var t,n,a,o,i,r,s,l,c,p,m,d,u,g,f,y,b,h,x,v,w,C,T,S,k,L,F,I,A,N,M,E,q,D,P,G,O,R,V,B,U,_,H,z,W,j,K,Y,Q,J,X,Z,ee,te,ne,ae,oe,ie,re,se,le,ce,pe,me,de,ue,ge,fe,ye,be,he,xe,ve,we,Ce,Te,Se,ke,Le,Fe,Ie,Ae,Ne,Me,Ee,qe,De,Pe,Ge,Oe,Re,Ve,Be,Ue,_e,He,ze,We,je,Ke,$e,Ye,Qe,Je,Xe,Ze,et,tt,nt,at,ot,it,rt,st,lt,ct,pt,mt,dt,ut,gt,ft,yt,bt,ht,xt,vt,wt,Ct,Tt,St;return{setters:[function(e){t=e,n=e.Component,a=e.Input,o=e.ViewChild,i=e.EventEmitter,r=e.inject,s=e.Directive,l=e.Output,c=e.Pipe,p=e.Inject,m=e.forwardRef,d=e.ChangeDetectionStrategy,u=e.NgModule},function(e){g=e.MatSort,f=e},function(e){y=e.MatTableDataSource,b=e},function(e){h=e.MatPaginator,x=e},function(e){v=e.helpBaseUrl,w=e.Direction,C=e.PageLink,T=e.DataKeyType,S=e.LegendPosition,k=e.NULL_UUID,L=e.AttributeScope,F=e.DatasourceType,I=e.EntityType,A=e.widgetType,N=e.coerceBoolean,M=e.emptyPageData,E=e.isClientSideTelemetryType,q=e.TelemetrySubscriber,D=e.SharedModule,P=e.DialogComponent,G=e.ContentType,O=e.PageComponent,R=e.TbTableDatasource,V=e.HOUR,B=e.coerceNumber,U=e.DeviceCredentialsType},function(e){_=e,H=e.CommonModule},function(e){z=e},function(e){W=e},function(e){j=e},function(e){K=e},function(e){Y=e,Q=e.TranslateModule},function(e){J=e.deepClone,X=e,Z=e.deleteNullProperties,ee=e.isEqual,te=e.isNumber,ne=e.isString,ae=e.WINDOW,oe=e.isLiteralObject,ie=e.isDefinedAndNotNull,re=e.isUndefinedOrNull,se=e.generateSecret,le=e.isObject,ce=e.camelCase,pe=e.deepTrim},function(e){me=e,de=e.FormBuilder,ue=e.Validators,ge=e.NG_VALUE_ACCESSOR,fe=e.NG_VALIDATORS,ye=e.FormControl},function(e){be=e},function(e){he=e},function(e){xe=e},function(e){ve=e},function(e){we=e},function(e){Ce=e,Te=e.ErrorStateMatcher},function(e){Se=e.Subject,ke=e.fromEvent,Le=e.BehaviorSubject,Fe=e.ReplaySubject,Ie=e.of,Ae=e.forkJoin},function(e){Ne=e.takeUntil,Me=e.filter,Ee=e.tap,qe=e.catchError,De=e.map,Pe=e.publishReplay,Ge=e.refCount,Oe=e.take,Re=e.startWith,Ve=e.debounceTime,Be=e.distinctUntilChanged,Ue=e.switchMap,_e=e.mergeMap},function(e){He=e.__decorate},function(e){ze=e,We=e.MatTooltip},function(e){je=e.SelectionModel},function(e){Ke=e},function(e){$e=e},function(e){Ye=e},function(e){Qe=e.JsonObjectEditDialogComponent},function(e){Je=e,Xe=e.MAT_DIALOG_DATA},function(e){Ze=e},function(e){et=e},function(e){tt=e},function(e){nt=e},function(e){at=e},function(e){ot=e},function(e){it=e},function(e){rt=e},function(e){st=e},function(e){lt=e},function(e){ct=e},function(e){pt=e},function(e){mt=e},function(e){dt=e},function(e){ut=e},function(e){gt=e},function(e){ft=e},function(e){yt=e},function(e){bt=e},function(e){ht=e},function(e){xt=e.coerceBoolean},function(e){vt=e},function(e){wt=e},function(e){Ct=e},function(e){Tt=e},function(e){St=e}],execute:function(){const kt=e("noLeadTrailSpacesRegex",/^\S+(?: \S+)*$/),Lt=e("integerRegex",/^[-+]?\d+$/),Ft=e("nonZeroFloat",/^-?(?!0(\.0+)?$)\d+(\.\d+)?$/),It=e("jsonRequired",(e=>e.value?null:{required:!0}));var At,Nt,Mt,Et;e("StorageTypes",At),function(e){e.MEMORY="memory",e.FILE="file",e.SQLITE="sqlite"}(At||e("StorageTypes",At={})),e("DeviceGatewayStatus",Nt),function(e){e.EXCEPTION="EXCEPTION"}(Nt||e("DeviceGatewayStatus",Nt={})),e("GatewayLogLevel",Mt),function(e){e.NONE="NONE",e.CRITICAL="CRITICAL",e.ERROR="ERROR",e.WARNING="WARNING",e.INFO="INFO",e.DEBUG="DEBUG",e.TRACE="TRACE"}(Mt||e("GatewayLogLevel",Mt={})),e("PortLimits",Et),function(e){e[e.MIN=1]="MIN",e[e.MAX=65535]="MAX"}(Et||e("PortLimits",Et={}));const qt=e("GatewayStatus",{...Mt,...Nt});var Dt,Pt;e("LogSavingPeriod",Dt),function(e){e.days="D",e.hours="H",e.minutes="M",e.seconds="S"}(Dt||e("LogSavingPeriod",Dt={})),e("LocalLogsConfigs",Pt),function(e){e.service="service",e.connector="connector",e.converter="converter",e.tb_connection="tb_connection",e.storage="storage",e.extension="extension"}(Pt||e("LocalLogsConfigs",Pt={}));const Gt=e("LocalLogsConfigTranslateMap",new Map([[Pt.service,"Service"],[Pt.connector,"Connector"],[Pt.converter,"Converter"],[Pt.tb_connection,"TB Connection"],[Pt.storage,"Storage"],[Pt.extension,"Extension"]])),Ot=e("LogSavingPeriodTranslations",new Map([[Dt.days,"gateway.logs.days"],[Dt.hours,"gateway.logs.hours"],[Dt.minutes,"gateway.logs.minutes"],[Dt.seconds,"gateway.logs.seconds"]])),Rt=e("StorageTypesTranslationMap",new Map([[At.MEMORY,"gateway.storage-types.memory-storage"],[At.FILE,"gateway.storage-types.file-storage"],[At.SQLITE,"gateway.storage-types.sqlite"]]));var Vt;e("SecurityTypes",Vt),function(e){e.ACCESS_TOKEN="accessToken",e.USERNAME_PASSWORD="usernamePassword",e.TLS_ACCESS_TOKEN="tlsAccessToken",e.TLS_PRIVATE_KEY="tlsPrivateKey"}(Vt||e("SecurityTypes",Vt={}));const Bt=e("GecurityTypesTranslationsMap",new Map([[Vt.ACCESS_TOKEN,"gateway.security-types.access-token"],[Vt.USERNAME_PASSWORD,"gateway.security-types.username-password"],[Vt.TLS_ACCESS_TOKEN,"gateway.security-types.tls-access-token"]]));var Ut,_t;e("GatewayVersion",Ut),function(e){e.Current="3.5.2",e.Legacy="legacy"}(Ut||e("GatewayVersion",Ut={})),e("ConnectorType",_t),function(e){e.MQTT="mqtt",e.MODBUS="modbus",e.GRPC="grpc",e.OPCUA="opcua",e.BLE="ble",e.REQUEST="request",e.CAN="can",e.BACNET="bacnet",e.ODBC="odbc",e.REST="rest",e.SNMP="snmp",e.FTP="ftp",e.SOCKET="socket",e.XMPP="xmpp",e.OCPP="ocpp",e.CUSTOM="custom"}(_t||e("ConnectorType",_t={}));const Ht=e("GatewayConnectorDefaultTypesTranslatesMap",new Map([[_t.MQTT,"MQTT"],[_t.MODBUS,"MODBUS"],[_t.GRPC,"GRPC"],[_t.OPCUA,"OPCUA"],[_t.BLE,"BLE"],[_t.REQUEST,"REQUEST"],[_t.CAN,"CAN"],[_t.BACNET,"BACNET"],[_t.ODBC,"ODBC"],[_t.REST,"REST"],[_t.SNMP,"SNMP"],[_t.FTP,"FTP"],[_t.SOCKET,"SOCKET"],[_t.XMPP,"XMPP"],[_t.OCPP,"OCPP"],[_t.CUSTOM,"CUSTOM"]])),zt=e("ModbusFunctionCodeTranslationsMap",new Map([[1,"gateway.function-codes.read-coils"],[2,"gateway.function-codes.read-discrete-inputs"],[3,"gateway.function-codes.read-multiple-holding-registers"],[4,"gateway.function-codes.read-input-registers"],[5,"gateway.function-codes.write-single-coil"],[6,"gateway.function-codes.write-single-holding-register"],[15,"gateway.function-codes.write-multiple-coils"],[16,"gateway.function-codes.write-multiple-holding-registers"]]));var Wt;e("BACnetRequestTypes",Wt),function(e){e.WriteProperty="writeProperty",e.ReadProperty="readProperty"}(Wt||e("BACnetRequestTypes",Wt={}));const jt=e("BACnetRequestTypesTranslates",new Map([[Wt.WriteProperty,"gateway.rpc.write-property"],[Wt.ReadProperty,"gateway.rpc.read-property"]]));var Kt;e("BACnetObjectTypes",Kt),function(e){e.BinaryInput="binaryInput",e.BinaryOutput="binaryOutput",e.AnalogInput="analogInput",e.AnalogOutput="analogOutput",e.BinaryValue="binaryValue",e.AnalogValue="analogValue"}(Kt||e("BACnetObjectTypes",Kt={}));const $t=e("BACnetObjectTypesTranslates",new Map([[Kt.AnalogOutput,"gateway.rpc.analog-output"],[Kt.AnalogInput,"gateway.rpc.analog-input"],[Kt.BinaryOutput,"gateway.rpc.binary-output"],[Kt.BinaryInput,"gateway.rpc.binary-input"],[Kt.BinaryValue,"gateway.rpc.binary-value"],[Kt.AnalogValue,"gateway.rpc.analog-value"]]));var Yt;e("BLEMethods",Yt),function(e){e.WRITE="write",e.READ="read",e.SCAN="scan"}(Yt||e("BLEMethods",Yt={}));const Qt=e("BLEMethodsTranslates",new Map([[Yt.WRITE,"gateway.rpc.write"],[Yt.READ,"gateway.rpc.read"],[Yt.SCAN,"gateway.rpc.scan"]]));var Jt,Xt;e("CANByteOrders",Jt),function(e){e.LITTLE="LITTLE",e.BIG="BIG"}(Jt||e("CANByteOrders",Jt={})),e("SocketMethodProcessings",Xt),function(e){e.WRITE="write"}(Xt||e("SocketMethodProcessings",Xt={}));const Zt=e("SocketMethodProcessingsTranslates",new Map([[Xt.WRITE,"gateway.rpc.write"]]));var en;e("SNMPMethods",en),function(e){e.SET="set",e.MULTISET="multiset",e.GET="get",e.BULKWALK="bulkwalk",e.TABLE="table",e.MULTIGET="multiget",e.GETNEXT="getnext",e.BULKGET="bulkget",e.WALKS="walk"}(en||e("SNMPMethods",en={}));const tn=e("SNMPMethodsTranslations",new Map([[en.SET,"gateway.rpc.set"],[en.MULTISET,"gateway.rpc.multiset"],[en.GET,"gateway.rpc.get"],[en.BULKWALK,"gateway.rpc.bulk-walk"],[en.TABLE,"gateway.rpc.table"],[en.MULTIGET,"gateway.rpc.multi-get"],[en.GETNEXT,"gateway.rpc.get-next"],[en.BULKGET,"gateway.rpc.bulk-get"],[en.WALKS,"gateway.rpc.walk"]]));var nn,an,on,rn,sn,ln;e("HTTPMethods",nn),function(e){e.CONNECT="CONNECT",e.DELETE="DELETE",e.GET="GET",e.HEAD="HEAD",e.OPTIONS="OPTIONS",e.PATCH="PATCH",e.POST="POST",e.PUT="PUT",e.TRACE="TRACE"}(nn||e("HTTPMethods",nn={})),e("SocketEncodings",an),function(e){e.UTF_8="utf-8"}(an||e("SocketEncodings",an={})),e("ConfigurationModes",on),function(e){e.BASIC="basic",e.ADVANCED="advanced"}(on||e("ConfigurationModes",on={})),e("SecurityType",rn),function(e){e.ANONYMOUS="anonymous",e.BASIC="basic",e.CERTIFICATES="certificates"}(rn||e("SecurityType",rn={})),e("ReportStrategyType",sn),function(e){e.OnChange="ON_CHANGE",e.OnReportPeriod="ON_REPORT_PERIOD",e.OnChangeOrReportPeriod="ON_CHANGE_OR_REPORT_PERIOD"}(sn||e("ReportStrategyType",sn={})),e("ReportStrategyDefaultValue",ln),function(e){e[e.Connector=6e4]="Connector",e[e.Device=3e4]="Device",e[e.Key=15e3]="Key"}(ln||e("ReportStrategyDefaultValue",ln={}));const cn=e("ReportStrategyTypeTranslationsMap",new Map([[sn.OnChange,"gateway.report-strategy.on-change"],[sn.OnReportPeriod,"gateway.report-strategy.on-report-period"],[sn.OnChangeOrReportPeriod,"gateway.report-strategy.on-change-or-report-period"]]));var pn;e("ModeType",pn),function(e){e.NONE="None",e.SIGN="Sign",e.SIGNANDENCRYPT="SignAndEncrypt"}(pn||e("ModeType",pn={}));const mn=e("SecurityTypeTranslationsMap",new Map([[rn.ANONYMOUS,"gateway.broker.security-types.anonymous"],[rn.BASIC,"gateway.broker.security-types.basic"],[rn.CERTIFICATES,"gateway.broker.security-types.certificates"]]));var dn;e("RestSecurityType",dn),function(e){e.ANONYMOUS="anonymous",e.BASIC="basic"}(dn||e("RestSecurityType",dn={}));const un=e("RestSecurityTypeTranslationsMap",new Map([[dn.ANONYMOUS,"gateway.broker.security-types.anonymous"],[dn.BASIC,"gateway.broker.security-types.basic"]])),gn=e("MqttVersions",[{name:3.1,value:3},{name:3.11,value:4},{name:5,value:5}]);var fn;e("MappingType",fn),function(e){e.DATA="data",e.REQUESTS="requests",e.OPCUA="OPCua"}(fn||e("MappingType",fn={}));const yn=e("MappingTypeTranslationsMap",new Map([[fn.DATA,"gateway.data-mapping"],[fn.REQUESTS,"gateway.requests-mapping"],[fn.OPCUA,"gateway.data-mapping"]])),bn=e("MappingHintTranslationsMap",new Map([[fn.DATA,"gateway.data-mapping-hint"],[fn.OPCUA,"gateway.opcua-data-mapping-hint"],[fn.REQUESTS,"gateway.requests-mapping-hint"]])),hn=e("HelpLinkByMappingTypeMap",new Map([[fn.DATA,v+"/docs/iot-gateway/config/mqtt/#section-mapping"],[fn.OPCUA,v+"/docs/iot-gateway/config/opc-ua/#section-mapping"],[fn.REQUESTS,v+"/docs/iot-gateway/config/mqtt/#requests-mapping"]])),xn=e("QualityTypes",[0,1,2]),vn=e("QualityTypeTranslationsMap",new Map([[0,"gateway.qos.at-most-once"],[1,"gateway.qos.at-least-once"],[2,"gateway.qos.exactly-once"]]));var wn;e("ConvertorType",wn),function(e){e.JSON="json",e.BYTES="bytes",e.CUSTOM="custom"}(wn||e("ConvertorType",wn={}));const Cn=e("ConvertorTypeTranslationsMap",new Map([[wn.JSON,"gateway.JSON"],[wn.BYTES,"gateway.bytes"],[wn.CUSTOM,"gateway.custom"]]));var Tn,Sn,kn;e("SourceType",Tn),function(e){e.MSG="message",e.TOPIC="topic",e.CONST="constant"}(Tn||e("SourceType",Tn={})),e("OPCUaSourceType",Sn),function(e){e.PATH="path",e.IDENTIFIER="identifier",e.CONST="constant"}(Sn||e("OPCUaSourceType",Sn={})),e("DeviceInfoType",kn),function(e){e.FULL="full",e.PARTIAL="partial"}(kn||e("DeviceInfoType",kn={}));const Ln=e("SourceTypeTranslationsMap",new Map([[Tn.MSG,"gateway.source-type.msg"],[Tn.TOPIC,"gateway.source-type.topic"],[Tn.CONST,"gateway.source-type.const"],[Sn.PATH,"gateway.source-type.path"],[Sn.IDENTIFIER,"gateway.source-type.identifier"],[Sn.CONST,"gateway.source-type.const"]]));var Fn,In;e("ServerSideRpcType",Fn),function(e){e.WithResponse="twoWay",e.WithoutResponse="oneWay"}(Fn||e("ServerSideRpcType",Fn={})),e("RequestType",In),function(e){e.CONNECT_REQUEST="connectRequests",e.DISCONNECT_REQUEST="disconnectRequests",e.ATTRIBUTE_REQUEST="attributeRequests",e.ATTRIBUTE_UPDATE="attributeUpdates",e.SERVER_SIDE_RPC="serverSideRpc"}(In||e("RequestType",In={}));const An=e("RequestTypesTranslationsMap",new Map([[In.CONNECT_REQUEST,"gateway.request.connect-request"],[In.DISCONNECT_REQUEST,"gateway.request.disconnect-request"],[In.ATTRIBUTE_REQUEST,"gateway.request.attribute-request"],[In.ATTRIBUTE_UPDATE,"gateway.request.attribute-update"],[In.SERVER_SIDE_RPC,"gateway.request.rpc-connection"]]));var Nn;e("MappingKeysType",Nn),function(e){e.ATTRIBUTES="attributes",e.TIMESERIES="timeseries",e.CUSTOM="extensionConfig",e.RPC_METHODS="rpc_methods",e.ATTRIBUTES_UPDATES="attributes_updates"}(Nn||e("MappingKeysType",Nn={}));const Mn=e("MappingKeysPanelTitleTranslationsMap",new Map([[Nn.ATTRIBUTES,"gateway.attributes"],[Nn.TIMESERIES,"gateway.timeseries"],[Nn.CUSTOM,"gateway.keys"],[Nn.ATTRIBUTES_UPDATES,"gateway.attribute-updates"],[Nn.RPC_METHODS,"gateway.rpc-methods"]])),En=e("MappingKeysAddKeyTranslationsMap",new Map([[Nn.ATTRIBUTES,"gateway.add-attribute"],[Nn.TIMESERIES,"gateway.add-timeseries"],[Nn.CUSTOM,"gateway.add-key"],[Nn.ATTRIBUTES_UPDATES,"gateway.add-attribute-update"],[Nn.RPC_METHODS,"gateway.add-rpc-method"]])),qn=e("MappingKeysDeleteKeyTranslationsMap",new Map([[Nn.ATTRIBUTES,"gateway.delete-attribute"],[Nn.TIMESERIES,"gateway.delete-timeseries"],[Nn.CUSTOM,"gateway.delete-key"],[Nn.ATTRIBUTES_UPDATES,"gateway.delete-attribute-update"],[Nn.RPC_METHODS,"gateway.delete-rpc-method"]])),Dn=e("MappingKeysNoKeysTextTranslationsMap",new Map([[Nn.ATTRIBUTES,"gateway.no-attributes"],[Nn.TIMESERIES,"gateway.no-timeseries"],[Nn.CUSTOM,"gateway.no-keys"],[Nn.ATTRIBUTES_UPDATES,"gateway.no-attribute-updates"],[Nn.RPC_METHODS,"gateway.no-rpc-methods"]]));var Pn,Gn,On;e("ServerSideRPCType",Pn),function(e){e.ONE_WAY="oneWay",e.TWO_WAY="twoWay"}(Pn||e("ServerSideRPCType",Pn={})),e("MappingValueType",Gn),function(e){e.STRING="string",e.INTEGER="integer",e.DOUBLE="double",e.BOOLEAN="boolean"}(Gn||e("MappingValueType",Gn={})),e("ModifierType",On),function(e){e.DIVIDER="divider",e.MULTIPLIER="multiplier"}(On||e("ModifierType",On={}));const Rn=e("ModifierTypesMap",new Map([[On.DIVIDER,{name:"gateway.divider",icon:"mdi:division"}],[On.MULTIPLIER,{name:"gateway.multiplier",icon:"mdi:multiplication"}]])),Vn=e("mappingValueTypesMap",new Map([[Gn.STRING,{name:"value.string",icon:"mdi:format-text"}],[Gn.INTEGER,{name:"value.integer",icon:"mdi:numeric"}],[Gn.DOUBLE,{name:"value.double",icon:"mdi:numeric"}],[Gn.BOOLEAN,{name:"value.boolean",icon:"mdi:checkbox-marked-outline"}]])),Bn=e("DataConversionTranslationsMap",new Map([[wn.JSON,"gateway.JSON-hint"],[wn.BYTES,"gateway.bytes-hint"],[wn.CUSTOM,"gateway.custom-hint"]]));var Un;e("SecurityPolicy",Un),function(e){e.BASIC128="Basic128Rsa15",e.BASIC256="Basic256",e.BASIC256SHA="Basic256Sha256"}(Un||e("SecurityPolicy",Un={}));const _n=e("SecurityPolicyTypes",[{value:Un.BASIC128,name:"Basic128RSA15"},{value:Un.BASIC256,name:"Basic256"},{value:Un.BASIC256SHA,name:"Basic256SHA256"}]);var Hn;e("ModbusProtocolType",Hn),function(e){e.TCP="tcp",e.UDP="udp",e.Serial="serial"}(Hn||e("ModbusProtocolType",Hn={}));const zn=e("ModbusProtocolLabelsMap",new Map([[Hn.TCP,"TCP"],[Hn.UDP,"UDP"],[Hn.Serial,"Serial"]]));var Wn,jn;e("ModbusMethodType",Wn),function(e){e.SOCKET="socket",e.RTU="rtu"}(Wn||e("ModbusMethodType",Wn={})),e("ModbusSerialMethodType",jn),function(e){e.RTU="rtu",e.ASCII="ascii"}(jn||e("ModbusSerialMethodType",jn={}));const Kn=e("ModbusMethodLabelsMap",new Map([[Wn.SOCKET,"Socket"],[Wn.RTU,"RTU"],[jn.ASCII,"ASCII"]])),$n=e("ModbusByteSizes",[5,6,7,8]);var Yn;e("ModbusParity",Yn),function(e){e.Even="E",e.Odd="O",e.None="N"}(Yn||e("ModbusParity",Yn={}));const Qn=e("ModbusParityLabelsMap",new Map([[Yn.Even,"Even"],[Yn.Odd,"Odd"],[Yn.None,"None"]]));var Jn,Xn;e("ModbusOrderType",Jn),function(e){e.BIG="BIG",e.LITTLE="LITTLE"}(Jn||e("ModbusOrderType",Jn={})),e("ModbusRegisterType",Xn),function(e){e.HoldingRegisters="holding_registers",e.CoilsInitializer="coils_initializer",e.InputRegisters="input_registers",e.DiscreteInputs="discrete_inputs"}(Xn||e("ModbusRegisterType",Xn={}));const Zn=e("ModbusRegisterTranslationsMap",new Map([[Xn.HoldingRegisters,"gateway.holding_registers"],[Xn.CoilsInitializer,"gateway.coils_initializer"],[Xn.InputRegisters,"gateway.input_registers"],[Xn.DiscreteInputs,"gateway.discrete_inputs"]]));var ea;e("ModbusDataType",ea),function(e){e.STRING="string",e.BYTES="bytes",e.BITS="bits",e.INT8="8int",e.UINT8="8uint",e.FLOAT8="8float",e.INT16="16int",e.UINT16="16uint",e.FLOAT16="16float",e.INT32="32int",e.UINT32="32uint",e.FLOAT32="32float",e.INT64="64int",e.UINT64="64uint",e.FLOAT64="64float"}(ea||e("ModbusDataType",ea={}));const ta=e("ModbusEditableDataTypes",[ea.BYTES,ea.BITS,ea.STRING]);var na,aa;e("ModbusObjectCountByDataType",na),function(e){e[e["8int"]=1]="8int",e[e["8uint"]=1]="8uint",e[e["8float"]=1]="8float",e[e["16int"]=1]="16int",e[e["16uint"]=1]="16uint",e[e["16float"]=1]="16float",e[e["32int"]=2]="32int",e[e["32uint"]=2]="32uint",e[e["32float"]=2]="32float",e[e["64int"]=4]="64int",e[e["64uint"]=4]="64uint",e[e["64float"]=4]="64float"}(na||e("ModbusObjectCountByDataType",na={})),e("ModbusValueKey",aa),function(e){e.ATTRIBUTES="attributes",e.TIMESERIES="timeseries",e.ATTRIBUTES_UPDATES="attributeUpdates",e.RPC_REQUESTS="rpc"}(aa||e("ModbusValueKey",aa={}));const oa=e("ModbusKeysPanelTitleTranslationsMap",new Map([[aa.ATTRIBUTES,"gateway.attributes"],[aa.TIMESERIES,"gateway.timeseries"],[aa.ATTRIBUTES_UPDATES,"gateway.attribute-updates"],[aa.RPC_REQUESTS,"gateway.rpc-requests"]])),ia=e("ModbusKeysAddKeyTranslationsMap",new Map([[aa.ATTRIBUTES,"gateway.add-attribute"],[aa.TIMESERIES,"gateway.add-timeseries"],[aa.ATTRIBUTES_UPDATES,"gateway.add-attribute-update"],[aa.RPC_REQUESTS,"gateway.add-rpc-request"]])),ra=e("ModbusKeysDeleteKeyTranslationsMap",new Map([[aa.ATTRIBUTES,"gateway.delete-attribute"],[aa.TIMESERIES,"gateway.delete-timeseries"],[aa.ATTRIBUTES_UPDATES,"gateway.delete-attribute-update"],[aa.RPC_REQUESTS,"gateway.delete-rpc-request"]])),sa=e("ModbusKeysNoKeysTextTranslationsMap",new Map([[aa.ATTRIBUTES,"gateway.no-attributes"],[aa.TIMESERIES,"gateway.no-timeseries"],[aa.ATTRIBUTES_UPDATES,"gateway.no-attribute-updates"],[aa.RPC_REQUESTS,"gateway.no-rpc-requests"]])),la=e("ModbusBaudrates",[4800,9600,19200,38400,57600,115200,230400,460800,921600]);class ca{constructor(){this.displayedColumns=["ts","status","message"],this.gatewayLogLinks=[{name:"General",key:"LOGS"},{name:"Service",key:"SERVICE_LOGS"},{name:"Connection",key:"CONNECTION_LOGS"},{name:"Storage",key:"STORAGE_LOGS"},{key:"EXTENSIONS_LOGS",name:"Extension"}];const e={property:"ts",direction:w.DESC};this.pageLink=new C(10,0,null,e),this.dataSource=new y([])}ngOnInit(){this.updateWidgetTitle()}ngAfterViewInit(){if(this.dataSource.sort=this.sort,this.dataSource.paginator=this.paginator,this.ctx.defaultSubscription.onTimewindowChangeFunction=e=>(this.ctx.defaultSubscription.options.timeWindowConfig=e,this.ctx.defaultSubscription.updateDataSubscriptions(),e),this.ctx.settings.isConnectorLog&&this.ctx.settings.connectorLogState){const e=this.ctx.stateController.getStateParams()[this.ctx.settings.connectorLogState];this.logLinks=[{key:`${e.key}_LOGS`,name:"Connector",filterFn:e=>!e.message.includes("_converter.py")},{key:`${e.key}_LOGS`,name:"Converter",filterFn:e=>e.message.includes("_converter.py")}]}else this.logLinks=this.gatewayLogLinks;this.activeLink=this.logLinks[0],this.changeSubscription()}updateWidgetTitle(){if(this.ctx.settings.isConnectorLog&&this.ctx.settings.connectorLogState){const e=this.ctx.widgetConfig.title,t="${connectorName}";if(e.includes(t)){const n=this.ctx.stateController.getStateParams()[this.ctx.settings.connectorLogState];this.ctx.widgetTitle=e.replace(t,n.key)}}}updateData(){if(this.ctx.defaultSubscription.data.length&&this.ctx.defaultSubscription.data[0]){let e=this.ctx.defaultSubscription.data[0].data.map((e=>{const t={ts:e[0],key:this.activeLink.key,message:e[1],status:"INVALID LOG FORMAT"};try{t.message=/\[(.*)/.exec(e[1])[0]}catch(n){t.message=e[1]}try{t.status=e[1].match(/\|(\w+)\|/)[1]}catch(e){t.status="INVALID LOG FORMAT"}return t}));this.activeLink.filterFn&&(e=e.filter((e=>this.activeLink.filterFn(e)))),this.dataSource.data=e}}onTabChanged(e){this.activeLink=e,this.changeSubscription()}statusClass(e){switch(e){case qt.DEBUG:return"status status-debug";case qt.WARNING:return"status status-warning";case qt.ERROR:case qt.EXCEPTION:return"status status-error";default:return"status status-info"}}statusClassMsg(e){if(e===qt.EXCEPTION)return"msg-status-exception"}trackByLogTs(e,t){return t.ts}changeSubscription(){this.ctx.datasources&&this.ctx.datasources[0].entity&&this.ctx.defaultSubscription.options.datasources&&(this.ctx.defaultSubscription.options.datasources[0].dataKeys=[{name:this.activeLink.key,type:T.timeseries,settings:{}}],this.ctx.defaultSubscription.unsubscribe(),this.ctx.defaultSubscription.updateDataSubscriptions(),this.ctx.defaultSubscription.callbacks.onDataUpdated=()=>{this.updateData()})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ca,deps:[],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:ca,selector:"tb-gateway-logs",inputs:{ctx:"ctx",dialogRef:"dialogRef"},viewQueries:[{propertyName:"searchInputField",first:!0,predicate:["searchInput"],descendants:!0},{propertyName:"sort",first:!0,predicate:g,descendants:!0},{propertyName:"paginator",first:!0,predicate:h,descendants:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<nav mat-tab-nav-bar [tabPanel]="tabPanel">\n  <a mat-tab-link *ngFor="let link of logLinks"\n     (click)="onTabChanged(link)"\n     [active]="activeLink.name === link.name"> {{ link.name }} </a>\n</nav>\n<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n<table mat-table [dataSource]="dataSource" [trackBy]="trackByLogTs"\n       matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"\n       matSortDisableClear>\n  <ng-container matColumnDef="ts">\n    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%">{{ \'widgets.gateway.created-time\' | translate }}</mat-header-cell>\n    <mat-cell *matCellDef="let attribute">\n      {{ attribute.ts | date:\'yyyy-MM-dd HH:mm:ss\' }}\n    </mat-cell>\n  </ng-container>\n  <ng-container matColumnDef="status">\n    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 10%">{{ \'widgets.gateway.level\' | translate }}</mat-header-cell>\n    <mat-cell *matCellDef="let attribute">\n      <span [class]="statusClass(attribute.status)">{{ attribute.status }}</span>\n    </mat-cell>\n  </ng-container>\n  <ng-container matColumnDef="message">\n    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{ \'widgets.gateway.message\' | translate }}</mat-header-cell>\n    <mat-cell *matCellDef="let attribute" [class]="statusClassMsg(attribute.status)">\n      {{ attribute.message }}\n    </mat-cell>\n  </ng-container>\n  <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n  <mat-row class="mat-row-select" *matRowDef="let attribute; columns: displayedColumns;"></mat-row>\n</table>\n<span [fxShow]="dataSource.data.length === 0"\n      fxFlex fxLayoutAlign="center center"\n      class="no-data-found">{{ \'attribute.no-telemetry-text\' | translate }}</span>\n<span fxFlex [fxShow]="dataSource.data.length !== 0"></span>\n<mat-divider></mat-divider>\n<mat-paginator [length]="dataSource.data.length"\n               [pageIndex]="pageLink.page"\n               [pageSize]="pageLink.pageSize"\n               [pageSizeOptions]="[10, 20, 30]"></mat-paginator>\n\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;overflow-x:auto;padding:0}:host .status{border-radius:20px;font-weight:500;padding:5px 15px}:host .status-debug{color:green;background:#0080001a}:host .status-warning{color:orange;background:#ffa5001a}:host .status-error{color:red;background:#ff00001a}:host .status-info{color:#00f;background:#0000801a}:host .msg-status-exception{color:red}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"component",type:b.MatTable,selector:"mat-table, table[mat-table]",exportAs:["matTable"]},{kind:"directive",type:b.MatHeaderCellDef,selector:"[matHeaderCellDef]"},{kind:"directive",type:b.MatHeaderRowDef,selector:"[matHeaderRowDef]",inputs:["matHeaderRowDef","matHeaderRowDefSticky"]},{kind:"directive",type:b.MatColumnDef,selector:"[matColumnDef]",inputs:["matColumnDef"]},{kind:"directive",type:b.MatCellDef,selector:"[matCellDef]"},{kind:"directive",type:b.MatRowDef,selector:"[matRowDef]",inputs:["matRowDefColumns","matRowDefWhen"]},{kind:"directive",type:b.MatHeaderCell,selector:"mat-header-cell, th[mat-header-cell]"},{kind:"directive",type:b.MatCell,selector:"mat-cell, td[mat-cell]"},{kind:"component",type:b.MatHeaderRow,selector:"mat-header-row, tr[mat-header-row]",exportAs:["matHeaderRow"]},{kind:"component",type:b.MatRow,selector:"mat-row, tr[mat-row]",exportAs:["matRow"]},{kind:"component",type:x.MatPaginator,selector:"mat-paginator",inputs:["color","pageIndex","length","pageSize","pageSizeOptions","hidePageSize","showFirstLastButtons","selectConfig","disabled"],outputs:["page"],exportAs:["matPaginator"]},{kind:"directive",type:f.MatSort,selector:"[matSort]",inputs:["matSortActive","matSortStart","matSortDirection","matSortDisableClear","matSortDisabled"],outputs:["matSortChange"],exportAs:["matSort"]},{kind:"component",type:f.MatSortHeader,selector:"[mat-sort-header]",inputs:["mat-sort-header","arrowPosition","start","disabled","sortActionDescription","disableClear"],exportAs:["matSortHeader"]},{kind:"component",type:z.MatDivider,selector:"mat-divider",inputs:["vertical","inset"]},{kind:"component",type:W.MatTabNav,selector:"[mat-tab-nav-bar]",inputs:["fitInkBarToContent","mat-stretch-tabs","animationDuration","backgroundColor","disableRipple","color","tabPanel"],exportAs:["matTabNavBar","matTabNav"]},{kind:"component",type:W.MatTabNavPanel,selector:"mat-tab-nav-panel",inputs:["id"],exportAs:["matTabNavPanel"]},{kind:"component",type:W.MatTabLink,selector:"[mat-tab-link], [matTabLink]",inputs:["active","disabled","disableRipple","tabIndex","id"],exportAs:["matTabLink"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"pipe",type:_.DatePipe,name:"date"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayLogsComponent",ca),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ca,decorators:[{type:n,args:[{selector:"tb-gateway-logs",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<nav mat-tab-nav-bar [tabPanel]="tabPanel">\n  <a mat-tab-link *ngFor="let link of logLinks"\n     (click)="onTabChanged(link)"\n     [active]="activeLink.name === link.name"> {{ link.name }} </a>\n</nav>\n<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n<table mat-table [dataSource]="dataSource" [trackBy]="trackByLogTs"\n       matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"\n       matSortDisableClear>\n  <ng-container matColumnDef="ts">\n    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%">{{ \'widgets.gateway.created-time\' | translate }}</mat-header-cell>\n    <mat-cell *matCellDef="let attribute">\n      {{ attribute.ts | date:\'yyyy-MM-dd HH:mm:ss\' }}\n    </mat-cell>\n  </ng-container>\n  <ng-container matColumnDef="status">\n    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 10%">{{ \'widgets.gateway.level\' | translate }}</mat-header-cell>\n    <mat-cell *matCellDef="let attribute">\n      <span [class]="statusClass(attribute.status)">{{ attribute.status }}</span>\n    </mat-cell>\n  </ng-container>\n  <ng-container matColumnDef="message">\n    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{ \'widgets.gateway.message\' | translate }}</mat-header-cell>\n    <mat-cell *matCellDef="let attribute" [class]="statusClassMsg(attribute.status)">\n      {{ attribute.message }}\n    </mat-cell>\n  </ng-container>\n  <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n  <mat-row class="mat-row-select" *matRowDef="let attribute; columns: displayedColumns;"></mat-row>\n</table>\n<span [fxShow]="dataSource.data.length === 0"\n      fxFlex fxLayoutAlign="center center"\n      class="no-data-found">{{ \'attribute.no-telemetry-text\' | translate }}</span>\n<span fxFlex [fxShow]="dataSource.data.length !== 0"></span>\n<mat-divider></mat-divider>\n<mat-paginator [length]="dataSource.data.length"\n               [pageIndex]="pageLink.page"\n               [pageSize]="pageLink.pageSize"\n               [pageSizeOptions]="[10, 20, 30]"></mat-paginator>\n\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;overflow-x:auto;padding:0}:host .status{border-radius:20px;font-weight:500;padding:5px 15px}:host .status-debug{color:green;background:#0080001a}:host .status-warning{color:orange;background:#ffa5001a}:host .status-error{color:red;background:#ff00001a}:host .status-info{color:#00f;background:#0000801a}:host .msg-status-exception{color:red}\n']}]}],ctorParameters:()=>[],propDecorators:{ctx:[{type:a}],dialogRef:[{type:a}],searchInputField:[{type:o,args:["searchInput"]}],sort:[{type:o,args:[g]}],paginator:[{type:o,args:[h]}]}});class pa{constructor(e,t,n){this.fb=e,this.attributeService=t,this.utils=n,this.isNumericData=!1,this.dataTypeDefined=!1,this.statisticsKeys=[],this.commands=[],this.subscriptionOptions={callbacks:{onDataUpdated:()=>this.ctx.ngZone.run((()=>{this.onDataUpdated()})),onDataUpdateError:(e,t)=>this.ctx.ngZone.run((()=>{this.onDataUpdateError(t)}))},useDashboardTimewindow:!1,legendConfig:{position:S.bottom}},this.init=()=>{this.flotCtx={$scope:this.ctx.$scope,$injector:this.ctx.$injector,utils:this.ctx.utils,isMobile:this.ctx.isMobile,isEdit:this.ctx.isEdit,subscriptionApi:this.ctx.subscriptionApi,detectChanges:this.ctx.detectChanges,settings:this.ctx.settings}},this.updateChart=()=>{},this.resize=()=>{};const a={property:"0",direction:w.DESC};this.pageLink=new C(Number.POSITIVE_INFINITY,0,null,a),this.displayedColumns=["0","1"],this.dataSource=new y([]),this.statisticForm=this.fb.group({statisticKey:[null,[]]}),this.statisticForm.get("statisticKey").valueChanges.subscribe((e=>{this.commandObj=null,this.commands.length&&(this.commandObj=this.commands.find((t=>t.attributeOnGateway===e))),this.subscriptionInfo&&this.createChartsSubscription(this.ctx.defaultSubscription.datasources[0].entity,e)}))}ngAfterViewInit(){if(this.dataSource.sort=this.sort,this.sort.sortChange.subscribe((()=>this.sortData())),this.init(),this.ctx.defaultSubscription.datasources.length){const e=this.ctx.defaultSubscription.datasources[0].entity;if(e.id.id===k)return;this.general?this.attributeService.getEntityTimeseriesLatest(e.id).subscribe((t=>{const n=Object.keys(t).filter((e=>e.includes("ConnectorEventsProduced")||e.includes("ConnectorEventsSent")));this.createGeneralChartsSubscription(e,n)})):this.attributeService.getEntityAttributes(e.id,L.SHARED_SCOPE,["general_configuration"]).subscribe((t=>{t&&t.length&&(this.commands=t[0].value.statistics.commands,!this.statisticForm.get("statisticKey").value&&this.commands&&this.commands.length&&(this.statisticForm.get("statisticKey").setValue(this.commands[0].attributeOnGateway),this.createChartsSubscription(e,this.commands[0].attributeOnGateway)))}))}}navigateToStatistics(){const e=J(this.ctx.stateController.getStateParams());this.ctx.stateController.openState("configuration",e)}sortData(){this.dataSource.sortData(this.dataSource.data,this.sort)}onLegendKeyHiddenChange(e){this.legendData.keys[e].dataKey.hidden=!this.legendData.keys[e].dataKey.hidden,this.subscription.updateDataVisibility(e)}createChartsSubscription(e,t){const n=[{type:F.entity,entityType:I.DEVICE,entityId:e.id.id,entityName:e.name,timeseries:[]}];n[0].timeseries=[{name:t,label:t}],this.subscriptionInfo=n,this.changeSubscription(n),this.ctx.defaultSubscription.unsubscribe()}createGeneralChartsSubscription(e,t){const n=[{type:F.entity,entityType:I.DEVICE,entityId:e.id.id,entityName:e.name,timeseries:[]}];n[0].timeseries=[],t?.length&&t.forEach((e=>{n[0].timeseries.push({name:e,label:e})})),this.ctx.defaultSubscription.datasources[0].dataKeys.forEach((e=>{n[0].timeseries.push({name:e.name,label:e.label})})),this.changeSubscription(n),this.ctx.defaultSubscription.unsubscribe()}reset(){this.resize$&&this.resize$.disconnect(),this.subscription&&this.subscription.unsubscribe()}onDataUpdateError(e){const t=this.utils.parseException(e);let n=t.name;t.message&&(n+=": "+t.message),console.error(n)}onDataUpdated(){this.isDataOnlyNumbers(),this.isNumericData&&(this.chartInited||this.initChart())}initChart(){this.chartInited=!0,this.flotCtx.$container=$(this.statisticChart.nativeElement),this.resize$.observe(this.statisticChart.nativeElement)}isDataOnlyNumbers(){this.general?this.isNumericData=!0:(this.dataSource.data=this.subscription.data.length?this.subscription.data[0].data:[],this.dataSource.data.length&&!this.dataTypeDefined&&(this.dataTypeDefined=!0,this.isNumericData=this.dataSource.data.every((e=>!isNaN(+e[1])))))}changeSubscription(e){this.subscription&&this.reset(),this.ctx.datasources[0].entity&&this.ctx.subscriptionApi.createSubscriptionFromInfo(A.timeseries,e,this.subscriptionOptions,!1,!0).subscribe((e=>{this.dataTypeDefined=!1,this.subscription=e,this.isDataOnlyNumbers(),this.legendData=this.subscription.legendData,this.flotCtx.defaultSubscription=e,this.resize$=new ResizeObserver((()=>{this.resize()})),this.ctx.detectChanges(),this.isNumericData&&this.initChart()}))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:pa,deps:[{token:me.FormBuilder},{token:X.AttributeService},{token:X.UtilsService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:pa,selector:"tb-gateway-statistics",inputs:{ctx:"ctx",general:"general"},viewQueries:[{propertyName:"sort",first:!0,predicate:g,descendants:!0},{propertyName:"statisticChart",first:!0,predicate:["statisticChart"],descendants:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="statistics-container" fxLayout="row" fxLayout.lt-md="column">\n  <mat-card [formGroup]="statisticForm" *ngIf="!general">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n      <mat-label>{{ \'gateway.statistics.statistic\' | translate }}</mat-label>\n      <mat-select formControlName="statisticKey">\n        <mat-option *ngFor="let key of statisticsKeys" [value]="key">\n          {{ key }}\n        </mat-option>\n        <mat-option *ngFor="let command of commands" [value]="command.attributeOnGateway">\n          {{ command.attributeOnGateway }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-error\n      *ngIf="!statisticsKeys.length && !commands.length">\n      {{ \'gateway.statistics.statistic-commands-empty\' | translate }}\n    </mat-error>\n    <div>\n      <button mat-flat-button color="primary" (click)="navigateToStatistics()">\n        {{ \'gateway.statistics.statistics-button\' | translate }}\n      </button>\n    </div>\n    <mat-form-field class="mat-block" *ngIf="commandObj">\n      <mat-label>{{ \'gateway.statistics.command\' | translate }}</mat-label>\n      <input matInput [value]="commandObj.command" disabled>\n    </mat-form-field>\n  </mat-card>\n  <div class="chart-box" fxLayout="column">\n    <div class="chart-container" #statisticChart [fxShow]="isNumericData"></div>\n    <table [fxShow]="!isNumericData" mat-table [dataSource]="dataSource"\n           matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"\n           matSortDisableClear>\n      <ng-container matColumnDef="0">\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ \'widgets.gateway.created-time\' | translate }}\n        </mat-header-cell>\n        <mat-cell *matCellDef="let row; let rowIndex = index">\n          {{ row[0]| date:\'yyyy-MM-dd HH:mm:ss\' }}\n        </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef="1">\n        <mat-header-cell *matHeaderCellDef mat-sort-header\n                         style="width: 70%">{{ \'widgets.gateway.message\' | translate }}\n        </mat-header-cell>\n        <mat-cell *matCellDef="let row">\n          {{ row[1] }}\n        </mat-cell>\n      </ng-container>\n      <mat-header-row class="mat-row-select"\n                      *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n      <mat-row class="mat-row-select"\n               *matRowDef="let row; columns: displayedColumns;"></mat-row>\n    </table>\n    <span [fxShow]="dataSource.data.length === 0 && !isNumericData"\n          fxLayoutAlign="center center"\n          class="no-data-found">{{ \'attribute.no-telemetry-text\' | translate }}</span>\n    <div fxFlex class="legend" fxLayout="row" fxLayoutAlign="center center" [fxShow]="isNumericData">\n      <div class="legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row"\n           fxLayoutAlign="center center">\n        <span class="legend-line" [style.background-color]="legendKey.dataKey.color"></span>\n        <div class="legend-label"\n             (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"\n             [class]="{ \'hidden-label\': legendData.keys[legendKey.dataIndex].dataKey.hidden }"\n             [innerHTML]="legendKey.dataKey.label">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;padding:0}:host .statistics-container{height:100%;overflow-y:auto}:host .statistics-container mat-card{width:40%;height:100%;margin-right:35px;padding:15px;gap:22px}@media only screen and (max-width: 750px){:host .statistics-container mat-card{width:100%}}:host .statistics-container .chart-box,:host .statistics-container .chart-container{height:100%;flex-grow:1}:host .statistics-container .chart-box{overflow:auto}:host .statistics-container>*{height:100%}:host .legend{flex-wrap:wrap;width:100%;padding-top:8px;padding-bottom:4px;margin-top:15px}:host .legend .legend-keys .legend-label{padding:2px 20px 2px 10px;white-space:nowrap}:host .legend .legend-keys .legend-label.hidden-label{text-decoration:line-through;opacity:.6}:host .legend .legend-keys .legend-label:focus{outline:none}:host .legend .legend-keys .legend-line{display:inline-block;width:15px;height:3px;text-align:left;vertical-align:middle;outline:none}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:he.MatCard,selector:"mat-card",inputs:["appearance"],exportAs:["matCard"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"component",type:b.MatTable,selector:"mat-table, table[mat-table]",exportAs:["matTable"]},{kind:"directive",type:b.MatHeaderCellDef,selector:"[matHeaderCellDef]"},{kind:"directive",type:b.MatHeaderRowDef,selector:"[matHeaderRowDef]",inputs:["matHeaderRowDef","matHeaderRowDefSticky"]},{kind:"directive",type:b.MatColumnDef,selector:"[matColumnDef]",inputs:["matColumnDef"]},{kind:"directive",type:b.MatCellDef,selector:"[matCellDef]"},{kind:"directive",type:b.MatRowDef,selector:"[matRowDef]",inputs:["matRowDefColumns","matRowDefWhen"]},{kind:"directive",type:b.MatHeaderCell,selector:"mat-header-cell, th[mat-header-cell]"},{kind:"directive",type:b.MatCell,selector:"mat-cell, td[mat-cell]"},{kind:"component",type:b.MatHeaderRow,selector:"mat-header-row, tr[mat-header-row]",exportAs:["matHeaderRow"]},{kind:"component",type:b.MatRow,selector:"mat-row, tr[mat-row]",exportAs:["matRow"]},{kind:"directive",type:f.MatSort,selector:"[matSort]",inputs:["matSortActive","matSortStart","matSortDirection","matSortDisableClear","matSortDisabled"],outputs:["matSortChange"],exportAs:["matSort"]},{kind:"component",type:f.MatSortHeader,selector:"[mat-sort-header]",inputs:["mat-sort-header","arrowPosition","start","disabled","sortActionDescription","disableClear"],exportAs:["matSortHeader"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:_.DatePipe,name:"date"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayStatisticsComponent",pa),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:pa,decorators:[{type:n,args:[{selector:"tb-gateway-statistics",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="statistics-container" fxLayout="row" fxLayout.lt-md="column">\n  <mat-card [formGroup]="statisticForm" *ngIf="!general">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n      <mat-label>{{ \'gateway.statistics.statistic\' | translate }}</mat-label>\n      <mat-select formControlName="statisticKey">\n        <mat-option *ngFor="let key of statisticsKeys" [value]="key">\n          {{ key }}\n        </mat-option>\n        <mat-option *ngFor="let command of commands" [value]="command.attributeOnGateway">\n          {{ command.attributeOnGateway }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-error\n      *ngIf="!statisticsKeys.length && !commands.length">\n      {{ \'gateway.statistics.statistic-commands-empty\' | translate }}\n    </mat-error>\n    <div>\n      <button mat-flat-button color="primary" (click)="navigateToStatistics()">\n        {{ \'gateway.statistics.statistics-button\' | translate }}\n      </button>\n    </div>\n    <mat-form-field class="mat-block" *ngIf="commandObj">\n      <mat-label>{{ \'gateway.statistics.command\' | translate }}</mat-label>\n      <input matInput [value]="commandObj.command" disabled>\n    </mat-form-field>\n  </mat-card>\n  <div class="chart-box" fxLayout="column">\n    <div class="chart-container" #statisticChart [fxShow]="isNumericData"></div>\n    <table [fxShow]="!isNumericData" mat-table [dataSource]="dataSource"\n           matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"\n           matSortDisableClear>\n      <ng-container matColumnDef="0">\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ \'widgets.gateway.created-time\' | translate }}\n        </mat-header-cell>\n        <mat-cell *matCellDef="let row; let rowIndex = index">\n          {{ row[0]| date:\'yyyy-MM-dd HH:mm:ss\' }}\n        </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef="1">\n        <mat-header-cell *matHeaderCellDef mat-sort-header\n                         style="width: 70%">{{ \'widgets.gateway.message\' | translate }}\n        </mat-header-cell>\n        <mat-cell *matCellDef="let row">\n          {{ row[1] }}\n        </mat-cell>\n      </ng-container>\n      <mat-header-row class="mat-row-select"\n                      *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n      <mat-row class="mat-row-select"\n               *matRowDef="let row; columns: displayedColumns;"></mat-row>\n    </table>\n    <span [fxShow]="dataSource.data.length === 0 && !isNumericData"\n          fxLayoutAlign="center center"\n          class="no-data-found">{{ \'attribute.no-telemetry-text\' | translate }}</span>\n    <div fxFlex class="legend" fxLayout="row" fxLayoutAlign="center center" [fxShow]="isNumericData">\n      <div class="legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row"\n           fxLayoutAlign="center center">\n        <span class="legend-line" [style.background-color]="legendKey.dataKey.color"></span>\n        <div class="legend-label"\n             (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"\n             [class]="{ \'hidden-label\': legendData.keys[legendKey.dataIndex].dataKey.hidden }"\n             [innerHTML]="legendKey.dataKey.label">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;padding:0}:host .statistics-container{height:100%;overflow-y:auto}:host .statistics-container mat-card{width:40%;height:100%;margin-right:35px;padding:15px;gap:22px}@media only screen and (max-width: 750px){:host .statistics-container mat-card{width:100%}}:host .statistics-container .chart-box,:host .statistics-container .chart-container{height:100%;flex-grow:1}:host .statistics-container .chart-box{overflow:auto}:host .statistics-container>*{height:100%}:host .legend{flex-wrap:wrap;width:100%;padding-top:8px;padding-bottom:4px;margin-top:15px}:host .legend .legend-keys .legend-label{padding:2px 20px 2px 10px;white-space:nowrap}:host .legend .legend-keys .legend-label.hidden-label{text-decoration:line-through;opacity:.6}:host .legend .legend-keys .legend-label:focus{outline:none}:host .legend .legend-keys .legend-line{display:inline-block;width:15px;height:3px;text-align:left;vertical-align:middle;outline:none}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:X.AttributeService},{type:X.UtilsService}],propDecorators:{sort:[{type:o,args:[g]}],statisticChart:[{type:o,args:["statisticChart"]}],ctx:[{type:a}],general:[{type:a}]}});class ma{static{this.mqttRequestTypeKeys=Object.values(In)}static{this.mqttRequestMappingOldFields=["attributeNameJsonExpression","deviceNameJsonExpression","deviceNameTopicExpression","extension-config"]}static{this.mqttRequestMappingNewFields=["attributeNameExpressionSource","responseTopicQoS","extensionConfig"]}static mapMappingToUpgradedVersion(e){return e?.map((({converter:e,topicFilter:t,subscriptionQos:n=1})=>{const a=e.deviceInfo??this.extractConverterDeviceInfo(e),o={...e,deviceInfo:a,extensionConfig:e.extensionConfig||e["extension-config"]||null};return this.cleanUpOldFields(o),{converter:o,topicFilter:t,subscriptionQos:n}}))}static mapRequestsToUpgradedVersion(e){return this.mqttRequestTypeKeys.reduce(((t,n)=>e[n]?(t[n]=e[n].map((e=>{const t=this.mapRequestToUpgradedVersion(e,n);return this.cleanUpOldFields(t),t})),t):t),{})}static mapRequestsToDowngradedVersion(e){return this.mqttRequestTypeKeys.reduce(((t,n)=>e[n]?(t[n]=e[n].map((e=>{n===In.SERVER_SIDE_RPC&&delete e.type;const{attributeNameExpression:t,deviceInfo:a,...o}=e,i={...o,attributeNameJsonExpression:t||null,deviceNameJsonExpression:a?.deviceNameExpressionSource!==Tn.TOPIC?a?.deviceNameExpression:null,deviceNameTopicExpression:a?.deviceNameExpressionSource===Tn.TOPIC?a?.deviceNameExpression:null};return this.cleanUpNewFields(i),i})),t):t),{})}static mapMappingToDowngradedVersion(e){return e?.map((e=>{const t=this.mapConverterToDowngradedVersion(e.converter);return this.cleanUpNewFields(t),{converter:t,topicFilter:e.topicFilter}}))}static mapConverterToDowngradedVersion(e){const{deviceInfo:t,...n}=e;return e.type!==wn.BYTES?{...n,deviceNameJsonExpression:t?.deviceNameExpressionSource===Tn.MSG?t.deviceNameExpression:null,deviceTypeJsonExpression:t?.deviceProfileExpressionSource===Tn.MSG?t.deviceProfileExpression:null,deviceNameTopicExpression:t?.deviceNameExpressionSource!==Tn.MSG?t?.deviceNameExpression:null,deviceTypeTopicExpression:t?.deviceProfileExpressionSource!==Tn.MSG?t?.deviceProfileExpression:null}:{...n,deviceNameExpression:t.deviceNameExpression,deviceTypeExpression:t.deviceProfileExpression,"extension-config":e.extensionConfig}}static cleanUpOldFields(e){this.mqttRequestMappingOldFields.forEach((t=>delete e[t])),Z(e)}static cleanUpNewFields(e){this.mqttRequestMappingNewFields.forEach((t=>delete e[t])),Z(e)}static getTypeSourceByValue(e){return e.includes("${")?Tn.MSG:e.includes("/")?Tn.TOPIC:Tn.CONST}static extractConverterDeviceInfo(e){const t=e.deviceNameExpression||e.deviceNameJsonExpression||e.deviceNameTopicExpression||null,n=e.deviceNameExpressionSource?e.deviceNameExpressionSource:t?this.getTypeSourceByValue(t):null,a=e.deviceProfileExpression||e.deviceTypeTopicExpression||e.deviceTypeJsonExpression||"default",o=e.deviceProfileExpressionSource?e.deviceProfileExpressionSource:a?this.getTypeSourceByValue(a):null;return t||a?{deviceNameExpression:t,deviceNameExpressionSource:n,deviceProfileExpression:a,deviceProfileExpressionSource:o}:null}static mapRequestToUpgradedVersion(e,t){const n=e.deviceNameJsonExpression||e.deviceNameTopicExpression||null,a=e.deviceTypeTopicExpression||e.deviceTypeJsonExpression||"default",o=a?this.getTypeSourceByValue(a):null,i=e.attributeNameExpressionSource||e.attributeNameJsonExpression||null,r=t===In.SERVER_SIDE_RPC?1:null,s=t===In.SERVER_SIDE_RPC?e.responseTopicExpression?Fn.WithResponse:Fn.WithoutResponse:null;return{...e,attributeNameExpression:i,attributeNameExpressionSource:i?this.getTypeSourceByValue(i):null,deviceInfo:e.deviceInfo?e.deviceInfo:n?{deviceNameExpression:n,deviceNameExpressionSource:this.getTypeSourceByValue(n),deviceProfileExpression:a,deviceProfileExpressionSource:o}:null,responseTopicQoS:r,type:s}}}e("MqttVersionMappingUtil",ma);class da{constructor(e,t){this.gatewayVersionIn=e,this.connector=t,this.gatewayVersion=ba.parseVersion(this.gatewayVersionIn),this.configVersion=ba.parseVersion(this.connector.configVersion)}getProcessedByVersion(){return this.isVersionUpdateNeeded()?this.processVersionUpdate():this.connector}processVersionUpdate(){return this.isVersionUpgradeNeeded()?this.getUpgradedVersion():this.isVersionDowngradeNeeded()?this.getDowngradedVersion():this.connector}isVersionUpdateNeeded(){return!!this.gatewayVersion&&this.configVersion!==this.gatewayVersion}isVersionUpgradeNeeded(){return this.gatewayVersion>=ba.parseVersion(Ut.Current)&&(!this.configVersion||this.configVersion<this.gatewayVersion)}isVersionDowngradeNeeded(){return this.configVersion&&this.configVersion>=ba.parseVersion(Ut.Current)&&this.configVersion>this.gatewayVersion}}e("GatewayConnectorVersionProcessor",da);class ua extends da{constructor(e,t){super(e,t),this.gatewayVersionIn=e,this.connector=t,this.mqttRequestTypeKeys=Object.values(In)}getUpgradedVersion(){const{connectRequests:e,disconnectRequests:t,attributeRequests:n,attributeUpdates:a,serverSideRpc:o}=this.connector.configurationJson;let i={...this.connector.configurationJson,requestsMapping:ma.mapRequestsToUpgradedVersion({connectRequests:e,disconnectRequests:t,attributeRequests:n,attributeUpdates:a,serverSideRpc:o}),mapping:ma.mapMappingToUpgradedVersion(this.connector.configurationJson.mapping)};return this.mqttRequestTypeKeys.forEach((e=>{const{[e]:t,...n}=i;i={...n}})),this.cleanUpConfigJson(i),{...this.connector,configurationJson:i,configVersion:this.gatewayVersionIn}}getDowngradedVersion(){const{requestsMapping:e,mapping:t,...n}=this.connector.configurationJson,a=e?ma.mapRequestsToDowngradedVersion(e):{},o=ma.mapMappingToDowngradedVersion(t);return{...this.connector,configurationJson:{...n,...a,mapping:o},configVersion:this.gatewayVersionIn}}cleanUpConfigJson(e){ee(e.requestsMapping,{})&&delete e.requestsMapping,ee(e.mapping,[])&&delete e.mapping}}e("MqttVersionProcessor",ua);class ga extends da{constructor(e,t){super(e,t),this.gatewayVersionIn=e,this.connector=t}getUpgradedVersion(){const e=this.connector.configurationJson;return{...this.connector,configurationJson:{master:e.master?.slaves?ha.mapMasterToUpgradedVersion(e.master):{slaves:[]},slave:e.slave?ha.mapSlaveToUpgradedVersion(e.slave):{}},configVersion:this.gatewayVersionIn}}getDowngradedVersion(){const e=this.connector.configurationJson;return{...this.connector,configurationJson:{...e,slave:e.slave?ha.mapSlaveToDowngradedVersion(e.slave):{},master:e.master?.slaves?ha.mapMasterToDowngradedVersion(e.master):{slaves:[]}},configVersion:this.gatewayVersionIn}}}e("ModbusVersionProcessor",ga);class fa extends da{constructor(e,t){super(e,t),this.gatewayVersionIn=e,this.connector=t}getUpgradedVersion(){const e=this.connector.configurationJson.server;return{...this.connector,configurationJson:{server:e?xa.mapServerToUpgradedVersion(e):{},mapping:e?.mapping?xa.mapMappingToUpgradedVersion(e.mapping):[]},configVersion:this.gatewayVersionIn}}getDowngradedVersion(){return{...this.connector,configurationJson:{server:xa.mapServerToDowngradedVersion(this.connector.configurationJson)},configVersion:this.gatewayVersionIn}}}e("OpcVersionProcessor",fa);class ya{constructor(){this.initialized=new i,this.fb=r(de),this.destroy$=new Se,this.basicFormGroup=this.initBasicFormGroup(),this.basicFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.onBasicFormGroupChange(e)))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}ngAfterViewInit(){this.initialized.emit()}validate(){return this.basicFormGroup.valid?null:{basicFormGroup:{valid:!1}}}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){this.basicFormGroup.setValue(this.mapConfigToFormValue(e),{emitEvent:!1})}onBasicFormGroupChange(e){this.onChange(this.getMappedValue(e)),this.onTouched()}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ya,deps:[],target:t.ɵɵFactoryTarget.Directive})}static{this.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"18.2.6",type:ya,inputs:{generalTabContent:"generalTabContent"},outputs:{initialized:"initialized"},ngImport:t})}}e("GatewayConnectorBasicConfigDirective",ya),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ya,decorators:[{type:s}],ctorParameters:()=>[],propDecorators:{generalTabContent:[{type:a}],initialized:[{type:l}]}});class ba{static getConfig(e,t){switch(e.type){case _t.MQTT:return new ua(t,e).getProcessedByVersion();case _t.OPCUA:return new fa(t,e).getProcessedByVersion();case _t.MODBUS:return new ga(t,e).getProcessedByVersion();default:return e}}static parseVersion(e){return te(e)?e:ne(e)?parseFloat(e.replace(/\./g,"").slice(0,3))/100:0}}e("GatewayConnectorVersionMappingUtil",ba);class ha{static mapMasterToUpgradedVersion(e){return{slaves:e.slaves.map((e=>{const{sendDataOnlyOnChange:t,...n}=e;return{...n,deviceType:e.deviceType??"default",reportStrategy:t?{type:sn.OnChange}:{type:sn.OnReportPeriod,reportPeriod:e.pollPeriod}}}))}}static mapMasterToDowngradedVersion(e){return{slaves:e.slaves.map((e=>{const{reportStrategy:t,...n}=e;return{...n,sendDataOnlyOnChange:t?.type!==sn.OnReportPeriod}}))}}static mapSlaveToDowngradedVersion(e){if(!e?.values)return e;const t=Object.keys(e.values).reduce(((t,n)=>t={...t,[n]:[e.values[n]]}),{});return{...e,values:t}}static mapSlaveToUpgradedVersion(e){if(!e?.values)return e;const t=Object.keys(e.values).reduce(((t,n)=>t={...t,[n]:this.mapValuesToUpgradedVersion(e.values[n][0])}),{});return{...e,values:t}}static mapValuesToUpgradedVersion(e){return Object.keys(e).reduce(((t,n)=>t={...t,[n]:e[n].map((e=>({...e,type:"int"===e.type?ea.INT16:e.type})))}),{})}}e("ModbusVersionMappingUtil",ha);class xa{static mapServerToUpgradedVersion(e){const{mapping:t,disableSubscriptions:n,pollPeriodInMillis:a,...o}=e;return{...o,pollPeriodInMillis:a??5e3,enableSubscriptions:!n}}static mapServerToDowngradedVersion(e){const{mapping:t,server:n}=e,{enableSubscriptions:a,...o}=n??{};return{...o,mapping:t?this.mapMappingToDowngradedVersion(t):[],disableSubscriptions:!a}}static mapMappingToUpgradedVersion(e){return e.map((e=>({...e,deviceNodeSource:this.getDeviceNodeSourceByValue(e.deviceNodePattern),deviceInfo:{deviceNameExpression:e.deviceNamePattern,deviceNameExpressionSource:this.getTypeSourceByValue(e.deviceNamePattern),deviceProfileExpression:e.deviceTypePattern??"default",deviceProfileExpressionSource:this.getTypeSourceByValue(e.deviceTypePattern??"default")},attributes:e.attributes.map((e=>({key:e.key,type:this.getTypeSourceByValue(e.path),value:e.path}))),attributes_updates:e.attributes_updates.map((e=>({key:e.attributeOnThingsBoard,type:this.getTypeSourceByValue(e.attributeOnDevice),value:e.attributeOnDevice}))),timeseries:e.timeseries.map((e=>({key:e.key,type:this.getTypeSourceByValue(e.path),value:e.path}))),rpc_methods:e.rpc_methods.map((e=>({method:e.method,arguments:e.arguments.map((e=>({value:e,type:this.getArgumentType(e)})))})))})))}static mapMappingToDowngradedVersion(e){return e.map((e=>({...e,deviceNamePattern:e.deviceInfo.deviceNameExpression,deviceTypePattern:e.deviceInfo.deviceProfileExpression,attributes:e.attributes.map((e=>({key:e.key,path:e.value}))),attributes_updates:e.attributes_updates.map((e=>({attributeOnThingsBoard:e.key,attributeOnDevice:e.value}))),timeseries:e.timeseries.map((e=>({key:e.key,path:e.value}))),rpc_methods:e.rpc_methods.map((e=>({method:e.method,arguments:e.arguments.map((e=>e.value))})))})))}static getTypeSourceByValue(e){return e.includes("${")?Sn.IDENTIFIER:e.includes("/")||e.includes("\\")?Sn.PATH:Sn.CONST}static getDeviceNodeSourceByValue(e){return e.includes("${")?Sn.IDENTIFIER:Sn.PATH}static getArgumentType(e){switch(typeof e){case"boolean":return"boolean";case"number":return Number.isInteger(e)?"integer":"float";default:return"string"}}}e("OpcVersionMappingUtil",xa);class va{transform(e){return ba.parseVersion(e)>=ba.parseVersion(Ut.Current)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:va,deps:[],target:t.ɵɵFactoryTarget.Pipe})}static{this.ɵpipe=t.ɵɵngDeclarePipe({minVersion:"14.0.0",version:"18.2.6",ngImport:t,type:va,isStandalone:!0,name:"isLatestVersionConfig"})}}e("LatestVersionConfigPipe",va),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:va,decorators:[{type:c,args:[{name:"isLatestVersionConfig",standalone:!0}]}]});class wa{constructor(e){this.translate=e}transform(e){return e.hasError("required")?this.translate.instant("gateway.port-required"):e.hasError("min")||e.hasError("max")?this.translate.instant("gateway.port-limits-error",{min:Et.MIN,max:Et.MAX}):""}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:wa,deps:[{token:Y.TranslateService}],target:t.ɵɵFactoryTarget.Pipe})}static{this.ɵpipe=t.ɵɵngDeclarePipe({minVersion:"14.0.0",version:"18.2.6",ngImport:t,type:wa,isStandalone:!0,name:"getGatewayPortTooltip"})}}e("GatewayPortTooltipPipe",wa),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:wa,decorators:[{type:c,args:[{name:"getGatewayPortTooltip",standalone:!0}]}],ctorParameters:()=>[{type:Y.TranslateService}]});class Ca{transform(e){return e.map((({value:e})=>e.toString())).join(", ")}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ca,deps:[],target:t.ɵɵFactoryTarget.Pipe})}static{this.ɵpipe=t.ɵɵngDeclarePipe({minVersion:"14.0.0",version:"18.2.6",ngImport:t,type:Ca,isStandalone:!0,name:"getRpcTemplateArrayView"})}}e("RpcTemplateArrayViewPipe",Ca),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ca,decorators:[{type:c,args:[{name:"getRpcTemplateArrayView",standalone:!0}]}]});class Ta{transform(e,t,n){return!n||n?.includes(Sn.PATH)?t!==Sn.CONST?`widget/lib/gateway/${e}-${t}_fn`:void 0:"attributes"===e||"timeseries"===e?"widget/lib/gateway/attributes_timeseries_expressions_fn":"widget/lib/gateway/expressions_fn"}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ta,deps:[],target:t.ɵɵFactoryTarget.Pipe})}static{this.ɵpipe=t.ɵɵngDeclarePipe({minVersion:"14.0.0",version:"18.2.6",ngImport:t,type:Ta,isStandalone:!0,name:"getGatewayHelpLink"})}}e("GatewayHelpLinkPipe",Ta),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ta,decorators:[{type:c,args:[{name:"getGatewayHelpLink",standalone:!0}]}]});class Sa{constructor(e,t,n){this.elementRef=e,this.renderer=t,this.tooltip=n,this.tooltipEnabled=!0,this.position="above",this.destroy$=new Se}ngOnInit(){this.observeMouseEvents(),this.applyTruncationStyles()}ngAfterViewInit(){this.tooltip.position=this.position}ngOnDestroy(){this.tooltip._isTooltipVisible()&&this.hideTooltip(),this.destroy$.next(),this.destroy$.complete()}observeMouseEvents(){ke(this.elementRef.nativeElement,"mouseenter").pipe(Me((()=>this.tooltipEnabled)),Me((()=>this.isOverflown(this.elementRef.nativeElement))),Ee((()=>this.showTooltip())),Ne(this.destroy$)).subscribe(),ke(this.elementRef.nativeElement,"mouseleave").pipe(Me((()=>this.tooltipEnabled)),Me((()=>this.tooltip._isTooltipVisible())),Ee((()=>this.hideTooltip())),Ne(this.destroy$)).subscribe()}applyTruncationStyles(){this.renderer.setStyle(this.elementRef.nativeElement,"white-space","nowrap"),this.renderer.setStyle(this.elementRef.nativeElement,"overflow","hidden"),this.renderer.setStyle(this.elementRef.nativeElement,"text-overflow","ellipsis")}isOverflown(e){return e.clientWidth<e.scrollWidth}showTooltip(){this.tooltip.message=this.text||this.elementRef.nativeElement.innerText,this.tooltip.show()}hideTooltip(){this.tooltip.hide()}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Sa,deps:[{token:t.ElementRef},{token:t.Renderer2},{token:ze.MatTooltip}],target:t.ɵɵFactoryTarget.Directive})}static{this.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"18.2.6",type:Sa,isStandalone:!0,selector:"[tbTruncateWithTooltip]",inputs:{text:["tbTruncateWithTooltip","text"],tooltipEnabled:"tooltipEnabled",position:"position"},providers:[We],ngImport:t})}}e("TruncateWithTooltipDirective",Sa),He([N()],Sa.prototype,"tooltipEnabled",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Sa,decorators:[{type:s,args:[{selector:"[tbTruncateWithTooltip]",providers:[We],standalone:!0}]}],ctorParameters:()=>[{type:t.ElementRef},{type:t.Renderer2},{type:ze.MatTooltip}],propDecorators:{text:[{type:a,args:["tbTruncateWithTooltip"]}],tooltipEnabled:[{type:a}],position:[{type:a}]}});class ka{set chips(e){ee(this.chipsValue,e)||(this.chipsValue=e,setTimeout((()=>{this.adjustChips()}),0))}constructor(e,t,n,a){this.el=e,this.renderer=t,this.translate=n,this.window=a,this.destroy$=new Se,this.renderer.setStyle(this.el.nativeElement,"max-height","48px"),this.renderer.setStyle(this.el.nativeElement,"overflow","auto"),ke(a,"resize").pipe(Ne(this.destroy$)).subscribe((()=>{this.adjustChips()})),this.observeIntersection()}observeIntersection(){this.intersectionObserver=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting&&this.adjustChips()}))})),this.intersectionObserver.observe(this.el.nativeElement)}adjustChips(){const e=this.el.nativeElement,t=this.el.nativeElement.querySelector(".ellipsis-chip"),n=parseFloat(this.window.getComputedStyle(t).marginLeft)||0,a=e.querySelectorAll("mat-chip:not(.ellipsis-chip)");if(this.chipsValue.length>1){const o=this.el.nativeElement.querySelector(".ellipsis-text");this.renderer.setStyle(t,"display","inline-flex"),o.innerHTML=this.translate.instant("gateway.ellipsis-chips-text",{count:this.chipsValue.length});const i=e.offsetWidth-(t.offsetWidth+n);let r=0,s=0;a.forEach((e=>{this.renderer.setStyle(e,"display","inline-flex");const t=e.querySelector(".mdc-evolution-chip__text-label");this.applyMaxChipTextWidth(t,i/3),r+(e.offsetWidth+n)<=i&&s<this.chipsValue.length?(s++,r+=e.offsetWidth+n):this.renderer.setStyle(e,"display","none")})),o.innerHTML=this.translate.instant("gateway.ellipsis-chips-text",{count:this.chipsValue.length-s}),s===this.chipsValue?.length&&this.renderer.setStyle(t,"display","none")}else if(1===this.chipsValue.length){const o=a[0].querySelector(".mdc-evolution-chip__action"),i=o.querySelector(".mdc-evolution-chip__text-label"),r=parseFloat(this.window.getComputedStyle(o).paddingLeft)||0,s=parseFloat(this.window.getComputedStyle(o).paddingRight)||0,l=e.offsetWidth-n-(r+s);this.renderer.setStyle(t,"display","none"),this.renderer.setStyle(a[0],"display","inline-flex"),this.applyMaxChipTextWidth(i,l)}else this.renderer.setStyle(t,"display","none")}applyMaxChipTextWidth(e,t){this.renderer.setStyle(e,"max-width",t+"px"),this.renderer.setStyle(e,"overflow","hidden"),this.renderer.setStyle(e,"text-overflow","ellipsis"),this.renderer.setStyle(e,"white-space","nowrap")}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete(),this.intersectionObserver.disconnect()}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ka,deps:[{token:t.ElementRef},{token:t.Renderer2},{token:Y.TranslateService},{token:ae}],target:t.ɵɵFactoryTarget.Directive})}static{this.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"18.2.6",type:ka,isStandalone:!0,selector:"[tb-ellipsis-chip-list]",inputs:{chips:["tb-ellipsis-chip-list","chips"]},ngImport:t})}}e("EllipsisChipListDirective",ka),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ka,decorators:[{type:s,args:[{selector:"[tb-ellipsis-chip-list]",standalone:!0}]}],ctorParameters:()=>[{type:t.ElementRef},{type:t.Renderer2},{type:Y.TranslateService},{type:Window,decorators:[{type:p,args:[ae]}]}],propDecorators:{chips:[{type:a,args:["tb-ellipsis-chip-list"]}]}});class La{constructor(e,t,n,a){this.attributeService=e,this.telemetryWsService=t,this.zone=n,this.translate=a,this.attributesSubject=new Le([]),this.pageDataSubject=new Le(M()),this.pageData$=this.pageDataSubject.asObservable(),this.selection=new je(!0,[])}connect(e){return this.attributesSubject.asObservable()}disconnect(e){this.attributesSubject.complete(),this.pageDataSubject.complete(),this.telemetrySubscriber&&(this.telemetrySubscriber.unsubscribe(),this.telemetrySubscriber=null)}loadAttributes(e,t,n,a=!1){a&&(this.allAttributes=null,this.telemetrySubscriber&&(this.telemetrySubscriber.unsubscribe(),this.telemetrySubscriber=null)),this.selection.clear();const o=new Fe;return this.fetchAttributes(e,t,n).pipe(qe((()=>Ie(M())))).subscribe((e=>{this.attributesSubject.next(e.data),this.pageDataSubject.next(e),o.next(e)})),o}fetchAttributes(e,t,n){return this.getAllAttributes(e,t).pipe(De((e=>{const t=e.filter((e=>0!==e.lastUpdateTs));return n.filterData(t)})))}getAllAttributes(e,t){if(!this.allAttributes){let n;E.get(t)?(this.telemetrySubscriber=q.createEntityAttributesSubscription(this.telemetryWsService,e,t,this.zone),this.telemetrySubscriber.subscribe(),n=this.telemetrySubscriber.attributeData$()):n=this.attributeService.getEntityAttributes(e,t),this.allAttributes=n.pipe(Pe(1),Ge())}return this.allAttributes}isAllSelected(){const e=this.selection.selected.length;return this.attributesSubject.pipe(De((t=>e===t.length)))}isEmpty(){return this.attributesSubject.pipe(De((e=>!e.length)))}total(){return this.pageDataSubject.pipe(De((e=>e.totalElements)))}masterToggle(){this.attributesSubject.pipe(Ee((e=>{this.selection.selected.length===e.length?this.selection.clear():e.forEach((e=>{this.selection.select(e)}))})),Oe(1)).subscribe()}}e("AttributeDatasource",La);class Fa{constructor(e){this.attributeService=e,this.saveTemplate=new i,this.useTemplate=new i,this.originalOrder=()=>0,this.isObject=e=>oe(e),this.isArray=e=>Array.isArray(e),this.SNMPMethodsTranslations=tn}ngOnInit(){}applyTemplate(e,t){e.stopPropagation(),this.useTemplate.emit(t)}deleteTemplate(e,t){e.stopPropagation();const n=this.rpcTemplates.findIndex((e=>e.name==t.name));this.rpcTemplates.splice(n,1);const a=`${this.connectorType}_template`;this.attributeService.saveEntityAttributes({id:this.ctx.defaultSubscription.targetDeviceId,entityType:I.DEVICE},L.SERVER_SCOPE,[{key:a,value:this.rpcTemplates}]).subscribe((()=>{}))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Fa,deps:[{token:X.AttributeService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Fa,selector:"tb-gateway-service-rpc-connector-templates",inputs:{connectorType:"connectorType",ctx:"ctx",rpcTemplates:"rpcTemplates"},outputs:{saveTemplate:"saveTemplate",useTemplate:"useTemplate"},ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="mat-subtitle-1 title">{{ \'gateway.rpc.templates-title\' | translate }}</div>\n<mat-expansion-panel hideToggle *ngFor="let template of rpcTemplates">\n  <mat-expansion-panel-header>\n    <mat-panel-title class="template-name">\n      <span matTooltip="{{template.name}}" matTooltipPosition="above">{{template.name}}</span>\n    </mat-panel-title>\n    <mat-panel-description>\n      <button mat-icon-button matTooltip="Delete" (click)="deleteTemplate($event, template)">\n        <mat-icon class="material-icons">delete</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip="Use" (click)="applyTemplate($event, template)">\n        <mat-icon class="material-icons">play_arrow</mat-icon>\n      </button>\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n\n  <ng-container\n    *ngFor="let config of template.config | keyValueIsNotEmpty"\n    [ngTemplateOutlet]="RPCTemplateRef"\n    [ngTemplateOutletContext]="{ $implicit: config, innerValue: false }">\n  </ng-container>\n  <ng-template #RPCTemplateRef let-config let-innerValue=\'innerValue\'>\n    <div [fxLayout]="isObject(config.value) ? \'column\': \'row\'"\n         [fxLayoutAlign]="!isObject(config.value) ? \'space-between center\' : \'\'"\n         [ngStyle]="{\'padding-left\': innerValue ? \'16px\': \'0\'}"\n         class="rpc-params-row">\n      <div class="template-key">\n        {{!innerValue ? (\'gateway.rpc.\' + config.key | translate) : config.key}}\n      </div>\n      <div *ngIf="isArray(config.value)" tbTruncateWithTooltip class="array-value">\n        {{ config.value | getRpcTemplateArrayView }}\n      </div>\n      <ng-container *ngIf="isObject(config.value)" [ngTemplateOutlet]="RPCObjectRow"></ng-container>\n      <div *ngIf="!isObject(config.value) && !isArray(config.value)"\n           [ngClass]="{\'boolean-true\': config.value === true,\n                   \'boolean-false\': config.value === false  }">\n        <ng-container *ngIf="config.key === \'method\' else value" [ngTemplateOutlet]="SNMPMethod"></ng-container>\n      </div>\n      <ng-template #value>{{ config.value }}</ng-template>\n      <ng-template #SNMPMethod>{{ SNMPMethodsTranslations.get(config.value) | translate }}</ng-template>\n      <ng-template #RPCObjectRow>\n        <ng-container\n          *ngFor="let subConfig of config.value | keyvalue : originalOrder"\n          [ngTemplateOutlet]="RPCTemplateRef"\n          [ngTemplateOutletContext]="{ $implicit: subConfig, innerValue: true }">\n        </ng-container>\n      </ng-template>\n    </div>\n  </ng-template>\n</mat-expansion-panel>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;padding:0}:host .title{font-weight:500}:host .template-key{color:#00000061;height:32px;line-height:32px}:host .boolean-true,:host .boolean-false{border-radius:3px;height:32px;line-height:32px;padding:0 12px;width:fit-content;font-size:14px;text-transform:capitalize}:host .boolean-false{color:#d12730;background-color:#d1273014}:host .boolean-true{color:#198038;background-color:#19803814}:host mat-expansion-panel{margin-top:10px;overflow:visible}:host .mat-expansion-panel-header-description{flex-direction:row-reverse;align-items:center;margin-right:0;flex:0}:host .mat-expansion-panel-header-description>mat-icon{margin-left:15px;color:#00000061}:host .mat-expansion-panel-header{padding:0 0 0 12px}:host .mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded{height:48px}:host .mat-expansion-panel-header .mat-content.mat-content-hide-toggle{margin-right:0}:host .rpc-params-row{overflow:hidden;white-space:nowrap}:host .rpc-params-row :not(:first-child){white-space:pre;overflow:hidden;text-overflow:ellipsis}:host .template-name{overflow:hidden;text-overflow:ellipsis;display:block}:host ::ng-deep .mat-content{align-items:center}:host .mat-expansion-panel-header-title{flex:1;margin:0}:host .array-value{margin-left:10px}\n'],dependencies:[{kind:"directive",type:_.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"directive",type:_.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:$e.MatExpansionPanelDescription,selector:"mat-panel-description"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:K.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:K.DefaultStyleDirective,selector:"  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]",inputs:["ngStyle","ngStyle.xs","ngStyle.sm","ngStyle.md","ngStyle.lg","ngStyle.xl","ngStyle.lt-sm","ngStyle.lt-md","ngStyle.lt-lg","ngStyle.lt-xl","ngStyle.gt-xs","ngStyle.gt-sm","ngStyle.gt-md","ngStyle.gt-lg"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:_.KeyValuePipe,name:"keyvalue"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"pipe",type:Ca,name:"getRpcTemplateArrayView"}]})}}e("GatewayServiceRPCConnectorTemplatesComponent",Fa),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Fa,decorators:[{type:n,args:[{selector:"tb-gateway-service-rpc-connector-templates",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="mat-subtitle-1 title">{{ \'gateway.rpc.templates-title\' | translate }}</div>\n<mat-expansion-panel hideToggle *ngFor="let template of rpcTemplates">\n  <mat-expansion-panel-header>\n    <mat-panel-title class="template-name">\n      <span matTooltip="{{template.name}}" matTooltipPosition="above">{{template.name}}</span>\n    </mat-panel-title>\n    <mat-panel-description>\n      <button mat-icon-button matTooltip="Delete" (click)="deleteTemplate($event, template)">\n        <mat-icon class="material-icons">delete</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip="Use" (click)="applyTemplate($event, template)">\n        <mat-icon class="material-icons">play_arrow</mat-icon>\n      </button>\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n\n  <ng-container\n    *ngFor="let config of template.config | keyValueIsNotEmpty"\n    [ngTemplateOutlet]="RPCTemplateRef"\n    [ngTemplateOutletContext]="{ $implicit: config, innerValue: false }">\n  </ng-container>\n  <ng-template #RPCTemplateRef let-config let-innerValue=\'innerValue\'>\n    <div [fxLayout]="isObject(config.value) ? \'column\': \'row\'"\n         [fxLayoutAlign]="!isObject(config.value) ? \'space-between center\' : \'\'"\n         [ngStyle]="{\'padding-left\': innerValue ? \'16px\': \'0\'}"\n         class="rpc-params-row">\n      <div class="template-key">\n        {{!innerValue ? (\'gateway.rpc.\' + config.key | translate) : config.key}}\n      </div>\n      <div *ngIf="isArray(config.value)" tbTruncateWithTooltip class="array-value">\n        {{ config.value | getRpcTemplateArrayView }}\n      </div>\n      <ng-container *ngIf="isObject(config.value)" [ngTemplateOutlet]="RPCObjectRow"></ng-container>\n      <div *ngIf="!isObject(config.value) && !isArray(config.value)"\n           [ngClass]="{\'boolean-true\': config.value === true,\n                   \'boolean-false\': config.value === false  }">\n        <ng-container *ngIf="config.key === \'method\' else value" [ngTemplateOutlet]="SNMPMethod"></ng-container>\n      </div>\n      <ng-template #value>{{ config.value }}</ng-template>\n      <ng-template #SNMPMethod>{{ SNMPMethodsTranslations.get(config.value) | translate }}</ng-template>\n      <ng-template #RPCObjectRow>\n        <ng-container\n          *ngFor="let subConfig of config.value | keyvalue : originalOrder"\n          [ngTemplateOutlet]="RPCTemplateRef"\n          [ngTemplateOutletContext]="{ $implicit: subConfig, innerValue: true }">\n        </ng-container>\n      </ng-template>\n    </div>\n  </ng-template>\n</mat-expansion-panel>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;padding:0}:host .title{font-weight:500}:host .template-key{color:#00000061;height:32px;line-height:32px}:host .boolean-true,:host .boolean-false{border-radius:3px;height:32px;line-height:32px;padding:0 12px;width:fit-content;font-size:14px;text-transform:capitalize}:host .boolean-false{color:#d12730;background-color:#d1273014}:host .boolean-true{color:#198038;background-color:#19803814}:host mat-expansion-panel{margin-top:10px;overflow:visible}:host .mat-expansion-panel-header-description{flex-direction:row-reverse;align-items:center;margin-right:0;flex:0}:host .mat-expansion-panel-header-description>mat-icon{margin-left:15px;color:#00000061}:host .mat-expansion-panel-header{padding:0 0 0 12px}:host .mat-expansion-panel-header.mat-expansion-panel-header.mat-expanded{height:48px}:host .mat-expansion-panel-header .mat-content.mat-content-hide-toggle{margin-right:0}:host .rpc-params-row{overflow:hidden;white-space:nowrap}:host .rpc-params-row :not(:first-child){white-space:pre;overflow:hidden;text-overflow:ellipsis}:host .template-name{overflow:hidden;text-overflow:ellipsis;display:block}:host ::ng-deep .mat-content{align-items:center}:host .mat-expansion-panel-header-title{flex:1;margin:0}:host .array-value{margin-left:10px}\n']}]}],ctorParameters:()=>[{type:X.AttributeService}],propDecorators:{connectorType:[{type:a}],ctx:[{type:a}],saveTemplate:[{type:l}],useTemplate:[{type:l}],rpcTemplates:[{type:a}]}});class Ia{constructor(e){this.fb=e,this.BrokerSecurityType=dn,this.securityTypes=Object.values(dn),this.SecurityTypeTranslationsMap=un,this.destroy$=new Se,this.propagateChange=e=>{},this.securityFormGroup=this.fb.group({type:[dn.ANONYMOUS,[]],username:["",[ue.required,ue.pattern(kt)]],password:["",[ue.required,ue.pattern(kt)]]}),this.observeSecurityForm()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}writeValue(e){e.type||(e.type=dn.ANONYMOUS),this.securityFormGroup.reset(e),this.updateView(e)}validate(){return this.securityFormGroup.valid?null:{securityForm:{valid:!1}}}updateView(e){this.propagateChange(e)}updateValidators(e){e===dn.BASIC?(this.securityFormGroup.get("username").enable({emitEvent:!1}),this.securityFormGroup.get("password").enable({emitEvent:!1})):(this.securityFormGroup.get("username").disable({emitEvent:!1}),this.securityFormGroup.get("password").disable({emitEvent:!1}))}observeSecurityForm(){this.securityFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.updateView(e))),this.securityFormGroup.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.updateValidators(e)))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ia,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Ia,isStandalone:!0,selector:"tb-rest-connector-security",providers:[{provide:ge,useExisting:m((()=>Ia)),multi:!0},{provide:fe,useExisting:m((()=>Ia)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-row space-between same-padding tb-flex column" [formGroup]="securityFormGroup">\n  <div class="tb-flex row space-between align-center no-gap fill-width">\n    <div class="fields-label" translate>gateway.security</div>\n    <tb-toggle-select formControlName="type" appearance="fill">\n      <tb-toggle-option *ngFor="let type of securityTypes" [value]="type">\n        {{ SecurityTypeTranslationsMap.get(type) | translate }}\n      </tb-toggle-option>\n    </tb-toggle-select>\n  </div>\n  <ng-container *ngIf="securityFormGroup.get(\'type\').value === BrokerSecurityType.BASIC">\n    <div class="tb-form-row space-between tb-flex fill-width">\n      <div class="fixed-title-width" translate>gateway.username</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="username" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.username-required\') | translate"\n                    *ngIf="securityFormGroup.get(\'username\').hasError(\'required\') && securityFormGroup.get(\'username\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row space-between tb-flex fill-width">\n      <div class="fixed-title-width" translate>gateway.password</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.password-required\') | translate"\n                    *ngIf="securityFormGroup.get(\'password\').hasError(\'required\')\n                                 && securityFormGroup.get(\'password\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n          <div [class.hide-toggle]="securityFormGroup.get(\'password\').hasError(\'required\')" class="tb-flex no-gap align-center fill-height" matSuffix>\n            <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n          </div>\n        </mat-form-field>\n      </div>\n    </div>\n  </ng-container>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block;margin-bottom:10px}:host .fields-label{font-weight:500}:host .hide-toggle{display:none}\n'],dependencies:[{kind:"ngmodule",type:D},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:tt.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ia,decorators:[{type:n,args:[{selector:"tb-rest-connector-security",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>Ia)),multi:!0},{provide:fe,useExisting:m((()=>Ia)),multi:!0}],standalone:!0,imports:[D,H],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-row space-between same-padding tb-flex column" [formGroup]="securityFormGroup">\n  <div class="tb-flex row space-between align-center no-gap fill-width">\n    <div class="fields-label" translate>gateway.security</div>\n    <tb-toggle-select formControlName="type" appearance="fill">\n      <tb-toggle-option *ngFor="let type of securityTypes" [value]="type">\n        {{ SecurityTypeTranslationsMap.get(type) | translate }}\n      </tb-toggle-option>\n    </tb-toggle-select>\n  </div>\n  <ng-container *ngIf="securityFormGroup.get(\'type\').value === BrokerSecurityType.BASIC">\n    <div class="tb-form-row space-between tb-flex fill-width">\n      <div class="fixed-title-width" translate>gateway.username</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="username" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.username-required\') | translate"\n                    *ngIf="securityFormGroup.get(\'username\').hasError(\'required\') && securityFormGroup.get(\'username\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row space-between tb-flex fill-width">\n      <div class="fixed-title-width" translate>gateway.password</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.password-required\') | translate"\n                    *ngIf="securityFormGroup.get(\'password\').hasError(\'required\')\n                                 && securityFormGroup.get(\'password\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n          <div [class.hide-toggle]="securityFormGroup.get(\'password\').hasError(\'required\')" class="tb-flex no-gap align-center fill-height" matSuffix>\n            <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n          </div>\n        </mat-form-field>\n      </div>\n    </div>\n  </ng-container>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block;margin-bottom:10px}:host .fields-label{font-weight:500}:host .hide-toggle{display:none}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder}]});class Aa{constructor(e,t){this.fb=e,this.dialog=t,this.sendCommand=new i,this.saveTemplate=new i,this.ConnectorType=_t,this.bACnetRequestTypes=Object.values(Wt),this.bACnetObjectTypes=Object.values(Kt),this.bLEMethods=Object.values(Yt),this.cANByteOrders=Object.values(Jt),this.socketMethodProcessings=Object.values(Xt),this.socketEncodings=Object.values(an),this.sNMPMethods=Object.values(en),this.hTTPMethods=Object.values(nn),this.bACnetRequestTypesTranslates=jt,this.bACnetObjectTypesTranslates=$t,this.bLEMethodsTranslates=Qt,this.SocketMethodProcessingsTranslates=Zt,this.SNMPMethodsTranslations=tn,this.gatewayConnectorDefaultTypesTranslates=Ht,this.urlPattern=/^[-a-zA-Zd_$:{}?~+=\/.0-9-]*$/,this.numbersOnlyPattern=/^[0-9]*$/,this.hexOnlyPattern=/^[0-9A-Fa-f ]+$/,this.propagateChange=e=>{},this.destroy$=new Se}ngOnInit(){this.commandForm=this.connectorParamsFormGroupByType(this.connectorType),this.commandForm.valueChanges.subscribe((e=>{const t={};switch(this.connectorType){case _t.REST:case _t.REQUEST:e.httpHeaders.forEach((e=>{t[e.headerName]=e.value})),e.httpHeaders=t}this.commandForm.valid&&this.propagateChange({...this.commandForm.value,...e})}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}connectorParamsFormGroupByType(e){let t;switch(e){case _t.BACNET:t=this.fb.group({method:[null,[ue.required,ue.pattern(kt)]],requestType:[null,[ue.required,ue.pattern(kt)]],requestTimeout:[null,[ue.required,ue.min(10),ue.pattern(this.numbersOnlyPattern)]],objectType:[null,[]],identifier:[null,[ue.required,ue.min(1),ue.pattern(this.numbersOnlyPattern)]],propertyId:[null,[ue.required,ue.pattern(kt)]]});break;case _t.BLE:t=this.fb.group({methodRPC:[null,[ue.required,ue.pattern(kt)]],characteristicUUID:["00002A00-0000-1000-8000-00805F9B34FB",[ue.required,ue.pattern(kt)]],methodProcessing:[null,[ue.required]],withResponse:[!1,[]]});break;case _t.CAN:t=this.fb.group({method:[null,[ue.required,ue.pattern(kt)]],nodeID:[null,[ue.required,ue.min(0),ue.pattern(this.numbersOnlyPattern)]],isExtendedID:[!1,[]],isFD:[!1,[]],bitrateSwitch:[!1,[]],dataLength:[null,[ue.min(1),ue.pattern(this.numbersOnlyPattern)]],dataByteorder:[null,[]],dataBefore:[null,[ue.pattern(kt),ue.pattern(this.hexOnlyPattern)]],dataAfter:[null,[ue.pattern(kt),ue.pattern(this.hexOnlyPattern)]],dataInHEX:[null,[ue.pattern(kt),ue.pattern(this.hexOnlyPattern)]],dataExpression:[null,[ue.pattern(kt)]]});break;case _t.FTP:t=this.fb.group({methodFilter:[null,[ue.required,ue.pattern(kt)]],valueExpression:[null,[ue.required,ue.pattern(kt)]]});break;case _t.OCPP:t=this.fb.group({methodRPC:[null,[ue.required,ue.pattern(kt)]],valueExpression:[null,[ue.required,ue.pattern(kt)]],withResponse:[!1,[]]});break;case _t.SOCKET:t=this.fb.group({methodRPC:[null,[ue.required,ue.pattern(kt)]],methodProcessing:[null,[ue.required]],encoding:[an.UTF_8,[ue.required,ue.pattern(kt)]],withResponse:[!1,[]]});break;case _t.XMPP:t=this.fb.group({methodRPC:[null,[ue.required,ue.pattern(kt)]],valueExpression:[null,[ue.required,ue.pattern(kt)]],withResponse:[!1,[]]});break;case _t.SNMP:t=this.fb.group({requestFilter:[null,[ue.required,ue.pattern(kt)]],method:[null,[ue.required]],withResponse:[!1,[]],oid:this.fb.array([],[ue.required])});break;case _t.REST:t=this.fb.group({methodFilter:[null,[ue.required,ue.pattern(kt)]],httpMethod:[null,[ue.required]],requestUrlExpression:[null,[ue.required,ue.pattern(this.urlPattern)]],responseTimeout:[null,[ue.required,ue.min(10),ue.pattern(this.numbersOnlyPattern)]],timeout:[null,[ue.required,ue.min(10),ue.pattern(this.numbersOnlyPattern)]],tries:[null,[ue.required,ue.min(1),ue.pattern(this.numbersOnlyPattern)]],valueExpression:[null,[ue.required,ue.pattern(kt)]],httpHeaders:this.fb.array([]),security:[{},[ue.required]]});break;case _t.REQUEST:t=this.fb.group({methodFilter:[null,[ue.required,ue.pattern(kt)]],httpMethod:[null,[ue.required]],requestUrlExpression:[null,[ue.required,ue.pattern(this.urlPattern)]],responseTimeout:[null,[ue.required,ue.min(10),ue.pattern(this.numbersOnlyPattern)]],timeout:[null,[ue.required,ue.min(10),ue.pattern(this.numbersOnlyPattern)]],tries:[null,[ue.required,ue.min(1),ue.pattern(this.numbersOnlyPattern)]],requestValueExpression:[null,[ue.required,ue.pattern(kt)]],responseValueExpression:[null,[ue.pattern(kt)]],httpHeaders:this.fb.array([])});break;default:t=this.fb.group({command:[null,[ue.required,ue.pattern(kt)]],params:[{},[It]]})}return t}addSNMPoid(e=null){const t=this.commandForm.get("oid");t&&t.push(this.fb.control(e,[ue.required,ue.pattern(kt)]),{emitEvent:!1})}removeSNMPoid(e){this.commandForm.get("oid").removeAt(e)}addHTTPHeader(e={headerName:null,value:null}){const t=this.commandForm.get("httpHeaders"),n=this.fb.group({headerName:[e.headerName,[ue.required,ue.pattern(kt)]],value:[e.value,[ue.required,ue.pattern(kt)]]});t&&t.push(n,{emitEvent:!1})}removeHTTPHeader(e){this.commandForm.get("httpHeaders").removeAt(e)}getFormArrayControls(e){return this.commandForm.get(e).controls}openEditJSONDialog(e){e&&e.stopPropagation(),this.dialog.open(Qe,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{jsonValue:this.commandForm.get("params").value,required:!0}}).afterClosed().subscribe((e=>{e&&this.commandForm.get("params").setValue(e)}))}save(){this.saveTemplate.emit()}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}clearFromArrayByName(e){const t=this.commandForm.get(e);for(;0!==t.length;)t.removeAt(0)}writeValue(e){if("object"==typeof e){switch(e=J(e),this.connectorType){case _t.SNMP:this.clearFromArrayByName("oid"),e.oid.forEach((e=>{this.addSNMPoid(e)})),delete e.oid;break;case _t.REQUEST:case _t.REST:this.clearFromArrayByName("httpHeaders"),e.httpHeaders&&Object.entries(e.httpHeaders).forEach((e=>{this.addHTTPHeader({headerName:e[0],value:e[1]})})),delete e.httpHeaders}this.commandForm.patchValue(e,{onlySelf:!1})}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Aa,deps:[{token:me.FormBuilder},{token:Je.MatDialog}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Aa,selector:"tb-gateway-service-rpc-connector",inputs:{connectorType:"connectorType"},outputs:{sendCommand:"sendCommand",saveTemplate:"saveTemplate"},providers:[{provide:ge,useExisting:m((()=>Aa)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div fxLayout="column" class="command-form" [formGroup]="commandForm">\n  <div\n    class="mat-subtitle-1 title">{{ \'gateway.rpc.title\' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>\n  <ng-template [ngIf]="connectorType">\n    <ng-container [ngSwitch]="connectorType">\n      <ng-template [ngSwitchCase]="ConnectorType.BACNET">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="method" placeholder="set_state"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.requestType\' | translate }}</mat-label>\n          <mat-select formControlName="requestType">\n            <mat-option *ngFor="let type of bACnetRequestTypes" [value]="type">\n              {{bACnetRequestTypesTranslates.get(type) | translate}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.requestTimeout\' | translate }}</mat-label>\n          <input matInput formControlName="requestTimeout" type="number"\n                 min="10" step="1" placeholder="1000"/>\n        </mat-form-field>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="50" class="mat-block">\n            <mat-label>{{ \'gateway.rpc.objectType\' | translate }}</mat-label>\n            <mat-select formControlName="objectType">\n              <mat-option *ngFor="let type of bACnetObjectTypes" [value]="type">\n                {{bACnetObjectTypesTranslates.get(type) | translate}}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.identifier\' | translate }}</mat-label>\n            <input matInput formControlName="identifier" type="number"\n                   min="1" step="1" placeholder="1"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.propertyId\' | translate }}</mat-label>\n          <input matInput formControlName="propertyId" placeholder="presentValue"/>\n        </mat-form-field>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.BLE">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.characteristicUUID\' | translate }}</mat-label>\n          <input matInput formControlName="characteristicUUID" placeholder="00002A00-0000-1000-8000-00805F9B34FB"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.methodProcessing\' | translate }}</mat-label>\n          <mat-select formControlName="methodProcessing">\n            <mat-option *ngFor="let type of bLEMethods" [value]="type">\n              {{bLEMethodsTranslates.get(type) | translate}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.CAN">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="method" placeholder="sendSameData"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.nodeID\' | translate }}</mat-label>\n          <input matInput formControlName="nodeID" type="number" placeholder="4" min="0" step="1"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="isExtendedID">\n          {{ \'gateway.rpc.isExtendedID\' | translate }}\n        </mat-slide-toggle>\n        <mat-slide-toggle class="mat-slide margin" formControlName="isFD">\n          {{ \'gateway.rpc.isFD\' | translate }}\n        </mat-slide-toggle>\n        <mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch">\n          {{ \'gateway.rpc.bitrateSwitch\' | translate }}\n        </mat-slide-toggle>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataLength\' | translate }}</mat-label>\n            <input matInput formControlName="dataLength" type="number" placeholder="2" min="1" step="1"/>\n          </mat-form-field>\n          <mat-form-field class="mat-block" fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataByteorder\' | translate }}</mat-label>\n            <mat-select formControlName="dataByteorder">\n              <mat-option *ngFor="let order of cANByteOrders" [value]="order">\n                {{ order | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataBefore\' | translate }}</mat-label>\n            <input matInput formControlName="dataBefore" placeholder="00AA"/>\n          </mat-form-field>\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataAfter\' | translate }}</mat-label>\n            <input matInput formControlName="dataAfter" placeholder="0102"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.dataInHEX\' | translate }}</mat-label>\n          <input matInput formControlName="dataInHEX"\n                 placeholder="aa bb cc dd ee ff   aa bb aa bb cc d ee ff"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.dataExpression\' | translate }}</mat-label>\n          <input matInput formControlName="dataExpression"\n                 placeholder="userSpeed if maxAllowedSpeed > userSpeed else maxAllowedSpeed"/>\n        </mat-form-field>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.FTP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodFilter\' | translate }}</mat-label>\n          <input matInput formControlName="methodFilter" placeholder="read"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.OCPP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpc1"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.SOCKET">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.methodProcessing\' | translate }}</mat-label>\n          <mat-select formControlName="methodProcessing">\n            <mat-option *ngFor="let method of socketMethodProcessings" [value]="method">\n              {{ SocketMethodProcessingsTranslates.get(method) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.encoding\' | translate }}</mat-label>\n          <input matInput formControlName="encoding" placeholder="{{socketEncodings[0]}}"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.XMPP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpc1"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.SNMP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.requestFilter\' | translate }}</mat-label>\n          <input matInput formControlName="requestFilter" placeholder="setData"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.method\' | translate }}</mat-label>\n          <mat-select formControlName="method">\n            <mat-option *ngFor="let method of sNMPMethods" [value]="method">\n              {{ SNMPMethodsTranslations.get(method) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="oid">\n          <span class="fields-label">{{ \'gateway.rpc.oids\' | translate }}*</span>\n          <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n               *ngFor="let control of getFormArrayControls(\'oid\'); let i = index">\n            <mat-form-field class="tb-inline-field" appearance="outline" fxFlex subscriptSizing="dynamic">\n              <input matInput [formControl]="control" required/>\n            </mat-form-field>\n            <mat-icon style="cursor:pointer;"\n                      fxFlex="30px"\n                      (click)="removeSNMPoid(i)"\n                      matTooltip="{{ \'gateway.rpc.remove\' | translate }}">delete\n            </mat-icon>\n          </div>\n          <button mat-raised-button\n                  fxFlexAlign="start"\n                  (click)="addSNMPoid()">\n            {{ \'gateway.rpc.add-oid\' | translate }}\n          </button>\n        </fieldset>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.REST">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodFilter\' | translate }}</mat-label>\n          <input matInput formControlName="methodFilter" placeholder="post_attributes"/>\n        </mat-form-field>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field class="mat-block" fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.httpMethod\' | translate }}</mat-label>\n            <mat-select formControlName="httpMethod">\n              <mat-option *ngFor="let method of hTTPMethods" [value]="method">\n                {{ method }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.requestUrlExpression\' | translate }}</mat-label>\n            <input matInput formControlName="requestUrlExpression"\n                   placeholder="http://127.0.0.1:5000/my_devices"/>\n          </mat-form-field>\n        </div>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.responseTimeout\' | translate }}</mat-label>\n            <input matInput formControlName="responseTimeout" type="number"\n                   step="1" min="10" placeholder="10"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.timeout\' | translate }}</mat-label>\n            <input matInput formControlName="timeout" type="number"\n                   step="1" min="10" placeholder="1000"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.tries\' | translate }}</mat-label>\n            <input matInput formControlName="tries" type="number"\n                   step="1" min="1" placeholder="3"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">\n          <span class="fields-label">{{ \'gateway.rpc.httpHeaders\' | translate }}</span>\n          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls(\'httpHeaders\').length">\n            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">\n              <span fxFlex class="title">{{ \'gateway.rpc.header-name\' | translate }}</span>\n              <span fxFlex class="title">{{ \'gateway.rpc.value\' | translate }}</span>\n              <span fxFlex="30px"></span>\n            </div>\n            <mat-divider></mat-divider>\n            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n                 *ngFor="let control of getFormArrayControls(\'httpHeaders\'); let i = index">\n              <ng-container [formGroupName]="i">\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="headerName"/>\n                </mat-form-field>\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="value" placeholder="application/json"/>\n                </mat-form-field>\n                <mat-icon style="cursor:pointer;"\n                          fxFlex="30px"\n                          (click)="removeHTTPHeader(i)"\n                          matTooltip="{{ \'gateway.rpc.remove\' | translate }}">delete\n                </mat-icon>\n              </ng-container>\n            </div>\n          </div>\n          <button mat-raised-button\n                  fxFlexAlign="start"\n                  (click)="addHTTPHeader()">\n            {{ \'gateway.rpc.add-header\' | translate }}\n          </button>\n        </fieldset>\n        <tb-rest-connector-security [formControl]="commandForm.get(\'security\')"></tb-rest-connector-security>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.REQUEST">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodFilter\' | translate }}</mat-label>\n          <input matInput formControlName="methodFilter" placeholder="echo"/>\n        </mat-form-field>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field class="mat-block" fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.httpMethod\' | translate }}</mat-label>\n            <mat-select formControlName="httpMethod">\n              <mat-option *ngFor="let method of hTTPMethods" [value]="method">\n                {{ method }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.requestUrlExpression\' | translate }}</mat-label>\n            <input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/>\n          </mat-form-field>\n        </div>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.responseTimeout\' | translate }}</mat-label>\n            <input matInput formControlName="responseTimeout" type="number"\n                   step="1" min="10" placeholder="10"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.timeout\' | translate }}</mat-label>\n            <input matInput formControlName="timeout" type="number"\n                   step="1" min="10" placeholder="10"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.tries\' | translate }}</mat-label>\n            <input matInput formControlName="tries" type="number"\n                   step="1" min="1" placeholder="1"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.requestValueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="requestValueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.responseValueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="responseValueExpression" placeholder="${temp}"/>\n        </mat-form-field>\n        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">\n          <span class="fields-label">{{ \'gateway.rpc.httpHeaders\' | translate }}</span>\n          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls(\'httpHeaders\').length">\n            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">\n              <span fxFlex class="title">{{ \'gateway.rpc.header-name\' | translate }}</span>\n              <span fxFlex class="title">{{ \'gateway.rpc.value\' | translate }}</span>\n              <span fxFlex="30px"></span>\n            </div>\n            <mat-divider></mat-divider>\n            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n                 *ngFor="let control of getFormArrayControls(\'httpHeaders\'); let i = index">\n              <ng-container [formGroupName]="i">\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="headerName" placeholder="{{ \'gateway.rpc.set\' | translate }}"/>\n                </mat-form-field>\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="value"/>\n                </mat-form-field>\n                <mat-icon style="cursor:pointer;"\n                          fxFlex="30px"\n                          (click)="removeHTTPHeader(i)"\n                          matTooltip="{{ \'gateway.rpc.remove\' | translate }}">delete\n                </mat-icon>\n              </ng-container>\n            </div>\n          </div>\n          <button mat-raised-button\n                  fxFlexAlign="start"\n                  (click)="addHTTPHeader()">\n            {{ \'gateway.rpc.add-header\' | translate }}\n          </button>\n        </fieldset>\n      </ng-template>\n      <ng-template ngSwitchDefault>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.statistics.command\' | translate }}</mat-label>\n          <input matInput formControlName="command"/>\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'widget-config.datasource-parameters\' | translate }}</mat-label>\n          <input matInput formControlName="params" type="JSON" tb-json-to-string/>\n          <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"\n                    matIconSuffix style="cursor:pointer;"\n                    (click)="openEditJSONDialog($event)"\n                    matTooltip="{{ \'gateway.rpc-command-edit-params\' | translate }}">edit\n          </mat-icon>\n          <mat-error *ngIf="commandForm.get(\'params\').hasError(\'invalidJSON\')">\n            {{ \'gateway.rpc.json-value-invalid\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n  <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">\n    <button mat-raised-button\n            (click)="save()"\n            [disabled]="commandForm.invalid">\n      {{ \'gateway.rpc-command-save-template\' | translate }}\n    </button>\n    <button mat-raised-button\n            color="primary"\n            (click)="sendCommand.emit()"\n            [disabled]="commandForm.invalid">\n      {{ \'gateway.rpc-command-send\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;padding:0}:host .title{font-weight:500}:host .command-form{flex-wrap:nowrap}:host .command-form>button{margin-top:10px}:host .mat-mdc-slide-toggle.margin{margin-bottom:10px;margin-left:10px}:host .fields .fields-label{font-weight:500}:host .border{padding:16px;margin-bottom:10px;box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;border:solid 1px #e0e0e0;border-radius:4px}:host .border .title{color:#0000008a}:host .border .mat-icon{color:#00000061}:host .border .mat-divider{margin-left:-16px;margin-right:-16px;margin-bottom:16px}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"directive",type:_.NgSwitchDefault,selector:"[ngSwitchDefault]"},{kind:"directive",type:Ze.TbJsonToStringDirective,selector:"[tb-json-to-string]"},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:z.MatDivider,selector:"mat-divider",inputs:["vertical","inset"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexAlignDirective,selector:"  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]",inputs:["fxFlexAlign","fxFlexAlign.xs","fxFlexAlign.sm","fxFlexAlign.md","fxFlexAlign.lg","fxFlexAlign.xl","fxFlexAlign.lt-sm","fxFlexAlign.lt-md","fxFlexAlign.lt-lg","fxFlexAlign.lt-xl","fxFlexAlign.gt-xs","fxFlexAlign.gt-sm","fxFlexAlign.gt-md","fxFlexAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:me.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"directive",type:me.FormArrayName,selector:"[formArrayName]",inputs:["formArrayName"]},{kind:"component",type:Ia,selector:"tb-rest-connector-security"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayServiceRPCConnectorComponent",Aa),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Aa,decorators:[{type:n,args:[{selector:"tb-gateway-service-rpc-connector",providers:[{provide:ge,useExisting:m((()=>Aa)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div fxLayout="column" class="command-form" [formGroup]="commandForm">\n  <div\n    class="mat-subtitle-1 title">{{ \'gateway.rpc.title\' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>\n  <ng-template [ngIf]="connectorType">\n    <ng-container [ngSwitch]="connectorType">\n      <ng-template [ngSwitchCase]="ConnectorType.BACNET">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="method" placeholder="set_state"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.requestType\' | translate }}</mat-label>\n          <mat-select formControlName="requestType">\n            <mat-option *ngFor="let type of bACnetRequestTypes" [value]="type">\n              {{bACnetRequestTypesTranslates.get(type) | translate}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.requestTimeout\' | translate }}</mat-label>\n          <input matInput formControlName="requestTimeout" type="number"\n                 min="10" step="1" placeholder="1000"/>\n        </mat-form-field>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="50" class="mat-block">\n            <mat-label>{{ \'gateway.rpc.objectType\' | translate }}</mat-label>\n            <mat-select formControlName="objectType">\n              <mat-option *ngFor="let type of bACnetObjectTypes" [value]="type">\n                {{bACnetObjectTypesTranslates.get(type) | translate}}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.identifier\' | translate }}</mat-label>\n            <input matInput formControlName="identifier" type="number"\n                   min="1" step="1" placeholder="1"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.propertyId\' | translate }}</mat-label>\n          <input matInput formControlName="propertyId" placeholder="presentValue"/>\n        </mat-form-field>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.BLE">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.characteristicUUID\' | translate }}</mat-label>\n          <input matInput formControlName="characteristicUUID" placeholder="00002A00-0000-1000-8000-00805F9B34FB"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.methodProcessing\' | translate }}</mat-label>\n          <mat-select formControlName="methodProcessing">\n            <mat-option *ngFor="let type of bLEMethods" [value]="type">\n              {{bLEMethodsTranslates.get(type) | translate}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.CAN">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="method" placeholder="sendSameData"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.nodeID\' | translate }}</mat-label>\n          <input matInput formControlName="nodeID" type="number" placeholder="4" min="0" step="1"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="isExtendedID">\n          {{ \'gateway.rpc.isExtendedID\' | translate }}\n        </mat-slide-toggle>\n        <mat-slide-toggle class="mat-slide margin" formControlName="isFD">\n          {{ \'gateway.rpc.isFD\' | translate }}\n        </mat-slide-toggle>\n        <mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch">\n          {{ \'gateway.rpc.bitrateSwitch\' | translate }}\n        </mat-slide-toggle>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataLength\' | translate }}</mat-label>\n            <input matInput formControlName="dataLength" type="number" placeholder="2" min="1" step="1"/>\n          </mat-form-field>\n          <mat-form-field class="mat-block" fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataByteorder\' | translate }}</mat-label>\n            <mat-select formControlName="dataByteorder">\n              <mat-option *ngFor="let order of cANByteOrders" [value]="order">\n                {{ order | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataBefore\' | translate }}</mat-label>\n            <input matInput formControlName="dataBefore" placeholder="00AA"/>\n          </mat-form-field>\n          <mat-form-field fxFlex="50">\n            <mat-label>{{ \'gateway.rpc.dataAfter\' | translate }}</mat-label>\n            <input matInput formControlName="dataAfter" placeholder="0102"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.dataInHEX\' | translate }}</mat-label>\n          <input matInput formControlName="dataInHEX"\n                 placeholder="aa bb cc dd ee ff   aa bb aa bb cc d ee ff"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.dataExpression\' | translate }}</mat-label>\n          <input matInput formControlName="dataExpression"\n                 placeholder="userSpeed if maxAllowedSpeed > userSpeed else maxAllowedSpeed"/>\n        </mat-form-field>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.FTP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodFilter\' | translate }}</mat-label>\n          <input matInput formControlName="methodFilter" placeholder="read"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.OCPP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpc1"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.SOCKET">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.methodProcessing\' | translate }}</mat-label>\n          <mat-select formControlName="methodProcessing">\n            <mat-option *ngFor="let method of socketMethodProcessings" [value]="method">\n              {{ SocketMethodProcessingsTranslates.get(method) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.encoding\' | translate }}</mat-label>\n          <input matInput formControlName="encoding" placeholder="{{socketEncodings[0]}}"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.XMPP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodRPC\' | translate }}</mat-label>\n          <input matInput formControlName="methodRPC" placeholder="rpc1"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.SNMP">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.requestFilter\' | translate }}</mat-label>\n          <input matInput formControlName="requestFilter" placeholder="setData"/>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ \'gateway.rpc.method\' | translate }}</mat-label>\n          <mat-select formControlName="method">\n            <mat-option *ngFor="let method of sNMPMethods" [value]="method">\n              {{ SNMPMethodsTranslations.get(method) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">\n          {{ \'gateway.rpc.withResponse\' | translate }}\n        </mat-slide-toggle>\n        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="oid">\n          <span class="fields-label">{{ \'gateway.rpc.oids\' | translate }}*</span>\n          <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n               *ngFor="let control of getFormArrayControls(\'oid\'); let i = index">\n            <mat-form-field class="tb-inline-field" appearance="outline" fxFlex subscriptSizing="dynamic">\n              <input matInput [formControl]="control" required/>\n            </mat-form-field>\n            <mat-icon style="cursor:pointer;"\n                      fxFlex="30px"\n                      (click)="removeSNMPoid(i)"\n                      matTooltip="{{ \'gateway.rpc.remove\' | translate }}">delete\n            </mat-icon>\n          </div>\n          <button mat-raised-button\n                  fxFlexAlign="start"\n                  (click)="addSNMPoid()">\n            {{ \'gateway.rpc.add-oid\' | translate }}\n          </button>\n        </fieldset>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.REST">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodFilter\' | translate }}</mat-label>\n          <input matInput formControlName="methodFilter" placeholder="post_attributes"/>\n        </mat-form-field>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field class="mat-block" fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.httpMethod\' | translate }}</mat-label>\n            <mat-select formControlName="httpMethod">\n              <mat-option *ngFor="let method of hTTPMethods" [value]="method">\n                {{ method }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.requestUrlExpression\' | translate }}</mat-label>\n            <input matInput formControlName="requestUrlExpression"\n                   placeholder="http://127.0.0.1:5000/my_devices"/>\n          </mat-form-field>\n        </div>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.responseTimeout\' | translate }}</mat-label>\n            <input matInput formControlName="responseTimeout" type="number"\n                   step="1" min="10" placeholder="10"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.timeout\' | translate }}</mat-label>\n            <input matInput formControlName="timeout" type="number"\n                   step="1" min="10" placeholder="1000"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.tries\' | translate }}</mat-label>\n            <input matInput formControlName="tries" type="number"\n                   step="1" min="1" placeholder="3"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="valueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">\n          <span class="fields-label">{{ \'gateway.rpc.httpHeaders\' | translate }}</span>\n          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls(\'httpHeaders\').length">\n            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">\n              <span fxFlex class="title">{{ \'gateway.rpc.header-name\' | translate }}</span>\n              <span fxFlex class="title">{{ \'gateway.rpc.value\' | translate }}</span>\n              <span fxFlex="30px"></span>\n            </div>\n            <mat-divider></mat-divider>\n            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n                 *ngFor="let control of getFormArrayControls(\'httpHeaders\'); let i = index">\n              <ng-container [formGroupName]="i">\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="headerName"/>\n                </mat-form-field>\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="value" placeholder="application/json"/>\n                </mat-form-field>\n                <mat-icon style="cursor:pointer;"\n                          fxFlex="30px"\n                          (click)="removeHTTPHeader(i)"\n                          matTooltip="{{ \'gateway.rpc.remove\' | translate }}">delete\n                </mat-icon>\n              </ng-container>\n            </div>\n          </div>\n          <button mat-raised-button\n                  fxFlexAlign="start"\n                  (click)="addHTTPHeader()">\n            {{ \'gateway.rpc.add-header\' | translate }}\n          </button>\n        </fieldset>\n        <tb-rest-connector-security [formControl]="commandForm.get(\'security\')"></tb-rest-connector-security>\n      </ng-template>\n      <ng-template [ngSwitchCase]="ConnectorType.REQUEST">\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.methodFilter\' | translate }}</mat-label>\n          <input matInput formControlName="methodFilter" placeholder="echo"/>\n        </mat-form-field>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field class="mat-block" fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.httpMethod\' | translate }}</mat-label>\n            <mat-select formControlName="httpMethod">\n              <mat-option *ngFor="let method of hTTPMethods" [value]="method">\n                {{ method }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.requestUrlExpression\' | translate }}</mat-label>\n            <input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/>\n          </mat-form-field>\n        </div>\n        <div fxFlex fxLayout="row" fxLayoutGap="10px">\n          <mat-form-field fxFlex="33">\n            <mat-label>{{ \'gateway.rpc.responseTimeout\' | translate }}</mat-label>\n            <input matInput formControlName="responseTimeout" type="number"\n                   step="1" min="10" placeholder="10"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.timeout\' | translate }}</mat-label>\n            <input matInput formControlName="timeout" type="number"\n                   step="1" min="10" placeholder="10"/>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.rpc.tries\' | translate }}</mat-label>\n            <input matInput formControlName="tries" type="number"\n                   step="1" min="1" placeholder="1"/>\n          </mat-form-field>\n        </div>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.requestValueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="requestValueExpression" placeholder="${params}"/>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.rpc.responseValueExpression\' | translate }}</mat-label>\n          <input matInput formControlName="responseValueExpression" placeholder="${temp}"/>\n        </mat-form-field>\n        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">\n          <span class="fields-label">{{ \'gateway.rpc.httpHeaders\' | translate }}</span>\n          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls(\'httpHeaders\').length">\n            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">\n              <span fxFlex class="title">{{ \'gateway.rpc.header-name\' | translate }}</span>\n              <span fxFlex class="title">{{ \'gateway.rpc.value\' | translate }}</span>\n              <span fxFlex="30px"></span>\n            </div>\n            <mat-divider></mat-divider>\n            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n                 *ngFor="let control of getFormArrayControls(\'httpHeaders\'); let i = index">\n              <ng-container [formGroupName]="i">\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="headerName" placeholder="{{ \'gateway.rpc.set\' | translate }}"/>\n                </mat-form-field>\n                <mat-form-field appearance="outline" fxFlex>\n                  <input matInput formControlName="value"/>\n                </mat-form-field>\n                <mat-icon style="cursor:pointer;"\n                          fxFlex="30px"\n                          (click)="removeHTTPHeader(i)"\n                          matTooltip="{{ \'gateway.rpc.remove\' | translate }}">delete\n                </mat-icon>\n              </ng-container>\n            </div>\n          </div>\n          <button mat-raised-button\n                  fxFlexAlign="start"\n                  (click)="addHTTPHeader()">\n            {{ \'gateway.rpc.add-header\' | translate }}\n          </button>\n        </fieldset>\n      </ng-template>\n      <ng-template ngSwitchDefault>\n        <mat-form-field>\n          <mat-label>{{ \'gateway.statistics.command\' | translate }}</mat-label>\n          <input matInput formControlName="command"/>\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'widget-config.datasource-parameters\' | translate }}</mat-label>\n          <input matInput formControlName="params" type="JSON" tb-json-to-string/>\n          <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"\n                    matIconSuffix style="cursor:pointer;"\n                    (click)="openEditJSONDialog($event)"\n                    matTooltip="{{ \'gateway.rpc-command-edit-params\' | translate }}">edit\n          </mat-icon>\n          <mat-error *ngIf="commandForm.get(\'params\').hasError(\'invalidJSON\')">\n            {{ \'gateway.rpc.json-value-invalid\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </ng-template>\n    </ng-container>\n  </ng-template>\n  <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">\n    <button mat-raised-button\n            (click)="save()"\n            [disabled]="commandForm.invalid">\n      {{ \'gateway.rpc-command-save-template\' | translate }}\n    </button>\n    <button mat-raised-button\n            color="primary"\n            (click)="sendCommand.emit()"\n            [disabled]="commandForm.invalid">\n      {{ \'gateway.rpc-command-send\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;padding:0}:host .title{font-weight:500}:host .command-form{flex-wrap:nowrap}:host .command-form>button{margin-top:10px}:host .mat-mdc-slide-toggle.margin{margin-bottom:10px;margin-left:10px}:host .fields .fields-label{font-weight:500}:host .border{padding:16px;margin-bottom:10px;box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;border:solid 1px #e0e0e0;border-radius:4px}:host .border .title{color:#0000008a}:host .border .mat-icon{color:#00000061}:host .border .mat-divider{margin-left:-16px;margin-right:-16px;margin-bottom:16px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:Je.MatDialog}],propDecorators:{connectorType:[{type:a}],sendCommand:[{type:l}],saveTemplate:[{type:l}]}});class Na extends P{constructor(e,t,n,a,o){super(e,t,a),this.store=e,this.router=t,this.data=n,this.dialogRef=a,this.fb=o,this.config=this.data.config,this.templates=this.data.templates,this.templateNameCtrl=this.fb.control("",[ue.required])}validateDuplicateName(e){const t=e.value.trim();return!!this.templates.find((e=>e.name===t))}close(){this.dialogRef.close()}save(){this.templateNameCtrl.setValue(this.templateNameCtrl.value.trim()),this.templateNameCtrl.valid&&this.dialogRef.close(this.templateNameCtrl.value)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Na,deps:[{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef},{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Na,selector:"tb-gateway-service-rpc-connector-template-dialog",usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-toolbar color="primary">\n  <h2 translate>gateway.rpc.save-template</h2>\n  <span fxFlex></span>\n  <button mat-icon-button\n          (click)="close()"\n          type="button">\n    <mat-icon class="material-icons">close</mat-icon>\n  </button>\n</mat-toolbar>\n<div mat-dialog-content style="width: 600px" class="mat-content" fxLayout="column">\n  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">\n    <mat-label translate>gateway.rpc.template-name</mat-label>\n    <input matInput [formControl]="templateNameCtrl" required/>\n    <mat-error\n      *ngIf="templateNameCtrl.hasError(\'required\')">\n      {{ \'gateway.rpc.template-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div class="mat-mdc-form-field-error"\n       style="margin-top: -15px; padding-left: 10px; font-size: 14px;"\n       *ngIf="validateDuplicateName(templateNameCtrl)">\n    {{ \'gateway.rpc.template-name-duplicate\' | translate }}\n  </div>\n</div>\n<div mat-dialog-actions fxLayoutAlign="end center">\n  <button mat-button\n          type="button"\n          (click)="close()">\n    {{ \'action.cancel\' | translate }}\n  </button>\n  <button mat-raised-button  color="primary"\n          type="button"\n          [disabled]="!templateNameCtrl.valid"\n          (click)="save()">\n    {{ \'action.save\' | translate }}\n  </button>\n</div>\n',dependencies:[{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:Je.MatDialogActions,selector:"[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",inputs:["align"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayServiceRPCConnectorTemplateDialogComponent",Na),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Na,decorators:[{type:n,args:[{selector:"tb-gateway-service-rpc-connector-template-dialog",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-toolbar color="primary">\n  <h2 translate>gateway.rpc.save-template</h2>\n  <span fxFlex></span>\n  <button mat-icon-button\n          (click)="close()"\n          type="button">\n    <mat-icon class="material-icons">close</mat-icon>\n  </button>\n</mat-toolbar>\n<div mat-dialog-content style="width: 600px" class="mat-content" fxLayout="column">\n  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">\n    <mat-label translate>gateway.rpc.template-name</mat-label>\n    <input matInput [formControl]="templateNameCtrl" required/>\n    <mat-error\n      *ngIf="templateNameCtrl.hasError(\'required\')">\n      {{ \'gateway.rpc.template-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div class="mat-mdc-form-field-error"\n       style="margin-top: -15px; padding-left: 10px; font-size: 14px;"\n       *ngIf="validateDuplicateName(templateNameCtrl)">\n    {{ \'gateway.rpc.template-name-duplicate\' | translate }}\n  </div>\n</div>\n<div mat-dialog-actions fxLayoutAlign="end center">\n  <button mat-button\n          type="button"\n          (click)="close()">\n    {{ \'action.cancel\' | translate }}\n  </button>\n  <button mat-raised-button  color="primary"\n          type="button"\n          [disabled]="!templateNameCtrl.valid"\n          (click)="save()">\n    {{ \'action.save\' | translate }}\n  </button>\n</div>\n'}]}],ctorParameters:()=>[{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef},{type:me.FormBuilder}]});class Ma{constructor(e,t){this.fb=e,this.cdr=t,this.valueTypeKeys=Object.values(Gn),this.MappingValueType=Gn,this.valueTypes=Vn,this.onChange=e=>{},this.onTouched=()=>{},this.destroy$=new Se,this.rpcParametersFormGroup=this.fb.group({method:[null,[ue.required,ue.pattern(kt)]],arguments:this.fb.array([])}),this.observeValueChanges()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}validate(){return this.rpcParametersFormGroup.valid?null:{rpcParametersFormGroup:{valid:!1}}}writeValue(e){this.clearArguments(),e.arguments?.map((({type:e,value:t})=>({type:e,[e]:t}))).forEach((e=>this.addArgument(e))),this.cdr.markForCheck(),this.rpcParametersFormGroup.get("method").patchValue(e.method)}observeValueChanges(){this.rpcParametersFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{const t=e.arguments.map((({type:e,...t})=>({type:e,value:t[e]})));this.onChange({method:e.method,arguments:t}),this.onTouched()}))}removeArgument(e){this.rpcParametersFormGroup.get("arguments").removeAt(e)}addArgument(e={}){const t=this.fb.group({type:[e.type??Gn.STRING],string:[e.string??{value:"",disabled:!(ee(e,{})||e.string)},[ue.required,ue.pattern(kt)]],integer:[{value:e.integer??0,disabled:!ie(e.integer)},[ue.required,ue.pattern(Lt)]],double:[{value:e.double??0,disabled:!ie(e.double)},[ue.required]],boolean:[{value:e.boolean??!1,disabled:!ie(e.boolean)},[ue.required]]});this.observeTypeChange(t),this.rpcParametersFormGroup.get("arguments").push(t,{emitEvent:!1})}clearArguments(){const e=this.rpcParametersFormGroup.get("arguments");for(;0!==e.length;)e.removeAt(0)}observeTypeChange(e){e.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{e.disable({emitEvent:!1}),e.get("type").enable({emitEvent:!1}),e.get(t).enable({emitEvent:!1})}))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ma,deps:[{token:me.FormBuilder},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Ma,isStandalone:!0,selector:"tb-gateway-opc-rpc-parameters",providers:[{provide:ge,useExisting:m((()=>Ma)),multi:!0},{provide:fe,useExisting:m((()=>Ma)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<ng-container [formGroup]="rpcParametersFormGroup">\n  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">\n    {{ \'gateway.rpc.hint.opc-method\' | translate }}\n  </div>\n  <mat-form-field class="tb-flex">\n    <mat-label>{{ \'gateway.rpc.method\' | translate }}</mat-label>\n    <input matInput formControlName="method" placeholder="multiply"/>\n  </mat-form-field>\n  <fieldset class="tb-form-panel stroked arguments-container" fxLayout="column" formArrayName="arguments">\n    <strong>\n      <span class="fields-label">{{ \'gateway.rpc.arguments\' | translate }}</span>\n    </strong>\n    <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n         *ngFor="let argumentFormGroup of rpcParametersFormGroup.get(\'arguments\')[\'controls\']; let i = index" [formGroup]="argumentFormGroup">\n      <div class="tb-form-row column-xs type-container" fxLayoutAlign="space-between center">\n        <div class="tb-required" translate>gateway.type</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="type">\n              <mat-select-trigger>\n                <div class="tb-flex align-center">\n                  <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(argumentFormGroup.get(\'type\').value)?.icon">\n                  </mat-icon>\n                  <span>{{ valueTypes.get(argumentFormGroup.get(\'type\').value)?.name | translate }}</span>\n                </div>\n              </mat-select-trigger>\n              <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">\n                <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">\n                </mat-icon>\n                <span>{{ valueTypes.get(valueType).name | translate }}</span>\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row column-xs value-container" fxLayoutAlign="space-between center">\n        <div class="tb-required" translate>gateway.value</div>\n        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n          <ng-container [ngSwitch]="argumentFormGroup.get(\'type\').value">\n            <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"\n                   placeholder="{{ \'gateway.set\' | translate }}" />\n            <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"\n                   placeholder="{{ \'gateway.set\' | translate }}" />\n            <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"\n                   placeholder="{{ \'gateway.set\' | translate }}" />\n            <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">\n              <mat-option [value]="true">true</mat-option>\n              <mat-option [value]="false">false</mat-option>\n            </mat-select>\n          </ng-container>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.value-required\') | translate"\n                    *ngIf="argumentFormGroup.get(argumentFormGroup.get(\'type\').value).hasError(\'required\')\n                              && argumentFormGroup.get(argumentFormGroup.get(\'type\').value).touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n      <button mat-icon-button (click)="removeArgument(i)"\n              class="tb-box-button"\n              matTooltip="{{ \'gateway.rpc.remove\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n    <button mat-raised-button\n            fxFlexAlign="start"\n            (click)="addArgument()">\n      {{ \'gateway.rpc.add-argument\' | translate }}\n    </button>\n  </fieldset>\n</ng-container>\n\n',styles:['@charset "UTF-8";:host .arguments-container{margin-bottom:10px}:host .type-container{width:40%}:host .value-container{width:50%}:host .hint-container{margin-bottom:12px}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"ngmodule",type:D},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"directive",type:we.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexAlignDirective,selector:"  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]",inputs:["fxFlexAlign","fxFlexAlign.xs","fxFlexAlign.sm","fxFlexAlign.md","fxFlexAlign.lg","fxFlexAlign.xl","fxFlexAlign.lt-sm","fxFlexAlign.lt-md","fxFlexAlign.lt-lg","fxFlexAlign.lt-xl","fxFlexAlign.gt-xs","fxFlexAlign.gt-sm","fxFlexAlign.gt-md","fxFlexAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:me.FormArrayName,selector:"[formArrayName]",inputs:["formArrayName"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ma,decorators:[{type:n,args:[{selector:"tb-gateway-opc-rpc-parameters",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>Ma)),multi:!0},{provide:fe,useExisting:m((()=>Ma)),multi:!0}],standalone:!0,imports:[H,D],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<ng-container [formGroup]="rpcParametersFormGroup">\n  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">\n    {{ \'gateway.rpc.hint.opc-method\' | translate }}\n  </div>\n  <mat-form-field class="tb-flex">\n    <mat-label>{{ \'gateway.rpc.method\' | translate }}</mat-label>\n    <input matInput formControlName="method" placeholder="multiply"/>\n  </mat-form-field>\n  <fieldset class="tb-form-panel stroked arguments-container" fxLayout="column" formArrayName="arguments">\n    <strong>\n      <span class="fields-label">{{ \'gateway.rpc.arguments\' | translate }}</span>\n    </strong>\n    <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"\n         *ngFor="let argumentFormGroup of rpcParametersFormGroup.get(\'arguments\')[\'controls\']; let i = index" [formGroup]="argumentFormGroup">\n      <div class="tb-form-row column-xs type-container" fxLayoutAlign="space-between center">\n        <div class="tb-required" translate>gateway.type</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="type">\n              <mat-select-trigger>\n                <div class="tb-flex align-center">\n                  <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(argumentFormGroup.get(\'type\').value)?.icon">\n                  </mat-icon>\n                  <span>{{ valueTypes.get(argumentFormGroup.get(\'type\').value)?.name | translate }}</span>\n                </div>\n              </mat-select-trigger>\n              <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">\n                <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">\n                </mat-icon>\n                <span>{{ valueTypes.get(valueType).name | translate }}</span>\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row column-xs value-container" fxLayoutAlign="space-between center">\n        <div class="tb-required" translate>gateway.value</div>\n        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n          <ng-container [ngSwitch]="argumentFormGroup.get(\'type\').value">\n            <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"\n                   placeholder="{{ \'gateway.set\' | translate }}" />\n            <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"\n                   placeholder="{{ \'gateway.set\' | translate }}" />\n            <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"\n                   placeholder="{{ \'gateway.set\' | translate }}" />\n            <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">\n              <mat-option [value]="true">true</mat-option>\n              <mat-option [value]="false">false</mat-option>\n            </mat-select>\n          </ng-container>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.value-required\') | translate"\n                    *ngIf="argumentFormGroup.get(argumentFormGroup.get(\'type\').value).hasError(\'required\')\n                              && argumentFormGroup.get(argumentFormGroup.get(\'type\').value).touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n      <button mat-icon-button (click)="removeArgument(i)"\n              class="tb-box-button"\n              matTooltip="{{ \'gateway.rpc.remove\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n    <button mat-raised-button\n            fxFlexAlign="start"\n            (click)="addArgument()">\n      {{ \'gateway.rpc.add-argument\' | translate }}\n    </button>\n  </fieldset>\n</ng-container>\n\n',styles:['@charset "UTF-8";:host .arguments-container{margin-bottom:10px}:host .type-container{width:40%}:host .value-container{width:50%}:host .hint-container{margin-bottom:12px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:t.ChangeDetectorRef}]});class Ea{constructor(e){this.fb=e,this.onChange=e=>{},this.onTouched=()=>{},this.destroy$=new Se,this.rpcParametersFormGroup=this.fb.group({methodFilter:[null,[ue.required,ue.pattern(kt)]],requestTopicExpression:[null,[ue.required,ue.pattern(kt)]],responseTopicExpression:[{value:null,disabled:!0},[ue.required,ue.pattern(kt)]],responseTimeout:[{value:null,disabled:!0},[ue.min(10),ue.pattern(Lt)]],valueExpression:[null,[ue.required,ue.pattern(kt)]],withResponse:[!1,[]]}),this.observeValueChanges(),this.observeWithResponse()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}validate(){return this.rpcParametersFormGroup.valid?null:{rpcParametersFormGroup:{valid:!1}}}writeValue(e){this.rpcParametersFormGroup.patchValue(e,{emitEvent:!1}),this.toggleResponseFields(e.withResponse)}observeValueChanges(){this.rpcParametersFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}observeWithResponse(){this.rpcParametersFormGroup.get("withResponse").valueChanges.pipe(Ee((e=>this.toggleResponseFields(e))),Ne(this.destroy$)).subscribe()}toggleResponseFields(e){const t=this.rpcParametersFormGroup.get("responseTopicExpression"),n=this.rpcParametersFormGroup.get("responseTimeout");e?(t.enable(),n.enable()):(t.disable(),n.disable())}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ea,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Ea,isStandalone:!0,selector:"tb-gateway-mqtt-rpc-parameters",providers:[{provide:ge,useExisting:m((()=>Ea)),multi:!0},{provide:fe,useExisting:m((()=>Ea)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<ng-container [formGroup]="rpcParametersFormGroup">\n  <mat-form-field>\n    <mat-label>{{ \'gateway.rpc.method-name\' | translate }}</mat-label>\n    <input matInput formControlName="methodFilter"\n           placeholder="echo"/>\n  </mat-form-field>\n  <mat-form-field>\n    <mat-label>{{ \'gateway.rpc.requestTopicExpression\' | translate }}</mat-label>\n    <input matInput formControlName="requestTopicExpression"\n           placeholder="sensor/${deviceName}/request/${methodName}/${requestId}"/>\n  </mat-form-field>\n  <mat-slide-toggle class="margin" (click)="$event.stopPropagation()" formControlName="withResponse">\n    {{ \'gateway.rpc.withResponse\' | translate }}\n  </mat-slide-toggle>\n  <mat-form-field *ngIf="rpcParametersFormGroup.get(\'withResponse\')?.value">\n    <mat-label>{{ \'gateway.rpc.responseTopicExpression\' | translate }}</mat-label>\n    <input matInput formControlName="responseTopicExpression"\n           placeholder="sensor/${deviceName}/response/${methodName}/${requestId}"/>\n  </mat-form-field>\n  <mat-form-field *ngIf="rpcParametersFormGroup.get(\'withResponse\')?.value">\n    <mat-label>{{ \'gateway.rpc.responseTimeout\' | translate }}</mat-label>\n    <input matInput formControlName="responseTimeout" type="number"\n           placeholder="10000" min="10" step="1"/>\n  </mat-form-field>\n  <mat-form-field>\n    <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n    <input matInput formControlName="valueExpression"\n           placeholder="${params}"/>\n  </mat-form-field>\n</ng-container>\n\n',styles:['@charset "UTF-8";:host{display:flex;flex-direction:column}:host .mat-mdc-slide-toggle.margin{margin-bottom:10px;margin-left:10px}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ea,decorators:[{type:n,args:[{selector:"tb-gateway-mqtt-rpc-parameters",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>Ea)),multi:!0},{provide:fe,useExisting:m((()=>Ea)),multi:!0}],standalone:!0,imports:[H,D],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<ng-container [formGroup]="rpcParametersFormGroup">\n  <mat-form-field>\n    <mat-label>{{ \'gateway.rpc.method-name\' | translate }}</mat-label>\n    <input matInput formControlName="methodFilter"\n           placeholder="echo"/>\n  </mat-form-field>\n  <mat-form-field>\n    <mat-label>{{ \'gateway.rpc.requestTopicExpression\' | translate }}</mat-label>\n    <input matInput formControlName="requestTopicExpression"\n           placeholder="sensor/${deviceName}/request/${methodName}/${requestId}"/>\n  </mat-form-field>\n  <mat-slide-toggle class="margin" (click)="$event.stopPropagation()" formControlName="withResponse">\n    {{ \'gateway.rpc.withResponse\' | translate }}\n  </mat-slide-toggle>\n  <mat-form-field *ngIf="rpcParametersFormGroup.get(\'withResponse\')?.value">\n    <mat-label>{{ \'gateway.rpc.responseTopicExpression\' | translate }}</mat-label>\n    <input matInput formControlName="responseTopicExpression"\n           placeholder="sensor/${deviceName}/response/${methodName}/${requestId}"/>\n  </mat-form-field>\n  <mat-form-field *ngIf="rpcParametersFormGroup.get(\'withResponse\')?.value">\n    <mat-label>{{ \'gateway.rpc.responseTimeout\' | translate }}</mat-label>\n    <input matInput formControlName="responseTimeout" type="number"\n           placeholder="10000" min="10" step="1"/>\n  </mat-form-field>\n  <mat-form-field>\n    <mat-label>{{ \'gateway.rpc.valueExpression\' | translate }}</mat-label>\n    <input matInput formControlName="valueExpression"\n           placeholder="${params}"/>\n  </mat-form-field>\n</ng-container>\n\n',styles:['@charset "UTF-8";:host{display:flex;flex-direction:column}:host .mat-mdc-slide-toggle.margin{margin-bottom:10px;margin-left:10px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder}]});class qa{constructor(e){this.fb=e,this.ModbusEditableDataTypes=ta,this.ModbusFunctionCodeTranslationsMap=zt,this.modbusDataTypes=Object.values(ea),this.writeFunctionCodes=[5,6,15,16],this.defaultFunctionCodes=[3,4,6,16],this.readFunctionCodes=[1,2,3,4],this.bitsFunctionCodes=[...this.readFunctionCodes,...this.writeFunctionCodes],this.destroy$=new Se,this.rpcParametersFormGroup=this.fb.group({type:[ea.BYTES,[ue.required]],functionCode:[this.defaultFunctionCodes[0],[ue.required]],value:[{value:"",disabled:!0},[ue.required,ue.pattern(kt)]],address:[null,[ue.required]],objectsCount:[1,[ue.required]]}),this.updateFunctionCodes(this.rpcParametersFormGroup.get("type").value),this.observeValueChanges(),this.observeKeyDataType(),this.observeFunctionCode()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}validate(){return this.rpcParametersFormGroup.valid?null:{rpcParametersFormGroup:{valid:!1}}}writeValue(e){this.rpcParametersFormGroup.patchValue(e,{emitEvent:!1})}observeValueChanges(){this.rpcParametersFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}observeKeyDataType(){this.rpcParametersFormGroup.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.ModbusEditableDataTypes.includes(e)||this.rpcParametersFormGroup.get("objectsCount").patchValue(na[e],{emitEvent:!1}),this.updateFunctionCodes(e)}))}observeFunctionCode(){this.rpcParametersFormGroup.get("functionCode").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.updateValueEnabling(e)))}updateValueEnabling(e){this.writeFunctionCodes.includes(e)?this.rpcParametersFormGroup.get("value").enable({emitEvent:!1}):(this.rpcParametersFormGroup.get("value").setValue(null),this.rpcParametersFormGroup.get("value").disable({emitEvent:!1}))}updateFunctionCodes(e){this.functionCodes=e===ea.BITS?this.bitsFunctionCodes:this.defaultFunctionCodes,this.functionCodes.includes(this.rpcParametersFormGroup.get("functionCode").value)||this.rpcParametersFormGroup.get("functionCode").patchValue(this.functionCodes[0],{emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:qa,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:qa,isStandalone:!0,selector:"tb-gateway-modbus-rpc-parameters",providers:[{provide:ge,useExisting:m((()=>qa)),multi:!0},{provide:fe,useExisting:m((()=>qa)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<ng-container [formGroup]="rpcParametersFormGroup">\n  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">\n    {{ \'gateway.rpc.hint.modbus-response-reading\' | translate }}<br>\n    {{ \'gateway.rpc.hint.modbus-writing-functions\' | translate }}\n  </div>\n  <div fxFlex fxLayout="row" fxLayoutGap="10px">\n    <mat-form-field fxFlex="50" class="mat-block">\n      <mat-label>{{ \'gateway.rpc.type\' | translate }}</mat-label>\n      <mat-select formControlName="type">\n        <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex="50" class="mat-block">\n      <mat-label>{{ \'gateway.rpc.functionCode\' | translate }}</mat-label>\n      <mat-select formControlName="functionCode">\n        <mat-option *ngFor="let code of functionCodes" [value]="code">{{ ModbusFunctionCodeTranslationsMap.get(code) | translate}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxFlex fxLayout="row" fxLayoutGap="10px">\n    <mat-form-field fxFlex="50">\n      <mat-label>{{ \'gateway.rpc.address\' | translate }}</mat-label>\n      <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ \'gateway.set\' | translate }}"/>\n      <mat-icon matSuffix\n                matTooltipPosition="above"\n                matTooltipClass="tb-error-tooltip"\n                [matTooltip]="(\'gateway.address-required\') | translate"\n                *ngIf="rpcParametersFormGroup.get(\'address\').hasError(\'required\') &&\n                                           rpcParametersFormGroup.get(\'address\').touched"\n                class="tb-error">\n        warning\n      </mat-icon>\n    </mat-form-field>\n    <mat-form-field fxFlex="50">\n      <mat-label>{{ \'gateway.rpc.objectsCount\' | translate }}</mat-label>\n      <input\n        matInput\n        type="number"\n        min="1"\n        max="50000"\n        name="value"\n        formControlName="objectsCount"\n        placeholder="{{ \'gateway.set\' | translate }}"\n        [readonly]="!ModbusEditableDataTypes.includes(rpcParametersFormGroup.get(\'type\').value)"\n      />\n    </mat-form-field>\n  </div>\n  <div *ngIf="writeFunctionCodes.includes(rpcParametersFormGroup.get(\'functionCode\').value)" fxFlex fxLayout="row">\n    <mat-form-field fxFlex="100">\n      <mat-label>{{ \'gateway.rpc.value\' | translate }}</mat-label>\n      <input matInput name="value" formControlName="value" placeholder="{{ \'gateway.set\' | translate }}"/>\n      <mat-icon matSuffix\n                matTooltipPosition="above"\n                matTooltipClass="tb-error-tooltip"\n                [matTooltip]="(\'gateway.value-required\') | translate"\n                *ngIf="rpcParametersFormGroup.get(\'value\').hasError(\'required\') && rpcParametersFormGroup.get(\'value\').touched"\n                class="tb-error"\n      >\n        warning\n      </mat-icon>\n    </mat-form-field>\n  </div>\n</ng-container>\n\n',styles:['@charset "UTF-8";:host .hint-container{margin-bottom:12px}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:qa,decorators:[{type:n,args:[{selector:"tb-gateway-modbus-rpc-parameters",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>qa)),multi:!0},{provide:fe,useExisting:m((()=>qa)),multi:!0}],standalone:!0,imports:[H,D],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<ng-container [formGroup]="rpcParametersFormGroup">\n  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">\n    {{ \'gateway.rpc.hint.modbus-response-reading\' | translate }}<br>\n    {{ \'gateway.rpc.hint.modbus-writing-functions\' | translate }}\n  </div>\n  <div fxFlex fxLayout="row" fxLayoutGap="10px">\n    <mat-form-field fxFlex="50" class="mat-block">\n      <mat-label>{{ \'gateway.rpc.type\' | translate }}</mat-label>\n      <mat-select formControlName="type">\n        <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex="50" class="mat-block">\n      <mat-label>{{ \'gateway.rpc.functionCode\' | translate }}</mat-label>\n      <mat-select formControlName="functionCode">\n        <mat-option *ngFor="let code of functionCodes" [value]="code">{{ ModbusFunctionCodeTranslationsMap.get(code) | translate}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxFlex fxLayout="row" fxLayoutGap="10px">\n    <mat-form-field fxFlex="50">\n      <mat-label>{{ \'gateway.rpc.address\' | translate }}</mat-label>\n      <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ \'gateway.set\' | translate }}"/>\n      <mat-icon matSuffix\n                matTooltipPosition="above"\n                matTooltipClass="tb-error-tooltip"\n                [matTooltip]="(\'gateway.address-required\') | translate"\n                *ngIf="rpcParametersFormGroup.get(\'address\').hasError(\'required\') &&\n                                           rpcParametersFormGroup.get(\'address\').touched"\n                class="tb-error">\n        warning\n      </mat-icon>\n    </mat-form-field>\n    <mat-form-field fxFlex="50">\n      <mat-label>{{ \'gateway.rpc.objectsCount\' | translate }}</mat-label>\n      <input\n        matInput\n        type="number"\n        min="1"\n        max="50000"\n        name="value"\n        formControlName="objectsCount"\n        placeholder="{{ \'gateway.set\' | translate }}"\n        [readonly]="!ModbusEditableDataTypes.includes(rpcParametersFormGroup.get(\'type\').value)"\n      />\n    </mat-form-field>\n  </div>\n  <div *ngIf="writeFunctionCodes.includes(rpcParametersFormGroup.get(\'functionCode\').value)" fxFlex fxLayout="row">\n    <mat-form-field fxFlex="100">\n      <mat-label>{{ \'gateway.rpc.value\' | translate }}</mat-label>\n      <input matInput name="value" formControlName="value" placeholder="{{ \'gateway.set\' | translate }}"/>\n      <mat-icon matSuffix\n                matTooltipPosition="above"\n                matTooltipClass="tb-error-tooltip"\n                [matTooltip]="(\'gateway.value-required\') | translate"\n                *ngIf="rpcParametersFormGroup.get(\'value\').hasError(\'required\') && rpcParametersFormGroup.get(\'value\').touched"\n                class="tb-error"\n      >\n        warning\n      </mat-icon>\n    </mat-form-field>\n  </div>\n</ng-container>\n\n',styles:['@charset "UTF-8";:host .hint-container{margin-bottom:12px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder}]});class Da{constructor(e,t,n,a,o){this.fb=e,this.dialog=t,this.utils=n,this.cd=a,this.attributeService=o,this.contentTypes=G,this.RPCCommands=["Ping","Stats","Devices","Update","Version","Restart","Reboot"],this.templates=[],this.ConnectorType=_t,this.gatewayConnectorDefaultTypesTranslates=Ht,this.typesWithUpdatedParams=new Set([_t.MQTT,_t.OPCUA,_t.MODBUS]),this.subscriptionOptions={callbacks:{onDataUpdated:()=>this.ctx.ngZone.run((()=>{this.updateTemplates()})),onDataUpdateError:(e,t)=>this.ctx.ngZone.run((()=>{this.onDataUpdateError(t)})),dataLoading:()=>{}}},this.commandForm=this.fb.group({command:[null,[ue.required]],time:[60,[ue.required,ue.min(1)]],params:["{}",[It]],result:[null]})}ngOnInit(){if(this.isConnector=this.ctx.settings.isConnector,this.isConnector){this.connectorType=this.ctx.stateController.getStateParams().connector_rpc.value.type;const e=[{type:F.entity,entityType:I.DEVICE,entityId:this.ctx.defaultSubscription.targetDeviceId,entityName:"Connector",attributes:[{name:`${this.connectorType}_template`}]}];this.ctx.subscriptionApi.createSubscriptionFromInfo(A.latest,e,this.subscriptionOptions,!1,!0).subscribe((e=>{this.subscription=e}))}else this.commandForm.get("command").setValue(this.RPCCommands[0])}sendCommand(e){this.resultTime=null;const t=e||this.commandForm.value,n=this.isConnector?`${this.connectorType}_`:"gateway_",a=this.isConnector?this.getCommandFromParamsByType(t.params):t.command.toLowerCase(),o=t.params;this.ctx.controlApi.sendTwoWayCommand(n+a,o,t.time).subscribe({next:e=>{this.resultTime=(new Date).getTime(),this.commandForm.get("result").setValue(JSON.stringify(e))},error:e=>{this.resultTime=(new Date).getTime(),console.error(e),this.commandForm.get("result").setValue(JSON.stringify(e.error))}})}getCommandFromParamsByType(e){switch(this.connectorType){case _t.MQTT:case _t.FTP:case _t.SNMP:case _t.REST:case _t.REQUEST:return e.methodFilter;case _t.MODBUS:return e.tag;case _t.BACNET:case _t.CAN:case _t.OPCUA:return e.method;case _t.BLE:case _t.OCPP:case _t.SOCKET:case _t.XMPP:return e.methodRPC;default:return e.command}}saveTemplate(){this.dialog.open(Na,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{config:this.commandForm.value.params,templates:this.templates}}).afterClosed().subscribe((e=>{if(e){const t={name:e,config:this.commandForm.value.params},n=this.templates,a=n.findIndex((e=>e.name==t.name));a>-1&&n.splice(a,1),n.push(t);const o=`${this.connectorType}_template`;this.attributeService.saveEntityAttributes({id:this.ctx.defaultSubscription.targetDeviceId,entityType:I.DEVICE},L.SERVER_SCOPE,[{key:o,value:n}]).subscribe((()=>{this.cd.detectChanges()}))}}))}useTemplate(e){this.commandForm.get("params").patchValue(e.config)}updateTemplates(){this.templates=this.subscription.data[0].data[0][1].length?JSON.parse(this.subscription.data[0].data[0][1]):[],this.cd.detectChanges()}onDataUpdateError(e){const t=this.utils.parseException(e);let n=t.name;t.message&&(n+=": "+t.message),console.error(n)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Da,deps:[{token:me.FormBuilder},{token:Je.MatDialog},{token:X.UtilsService},{token:t.ChangeDetectorRef},{token:X.AttributeService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Da,selector:"tb-gateway-service-rpc",inputs:{ctx:"ctx",dialogRef:"dialogRef"},ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div fxLayout="column" fxFlex [ngClass]="{\'border\': isConnector}">\n  <div fxLayout="row" fxLayout.lt-sm="column" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">\n    <ng-container *ngIf="!isConnector; else connectorForm">\n      <mat-form-field>\n        <mat-label>{{ \'gateway.statistics.command\' | translate }}</mat-label>\n        <mat-select formControlName="command">\n          <mat-option *ngFor="let command of RPCCommands" [value]="command">\n            {{ command }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label>{{ \'gateway.statistics.timeout-ms\' | translate }}</mat-label>\n        <input matInput formControlName="time" type="number" min="1"/>\n        <mat-error *ngIf="commandForm.get(\'time\').hasError(\'min\')">\n          {{ \'gateway.statistics.timeout-min\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <button mat-raised-button\n              color="primary"\n              (click)="sendCommand()"\n              [disabled]="commandForm.invalid">\n        {{ \'gateway.rpc-command-send\' | translate }}\n      </button>\n    </ng-container>\n    <ng-template #connectorForm>\n      <tb-gateway-service-rpc-connector\n        *ngIf="!typesWithUpdatedParams.has(connectorType) else updatedParameters"\n        formControlName="params"\n        [connectorType]="connectorType"\n        (sendCommand)="sendCommand()"\n        (saveTemplate)="saveTemplate()"\n      />\n      <ng-template #updatedParameters>\n        <div fxLayout="column" class="rpc-parameters">\n          <div class="mat-subtitle-1 tb-form-panel-title">{{ \'gateway.rpc.title\' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>\n          <ng-container [ngSwitch]="connectorType">\n            <tb-gateway-modbus-rpc-parameters *ngSwitchCase="ConnectorType.MODBUS" formControlName="params"/>\n            <tb-gateway-mqtt-rpc-parameters *ngSwitchCase="ConnectorType.MQTT" formControlName="params"/>\n            <tb-gateway-opc-rpc-parameters *ngSwitchCase="ConnectorType.OPCUA" formControlName="params"/>\n          </ng-container>\n          <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">\n            <button mat-raised-button\n                    (click)="saveTemplate()"\n                    [disabled]="commandForm.get(\'params\').invalid">\n              {{ \'gateway.rpc-command-save-template\' | translate }}\n            </button>\n            <button mat-raised-button\n                    color="primary"\n                    (click)="sendCommand()"\n                    [disabled]="commandForm.get(\'params\').invalid">\n              {{ \'gateway.rpc-command-send\' | translate }}\n            </button>\n          </div>\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <section class="result-block" [formGroup]="commandForm">\n    <span>{{ \'gateway.rpc-command-result\' | translate }}\n      <div *ngIf="resultTime" class="result-time" fxFlex fxLayout="row" fxLayoutAlign="center center">\n        <mat-icon class="material-icons">schedule</mat-icon>\n        <span>{{ resultTime | date: \'yyyy/MM/dd HH:mm:ss\' }}</span>\n      </div>\n    </span>\n    <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>\n  </section>\n</div>\n<tb-gateway-service-rpc-connector-templates fxFlex="30" *ngIf="isConnector" class="border" [rpcTemplates]="templates"\n                                            [ctx]="ctx" [connectorType]="connectorType" (useTemplate)="useTemplate($event)">\n</tb-gateway-service-rpc-connector-templates>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;overflow:auto;display:flex;flex-direction:row;padding:0 5px}:host>*{height:100%;overflow:auto}:host>tb-gateway-service-rpc-connector-templates:last-child{margin-left:10px}:host .command-form{flex-wrap:nowrap;padding:0 5px 5px}:host .command-form>button{margin-top:10px}:host .rpc-parameters{width:100%}:host .result-block{padding:0 5px;display:flex;flex-direction:column;flex:1}:host .result-block>span{font-weight:600;position:relative;font-size:14px;margin-bottom:10px}:host .result-block>span .result-time{font-weight:400;font-size:14px;line-height:32px;position:absolute;left:0;top:25px;z-index:5;color:#0000008a}:host .result-block>span .result-time span{padding-left:10px}:host .result-block tb-json-content{flex:1}:host .border{padding:16px;box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;border:solid 1px #e0e0e0;border-radius:4px}\n'],dependencies:[{kind:"directive",type:_.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"component",type:st.JsonContentComponent,selector:"tb-json-content",inputs:["label","contentType","disabled","fillHeight","editorStyle","tbPlaceholder","hideToolbar","readonly","validateContent","validateOnChange","required"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ma,selector:"tb-gateway-opc-rpc-parameters"},{kind:"component",type:Ea,selector:"tb-gateway-mqtt-rpc-parameters"},{kind:"component",type:qa,selector:"tb-gateway-modbus-rpc-parameters"},{kind:"component",type:Fa,selector:"tb-gateway-service-rpc-connector-templates",inputs:["connectorType","ctx","rpcTemplates"],outputs:["saveTemplate","useTemplate"]},{kind:"component",type:Aa,selector:"tb-gateway-service-rpc-connector",inputs:["connectorType"],outputs:["sendCommand","saveTemplate"]},{kind:"pipe",type:_.DatePipe,name:"date"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayServiceRPCComponent",Da),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Da,decorators:[{type:n,args:[{selector:"tb-gateway-service-rpc",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div fxLayout="column" fxFlex [ngClass]="{\'border\': isConnector}">\n  <div fxLayout="row" fxLayout.lt-sm="column" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">\n    <ng-container *ngIf="!isConnector; else connectorForm">\n      <mat-form-field>\n        <mat-label>{{ \'gateway.statistics.command\' | translate }}</mat-label>\n        <mat-select formControlName="command">\n          <mat-option *ngFor="let command of RPCCommands" [value]="command">\n            {{ command }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label>{{ \'gateway.statistics.timeout-ms\' | translate }}</mat-label>\n        <input matInput formControlName="time" type="number" min="1"/>\n        <mat-error *ngIf="commandForm.get(\'time\').hasError(\'min\')">\n          {{ \'gateway.statistics.timeout-min\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <button mat-raised-button\n              color="primary"\n              (click)="sendCommand()"\n              [disabled]="commandForm.invalid">\n        {{ \'gateway.rpc-command-send\' | translate }}\n      </button>\n    </ng-container>\n    <ng-template #connectorForm>\n      <tb-gateway-service-rpc-connector\n        *ngIf="!typesWithUpdatedParams.has(connectorType) else updatedParameters"\n        formControlName="params"\n        [connectorType]="connectorType"\n        (sendCommand)="sendCommand()"\n        (saveTemplate)="saveTemplate()"\n      />\n      <ng-template #updatedParameters>\n        <div fxLayout="column" class="rpc-parameters">\n          <div class="mat-subtitle-1 tb-form-panel-title">{{ \'gateway.rpc.title\' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>\n          <ng-container [ngSwitch]="connectorType">\n            <tb-gateway-modbus-rpc-parameters *ngSwitchCase="ConnectorType.MODBUS" formControlName="params"/>\n            <tb-gateway-mqtt-rpc-parameters *ngSwitchCase="ConnectorType.MQTT" formControlName="params"/>\n            <tb-gateway-opc-rpc-parameters *ngSwitchCase="ConnectorType.OPCUA" formControlName="params"/>\n          </ng-container>\n          <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">\n            <button mat-raised-button\n                    (click)="saveTemplate()"\n                    [disabled]="commandForm.get(\'params\').invalid">\n              {{ \'gateway.rpc-command-save-template\' | translate }}\n            </button>\n            <button mat-raised-button\n                    color="primary"\n                    (click)="sendCommand()"\n                    [disabled]="commandForm.get(\'params\').invalid">\n              {{ \'gateway.rpc-command-send\' | translate }}\n            </button>\n          </div>\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <section class="result-block" [formGroup]="commandForm">\n    <span>{{ \'gateway.rpc-command-result\' | translate }}\n      <div *ngIf="resultTime" class="result-time" fxFlex fxLayout="row" fxLayoutAlign="center center">\n        <mat-icon class="material-icons">schedule</mat-icon>\n        <span>{{ resultTime | date: \'yyyy/MM/dd HH:mm:ss\' }}</span>\n      </div>\n    </span>\n    <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>\n  </section>\n</div>\n<tb-gateway-service-rpc-connector-templates fxFlex="30" *ngIf="isConnector" class="border" [rpcTemplates]="templates"\n                                            [ctx]="ctx" [connectorType]="connectorType" (useTemplate)="useTemplate($event)">\n</tb-gateway-service-rpc-connector-templates>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;overflow:auto;display:flex;flex-direction:row;padding:0 5px}:host>*{height:100%;overflow:auto}:host>tb-gateway-service-rpc-connector-templates:last-child{margin-left:10px}:host .command-form{flex-wrap:nowrap;padding:0 5px 5px}:host .command-form>button{margin-top:10px}:host .rpc-parameters{width:100%}:host .result-block{padding:0 5px;display:flex;flex-direction:column;flex:1}:host .result-block>span{font-weight:600;position:relative;font-size:14px;margin-bottom:10px}:host .result-block>span .result-time{font-weight:400;font-size:14px;line-height:32px;position:absolute;left:0;top:25px;z-index:5;color:#0000008a}:host .result-block>span .result-time span{padding-left:10px}:host .result-block tb-json-content{flex:1}:host .border{padding:16px;box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;border:solid 1px #e0e0e0;border-radius:4px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:Je.MatDialog},{type:X.UtilsService},{type:t.ChangeDetectorRef},{type:X.AttributeService}],propDecorators:{ctx:[{type:a}],dialogRef:[{type:a}]}});class Pa extends P{constructor(e,t,n,a,o){super(e,t,a),this.store=e,this.router=t,this.data=n,this.dialogRef=a,this.fb=o,this.gatewayName=this.data.gatewayName,this.gatewayControl=this.fb.control("")}close(){this.dialogRef.close()}turnOff(){this.dialogRef.close(!0)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Pa,deps:[{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef},{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Pa,selector:"tb-gateway-remote-configuration-dialog",usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-toolbar color="warn">\n  <mat-icon>warning</mat-icon>\n  <h2 translate>gateway.configuration-delete-dialog-header</h2>\n  <span fxFlex></span>\n  <button mat-icon-button\n          (click)="close()"\n          type="button">\n    <mat-icon class="material-icons">close</mat-icon>\n  </button>\n</mat-toolbar>\n<div mat-dialog-content style="max-width: 600px" class="mat-content" fxLayout="column">\n  <span innerHTML="{{ \'gateway.configuration-delete-dialog-body\' | translate }} <b>{{ gatewayName }}</b>" ></span>\n  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">\n    <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>\n    <input matInput [formControl]="gatewayControl" required/>\n    <mat-error\n      *ngIf="gatewayControl.hasError(\'required\')">\n      {{ \'gateway.configuration-delete-dialog-input-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</div>\n<div mat-dialog-actions fxLayoutAlign="end center">\n  <button mat-button color="warn"\n          type="button"\n          cdkFocusInitial\n          (click)="close()">\n    {{ \'action.cancel\' | translate }}\n  </button>\n  <button mat-button color="warn"\n          type="button"\n          [disabled]="gatewayControl.value !== gatewayName"\n          (click)="turnOff()">\n    {{ \'gateway.configuration-delete-dialog-confirm\' | translate }}\n  </button>\n</div>\n',dependencies:[{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:Je.MatDialogActions,selector:"[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",inputs:["align"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}var Ga;e("GatewayRemoteConfigurationDialogComponent",Pa),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Pa,decorators:[{type:n,args:[{selector:"tb-gateway-remote-configuration-dialog",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-toolbar color="warn">\n  <mat-icon>warning</mat-icon>\n  <h2 translate>gateway.configuration-delete-dialog-header</h2>\n  <span fxFlex></span>\n  <button mat-icon-button\n          (click)="close()"\n          type="button">\n    <mat-icon class="material-icons">close</mat-icon>\n  </button>\n</mat-toolbar>\n<div mat-dialog-content style="max-width: 600px" class="mat-content" fxLayout="column">\n  <span innerHTML="{{ \'gateway.configuration-delete-dialog-body\' | translate }} <b>{{ gatewayName }}</b>" ></span>\n  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">\n    <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>\n    <input matInput [formControl]="gatewayControl" required/>\n    <mat-error\n      *ngIf="gatewayControl.hasError(\'required\')">\n      {{ \'gateway.configuration-delete-dialog-input-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</div>\n<div mat-dialog-actions fxLayoutAlign="end center">\n  <button mat-button color="warn"\n          type="button"\n          cdkFocusInitial\n          (click)="close()">\n    {{ \'action.cancel\' | translate }}\n  </button>\n  <button mat-button color="warn"\n          type="button"\n          [disabled]="gatewayControl.value !== gatewayName"\n          (click)="turnOff()">\n    {{ \'gateway.configuration-delete-dialog-confirm\' | translate }}\n  </button>\n</div>\n'}]}],ctorParameters:()=>[{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef},{type:me.FormBuilder}]}),function(e){e.tls="tls",e.accessToken="accessToken"}(Ga||(Ga={}));const Oa="configuration_drafts",Ra="RemoteLoggingLevel",Va=new Map([[Ga.tls,"gateway.security-types.tls"],[Ga.accessToken,"gateway.security-types.access-token"]]);var Ba,Ua;!function(e){e.none="NONE",e.critical="CRITICAL",e.error="ERROR",e.warning="WARNING",e.info="INFO",e.debug="DEBUG"}(Ba||(Ba={})),function(e){e.memory="memory",e.file="file"}(Ua||(Ua={}));const _a=new Map([[Ua.memory,"gateway.storage-types.memory-storage"],[Ua.file,"gateway.storage-types.file-storage"]]);var Ha;!function(e){e.mqtt="MQTT",e.modbus="Modbus",e.opcua="OPC-UA",e.ble="BLE",e.request="Request",e.can="CAN",e.bacnet="BACnet",e.custom="Custom"}(Ha||(Ha={}));const za={config:{},name:"",configType:null,enabled:!1};function Wa(e){return JSON.stringify(e.value)===JSON.stringify({})?{validJSON:!0}:null}const ja='[loggers]}}keys=root, service, connector, converter, tb_connection, storage, extension}}[handlers]}}keys=consoleHandler, serviceHandler, connectorHandler, converterHandler, tb_connectionHandler, storageHandler, extensionHandler}}[formatters]}}keys=LogFormatter}}[logger_root]}}level=ERROR}}handlers=consoleHandler}}[logger_connector]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=connector}}[logger_storage]}}level={ERROR}}}handlers=storageHandler}}formatter=LogFormatter}}qualname=storage}}[logger_tb_connection]}}level={ERROR}}}handlers=tb_connectionHandler}}formatter=LogFormatter}}qualname=tb_connection}}[logger_service]}}level={ERROR}}}handlers=serviceHandler}}formatter=LogFormatter}}qualname=service}}[logger_converter]}}level={ERROR}}}handlers=converterHandler}}formatter=LogFormatter}}qualname=converter}}[logger_extension]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=extension}}[handler_consoleHandler]}}class=StreamHandler}}level={ERROR}}}formatter=LogFormatter}}args=(sys.stdout,)}}[handler_connectorHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}connector.log", "d", 1, 7,)}}[handler_storageHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}storage.log", "d", 1, 7,)}}[handler_serviceHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}service.log", "d", 1, 7,)}}[handler_converterHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}converter.log", "d", 1, 3,)}}[handler_extensionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}extension.log", "d", 1, 3,)}}[handler_tb_connectionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}tb_connection.log", "d", 1, 3,)}}[formatter_LogFormatter]}}format="%(asctime)s - %(levelname)s - [%(filename)s] - %(module)s - %(lineno)d - %(message)s" }}datefmt="%Y-%m-%d %H:%M:%S"';function Ka(e){return e.replace("_","").replace("-","").replace(/^\s+|\s+/g,"").toLowerCase()+".json"}function $a(e,t){return ja.replace(/{ERROR}/g,e).replace(/{.\/logs\/}/g,t)}function Ya(e){return{id:e,entityType:I.DEVICE}}function Qa(e){const t={};return Object.prototype.hasOwnProperty.call(e,"thingsboard")&&(t.host=e.thingsboard.host,t.port=e.thingsboard.port,t.remoteConfiguration=e.thingsboard.remoteConfiguration,Object.prototype.hasOwnProperty.call(e.thingsboard.security,Ga.accessToken)?(t.securityType=Ga.accessToken,t.accessToken=e.thingsboard.security.accessToken):(t.securityType=Ga.tls,t.caCertPath=e.thingsboard.security.caCert,t.privateKeyPath=e.thingsboard.security.privateKey,t.certPath=e.thingsboard.security.cert)),Object.prototype.hasOwnProperty.call(e,"storage")&&Object.prototype.hasOwnProperty.call(e.storage,"type")&&(e.storage.type===Ua.memory?(t.storageType=Ua.memory,t.readRecordsCount=e.storage.read_records_count,t.maxRecordsCount=e.storage.max_records_count):e.storage.type===Ua.file&&(t.storageType=Ua.file,t.dataFolderPath=e.storage.data_folder_path,t.maxFilesCount=e.storage.max_file_count,t.readRecordsCount=e.storage.read_records_count,t.maxRecordsCount=e.storage.max_records_count)),t}function Ja(e){const t={};for(const n of e)n.enabled||(t[n.name]={connector:n.configType,config:n.config});return t}function Xa(e){const t={thingsboard:Za(e)};return function(e,t){for(const n of t)if(n.enabled){const t=n.configType;Array.isArray(e[t])||(e[t]=[]);const a={name:n.name,config:n.config};e[t].push(a)}}(t,e.connectors),t}function Za(e){let t;t=e.securityType===Ga.accessToken?{accessToken:e.accessToken}:{caCert:e.caCertPath,privateKey:e.privateKeyPath,cert:e.certPath};const n={host:e.host,remoteConfiguration:e.remoteConfiguration,port:e.port,security:t};let a;a=e.storageType===Ua.memory?{type:Ua.memory,read_records_count:e.readRecordsCount,max_records_count:e.maxRecordsCount}:{type:Ua.file,data_folder_path:e.dataFolderPath,max_file_count:e.maxFilesCount,max_read_records_count:e.readRecordsCount,max_records_per_file:e.maxRecordsCount};const o=[];for(const t of e.connectors)if(t.enabled){const e={configuration:Ka(t.name),name:t.name,type:t.configType};o.push(e)}return{thingsboard:n,connectors:o,storage:a,logs:window.btoa($a(e.remoteLoggingLevel,e.remoteLoggingPathToLogs))}}class eo extends O{constructor(e,t,n,a,o,i,r,s,l,c,p){super(e),this.store=e,this.elementRef=t,this.utils=n,this.ngZone=a,this.fb=o,this.window=i,this.dialog=r,this.translate=s,this.deviceService=l,this.attributeService=c,this.importExport=p,this.alignment="row",this.layoutGap="5px",this.securityTypes=Va,this.gatewayLogLevels=Object.keys(Ba).map((e=>Ba[e])),this.connectorTypes=Object.keys(Ha),this.storageTypes=_a,this.toastTargetId="gateway-configuration-widget"+this.utils.guid(),this.isReadOnlyForm=!1}get connectors(){return this.gatewayConfigurationGroup.get("connectors")}ngOnInit(){this.initWidgetSettings(this.ctx.settings),this.ctx.datasources&&this.ctx.datasources.length&&(this.deviceNameForm=this.ctx.datasources[0].name),this.buildForm(),this.ctx.updateWidgetParams(),this.formResize$=new ResizeObserver((()=>{this.resize()})),this.formResize$.observe(this.formContainerRef.nativeElement)}ngOnDestroy(){this.formResize$&&this.formResize$.disconnect(),this.subscribeGateway$.unsubscribe(),this.subscribeStorageType$.unsubscribe()}initWidgetSettings(e){let t;t=e.gatewayTitle&&e.gatewayTitle.length?this.utils.customTranslation(e.gatewayTitle,e.gatewayTitle):this.translate.instant("gateway.gateway"),this.ctx.widgetTitle=t,this.isReadOnlyForm=!!e.readOnly&&e.readOnly,this.archiveFileName=e.archiveFileName?.length?e.archiveFileName:"gatewayConfiguration",this.gatewayType=e.gatewayType?.length?e.gatewayType:"Gateway",this.gatewayNameExists=this.utils.customTranslation(e.gatewayNameExists,e.gatewayNameExists)||this.translate.instant("gateway.gateway-exists"),this.successfulSaved=this.utils.customTranslation(e.successfulSave,e.successfulSave)||this.translate.instant("gateway.gateway-saved"),this.updateWidgetDisplaying()}resize(){this.ngZone.run((()=>{this.updateWidgetDisplaying(),this.ctx.detectChanges()}))}updateWidgetDisplaying(){this.ctx.$container&&this.ctx.$container[0].offsetWidth<=425?(this.layoutGap="0",this.alignment="column"):(this.layoutGap="5px",this.alignment="row")}saveAttribute(e,t,n){const a=this.gatewayConfigurationGroup.get("gateway").value,o={key:e,value:t};return this.attributeService.saveEntityAttributes(Ya(a),n,[o])}createConnector(e=za){this.connectors.push(this.fb.group({enabled:[e.enabled],configType:[e.configType,[ue.required]],name:[e.name,[ue.required]],config:[e.config,[ue.nullValidator,Wa]]}))}getFormField(e){return this.gatewayConfigurationGroup.get(e)}buildForm(){this.gatewayConfigurationGroup=this.fb.group({gateway:[null,[]],accessToken:[null,[ue.required]],securityType:[Ga.accessToken],host:[this.window.location.hostname,[ue.required]],port:[1883,[ue.required,ue.min(1),ue.max(65535),ue.pattern(/^-?[0-9]+$/)]],remoteConfiguration:[!0],caCertPath:["/etc/thingsboard-gateway/ca.pem"],privateKeyPath:["/etc/thingsboard-gateway/privateKey.pem"],certPath:["/etc/thingsboard-gateway/certificate.pem"],remoteLoggingLevel:[Ba.debug],remoteLoggingPathToLogs:["./logs/",[ue.required]],storageType:[Ua.memory],readRecordsCount:[100,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],maxRecordsCount:[1e4,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],maxFilesCount:[5,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],dataFolderPath:["./data/",[ue.required]],connectors:this.fb.array([])}),this.isReadOnlyForm&&this.gatewayConfigurationGroup.disable({emitEvent:!1}),this.subscribeStorageType$=this.getFormField("storageType").valueChanges.subscribe((e=>{e===Ua.memory?(this.getFormField("maxFilesCount").disable(),this.getFormField("dataFolderPath").disable()):(this.getFormField("maxFilesCount").enable(),this.getFormField("dataFolderPath").enable())})),this.subscribeGateway$=this.getFormField("gateway").valueChanges.subscribe((e=>{null!==e?Ae([this.deviceService.getDeviceCredentials(e).pipe(Ee((e=>{this.getFormField("accessToken").patchValue(e.credentialsId)}))),...this.getAttributes(e)]).subscribe((()=>{this.gatewayConfigurationGroup.markAsPristine(),this.ctx.detectChanges()})):this.getFormField("accessToken").patchValue("")}))}gatewayExist(){this.ctx.showErrorToast(this.gatewayNameExists,"top","left",this.toastTargetId)}exportConfig(){const e=this.gatewayConfigurationGroup.value,t={};var n,a,o;t["tb_gateway.yaml"]=function(e){let t;t="thingsboard:\n",t+="  host: "+e.host+"\n",t+="  remoteConfiguration: "+e.remoteConfiguration+"\n",t+="  port: "+e.port+"\n",t+="  security:\n",e.securityType===Ga.accessToken?t+="    access-token: "+e.accessToken+"\n":(t+="    ca_cert: "+e.caCertPath+"\n",t+="    privateKey: "+e.privateKeyPath+"\n",t+="    cert: "+e.certPath+"\n"),t+="storage:\n",e.storageType===Ua.memory?(t+="  type: memory\n",t+="  read_records_count: "+e.readRecordsCount+"\n",t+="  max_records_count: "+e.maxRecordsCount+"\n"):(t+="  type: file\n",t+="  data_folder_path: "+e.dataFolderPath+"\n",t+="  max_file_count: "+e.maxFilesCount+"\n",t+="  max_read_records_count: "+e.readRecordsCount+"\n",t+="  max_records_per_file: "+e.maxRecordsCount+"\n"),t+="connectors:\n";for(const n of e.connectors)n.enabled&&(t+="  -\n",t+="    name: "+n.name+"\n",t+="    type: "+n.configType+"\n",t+="    configuration: "+Ka(n.name)+"\n");return t}(e),function(e,t){for(const n of t)n.enabled&&(e[Ka(n.name)]=JSON.stringify(n.config))}(t,e.connectors),n=t,a=e.remoteLoggingLevel,o=e.remoteLoggingPathToLogs,n["logs.conf"]=$a(a,o),this.importExport.exportJSZip(t,this.archiveFileName),this.saveAttribute(Ra,this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(),L.SHARED_SCOPE)}addNewConnector(){this.createConnector()}removeConnector(e){e>-1&&(this.connectors.removeAt(e),this.connectors.markAsDirty())}openConfigDialog(e,t,n,a){e&&(e.stopPropagation(),e.preventDefault()),this.dialog.open(Qe,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{jsonValue:n,required:!0,title:this.translate.instant("gateway.title-connectors-json",{typeName:a})}}).afterClosed().subscribe((e=>{e&&(this.connectors.at(t).get("config").patchValue(e),this.ctx.detectChanges())}))}createConnectorName(e,t,n=0){const a=n?t+n:t;return-1===e.findIndex((e=>e.name===a))?a:this.createConnectorName(e,t,++n)}validateConnectorName(e,t,n,a=0){for(let o=0;o<e.length;o++){const i=0===a?t:t+a;o!==n&&e[o].name===i&&this.validateConnectorName(e,t,n,++a)}return 0===a?t:t+a}changeConnectorType(e){if(!e.get("name").value){const t=e.get("configType").value,n=this.gatewayConfigurationGroup.value.connectors;e.get("name").patchValue(this.createConnectorName(n,Ha[t]))}}changeConnectorName(e,t){const n=this.gatewayConfigurationGroup.value.connectors;e.get("name").patchValue(this.validateConnectorName(n,e.get("name").value,t))}save(){const e=this.gatewayConfigurationGroup.value;Ae([this.saveAttribute("configuration",window.btoa(JSON.stringify(Xa(e))),L.SHARED_SCOPE),this.saveAttribute(Oa,window.btoa(JSON.stringify(Ja(e.connectors))),L.SERVER_SCOPE),this.saveAttribute(Ra,this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(),L.SHARED_SCOPE)]).subscribe((()=>{this.ctx.showSuccessToast(this.successfulSaved,2e3,"top","left",this.toastTargetId),this.gatewayConfigurationGroup.markAsPristine()}))}getAttributes(e){const t=[];return t.push(Ae([this.getAttribute("current_configuration",L.CLIENT_SCOPE,e),this.getAttribute(Oa,L.SERVER_SCOPE,e)]).pipe(Ee((([e,t])=>{this.setFormGatewaySettings(e),this.setFormConnectorsDraft(t),this.isReadOnlyForm&&this.gatewayConfigurationGroup.disable({emitEvent:!1})})))),t.push(this.getAttribute(Ra,L.SHARED_SCOPE,e).pipe(Ee((e=>this.processLoggingLevel(e))))),t}getAttribute(e,t,n){return this.attributeService.getEntityAttributes(Ya(n),t,[e])}setFormGatewaySettings(e){if(this.connectors.clear(),e.length>0){const t=JSON.parse(window.atob(e[0].value));for(const e of Object.keys(t)){const n=t[e];if("thingsboard"===e)null!==n&&Object.keys(n).length>0&&this.gatewayConfigurationGroup.patchValue(Qa(n));else for(const t of Object.keys(n)){let a="No name";Object.prototype.hasOwnProperty.call(n[t],"name")&&(a=n[t].name);const o={enabled:!0,configType:e,config:n[t].config,name:a};this.createConnector(o)}}}}setFormConnectorsDraft(e){if(e.length>0){const t=JSON.parse(window.atob(e[0].value));for(const e of Object.keys(t)){const n={enabled:!1,configType:t[e].connector,config:t[e].config,name:e};this.createConnector(n)}}}processLoggingLevel(e){let t=Ba.debug;e.length>0&&Ba[e[0].value.toLowerCase()]&&(t=Ba[e[0].value.toLowerCase()]),this.getFormField("remoteLoggingLevel").patchValue(t)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:eo,deps:[{token:ot.Store},{token:t.ElementRef},{token:X.UtilsService},{token:t.NgZone},{token:me.UntypedFormBuilder},{token:ae},{token:Je.MatDialog},{token:Y.TranslateService},{token:X.DeviceService},{token:X.AttributeService},{token:lt.ImportExportService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:eo,selector:"tb-gateway-form",inputs:{ctx:"ctx",isStateForm:"isStateForm"},viewQueries:[{propertyName:"formContainerRef",first:!0,predicate:["formContainer"],descendants:!0,static:!0},{propertyName:"multipleInputForm",first:!0,predicate:["gatewayConfigurationForm"],descendants:!0,static:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<form #formContainer class="gateway-form"\n      [formGroup]="gatewayConfigurationGroup"\n      tb-toast toastTarget="{{ toastTargetId }}"\n      (ngSubmit)="save()">\n  <mat-accordion multi="true" class="mat-body-2">\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class="tb-panel-title">{{ \'gateway.thingsboard\' | translate | uppercase }}</div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n        <tb-entity-gateway-select\n          formControlName="gateway"\n          [deviceName]="deviceNameForm"\n          [isStateForm]="isStateForm"\n          [newGatewayType]="gatewayType"\n          (gatewayNameExist)="gatewayExist()"\n          required\n        >\n      </tb-entity-gateway-select>\n      <div fxLayout="column">\n        <mat-form-field fxFlex>\n          <mat-label>{{\'gateway.security-type\' | translate }}</mat-label>\n          <mat-select formControlName="securityType" >\n            <mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">\n              {{ securityType.value.toString() | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.thingsboard-host\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="host">\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'host\').hasError(\'required\')" translate>\n            gateway.thingsboard-host-required\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.thingsboard-port\' | translate }}</mat-label>\n          <input matInput type="number" formControlName="port">\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'required\')" translate>\n            gateway.thingsboard-port-required\n          </mat-error>\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'min\')" translate>\n            gateway.thingsboard-port-min\n          </mat-error>\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'max\')" translate>\n            gateway.thingsboard-port-max\n          </mat-error>\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'pattern\')" translate>\n            gateway.thingsboard-port-pattern\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf="gatewayConfigurationGroup.get(\'securityType\').value == \'tls\'" fxLayout="column">\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.tls-path-ca-certificate\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="caCertPath">\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.tls-path-private-key\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="privateKeyPath">\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.tls-path-client-certificate\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="certPath">\n        </mat-form-field>\n      </div>\n\n      <mat-checkbox formControlName="remoteConfiguration">{{ \'gateway.remote\' | translate }}</mat-checkbox>\n\n      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">\n        <mat-form-field fxFlex>\n          <mat-label>{{\'gateway.remote-logging-level\' | translate }}</mat-label>\n          <mat-select formControlName="remoteLoggingLevel">\n            <mat-option *ngFor="let logLevel of gatewayLogLevels" [value]="logLevel">\n              {{ logLevel }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.path-logs\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="remoteLoggingPathToLogs">\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'remoteLoggingPathToLogs\').hasError(\'required\')" translate>\n            gateway.path-logs-required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class="tb-panel-title">{{ \'gateway.storage\' | translate | uppercase }}</div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <div fxLayout="column">\n        <mat-form-field fxFlex>\n          <mat-label>{{\'gateway.storage-type\' | translate }}</mat-label>\n          <mat-select formControlName="storageType">\n            <mat-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">\n              {{ storageType.value.toString() | translate}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.storage-pack-size\' | translate }}</mat-label>\n            <input matInput type="number" formControlName="readRecordsCount">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'readRecordsCount\').hasError(\'required\')" translate>\n              gateway.storage-pack-size-required\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'readRecordsCount\').hasError(\'min\')" translate>\n              gateway.storage-pack-size-min\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'readRecordsCount\').hasError(\'pattern\')" translate>\n              gateway.storage-pack-size-pattern\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex>\n            <mat-label >\n              {{ (gatewayConfigurationGroup.get(\'storageType\').value !== \'file\' ? \'gateway.storage-max-records\' : \'gateway.storage-max-file-records\') | translate}}\n            </mat-label>\n            <input matInput type="number" formControlName="maxRecordsCount">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxRecordsCount\').hasError(\'required\')" translate>\n              gateway.storage-max-records-required\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxRecordsCount\').hasError(\'min\')" translate>\n              gateway.storage-max-records-min\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxRecordsCount\').hasError(\'pattern\')" translate>\n              gateway.storage-max-records-pattern\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" *ngIf="gatewayConfigurationGroup.get(\'storageType\').value == \'file\'">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.storage-max-files\' | translate }}</mat-label>\n            <input matInput type="number" formControlName="maxFilesCount">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxFilesCount\').hasError(\'required\')" translate>\n              gateway.storage-max-files-required\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxFilesCount\').hasError(\'min\')" translate>\n              gateway.storage-max-files-min\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxFilesCount\').hasError(\'pattern\')" translate>\n              gateway.storage-max-files-pattern\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.storage-path\' | translate }}</mat-label>\n            <input matInput type="text" formControlName="dataFolderPath">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'dataFolderPath\').hasError(\'required\')" translate>\n              gateway.storage-path-required\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class="tb-panel-title">{{ \'gateway.connectors-config\' | translate | uppercase }}</div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <div fxLayout="column" class="gateway-config">\n        <section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;">\n          <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="8px">\n            <div fxLayout="column" fxLayoutAlign="center start">\n              <mat-slide-toggle formControlName="enabled"></mat-slide-toggle>\n            </div>\n            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" fxFlex>\n              <mat-form-field fxFlex>\n                <mat-label>{{\'gateway.connector-type\' | translate }}</mat-label>\n                <mat-select formControlName="configType" (selectionChange)="changeConnectorType(connector)">\n                  <mat-option *ngFor="let connectorType of connectorTypes" [value]="connectorType">\n                    {{ connectorType }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf="connector.get(\'configType\').hasError(\'required\')" translate>\n                  gateway.connector-type-required\n                </mat-error>\n              </mat-form-field>\n\n              <mat-form-field fxFlex>\n                <mat-label>{{ \'gateway.connector-name\' | translate }}</mat-label>\n                <input matInput type="text" formControlName="name" (blur)="changeConnectorName(connector, i)">\n                <mat-error *ngIf="connector.get(\'name\').hasError(\'required\')" translate>\n                  gateway.connector-name-required\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"\n                 fxLayoutAlign="{{alignment == \'row\' ? \'end center\' : \'space-evenly center\'}}" class="action-buttons">\n              <button [disabled]="isReadOnlyForm" mat-icon-button (click)="openConfigDialog($event, i, connector.get(\'config\').value, connector.get(\'name\').value)"\n                         matTooltip="{{ \'gateway.update-config\' | translate }}"\n                         matTooltipPosition="above"\n                         [ngClass]="{\'mat-warn\': connector.get(\'config\').invalid}">\n                <mat-icon>more_horiz</mat-icon>\n              </button>\n              <button [disabled]="isReadOnlyForm"\n                      mat-icon-button (click)="removeConnector(i)"\n                      matTooltip="{{ \'gateway.delete\' | translate }}"\n                      matTooltipPosition="above">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </section>\n        <span [fxShow]="!connectors.length" fxLayoutAlign="center center" class="no-data-found">{{\'gateway.no-connectors\' | translate}}</span>\n        <div>\n          <button [fxShow]="!isReadOnlyForm" mat-raised-button type="button" (click)="addNewConnector()"\n                  matTooltip="{{ \'gateway.connector-add\' | translate }}"\n                  matTooltipPosition="above">\n            {{ \'action.add\' | translate }}\n          </button>\n        </div>\n      </div >\n    </mat-expansion-panel>\n  </mat-accordion>\n  <section [fxShow]="!isReadOnlyForm"\n           fxLayout="row" fxLayoutAlign="end center" class="form-action-buttons">\n    <button mat-raised-button color="primary" type="button"\n            (click)="exportConfig()"\n            *ngIf="!gatewayConfigurationGroup.get(\'remoteConfiguration\').value"\n            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"\n            matTooltip="{{\'gateway.download-tip\' | translate }}">\n      {{\'action.download\' | translate }}\n    </button>\n\n    <button mat-raised-button color="primary" type="submit"\n            *ngIf="gatewayConfigurationGroup.get(\'remoteConfiguration\').value"\n            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"\n            matTooltip="{{\'gateway.save-tip\' | translate }}">\n      {{\'action.save\' | translate }}\n    </button>\n  </section>\n</form>\n',styles:['@charset "UTF-8";:host .gateway-form{height:100%;padding:5px;background-color:transparent;overflow-y:auto;overflow-x:hidden}:host .gateway-form .form-action-buttons{padding-top:8px}:host .gateway-form .gateway-config .no-data-found{position:relative;display:flex;height:40px}\n'],dependencies:[{kind:"directive",type:_.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:ct.ToastDirective,selector:"[tb-toast]",inputs:["toastTarget"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:pt.MatCheckbox,selector:"mat-checkbox",inputs:["aria-label","aria-labelledby","aria-describedby","id","required","labelPosition","name","value","disableRipple","tabIndex","color","disabledInteractive","checked","disabled","indeterminate"],outputs:["change","indeterminateChange"],exportAs:["matCheckbox"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:$e.MatAccordion,selector:"mat-accordion",inputs:["hideToggle","displayMode","togglePosition"],exportAs:["matAccordion"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"directive",type:K.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:me.ɵNgNoValidate,selector:"form:not([ngNoForm]):not([ngNativeValidate])"},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:me.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"directive",type:me.FormArrayName,selector:"[formArrayName]",inputs:["formArrayName"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:mt.EntityGatewaySelectComponent,selector:"tb-entity-gateway-select",inputs:["required","newGatewayType","deviceName","isStateForm"],outputs:["gatewayNameExist"]},{kind:"pipe",type:_.UpperCasePipe,name:"uppercase"},{kind:"pipe",type:_.KeyValuePipe,name:"keyvalue"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayFormComponent",eo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:eo,decorators:[{type:n,args:[{selector:"tb-gateway-form",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<form #formContainer class="gateway-form"\n      [formGroup]="gatewayConfigurationGroup"\n      tb-toast toastTarget="{{ toastTargetId }}"\n      (ngSubmit)="save()">\n  <mat-accordion multi="true" class="mat-body-2">\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class="tb-panel-title">{{ \'gateway.thingsboard\' | translate | uppercase }}</div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n        <tb-entity-gateway-select\n          formControlName="gateway"\n          [deviceName]="deviceNameForm"\n          [isStateForm]="isStateForm"\n          [newGatewayType]="gatewayType"\n          (gatewayNameExist)="gatewayExist()"\n          required\n        >\n      </tb-entity-gateway-select>\n      <div fxLayout="column">\n        <mat-form-field fxFlex>\n          <mat-label>{{\'gateway.security-type\' | translate }}</mat-label>\n          <mat-select formControlName="securityType" >\n            <mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">\n              {{ securityType.value.toString() | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.thingsboard-host\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="host">\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'host\').hasError(\'required\')" translate>\n            gateway.thingsboard-host-required\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.thingsboard-port\' | translate }}</mat-label>\n          <input matInput type="number" formControlName="port">\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'required\')" translate>\n            gateway.thingsboard-port-required\n          </mat-error>\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'min\')" translate>\n            gateway.thingsboard-port-min\n          </mat-error>\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'max\')" translate>\n            gateway.thingsboard-port-max\n          </mat-error>\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'port\').hasError(\'pattern\')" translate>\n            gateway.thingsboard-port-pattern\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div *ngIf="gatewayConfigurationGroup.get(\'securityType\').value == \'tls\'" fxLayout="column">\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.tls-path-ca-certificate\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="caCertPath">\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.tls-path-private-key\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="privateKeyPath">\n        </mat-form-field>\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.tls-path-client-certificate\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="certPath">\n        </mat-form-field>\n      </div>\n\n      <mat-checkbox formControlName="remoteConfiguration">{{ \'gateway.remote\' | translate }}</mat-checkbox>\n\n      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">\n        <mat-form-field fxFlex>\n          <mat-label>{{\'gateway.remote-logging-level\' | translate }}</mat-label>\n          <mat-select formControlName="remoteLoggingLevel">\n            <mat-option *ngFor="let logLevel of gatewayLogLevels" [value]="logLevel">\n              {{ logLevel }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field fxFlex>\n          <mat-label>{{ \'gateway.path-logs\' | translate }}</mat-label>\n          <input matInput type="text" formControlName="remoteLoggingPathToLogs">\n          <mat-error *ngIf="gatewayConfigurationGroup.get(\'remoteLoggingPathToLogs\').hasError(\'required\')" translate>\n            gateway.path-logs-required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class="tb-panel-title">{{ \'gateway.storage\' | translate | uppercase }}</div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <div fxLayout="column">\n        <mat-form-field fxFlex>\n          <mat-label>{{\'gateway.storage-type\' | translate }}</mat-label>\n          <mat-select formControlName="storageType">\n            <mat-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">\n              {{ storageType.value.toString() | translate}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.storage-pack-size\' | translate }}</mat-label>\n            <input matInput type="number" formControlName="readRecordsCount">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'readRecordsCount\').hasError(\'required\')" translate>\n              gateway.storage-pack-size-required\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'readRecordsCount\').hasError(\'min\')" translate>\n              gateway.storage-pack-size-min\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'readRecordsCount\').hasError(\'pattern\')" translate>\n              gateway.storage-pack-size-pattern\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex>\n            <mat-label >\n              {{ (gatewayConfigurationGroup.get(\'storageType\').value !== \'file\' ? \'gateway.storage-max-records\' : \'gateway.storage-max-file-records\') | translate}}\n            </mat-label>\n            <input matInput type="number" formControlName="maxRecordsCount">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxRecordsCount\').hasError(\'required\')" translate>\n              gateway.storage-max-records-required\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxRecordsCount\').hasError(\'min\')" translate>\n              gateway.storage-max-records-min\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxRecordsCount\').hasError(\'pattern\')" translate>\n              gateway.storage-max-records-pattern\n            </mat-error>\n          </mat-form-field>\n        </div>\n\n        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" *ngIf="gatewayConfigurationGroup.get(\'storageType\').value == \'file\'">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.storage-max-files\' | translate }}</mat-label>\n            <input matInput type="number" formControlName="maxFilesCount">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxFilesCount\').hasError(\'required\')" translate>\n              gateway.storage-max-files-required\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxFilesCount\').hasError(\'min\')" translate>\n              gateway.storage-max-files-min\n            </mat-error>\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'maxFilesCount\').hasError(\'pattern\')" translate>\n              gateway.storage-max-files-pattern\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'gateway.storage-path\' | translate }}</mat-label>\n            <input matInput type="text" formControlName="dataFolderPath">\n            <mat-error *ngIf="gatewayConfigurationGroup.get(\'dataFolderPath\').hasError(\'required\')" translate>\n              gateway.storage-path-required\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class="tb-panel-title">{{ \'gateway.connectors-config\' | translate | uppercase }}</div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <div fxLayout="column" class="gateway-config">\n        <section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;">\n          <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="8px">\n            <div fxLayout="column" fxLayoutAlign="center start">\n              <mat-slide-toggle formControlName="enabled"></mat-slide-toggle>\n            </div>\n            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" fxFlex>\n              <mat-form-field fxFlex>\n                <mat-label>{{\'gateway.connector-type\' | translate }}</mat-label>\n                <mat-select formControlName="configType" (selectionChange)="changeConnectorType(connector)">\n                  <mat-option *ngFor="let connectorType of connectorTypes" [value]="connectorType">\n                    {{ connectorType }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf="connector.get(\'configType\').hasError(\'required\')" translate>\n                  gateway.connector-type-required\n                </mat-error>\n              </mat-form-field>\n\n              <mat-form-field fxFlex>\n                <mat-label>{{ \'gateway.connector-name\' | translate }}</mat-label>\n                <input matInput type="text" formControlName="name" (blur)="changeConnectorName(connector, i)">\n                <mat-error *ngIf="connector.get(\'name\').hasError(\'required\')" translate>\n                  gateway.connector-name-required\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"\n                 fxLayoutAlign="{{alignment == \'row\' ? \'end center\' : \'space-evenly center\'}}" class="action-buttons">\n              <button [disabled]="isReadOnlyForm" mat-icon-button (click)="openConfigDialog($event, i, connector.get(\'config\').value, connector.get(\'name\').value)"\n                         matTooltip="{{ \'gateway.update-config\' | translate }}"\n                         matTooltipPosition="above"\n                         [ngClass]="{\'mat-warn\': connector.get(\'config\').invalid}">\n                <mat-icon>more_horiz</mat-icon>\n              </button>\n              <button [disabled]="isReadOnlyForm"\n                      mat-icon-button (click)="removeConnector(i)"\n                      matTooltip="{{ \'gateway.delete\' | translate }}"\n                      matTooltipPosition="above">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </section>\n        <span [fxShow]="!connectors.length" fxLayoutAlign="center center" class="no-data-found">{{\'gateway.no-connectors\' | translate}}</span>\n        <div>\n          <button [fxShow]="!isReadOnlyForm" mat-raised-button type="button" (click)="addNewConnector()"\n                  matTooltip="{{ \'gateway.connector-add\' | translate }}"\n                  matTooltipPosition="above">\n            {{ \'action.add\' | translate }}\n          </button>\n        </div>\n      </div >\n    </mat-expansion-panel>\n  </mat-accordion>\n  <section [fxShow]="!isReadOnlyForm"\n           fxLayout="row" fxLayoutAlign="end center" class="form-action-buttons">\n    <button mat-raised-button color="primary" type="button"\n            (click)="exportConfig()"\n            *ngIf="!gatewayConfigurationGroup.get(\'remoteConfiguration\').value"\n            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"\n            matTooltip="{{\'gateway.download-tip\' | translate }}">\n      {{\'action.download\' | translate }}\n    </button>\n\n    <button mat-raised-button color="primary" type="submit"\n            *ngIf="gatewayConfigurationGroup.get(\'remoteConfiguration\').value"\n            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"\n            matTooltip="{{\'gateway.save-tip\' | translate }}">\n      {{\'action.save\' | translate }}\n    </button>\n  </section>\n</form>\n',styles:['@charset "UTF-8";:host .gateway-form{height:100%;padding:5px;background-color:transparent;overflow-y:auto;overflow-x:hidden}:host .gateway-form .form-action-buttons{padding-top:8px}:host .gateway-form .gateway-config .no-data-found{position:relative;display:flex;height:40px}\n']}]}],ctorParameters:()=>[{type:ot.Store},{type:t.ElementRef},{type:X.UtilsService},{type:t.NgZone},{type:me.UntypedFormBuilder},{type:Window,decorators:[{type:p,args:[ae]}]},{type:Je.MatDialog},{type:Y.TranslateService},{type:X.DeviceService},{type:X.AttributeService},{type:lt.ImportExportService}],propDecorators:{formContainerRef:[{type:o,args:["formContainer",{static:!0}]}],multipleInputForm:[{type:o,args:["gatewayConfigurationForm",{static:!0}]}],ctx:[{type:a}],isStateForm:[{type:a}]}});class to extends P{constructor(e,t,n,a,o,i,r){super(e,t,a),this.store=e,this.router=t,this.data=n,this.dialogRef=a,this.fb=o,this.isLatestVersionConfig=i,this.resourcesService=r,this.connectorType=_t,this.gatewayConnectorDefaultTypesTranslatesMap=Ht,this.gatewayLogLevel=Object.values(Mt),this.submitted=!1,this.destroy$=new Se,this.connectorForm=this.fb.group({type:[_t.MQTT,[]],name:["",[ue.required,this.uniqNameRequired(),ue.pattern(kt)]],logLevel:[Mt.INFO,[]],useDefaults:[!0,[]],sendDataOnlyOnChange:[!1,[]],class:["",[]],key:["auto",[]]})}ngOnInit(){this.observeTypeChange()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete(),super.ngOnDestroy()}helpLinkId(){return v+"/docs/iot-gateway/configuration/"}cancel(){this.dialogRef.close(null)}add(){this.submitted=!0;const e=this.connectorForm.getRawValue();e.useDefaults?this.getDefaultConfig(e.type).subscribe((t=>{const n=this.data.gatewayVersion;n&&(e.configVersion=n),e.configurationJson=(this.isLatestVersionConfig.transform(n)?t[Ut.Current]:t[Ut.Legacy])??t,this.connectorForm.valid&&this.dialogRef.close(e)})):this.connectorForm.valid&&this.dialogRef.close(e)}uniqNameRequired(){return e=>{const t=e.value.trim().toLowerCase();return this.data.dataSourceData.some((({value:{name:e}})=>e.toLowerCase()===t))?{duplicateName:{valid:!1}}:null}}observeTypeChange(){this.connectorForm.get("type").valueChanges.pipe(Ee((e=>{const t=this.connectorForm.get("useDefaults");e===_t.GRPC||e===_t.CUSTOM?t.setValue(!1):t.value||t.setValue(!0)})),Ne(this.destroy$)).subscribe()}getDefaultConfig(e){return this.resourcesService.loadJsonResource(`/assets/metadata/connector-default-configs/${e}.json`)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:to,deps:[{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef},{token:me.FormBuilder},{token:va},{token:X.ResourcesService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:to,selector:"tb-add-connector-dialog",providers:[],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div [formGroup]="connectorForm" class="add-connector">\n  <mat-toolbar color="primary">\n    <h2>{{ "gateway.add-connector" | translate}}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="helpLinkId()"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content>\n    <div class="tb-form-panel no-border no-padding" fxLayout="column">\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.type</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="type">\n              <mat-option *ngFor="let type of gatewayConnectorDefaultTypesTranslatesMap | keyvalue" [value]="type.key">\n                {{ type.value }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width tb-required" translate>gateway.name</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(connectorForm.get(\'name\').hasError(\'duplicateName\') ?\n                                    \'gateway.connector-duplicate-name\' :\'gateway.name-required\') | translate"\n                      *ngIf="(connectorForm.get(\'name\').hasError(\'required\') && connectorForm.get(\'name\').touched)\n                            || connectorForm.get(\'name\').hasError(\'duplicateName\')"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value === connectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.connectors-table-class</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="class" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value === connectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.connectors-table-key</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.remote-logging-level</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="logLevel">\n              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value !== connectorType.GRPC && connectorForm.get(\'type\').value !== connectorType.CUSTOM"\n           class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="useDefaults">\n          <mat-label tb-hint-tooltip-icon="{{ \'gateway.fill-connector-defaults-hint\' | translate }}">\n            {{ \'gateway.fill-connector-defaults\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value === connectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="sendDataOnlyOnChange">\n          <mat-label tb-hint-tooltip-icon="{{ \'gateway.send-change-data-hint\' | translate }}">\n            {{ \'gateway.send-change-data\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="connectorForm.invalid || !connectorForm.dirty">\n      {{ \'action.add\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .add-connector{min-width:400px;width:500px}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:dt.HelpComponent,selector:"[tb-help]",inputs:["tb-help"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:Je.MatDialogActions,selector:"[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",inputs:["align"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:_.KeyValuePipe,name:"keyvalue"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("AddConnectorDialogComponent",to),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:to,decorators:[{type:n,args:[{selector:"tb-add-connector-dialog",providers:[],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div [formGroup]="connectorForm" class="add-connector">\n  <mat-toolbar color="primary">\n    <h2>{{ "gateway.add-connector" | translate}}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="helpLinkId()"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content>\n    <div class="tb-form-panel no-border no-padding" fxLayout="column">\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.type</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="type">\n              <mat-option *ngFor="let type of gatewayConnectorDefaultTypesTranslatesMap | keyvalue" [value]="type.key">\n                {{ type.value }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width tb-required" translate>gateway.name</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(connectorForm.get(\'name\').hasError(\'duplicateName\') ?\n                                    \'gateway.connector-duplicate-name\' :\'gateway.name-required\') | translate"\n                      *ngIf="(connectorForm.get(\'name\').hasError(\'required\') && connectorForm.get(\'name\').touched)\n                            || connectorForm.get(\'name\').hasError(\'duplicateName\')"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value === connectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.connectors-table-class</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="class" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value === connectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.connectors-table-key</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.remote-logging-level</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="logLevel">\n              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value !== connectorType.GRPC && connectorForm.get(\'type\').value !== connectorType.CUSTOM"\n           class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="useDefaults">\n          <mat-label tb-hint-tooltip-icon="{{ \'gateway.fill-connector-defaults-hint\' | translate }}">\n            {{ \'gateway.fill-connector-defaults\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n      <div *ngIf="connectorForm.get(\'type\').value === connectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="sendDataOnlyOnChange">\n          <mat-label tb-hint-tooltip-icon="{{ \'gateway.send-change-data-hint\' | translate }}">\n            {{ \'gateway.send-change-data\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="connectorForm.invalid || !connectorForm.dirty">\n      {{ \'action.add\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .add-connector{min-width:400px;width:500px}\n']}]}],ctorParameters:()=>[{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef},{type:me.FormBuilder},{type:va},{type:X.ResourcesService}]});class no{constructor(e){this.fb=e,this.valueTypeKeys=Object.values(Gn),this.valueTypes=Vn,this.MappingValueType=Gn,this.destroy$=new Se,this.propagateChange=e=>{}}ngOnInit(){this.valueListFormArray=this.fb.array([]),this.valueListFormArray.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateView(e)}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}trackByKey(e,t){return t}addKey(){const e=this.fb.group({type:[Gn.STRING],string:["",[ue.required,ue.pattern(kt)]],integer:[{value:0,disabled:!0},[ue.required,ue.pattern(Lt)]],double:[{value:0,disabled:!0},[ue.required]],boolean:[{value:!1,disabled:!0},[ue.required]]});this.observeTypeChange(e),this.valueListFormArray.push(e)}observeTypeChange(e){e.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{e.disable({emitEvent:!1}),e.get("type").enable({emitEvent:!1}),e.get(t).enable({emitEvent:!1})}))}deleteKey(e,t){e&&e.stopPropagation(),this.valueListFormArray.removeAt(t),this.valueListFormArray.markAsDirty()}valueTitle(e){return ie(e)?"object"==typeof e?JSON.stringify(e):e:""}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}writeValue(e){for(const t of e){const e={type:[t.type],string:[{value:"",disabled:!0},[ue.required,ue.pattern(kt)]],integer:[{value:0,disabled:!0},[ue.required,ue.pattern(Lt)]],double:[{value:0,disabled:!0},[ue.required]],boolean:[{value:!1,disabled:!0},[ue.required]]};e[t.type][0]={value:t.value,disabled:!1};const n=this.fb.group(e);this.observeTypeChange(n),this.valueListFormArray.push(n)}}validate(){return this.valueListFormArray.valid?null:{valueListForm:{valid:!1}}}updateView(e){this.propagateChange(e.map((({type:e,...t})=>({type:e,value:t[e]}))))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:no,deps:[{token:me.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:no,selector:"tb-type-value-panel",providers:[{provide:ge,useExisting:m((()=>no)),multi:!0},{provide:fe,useExisting:m((()=>no)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel no-border no-padding key-panel" *ngIf="valueListFormArray.controls.length; else noKeys">\n    <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"\n         *ngFor="let keyControl of valueListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">\n      <div class="tb-form-panel stroked tb-flex">\n        <ng-container [formGroup]="keyControl">\n          <mat-expansion-panel class="tb-settings" [expanded]="last">\n            <mat-expansion-panel-header fxLayout="row wrap">\n              <mat-panel-title>\n                <div class="title-container" tbTruncateWithTooltip>{{ valueTitle(keyControl.get(keyControl.get(\'type\').value).value) }}</div>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <ng-template matExpansionPanelContent>\n                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                  <div class="fixed-title-width tb-required" translate>gateway.type</div>\n                  <div class="tb-flex no-gap">\n                    <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n                      <mat-select formControlName="type">\n                        <mat-select-trigger>\n                          <div class="tb-flex align-center">\n                            <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get(\'type\').value)?.icon">\n                            </mat-icon>\n                            <span>\n                              {{ valueTypes.get(keyControl.get(\'type\').value)?.name | translate}}\n                            </span>\n                          </div>\n                        </mat-select-trigger>\n                        <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">\n                          <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">\n                          </mat-icon>\n                          <span>{{ valueTypes.get(valueType).name | translate }}</span>\n                        </mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                </div>\n                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                  <div class="fixed-title-width tb-required" translate>gateway.value</div>\n                  <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n                    <ng-container [ngSwitch]="keyControl.get(\'type\').value">\n                      <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"\n                             placeholder="{{ \'gateway.set\' | translate }}" />\n                      <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"\n                             placeholder="{{ \'gateway.set\' | translate }}" />\n                      <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"\n                             placeholder="{{ \'gateway.set\' | translate }}" />\n                      <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">\n                        <mat-option [value]="true">true</mat-option>\n                        <mat-option [value]="false">false</mat-option>\n                      </mat-select>\n                    </ng-container>\n                    <mat-icon matSuffix\n                              matTooltipPosition="above"\n                              matTooltipClass="tb-error-tooltip"\n                              [matTooltip]="(\'gateway.value-required\') | translate"\n                              *ngIf="keyControl.get(keyControl.get(\'type\').value).hasError(\'required\')\n                              && keyControl.get(keyControl.get(\'type\').value).touched"\n                              class="tb-error">\n                      warning\n                    </mat-icon>\n                  </mat-form-field>\n                </div>\n            </ng-template>\n          </mat-expansion-panel>\n        </ng-container>\n      </div>\n      <button type="button"\n              mat-icon-button\n              (click)="deleteKey($event, $index)"\n              [matTooltip]="\'gateway.delete-value\' | translate"\n              matTooltipPosition="above">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div>\n    <button type="button" mat-stroked-button color="primary" (click)="addKey()">\n      {{ \'gateway.add-value\' | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #noKeys>\n  <div class="tb-flex no-flex center align-center key-panel">\n    <span class="tb-prompt" translate>{{ \'gateway.no-value\' }}</span>\n  </div>\n</ng-template>\n',styles:['@charset "UTF-8";:host .title-container{max-width:11vw}:host .key-panel{height:250px;overflow:auto}:host .tb-form-panel .mat-mdc-icon-button{width:56px;height:56px;padding:16px;color:#0000008a}:host .see-example{width:32px;height:32px;margin:4px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"directive",type:we.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:$e.MatExpansionPanelContent,selector:"ng-template[matExpansionPanelContent]"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("TypeValuePanelComponent",no),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:no,decorators:[{type:n,args:[{selector:"tb-type-value-panel",providers:[{provide:ge,useExisting:m((()=>no)),multi:!0},{provide:fe,useExisting:m((()=>no)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel no-border no-padding key-panel" *ngIf="valueListFormArray.controls.length; else noKeys">\n    <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"\n         *ngFor="let keyControl of valueListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">\n      <div class="tb-form-panel stroked tb-flex">\n        <ng-container [formGroup]="keyControl">\n          <mat-expansion-panel class="tb-settings" [expanded]="last">\n            <mat-expansion-panel-header fxLayout="row wrap">\n              <mat-panel-title>\n                <div class="title-container" tbTruncateWithTooltip>{{ valueTitle(keyControl.get(keyControl.get(\'type\').value).value) }}</div>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <ng-template matExpansionPanelContent>\n                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                  <div class="fixed-title-width tb-required" translate>gateway.type</div>\n                  <div class="tb-flex no-gap">\n                    <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n                      <mat-select formControlName="type">\n                        <mat-select-trigger>\n                          <div class="tb-flex align-center">\n                            <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get(\'type\').value)?.icon">\n                            </mat-icon>\n                            <span>\n                              {{ valueTypes.get(keyControl.get(\'type\').value)?.name | translate}}\n                            </span>\n                          </div>\n                        </mat-select-trigger>\n                        <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">\n                          <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">\n                          </mat-icon>\n                          <span>{{ valueTypes.get(valueType).name | translate }}</span>\n                        </mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                </div>\n                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                  <div class="fixed-title-width tb-required" translate>gateway.value</div>\n                  <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n                    <ng-container [ngSwitch]="keyControl.get(\'type\').value">\n                      <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"\n                             placeholder="{{ \'gateway.set\' | translate }}" />\n                      <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"\n                             placeholder="{{ \'gateway.set\' | translate }}" />\n                      <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"\n                             placeholder="{{ \'gateway.set\' | translate }}" />\n                      <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">\n                        <mat-option [value]="true">true</mat-option>\n                        <mat-option [value]="false">false</mat-option>\n                      </mat-select>\n                    </ng-container>\n                    <mat-icon matSuffix\n                              matTooltipPosition="above"\n                              matTooltipClass="tb-error-tooltip"\n                              [matTooltip]="(\'gateway.value-required\') | translate"\n                              *ngIf="keyControl.get(keyControl.get(\'type\').value).hasError(\'required\')\n                              && keyControl.get(keyControl.get(\'type\').value).touched"\n                              class="tb-error">\n                      warning\n                    </mat-icon>\n                  </mat-form-field>\n                </div>\n            </ng-template>\n          </mat-expansion-panel>\n        </ng-container>\n      </div>\n      <button type="button"\n              mat-icon-button\n              (click)="deleteKey($event, $index)"\n              [matTooltip]="\'gateway.delete-value\' | translate"\n              matTooltipPosition="above">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div>\n    <button type="button" mat-stroked-button color="primary" (click)="addKey()">\n      {{ \'gateway.add-value\' | translate }}\n    </button>\n  </div>\n</div>\n<ng-template #noKeys>\n  <div class="tb-flex no-flex center align-center key-panel">\n    <span class="tb-prompt" translate>{{ \'gateway.no-value\' }}</span>\n  </div>\n</ng-template>\n',styles:['@charset "UTF-8";:host .title-container{max-width:11vw}:host .key-panel{height:250px;overflow:auto}:host .tb-form-panel .mat-mdc-icon-button{width:56px;height:56px;padding:16px;color:#0000008a}:host .see-example{width:32px;height:32px;margin:4px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n']}]}],ctorParameters:()=>[{type:me.UntypedFormBuilder}]});class ao extends O{constructor(e,t){super(t),this.fb=e,this.store=t,this.valueTypeKeys=Object.values(Gn),this.valueTypeEnum=Gn,this.valueTypes=Vn,this.rawData=!1,this.keysDataApplied=new i,this.MappingKeysType=Nn,this.errorText=""}ngOnInit(){this.keysListFormArray=this.prepareKeysFormArray(this.keys)}trackByKey(e,t){return t}addKey(){let e;if(e=this.keysType===Nn.RPC_METHODS?this.fb.group({method:["",[ue.required]],arguments:[[],[]]}):this.fb.group({key:["",[ue.required,ue.pattern(kt)]],value:["",[ue.required,ue.pattern(kt)]]}),this.keysType!==Nn.CUSTOM&&this.keysType!==Nn.RPC_METHODS){const t=this.rawData?"raw":this.valueTypeKeys[0];e.addControl("type",this.fb.control(t))}this.keysListFormArray.push(e)}deleteKey(e,t){e&&e.stopPropagation(),this.keysListFormArray.removeAt(t),this.keysListFormArray.markAsDirty()}cancel(){this.popover?.hide()}applyKeysData(){let e=this.keysListFormArray.value;if(this.keysType===Nn.CUSTOM){e={};for(let t of this.keysListFormArray.value)e[t.key]=t.value}this.keysDataApplied.emit(e)}prepareKeysFormArray(e){const t=[];return e&&(this.keysType===Nn.CUSTOM&&(e=Object.keys(e).map((t=>({key:t,value:e[t],type:""})))),e.forEach((e=>{let n;if(this.keysType===Nn.RPC_METHODS)n=this.fb.group({method:[e.method,[ue.required]],arguments:[[...e.arguments],[]]});else{const{key:t,value:a,type:o}=e;n=this.fb.group({key:[t,[ue.required,ue.pattern(kt)]],value:[a,[ue.required,ue.pattern(kt)]],type:[o,[]]})}t.push(n)}))),this.fb.array(t)}valueTitle(e){const t=e.get(this.keysType===Nn.RPC_METHODS?"method":"value").value;return ie(t)?"object"==typeof t?JSON.stringify(t):t:""}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ao,deps:[{token:me.UntypedFormBuilder},{token:ot.Store}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:ao,selector:"tb-mapping-data-keys-panel",inputs:{panelTitle:"panelTitle",addKeyTitle:"addKeyTitle",deleteKeyTitle:"deleteKeyTitle",noKeysText:"noKeysText",keys:"keys",keysType:"keysType",valueTypeKeys:"valueTypeKeys",valueTypeEnum:"valueTypeEnum",valueTypes:"valueTypes",rawData:"rawData",popover:"popover"},outputs:{keysDataApplied:"keysDataApplied"},providers:[],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-mapping-keys-panel">\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{\' (\' + keysListFormArray.controls.length + \')\'}}</div>\n    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">\n      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"\n           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">\n        <div class="tb-form-panel stroked tb-flex">\n          <ng-container [formGroup]="keyControl">\n            <mat-expansion-panel class="tb-settings" [expanded]="last">\n              <mat-expansion-panel-header fxLayout="row wrap">\n                <mat-panel-title>\n                  <ng-container *ngIf="keysType !== MappingKeysType.RPC_METHODS">\n                    <div tbTruncateWithTooltip class="title-container">\n                      {{ keyControl.get(\'key\').value }}\n                    </div>\n                    {{ \'-\' }}\n                  </ng-container>\n                  <div tbTruncateWithTooltip class="title-container">{{ valueTitle(keyControl) }}</div>\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n              <ng-template matExpansionPanelContent>\n                <div class="tb-form-panel no-border no-padding"\n                     *ngIf="keysType !== MappingKeysType.CUSTOM && keysType !== MappingKeysType.RPC_METHODS">\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title" translate>gateway.platform-side</div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required"\n                           tb-hint-tooltip-icon="{{ \'gateway.JSONPath-hint\' | translate }}">\n                        {{ \'gateway.key\' | translate }}\n                      </div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.key-required\') | translate"\n                                    *ngIf="keyControl.get(\'key\').hasError(\'required\') &&\n                                           keyControl.get(\'key\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </div>\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title" translate>gateway.connector-side</div>\n                    <div class="tb-form-row">\n                      <div class="fixed-title-width tb-required" translate>gateway.type</div>\n                      <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select name="valueType" formControlName="type">\n                          <mat-select-trigger *ngIf="!rawData">\n                            <div class="tb-flex align-center">\n                              <mat-icon *ngIf="valueTypes.get(keyControl.get(\'type\').value)?.icon" class="tb-mat-18"\n                                        [svgIcon]="valueTypes.get(keyControl.get(\'type\').value)?.icon">\n                              </mat-icon>\n                              <span *ngIf="!rawData; else rawText">\n                                {{ (valueTypes.get(keyControl.get(\'type\').value)?.name || valueTypes.get(keyControl.get(\'type\').value)) | translate }}\n                              </span>\n                              <ng-template #rawText>\n                                <span>{{ \'gateway.raw\' | translate }}</span>\n                              </ng-template>\n                            </div>\n                          </mat-select-trigger>\n                          <ng-container *ngIf="!rawData; else rawOption">\n                            <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">\n                              <mat-icon *ngIf="valueTypes.get(valueType).icon" class="tb-mat-20"\n                                        svgIcon="{{ valueTypes.get(valueType).icon }}">\n                              </mat-icon>\n                              <span>\n                                {{ valueTypes.get(valueType).name || valueTypes.get(valueType) | translate }}\n                              </span>\n                            </mat-option>\n                          </ng-container>\n                          <ng-template #rawOption>\n                            <mat-option [value]="\'raw\'">\n                              <span>{{ \'gateway.raw\' | translate }}</span>\n                            </mat-option>\n                          </ng-template>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required"\n                           tb-hint-tooltip-icon="{{ \'gateway.JSONPath-hint\' | translate }}">\n                        {{ \'gateway.value\' | translate }}\n                      </div>\n                      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-flex no-gap">\n                        <input matInput required formControlName="value"\n                               placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.value-required\') | translate"\n                                  *ngIf="keyControl.get(\'value\').hasError(\'required\') &&\n                                         keyControl.get(\'value\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             *ngIf="this.keysType | getGatewayHelpLink : keyControl.get(\'type\').value : valueTypeKeys"\n                             [tb-help-popup]="this.keysType | getGatewayHelpLink : keyControl.get(\'type\').value : valueTypeKeys"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                </div>\n                <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.CUSTOM">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.key</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.key-required\') | translate"\n                                  *ngIf="keyControl.get(\'key\').hasError(\'required\') && keyControl.get(\'key\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.value</div>\n                    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n                      <input matInput required formControlName="value"\n                             placeholder="{{ \'gateway.set\' | translate }}"/>\n                      <mat-icon matSuffix\n                                matTooltipPosition="above"\n                                matTooltipClass="tb-error-tooltip"\n                                [matTooltip]="(\'gateway.value-required\') | translate"\n                                *ngIf="keyControl.get(\'value\').hasError(\'required\') && keyControl.get(\'value\').touched"\n                                class="tb-error">\n                        warning\n                      </mat-icon>\n                    </mat-form-field>\n                  </div>\n                </div>\n                <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.RPC_METHODS">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.method-name\' | translate }}">\n                      {{ \'gateway.method-name\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="method" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.method-required\') | translate"\n                                  *ngIf="keyControl.get(\'method\').hasError(\'required\') && keyControl.get(\'method\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-panel stroked tb-flex">\n                    <mat-expansion-panel class="tb-settings">\n                      <mat-expansion-panel-header fxLayout="row wrap">\n                        <mat-panel-title>\n                          <div class="title-container" tb-hint-tooltip-icon="{{ \'gateway.hints.arguments\' | translate }}">\n                            {{ \'gateway.arguments\' | translate }}{{\' (\' + keyControl.get(\'arguments\').value?.length + \')\'}}\n                          </div>\n                        </mat-panel-title>\n                      </mat-expansion-panel-header>\n                      <ng-template matExpansionPanelContent>\n                        <tb-type-value-panel formControlName="arguments"></tb-type-value-panel>\n                      </ng-template>\n                    </mat-expansion-panel>\n                  </div>\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          </ng-container>\n        </div>\n        <button type="button"\n                mat-icon-button\n                (click)="deleteKey($event, $index)"\n                [matTooltip]="deleteKeyTitle | translate"\n                matTooltipPosition="above">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div>\n      <button type="button" mat-stroked-button color="primary" (click)="addKey()">\n        {{ addKeyTitle | translate }}\n      </button>\n    </div>\n  </div>\n  <ng-template #noKeys>\n    <div class="tb-flex no-flex center align-center key-panel">\n      <span class="tb-prompt" translate>{{ noKeysText }}</span>\n    </div>\n  </ng-template>\n  <div class="tb-flex flex-end">\n    <button mat-button\n            color="primary"\n            type="button"\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button\n            color="primary"\n            type="button"\n            (click)="applyKeysData()"\n            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">\n      {{ \'action.apply\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .tb-mapping-keys-panel{width:77vw;max-width:700px}:host .tb-mapping-keys-panel .title-container{max-width:11vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tb-mapping-keys-panel .key-panel{height:500px;overflow:auto}:host .tb-mapping-keys-panel tb-value-input{width:100%}:host .tb-mapping-keys-panel .tb-form-panel .mat-mdc-icon-button{width:56px;height:56px;padding:16px;color:#0000008a}:host .tb-mapping-keys-panel .see-example{width:32px;height:32px;margin:4px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:gt.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"directive",type:we.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:$e.MatExpansionPanelContent,selector:"ng-template[matExpansionPanelContent]"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"component",type:no,selector:"tb-type-value-panel"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"pipe",type:Ta,name:"getGatewayHelpLink"}]})}}e("MappingDataKeysPanelComponent",ao),He([N()],ao.prototype,"rawData",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ao,decorators:[{type:n,args:[{selector:"tb-mapping-data-keys-panel",providers:[],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-mapping-keys-panel">\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{\' (\' + keysListFormArray.controls.length + \')\'}}</div>\n    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">\n      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"\n           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">\n        <div class="tb-form-panel stroked tb-flex">\n          <ng-container [formGroup]="keyControl">\n            <mat-expansion-panel class="tb-settings" [expanded]="last">\n              <mat-expansion-panel-header fxLayout="row wrap">\n                <mat-panel-title>\n                  <ng-container *ngIf="keysType !== MappingKeysType.RPC_METHODS">\n                    <div tbTruncateWithTooltip class="title-container">\n                      {{ keyControl.get(\'key\').value }}\n                    </div>\n                    {{ \'-\' }}\n                  </ng-container>\n                  <div tbTruncateWithTooltip class="title-container">{{ valueTitle(keyControl) }}</div>\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n              <ng-template matExpansionPanelContent>\n                <div class="tb-form-panel no-border no-padding"\n                     *ngIf="keysType !== MappingKeysType.CUSTOM && keysType !== MappingKeysType.RPC_METHODS">\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title" translate>gateway.platform-side</div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required"\n                           tb-hint-tooltip-icon="{{ \'gateway.JSONPath-hint\' | translate }}">\n                        {{ \'gateway.key\' | translate }}\n                      </div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.key-required\') | translate"\n                                    *ngIf="keyControl.get(\'key\').hasError(\'required\') &&\n                                           keyControl.get(\'key\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </div>\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title" translate>gateway.connector-side</div>\n                    <div class="tb-form-row">\n                      <div class="fixed-title-width tb-required" translate>gateway.type</div>\n                      <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select name="valueType" formControlName="type">\n                          <mat-select-trigger *ngIf="!rawData">\n                            <div class="tb-flex align-center">\n                              <mat-icon *ngIf="valueTypes.get(keyControl.get(\'type\').value)?.icon" class="tb-mat-18"\n                                        [svgIcon]="valueTypes.get(keyControl.get(\'type\').value)?.icon">\n                              </mat-icon>\n                              <span *ngIf="!rawData; else rawText">\n                                {{ (valueTypes.get(keyControl.get(\'type\').value)?.name || valueTypes.get(keyControl.get(\'type\').value)) | translate }}\n                              </span>\n                              <ng-template #rawText>\n                                <span>{{ \'gateway.raw\' | translate }}</span>\n                              </ng-template>\n                            </div>\n                          </mat-select-trigger>\n                          <ng-container *ngIf="!rawData; else rawOption">\n                            <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">\n                              <mat-icon *ngIf="valueTypes.get(valueType).icon" class="tb-mat-20"\n                                        svgIcon="{{ valueTypes.get(valueType).icon }}">\n                              </mat-icon>\n                              <span>\n                                {{ valueTypes.get(valueType).name || valueTypes.get(valueType) | translate }}\n                              </span>\n                            </mat-option>\n                          </ng-container>\n                          <ng-template #rawOption>\n                            <mat-option [value]="\'raw\'">\n                              <span>{{ \'gateway.raw\' | translate }}</span>\n                            </mat-option>\n                          </ng-template>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required"\n                           tb-hint-tooltip-icon="{{ \'gateway.JSONPath-hint\' | translate }}">\n                        {{ \'gateway.value\' | translate }}\n                      </div>\n                      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-flex no-gap">\n                        <input matInput required formControlName="value"\n                               placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.value-required\') | translate"\n                                  *ngIf="keyControl.get(\'value\').hasError(\'required\') &&\n                                         keyControl.get(\'value\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             *ngIf="this.keysType | getGatewayHelpLink : keyControl.get(\'type\').value : valueTypeKeys"\n                             [tb-help-popup]="this.keysType | getGatewayHelpLink : keyControl.get(\'type\').value : valueTypeKeys"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                </div>\n                <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.CUSTOM">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.key</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.key-required\') | translate"\n                                  *ngIf="keyControl.get(\'key\').hasError(\'required\') && keyControl.get(\'key\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.value</div>\n                    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n                      <input matInput required formControlName="value"\n                             placeholder="{{ \'gateway.set\' | translate }}"/>\n                      <mat-icon matSuffix\n                                matTooltipPosition="above"\n                                matTooltipClass="tb-error-tooltip"\n                                [matTooltip]="(\'gateway.value-required\') | translate"\n                                *ngIf="keyControl.get(\'value\').hasError(\'required\') && keyControl.get(\'value\').touched"\n                                class="tb-error">\n                        warning\n                      </mat-icon>\n                    </mat-form-field>\n                  </div>\n                </div>\n                <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.RPC_METHODS">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.method-name\' | translate }}">\n                      {{ \'gateway.method-name\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="method" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.method-required\') | translate"\n                                  *ngIf="keyControl.get(\'method\').hasError(\'required\') && keyControl.get(\'method\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-panel stroked tb-flex">\n                    <mat-expansion-panel class="tb-settings">\n                      <mat-expansion-panel-header fxLayout="row wrap">\n                        <mat-panel-title>\n                          <div class="title-container" tb-hint-tooltip-icon="{{ \'gateway.hints.arguments\' | translate }}">\n                            {{ \'gateway.arguments\' | translate }}{{\' (\' + keyControl.get(\'arguments\').value?.length + \')\'}}\n                          </div>\n                        </mat-panel-title>\n                      </mat-expansion-panel-header>\n                      <ng-template matExpansionPanelContent>\n                        <tb-type-value-panel formControlName="arguments"></tb-type-value-panel>\n                      </ng-template>\n                    </mat-expansion-panel>\n                  </div>\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          </ng-container>\n        </div>\n        <button type="button"\n                mat-icon-button\n                (click)="deleteKey($event, $index)"\n                [matTooltip]="deleteKeyTitle | translate"\n                matTooltipPosition="above">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div>\n      <button type="button" mat-stroked-button color="primary" (click)="addKey()">\n        {{ addKeyTitle | translate }}\n      </button>\n    </div>\n  </div>\n  <ng-template #noKeys>\n    <div class="tb-flex no-flex center align-center key-panel">\n      <span class="tb-prompt" translate>{{ noKeysText }}</span>\n    </div>\n  </ng-template>\n  <div class="tb-flex flex-end">\n    <button mat-button\n            color="primary"\n            type="button"\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button\n            color="primary"\n            type="button"\n            (click)="applyKeysData()"\n            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">\n      {{ \'action.apply\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .tb-mapping-keys-panel{width:77vw;max-width:700px}:host .tb-mapping-keys-panel .title-container{max-width:11vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tb-mapping-keys-panel .key-panel{height:500px;overflow:auto}:host .tb-mapping-keys-panel tb-value-input{width:100%}:host .tb-mapping-keys-panel .tb-form-panel .mat-mdc-icon-button{width:56px;height:56px;padding:16px;color:#0000008a}:host .tb-mapping-keys-panel .see-example{width:32px;height:32px;margin:4px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n']}]}],ctorParameters:()=>[{type:me.UntypedFormBuilder},{type:ot.Store}],propDecorators:{panelTitle:[{type:a}],addKeyTitle:[{type:a}],deleteKeyTitle:[{type:a}],noKeysText:[{type:a}],keys:[{type:a}],keysType:[{type:a}],valueTypeKeys:[{type:a}],valueTypeEnum:[{type:a}],valueTypes:[{type:a}],rawData:[{type:a}],popover:[{type:a}],keysDataApplied:[{type:l}]}});class oo extends O{get deviceInfoType(){return this.deviceInfoTypeValue}set deviceInfoType(e){this.deviceInfoTypeValue!==e&&(this.deviceInfoTypeValue=e)}constructor(e,t,n,a){super(e),this.store=e,this.translate=t,this.dialog=n,this.fb=a,this.SourceTypeTranslationsMap=Ln,this.DeviceInfoType=kn,this.useSource=!0,this.required=!1,this.sourceTypes=Object.values(Tn),this.destroy$=new Se,this.propagateChange=e=>{}}ngOnInit(){this.mappingFormGroup=this.fb.group({deviceNameExpression:["",this.required?[ue.required,ue.pattern(kt)]:[ue.pattern(kt)]]}),this.useSource&&this.mappingFormGroup.addControl("deviceNameExpressionSource",this.fb.control(this.sourceTypes[0],[])),this.deviceInfoType===kn.FULL&&(this.useSource&&this.mappingFormGroup.addControl("deviceProfileExpressionSource",this.fb.control(this.sourceTypes[0],[])),this.mappingFormGroup.addControl("deviceProfileExpression",this.fb.control("",this.required?[ue.required,ue.pattern(kt)]:[ue.pattern(kt)]))),this.mappingFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateView(e)}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete(),super.ngOnDestroy()}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}writeValue(e){this.mappingFormGroup.patchValue(e,{emitEvent:!1})}validate(){return this.mappingFormGroup.valid?null:{mappingForm:{valid:!1}}}updateView(e){this.propagateChange(e)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:oo,deps:[{token:ot.Store},{token:Y.TranslateService},{token:Je.MatDialog},{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:oo,selector:"tb-device-info-table",inputs:{useSource:"useSource",required:"required",sourceTypes:"sourceTypes",deviceInfoType:"deviceInfoType"},providers:[{provide:ge,useExisting:m((()=>oo)),multi:!0},{provide:fe,useExisting:m((()=>oo)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<div class="tb-form-panel stroked" [formGroup]="mappingFormGroup">\n  <div class="tb-form-panel-title" [class.tb-required]="required" translate>device.device</div>\n  <div class="tb-form-table no-padding no-gap">\n    <div class="tb-form-table-header">\n      <div class="tb-form-table-header-cell table-name-column" translate>gateway.device-info.entity-field</div>\n      <div *ngIf="useSource" class="tb-form-table-header-cell table-column" translate>gateway.device-info.source</div>\n      <div class="tb-form-table-header-cell table-column" translate>\n        gateway.device-info.expression\n      </div>\n    </div>\n    <div class="tb-form-table-body no-gap">\n      <div class="tb-form-table-row tb-form-row no-border same-padding top-same-padding"\n           [class.bottom-same-padding]="deviceInfoType !== DeviceInfoType.FULL">\n        <div class="fixed-title-width tb-required" translate>gateway.device-info.name</div>\n        <div class="tb-flex no-gap raw-value-option" *ngIf="useSource">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="deviceNameExpressionSource">\n              <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                {{ SourceTypeTranslationsMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-table-row-cell tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.device-info.device-name-expression-required\') | translate"\n                      *ngIf="mappingFormGroup.get(\'deviceNameExpression\').hasError(\'required\') &&\n                             mappingFormGroup.get(\'deviceNameExpression\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n            <div *ngIf="\'name-field\' | getGatewayHelpLink : mappingFormGroup.get(\'deviceNameExpressionSource\').value : sourceTypes"\n                 matSuffix\n                 class="see-example"\n                 [tb-help-popup]="\'name-field\' | getGatewayHelpLink : mappingFormGroup.get(\'deviceNameExpressionSource\').value : sourceTypes"\n                 tb-help-popup-placement="left"\n                 [tb-help-popup-style]="{maxWidth: \'970px\'}">\n            </div>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-table-row tb-form-row no-border same-padding bottom-same-padding"\n           *ngIf="deviceInfoType === DeviceInfoType.FULL">\n        <div class="fixed-title-width tb-required" translate>gateway.device-info.profile-name</div>\n        <div class="tb-flex no-gap raw-value-option" *ngIf="useSource">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="deviceProfileExpressionSource">\n              <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                {{ SourceTypeTranslationsMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-table-row-cell tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="deviceProfileExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.device-info.device-profile-expression-required\') | translate"\n                      *ngIf="mappingFormGroup.get(\'deviceProfileExpression\').hasError(\'required\') &&\n                             mappingFormGroup.get(\'deviceProfileExpression\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n            <div *ngIf="\'profile-name\' | getGatewayHelpLink: mappingFormGroup.get(\'deviceProfileExpressionSource\').value : sourceTypes"\n                 matSuffix\n                 class="see-example"\n                 [tb-help-popup]="\'profile-name\' | getGatewayHelpLink: mappingFormGroup.get(\'deviceProfileExpressionSource\').value : sourceTypes"\n                 tb-help-popup-placement="left"\n                 [tb-help-popup-style]="{maxWidth: \'970px\'}">\n            </div>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}:host .tb-form-row.bottom-same-padding{padding-bottom:16px}:host .tb-form-row.top-same-padding{padding-top:16px}:host .tb-form-row .fixed-title-width{width:19%}:host .table-column{width:40%}:host .table-name-column{width:20%}:host .raw-name{width:19%}:host .raw-value-option{max-width:40%}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:gt.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"pipe",type:Ta,name:"getGatewayHelpLink"}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("DeviceInfoTableComponent",oo),He([N()],oo.prototype,"useSource",void 0),He([N()],oo.prototype,"required",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:oo,decorators:[{type:n,args:[{selector:"tb-device-info-table",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>oo)),multi:!0},{provide:fe,useExisting:m((()=>oo)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<div class="tb-form-panel stroked" [formGroup]="mappingFormGroup">\n  <div class="tb-form-panel-title" [class.tb-required]="required" translate>device.device</div>\n  <div class="tb-form-table no-padding no-gap">\n    <div class="tb-form-table-header">\n      <div class="tb-form-table-header-cell table-name-column" translate>gateway.device-info.entity-field</div>\n      <div *ngIf="useSource" class="tb-form-table-header-cell table-column" translate>gateway.device-info.source</div>\n      <div class="tb-form-table-header-cell table-column" translate>\n        gateway.device-info.expression\n      </div>\n    </div>\n    <div class="tb-form-table-body no-gap">\n      <div class="tb-form-table-row tb-form-row no-border same-padding top-same-padding"\n           [class.bottom-same-padding]="deviceInfoType !== DeviceInfoType.FULL">\n        <div class="fixed-title-width tb-required" translate>gateway.device-info.name</div>\n        <div class="tb-flex no-gap raw-value-option" *ngIf="useSource">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="deviceNameExpressionSource">\n              <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                {{ SourceTypeTranslationsMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-table-row-cell tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.device-info.device-name-expression-required\') | translate"\n                      *ngIf="mappingFormGroup.get(\'deviceNameExpression\').hasError(\'required\') &&\n                             mappingFormGroup.get(\'deviceNameExpression\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n            <div *ngIf="\'name-field\' | getGatewayHelpLink : mappingFormGroup.get(\'deviceNameExpressionSource\').value : sourceTypes"\n                 matSuffix\n                 class="see-example"\n                 [tb-help-popup]="\'name-field\' | getGatewayHelpLink : mappingFormGroup.get(\'deviceNameExpressionSource\').value : sourceTypes"\n                 tb-help-popup-placement="left"\n                 [tb-help-popup-style]="{maxWidth: \'970px\'}">\n            </div>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-table-row tb-form-row no-border same-padding bottom-same-padding"\n           *ngIf="deviceInfoType === DeviceInfoType.FULL">\n        <div class="fixed-title-width tb-required" translate>gateway.device-info.profile-name</div>\n        <div class="tb-flex no-gap raw-value-option" *ngIf="useSource">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="deviceProfileExpressionSource">\n              <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                {{ SourceTypeTranslationsMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-table-row-cell tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="deviceProfileExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.device-info.device-profile-expression-required\') | translate"\n                      *ngIf="mappingFormGroup.get(\'deviceProfileExpression\').hasError(\'required\') &&\n                             mappingFormGroup.get(\'deviceProfileExpression\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n            <div *ngIf="\'profile-name\' | getGatewayHelpLink: mappingFormGroup.get(\'deviceProfileExpressionSource\').value : sourceTypes"\n                 matSuffix\n                 class="see-example"\n                 [tb-help-popup]="\'profile-name\' | getGatewayHelpLink: mappingFormGroup.get(\'deviceProfileExpressionSource\').value : sourceTypes"\n                 tb-help-popup-placement="left"\n                 [tb-help-popup-style]="{maxWidth: \'970px\'}">\n            </div>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}:host .tb-form-row.bottom-same-padding{padding-bottom:16px}:host .tb-form-row.top-same-padding{padding-top:16px}:host .tb-form-row .fixed-title-width{width:19%}:host .table-column{width:40%}:host .table-name-column{width:20%}:host .raw-name{width:19%}:host .raw-value-option{max-width:40%}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n']}]}],ctorParameters:()=>[{type:ot.Store},{type:Y.TranslateService},{type:Je.MatDialog},{type:me.FormBuilder}],propDecorators:{useSource:[{type:a}],required:[{type:a}],sourceTypes:[{type:a}],deviceInfoType:[{type:a}]}});class io extends P{constructor(e,t,n,a,o,i,r,s,l){super(e,t,a),this.store=e,this.router=t,this.data=n,this.dialogRef=a,this.fb=o,this.popoverService=i,this.renderer=r,this.viewContainerRef=s,this.translate=l,this.MappingType=fn,this.qualityTypes=xn,this.QualityTranslationsMap=vn,this.convertorTypes=Object.values(wn),this.ConvertorTypeEnum=wn,this.ConvertorTypeTranslationsMap=Cn,this.sourceTypes=Object.values(Tn),this.OPCUaSourceTypes=Object.values(Sn),this.OPCUaSourceTypesEnum=Sn,this.sourceTypesEnum=Tn,this.SourceTypeTranslationsMap=Ln,this.requestTypes=Object.values(In),this.RequestTypeEnum=In,this.RequestTypesTranslationsMap=An,this.DeviceInfoType=kn,this.ServerSideRPCType=Pn,this.MappingKeysType=Nn,this.MappingHintTranslationsMap=bn,this.MappingTypeTranslationsMap=yn,this.DataConversionTranslationsMap=Bn,this.HelpLinkByMappingTypeMap=hn,this.keysPopupClosed=!0,this.destroy$=new Se,this.createMappingForm()}get converterAttributes(){if(this.converterType)return this.mappingForm.get("converter").get(this.converterType).value.attributes.map((e=>e.key))}get converterTelemetry(){if(this.converterType)return this.mappingForm.get("converter").get(this.converterType).value.timeseries.map((e=>e.key))}get opcAttributes(){return this.mappingForm.get("attributes").value?.map((e=>e.key))||[]}get opcTelemetry(){return this.mappingForm.get("timeseries").value?.map((e=>e.key))||[]}get opcRpcMethods(){return this.mappingForm.get("rpc_methods").value?.map((e=>e.method))||[]}get opcAttributesUpdates(){return this.mappingForm.get("attributes_updates")?.value?.map((e=>e.key))||[]}get converterType(){return this.mappingForm.get("converter").get("type").value}get customKeys(){return Object.keys(this.mappingForm.get("converter").get("custom").value.extensionConfig)}get requestMappingType(){return this.mappingForm.get("requestType").value}get responseTimeoutErrorTooltip(){const e=this.mappingForm.get("requestValue.serverSideRpc.responseTimeout");return e.hasError("required")?this.translate.instant("gateway.response-timeout-required"):e.hasError("min")?this.translate.instant("gateway.response-timeout-limits-error",{min:1}):""}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete(),super.ngOnDestroy()}createMappingForm(){switch(this.data.mappingType){case fn.DATA:this.mappingForm=this.fb.group({}),this.createDataMappingForm();break;case fn.REQUESTS:this.mappingForm=this.fb.group({}),this.createRequestMappingForm();break;case fn.OPCUA:this.createOPCUAMappingForm()}}cancel(){this.keysPopupClosed&&this.dialogRef.close(null)}add(){this.mappingForm.valid&&this.dialogRef.close(this.prepareMappingData())}manageKeys(e,t,n){e&&e.stopPropagation();const a=t._elementRef.nativeElement;if(this.popoverService.hasPopover(a))this.popoverService.hidePopover(a);else{const e=(this.data.mappingType!==fn.OPCUA?this.mappingForm.get("converter").get(this.converterType):this.mappingForm).get(n),t={keys:e.value,keysType:n,rawData:this.mappingForm.get("converter.type")?.value===wn.BYTES,panelTitle:Mn.get(n),addKeyTitle:En.get(n),deleteKeyTitle:qn.get(n),noKeysText:Dn.get(n)};this.data.mappingType===fn.OPCUA&&(t.valueTypeKeys=Object.values(Sn),t.valueTypeEnum=Sn,t.valueTypes=Ln),this.keysPopupClosed=!1;const o=this.popoverService.displayPopover(a,this.renderer,this.viewContainerRef,ao,"leftBottom",!1,null,t,{},{},{},!0);o.tbComponentRef.instance.popover=o,o.tbComponentRef.instance.keysDataApplied.pipe(Ne(this.destroy$)).subscribe((t=>{o.hide(),e.patchValue(t),e.markAsDirty()})),o.tbHideStart.pipe(Ne(this.destroy$)).subscribe((()=>{this.keysPopupClosed=!0}))}}prepareMappingData(){const e=this.mappingForm.value;switch(this.data.mappingType){case fn.DATA:const{converter:t,topicFilter:n,subscriptionQos:a}=e;return{topicFilter:n,subscriptionQos:a,converter:{type:t.type,...t[t.type]}};case fn.REQUESTS:return{requestType:e.requestType,requestValue:e.requestValue[e.requestType]};default:return e}}getFormValueData(){if(this.data.value&&Object.keys(this.data.value).length)switch(this.data.mappingType){case fn.DATA:const{converter:e,topicFilter:t,subscriptionQos:n}=this.data.value;return{topicFilter:t,subscriptionQos:n,converter:{type:e.type,[e.type]:{...e}}};case fn.REQUESTS:return{requestType:this.data.value.requestType,requestValue:{[this.data.value.requestType]:this.data.value.requestValue}};default:return this.data.value}}createDataMappingForm(){this.mappingForm.addControl("topicFilter",this.fb.control("",[ue.required,ue.pattern(kt)])),this.mappingForm.addControl("subscriptionQos",this.fb.control(0)),this.mappingForm.addControl("converter",this.fb.group({type:[wn.JSON,[]],json:this.fb.group({deviceInfo:[{},[]],attributes:[[],[]],timeseries:[[],[]]}),bytes:this.fb.group({deviceInfo:[{},[]],attributes:[[],[]],timeseries:[[],[]]}),custom:this.fb.group({extension:["",[ue.required,ue.pattern(kt)]],extensionConfig:[{},[]]})})),this.mappingForm.patchValue(this.getFormValueData()),this.mappingForm.get("converter.type").valueChanges.pipe(Re(this.mappingForm.get("converter.type").value),Ne(this.destroy$)).subscribe((e=>{const t=this.mappingForm.get("converter");t.get("json").disable({emitEvent:!1}),t.get("bytes").disable({emitEvent:!1}),t.get("custom").disable({emitEvent:!1}),t.get(e).enable({emitEvent:!1})}))}createRequestMappingForm(){this.mappingForm.addControl("requestType",this.fb.control(In.CONNECT_REQUEST,[])),this.mappingForm.addControl("requestValue",this.fb.group({connectRequests:this.fb.group({topicFilter:["",[ue.required,ue.pattern(kt)]],deviceInfo:[{},[]]}),disconnectRequests:this.fb.group({topicFilter:["",[ue.required,ue.pattern(kt)]],deviceInfo:[{},[]]}),attributeRequests:this.fb.group({topicFilter:["",[ue.required,ue.pattern(kt)]],deviceInfo:this.fb.group({deviceNameExpressionSource:[Tn.MSG,[]],deviceNameExpression:["",[ue.required]]}),attributeNameExpressionSource:[Tn.MSG,[]],attributeNameExpression:["",[ue.required,ue.pattern(kt)]],topicExpression:["",[ue.required,ue.pattern(kt)]],valueExpression:["",[ue.required,ue.pattern(kt)]],retain:[!1,[]]}),attributeUpdates:this.fb.group({deviceNameFilter:["",[ue.required,ue.pattern(kt)]],attributeFilter:["",[ue.required,ue.pattern(kt)]],topicExpression:["",[ue.required,ue.pattern(kt)]],valueExpression:["",[ue.required,ue.pattern(kt)]],retain:[!0,[]]}),serverSideRpc:this.fb.group({type:[Pn.TWO_WAY,[]],deviceNameFilter:["",[ue.required,ue.pattern(kt)]],methodFilter:["",[ue.required,ue.pattern(kt)]],requestTopicExpression:["",[ue.required,ue.pattern(kt)]],responseTopicExpression:["",[ue.required,ue.pattern(kt)]],valueExpression:["",[ue.required,ue.pattern(kt)]],responseTopicQoS:[0,[]],responseTimeout:[1e4,[ue.required,ue.min(1)]]})})),this.mappingForm.get("requestType").valueChanges.pipe(Re(this.mappingForm.get("requestType").value),Ne(this.destroy$)).subscribe((e=>{const t=this.mappingForm.get("requestValue");t.get("connectRequests").disable({emitEvent:!1}),t.get("disconnectRequests").disable({emitEvent:!1}),t.get("attributeRequests").disable({emitEvent:!1}),t.get("attributeUpdates").disable({emitEvent:!1}),t.get("serverSideRpc").disable({emitEvent:!1}),t.get(e).enable()})),this.mappingForm.get("requestValue.serverSideRpc.type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{const t=this.mappingForm.get("requestValue.serverSideRpc");e===Pn.ONE_WAY?(t.get("responseTopicExpression").disable({emitEvent:!1}),t.get("responseTopicQoS").disable({emitEvent:!1}),t.get("responseTimeout").disable({emitEvent:!1})):(t.get("responseTopicExpression").enable({emitEvent:!1}),t.get("responseTopicQoS").enable({emitEvent:!1}),t.get("responseTimeout").enable({emitEvent:!1}))})),this.mappingForm.patchValue(this.getFormValueData())}createOPCUAMappingForm(){this.mappingForm=this.fb.group({deviceNodeSource:[Sn.PATH,[]],deviceNodePattern:["",[ue.required]],deviceInfo:[{},[]],attributes:[[],[]],timeseries:[[],[]],rpc_methods:[[],[]],attributes_updates:[[],[]]}),this.mappingForm.patchValue(this.getFormValueData())}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:io,deps:[{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef},{token:me.FormBuilder},{token:ft.TbPopoverService},{token:t.Renderer2},{token:t.ViewContainerRef},{token:Y.TranslateService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:io,selector:"tb-mapping-dialog",usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<div [formGroup]="mappingForm" class="key-mapping">\n  <mat-toolbar color="primary">\n    <h2>{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="HelpLinkByMappingTypeMap.get(this.data.mappingType)"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content>\n    <div class="tb-form-panel no-border no-padding" fxLayout="column">\n      <div class="tb-form-hint tb-primary-fill">\n        {{ MappingHintTranslationsMap.get(this.data?.mappingType) | translate }}\n      </div>\n      <ng-container [ngSwitch]="data.mappingType">\n        <ng-template [ngSwitchCase]="MappingType.DATA">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="topicFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.topic-required\') | translate"\n                          *ngIf="mappingForm.get(\'topicFilter\').hasError(\'required\') &&\n                                 mappingForm.get(\'topicFilter\').touched;"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n                <div matSuffix\n                     class="see-example"\n                     [tb-help-popup]="\'widget/lib/gateway/topic-filter_fn\'"\n                     tb-help-popup-placement="left"\n                     [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.response-topic-Qos-hint\' | translate }}">\n              {{ \'gateway.mqtt-qos\' | translate }}\n            </div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="subscriptionQos">\n                  <mat-option *ngFor="let type of qualityTypes" [value]="type">\n                    {{ QualityTranslationsMap.get(type) | translate }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <ng-container formGroupName="converter">\n            <div class="tb-form-row space-between tb-flex">\n              <div class="fixed-title-width" translate>gateway.payload-type</div>\n              <tb-toggle-select formControlName="type" appearance="fill">\n                <tb-toggle-option *ngFor="let type of convertorTypes" [value]="type">\n                  {{ ConvertorTypeTranslationsMap.get(type) | translate }}\n                </tb-toggle-option>\n              </tb-toggle-select>\n            </div>\n            <div class="tb-form-panel stroked">\n              <div class="tb-form-panel-title" translate>gateway.data-conversion</div>\n              <div class="tb-form-hint tb-primary-fill">\n                {{ DataConversionTranslationsMap.get(converterType) | translate }}\n              </div>\n              <ng-container [formGroupName]="converterType" [ngSwitch]="converterType">\n                <ng-template [ngSwitchCase]="ConvertorTypeEnum.JSON">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <ng-template [ngSwitchCase]="ConvertorTypeEnum.BYTES">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL"\n                                        [sourceTypes]="[sourceTypesEnum.MSG, sourceTypesEnum.CONST]" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <div class="tb-form-panel no-border no-padding"\n                     *ngIf="converterType === ConvertorTypeEnum.BYTES || converterType === ConvertorTypeEnum.JSON">\n                  <div class="tb-form-row space-between tb-flex">\n                    <div class="fixed-title-width" translate>gateway.attributes</div>\n                    <div class="tb-flex ellipsis-chips-container">\n                      <mat-chip-listbox [tb-ellipsis-chip-list]="converterAttributes" class="tb-flex">\n                          <mat-chip *ngFor="let attribute of converterAttributes">\n                            {{ attribute }}\n                          </mat-chip>\n                          <mat-chip class="mat-mdc-chip ellipsis-chip">\n                            <label class="ellipsis-text"></label>\n                          </mat-chip>\n                      </mat-chip-listbox>\n                      <button type="button"\n                              mat-icon-button\n                              color="primary"\n                              matTooltip="{{ \'action.edit\' | translate }}"\n                              matTooltipPosition="above"\n                              #attributesButton\n                              (click)="manageKeys($event, attributesButton, MappingKeysType.ATTRIBUTES)">\n                        <tb-icon matButtonIcon>edit</tb-icon>\n                      </button>\n                    </div>\n                  </div>\n                  <div class="tb-form-row space-between tb-flex">\n                    <div class="fixed-title-width" translate>gateway.timeseries</div>\n                    <div class="tb-flex ellipsis-chips-container">\n                      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="converterTelemetry">\n                        <mat-chip *ngFor="let telemetry of converterTelemetry">\n                          {{ telemetry }}\n                        </mat-chip>\n                        <mat-chip class="mat-mdc-chip ellipsis-chip">\n                          <label class="ellipsis-text"></label>\n                        </mat-chip>\n                      </mat-chip-listbox>\n                      <button type="button"\n                              mat-icon-button\n                              color="primary"\n                              matTooltip="{{ \'action.edit\' | translate }}"\n                              matTooltipPosition="above"\n                              #telemetryButton\n                              (click)="manageKeys($event, telemetryButton, MappingKeysType.TIMESERIES)">\n                        <tb-icon matButtonIcon>edit</tb-icon>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n                <div class="tb-form-panel no-border no-padding" *ngIf="converterType === ConvertorTypeEnum.CUSTOM">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required"\n                         tb-hint-tooltip-icon="{{ \'gateway.extension-hint\' | translate }}">\n                      {{ \'gateway.extension\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="extension" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.extension-required\') | translate"\n                                  *ngIf="mappingForm.get(\'converter.custom.extension\').hasError(\'required\') &&\n                                         mappingForm.get(\'converter.custom.extension\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row space-between same-padding tb-flex column">\n                    <div class="tb-form-panel-title" translate>gateway.extension-configuration</div>\n                    <div class="tb-form-hint tb-primary-fill">{{ \'gateway.extension-configuration-hint\' | translate }}</div>\n                    <div class="tb-form-row space-between tb-flex">\n                      <div class="fixed-title-width" translate>gateway.keys</div>\n                      <div class="tb-flex ellipsis-chips-container">\n                        <mat-chip-listbox [tb-ellipsis-chip-list]="customKeys" class="tb-flex">\n                          <mat-chip *ngFor="let telemetry of customKeys">\n                            {{ telemetry }}\n                          </mat-chip>\n                          <mat-chip class="mat-mdc-chip ellipsis-chip">\n                            <label class="ellipsis-text"></label>\n                          </mat-chip>\n                        </mat-chip-listbox>\n                        <button type="button"\n                                mat-icon-button\n                                color="primary"\n                                matTooltip="{{ \'action.edit\' | translate }}"\n                                matTooltipPosition="above"\n                                #keysButton\n                                (click)="manageKeys($event, keysButton, MappingKeysType.CUSTOM)">\n                          <tb-icon matButtonIcon>edit</tb-icon>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-template [ngSwitchCase]="MappingType.REQUESTS">\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.request-type</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <mat-select formControlName="requestType">\n                    <mat-option *ngFor="let type of requestTypes" [value]="type">\n                      {{ RequestTypesTranslationsMap.get(type) | translate }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            </div>\n            <ng-container formGroupName="requestValue">\n              <ng-container [formGroup]="mappingForm.get(\'requestValue\').get(requestMappingType)" [ngSwitch]="requestMappingType">\n                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center"\n                     *ngIf="requestMappingType === RequestTypeEnum.ATTRIBUTE_REQUEST ||\n                            requestMappingType === RequestTypeEnum.CONNECT_REQUEST ||\n                            requestMappingType === RequestTypeEnum.DISCONNECT_REQUEST">\n                  <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>\n                  <div class="tb-flex no-gap">\n                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                      <input matInput name="value" [formControl]="mappingForm.get(\'requestValue\').get(requestMappingType).get(\'topicFilter\')"\n                             placeholder="{{ \'gateway.set\' | translate }}"/>\n                      <mat-icon matSuffix\n                                matTooltipPosition="above"\n                                matTooltipClass="tb-error-tooltip"\n                                [matTooltip]="(\'gateway.topic-required\') | translate"\n                                *ngIf="mappingForm.get(\'requestValue\').get(requestMappingType).get(\'topicFilter\').hasError(\'required\') &&\n                                       mappingForm.get(\'requestValue\').get(requestMappingType).get(\'topicFilter\').touched"\n                                class="tb-error">\n                        warning\n                      </mat-icon>\n                      <div matSuffix\n                           class="see-example"\n                           [tb-help-popup]="\'widget/lib/gateway/topic-filter_fn\'"\n                           tb-help-popup-placement="left"\n                           [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                      </div>\n                    </mat-form-field>\n                  </div>\n                </div>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.CONNECT_REQUEST">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.DISCONNECT_REQUEST">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.PARTIAL" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_REQUEST">\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title tb-required" translate>gateway.from-device-request-settings</div>\n                    <div class="tb-form-hint tb-primary-fill" translate>\n                      gateway.from-device-request-settings-hint\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" formGroupName="deviceInfo">\n                      <div class="fixed-title-width tb-flex no-flex align-center" translate>\n                        <div class="tb-required" translate>gateway.device-info.device-name-expression</div>\n                      </div>\n                      <div class="tb-flex">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <mat-select formControlName="deviceNameExpressionSource">\n                            <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                              {{ SourceTypeTranslationsMap.get(type) | translate }}\n                            </mat-option>\n                          </mat-select>\n                        </mat-form-field>\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                            <mat-icon matSuffix\n                                      matTooltipPosition="above"\n                                      matTooltipClass="tb-error-tooltip"\n                                      [matTooltip]="(\'gateway.device-info.device-name-expression-required\') | translate"\n                                      *ngIf="(mappingForm.get(\'requestValue.attributeRequests.deviceInfo.deviceNameExpression\').hasError(\'required\') &&\n                                             mappingForm.get(\'requestValue.attributeRequests.deviceInfo.deviceNameExpression\').touched)"\n                                      class="tb-error">\n                              warning\n                            </mat-icon>\n                            <div matSuffix\n                                 class="see-example"\n                                 [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                                 tb-help-popup-placement="left"\n                                 [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                            </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.attribute-name-expression</div>\n                      <div class="tb-flex">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <mat-select formControlName="attributeNameExpressionSource">\n                            <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                              {{ SourceTypeTranslationsMap.get(type) | translate }}\n                            </mat-option>\n                          </mat-select>\n                        </mat-form-field>\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="attributeNameExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.attribute-name-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.attributeRequests.attributeNameExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeRequests.attributeNameExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </div>\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title tb-required" translate>gateway.to-device-response-settings</div>\n                    <div class="tb-form-hint tb-primary-fill" translate>\n                      gateway.to-device-response-settings-hint\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="valueExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.response-value-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.attributeRequests.valueExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeRequests.valueExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="topicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.response-topic-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.attributeRequests.topicExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeRequests.topicExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <mat-slide-toggle class="mat-slide" formControlName="retain">\n                        <mat-label tb-hint-tooltip-icon="{{ \'gateway.retain-hint\' | translate }}">\n                          {{ \'gateway.retain\' | translate }}\n                        </mat-label>\n                      </mat-slide-toggle>\n                    </div>\n                  </div>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_UPDATE">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required"\n                         tb-hint-tooltip-icon="{{ \'gateway.device-name-filter-hint\' | translate }}">\n                      {{ \'gateway.device-name-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.device-name-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.deviceNameFilter\').hasError(\'required\') &&\n                                         mappingForm.get(\'requestValue.attributeUpdates.deviceNameFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.attribute-filter-hint\' | translate }}">\n                      {{ \'gateway.attribute-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="attributeFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.attribute-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.attributeFilter\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeUpdates.attributeFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="valueExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.response-value-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.valueExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeUpdates.valueExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="topicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.response-topic-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.topicExpression\').hasError(\'required\') &&\n                                         mappingForm.get(\'requestValue.attributeUpdates.topicExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="retain">\n                      <mat-label tb-hint-tooltip-icon="{{ \'gateway.retain-hint\' | translate }}">\n                        {{ \'gateway.retain\' | translate }}\n                      </mat-label>\n                    </mat-slide-toggle>\n                  </div>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.SERVER_SIDE_RPC">\n                  <div class="tb-flex row center align-center no-gap fill-width">\n                    <tb-toggle-select formControlName="type" appearance="fill">\n                      <tb-toggle-option [value]="ServerSideRPCType.TWO_WAY">\n                        {{ \'gateway.with-response\' | translate }}\n                      </tb-toggle-option>\n                      <tb-toggle-option [value]="ServerSideRPCType.ONE_WAY">\n                        {{ \'gateway.without-response\' | translate }}\n                      </tb-toggle-option>\n                    </tb-toggle-select>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.device-name-filter-hint\' | translate }}">\n                      {{ \'gateway.device-name-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.device-name-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.deviceNameFilter\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.deviceNameFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.method-filter-hint\' | translate }}">\n                      {{ \'gateway.method-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="methodFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.method-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.methodFilter\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.methodFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.request-topic-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="requestTopicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.request-topic-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.requestTopicExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.requestTopicExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.value-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="valueExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.value-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.valueExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.valueExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <ng-container *ngIf="mappingForm.get(\'requestValue.serverSideRpc.type\').value === ServerSideRPCType.TWO_WAY">\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="responseTopicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.response-topic-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.serverSideRpc.responseTopicExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.responseTopicExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.response-topic-Qos-hint\' | translate }}">\n                        {{ \'gateway.response-topic-Qos\' | translate }}\n                      </div>\n                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select formControlName="responseTopicQoS">\n                          <mat-option *ngFor="let type of qualityTypes" [value]="type">\n                            {{ QualityTranslationsMap.get(type) | translate }}\n                          </mat-option>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-timeout</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" type="number" min="1" formControlName="responseTimeout"\n                                 placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="responseTimeoutErrorTooltip"\n                                    *ngIf="(mappingForm.get(\'requestValue.serverSideRpc.responseTimeout\').hasError(\'required\') ||\n                                            mappingForm.get(\'requestValue.serverSideRpc.responseTimeout\').hasError(\'min\')) &&\n                                            mappingForm.get(\'requestValue.serverSideRpc.responseTimeout\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </ng-container>\n                </ng-template>\n              </ng-container>\n            </ng-container>\n        </ng-template>\n        <ng-template [ngSwitchCase]="MappingType.OPCUA">\n          <div class="tb-form-row column-xs" fxLayoutAlign="center">\n            <div class="tb-flex no-flex align-center" translate>\n              <div class="tb-required" tb-hint-tooltip-icon="{{ \'gateway.device-node-hint\' | translate }}">\n                {{ \'gateway.device-node\' | translate }}\n              </div>\n            </div>\n            <div class="tb-flex device-config">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="deviceNodeSource">\n                  <mat-option *ngFor="let type of [OPCUaSourceTypesEnum.PATH, OPCUaSourceTypesEnum.IDENTIFIER]" [value]="type">\n                    {{ SourceTypeTranslationsMap.get(type) | translate }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field class="tb-flex no-gap device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="deviceNodePattern" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.device-node-required\') | translate"\n                          *ngIf="(mappingForm.get(\'deviceNodePattern\').hasError(\'required\') &&\n                                  mappingForm.get(\'deviceNodePattern\').touched)"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n                <div matSuffix\n                     class="see-example"\n                     [tb-help-popup]="\'device-node\' | getGatewayHelpLink: mappingForm.get(\'deviceNodeSource\').value"\n                     tb-help-popup-placement="left"\n                     [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n          <tb-device-info-table formControlName="deviceInfo" [sourceTypes]="OPCUaSourceTypes" [deviceInfoType]="DeviceInfoType.FULL" required="true">\n          </tb-device-info-table>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.attributes</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox [tb-ellipsis-chip-list]="opcAttributes" class="tb-flex">\n                <mat-chip *ngFor="let attribute of opcAttributes">\n                  {{ attribute }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #opcAttributesButton\n                      (click)="manageKeys($event, opcAttributesButton, MappingKeysType.ATTRIBUTES)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.timeseries</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="opcTelemetry">\n                <mat-chip *ngFor="let telemetry of opcTelemetry">\n                  {{ telemetry }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #opcTelemetryButton\n                      (click)="manageKeys($event, opcTelemetryButton, MappingKeysType.TIMESERIES)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.attribute-updates</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox [tb-ellipsis-chip-list]="opcAttributesUpdates" class="tb-flex">\n                <mat-chip *ngFor="let attribute of opcAttributesUpdates">\n                  {{ attribute }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #attributesUpdatesButton\n                      (click)="manageKeys($event, attributesUpdatesButton, MappingKeysType.ATTRIBUTES_UPDATES)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.rpc-methods</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox [tb-ellipsis-chip-list]="opcRpcMethods" class="tb-flex">\n                <mat-chip *ngFor="let attribute of opcRpcMethods">\n                  {{ attribute }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #rpcMethodsButton\n                      (click)="manageKeys($event, rpcMethodsButton, MappingKeysType.RPC_METHODS)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="mappingForm.invalid || !mappingForm.dirty || !keysPopupClosed">\n      {{ this.data.buttonTitle | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{display:grid;height:100%}:host .key-mapping{max-width:900px;display:flex;flex-direction:column}:host .key-mapping .mat-toolbar{min-height:64px}:host .key-mapping tb-toggle-select{padding:4px 0}:host .mat-mdc-dialog-content{height:670px}:host .ellipsis-chips-container{max-width:70%}:host ::ng-deep .key-mapping .mat-mdc-chip-listbox .mdc-evolution-chip-set__chips{justify-content:flex-end;align-items:center;flex-wrap:nowrap}:host ::ng-deep .tb-form-row .fixed-title-width{min-width:40px;width:35%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .tb-form-row .mat-mdc-form-field{width:0}:host ::ng-deep .see-example{width:32px;height:32px;margin:4px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .device-config{gap:12px;padding-left:10px;padding-right:10px}:host ::ng-deep .device-node-pattern-field{flex-basis:3%}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"component",type:dt.HelpComponent,selector:"[tb-help]",inputs:["tb-help"]},{kind:"component",type:gt.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:Je.MatDialogActions,selector:"[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",inputs:["align"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"component",type:yt.MatChip,selector:"mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]",inputs:["role","id","aria-label","aria-description","value","color","removable","highlighted","disableRipple","disabled"],outputs:["removed","destroyed"],exportAs:["matChip"]},{kind:"component",type:yt.MatChipListbox,selector:"mat-chip-listbox",inputs:["multiple","aria-orientation","selectable","compareWith","required","hideSingleSelectionIndicator","value"],outputs:["change"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:me.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:bt.TbIconComponent,selector:"tb-icon",inputs:["color"],exportAs:["tbIcon"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"directive",type:ka,selector:"[tb-ellipsis-chip-list]",inputs:["tb-ellipsis-chip-list"]},{kind:"component",type:oo,selector:"tb-device-info-table",inputs:["useSource","required","sourceTypes","deviceInfoType"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"pipe",type:Ta,name:"getGatewayHelpLink"}]})}}e("MappingDialogComponent",io),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:io,decorators:[{type:n,args:[{selector:"tb-mapping-dialog",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<div [formGroup]="mappingForm" class="key-mapping">\n  <mat-toolbar color="primary">\n    <h2>{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="HelpLinkByMappingTypeMap.get(this.data.mappingType)"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content>\n    <div class="tb-form-panel no-border no-padding" fxLayout="column">\n      <div class="tb-form-hint tb-primary-fill">\n        {{ MappingHintTranslationsMap.get(this.data?.mappingType) | translate }}\n      </div>\n      <ng-container [ngSwitch]="data.mappingType">\n        <ng-template [ngSwitchCase]="MappingType.DATA">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="topicFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.topic-required\') | translate"\n                          *ngIf="mappingForm.get(\'topicFilter\').hasError(\'required\') &&\n                                 mappingForm.get(\'topicFilter\').touched;"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n                <div matSuffix\n                     class="see-example"\n                     [tb-help-popup]="\'widget/lib/gateway/topic-filter_fn\'"\n                     tb-help-popup-placement="left"\n                     [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.response-topic-Qos-hint\' | translate }}">\n              {{ \'gateway.mqtt-qos\' | translate }}\n            </div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="subscriptionQos">\n                  <mat-option *ngFor="let type of qualityTypes" [value]="type">\n                    {{ QualityTranslationsMap.get(type) | translate }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <ng-container formGroupName="converter">\n            <div class="tb-form-row space-between tb-flex">\n              <div class="fixed-title-width" translate>gateway.payload-type</div>\n              <tb-toggle-select formControlName="type" appearance="fill">\n                <tb-toggle-option *ngFor="let type of convertorTypes" [value]="type">\n                  {{ ConvertorTypeTranslationsMap.get(type) | translate }}\n                </tb-toggle-option>\n              </tb-toggle-select>\n            </div>\n            <div class="tb-form-panel stroked">\n              <div class="tb-form-panel-title" translate>gateway.data-conversion</div>\n              <div class="tb-form-hint tb-primary-fill">\n                {{ DataConversionTranslationsMap.get(converterType) | translate }}\n              </div>\n              <ng-container [formGroupName]="converterType" [ngSwitch]="converterType">\n                <ng-template [ngSwitchCase]="ConvertorTypeEnum.JSON">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <ng-template [ngSwitchCase]="ConvertorTypeEnum.BYTES">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL"\n                                        [sourceTypes]="[sourceTypesEnum.MSG, sourceTypesEnum.CONST]" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <div class="tb-form-panel no-border no-padding"\n                     *ngIf="converterType === ConvertorTypeEnum.BYTES || converterType === ConvertorTypeEnum.JSON">\n                  <div class="tb-form-row space-between tb-flex">\n                    <div class="fixed-title-width" translate>gateway.attributes</div>\n                    <div class="tb-flex ellipsis-chips-container">\n                      <mat-chip-listbox [tb-ellipsis-chip-list]="converterAttributes" class="tb-flex">\n                          <mat-chip *ngFor="let attribute of converterAttributes">\n                            {{ attribute }}\n                          </mat-chip>\n                          <mat-chip class="mat-mdc-chip ellipsis-chip">\n                            <label class="ellipsis-text"></label>\n                          </mat-chip>\n                      </mat-chip-listbox>\n                      <button type="button"\n                              mat-icon-button\n                              color="primary"\n                              matTooltip="{{ \'action.edit\' | translate }}"\n                              matTooltipPosition="above"\n                              #attributesButton\n                              (click)="manageKeys($event, attributesButton, MappingKeysType.ATTRIBUTES)">\n                        <tb-icon matButtonIcon>edit</tb-icon>\n                      </button>\n                    </div>\n                  </div>\n                  <div class="tb-form-row space-between tb-flex">\n                    <div class="fixed-title-width" translate>gateway.timeseries</div>\n                    <div class="tb-flex ellipsis-chips-container">\n                      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="converterTelemetry">\n                        <mat-chip *ngFor="let telemetry of converterTelemetry">\n                          {{ telemetry }}\n                        </mat-chip>\n                        <mat-chip class="mat-mdc-chip ellipsis-chip">\n                          <label class="ellipsis-text"></label>\n                        </mat-chip>\n                      </mat-chip-listbox>\n                      <button type="button"\n                              mat-icon-button\n                              color="primary"\n                              matTooltip="{{ \'action.edit\' | translate }}"\n                              matTooltipPosition="above"\n                              #telemetryButton\n                              (click)="manageKeys($event, telemetryButton, MappingKeysType.TIMESERIES)">\n                        <tb-icon matButtonIcon>edit</tb-icon>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n                <div class="tb-form-panel no-border no-padding" *ngIf="converterType === ConvertorTypeEnum.CUSTOM">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required"\n                         tb-hint-tooltip-icon="{{ \'gateway.extension-hint\' | translate }}">\n                      {{ \'gateway.extension\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="extension" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.extension-required\') | translate"\n                                  *ngIf="mappingForm.get(\'converter.custom.extension\').hasError(\'required\') &&\n                                         mappingForm.get(\'converter.custom.extension\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row space-between same-padding tb-flex column">\n                    <div class="tb-form-panel-title" translate>gateway.extension-configuration</div>\n                    <div class="tb-form-hint tb-primary-fill">{{ \'gateway.extension-configuration-hint\' | translate }}</div>\n                    <div class="tb-form-row space-between tb-flex">\n                      <div class="fixed-title-width" translate>gateway.keys</div>\n                      <div class="tb-flex ellipsis-chips-container">\n                        <mat-chip-listbox [tb-ellipsis-chip-list]="customKeys" class="tb-flex">\n                          <mat-chip *ngFor="let telemetry of customKeys">\n                            {{ telemetry }}\n                          </mat-chip>\n                          <mat-chip class="mat-mdc-chip ellipsis-chip">\n                            <label class="ellipsis-text"></label>\n                          </mat-chip>\n                        </mat-chip-listbox>\n                        <button type="button"\n                                mat-icon-button\n                                color="primary"\n                                matTooltip="{{ \'action.edit\' | translate }}"\n                                matTooltipPosition="above"\n                                #keysButton\n                                (click)="manageKeys($event, keysButton, MappingKeysType.CUSTOM)">\n                          <tb-icon matButtonIcon>edit</tb-icon>\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-template>\n        <ng-template [ngSwitchCase]="MappingType.REQUESTS">\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.request-type</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <mat-select formControlName="requestType">\n                    <mat-option *ngFor="let type of requestTypes" [value]="type">\n                      {{ RequestTypesTranslationsMap.get(type) | translate }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            </div>\n            <ng-container formGroupName="requestValue">\n              <ng-container [formGroup]="mappingForm.get(\'requestValue\').get(requestMappingType)" [ngSwitch]="requestMappingType">\n                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center"\n                     *ngIf="requestMappingType === RequestTypeEnum.ATTRIBUTE_REQUEST ||\n                            requestMappingType === RequestTypeEnum.CONNECT_REQUEST ||\n                            requestMappingType === RequestTypeEnum.DISCONNECT_REQUEST">\n                  <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>\n                  <div class="tb-flex no-gap">\n                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                      <input matInput name="value" [formControl]="mappingForm.get(\'requestValue\').get(requestMappingType).get(\'topicFilter\')"\n                             placeholder="{{ \'gateway.set\' | translate }}"/>\n                      <mat-icon matSuffix\n                                matTooltipPosition="above"\n                                matTooltipClass="tb-error-tooltip"\n                                [matTooltip]="(\'gateway.topic-required\') | translate"\n                                *ngIf="mappingForm.get(\'requestValue\').get(requestMappingType).get(\'topicFilter\').hasError(\'required\') &&\n                                       mappingForm.get(\'requestValue\').get(requestMappingType).get(\'topicFilter\').touched"\n                                class="tb-error">\n                        warning\n                      </mat-icon>\n                      <div matSuffix\n                           class="see-example"\n                           [tb-help-popup]="\'widget/lib/gateway/topic-filter_fn\'"\n                           tb-help-popup-placement="left"\n                           [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                      </div>\n                    </mat-form-field>\n                  </div>\n                </div>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.CONNECT_REQUEST">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.DISCONNECT_REQUEST">\n                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.PARTIAL" required="true">\n                  </tb-device-info-table>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_REQUEST">\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title tb-required" translate>gateway.from-device-request-settings</div>\n                    <div class="tb-form-hint tb-primary-fill" translate>\n                      gateway.from-device-request-settings-hint\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" formGroupName="deviceInfo">\n                      <div class="fixed-title-width tb-flex no-flex align-center" translate>\n                        <div class="tb-required" translate>gateway.device-info.device-name-expression</div>\n                      </div>\n                      <div class="tb-flex">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <mat-select formControlName="deviceNameExpressionSource">\n                            <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                              {{ SourceTypeTranslationsMap.get(type) | translate }}\n                            </mat-option>\n                          </mat-select>\n                        </mat-form-field>\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                            <mat-icon matSuffix\n                                      matTooltipPosition="above"\n                                      matTooltipClass="tb-error-tooltip"\n                                      [matTooltip]="(\'gateway.device-info.device-name-expression-required\') | translate"\n                                      *ngIf="(mappingForm.get(\'requestValue.attributeRequests.deviceInfo.deviceNameExpression\').hasError(\'required\') &&\n                                             mappingForm.get(\'requestValue.attributeRequests.deviceInfo.deviceNameExpression\').touched)"\n                                      class="tb-error">\n                              warning\n                            </mat-icon>\n                            <div matSuffix\n                                 class="see-example"\n                                 [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                                 tb-help-popup-placement="left"\n                                 [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                            </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.attribute-name-expression</div>\n                      <div class="tb-flex">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <mat-select formControlName="attributeNameExpressionSource">\n                            <mat-option *ngFor="let type of sourceTypes" [value]="type">\n                              {{ SourceTypeTranslationsMap.get(type) | translate }}\n                            </mat-option>\n                          </mat-select>\n                        </mat-form-field>\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="attributeNameExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.attribute-name-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.attributeRequests.attributeNameExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeRequests.attributeNameExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </div>\n                  <div class="tb-form-panel stroked">\n                    <div class="tb-form-panel-title tb-required" translate>gateway.to-device-response-settings</div>\n                    <div class="tb-form-hint tb-primary-fill" translate>\n                      gateway.to-device-response-settings-hint\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="valueExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.response-value-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.attributeRequests.valueExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeRequests.valueExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="topicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.response-topic-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.attributeRequests.topicExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeRequests.topicExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <mat-slide-toggle class="mat-slide" formControlName="retain">\n                        <mat-label tb-hint-tooltip-icon="{{ \'gateway.retain-hint\' | translate }}">\n                          {{ \'gateway.retain\' | translate }}\n                        </mat-label>\n                      </mat-slide-toggle>\n                    </div>\n                  </div>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_UPDATE">\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required"\n                         tb-hint-tooltip-icon="{{ \'gateway.device-name-filter-hint\' | translate }}">\n                      {{ \'gateway.device-name-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.device-name-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.deviceNameFilter\').hasError(\'required\') &&\n                                         mappingForm.get(\'requestValue.attributeUpdates.deviceNameFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.attribute-filter-hint\' | translate }}">\n                      {{ \'gateway.attribute-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="attributeFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.attribute-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.attributeFilter\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeUpdates.attributeFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="valueExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.response-value-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.valueExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.attributeUpdates.valueExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="topicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.response-topic-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.attributeUpdates.topicExpression\').hasError(\'required\') &&\n                                         mappingForm.get(\'requestValue.attributeUpdates.topicExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="retain">\n                      <mat-label tb-hint-tooltip-icon="{{ \'gateway.retain-hint\' | translate }}">\n                        {{ \'gateway.retain\' | translate }}\n                      </mat-label>\n                    </mat-slide-toggle>\n                  </div>\n                </ng-template>\n                <ng-template [ngSwitchCase]="RequestTypeEnum.SERVER_SIDE_RPC">\n                  <div class="tb-flex row center align-center no-gap fill-width">\n                    <tb-toggle-select formControlName="type" appearance="fill">\n                      <tb-toggle-option [value]="ServerSideRPCType.TWO_WAY">\n                        {{ \'gateway.with-response\' | translate }}\n                      </tb-toggle-option>\n                      <tb-toggle-option [value]="ServerSideRPCType.ONE_WAY">\n                        {{ \'gateway.without-response\' | translate }}\n                      </tb-toggle-option>\n                    </tb-toggle-select>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.device-name-filter-hint\' | translate }}">\n                      {{ \'gateway.device-name-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.device-name-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.deviceNameFilter\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.deviceNameFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.method-filter-hint\' | translate }}">\n                      {{ \'gateway.method-filter\' | translate }}\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="methodFilter" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.method-filter-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.methodFilter\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.methodFilter\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.request-topic-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="requestTopicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.request-topic-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.requestTopicExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.requestTopicExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.value-expression</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="valueExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.value-expression-required\') | translate"\n                                  *ngIf="mappingForm.get(\'requestValue.serverSideRpc.valueExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.valueExpression\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                        <div matSuffix\n                             class="see-example"\n                             [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                             tb-help-popup-placement="left"\n                             [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                        </div>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <ng-container *ngIf="mappingForm.get(\'requestValue.serverSideRpc.type\').value === ServerSideRPCType.TWO_WAY">\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" formControlName="responseTopicExpression" placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.response-topic-expression-required\') | translate"\n                                    *ngIf="mappingForm.get(\'requestValue.serverSideRpc.responseTopicExpression\').hasError(\'required\') &&\n                                           mappingForm.get(\'requestValue.serverSideRpc.responseTopicExpression\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                          <div matSuffix\n                               class="see-example"\n                               [tb-help-popup]="\'widget/lib/gateway/expressions_fn\'"\n                               tb-help-popup-placement="left"\n                               [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                          </div>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.response-topic-Qos-hint\' | translate }}">\n                        {{ \'gateway.response-topic-Qos\' | translate }}\n                      </div>\n                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select formControlName="responseTopicQoS">\n                          <mat-option *ngFor="let type of qualityTypes" [value]="type">\n                            {{ QualityTranslationsMap.get(type) | translate }}\n                          </mat-option>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                      <div class="fixed-title-width tb-required" translate>gateway.response-timeout</div>\n                      <div class="tb-flex no-gap">\n                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                          <input matInput name="value" type="number" min="1" formControlName="responseTimeout"\n                                 placeholder="{{ \'gateway.set\' | translate }}"/>\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="responseTimeoutErrorTooltip"\n                                    *ngIf="(mappingForm.get(\'requestValue.serverSideRpc.responseTimeout\').hasError(\'required\') ||\n                                            mappingForm.get(\'requestValue.serverSideRpc.responseTimeout\').hasError(\'min\')) &&\n                                            mappingForm.get(\'requestValue.serverSideRpc.responseTimeout\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </ng-container>\n                </ng-template>\n              </ng-container>\n            </ng-container>\n        </ng-template>\n        <ng-template [ngSwitchCase]="MappingType.OPCUA">\n          <div class="tb-form-row column-xs" fxLayoutAlign="center">\n            <div class="tb-flex no-flex align-center" translate>\n              <div class="tb-required" tb-hint-tooltip-icon="{{ \'gateway.device-node-hint\' | translate }}">\n                {{ \'gateway.device-node\' | translate }}\n              </div>\n            </div>\n            <div class="tb-flex device-config">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="deviceNodeSource">\n                  <mat-option *ngFor="let type of [OPCUaSourceTypesEnum.PATH, OPCUaSourceTypesEnum.IDENTIFIER]" [value]="type">\n                    {{ SourceTypeTranslationsMap.get(type) | translate }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field class="tb-flex no-gap device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="deviceNodePattern" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.device-node-required\') | translate"\n                          *ngIf="(mappingForm.get(\'deviceNodePattern\').hasError(\'required\') &&\n                                  mappingForm.get(\'deviceNodePattern\').touched)"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n                <div matSuffix\n                     class="see-example"\n                     [tb-help-popup]="\'device-node\' | getGatewayHelpLink: mappingForm.get(\'deviceNodeSource\').value"\n                     tb-help-popup-placement="left"\n                     [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n          <tb-device-info-table formControlName="deviceInfo" [sourceTypes]="OPCUaSourceTypes" [deviceInfoType]="DeviceInfoType.FULL" required="true">\n          </tb-device-info-table>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.attributes</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox [tb-ellipsis-chip-list]="opcAttributes" class="tb-flex">\n                <mat-chip *ngFor="let attribute of opcAttributes">\n                  {{ attribute }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #opcAttributesButton\n                      (click)="manageKeys($event, opcAttributesButton, MappingKeysType.ATTRIBUTES)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.timeseries</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="opcTelemetry">\n                <mat-chip *ngFor="let telemetry of opcTelemetry">\n                  {{ telemetry }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #opcTelemetryButton\n                      (click)="manageKeys($event, opcTelemetryButton, MappingKeysType.TIMESERIES)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.attribute-updates</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox [tb-ellipsis-chip-list]="opcAttributesUpdates" class="tb-flex">\n                <mat-chip *ngFor="let attribute of opcAttributesUpdates">\n                  {{ attribute }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #attributesUpdatesButton\n                      (click)="manageKeys($event, attributesUpdatesButton, MappingKeysType.ATTRIBUTES_UPDATES)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n          <div class="tb-form-row space-between tb-flex">\n            <div class="fixed-title-width" translate>gateway.rpc-methods</div>\n            <div class="tb-flex ellipsis-chips-container">\n              <mat-chip-listbox [tb-ellipsis-chip-list]="opcRpcMethods" class="tb-flex">\n                <mat-chip *ngFor="let attribute of opcRpcMethods">\n                  {{ attribute }}\n                </mat-chip>\n                <mat-chip class="mat-mdc-chip ellipsis-chip">\n                  <label class="ellipsis-text"></label>\n                </mat-chip>\n              </mat-chip-listbox>\n              <button type="button"\n                      mat-icon-button\n                      color="primary"\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      #rpcMethodsButton\n                      (click)="manageKeys($event, rpcMethodsButton, MappingKeysType.RPC_METHODS)">\n                <tb-icon matButtonIcon>edit</tb-icon>\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="mappingForm.invalid || !mappingForm.dirty || !keysPopupClosed">\n      {{ this.data.buttonTitle | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{display:grid;height:100%}:host .key-mapping{max-width:900px;display:flex;flex-direction:column}:host .key-mapping .mat-toolbar{min-height:64px}:host .key-mapping tb-toggle-select{padding:4px 0}:host .mat-mdc-dialog-content{height:670px}:host .ellipsis-chips-container{max-width:70%}:host ::ng-deep .key-mapping .mat-mdc-chip-listbox .mdc-evolution-chip-set__chips{justify-content:flex-end;align-items:center;flex-wrap:nowrap}:host ::ng-deep .tb-form-row .fixed-title-width{min-width:40px;width:35%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .tb-form-row .mat-mdc-form-field{width:0}:host ::ng-deep .see-example{width:32px;height:32px;margin:4px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .device-config{gap:12px;padding-left:10px;padding-right:10px}:host ::ng-deep .device-node-pattern-field{flex-basis:3%}\n']}]}],ctorParameters:()=>[{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef},{type:me.FormBuilder},{type:ft.TbPopoverService},{type:t.Renderer2},{type:t.ViewContainerRef},{type:Y.TranslateService}]});class ro{set mappingType(e){this.mappingTypeValue!==e&&(this.mappingTypeValue=e)}get mappingType(){return this.mappingTypeValue}constructor(e,t,n,a){this.translate=e,this.dialog=t,this.dialogService=n,this.fb=a,this.required=!1,this.mappingTypeTranslationsMap=yn,this.mappingTypeEnum=fn,this.displayedColumns=[],this.mappingColumns=[],this.textSearchMode=!1,this.hidePageSize=!1,this.activeValue=!1,this.dirtyValue=!1,this.textSearch=this.fb.control("",{nonNullable:!0}),this.onChange=()=>{},this.onTouched=()=>{},this.destroy$=new Se,this.mappingFormGroup=this.fb.array([]),this.dirtyValue=!this.activeValue,this.dataSource=new so}ngOnInit(){this.setMappingColumns(),this.displayedColumns.push(...this.mappingColumns.map((e=>e.def)),"actions"),this.mappingFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateTableData(e),this.onChange(e),this.onTouched()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}ngAfterViewInit(){this.textSearch.valueChanges.pipe(Ve(150),Be(((e,t)=>(e??"")===t.trim())),Ne(this.destroy$)).subscribe((e=>{const t=e.trim();this.updateTableData(this.mappingFormGroup.value,t.trim())}))}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){this.mappingFormGroup.clear(),this.pushDataAsFormArrays(e)}validate(){return!this.required||this.mappingFormGroup.controls.length?null:{mappingFormGroup:{valid:!1}}}enterFilterMode(){this.textSearchMode=!0,setTimeout((()=>{this.searchInputField.nativeElement.focus(),this.searchInputField.nativeElement.setSelectionRange(0,0)}),10)}exitFilterMode(){this.updateTableData(this.mappingFormGroup.value),this.textSearchMode=!1,this.textSearch.reset()}manageMapping(e,t){e&&e.stopPropagation();const n=ie(t)?this.mappingFormGroup.at(t).value:{};this.dialog.open(io,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{mappingType:this.mappingType,value:n,buttonTitle:re(t)?"action.add":"action.apply"}}).afterClosed().pipe(Oe(1),Ne(this.destroy$)).subscribe((e=>{e&&(ie(t)?this.mappingFormGroup.at(t).patchValue(e):this.pushDataAsFormArrays([e]),this.mappingFormGroup.markAsDirty())}))}updateTableData(e,t){let n=e.map((e=>this.getMappingValue(e)));t&&(n=n.filter((e=>Object.values(e).some((e=>e.toString().toLowerCase().includes(t.toLowerCase())))))),this.dataSource.loadData(n)}deleteMapping(e,t){e&&e.stopPropagation(),this.dialogService.confirm(this.translate.instant("gateway.delete-mapping-title"),"",this.translate.instant("action.no"),this.translate.instant("action.yes"),!0).subscribe((e=>{e&&(this.mappingFormGroup.removeAt(t),this.mappingFormGroup.markAsDirty())}))}pushDataAsFormArrays(e){e?.length&&e.forEach((e=>this.mappingFormGroup.push(this.fb.control(e))))}getMappingValue(e){switch(this.mappingType){case fn.DATA:const t=Cn.get(e.converter?.type);return{topicFilter:e.topicFilter,QoS:e.subscriptionQos,converter:t?this.translate.instant(t):""};case fn.REQUESTS:let n;const a=e;return n=a.requestType===In.ATTRIBUTE_UPDATE?a.requestValue.attributeFilter:a.requestType===In.SERVER_SIDE_RPC?a.requestValue.methodFilter:a.requestValue.topicFilter,{requestType:e.requestType,type:this.translate.instant(An.get(e.requestType)),details:n};case fn.OPCUA:const o=e.deviceInfo?.deviceNameExpression,i=e.deviceInfo?.deviceProfileExpression,{deviceNodePattern:r}=e;return{deviceNodePattern:r,deviceNamePattern:o,deviceProfileExpression:i};default:return{}}}setMappingColumns(){switch(this.mappingType){case fn.DATA:this.mappingColumns.push({def:"topicFilter",title:"gateway.topic-filter"},{def:"QoS",title:"gateway.mqtt-qos"},{def:"converter",title:"gateway.payload-type"});break;case fn.REQUESTS:this.mappingColumns.push({def:"type",title:"gateway.type"},{def:"details",title:"gateway.details"});break;case fn.OPCUA:this.mappingColumns.push({def:"deviceNodePattern",title:"gateway.device-node"},{def:"deviceNamePattern",title:"gateway.device-name"},{def:"deviceProfileExpression",title:"gateway.device-profile"})}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ro,deps:[{token:Y.TranslateService},{token:Je.MatDialog},{token:X.DialogService},{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:ro,isStandalone:!0,selector:"tb-mapping-table",inputs:{required:"required",mappingType:"mappingType"},providers:[{provide:ge,useExisting:m((()=>ro)),multi:!0},{provide:fe,useExisting:m((()=>ro)),multi:!0}],viewQueries:[{propertyName:"searchInputField",first:!0,predicate:["searchInput"],descendants:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-mapping-table tb-absolute-fill">\n  <div fxFlex fxLayout="column" class="tb-mapping-table-content">\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">\n      <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">\n        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">\n          <span class="tb-mapping-table-title">{{mappingTypeTranslationsMap.get(mappingType) | translate}}</span>\n        </div>\n        <span fxFlex></span>\n        <button mat-icon-button\n                (click)="manageMapping($event)"\n                matTooltip="{{ \'action.add\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>add</mat-icon>\n        </button>\n        <button mat-icon-button\n                (click)="enterFilterMode()"\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">\n      <div class="mat-toolbar-tools">\n        <button mat-icon-button\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field fxFlex>\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput\n                 [formControl]="textSearch"\n                 placeholder="{{ \'common.enter-search\' | translate }}"/>\n        </mat-form-field>\n        <button mat-icon-button (click)="exitFilterMode()"\n                matTooltip="{{ \'action.close\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <div class="table-container">\n      <table mat-table [dataSource]="dataSource">\n        <ng-container [matColumnDef]="column.def" *ngFor="let column of mappingColumns; let i = index">\n          <mat-header-cell *matHeaderCellDef class="table-value-column"\n                           [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">\n            {{ column.title | translate }}\n          </mat-header-cell>\n          <mat-cell tbTruncateWithTooltip *matCellDef="let mapping" class="table-value-column"\n                    [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">\n            {{ mapping[column.def] }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="actions" stickyEnd>\n          <mat-header-cell *matHeaderCellDef\n                           [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\', textAlign: \'center\'}">\n          </mat-header-cell>\n          <mat-cell *matCellDef="let mapping; let i = index"\n                    [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\'}">\n            <ng-template #rowActions>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="manageMapping($event, i)">\n                <tb-icon>edit</tb-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.delete\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="deleteMapping($event, i)">\n                <tb-icon>delete</tb-icon>\n              </button>\n            </ng-template>\n            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">\n              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n            </div>\n            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">\n              <button mat-icon-button\n                      (click)="$event.stopPropagation()"\n                      [matMenuTriggerFor]="cellActionsMenu">\n                <mat-icon class="material-icons">more_vert</mat-icon>\n              </button>\n              <mat-menu #cellActionsMenu="matMenu" xPosition="before">\n                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n              </mat-menu>\n            </div>\n          </mat-cell>\n        </ng-container>\n        <mat-header-row [ngClass]="{\'mat-row-select\': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n        <mat-row *matRowDef="let mapping; columns: displayedColumns;"></mat-row>\n      </table>\n      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"\n               class="mat-headline-5 tb-absolute-fill tb-add-new">\n        <button mat-button class="connector"\n                (click)="manageMapping($event)">\n          <mat-icon class="tb-mat-96">add</mat-icon>\n          <span>{{ \'gateway.add-mapping\' | translate }}</span>\n        </button>\n      </section>\n    </div>\n    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"\n          fxLayoutAlign="center center"\n          class="no-data-found" translate>\n      widget.no-data-found\n    </span>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}:host .tb-mapping-table .tb-mapping-table-content{width:100%;height:100%;background:#fff;overflow:hidden}:host .tb-mapping-table .tb-mapping-table-content.tb-outlined-border{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;border:solid 1px #e0e0e0;border-radius:4px}:host .tb-mapping-table .tb-mapping-table-content .mat-toolbar-tools{min-height:auto}:host .tb-mapping-table .tb-mapping-table-content .title-container{overflow:hidden}:host .tb-mapping-table .tb-mapping-table-content .tb-mapping-table-title{padding-right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-mapping-table .tb-mapping-table-content .table-container{overflow:auto}:host .tb-mapping-table .tb-mapping-table-content .table-container .mat-mdc-table{table-layout:fixed;min-width:450px}:host .tb-mapping-table .tb-mapping-table-content .table-container .mat-mdc-table .table-value-column{padding:0 12px;width:23%}:host .tb-mapping-table .tb-mapping-table-content .table-container .mat-mdc-table .table-value-column.request-column{width:38%}:host .tb-mapping-table .tb-mapping-table-content .ellipsis{overflow:hidden;text-overflow:ellipsis}:host .no-data-found{height:calc(100% - 120px)}@media screen and (max-width: 599px){:host .mat-toolbar{height:auto;min-height:100px}:host .mat-toolbar .tb-mapping-table-title{padding-bottom:5px;width:100%}}:host ::ng-deep mat-cell.tb-value-cell{cursor:pointer}:host ::ng-deep mat-cell.tb-value-cell .mat-icon{height:24px;width:24px;font-size:24px;color:#757575}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"pipe",type:_.AsyncPipe,name:"async"},{kind:"ngmodule",type:D},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"component",type:ht.MatMenu,selector:"mat-menu",inputs:["backdropClass","aria-label","aria-labelledby","aria-describedby","xPosition","yPosition","overlapTrigger","hasBackdrop","class","classList"],outputs:["closed","close"],exportAs:["matMenu"]},{kind:"directive",type:ht.MatMenuTrigger,selector:"[mat-menu-trigger-for], [matMenuTriggerFor]",inputs:["mat-menu-trigger-for","matMenuTriggerFor","matMenuTriggerData","matMenuTriggerRestoreFocus"],outputs:["menuOpened","onMenuOpen","menuClosed","onMenuClose"],exportAs:["matMenuTrigger"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:b.MatTable,selector:"mat-table, table[mat-table]",exportAs:["matTable"]},{kind:"directive",type:b.MatHeaderCellDef,selector:"[matHeaderCellDef]"},{kind:"directive",type:b.MatHeaderRowDef,selector:"[matHeaderRowDef]",inputs:["matHeaderRowDef","matHeaderRowDefSticky"]},{kind:"directive",type:b.MatColumnDef,selector:"[matColumnDef]",inputs:["matColumnDef"]},{kind:"directive",type:b.MatCellDef,selector:"[matCellDef]"},{kind:"directive",type:b.MatRowDef,selector:"[matRowDef]",inputs:["matRowDefColumns","matRowDefWhen"]},{kind:"directive",type:b.MatHeaderCell,selector:"mat-header-cell, th[mat-header-cell]"},{kind:"directive",type:b.MatCell,selector:"mat-cell, td[mat-cell]"},{kind:"component",type:b.MatHeaderRow,selector:"mat-header-row, tr[mat-header-row]",exportAs:["matHeaderRow"]},{kind:"component",type:b.MatRow,selector:"mat-row, tr[mat-row]",exportAs:["matRow"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"directive",type:K.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:K.DefaultStyleDirective,selector:"  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]",inputs:["ngStyle","ngStyle.xs","ngStyle.sm","ngStyle.md","ngStyle.lg","ngStyle.xl","ngStyle.lt-sm","ngStyle.lt-md","ngStyle.lt-lg","ngStyle.lt-xl","ngStyle.gt-xs","ngStyle.gt-sm","ngStyle.gt-md","ngStyle.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:bt.TbIconComponent,selector:"tb-icon",inputs:["color"],exportAs:["tbIcon"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("MappingTableComponent",ro),He([N()],ro.prototype,"required",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ro,decorators:[{type:n,args:[{selector:"tb-mapping-table",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>ro)),multi:!0},{provide:fe,useExisting:m((()=>ro)),multi:!0}],standalone:!0,imports:[H,D,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-mapping-table tb-absolute-fill">\n  <div fxFlex fxLayout="column" class="tb-mapping-table-content">\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">\n      <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">\n        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">\n          <span class="tb-mapping-table-title">{{mappingTypeTranslationsMap.get(mappingType) | translate}}</span>\n        </div>\n        <span fxFlex></span>\n        <button mat-icon-button\n                (click)="manageMapping($event)"\n                matTooltip="{{ \'action.add\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>add</mat-icon>\n        </button>\n        <button mat-icon-button\n                (click)="enterFilterMode()"\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">\n      <div class="mat-toolbar-tools">\n        <button mat-icon-button\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field fxFlex>\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput\n                 [formControl]="textSearch"\n                 placeholder="{{ \'common.enter-search\' | translate }}"/>\n        </mat-form-field>\n        <button mat-icon-button (click)="exitFilterMode()"\n                matTooltip="{{ \'action.close\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <div class="table-container">\n      <table mat-table [dataSource]="dataSource">\n        <ng-container [matColumnDef]="column.def" *ngFor="let column of mappingColumns; let i = index">\n          <mat-header-cell *matHeaderCellDef class="table-value-column"\n                           [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">\n            {{ column.title | translate }}\n          </mat-header-cell>\n          <mat-cell tbTruncateWithTooltip *matCellDef="let mapping" class="table-value-column"\n                    [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">\n            {{ mapping[column.def] }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="actions" stickyEnd>\n          <mat-header-cell *matHeaderCellDef\n                           [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\', textAlign: \'center\'}">\n          </mat-header-cell>\n          <mat-cell *matCellDef="let mapping; let i = index"\n                    [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\'}">\n            <ng-template #rowActions>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="manageMapping($event, i)">\n                <tb-icon>edit</tb-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.delete\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="deleteMapping($event, i)">\n                <tb-icon>delete</tb-icon>\n              </button>\n            </ng-template>\n            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">\n              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n            </div>\n            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">\n              <button mat-icon-button\n                      (click)="$event.stopPropagation()"\n                      [matMenuTriggerFor]="cellActionsMenu">\n                <mat-icon class="material-icons">more_vert</mat-icon>\n              </button>\n              <mat-menu #cellActionsMenu="matMenu" xPosition="before">\n                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n              </mat-menu>\n            </div>\n          </mat-cell>\n        </ng-container>\n        <mat-header-row [ngClass]="{\'mat-row-select\': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n        <mat-row *matRowDef="let mapping; columns: displayedColumns;"></mat-row>\n      </table>\n      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"\n               class="mat-headline-5 tb-absolute-fill tb-add-new">\n        <button mat-button class="connector"\n                (click)="manageMapping($event)">\n          <mat-icon class="tb-mat-96">add</mat-icon>\n          <span>{{ \'gateway.add-mapping\' | translate }}</span>\n        </button>\n      </section>\n    </div>\n    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"\n          fxLayoutAlign="center center"\n          class="no-data-found" translate>\n      widget.no-data-found\n    </span>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}:host .tb-mapping-table .tb-mapping-table-content{width:100%;height:100%;background:#fff;overflow:hidden}:host .tb-mapping-table .tb-mapping-table-content.tb-outlined-border{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;border:solid 1px #e0e0e0;border-radius:4px}:host .tb-mapping-table .tb-mapping-table-content .mat-toolbar-tools{min-height:auto}:host .tb-mapping-table .tb-mapping-table-content .title-container{overflow:hidden}:host .tb-mapping-table .tb-mapping-table-content .tb-mapping-table-title{padding-right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-mapping-table .tb-mapping-table-content .table-container{overflow:auto}:host .tb-mapping-table .tb-mapping-table-content .table-container .mat-mdc-table{table-layout:fixed;min-width:450px}:host .tb-mapping-table .tb-mapping-table-content .table-container .mat-mdc-table .table-value-column{padding:0 12px;width:23%}:host .tb-mapping-table .tb-mapping-table-content .table-container .mat-mdc-table .table-value-column.request-column{width:38%}:host .tb-mapping-table .tb-mapping-table-content .ellipsis{overflow:hidden;text-overflow:ellipsis}:host .no-data-found{height:calc(100% - 120px)}@media screen and (max-width: 599px){:host .mat-toolbar{height:auto;min-height:100px}:host .mat-toolbar .tb-mapping-table-title{padding-bottom:5px;width:100%}}:host ::ng-deep mat-cell.tb-value-cell{cursor:pointer}:host ::ng-deep mat-cell.tb-value-cell .mat-icon{height:24px;width:24px;font-size:24px;color:#757575}\n']}]}],ctorParameters:()=>[{type:Y.TranslateService},{type:Je.MatDialog},{type:X.DialogService},{type:me.FormBuilder}],propDecorators:{required:[{type:a}],mappingType:[{type:a}],searchInputField:[{type:o,args:["searchInput"]}]}});class so extends R{constructor(){super()}}e("MappingDatasource",so);class lo{constructor(e,t){this.fb=e,this.cdr=t,this.title="gateway.security",this.extendCertificatesModel=!1,this.BrokerSecurityType=rn,this.securityTypes=Object.values(rn),this.modeTypes=Object.values(pn),this.SecurityTypeTranslationsMap=mn,this.destroy$=new Se}ngOnInit(){this.securityFormGroup=this.fb.group({type:[rn.ANONYMOUS,[]],username:["",[ue.required,ue.pattern(kt)]],password:["",[ue.pattern(kt)]],pathToCACert:["",[ue.pattern(kt)]],pathToPrivateKey:["",[ue.pattern(kt)]],pathToClientCert:["",[ue.pattern(kt)]]}),this.extendCertificatesModel&&this.securityFormGroup.addControl("mode",this.fb.control(pn.NONE,[])),this.securityFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()})),this.securityFormGroup.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.updateValidators(e)))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}writeValue(e){if(e)e.type||(e.type=rn.ANONYMOUS),this.updateValidators(e.type),this.securityFormGroup.reset(e,{emitEvent:!1});else{const e={type:rn.ANONYMOUS};this.securityFormGroup.reset(e,{emitEvent:!1})}this.cdr.markForCheck()}validate(){return this.securityFormGroup.get("type").value!==rn.BASIC||this.securityFormGroup.valid?null:{securityForm:{valid:!1}}}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}updateValidators(e){if(e)if(this.securityFormGroup.get("username").disable({emitEvent:!1}),this.securityFormGroup.get("password").disable({emitEvent:!1}),this.securityFormGroup.get("pathToCACert").disable({emitEvent:!1}),this.securityFormGroup.get("pathToPrivateKey").disable({emitEvent:!1}),this.securityFormGroup.get("pathToClientCert").disable({emitEvent:!1}),this.securityFormGroup.get("mode")?.disable({emitEvent:!1}),e===rn.BASIC)this.securityFormGroup.get("username").enable({emitEvent:!1}),this.securityFormGroup.get("password").enable({emitEvent:!1});else if(e===rn.CERTIFICATES&&(this.securityFormGroup.get("pathToCACert").enable({emitEvent:!1}),this.securityFormGroup.get("pathToPrivateKey").enable({emitEvent:!1}),this.securityFormGroup.get("pathToClientCert").enable({emitEvent:!1}),this.extendCertificatesModel)){const e=this.securityFormGroup.get("mode");e&&!e.value&&e.setValue(pn.NONE,{emitEvent:!1}),e?.enable({emitEvent:!1}),this.securityFormGroup.get("username").enable({emitEvent:!1}),this.securityFormGroup.get("password").enable({emitEvent:!1})}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:lo,deps:[{token:me.FormBuilder},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:lo,isStandalone:!0,selector:"tb-security-config",inputs:{title:"title",extendCertificatesModel:"extendCertificatesModel"},providers:[{provide:ge,useExisting:m((()=>lo)),multi:!0},{provide:fe,useExisting:m((()=>lo)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-row space-between same-padding tb-flex column" [formGroup]="securityFormGroup">\n  <div class="tb-flex row space-between align-center no-gap fill-width">\n    <div class="fixed-title-width tb-required">{{ title | translate }}</div>\n    <tb-toggle-select formControlName="type" appearance="fill">\n      <tb-toggle-option *ngFor="let type of securityTypes" [value]="type">\n        {{ SecurityTypeTranslationsMap.get(type) | translate }}\n      </tb-toggle-option>\n    </tb-toggle-select>\n  </div>\n  <ng-container [ngSwitch]="securityFormGroup.get(\'type\').value">\n    <ng-template [ngSwitchCase]="BrokerSecurityType.BASIC">\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.username</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="username" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.username-required\') | translate"\n                      *ngIf="securityFormGroup.get(\'username\').hasError(\'required\')\n                                             && securityFormGroup.get(\'username\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.password</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <div class="tb-flex no-gap align-center fill-height" matSuffix>\n                <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n              </div>\n          </mat-form-field>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template [ngSwitchCase]="BrokerSecurityType.CERTIFICATES">\n      <div class="tb-form-hint tb-primary-fill">{{ \'gateway.path-hint\' | translate }}</div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.CA-certificate-path</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="pathToCACert" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.private-key-path</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="pathToPrivateKey" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.client-cert-path</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="pathToClientCert" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <ng-container *ngIf="extendCertificatesModel">\n        <div class="tb-form-row space-between tb-flex fill-width">\n          <div class="fixed-title-width" translate>gateway.mode</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <mat-select formControlName="mode">\n                <mat-option *ngFor="let type of modeTypes" [value]="type">\n                  {{ type }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row space-between tb-flex fill-width">\n          <div class="fixed-title-width" translate>gateway.username</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="username" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.username-required\') | translate"\n                        *ngIf="securityFormGroup.get(\'username\').hasError(\'required\')\n                                               && securityFormGroup.get(\'username\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row space-between tb-flex fill-width">\n          <div class="fixed-title-width" translate>gateway.password</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <div class="tb-flex no-gap align-center fill-height" matSuffix>\n                <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n              </div>\n            </mat-form-field>\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n  </ng-container>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"ngmodule",type:D},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:tt.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("SecurityConfigComponent",lo),He([N()],lo.prototype,"extendCertificatesModel",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:lo,decorators:[{type:n,args:[{selector:"tb-security-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>lo)),multi:!0},{provide:fe,useExisting:m((()=>lo)),multi:!0}],standalone:!0,imports:[H,D],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-row space-between same-padding tb-flex column" [formGroup]="securityFormGroup">\n  <div class="tb-flex row space-between align-center no-gap fill-width">\n    <div class="fixed-title-width tb-required">{{ title | translate }}</div>\n    <tb-toggle-select formControlName="type" appearance="fill">\n      <tb-toggle-option *ngFor="let type of securityTypes" [value]="type">\n        {{ SecurityTypeTranslationsMap.get(type) | translate }}\n      </tb-toggle-option>\n    </tb-toggle-select>\n  </div>\n  <ng-container [ngSwitch]="securityFormGroup.get(\'type\').value">\n    <ng-template [ngSwitchCase]="BrokerSecurityType.BASIC">\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.username</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="username" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.username-required\') | translate"\n                      *ngIf="securityFormGroup.get(\'username\').hasError(\'required\')\n                                             && securityFormGroup.get(\'username\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.password</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <div class="tb-flex no-gap align-center fill-height" matSuffix>\n                <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n              </div>\n          </mat-form-field>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template [ngSwitchCase]="BrokerSecurityType.CERTIFICATES">\n      <div class="tb-form-hint tb-primary-fill">{{ \'gateway.path-hint\' | translate }}</div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.CA-certificate-path</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="pathToCACert" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.private-key-path</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="pathToPrivateKey" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <div class="tb-form-row space-between tb-flex fill-width">\n        <div class="fixed-title-width" translate>gateway.client-cert-path</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="pathToClientCert" placeholder="{{ \'gateway.set\' | translate }}"/>\n          </mat-form-field>\n        </div>\n      </div>\n      <ng-container *ngIf="extendCertificatesModel">\n        <div class="tb-form-row space-between tb-flex fill-width">\n          <div class="fixed-title-width" translate>gateway.mode</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <mat-select formControlName="mode">\n                <mat-option *ngFor="let type of modeTypes" [value]="type">\n                  {{ type }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row space-between tb-flex fill-width">\n          <div class="fixed-title-width" translate>gateway.username</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="username" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.username-required\') | translate"\n                        *ngIf="securityFormGroup.get(\'username\').hasError(\'required\')\n                                               && securityFormGroup.get(\'username\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row space-between tb-flex fill-width">\n          <div class="fixed-title-width" translate>gateway.password</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <div class="tb-flex no-gap align-center fill-height" matSuffix>\n                <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n              </div>\n            </mat-form-field>\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n  </ng-container>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:t.ChangeDetectorRef}],propDecorators:{title:[{type:a}],extendCertificatesModel:[{type:a}]}});class co{constructor(e){this.fb=e,this.hideNewFields=!1,this.securityPolicyTypes=_n,this.destroy$=new Se,this.serverConfigFormGroup=this.fb.group({url:["",[ue.required,ue.pattern(kt)]],timeoutInMillis:[1e3,[ue.required,ue.min(1e3)]],scanPeriodInMillis:[V,[ue.required,ue.min(1e3)]],pollPeriodInMillis:[5e3,[ue.required,ue.min(50)]],enableSubscriptions:[!0,[]],subCheckPeriodInMillis:[100,[ue.required,ue.min(100)]],showMap:[!1,[]],security:[Un.BASIC128,[]],identity:[]}),this.serverConfigFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}ngAfterViewInit(){this.hideNewFields&&this.serverConfigFormGroup.get("pollPeriodInMillis").disable({emitEvent:!1})}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}validate(){return this.serverConfigFormGroup.valid?null:{serverConfigFormGroup:{valid:!1}}}writeValue(e){const{timeoutInMillis:t=1e3,scanPeriodInMillis:n=V,pollPeriodInMillis:a=5e3,enableSubscriptions:o=!0,subCheckPeriodInMillis:i=100,showMap:r=!1,security:s=Un.BASIC128,identity:l={}}=e;this.serverConfigFormGroup.reset({...e,timeoutInMillis:t,scanPeriodInMillis:n,pollPeriodInMillis:a,enableSubscriptions:o,subCheckPeriodInMillis:i,showMap:r,security:s,identity:l},{emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:co,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:co,isStandalone:!0,selector:"tb-opc-server-config",inputs:{hideNewFields:"hideNewFields"},providers:[{provide:ge,useExisting:m((()=>co)),multi:!0},{provide:fe,useExisting:m((()=>co)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tbTruncateWithTooltip translate>gateway.server-url</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="url" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.server-url-required\') | translate"\n                  *ngIf="serverConfigFormGroup.get(\'url\').hasError(\'required\') &&\n                         serverConfigFormGroup.get(\'url\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.opc-timeout\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.timeout\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="1000" name="value" formControlName="timeoutInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.timeout-error\' | translate: {min: 1000}"\n                  *ngIf="(serverConfigFormGroup.get(\'timeoutInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'timeoutInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'timeoutInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.security-policy\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.security-policy\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <mat-select formControlName="security">\n          <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.scan-period\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.scan-period\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="1000" name="value"\n               formControlName="scanPeriodInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.scan-period-error\' | translate: {min: 1000}"\n                  *ngIf="(serverConfigFormGroup.get(\'scanPeriodInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'scanPeriodInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'scanPeriodInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div *ngIf="!hideNewFields" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.poll-period\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.poll-period\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="50" name="value"\n               formControlName="pollPeriodInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.poll-period-error\' | translate: {min: 50}"\n                  *ngIf="(serverConfigFormGroup.get(\'pollPeriodInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'pollPeriodInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'pollPeriodInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.sub-check-period\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.sub-check-period\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="100" name="value"\n               formControlName="subCheckPeriodInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.sub-check-period-error\' | translate: {min: 100}"\n                  *ngIf="(serverConfigFormGroup.get(\'subCheckPeriodInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'subCheckPeriodInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'subCheckPeriodInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row" fxLayoutAlign="space-between center">\n    <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">\n      <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.enable-subscription\' | translate }}">\n        <div tbTruncateWithTooltip>{{ \'gateway.enable-subscription\' | translate }}</div>\n      </mat-label>\n    </mat-slide-toggle>\n  </div>\n  <div class="tb-form-row" fxLayoutAlign="space-between center">\n    <mat-slide-toggle class="mat-slide" formControlName="showMap">\n      <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.show-map\' | translate }}">\n        {{ \'gateway.show-map\' | translate }}\n      </mat-label>\n    </mat-slide-toggle>\n  </div>\n  <tb-security-config formControlName="identity"\n                      [extendCertificatesModel]="true">\n  </tb-security-config>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:lo,selector:"tb-security-config",inputs:["title","extendCertificatesModel"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("OpcServerConfigComponent",co),He([N()],co.prototype,"hideNewFields",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:co,decorators:[{type:n,args:[{selector:"tb-opc-server-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>co)),multi:!0},{provide:fe,useExisting:m((()=>co)),multi:!0}],standalone:!0,imports:[H,D,lo,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tbTruncateWithTooltip translate>gateway.server-url</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="url" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.server-url-required\') | translate"\n                  *ngIf="serverConfigFormGroup.get(\'url\').hasError(\'required\') &&\n                         serverConfigFormGroup.get(\'url\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.opc-timeout\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.timeout\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="1000" name="value" formControlName="timeoutInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.timeout-error\' | translate: {min: 1000}"\n                  *ngIf="(serverConfigFormGroup.get(\'timeoutInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'timeoutInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'timeoutInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.security-policy\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.security-policy\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <mat-select formControlName="security">\n          <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.scan-period\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.scan-period\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="1000" name="value"\n               formControlName="scanPeriodInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.scan-period-error\' | translate: {min: 1000}"\n                  *ngIf="(serverConfigFormGroup.get(\'scanPeriodInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'scanPeriodInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'scanPeriodInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div *ngIf="!hideNewFields" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.poll-period\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.poll-period\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="50" name="value"\n               formControlName="pollPeriodInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.poll-period-error\' | translate: {min: 50}"\n                  *ngIf="(serverConfigFormGroup.get(\'pollPeriodInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'pollPeriodInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'pollPeriodInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.sub-check-period\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.sub-check-period\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="100" name="value"\n               formControlName="subCheckPeriodInMillis" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="\'gateway.sub-check-period-error\' | translate: {min: 100}"\n                  *ngIf="(serverConfigFormGroup.get(\'subCheckPeriodInMillis\').hasError(\'required\') ||\n                         serverConfigFormGroup.get(\'subCheckPeriodInMillis\').hasError(\'min\')) &&\n                         serverConfigFormGroup.get(\'subCheckPeriodInMillis\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row" fxLayoutAlign="space-between center">\n    <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">\n      <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.enable-subscription\' | translate }}">\n        <div tbTruncateWithTooltip>{{ \'gateway.enable-subscription\' | translate }}</div>\n      </mat-label>\n    </mat-slide-toggle>\n  </div>\n  <div class="tb-form-row" fxLayoutAlign="space-between center">\n    <mat-slide-toggle class="mat-slide" formControlName="showMap">\n      <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.show-map\' | translate }}">\n        {{ \'gateway.show-map\' | translate }}\n      </mat-label>\n    </mat-slide-toggle>\n  </div>\n  <tb-security-config formControlName="identity"\n                      [extendCertificatesModel]="true">\n  </tb-security-config>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder}],propDecorators:{hideNewFields:[{type:a}]}});class po extends ya{constructor(){super(...arguments),this.mappingTypes=fn,this.isLegacy=!1}initBasicFormGroup(){return this.fb.group({mapping:[],server:[]})}mapConfigToFormValue(e){return{server:e.server??{},mapping:e.mapping??[]}}getMappedValue(e){return{server:e.server,mapping:e.mapping}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:po,deps:null,target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:po,isStandalone:!0,selector:"tb-opc-ua-basic-config",providers:[{provide:ge,useExisting:m((()=>po)),multi:!0},{provide:fe,useExisting:m((()=>po)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server\' | translate }}*">\n    <tb-opc-server-config formControlName="server" [hideNewFields]="isLegacy"></tb-opc-server-config>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="mappingTypes.OPCUA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:ro,selector:"tb-mapping-table",inputs:["required","mappingType"]},{kind:"component",type:co,selector:"tb-opc-server-config",inputs:["hideNewFields"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("OpcUaBasicConfigComponent",po),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:po,decorators:[{type:n,args:[{selector:"tb-opc-ua-basic-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>po)),multi:!0},{provide:fe,useExisting:m((()=>po)),multi:!0}],standalone:!0,imports:[H,D,lo,ro,co],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server\' | translate }}*">\n    <tb-opc-server-config formControlName="server" [hideNewFields]="isLegacy"></tb-opc-server-config>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="mappingTypes.OPCUA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n']}]}]});class mo{constructor(e,t){this.fb=e,this.cdr=t,this.mqttVersions=gn,this.portLimits=Et,this.destroy$=new Se,this.brokerConfigFormGroup=this.fb.group({host:["",[ue.required,ue.pattern(kt)]],port:[null,[ue.required,ue.min(Et.MIN),ue.max(Et.MAX)]],version:[5,[]],clientId:["tb_gw_"+se(5),[ue.pattern(kt)]],security:[]}),this.brokerConfigFormGroup.valueChanges.subscribe((e=>{this.onChange(e),this.onTouched()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}generate(e){this.brokerConfigFormGroup.get(e)?.patchValue("tb_gw_"+se(5))}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){const{version:t=5,clientId:n=`tb_gw_${se(5)}`,security:a={}}=e;this.brokerConfigFormGroup.reset({...e,version:t,clientId:n,security:a},{emitEvent:!1}),this.cdr.markForCheck()}validate(){return this.brokerConfigFormGroup.valid?null:{brokerConfigFormGroup:{valid:!1}}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:mo,deps:[{token:me.FormBuilder},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:mo,isStandalone:!0,selector:"tb-broker-config-control",providers:[{provide:ge,useExisting:m((()=>mo)),multi:!0},{provide:fe,useExisting:m((()=>mo)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="brokerConfigFormGroup">\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" translate>gateway.host</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.host-required\') | translate"\n                  *ngIf="brokerConfigFormGroup.get(\'host\').hasError(\'required\')\n                                           && brokerConfigFormGroup.get(\'host\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" translate>gateway.port</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n               name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="brokerConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                  *ngIf="(brokerConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                            brokerConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                            brokerConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                            brokerConfigFormGroup.get(\'port\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" translate>gateway.mqtt-version</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <mat-select formControlName="version">\n          <mat-option *ngFor="let version of mqttVersions" [value]="version.value">{{ version.name }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" translate>gateway.client-id</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="clientId" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Generate"\n                matTooltip="{{ \'gateway.generate-client-id\' | translate }}"\n                matTooltipPosition="above"\n                (click)="generate(\'clientId\')"\n                *ngIf="!brokerConfigFormGroup.get(\'clientId\').value">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n  <tb-security-config formControlName="security">\n  </tb-security-config>\n</div>\n',dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:lo,selector:"tb-security-config",inputs:["title","extendCertificatesModel"]},{kind:"pipe",type:wa,name:"getGatewayPortTooltip"}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("BrokerConfigControlComponent",mo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:mo,decorators:[{type:n,args:[{selector:"tb-broker-config-control",changeDetection:d.OnPush,standalone:!0,imports:[H,D,lo,wa],providers:[{provide:ge,useExisting:m((()=>mo)),multi:!0},{provide:fe,useExisting:m((()=>mo)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="brokerConfigFormGroup">\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" translate>gateway.host</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.host-required\') | translate"\n                  *ngIf="brokerConfigFormGroup.get(\'host\').hasError(\'required\')\n                                           && brokerConfigFormGroup.get(\'host\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" translate>gateway.port</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n               name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="brokerConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                  *ngIf="(brokerConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                            brokerConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                            brokerConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                            brokerConfigFormGroup.get(\'port\').touched"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" translate>gateway.mqtt-version</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <mat-select formControlName="version">\n          <mat-option *ngFor="let version of mqttVersions" [value]="version.value">{{ version.name }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width" translate>gateway.client-id</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="clientId" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Generate"\n                matTooltip="{{ \'gateway.generate-client-id\' | translate }}"\n                matTooltipPosition="above"\n                (click)="generate(\'clientId\')"\n                *ngIf="!brokerConfigFormGroup.get(\'clientId\').value">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n  <tb-security-config formControlName="security">\n  </tb-security-config>\n</div>\n'}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:t.ChangeDetectorRef}]});class uo{constructor(e){this.fb=e,this.destroy$=new Se,this.workersConfigFormGroup=this.fb.group({maxNumberOfWorkers:[100,[ue.required,ue.min(1)]],maxMessageNumberPerWorker:[10,[ue.required,ue.min(1)]]}),this.workersConfigFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){const{maxNumberOfWorkers:t,maxMessageNumberPerWorker:n}=e;this.workersConfigFormGroup.reset({maxNumberOfWorkers:t||100,maxMessageNumberPerWorker:n||10},{emitEvent:!1})}validate(){return this.workersConfigFormGroup.valid?null:{workersConfigFormGroup:{valid:!1}}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:uo,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:uo,isStandalone:!0,selector:"tb-workers-config-control",providers:[{provide:ge,useExisting:m((()=>uo)),multi:!0},{provide:fe,useExisting:m((()=>uo)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="workersConfigFormGroup">\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" [style.width.%]="50"\n         tb-hint-tooltip-icon="{{ \'gateway.max-number-of-workers-hint\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.max-number-of-workers\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers"\n               placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.max-number-of-workers-required\') | translate"\n                  *ngIf="workersConfigFormGroup.get(\'maxNumberOfWorkers\').hasError(\'min\') ||\n                                           (workersConfigFormGroup.get(\'maxNumberOfWorkers\').hasError(\'required\') &&\n                                           workersConfigFormGroup.get(\'maxNumberOfWorkers\').touched)"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" [style.width.%]="50"\n         tb-hint-tooltip-icon="{{ \'gateway.max-messages-queue-for-worker-hint\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.max-messages-queue-for-worker\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker"\n               placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.max-messages-queue-for-worker-required\') | translate"\n                  *ngIf="workersConfigFormGroup.get(\'maxMessageNumberPerWorker\').hasError(\'min\') ||\n                                           (workersConfigFormGroup.get(\'maxMessageNumberPerWorker\').hasError(\'required\') &&\n                                           workersConfigFormGroup.get(\'maxMessageNumberPerWorker\').touched)"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n',dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("WorkersConfigControlComponent",uo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:uo,decorators:[{type:n,args:[{selector:"tb-workers-config-control",changeDetection:d.OnPush,standalone:!0,imports:[H,D,Sa],providers:[{provide:ge,useExisting:m((()=>uo)),multi:!0},{provide:fe,useExisting:m((()=>uo)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="workersConfigFormGroup">\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" [style.width.%]="50"\n         tb-hint-tooltip-icon="{{ \'gateway.max-number-of-workers-hint\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.max-number-of-workers\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers"\n               placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.max-number-of-workers-required\') | translate"\n                  *ngIf="workersConfigFormGroup.get(\'maxNumberOfWorkers\').hasError(\'min\') ||\n                                           (workersConfigFormGroup.get(\'maxNumberOfWorkers\').hasError(\'required\') &&\n                                           workersConfigFormGroup.get(\'maxNumberOfWorkers\').touched)"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n    <div class="fixed-title-width tb-required" [style.width.%]="50"\n         tb-hint-tooltip-icon="{{ \'gateway.max-messages-queue-for-worker-hint\' | translate }}">\n      <div tbTruncateWithTooltip>{{ \'gateway.max-messages-queue-for-worker\' | translate }}</div>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker"\n               placeholder="{{ \'gateway.set\' | translate }}"/>\n        <mat-icon matSuffix\n                  matTooltipPosition="above"\n                  matTooltipClass="tb-error-tooltip"\n                  [matTooltip]="(\'gateway.max-messages-queue-for-worker-required\') | translate"\n                  *ngIf="workersConfigFormGroup.get(\'maxMessageNumberPerWorker\').hasError(\'min\') ||\n                                           (workersConfigFormGroup.get(\'maxMessageNumberPerWorker\').hasError(\'required\') &&\n                                           workersConfigFormGroup.get(\'maxMessageNumberPerWorker\').touched)"\n                  class="tb-error">\n          warning\n        </mat-icon>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n'}]}],ctorParameters:()=>[{type:me.FormBuilder}]});class go{constructor(e){this.fb=e,this.isExpansionMode=!1,this.defaultValue=ln.Key,this.reportStrategyTypes=Object.values(sn),this.ReportTypeTranslateMap=cn,this.ReportStrategyType=sn,this.destroy$=new Se,this.showStrategyControl=this.fb.control(!1),this.reportStrategyFormGroup=this.fb.group({type:[{value:sn.OnReportPeriod,disabled:!0},[]],reportPeriod:[{value:this.defaultValue,disabled:!0},[ue.required]]}),this.observeStrategyFormChange(),this.observeStrategyToggle()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}writeValue(e){this.isExpansionMode&&this.showStrategyControl.setValue(!!e,{emitEvent:!1}),e&&this.reportStrategyFormGroup.enable({emitEvent:!1});const{type:t=sn.OnReportPeriod,reportPeriod:n=this.defaultValue}=e??{};this.reportStrategyFormGroup.setValue({type:t,reportPeriod:n},{emitEvent:!1}),this.onTypeChange(t)}validate(){return this.reportStrategyFormGroup.valid||this.reportStrategyFormGroup.disabled?null:{reportStrategyForm:{valid:!1}}}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}observeStrategyFormChange(){this.reportStrategyFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()})),this.reportStrategyFormGroup.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.onTypeChange(e)))}observeStrategyToggle(){this.showStrategyControl.valueChanges.pipe(Ne(this.destroy$),Me((()=>this.isExpansionMode))).subscribe((e=>{e?(this.reportStrategyFormGroup.enable({emitEvent:!1}),this.reportStrategyFormGroup.get("reportPeriod").addValidators(ue.required),this.onChange(this.reportStrategyFormGroup.value)):(this.reportStrategyFormGroup.disable({emitEvent:!1}),this.reportStrategyFormGroup.get("reportPeriod").removeValidators(ue.required),this.onChange(null)),this.reportStrategyFormGroup.updateValueAndValidity({emitEvent:!1})}))}onTypeChange(e){const t=this.reportStrategyFormGroup.get("reportPeriod");e===sn.OnChange?t.disable({emitEvent:!1}):this.isExpansionMode&&!this.showStrategyControl.value||t.enable({emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:go,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:go,isStandalone:!0,selector:"tb-report-strategy",inputs:{isExpansionMode:"isExpansionMode",defaultValue:"defaultValue"},providers:[{provide:ge,useExisting:m((()=>go)),multi:!0},{provide:fe,useExisting:m((()=>go)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div [formGroup]="reportStrategyFormGroup" class="tb-form-panel stroked">\n  <mat-expansion-panel *ngIf="isExpansionMode else defaultMode" class="tb-settings" [expanded]="showStrategyControl.value">\n    <mat-expansion-panel-header fxLayout="row wrap">\n      <mat-panel-title>\n        <mat-slide-toggle fxLayoutAlign="center" [formControl]="showStrategyControl" class="mat-slide" (click)="$event.stopPropagation()">\n          <mat-label>\n            {{ \'gateway.report-strategy.label\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>\n  </mat-expansion-panel>\n  <ng-template #defaultMode>\n    <div class="tb-form-panel-title" translate>gateway.report-strategy.label</div>\n    <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>\n  </ng-template>\n  <ng-template #strategyFields>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width">{{ \'gateway.type\' | translate }}</div>\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <mat-select formControlName="type">\n          <mat-option *ngFor="let type of reportStrategyTypes" [value]="type">{{ ReportTypeTranslateMap.get(type) | translate }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf="reportStrategyFormGroup.get(\'type\').value !== ReportStrategyType.OnChange" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required">\n        <span tbTruncateWithTooltip translate>\n          gateway.report-strategy.report-period\n        </span>\n      </div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="number" min="0" name="value" formControlName="reportPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n  </ng-template>\n</div>\n',dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ReportStrategyComponent",go),He([N()],go.prototype,"isExpansionMode",void 0),He([B()],go.prototype,"defaultValue",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:go,decorators:[{type:n,args:[{selector:"tb-report-strategy",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>go)),multi:!0},{provide:fe,useExisting:m((()=>go)),multi:!0}],standalone:!0,imports:[H,D,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div [formGroup]="reportStrategyFormGroup" class="tb-form-panel stroked">\n  <mat-expansion-panel *ngIf="isExpansionMode else defaultMode" class="tb-settings" [expanded]="showStrategyControl.value">\n    <mat-expansion-panel-header fxLayout="row wrap">\n      <mat-panel-title>\n        <mat-slide-toggle fxLayoutAlign="center" [formControl]="showStrategyControl" class="mat-slide" (click)="$event.stopPropagation()">\n          <mat-label>\n            {{ \'gateway.report-strategy.label\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>\n  </mat-expansion-panel>\n  <ng-template #defaultMode>\n    <div class="tb-form-panel-title" translate>gateway.report-strategy.label</div>\n    <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>\n  </ng-template>\n  <ng-template #strategyFields>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width">{{ \'gateway.type\' | translate }}</div>\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <mat-select formControlName="type">\n          <mat-option *ngFor="let type of reportStrategyTypes" [value]="type">{{ ReportTypeTranslateMap.get(type) | translate }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf="reportStrategyFormGroup.get(\'type\').value !== ReportStrategyType.OnChange" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required">\n        <span tbTruncateWithTooltip translate>\n          gateway.report-strategy.report-period\n        </span>\n      </div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="number" min="0" name="value" formControlName="reportPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n  </ng-template>\n</div>\n'}]}],ctorParameters:()=>[{type:me.FormBuilder}],propDecorators:{isExpansionMode:[{type:a}],defaultValue:[{type:a}]}});class fo{constructor(e){this.fb=e,this.isMaster=!1,this.hideNewFields=!1,this.keysDataApplied=new i,this.modbusDataTypes=Object.values(ea),this.modifierTypes=Object.values(On),this.withFunctionCode=!0,this.withReportStrategy=!0,this.enableModifiersControlMap=new Map,this.showModifiersMap=new Map,this.functionCodesMap=new Map,this.defaultFunctionCodes=[],this.ModbusEditableDataTypes=ta,this.ModbusFunctionCodeTranslationsMap=zt,this.ModifierTypesMap=Rn,this.ReportStrategyDefaultValue=ln,this.destroy$=new Se,this.defaultReadFunctionCodes=[3,4],this.bitsReadFunctionCodes=[1,2],this.defaultWriteFunctionCodes=[6,16],this.bitsWriteFunctionCodes=[5,15]}ngOnInit(){this.withFunctionCode=!this.isMaster||this.keysType!==aa.ATTRIBUTES&&this.keysType!==aa.TIMESERIES,this.withReportStrategy=!(this.isMaster||this.keysType!==aa.ATTRIBUTES&&this.keysType!==aa.TIMESERIES||this.hideNewFields),this.keysListFormArray=this.prepareKeysFormArray(this.values),this.defaultFunctionCodes=this.getDefaultFunctionCodes()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}trackByControlId(e,t){return t.value.id}addKey(){const e=se(5),t=this.fb.group({tag:["",[ue.required,ue.pattern(kt)]],value:[{value:"",disabled:!this.isMaster},[ue.required,ue.pattern(kt)]],type:[ea.BYTES,[ue.required]],address:[null,[ue.required]],objectsCount:[1,[ue.required]],functionCode:[{value:this.getDefaultFunctionCodes()[0],disabled:!this.withFunctionCode},[ue.required]],reportStrategy:[{value:null,disabled:!this.withReportStrategy}],modifierType:[{value:On.MULTIPLIER,disabled:!0}],modifierValue:[{value:1,disabled:!0},[ue.pattern(Ft)]],id:[{value:e,disabled:!0}]});this.showModifiersMap.set(e,!1),this.enableModifiersControlMap.set(e,this.fb.control(!1)),this.observeKeyDataType(t),this.observeEnableModifier(t),this.keysListFormArray.push(t)}deleteKey(e,t){e&&e.stopPropagation(),this.keysListFormArray.removeAt(t),this.keysListFormArray.markAsDirty()}cancel(){this.popover.hide()}applyKeysData(){this.keysDataApplied.emit(this.getFormValue())}getFormValue(){return this.mapKeysWithModifier(this.withReportStrategy?this.cleanUpEmptyStrategies(this.keysListFormArray.value):this.keysListFormArray.value)}cleanUpEmptyStrategies(e){return e.map((e=>{const{reportStrategy:t,...n}=e;return t?e:n}))}mapKeysWithModifier(e){return e.map(((e,t)=>{if(this.showModifiersMap.get(this.keysListFormArray.controls[t].get("id").value)){const{modifierType:t,modifierValue:n,...a}=e;return t?{...a,[t]:n}:a}return e}))}prepareKeysFormArray(e){const t=[];return e&&e.forEach((e=>{const n=this.createDataKeyFormGroup(e);this.observeKeyDataType(n),this.observeEnableModifier(n),this.functionCodesMap.set(n.get("id").value,this.getFunctionCodes(e.type)),t.push(n)})),this.fb.array(t)}createDataKeyFormGroup(e){const{tag:t,value:n,type:a,address:o,objectsCount:i,functionCode:r,multiplier:s,divider:l,reportStrategy:c}=e,p=se(5),m=this.shouldShowModifier(a);return this.showModifiersMap.set(p,m),this.enableModifiersControlMap.set(p,this.fb.control((s||l)&&m)),this.fb.group({tag:[t,[ue.required,ue.pattern(kt)]],value:[{value:n,disabled:!this.isMaster},[ue.required,ue.pattern(kt)]],type:[a,[ue.required]],address:[o,[ue.required]],objectsCount:[i,[ue.required]],functionCode:[{value:r,disabled:!this.withFunctionCode},[ue.required]],modifierType:[{value:l?On.DIVIDER:On.MULTIPLIER,disabled:!this.enableModifiersControlMap.get(p).value}],modifierValue:[{value:s??l??1,disabled:!this.enableModifiersControlMap.get(p).value},[ue.pattern(Ft)]],id:[{value:p,disabled:!0}],reportStrategy:[{value:c,disabled:!this.withReportStrategy}]})}shouldShowModifier(e){return!(this.isMaster||this.keysType!==aa.ATTRIBUTES&&this.keysType!==aa.TIMESERIES||this.ModbusEditableDataTypes.includes(e))}observeKeyDataType(e){e.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{this.ModbusEditableDataTypes.includes(t)||e.get("objectsCount").patchValue(na[t],{emitEvent:!1});const n=this.shouldShowModifier(t);this.showModifiersMap.set(e.get("id").value,n),this.updateFunctionCodes(e,t)}))}observeEnableModifier(e){this.enableModifiersControlMap.get(e.get("id").value).valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>this.toggleModifierControls(e,t)))}toggleModifierControls(e,t){const n=e.get("modifierType"),a=e.get("modifierValue");t?(n.enable(),a.enable()):(n.disable(),a.disable())}updateFunctionCodes(e,t){const n=this.getFunctionCodes(t);this.functionCodesMap.set(e.get("id").value,n),n.includes(e.get("functionCode").value)||e.get("functionCode").patchValue(n[0],{emitEvent:!1})}getFunctionCodes(e){const t=[...e===ea.BITS?this.bitsWriteFunctionCodes:[],...this.defaultWriteFunctionCodes];if(this.keysType===aa.ATTRIBUTES_UPDATES)return t.sort(((e,t)=>e-t));const n=[...this.defaultReadFunctionCodes];return e===ea.BITS&&n.push(...this.bitsReadFunctionCodes),this.keysType===aa.RPC_REQUESTS&&n.push(...t),n.sort(((e,t)=>e-t))}getDefaultFunctionCodes(){return this.keysType===aa.ATTRIBUTES_UPDATES?this.defaultWriteFunctionCodes:this.keysType===aa.RPC_REQUESTS?[...this.defaultReadFunctionCodes,...this.defaultWriteFunctionCodes]:this.defaultReadFunctionCodes}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:fo,deps:[{token:me.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:fo,isStandalone:!0,selector:"tb-modbus-data-keys-panel",inputs:{isMaster:"isMaster",hideNewFields:"hideNewFields",panelTitle:"panelTitle",addKeyTitle:"addKeyTitle",deleteKeyTitle:"deleteKeyTitle",noKeysText:"noKeysText",keysType:"keysType",values:"values",popover:"popover"},outputs:{keysDataApplied:"keysDataApplied"},ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-modbus-keys-panel">\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{\' (\' + keysListFormArray.controls.length + \')\'}}</div>\n    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">\n      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"\n           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByControlId; let $index = index; let last = last;">\n        <div class="tb-form-panel stroked tb-flex">\n          <ng-container [formGroup]="keyControl">\n            <mat-expansion-panel class="tb-settings" [expanded]="last">\n              <mat-expansion-panel-header fxLayout="row wrap">\n                <mat-panel-title>\n                  <div *ngIf="isMaster else tagName" class="title-container" tbTruncateWithTooltip>\n                    {{ keyControl.get(\'tag\').value }}{{ \'-\' }}{{ keyControl.get(\'value\').value }}\n                  </div>\n                  <ng-template #tagName>\n                    <div class="tb-flex">\n                      <div class="title-container tb-flex">{{ \'gateway.key\' | translate }}:\n                        <span class="key-label" tbTruncateWithTooltip>{{ keyControl.get(\'tag\').value }}</span>\n                      </div>\n                      <div class="title-container">{{ \'gateway.address\' | translate }}:\n                        <span class="key-label">{{ keyControl.get(\'address\').value }}</span>\n                      </div>\n                      <div class="title-container">{{ \'gateway.type\' | translate }}:\n                        <span class="key-label">{{ keyControl.get(\'type\').value }}</span>\n                      </div>\n                    </div>\n                  </ng-template>\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n              <ng-template matExpansionPanelContent>\n                <div class="tb-form-hint tb-primary-fill tb-flex center align-center">\n                  {{ \'gateway.hints.modbus.data-keys\' | translate }}\n                  <div matSuffix\n                       class="see-example"\n                       [tb-help-popup]="\'widget/lib/gateway/modbus-functions-data-types_fn\'"\n                       tb-help-popup-placement="left"\n                       [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                  </div>\n                </div>\n                <div class="tb-form-panel stroked">\n                  <div class="tb-form-panel-title" translate>gateway.platform-side</div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.key\' | translate }}" translate>\n                      gateway.key\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="tag" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.key-required\') | translate"\n                                  *ngIf="keyControl.get(\'tag\').hasError(\'required\') &&\n                                           keyControl.get(\'tag\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                </div>\n                <div class="tb-form-panel stroked">\n                  <div class="tb-form-panel-title" translate>gateway.connector-side</div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width" translate>\n                      gateway.type\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select formControlName="type">\n                          <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div *ngIf="withFunctionCode" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width" translate>gateway.function-code</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select formControlName="functionCode">\n                          <mat-option\n                            *ngFor="let code of functionCodesMap.get(keyControl.get(\'id\').value) || defaultFunctionCodes"\n                            [value]="code"\n                          >\n                            {{ ModbusFunctionCodeTranslationsMap.get(code) | translate }}\n                          </mat-option>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.objects-count\' | translate }}" translate>gateway.objects-count</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input\n                          matInput\n                          type="number"\n                          min="1"\n                          max="50000"\n                          name="value"\n                          formControlName="objectsCount"\n                          placeholder="{{ \'gateway.set\' | translate }}"\n                          [readonly]="!ModbusEditableDataTypes.includes(keyControl.get(\'type\').value)"\n                        />\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.objects-count-required\') | translate"\n                                  *ngIf="keyControl.get(\'objectsCount\').hasError(\'required\') &&\n                                           keyControl.get(\'objectsCount\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.address\' | translate }}" translate>gateway.address</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.address-required\') | translate"\n                                  *ngIf="keyControl.get(\'address\').hasError(\'required\') &&\n                                           keyControl.get(\'address\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div *ngIf="showModifiersMap.get(keyControl.get(\'id\').value)" class="tb-form-panel stroked tb-slide-toggle">\n                    <mat-expansion-panel class="tb-settings" [expanded]="enableModifiersControlMap.get(keyControl.get(\'id\').value).value">\n                      <mat-expansion-panel-header fxLayout="row wrap">\n                        <mat-panel-title>\n                          <mat-slide-toggle\n                            fxLayoutAlign="center"\n                            [formControl]="enableModifiersControlMap.get(keyControl.get(\'id\').value)"\n                            class="mat-slide"\n                            (click)="$event.stopPropagation()"\n                          >\n                            <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.modifier\' | translate }}">\n                              {{ \'gateway.modifier\' | translate }}\n                            </mat-label>\n                          </mat-slide-toggle>\n                        </mat-panel-title>\n                      </mat-expansion-panel-header>\n                      <div class="tb-flex no-gap">\n                        <div class="tb-form-row column-xs tb-flex full-width" fxLayoutAlign="space-between center">\n                          <div class="fixed-title-width" translate>gateway.type</div>\n                          <div class="tb-flex no-gap">\n                            <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n                              <mat-select formControlName="modifierType">\n                                <mat-select-trigger>\n                                  <div class="tb-flex align-center">\n                                    <mat-icon class="tb-mat-18" [svgIcon]="ModifierTypesMap.get(keyControl.get(\'modifierType\').value)?.icon"></mat-icon>\n                                    <span>{{ ModifierTypesMap.get(keyControl.get(\'modifierType\').value)?.name | translate}}</span>\n                                  </div>\n                                </mat-select-trigger>\n                                <mat-option *ngFor="let modifierType of modifierTypes" [value]="modifierType">\n                                  <mat-icon class="tb-mat-20" svgIcon="{{ ModifierTypesMap.get(modifierType).icon }}">\n                                  </mat-icon>\n                                  <span>{{ ModifierTypesMap.get(modifierType).name | translate }}</span>\n                                </mat-option>\n                              </mat-select>\n                            </mat-form-field>\n                          </div>\n                        </div>\n                      </div>\n                      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                        <div class="fixed-title-width" translate>gateway.value</div>\n                        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n                          <input matInput required formControlName="modifierValue" step="0.1" type="number"\n                                 placeholder="{{ \'gateway.set\' | translate }}" />\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.modifier-invalid\') | translate"\n                                    *ngIf="keyControl.get(\'modifierValue\').hasError(\'pattern\') &&\n                                           keyControl.get(\'modifierValue\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                        </mat-form-field>\n                      </div>\n                    </mat-expansion-panel>\n                  </div>\n                  <div *ngIf="isMaster" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.value</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="value" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.value-required\') | translate"\n                                  *ngIf="keyControl.get(\'value\').hasError(\'required\') &&\n                                           keyControl.get(\'value\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <tb-report-strategy\n                    *ngIf="withReportStrategy"\n                    [defaultValue]="ReportStrategyDefaultValue.Key"\n                    formControlName="reportStrategy"\n                    [isExpansionMode]="true"\n                  />\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          </ng-container>\n        </div>\n        <button type="button"\n                mat-icon-button\n                (click)="deleteKey($event, $index)"\n                [matTooltip]="deleteKeyTitle | translate"\n                matTooltipPosition="above">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div>\n      <button type="button" mat-stroked-button color="primary" (click)="addKey()">\n        {{ addKeyTitle | translate }}\n      </button>\n    </div>\n  </div>\n  <ng-template #noKeys>\n    <div class="tb-flex no-flex center align-center key-panel">\n      <span class="tb-prompt" translate>{{ noKeysText }}</span>\n    </div>\n  </ng-template>\n  <div class="tb-flex flex-end">\n    <button mat-button\n            color="primary"\n            type="button"\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button\n            color="primary"\n            type="button"\n            (click)="applyKeysData()"\n            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">\n      {{ \'action.apply\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .tb-modbus-keys-panel{width:77vw;max-width:700px}:host .tb-modbus-keys-panel .title-container{width:180px}:host .tb-modbus-keys-panel .key-label{font-weight:400}:host .tb-modbus-keys-panel .key-panel{height:500px;overflow:auto}:host .tb-modbus-keys-panel .tb-form-panel .mat-mdc-icon-button{width:56px;height:56px;padding:16px;color:#0000008a}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:gt.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"directive",type:we.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:$e.MatExpansionPanelContent,selector:"ng-template[matExpansionPanelContent]"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:go,selector:"tb-report-strategy",inputs:["isExpansionMode","defaultValue"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}]})}}e("ModbusDataKeysPanelComponent",fo),He([N()],fo.prototype,"isMaster",void 0),He([N()],fo.prototype,"hideNewFields",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:fo,decorators:[{type:n,args:[{selector:"tb-modbus-data-keys-panel",standalone:!0,imports:[H,D,Ta,go,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-modbus-keys-panel">\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{\' (\' + keysListFormArray.controls.length + \')\'}}</div>\n    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">\n      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"\n           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByControlId; let $index = index; let last = last;">\n        <div class="tb-form-panel stroked tb-flex">\n          <ng-container [formGroup]="keyControl">\n            <mat-expansion-panel class="tb-settings" [expanded]="last">\n              <mat-expansion-panel-header fxLayout="row wrap">\n                <mat-panel-title>\n                  <div *ngIf="isMaster else tagName" class="title-container" tbTruncateWithTooltip>\n                    {{ keyControl.get(\'tag\').value }}{{ \'-\' }}{{ keyControl.get(\'value\').value }}\n                  </div>\n                  <ng-template #tagName>\n                    <div class="tb-flex">\n                      <div class="title-container tb-flex">{{ \'gateway.key\' | translate }}:\n                        <span class="key-label" tbTruncateWithTooltip>{{ keyControl.get(\'tag\').value }}</span>\n                      </div>\n                      <div class="title-container">{{ \'gateway.address\' | translate }}:\n                        <span class="key-label">{{ keyControl.get(\'address\').value }}</span>\n                      </div>\n                      <div class="title-container">{{ \'gateway.type\' | translate }}:\n                        <span class="key-label">{{ keyControl.get(\'type\').value }}</span>\n                      </div>\n                    </div>\n                  </ng-template>\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n              <ng-template matExpansionPanelContent>\n                <div class="tb-form-hint tb-primary-fill tb-flex center align-center">\n                  {{ \'gateway.hints.modbus.data-keys\' | translate }}\n                  <div matSuffix\n                       class="see-example"\n                       [tb-help-popup]="\'widget/lib/gateway/modbus-functions-data-types_fn\'"\n                       tb-help-popup-placement="left"\n                       [tb-help-popup-style]="{maxWidth: \'970px\'}">\n                  </div>\n                </div>\n                <div class="tb-form-panel stroked">\n                  <div class="tb-form-panel-title" translate>gateway.platform-side</div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.key\' | translate }}" translate>\n                      gateway.key\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="tag" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.key-required\') | translate"\n                                  *ngIf="keyControl.get(\'tag\').hasError(\'required\') &&\n                                           keyControl.get(\'tag\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                </div>\n                <div class="tb-form-panel stroked">\n                  <div class="tb-form-panel-title" translate>gateway.connector-side</div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width" translate>\n                      gateway.type\n                    </div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select formControlName="type">\n                          <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div *ngIf="withFunctionCode" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width" translate>gateway.function-code</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <mat-select formControlName="functionCode">\n                          <mat-option\n                            *ngFor="let code of functionCodesMap.get(keyControl.get(\'id\').value) || defaultFunctionCodes"\n                            [value]="code"\n                          >\n                            {{ ModbusFunctionCodeTranslationsMap.get(code) | translate }}\n                          </mat-option>\n                        </mat-select>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.objects-count\' | translate }}" translate>gateway.objects-count</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input\n                          matInput\n                          type="number"\n                          min="1"\n                          max="50000"\n                          name="value"\n                          formControlName="objectsCount"\n                          placeholder="{{ \'gateway.set\' | translate }}"\n                          [readonly]="!ModbusEditableDataTypes.includes(keyControl.get(\'type\').value)"\n                        />\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.objects-count-required\') | translate"\n                                  *ngIf="keyControl.get(\'objectsCount\').hasError(\'required\') &&\n                                           keyControl.get(\'objectsCount\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.address\' | translate }}" translate>gateway.address</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.address-required\') | translate"\n                                  *ngIf="keyControl.get(\'address\').hasError(\'required\') &&\n                                           keyControl.get(\'address\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <div *ngIf="showModifiersMap.get(keyControl.get(\'id\').value)" class="tb-form-panel stroked tb-slide-toggle">\n                    <mat-expansion-panel class="tb-settings" [expanded]="enableModifiersControlMap.get(keyControl.get(\'id\').value).value">\n                      <mat-expansion-panel-header fxLayout="row wrap">\n                        <mat-panel-title>\n                          <mat-slide-toggle\n                            fxLayoutAlign="center"\n                            [formControl]="enableModifiersControlMap.get(keyControl.get(\'id\').value)"\n                            class="mat-slide"\n                            (click)="$event.stopPropagation()"\n                          >\n                            <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.modifier\' | translate }}">\n                              {{ \'gateway.modifier\' | translate }}\n                            </mat-label>\n                          </mat-slide-toggle>\n                        </mat-panel-title>\n                      </mat-expansion-panel-header>\n                      <div class="tb-flex no-gap">\n                        <div class="tb-form-row column-xs tb-flex full-width" fxLayoutAlign="space-between center">\n                          <div class="fixed-title-width" translate>gateway.type</div>\n                          <div class="tb-flex no-gap">\n                            <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">\n                              <mat-select formControlName="modifierType">\n                                <mat-select-trigger>\n                                  <div class="tb-flex align-center">\n                                    <mat-icon class="tb-mat-18" [svgIcon]="ModifierTypesMap.get(keyControl.get(\'modifierType\').value)?.icon"></mat-icon>\n                                    <span>{{ ModifierTypesMap.get(keyControl.get(\'modifierType\').value)?.name | translate}}</span>\n                                  </div>\n                                </mat-select-trigger>\n                                <mat-option *ngFor="let modifierType of modifierTypes" [value]="modifierType">\n                                  <mat-icon class="tb-mat-20" svgIcon="{{ ModifierTypesMap.get(modifierType).icon }}">\n                                  </mat-icon>\n                                  <span>{{ ModifierTypesMap.get(modifierType).name | translate }}</span>\n                                </mat-option>\n                              </mat-select>\n                            </mat-form-field>\n                          </div>\n                        </div>\n                      </div>\n                      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                        <div class="fixed-title-width" translate>gateway.value</div>\n                        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">\n                          <input matInput required formControlName="modifierValue" step="0.1" type="number"\n                                 placeholder="{{ \'gateway.set\' | translate }}" />\n                          <mat-icon matSuffix\n                                    matTooltipPosition="above"\n                                    matTooltipClass="tb-error-tooltip"\n                                    [matTooltip]="(\'gateway.modifier-invalid\') | translate"\n                                    *ngIf="keyControl.get(\'modifierValue\').hasError(\'pattern\') &&\n                                           keyControl.get(\'modifierValue\').touched"\n                                    class="tb-error">\n                            warning\n                          </mat-icon>\n                        </mat-form-field>\n                      </div>\n                    </mat-expansion-panel>\n                  </div>\n                  <div *ngIf="isMaster" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                    <div class="fixed-title-width tb-required" translate>gateway.value</div>\n                    <div class="tb-flex no-gap">\n                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                        <input matInput name="value" formControlName="value" placeholder="{{ \'gateway.set\' | translate }}"/>\n                        <mat-icon matSuffix\n                                  matTooltipPosition="above"\n                                  matTooltipClass="tb-error-tooltip"\n                                  [matTooltip]="(\'gateway.value-required\') | translate"\n                                  *ngIf="keyControl.get(\'value\').hasError(\'required\') &&\n                                           keyControl.get(\'value\').touched"\n                                  class="tb-error">\n                          warning\n                        </mat-icon>\n                      </mat-form-field>\n                    </div>\n                  </div>\n                  <tb-report-strategy\n                    *ngIf="withReportStrategy"\n                    [defaultValue]="ReportStrategyDefaultValue.Key"\n                    formControlName="reportStrategy"\n                    [isExpansionMode]="true"\n                  />\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          </ng-container>\n        </div>\n        <button type="button"\n                mat-icon-button\n                (click)="deleteKey($event, $index)"\n                [matTooltip]="deleteKeyTitle | translate"\n                matTooltipPosition="above">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div>\n      <button type="button" mat-stroked-button color="primary" (click)="addKey()">\n        {{ addKeyTitle | translate }}\n      </button>\n    </div>\n  </div>\n  <ng-template #noKeys>\n    <div class="tb-flex no-flex center align-center key-panel">\n      <span class="tb-prompt" translate>{{ noKeysText }}</span>\n    </div>\n  </ng-template>\n  <div class="tb-flex flex-end">\n    <button mat-button\n            color="primary"\n            type="button"\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button\n            color="primary"\n            type="button"\n            (click)="applyKeysData()"\n            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">\n      {{ \'action.apply\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .tb-modbus-keys-panel{width:77vw;max-width:700px}:host .tb-modbus-keys-panel .title-container{width:180px}:host .tb-modbus-keys-panel .key-label{font-weight:400}:host .tb-modbus-keys-panel .key-panel{height:500px;overflow:auto}:host .tb-modbus-keys-panel .tb-form-panel .mat-mdc-icon-button{width:56px;height:56px;padding:16px;color:#0000008a}\n']}]}],ctorParameters:()=>[{type:me.UntypedFormBuilder}],propDecorators:{isMaster:[{type:a}],hideNewFields:[{type:a}],panelTitle:[{type:a}],addKeyTitle:[{type:a}],deleteKeyTitle:[{type:a}],noKeysText:[{type:a}],keysType:[{type:a}],values:[{type:a}],popover:[{type:a}],keysDataApplied:[{type:l}]}});class yo{constructor(e,t,n,a,o){this.fb=e,this.popoverService=t,this.renderer=n,this.viewContainerRef=a,this.cdr=o,this.singleMode=!1,this.hideNewFields=!1,this.disabled=!1,this.modbusRegisterTypes=Object.values(Xn),this.modbusValueKeys=Object.values(aa),this.ModbusValuesTranslationsMap=Zn,this.ModbusValueKey=aa,this.destroy$=new Se}ngOnInit(){this.initializeValuesFormGroup(),this.observeValuesChanges()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){if(this.singleMode)this.valuesFormGroup.setValue(this.getSingleRegisterState(e),{emitEvent:!1});else{const{holding_registers:t,coils_initializer:n,input_registers:a,discrete_inputs:o}=e;this.valuesFormGroup.setValue({holding_registers:this.getSingleRegisterState(t),coils_initializer:this.getSingleRegisterState(n),input_registers:this.getSingleRegisterState(a),discrete_inputs:this.getSingleRegisterState(o)},{emitEvent:!1})}this.cdr.markForCheck()}validate(){return this.valuesFormGroup.valid?null:{valuesFormGroup:{valid:!1}}}setDisabledState(e){this.disabled=e,this.cdr.markForCheck()}getValueGroup(e,t){return t?this.valuesFormGroup.get(t).get(e):this.valuesFormGroup.get(e)}manageKeys(e,t,n,a){e.stopPropagation();const o=t._elementRef.nativeElement;if(this.popoverService.hasPopover(o))return void this.popoverService.hidePopover(o);const i=this.getValueGroup(n,a),r={values:i.value,isMaster:!this.singleMode,keysType:n,panelTitle:oa.get(n),addKeyTitle:ia.get(n),deleteKeyTitle:ra.get(n),noKeysText:sa.get(n),hideNewFields:this.hideNewFields},s=this.popoverService.displayPopover(o,this.renderer,this.viewContainerRef,fo,"leftBottom",!1,null,r,{},{},{},!0);s.tbComponentRef.instance.popover=s,s.tbComponentRef.instance.keysDataApplied.pipe(Ne(this.destroy$)).subscribe((e=>{s.hide(),i.patchValue(e),i.markAsDirty(),this.cdr.markForCheck()}))}initializeValuesFormGroup(){const e=()=>this.fb.group(this.modbusValueKeys.reduce(((e,t)=>(e[t]=this.fb.control([[],[]]),e)),{}));this.singleMode?this.valuesFormGroup=e():this.valuesFormGroup=this.fb.group(this.modbusRegisterTypes.reduce(((t,n)=>(t[n]=e(),t)),{}))}observeValuesChanges(){this.valuesFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}getSingleRegisterState(e){return{attributes:e?.attributes??[],timeseries:e?.timeseries??[],attributeUpdates:e?.attributeUpdates??[],rpc:e?.rpc??[]}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:yo,deps:[{token:me.FormBuilder},{token:ft.TbPopoverService},{token:t.Renderer2},{token:t.ViewContainerRef},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:yo,isStandalone:!0,selector:"tb-modbus-values",inputs:{singleMode:"singleMode",hideNewFields:"hideNewFields"},providers:[{provide:ge,useExisting:m((()=>yo)),multi:!0},{provide:fe,useExisting:m((()=>yo)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<ng-container *ngIf="singleMode else multipleView">\n  <div [formGroup]="valuesFormGroup" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">\n    <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: null}"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #multipleView>\n  <mat-tab-group [formGroup]="valuesFormGroup">\n    <mat-tab *ngFor="let register of modbusRegisterTypes" label="{{ ModbusValuesTranslationsMap.get(register) | translate }}">\n      <div [formGroup]="valuesFormGroup.get(register)" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">\n        <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: register}"></ng-container>\n      </div>\n    </mat-tab>\n  </mat-tab-group>\n</ng-template>\n\n<ng-template #singleView let-register>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.attributes</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES, register).value" class="tb-flex">\n        <mat-chip *ngFor="let attribute of getValueGroup(ModbusValueKey.ATTRIBUTES, register).value">\n          {{ attribute.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              color="primary"\n              [disabled]="disabled"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #attributesButton\n              (click)="manageKeys($event, attributesButton, ModbusValueKey.ATTRIBUTES, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.timeseries</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.TIMESERIES, register).value">\n        <mat-chip *ngFor="let telemetry of getValueGroup(ModbusValueKey.TIMESERIES, register).value">\n          {{ telemetry.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              color="primary"\n              [disabled]="disabled"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #telemetryButton\n              (click)="manageKeys($event, telemetryButton, ModbusValueKey.TIMESERIES, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.attribute-updates</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register).value" class="tb-flex">\n        <mat-chip *ngFor="let attributeUpdate of getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register).value">\n          {{ attributeUpdate.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              [disabled]="disabled"\n              color="primary"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #attributesUpdatesButton\n              (click)="manageKeys($event, attributesUpdatesButton, ModbusValueKey.ATTRIBUTES_UPDATES, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.rpc-requests</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.RPC_REQUESTS, register).value" class="tb-flex">\n        <mat-chip *ngFor="let rpcRequest of getValueGroup(ModbusValueKey.RPC_REQUESTS, register).value">\n          {{ rpcRequest.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              color="primary"\n              [disabled]="disabled"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #rpcRequestsButton\n              (click)="manageKeys($event, rpcRequestsButton, ModbusValueKey.RPC_REQUESTS, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n',styles:['@charset "UTF-8";:host ::ng-deep .mat-mdc-tab-body-wrapper{min-height:320px}::ng-deep .mdc-evolution-chip-set__chips{align-items:center}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"component",type:yt.MatChip,selector:"mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]",inputs:["role","id","aria-label","aria-description","value","color","removable","highlighted","disableRipple","disabled"],outputs:["removed","destroyed"],exportAs:["matChip"]},{kind:"component",type:yt.MatChipListbox,selector:"mat-chip-listbox",inputs:["multiple","aria-orientation","selectable","compareWith","required","hideSingleSelectionIndicator","value"],outputs:["change"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:bt.TbIconComponent,selector:"tb-icon",inputs:["color"],exportAs:["tbIcon"]},{kind:"directive",type:ka,selector:"[tb-ellipsis-chip-list]",inputs:["tb-ellipsis-chip-list"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ModbusValuesComponent",yo),He([N()],yo.prototype,"singleMode",void 0),He([N()],yo.prototype,"hideNewFields",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:yo,decorators:[{type:n,args:[{selector:"tb-modbus-values",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>yo)),multi:!0},{provide:fe,useExisting:m((()=>yo)),multi:!0}],standalone:!0,imports:[H,D,ka],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<ng-container *ngIf="singleMode else multipleView">\n  <div [formGroup]="valuesFormGroup" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">\n    <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: null}"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #multipleView>\n  <mat-tab-group [formGroup]="valuesFormGroup">\n    <mat-tab *ngFor="let register of modbusRegisterTypes" label="{{ ModbusValuesTranslationsMap.get(register) | translate }}">\n      <div [formGroup]="valuesFormGroup.get(register)" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">\n        <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: register}"></ng-container>\n      </div>\n    </mat-tab>\n  </mat-tab-group>\n</ng-template>\n\n<ng-template #singleView let-register>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.attributes</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES, register).value" class="tb-flex">\n        <mat-chip *ngFor="let attribute of getValueGroup(ModbusValueKey.ATTRIBUTES, register).value">\n          {{ attribute.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              color="primary"\n              [disabled]="disabled"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #attributesButton\n              (click)="manageKeys($event, attributesButton, ModbusValueKey.ATTRIBUTES, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.timeseries</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.TIMESERIES, register).value">\n        <mat-chip *ngFor="let telemetry of getValueGroup(ModbusValueKey.TIMESERIES, register).value">\n          {{ telemetry.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              color="primary"\n              [disabled]="disabled"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #telemetryButton\n              (click)="manageKeys($event, telemetryButton, ModbusValueKey.TIMESERIES, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.attribute-updates</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register).value" class="tb-flex">\n        <mat-chip *ngFor="let attributeUpdate of getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register).value">\n          {{ attributeUpdate.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              [disabled]="disabled"\n              color="primary"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #attributesUpdatesButton\n              (click)="manageKeys($event, attributesUpdatesButton, ModbusValueKey.ATTRIBUTES_UPDATES, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex">\n    <div class="fixed-title-width" translate>gateway.rpc-requests</div>\n    <div class="tb-flex ellipsis-chips-container">\n      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.RPC_REQUESTS, register).value" class="tb-flex">\n        <mat-chip *ngFor="let rpcRequest of getValueGroup(ModbusValueKey.RPC_REQUESTS, register).value">\n          {{ rpcRequest.tag }}\n        </mat-chip>\n        <mat-chip class="mat-mdc-chip ellipsis-chip">\n          <label class="ellipsis-text"></label>\n        </mat-chip>\n      </mat-chip-listbox>\n      <button type="button"\n              mat-icon-button\n              color="primary"\n              [disabled]="disabled"\n              matTooltip="{{ \'action.edit\' | translate }}"\n              matTooltipPosition="above"\n              #rpcRequestsButton\n              (click)="manageKeys($event, rpcRequestsButton, ModbusValueKey.RPC_REQUESTS, register)">\n        <tb-icon matButtonIcon>edit</tb-icon>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n',styles:['@charset "UTF-8";:host ::ng-deep .mat-mdc-tab-body-wrapper{min-height:320px}::ng-deep .mdc-evolution-chip-set__chips{align-items:center}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:ft.TbPopoverService},{type:t.Renderer2},{type:t.ViewContainerRef},{type:t.ChangeDetectorRef}],propDecorators:{singleMode:[{type:a}],hideNewFields:[{type:a}]}});class bo{constructor(e,t){this.fb=e,this.cdr=t,this.isMaster=!1,this.disabled=!1,this.destroy$=new Se,this.securityConfigFormGroup=this.fb.group({certfile:["",[ue.pattern(kt)]],keyfile:["",[ue.pattern(kt)]],password:["",[ue.pattern(kt)]],server_hostname:["",[ue.pattern(kt)]],reqclicert:[{value:!1,disabled:!0}]}),this.observeValueChanges()}ngOnChanges(){this.updateMasterEnabling()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}setDisabledState(e){this.disabled=e,this.disabled?this.securityConfigFormGroup.disable({emitEvent:!1}):this.securityConfigFormGroup.enable({emitEvent:!1}),this.updateMasterEnabling(),this.cdr.markForCheck()}validate(){return this.securityConfigFormGroup.valid?null:{securityConfigFormGroup:{valid:!1}}}writeValue(e){const{certfile:t,password:n,keyfile:a,server_hostname:o}=e,i={certfile:t??"",password:n??"",keyfile:a??"",server_hostname:o??"",reqclicert:!!e.reqclicert};this.securityConfigFormGroup.reset(i,{emitEvent:!1})}updateMasterEnabling(){this.isMaster?(this.disabled||this.securityConfigFormGroup.get("reqclicert").enable({emitEvent:!1}),this.securityConfigFormGroup.get("server_hostname").disable({emitEvent:!1})):(this.disabled||this.securityConfigFormGroup.get("server_hostname").enable({emitEvent:!1}),this.securityConfigFormGroup.get("reqclicert").disable({emitEvent:!1}))}observeValueChanges(){this.securityConfigFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:bo,deps:[{token:me.FormBuilder},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:bo,isStandalone:!0,selector:"tb-modbus-security-config",inputs:{isMaster:"isMaster"},providers:[{provide:ge,useExisting:m((()=>bo)),multi:!0},{provide:fe,useExisting:m((()=>bo)),multi:!0}],usesOnChanges:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding" [formGroup]="securityConfigFormGroup">\n  <div class="tb-form-hint tb-primary-fill">{{ \'gateway.hints.path-in-os\' | translate }}</div>\n  <div class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" tbTruncateWithTooltip tb-hint-tooltip-icon="{{ \'gateway.hints.ca-cert\' | translate }}">\n      <span tbTruncateWithTooltip translate>gateway.client-cert-path</span>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="certfile" placeholder="{{ \'gateway.set\' | translate }}"/>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.private-key-path\' | translate }}">\n      <span tbTruncateWithTooltip translate>gateway.private-key-path</span>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="keyfile" placeholder="{{ \'gateway.set\' | translate }}"/>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" translate>gateway.password</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <div class="tb-flex no-gap align-center fill-height" matSuffix>\n          <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n        </div>\n      </mat-form-field>\n    </div>\n  </div>\n  <div *ngIf="!isMaster" class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" translate>gateway.server-hostname</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="server_hostname" placeholder="{{ \'gateway.set\' | translate }}"/>\n      </mat-form-field>\n    </div>\n  </div>\n  <div *ngIf="isMaster" class="tb-form-row" fxLayoutAlign="space-between center">\n    <mat-slide-toggle class="mat-slide" formControlName="reqclicert">\n      <mat-label>\n        {{ \'gateway.request-client-certificate\' | translate }}\n      </mat-label>\n    </mat-slide-toggle>\n  </div>\n</div>\n',dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:tt.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}He([N()],bo.prototype,"isMaster",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:bo,decorators:[{type:n,args:[{selector:"tb-modbus-security-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>bo)),multi:!0},{provide:fe,useExisting:m((()=>bo)),multi:!0}],standalone:!0,imports:[H,D,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-form-panel no-border no-padding" [formGroup]="securityConfigFormGroup">\n  <div class="tb-form-hint tb-primary-fill">{{ \'gateway.hints.path-in-os\' | translate }}</div>\n  <div class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" tbTruncateWithTooltip tb-hint-tooltip-icon="{{ \'gateway.hints.ca-cert\' | translate }}">\n      <span tbTruncateWithTooltip translate>gateway.client-cert-path</span>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="certfile" placeholder="{{ \'gateway.set\' | translate }}"/>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.private-key-path\' | translate }}">\n      <span tbTruncateWithTooltip translate>gateway.private-key-path</span>\n    </div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="keyfile" placeholder="{{ \'gateway.set\' | translate }}"/>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" translate>gateway.password</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput type="password" name="value" formControlName="password" placeholder="{{ \'gateway.set\' | translate }}"/>\n        <div class="tb-flex no-gap align-center fill-height" matSuffix>\n          <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>\n        </div>\n      </mat-form-field>\n    </div>\n  </div>\n  <div *ngIf="!isMaster" class="tb-form-row space-between tb-flex fill-width">\n    <div class="fixed-title-width" translate>gateway.server-hostname</div>\n    <div class="tb-flex no-gap">\n      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n        <input matInput name="value" formControlName="server_hostname" placeholder="{{ \'gateway.set\' | translate }}"/>\n      </mat-form-field>\n    </div>\n  </div>\n  <div *ngIf="isMaster" class="tb-form-row" fxLayoutAlign="space-between center">\n    <mat-slide-toggle class="mat-slide" formControlName="reqclicert">\n      <mat-label>\n        {{ \'gateway.request-client-certificate\' | translate }}\n      </mat-label>\n    </mat-slide-toggle>\n  </div>\n</div>\n'}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:t.ChangeDetectorRef}],propDecorators:{isMaster:[{type:a}]}});class ho extends P{constructor(e,t,n,a,o){super(t,n,o),this.fb=e,this.store=t,this.router=n,this.data=a,this.dialogRef=o,this.portLimits=Et,this.modbusProtocolTypes=Object.values(Hn),this.modbusMethodTypes=Object.values(Wn),this.modbusSerialMethodTypes=Object.values(jn),this.modbusParities=Object.values(Yn),this.modbusByteSizes=$n,this.modbusBaudrates=la,this.modbusOrderType=Object.values(Jn),this.ModbusProtocolType=Hn,this.ModbusParityLabelsMap=Qn,this.ModbusProtocolLabelsMap=zn,this.ModbusMethodLabelsMap=Kn,this.ReportStrategyDefaultValue=ln,this.modbusHelpLink=v+"/docs/iot-gateway/config/modbus/#section-master-description-and-configuration-parameters",this.serialSpecificControlKeys=["serialPort","baudrate","stopbits","bytesize","parity","strict"],this.tcpUdpSpecificControlKeys=["port","security","host"],this.destroy$=new Se,this.showSecurityControl=this.fb.control(!1),this.initializeSlaveFormGroup(),this.updateSlaveFormGroup(),this.updateControlsEnabling(this.data.value.type),this.observeTypeChange(),this.observeShowSecurity(),this.showSecurityControl.patchValue(!!this.data.value.security&&!ee(this.data.value.security,{}))}get protocolType(){return this.slaveConfigFormGroup.get("type").value}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}cancel(){this.dialogRef.close(null)}add(){this.slaveConfigFormGroup.valid&&this.dialogRef.close(this.getSlaveResultData())}initializeSlaveFormGroup(){this.slaveConfigFormGroup=this.fb.group({type:[Hn.TCP],host:["",[ue.required,ue.pattern(kt)]],port:[null,[ue.required,ue.min(Et.MIN),ue.max(Et.MAX)]],serialPort:["",[ue.required,ue.pattern(kt)]],method:[Wn.SOCKET,[ue.required]],baudrate:[this.modbusBaudrates[0]],stopbits:[1],bytesize:[$n[0]],parity:[Yn.None],strict:[!0],unitId:[null,[ue.required]],deviceName:["",[ue.required,ue.pattern(kt)]],deviceType:["",[ue.required,ue.pattern(kt)]],timeout:[35],byteOrder:[Jn.BIG],wordOrder:[Jn.BIG],retries:[!0],retryOnEmpty:[!0],retryOnInvalid:[!0],pollPeriod:[5e3,[ue.required]],connectAttemptTimeMs:[5e3,[ue.required]],connectAttemptCount:[5,[ue.required]],waitAfterFailedAttemptsMs:[3e5,[ue.required]],values:[{}],security:[{}]}),this.addFieldsToFormGroup()}updateSlaveFormGroup(){this.slaveConfigFormGroup.patchValue({...this.data.value,port:this.data.value.type===Hn.Serial?null:this.data.value.port,serialPort:this.data.value.type===Hn.Serial?this.data.value.port:"",values:{attributes:this.data.value.attributes??[],timeseries:this.data.value.timeseries??[],attributeUpdates:this.data.value.attributeUpdates??[],rpc:this.data.value.rpc??[]}})}observeTypeChange(){this.slaveConfigFormGroup.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateControlsEnabling(e),this.updateMethodType(e)}))}updateMethodType(e){this.slaveConfigFormGroup.get("method").value!==Wn.RTU&&this.slaveConfigFormGroup.get("method").patchValue(e===Hn.Serial?jn.ASCII:Wn.SOCKET,{emitEvent:!1})}updateControlsEnabling(e){const[t,n]=e===Hn.Serial?[this.serialSpecificControlKeys,this.tcpUdpSpecificControlKeys]:[this.tcpUdpSpecificControlKeys,this.serialSpecificControlKeys];t.forEach((e=>this.slaveConfigFormGroup.get(e)?.enable({emitEvent:!1}))),n.forEach((e=>this.slaveConfigFormGroup.get(e)?.disable({emitEvent:!1}))),this.updateSecurityEnabling(this.showSecurityControl.value)}observeShowSecurity(){this.showSecurityControl.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.updateSecurityEnabling(e)))}updateSecurityEnabling(e){e&&this.protocolType!==Hn.Serial?this.slaveConfigFormGroup.get("security").enable({emitEvent:!1}):this.slaveConfigFormGroup.get("security").disable({emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ho,deps:[{token:me.FormBuilder},{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef}],target:t.ɵɵFactoryTarget.Directive})}static{this.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"18.2.6",type:ho,usesInheritance:!0,ngImport:t})}}e("ModbusSlaveDialogAbstract",ho),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ho,decorators:[{type:s}],ctorParameters:()=>[{type:me.FormBuilder},{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef}]});class xo extends ho{constructor(e,t,n,a,o){super(e,t,n,a,o),this.fb=e,this.store=t,this.router=n,this.data=a,this.dialogRef=o}getSlaveResultData(){const{values:e,type:t,serialPort:n,...a}=this.slaveConfigFormGroup.value,o={...a,type:t,...e};return t===Hn.Serial&&(o.port=n),o.reportStrategy||delete o.reportStrategy,o}addFieldsToFormGroup(){this.slaveConfigFormGroup.addControl("reportStrategy",this.fb.control(null))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:xo,deps:[{token:me.FormBuilder},{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:xo,isStandalone:!0,selector:"tb-modbus-slave-dialog",usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="slaves-config-container">\n  <mat-toolbar color="primary">\n    <h2>{{ \'gateway.server-slave\' | translate }}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="modbusHelpLink"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">\n    <div class="stroked tb-form-panel">\n      <div class="tb-form-panel no-border no-padding padding-top">\n        <div class="tb-flex row space-between align-center no-gap fill-width">\n          <div class="fixed-title-width" translate>gateway.server-connection</div>\n          <tb-toggle-select formControlName="type" appearance="fill">\n            <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>\n          </tb-toggle-select>\n        </div>\n        <div class="tb-form-panel no-border no-padding padding-top">\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.host\' | translate }}" translate>gateway.host</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.host-required\') | translate"\n                          *ngIf="slaveConfigFormGroup.get(\'host\').hasError(\'required\')\n                                           && slaveConfigFormGroup.get(\'host\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.port\' | translate }}" translate>gateway.port</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n                       name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="slaveConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                          *ngIf="(slaveConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                            slaveConfigFormGroup.get(\'port\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <ng-template #serialPort>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.serial-port\' | translate }}" translate>gateway.port</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="serialPort" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  <mat-icon matSuffix\n                            matTooltipPosition="above"\n                            matTooltipClass="tb-error-tooltip"\n                            [matTooltip]="\'gateway.port-required\' | translate"\n                            *ngIf="slaveConfigFormGroup.get(\'serialPort\').hasError(\'required\') &&\n                                            slaveConfigFormGroup.get(\'serialPort\').touched"\n                            class="tb-error">\n                    warning\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-template>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.framer-type\' | translate }}" translate>\n              gateway.method\n            </div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="method">\n                  <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"\n                              [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.baudrate\' | translate }}" translate>gateway.baudrate</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="baudrate">\n                  <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.bytesize\' | translate }}" translate>gateway.bytesize</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="bytesize">\n                  <mat-option *ngFor="let size of modbusByteSizes" [value]="size">{{ size }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.stopbits\' | translate }}"  translate>gateway.stopbits</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ \'gateway.set\' | translate }}"/>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.parity\' | translate }}" translate>gateway.parity</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="parity">\n                  <mat-option *ngFor="let parity of modbusParities" [value]="parity">{{ ModbusParityLabelsMap.get(parity) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row" fxLayoutAlign="space-between center">\n            <mat-slide-toggle class="mat-slide" formControlName="strict">\n              <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.strict\' | translate }}">\n                {{ \'gateway.strict\' | translate }}\n              </mat-label>\n            </mat-slide-toggle>\n          </div>\n        </ng-container>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.unit-id\' | translate }}" translate>gateway.unit-id</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.unit-id-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'unitId\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'unitId\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-name</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceName" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-name-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceName\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceName\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceType" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-profile-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceType\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceType\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row" fxLayoutAlign="space-between center">\n          <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">\n            <mat-label>\n              {{ \'gateway.send-data-on-change\' | translate }}\n            </mat-label>\n          </mat-slide-toggle>\n        </div>\n        <ng-template #reportStrategy>\n          <tb-report-strategy [defaultValue]="ReportStrategyDefaultValue.Device" formControlName="reportStrategy" [isExpansionMode]="true"/>\n        </ng-template>\n        <div class="tb-form-panel stroked">\n          <mat-expansion-panel class="tb-settings">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class="tb-form-panel no-border no-padding padding-top">\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connection-timeout\' | translate }}" translate>gateway.connection-timeout</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.byte-order\' | translate }}" translate>gateway.byte-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="byteOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.word-order\' | translate }}" translate>gateway.word-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="wordOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">\n                <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">\n                  <mat-expansion-panel-header fxLayout="row wrap">\n                    <mat-panel-title>\n                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">\n                        <mat-label>\n                          {{ \'gateway.tls-connection\' | translate }}\n                        </mat-label>\n                      </mat-slide-toggle>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>\n                </mat-expansion-panel>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retries">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries\' | translate }}">\n                    {{ \'gateway.retries\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-empty\' | translate }}">\n                    {{ \'gateway.retries-on-empty\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-invalid\' | translate }}">\n                    {{ \'gateway.retries-on-invalid\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.poll-period\' | translate }}">\n                  <span tbTruncateWithTooltip translate>\n                    gateway.poll-period\n                  </span>\n                </div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-time\' | translate }}" translate>gateway.connect-attempt-time</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-count\' | translate }}" translate>gateway.connect-attempt-count</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.wait-after-failed-attempts\' | translate }}" translate>gateway.wait-after-failed-attempts</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n        </div>\n        <div class="tb-form-panel stroked">\n          <tb-modbus-values [singleMode]="true" [hideNewFields]="data.hideNewFields" formControlName="values"></tb-modbus-values>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="slaveConfigFormGroup.invalid || !slaveConfigFormGroup.dirty">\n      {{ data.buttonTitle | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .slaves-config-container{width:80vw;max-width:900px}:host .slave-name-label{margin-right:16px;color:#000000de}:host .fixed-title-width-260{min-width:260px}:host ::ng-deep .security-config .fixed-title-width{min-width:230px}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:dt.HelpComponent,selector:"[tb-help]",inputs:["tb-help"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:Je.MatDialogActions,selector:"[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",inputs:["align"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:yo,selector:"tb-modbus-values",inputs:["singleMode","hideNewFields"]},{kind:"component",type:bo,selector:"tb-modbus-security-config",inputs:["isMaster"]},{kind:"pipe",type:wa,name:"getGatewayPortTooltip"},{kind:"component",type:go,selector:"tb-report-strategy",inputs:["isExpansionMode","defaultValue"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ModbusSlaveDialogComponent",xo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:xo,decorators:[{type:n,args:[{selector:"tb-modbus-slave-dialog",changeDetection:d.OnPush,standalone:!0,imports:[H,D,yo,bo,wa,go,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="slaves-config-container">\n  <mat-toolbar color="primary">\n    <h2>{{ \'gateway.server-slave\' | translate }}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="modbusHelpLink"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">\n    <div class="stroked tb-form-panel">\n      <div class="tb-form-panel no-border no-padding padding-top">\n        <div class="tb-flex row space-between align-center no-gap fill-width">\n          <div class="fixed-title-width" translate>gateway.server-connection</div>\n          <tb-toggle-select formControlName="type" appearance="fill">\n            <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>\n          </tb-toggle-select>\n        </div>\n        <div class="tb-form-panel no-border no-padding padding-top">\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.host\' | translate }}" translate>gateway.host</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.host-required\') | translate"\n                          *ngIf="slaveConfigFormGroup.get(\'host\').hasError(\'required\')\n                                           && slaveConfigFormGroup.get(\'host\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.port\' | translate }}" translate>gateway.port</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n                       name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="slaveConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                          *ngIf="(slaveConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                            slaveConfigFormGroup.get(\'port\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <ng-template #serialPort>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.serial-port\' | translate }}" translate>gateway.port</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="serialPort" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  <mat-icon matSuffix\n                            matTooltipPosition="above"\n                            matTooltipClass="tb-error-tooltip"\n                            [matTooltip]="\'gateway.port-required\' | translate"\n                            *ngIf="slaveConfigFormGroup.get(\'serialPort\').hasError(\'required\') &&\n                                            slaveConfigFormGroup.get(\'serialPort\').touched"\n                            class="tb-error">\n                    warning\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-template>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.framer-type\' | translate }}" translate>\n              gateway.method\n            </div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="method">\n                  <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"\n                              [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.baudrate\' | translate }}" translate>gateway.baudrate</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="baudrate">\n                  <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.bytesize\' | translate }}" translate>gateway.bytesize</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="bytesize">\n                  <mat-option *ngFor="let size of modbusByteSizes" [value]="size">{{ size }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.stopbits\' | translate }}"  translate>gateway.stopbits</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ \'gateway.set\' | translate }}"/>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.parity\' | translate }}" translate>gateway.parity</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="parity">\n                  <mat-option *ngFor="let parity of modbusParities" [value]="parity">{{ ModbusParityLabelsMap.get(parity) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row" fxLayoutAlign="space-between center">\n            <mat-slide-toggle class="mat-slide" formControlName="strict">\n              <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.strict\' | translate }}">\n                {{ \'gateway.strict\' | translate }}\n              </mat-label>\n            </mat-slide-toggle>\n          </div>\n        </ng-container>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.unit-id\' | translate }}" translate>gateway.unit-id</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.unit-id-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'unitId\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'unitId\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-name</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceName" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-name-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceName\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceName\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceType" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-profile-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceType\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceType\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row" fxLayoutAlign="space-between center">\n          <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">\n            <mat-label>\n              {{ \'gateway.send-data-on-change\' | translate }}\n            </mat-label>\n          </mat-slide-toggle>\n        </div>\n        <ng-template #reportStrategy>\n          <tb-report-strategy [defaultValue]="ReportStrategyDefaultValue.Device" formControlName="reportStrategy" [isExpansionMode]="true"/>\n        </ng-template>\n        <div class="tb-form-panel stroked">\n          <mat-expansion-panel class="tb-settings">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class="tb-form-panel no-border no-padding padding-top">\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connection-timeout\' | translate }}" translate>gateway.connection-timeout</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.byte-order\' | translate }}" translate>gateway.byte-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="byteOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.word-order\' | translate }}" translate>gateway.word-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="wordOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">\n                <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">\n                  <mat-expansion-panel-header fxLayout="row wrap">\n                    <mat-panel-title>\n                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">\n                        <mat-label>\n                          {{ \'gateway.tls-connection\' | translate }}\n                        </mat-label>\n                      </mat-slide-toggle>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>\n                </mat-expansion-panel>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retries">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries\' | translate }}">\n                    {{ \'gateway.retries\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-empty\' | translate }}">\n                    {{ \'gateway.retries-on-empty\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-invalid\' | translate }}">\n                    {{ \'gateway.retries-on-invalid\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.poll-period\' | translate }}">\n                  <span tbTruncateWithTooltip translate>\n                    gateway.poll-period\n                  </span>\n                </div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-time\' | translate }}" translate>gateway.connect-attempt-time</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-count\' | translate }}" translate>gateway.connect-attempt-count</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.wait-after-failed-attempts\' | translate }}" translate>gateway.wait-after-failed-attempts</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n        </div>\n        <div class="tb-form-panel stroked">\n          <tb-modbus-values [singleMode]="true" [hideNewFields]="data.hideNewFields" formControlName="values"></tb-modbus-values>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="slaveConfigFormGroup.invalid || !slaveConfigFormGroup.dirty">\n      {{ data.buttonTitle | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .slaves-config-container{width:80vw;max-width:900px}:host .slave-name-label{margin-right:16px;color:#000000de}:host .fixed-title-width-260{min-width:260px}:host ::ng-deep .security-config .fixed-title-width{min-width:230px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef}]});class vo extends ho{constructor(e,t,n,a,o){super(e,t,n,a,o),this.fb=e,this.store=t,this.router=n,this.data=a,this.dialogRef=o}getSlaveResultData(){const{values:e,type:t,serialPort:n,...a}=this.slaveConfigFormGroup.value,o={...a,type:t,...e};return t===Hn.Serial&&(o.port=n),o}addFieldsToFormGroup(){this.slaveConfigFormGroup.addControl("sendDataOnlyOnChange",this.fb.control(!1))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:vo,deps:[{token:me.FormBuilder},{token:ot.Store},{token:it.Router},{token:Xe},{token:Je.MatDialogRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:vo,isStandalone:!0,selector:"tb-modbus-legacy-slave-dialog",usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="slaves-config-container">\n  <mat-toolbar color="primary">\n    <h2>{{ \'gateway.server-slave\' | translate }}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="modbusHelpLink"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">\n    <div class="stroked tb-form-panel">\n      <div class="tb-form-panel no-border no-padding padding-top">\n        <div class="tb-flex row space-between align-center no-gap fill-width">\n          <div class="fixed-title-width" translate>gateway.server-connection</div>\n          <tb-toggle-select formControlName="type" appearance="fill">\n            <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>\n          </tb-toggle-select>\n        </div>\n        <div class="tb-form-panel no-border no-padding padding-top">\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.host\' | translate }}" translate>gateway.host</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.host-required\') | translate"\n                          *ngIf="slaveConfigFormGroup.get(\'host\').hasError(\'required\')\n                                           && slaveConfigFormGroup.get(\'host\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.port\' | translate }}" translate>gateway.port</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n                       name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="slaveConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                          *ngIf="(slaveConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                            slaveConfigFormGroup.get(\'port\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <ng-template #serialPort>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.serial-port\' | translate }}" translate>gateway.port</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="serialPort" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  <mat-icon matSuffix\n                            matTooltipPosition="above"\n                            matTooltipClass="tb-error-tooltip"\n                            [matTooltip]="\'gateway.port-required\' | translate"\n                            *ngIf="slaveConfigFormGroup.get(\'serialPort\').hasError(\'required\') &&\n                                            slaveConfigFormGroup.get(\'serialPort\').touched"\n                            class="tb-error">\n                    warning\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-template>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.framer-type\' | translate }}" translate>\n              gateway.method\n            </div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="method">\n                  <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"\n                              [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.baudrate\' | translate }}" translate>gateway.baudrate</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="baudrate">\n                  <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.bytesize\' | translate }}" translate>gateway.bytesize</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="bytesize">\n                  <mat-option *ngFor="let size of modbusByteSizes" [value]="size">{{ size }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.stopbits\' | translate }}"  translate>gateway.stopbits</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ \'gateway.set\' | translate }}"/>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.parity\' | translate }}" translate>gateway.parity</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="parity">\n                  <mat-option *ngFor="let parity of modbusParities" [value]="parity">{{ ModbusParityLabelsMap.get(parity) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row" fxLayoutAlign="space-between center">\n            <mat-slide-toggle class="mat-slide" formControlName="strict">\n              <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.strict\' | translate }}">\n                {{ \'gateway.strict\' | translate }}\n              </mat-label>\n            </mat-slide-toggle>\n          </div>\n        </ng-container>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.unit-id\' | translate }}" translate>gateway.unit-id</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.unit-id-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'unitId\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'unitId\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-name</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceName" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-name-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceName\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceName\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceType" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-profile-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceType\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceType\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row" fxLayoutAlign="space-between center">\n          <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">\n            <mat-label>\n              {{ \'gateway.send-data-on-change\' | translate }}\n            </mat-label>\n          </mat-slide-toggle>\n        </div>\n        <ng-template #reportStrategy>\n          <tb-report-strategy [defaultValue]="ReportStrategyDefaultValue.Device" formControlName="reportStrategy" [isExpansionMode]="true"/>\n        </ng-template>\n        <div class="tb-form-panel stroked">\n          <mat-expansion-panel class="tb-settings">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class="tb-form-panel no-border no-padding padding-top">\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connection-timeout\' | translate }}" translate>gateway.connection-timeout</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.byte-order\' | translate }}" translate>gateway.byte-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="byteOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.word-order\' | translate }}" translate>gateway.word-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="wordOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">\n                <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">\n                  <mat-expansion-panel-header fxLayout="row wrap">\n                    <mat-panel-title>\n                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">\n                        <mat-label>\n                          {{ \'gateway.tls-connection\' | translate }}\n                        </mat-label>\n                      </mat-slide-toggle>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>\n                </mat-expansion-panel>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retries">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries\' | translate }}">\n                    {{ \'gateway.retries\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-empty\' | translate }}">\n                    {{ \'gateway.retries-on-empty\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-invalid\' | translate }}">\n                    {{ \'gateway.retries-on-invalid\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.poll-period\' | translate }}">\n                  <span tbTruncateWithTooltip translate>\n                    gateway.poll-period\n                  </span>\n                </div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-time\' | translate }}" translate>gateway.connect-attempt-time</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-count\' | translate }}" translate>gateway.connect-attempt-count</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.wait-after-failed-attempts\' | translate }}" translate>gateway.wait-after-failed-attempts</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n        </div>\n        <div class="tb-form-panel stroked">\n          <tb-modbus-values [singleMode]="true" [hideNewFields]="data.hideNewFields" formControlName="values"></tb-modbus-values>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="slaveConfigFormGroup.invalid || !slaveConfigFormGroup.dirty">\n      {{ data.buttonTitle | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .slaves-config-container{width:80vw;max-width:900px}:host .slave-name-label{margin-right:16px;color:#000000de}:host .fixed-title-width-260{min-width:260px}:host ::ng-deep .security-config .fixed-title-width{min-width:230px}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:dt.HelpComponent,selector:"[tb-help]",inputs:["tb-help"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:Je.MatDialogActions,selector:"[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",inputs:["align"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:yo,selector:"tb-modbus-values",inputs:["singleMode","hideNewFields"]},{kind:"component",type:bo,selector:"tb-modbus-security-config",inputs:["isMaster"]},{kind:"pipe",type:wa,name:"getGatewayPortTooltip"},{kind:"component",type:go,selector:"tb-report-strategy",inputs:["isExpansionMode","defaultValue"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ModbusLegacySlaveDialogComponent",vo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:vo,decorators:[{type:n,args:[{selector:"tb-modbus-legacy-slave-dialog",changeDetection:d.OnPush,standalone:!0,imports:[H,D,yo,bo,wa,go],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="slaves-config-container">\n  <mat-toolbar color="primary">\n    <h2>{{ \'gateway.server-slave\' | translate }}</h2>\n    <span fxFlex></span>\n    <div [tb-help]="modbusHelpLink"></div>\n    <button mat-icon-button\n            (click)="cancel()"\n            type="button">\n      <mat-icon class="material-icons">close</mat-icon>\n    </button>\n  </mat-toolbar>\n  <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">\n    <div class="stroked tb-form-panel">\n      <div class="tb-form-panel no-border no-padding padding-top">\n        <div class="tb-flex row space-between align-center no-gap fill-width">\n          <div class="fixed-title-width" translate>gateway.server-connection</div>\n          <tb-toggle-select formControlName="type" appearance="fill">\n            <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>\n          </tb-toggle-select>\n        </div>\n        <div class="tb-form-panel no-border no-padding padding-top">\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.host\' | translate }}" translate>gateway.host</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="(\'gateway.host-required\') | translate"\n                          *ngIf="slaveConfigFormGroup.get(\'host\').hasError(\'required\')\n                                           && slaveConfigFormGroup.get(\'host\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"\n               class="tb-form-row column-xs"\n               fxLayoutAlign="space-between center"\n          >\n            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.port\' | translate }}" translate>gateway.port</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n                       name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n                <mat-icon matSuffix\n                          matTooltipPosition="above"\n                          matTooltipClass="tb-error-tooltip"\n                          [matTooltip]="slaveConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                          *ngIf="(slaveConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                            slaveConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                            slaveConfigFormGroup.get(\'port\').touched"\n                          class="tb-error">\n                  warning\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <ng-template #serialPort>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.serial-port\' | translate }}" translate>gateway.port</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="serialPort" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  <mat-icon matSuffix\n                            matTooltipPosition="above"\n                            matTooltipClass="tb-error-tooltip"\n                            [matTooltip]="\'gateway.port-required\' | translate"\n                            *ngIf="slaveConfigFormGroup.get(\'serialPort\').hasError(\'required\') &&\n                                            slaveConfigFormGroup.get(\'serialPort\').touched"\n                            class="tb-error">\n                    warning\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-template>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.framer-type\' | translate }}" translate>\n              gateway.method\n            </div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="method">\n                  <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"\n                              [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.baudrate\' | translate }}" translate>gateway.baudrate</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="baudrate">\n                  <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.bytesize\' | translate }}" translate>gateway.bytesize</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="bytesize">\n                  <mat-option *ngFor="let size of modbusByteSizes" [value]="size">{{ size }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.stopbits\' | translate }}"  translate>gateway.stopbits</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ \'gateway.set\' | translate }}"/>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.parity\' | translate }}" translate>gateway.parity</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="parity">\n                  <mat-option *ngFor="let parity of modbusParities" [value]="parity">{{ ModbusParityLabelsMap.get(parity) }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row" fxLayoutAlign="space-between center">\n            <mat-slide-toggle class="mat-slide" formControlName="strict">\n              <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.strict\' | translate }}">\n                {{ \'gateway.strict\' | translate }}\n              </mat-label>\n            </mat-slide-toggle>\n          </div>\n        </ng-container>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.unit-id\' | translate }}" translate>gateway.unit-id</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.unit-id-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'unitId\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'unitId\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-name</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceName" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-name-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceName\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceName\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="deviceType" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="(\'gateway.device-profile-required\') | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'deviceType\').hasError(\'required\') &&\n                                           slaveConfigFormGroup.get(\'deviceType\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row" fxLayoutAlign="space-between center">\n          <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">\n            <mat-label>\n              {{ \'gateway.send-data-on-change\' | translate }}\n            </mat-label>\n          </mat-slide-toggle>\n        </div>\n        <ng-template #reportStrategy>\n          <tb-report-strategy [defaultValue]="ReportStrategyDefaultValue.Device" formControlName="reportStrategy" [isExpansionMode]="true"/>\n        </ng-template>\n        <div class="tb-form-panel stroked">\n          <mat-expansion-panel class="tb-settings">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class="tb-form-panel no-border no-padding padding-top">\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connection-timeout\' | translate }}" translate>gateway.connection-timeout</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.byte-order\' | translate }}" translate>gateway.byte-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="byteOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.word-order\' | translate }}" translate>gateway.word-order</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <mat-select formControlName="wordOrder">\n                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">\n                <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">\n                  <mat-expansion-panel-header fxLayout="row wrap">\n                    <mat-panel-title>\n                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">\n                        <mat-label>\n                          {{ \'gateway.tls-connection\' | translate }}\n                        </mat-label>\n                      </mat-slide-toggle>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>\n                </mat-expansion-panel>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retries">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries\' | translate }}">\n                    {{ \'gateway.retries\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-empty\' | translate }}">\n                    {{ \'gateway.retries-on-empty\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row" fxLayoutAlign="space-between center">\n                <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">\n                  <mat-label tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.retries-on-invalid\' | translate }}">\n                    {{ \'gateway.retries-on-invalid\' | translate }}\n                  </mat-label>\n                </mat-slide-toggle>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.poll-period\' | translate }}">\n                  <span tbTruncateWithTooltip translate>\n                    gateway.poll-period\n                  </span>\n                </div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-time\' | translate }}" translate>gateway.connect-attempt-time</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.connect-attempt-count\' | translate }}" translate>gateway.connect-attempt-count</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.wait-after-failed-attempts\' | translate }}" translate>gateway.wait-after-failed-attempts</div>\n                <div class="tb-flex no-gap">\n                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                    <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ \'gateway.set\' | translate }}"/>\n                  </mat-form-field>\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n        </div>\n        <div class="tb-form-panel stroked">\n          <tb-modbus-values [singleMode]="true" [hideNewFields]="data.hideNewFields" formControlName="values"></tb-modbus-values>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions fxLayoutAlign="end center">\n    <button mat-button color="primary"\n            type="button"\n            cdkFocusInitial\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            (click)="add()"\n            [disabled]="slaveConfigFormGroup.invalid || !slaveConfigFormGroup.dirty">\n      {{ data.buttonTitle | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .slaves-config-container{width:80vw;max-width:900px}:host .slave-name-label{margin-right:16px;color:#000000de}:host .fixed-title-width-260{min-width:260px}:host ::ng-deep .security-config .fixed-title-width{min-width:230px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:ot.Store},{type:it.Router},{type:void 0,decorators:[{type:p,args:[Xe]}]},{type:Je.MatDialogRef}]});class wo{constructor(e,t,n,a,o){this.translate=e,this.dialog=t,this.dialogService=n,this.fb=a,this.cdr=o,this.isLegacy=!1,this.textSearchMode=!1,this.textSearch=this.fb.control("",{nonNullable:!0}),this.ModbusProtocolLabelsMap=zn,this.onChange=()=>{},this.onTouched=()=>{},this.destroy$=new Se,this.masterFormGroup=this.fb.group({slaves:this.fb.array([])}),this.dataSource=new Co}get slaves(){return this.masterFormGroup.get("slaves")}ngOnInit(){this.masterFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateTableData(e.slaves),this.onChange(e),this.onTouched()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}ngAfterViewInit(){this.textSearch.valueChanges.pipe(Ve(150),Be(((e,t)=>(e??"")===t.trim())),Ne(this.destroy$)).subscribe((e=>this.updateTableData(this.slaves.value,e.trim())))}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){this.slaves.clear(),this.pushDataAsFormArrays(e.slaves)}enterFilterMode(){this.textSearchMode=!0,this.cdr.detectChanges();const e=this.searchInputField.nativeElement;e.focus(),e.setSelectionRange(0,0)}exitFilterMode(){this.updateTableData(this.slaves.value),this.textSearchMode=!1,this.textSearch.reset()}manageSlave(e,t){e&&e.stopPropagation();const n=ie(t),a=n?this.slaves.at(t).value:{};this.getSlaveDialog(a,n?"action.apply":"action.add").afterClosed().pipe(Oe(1),Ne(this.destroy$)).subscribe((e=>{e&&(n?this.slaves.at(t).patchValue(e):this.slaves.push(this.fb.control(e)),this.masterFormGroup.markAsDirty())}))}getSlaveDialog(e,t){return this.isLegacy?this.dialog.open(vo,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{value:e,hideNewFields:!0,buttonTitle:t}}):this.dialog.open(xo,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{value:e,buttonTitle:t,hideNewFields:!1}})}deleteSlave(e,t){e&&e.stopPropagation(),this.dialogService.confirm(this.translate.instant("gateway.delete-slave-title"),"",this.translate.instant("action.no"),this.translate.instant("action.yes"),!0).pipe(Oe(1),Ne(this.destroy$)).subscribe((e=>{e&&(this.slaves.removeAt(t),this.masterFormGroup.markAsDirty())}))}updateTableData(e,t){t&&(e=e.filter((e=>Object.values(e).some((e=>e.toString().toLowerCase().includes(t.toLowerCase())))))),this.dataSource.loadData(e)}pushDataAsFormArrays(e){e?.length&&e.forEach((e=>this.slaves.push(this.fb.control(e))))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:wo,deps:[{token:Y.TranslateService},{token:Je.MatDialog},{token:X.DialogService},{token:me.FormBuilder},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:wo,isStandalone:!0,selector:"tb-modbus-master-table",inputs:{isLegacy:"isLegacy"},providers:[{provide:ge,useExisting:m((()=>wo)),multi:!0}],viewQueries:[{propertyName:"searchInputField",first:!0,predicate:["searchInput"],descendants:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-master-table tb-absolute-fill">\n  <div class="tb-form-panel no-border no-padding padding-top">\n    <div class="tb-form-hint tb-primary-fill tb-flex center">{{ \'gateway.hints.modbus-master\' | translate }}</div>\n  </div>\n  <div fxFlex fxLayout="column" class="tb-master-table-content">\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">\n      <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">\n        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">\n          <span class="tb-master-table-title">{{ \'gateway.servers-slaves\' | translate}}</span>\n        </div>\n        <span fxFlex></span>\n        <button mat-icon-button\n                (click)="manageSlave($event)"\n                matTooltip="{{ \'action.add\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>add</mat-icon>\n        </button>\n        <button mat-icon-button\n                (click)="enterFilterMode()"\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">\n      <div class="mat-toolbar-tools">\n        <button mat-icon-button\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field fxFlex>\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput\n                 [formControl]="textSearch"\n                 placeholder="{{ \'common.enter-search\' | translate }}"/>\n        </mat-form-field>\n        <button mat-icon-button (click)="exitFilterMode()"\n                matTooltip="{{ \'action.close\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <div class="table-container">\n      <table mat-table [dataSource]="dataSource">\n        <ng-container [matColumnDef]="\'deviceName\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            <div tbTruncateWithTooltip>{{ \'gateway.device-name\' | translate }}</div>\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            <div tbTruncateWithTooltip>{{ slave[\'deviceName\'] }}</div>\n          </mat-cell>\n        </ng-container>\n        <ng-container [matColumnDef]="\'info\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            {{ \'gateway.info\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            <div tbTruncateWithTooltip>{{ slave[\'host\'] ?? slave[\'port\'] }}</div>\n          </mat-cell>\n        </ng-container>\n        <ng-container [matColumnDef]="\'unitId\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            {{ \'gateway.unit-id\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            <div tbTruncateWithTooltip>{{ slave[\'unitId\'] }}</div>\n          </mat-cell>\n        </ng-container>\n        <ng-container [matColumnDef]="\'type\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            <div>{{ \'gateway.type\' | translate }}</div>\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            {{ ModbusProtocolLabelsMap.get(slave[\'type\']) }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="actions" stickyEnd>\n          <mat-header-cell *matHeaderCellDef\n                           [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\', textAlign: \'center\'}">\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave; let i = index"\n                    [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\'}">\n            <ng-template #rowActions>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="manageSlave($event, i)">\n                <tb-icon>edit</tb-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.delete\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="deleteSlave($event, i)">\n                <tb-icon>delete</tb-icon>\n              </button>\n            </ng-template>\n            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">\n              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n            </div>\n            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">\n              <button mat-icon-button\n                      (click)="$event.stopPropagation()"\n                      [matMenuTriggerFor]="cellActionsMenu">\n                <mat-icon class="material-icons">more_vert</mat-icon>\n              </button>\n              <mat-menu #cellActionsMenu="matMenu" xPosition="before">\n                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n              </mat-menu>\n            </div>\n          </mat-cell>\n        </ng-container>\n        <mat-header-row [ngClass]="{\'mat-row-select\': true}" *matHeaderRowDef="[\'deviceName\', \'info\', \'unitId\', \'type\', \'actions\']; sticky: true"></mat-header-row>\n        <mat-row *matRowDef="let slave; columns: [\'deviceName\', \'info\', \'unitId\', \'type\', \'actions\']"></mat-row>\n      </table>\n      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"\n               class="mat-headline-5 tb-absolute-fill tb-add-new">\n        <button mat-button class="connector"\n                (click)="manageSlave($event)">\n          <mat-icon class="tb-mat-96">add</mat-icon>\n          <span>{{ \'gateway.add-slave\' | translate }}</span>\n        </button>\n      </section>\n    </div>\n    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"\n          fxLayoutAlign="center center"\n          class="no-data-found" translate>\n      widget.no-data-found\n    </span>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}:host .tb-master-table .tb-master-table-content{width:100%;height:100%;background:#fff;overflow:hidden}:host .tb-master-table .tb-master-table-content .mat-toolbar-tools{min-height:auto}:host .tb-master-table .tb-master-table-content .title-container{overflow:hidden}:host .tb-master-table .tb-master-table-content .tb-master-table-title{padding-right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-master-table .tb-master-table-content .table-container{overflow:auto}:host .tb-master-table .tb-master-table-content .table-container .mat-mdc-table{table-layout:fixed;min-width:450px}:host .tb-master-table .tb-master-table-content .table-container .mat-mdc-table .table-value-column{padding:0 12px;width:38%}:host .no-data-found{height:calc(100% - 120px)}@media screen and (max-width: 599px){:host .mat-toolbar{height:auto;min-height:100px}:host .mat-toolbar .tb-master-table-title{padding-bottom:5px;width:100%}}:host ::ng-deep mat-cell.tb-value-cell{cursor:pointer}:host ::ng-deep mat-cell.tb-value-cell .mat-icon{height:24px;width:24px;font-size:24px;color:#757575}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"pipe",type:_.AsyncPipe,name:"async"},{kind:"ngmodule",type:D},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"component",type:ht.MatMenu,selector:"mat-menu",inputs:["backdropClass","aria-label","aria-labelledby","aria-describedby","xPosition","yPosition","overlapTrigger","hasBackdrop","class","classList"],outputs:["closed","close"],exportAs:["matMenu"]},{kind:"directive",type:ht.MatMenuTrigger,selector:"[mat-menu-trigger-for], [matMenuTriggerFor]",inputs:["mat-menu-trigger-for","matMenuTriggerFor","matMenuTriggerData","matMenuTriggerRestoreFocus"],outputs:["menuOpened","onMenuOpen","menuClosed","onMenuClose"],exportAs:["matMenuTrigger"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:b.MatTable,selector:"mat-table, table[mat-table]",exportAs:["matTable"]},{kind:"directive",type:b.MatHeaderCellDef,selector:"[matHeaderCellDef]"},{kind:"directive",type:b.MatHeaderRowDef,selector:"[matHeaderRowDef]",inputs:["matHeaderRowDef","matHeaderRowDefSticky"]},{kind:"directive",type:b.MatColumnDef,selector:"[matColumnDef]",inputs:["matColumnDef"]},{kind:"directive",type:b.MatCellDef,selector:"[matCellDef]"},{kind:"directive",type:b.MatRowDef,selector:"[matRowDef]",inputs:["matRowDefColumns","matRowDefWhen"]},{kind:"directive",type:b.MatHeaderCell,selector:"mat-header-cell, th[mat-header-cell]"},{kind:"directive",type:b.MatCell,selector:"mat-cell, td[mat-cell]"},{kind:"component",type:b.MatHeaderRow,selector:"mat-header-row, tr[mat-header-row]",exportAs:["matHeaderRow"]},{kind:"component",type:b.MatRow,selector:"mat-row, tr[mat-row]",exportAs:["matRow"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"directive",type:K.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:K.DefaultStyleDirective,selector:"  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]",inputs:["ngStyle","ngStyle.xs","ngStyle.sm","ngStyle.md","ngStyle.lg","ngStyle.xl","ngStyle.lt-sm","ngStyle.lt-md","ngStyle.lt-lg","ngStyle.lt-xl","ngStyle.gt-xs","ngStyle.gt-sm","ngStyle.gt-md","ngStyle.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:bt.TbIconComponent,selector:"tb-icon",inputs:["color"],exportAs:["tbIcon"]},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ModbusMasterTableComponent",wo),He([xt()],wo.prototype,"isLegacy",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:wo,decorators:[{type:n,args:[{selector:"tb-modbus-master-table",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>wo)),multi:!0}],standalone:!0,imports:[H,D,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="tb-master-table tb-absolute-fill">\n  <div class="tb-form-panel no-border no-padding padding-top">\n    <div class="tb-form-hint tb-primary-fill tb-flex center">{{ \'gateway.hints.modbus-master\' | translate }}</div>\n  </div>\n  <div fxFlex fxLayout="column" class="tb-master-table-content">\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">\n      <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">\n        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">\n          <span class="tb-master-table-title">{{ \'gateway.servers-slaves\' | translate}}</span>\n        </div>\n        <span fxFlex></span>\n        <button mat-icon-button\n                (click)="manageSlave($event)"\n                matTooltip="{{ \'action.add\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>add</mat-icon>\n        </button>\n        <button mat-icon-button\n                (click)="enterFilterMode()"\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">\n      <div class="mat-toolbar-tools">\n        <button mat-icon-button\n                matTooltip="{{ \'action.search\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field fxFlex>\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput\n                 [formControl]="textSearch"\n                 placeholder="{{ \'common.enter-search\' | translate }}"/>\n        </mat-form-field>\n        <button mat-icon-button (click)="exitFilterMode()"\n                matTooltip="{{ \'action.close\' | translate }}"\n                matTooltipPosition="above">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    <div class="table-container">\n      <table mat-table [dataSource]="dataSource">\n        <ng-container [matColumnDef]="\'deviceName\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            <div tbTruncateWithTooltip>{{ \'gateway.device-name\' | translate }}</div>\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            <div tbTruncateWithTooltip>{{ slave[\'deviceName\'] }}</div>\n          </mat-cell>\n        </ng-container>\n        <ng-container [matColumnDef]="\'info\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            {{ \'gateway.info\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            <div tbTruncateWithTooltip>{{ slave[\'host\'] ?? slave[\'port\'] }}</div>\n          </mat-cell>\n        </ng-container>\n        <ng-container [matColumnDef]="\'unitId\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            {{ \'gateway.unit-id\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            <div tbTruncateWithTooltip>{{ slave[\'unitId\'] }}</div>\n          </mat-cell>\n        </ng-container>\n        <ng-container [matColumnDef]="\'type\'">\n          <mat-header-cell *matHeaderCellDef class="table-value-column">\n            <div>{{ \'gateway.type\' | translate }}</div>\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave" class="table-value-column">\n            {{ ModbusProtocolLabelsMap.get(slave[\'type\']) }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="actions" stickyEnd>\n          <mat-header-cell *matHeaderCellDef\n                           [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\', textAlign: \'center\'}">\n          </mat-header-cell>\n          <mat-cell *matCellDef="let slave; let i = index"\n                    [ngStyle.gt-md]="{ minWidth: \'96px\', maxWidth: \'96px\', width: \'96px\'}">\n            <ng-template #rowActions>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.edit\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="manageSlave($event, i)">\n                <tb-icon>edit</tb-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="{{ \'action.delete\' | translate }}"\n                      matTooltipPosition="above"\n                      (click)="deleteSlave($event, i)">\n                <tb-icon>delete</tb-icon>\n              </button>\n            </ng-template>\n            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">\n              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n            </div>\n            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">\n              <button mat-icon-button\n                      (click)="$event.stopPropagation()"\n                      [matMenuTriggerFor]="cellActionsMenu">\n                <mat-icon class="material-icons">more_vert</mat-icon>\n              </button>\n              <mat-menu #cellActionsMenu="matMenu" xPosition="before">\n                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>\n              </mat-menu>\n            </div>\n          </mat-cell>\n        </ng-container>\n        <mat-header-row [ngClass]="{\'mat-row-select\': true}" *matHeaderRowDef="[\'deviceName\', \'info\', \'unitId\', \'type\', \'actions\']; sticky: true"></mat-header-row>\n        <mat-row *matRowDef="let slave; columns: [\'deviceName\', \'info\', \'unitId\', \'type\', \'actions\']"></mat-row>\n      </table>\n      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"\n               class="mat-headline-5 tb-absolute-fill tb-add-new">\n        <button mat-button class="connector"\n                (click)="manageSlave($event)">\n          <mat-icon class="tb-mat-96">add</mat-icon>\n          <span>{{ \'gateway.add-slave\' | translate }}</span>\n        </button>\n      </section>\n    </div>\n    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"\n          fxLayoutAlign="center center"\n          class="no-data-found" translate>\n      widget.no-data-found\n    </span>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block}:host .tb-master-table .tb-master-table-content{width:100%;height:100%;background:#fff;overflow:hidden}:host .tb-master-table .tb-master-table-content .mat-toolbar-tools{min-height:auto}:host .tb-master-table .tb-master-table-content .title-container{overflow:hidden}:host .tb-master-table .tb-master-table-content .tb-master-table-title{padding-right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-master-table .tb-master-table-content .table-container{overflow:auto}:host .tb-master-table .tb-master-table-content .table-container .mat-mdc-table{table-layout:fixed;min-width:450px}:host .tb-master-table .tb-master-table-content .table-container .mat-mdc-table .table-value-column{padding:0 12px;width:38%}:host .no-data-found{height:calc(100% - 120px)}@media screen and (max-width: 599px){:host .mat-toolbar{height:auto;min-height:100px}:host .mat-toolbar .tb-master-table-title{padding-bottom:5px;width:100%}}:host ::ng-deep mat-cell.tb-value-cell{cursor:pointer}:host ::ng-deep mat-cell.tb-value-cell .mat-icon{height:24px;width:24px;font-size:24px;color:#757575}\n']}]}],ctorParameters:()=>[{type:Y.TranslateService},{type:Je.MatDialog},{type:X.DialogService},{type:me.FormBuilder},{type:t.ChangeDetectorRef}],propDecorators:{searchInputField:[{type:o,args:["searchInput"]}],isLegacy:[{type:a}]}});class Co extends R{constructor(){super()}}e("SlavesDatasource",Co);class To extends ya{constructor(){super(),this.enableSlaveControl=new ye(!1),this.enableSlaveControl.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateSlaveEnabling(e),this.basicFormGroup.get("slave").updateValueAndValidity({emitEvent:!!this.onChange})}))}writeValue(e){super.writeValue(e),this.onEnableSlaveControl(e)}validate(){const{master:e,slave:t}=this.basicFormGroup.value,n=!e?.slaves?.length&&(ee(t,{})||!t);return!this.basicFormGroup.valid||n?{basicFormGroup:{valid:!1}}:null}initBasicFormGroup(){return this.fb.group({master:[],slave:[]})}updateSlaveEnabling(e){e?this.basicFormGroup.get("slave").enable({emitEvent:!1}):this.basicFormGroup.get("slave").disable({emitEvent:!1})}onEnableSlaveControl(e){this.enableSlaveControl.setValue(!!e.slave&&!ee(e.slave,{}))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:To,deps:[],target:t.ɵɵFactoryTarget.Directive})}static{this.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"18.2.6",type:To,usesInheritance:!0,ngImport:t})}}e("ModbusBasicConfigDirective",To),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:To,decorators:[{type:s}],ctorParameters:()=>[]});class So{constructor(e){this.fb=e,this.ModbusProtocolLabelsMap=zn,this.ModbusMethodLabelsMap=Kn,this.portLimits=Et,this.modbusProtocolTypes=Object.values(Hn),this.modbusMethodTypes=Object.values(Wn),this.modbusSerialMethodTypes=Object.values(jn),this.modbusOrderType=Object.values(Jn),this.ModbusProtocolType=Hn,this.modbusBaudrates=la,this.isSlaveEnabled=!1,this.serialSpecificControlKeys=["serialPort","baudrate"],this.tcpUdpSpecificControlKeys=["port","security","host"],this.destroy$=new Se,this.showSecurityControl=this.fb.control(!1),this.slaveConfigFormGroup=this.fb.group({type:[Hn.TCP],host:["",[ue.required,ue.pattern(kt)]],port:[null,[ue.required,ue.min(Et.MIN),ue.max(Et.MAX)]],serialPort:["",[ue.required,ue.pattern(kt)]],method:[Wn.SOCKET],unitId:[null,[ue.required]],baudrate:[this.modbusBaudrates[0]],deviceName:["",[ue.required,ue.pattern(kt)]],deviceType:["",[ue.required,ue.pattern(kt)]],pollPeriod:[5e3,[ue.required]],sendDataToThingsBoard:[!1],byteOrder:[Jn.BIG],wordOrder:[Jn.BIG],security:[],identity:this.fb.group({vendorName:["",[ue.pattern(kt)]],productCode:["",[ue.pattern(kt)]],vendorUrl:["",[ue.pattern(kt)]],productName:["",[ue.pattern(kt)]],modelName:["",[ue.pattern(kt)]]}),values:[]}),this.observeValueChanges(),this.observeTypeChange(),this.observeShowSecurity()}get protocolType(){return this.slaveConfigFormGroup.get("type").value}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}validate(){return this.slaveConfigFormGroup.valid?null:{slaveConfigFormGroup:{valid:!1}}}writeValue(e){this.showSecurityControl.patchValue(!!e.security&&!ee(e.security,{})),this.updateSlaveConfig(e)}setDisabledState(e){this.isSlaveEnabled=!e,this.updateFormEnableState()}observeValueChanges(){this.slaveConfigFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{e.type===Hn.Serial&&(e.port=e.serialPort,delete e.serialPort),this.onChange(e),this.onTouched()}))}observeTypeChange(){this.slaveConfigFormGroup.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.updateFormEnableState(),this.updateMethodType(e)}))}updateMethodType(e){this.slaveConfigFormGroup.get("method").value!==Wn.RTU&&this.slaveConfigFormGroup.get("method").patchValue(e===Hn.Serial?jn.ASCII:Wn.SOCKET,{emitEvent:!1})}updateFormEnableState(){this.isSlaveEnabled?(this.slaveConfigFormGroup.enable({emitEvent:!1}),this.showSecurityControl.enable({emitEvent:!1})):(this.slaveConfigFormGroup.disable({emitEvent:!1}),this.showSecurityControl.disable({emitEvent:!1})),this.updateEnablingByProtocol(),this.updateSecurityEnable(this.showSecurityControl.value)}observeShowSecurity(){this.showSecurityControl.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>this.updateSecurityEnable(e)))}updateSecurityEnable(e){e&&this.isSlaveEnabled&&this.protocolType!==Hn.Serial?this.slaveConfigFormGroup.get("security").enable({emitEvent:!1}):this.slaveConfigFormGroup.get("security").disable({emitEvent:!1})}updateEnablingByProtocol(){const e=this.protocolType===Hn.Serial,t=e?this.serialSpecificControlKeys:this.tcpUdpSpecificControlKeys,n=e?this.tcpUdpSpecificControlKeys:this.serialSpecificControlKeys;this.isSlaveEnabled&&t.forEach((e=>this.slaveConfigFormGroup.get(e)?.enable({emitEvent:!1}))),n.forEach((e=>this.slaveConfigFormGroup.get(e)?.disable({emitEvent:!1})))}updateSlaveConfig(e){const{type:t=Hn.TCP,method:n=Wn.RTU,unitId:a=0,deviceName:o="",deviceType:i="",pollPeriod:r=5e3,sendDataToThingsBoard:s=!1,byteOrder:l=Jn.BIG,wordOrder:c=Jn.BIG,security:p={},identity:m={vendorName:"",productCode:"",vendorUrl:"",productName:"",modelName:""},values:d={},baudrate:u=this.modbusBaudrates[0],host:g="",port:f=null}=e,y={type:t,method:n,unitId:a,deviceName:o,deviceType:i,pollPeriod:r,sendDataToThingsBoard:!!s,byteOrder:l,wordOrder:c,security:p,identity:m,values:d,baudrate:u,host:t===Hn.Serial?"":g,port:t===Hn.Serial?null:f,serialPort:t===Hn.Serial?f:""};this.slaveConfigFormGroup.setValue(y,{emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:So,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:So,isStandalone:!0,selector:"tb-modbus-slave-config",providers:[{provide:ge,useExisting:m((()=>So)),multi:!0},{provide:fe,useExisting:m((()=>So)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div [formGroup]="slaveConfigFormGroup" class="slave-container">\n  <div class="slave-content tb-form-panel no-border no-padding padding-top" >\n    <div class="tb-flex row space-between align-center no-gap fill-width">\n      <div class="fixed-title-width" translate>gateway.server-slave-config</div>\n      <tb-toggle-select formControlName="type" appearance="fill">\n        <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n    <div class="tb-form-panel no-border no-padding padding-top">\n      <div *ngIf="protocolType !== ModbusProtocolType.Serial"\n           class="tb-form-row column-xs"\n           fxLayoutAlign="space-between center"\n      >\n        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.host\' | translate }}" translate>gateway.host</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.host-required\') | translate"\n                      *ngIf="slaveConfigFormGroup.get(\'host\').hasError(\'required\')\n                                             && slaveConfigFormGroup.get(\'host\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"\n           class="tb-form-row column-xs"\n           fxLayoutAlign="space-between center"\n      >\n        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.port\' | translate }}" translate>gateway.port</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n                   name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="slaveConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                      *ngIf="(slaveConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                              slaveConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                              slaveConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                              slaveConfigFormGroup.get(\'port\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <ng-template #serialPort>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.serial-port\' | translate }}" translate>gateway.port</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="serialPort" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="\'gateway.port-required\' | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'port\').hasError(\'required\') && slaveConfigFormGroup.get(\'port\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n      </ng-template>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.framer-type\' | translate }}" translate>\n          gateway.method\n        </div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="method">\n              <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"\n                          [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.unit-id\' | translate }}" translate>gateway.unit-id</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.unit-id-required\') | translate"\n                    *ngIf="slaveConfigFormGroup.get(\'unitId\').hasError(\'required\') &&\n                                             slaveConfigFormGroup.get(\'unitId\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" translate>gateway.device-name</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="deviceName" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.device-name-required\') | translate"\n                    *ngIf="slaveConfigFormGroup.get(\'deviceName\').hasError(\'required\') &&\n                                             slaveConfigFormGroup.get(\'deviceName\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="deviceType" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.device-profile-required\') | translate"\n                    *ngIf="slaveConfigFormGroup.get(\'deviceType\').hasError(\'required\') &&\n                                             slaveConfigFormGroup.get(\'deviceType\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.poll-period\' | translate }}">\n        <span tbTruncateWithTooltip translate>\n          gateway.poll-period\n        </span>\n      </div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n    <div *ngIf="protocolType === ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.baudrate\' | translate }}" translate>gateway.baudrate</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <mat-select formControlName="baudrate">\n            <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row" fxLayoutAlign="space-between center">\n      <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">\n        <mat-label>\n          {{ \'gateway.send-data-to-platform\' | translate }}\n        </mat-label>\n      </mat-slide-toggle>\n    </div>\n    <div class="tb-form-panel stroked">\n      <mat-expansion-panel class="tb-settings">\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class="tb-form-panel no-border no-padding padding-top">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.byte-order\' | translate }}" translate>gateway.byte-order</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="byteOrder">\n                  <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.word-order\' | translate }}" translate>gateway.word-order</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="wordOrder">\n                  <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">\n            <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">\n              <mat-expansion-panel-header fxLayout="row wrap">\n                <mat-panel-title>\n                  <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">\n                    <mat-label>\n                      {{ \'gateway.tls-connection\' | translate }}\n                    </mat-label>\n                  </mat-slide-toggle>\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n              <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>\n            </mat-expansion-panel>\n          </div>\n          <ng-container [formGroup]="slaveConfigFormGroup.get(\'identity\')">\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.vendor-name</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="vendorName" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.product-code</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="productCode" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.vendor-url</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="vendorUrl" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.product-name</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="productName" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.model-name</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="modelName" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </mat-expansion-panel>\n    </div>\n    <div class="tb-form-panel stroked">\n      <div class="tb-form-panel-title" translate>gateway.values</div>\n      <tb-modbus-values formControlName="values"></tb-modbus-values>\n    </div>\n  </div>\n</div>\n',dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"ngmodule",type:D},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"component",type:$e.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["hideToggle","togglePosition"],outputs:["afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:$e.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["expandedHeight","collapsedHeight","tabIndex"]},{kind:"directive",type:$e.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Ye.TruncateWithTooltipDirective,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:yo,selector:"tb-modbus-values",inputs:["singleMode","hideNewFields"]},{kind:"component",type:bo,selector:"tb-modbus-security-config",inputs:["isMaster"]},{kind:"pipe",type:wa,name:"getGatewayPortTooltip"},{kind:"directive",type:Sa,selector:"[tbTruncateWithTooltip]",inputs:["tbTruncateWithTooltip","tooltipEnabled","position"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:So,decorators:[{type:n,args:[{selector:"tb-modbus-slave-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>So)),multi:!0},{provide:fe,useExisting:m((()=>So)),multi:!0}],standalone:!0,imports:[H,D,yo,bo,wa,Sa],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div [formGroup]="slaveConfigFormGroup" class="slave-container">\n  <div class="slave-content tb-form-panel no-border no-padding padding-top" >\n    <div class="tb-flex row space-between align-center no-gap fill-width">\n      <div class="fixed-title-width" translate>gateway.server-slave-config</div>\n      <tb-toggle-select formControlName="type" appearance="fill">\n        <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n    <div class="tb-form-panel no-border no-padding padding-top">\n      <div *ngIf="protocolType !== ModbusProtocolType.Serial"\n           class="tb-form-row column-xs"\n           fxLayoutAlign="space-between center"\n      >\n        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.host\' | translate }}" translate>gateway.host</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput name="value" formControlName="host" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="(\'gateway.host-required\') | translate"\n                      *ngIf="slaveConfigFormGroup.get(\'host\').hasError(\'required\')\n                                             && slaveConfigFormGroup.get(\'host\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"\n           class="tb-form-row column-xs"\n           fxLayoutAlign="space-between center"\n      >\n        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.port\' | translate }}" translate>gateway.port</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"\n                   name="value" formControlName="port" placeholder="{{ \'gateway.set\' | translate }}"/>\n            <mat-icon matSuffix\n                      matTooltipPosition="above"\n                      matTooltipClass="tb-error-tooltip"\n                      [matTooltip]="slaveConfigFormGroup.get(\'port\') | getGatewayPortTooltip"\n                      *ngIf="(slaveConfigFormGroup.get(\'port\').hasError(\'required\') ||\n                                              slaveConfigFormGroup.get(\'port\').hasError(\'min\') ||\n                                              slaveConfigFormGroup.get(\'port\').hasError(\'max\')) &&\n                                              slaveConfigFormGroup.get(\'port\').touched"\n                      class="tb-error">\n              warning\n            </mat-icon>\n          </mat-form-field>\n        </div>\n      </div>\n      <ng-template #serialPort>\n        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.serial-port\' | translate }}" translate>gateway.port</div>\n          <div class="tb-flex no-gap">\n            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n              <input matInput name="value" formControlName="serialPort" placeholder="{{ \'gateway.set\' | translate }}"/>\n              <mat-icon matSuffix\n                        matTooltipPosition="above"\n                        matTooltipClass="tb-error-tooltip"\n                        [matTooltip]="\'gateway.port-required\' | translate"\n                        *ngIf="slaveConfigFormGroup.get(\'port\').hasError(\'required\') && slaveConfigFormGroup.get(\'port\').touched"\n                        class="tb-error">\n                warning\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n      </ng-template>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.framer-type\' | translate }}" translate>\n          gateway.method\n        </div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="method">\n              <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"\n                          [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.unit-id\' | translate }}" translate>gateway.unit-id</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.unit-id-required\') | translate"\n                    *ngIf="slaveConfigFormGroup.get(\'unitId\').hasError(\'required\') &&\n                                             slaveConfigFormGroup.get(\'unitId\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" translate>gateway.device-name</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="deviceName" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.device-name-required\') | translate"\n                    *ngIf="slaveConfigFormGroup.get(\'deviceName\').hasError(\'required\') &&\n                                             slaveConfigFormGroup.get(\'deviceName\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="deviceType" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(\'gateway.device-profile-required\') | translate"\n                    *ngIf="slaveConfigFormGroup.get(\'deviceType\').hasError(\'required\') &&\n                                             slaveConfigFormGroup.get(\'deviceType\').touched"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.poll-period\' | translate }}">\n        <span tbTruncateWithTooltip translate>\n          gateway.poll-period\n        </span>\n      </div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n    <div *ngIf="protocolType === ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.baudrate\' | translate }}" translate>gateway.baudrate</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <mat-select formControlName="baudrate">\n            <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-row" fxLayoutAlign="space-between center">\n      <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">\n        <mat-label>\n          {{ \'gateway.send-data-to-platform\' | translate }}\n        </mat-label>\n      </mat-slide-toggle>\n    </div>\n    <div class="tb-form-panel stroked">\n      <mat-expansion-panel class="tb-settings">\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class="tb-form-panel no-border no-padding padding-top">\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.byte-order\' | translate }}" translate>gateway.byte-order</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="byteOrder">\n                  <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ \'gateway.hints.modbus.word-order\' | translate }}" translate>gateway.word-order</div>\n            <div class="tb-flex no-gap">\n              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                <mat-select formControlName="wordOrder">\n                  <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n          <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">\n            <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">\n              <mat-expansion-panel-header fxLayout="row wrap">\n                <mat-panel-title>\n                  <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">\n                    <mat-label>\n                      {{ \'gateway.tls-connection\' | translate }}\n                    </mat-label>\n                  </mat-slide-toggle>\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n              <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>\n            </mat-expansion-panel>\n          </div>\n          <ng-container [formGroup]="slaveConfigFormGroup.get(\'identity\')">\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.vendor-name</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="vendorName" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.product-code</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="productCode" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.vendor-url</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="vendorUrl" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.product-name</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="productName" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n              <div class="fixed-title-width" translate>gateway.model-name</div>\n              <div class="tb-flex no-gap">\n                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n                  <input matInput name="value" formControlName="modelName" placeholder="{{ \'gateway.set\' | translate }}"/>\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </mat-expansion-panel>\n    </div>\n    <div class="tb-form-panel stroked">\n      <div class="tb-form-panel-title" translate>gateway.values</div>\n      <tb-modbus-values formControlName="values"></tb-modbus-values>\n    </div>\n  </div>\n</div>\n'}]}],ctorParameters:()=>[{type:me.FormBuilder}]});class ko extends To{constructor(){super(...arguments),this.isLegacy=!1}mapConfigToFormValue({master:e,slave:t}){return{master:e?.slaves?e:{slaves:[]},slave:t??{}}}getMappedValue(e){return{master:e.master,slave:e.slave}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ko,deps:null,target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:ko,isStandalone:!0,selector:"tb-modbus-basic-config",providers:[{provide:ge,useExisting:m((()=>ko)),multi:!0},{provide:fe,useExisting:m((()=>ko)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.master-connections\' | translate }}">\n    <tb-modbus-master-table [isLegacy]="isLegacy" formControlName="master"></tb-modbus-master-table>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server-config\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top">\n      <div class="tb-form-hint tb-primary-fill tb-flex center">{{ \'gateway.hints.modbus-server\' | translate }}</div>\n      <div class="tb-form-row" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">\n          <mat-label>\n            {{ \'gateway.enable\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n    </div>\n    <tb-modbus-slave-config formControlName="slave"></tb-modbus-slave-config>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:So,selector:"tb-modbus-slave-config"},{kind:"component",type:wo,selector:"tb-modbus-master-table",inputs:["isLegacy"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ModbusBasicConfigComponent",ko),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:ko,decorators:[{type:n,args:[{selector:"tb-modbus-basic-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>ko)),multi:!0},{provide:fe,useExisting:m((()=>ko)),multi:!0}],standalone:!0,imports:[H,D,So,wo,ka],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.master-connections\' | translate }}">\n    <tb-modbus-master-table [isLegacy]="isLegacy" formControlName="master"></tb-modbus-master-table>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server-config\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top">\n      <div class="tb-form-hint tb-primary-fill tb-flex center">{{ \'gateway.hints.modbus-server\' | translate }}</div>\n      <div class="tb-form-row" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">\n          <mat-label>\n            {{ \'gateway.enable\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n    </div>\n    <tb-modbus-slave-config formControlName="slave"></tb-modbus-slave-config>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}\n']}]}]});class Lo extends To{constructor(){super(...arguments),this.isLegacy=!0}mapConfigToFormValue(e){return{master:e.master?.slaves?e.master:{slaves:[]},slave:e.slave?ha.mapSlaveToUpgradedVersion(e.slave):{}}}getMappedValue(e){return{master:e.master,slave:e.slave?ha.mapSlaveToDowngradedVersion(e.slave):{}}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Lo,deps:null,target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Lo,isStandalone:!0,selector:"tb-modbus-legacy-basic-config",providers:[{provide:ge,useExisting:m((()=>Lo)),multi:!0},{provide:fe,useExisting:m((()=>Lo)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.master-connections\' | translate }}">\n    <tb-modbus-master-table [isLegacy]="isLegacy" formControlName="master"></tb-modbus-master-table>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server-config\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top">\n      <div class="tb-form-hint tb-primary-fill tb-flex center">{{ \'gateway.hints.modbus-server\' | translate }}</div>\n      <div class="tb-form-row" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">\n          <mat-label>\n            {{ \'gateway.enable\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n    </div>\n    <tb-modbus-slave-config formControlName="slave"></tb-modbus-slave-config>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:So,selector:"tb-modbus-slave-config"},{kind:"component",type:wo,selector:"tb-modbus-master-table",inputs:["isLegacy"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}e("ModbusLegacyBasicConfigComponent",Lo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Lo,decorators:[{type:n,args:[{selector:"tb-modbus-legacy-basic-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>Lo)),multi:!0},{provide:fe,useExisting:m((()=>Lo)),multi:!0}],standalone:!0,imports:[H,D,So,wo,ka],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.master-connections\' | translate }}">\n    <tb-modbus-master-table [isLegacy]="isLegacy" formControlName="master"></tb-modbus-master-table>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server-config\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top">\n      <div class="tb-form-hint tb-primary-fill tb-flex center">{{ \'gateway.hints.modbus-server\' | translate }}</div>\n      <div class="tb-form-row" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">\n          <mat-label>\n            {{ \'gateway.enable\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n    </div>\n    <tb-modbus-slave-config formControlName="slave"></tb-modbus-slave-config>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}\n']}]}]});class Fo extends ya{constructor(){super(...arguments),this.mappingTypes=fn,this.isLegacy=!0}initBasicFormGroup(){return this.fb.group({mapping:[],server:[]})}mapConfigToFormValue(e){return{server:e.server?xa.mapServerToUpgradedVersion(e.server):{},mapping:e.server?.mapping?xa.mapMappingToUpgradedVersion(e.server.mapping):[]}}getMappedValue(e){return{server:xa.mapServerToDowngradedVersion(e)}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Fo,deps:null,target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Fo,isStandalone:!0,selector:"tb-opc-ua-legacy-basic-config",providers:[{provide:ge,useExisting:m((()=>Fo)),multi:!0},{provide:fe,useExisting:m((()=>Fo)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server\' | translate }}*">\n    <tb-opc-server-config formControlName="server" [hideNewFields]="isLegacy"></tb-opc-server-config>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="mappingTypes.OPCUA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:ro,selector:"tb-mapping-table",inputs:["required","mappingType"]},{kind:"component",type:co,selector:"tb-opc-server-config",inputs:["hideNewFields"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Fo,decorators:[{type:n,args:[{selector:"tb-opc-ua-legacy-basic-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>Fo)),multi:!0},{provide:fe,useExisting:m((()=>Fo)),multi:!0}],standalone:!0,imports:[H,D,lo,ro,co],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.server\' | translate }}*">\n    <tb-opc-server-config formControlName="server" [hideNewFields]="isLegacy"></tb-opc-server-config>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="mappingTypes.OPCUA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n']}]}]});class Io extends ya{constructor(){super(...arguments),this.MappingType=fn}initBasicFormGroup(){return this.fb.group({mapping:[],requestsMapping:[],broker:[],workers:[]})}getRequestDataArray(e){const t=[];return le(e)&&Object.keys(e).forEach((n=>{for(const a of e[n])t.push({requestType:n,requestValue:a})})),t}getRequestDataObject(e){return e.reduce(((e,{requestType:t,requestValue:n})=>(e[t].push(n),e)),{connectRequests:[],disconnectRequests:[],attributeRequests:[],attributeUpdates:[],serverSideRpc:[]})}getBrokerMappedValue(e,t){return{...e,maxNumberOfWorkers:t.maxNumberOfWorkers??100,maxMessageNumberPerWorker:t.maxMessageNumberPerWorker??10}}writeValue(e){this.basicFormGroup.setValue(this.mapConfigToFormValue(e),{emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Io,deps:null,target:t.ɵɵFactoryTarget.Directive})}static{this.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"18.2.6",type:Io,usesInheritance:!0,ngImport:t})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Io,decorators:[{type:s}]});class Ao extends Io{mapConfigToFormValue(e){const{broker:t,mapping:n=[],connectRequests:a=[],disconnectRequests:o=[],attributeRequests:i=[],attributeUpdates:r=[],serverSideRpc:s=[]}=e,l=ma.mapRequestsToUpgradedVersion({connectRequests:a,disconnectRequests:o,attributeRequests:i,attributeUpdates:r,serverSideRpc:s});return{workers:t&&(t.maxNumberOfWorkers||t.maxMessageNumberPerWorker)?{maxNumberOfWorkers:t.maxNumberOfWorkers,maxMessageNumberPerWorker:t.maxMessageNumberPerWorker}:{},mapping:ma.mapMappingToUpgradedVersion(n)||[],broker:t||{},requestsMapping:this.getRequestDataArray(l)}}getMappedValue(e){const{broker:t,workers:n,mapping:a,requestsMapping:o}=e||{},i=o?.length?this.getRequestDataObject(o):{};return{broker:this.getBrokerMappedValue(t,n),mapping:ma.mapMappingToDowngradedVersion(a),...ma.mapRequestsToDowngradedVersion(i)}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ao,deps:null,target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Ao,isStandalone:!0,selector:"tb-mqtt-legacy-basic-config",providers:[{provide:ge,useExisting:m((()=>Ao)),multi:!0},{provide:fe,useExisting:m((()=>Ao)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.broker.connection\' | translate }}*">\n    <tb-broker-config-control formControlName="broker"></tb-broker-config-control>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="MappingType.DATA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.requests-mapping\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="requestsMapping" [mappingType]="MappingType.REQUESTS"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.workers-settings\' | translate }}">\n    <div class="tb-form-panel no-border no-padding">\n      <tb-workers-config-control formControlName="workers"></tb-workers-config-control>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:uo,selector:"tb-workers-config-control"},{kind:"component",type:mo,selector:"tb-broker-config-control"},{kind:"component",type:ro,selector:"tb-mapping-table",inputs:["required","mappingType"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Ao,decorators:[{type:n,args:[{selector:"tb-mqtt-legacy-basic-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>Ao)),multi:!0},{provide:fe,useExisting:m((()=>Ao)),multi:!0}],standalone:!0,imports:[H,D,lo,uo,mo,ro],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.broker.connection\' | translate }}*">\n    <tb-broker-config-control formControlName="broker"></tb-broker-config-control>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="MappingType.DATA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.requests-mapping\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="requestsMapping" [mappingType]="MappingType.REQUESTS"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.workers-settings\' | translate }}">\n    <div class="tb-form-panel no-border no-padding">\n      <tb-workers-config-control formControlName="workers"></tb-workers-config-control>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n']}]}]});class No extends Io{mapConfigToFormValue(e){const{broker:t,mapping:n=[],requestsMapping:a}=e;return{workers:t&&(t.maxNumberOfWorkers||t.maxMessageNumberPerWorker)?{maxNumberOfWorkers:t.maxNumberOfWorkers,maxMessageNumberPerWorker:t.maxMessageNumberPerWorker}:{},mapping:n??[],broker:t??{},requestsMapping:this.getRequestDataArray(a)}}getMappedValue(e){const{broker:t,workers:n,mapping:a,requestsMapping:o}=e||{};return{broker:this.getBrokerMappedValue(t,n),mapping:a,requestsMapping:o?.length?this.getRequestDataObject(o):{}}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:No,deps:null,target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:No,isStandalone:!0,selector:"tb-mqtt-basic-config",providers:[{provide:ge,useExisting:m((()=>No)),multi:!0},{provide:fe,useExisting:m((()=>No)),multi:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.broker.connection\' | translate }}*">\n    <tb-broker-config-control formControlName="broker"></tb-broker-config-control>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="MappingType.DATA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.requests-mapping\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="requestsMapping" [mappingType]="MappingType.REQUESTS"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.workers-settings\' | translate }}">\n    <div class="tb-form-panel no-border no-padding">\n      <tb-workers-config-control formControlName="workers"></tb-workers-config-control>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:D},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"component",type:uo,selector:"tb-workers-config-control"},{kind:"component",type:mo,selector:"tb-broker-config-control"},{kind:"component",type:ro,selector:"tb-mapping-table",inputs:["required","mappingType"]}],changeDetection:t.ChangeDetectionStrategy.OnPush})}}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:No,decorators:[{type:n,args:[{selector:"tb-mqtt-basic-config",changeDetection:d.OnPush,providers:[{provide:ge,useExisting:m((()=>No)),multi:!0},{provide:fe,useExisting:m((()=>No)),multi:!0}],standalone:!0,imports:[H,D,lo,uo,mo,ro],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group [formGroup]="basicFormGroup">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.broker.connection\' | translate }}*">\n    <tb-broker-config-control formControlName="broker"></tb-broker-config-control>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.data-mapping\' | translate }}*">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="MappingType.DATA"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.requests-mapping\' | translate }}">\n    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">\n      <tb-mapping-table formControlName="requestsMapping" [mappingType]="MappingType.REQUESTS"></tb-mapping-table>\n    </div>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.workers-settings\' | translate }}">\n    <div class="tb-form-panel no-border no-padding">\n      <tb-workers-config-control formControlName="workers"></tb-workers-config-control>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\n',styles:['@charset "UTF-8";:host{height:100%}:host ::ng-deep .mat-mdc-tab-group,:host ::ng-deep .mat-mdc-tab-body-wrapper{height:100%}\n']}]}]});class Mo{isErrorState(e){return e&&e.invalid}}e("ForceErrorStateMatcher",Mo);class Eo extends O{constructor(e,t,n,a,o,i,r,s,l,c,p){super(e),this.store=e,this.fb=t,this.translate=n,this.attributeService=a,this.dialogService=o,this.dialog=i,this.telemetryWsService=r,this.zone=s,this.utils=l,this.isLatestVersionConfig=c,this.cd=p,this.ConnectorType=_t,this.allowBasicConfig=new Set([_t.MQTT,_t.OPCUA,_t.MODBUS]),this.gatewayLogLevel=Object.values(Mt),this.displayedColumns=["enabled","key","type","syncStatus","errors","actions"],this.GatewayConnectorTypesTranslatesMap=Ht,this.ConnectorConfigurationModes=on,this.ReportStrategyDefaultValue=ln,this.mode=this.ConnectorConfigurationModes.BASIC,this.basicConfigInitSubject=new Se,this.activeData=[],this.inactiveData=[],this.sharedAttributeData=[],this.subscriptionOptions={callbacks:{onDataUpdated:()=>this.ctx.ngZone.run((()=>{this.onErrorsUpdated()})),onDataUpdateError:(e,t)=>this.ctx.ngZone.run((()=>{this.onDataUpdateError(t)}))}},this.destroy$=new Se,this.attributeUpdateSubject=new Se,this.initDataSources(),this.initConnectorForm(),this.observeAttributeChange()}ngAfterViewInit(){this.dataSource.sort=this.sort,this.dataSource.sortingDataAccessor=this.getSortingDataAccessor(),this.ctx.$scope.gatewayConnectors=this,this.loadConnectors(),this.loadGatewayState(),this.observeModeChange()}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete(),super.ngOnDestroy()}onSaveConnector(){this.saveConnector(this.getUpdatedConnectorData(this.connectorForm.value),!1)}saveConnector(e,t=!0){const n=t||this.activeConnectors.includes(this.initialConnector.name)?L.SHARED_SCOPE:L.SERVER_SCOPE;Ae(this.getEntityAttributeTasks(e,n)).pipe(Oe(1)).subscribe((n=>{this.showToast(t?this.translate.instant("gateway.connector-created"):this.translate.instant("gateway.connector-updated")),this.initialConnector=e,this.updateData(!0),this.connectorForm.markAsPristine()}))}getEntityAttributeTasks(e,t){const n=[],a=[{key:e.name,value:e}],o=[],i=!this.activeConnectors.includes(e.name)&&t===L.SHARED_SCOPE||!this.inactiveConnectors.includes(e.name)&&t===L.SERVER_SCOPE,r=this.initialConnector&&this.initialConnector.name!==e.name;return r&&(o.push({key:this.initialConnector.name}),this.removeConnectorFromList(this.initialConnector.name,!0),this.removeConnectorFromList(this.initialConnector.name,!1)),i&&(t===L.SHARED_SCOPE?this.activeConnectors.push(e.name):this.inactiveConnectors.push(e.name)),(r||i)&&n.push(this.getSaveEntityAttributesTask(t)),n.push(this.attributeService.saveEntityAttributes(this.device,t,a)),o.length&&n.push(this.attributeService.deleteEntityAttributes(this.device,t,o)),n}getSaveEntityAttributesTask(e){const t=e===L.SHARED_SCOPE?"active_connectors":"inactive_connectors",n=e===L.SHARED_SCOPE?this.activeConnectors:this.inactiveConnectors;return this.attributeService.saveEntityAttributes(this.device,e,[{key:t,value:n}])}removeConnectorFromList(e,t){const n=t?this.activeConnectors:this.inactiveConnectors,a=n.indexOf(e);-1!==a&&n.splice(a,1)}getUpdatedConnectorData(e){const t={...e};return t.configuration=`${ce(t.name)}.json`,delete t.basicConfig,t.type!==_t.GRPC&&delete t.key,t.type!==_t.CUSTOM&&delete t.class,t.type===_t.MODBUS&&this.isLatestVersionConfig.transform(t.configVersion)&&(t.reportStrategy||(t.reportStrategy={type:sn.OnReportPeriod,reportPeriod:ln.Connector},delete t.sendDataOnlyOnChange)),this.gatewayVersion&&!t.configVersion&&(t.configVersion=this.gatewayVersion),t.ts=Date.now(),t}updateData(e=!1){this.pageLink.sortOrder.property=this.sort.active,this.pageLink.sortOrder.direction=w[this.sort.direction.toUpperCase()],this.attributeDataSource.loadAttributes(this.device,L.CLIENT_SCOPE,this.pageLink,e).subscribe((e=>{this.activeData=e.data.filter((e=>this.activeConnectors.includes(e.key))),this.combineData(),this.generateSubscription(),this.setClientData(e)})),this.inactiveConnectorsDataSource.loadAttributes(this.device,L.SHARED_SCOPE,this.pageLink,e).subscribe((e=>{this.sharedAttributeData=e.data.filter((e=>this.activeConnectors.includes(e.key))),this.combineData()})),this.serverDataSource.loadAttributes(this.device,L.SERVER_SCOPE,this.pageLink,e).subscribe((e=>{this.inactiveData=e.data.filter((e=>this.inactiveConnectors.includes(e.key))),this.combineData()}))}isConnectorSynced(e){const t=e.value;if(!t.ts||e.skipSync||!this.isGatewayActive)return!1;if(-1===this.activeData.findIndex((e=>("string"==typeof e.value?JSON.parse(e.value):e.value).name===t.name)))return!1;return-1!==this.sharedAttributeData.findIndex((e=>{const n=e.value,a=n.name===t.name,o=ee(n.configurationJson,{})&&a,i=this.hasSameConfig(n.configurationJson,t.configurationJson),r=n.ts&&n.ts<=t.ts;return a&&r&&(i||o)}))}hasSameConfig(e,t){const{name:n,id:a,enableRemoteLogging:o,logLevel:i,reportStrategy:r,configVersion:s,...l}=e,{name:c,id:p,enableRemoteLogging:m,logLevel:d,reportStrategy:u,configVersion:g,...f}=t;return ee(l,f)}combineData(){const e=[...this.activeData,...this.inactiveData,...this.sharedAttributeData].reduce(((e,t)=>{const n=e.findIndex((e=>e.key===t.key));return-1===n?e.push(t):t.lastUpdateTs>e[n].lastUpdateTs&&!this.isConnectorSynced(e[n])&&(e[n]={...t,skipSync:!0}),e}),[]);this.dataSource.data=e.map((e=>({...e,value:"string"==typeof e.value?JSON.parse(e.value):e.value})))}clearOutConnectorForm(){this.initialConnector=null,this.connectorForm.setValue({mode:on.BASIC,name:"",type:_t.MQTT,sendDataOnlyOnChange:!1,enableRemoteLogging:!1,logLevel:Mt.INFO,key:"auto",class:"",configuration:"",configurationJson:{},basicConfig:{},configVersion:"",reportStrategy:[{value:{},disabled:!0}]},{emitEvent:!1}),this.connectorForm.markAsPristine()}selectConnector(e,t){e&&e.stopPropagation();const n=t.value;n?.name!==this.initialConnector?.name&&this.confirmConnectorChange().subscribe((e=>{e&&this.setFormValue(n)}))}isSameConnector(e){if(!this.initialConnector)return!1;const t=e.value;return this.initialConnector.name===t.name}showToast(e){this.store.dispatch({type:"[Notification] Show",notification:{message:e,type:"success",duration:1e3,verticalPosition:"top",horizontalPosition:"left",target:"dashboardRoot",forceDismiss:!0}})}returnType(e){const t=e.value;return this.GatewayConnectorTypesTranslatesMap.get(t.type)}deleteConnector(e,t){t?.stopPropagation();const n=`Delete connector "${e.key}"?`;this.dialogService.confirm(n,"All connector data will be deleted.","Cancel","Delete").pipe(Oe(1),Ue((t=>{if(!t)return;const n=[],a=this.activeConnectors.includes(e.value?.name)?L.SHARED_SCOPE:L.SERVER_SCOPE;return n.push(this.attributeService.deleteEntityAttributes(this.device,a,[e])),this.removeConnectorFromList(e.key,!0),this.removeConnectorFromList(e.key,!1),n.push(this.getSaveEntityAttributesTask(a)),Ae(n)}))).subscribe((()=>{this.initialConnector&&this.initialConnector.name!==e.key||(this.clearOutConnectorForm(),this.cd.detectChanges(),this.connectorForm.disable()),this.updateData(!0)}))}connectorLogs(e,t){t&&t.stopPropagation();const n=J(this.ctx.stateController.getStateParams());n.connector_logs=e,n.targetEntityParamName="connector_logs",this.ctx.stateController.openState("connector_logs",n)}connectorRpc(e,t){t&&t.stopPropagation();const n=J(this.ctx.stateController.getStateParams());n.connector_rpc=e,n.targetEntityParamName="connector_rpc",this.ctx.stateController.openState("connector_rpc",n)}onEnableConnector(e){e.value.ts=(new Date).getTime(),this.updateActiveConnectorKeys(e.key),this.attributeUpdateSubject.next(e)}getErrorsCount(e){const t=e.key,n=this.subscription&&this.subscription.data.find((e=>e&&e.dataKey.name===`${t}_ERRORS_COUNT`));return n&&this.activeConnectors.includes(t)?n.data[0][1]||0:"Inactive"}onAddConnector(e){e?.stopPropagation(),this.confirmConnectorChange().pipe(Oe(1),Me(Boolean),Ue((()=>this.openAddConnectorDialog())),Me(Boolean)).subscribe((e=>this.addConnector(e)))}addConnector(e){this.connectorForm.disabled&&this.connectorForm.enable(),e.configurationJson||(e.configurationJson={}),this.gatewayVersion&&!e.configVersion&&(e.configVersion=this.gatewayVersion),e.basicConfig=e.configurationJson,this.initialConnector=e;const t=this.connectorForm.get("type").value;this.setInitialConnectorValues(e),this.saveConnector(this.getUpdatedConnectorData(e)),t!==e.type&&this.allowBasicConfig.has(e.type)?this.basicConfigInitSubject.pipe(Oe(1)).subscribe((()=>{this.patchBasicConfigConnector(e)})):this.patchBasicConfigConnector(e)}setInitialConnectorValues(e){const{basicConfig:t,mode:n,...a}=e;this.toggleReportStrategy(e.type),this.connectorForm.get("mode").setValue(this.allowBasicConfig.has(e.type)?e.mode??on.BASIC:null,{emitEvent:!1}),this.connectorForm.patchValue(a,{emitEvent:!1})}openAddConnectorDialog(){return this.ctx.ngZone.run((()=>this.dialog.open(to,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{dataSourceData:this.dataSource.data,gatewayVersion:this.gatewayVersion}}).afterClosed()))}uniqNameRequired(){return e=>{const t=e.value?.trim().toLowerCase(),n=this.dataSource.data.some((e=>e.value.name.toLowerCase()===t)),a=this.initialConnector?.name.toLowerCase()===t;return n&&!a?{duplicateName:{valid:!1}}:null}}initDataSources(){const e={property:"key",direction:w.ASC};this.pageLink=new C(1e3,0,null,e),this.attributeDataSource=new La(this.attributeService,this.telemetryWsService,this.zone,this.translate),this.inactiveConnectorsDataSource=new La(this.attributeService,this.telemetryWsService,this.zone,this.translate),this.serverDataSource=new La(this.attributeService,this.telemetryWsService,this.zone,this.translate),this.dataSource=new y([])}initConnectorForm(){this.connectorForm=this.fb.group({mode:[on.BASIC],name:["",[ue.required,this.uniqNameRequired(),ue.pattern(kt)]],type:["",[ue.required]],enableRemoteLogging:[!1],logLevel:["",[ue.required]],sendDataOnlyOnChange:[!1],key:["auto"],class:[""],configuration:[""],configurationJson:[{},[ue.required]],basicConfig:[{}],configVersion:[""],reportStrategy:[{value:{},disabled:!0}]}),this.connectorForm.disable()}getSortingDataAccessor(){return(e,t)=>{switch(t){case"syncStatus":return this.isConnectorSynced(e)?1:0;case"enabled":return this.activeConnectors.includes(e.key)?1:0;case"errors":const n=this.getErrorsCount(e);return"string"==typeof n?this.sort.direction.toUpperCase()===w.DESC?-1:1/0:n;default:return e[t]||e.value[t]}}}loadConnectors(){this.device&&this.device.id!==k&&Ae([this.attributeService.getEntityAttributes(this.device,L.SHARED_SCOPE,["active_connectors"]),this.attributeService.getEntityAttributes(this.device,L.SERVER_SCOPE,["inactive_connectors"]),this.attributeService.getEntityAttributes(this.device,L.CLIENT_SCOPE,["Version"])]).pipe(Ne(this.destroy$)).subscribe((e=>{this.activeConnectors=this.parseConnectors(e[0]),this.inactiveConnectors=this.parseConnectors(e[1]),this.gatewayVersion=e[2][0]?.value,this.updateData(!0)}))}loadGatewayState(){this.attributeService.getEntityAttributes(this.device,L.SERVER_SCOPE).pipe(Ne(this.destroy$)).subscribe((e=>{const t=e.find((e=>"active"===e.key)).value,n=e.find((e=>"lastDisconnectTime"===e.key))?.value,a=e.find((e=>"lastConnectTime"===e.key))?.value;this.isGatewayActive=this.getGatewayStatus(t,a,n)}))}parseConnectors(e){const t=e?.[0]?.value||[];return ne(t)?JSON.parse(t):t}observeModeChange(){this.connectorForm.get("mode").valueChanges.pipe(Ne(this.destroy$)).subscribe((()=>{this.connectorForm.get("mode").markAsPristine()}))}observeAttributeChange(){this.attributeUpdateSubject.pipe(Ve(300),Ee((e=>this.executeAttributeUpdates(e))),Ne(this.destroy$)).subscribe()}updateActiveConnectorKeys(e){if(this.activeConnectors.includes(e)){const t=this.activeConnectors.indexOf(e);-1!==t&&this.activeConnectors.splice(t,1),this.inactiveConnectors.push(e)}else{const t=this.inactiveConnectors.indexOf(e);-1!==t&&this.inactiveConnectors.splice(t,1),this.activeConnectors.push(e)}}executeAttributeUpdates(e){Ae(this.getAttributeExecutionTasks(e)).pipe(Oe(1),Ee((()=>this.updateData(!0))),Ne(this.destroy$)).subscribe()}getAttributeExecutionTasks(e){const t=this.activeConnectors.includes(e.key),n=t?L.SERVER_SCOPE:L.SHARED_SCOPE,a=t?L.SHARED_SCOPE:L.SERVER_SCOPE;return[this.attributeService.saveEntityAttributes(this.device,L.SHARED_SCOPE,[{key:"active_connectors",value:this.activeConnectors}]),this.attributeService.saveEntityAttributes(this.device,L.SERVER_SCOPE,[{key:"inactive_connectors",value:this.inactiveConnectors}]),this.attributeService.deleteEntityAttributes(this.device,n,[e]),this.attributeService.saveEntityAttributes(this.device,a,[e])]}onDataUpdateError(e){const t=this.utils.parseException(e);let n=t.name;t.message&&(n+=": "+t.message),console.error(n)}onErrorsUpdated(){this.cd.detectChanges()}onDataUpdated(){const e=this.ctx.defaultSubscription.data,t=e.find((e=>"active"===e.dataKey.name)).data[0][1],n=e.find((e=>"lastDisconnectTime"===e.dataKey.name)).data[0][1],a=e.find((e=>"lastConnectTime"===e.dataKey.name)).data[0][1];this.isGatewayActive=this.getGatewayStatus(t,a,n),this.cd.detectChanges()}getGatewayStatus(e,t,n){return!!e&&(!n||t>n)}generateSubscription(){if(this.subscription&&this.subscription.unsubscribe(),this.device){const e=[{type:F.entity,entityType:I.DEVICE,entityId:this.device.id,entityName:"Gateway",timeseries:[]}];this.dataSource.data.forEach((t=>{e[0].timeseries.push({name:`${t.key}_ERRORS_COUNT`,label:`${t.key}_ERRORS_COUNT`})})),this.ctx.subscriptionApi.createSubscriptionFromInfo(A.latest,e,this.subscriptionOptions,!1,!0).subscribe((e=>{this.subscription=e}))}}createBasicConfigWatcher(){this.basicConfigSub&&this.basicConfigSub.unsubscribe(),this.basicConfigSub=this.connectorForm.get("basicConfig").valueChanges.pipe(Me((()=>!!this.initialConnector)),Ne(this.destroy$)).subscribe((e=>{const t=this.connectorForm.get("configurationJson"),n=this.connectorForm.get("type").value,a=this.connectorForm.get("mode").value;if(!ee(e,t?.value)&&this.allowBasicConfig.has(n)&&a===on.BASIC){const n={...t.value,...e};this.connectorForm.get("configurationJson").patchValue(n,{emitEvent:!1})}}))}createJsonConfigWatcher(){this.jsonConfigSub&&this.jsonConfigSub.unsubscribe(),this.jsonConfigSub=this.connectorForm.get("configurationJson").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{const t=this.connectorForm.get("basicConfig"),n=this.connectorForm.get("type").value,a=this.connectorForm.get("mode").value;!ee(e,t?.value)&&this.allowBasicConfig.has(n)&&a===on.ADVANCED&&this.connectorForm.get("basicConfig").patchValue(e,{emitEvent:!1})}))}confirmConnectorChange(){return this.initialConnector&&this.connectorForm.dirty?this.dialogService.confirm(this.translate.instant("gateway.change-connector-title"),this.translate.instant("gateway.change-connector-text"),this.translate.instant("action.no"),this.translate.instant("action.yes"),!0):Ie(!0)}setFormValue(e){this.connectorForm.disabled&&this.connectorForm.enable();const t=ba.getConfig({configuration:"",key:"auto",configurationJson:{},...e},this.gatewayVersion);this.gatewayVersion&&!t.configVersion&&(t.configVersion=this.gatewayVersion),t.basicConfig=t.configurationJson,this.initialConnector=t,this.updateConnector(t)}updateConnector(e){switch(this.jsonConfigSub?.unsubscribe(),e.type){case _t.MQTT:case _t.OPCUA:case _t.MODBUS:this.updateBasicConfigConnector(e);break;default:this.connectorForm.patchValue({...e,mode:null}),this.connectorForm.markAsPristine(),this.createJsonConfigWatcher()}}updateBasicConfigConnector(e){this.basicConfigSub?.unsubscribe();const t=this.connectorForm.get("type").value;this.setInitialConnectorValues(e),t!==e.type&&this.allowBasicConfig.has(e.type)?this.basicConfigInitSubject.asObservable().pipe(Oe(1)).subscribe((()=>{this.patchBasicConfigConnector(e)})):this.patchBasicConfigConnector(e)}patchBasicConfigConnector(e){this.connectorForm.patchValue(e,{emitEvent:!1}),this.connectorForm.markAsPristine(),this.createBasicConfigWatcher(),this.createJsonConfigWatcher()}toggleReportStrategy(e){const t=this.connectorForm.get("reportStrategy");e===_t.MODBUS?t.enable({emitEvent:!1}):t.disable({emitEvent:!1})}setClientData(e){if(this.initialConnector){const t=e.data.find((e=>e.key===this.initialConnector.name));t&&(t.value="string"==typeof t.value?JSON.parse(t.value):t.value,this.isConnectorSynced(t)&&t.value.configurationJson&&this.setFormValue({...t.value,mode:this.connectorForm.get("mode").value??t.value.mode}))}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Eo,deps:[{token:ot.Store},{token:me.FormBuilder},{token:Y.TranslateService},{token:X.AttributeService},{token:X.DialogService},{token:Je.MatDialog},{token:X.TelemetryWebsocketService},{token:t.NgZone},{token:X.UtilsService},{token:va},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Eo,selector:"tb-gateway-connector",inputs:{ctx:"ctx",device:"device"},providers:[{provide:Te,useClass:Mo}],viewQueries:[{propertyName:"nameInput",first:!0,predicate:["nameInput"],descendants:!0},{propertyName:"sort",first:!0,predicate:g,descendants:!0}],usesInheritance:!0,ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="connector-container tb-form-panel no-border">\n  <section class="table-section tb-form-panel no-padding flex section-container">\n    <mat-toolbar class="mat-mdc-table-toolbar">\n      <h2>{{ \'gateway.connectors\' | translate }}</h2>\n      <span fxFlex></span>\n      <button *ngIf="dataSource?.data?.length"\n              mat-icon-button\n              [disabled]="isLoading$ | async"\n              (click)="onAddConnector($event)"\n              matTooltip="{{ \'action.add\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-toolbar>\n    <div class="table-container">\n      <section *ngIf="!dataSource?.data?.length" fxLayoutAlign="center center"\n               class="mat-headline-5 tb-absolute-fill tb-add-new">\n        <button mat-button class="connector"\n        (click)="onAddConnector($event)">\n          <mat-icon class="tb-mat-96">add</mat-icon>\n          <span>{{ \'gateway.add-connector\' | translate }}</span>\n        </button>\n      </section>\n      <table mat-table [dataSource]="dataSource"\n             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"\n             matSortDisableClear>\n        <ng-container matColumnDef="enabled" sticky>\n          <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">\n            {{ \'gateway.connectors-table-enabled\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute">\n            <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"\n                              (click)="$event.stopPropagation(); onEnableConnector(attribute)"></mat-slide-toggle>\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="key">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">\n            {{ \'gateway.connectors-table-name\' | translate }}</mat-header-cell>\n          <mat-cell *matCellDef="let attribute">\n            {{ attribute.key }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="type">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">\n            {{ \'gateway.connectors-table-type\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">\n            {{ returnType(attribute) }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="syncStatus">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">\n            {{ \'gateway.configuration\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">\n              <div class="status" [class]="isConnectorSynced(attribute) ? \'status-sync\' : \'status-unsync\'">\n                {{ isConnectorSynced(attribute) ? \'sync\' : \'out of sync\' }}\n              </div>\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="errors">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">\n            {{ \'gateway.connectors-table-status\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">\n            <span class="dot"\n                  matTooltip="{{ \'Errors: \'+ getErrorsCount(attribute)}}"\n                  matTooltipPosition="above"\n                  (click)="connectorLogs(attribute, $event)"\n                  [class]="{\'hasErrors\': +getErrorsCount(attribute) > 0,\n                            \'noErrors\': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === \'\'}"></span>\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="actions" stickyEnd>\n          <mat-header-cell *matHeaderCellDef\n                           [ngStyle.gt-md]="{ minWidth: \'144px\', maxWidth: \'144px\', width: \'144px\', textAlign: \'center\'}">\n            {{ \'gateway.connectors-table-actions\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute"\n                    [ngStyle.gt-md]="{ minWidth: \'144px\', maxWidth: \'144px\', width: \'144px\'}">\n            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">\n              <button mat-icon-button\n                      matTooltip="RPC"\n                      matTooltipPosition="above"\n                      (click)="connectorRpc(attribute, $event)">\n                <mat-icon>private_connectivity</mat-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="Logs"\n                      matTooltipPosition="above"\n                      (click)="connectorLogs(attribute, $event)">\n                <mat-icon>list</mat-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="Delete connector"\n                      matTooltipPosition="above"\n                      (click)="deleteConnector(attribute, $event)">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <div fxHide fxShow.lt-lg>\n              <button mat-icon-button\n                      (click)="$event.stopPropagation()"\n                      [matMenuTriggerFor]="cellActionsMenu">\n                <mat-icon class="material-icons">more_vert</mat-icon>\n              </button>\n              <mat-menu #cellActionsMenu="matMenu" xPosition="before">\n                <button mat-icon-button\n                        matTooltip="RPC"\n                        matTooltipPosition="above"\n                        (click)="connectorRpc(attribute, $event)">\n                  <mat-icon>private_connectivity</mat-icon>\n                </button>\n                <button mat-icon-button\n                        matTooltip="Logs"\n                        matTooltipPosition="above"\n                        (click)="connectorLogs(attribute, $event)">\n                  <mat-icon>list</mat-icon>\n                </button>\n                <button mat-icon-button\n                        matTooltip="Delete connector"\n                        matTooltipPosition="above"\n                        (click)="deleteConnector(attribute, $event)">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </mat-menu>\n            </div>\n          </mat-cell>\n        </ng-container>\n        <mat-header-row class="mat-row-select"\n                        *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n        <mat-row class="mat-row-select" [class]="{\'tb-current-entity\': isSameConnector(attribute)}"\n                 *matRowDef="let attribute; let i = index; columns: displayedColumns;" (click)="selectConnector($event, attribute)"></mat-row>\n      </table>\n    </div>\n  </section>\n  <section [formGroup]="connectorForm" class="tb-form-panel section-container flex">\n    <div class="tb-form-panel-title tb-flex no-flex space-between align-center">\n      <div class="tb-form-panel-title">\n        {{ initialConnector?.type ? GatewayConnectorTypesTranslatesMap.get(initialConnector.type) : \'\' }}\n        {{ \'gateway.configuration\' | translate }}\n        <span class="version-placeholder" *ngIf="connectorForm.get(\'configVersion\').value">v{{connectorForm.get(\'configVersion\').value}}</span>\n      </div>\n      <tb-toggle-select *ngIf="initialConnector && allowBasicConfig.has(initialConnector.type)"\n                        formControlName="mode" appearance="fill">\n        <tb-toggle-option [value]="ConnectorConfigurationModes.BASIC">\n          {{ \'gateway.basic\' | translate }}\n        </tb-toggle-option>\n        <tb-toggle-option [value]="ConnectorConfigurationModes.ADVANCED">\n          {{ \'gateway.advanced\' | translate }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n    <span [fxShow]="!initialConnector"\n          fxLayoutAlign="center center"\n          class="no-data-found" translate>\n      gateway.select-connector\n    </span>\n    <section class="tb-form-panel section-container no-border no-padding tb-flex space-between" *ngIf="initialConnector">\n      <ng-container *ngIf="connectorForm.get(\'mode\')?.value === ConnectorConfigurationModes.BASIC else defaultConfig">\n        <ng-container [ngSwitch]="initialConnector.type">\n          <ng-container *ngSwitchCase="ConnectorType.MQTT">\n            <tb-mqtt-basic-config\n              *ngIf="connectorForm.get(\'configVersion\').value | isLatestVersionConfig else legacy"\n              formControlName="basicConfig"\n              [generalTabContent]="generalTabContent"\n              (initialized)="basicConfigInitSubject.next()"\n            />\n            <ng-template #legacy>\n              <tb-mqtt-legacy-basic-config\n                (initialized)="basicConfigInitSubject.next()"\n                formControlName="basicConfig"\n                [generalTabContent]="generalTabContent"\n              />\n            </ng-template>\n          </ng-container>\n          <ng-container *ngSwitchCase="ConnectorType.OPCUA">\n            <tb-opc-ua-basic-config\n              *ngIf="connectorForm.get(\'configVersion\').value | isLatestVersionConfig else legacy"\n              formControlName="basicConfig"\n              [generalTabContent]="generalTabContent"\n              (initialized)="basicConfigInitSubject.next()"\n            />\n            <ng-template #legacy>\n              <tb-opc-ua-legacy-basic-config\n                (initialized)="basicConfigInitSubject.next()"\n                formControlName="basicConfig"\n                [generalTabContent]="generalTabContent"\n              />\n            </ng-template>\n          </ng-container>\n          <ng-container *ngSwitchCase="ConnectorType.MODBUS">\n            <tb-modbus-basic-config\n              *ngIf="connectorForm.get(\'configVersion\').value | isLatestVersionConfig else legacy"\n              formControlName="basicConfig"\n              [generalTabContent]="generalTabContent"\n              (initialized)="basicConfigInitSubject.next()"\n            />\n            <ng-template #legacy>\n              <tb-modbus-legacy-basic-config\n                formControlName="basicConfig"\n                (initialized)="basicConfigInitSubject.next()"\n                [generalTabContent]="generalTabContent"\n              />\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <ng-template #defaultConfig>\n        <mat-tab-group>\n          <mat-tab label="{{ \'gateway.general\' | translate }}">\n            <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n          </mat-tab>\n          <mat-tab label="{{ \'gateway.configuration\' | translate }}*">\n            <tb-json-object-edit\n              fillHeight="true"\n              class="tb-flex fill-height"\n              fxLayout="column"\n              jsonRequired\n              label="{{ \'gateway.configuration\' | translate }}"\n              formControlName="configurationJson">\n            </tb-json-object-edit>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-template>\n      <div fxLayoutAlign="end center">\n        <button mat-raised-button color="primary"\n                type="button"\n                [disabled]="!connectorForm.dirty || connectorForm.invalid"\n                (click)="onSaveConnector()">\n          {{ \'action.save\' | translate }}\n        </button>\n      </div>\n    </section>\n  </section>\n</div>\n<ng-template #generalTabContent>\n  <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding padding-top section-container flex">\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" >\n      <div class="fixed-title-width tb-required" translate>gateway.name</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(connectorForm.get(\'name\').hasError(\'duplicateName\') ?\n                                    \'gateway.connector-duplicate-name\' : \'gateway.name-required\') | translate"\n                    *ngIf="(connectorForm.get(\'name\').hasError(\'required\') && connectorForm.get(\'name\').touched) ||\n                                    connectorForm.get(\'name\').hasError(\'duplicateName\')"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div *ngIf="connectorForm.get(\'type\').value === ConnectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width" translate>gateway.connectors-table-class</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="class" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n    <div *ngIf="connectorForm.get(\'type\').value === ConnectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width" translate>gateway.connectors-table-key</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-panel stroked">\n      <div class="tb-form-panel-title" translate>gateway.logs-configuration</div>\n      <div class="tb-form-row" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide" formControlName="enableRemoteLogging">\n          <mat-label>\n            {{ \'gateway.enable-remote-logging\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.remote-logging-level</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="logLevel">\n              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div *ngIf="connectorForm.get(\'type\').value === ConnectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">\n        <mat-label tb-hint-tooltip-icon="{{ \'gateway.send-change-data-hint\' | translate }}">\n          {{ \'gateway.send-change-data\' | translate }}\n        </mat-label>\n      </mat-slide-toggle>\n    </div>\n    <tb-report-strategy\n      [defaultValue]="ReportStrategyDefaultValue.Connector"\n      *ngIf="connectorForm.get(\'type\').value === ConnectorType.MODBUS && (connectorForm.get(\'configVersion\').value | isLatestVersionConfig)"\n      formControlName="reportStrategy"\n    />\n  </section>\n</ng-template>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block;overflow-x:auto;padding:0}:host .version-placeholder{color:gray;font-size:12px}:host .connector-container{height:100%;width:100%;flex-direction:row}@media screen and (max-width: 1279px){:host .connector-container{flex-direction:column}}:host .connector-container>section:not(.table-section){max-width:unset}@media screen and (min-width: 1280px){:host .connector-container>section:not(.table-section){max-width:50%}}:host .connector-container .table-section{min-height:35vh;overflow:hidden}:host .connector-container .table-section .table-container{overflow:auto}:host .connector-container .flex{flex:1}:host .connector-container .input-container{height:auto}:host .connector-container .section-container{background-color:#fff}:host .mat-toolbar{background:transparent;color:#000000de!important}:host .mat-mdc-slide-toggle{margin:0 8px}:host .status{text-align:center;border-radius:16px;font-weight:500;width:fit-content;padding:5px 15px}:host .status-sync{background:#1980380f;color:#198038}:host .status-unsync{background:#cb25300f;color:#cb2530}:host mat-row{cursor:pointer}:host .dot{height:12px;width:12px;background-color:#bbb;border-radius:50%;display:inline-block}:host .hasErrors{background-color:#cb2530}:host .noErrors{background-color:#198038}:host ::ng-deep .connector-container .mat-mdc-tab-group,:host ::ng-deep .connector-container .mat-mdc-tab-body-wrapper{height:100%}:host ::ng-deep .connector-container .mat-mdc-tab-body.mat-mdc-tab-body-active{position:absolute}:host ::ng-deep .connector-container .tb-form-row .fixed-title-width{min-width:120px;width:30%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .connector-container .tb-add-new{display:flex;z-index:999;pointer-events:none;background-color:#fff}:host ::ng-deep .connector-container .tb-add-new button.connector{height:auto;padding-right:12px;font-size:20px;border-style:dashed;border-width:2px;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;color:#00000061}\n'],dependencies:[{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"component",type:vt.JsonObjectEditComponent,selector:"tb-json-object-edit",inputs:["label","disabled","fillHeight","editorStyle","sort","jsonRequired","readonly"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"component",type:ht.MatMenu,selector:"mat-menu",inputs:["backdropClass","aria-label","aria-labelledby","aria-describedby","xPosition","yPosition","overlapTrigger","hasBackdrop","class","classList"],outputs:["closed","close"],exportAs:["matMenu"]},{kind:"directive",type:ht.MatMenuTrigger,selector:"[mat-menu-trigger-for], [matMenuTriggerFor]",inputs:["mat-menu-trigger-for","matMenuTriggerFor","matMenuTriggerData","matMenuTriggerRestoreFocus"],outputs:["menuOpened","onMenuOpen","menuClosed","onMenuClose"],exportAs:["matMenuTrigger"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"component",type:b.MatTable,selector:"mat-table, table[mat-table]",exportAs:["matTable"]},{kind:"directive",type:b.MatHeaderCellDef,selector:"[matHeaderCellDef]"},{kind:"directive",type:b.MatHeaderRowDef,selector:"[matHeaderRowDef]",inputs:["matHeaderRowDef","matHeaderRowDefSticky"]},{kind:"directive",type:b.MatColumnDef,selector:"[matColumnDef]",inputs:["matColumnDef"]},{kind:"directive",type:b.MatCellDef,selector:"[matCellDef]"},{kind:"directive",type:b.MatRowDef,selector:"[matRowDef]",inputs:["matRowDefColumns","matRowDefWhen"]},{kind:"directive",type:b.MatHeaderCell,selector:"mat-header-cell, th[mat-header-cell]"},{kind:"directive",type:b.MatCell,selector:"mat-cell, td[mat-cell]"},{kind:"component",type:b.MatHeaderRow,selector:"mat-header-row, tr[mat-header-row]",exportAs:["matHeaderRow"]},{kind:"component",type:b.MatRow,selector:"mat-row, tr[mat-row]",exportAs:["matRow"]},{kind:"directive",type:f.MatSort,selector:"[matSort]",inputs:["matSortActive","matSortStart","matSortDirection","matSortDisableClear","matSortDisabled"],outputs:["matSortChange"],exportAs:["matSort"]},{kind:"component",type:f.MatSortHeader,selector:"[mat-sort-header]",inputs:["mat-sort-header","arrowPosition","start","disabled","sortActionDescription","disableClear"],exportAs:["matSortHeader"]},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:K.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"directive",type:K.DefaultStyleDirective,selector:"  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]",inputs:["ngStyle","ngStyle.xs","ngStyle.sm","ngStyle.md","ngStyle.lg","ngStyle.xl","ngStyle.lt-sm","ngStyle.lt-md","ngStyle.lt-lg","ngStyle.lt-xl","ngStyle.gt-xs","ngStyle.gt-sm","ngStyle.gt-md","ngStyle.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:Lo,selector:"tb-modbus-legacy-basic-config"},{kind:"component",type:ko,selector:"tb-modbus-basic-config"},{kind:"component",type:Fo,selector:"tb-opc-ua-legacy-basic-config"},{kind:"component",type:po,selector:"tb-opc-ua-basic-config"},{kind:"component",type:Ao,selector:"tb-mqtt-legacy-basic-config"},{kind:"component",type:No,selector:"tb-mqtt-basic-config"},{kind:"component",type:go,selector:"tb-report-strategy",inputs:["isExpansionMode","defaultValue"]},{kind:"pipe",type:_.AsyncPipe,name:"async"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"pipe",type:va,name:"isLatestVersionConfig"}]})}}e("GatewayConnectorComponent",Eo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Eo,decorators:[{type:n,args:[{selector:"tb-gateway-connector",providers:[{provide:Te,useClass:Mo}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div class="connector-container tb-form-panel no-border">\n  <section class="table-section tb-form-panel no-padding flex section-container">\n    <mat-toolbar class="mat-mdc-table-toolbar">\n      <h2>{{ \'gateway.connectors\' | translate }}</h2>\n      <span fxFlex></span>\n      <button *ngIf="dataSource?.data?.length"\n              mat-icon-button\n              [disabled]="isLoading$ | async"\n              (click)="onAddConnector($event)"\n              matTooltip="{{ \'action.add\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-toolbar>\n    <div class="table-container">\n      <section *ngIf="!dataSource?.data?.length" fxLayoutAlign="center center"\n               class="mat-headline-5 tb-absolute-fill tb-add-new">\n        <button mat-button class="connector"\n        (click)="onAddConnector($event)">\n          <mat-icon class="tb-mat-96">add</mat-icon>\n          <span>{{ \'gateway.add-connector\' | translate }}</span>\n        </button>\n      </section>\n      <table mat-table [dataSource]="dataSource"\n             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"\n             matSortDisableClear>\n        <ng-container matColumnDef="enabled" sticky>\n          <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">\n            {{ \'gateway.connectors-table-enabled\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute">\n            <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"\n                              (click)="$event.stopPropagation(); onEnableConnector(attribute)"></mat-slide-toggle>\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="key">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">\n            {{ \'gateway.connectors-table-name\' | translate }}</mat-header-cell>\n          <mat-cell *matCellDef="let attribute">\n            {{ attribute.key }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="type">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">\n            {{ \'gateway.connectors-table-type\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">\n            {{ returnType(attribute) }}\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="syncStatus">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">\n            {{ \'gateway.configuration\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">\n              <div class="status" [class]="isConnectorSynced(attribute) ? \'status-sync\' : \'status-unsync\'">\n                {{ isConnectorSynced(attribute) ? \'sync\' : \'out of sync\' }}\n              </div>\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="errors">\n          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">\n            {{ \'gateway.connectors-table-status\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">\n            <span class="dot"\n                  matTooltip="{{ \'Errors: \'+ getErrorsCount(attribute)}}"\n                  matTooltipPosition="above"\n                  (click)="connectorLogs(attribute, $event)"\n                  [class]="{\'hasErrors\': +getErrorsCount(attribute) > 0,\n                            \'noErrors\': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === \'\'}"></span>\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef="actions" stickyEnd>\n          <mat-header-cell *matHeaderCellDef\n                           [ngStyle.gt-md]="{ minWidth: \'144px\', maxWidth: \'144px\', width: \'144px\', textAlign: \'center\'}">\n            {{ \'gateway.connectors-table-actions\' | translate }}\n          </mat-header-cell>\n          <mat-cell *matCellDef="let attribute"\n                    [ngStyle.gt-md]="{ minWidth: \'144px\', maxWidth: \'144px\', width: \'144px\'}">\n            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">\n              <button mat-icon-button\n                      matTooltip="RPC"\n                      matTooltipPosition="above"\n                      (click)="connectorRpc(attribute, $event)">\n                <mat-icon>private_connectivity</mat-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="Logs"\n                      matTooltipPosition="above"\n                      (click)="connectorLogs(attribute, $event)">\n                <mat-icon>list</mat-icon>\n              </button>\n              <button mat-icon-button\n                      matTooltip="Delete connector"\n                      matTooltipPosition="above"\n                      (click)="deleteConnector(attribute, $event)">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <div fxHide fxShow.lt-lg>\n              <button mat-icon-button\n                      (click)="$event.stopPropagation()"\n                      [matMenuTriggerFor]="cellActionsMenu">\n                <mat-icon class="material-icons">more_vert</mat-icon>\n              </button>\n              <mat-menu #cellActionsMenu="matMenu" xPosition="before">\n                <button mat-icon-button\n                        matTooltip="RPC"\n                        matTooltipPosition="above"\n                        (click)="connectorRpc(attribute, $event)">\n                  <mat-icon>private_connectivity</mat-icon>\n                </button>\n                <button mat-icon-button\n                        matTooltip="Logs"\n                        matTooltipPosition="above"\n                        (click)="connectorLogs(attribute, $event)">\n                  <mat-icon>list</mat-icon>\n                </button>\n                <button mat-icon-button\n                        matTooltip="Delete connector"\n                        matTooltipPosition="above"\n                        (click)="deleteConnector(attribute, $event)">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </mat-menu>\n            </div>\n          </mat-cell>\n        </ng-container>\n        <mat-header-row class="mat-row-select"\n                        *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>\n        <mat-row class="mat-row-select" [class]="{\'tb-current-entity\': isSameConnector(attribute)}"\n                 *matRowDef="let attribute; let i = index; columns: displayedColumns;" (click)="selectConnector($event, attribute)"></mat-row>\n      </table>\n    </div>\n  </section>\n  <section [formGroup]="connectorForm" class="tb-form-panel section-container flex">\n    <div class="tb-form-panel-title tb-flex no-flex space-between align-center">\n      <div class="tb-form-panel-title">\n        {{ initialConnector?.type ? GatewayConnectorTypesTranslatesMap.get(initialConnector.type) : \'\' }}\n        {{ \'gateway.configuration\' | translate }}\n        <span class="version-placeholder" *ngIf="connectorForm.get(\'configVersion\').value">v{{connectorForm.get(\'configVersion\').value}}</span>\n      </div>\n      <tb-toggle-select *ngIf="initialConnector && allowBasicConfig.has(initialConnector.type)"\n                        formControlName="mode" appearance="fill">\n        <tb-toggle-option [value]="ConnectorConfigurationModes.BASIC">\n          {{ \'gateway.basic\' | translate }}\n        </tb-toggle-option>\n        <tb-toggle-option [value]="ConnectorConfigurationModes.ADVANCED">\n          {{ \'gateway.advanced\' | translate }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n    <span [fxShow]="!initialConnector"\n          fxLayoutAlign="center center"\n          class="no-data-found" translate>\n      gateway.select-connector\n    </span>\n    <section class="tb-form-panel section-container no-border no-padding tb-flex space-between" *ngIf="initialConnector">\n      <ng-container *ngIf="connectorForm.get(\'mode\')?.value === ConnectorConfigurationModes.BASIC else defaultConfig">\n        <ng-container [ngSwitch]="initialConnector.type">\n          <ng-container *ngSwitchCase="ConnectorType.MQTT">\n            <tb-mqtt-basic-config\n              *ngIf="connectorForm.get(\'configVersion\').value | isLatestVersionConfig else legacy"\n              formControlName="basicConfig"\n              [generalTabContent]="generalTabContent"\n              (initialized)="basicConfigInitSubject.next()"\n            />\n            <ng-template #legacy>\n              <tb-mqtt-legacy-basic-config\n                (initialized)="basicConfigInitSubject.next()"\n                formControlName="basicConfig"\n                [generalTabContent]="generalTabContent"\n              />\n            </ng-template>\n          </ng-container>\n          <ng-container *ngSwitchCase="ConnectorType.OPCUA">\n            <tb-opc-ua-basic-config\n              *ngIf="connectorForm.get(\'configVersion\').value | isLatestVersionConfig else legacy"\n              formControlName="basicConfig"\n              [generalTabContent]="generalTabContent"\n              (initialized)="basicConfigInitSubject.next()"\n            />\n            <ng-template #legacy>\n              <tb-opc-ua-legacy-basic-config\n                (initialized)="basicConfigInitSubject.next()"\n                formControlName="basicConfig"\n                [generalTabContent]="generalTabContent"\n              />\n            </ng-template>\n          </ng-container>\n          <ng-container *ngSwitchCase="ConnectorType.MODBUS">\n            <tb-modbus-basic-config\n              *ngIf="connectorForm.get(\'configVersion\').value | isLatestVersionConfig else legacy"\n              formControlName="basicConfig"\n              [generalTabContent]="generalTabContent"\n              (initialized)="basicConfigInitSubject.next()"\n            />\n            <ng-template #legacy>\n              <tb-modbus-legacy-basic-config\n                formControlName="basicConfig"\n                (initialized)="basicConfigInitSubject.next()"\n                [generalTabContent]="generalTabContent"\n              />\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <ng-template #defaultConfig>\n        <mat-tab-group>\n          <mat-tab label="{{ \'gateway.general\' | translate }}">\n            <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>\n          </mat-tab>\n          <mat-tab label="{{ \'gateway.configuration\' | translate }}*">\n            <tb-json-object-edit\n              fillHeight="true"\n              class="tb-flex fill-height"\n              fxLayout="column"\n              jsonRequired\n              label="{{ \'gateway.configuration\' | translate }}"\n              formControlName="configurationJson">\n            </tb-json-object-edit>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-template>\n      <div fxLayoutAlign="end center">\n        <button mat-raised-button color="primary"\n                type="button"\n                [disabled]="!connectorForm.dirty || connectorForm.invalid"\n                (click)="onSaveConnector()">\n          {{ \'action.save\' | translate }}\n        </button>\n      </div>\n    </section>\n  </section>\n</div>\n<ng-template #generalTabContent>\n  <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding padding-top section-container flex">\n    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" >\n      <div class="fixed-title-width tb-required" translate>gateway.name</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ \'gateway.set\' | translate }}"/>\n          <mat-icon matSuffix\n                    matTooltipPosition="above"\n                    matTooltipClass="tb-error-tooltip"\n                    [matTooltip]="(connectorForm.get(\'name\').hasError(\'duplicateName\') ?\n                                    \'gateway.connector-duplicate-name\' : \'gateway.name-required\') | translate"\n                    *ngIf="(connectorForm.get(\'name\').hasError(\'required\') && connectorForm.get(\'name\').touched) ||\n                                    connectorForm.get(\'name\').hasError(\'duplicateName\')"\n                    class="tb-error">\n            warning\n          </mat-icon>\n        </mat-form-field>\n      </div>\n    </div>\n    <div *ngIf="connectorForm.get(\'type\').value === ConnectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width" translate>gateway.connectors-table-class</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="class" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n    <div *ngIf="connectorForm.get(\'type\').value === ConnectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <div class="fixed-title-width" translate>gateway.connectors-table-key</div>\n      <div class="tb-flex no-gap">\n        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n          <input matInput name="value" formControlName="key" placeholder="{{ \'gateway.set\' | translate }}"/>\n        </mat-form-field>\n      </div>\n    </div>\n    <div class="tb-form-panel stroked">\n      <div class="tb-form-panel-title" translate>gateway.logs-configuration</div>\n      <div class="tb-form-row" fxLayoutAlign="space-between center">\n        <mat-slide-toggle class="mat-slide" formControlName="enableRemoteLogging">\n          <mat-label>\n            {{ \'gateway.enable-remote-logging\' | translate }}\n          </mat-label>\n        </mat-slide-toggle>\n      </div>\n      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n        <div class="fixed-title-width" translate>gateway.remote-logging-level</div>\n        <div class="tb-flex no-gap">\n          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">\n            <mat-select formControlName="logLevel">\n              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div *ngIf="connectorForm.get(\'type\').value === ConnectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">\n      <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">\n        <mat-label tb-hint-tooltip-icon="{{ \'gateway.send-change-data-hint\' | translate }}">\n          {{ \'gateway.send-change-data\' | translate }}\n        </mat-label>\n      </mat-slide-toggle>\n    </div>\n    <tb-report-strategy\n      [defaultValue]="ReportStrategyDefaultValue.Connector"\n      *ngIf="connectorForm.get(\'type\').value === ConnectorType.MODBUS && (connectorForm.get(\'configVersion\').value | isLatestVersionConfig)"\n      formControlName="reportStrategy"\n    />\n  </section>\n</ng-template>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:block;overflow-x:auto;padding:0}:host .version-placeholder{color:gray;font-size:12px}:host .connector-container{height:100%;width:100%;flex-direction:row}@media screen and (max-width: 1279px){:host .connector-container{flex-direction:column}}:host .connector-container>section:not(.table-section){max-width:unset}@media screen and (min-width: 1280px){:host .connector-container>section:not(.table-section){max-width:50%}}:host .connector-container .table-section{min-height:35vh;overflow:hidden}:host .connector-container .table-section .table-container{overflow:auto}:host .connector-container .flex{flex:1}:host .connector-container .input-container{height:auto}:host .connector-container .section-container{background-color:#fff}:host .mat-toolbar{background:transparent;color:#000000de!important}:host .mat-mdc-slide-toggle{margin:0 8px}:host .status{text-align:center;border-radius:16px;font-weight:500;width:fit-content;padding:5px 15px}:host .status-sync{background:#1980380f;color:#198038}:host .status-unsync{background:#cb25300f;color:#cb2530}:host mat-row{cursor:pointer}:host .dot{height:12px;width:12px;background-color:#bbb;border-radius:50%;display:inline-block}:host .hasErrors{background-color:#cb2530}:host .noErrors{background-color:#198038}:host ::ng-deep .connector-container .mat-mdc-tab-group,:host ::ng-deep .connector-container .mat-mdc-tab-body-wrapper{height:100%}:host ::ng-deep .connector-container .mat-mdc-tab-body.mat-mdc-tab-body-active{position:absolute}:host ::ng-deep .connector-container .tb-form-row .fixed-title-width{min-width:120px;width:30%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .connector-container .tb-add-new{display:flex;z-index:999;pointer-events:none;background-color:#fff}:host ::ng-deep .connector-container .tb-add-new button.connector{height:auto;padding-right:12px;font-size:20px;border-style:dashed;border-width:2px;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;color:#00000061}\n']}]}],ctorParameters:()=>[{type:ot.Store},{type:me.FormBuilder},{type:Y.TranslateService},{type:X.AttributeService},{type:X.DialogService},{type:Je.MatDialog},{type:X.TelemetryWebsocketService},{type:t.NgZone},{type:X.UtilsService},{type:va},{type:t.ChangeDetectorRef}],propDecorators:{ctx:[{type:a}],device:[{type:a}],nameInput:[{type:o,args:["nameInput"]}],sort:[{type:o,args:[g,{static:!1}]}]}});class qo{constructor(e){this.deviceService=e}download(e){e&&e.stopPropagation(),this.deviceId&&this.deviceService.downloadGatewayDockerComposeFile(this.deviceId).subscribe((()=>{}))}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:qo,deps:[{token:X.DeviceService}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:qo,selector:"tb-gateway-command",inputs:{deviceId:"deviceId"},ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div mat-dialog-content style="padding: 16px 16px 8px" class="tb-form-panel no-border">\n  <div class="tb-no-data-text">{{ \'gateway.docker-label\' | translate }}</div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>\n    <div class="tb-form-row no-border no-padding space-between">\n      <div class="tb-no-data-text tb-commands-hint" translate>gateway.install-docker-compose</div>\n      <a mat-stroked-button color="primary" href="https://docs.docker.com/compose/install/" target="_blank">\n        <mat-icon>description</mat-icon>\n        {{ \'common.documentation\' | translate }}\n      </a>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>gateway.download-configuration-file</div>\n    <div class="tb-form-row no-border no-padding space-between">\n      <div class="tb-no-data-text tb-commands-hint" translate>gateway.download-docker-compose</div>\n      <button mat-stroked-button color="primary" (click)="download($event)">\n        <mat-icon>download</mat-icon>\n        {{ \'action.download\' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>gateway.launch-gateway</div>\n    <div class="tb-no-data-text tb-commands-hint" translate>gateway.launch-docker-compose</div>\n    <tb-markdown usePlainMarkdown containerClass="start-code"\n                 data="\n          ```bash\n          docker compose up\n          {:copy-code}\n          ```\n      "></tb-markdown>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .tb-commands-hint{color:inherit;font-weight:400;flex:1}:host ::ng-deep .tb-markdown-view .start-code .code-wrapper{padding:0}:host ::ng-deep .tb-markdown-view .start-code .code-wrapper pre[class*=language-]{margin:0;background:#f3f6fa;border-color:#305680;padding-right:38px;overflow:scroll;padding-bottom:4px;min-height:42px;scrollbar-width:thin}:host ::ng-deep .tb-markdown-view .start-code .code-wrapper pre[class*=language-]::-webkit-scrollbar{width:4px;height:4px}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn{right:-2px}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn p{color:#305680}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn p,:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn div{background-color:#f3f6fa}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn div img{display:none}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn div:after{content:"";position:initial;display:block;width:18px;height:18px;background:#305680;mask-image:url(/assets/copy-code-icon.svg);-webkit-mask-image:url(/assets/copy-code-icon.svg);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}\n'],dependencies:[{kind:"component",type:wt.TbMarkdownComponent,selector:"tb-markdown",inputs:["data","context","additionalCompileModules","markdownClass","containerClass","style","applyDefaultMarkdownStyle","additionalStyles","lineNumbers","fallbackToPlainMarkdown","usePlainMarkdown"],outputs:["ready"]},{kind:"component",type:be.MatAnchor,selector:"a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]",exportAs:["matButton","matAnchor"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Je.MatDialogContent,selector:"[mat-dialog-content], mat-dialog-content, [matDialogContent]"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("DeviceGatewayCommandComponent",qo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:qo,decorators:[{type:n,args:[{selector:"tb-gateway-command",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<div mat-dialog-content style="padding: 16px 16px 8px" class="tb-form-panel no-border">\n  <div class="tb-no-data-text">{{ \'gateway.docker-label\' | translate }}</div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>\n    <div class="tb-form-row no-border no-padding space-between">\n      <div class="tb-no-data-text tb-commands-hint" translate>gateway.install-docker-compose</div>\n      <a mat-stroked-button color="primary" href="https://docs.docker.com/compose/install/" target="_blank">\n        <mat-icon>description</mat-icon>\n        {{ \'common.documentation\' | translate }}\n      </a>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>gateway.download-configuration-file</div>\n    <div class="tb-form-row no-border no-padding space-between">\n      <div class="tb-no-data-text tb-commands-hint" translate>gateway.download-docker-compose</div>\n      <button mat-stroked-button color="primary" (click)="download($event)">\n        <mat-icon>download</mat-icon>\n        {{ \'action.download\' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>gateway.launch-gateway</div>\n    <div class="tb-no-data-text tb-commands-hint" translate>gateway.launch-docker-compose</div>\n    <tb-markdown usePlainMarkdown containerClass="start-code"\n                 data="\n          ```bash\n          docker compose up\n          {:copy-code}\n          ```\n      "></tb-markdown>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host .tb-commands-hint{color:inherit;font-weight:400;flex:1}:host ::ng-deep .tb-markdown-view .start-code .code-wrapper{padding:0}:host ::ng-deep .tb-markdown-view .start-code .code-wrapper pre[class*=language-]{margin:0;background:#f3f6fa;border-color:#305680;padding-right:38px;overflow:scroll;padding-bottom:4px;min-height:42px;scrollbar-width:thin}:host ::ng-deep .tb-markdown-view .start-code .code-wrapper pre[class*=language-]::-webkit-scrollbar{width:4px;height:4px}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn{right:-2px}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn p{color:#305680}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn p,:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn div{background-color:#f3f6fa}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn div img{display:none}:host ::ng-deep .tb-markdown-view .start-code button.clipboard-btn div:after{content:"";position:initial;display:block;width:18px;height:18px;background:#305680;mask-image:url(/assets/copy-code-icon.svg);-webkit-mask-image:url(/assets/copy-code-icon.svg);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}\n']}]}],ctorParameters:()=>[{type:X.DeviceService}],propDecorators:{deviceId:[{type:a}]}});class Do{constructor(e,t,n,a){this.fb=e,this.deviceService=t,this.cd=n,this.dialog=a,this.dialogMode=!1,this.initialCredentialsUpdated=new i,this.StorageTypes=At,this.storageTypes=Object.values(At),this.storageTypesTranslationMap=Rt,this.logSavingPeriods=Ot,this.localLogsConfigs=Object.keys(Pt),this.localLogsConfigTranslateMap=Gt,this.securityTypes=Bt,this.gatewayLogLevel=Object.values(Mt),this.destroy$=new Se,this.initBasicFormGroup(),this.observeFormChanges(),this.basicFormGroup.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){this.basicFormGroup.patchValue(e,{emitEvent:!1}),this.checkAndFetchCredentials(e?.thingsboard?.security??{}),e?.grpc&&this.toggleRpcFields(e.grpc.enabled);(e?.thingsboard?.statistics?.commands??[]).forEach((e=>this.addCommand(e,!1)))}validate(){return this.basicFormGroup.valid?null:{basicFormGroup:{valid:!1}}}atLeastOneRequired(e,t=null){return n=>{t||(t=Object.keys(n.controls));return n?.controls&&t.some((t=>!e(n.controls[t])))?null:{atLeastOne:!0}}}toggleRpcFields(e){const t=this.basicFormGroup.get("grpc");e?(t.get("serverPort").enable({emitEvent:!1}),t.get("keepAliveTimeMs").enable({emitEvent:!1}),t.get("keepAliveTimeoutMs").enable({emitEvent:!1}),t.get("keepalivePermitWithoutCalls").enable({emitEvent:!1}),t.get("maxPingsWithoutData").enable({emitEvent:!1}),t.get("minTimeBetweenPingsMs").enable({emitEvent:!1}),t.get("minPingIntervalWithoutDataMs").enable({emitEvent:!1})):(t.get("serverPort").disable({emitEvent:!1}),t.get("keepAliveTimeMs").disable({emitEvent:!1}),t.get("keepAliveTimeoutMs").disable({emitEvent:!1}),t.get("keepalivePermitWithoutCalls").disable({emitEvent:!1}),t.get("maxPingsWithoutData").disable({emitEvent:!1}),t.get("minTimeBetweenPingsMs").disable({emitEvent:!1}),t.get("minPingIntervalWithoutDataMs").disable({emitEvent:!1}))}addLocalLogConfig(e,t){const n=this.basicFormGroup.get("logs.local"),a=this.fb.group({logLevel:[t.logLevel||Mt.INFO,[ue.required]],filePath:[t.filePath||"./logs",[ue.required]],backupCount:[t.backupCount||7,[ue.required,ue.min(0)]],savingTime:[t.savingTime||3,[ue.required,ue.min(0)]],savingPeriod:[t.savingPeriod||Dt.days,[ue.required]]});n.addControl(e,a)}getLogFormGroup(e){return this.basicFormGroup.get(`logs.local.${e}`)}commandFormArray(){return this.basicFormGroup.get("thingsboard.statistics.commands")}removeCommandControl(e,t){""!==t.pointerType&&(this.commandFormArray().removeAt(e),this.basicFormGroup.markAsDirty())}removeAllSecurityValidators(){const e=this.basicFormGroup.get("thingsboard.security");e.clearValidators();for(const t in e.controls)"type"!==t&&(e.controls[t].clearValidators(),e.controls[t].setErrors(null),e.controls[t].updateValueAndValidity())}removeAllStorageValidators(){const e=this.basicFormGroup.get("storage");for(const t in e.controls)"type"!==t&&(e.controls[t].clearValidators(),e.controls[t].setErrors(null),e.controls[t].updateValueAndValidity())}openConfigurationConfirmDialog(){this.deviceService.getDevice(this.device.id).pipe(Ne(this.destroy$)).subscribe((e=>{this.dialog.open(Pa,{disableClose:!0,panelClass:["tb-dialog","tb-fullscreen-dialog"],data:{gatewayName:e.name}}).afterClosed().pipe(Oe(1)).subscribe((e=>{e||this.basicFormGroup.get("thingsboard.remoteConfiguration").setValue(!0,{emitEvent:!1})}))}))}addCommand(e,t=!0){const{attributeOnGateway:n=null,command:a=null,timeout:o=null}=e||{},i=this.fb.group({attributeOnGateway:[n,[ue.required,ue.pattern(/^[^.\s]+$/)]],command:[a,[ue.required,ue.pattern(/^(?=\S).*\S$/)]],timeout:[o,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/),ue.pattern(/^[^.\s]+$/)]]});this.commandFormArray().push(i,{emitEvent:t})}initBasicFormGroup(){this.basicFormGroup=this.fb.group({thingsboard:this.initThingsboardFormGroup(),storage:this.initStorageFormGroup(),grpc:this.initGrpcFormGroup(),connectors:this.fb.array([]),logs:this.initLogsFormGroup()})}initThingsboardFormGroup(){return this.fb.group({host:[window.location.hostname,[ue.required,ue.pattern(/^[^\s]+$/)]],port:[1883,[ue.required,ue.min(1),ue.max(65535),ue.pattern(/^-?[0-9]+$/)]],remoteShell:[!1],remoteConfiguration:[!0],checkConnectorsConfigurationInSeconds:[60,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],statistics:this.fb.group({enable:[!0],statsSendPeriodInSeconds:[3600,[ue.required,ue.min(60),ue.pattern(/^-?[0-9]+$/)]],commands:this.fb.array([])}),maxPayloadSizeBytes:[8196,[ue.required,ue.min(100),ue.pattern(/^-?[0-9]+$/)]],minPackSendDelayMS:[50,[ue.required,ue.min(10),ue.pattern(/^-?[0-9]+$/)]],minPackSizeToSend:[500,[ue.required,ue.min(100),ue.pattern(/^-?[0-9]+$/)]],handleDeviceRenaming:[!0],checkingDeviceActivity:this.initCheckingDeviceActivityFormGroup(),security:this.initSecurityFormGroup(),qos:[1,[ue.required,ue.min(0),ue.max(1),ue.pattern(/^[^.\s]+$/)]]})}initStorageFormGroup(){return this.fb.group({type:[At.MEMORY,[ue.required]],read_records_count:[100,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],max_records_count:[1e5,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],data_folder_path:["./data/",[ue.required]],max_file_count:[10,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]],max_read_records_count:[10,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]],max_records_per_file:[1e4,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]],data_file_path:["./data/data.db",[ue.required]],messages_ttl_check_in_hours:[1,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]],messages_ttl_in_days:[7,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]]})}initGrpcFormGroup(){return this.fb.group({enabled:[!1],serverPort:[9595,[ue.required,ue.min(1),ue.max(65535),ue.pattern(/^-?[0-9]+$/)]],keepAliveTimeMs:[1e4,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],keepAliveTimeoutMs:[5e3,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],keepalivePermitWithoutCalls:[!0],maxPingsWithoutData:[0,[ue.required,ue.min(0),ue.pattern(/^-?[0-9]+$/)]],minTimeBetweenPingsMs:[1e4,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]],minPingIntervalWithoutDataMs:[5e3,[ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]]})}initLogsFormGroup(){return this.fb.group({dateFormat:["%Y-%m-%d %H:%M:%S",[ue.required,ue.pattern(/^[^\s].*[^\s]$/)]],logFormat:["%(asctime)s - |%(levelname)s| - [%(filename)s] - %(module)s - %(funcName)s - %(lineno)d - %(message)s",[ue.required,ue.pattern(/^[^\s].*[^\s]$/)]],type:["remote",[ue.required]],remote:this.fb.group({enabled:[!1],logLevel:[Mt.INFO,[ue.required]]}),local:this.fb.group({})})}initCheckingDeviceActivityFormGroup(){return this.fb.group({checkDeviceInactivity:[!1],inactivityTimeoutSeconds:[200,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]],inactivityCheckPeriodSeconds:[500,[ue.min(1),ue.pattern(/^-?[0-9]+$/)]]})}initSecurityFormGroup(){return this.fb.group({type:[Vt.ACCESS_TOKEN,[ue.required]],accessToken:[null,[ue.required,ue.pattern(/^[^.\s]+$/)]],clientId:[null,[ue.pattern(/^[^.\s]+$/)]],username:[null,[ue.pattern(/^[^.\s]+$/)]],password:[null,[ue.pattern(/^[^.\s]+$/)]],caCert:[null],cert:[null],privateKey:[null]})}observeFormChanges(){this.observeSecurityPasswordChanges(),this.observeRemoteConfigurationChanges(),this.observeDeviceActivityChanges(),this.observeSecurityTypeChanges(),this.observeStorageTypeChanges()}observeSecurityPasswordChanges(){const e=this.basicFormGroup.get("thingsboard.security.username");this.basicFormGroup.get("thingsboard.security.password").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{t&&""!==t?e.setValidators([ue.required]):e.clearValidators(),e.updateValueAndValidity({emitEvent:!1})}))}observeRemoteConfigurationChanges(){this.basicFormGroup.get("thingsboard.remoteConfiguration").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{e||this.openConfigurationConfirmDialog()})),this.logSelector=this.fb.control(Pt.service);for(const e of Object.keys(Pt))this.addLocalLogConfig(e,{})}observeDeviceActivityChanges(){const e=this.basicFormGroup.get("thingsboard.checkingDeviceActivity");e.get("checkDeviceInactivity").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{e.updateValueAndValidity();const n=[ue.min(1),ue.required,ue.pattern(/^-?[0-9]+$/)];t?(e.get("inactivityTimeoutSeconds").setValidators(n),e.get("inactivityCheckPeriodSeconds").setValidators(n)):(e.get("inactivityTimeoutSeconds").clearValidators(),e.get("inactivityCheckPeriodSeconds").clearValidators()),e.get("inactivityTimeoutSeconds").updateValueAndValidity({emitEvent:!1}),e.get("inactivityCheckPeriodSeconds").updateValueAndValidity({emitEvent:!1})})),this.basicFormGroup.get("grpc.enabled").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.toggleRpcFields(e)}))}observeSecurityTypeChanges(){const e=this.basicFormGroup.get("thingsboard.security");e.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{switch(this.removeAllSecurityValidators(),t){case Vt.ACCESS_TOKEN:this.addAccessTokenValidators(e);break;case Vt.TLS_PRIVATE_KEY:this.addTlsPrivateKeyValidators(e);break;case Vt.TLS_ACCESS_TOKEN:this.addTlsAccessTokenValidators(e);break;case Vt.USERNAME_PASSWORD:e.addValidators([this.atLeastOneRequired(ue.required,["clientId","username"])])}e.updateValueAndValidity()})),["caCert","privateKey","cert"].forEach((t=>{e.get(t).valueChanges.pipe(Ne(this.destroy$)).subscribe((()=>this.cd.detectChanges()))}))}observeStorageTypeChanges(){const e=this.basicFormGroup.get("storage");e.get("type").valueChanges.pipe(Ne(this.destroy$)).subscribe((t=>{switch(this.removeAllStorageValidators(),t){case At.MEMORY:this.addMemoryStorageValidators(e);break;case At.FILE:this.addFileStorageValidators(e);break;case At.SQLITE:this.addSqliteStorageValidators(e)}}))}addAccessTokenValidators(e){e.get("accessToken").addValidators([ue.required,ue.pattern(/^[^.\s]+$/)]),e.get("accessToken").updateValueAndValidity()}addTlsPrivateKeyValidators(e){["caCert","privateKey","cert"].forEach((t=>{e.get(t).addValidators([ue.required]),e.get(t).updateValueAndValidity()}))}addTlsAccessTokenValidators(e){this.addAccessTokenValidators(e),e.get("caCert").addValidators([ue.required]),e.get("caCert").updateValueAndValidity()}addMemoryStorageValidators(e){e.get("read_records_count").addValidators([ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]),e.get("max_records_count").addValidators([ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]),e.get("read_records_count").updateValueAndValidity({emitEvent:!1}),e.get("max_records_count").updateValueAndValidity({emitEvent:!1})}addFileStorageValidators(e){["max_file_count","max_read_records_count","max_records_per_file"].forEach((t=>{e.get(t).addValidators([ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]),e.get(t).updateValueAndValidity({emitEvent:!1})}))}addSqliteStorageValidators(e){["messages_ttl_check_in_hours","messages_ttl_in_days"].forEach((t=>{e.get(t).addValidators([ue.required,ue.min(1),ue.pattern(/^-?[0-9]+$/)]),e.get(t).updateValueAndValidity({emitEvent:!1})}))}checkAndFetchCredentials(e){e.type!==Vt.TLS_PRIVATE_KEY&&this.deviceService.getDeviceCredentials(this.device.id).pipe(Ne(this.destroy$)).subscribe((t=>{this.initialCredentialsUpdated.emit(t),this.updateSecurityType(e,t),this.updateCredentials(t,e)}))}updateSecurityType(e,t){const n=t.credentialsType===U.ACCESS_TOKEN||e.type===Vt.TLS_ACCESS_TOKEN?e.type===Vt.TLS_ACCESS_TOKEN?Vt.TLS_ACCESS_TOKEN:Vt.ACCESS_TOKEN:t.credentialsType===U.MQTT_BASIC?Vt.USERNAME_PASSWORD:null;n&&this.basicFormGroup.get("thingsboard.security.type").setValue(n,{emitEvent:!1})}updateCredentials(e,t){switch(e.credentialsType){case U.ACCESS_TOKEN:this.updateAccessTokenCredentials(e,t);break;case U.MQTT_BASIC:this.updateMqttBasicCredentials(e);case U.X509_CERTIFICATE:}}updateAccessTokenCredentials(e,t){this.basicFormGroup.get("thingsboard.security.accessToken").setValue(e.credentialsId,{emitEvent:!1}),t.type===Vt.TLS_ACCESS_TOKEN&&this.basicFormGroup.get("thingsboard.security.caCert").setValue(t.caCert,{emitEvent:!1})}updateMqttBasicCredentials(e){const t=JSON.parse(e.credentialsValue);this.basicFormGroup.get("thingsboard.security.clientId").setValue(t.clientId,{emitEvent:!1}),this.basicFormGroup.get("thingsboard.security.username").setValue(t.userName,{emitEvent:!1}),this.basicFormGroup.get("thingsboard.security.password").setValue(t.password,{emitEvent:!1})}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Do,deps:[{token:me.FormBuilder},{token:X.DeviceService},{token:t.ChangeDetectorRef},{token:Je.MatDialog}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Do,isStandalone:!0,selector:"tb-gateway-basic-configuration",inputs:{device:"device",dialogMode:"dialogMode"},outputs:{initialCredentialsUpdated:"initialCredentialsUpdated"},providers:[{provide:ge,useExisting:m((()=>Do)),multi:!0},{provide:fe,useExisting:m((()=>Do)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group class="tab-group-block" [formGroup]="basicFormGroup" [class.dialog-mode]="dialogMode">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.remote-configuration\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteConfiguration">\n              {{ \'gateway.remote-configuration\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.remote-shell\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteShell">\n              {{ \'gateway.remote-shell\' | translate }}\n            </mat-slide-toggle>\n          </div>\n          <div class="tb-form-row no-border no-padding tb-standard-fields">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.thingsboard-host</mat-label>\n              <input matInput formControlName="host"/>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.host\' | translate }}">info_outlined\n              </mat-icon>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.host\').hasError(\'required\')">\n                {{ \'gateway.thingsboard-host-required\' | translate }}\n              </mat-error>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.thingsboard-port</mat-label>\n              <input matInput formControlName="port" type="number" min="0"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'required\')">\n                {{ \'gateway.thingsboard-port-required\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'min\')">\n                {{ \'gateway.thingsboard-port-min\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'max\')">\n                {{ \'gateway.thingsboard-port-max\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'pattern\')">\n                {{ \'gateway.thingsboard-port-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.port\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-panel">\n          <div translate class="tb-form-panel-title">security.security</div>\n          <ng-container formGroupName="security">\n            <tb-toggle-select class="toggle-group" formControlName="type">\n              <tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"\n                                [value]="securityType.key">{{ securityType.value | translate }}\n              </tb-toggle-option>\n            </tb-toggle-select>\n            <mat-form-field appearance="outline"\n                            *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value.toLowerCase().includes(\'accesstoken\')">\n              <mat-label translate>security.access-token</mat-label>\n              <input matInput formControlName="accessToken"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.security.accessToken\').hasError(\'required\')">\n                {{ \'security.access-token-required\' | translate }}\n              </mat-error>\n              <tb-copy-button\n                matSuffix\n                miniButton="false"\n                *ngIf="basicFormGroup.get(\'thingsboard.security.accessToken\').value"\n                [copyText]="basicFormGroup.get(\'thingsboard.security.accessToken\').value"\n                tooltipText="{{ \'device.copy-access-token\' | translate }}"\n                tooltipPosition="above"\n                icon="content_copy">\n              </tb-copy-button>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.token\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <section>\n              <div class="tb-form-row no-border no-padding tb-standard-fields"\n                   *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value === \'usernamePassword\'">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>security.clientId</mat-label>\n                  <input matInput formControlName="clientId"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'thingsboard.security.clientId\').hasError(\'required\')">\n                    {{ \'security.clientId-required\' | translate }}\n                  </mat-error>\n                  <tb-copy-button\n                    matSuffix\n                    miniButton="false"\n                    *ngIf="basicFormGroup.get(\'thingsboard.security.clientId\').value"\n                    [copyText]="basicFormGroup.get(\'thingsboard.security.clientId\').value"\n                    tooltipText="{{ \'gateway.copy-client-id\' | translate }}"\n                    tooltipPosition="above"\n                    icon="content_copy">\n                  </tb-copy-button>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.client-id\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>security.username</mat-label>\n                  <input matInput formControlName="username"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'thingsboard.security.username\').hasError(\'required\')">\n                    {{ \'security.username-required\' | translate }}\n                  </mat-error>\n                  <tb-copy-button\n                    matSuffix\n                    miniButton="false"\n                    *ngIf="basicFormGroup.get(\'thingsboard.security.username\').value"\n                    [copyText]="basicFormGroup.get(\'thingsboard.security.username\').value"\n                    tooltipText="{{ \'gateway.copy-username\' | translate }}"\n                    tooltipPosition="above"\n                    icon="content_copy">\n                  </tb-copy-button>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.username\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n              <mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%"\n                              *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value === \'usernamePassword\'">\n                <mat-label translate>gateway.password</mat-label>\n                <input matInput formControlName="password"/>\n                <tb-copy-button\n                  matSuffix\n                  miniButton="false"\n                  *ngIf="basicFormGroup.get(\'thingsboard.security.password\').value"\n                  [copyText]="basicFormGroup.get(\'thingsboard.security.password\').value"\n                  tooltipText="{{ \'gateway.copy-password\' | translate }}"\n                  tooltipPosition="above"\n                  icon="content_copy">\n                </tb-copy-button>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.password\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </section>\n            <tb-error style="margin-top: -12px; display: block;" fxFlex="100"\n                      *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value === \'usernamePassword\'"\n                      [error]="basicFormGroup.get(\'thingsboard.security\').hasError(\'atLeastOne\') ?\n          (\'device.client-id-or-user-name-necessary\' | translate) : \'\'"></tb-error>\n            <tb-file-input\n              fxFlex="100"\n              hint="{{ \'gateway.hints.ca-cert\' | translate }}"\n              *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value.toLowerCase().includes(\'tls\')"\n              formControlName="caCert"\n              label="{{ \'security.ca-cert\' | translate }}"\n              [allowedExtensions]="\'pem, cert, key\'"\n              [accept]="\'.pem, application/pem,.cert, application/cert, .key,application/key\'"\n              dropLabel="{{ \'gateway.drop-file\' | translate }}">\n            </tb-file-input>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.logs.logs\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="logs" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <div fxLayout="column">\n            <mat-form-field appearance="outline">\n              <mat-label translate>gateway.logs.date-format</mat-label>\n              <input matInput formControlName="dateFormat"/>\n              <mat-error *ngIf="basicFormGroup.get(\'logs.dateFormat\').hasError(\'required\')">\n                {{ \'gateway.logs.date-format-required\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.date-form\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <mat-form-field appearance="outline">\n              <mat-label translate>gateway.logs.log-format</mat-label>\n              <textarea matInput formControlName="logFormat" rows="2"></textarea>\n              <mat-error *ngIf="basicFormGroup.get(\'logs.logFormat\').hasError(\'required\')">\n                {{ \'gateway.logs.log-format-required\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.log-format\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-panel no-padding-bottom" formGroupName="remote">\n          <div translate class="tb-form-panel-title">gateway.logs.remote</div>\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.remote-log\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">\n              {{ \'gateway.logs.remote-logs\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <mat-form-field appearance="outline">\n            <mat-label translate>gateway.logs.level</mat-label>\n            <mat-select formControlName="logLevel">\n              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-panel no-padding-bottom" formGroupName="local">\n          <div translate class="tb-form-panel-title">gateway.logs.local</div>\n          <tb-toggle-select class="toggle-group" [formControl]="logSelector">\n            <tb-toggle-option *ngFor="let logConfig of localLogsConfigs" [value]="logConfig"\n                              class="first-capital">{{ localLogsConfigTranslateMap.get(logConfig) }}</tb-toggle-option>\n          </tb-toggle-select>\n          <ng-container [formGroup]="getLogFormGroup(logSelector.value)">\n            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.logs.level</mat-label>\n                <mat-select formControlName="logLevel">\n                  <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.logs.file-path</mat-label>\n                <input matInput formControlName="filePath"/>\n                <mat-error *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.filePath\').hasError(\'required\')">\n                  {{ \'gateway.logs.file-path-required\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <div class="tb-form-row no-border no-padding tb-standard-fields saving-period">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.logs.saving-period</mat-label>\n                  <input matInput formControlName="savingTime" type="number" min="0"/>\n                  <mat-error\n                    *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.savingTime\').hasError(\'required\')">\n                    {{ \'gateway.logs.saving-period-required\' | translate }}\n                  </mat-error>\n                  <mat-error\n                    *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.savingTime\').hasError(\'min\')">\n                    {{ \'gateway.logs.saving-period-min\' | translate }}\n                  </mat-error>\n                </mat-form-field>\n                <mat-form-field appearance="outline" hideRequiredMarker style="min-width: 110px; width: 30%">\n                  <mat-select formControlName="savingPeriod">\n                    <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">\n                      {{ period.value | translate }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.logs.backup-count</mat-label>\n                <input matInput formControlName="backupCount" type="number" min="0"/>\n                <mat-error\n                  *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.backupCount\').hasError(\'required\')">\n                  {{ \'gateway.logs.backup-count-required\' | translate }}\n                </mat-error>\n                <mat-error\n                  *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.backupCount\').hasError(\'min\')">\n                  {{ \'gateway.logs.backup-count-min\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.backup-count\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.storage\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="storage" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <div translate class="tb-form-panel-title">gateway.storage</div>\n          <div translate class="tb-form-panel-hint">gateway.hints.storage</div>\n          <tb-toggle-select class="toggle-group" formControlName="type">\n            <tb-toggle-option *ngFor="let storageType of storageTypes" [value]="storageType">\n              {{ storageTypesTranslationMap.get(storageType) | translate }}\n            </tb-toggle-option>\n          </tb-toggle-select>\n          <div class="tb-form-panel-hint">{{ \'gateway.hints.\' + basicFormGroup.get(\'storage.type\').value | translate }}</div>\n          <ng-container [ngSwitch]="basicFormGroup.get(\'storage.type\').value">\n            <section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.storage-read-record-count</mat-label>\n                <input type="number" matInput formControlName="read_records_count"/>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.read_records_count\').hasError(\'required\')">\n                  {{ \'gateway.storage-read-record-count-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.read_records_count\').hasError(\'min\')">\n                  {{ \'gateway.storage-read-record-count-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.read_records_count\').hasError(\'pattern\')">\n                  {{ \'gateway.storage-read-record-count-pattern\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.read-record-count\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.storage-max-records</mat-label>\n                <input type="number" matInput formControlName="max_records_count"/>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_count\').hasError(\'required\')">\n                  {{ \'gateway.storage-max-records-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_count\').hasError(\'min\')">\n                  {{ \'gateway.storage-max-records-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_count\').hasError(\'pattern\')">\n                  {{ \'gateway.storage-max-records-pattern\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.max-records-count\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </section>\n            <section *ngSwitchCase="StorageTypes.FILE">\n              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-data-folder-path</mat-label>\n                  <input matInput formControlName="data_folder_path"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.data_folder_path\').hasError(\'required\')">\n                    {{ \'gateway.storage-data-folder-path-required\' | translate }}\n                  </mat-error>\n                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"\n                            aria-label="help-icon"\n                            matSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.data-folder\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-max-files</mat-label>\n                  <input matInput type="number" formControlName="max_file_count"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_file_count\').hasError(\'required\')">\n                    {{ \'gateway.storage-max-files-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_file_count\').hasError(\'min\')">\n                    {{ \'gateway.storage-max-files-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_file_count\').hasError(\'pattern\')">\n                    {{ \'gateway.storage-max-files-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.max-file-count\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-max-read-record-count</mat-label>\n                  <input matInput type="number" formControlName="max_read_records_count"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_read_records_count\').hasError(\'required\')">\n                    {{ \'gateway.storage-max-read-record-count-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_read_records_count\').hasError(\'min\')">\n                    {{ \'gateway.storage-max-read-record-count-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_read_records_count\').hasError(\'pattern\')">\n                    {{ \'gateway.storage-max-read-record-count-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.max-read-count\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-max-file-records</mat-label>\n                  <input matInput type="number" formControlName="max_records_per_file"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_per_file\').hasError(\'required\')">\n                    {{ \'gateway.storage-max-records-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_per_file\').hasError(\'min\')">\n                    {{ \'gateway.storage-max-records-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_per_file\').hasError(\'pattern\')">\n                    {{ \'gateway.storage-max-records-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.max-records\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n            </section>\n            <section *ngSwitchCase="StorageTypes.SQLITE">\n              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-path</mat-label>\n                  <input matInput formControlName="data_file_path"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.data_file_path\').hasError(\'required\')">\n                    {{ \'gateway.storage-path-required\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.data-folder\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>\n                  <input matInput type="number" formControlName="messages_ttl_check_in_hours"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_check_in_hours\').hasError(\'required\')">\n                    {{ \'gateway.messages-ttl-check-in-hours-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_check_in_hours\').hasError(\'min\')">\n                    {{ \'gateway.messages-ttl-check-in-hours-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_check_in_hours\').hasError(\'pattern\')">\n                    {{ \'gateway.messages-ttl-check-in-hours-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.ttl-check-hour\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n              <mat-form-field appearance="outline" class="mat-block">\n                <mat-label translate>gateway.messages-ttl-in-days</mat-label>\n                <input matInput type="number" formControlName="messages_ttl_in_days"/>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_in_days\').hasError(\'required\')">\n                  {{ \'gateway.messages-ttl-in-days-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_in_days\').hasError(\'min\')">\n                  {{ \'gateway.messages-ttl-in-days-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_in_days\').hasError(\'pattern\')">\n                  {{ \'gateway.messages-ttl-in-days-pattern\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.ttl-messages-day\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </section>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.grpc\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="grpc" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">\n            {{ \'gateway.grpc\'  | translate }}\n          </mat-slide-toggle>\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.permit-without-calls\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="keepalivePermitWithoutCalls">\n              {{ \'gateway.permit-without-calls\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <section>\n            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.server-port</mat-label>\n                <input matInput formControlName="serverPort" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.server-port\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'required\')">\n                  {{ \'gateway.thingsboard-port-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'min\')">\n                  {{ \'gateway.thingsboard-port-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'max\')">\n                  {{ \'gateway.thingsboard-port-max\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'pattern\')">\n                  {{ \'gateway.thingsboard-port-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>\n                <input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-keep-alive-timeout\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeoutMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-keep-alive-timeout-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeoutMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-keep-alive-timeout-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeoutMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-keep-alive-timeout-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </section>\n            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-keep-alive</mat-label>\n                <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-keep-alive\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-keep-alive-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-keep-alive-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-keep-alive-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-min-time-between-pings</mat-label>\n                <input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-min-time-between-pings\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minTimeBetweenPingsMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-min-time-between-pings-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minTimeBetweenPingsMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-min-time-between-pings-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minTimeBetweenPingsMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-min-time-between-pings-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </section>\n            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>\n                <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-max-pings-without-data\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.maxPingsWithoutData\').hasError(\'required\')">\n                  {{ \'gateway.grpc-max-pings-without-data-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.maxPingsWithoutData\').hasError(\'min\')">\n                  {{ \'gateway.grpc-max-pings-without-data-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.maxPingsWithoutData\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-max-pings-without-data-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>\n                <input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-min-ping-interval-without-data\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minPingIntervalWithoutDataMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-min-ping-interval-without-data-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minPingIntervalWithoutDataMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-min-ping-interval-without-data-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minPingIntervalWithoutDataMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-min-ping-interval-without-data-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </section>\n          </section>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.statistics.statistics\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom" formGroupName="statistics">\n          <mat-slide-toggle color="primary" class="mat-slide" formControlName="enable">\n            {{ \'gateway.statistics.statistics\'  | translate }}\n          </mat-slide-toggle>\n          <mat-form-field appearance="outline">\n            <mat-label translate>gateway.statistics.send-period</mat-label>\n            <input matInput formControlName="statsSendPeriodInSeconds" type="number" min="60"/>\n            <mat-error\n              *ngIf="basicFormGroup.get(\'thingsboard.statistics.statsSendPeriodInSeconds\').hasError(\'required\')">\n              {{ \'gateway.statistics.send-period-required\' | translate }}\n            </mat-error>\n            <mat-error\n              *ngIf="basicFormGroup.get(\'thingsboard.statistics.statsSendPeriodInSeconds\').hasError(\'min\')">\n              {{ \'gateway.statistics.send-period-min\' | translate }}\n            </mat-error>\n            <mat-error\n              *ngIf="basicFormGroup.get(\'thingsboard.statistics.statsSendPeriodInSeconds\').hasError(\'pattern\')">\n              {{ \'gateway.statistics.send-period-pattern\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-panel">\n          <div class="tb-form-panel-title" translate>gateway.statistics.commands</div>\n          <div class="tb-form-panel-hint" translate>gateway.hints.commands</div>\n          <ng-container formGroupName="statistics">\n            <div fxLayout="row" formArrayName="commands" class="statistics-container"\n                 *ngFor="let commandControl of commandFormArray().controls; let $index = index">\n              <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">\n                <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                  <mat-form-field appearance="outline" class="flex">\n                    <mat-label translate>gateway.statistics.attribute-name</mat-label>\n                    <input matInput formControlName="attributeOnGateway"/>\n                    <mat-error *ngIf="commandControl.get(\'attributeOnGateway\').hasError(\'required\')">\n                      {{ \'gateway.statistics.attribute-name-required\' | translate }}\n                    </mat-error>\n                    <mat-icon matIconSuffix style="cursor:pointer;"\n                              matTooltip="{{ \'gateway.hints.attribute\' | translate }}">info_outlined\n                    </mat-icon>\n                  </mat-form-field>\n                  <mat-form-field appearance="outline" class="flex">\n                    <mat-label translate>gateway.statistics.timeout</mat-label>\n                    <input matInput formControlName="timeout" type="number" min="0"/>\n                    <mat-error *ngIf="commandControl.get(\'timeout\').hasError(\'required\')">\n                      {{ \'gateway.statistics.timeout-required\' | translate }}\n                    </mat-error>\n                    <mat-error *ngIf="commandControl.get(\'timeout\').hasError(\'min\')">\n                      {{ \'gateway.statistics.timeout-min\' | translate }}\n                    </mat-error>\n                    <mat-error *ngIf="commandControl.get(\'timeout\').hasError(\'pattern\')">\n                      {{ \'gateway.statistics.timeout-pattern\' | translate }}\n                    </mat-error>\n                    <mat-icon matIconSuffix style="cursor:pointer;"\n                              matTooltip="{{ \'gateway.hints.timeout\' | translate }}">info_outlined\n                    </mat-icon>\n                  </mat-form-field>\n                </section>\n                <mat-form-field appearance="outline" class="mat-block">\n                  <mat-label translate>gateway.statistics.command</mat-label>\n                  <input matInput formControlName="command"/>\n                  <mat-error *ngIf="commandControl.get(\'command\').hasError(\'required\')">\n                    {{ \'gateway.statistics.command-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="commandControl.get(\'command\').hasError(\'pattern\')">\n                    {{ \'gateway.statistics.command-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.command\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </section>\n              <button mat-icon-button (click)="removeCommandControl($index, $event)"\n                      class="tb-box-button"\n                      [disabled]="!basicFormGroup.get(\'thingsboard.remoteConfiguration\').value"\n                      matTooltip="{{ \'gateway.statistics.remove\' | translate }}"\n                      matTooltipPosition="above">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <button mat-stroked-button color="primary"\n                    style="width: fit-content;"\n                    type="button"\n                    [disabled]="!basicFormGroup.get(\'thingsboard.remoteConfiguration\').value"\n                    (click)="addCommand()">\n              {{ \'gateway.statistics.add\' | translate }}\n            </button>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.other\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel" formGroupName="checkingDeviceActivity"\n             [class.no-padding-bottom]="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.checkDeviceInactivity\').value">\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.check-device-activity\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="checkDeviceInactivity">\n              {{ \'gateway.checking-device-activity\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs"\n                   *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.checkDeviceInactivity\').value">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>\n              <input matInput formControlName="inactivityTimeoutSeconds" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds\').hasError(\'required\')">\n                {{ \'gateway.inactivity-timeout-seconds-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds\').hasError(\'min\')">\n                {{ \'gateway.inactivity-timeout-seconds-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds\').hasError(\'pattern\')">\n                {{ \'gateway.inactivity-timeout-seconds-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.inactivity-timeout\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.inactivity-check-period-seconds</mat-label>\n              <input matInput type="number" min="0" formControlName="inactivityCheckPeriodSeconds"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds\').hasError(\'required\')">\n                {{ \'gateway.inactivity-check-period-seconds-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds\').hasError(\'min\')">\n                {{ \'gateway.inactivity-check-period-seconds-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds\').hasError(\'pattern\')">\n                {{ \'gateway.inactivity-check-period-seconds-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.inactivity-period\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n        </div>\n        <div class="tb-form-panel no-padding-bottom">\n          <div class="tb-form-panel-title" translate>gateway.advanced</div>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.min-pack-send-delay</mat-label>\n              <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.minPackSendDelayMS\').hasError(\'required\')">\n                {{ \'gateway.min-pack-send-delay-required\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.minPackSendDelayMS\').hasError(\'min\')">\n                {{ \'gateway.min-pack-send-delay-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSendDelayMS\').hasError(\'pattern\')">\n                {{ \'gateway.min-pack-send-delay-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.minimal-pack-delay\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.mqtt-qos</mat-label>\n              <input matInput formControlName="qos" type="number" min="0" max="1"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.qos\').hasError(\'required\')">\n                {{ \'gateway.mqtt-qos-required\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.qos\').hasError(\'min\')">\n                {{ \'gateway.mqtt-qos-range\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.qos\').hasError(\'max\')">\n                {{ \'gateway.mqtt-qos-range\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.qos\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>\n              <input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkConnectorsConfigurationInSeconds\').hasError(\'required\')">\n                {{ \'gateway.statistics.check-connectors-configuration-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkConnectorsConfigurationInSeconds\').hasError(\'min\')">\n                {{ \'gateway.statistics.check-connectors-configuration-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkConnectorsConfigurationInSeconds\').hasError(\'pattern\')">\n                {{ \'gateway.statistics.check-connectors-configuration-pattern\' | translate }}\n              </mat-error>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.statistics.max-payload-size-bytes</mat-label>\n              <input matInput formControlName="maxPayloadSizeBytes" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.maxPayloadSizeBytes\').hasError(\'required\')">\n                {{ \'gateway.statistics.max-payload-size-bytes-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.maxPayloadSizeBytes\').hasError(\'min\')">\n                {{ \'gateway.statistics.max-payload-size-bytes-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.maxPayloadSizeBytes\').hasError(\'pattern\')">\n                {{ \'gateway.statistics.max-payload-size-bytes-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.max-payload-size-bytes\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.statistics.min-pack-size-to-send</mat-label>\n              <input matInput formControlName="minPackSizeToSend" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSizeToSend\').hasError(\'required\')">\n                {{ \'gateway.statistics.min-pack-size-to-send-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSizeToSend\').hasError(\'min\')">\n                {{ \'gateway.statistics.min-pack-size-to-send-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSizeToSend\').hasError(\'pattern\')">\n                {{ \'gateway.statistics.min-pack-size-to-send-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.min-pack-size-to-send\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:grid;grid-template-rows:min-content minmax(auto,1fr) min-content}:host .configuration-block{display:flex;flex-direction:column;gap:16px;max-height:70vh}:host .dialog-mode .configuration-block{max-height:60vh}:host .mat-toolbar{grid-row:1;background:transparent;color:#000000de!important}:host .tab-group-block{min-width:0;height:100%;min-height:0;grid-row:2}:host .toggle-group{margin-right:auto}:host .first-capital{text-transform:capitalize}:host textarea{resize:none}:host .saving-period{flex:1}:host .statistics-container{width:100%}:host .statistics-container .command-container{width:100%}:host mat-form-field mat-error{display:none!important}:host mat-form-field mat-error:first-child{display:block!important}:host ::ng-deep .pointer-event{pointer-events:all}:host ::ng-deep .toggle-group span{padding:0 25px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{color:#e0e0e0}:host ::ng-deep .mat-mdc-form-field-icon-suffix:hover{color:#9e9e9e}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"directive",type:_.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:_.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:_.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"pipe",type:_.KeyValuePipe,name:"keyvalue"},{kind:"ngmodule",type:D},{kind:"component",type:Ct.TbErrorComponent,selector:"tb-error",inputs:["noMargin","error"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:xe.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:ve.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:ve.MatLabel,selector:"mat-label"},{kind:"directive",type:ve.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:ve.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:we.MatSelect,selector:"mat-select",inputs:["aria-describedby","panelClass","disabled","disableRipple","tabIndex","hideSingleSelectionIndicator","placeholder","required","multiple","disableOptionCentering","compareWith","value","aria-label","aria-labelledby","errorStateMatcher","typeaheadDebounceInterval","sortComparator","id","panelWidth"],outputs:["openedChange","opened","closed","selectionChange","valueChange"],exportAs:["matSelect"]},{kind:"component",type:Ce.MatOption,selector:"mat-option",inputs:["value","id","disabled"],outputs:["onSelectionChange"],exportAs:["matOption"]},{kind:"directive",type:ze.MatTooltip,selector:"[matTooltip]",inputs:["matTooltipPosition","matTooltipPositionAtOrigin","matTooltipDisabled","matTooltipShowDelay","matTooltipHideDelay","matTooltipTouchGestures","matTooltip","matTooltipClass"],exportAs:["matTooltip"]},{kind:"directive",type:W.MatTabContent,selector:"[matTabContent]"},{kind:"component",type:W.MatTab,selector:"mat-tab",inputs:["disabled","label","aria-label","aria-labelledby","labelClass","bodyClass"],exportAs:["matTab"]},{kind:"component",type:W.MatTabGroup,selector:"mat-tab-group",inputs:["color","fitInkBarToContent","mat-stretch-tabs","dynamicHeight","selectedIndex","headerPosition","animationDuration","contentTabIndex","disablePagination","disableRipple","preserveContent","backgroundColor","aria-label","aria-labelledby"],outputs:["selectedIndexChange","focusChange","animationDone","selectedTabChange"],exportAs:["matTabGroup"]},{kind:"component",type:et.MatSlideToggle,selector:"mat-slide-toggle",inputs:["name","id","labelPosition","aria-label","aria-labelledby","aria-describedby","required","color","disabled","disableRipple","tabIndex","checked","hideIcon","disabledInteractive"],outputs:["change","toggleChange"],exportAs:["matSlideToggle"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:j.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:me.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:me.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:me.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:me.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"directive",type:me.FormArrayName,selector:"[formArrayName]",inputs:["formArrayName"]},{kind:"component",type:Tt.FileInputComponent,selector:"tb-file-input",inputs:["label","hint","accept","noFileText","inputId","allowedExtensions","dropLabel","maxSizeByte","contentConvertFunction","required","requiredAsError","disabled","existingFileName","readAsBinary","workFromFileObj","multipleFile"],outputs:["fileNameChanged"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:St.CopyButtonComponent,selector:"tb-copy-button",inputs:["copyText","disabled","mdiIcon","icon","tooltipText","tooltipPosition","style","color","miniButton"],outputs:["successCopied"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:ut.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]}]})}}e("GatewayBasicConfigurationComponent",Do),He([N()],Do.prototype,"dialogMode",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Do,decorators:[{type:n,args:[{selector:"tb-gateway-basic-configuration",standalone:!0,imports:[H,D],providers:[{provide:ge,useExisting:m((()=>Do)),multi:!0},{provide:fe,useExisting:m((()=>Do)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n<mat-tab-group class="tab-group-block" [formGroup]="basicFormGroup" [class.dialog-mode]="dialogMode">\n  <mat-tab label="{{ \'gateway.general\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.remote-configuration\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteConfiguration">\n              {{ \'gateway.remote-configuration\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.remote-shell\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteShell">\n              {{ \'gateway.remote-shell\' | translate }}\n            </mat-slide-toggle>\n          </div>\n          <div class="tb-form-row no-border no-padding tb-standard-fields">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.thingsboard-host</mat-label>\n              <input matInput formControlName="host"/>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.host\' | translate }}">info_outlined\n              </mat-icon>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.host\').hasError(\'required\')">\n                {{ \'gateway.thingsboard-host-required\' | translate }}\n              </mat-error>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.thingsboard-port</mat-label>\n              <input matInput formControlName="port" type="number" min="0"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'required\')">\n                {{ \'gateway.thingsboard-port-required\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'min\')">\n                {{ \'gateway.thingsboard-port-min\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'max\')">\n                {{ \'gateway.thingsboard-port-max\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.port\').hasError(\'pattern\')">\n                {{ \'gateway.thingsboard-port-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.port\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-panel">\n          <div translate class="tb-form-panel-title">security.security</div>\n          <ng-container formGroupName="security">\n            <tb-toggle-select class="toggle-group" formControlName="type">\n              <tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"\n                                [value]="securityType.key">{{ securityType.value | translate }}\n              </tb-toggle-option>\n            </tb-toggle-select>\n            <mat-form-field appearance="outline"\n                            *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value.toLowerCase().includes(\'accesstoken\')">\n              <mat-label translate>security.access-token</mat-label>\n              <input matInput formControlName="accessToken"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.security.accessToken\').hasError(\'required\')">\n                {{ \'security.access-token-required\' | translate }}\n              </mat-error>\n              <tb-copy-button\n                matSuffix\n                miniButton="false"\n                *ngIf="basicFormGroup.get(\'thingsboard.security.accessToken\').value"\n                [copyText]="basicFormGroup.get(\'thingsboard.security.accessToken\').value"\n                tooltipText="{{ \'device.copy-access-token\' | translate }}"\n                tooltipPosition="above"\n                icon="content_copy">\n              </tb-copy-button>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.token\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <section>\n              <div class="tb-form-row no-border no-padding tb-standard-fields"\n                   *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value === \'usernamePassword\'">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>security.clientId</mat-label>\n                  <input matInput formControlName="clientId"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'thingsboard.security.clientId\').hasError(\'required\')">\n                    {{ \'security.clientId-required\' | translate }}\n                  </mat-error>\n                  <tb-copy-button\n                    matSuffix\n                    miniButton="false"\n                    *ngIf="basicFormGroup.get(\'thingsboard.security.clientId\').value"\n                    [copyText]="basicFormGroup.get(\'thingsboard.security.clientId\').value"\n                    tooltipText="{{ \'gateway.copy-client-id\' | translate }}"\n                    tooltipPosition="above"\n                    icon="content_copy">\n                  </tb-copy-button>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.client-id\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>security.username</mat-label>\n                  <input matInput formControlName="username"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'thingsboard.security.username\').hasError(\'required\')">\n                    {{ \'security.username-required\' | translate }}\n                  </mat-error>\n                  <tb-copy-button\n                    matSuffix\n                    miniButton="false"\n                    *ngIf="basicFormGroup.get(\'thingsboard.security.username\').value"\n                    [copyText]="basicFormGroup.get(\'thingsboard.security.username\').value"\n                    tooltipText="{{ \'gateway.copy-username\' | translate }}"\n                    tooltipPosition="above"\n                    icon="content_copy">\n                  </tb-copy-button>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.username\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n              <mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%"\n                              *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value === \'usernamePassword\'">\n                <mat-label translate>gateway.password</mat-label>\n                <input matInput formControlName="password"/>\n                <tb-copy-button\n                  matSuffix\n                  miniButton="false"\n                  *ngIf="basicFormGroup.get(\'thingsboard.security.password\').value"\n                  [copyText]="basicFormGroup.get(\'thingsboard.security.password\').value"\n                  tooltipText="{{ \'gateway.copy-password\' | translate }}"\n                  tooltipPosition="above"\n                  icon="content_copy">\n                </tb-copy-button>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.password\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </section>\n            <tb-error style="margin-top: -12px; display: block;" fxFlex="100"\n                      *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value === \'usernamePassword\'"\n                      [error]="basicFormGroup.get(\'thingsboard.security\').hasError(\'atLeastOne\') ?\n          (\'device.client-id-or-user-name-necessary\' | translate) : \'\'"></tb-error>\n            <tb-file-input\n              fxFlex="100"\n              hint="{{ \'gateway.hints.ca-cert\' | translate }}"\n              *ngIf="basicFormGroup.get(\'thingsboard.security.type\').value.toLowerCase().includes(\'tls\')"\n              formControlName="caCert"\n              label="{{ \'security.ca-cert\' | translate }}"\n              [allowedExtensions]="\'pem, cert, key\'"\n              [accept]="\'.pem, application/pem,.cert, application/cert, .key,application/key\'"\n              dropLabel="{{ \'gateway.drop-file\' | translate }}">\n            </tb-file-input>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.logs.logs\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="logs" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <div fxLayout="column">\n            <mat-form-field appearance="outline">\n              <mat-label translate>gateway.logs.date-format</mat-label>\n              <input matInput formControlName="dateFormat"/>\n              <mat-error *ngIf="basicFormGroup.get(\'logs.dateFormat\').hasError(\'required\')">\n                {{ \'gateway.logs.date-format-required\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.date-form\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <mat-form-field appearance="outline">\n              <mat-label translate>gateway.logs.log-format</mat-label>\n              <textarea matInput formControlName="logFormat" rows="2"></textarea>\n              <mat-error *ngIf="basicFormGroup.get(\'logs.logFormat\').hasError(\'required\')">\n                {{ \'gateway.logs.log-format-required\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.log-format\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </div>\n        </div>\n        <div class="tb-form-panel no-padding-bottom" formGroupName="remote">\n          <div translate class="tb-form-panel-title">gateway.logs.remote</div>\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.remote-log\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">\n              {{ \'gateway.logs.remote-logs\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <mat-form-field appearance="outline">\n            <mat-label translate>gateway.logs.level</mat-label>\n            <mat-select formControlName="logLevel">\n              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-panel no-padding-bottom" formGroupName="local">\n          <div translate class="tb-form-panel-title">gateway.logs.local</div>\n          <tb-toggle-select class="toggle-group" [formControl]="logSelector">\n            <tb-toggle-option *ngFor="let logConfig of localLogsConfigs" [value]="logConfig"\n                              class="first-capital">{{ localLogsConfigTranslateMap.get(logConfig) }}</tb-toggle-option>\n          </tb-toggle-select>\n          <ng-container [formGroup]="getLogFormGroup(logSelector.value)">\n            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.logs.level</mat-label>\n                <mat-select formControlName="logLevel">\n                  <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>\n                </mat-select>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.logs.file-path</mat-label>\n                <input matInput formControlName="filePath"/>\n                <mat-error *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.filePath\').hasError(\'required\')">\n                  {{ \'gateway.logs.file-path-required\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <div class="tb-form-row no-border no-padding tb-standard-fields saving-period">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.logs.saving-period</mat-label>\n                  <input matInput formControlName="savingTime" type="number" min="0"/>\n                  <mat-error\n                    *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.savingTime\').hasError(\'required\')">\n                    {{ \'gateway.logs.saving-period-required\' | translate }}\n                  </mat-error>\n                  <mat-error\n                    *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.savingTime\').hasError(\'min\')">\n                    {{ \'gateway.logs.saving-period-min\' | translate }}\n                  </mat-error>\n                </mat-form-field>\n                <mat-form-field appearance="outline" hideRequiredMarker style="min-width: 110px; width: 30%">\n                  <mat-select formControlName="savingPeriod">\n                    <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">\n                      {{ period.value | translate }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.logs.backup-count</mat-label>\n                <input matInput formControlName="backupCount" type="number" min="0"/>\n                <mat-error\n                  *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.backupCount\').hasError(\'required\')">\n                  {{ \'gateway.logs.backup-count-required\' | translate }}\n                </mat-error>\n                <mat-error\n                  *ngIf="basicFormGroup.get(\'logs.local.\' + logSelector.value + \'.backupCount\').hasError(\'min\')">\n                  {{ \'gateway.logs.backup-count-min\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.backup-count\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.storage\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="storage" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <div translate class="tb-form-panel-title">gateway.storage</div>\n          <div translate class="tb-form-panel-hint">gateway.hints.storage</div>\n          <tb-toggle-select class="toggle-group" formControlName="type">\n            <tb-toggle-option *ngFor="let storageType of storageTypes" [value]="storageType">\n              {{ storageTypesTranslationMap.get(storageType) | translate }}\n            </tb-toggle-option>\n          </tb-toggle-select>\n          <div class="tb-form-panel-hint">{{ \'gateway.hints.\' + basicFormGroup.get(\'storage.type\').value | translate }}</div>\n          <ng-container [ngSwitch]="basicFormGroup.get(\'storage.type\').value">\n            <section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.storage-read-record-count</mat-label>\n                <input type="number" matInput formControlName="read_records_count"/>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.read_records_count\').hasError(\'required\')">\n                  {{ \'gateway.storage-read-record-count-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.read_records_count\').hasError(\'min\')">\n                  {{ \'gateway.storage-read-record-count-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.read_records_count\').hasError(\'pattern\')">\n                  {{ \'gateway.storage-read-record-count-pattern\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.read-record-count\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.storage-max-records</mat-label>\n                <input type="number" matInput formControlName="max_records_count"/>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_count\').hasError(\'required\')">\n                  {{ \'gateway.storage-max-records-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_count\').hasError(\'min\')">\n                  {{ \'gateway.storage-max-records-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_count\').hasError(\'pattern\')">\n                  {{ \'gateway.storage-max-records-pattern\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.max-records-count\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </section>\n            <section *ngSwitchCase="StorageTypes.FILE">\n              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-data-folder-path</mat-label>\n                  <input matInput formControlName="data_folder_path"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.data_folder_path\').hasError(\'required\')">\n                    {{ \'gateway.storage-data-folder-path-required\' | translate }}\n                  </mat-error>\n                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"\n                            aria-label="help-icon"\n                            matSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.data-folder\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-max-files</mat-label>\n                  <input matInput type="number" formControlName="max_file_count"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_file_count\').hasError(\'required\')">\n                    {{ \'gateway.storage-max-files-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_file_count\').hasError(\'min\')">\n                    {{ \'gateway.storage-max-files-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_file_count\').hasError(\'pattern\')">\n                    {{ \'gateway.storage-max-files-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.max-file-count\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-max-read-record-count</mat-label>\n                  <input matInput type="number" formControlName="max_read_records_count"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_read_records_count\').hasError(\'required\')">\n                    {{ \'gateway.storage-max-read-record-count-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_read_records_count\').hasError(\'min\')">\n                    {{ \'gateway.storage-max-read-record-count-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_read_records_count\').hasError(\'pattern\')">\n                    {{ \'gateway.storage-max-read-record-count-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.max-read-count\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-max-file-records</mat-label>\n                  <input matInput type="number" formControlName="max_records_per_file"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_per_file\').hasError(\'required\')">\n                    {{ \'gateway.storage-max-records-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_per_file\').hasError(\'min\')">\n                    {{ \'gateway.storage-max-records-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.max_records_per_file\').hasError(\'pattern\')">\n                    {{ \'gateway.storage-max-records-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.max-records\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n            </section>\n            <section *ngSwitchCase="StorageTypes.SQLITE">\n              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.storage-path</mat-label>\n                  <input matInput formControlName="data_file_path"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.data_file_path\').hasError(\'required\')">\n                    {{ \'gateway.storage-path-required\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.data-folder\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n                <mat-form-field appearance="outline" class="flex">\n                  <mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>\n                  <input matInput type="number" formControlName="messages_ttl_check_in_hours"/>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_check_in_hours\').hasError(\'required\')">\n                    {{ \'gateway.messages-ttl-check-in-hours-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_check_in_hours\').hasError(\'min\')">\n                    {{ \'gateway.messages-ttl-check-in-hours-min\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_check_in_hours\').hasError(\'pattern\')">\n                    {{ \'gateway.messages-ttl-check-in-hours-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.ttl-check-hour\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </div>\n              <mat-form-field appearance="outline" class="mat-block">\n                <mat-label translate>gateway.messages-ttl-in-days</mat-label>\n                <input matInput type="number" formControlName="messages_ttl_in_days"/>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_in_days\').hasError(\'required\')">\n                  {{ \'gateway.messages-ttl-in-days-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_in_days\').hasError(\'min\')">\n                  {{ \'gateway.messages-ttl-in-days-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'storage.messages_ttl_in_days\').hasError(\'pattern\')">\n                  {{ \'gateway.messages-ttl-in-days-pattern\' | translate }}\n                </mat-error>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.ttl-messages-day\' | translate }}">info_outlined\n                </mat-icon>\n              </mat-form-field>\n            </section>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.grpc\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="grpc" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom">\n          <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">\n            {{ \'gateway.grpc\'  | translate }}\n          </mat-slide-toggle>\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.permit-without-calls\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="keepalivePermitWithoutCalls">\n              {{ \'gateway.permit-without-calls\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <section>\n            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.server-port</mat-label>\n                <input matInput formControlName="serverPort" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.server-port\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'required\')">\n                  {{ \'gateway.thingsboard-port-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'min\')">\n                  {{ \'gateway.thingsboard-port-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'max\')">\n                  {{ \'gateway.thingsboard-port-max\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.serverPort\').hasError(\'pattern\')">\n                  {{ \'gateway.thingsboard-port-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>\n                <input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-keep-alive-timeout\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeoutMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-keep-alive-timeout-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeoutMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-keep-alive-timeout-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeoutMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-keep-alive-timeout-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </section>\n            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-keep-alive</mat-label>\n                <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-keep-alive\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-keep-alive-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-keep-alive-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.keepAliveTimeMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-keep-alive-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-min-time-between-pings</mat-label>\n                <input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-min-time-between-pings\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minTimeBetweenPingsMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-min-time-between-pings-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minTimeBetweenPingsMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-min-time-between-pings-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minTimeBetweenPingsMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-min-time-between-pings-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </section>\n            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>\n                <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-max-pings-without-data\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.maxPingsWithoutData\').hasError(\'required\')">\n                  {{ \'gateway.grpc-max-pings-without-data-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.maxPingsWithoutData\').hasError(\'min\')">\n                  {{ \'gateway.grpc-max-pings-without-data-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.maxPingsWithoutData\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-max-pings-without-data-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n              <mat-form-field appearance="outline" class="flex">\n                <mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>\n                <input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>\n                <mat-icon matIconSuffix style="cursor:pointer;"\n                          matTooltip="{{ \'gateway.hints.grpc-min-ping-interval-without-data\' | translate }}">info_outlined\n                </mat-icon>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minPingIntervalWithoutDataMs\').hasError(\'required\')">\n                  {{ \'gateway.grpc-min-ping-interval-without-data-required\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minPingIntervalWithoutDataMs\').hasError(\'min\')">\n                  {{ \'gateway.grpc-min-ping-interval-without-data-min\' | translate }}\n                </mat-error>\n                <mat-error *ngIf="basicFormGroup.get(\'grpc.minPingIntervalWithoutDataMs\').hasError(\'pattern\')">\n                  {{ \'gateway.grpc-min-ping-interval-without-data-pattern\' | translate }}\n                </mat-error>\n              </mat-form-field>\n            </section>\n          </section>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.statistics.statistics\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel no-padding-bottom" formGroupName="statistics">\n          <mat-slide-toggle color="primary" class="mat-slide" formControlName="enable">\n            {{ \'gateway.statistics.statistics\'  | translate }}\n          </mat-slide-toggle>\n          <mat-form-field appearance="outline">\n            <mat-label translate>gateway.statistics.send-period</mat-label>\n            <input matInput formControlName="statsSendPeriodInSeconds" type="number" min="60"/>\n            <mat-error\n              *ngIf="basicFormGroup.get(\'thingsboard.statistics.statsSendPeriodInSeconds\').hasError(\'required\')">\n              {{ \'gateway.statistics.send-period-required\' | translate }}\n            </mat-error>\n            <mat-error\n              *ngIf="basicFormGroup.get(\'thingsboard.statistics.statsSendPeriodInSeconds\').hasError(\'min\')">\n              {{ \'gateway.statistics.send-period-min\' | translate }}\n            </mat-error>\n            <mat-error\n              *ngIf="basicFormGroup.get(\'thingsboard.statistics.statsSendPeriodInSeconds\').hasError(\'pattern\')">\n              {{ \'gateway.statistics.send-period-pattern\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div class="tb-form-panel">\n          <div class="tb-form-panel-title" translate>gateway.statistics.commands</div>\n          <div class="tb-form-panel-hint" translate>gateway.hints.commands</div>\n          <ng-container formGroupName="statistics">\n            <div fxLayout="row" formArrayName="commands" class="statistics-container"\n                 *ngFor="let commandControl of commandFormArray().controls; let $index = index">\n              <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">\n                <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n                  <mat-form-field appearance="outline" class="flex">\n                    <mat-label translate>gateway.statistics.attribute-name</mat-label>\n                    <input matInput formControlName="attributeOnGateway"/>\n                    <mat-error *ngIf="commandControl.get(\'attributeOnGateway\').hasError(\'required\')">\n                      {{ \'gateway.statistics.attribute-name-required\' | translate }}\n                    </mat-error>\n                    <mat-icon matIconSuffix style="cursor:pointer;"\n                              matTooltip="{{ \'gateway.hints.attribute\' | translate }}">info_outlined\n                    </mat-icon>\n                  </mat-form-field>\n                  <mat-form-field appearance="outline" class="flex">\n                    <mat-label translate>gateway.statistics.timeout</mat-label>\n                    <input matInput formControlName="timeout" type="number" min="0"/>\n                    <mat-error *ngIf="commandControl.get(\'timeout\').hasError(\'required\')">\n                      {{ \'gateway.statistics.timeout-required\' | translate }}\n                    </mat-error>\n                    <mat-error *ngIf="commandControl.get(\'timeout\').hasError(\'min\')">\n                      {{ \'gateway.statistics.timeout-min\' | translate }}\n                    </mat-error>\n                    <mat-error *ngIf="commandControl.get(\'timeout\').hasError(\'pattern\')">\n                      {{ \'gateway.statistics.timeout-pattern\' | translate }}\n                    </mat-error>\n                    <mat-icon matIconSuffix style="cursor:pointer;"\n                              matTooltip="{{ \'gateway.hints.timeout\' | translate }}">info_outlined\n                    </mat-icon>\n                  </mat-form-field>\n                </section>\n                <mat-form-field appearance="outline" class="mat-block">\n                  <mat-label translate>gateway.statistics.command</mat-label>\n                  <input matInput formControlName="command"/>\n                  <mat-error *ngIf="commandControl.get(\'command\').hasError(\'required\')">\n                    {{ \'gateway.statistics.command-required\' | translate }}\n                  </mat-error>\n                  <mat-error *ngIf="commandControl.get(\'command\').hasError(\'pattern\')">\n                    {{ \'gateway.statistics.command-pattern\' | translate }}\n                  </mat-error>\n                  <mat-icon matIconSuffix style="cursor:pointer;"\n                            matTooltip="{{ \'gateway.hints.command\' | translate }}">info_outlined\n                  </mat-icon>\n                </mat-form-field>\n              </section>\n              <button mat-icon-button (click)="removeCommandControl($index, $event)"\n                      class="tb-box-button"\n                      [disabled]="!basicFormGroup.get(\'thingsboard.remoteConfiguration\').value"\n                      matTooltip="{{ \'gateway.statistics.remove\' | translate }}"\n                      matTooltipPosition="above">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n            <button mat-stroked-button color="primary"\n                    style="width: fit-content;"\n                    type="button"\n                    [disabled]="!basicFormGroup.get(\'thingsboard.remoteConfiguration\').value"\n                    (click)="addCommand()">\n              {{ \'gateway.statistics.add\' | translate }}\n            </button>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n  <mat-tab label="{{ \'gateway.other\' | translate }}">\n    <ng-template matTabContent>\n      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">\n        <div class="tb-form-panel" formGroupName="checkingDeviceActivity"\n             [class.no-padding-bottom]="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.checkDeviceInactivity\').value">\n          <div tb-hint-tooltip-icon="{{ \'gateway.hints.check-device-activity\' | translate }}"\n               class="tb-form-row no-border no-padding">\n            <mat-slide-toggle class="mat-slide" color="primary" formControlName="checkDeviceInactivity">\n              {{ \'gateway.checking-device-activity\'  | translate }}\n            </mat-slide-toggle>\n          </div>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs"\n                   *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.checkDeviceInactivity\').value">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>\n              <input matInput formControlName="inactivityTimeoutSeconds" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds\').hasError(\'required\')">\n                {{ \'gateway.inactivity-timeout-seconds-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds\').hasError(\'min\')">\n                {{ \'gateway.inactivity-timeout-seconds-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds\').hasError(\'pattern\')">\n                {{ \'gateway.inactivity-timeout-seconds-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.inactivity-timeout\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.inactivity-check-period-seconds</mat-label>\n              <input matInput type="number" min="0" formControlName="inactivityCheckPeriodSeconds"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds\').hasError(\'required\')">\n                {{ \'gateway.inactivity-check-period-seconds-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds\').hasError(\'min\')">\n                {{ \'gateway.inactivity-check-period-seconds-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds\').hasError(\'pattern\')">\n                {{ \'gateway.inactivity-check-period-seconds-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.inactivity-period\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n        </div>\n        <div class="tb-form-panel no-padding-bottom">\n          <div class="tb-form-panel-title" translate>gateway.advanced</div>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.min-pack-send-delay</mat-label>\n              <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.minPackSendDelayMS\').hasError(\'required\')">\n                {{ \'gateway.min-pack-send-delay-required\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.minPackSendDelayMS\').hasError(\'min\')">\n                {{ \'gateway.min-pack-send-delay-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSendDelayMS\').hasError(\'pattern\')">\n                {{ \'gateway.min-pack-send-delay-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.minimal-pack-delay\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.mqtt-qos</mat-label>\n              <input matInput formControlName="qos" type="number" min="0" max="1"/>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.qos\').hasError(\'required\')">\n                {{ \'gateway.mqtt-qos-required\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.qos\').hasError(\'min\')">\n                {{ \'gateway.mqtt-qos-range\' | translate }}\n              </mat-error>\n              <mat-error *ngIf="basicFormGroup.get(\'thingsboard.qos\').hasError(\'max\')">\n                {{ \'gateway.mqtt-qos-range\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.qos\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>\n              <input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkConnectorsConfigurationInSeconds\').hasError(\'required\')">\n                {{ \'gateway.statistics.check-connectors-configuration-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkConnectorsConfigurationInSeconds\').hasError(\'min\')">\n                {{ \'gateway.statistics.check-connectors-configuration-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.checkConnectorsConfigurationInSeconds\').hasError(\'pattern\')">\n                {{ \'gateway.statistics.check-connectors-configuration-pattern\' | translate }}\n              </mat-error>\n            </mat-form-field>\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.statistics.max-payload-size-bytes</mat-label>\n              <input matInput formControlName="maxPayloadSizeBytes" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.maxPayloadSizeBytes\').hasError(\'required\')">\n                {{ \'gateway.statistics.max-payload-size-bytes-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.maxPayloadSizeBytes\').hasError(\'min\')">\n                {{ \'gateway.statistics.max-payload-size-bytes-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.maxPayloadSizeBytes\').hasError(\'pattern\')">\n                {{ \'gateway.statistics.max-payload-size-bytes-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.max-payload-size-bytes\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n            <mat-form-field appearance="outline" class="flex">\n              <mat-label translate>gateway.statistics.min-pack-size-to-send</mat-label>\n              <input matInput formControlName="minPackSizeToSend" type="number" min="0"/>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSizeToSend\').hasError(\'required\')">\n                {{ \'gateway.statistics.min-pack-size-to-send-required\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSizeToSend\').hasError(\'min\')">\n                {{ \'gateway.statistics.min-pack-size-to-send-min\' | translate }}\n              </mat-error>\n              <mat-error\n                *ngIf="basicFormGroup.get(\'thingsboard.minPackSizeToSend\').hasError(\'pattern\')">\n                {{ \'gateway.statistics.min-pack-size-to-send-pattern\' | translate }}\n              </mat-error>\n              <mat-icon matIconSuffix style="cursor:pointer;"\n                        matTooltip="{{ \'gateway.hints.min-pack-size-to-send\' | translate }}">info_outlined\n              </mat-icon>\n            </mat-form-field>\n          </section>\n        </div>\n      </div>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:grid;grid-template-rows:min-content minmax(auto,1fr) min-content}:host .configuration-block{display:flex;flex-direction:column;gap:16px;max-height:70vh}:host .dialog-mode .configuration-block{max-height:60vh}:host .mat-toolbar{grid-row:1;background:transparent;color:#000000de!important}:host .tab-group-block{min-width:0;height:100%;min-height:0;grid-row:2}:host .toggle-group{margin-right:auto}:host .first-capital{text-transform:capitalize}:host textarea{resize:none}:host .saving-period{flex:1}:host .statistics-container{width:100%}:host .statistics-container .command-container{width:100%}:host mat-form-field mat-error{display:none!important}:host mat-form-field mat-error:first-child{display:block!important}:host ::ng-deep .pointer-event{pointer-events:all}:host ::ng-deep .toggle-group span{padding:0 25px}:host ::ng-deep .mat-mdc-form-field-icon-suffix{color:#e0e0e0}:host ::ng-deep .mat-mdc-form-field-icon-suffix:hover{color:#9e9e9e}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:X.DeviceService},{type:t.ChangeDetectorRef},{type:Je.MatDialog}],propDecorators:{device:[{type:a}],dialogMode:[{type:a}],initialCredentialsUpdated:[{type:l}]}});class Po{constructor(e){this.fb=e,this.destroy$=new Se,this.advancedFormControl=this.fb.control(""),this.advancedFormControl.valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{this.onChange(e),this.onTouched()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnChange(e){this.onChange=e}registerOnTouched(e){this.onTouched=e}writeValue(e){this.advancedFormControl.reset(e,{emitEvent:!1})}validate(){return this.advancedFormControl.valid?null:{advancedFormControl:{valid:!1}}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Po,deps:[{token:me.FormBuilder}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Po,isStandalone:!0,selector:"tb-gateway-advanced-configuration",providers:[{provide:ge,useExisting:m((()=>Po)),multi:!0},{provide:fe,useExisting:m((()=>Po)),multi:!0}],ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<tb-json-object-edit\n  fillHeight="true"\n  class="tb-flex config-container"\n  fxLayout="column"\n  jsonRequired\n  label="{{ \'gateway.configuration\' | translate }}"\n  [formControl]="advancedFormControl"\n/>\n',styles:['@charset "UTF-8";:host .config-container{height:calc(100% - 60px);padding:8px}\n'],dependencies:[{kind:"ngmodule",type:H},{kind:"ngmodule",type:D},{kind:"component",type:vt.JsonObjectEditComponent,selector:"tb-json-object-edit",inputs:["label","disabled","fillHeight","editorStyle","sort","jsonRequired","readonly"]},{kind:"directive",type:j.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayAdvancedConfigurationComponent",Po),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Po,decorators:[{type:n,args:[{selector:"tb-gateway-advanced-configuration",standalone:!0,imports:[H,D],providers:[{provide:ge,useExisting:m((()=>Po)),multi:!0},{provide:fe,useExisting:m((()=>Po)),multi:!0}],template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<tb-json-object-edit\n  fillHeight="true"\n  class="tb-flex config-container"\n  fxLayout="column"\n  jsonRequired\n  label="{{ \'gateway.configuration\' | translate }}"\n  [formControl]="advancedFormControl"\n/>\n',styles:['@charset "UTF-8";:host .config-container{height:calc(100% - 60px);padding:8px}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder}]});class Go{constructor(e,t,n,a){this.fb=e,this.attributeService=t,this.deviceService=n,this.cd=a,this.ConfigurationModes=on,this.destroy$=new Se,this.gatewayConfigAttributeKeys=["general_configuration","grpc_configuration","logs_configuration","storage_configuration","RemoteLoggingLevel","mode"],this.gatewayConfigGroup=this.fb.group({basicConfig:[],advancedConfig:[],mode:[on.BASIC]}),this.observeAlignConfigs()}ngAfterViewInit(){this.fetchConfigAttribute(this.device)}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}saveConfig(){const{mode:e,advancedConfig:t}=pe(this.removeEmpty(this.gatewayConfigGroup.value)),n={mode:e,...t};n.thingsboard.statistics.commands=Object.values(n.thingsboard.statistics.commands??[]);const a=this.generateAttributes(n);this.attributeService.saveEntityAttributes(this.device,L.SHARED_SCOPE,a).pipe(Ue((e=>this.updateCredentials(n.thingsboard.security))),Ne(this.destroy$)).subscribe((()=>{this.dialogRef?this.dialogRef.close():(this.gatewayConfigGroup.markAsPristine(),this.cd.detectChanges())}))}observeAlignConfigs(){this.gatewayConfigGroup.get("basicConfig").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{const t=this.gatewayConfigGroup.get("advancedConfig");ee(t.value,e)||this.gatewayConfigGroup.get("mode").value!==on.BASIC||t.patchValue(e,{emitEvent:!1})})),this.gatewayConfigGroup.get("advancedConfig").valueChanges.pipe(Ne(this.destroy$)).subscribe((e=>{const t=this.gatewayConfigGroup.get("basicConfig");ee(t.value,e)||this.gatewayConfigGroup.get("mode").value!==on.ADVANCED||t.patchValue(e,{emitEvent:!1})}))}generateAttributes(e){const t=[],n=(e,n)=>{t.push({key:e,value:n})},a=(e,t)=>{t={...t,ts:(new Date).getTime()},n(e,t)};return n("RemoteLoggingLevel",e.logs?.remote?.enabled?e.logs.remote.logLevel:Mt.NONE),delete e.connectors,n("logs_configuration",this.generateLogsFile(e.logs)),a("grpc_configuration",e.grpc),a("storage_configuration",e.storage),a("general_configuration",e.thingsboard),n("mode",e.mode),t}updateCredentials(e){let t={};switch(e.type){case Vt.USERNAME_PASSWORD:this.shouldUpdateCredentials(e)&&(t=this.generateMqttCredentials(e));break;case Vt.ACCESS_TOKEN:case Vt.TLS_ACCESS_TOKEN:this.shouldUpdateAccessToken(e)&&(t={credentialsType:U.ACCESS_TOKEN,credentialsId:e.accessToken})}return Object.keys(t).length?this.deviceService.saveDeviceCredentials({...this.initialCredentials,...t}):Ie(null)}shouldUpdateCredentials(e){if(this.initialCredentials.credentialsType!==U.MQTT_BASIC)return!0;const t=JSON.parse(this.initialCredentials.credentialsValue);return!(t.clientId===e.clientId&&t.userName===e.username&&t.password===e.password)}generateMqttCredentials(e){const{clientId:t,username:n,password:a}=e,o={...t&&{clientId:t},...n&&{userName:n},...a&&{password:a}};return{credentialsType:U.MQTT_BASIC,credentialsValue:JSON.stringify(o)}}shouldUpdateAccessToken(e){return this.initialCredentials.credentialsType!==U.ACCESS_TOKEN||this.initialCredentials.credentialsId!==e.accessToken}cancel(){this.dialogRef&&this.dialogRef.close()}removeEmpty(e){return Object.fromEntries(Object.entries(e).filter((([e,t])=>null!=t)).map((([e,t])=>[e,t===Object(t)?this.removeEmpty(t):t])))}generateLogsFile(e){const t={version:1,disable_existing_loggers:!1,formatters:{LogFormatter:{class:"logging.Formatter",format:e.logFormat,datefmt:e.dateFormat}},handlers:{consoleHandler:{class:"logging.StreamHandler",formatter:"LogFormatter",level:0,stream:"ext://sys.stdout"},databaseHandler:{class:"thingsboard_gateway.tb_utility.tb_handler.TimedRotatingFileHandler",formatter:"LogFormatter",filename:"./logs/database.log",backupCount:1,encoding:"utf-8"}},loggers:{database:{handlers:["databaseHandler","consoleHandler"],level:"DEBUG",propagate:!1}},root:{level:"ERROR",handlers:["consoleHandler"]},ts:(new Date).getTime()};return this.addLocalLoggers(t,e.local),t}addLocalLoggers(e,t){for(const n of Object.keys(t))e.handlers[n+"Handler"]=this.createHandlerObj(t[n],n),e.loggers[n]=this.createLoggerObj(t[n],n)}createHandlerObj(e,t){return{class:"thingsboard_gateway.tb_utility.tb_handler.TimedRotatingFileHandler",formatter:"LogFormatter",filename:`${e.filePath}/${t}.log`,backupCount:e.backupCount,interval:e.savingTime,when:e.savingPeriod,encoding:"utf-8"}}createLoggerObj(e,t){return{handlers:[`${t}Handler`,"consoleHandler"],level:e.logLevel,propagate:!1}}fetchConfigAttribute(e){e.id!==k&&this.attributeService.getEntityAttributes(e,L.CLIENT_SCOPE).pipe(_e((t=>t.length?Ie(t):this.attributeService.getEntityAttributes(e,L.SHARED_SCOPE,this.gatewayConfigAttributeKeys))),Ne(this.destroy$)).subscribe((e=>{this.updateConfigs(e),this.cd.detectChanges()}))}updateConfigs(e){const t={thingsboard:{},grpc:{},logs:{},storage:{},mode:on.BASIC};e.forEach((e=>{switch(e.key){case"general_configuration":t.thingsboard=e.value,this.updateFormControls(e.value);break;case"grpc_configuration":t.grpc=e.value;break;case"logs_configuration":t.logs=this.logsToObj(e.value);break;case"storage_configuration":t.storage=e.value;break;case"mode":t.mode=e.value;break;case"RemoteLoggingLevel":t.logs={...t.logs,remote:{enabled:e.value!==Mt.NONE,logLevel:e.value}}}})),this.gatewayConfigGroup.get("basicConfig").setValue(t,{emitEvent:!1}),this.gatewayConfigGroup.get("advancedConfig").setValue(t,{emitEvent:!1})}updateFormControls(e){const{type:t,accessToken:n,...a}=e.security??{};this.initialCredentials={deviceId:this.device,credentialsType:t,credentialsId:n,credentialsValue:JSON.stringify(a)}}logsToObj(e){const{format:t,datefmt:n}=e.formatters.LogFormatter;return{local:Object.keys(Pt).reduce(((t,n)=>{const a=e.handlers[`${n}Handler`]||{},o=e.loggers[n]||{};return t[n]={logLevel:o.level||Mt.INFO,filePath:a.filename?.split(`/${n}`)[0]||"./logs",backupCount:a.backupCount||7,savingTime:a.interval||3,savingPeriod:a.when||Dt.days},t}),{}),logFormat:t,dateFormat:n}}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Go,deps:[{token:me.FormBuilder},{token:X.AttributeService},{token:X.DeviceService},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component})}static{this.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"18.2.6",type:Go,selector:"tb-gateway-configuration",inputs:{device:"device",dialogRef:"dialogRef"},ngImport:t,template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<div [formGroup]="gatewayConfigGroup" class="gateway-config-container">\n  <div class="content-wrapper">\n    <mat-toolbar color="primary" [class.page-header]="!dialogRef">\n      <div class="tb-flex space-between align-center">\n        <h2 translate>gateway.gateway-configuration</h2>\n        <div class="toolbar-actions">\n          <tb-toggle-select [class.dialog-toggle]="!!dialogRef" formControlName="mode" appearance="{{dialogRef ? \'stroked\' : \'fill\'}}">\n            <tb-toggle-option [value]="ConfigurationModes.BASIC">\n              {{ \'gateway.basic\' | translate }}\n            </tb-toggle-option>\n            <tb-toggle-option [value]="ConfigurationModes.ADVANCED">\n              {{ \'gateway.advanced\' | translate }}\n            </tb-toggle-option>\n          </tb-toggle-select>\n          <button *ngIf="dialogRef" mat-icon-button (click)="cancel()" type="button">\n            <mat-icon class="material-icons">close</mat-icon>\n          </button>\n        </div>\n      </div>\n    </mat-toolbar>\n    <tb-gateway-basic-configuration\n      *ngIf="gatewayConfigGroup.get(\'mode\').value === ConfigurationModes.BASIC"\n      formControlName="basicConfig"\n      [device]="device"\n      [dialogMode]="!!dialogRef"\n      (initialCredentialsUpdated)="initialCredentials = $event"\n    />\n    <tb-gateway-advanced-configuration\n      *ngIf="gatewayConfigGroup.get(\'mode\').value === ConfigurationModes.ADVANCED"\n      formControlName="advancedConfig"\n    />\n  </div>\n  <div class="actions">\n    <button mat-button color="primary"\n            type="button"\n            *ngIf="dialogRef"\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            type="button"\n            [disabled]="gatewayConfigGroup.invalid || !gatewayConfigGroup.dirty"\n            (click)="saveConfig()">\n      {{ \'action.save\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}:host .page-header.mat-toolbar{background:transparent;color:#000000de!important}:host .actions{grid-row:3;padding:8px 16px 8px 8px;display:flex;gap:8px;justify-content:flex-end;position:absolute;bottom:0;right:0;z-index:1;background:#fff;width:100%}:host .gateway-config-container{display:flex;flex-direction:column;height:100%;overflow:hidden}:host .content-wrapper{flex:1}:host .toolbar-actions{display:flex;align-items:center}.dialog-toggle ::ng-deep .mat-button-toggle-button{color:#ffffffbf}\n'],dependencies:[{kind:"directive",type:_.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:be.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",exportAs:["matButton"]},{kind:"component",type:be.MatIconButton,selector:"button[mat-icon-button]",exportAs:["matButton"]},{kind:"component",type:Ke.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"component",type:rt.MatToolbar,selector:"mat-toolbar",inputs:["color"],exportAs:["matToolbar"]},{kind:"directive",type:me.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:me.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:me.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:me.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Y.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:nt.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:at.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:Do,selector:"tb-gateway-basic-configuration",inputs:["device","dialogMode"],outputs:["initialCredentialsUpdated"]},{kind:"component",type:Po,selector:"tb-gateway-advanced-configuration"},{kind:"pipe",type:Y.TranslatePipe,name:"translate"}]})}}e("GatewayConfigurationComponent",Go),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Go,decorators:[{type:n,args:[{selector:"tb-gateway-configuration",template:'\x3c!--\n  Copyright © 2016-2024 The Thingsboard Authors\n\n  Licensed under the Apache License, Version 2.0 (the "License");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an "AS IS" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n--\x3e\n\n<div [formGroup]="gatewayConfigGroup" class="gateway-config-container">\n  <div class="content-wrapper">\n    <mat-toolbar color="primary" [class.page-header]="!dialogRef">\n      <div class="tb-flex space-between align-center">\n        <h2 translate>gateway.gateway-configuration</h2>\n        <div class="toolbar-actions">\n          <tb-toggle-select [class.dialog-toggle]="!!dialogRef" formControlName="mode" appearance="{{dialogRef ? \'stroked\' : \'fill\'}}">\n            <tb-toggle-option [value]="ConfigurationModes.BASIC">\n              {{ \'gateway.basic\' | translate }}\n            </tb-toggle-option>\n            <tb-toggle-option [value]="ConfigurationModes.ADVANCED">\n              {{ \'gateway.advanced\' | translate }}\n            </tb-toggle-option>\n          </tb-toggle-select>\n          <button *ngIf="dialogRef" mat-icon-button (click)="cancel()" type="button">\n            <mat-icon class="material-icons">close</mat-icon>\n          </button>\n        </div>\n      </div>\n    </mat-toolbar>\n    <tb-gateway-basic-configuration\n      *ngIf="gatewayConfigGroup.get(\'mode\').value === ConfigurationModes.BASIC"\n      formControlName="basicConfig"\n      [device]="device"\n      [dialogMode]="!!dialogRef"\n      (initialCredentialsUpdated)="initialCredentials = $event"\n    />\n    <tb-gateway-advanced-configuration\n      *ngIf="gatewayConfigGroup.get(\'mode\').value === ConfigurationModes.ADVANCED"\n      formControlName="advancedConfig"\n    />\n  </div>\n  <div class="actions">\n    <button mat-button color="primary"\n            type="button"\n            *ngIf="dialogRef"\n            (click)="cancel()">\n      {{ \'action.cancel\' | translate }}\n    </button>\n    <button mat-raised-button color="primary"\n            type="button"\n            [disabled]="gatewayConfigGroup.invalid || !gatewayConfigGroup.dirty"\n            (click)="saveConfig()">\n      {{ \'action.save\' | translate }}\n    </button>\n  </div>\n</div>\n',styles:['@charset "UTF-8";:host{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}:host .page-header.mat-toolbar{background:transparent;color:#000000de!important}:host .actions{grid-row:3;padding:8px 16px 8px 8px;display:flex;gap:8px;justify-content:flex-end;position:absolute;bottom:0;right:0;z-index:1;background:#fff;width:100%}:host .gateway-config-container{display:flex;flex-direction:column;height:100%;overflow:hidden}:host .content-wrapper{flex:1}:host .toolbar-actions{display:flex;align-items:center}.dialog-toggle ::ng-deep .mat-button-toggle-button{color:#ffffffbf}\n']}]}],ctorParameters:()=>[{type:me.FormBuilder},{type:X.AttributeService},{type:X.DeviceService},{type:t.ChangeDetectorRef}],propDecorators:{device:[{type:a}],dialogRef:[{type:a}]}});var Oo={gateway:{address:"Address","address-required":"Address required","add-entry":"Add configuration","add-attribute":"Add attribute","add-attribute-update":"Add attribute update","add-key":"Add key","add-timeseries":"Add time series","add-mapping":"Add mapping","add-slave":"Add Slave",arguments:"Arguments","add-rpc-method":"Add method","add-rpc-request":"Add request","add-value":"Add argument",baudrate:"Baudrate",bytesize:"Bytesize","delete-value":"Delete value","delete-rpc-method":"Delete method","delete-rpc-request":"Delete request","delete-attribute-update":"Delete attribute update",advanced:"Advanced","advanced-connection-settings":"Advanced connection settings",attributes:"Attributes","attribute-updates":"Attribute updates","attribute-filter":"Attribute filter","attribute-filter-hint":"Filter for incoming attribute name from platform, supports regular expression.","attribute-filter-required":"Attribute filter required.","attribute-name-expression":"Attribute name expression","attribute-name-expression-required":"Attribute name expression required.","attribute-name-expression-hint":"Hint for Attribute name expression",basic:"Basic","byte-order":"Byte order","word-order":"Word order",broker:{connection:"Connection to broker",name:"Broker name","name-required":"Broker name required.","security-types":{anonymous:"Anonymous",basic:"Basic",certificates:"Certificates"}},"CA-certificate-path":"Path to CA certificate file","path-to-CA-cert-required":"Path to CA certificate file is required.","change-connector-title":"Confirm connector change","change-connector-text":"Switching connectors will discard any unsaved changes. Continue?","checking-device-activity":"Checking device activity",command:"Docker commands","command-copied-message":"Docker command has been copied to clipboard",configuration:"Configuration","add-connector":"Add connector","connector-add":"Add new connector","connector-enabled":"Enable connector","connector-name":"Connector name","connector-name-required":"Connector name is required.","connector-type":"Connector type","connector-type-required":"Connector type is required.",connectors:"Connectors","connectors-config":"Connectors configuration","connectors-table-enabled":"Enabled","connectors-table-name":"Name","connectors-table-type":"Type","connectors-table-status":"Status","connectors-table-actions":"Actions","connectors-table-key":"Key","connectors-table-class":"Class","connection-timeout":"Connection timeout (s)","connect-attempt-time":"Connect attempt time (ms)","connect-attempt-count":"Connect attempt count","copy-username":"Copy username","copy-password":"Copy password","copy-client-id":"Copy client ID","connector-created":"Connector created","connector-updated":"Connector updated","rpc-command-save-template":"Save Template","rpc-command-send":"Send","rpc-command-result":"Response","rpc-command-edit-params":"Edit parameters","gateway-configuration":"General Configuration","docker-label":"Use the following instruction to run IoT Gateway in Docker compose with credentials for selected device","install-docker-compose":"Use the instructions to download, install and setup docker compose","device-info-settings":"Device info settings","device-info":{"entity-field":"Entity field",source:"Source",expression:"Value / Expression","expression-hint":"Show help",name:"Name","profile-name":"Profile name","device-name-expression":"Device name expression","device-name-expression-required":"Device name expression is required.","device-profile-expression-required":"Device profile expression is required."},"device-name-filter":"Device name filter","device-name-filter-hint":"This field supports Regular expressions to filter incoming data by device name.","device-name-filter-required":"Device name filter is required.",details:"Details","delete-mapping-title":"Delete mapping?","delete-slave-title":"Delete slave?",divider:"Divider","download-configuration-file":"Download configuration file","download-docker-compose":"Download docker-compose.yml for your gateway","enable-remote-logging":"Enable remote logging","ellipsis-chips-text":"+ {{count}} more","launch-gateway":"Launch gateway","launch-command":"Launch command","launch-docker-compose":"Start the gateway using the following command in the terminal from folder with docker-compose.yml file","logs-configuration":"Logs configuration","create-new-gateway":"Create a new gateway","create-new-gateway-text":"Are you sure you want create a new gateway with name: '{{gatewayName}}'?","created-time":"Created time","configuration-delete-dialog-header":"Configurations will be deleted","configuration-delete-dialog-body":"Turning off Remote Configuration is possible only if there is physical access to the Gateway. All previous configurations will be deleted.<br><br> \nTo turn off configuration, enter gateway name below","configuration-delete-dialog-input":"Gateway name","configuration-delete-dialog-input-required":"Gateway name is mandatory","configuration-delete-dialog-confirm":"Turn Off","connector-duplicate-name":"Connector with such name already exists.","connector-side":"Connector side","payload-type":"Payload type","platform-side":"Platform side",JSON:"JSON","JSON-hint":"Converter for this payload type processes MQTT messages in JSON format. It uses JSON Path expressions to extract vital details such as device names, device profile names, attributes, and time series from the message. And regular expressions to get device details from topics.",bytes:"Bytes","bytes-hint":"Converter for this payload type designed for binary MQTT payloads, this converter directly interprets binary data to retrieve device names and device profile names, along with attributes and time series, using specific byte positions for data extraction.",custom:"Custom","custom-hint":"This option allows you to use a custom converter for specific data tasks. You need to add your custom converter to the extension folder and enter its class name in the UI settings. Any keys you provide will be sent as configuration to your custom converter.","client-cert-path":"Path to client certificate file","path-to-client-cert-required":"Path to client certificate file is required.","client-id":"Client ID","data-conversion":"Data conversion","data-mapping":"Data mapping","data-mapping-hint":"Data mapping provides the capability to parse and convert the data received from a MQTT client in incoming messages into specific attributes and time series data keys.","opcua-data-mapping-hint":"Data mapping provides the capability to parse and convert the data received from a OPCUA server into specific data keys.",delete:"Delete configuration","delete-attribute":"Delete attribute","delete-key":"Delete key","delete-timeseries":"Delete time series",default:"Default","device-node":"Device node","device-node-required":"Device node required.","device-node-hint":"Path or identifier for device node on OPC UA server. Relative paths from it for attributes and time series can be used.","device-name":"Device name","device-profile-label":"Device profile","device-name-required":"Device name required","device-profile-required":"Device profile required","download-tip":"Download configuration file","drop-file":"Drop file here or",enable:"Enable","enable-subscription":"Enable subscription",extension:"Extension","extension-hint":"Put your converter classname in the field. Custom converter with such class should be in extension/mqtt folder.","extension-required":"Extension is required.","extension-configuration":"Extension configuration","extension-configuration-hint":"Configuration for convertor","fill-connector-defaults":"Fill configuration with default values","fill-connector-defaults-hint":"This property allows to fill connector configuration with default values on it's creation.","from-device-request-settings":"Input request parsing","from-device-request-settings-hint":"These fields support JSONPath expressions to extract a name from incoming message.","function-code":"Function code","function-codes":{"read-coils":"01 - Read Coils","read-discrete-inputs":"02 - Read Discrete Inputs","read-multiple-holding-registers":"03 - Read Multiple Holding Registers","read-input-registers":"04 - Read Input Registers","write-single-coil":"05 - Write Single Coil","write-single-holding-register":"06 - Write Single Holding Register","write-multiple-coils":"15 - Write Multiple Coils","write-multiple-holding-registers":"16 - Write Multiple Holding Registers"},"to-device-response-settings":"Output request processing","to-device-response-settings-hint":"For these fields you can use the following variables and they will be replaced with actual values: ${deviceName}, ${attributeKey}, ${attributeValue}",gateway:"Gateway","gateway-exists":"Device with same name is already exists.","gateway-name":"Gateway name","gateway-name-required":"Gateway name is required.","gateway-saved":"Gateway configuration successfully saved.","generate-client-id":"Generate Client ID",grpc:"GRPC","grpc-keep-alive-timeout":"Keep alive timeout (in ms)","grpc-keep-alive-timeout-required":"Keep alive timeout is required","grpc-keep-alive-timeout-min":"Keep alive timeout can not be less then 1","grpc-keep-alive-timeout-pattern":"Keep alive timeout is not valid","grpc-keep-alive":"Keep alive (in ms)","grpc-keep-alive-required":"Keep alive is required","grpc-keep-alive-min":"Keep alive can not be less then 1","grpc-keep-alive-pattern":"Keep alive is not valid","grpc-min-time-between-pings":"Min time between pings (in ms)","grpc-min-time-between-pings-required":"Min time between pings is required","grpc-min-time-between-pings-min":"Min time between pings can not be less then 1","grpc-min-time-between-pings-pattern":"Min time between pings is not valid","grpc-min-ping-interval-without-data":"Min ping interval without data (in ms)","grpc-min-ping-interval-without-data-required":"Min ping interval without data is required","grpc-min-ping-interval-without-data-min":"Min ping interval without data can not be less then 1","grpc-min-ping-interval-without-data-pattern":"Min ping interval without data is not valid","grpc-max-pings-without-data":"Max pings without data","grpc-max-pings-without-data-required":"Max pings without data is required","grpc-max-pings-without-data-min":"Max pings without data can not be less then 1","grpc-max-pings-without-data-pattern":"Max pings without data is not valid",info:"Info",identity:"Identity","inactivity-check-period-seconds":"Inactivity check period (in sec)","inactivity-check-period-seconds-required":"Inactivity check period is required","inactivity-check-period-seconds-min":"Inactivity check period can not be less then 1","inactivity-check-period-seconds-pattern":"Inactivity check period is not valid","inactivity-timeout-seconds":"Inactivity timeout (in sec)","inactivity-timeout-seconds-required":"Inactivity timeout is required","inactivity-timeout-seconds-min":"Inactivity timeout can not be less then 1","inactivity-timeout-seconds-pattern":"Inactivity timeout is not valid","unit-id":"Unit ID",host:"Host","host-required":"Host is required.",holding_registers:"Holding registers",coils_initializer:"Coils initializer",input_registers:"Input registers",discrete_inputs:"Discrete inputs","json-parse":"Not valid JSON.","json-required":"Field cannot be empty.","JSONPath-hint":"This field supports constants and JSONPath expressions.",logs:{logs:"Logs",days:"days",hours:"hours",minutes:"minutes",seconds:"seconds","date-format":"Date format","date-format-required":"Date format required","log-format":"Log format","log-type":"Log type","log-format-required":"Log format required",remote:"Remote logging","remote-logs":"Remote logs",local:"Local logging",level:"Log level","file-path":"File path","file-path-required":"File path required","saving-period":"Log saving period","saving-period-min":"Log saving period can not be less then 1","saving-period-required":"Log saving period required","backup-count":"Backup count","backup-count-min":"Backup count can not be less then 1","backup-count-required":"Backup count required"},"max-number-of-workers":"Max number of workers","max-number-of-workers-hint":"Maximal number of workers threads for converters \n(The amount of workers changes dynamically, depending on load) \nRecommended amount 50-150.","max-number-of-workers-required":"Max number of workers is required.","max-messages-queue-for-worker":"Max messages queue per worker","max-messages-queue-for-worker-hint":"Maximal messages count that will be in the queue \nfor each converter worker.","max-messages-queue-for-worker-required":"Max messages queue per worker is required.",method:"Method","method-name":"Method name","method-required":"Method name is required.","min-pack-send-delay":"Min pack send delay (in ms)","min-pack-send-delay-required":"Min pack send delay is required","min-pack-send-delay-min":"Min pack send delay can not be less then 10","min-pack-send-delay-pattern":"Min pack send delay is not valid",multiplier:"Multiplier",mode:"Mode","model-name":"Model name",modifier:"Modifier","modifier-invalid":"Modifier is not valid","mqtt-version":"MQTT version",name:"Name","name-required":"Name is required.","no-attributes":"No attributes","no-attribute-updates":"No attribute updates","no-connectors":"No connectors","no-data":"No configurations","no-gateway-found":"No gateway found.","no-gateway-matching":" '{{item}}' not found.","no-timeseries":"No time series","no-keys":"No keys","no-value":"No arguments","no-rpc-methods":"No RPC methods","no-rpc-requests":"No RPC requests","path-hint":"The path is local to the gateway file system","path-logs":"Path to log files","path-logs-required":"Path is required.",password:"Password","password-required":"Password is required.","permit-without-calls":"Keep alive permit without calls","poll-period":"Poll period (ms)","poll-period-error":"Poll period should be at least {{min}} (ms).",port:"Port","port-required":"Port is required.","port-limits-error":"Port should be number from {{min}} to {{max}}.","private-key-path":"Path to private key file","path-to-private-key-required":"Path to private key file is required.",parity:"Parity","product-code":"Product code","product-name":"Product name",raw:"Raw",retain:"Retain","retain-hint":"This flag tells the broker to store the message for a topic\nand ensures any new client subscribing to that topic\nwill receive the stored message.",remote:"Remote configuration","remote-logging-level":"Logging level","remove-entry":"Remove configuration","remote-shell":"Remote shell","remote-configuration":"Remote Configuration",retries:"Retries","retries-on-empty":"Retries on empty","retries-on-invalid":"Retries on invalid",rpc:{title:"{{type}} Connector RPC parameters","templates-title":"Connector RPC Templates",methodFilter:"Method filter","method-name":"Method name",requestTopicExpression:"Request topic expression",responseTopicExpression:"Response topic expression",responseTimeout:"Response timeout",valueExpression:"Value expression",tag:"Tag",type:"Type",functionCode:"Function Code",objectsCount:"Objects Count",address:"Address",method:"Method",requestType:"Request Type",requestTimeout:"Request Timeout",objectType:"Object type",identifier:"Identifier",propertyId:"Property ID",methodRPC:"Method RPC name",withResponse:"With Response",characteristicUUID:"Characteristic UUID",methodProcessing:"Method Processing",nodeID:"Node ID",isExtendedID:"Is Extended ID",isFD:"Is FD",bitrateSwitch:"Bitrate Switch",dataInHEX:"Data In HEX",dataLength:"Data Length",dataByteorder:"Data Byte Order",dataBefore:"Data Before",dataAfter:"Data After",dataExpression:"Data Expression",encoding:"Encoding",oid:"OID","add-oid":"Add OID","add-header":"Add header","add-security":"Add security",remove:"Remove",requestFilter:"Request Filter",requestUrlExpression:"Request URL Expression",httpMethod:"HTTP Method",timeout:"Timeout",tries:"Tries",httpHeaders:"HTTP Headers","header-name":"Header name",hint:{"modbus-response-reading":"RPC response will return all subtracted values from all connected devices when the reading functions are selected.","modbus-writing-functions":"RPC will write a filled value to all connected devices when the writing functions are selected.","opc-method":"A filled method name is the OPC-UA method that will processed on the server side (make sure your node has the requested method)."},"security-name":"Security name",value:"Value",security:"Security",responseValueExpression:"Response Value Expression",requestValueExpression:"Request Value Expression",arguments:"Arguments","add-argument":"Add argument","write-property":"Write property","read-property":"Read property","analog-output":"Analog output","analog-input":"Analog input","binary-output":"Binary output","binary-input":"Binary input","binary-value":"Binary value","analog-value":"Analog value",write:"Write",read:"Read",scan:"Scan",oids:"OIDS",set:"Set",multiset:"Multiset",get:"Get","bulk-walk":"Bulk walk",table:"Table","multi-get":"Multiget","get-next":"Get next","bulk-get":"Bulk get",walk:"Walk","save-template":"Save template","template-name":"Template name","template-name-required":"Template name is required.","template-name-duplicate":"Template with such name already exists, it will be updated.",command:"Command",params:"Params","json-value-invalid":"JSON value has an invalid format"},"rpc-methods":"RPC methods","rpc-requests":"RPC requests",request:{"connect-request":"Connect request","disconnect-request":"Disconnect request","attribute-request":"Attribute request","attribute-update":"Attribute update","rpc-connection":"RPC command"},"request-type":"Request type","requests-mapping":"Requests mapping","requests-mapping-hint":"MQTT Connector requests allows you to connect, disconnect, process attribute requests from the device, handle attribute updates on the server and RPC processing configuration.","request-topic-expression":"Request topic expression","request-client-certificate":"Request client certificate","request-topic-expression-required":"Request topic expression is required.","response-timeout":"Response timeout (ms)","response-timeout-required":"Response timeout is required.","response-timeout-limits-error":"Timeout must be more then {{min}} ms.","response-topic-Qos":"Response topic QoS","response-topic-Qos-hint":"MQTT Quality of Service (QoS) is an agreement between the message sender and receiver that defines the level of delivery guarantee for a specific message.","response-topic-expression":"Response topic expression","response-topic-expression-required":"Response topic expression is required.","response-value-expression":"Response value expression","response-value-expression-required":"Response value expression is required.","vendor-name":"Vendor name","vendor-url":"Vendor URL",value:"Value",values:"Values","value-required":"Value is required.","value-expression":"Value expression","value-expression-required":"Value expression is required.","with-response":"With response","without-response":"Without response",other:"Other","save-tip":"Save configuration file","scan-period":"Scan period (ms)","scan-period-error":"Scan period should be at least {{min}} (ms).","sub-check-period":"Subscription check period (ms)","sub-check-period-error":"Subscription check period should be at least {{min}} (ms).","security-label":"Security","security-policy":"Security policy","security-type":"Security type","security-types":{"access-token":"Access Token","username-password":"Username and Password",tls:"TLS","tls-access-token":"TLS + Access Token","tls-private-key":"TLS + Private Key"},"select-connector":"Select connector to display config","send-change-data":"Send data only on change","send-data-to-platform":"Send data to platform","send-data-on-change":"Send data only on change","send-change-data-hint":"The values will be saved to the database only if they are different from the corresponding values in the previous converted message. This functionality applies to both attributes and time series in the converter output.",server:"Server","server-hostname":"Server hostname","server-slave":"Server (Slave)","servers-slaves":"Servers (Slaves)","server-port":"Server port","server-url":"Server endpoint url","server-connection":"Server Connection","server-config":"Server configuration","server-slave-config":"Server (Slave) configuration","server-url-required":"Server endpoint url is required.",stopbits:"Stopbits",strict:"Strict",set:"Set","show-map":"Show map",statistics:{statistic:"Statistic",statistics:"Statistics","statistic-commands-empty":'No configured statistic keys found. You can configure them in "Statistics" tab in general configuration.',"statistics-button":"Go to configuration",commands:"Commands","send-period":"Statistic send period (in sec)","send-period-required":"Statistic send period is required","send-period-min":"Statistic send period can not be less then 60","send-period-pattern":"Statistic send period is not valid","check-connectors-configuration":"Check connectors configuration (in sec)","max-payload-size-bytes":"Max payload size in bytes","max-payload-size-bytes-required":"Max payload size in bytes is required","max-payload-size-bytes-min":"Max payload size in bytes can not be less then 100","max-payload-size-bytes-pattern":"Max payload size in bytes is not valid","min-pack-size-to-send":"Min packet size to send","min-pack-size-to-send-required":"Min packet size to send is required","min-pack-size-to-send-min":"Min packet size to send can not be less then 100","min-pack-size-to-send-pattern":"Min packet size to send is not valid","check-connectors-configuration-required":"Check connectors configuration is required","check-connectors-configuration-min":"Check connectors configuration can not be less then 1","check-connectors-configuration-pattern":"Check connectors configuration is not valid",add:"Add command",timeout:"Timeout (in sec)","timeout-ms":"Timeout (in ms)","timeout-required":"Timeout is required","timeout-min":"Timeout can not be less then 1","timeout-pattern":"Timeout is not valid","attribute-name":"Attribute name","attribute-name-required":"Attribute name is required",command:"Command","command-required":"Command is required","command-pattern":"Command is not valid",remove:"Remove command"},storage:"Storage","storage-max-file-records":"Maximum records in file","storage-max-files":"Maximum number of files","storage-max-files-min":"Minimum number is 1.","storage-max-files-pattern":"Number is not valid.","storage-max-files-required":"Number is required.","storage-max-records":"Maximum records in storage","storage-max-records-min":"Minimum number of records is 1.","storage-max-records-pattern":"Number is not valid.","storage-max-records-required":"Maximum records is required.","storage-read-record-count":"Read record count in storage","storage-read-record-count-min":"Minimum number of records is 1.","storage-read-record-count-pattern":"Number is not valid.","storage-read-record-count-required":"Read record count is required.","storage-max-read-record-count":"Max read record count in storage","storage-max-read-record-count-min":"Minimum number of records is 1.","storage-max-read-record-count-pattern":"Number is not valid.","storage-max-read-record-count-required":"Max Read record count is required.","storage-data-folder-path":"Data folder path","storage-data-folder-path-required":"Data folder path is required.","storage-pack-size":"Maximum event pack size","storage-pack-size-min":"Minimum number is 1.","storage-pack-size-pattern":"Number is not valid.","storage-pack-size-required":"Maximum event pack size is required.","storage-path":"Storage path","storage-path-required":"Storage path is required.","storage-type":"Storage type","storage-types":{"file-storage":"File storage","memory-storage":"Memory storage",sqlite:"SQLITE"},"report-strategy":{label:"Report strategy","on-change":"On value change","on-report-period":"On report period","on-change-or-report-period":"On value change or report period","report-period":"Report period"},"source-type":{msg:"Extract from message",topic:"Extract from topic",const:"Constant",identifier:"Identifier",path:"Path"},"workers-settings":"Workers settings",thingsboard:"ThingsBoard",general:"General",timeseries:"Time series",key:"Key",keys:"Keys","key-required":"Key is required.","thingsboard-host":"Platform host","thingsboard-host-required":"Host is required.","thingsboard-port":"Platform port","thingsboard-port-max":"Maximum port number is 65535.","thingsboard-port-min":"Minimum port number is 1.","thingsboard-port-pattern":"Port is not valid.","thingsboard-port-required":"Port is required.",tidy:"Tidy","tidy-tip":"Tidy config JSON",timeout:"Timeout (ms)","timeout-error":"Timeout should be at least {{min}} (ms).","title-connectors-json":"Connector {{typeName}} configuration",type:"Type","topic-filter":"Topic filter","topic-required":"Topic filter is required.","tls-path-ca-certificate":"Path to CA certificate on gateway","tls-path-client-certificate":"Path to client certificate on gateway","tls-connection":"TLS Connection","master-connections":"Master Connections","method-filter":"Method filter","method-filter-hint":"Regular expression to filter incoming RPC method from platform.","method-filter-required":"Method filter is required.","messages-ttl-check-in-hours":"Messages TTL check in hours","messages-ttl-check-in-hours-required":"Messages TTL check in hours is required.","messages-ttl-check-in-hours-min":"Min number is 1.","messages-ttl-check-in-hours-pattern":"Number is not valid.","messages-ttl-in-days":"Messages TTL in days","messages-ttl-in-days-required":"Messages TTL in days is required.","messages-ttl-in-days-min":"Min number is 1.","messages-ttl-in-days-pattern":"Number is not valid.","mqtt-qos":"QoS","mqtt-qos-required":"QoS is required","mqtt-qos-range":"QoS values range is from 0 to 1",qos:{"at-most-once":"0 - At most once","at-least-once":"1 - At least once","exactly-once":"2 - Exactly once"},"objects-count":"Objects count","objects-count-required":"Objects count is required","wait-after-failed-attempts":"Wait after failed attempts (ms)","tls-path-private-key":"Path to private key on gateway","toggle-fullscreen":"Toggle fullscreen","transformer-json-config":"Configuration JSON*","update-config":"Add/update configuration JSON",username:"Username","username-required":"Username is required.","unit-id-required":"Unit ID is required.","write-coil":"Write Coil","write-coils":"Write Coils","write-register":"Write Register","write-registers":"Write Registers",hints:{"modbus-master":"Configuration sections for connecting to Modbus servers and reading data from them.","modbus-server":"Configuration section for the Modbus server, storing data and sending updates to the platform when changes occur or at fixed intervals.","remote-configuration":"Enables remote configuration and management of the gateway","remote-shell":"Enables remote control of the operating system with the gateway from the Remote Shell widget",host:"Hostname or IP address of platform server",port:"Port of MQTT service on platform server",token:"Access token for the gateway from platform server","client-id":"MQTT client id for the gateway form platform server",username:"MQTT username for the gateway form platform server",password:"MQTT password for the gateway form platform server","ca-cert":"Path to CA certificate file","date-form":"Date format in log message","data-folder":"Path to the folder that will contain data (Relative or Absolute)","log-format":"Log message format","remote-log":"Enables remote logging and logs reading from the gateway","backup-count":"If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",storage:"Provides configuration for saving incoming data before it is sent to the platform","max-file-count":"Maximum number of files that will be created","max-read-count":"Number of messages to retrieve from the storage and send to platform","max-records":"Maximum count of records that will be stored in one file","read-record-count":"Number of messages to retrieve from the storage and send to platform","max-records-count":"Maximum number of data entries in storage before sending to platform","ttl-check-hour":"How often will the Gateway check data for obsolescence","ttl-messages-day":"Maximum number of days that the storage will retain data",commands:"Commands for collecting additional statistic",attribute:"Statistic telemetry key",timeout:"Timeout for command executing",command:"The result of the command execution, will be used as the value for telemetry","check-device-activity":"Enables monitor the activity of each connected device","inactivity-timeout":"Time after whose the gateway will disconnect device","inactivity-period":"Periodicity of device activity check","minimal-pack-delay":"Delay between sending packs of messages (Decreasing this setting results in increased CPU usage)",qos:"Quality of Service in MQTT messaging (0 - at most once, 1 - at least once)","server-port":"Network port on which GRPC server will listen for incoming connections.","grpc-keep-alive-timeout":"Maximum time the server should wait for a keepalive ping response before considering the connection dead.","grpc-keep-alive":"Duration between two successive keepalive ping messages when there is no active RPC call.","grpc-min-time-between-pings":"Minimum amount of time the server should wait between sending keepalive ping messages","grpc-max-pings-without-data":"Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.","grpc-min-ping-interval-without-data":"Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.","permit-without-calls":"Allow server to keep the GRPC connection alive even when there are no active RPC calls.","path-in-os":"Path in gateway os.",memory:"Your data will be stored in the in-memory queue, it is a fastest but no persistence guarantee.",file:"Your data will be stored in separated files and will be saved even after the gateway restart.",sqlite:"Your data will be stored in file based database. And will be saved even after the gateway restart.","opc-timeout":"Timeout in milliseconds for connecting to OPC-UA server.","security-policy":"Security Policy defines the security mechanisms to be applied.","scan-period":"Period in milliseconds to rescan the server.","sub-check-period":"Period to check the subscriptions in the OPC-UA server.","enable-subscription":"If true - the gateway will subscribe to interesting nodes and wait for data update and if false - the gateway will rescan OPC-UA server every scanPeriodInMillis.","show-map":"Show nodes on scanning.","method-name":"Name of method on OPC-UA server.",arguments:"Arguments for the method (will be overwritten by arguments from the RPC request).","min-pack-size-to-send":"Minimum package size for sending.","max-payload-size-bytes":"Maximum package size in bytes","poll-period":"Period in milliseconds to read data from nodes.",modbus:{"framer-type":"Type of a framer (Socket, RTU, or ASCII), if needed.",host:"Hostname or IP address of Modbus server.",port:"Modbus server port for connection.","unit-id":"Modbus slave ID.","connection-timeout":"Connection timeout (in seconds) for the Modbus server.","byte-order":"Byte order for reading data.","word-order":"Word order when reading multiple registers.",retries:"Retrying data transmission to the master. Acceptable values: true or false.","retries-on-empty":"Retry sending data to the master if the data is empty.","retries-on-invalid":"Retry sending data to the master if it fails.","poll-period":"Period in milliseconds to check attributes and telemetry on the slave.","connect-attempt-time":"A waiting period in milliseconds before establishing a connection to the master.","connect-attempt-count":"The number of connection attempts made through the gateway.","wait-after-failed-attempts":"A waiting period in milliseconds before attempting to send data to the master.","serial-port":"Serial port for connection.",baudrate:"Baud rate for the serial device.",stopbits:"The number of stop bits sent after each character in a message to indicate the end of the byte.",bytesize:"The number of bits in a byte of serial data. This can be one of 5, 6, 7, or 8.",parity:"The type of checksum used to verify data integrity. Options: (E)ven, (O)dd, (N)one.",strict:"Use inter-character timeout for baudrates ≤ 19200.","objects-count":"Depends on the selected type.",address:"Register address to verify.",key:"Key to be used as the attribute key for the platform instance.","data-keys":"For more information about function codes and data types click on help icon",modifier:"The retrieved value will be adjusted (by multiplying or dividing it) based on the specified modifier value."}}}},Ro={"add-entry":"إضافة تكوين",advanced:"متقدم","checking-device-activity":"فحص نشاط الجهاز",command:"أوامر Docker","command-copied-message":"تم نسخ أمر Docker إلى الحافظة",configuration:"التكوين","connector-add":"إضافة موصل جديد","connector-enabled":"تمكين الموصل","connector-name":"اسم الموصل","connector-name-required":"اسم الموصل مطلوب.","connector-type":"نوع الموصل","connector-type-required":"نوع الموصل مطلوب.",connectors:"الموصلات","connectors-config":"تكوينات الموصلات","connectors-table-enabled":"ممكّن","connectors-table-name":"الاسم","connectors-table-type":"النوع","connectors-table-status":"الحالة","connectors-table-actions":"الإجراءات","connectors-table-key":"المفتاح","connectors-table-class":"الفئة","rpc-command-send":"إرسال","rpc-command-result":"الاستجابة","rpc-command-edit-params":"تحرير المعلمات","gateway-configuration":"تكوين عام","docker-label":"استخدم التعليمات التالية لتشغيل IoT Gateway في Docker compose مع بيانات اعتماد للجهاز المحدد","install-docker-compose":"استخدم التعليمات لتنزيل وتثبيت وإعداد docker compose","download-configuration-file":"تنزيل ملف التكوين","download-docker-compose":"تنزيل docker-compose.yml لبوابتك","launch-gateway":"تشغيل البوابة","launch-docker-compose":"بدء تشغيل البوابة باستخدام الأمر التالي في الطرفية من المجلد الذي يحتوي على ملف docker-compose.yml","create-new-gateway":"إنشاء بوابة جديدة","create-new-gateway-text":"هل أنت متأكد أنك تريد إنشاء بوابة جديدة باسم: '{{gatewayName}}'؟","created-time":"وقت الإنشاء","configuration-delete-dialog-header":"سيتم حذف التكوينات","configuration-delete-dialog-body":"يمكن تعطيل التكوين عن بُعد فقط إذا كان هناك وصول جسدي إلى البوابة. ستتم حذف جميع التكوينات السابقة.<br><br> \n لتعطيل التكوين، أدخل اسم البوابة أدناه","configuration-delete-dialog-input":"اسم البوابة","configuration-delete-dialog-input-required":"اسم البوابة إلزامي","configuration-delete-dialog-confirm":"إيقاف التشغيل",delete:"حذف التكوين","download-tip":"تنزيل ملف التكوين","drop-file":"أفلق الملف هنا أو",gateway:"البوابة","gateway-exists":"الجهاز بنفس الاسم موجود بالفعل.","gateway-name":"اسم البوابة","gateway-name-required":"اسم البوابة مطلوب.","gateway-saved":"تم حفظ تكوين البوابة بنجاح.",grpc:"GRPC","grpc-keep-alive-timeout":"مهلة البقاء على قيد الحياة (بالمللي ثانية)","grpc-keep-alive-timeout-required":"مهلة البقاء على قيد الحياة مطلوبة","grpc-keep-alive-timeout-min":"مهلة البقاء على قيد الحياة لا يمكن أن تكون أقل من 1","grpc-keep-alive-timeout-pattern":"مهلة البقاء على قيد الحياة غير صالحة","grpc-keep-alive":"البقاء على قيد الحياة (بالمللي ثانية)","grpc-keep-alive-required":"البقاء على قيد الحياة مطلوب","grpc-keep-alive-min":"البقاء على قيد الحياة لا يمكن أن يكون أقل من 1","grpc-keep-alive-pattern":"البقاء على قيد الحياة غير صالح","grpc-min-time-between-pings":"الحد الأدنى للوقت بين البينغات (بالمللي ثانية)","grpc-min-time-between-pings-required":"الحد الأدنى للوقت بين البينغات مطلوب","grpc-min-time-between-pings-min":"الحد الأدنى للوقت بين البينغات لا يمكن أن يكون أقل من 1","grpc-min-time-between-pings-pattern":"الحد الأدنى للوقت بين البينغات غير صالح","grpc-min-ping-interval-without-data":"الحد الأدنى لفاصل البينغ بدون بيانات (بالمللي ثانية)","grpc-min-ping-interval-without-data-required":"الحد الأدنى لفاصل البينغ بدون بيانات مطلوب","grpc-min-ping-interval-without-data-min":"الحد الأدنى لفاصل البينغ بدون بيانات لا يمكن أن يكون أقل من 1","grpc-min-ping-interval-without-data-pattern":"الحد الأدنى لفاصل البينغ بدون بيانات غير صالح","grpc-max-pings-without-data":"الحد الأقصى لعدد البينغات بدون بيانات","grpc-max-pings-without-data-required":"الحد الأقصى لعدد البينغات بدون بيانات مطلوب","grpc-max-pings-without-data-min":"الحد الأقصى لعدد البينغات بدون بيانات لا يمكن أن يكون أقل من 1","grpc-max-pings-without-data-pattern":"الحد الأقصى لعدد البينغات بدون بيانات غير صالح","inactivity-check-period-seconds":"فترة فحص الخمول (بالثواني)","inactivity-check-period-seconds-required":"فترة فحص الخمول مطلوبة","inactivity-check-period-seconds-min":"فترة فحص الخمول لا يمكن أن تكون أقل من 1","inactivity-check-period-seconds-pattern":"فترة فحص الخمول غير صالحة","inactivity-timeout-seconds":"فترة الخمول (بالثواني)","inactivity-timeout-seconds-required":"فترة الخمول مطلوبة","inactivity-timeout-seconds-min":"فترة الخمول لا يمكن أن تكون أقل من 1","inactivity-timeout-seconds-pattern":"فترة الخمول غير صالحة","json-parse":"JSON غير صالح.","json-required":"الحقل لا يمكن أن يكون فارغًا.",logs:{logs:"السجلات",days:"أيام",hours:"ساعات",minutes:"دقائق",seconds:"ثواني","date-format":"تنسيق التاريخ","date-format-required":"تنسيق التاريخ مطلوب","log-format":"تنسيق السجل","log-type":"نوع السجل","log-format-required":"تنسيق السجل مطلوب",remote:"التسجيل عن بُعد","remote-logs":"السجلات عن بُعد",local:"التسجيل المحلي",level:"مستوى السجل","file-path":"مسار الملف","file-path-required":"مسار الملف مطلوب","saving-period":"فترة حفظ السجل","saving-period-min":"فترة حفظ السجل لا يمكن أن تكون أقل من 1","saving-period-required":"فترة حفظ السجل مطلوبة","backup-count":"عدد النسخ الاحتياطية","backup-count-min":"عدد النسخ الاحتياطية لا يمكن أن يكون أقل من 1","backup-count-required":"عدد النسخ الاحتياطية مطلوب"},"min-pack-send-delay":"الحد الأدنى لتأخير إرسال الحزمة (بالمللي ثانية)","min-pack-send-delay-required":"الحد الأدنى لتأخير إرسال الحزمة مطلوب","min-pack-send-delay-min":"لا يمكن أن يكون الحد الأدنى لتأخير إرسال الحزمة أقل من 0","no-connectors":"لا توجد موصلات","no-data":"لا توجد تكوينات","no-gateway-found":"لم يتم العثور على بوابة.","no-gateway-matching":"'{{item}}' غير موجود.","path-logs":"مسار إلى ملفات السجل","path-logs-required":"المسار مطلوب.","permit-without-calls":"البقاء على الحياة يسمح بدون مكالمات",remote:"التكوين عن بُعد","remote-logging-level":"مستوى التسجيل","remove-entry":"إزالة التكوين","remote-shell":"قشرة عن بُعد","remote-configuration":"التكوين عن بُعد",other:"آخر","save-tip":"حفظ ملف التكوين","security-type":"نوع الأمان","security-types":{"access-token":"رمز الوصول","username-password":"اسم المستخدم وكلمة المرور",tls:"TLS","tls-access-token":"TLS + رمز الوصول","tls-private-key":"TLS + المفتاح الخاص"},"server-port":"منفذ الخادم",statistics:{statistic:"إحصائية",statistics:"الإحصائيات","statistic-commands-empty":"لا تتوفر إحصائيات",commands:"الأوامر","send-period":"فترة إرسال الإحصائيات (بالثواني)","send-period-required":"فترة إرسال الإحصائيات مطلوبة","send-period-min":"لا يمكن أن تكون فترة إرسال الإحصائيات أقل من 60","send-period-pattern":"فترة إرسال الإحصائيات غير صالحة","check-connectors-configuration":"فترة فحص تكوين الموصلات (بالثواني)","check-connectors-configuration-required":"فترة فحص تكوين الموصلات مطلوبة","check-connectors-configuration-min":"لا يمكن أن تكون فترة فحص تكوين الموصلات أقل من 1","check-connectors-configuration-pattern":"فترة فحص تكوين الموصلات غير صالحة",add:"إضافة أمر",timeout:"المهلة","timeout-ms":"المهلة (بالمللي ثانية)","timeout-required":"المهلة مطلوبة","timeout-min":"لا يمكن أن تكون المهلة أقل من 1","timeout-pattern":"المهلة غير صالحة","attribute-name":"اسم السمة","attribute-name-required":"اسم السمة مطلوب",command:"الأمر","command-required":"الأمر مطلوب","command-pattern":"الأمر غير صالح",remove:"إزالة الأمر"},storage:"التخزين","storage-max-file-records":"السجلات القصوى في الملف","storage-max-files":"الحد الأقصى لعدد الملفات","storage-max-files-min":"الحد الأدنى هو 1.","storage-max-files-pattern":"العدد غير صالح.","storage-max-files-required":"العدد مطلوب.","storage-max-records":"السجلات القصوى في التخزين","storage-max-records-min":"الحد الأدنى لعدد السجلات هو 1.","storage-max-records-pattern":"العدد غير صالح.","storage-max-records-required":"السجلات القصوى مطلوبة.","storage-read-record-count":"عدد قراءة السجلات في التخزين","storage-read-record-count-min":"الحد الأدنى لعدد السجلات هو 1.","storage-read-record-count-pattern":"العدد غير صالح.","storage-read-record-count-required":"عدد قراءة السجلات مطلوب.","storage-max-read-record-count":"الحد الأقصى لعدد قراءة السجلات في التخزين","storage-max-read-record-count-min":"الحد الأدنى لعدد السجلات هو 1.","storage-max-read-record-count-pattern":"العدد غير صالح.","storage-max-read-record-count-required":"عدد القراءة القصوى مطلوب.","storage-data-folder-path":"مسار مجلد البيانات","storage-data-folder-path-required":"مسار مجلد البيانات مطلوب.","storage-pack-size":"الحد الأقصى لحجم حزمة الحدث","storage-pack-size-min":"الحد الأدنى هو 1.","storage-pack-size-pattern":"العدد غير صالح.","storage-pack-size-required":"الحجم الأقصى لحزمة الحدث مطلوب.","storage-path":"مسار التخزين","storage-path-required":"مسار التخزين مطلوب.","storage-type":"نوع التخزين","storage-types":{"file-storage":"تخزين الملفات","memory-storage":"تخزين الذاكرة",sqlite:"SQLITE"},thingsboard:"ثينغزبورد",general:"عام","thingsboard-host":"مضيف ثينغزبورد","thingsboard-host-required":"المضيف مطلوب.","thingsboard-port":"منفذ ثينغزبورد","thingsboard-port-max":"الحد الأقصى لرقم المنفذ هو 65535.","thingsboard-port-min":"الحد الأدنى لرقم المنفذ هو 1.","thingsboard-port-pattern":"المنفذ غير صالح.","thingsboard-port-required":"المنفذ مطلوب.",tidy:"ترتيب","tidy-tip":"ترتيب تكوين JSON","title-connectors-json":"تكوين موصل {{typeName}}","tls-path-ca-certificate":"المسار إلى شهادة CA على البوابة","tls-path-client-certificate":"المسار إلى شهادة العميل على البوابة","messages-ttl-check-in-hours":"فحص TTL الرسائل بالساعات","messages-ttl-check-in-hours-required":"يجب تحديد فحص TTL الرسائل بالساعات.","messages-ttl-check-in-hours-min":"الحد الأدنى هو 1.","messages-ttl-check-in-hours-pattern":"الرقم غير صالح.","messages-ttl-in-days":"TTL الرسائل بالأيام","messages-ttl-in-days-required":"يجب تحديد TTL الرسائل بالأيام.","messages-ttl-in-days-min":"الحد الأدنى هو 1.","messages-ttl-in-days-pattern":"الرقم غير صالح.","mqtt-qos":"جودة الخدمة (QoS)","mqtt-qos-required":"جودة الخدمة (QoS) مطلوبة","mqtt-qos-range":"تتراوح قيم جودة الخدمة (QoS) من 0 إلى 1","tls-path-private-key":"المسار إلى المفتاح الخاص على البوابة","toggle-fullscreen":"تبديل وضع ملء الشاشة","transformer-json-config":"تكوين JSON*","update-config":"إضافة/تحديث تكوين JSON",hints:{"remote-configuration":"يمكنك تمكين التكوين وإدارة البوابة عن بُعد","remote-shell":"يمكنك تمكين التحكم البعيد في نظام التشغيل مع البوابة من عنصر واجهة المستخدم قشرة عن بُعد",host:"اسم المضيف أو عنوان IP لخادم ثينغزبورد",port:"منفذ خدمة MQTT على خادم ثينغزبورد",token:"رمز الوصول للبوابة من خادم ثينغزبورد","client-id":"معرف عميل MQTT للبوابة من خادم ثينغزبورد",username:"اسم المستخدم MQTT للبوابة من خادم ثينغزبورد",password:"كلمة المرور MQTT للبوابة من خادم ثينغزبورد","ca-cert":"المسار إلى ملف شهادة CA","date-form":"تنسيق التاريخ في رسالة السجل","data-folder":"المسار إلى المجلد الذي سيحتوي على البيانات (نسبي أو مطلق)","log-format":"تنسيق رسالة السجل","remote-log":"يمكنك تمكين التسجيل البعيد وقراءة السجلات من البوابة","backup-count":"إذا كان عدد النسخ الاحتياطية > 0، عند عملية تدوير، لا يتم الاحتفاظ بأكثر من عدد النسخ الاحتياطية المحددة - يتم حذف الأقدم",storage:"يوفر تكوينًا لحفظ البيانات الواردة قبل إرسالها إلى المنصة","max-file-count":"العدد الأقصى لعدد الملفات التي سيتم إنشاؤها","max-read-count":"عدد الرسائل للحصول عليها من التخزين وإرسالها إلى ثينغزبورد","max-records":"العدد الأقصى للسجلات التي ستخزن في ملف واحد","read-record-count":"عدد الرسائل للحصول عليها من التخزين وإرسالها إلى ثينغزبورد","max-records-count":"العدد الأقصى للبيانات في التخزين قبل إرسالها إلى ثينغزبورد","ttl-check-hour":"كم مرة سيتحقق البوابة من البيانات القديمة","ttl-messages-day":"الحد الأقصى لعدد الأيام التي ستحتفظ فيها التخزين بالبيانات",commands:"الأوامر لجمع الإحصائيات الإضافية",attribute:"مفتاح تلقي الإحصائيات",timeout:"مهلة زمنية لتنفيذ الأمر",command:"سيتم استخدام نتيجة تنفيذ الأمر كقيمة لتلقي الإحصائيات","check-device-activity":"يمكنك تمكين مراقبة نشاط كل جهاز متصل","inactivity-timeout":"الوقت بعد الذي ستفصل البوابة الجهاز","inactivity-period":"تكرار فحص نشاط الجهاز","minimal-pack-delay":"التأخير بين إرسال حزم الرسائل (يؤدي تقليل هذا الإعداد إلى زيادة استخدام وحدة المعالجة المركزية)",qos:"جودة الخدمة في رسائل MQTT (0 - على الأكثر مرة واحدة، 1 - على الأقل مرة واحدة)","server-port":"منفذ الشبكة الذي سيستمع فيه خادم GRPC للاستفسارات الواردة.","grpc-keep-alive-timeout":"الحد الأقصى للوقت الذي يجب أن ينتظره الخادم لاستجابة رسالة الحفاظ على الاتصال قبل اعتبار الاتصال ميتًا.","grpc-keep-alive":"المدة بين رسائل حفظ الاتصال المتعاقبة عند عدم وجود استدعاء RPC نشط.","grpc-min-time-between-pings":"الحد الأدنى للوقت الذي يجب فيه أن ينتظر الخادم بين إرسال رسائل حفظ الاتصال","grpc-max-pings-without-data":"الحد الأقصى لعدد رسائل حفظ الاتصال التي يمكن للخادم إرسالها دون تلقي أي بيانات قبل اعتبار الاتصال ميتًا.","grpc-min-ping-interval-without-data":"الحد الأدنى للوقت الذي يجب فيه أن ينتظر الخادم بين إرسال رسائل حفظ الاتصال عند عدم إرسال أو استلام بيانات.","permit-without-calls":"السماح للخادم بإبقاء اتصال GRPC حيًا حتى عندما لا تكون هناك استدعاءات RPC نشطة."}},Vo={"add-entry":"Afegir configuració","connector-add":"Afegir conector","connector-enabled":"Activar conector","connector-name":"Nom conector","connector-name-required":"Cal nom conector.","connector-type":"Tipus conector","connector-type-required":"Cal tipus conector.",connectors:"Configuració de conectors","create-new-gateway":"Crear un gateway nou","create-new-gateway-text":"Crear un nou gateway amb el nom: '{{gatewayName}}'?",delete:"Esborrar configuració","download-tip":"Descarregar fitxer de configuració",gateway:"Gateway","gateway-exists":"Ja existeix un dispositiu amb el mateix nom.","gateway-name":"Nom de Gateway","gateway-name-required":"Cal un nom de gateway.","gateway-saved":"Configuració de gateway gravada satisfactòriament.","json-parse":"JSON no vàlid.","json-required":"El camp no pot ser buit.","no-connectors":"No hi ha conectors","no-data":"No hi ha configuracions","no-gateway-found":"No s'ha trobat cap gateway.","no-gateway-matching":" '{{item}}' no trobat.","path-logs":"Ruta als fitxers de log","path-logs-required":"Cal ruta.",remote:"Configuració remota","remote-logging-level":"Nivel de logging","remove-entry":"Esborrar configuració","save-tip":"Gravar fitxer de configuració","security-type":"Tipus de seguretat","security-types":{"access-token":"Token d'accés",tls:"TLS"},storage:"Grabació","storage-max-file-records":"Número màxim de registres en fitxer","storage-max-files":"Número màxim de fitxers","storage-max-files-min":"El número mínim és 1.","storage-max-files-pattern":"Número no vàlid.","storage-max-files-required":"Cal número.","storage-max-records":"Màxim de registres en el magatzem","storage-max-records-min":"El número mínim és 1.","storage-max-records-pattern":"Número no vàlid.","storage-max-records-required":"Cal número.","storage-pack-size":"Mida màxim de esdeveniments","storage-pack-size-min":"El número mínim és 1.","storage-pack-size-pattern":"Número no vàlid.","storage-pack-size-required":"Cal número.","storage-path":"Ruta de magatzem","storage-path-required":"Cal ruta de magatzem.","storage-type":"Tipus de magatzem","storage-types":{"file-storage":"Magatzem fitxer","memory-storage":"Magatzem en memoria"},thingsboard:"ThingsBoard","thingsboard-host":"Host ThingsBoard","thingsboard-host-required":"Cal Host.","thingsboard-port":"Port ThingsBoard","thingsboard-port-max":"El port màxim és 65535.","thingsboard-port-min":"El port mínim és 1.","thingsboard-port-pattern":"Port no vàlid.","thingsboard-port-required":"Cal port.",tidy:"Endreçat","tidy-tip":"Endreçat JSON","title-connectors-json":"Configuració conector {{typeName}}","tls-path-ca-certificate":"Ruta al certificat CA al gateway","tls-path-client-certificate":"Ruta al certificat client al gateway","tls-path-private-key":"Ruta a la clau privada al gateway","toggle-fullscreen":"Pantalla completa fullscreen","transformer-json-config":"Configuració JSON*","update-config":"Afegir/actualizar configuració JSON"},Bo={"add-entry":"Přidat konfiguraci","connector-add":"Přidat nový konektor","connector-enabled":"Povolit konektor","connector-name":"Název konektoru","connector-name-required":"Název konektoru je povinný.","connector-type":"Typ konektoru","connector-type-required":"Typ konektoru je povinný.",connectors:"Konfigurace konektoru","create-new-gateway":"Vytvořit novou bránu","create-new-gateway-text":"Jste si jisti, že chcete vytvořit novou bránu s názvem: '{{gatewayName}}'?",delete:"Smazat konfiguraci","download-tip":"Stáhnout soubor konfigurace",gateway:"Brána","gateway-exists":"Zařízení se shodným názvem již existuje.","gateway-name":"Název brány","gateway-name-required":"Název brány je povinný.","gateway-saved":"Konfigurace brány byla úspěšně uložena.","json-parse":"Neplatný JSON.","json-required":"Pole nemůže být prázdné.","no-connectors":"Žádné konektory","no-data":"Žádné konfigurace","no-gateway-found":"Žádné brány nebyly nalezeny.","no-gateway-matching":" '{{item}}' nenalezena.","path-logs":"Cesta k souborům logu","path-logs-required":"Cesta je povinná.",remote:"Vzdálená konfigurace","remote-logging-level":"Úroveň logování","remove-entry":"Odstranit konfiguraci","save-tip":"Uložit soubor konfigurace","security-type":"Typ zabezpečení","security-types":{"access-token":"Přístupový token",tls:"TLS"},storage:"Úložiště","storage-max-file-records":"Maximální počet záznamů v souboru","storage-max-files":"Maximální počet souborů","storage-max-files-min":"Minimální počet je 1.","storage-max-files-pattern":"Počet není platný.","storage-max-files-required":"Počet je povinný.","storage-max-records":"Maximální počet záznamů v úložišti","storage-max-records-min":"Minimální počet záznamů je 1.","storage-max-records-pattern":"Počet není platný.","storage-max-records-required":"Maximální počet záznamů je povinný.","storage-pack-size":"Maximální velikost souboru událostí","storage-pack-size-min":"Minimální počet je 1.","storage-pack-size-pattern":"Počet není platný.","storage-pack-size-required":"Maximální velikost souboru událostí je povinná.","storage-path":"Cesta k úložišti","storage-path-required":"Cesta k úložišti je povinná.","storage-type":"Typ úložiště","storage-types":{"file-storage":"Soubor","memory-storage":"Paměť"},thingsboard:"ThingsBoard","thingsboard-host":"Host ThingsBoard","thingsboard-host-required":"Host je povinný.","thingsboard-port":"Port ThingsBoard","thingsboard-port-max":"Maximální číslo portu je 65535.","thingsboard-port-min":"Minimální číslo portu je 1.","thingsboard-port-pattern":"Port není platný.","thingsboard-port-required":"Port je povinný.",tidy:"Uspořádat","tidy-tip":"Uspořádat JSON konfiguraci","title-connectors-json":"Konfigurace {{typeName}} konektoru","tls-path-ca-certificate":"Cesta k certifikátu CA brány","tls-path-client-certificate":"Cesta k certifikátu klienta brány","tls-path-private-key":"Cesta k privátnímu klíči brány","toggle-fullscreen":"Přepnout do režimu celé obrazovky","transformer-json-config":"JSON* konfigurace","update-config":"Přidat/editovat JSON konfiguraci"},Uo={"add-entry":"Tilføj konfiguration","connector-add":"Tilføj ny stikforbindelse","connector-enabled":"Aktivér stikforbindelse","connector-name":"Navn på stikforbindelse","connector-name-required":"Navn på stikforbindelse er påkrævet.","connector-type":"Stikforbindelsestype","connector-type-required":"Stikforbindelsestype er påkrævet.",connectors:"Konfiguration af stikforbindelser","create-new-gateway":"Opret en ny gateway","create-new-gateway-text":"",delete:"Slet konfiguration","download-tip":"Download konfigurationsfil",gateway:"Gateway","gateway-exists":"Enhed med samme navn findes allerede.","gateway-name":"Gateway-navn","gateway-name-required":"Gateway-navn er påkrævet.","gateway-saved":"Gateway-konfigurationen blev gemt.","json-parse":"Ikke gyldig JSON.","json-required":"Feltet må ikke være tomt.","no-connectors":"Ingen stikforbindelser","no-data":"Ingen konfigurationer","no-gateway-found":"Ingen gateway fundet.","no-gateway-matching":"","path-logs":"Sti til logfiler","path-logs-required":"Sti er påkrævet.",remote:"Fjernkonfiguration","remote-logging-level":"Logføringsniveau","remove-entry":"Fjern konfiguration","save-tip":"Gem konfigurationsfil","security-type":"Sikkerhedstype","security-types":{"access-token":"Adgangstoken",tls:"TLS"},storage:"Lagring","storage-max-file-records":"Maks. antal poster i fil","storage-max-files":"Maks. antal filer","storage-max-files-min":"Min. antal er 1.","storage-max-files-pattern":"Antal er ikke gyldigt.","storage-max-files-required":"Antal er påkrævet.","storage-max-records":"Maks. antal poster i lagring","storage-max-records-min":"Min. antal poster er 1.","storage-max-records-pattern":"Antal er ikke gyldigt.","storage-max-records-required":"Maks. antal poster er påkrævet.","storage-pack-size":"Maks. antal pakkestørrelse for begivenhed","storage-pack-size-min":"Min. antal er 1.","storage-pack-size-pattern":"Antal er ikke gyldigt.","storage-pack-size-required":"Maks. antal pakkestørrelse for begivenhed er påkrævet.","storage-path":"Lagringssti","storage-path-required":"Lagringssti er påkrævet.","storage-type":"Lagringstype","storage-types":{"file-storage":"Lagring af filter","memory-storage":"Lagring af hukommelse"},thingsboard:"ThingsBoard","thingsboard-host":"ThingsBoard-vært","thingsboard-host-required":"Vært er påkrævet.","thingsboard-port":"ThingsBoard-port","thingsboard-port-max":"Maks. portnummer er 65535.","thingsboard-port-min":"Min. portnummer er 1.","thingsboard-port-pattern":"Port er ikke gyldig.","thingsboard-port-required":"Port er påkrævet.",tidy:"Tidy","tidy-tip":"Tidy konfig. JSON","title-connectors-json":"","tls-path-ca-certificate":"Sti til CA-certifikat på gateway","tls-path-client-certificate":"Sti til klientcertifikat på gateway","tls-path-private-key":"Sti til privat nøgle på gateway","toggle-fullscreen":"Skift til fuld skærm","transformer-json-config":"Konfiguration JSON*","update-config":"Tilføj/opdater konfiguration JSON"},_o={"add-entry":"Añadir configuración",advanced:"Avanzado","checking-device-activity":"Probando actividad de dispositivo",command:"Comandos Docker","command-copied-message":"Se han copiado los comandos al portapapeles",configuration:"Configuración","connector-add":"Añadir conector","connector-enabled":"Activar conector","connector-name":"Nombre conector","connector-name-required":"Se requiere nombre conector.","connector-type":"Tipo conector","connector-type-required":"Se requiere tipo conector.",connectors:"Conectores","connectors-config":"Configuración de conectores","connectors-table-enabled":"Enabled","connectors-table-name":"Nombre","connectors-table-type":"Tipo","connectors-table-status":"Estado","connectors-table-actions":"Acciones","connectors-table-key":"Clave","connectors-table-class":"Clase","rpc-command-send":"Enviar","rpc-command-result":"Resultado","rpc-command-edit-params":"Editar parametros","gateway-configuration":"Configuración General","create-new-gateway":"Crear un gateway nuevo","create-new-gateway-text":"Crear un nuevo gateway con el nombre: '{{gatewayName}}'?","created-time":"Hora de creación","configuration-delete-dialog-header":"Las configuraciones se borrarán","configuration-delete-dialog-body":"Sólo es posible desactivar la configuración remota, si hay acceso físico al gateway. Se borrarán todas las configuraciones previas.<br><br> \nPara desactivar la configuración, introduce el nombre del gateway aquí","configuration-delete-dialog-input":"Nombre Gateway","configuration-delete-dialog-input-required":"Se requiere nombre de gateway","configuration-delete-dialog-confirm":"Desactivar",delete:"Borrar configuración","download-tip":"Descargar fichero de configuración","drop-file":"Arrastra un fichero o",gateway:"Gateway","gateway-exists":"Ya existe un dispositivo con el mismo nombre.","gateway-name":"Nombre de Gateway","gateway-name-required":"Se requiere un nombre de gateway.","gateway-saved":"Configuración de gateway grabada satisfactoriamente.",grpc:"GRPC","grpc-keep-alive-timeout":"Timeout Keep alive (en ms)","grpc-keep-alive-timeout-required":"Se requiere Timeout Keep alive","grpc-keep-alive-timeout-min":"El valor no puede ser menor de 1","grpc-keep-alive-timeout-pattern":"El valor no es válido","grpc-keep-alive":"Keep alive (en ms)","grpc-keep-alive-required":"Se requiere keep alive","grpc-keep-alive-min":"El valor no puede ser menor de 1","grpc-keep-alive-pattern":"El valor keep alive no es válido","grpc-min-time-between-pings":"Tiempo mínimo entre pings (en ms)","grpc-min-time-between-pings-required":"Se requiere tiempo mínimo entre pings","grpc-min-time-between-pings-min":"El valor no puede ser menor de 1","grpc-min-time-between-pings-pattern":"El valor de tiempo mínimo entre pings no es válido","grpc-min-ping-interval-without-data":"Intervalo mínimo sin datos (en ms)","grpc-min-ping-interval-without-data-required":"Se requiere intervalo","grpc-min-ping-interval-without-data-min":"El valor no puede ser menor de 1","grpc-min-ping-interval-without-data-pattern":"El valor de intervalo no es válido","grpc-max-pings-without-data":"Intervalo máximo sin datos","grpc-max-pings-without-data-required":"Se requiere intervalo","grpc-max-pings-without-data-min":"El valor no puede ser menor de 1","grpc-max-pings-without-data-pattern":"El valor de intervalo no es válido","inactivity-check-period-seconds":"Periodo de control de inactividad (en segundos)","inactivity-check-period-seconds-required":"Se requiere periodo","inactivity-check-period-seconds-min":"El valor no puede ser menor de 1","inactivity-check-period-seconds-pattern":"El valor del periodo no es válido","inactivity-timeout-seconds":"Timeout de inactividad (en segundos)","inactivity-timeout-seconds-required":"Se requiere timeout de inactividad","inactivity-timeout-seconds-min":"El valor no puede ser menor de 1","inactivity-timeout-seconds-pattern":"El valor de inactividad no es válido","json-parse":"JSON no válido.","json-required":"El campo no puede estar vacío.",logs:{logs:"Registros",days:"días",hours:"horas",minutes:"minutos",seconds:"segundos","date-format":"Formato de fecha","date-format-required":"Se requiere formato de fecha","log-format":"Formato de registro","log-type":"Tipo de registro","log-format-required":"Se requiere tipo de registro",remote:"Registro remoto","remote-logs":"Registro remoto",local:"Registro local",level:"Nivel de registro","file-path":"Ruta de fichero","file-path-required":"Se requiere ruta de fichero","saving-period":"Periodo de guardado de registros","saving-period-min":"El periodo no puede ser menor que 1","saving-period-required":"Se requiere periodo de guardado","backup-count":"Número de backups","backup-count-min":"El número de backups no puede ser menor que 1","backup-count-required":"Se requiere número de backups"},"min-pack-send-delay":"Tiempo de espera, envío de paquetes (en ms)","min-pack-send-delay-required":"Se requiere tiempo de espera","min-pack-send-delay-min":"El tiempo de espera no puede ser menor que 0","no-connectors":"No hay conectores","no-data":"No hay configuraciones","no-gateway-found":"No se ha encontrado ningún gateway.","no-gateway-matching":" '{{item}}' no encontrado.","path-logs":"Ruta a los archivos de log","path-logs-required":"Ruta requerida.","permit-without-calls":"Permitir Keep alive si llamadas",remote:"Configuración remota","remote-logging-level":"Nivel de logging","remove-entry":"Borrar configuración","remote-shell":"Consola remota","remote-configuration":"Configuración remota",other:"otros","save-tip":"Grabar fichero de configuración","security-type":"Tipo de seguridad","security-types":{"access-token":"Tóken de acceso","username-password":"Usuario y contraseña",tls:"TLS","tls-access-token":"TLS + Tóken de acceso","tls-private-key":"TLS + Clave privada"},"server-port":"Puerto del servidor",statistics:{statistic:"Estadística",statistics:"Estadísticas","statistic-commands-empty":"No hay estadísticas",commands:"Comandos","send-period":"Periodo de envío de estadísticas (en segundos)","send-period-required":"Se requiere periodo de envío","send-period-min":"El periodo de envío no puede ser menor de 60","send-period-pattern":"El periodo de envío no es válido","check-connectors-configuration":"Revisar configuración de conectores (en segundos)","check-connectors-configuration-required":"Se requiere un valor","check-connectors-configuration-min":"El valor no puede ser menor de 1","check-connectors-configuration-pattern":"La configuración no es válida",add:"Añadir comando",timeout:"Timeout","timeout-ms":"Timeout (en ms)","timeout-required":"Se requiere timeout","timeout-min":"El timeout no puede ser menor de 1","timeout-pattern":"El timeout no es válido","attribute-name":"Nombre de atributo","attribute-name-required":"Se requiere nombre de atributo",command:"Comando","command-required":"Se requiere comando",remove:"Borrar comando"},storage:"Grabación","storage-max-file-records":"Número máximo de registros en fichero","storage-max-files":"Número máximo de ficheros","storage-max-files-min":"El número mínimo es 1.","storage-max-files-pattern":"Número no válido.","storage-max-files-required":"Se requiere número.","storage-max-records":"Máximo de registros en el almacén","storage-max-records-min":"El número mínimo es 1.","storage-max-records-pattern":"Número no válido.","storage-max-records-required":"Se requiere número.","storage-read-record-count":"Leer número de entradas en almacén","storage-read-record-count-min":"El número mínimo de entradas es 1.","storage-read-record-count-pattern":"El número no es válido.","storage-read-record-count-required":"Se requiere número de entradas.","storage-max-read-record-count":"Número máximo de entradas en el almacén","storage-max-read-record-count-min":"El número mínimo es 1.","storage-max-read-record-count-pattern":"El número no es válido","storage-max-read-record-count-required":"Se requiere número máximo de entradas.","storage-data-folder-path":"Ruta de carpeta de datos","storage-data-folder-path-required":"Se requiere ruta.","storage-pack-size":"Tamaño máximo de eventos","storage-pack-size-min":"El número mínimo es 1.","storage-pack-size-pattern":"Número no válido.","storage-pack-size-required":"Se requiere número.","storage-path":"Ruta de almacén","storage-path-required":"Se requiere ruta de almacén.","storage-type":"Tipo de almacén","storage-types":{"file-storage":"Almacén en fichero","memory-storage":"Almacén en memoria",sqlite:"SQLITE"},thingsboard:"ThingsBoard",general:"General","thingsboard-host":"Host ThingsBoard","thingsboard-host-required":"Se requiere Host.","thingsboard-port":"Puerto ThingsBoard","thingsboard-port-max":"El puerto máximo es 65535.","thingsboard-port-min":"El puerto mínimo es 1.","thingsboard-port-pattern":"Puerto no válido.","thingsboard-port-required":"Se requiere puerto.",tidy:"Tidy","tidy-tip":"Tidy JSON","title-connectors-json":"Configuración conector {{typeName}}","tls-path-ca-certificate":"Ruta al certificado CA en el gateway","tls-path-client-certificate":"Ruta al certificado cliente en el gateway","messages-ttl-check-in-hours":"Comprobación de TTL de mensajes en horas","messages-ttl-check-in-hours-required":"Campo requerido.","messages-ttl-check-in-hours-min":"El mínimo es 1.","messages-ttl-check-in-hours-pattern":"El número no es válido.","messages-ttl-in-days":"TTL (Time to live) de mensages en días","messages-ttl-in-days-required":"Se requiere TTL de mensajes.","messages-ttl-in-days-min":"El número mínimo es 1.","messages-ttl-in-days-pattern":"El número no es válido.","mqtt-qos":"QoS","mqtt-qos-required":"Se requiere QoS","mqtt-qos-range":"El rango de valores es desde 0 a 1","tls-path-private-key":"Ruta a la clave privada en el gateway","toggle-fullscreen":"Pantalla completa fullscreen","transformer-json-config":"Configuración JSON*","update-config":"Añadir/actualizar configuración JSON",hints:{"remote-configuration":"Habilita la administración y configuración remota del gateway","remote-shell":"Habilita el control remoto del sistema operativo del gateway desde el widget terminal remoto",host:"Hostname o dirección IP del servidor Thingsboard",port:"Puerto del servicio MQTT en el servidor Thingsboard",token:"Access token para el gateway","client-id":"ID de cliente MQTT para el gateway",username:"Usuario MQTT para el gateway",password:"Contraseña MQTT para el gateway","ca-cert":"Ruta al fichero del certificado CA","date-form":"Formato de fecha en los mensajes de registro","data-folder":"Ruta a la carpeta que contendrá los datos (Relativa o absoluta)","log-format":"Formato de mensajes en registro","remote-log":"Habilita el registro remoto y la posterior lectura desde el gateway","backup-count":"Si el contaje de copias de seguridad es mayor que 0, cuando se realice una renovación, no se conservan más que los archivos de recuento de copias de seguridad, los más antíguos se eliminarán",storage:"Provee la configuración para el grabado de datos entrantes antes de que se envíen a la plataforma","max-file-count":"Número máximo de ficheros que se crearán","max-read-count":"Númeo máximo de mensajes a obtener desde el disco y enviados a la plataforma","max-records":"Número máximo de registros que se guardarán en un solo fichero","read-record-count":"Número de mensages a obtener desde el almacenamiento y enviados a la plataforma","max-records-count":"Número máximo de datos en almacenamiento antes de enviar a la plataforma","ttl-check-hour":"Con qué frecuencia el gateway comprobará si los datos están obsoletos","ttl-messages-day":"Número máximo de días para la retención de datos en el almacén",commands:"Comandos para recoger estadísticas adicionales",attribute:"Clave de telemetría para estadísticas",timeout:"Timeout para la ejecución de comandos",command:"El resultado de la ejecución del comando, se usará como valor para la telemetría","check-device-activity":"Habilita la monitorización de cada uno de los dispositivos conectados","inactivity-timeout":"Tiempo tras que el gateway desconectará el dispositivo","inactivity-period":"Periodo de monitorización de actividad en el dispositivo","minimal-pack-delay":"Tiempo de espera entre envío de paquetes de mensajes (Un valor muy bajo, resultará en un aumento de uso de la CPU en el gateway)",qos:"Quality of Service en los mensajes MQTT (0 - at most once, 1 - at least once)","server-port":"Puerto de red en el cual el servidor GRPC escuchará conexiones entrantes.","grpc-keep-alive-timeout":"Tiempo máximo, el cual el servidor esperara un ping keepalive antes de considerar la conexión terminada.","grpc-keep-alive":"Duración entre dos pings keepalive cuando no haya llamada RPC activa.","grpc-min-time-between-pings":"Mínimo tiempo que el servidor debe esperar entre envíos de mensajes de ping","grpc-max-pings-without-data":"Número máximo de pings keepalive que el servidor puede enviar sin recibir ningún dato antes de considerar la conexión terminada.","grpc-min-ping-interval-without-data":"Mínimo tiempo que el servidor debe esperar entre envíos de ping keepalive cuando no haya ningún dato en envío o recepción.","permit-without-calls":"Permitir al servidor mantener la conexión GRPC abierta, cuando no haya llamadas RPC activas."}},Ho={"add-entry":"설정 추가","connector-add":"새로운 연결자 추가","connector-enabled":"Enable connector","connector-name":"Connector name","connector-name-required":"Connector name is required.","connector-type":"Connector type","connector-type-required":"Connector type is required.",connectors:"Connectors configuration","create-new-gateway":"Create a new gateway","create-new-gateway-text":"Are you sure you want create a new gateway with name: '{{gatewayName}}'?",delete:"Delete configuration","download-tip":"Download configuration file",gateway:"Gateway","gateway-exists":"Device with same name is already exists.","gateway-name":"Gateway name","gateway-name-required":"Gateway name is required.","gateway-saved":"Gateway configuration successfully saved.","json-parse":"Not valid JSON.","json-required":"Field cannot be empty.","no-connectors":"No connectors","no-data":"No configurations","no-gateway-found":"No gateway found.","no-gateway-matching":" '{{item}}' not found.","path-logs":"Path to log files","path-logs-required":"Path is required.",remote:"Remote configuration","remote-logging-level":"Logging level","remove-entry":"Remove configuration","save-tip":"Save configuration file","security-type":"Security type","security-types":{"access-token":"Access Token",tls:"TLS"},storage:"Storage","storage-max-file-records":"Maximum records in file","storage-max-files":"Maximum number of files","storage-max-files-min":"Minimum number is 1.","storage-max-files-pattern":"Number is not valid.","storage-max-files-required":"Number is required.","storage-max-records":"Maximum records in storage","storage-max-records-min":"Minimum number of records is 1.","storage-max-records-pattern":"Number is not valid.","storage-max-records-required":"Maximum records is required.","storage-pack-size":"Maximum event pack size","storage-pack-size-min":"Minimum number is 1.","storage-pack-size-pattern":"Number is not valid.","storage-pack-size-required":"Maximum event pack size is required.","storage-path":"Storage path","storage-path-required":"Storage path is required.","storage-type":"Storage type","storage-types":{"file-storage":"File storage","memory-storage":"Memory storage"},thingsboard:"ThingsBoard","thingsboard-host":"ThingsBoard host","thingsboard-host-required":"Host is required.","thingsboard-port":"ThingsBoard port","thingsboard-port-max":"Maximum port number is 65535.","thingsboard-port-min":"Minimum port number is 1.","thingsboard-port-pattern":"Port is not valid.","thingsboard-port-required":"Port is required.",tidy:"Tidy","tidy-tip":"Tidy config JSON","title-connectors-json":"Connector {{typeName}} configuration","tls-path-ca-certificate":"Path to CA certificate on gateway","tls-path-client-certificate":"Path to client certificate on gateway","tls-path-private-key":"Path to private key on gateway","toggle-fullscreen":"Toggle fullscreen","transformer-json-config":"Configuration JSON*","update-config":"Add/update configuration JSON"},zo={"add-entry":"Add configuration",advanced:"Advanced","checking-device-activity":"Checking device activity",command:"Docker commands","command-copied-message":"Docker command has been copied to clipboard",configuration:"Configuration","connector-add":"Add new connector","connector-enabled":"Enable connector","connector-name":"Connector name","connector-name-required":"Connector name is required.","connector-type":"Connector type","connector-type-required":"Connector type is required.",connectors:"Connectors","connectors-config":"Connectors configuration","connectors-table-enabled":"Enabled","connectors-table-name":"Name","connectors-table-type":"Type","connectors-table-status":"Status","connectors-table-actions":"Actions","connectors-table-key":"Key","connectors-table-class":"Class","rpc-command-send":"Send","rpc-command-result":"Result","rpc-command-edit-params":"Edit parameters","gateway-configuration":"General Configuration","docker-label":"In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.","create-new-gateway":"Create a new gateway","create-new-gateway-text":"Are you sure you want create a new gateway with name: '{{gatewayName}}'?","created-time":"Created time","configuration-delete-dialog-header":"Configurations will be deleted","configuration-delete-dialog-body":"Turning off Remote Configuration is possible only if there is physical access to the Gateway. All previous configurations will be deleted.<br><br> \nTo turn off configuration, enter gateway name below","configuration-delete-dialog-input":"Gateway name","configuration-delete-dialog-input-required":"Gateway name is mandatory","configuration-delete-dialog-confirm":"Turn Off",delete:"Delete configuration","download-tip":"Download configuration file","drop-file":"Drop file here or",gateway:"Gateway","gateway-exists":"Device with same name is already exists.","gateway-name":"Gateway name","gateway-name-required":"Gateway name is required.","gateway-saved":"Gateway configuration successfully saved.",grpc:"GRPC","grpc-keep-alive-timeout":"Keep alive timeout (in ms)","grpc-keep-alive-timeout-required":"Keep alive timeout is required","grpc-keep-alive-timeout-min":"Keep alive timeout can not be less then 1","grpc-keep-alive-timeout-pattern":"Keep alive timeout is not valid","grpc-keep-alive":"Keep alive (in ms)","grpc-keep-alive-required":"Keep alive is required","grpc-keep-alive-min":"Keep alive can not be less then 1","grpc-keep-alive-pattern":"Keep alive is not valid","grpc-min-time-between-pings":"Min time between pings (in ms)","grpc-min-time-between-pings-required":"Min time between pings is required","grpc-min-time-between-pings-min":"Min time between pings can not be less then 1","grpc-min-time-between-pings-pattern":"Min time between pings is not valid","grpc-min-ping-interval-without-data":"Min ping interval without data (in ms)","grpc-min-ping-interval-without-data-required":"Min ping interval without data is required","grpc-min-ping-interval-without-data-min":"Min ping interval without data can not be less then 1","grpc-min-ping-interval-without-data-pattern":"Min ping interval without data is not valid","grpc-max-pings-without-data":"Max pings without data","grpc-max-pings-without-data-required":"Max pings without data is required","grpc-max-pings-without-data-min":"Max pings without data can not be less then 1","grpc-max-pings-without-data-pattern":"Max pings without data is not valid","inactivity-check-period-seconds":"Inactivity check period (in sec)","inactivity-check-period-seconds-required":"Inactivity check period is required","inactivity-check-period-seconds-min":"Inactivity check period can not be less then 1","inactivity-check-period-seconds-pattern":"Inactivity check period is not valid","inactivity-timeout-seconds":"Inactivity timeout (in sec)","inactivity-timeout-seconds-required":"Inactivity timeout is required","inactivity-timeout-seconds-min":"Inactivity timeout can not be less then 1","inactivity-timeout-seconds-pattern":"Inactivity timeout is not valid","json-parse":"Not valid JSON.","json-required":"Field cannot be empty.",logs:{logs:"Logs",days:"days",hours:"hours",minutes:"minutes",seconds:"seconds","date-format":"Date format","date-format-required":"Date format required","log-format":"Log format","log-type":"Log type","log-format-required":"Log format required",remote:"Remote logging","remote-logs":"Remote logs",local:"Local logging",level:"Log level","file-path":"File path","file-path-required":"File path required","saving-period":"Log saving period","saving-period-min":"Log saving period can not be less then 1","saving-period-required":"Log saving period required","backup-count":"Backup count","backup-count-min":"Backup count can not be less then 1","backup-count-required":"Backup count required"},"min-pack-send-delay":"Min pack send delay (in ms)","min-pack-send-delay-required":"Min pack send delay is required","min-pack-send-delay-min":"Min pack send delay can not be less then 0","no-connectors":"No connectors","no-data":"No configurations","no-gateway-found":"No gateway found.","no-gateway-matching":" '{{item}}' not found.","path-logs":"Path to log files","path-logs-required":"Path is required.","permit-without-calls":"Keep alive permit without calls",remote:"Remote configuration","remote-logging-level":"Logging level","remove-entry":"Remove configuration","remote-shell":"Remote shell","remote-configuration":"Remote Configuration",other:"Other","save-tip":"Save configuration file","security-type":"Security type","security-types":{"access-token":"Access Token","username-password":"Username and Password",tls:"TLS","tls-access-token":"TLS + Access Token","tls-private-key":"TLS + Private Key"},"server-port":"Server port",statistics:{statistic:"Statistic",statistics:"Statistics","statistic-commands-empty":"No statistics available",commands:"Commands","send-period":"Statistic send period (in sec)","send-period-required":"Statistic send period is required","send-period-min":"Statistic send period can not be less then 60","send-period-pattern":"Statistic send period is not valid","check-connectors-configuration":"Check connectors configuration (in sec)","check-connectors-configuration-required":"Check connectors configuration is required","check-connectors-configuration-min":"Check connectors configuration can not be less then 1","check-connectors-configuration-pattern":"Check connectors configuration is not valid",add:"Add command",timeout:"Timeout","timeout-ms":"Timeout (in ms)","timeout-required":"Timeout is required","timeout-min":"Timeout can not be less then 1","timeout-pattern":"Timeout is not valid","attribute-name":"Attribute name","attribute-name-required":"Attribute name is required",command:"Command","command-required":"Command is required",remove:"Remove command"},storage:"Storage","storage-max-file-records":"Maximum records in file","storage-max-files":"Maximum number of files","storage-max-files-min":"Minimum number is 1.","storage-max-files-pattern":"Number is not valid.","storage-max-files-required":"Number is required.","storage-max-records":"Maximum records in storage","storage-max-records-min":"Minimum number of records is 1.","storage-max-records-pattern":"Number is not valid.","storage-max-records-required":"Maximum records is required.","storage-read-record-count":"Read record count in storage","storage-read-record-count-min":"Minimum number of records is 1.","storage-read-record-count-pattern":"Number is not valid.","storage-read-record-count-required":"Read record count is required.","storage-max-read-record-count":"Max read record count in storage","storage-max-read-record-count-min":"Minimum number of records is 1.","storage-max-read-record-count-pattern":"Number is not valid.","storage-max-read-record-count-required":"Max Read record count is required.","storage-data-folder-path":"Data folder path","storage-data-folder-path-required":"Data folder path is required.","storage-pack-size":"Maximum event pack size","storage-pack-size-min":"Minimum number is 1.","storage-pack-size-pattern":"Number is not valid.","storage-pack-size-required":"Maximum event pack size is required.","storage-path":"Storage path","storage-path-required":"Storage path is required.","storage-type":"Storage type","storage-types":{"file-storage":"File storage","memory-storage":"Memory storage",sqlite:"SQLITE"},thingsboard:"ThingsBoard",general:"General","thingsboard-host":"ThingsBoard host","thingsboard-host-required":"Host is required.","thingsboard-port":"ThingsBoard port","thingsboard-port-max":"Maximum port number is 65535.","thingsboard-port-min":"Minimum port number is 1.","thingsboard-port-pattern":"Port is not valid.","thingsboard-port-required":"Port is required.",tidy:"Tidy","tidy-tip":"Tidy config JSON","title-connectors-json":"Connector {{typeName}} configuration","tls-path-ca-certificate":"Path to CA certificate on gateway","tls-path-client-certificate":"Path to client certificate on gateway","messages-ttl-check-in-hours":"Messages TTL check in hours","messages-ttl-check-in-hours-required":"Messages TTL check in hours is required.","messages-ttl-check-in-hours-min":"Min number is 1.","messages-ttl-check-in-hours-pattern":"Number is not valid.","messages-ttl-in-days":"Messages TTL in days","messages-ttl-in-days-required":"Messages TTL in days is required.","messages-ttl-in-days-min":"Min number is 1.","messages-ttl-in-days-pattern":"Number is not valid.","mqtt-qos":"QoS","mqtt-qos-required":"QoS is required","mqtt-qos-range":"QoS values range is from 0 to 1","tls-path-private-key":"Path to private key on gateway","toggle-fullscreen":"Toggle fullscreen","transformer-json-config":"Configuration JSON*","update-config":"Add/update configuration JSON",hints:{"remote-configuration":"Enables remote configuration and management of the gateway","remote-shell":"Enables remote control of the operating system with the gateway from the Remote Shell widget",host:"Hostname or IP address of ThingsBoard server",port:"Port of MQTT service on ThingsBoard server",token:"Access token for the gateway from ThingsBoard server","client-id":"MQTT client id for the gateway form ThingsBoard server",username:"MQTT username for the gateway form ThingsBoard server",password:"MQTT password for the gateway form ThingsBoard server","ca-cert":"Path to CA certificate file","date-form":"Date format in log message","data-folder":"Path to folder, that will contains data (Relative or Absolute)","log-format":"Log message format","remote-log":"Enables remote logging and logs reading from the gateway","backup-count":"If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",storage:"Provides configuration for saving incoming data before it is sent to the platform","max-file-count":"Maximum count of file that will be created","max-read-count":"Count of messages to get from storage and send to ThingsBoard","max-records":"Maximum count of records that will be stored in one file","read-record-count":"Count of messages to get from storage and send to ThingsBoard","max-records-count":"Maximum count of data in storage before send to ThingsBoard","ttl-check-hour":"How often will Gateway check data for obsolescence","ttl-messages-day":"Maximum days that storage will save data",commands:"Commands for collecting additional statistic",attribute:"Statistic telemetry key",timeout:"Timeout for command executing",command:"The result of the command execution, will be used as the value for telemetry","check-device-activity":"Enables monitor the activity of each connected device","inactivity-timeout":"Time after whose the gateway will disconnect device","inactivity-period":"Periodicity of device activity check","minimal-pack-delay":"Delay between sending packs of messages (Decreasing this setting results in increased CPU usage)",qos:"Quality of Service in MQTT messaging (0 - at most once, 1 - at least once)","server-port":"Network port on which GRPC server will listen for incoming connections.","grpc-keep-alive-timeout":"Maximum time the server should wait for a keepalive ping response before considering the connection dead.","grpc-keep-alive":"Duration between two successive keepalive ping messages when there is no active RPC call.","grpc-min-time-between-pings":"Minimum amount of time the server should wait between sending keepalive ping messages","grpc-max-pings-without-data":"Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.","grpc-min-ping-interval-without-data":"Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.","permit-without-calls":"Allow server to keep the GRPC connection alive even when there are no active RPC calls."}},Wo={"add-entry":"Configuratie toevoegen","connector-add":"Nieuwe connector toevoegen","connector-enabled":"Connector inschakelen","connector-name":"Naam van de connector","connector-name-required":"De naam van de connector is vereist.","connector-type":"Type aansluiting","connector-type-required":"Het type connector is vereist.",connectors:"Configuratie van connectoren","create-new-gateway":"Een nieuwe gateway maken","create-new-gateway-text":"Weet u zeker dat u een nieuwe gateway wilt maken met de naam: '{{gatewayName}}'?",delete:"Configuratie verwijderen","download-tip":"Configuratiebestand downloaden",gateway:"Gateway","gateway-exists":"Device met dezelfde naam bestaat al.","gateway-name":"Naam van de gateway","gateway-name-required":"De naam van de gateway is vereist.","gateway-saved":"Gatewayconfiguratie succesvol opgeslagen.","json-parse":"Ongeldige JSON.","json-required":"Het veld mag niet leeg zijn.","no-connectors":"Geen connectoren","no-data":"Geen configuraties","no-gateway-found":"Geen gateway gevonden.","no-gateway-matching":"'{{item}}' niet gevonden.","path-logs":"Pad naar logbestanden","path-logs-required":"Pad is vereist.",remote:"Configuratie op afstand","remote-logging-level":"Registratie niveau","remove-entry":"Configuratie verwijderen","save-tip":"Configuratiebestand opslaan","security-type":"Soort beveiliging","security-types":{"access-token":"Toegang tot token",tls:"TLS (TLS)"},storage:"Opslag","storage-max-file-records":"Maximum aantal records in bestand","storage-max-files":"Maximaal aantal bestanden","storage-max-files-min":"Minimum aantal is 1.","storage-max-files-pattern":"Nummer is niet geldig.","storage-max-files-required":"Nummer is vereist.","storage-max-records":"Maximum aantal records in opslag","storage-max-records-min":"Minimum aantal records is 1.","storage-max-records-pattern":"Nummer is niet geldig.","storage-max-records-required":"Maximale records zijn vereist.","storage-pack-size":"Maximale pakketgrootte voor events","storage-pack-size-min":"Minimum aantal is 1.","storage-pack-size-pattern":"Nummer is niet geldig.","storage-pack-size-required":"De maximale pakketgrootte van het event is vereist.","storage-path":"Opslag pad","storage-path-required":"Opslagpad is vereist.","storage-type":"Type opslag","storage-types":{"file-storage":"Opslag van bestanden","memory-storage":"Geheugen opslag"},thingsboard:"Dingen Bord","thingsboard-host":"ThingsBoard-gastheer","thingsboard-host-required":"Server host is vereist.","thingsboard-port":"ThingsBoard-poort","thingsboard-port-max":"Het maximale poortnummer is 65535.","thingsboard-port-min":"Het minimale poortnummer is 1.","thingsboard-port-pattern":"Poort is niet geldig.","thingsboard-port-required":"Poort is vereist.",tidy:"Ordelijk","tidy-tip":"Opgeruimde configuratie JSON","title-connectors-json":"Configuratie van connector {{typeName}}","tls-path-ca-certificate":"Pad naar CA-certificaat op gateway","tls-path-client-certificate":"Pad naar clientcertificaat op gateway","tls-path-private-key":"Pad naar privésleutel op gateway","toggle-fullscreen":"Volledig scherm in- en uitschakelen","transformer-json-config":"Configuratie JSON*","update-config":"Configuratie JSON toevoegen/bijwerken"},jo={"add-entry":"Dodaj konfigurację",advanced:"Advanced","checking-device-activity":"Checking device activity",command:"Docker commands","command-copied-message":"Docker command has been copied to clipboard",configuration:"Configuration","connector-add":"Dodaj nowe złącze","connector-enabled":"Włącz złącze","connector-name":"Nazwa złącza","connector-name-required":"Nazwa złącza jest wymagana.","connector-type":"Typ złącza","connector-type-required":"Typ złącza jest wymagany.",connectors:"Konfiguracja złączy","connectors-config":"Connectors configuration","connectors-table-enabled":"Enabled","connectors-table-name":"Name","connectors-table-type":"Type","connectors-table-status":"Status","connectors-table-actions":"Actions","connectors-table-key":"Key","connectors-table-class":"Class","rpc-command-send":"Send","rpc-command-result":"Result","rpc-command-edit-params":"Edit parameters","gateway-configuration":"General Configuration","docker-label":"In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.","create-new-gateway":"Utwórz nowy gateway","create-new-gateway-text":"Czy na pewno chcesz utworzyć nowy gateway o nazwie: '{{gatewayName}}'?","created-time":"Created time","configuration-delete-dialog-header":"Configurations will be deleted","configuration-delete-dialog-body":"Turning off Remote Configuration is possible only if there is physical access to the Gateway. All previous configurations will be deleted.<br><br> \nTo turn off configuration, enter gateway name below","configuration-delete-dialog-input":"Gateway name","configuration-delete-dialog-input-required":"Gateway name is mandatory","configuration-delete-dialog-confirm":"Turn Off",delete:"Usuń konfigurację","download-tip":"Pobierz plik konfiguracyjny","drop-file":"Drop file here or",gateway:"Wejście","gateway-exists":"Urządzenie o tej samej nazwie już istnieje.","gateway-name":"Nazwa Gateway","gateway-name-required":"Nazwa Gateway'a jest wymagana.","gateway-saved":"Konfiguracja Gatewey'a została pomyślnie zapisana.",grpc:"GRPC","grpc-keep-alive-timeout":"Keep alive timeout (in ms)","grpc-keep-alive-timeout-required":"Keep alive timeout is required","grpc-keep-alive-timeout-min":"Keep alive timeout can not be less then 1","grpc-keep-alive-timeout-pattern":"Keep alive timeout is not valid","grpc-keep-alive":"Keep alive (in ms)","grpc-keep-alive-required":"Keep alive is required","grpc-keep-alive-min":"Keep alive can not be less then 1","grpc-keep-alive-pattern":"Keep alive is not valid","grpc-min-time-between-pings":"Min time between pings (in ms)","grpc-min-time-between-pings-required":"Min time between pings is required","grpc-min-time-between-pings-min":"Min time between pings can not be less then 1","grpc-min-time-between-pings-pattern":"Min time between pings is not valid","grpc-min-ping-interval-without-data":"Min ping interval without data (in ms)","grpc-min-ping-interval-without-data-required":"Min ping interval without data is required","grpc-min-ping-interval-without-data-min":"Min ping interval without data can not be less then 1","grpc-min-ping-interval-without-data-pattern":"Min ping interval without data is not valid","grpc-max-pings-without-data":"Max pings without data","grpc-max-pings-without-data-required":"Max pings without data is required","grpc-max-pings-without-data-min":"Max pings without data can not be less then 1","grpc-max-pings-without-data-pattern":"Max pings without data is not valid","inactivity-check-period-seconds":"Inactivity check period (in sec)","inactivity-check-period-seconds-required":"Inactivity check period is required","inactivity-check-period-seconds-min":"Inactivity check period can not be less then 1","inactivity-check-period-seconds-pattern":"Inactivity check period is not valid","inactivity-timeout-seconds":"Inactivity timeout (in sec)","inactivity-timeout-seconds-required":"Inactivity timeout is required","inactivity-timeout-seconds-min":"Inactivity timeout can not be less then 1","inactivity-timeout-seconds-pattern":"Inactivity timeout is not valid","json-parse":"Nieprawidłowy JSON.","json-required":"Pole nie może być puste.",logs:{logs:"Logs",days:"days",hours:"hours",minutes:"minutes",seconds:"seconds","date-format":"Date format","date-format-required":"Date format required","log-format":"Log format","log-type":"Log type","log-format-required":"Log format required",remote:"Remote logging","remote-logs":"Remote logs",local:"Local logging",level:"Log level","file-path":"File path","file-path-required":"File path required","saving-period":"Log saving period","saving-period-min":"Log saving period can not be less then 1","saving-period-required":"Log saving period required","backup-count":"Backup count","backup-count-min":"Backup count can not be less then 1","backup-count-required":"Backup count required"},"min-pack-send-delay":"Min pack send delay (in ms)","min-pack-send-delay-required":"Min pack send delay is required","min-pack-send-delay-min":"Min pack send delay can not be less then 0","no-connectors":"Brak złączy","no-data":"Brak konfiguracji","no-gateway-found":"Nie znaleziono gateway'a.","no-gateway-matching":" '{{item}}' nie znaleziono.","path-logs":"Ścieżka do plików dziennika","path-logs-required":"Ścieżka jest wymagana.","permit-without-calls":"Keep alive permit without calls",remote:"Zdalna konfiguracja","remote-logging-level":"Poziom logowania","remove-entry":"Usuń konfigurację","remote-shell":"Remote shell","remote-configuration":"Remote Configuration",other:"Other","save-tip":"Zapisz plik konfiguracyjny","security-type":"Rodzaj zabezpieczenia","security-types":{"access-token":"Token dostępu","username-password":"Username and Password",tls:"TLS","tls-access-token":"TLS + Access Token","tls-private-key":"TLS + Private Key"},"server-port":"Server port",statistics:{statistic:"Statistic",statistics:"Statistics","statistic-commands-empty":"No statistics available",commands:"Commands","send-period":"Statistic send period (in sec)","send-period-required":"Statistic send period is required","send-period-min":"Statistic send period can not be less then 60","send-period-pattern":"Statistic send period is not valid","check-connectors-configuration":"Check connectors configuration (in sec)","check-connectors-configuration-required":"Check connectors configuration is required","check-connectors-configuration-min":"Check connectors configuration can not be less then 1","check-connectors-configuration-pattern":"Check connectors configuration is not valid",add:"Add command",timeout:"Timeout","timeout-ms":"Timeout (in ms)","timeout-required":"Timeout is required","timeout-min":"Timeout can not be less then 1","timeout-pattern":"Timeout is not valid","attribute-name":"Attribute name","attribute-name-required":"Attribute name is required",command:"Command","command-required":"Command is required",remove:"Remove command"},storage:"Składowanie","storage-max-file-records":"Maksymalna liczba rekordów w pliku","storage-max-files":"Maksymalna liczba plików","storage-max-files-min":"Minimalna liczba to 1.","storage-max-files-pattern":"Numer jest nieprawidłowy.","storage-max-files-required":"Numer jest wymagany.","storage-max-records":"Maksymalna liczba rekordów w pamięci","storage-max-records-min":"Minimalna liczba rekordów to 1.","storage-max-records-pattern":"Numer jest nieprawidłowy.","storage-max-records-required":"Maksymalna liczba rekordów jest wymagana.","storage-read-record-count":"Read record count in storage","storage-read-record-count-min":"Minimum number of records is 1.","storage-read-record-count-pattern":"Number is not valid.","storage-read-record-count-required":"Read record count is required.","storage-max-read-record-count":"Max read record count in storage","storage-max-read-record-count-min":"Minimum number of records is 1.","storage-max-read-record-count-pattern":"Number is not valid.","storage-max-read-record-count-required":"Max Read record count is required.","storage-data-folder-path":"Data folder path","storage-data-folder-path-required":"Data folder path is required.","storage-pack-size":"Maksymalny rozmiar pakietu wydarzeń","storage-pack-size-min":"Minimalna liczba to 1.","storage-pack-size-pattern":"Numer jest nieprawidłowy.","storage-pack-size-required":"Maksymalny rozmiar pakietu wydarzeń jest wymagany.","storage-path":"Ścieżka przechowywania","storage-path-required":"Ścieżka do przechowywania jest wymagana.","storage-type":"Typ składowania","storage-types":{"file-storage":"Nośnik danych","memory-storage":"Przechowywanie pamięci",sqlite:"SQLITE"},thingsboard:"ThingsBoard",general:"General","thingsboard-host":"Gospodarz ThingsBoard","thingsboard-host-required":"Host jest wymagany.","thingsboard-port":"Port ThingsBoard","thingsboard-port-max":"Maksymalny numer portu to 65535.","thingsboard-port-min":"Minimalny numer portu to 1.","thingsboard-port-pattern":"Port jest nieprawidłowy.","thingsboard-port-required":"Port jest wymagany.",tidy:"Uporządkuj","tidy-tip":"Uporządkowana konfiguracja JSON","title-connectors-json":"Złącze {{typeName}} konfiguracja","tls-path-ca-certificate":"Ścieżka do certyfikatu CA na gateway","tls-path-client-certificate":"Ścieżka do certyfikatu klienta na gateway","messages-ttl-check-in-hours":"Messages TTL check in hours","messages-ttl-check-in-hours-required":"Messages TTL check in hours is required.","messages-ttl-check-in-hours-min":"Min number is 1.","messages-ttl-check-in-hours-pattern":"Number is not valid.","messages-ttl-in-days":"Messages TTL in days","messages-ttl-in-days-required":"Messages TTL in days is required.","messages-ttl-in-days-min":"Min number is 1.","messages-ttl-in-days-pattern":"Number is not valid.","mqtt-qos":"QoS","mqtt-qos-required":"QoS is required","mqtt-qos-range":"QoS values range is from 0 to 1","tls-path-private-key":"Ścieżka do klucza prywatnego na bramce","toggle-fullscreen":"Przełącz tryb pełnoekranowy","transformer-json-config":"Konfiguracja JSON*","update-config":"Dodaj/zaktualizuj konfigurację JSON",hints:{"remote-configuration":"Enables remote configuration and management of the gateway","remote-shell":"Enables remote control of the operating system with the gateway from the Remote Shell widget",host:"Hostname or IP address of ThingsBoard server",port:"Port of MQTT service on ThingsBoard server",token:"Access token for the gateway from ThingsBoard server","client-id":"MQTT client id for the gateway form ThingsBoard server",username:"MQTT username for the gateway form ThingsBoard server",password:"MQTT password for the gateway form ThingsBoard server","ca-cert":"Path to CA certificate file","date-form":"Date format in log message","data-folder":"Path to folder, that will contains data (Relative or Absolute)","log-format":"Log message format","remote-log":"Enables remote logging and logs reading from the gateway","backup-count":"If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",storage:"Provides configuration for saving incoming data before it is sent to the platform","max-file-count":"Maximum count of file that will be created","max-read-count":"Count of messages to get from storage and send to ThingsBoard","max-records":"Maximum count of records that will be stored in one file","read-record-count":"Count of messages to get from storage and send to ThingsBoard","max-records-count":"Maximum count of data in storage before send to ThingsBoard","ttl-check-hour":"How often will Gateway check data for obsolescence","ttl-messages-day":"Maximum days that storage will save data",commands:"Commands for collecting additional statistic",attribute:"Statistic telemetry key",timeout:"Timeout for command executing",command:"The result of the command execution, will be used as the value for telemetry","check-device-activity":"Enables monitor the activity of each connected device","inactivity-timeout":"Time after whose the gateway will disconnect device","inactivity-period":"Periodicity of device activity check","minimal-pack-delay":"Delay between sending packs of messages (Decreasing this setting results in increased CPU usage)",qos:"Quality of Service in MQTT messaging (0 - at most once, 1 - at least once)","server-port":"Network port on which GRPC server will listen for incoming connections.","grpc-keep-alive-timeout":"Maximum time the server should wait for a keepalive ping response before considering the connection dead.","grpc-keep-alive":"Duration between two successive keepalive ping messages when there is no active RPC call.","grpc-min-time-between-pings":"Minimum amount of time the server should wait between sending keepalive ping messages","grpc-max-pings-without-data":"Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.","grpc-min-ping-interval-without-data":"Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.","permit-without-calls":"Allow server to keep the GRPC connection alive even when there are no active RPC calls."}},Ko={"add-entry":"Adicionar configuração","connector-add":"Adicionar novo conector","connector-enabled":"Habilitar conector","connector-name":"Nome do conector","connector-name-required":"O nome do conector é obrigatório.","connector-type":"Tipo de conector","connector-type-required":"O tipo de conector é obrigatório.",connectors:"Configuração de conectores","create-new-gateway":"Criar um novo gateway","create-new-gateway-text":"Tem certeza de que deseja criar um novo gateway com o nome: '{{gatewayName}}'?",delete:"Excluir configuração","download-tip":"Download de arquivo de configuração",gateway:"Gateway","gateway-exists":"Já existe um dispositivo com o mesmo nome.","gateway-name":"Nome do gateway","gateway-name-required":"O nome do gateway é obrigatório.","gateway-saved":"A configuração do gateway foi salva corretamente.","json-parse":"JSON inválido.","json-required":"O campo não pode estar em branco.","no-connectors":"Sem conectores","no-data":"Sem configurações","no-gateway-found":"Nenhum gateway encontrado.","no-gateway-matching":" '{{item}}' não encontrado.","path-logs":"Caminho para arquivos de log","path-logs-required":"O caminho é obrigatório",remote:"Configuração remota","remote-logging-level":"Nível de registro em log","remove-entry":"Remover configuração","save-tip":"Salvar arquivo de configuração","security-type":"Tipo de segurança","security-types":{"access-token":"Token de Acesso",tls:"TLS"},storage:"Armazenamento","storage-max-file-records":"Número máximo de registros em arquivo","storage-max-files":"Número máximo de arquivos","storage-max-files-min":"O número mínimo é 1.","storage-max-files-pattern":"O número não é válido.","storage-max-files-required":"O número é obrigatório.","storage-max-records":"Número máximo de registros em armazenamento","storage-max-records-min":"O número mínimo de registros é 1.","storage-max-records-pattern":"O número não é válido.","storage-max-records-required":"O número máximo de registros é obrigatório.","storage-pack-size":"Tamanho máximo de pacote de eventos","storage-pack-size-min":"O número mínimo é 1.","storage-pack-size-pattern":"O número não é válido.","storage-pack-size-required":"O tamanho máximo de pacote de eventos é obrigatório.","storage-path":"Caminho de armazenamento","storage-path-required":"O caminho de armazenamento é obrigatório.","storage-type":"Tipo de armazenamento","storage-types":{"file-storage":"Armazenamento de arquivo","memory-storage":"Armazenamento de memória"},thingsboard:"ThingsBoard","thingsboard-host":"Host ThingsBoard","thingsboard-host-required":"O host é obrigatório.","thingsboard-port":"Porta ThingsBoard","thingsboard-port-max":"O número máximo de portas é 65535.","thingsboard-port-min":"O número mínimo de portas é 1.","thingsboard-port-pattern":"A porta não é válida.","thingsboard-port-required":"A porta é obrigatória.",tidy:"Tidy","tidy-tip":"Config Tidy JSON","title-connectors-json":"Configuração do conector {{typeName}}","tls-path-ca-certificate":"Caminho para certificado de Autoridade de Certificação no gateway","tls-path-client-certificate":"Caminho para certificado de cliente no gateway","tls-path-private-key":"Caminho para chave privada no gateway","toggle-fullscreen":"Alternar tela inteira","transformer-json-config":"Configuração JSON*","update-config":"Adicionar/atualizar configuração de JSON"},$o={"add-entry":"Dodaj konfiguracijo","connector-add":"Dodaj nov priključek","connector-enabled":"Omogoči priključek","connector-name":"Ime priključka","connector-name-required":"Ime priključka je obvezno.","connector-type":"Vrsta priključka","connector-type-required":"Zahteva se vrsta priključka.",connectors:"Konfiguracija priključkov","create-new-gateway":"Ustvari nov prehod","create-new-gateway-text":"Ali ste prepričani, da želite ustvariti nov prehod z imenom: '{{gatewayName}}'?",delete:"Izbriši konfiguracijo","download-tip":"Prenos konfiguracijske datoteke",gateway:"Prehod","gateway-exists":"Naprava z istim imenom že obstaja.","gateway-name":"Ime prehoda","gateway-name-required":"Ime prehoda je obvezno.","gateway-saved":"Konfiguracija prehoda je uspešno shranjena.","json-parse":"Neveljaven JSON.","json-required":"Polje ne sme biti prazno.","no-connectors":"Ni priključkov","no-data":"Brez konfiguracij","no-gateway-found":"Prehod ni najden.","no-gateway-matching":" '{{item}}' ni mogoče najti.","path-logs":"Pot do dnevniških datotek","path-logs-required":"Pot je obvezna.",remote:"Oddaljena konfiguracija","remote-logging-level":"Raven beleženja","remove-entry":"Odstrani konfiguracijo","save-tip":"Shrani konfiguracijsko datoteko","security-type":"Vrsta zaščite","security-types":{"access-token":"Dostopni žeton",tls:"TLS"},storage:"Shramba","storage-max-file-records":"Največ zapisov v datoteki","storage-max-files":"Največje število datotek","storage-max-files-min":"Najmanjše število je 1.","storage-max-files-pattern":"Številka ni veljavna.","storage-max-files-required":"Številka je obvezna.","storage-max-records":"Največ zapisov v pomnilniku","storage-max-records-min":"Najmanjše število zapisov je 1.","storage-max-records-pattern":"Številka ni veljavna.","storage-max-records-required":"Zahtevan je največ zapisov.","storage-pack-size":"Največja velikost paketa dogodkov","storage-pack-size-min":"Najmanjše število je 1.","storage-pack-size-pattern":"Številka ni veljavna.","storage-pack-size-required":"Zahtevana je največja velikost paketa dogodkov.","storage-path":"Pot pomnilnika","storage-path-required":"Zahtevana je pot do pomnilnika.","storage-type":"Vrsta pomnilnika","storage-types":{"file-storage":"Shramba datotek","memory-storage":"Spomin pomnilnika"},thingsboard:"ThingsBoard","thingsboard-host":"Gostitelj ThingsBoard","thingsboard-host-required":"Potreben je gostitelj.","thingsboard-port":"Vrata ThingsBoard","thingsboard-port-max":"Največja številka vrat je 65535.","thingsboard-port-min":"Najmanjša številka vrat je 1.","thingsboard-port-pattern":"Vrata niso veljavna.","thingsboard-port-required":"Potrebna so vrata.",tidy:"Urejeno","tidy-tip":"Urejena konfiguracija JSON","title-connectors-json":"Konfiguracija konektorja {{typeName}}","tls-path-ca-certificate":"Pot do potrdila CA na prehodu","tls-path-client-certificate":"Pot do potrdila stranke na prehodu","tls-path-private-key":"Pot do zasebnega ključa na prehodu","toggle-fullscreen":"Preklop na celozaslonski način","transformer-json-config":"Konfiguracija JSON *","update-config":"Dodaj / posodobi konfiguracijo JSON"},Yo={"add-entry":"Yapılandırma ekle","connector-add":"Yeni bağlayıcı ekle","connector-enabled":"Bağlayıcıyı etkinleştir","connector-name":"Bağlayıcı adı","connector-name-required":"Bağlayıcı adı gerekli.","connector-type":"Bağlayıcı tipi","connector-type-required":"Bağlayıcı türü gerekli.",connectors:"Bağlayıcıların yapılandırması","create-new-gateway":"Yeni bir ağ geçidi oluştur","create-new-gateway-text":"'{{gatewayName}}' adında yeni bir ağ geçidi oluşturmak istediğinizden emin misiniz?",delete:"Yapılandırmayı sil","download-tip":"Yapılandırma dosyasını indirin",gateway:"Ağ geçidi","gateway-exists":"Aynı ada sahip cihaz zaten var.","gateway-name":"Ağ geçidi adı","gateway-name-required":"Ağ geçidi adı gerekli.","gateway-saved":"Ağ geçidi yapılandırması başarıyla kaydedildi.","json-parse":"Geçerli bir JSON değil.","json-required":"Alan boş olamaz.","no-connectors":"Bağlayıcı yok","no-data":"Yapılandırma yok","no-gateway-found":"Ağ geçidi bulunamadı.","no-gateway-matching":" '{{item}}' bulunamadı.","path-logs":"Log dosyaları yolu","path-logs-required":"Log dosyaları dizini gerekli.",remote:"Uzaktan yapılandırma","remote-logging-level":"Loglama seviyesi","remove-entry":"Yapılandırmayı kaldır","save-tip":"Yapılandırma dosyasını kaydet","security-type":"Güvenlik türü","security-types":{"access-token":"Access Token",tls:"TLS"},storage:"Depolama","storage-max-file-records":"Dosyadaki maksimum kayıt","storage-max-files":"Maksimum dosya sayısı","storage-max-files-min":"Minimum sayı 1'dir.","storage-max-files-pattern":"Sayı geçerli değil.","storage-max-files-required":"Sayı gerekli.","storage-max-records":"Depodaki maksimum kayıt","storage-max-records-min":"Minimum kayıt sayısı 1'dir.","storage-max-records-pattern":"Sayı geçerli değil.","storage-max-records-required":"Maksimum kayıt gerekli.","storage-pack-size":"Maksimum etkinlik paketi boyutu","storage-pack-size-min":"Minimum sayı 1'dir.","storage-pack-size-pattern":"Sayı geçerli değil.","storage-pack-size-required":"Maksimum etkinlik paketi boyutu gerekli.","storage-path":"Depolama yolu","storage-path-required":"Depolama yolu gerekli.","storage-type":"Depolama türü","storage-types":{"file-storage":"Dosya depolama","memory-storage":"Bellek depolama"},thingsboard:"ThingsBoard","thingsboard-host":"ThingsBoard host","thingsboard-host-required":"Host gerekli.","thingsboard-port":"ThingsBoard port","thingsboard-port-max":"Maksimum port numarası 65535.","thingsboard-port-min":"Minimum port numarası 1'dir.","thingsboard-port-pattern":"Port geçerli değil.","thingsboard-port-required":"Port gerekli.",tidy:"Tidy","tidy-tip":"Tidy config JSON","title-connectors-json":"Connector {{typeName}} configuration","tls-path-ca-certificate":"Path to CA certificate on gateway","tls-path-client-certificate":"Path to client certificate on gateway","tls-path-private-key":"Path to private key on gateway","toggle-fullscreen":"Toggle fullscreen","transformer-json-config":"Configuration JSON*","update-config":"Add/update configuration JSON"},Qo={"add-entry":"添加配置",advanced:"高级","checking-device-activity":"检查设备活动",command:"Docker命令","command-copied-message":"Docker命令已复制到剪贴板",configuration:"配置","connector-add":"添加连接器","connector-enabled":"启用连接器","connector-name":"连接器名称","connector-name-required":"连接器名称必填。","connector-type":"连接器类型","connector-type-required":"连接器类型必填。",connectors:"连接器配置","connectors-config":"连接器配置","connectors-table-enabled":"已启用","connectors-table-name":"名称","connectors-table-type":"类型","connectors-table-status":"状态","connectors-table-actions":"操作","connectors-table-key":"键","connectors-table-class":"类","rpc-command-send":"发送","rpc-command-result":"结果","rpc-command-edit-params":"编辑参数","gateway-configuration":"通用配置","create-new-gateway":"创建网关","create-new-gateway-text":"确定要创建名为 '{{gatewayName}}' 的新网关？","created-time":"创建时间","configuration-delete-dialog-header":"配置将被删除","configuration-delete-dialog-body":"只有对网关进行物理访问时，才有可能关闭远程配置。所有先前的配置都将被删除。<br><br>\n要关闭配置，请在下面输入网关名称","configuration-delete-dialog-input":"网关名称","configuration-delete-dialog-input-required":"网关名称是必需的","configuration-delete-dialog-confirm":"关闭",delete:"删除配置","download-tip":"下载配置","drop-file":"将文件拖放到此处或",gateway:"网关","gateway-exists":"同名设备已存在。","gateway-name":"网关名称","gateway-name-required":"网关名称必填。","gateway-saved":"已成功保存网关配置。",grpc:"GRPC","grpc-keep-alive-timeout":"保持连接超时（毫秒）","grpc-keep-alive-timeout-required":"需要保持连接超时","grpc-keep-alive-timeout-min":"保持连接超时不能小于1","grpc-keep-alive-timeout-pattern":"保持连接超时无效","grpc-keep-alive":"保持连接（毫秒）","grpc-keep-alive-required":"需要保持连接","grpc-keep-alive-min":"保持连接不能小于1","grpc-keep-alive-pattern":"保持连接无效","grpc-min-time-between-pings":"最小Ping间隔（毫秒）","grpc-min-time-between-pings-required":"需要最小Ping间隔","grpc-min-time-between-pings-min":"最小Ping间隔不能小于1","grpc-min-time-between-pings-pattern":"最小Ping间隔无效","grpc-min-ping-interval-without-data":"无数据时的最小Ping间隔（毫秒）","grpc-min-ping-interval-without-data-required":"需要无数据时的最小Ping间隔","grpc-min-ping-interval-without-data-min":"无数据时的最小Ping间隔不能小于1","grpc-min-ping-interval-without-data-pattern":"无数据时的最小Ping间隔无效","grpc-max-pings-without-data":"无数据时的最大Ping数","grpc-max-pings-without-data-required":"需要无数据时的最大Ping数","grpc-max-pings-without-data-min":"无数据时的最大Ping数不能小于1","grpc-max-pings-without-data-pattern":"无数据时的最大Ping数无效","inactivity-check-period-seconds":"不活跃检查期（秒）","inactivity-check-period-seconds-required":"需要不活跃检查期","inactivity-check-period-seconds-min":"不活跃检查期不能小于1","inactivity-check-period-seconds-pattern":"不活跃检查期无效","inactivity-timeout-seconds":"不活跃超时（秒）","inactivity-timeout-seconds-required":"需要不活跃超时","inactivity-timeout-seconds-min":"不活跃超时不能小于1","inactivity-timeout-seconds-pattern":"不活跃超时无效","json-parse":"无效的JSON。","json-required":"字段不能为空。",logs:{logs:"日志",days:"天",hours:"小时",minutes:"分钟",seconds:"秒","date-format":"日期格式","date-format-required":"需要日期格式","log-format":"日志格式","log-type":"日志类型","log-format-required":"需要日志格式",remote:"远程日志记录","remote-logs":"远程日志",local:"本地日志记录",level:"日志级别","file-path":"文件路径","file-path-required":"需要文件路径","saving-period":"日志保存期限","saving-period-min":"日志保存期限不能小于1","saving-period-required":"需要日志保存期限","backup-count":"备份数量","backup-count-min":"备份数量不能小于1","backup-count-required":"需要备份数量"},"min-pack-send-delay":"最小包发送延迟（毫秒）","min-pack-send-delay-required":"最小包发送延迟是必需的","min-pack-send-delay-min":"最小包发送延迟不能小于0","no-connectors":"无连接器","no-data":"没有配置","no-gateway-found":"未找到网关。","no-gateway-matching":"未找到 '{{item}}' 。","path-logs":"日志文件的路径","path-logs-required":"路径是必需的。","permit-without-calls":"保持连接许可，无需响应",remote:"远程配置","remote-logging-level":"日志记录级别","remove-entry":"删除配置","remote-shell":"远程Shell","remote-configuration":"远程配置",other:"其他","save-tip":"保存配置","security-type":"安全类型","security-types":{"access-token":"访问令牌","username-password":"用户名和密码",tls:"TLS","tls-access-token":"TLS + 访问令牌","tls-private-key":"TLS + 私钥"},"server-port":"服务器端口",statistics:{statistic:"统计信息",statistics:"统计信息","statistic-commands-empty":"无可用统计信息",commands:"命令","send-period":"统计信息发送周期（秒）","send-period-required":"统计信息发送周期是必需的","send-period-min":"统计信息发送周期不能小于60","send-period-pattern":"统计信息发送周期无效","check-connectors-configuration":"检查连接器配置（秒）","check-connectors-configuration-required":"检查连接器配置是必需的","check-connectors-configuration-min":"检查连接器配置不能小于1","check-connectors-configuration-pattern":"检查连接器配置无效",add:"添加命令",timeout:"超时时间","timeout-ms":"超时时间（毫秒）","timeout-required":"超时时间是必需的","timeout-min":"超时时间不能小于1","timeout-pattern":"超时时间无效","attribute-name":"属性名称","attribute-name-required":"属性名称是必需的",command:"命令","command-required":"命令是必需的","command-pattern":"命令无效",remove:"删除命令"},storage:"存储","storage-max-file-records":"文件中的最大记录数","storage-max-files":"最大文件数","storage-max-files-min":"最小值为1。","storage-max-files-pattern":"数字无效。","storage-max-files-required":"数字是必需的。","storage-max-records":"存储中的最大记录数","storage-max-records-min":"最小记录数为1。","storage-max-records-pattern":"数字无效。","storage-max-records-required":"最大记录项必填。","storage-read-record-count":"存储中的读取记录数","storage-read-record-count-min":"最小记录数为1。","storage-read-record-count-pattern":"数字不合法。","storage-read-record-count-required":"需要读取记录数。","storage-max-read-record-count":"存储中的最大读取记录数","storage-max-read-record-count-min":"最小记录数为1。","storage-max-read-record-count-pattern":"数字不合法。","storage-max-read-record-count-required":"最大读取记录数必需。","storage-data-folder-path":"数据文件夹路径","storage-data-folder-path-required":"需要数据文件夹路径。","storage-pack-size":"最大事件包大小","storage-pack-size-min":"最小值为1。","storage-pack-size-pattern":"数字无效。","storage-pack-size-required":"最大事件包大小必填。","storage-path":"存储路径","storage-path-required":"存储路径必填。","storage-type":"存储类型","storage-types":{"file-storage":"文件存储","memory-storage":"内存存储",sqlite:"SQLITE"},thingsboard:"ThingsBoard",general:"常规","thingsboard-host":"ThingsBoard主机","thingsboard-host-required":"主机必填。","thingsboard-port":"ThingsBoard端口","thingsboard-port-max":"最大端口号为65535。","thingsboard-port-min":"最小端口号为1。","thingsboard-port-pattern":"端口无效。","thingsboard-port-required":"端口必填。",tidy:"整理","tidy-tip":"整理配置JSON","title-connectors-json":"连接器 {{typeName}} 配置","tls-path-ca-certificate":"网关上CA证书的路径","tls-path-client-certificate":"网关上客户端证书的路径","messages-ttl-check-in-hours":"消息TTL检查小时数","messages-ttl-check-in-hours-required":"需要提供消息TTL检查小时数。","messages-ttl-check-in-hours-min":"最小值为1。","messages-ttl-check-in-hours-pattern":"数字无效。","messages-ttl-in-days":"消息TTL天数","messages-ttl-in-days-required":"需要提供消息TTL天数。","messages-ttl-in-days-min":"最小值为1。","messages-ttl-in-days-pattern":"数字无效。","mqtt-qos":"QoS","mqtt-qos-required":"需要提供QoS","mqtt-qos-range":"QoS值的范围是从0到1","tls-path-private-key":"网关上私钥的路径","toggle-fullscreen":"切换全屏","transformer-json-config":"配置JSON*","update-config":"添加/更新配置JSON",hints:{"remote-configuration":"启用对网关的远程配置和管理","remote-shell":"通过远程Shell小部件启用对网关操作系统的远程控制",host:"ThingsBoard 主机名或IP地址",port:"ThingsBoard MQTT服务端口",token:"ThingsBoard 网关访问令牌","client-id":"ThingsBoard 网关MQTT客户端ID",username:"ThingsBoard 网关MQTT用户名",password:"ThingsBoard 网关MQTT密码","ca-cert":"CA证书文件的路径","date-form":"日志消息中的日期格式","data-folder":"包含数据的文件夹的路径（相对或绝对路径）","log-format":"日志消息格式","remote-log":"启用对网关的远程日志记录和日志读取","backup-count":"如果备份计数大于0，则在执行轮换时，最多保留备份计数个文件-最旧的文件将被删除",storage:"提供将数据发送到平台之前保存传入数据的配置","max-file-count":"将创建的文件的最大数量","max-read-count":"从存储中获取的消息计数并发送到ThingsBoard","max-records":"一个文件中存储的最大记录数","read-record-count":"从存储中获取的消息计数并发送到ThingsBoard","max-records-count":"在将数据发送到ThingsBoard之前，存储中的最大数据计数","ttl-check-hour":"网关多久检查一次数据是否过时","ttl-messages-day":"存储将保存数据的最大天数",commands:"用于收集附加统计信息的命令",attribute:"统计遥测键",timeout:"命令执行的超时时间",command:"命令执行的结果，将用作遥测的值","check-device-activity":"启用监视每个连接设备的活动","inactivity-timeout":"在此时间后，网关将断开设备的连接","inactivity-period":"设备活动检查的周期","minimal-pack-delay":"发送消息包之间的延迟（减小此设置会导致增加CPU使用率）",qos:"MQTT消息传递的服务质量（0-至多一次，1-至少一次）","server-port":"GRPC服务器侦听传入连接的网络端口","grpc-keep-alive-timeout":"在考虑连接死亡之前，服务器等待keepalive ping响应的最长时间","grpc-keep-alive":"没有活动RPC调用时两个连续keepalive ping消息之间的持续时间","grpc-min-time-between-pings":"服务器在发送keepalive ping消息之间应等待的最小时间量","grpc-max-pings-without-data":"在没有接收到任何数据之前，服务器可以发送的keepalive ping消息的最大数量，然后将连接视为死亡","grpc-min-ping-interval-without-data":"在没有发送或接收数据时，服务器在发送keepalive ping消息之间应等待的最小时间量","permit-without-calls":"允许服务器在没有活动RPC调用时保持GRPC连接活动"},"docker-label":"使用以下指令在 Docker compose 中运行 IoT 网关，并为选定的设备提供凭据","install-docker-compose":"使用以下说明下载、安装和设置 Docker Compose","download-configuration-file":"下载配置文件","download-docker-compose":"下载您的网关的 docker-compose.yml 文件","launch-gateway":"启动网关","launch-docker-compose":"在包含 docker-compose.yml 文件的文件夹中，使用以下命令在终端中启动网关"},Jo={"add-entry":"增加配置","connector-add":"增加新連接器","connector-enabled":"啟用連接器","connector-name":"連接器名稱","connector-name-required":"需要連接器名稱。","connector-type":"連接器類型","connector-type-required":"需要連接器類型。",connectors:"連接器配置","create-new-gateway":"建立新閘道","create-new-gateway-text":"您確定要建立一個名稱為：'{{gatewayName}}'的新閘道嗎？",delete:"刪除配置","download-tip":"下載配置文件",gateway:"閘道","gateway-exists":"同名設備已存在。","gateway-name":"閘道名稱","gateway-name-required":"需要閘道名稱。","gateway-saved":"閘道配置已成功保存。","json-parse":"無效的JSON","json-required":"欄位不能為空。","no-connectors":"無連接器","no-data":"無配置","no-gateway-found":"未找到閘道。","no-gateway-matching":" 未找到'{{item}}'。","path-logs":"日誌文件的路徑","path-logs-required":"需要路徑。",remote:"移除配置","remote-logging-level":"日誌記錄級別","remove-entry":"移除配置","save-tip":"保存配置文件","security-type":"安全類型","security-types":{"access-token":"訪問Token",tls:"TLS"},storage:"貯存","storage-max-file-records":"文件中的最大紀錄","storage-max-files":"最大文件數","storage-max-files-min":"最小數量為1。","storage-max-files-pattern":"號碼無效。","storage-max-files-required":"需要號碼。","storage-max-records":"存儲中的最大紀錄","storage-max-records-min":"最小紀錄數為1。","storage-max-records-pattern":"號碼無效。","storage-max-records-required":"需要最大紀錄數","storage-pack-size":"最大事件包大小","storage-pack-size-min":"最小數量為1。","storage-pack-size-pattern":"號碼無效．","storage-pack-size-required":"需要最大事件包大小","storage-path":"存儲路徑","storage-path-required":"需要存儲路徑。","storage-type":"存儲類型","storage-types":{"file-storage":"文件存儲","memory-storage":"記憶體存儲"},thingsboard:"ThingsBoard","thingsboard-host":"ThingsBoard主機","thingsboard-host-required":"需要主機。","thingsboard-port":"ThingsBoard連接埠","thingsboard-port-max":"最大埠號為 65535。","thingsboard-port-min":"最小埠號為1。","thingsboard-port-pattern":"連接埠無效。","thingsboard-port-required":"需要連接埠。",tidy:"整理","tidy-tip":"整理配置JSON","title-connectors-json":"連接器{{typeName}}配置","tls-path-ca-certificate":"閘道上CA證書的路徑","tls-path-client-certificate":"閘道上用戶端憑據的路徑","tls-path-private-key":"閘道上的私鑰路徑","toggle-fullscreen":"切換全螢幕","transformer-json-config":"配置JSON*","update-config":"增加/更新配置JSON"};const Xo=[ca,pa,Fa,Da,Aa,Na,Pa,eo,Eo,io,ao,oo,qo,to,Go,no];class Zo{constructor(e){this.translate=e,function(e){e.setTranslation("en_US",Oo,!0),e.setTranslation("ar_AE",Ro,!0),e.setTranslation("ca_ES",Vo,!0),e.setTranslation("cs_CZ",Bo,!0),e.setTranslation("da_DK",Uo,!0),e.setTranslation("es_ES",_o,!0),e.setTranslation("ko_KR",Ho,!0),e.setTranslation("lt_LT",zo,!0),e.setTranslation("nl_BE",Wo,!0),e.setTranslation("pl_PL",jo,!0),e.setTranslation("pt_BR",Ko,!0),e.setTranslation("sl_SI",$o,!0),e.setTranslation("tr_TR",Yo,!0),e.setTranslation("zh_CN",Qo,!0),e.setTranslation("zh_TW",Jo,!0)}(e)}static{this.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Zo,deps:[{token:Y.TranslateService}],target:t.ɵɵFactoryTarget.NgModule})}static{this.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"18.2.6",ngImport:t,type:Zo,declarations:[ca,pa,Fa,Da,Aa,Na,Pa,eo,Eo,io,ao,oo,qo,to,Go,no],imports:[H,D,Q,Ma,Ea,qa,va,Ia,Lo,ko,Fo,po,Ao,No,go,Ta,Do,Po,ka,Ca,Sa],exports:[ca,pa,Fa,Da,Aa,Na,Pa,eo,Eo,io,ao,oo,qo,to,Go,no]})}static{this.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Zo,providers:[va],imports:[H,D,Q,Ma,Ea,qa,Ia,Lo,ko,Fo,po,Ao,No,go,Do,Po]})}}e("GatewayExtensionModule",Zo),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"18.2.6",ngImport:t,type:Zo,decorators:[{type:u,args:[{declarations:Xo,imports:[H,D,Q,Ma,Ea,qa,va,Ia,Lo,ko,Fo,po,Ao,No,go,Ta,Do,Po,ka,Ca,Sa],exports:Xo,providers:[va]}]}],ctorParameters:()=>[{type:Y.TranslateService}]})}}}));//# sourceMappingURL=gateway-management-extension.js.map
diff --git a/application/src/main/data/upgrade/3.8.1/schema_update.sql b/application/src/main/data/upgrade/3.8.1/schema_update.sql
new file mode 100644
index 0000000000..1084dd374f
--- /dev/null
+++ b/application/src/main/data/upgrade/3.8.1/schema_update.sql
@@ -0,0 +1,26 @@
+--
+-- Copyright © 2016-2024 The Thingsboard Authors
+--
+-- Licensed under the Apache License, Version 2.0 (the "License");
+-- you may not use this file except in compliance with the License.
+-- You may obtain a copy of the License at
+--
+--     http://www.apache.org/licenses/LICENSE-2.0
+--
+-- Unless required by applicable law or agreed to in writing, software
+-- distributed under the License is distributed on an "AS IS" BASIS,
+-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+-- See the License for the specific language governing permissions and
+-- limitations under the License.
+--
+
+ALTER TABLE user_credentials ADD COLUMN IF NOT EXISTS last_login_ts BIGINT;
+UPDATE user_credentials c SET last_login_ts = (SELECT (additional_info::json ->> 'lastLoginTs')::bigint FROM tb_user u WHERE u.id = c.user_id)
+  WHERE last_login_ts IS NULL;
+
+ALTER TABLE user_credentials ADD COLUMN IF NOT EXISTS failed_login_attempts INT;
+UPDATE user_credentials c SET failed_login_attempts = (SELECT (additional_info::json ->> 'failedLoginAttempts')::int FROM tb_user u WHERE u.id = c.user_id)
+  WHERE failed_login_attempts IS NULL;
+
+UPDATE tb_user SET additional_info = (additional_info::jsonb - 'lastLoginTs' - 'failedLoginAttempts' - 'userCredentialsEnabled')::text
+  WHERE additional_info IS NOT NULL AND additional_info != 'null';
diff --git a/application/src/main/java/org/thingsboard/server/controller/AdminController.java b/application/src/main/java/org/thingsboard/server/controller/AdminController.java
index a2115360d8..d65cc58d87 100644
--- a/application/src/main/java/org/thingsboard/server/controller/AdminController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/AdminController.java
@@ -235,7 +235,15 @@ public class AdminController extends BaseController {
                 }
             }
             String email = getCurrentUser().getEmail();
-            mailService.sendTestMail(adminSettings.getJsonValue(), email);
+            try {
+                mailService.sendTestMail(adminSettings.getJsonValue(), email);
+            } catch (ThingsboardException e) {
+                String error = e.getMessage();
+                if (e.getCause() != null) {
+                    error += ": " + e.getCause().getMessage(); // showing actual underlying error for testing purposes
+                }
+                throw new ThingsboardException(error, e.getErrorCode());
+            }
         }
     }
 
diff --git a/application/src/main/java/org/thingsboard/server/controller/AuthController.java b/application/src/main/java/org/thingsboard/server/controller/AuthController.java
index 17f7930eff..600980316a 100644
--- a/application/src/main/java/org/thingsboard/server/controller/AuthController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/AuthController.java
@@ -82,7 +82,9 @@ public class AuthController extends BaseController {
     @GetMapping(value = "/auth/user")
     public User getUser() throws ThingsboardException {
         SecurityUser securityUser = getCurrentUser();
-        return userService.findUserById(securityUser.getTenantId(), securityUser.getId());
+        User user = userService.findUserById(securityUser.getTenantId(), securityUser.getId());
+        checkDashboardInfo(user.getAdditionalInfo());
+        return user;
     }
 
     @ApiOperation(value = "Logout (logout)",
@@ -215,7 +217,7 @@ public class AuthController extends BaseController {
             try {
                 mailService.sendAccountActivatedEmail(loginUrl, email);
             } catch (Exception e) {
-                log.info("Unable to send account activation email [{}]", e.getMessage());
+                log.warn("Unable to send account activation email [{}]", e.getMessage());
             }
         }
 
@@ -254,7 +256,11 @@ public class AuthController extends BaseController {
             String baseUrl = systemSecurityService.getBaseUrl(user.getTenantId(), user.getCustomerId(), request);
             String loginUrl = String.format("%s/login", baseUrl);
             String email = user.getEmail();
-            mailService.sendPasswordWasResetEmail(loginUrl, email);
+            try {
+                mailService.sendPasswordWasResetEmail(loginUrl, email);
+            } catch (Exception e) {
+                log.warn("Couldn't send password was reset email: {}", e.getMessage());
+            }
 
             eventPublisher.publishEvent(new UserCredentialsInvalidationEvent(securityUser.getId()));
 
diff --git a/application/src/main/java/org/thingsboard/server/controller/BaseController.java b/application/src/main/java/org/thingsboard/server/controller/BaseController.java
index d266c7e6cc..da7d6243fc 100644
--- a/application/src/main/java/org/thingsboard/server/controller/BaseController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/BaseController.java
@@ -15,6 +15,7 @@
  */
 package org.thingsboard.server.controller;
 
+import com.fasterxml.jackson.databind.JsonNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.util.concurrent.ListenableFuture;
 import jakarta.mail.MessagingException;
@@ -37,6 +38,7 @@ import org.springframework.web.bind.annotation.ExceptionHandler;
 import org.springframework.web.context.request.async.AsyncRequestTimeoutException;
 import org.springframework.web.context.request.async.DeferredResult;
 import org.thingsboard.common.util.DonAsynchron;
+import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.cluster.TbClusterService;
 import org.thingsboard.server.common.data.Customer;
 import org.thingsboard.server.common.data.Dashboard;
@@ -113,6 +115,7 @@ import org.thingsboard.server.common.data.rpc.Rpc;
 import org.thingsboard.server.common.data.rule.RuleChain;
 import org.thingsboard.server.common.data.rule.RuleChainType;
 import org.thingsboard.server.common.data.rule.RuleNode;
+import org.thingsboard.server.common.data.security.UserCredentials;
 import org.thingsboard.server.common.data.util.ThrowingBiFunction;
 import org.thingsboard.server.common.data.widget.WidgetTypeDetails;
 import org.thingsboard.server.common.data.widget.WidgetsBundle;
@@ -187,6 +190,8 @@ import java.util.stream.Collectors;
 
 import static org.thingsboard.server.common.data.StringUtils.isNotEmpty;
 import static org.thingsboard.server.common.data.query.EntityKeyType.ENTITY_FIELD;
+import static org.thingsboard.server.controller.ControllerConstants.DEFAULT_DASHBOARD;
+import static org.thingsboard.server.controller.ControllerConstants.HOME_DASHBOARD;
 import static org.thingsboard.server.controller.UserController.YOU_DON_T_HAVE_PERMISSION_TO_PERFORM_THIS_OPERATION;
 import static org.thingsboard.server.dao.service.Validator.validateId;
 
@@ -398,7 +403,7 @@ public abstract class BaseController {
                 || exception instanceof DataValidationException || cause instanceof IncorrectParameterException) {
             return new ThingsboardException(exception.getMessage(), ThingsboardErrorCode.BAD_REQUEST_PARAMS);
         } else if (exception instanceof MessagingException) {
-            return new ThingsboardException("Unable to send mail: " + exception.getMessage(), ThingsboardErrorCode.GENERAL);
+            return new ThingsboardException("Unable to send mail", ThingsboardErrorCode.GENERAL);
         } else if (exception instanceof AsyncRequestTimeoutException) {
             return new ThingsboardException("Request timeout", ThingsboardErrorCode.GENERAL);
         } else if (exception instanceof DataAccessException) {
@@ -872,11 +877,40 @@ public abstract class BaseController {
         }
     }
 
-    protected void processDashboardIdFromAdditionalInfo(ObjectNode additionalInfo, String requiredFields) throws ThingsboardException {
-        String dashboardId = additionalInfo.has(requiredFields) ? additionalInfo.get(requiredFields).asText() : null;
-        if (dashboardId != null && !dashboardId.equals("null")) {
-            if (dashboardService.findDashboardById(getTenantId(), new DashboardId(UUID.fromString(dashboardId))) == null) {
-                additionalInfo.remove(requiredFields);
+    protected void checkUserInfo(User user) throws ThingsboardException {
+        ObjectNode info;
+        if (user.getAdditionalInfo() instanceof ObjectNode additionalInfo) {
+            info = additionalInfo;
+            checkDashboardInfo(info);
+        } else {
+            info = JacksonUtil.newObjectNode();
+            user.setAdditionalInfo(info);
+        }
+
+        UserCredentials userCredentials = userService.findUserCredentialsByUserId(user.getTenantId(), user.getId());
+        info.put("userCredentialsEnabled", userCredentials.isEnabled());
+        info.put("lastLoginTs", userCredentials.getLastLoginTs());
+    }
+
+    protected void checkDashboardInfo(JsonNode additionalInfo) throws ThingsboardException {
+        checkDashboardInfo(additionalInfo, DEFAULT_DASHBOARD);
+        checkDashboardInfo(additionalInfo, HOME_DASHBOARD);
+    }
+
+    protected void checkDashboardInfo(JsonNode node, String dashboardField) throws ThingsboardException {
+        if (node instanceof ObjectNode additionalInfo) {
+            DashboardId dashboardId = Optional.ofNullable(additionalInfo.get(dashboardField))
+                    .filter(JsonNode::isTextual).map(JsonNode::asText)
+                    .map(id -> {
+                        try {
+                            return new DashboardId(UUID.fromString(id));
+                        } catch (IllegalArgumentException e) {
+                            return null;
+                        }
+                    }).orElse(null);
+
+            if (dashboardId != null && !dashboardService.existsById(getTenantId(), dashboardId)) {
+                additionalInfo.remove(dashboardField);
             }
         }
     }
diff --git a/application/src/main/java/org/thingsboard/server/controller/CustomerController.java b/application/src/main/java/org/thingsboard/server/controller/CustomerController.java
index 9ee8ae6cf8..8e388d26d4 100644
--- a/application/src/main/java/org/thingsboard/server/controller/CustomerController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/CustomerController.java
@@ -80,9 +80,7 @@ public class CustomerController extends BaseController {
         checkParameter(CUSTOMER_ID, strCustomerId);
         CustomerId customerId = new CustomerId(toUUID(strCustomerId));
         Customer customer = checkCustomerId(customerId, Operation.READ);
-        if (!customer.getAdditionalInfo().isNull()) {
-            processDashboardIdFromAdditionalInfo((ObjectNode) customer.getAdditionalInfo(), HOME_DASHBOARD);
-        }
+        checkDashboardInfo(customer.getAdditionalInfo(), HOME_DASHBOARD);
         return customer;
     }
 
@@ -181,7 +179,8 @@ public class CustomerController extends BaseController {
     public Customer getTenantCustomer(
             @Parameter(description = "A string value representing the Customer title.")
             @RequestParam String customerTitle) throws ThingsboardException {
-            TenantId tenantId = getCurrentUser().getTenantId();
+        TenantId tenantId = getCurrentUser().getTenantId();
         return checkNotNull(customerService.findCustomerByTenantIdAndTitle(tenantId, customerTitle), "Customer with title [" + customerTitle + "] is not found");
     }
+
 }
diff --git a/application/src/main/java/org/thingsboard/server/controller/TbResourceController.java b/application/src/main/java/org/thingsboard/server/controller/TbResourceController.java
index 8feb898a65..1161403e39 100644
--- a/application/src/main/java/org/thingsboard/server/controller/TbResourceController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/TbResourceController.java
@@ -44,10 +44,12 @@ import org.thingsboard.server.common.data.TbResourceInfo;
 import org.thingsboard.server.common.data.TbResourceInfoFilter;
 import org.thingsboard.server.common.data.exception.ThingsboardException;
 import org.thingsboard.server.common.data.id.TbResourceId;
+import org.thingsboard.server.common.data.id.TenantId;
 import org.thingsboard.server.common.data.lwm2m.LwM2mObject;
 import org.thingsboard.server.common.data.page.PageData;
 import org.thingsboard.server.common.data.page.PageLink;
 import org.thingsboard.server.common.data.security.Authority;
+import org.thingsboard.server.common.data.util.ThrowingSupplier;
 import org.thingsboard.server.config.annotations.ApiOperation;
 import org.thingsboard.server.queue.util.TbCoreComponent;
 import org.thingsboard.server.service.resource.TbResourceService;
@@ -106,13 +108,29 @@ public class TbResourceController extends BaseController {
                 .body(resource);
     }
 
+    @ApiOperation(value = "Download resource (downloadResource)",
+            notes = "Download resource with a given type and key for the given scope" + AVAILABLE_FOR_ANY_AUTHORIZED_USER)
+    @PreAuthorize("hasAnyAuthority('SYS_ADMIN', 'TENANT_ADMIN', 'CUSTOMER_USER')")
+    @GetMapping(value = "/resource/{resourceType}/{scope}/{key}")
+    public ResponseEntity<ByteArrayResource> downloadResourceIfChanged(@Parameter(description = "Type of the resource", schema = @Schema(allowableValues = {"lwm2m_model", "jks", "pkcs_12", "js_module", "dashboard"}))
+                                                                       @PathVariable("resourceType") String resourceTypeStr,
+                                                                       @Parameter(description = "Scope of the resource", schema = @Schema(allowableValues = {"system", "tenant"}))
+                                                                       @PathVariable String scope,
+                                                                       @Parameter(description = "Key of the resource, e.g. 'extension.js'")
+                                                                       @PathVariable String key,
+                                                                       @RequestHeader(name = HttpHeaders.IF_NONE_MATCH, required = false) String etag) throws ThingsboardException {
+
+        ResourceType resourceType = ResourceType.valueOf(resourceTypeStr.toUpperCase());
+        return downloadResourceIfChanged(() -> checkResourceInfo(scope, resourceType, key, Operation.READ), etag);
+    }
+
     @ApiOperation(value = "Download LWM2M Resource (downloadLwm2mResourceIfChanged)", notes = DOWNLOAD_RESOURCE_IF_NOT_CHANGED + SYSTEM_OR_TENANT_AUTHORITY_PARAGRAPH)
     @PreAuthorize("hasAnyAuthority('SYS_ADMIN', 'TENANT_ADMIN')")
     @GetMapping(value = "/resource/lwm2m/{resourceId}/download", produces = "application/xml")
     public ResponseEntity<ByteArrayResource> downloadLwm2mResourceIfChanged(@Parameter(description = RESOURCE_ID_PARAM_DESCRIPTION)
                                                                             @PathVariable(RESOURCE_ID) String strResourceId,
                                                                             @RequestHeader(name = HttpHeaders.IF_NONE_MATCH, required = false) String etag) throws ThingsboardException {
-        return downloadResourceIfChanged(ResourceType.LWM2M_MODEL, strResourceId, etag);
+        return downloadResourceIfChanged(strResourceId, etag);
     }
 
     @ApiOperation(value = "Download PKCS_12 Resource (downloadPkcs12ResourceIfChanged)", notes = DOWNLOAD_RESOURCE_IF_NOT_CHANGED + SYSTEM_OR_TENANT_AUTHORITY_PARAGRAPH)
@@ -121,7 +139,7 @@ public class TbResourceController extends BaseController {
     public ResponseEntity<ByteArrayResource> downloadPkcs12ResourceIfChanged(@Parameter(description = RESOURCE_ID_PARAM_DESCRIPTION)
                                                                              @PathVariable(RESOURCE_ID) String strResourceId,
                                                                              @RequestHeader(name = HttpHeaders.IF_NONE_MATCH, required = false) String etag) throws ThingsboardException {
-        return downloadResourceIfChanged(ResourceType.PKCS_12, strResourceId, etag);
+        return downloadResourceIfChanged(strResourceId, etag);
     }
 
     @ApiOperation(value = "Download JKS Resource (downloadJksResourceIfChanged)",
@@ -131,7 +149,7 @@ public class TbResourceController extends BaseController {
     public ResponseEntity<ByteArrayResource> downloadJksResourceIfChanged(@Parameter(description = RESOURCE_ID_PARAM_DESCRIPTION)
                                                                           @PathVariable(RESOURCE_ID) String strResourceId,
                                                                           @RequestHeader(name = HttpHeaders.IF_NONE_MATCH, required = false) String etag) throws ThingsboardException {
-        return downloadResourceIfChanged(ResourceType.JKS, strResourceId, etag);
+        return downloadResourceIfChanged(strResourceId, etag);
     }
 
     @ApiOperation(value = "Download JS Resource (downloadJsResourceIfChanged)", notes = DOWNLOAD_RESOURCE_IF_NOT_CHANGED + AVAILABLE_FOR_ANY_AUTHORIZED_USER)
@@ -140,7 +158,7 @@ public class TbResourceController extends BaseController {
     public ResponseEntity<ByteArrayResource> downloadJsResourceIfChanged(@Parameter(description = RESOURCE_ID_PARAM_DESCRIPTION)
                                                                          @PathVariable(RESOURCE_ID) String strResourceId,
                                                                          @RequestHeader(name = HttpHeaders.IF_NONE_MATCH, required = false) String etag) throws ThingsboardException {
-        return downloadResourceIfChanged(ResourceType.JS_MODULE, strResourceId, etag);
+        return downloadResourceIfChanged(strResourceId, etag);
     }
 
     @ApiOperation(value = "Get Resource Info (getResourceInfoById)",
@@ -211,6 +229,7 @@ public class TbResourceController extends BaseController {
         } else {
             Collections.addAll(resourceTypes, ResourceType.values());
             resourceTypes.remove(ResourceType.IMAGE);
+            resourceTypes.remove(ResourceType.DASHBOARD);
         }
         filter.resourceTypes(resourceTypes);
         if (Authority.SYS_ADMIN.equals(getCurrentUser().getAuthority())) {
@@ -271,7 +290,7 @@ public class TbResourceController extends BaseController {
                                                  @RequestParam String sortOrder,
                                                  @Parameter(description = SORT_PROPERTY_DESCRIPTION, schema = @Schema(allowableValues = {"id", "name"}, requiredMode = Schema.RequiredMode.REQUIRED))
                                                  @RequestParam String sortProperty,
-                                                 @Parameter(description = "LwM2M Object ids.",  array = @ArraySchema(schema = @Schema(type = "string")), required = true)
+                                                 @Parameter(description = "LwM2M Object ids.", array = @ArraySchema(schema = @Schema(type = "string")), required = true)
                                                  @RequestParam(required = false) String[] objectIds) throws ThingsboardException {
         return checkNotNull(tbResourceService.findLwM2mObject(getTenantId(), sortOrder, sortProperty, objectIds));
     }
@@ -288,30 +307,49 @@ public class TbResourceController extends BaseController {
         tbResourceService.delete(tbResource, getCurrentUser());
     }
 
-    private ResponseEntity<ByteArrayResource> downloadResourceIfChanged(ResourceType resourceType, String strResourceId, String etag) throws ThingsboardException {
+    private ResponseEntity<ByteArrayResource> downloadResourceIfChanged(String strResourceId, String etag) throws ThingsboardException {
         checkParameter(RESOURCE_ID, strResourceId);
         TbResourceId resourceId = new TbResourceId(toUUID(strResourceId));
+        return downloadResourceIfChanged(() -> checkResourceInfoId(resourceId, Operation.READ), etag);
+    }
+
+    private ResponseEntity<ByteArrayResource> downloadResourceIfChanged(ThrowingSupplier<TbResourceInfo> resourceInfoProvider,
+                                                                        String etag) throws ThingsboardException {
+        TbResourceInfo resourceInfo = resourceInfoProvider.get();
         if (etag != null) {
-            TbResourceInfo tbResourceInfo = checkResourceInfoId(resourceId, Operation.READ);
             etag = StringUtils.remove(etag, '\"'); // etag is wrapped in double quotes due to HTTP specification
-            if (etag.equals(tbResourceInfo.getEtag())) {
+            if (etag.equals(resourceInfo.getEtag())) {
                 return ResponseEntity.status(HttpStatus.NOT_MODIFIED)
-                        .eTag(tbResourceInfo.getEtag())
+                        .eTag(resourceInfo.getEtag())
                         .build();
             }
         }
 
-        TbResource tbResource = checkResourceId(resourceId, Operation.READ);
-
-        ByteArrayResource resource = new ByteArrayResource(tbResource.getData());
+        byte[] data = resourceService.getResourceData(resourceInfo.getTenantId(), resourceInfo.getId());
+        ByteArrayResource resource = new ByteArrayResource(data);
         return ResponseEntity.ok()
-                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + tbResource.getFileName())
-                .header("x-filename", tbResource.getFileName())
+                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + resourceInfo.getFileName())
+                .header("x-filename", resourceInfo.getFileName())
                 .contentLength(resource.contentLength())
-                .header("Content-Type", resourceType.getMediaType())
+                .header("Content-Type", resourceInfo.getResourceType().getMediaType())
                 .cacheControl(CacheControl.noCache())
-                .eTag(tbResource.getEtag())
+                .eTag(resourceInfo.getEtag())
                 .body(resource);
     }
 
+    private TbResourceInfo checkResourceInfo(String scope, ResourceType resourceType, String key, Operation operation) throws ThingsboardException {
+        TenantId tenantId;
+        if (scope.equals("tenant")) {
+            tenantId = getTenantId();
+        } else if (scope.equals("system")) {
+            tenantId = TenantId.SYS_TENANT_ID;
+        } else {
+            throw new IllegalArgumentException("Invalid scope");
+        }
+
+        TbResourceInfo resourceInfo = resourceService.findResourceInfoByTenantIdAndKey(tenantId, resourceType, key);
+        checkEntity(getCurrentUser(), checkNotNull(resourceInfo), operation);
+        return resourceInfo;
+    }
+
 }
diff --git a/application/src/main/java/org/thingsboard/server/controller/TenantController.java b/application/src/main/java/org/thingsboard/server/controller/TenantController.java
index fa6cae9bea..077510e29e 100644
--- a/application/src/main/java/org/thingsboard/server/controller/TenantController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/TenantController.java
@@ -15,7 +15,6 @@
  */
 package org.thingsboard.server.controller;
 
-import com.fasterxml.jackson.databind.node.ObjectNode;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.RequiredArgsConstructor;
@@ -79,9 +78,7 @@ public class TenantController extends BaseController {
         checkParameter(TENANT_ID, strTenantId);
         TenantId tenantId = TenantId.fromUUID(toUUID(strTenantId));
         Tenant tenant = checkTenantId(tenantId, Operation.READ);
-        if (!tenant.getAdditionalInfo().isNull()) {
-            processDashboardIdFromAdditionalInfo((ObjectNode) tenant.getAdditionalInfo(), HOME_DASHBOARD);
-        }
+        checkDashboardInfo(tenant.getAdditionalInfo(), HOME_DASHBOARD);
         return tenant;
     }
 
diff --git a/application/src/main/java/org/thingsboard/server/controller/UserController.java b/application/src/main/java/org/thingsboard/server/controller/UserController.java
index a71bd4dd38..b953fbe8d2 100644
--- a/application/src/main/java/org/thingsboard/server/controller/UserController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/UserController.java
@@ -16,7 +16,6 @@
 package org.thingsboard.server.controller;
 
 import com.fasterxml.jackson.databind.JsonNode;
-import com.fasterxml.jackson.databind.node.ObjectNode;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.media.Schema;
 import jakarta.servlet.http.HttpServletRequest;
@@ -79,7 +78,6 @@ import org.thingsboard.server.service.security.model.UserPrincipal;
 import org.thingsboard.server.service.security.model.token.JwtTokenFactory;
 import org.thingsboard.server.service.security.permission.Operation;
 import org.thingsboard.server.service.security.permission.Resource;
-import org.thingsboard.server.service.security.system.SystemSecurityService;
 
 import java.util.ArrayList;
 import java.util.Arrays;
@@ -92,8 +90,6 @@ import static org.thingsboard.server.controller.ControllerConstants.ALARM_ID_PAR
 import static org.thingsboard.server.controller.ControllerConstants.CUSTOMER_ID;
 import static org.thingsboard.server.controller.ControllerConstants.CUSTOMER_ID_PARAM_DESCRIPTION;
 import static org.thingsboard.server.controller.ControllerConstants.DASHBOARD_ID_PARAM_DESCRIPTION;
-import static org.thingsboard.server.controller.ControllerConstants.DEFAULT_DASHBOARD;
-import static org.thingsboard.server.controller.ControllerConstants.HOME_DASHBOARD;
 import static org.thingsboard.server.controller.ControllerConstants.PAGE_DATA_PARAMETERS;
 import static org.thingsboard.server.controller.ControllerConstants.PAGE_NUMBER_DESCRIPTION;
 import static org.thingsboard.server.controller.ControllerConstants.PAGE_SIZE_DESCRIPTION;
@@ -126,7 +122,6 @@ public class UserController extends BaseController {
 
     private final MailService mailService;
     private final JwtTokenFactory tokenFactory;
-    private final SystemSecurityService systemSecurityService;
     private final ApplicationEventPublisher eventPublisher;
     private final TbUserService tbUserService;
     private final EntityQueryService entityQueryService;
@@ -146,15 +141,7 @@ public class UserController extends BaseController {
         checkParameter(USER_ID, strUserId);
         UserId userId = new UserId(toUUID(strUserId));
         User user = checkUserId(userId, Operation.READ);
-        if (user.getAdditionalInfo().isObject()) {
-            ObjectNode additionalInfo = (ObjectNode) user.getAdditionalInfo();
-            processDashboardIdFromAdditionalInfo(additionalInfo, DEFAULT_DASHBOARD);
-            processDashboardIdFromAdditionalInfo(additionalInfo, HOME_DASHBOARD);
-            UserCredentials userCredentials = userService.findUserCredentialsByUserId(user.getTenantId(), user.getId());
-            if (userCredentials.isEnabled() && !additionalInfo.has("userCredentialsEnabled")) {
-                additionalInfo.put("userCredentialsEnabled", true);
-            }
-        }
+        checkUserInfo(user);
         return user;
     }
 
@@ -230,7 +217,11 @@ public class UserController extends BaseController {
         accessControlService.checkPermission(securityUser, Resource.USER, Operation.READ, user.getId(), user);
 
         UserActivationLink activationLink = tbUserService.getActivationLink(securityUser.getTenantId(), securityUser.getCustomerId(), user.getId(), request);
-        mailService.sendActivationEmail(activationLink.value(), activationLink.ttlMs(), email);
+        try {
+            mailService.sendActivationEmail(activationLink.value(), activationLink.ttlMs(), email);
+        } catch (Exception e) {
+            throw new ThingsboardException("Couldn't send user activation email", ThingsboardErrorCode.GENERAL);
+        }
     }
 
     @ApiOperation(value = "Get activation link (getActivationLink)",
diff --git a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java
index ccb9236cb8..4ae8d117be 100644
--- a/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java
+++ b/application/src/main/java/org/thingsboard/server/install/ThingsboardInstallService.java
@@ -140,6 +140,11 @@ public class ThingsboardInstallService {
                         case "3.7.0":
                             log.info("Upgrading ThingsBoard from version 3.7.0 to 3.8.0 ...");
                             databaseEntitiesUpgradeService.upgradeDatabase("3.7.0");
+                        case "3.8.0":
+                            log.info("Upgrading ThingsBoard from version 3.8.0 to 3.8.1 ...");
+                        case "3.8.1":
+                            log.info("Upgrading ThingsBoard from version 3.8.1 to 3.9.0 ...");
+                            databaseEntitiesUpgradeService.upgradeDatabase("3.8.1");
                             //TODO DON'T FORGET to update switch statement in the CacheCleanupService if you need to clear the cache
                             break;
                         default:
@@ -149,6 +154,7 @@ public class ThingsboardInstallService {
                     entityDatabaseSchemaService.createOrUpdateDeviceInfoView(persistToTelemetry);
                     log.info("Updating system data...");
                     dataUpdateService.upgradeRuleNodes();
+                    installScripts.loadSystemResources();
                     systemDataLoaderService.loadSystemWidgets();
                     installScripts.loadSystemLwm2mResources();
                     installScripts.loadSystemImages();
@@ -165,6 +171,7 @@ public class ThingsboardInstallService {
                 log.info("Installing DataBase schema for entities...");
 
                 entityDatabaseSchemaService.createDatabaseSchema();
+                entityDatabaseSchemaService.createSchemaVersion();
 
                 entityDatabaseSchemaService.createOrUpdateViewsAndFunctions();
                 entityDatabaseSchemaService.createOrUpdateDeviceInfoView(persistToTelemetry);
@@ -189,6 +196,7 @@ public class ThingsboardInstallService {
                 systemDataLoaderService.createDefaultTenantProfiles();
                 systemDataLoaderService.createAdminSettings();
                 systemDataLoaderService.createRandomJwtSettings();
+                installScripts.loadSystemResources();
                 systemDataLoaderService.loadSystemWidgets();
                 systemDataLoaderService.createOAuth2Templates();
                 systemDataLoaderService.createQueues();
diff --git a/application/src/main/java/org/thingsboard/server/service/edge/EdgeEventSourcingListener.java b/application/src/main/java/org/thingsboard/server/service/edge/EdgeEventSourcingListener.java
index 17ceb17ed1..893bd13171 100644
--- a/application/src/main/java/org/thingsboard/server/service/edge/EdgeEventSourcingListener.java
+++ b/application/src/main/java/org/thingsboard/server/service/edge/EdgeEventSourcingListener.java
@@ -50,7 +50,6 @@ import org.thingsboard.server.dao.eventsourcing.DeleteEntityEvent;
 import org.thingsboard.server.dao.eventsourcing.RelationActionEvent;
 import org.thingsboard.server.dao.eventsourcing.SaveEntityEvent;
 import org.thingsboard.server.dao.tenant.TenantService;
-import org.thingsboard.server.dao.user.UserServiceImpl;
 
 /**
  * This event listener does not support async event processing because relay on ThreadLocal
@@ -226,13 +225,10 @@ public class EdgeEventSourcingListener {
     }
 
     private void cleanUpUserAdditionalInfo(User user) {
-        // reset FAILED_LOGIN_ATTEMPTS and LAST_LOGIN_TS - edge is not interested in this information
         if (user.getAdditionalInfo() instanceof NullNode) {
             user.setAdditionalInfo(null);
         }
         if (user.getAdditionalInfo() instanceof ObjectNode additionalInfo) {
-            additionalInfo.remove(UserServiceImpl.FAILED_LOGIN_ATTEMPTS);
-            additionalInfo.remove(UserServiceImpl.LAST_LOGIN_TS);
             if (additionalInfo.isEmpty()) {
                 user.setAdditionalInfo(null);
             } else {
diff --git a/application/src/main/java/org/thingsboard/server/service/edge/rpc/processor/oauth2/OAuth2EdgeProcessor.java b/application/src/main/java/org/thingsboard/server/service/edge/rpc/processor/oauth2/OAuth2EdgeProcessor.java
index 999defcd02..b13cf567ef 100644
--- a/application/src/main/java/org/thingsboard/server/service/edge/rpc/processor/oauth2/OAuth2EdgeProcessor.java
+++ b/application/src/main/java/org/thingsboard/server/service/edge/rpc/processor/oauth2/OAuth2EdgeProcessor.java
@@ -38,7 +38,7 @@ import org.thingsboard.server.service.edge.rpc.utils.EdgeVersionUtils;
 public class OAuth2EdgeProcessor extends BaseEdgeProcessor {
 
     public DownlinkMsg convertOAuth2DomainEventToDownlink(EdgeEvent edgeEvent, EdgeVersion edgeVersion) {
-        if (EdgeVersionUtils.isEdgeVersionOlderThan(edgeVersion, EdgeVersion.V_3_7_1)) {
+        if (EdgeVersionUtils.isEdgeVersionOlderThan(edgeVersion, EdgeVersion.V_3_8_0)) {
             return null;
         }
         DomainId domainId = new DomainId(edgeEvent.getEntityId());
@@ -73,7 +73,7 @@ public class OAuth2EdgeProcessor extends BaseEdgeProcessor {
     }
 
     public DownlinkMsg convertOAuth2ClientEventToDownlink(EdgeEvent edgeEvent, EdgeVersion edgeVersion) {
-        if (EdgeVersionUtils.isEdgeVersionOlderThan(edgeVersion, EdgeVersion.V_3_7_1)) {
+        if (EdgeVersionUtils.isEdgeVersionOlderThan(edgeVersion, EdgeVersion.V_3_8_0)) {
             return null;
         }
         OAuth2ClientId oAuth2ClientId = new OAuth2ClientId(edgeEvent.getEntityId());
diff --git a/application/src/main/java/org/thingsboard/server/service/entitiy/dashboard/DashboardSyncService.java b/application/src/main/java/org/thingsboard/server/service/entitiy/dashboard/DashboardSyncService.java
new file mode 100644
index 0000000000..ce946688ea
--- /dev/null
+++ b/application/src/main/java/org/thingsboard/server/service/entitiy/dashboard/DashboardSyncService.java
@@ -0,0 +1,98 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.entitiy.dashboard;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
+import org.springframework.stereotype.Service;
+import org.thingsboard.server.common.data.ResourceType;
+import org.thingsboard.server.common.data.id.TenantId;
+import org.thingsboard.server.common.msg.queue.ServiceType;
+import org.thingsboard.server.dao.resource.ResourceService;
+import org.thingsboard.server.dao.widget.WidgetsBundleService;
+import org.thingsboard.server.queue.discovery.PartitionService;
+import org.thingsboard.server.queue.util.AfterStartUp;
+import org.thingsboard.server.queue.util.TbCoreComponent;
+import org.thingsboard.server.service.sync.GitSyncService;
+import org.thingsboard.server.service.sync.vc.GitRepository.FileType;
+import org.thingsboard.server.service.sync.vc.GitRepository.RepoFile;
+
+import java.util.List;
+import java.util.concurrent.TimeUnit;
+import java.util.stream.Stream;
+
+@Service
+@TbCoreComponent
+@RequiredArgsConstructor
+@Slf4j
+@ConditionalOnProperty(value = "transport.gateway.dashboard.sync.enabled", havingValue = "true")
+public class DashboardSyncService {
+
+    private final GitSyncService gitSyncService;
+    private final ResourceService resourceService;
+    private final WidgetsBundleService widgetsBundleService;
+    private final PartitionService partitionService;
+
+    @Value("${transport.gateway.dashboard.sync.repository_url:}")
+    private String repoUrl;
+    @Value("${transport.gateway.dashboard.sync.branch:main}")
+    private String branch;
+    @Value("${transport.gateway.dashboard.sync.fetch_frequency:24}")
+    private int fetchFrequencyHours;
+
+    private static final String REPO_KEY = "gateways-dashboard";
+    private static final String GATEWAYS_DASHBOARD_KEY = "gateways_dashboard.json";
+
+    @AfterStartUp(order = AfterStartUp.REGULAR_SERVICE)
+    public void init() throws Exception {
+        gitSyncService.registerSync(REPO_KEY, repoUrl, branch, TimeUnit.HOURS.toMillis(fetchFrequencyHours), this::update);
+    }
+
+    private void update() {
+        if (!partitionService.isMyPartition(ServiceType.TB_CORE, TenantId.SYS_TENANT_ID, TenantId.SYS_TENANT_ID)) {
+            return;
+        }
+
+        List<RepoFile> resources = listFiles("resources");
+        for (RepoFile resourceFile : resources) {
+            String data = getFileContent(resourceFile.path());
+            resourceService.createOrUpdateSystemResource(ResourceType.JS_MODULE, resourceFile.name(), data);
+        }
+
+        Stream<String> widgetsBundles = listFiles("widget_bundles").stream()
+                .map(widgetsBundleFile -> getFileContent(widgetsBundleFile.path()));
+        Stream<String> widgetTypes = listFiles("widget_types").stream()
+                .map(widgetTypeFile -> getFileContent(widgetTypeFile.path()));
+        widgetsBundleService.updateSystemWidgets(widgetsBundles, widgetTypes);
+
+        RepoFile dashboardFile = listFiles("dashboards").get(0);
+        String dashboardJson = getFileContent(dashboardFile.path());
+        resourceService.createOrUpdateSystemResource(ResourceType.DASHBOARD, GATEWAYS_DASHBOARD_KEY, dashboardJson);
+
+        log.info("Gateways dashboard sync completed");
+    }
+
+    private List<RepoFile> listFiles(String path) {
+        return gitSyncService.listFiles(REPO_KEY, path, 1, FileType.FILE);
+    }
+
+    private String getFileContent(String path) {
+        return gitSyncService.getFileContent(REPO_KEY, path);
+    }
+
+}
diff --git a/application/src/main/java/org/thingsboard/server/service/entitiy/user/DefaultUserService.java b/application/src/main/java/org/thingsboard/server/service/entitiy/user/DefaultUserService.java
index ad4b7c097e..4e9e8e954c 100644
--- a/application/src/main/java/org/thingsboard/server/service/entitiy/user/DefaultUserService.java
+++ b/application/src/main/java/org/thingsboard/server/service/entitiy/user/DefaultUserService.java
@@ -60,7 +60,7 @@ public class DefaultUserService extends AbstractTbEntityService implements TbUse
                     mailService.sendActivationEmail(activationLink.value(), activationLink.ttlMs(), savedUser.getEmail());
                 } catch (ThingsboardException e) {
                     userService.deleteUser(tenantId, savedUser);
-                    throw e;
+                    throw new ThingsboardException("Couldn't send user activation email", ThingsboardErrorCode.GENERAL);
                 }
             }
             logEntityActionService.logEntityAction(tenantId, savedUser.getId(), savedUser, customerId, actionType, user);
diff --git a/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/DefaultWidgetsBundleService.java b/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/DefaultWidgetsBundleService.java
index 92896c068e..a2c001a018 100644
--- a/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/DefaultWidgetsBundleService.java
+++ b/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/DefaultWidgetsBundleService.java
@@ -16,6 +16,7 @@
 package org.thingsboard.server.service.entitiy.widgets.bundle;
 
 import lombok.AllArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
 import org.thingsboard.server.common.data.EntityType;
 import org.thingsboard.server.common.data.User;
@@ -34,6 +35,7 @@ import java.util.List;
 @Service
 @TbCoreComponent
 @AllArgsConstructor
+@Slf4j
 public class DefaultWidgetsBundleService extends AbstractTbEntityService implements TbWidgetsBundleService {
 
     private final WidgetsBundleService widgetsBundleService;
@@ -79,4 +81,5 @@ public class DefaultWidgetsBundleService extends AbstractTbEntityService impleme
         widgetTypeService.updateWidgetsBundleWidgetFqns(user.getTenantId(), widgetsBundleId, widgetFqns);
         autoCommit(user, widgetsBundleId);
     }
+
 }
diff --git a/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/TbWidgetsBundleService.java b/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/TbWidgetsBundleService.java
index db03701fcf..ff7b9fa438 100644
--- a/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/TbWidgetsBundleService.java
+++ b/application/src/main/java/org/thingsboard/server/service/entitiy/widgets/bundle/TbWidgetsBundleService.java
@@ -29,4 +29,5 @@ public interface TbWidgetsBundleService extends SimpleTbEntityService<WidgetsBun
 
     void updateWidgetsBundleWidgetFqns(WidgetsBundleId widgetsBundleId, List<String> widgetFqns, User user) throws Exception;
 
+
 }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/EntityDatabaseSchemaService.java b/application/src/main/java/org/thingsboard/server/service/install/EntityDatabaseSchemaService.java
index 68f19e7a02..02241367a1 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/EntityDatabaseSchemaService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/EntityDatabaseSchemaService.java
@@ -23,4 +23,6 @@ public interface EntityDatabaseSchemaService extends DatabaseSchemaService {
 
     void createCustomerTitleUniqueConstraintIfNotExists();
 
+    void createSchemaVersion();
+
 }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java b/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java
index 7f76ce860f..115208bc47 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/InstallScripts.java
@@ -19,7 +19,6 @@ import com.fasterxml.jackson.databind.JsonNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import lombok.Getter;
 import lombok.Setter;
-import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -37,13 +36,9 @@ import org.thingsboard.server.common.data.exception.ThingsboardException;
 import org.thingsboard.server.common.data.id.CustomerId;
 import org.thingsboard.server.common.data.id.TenantId;
 import org.thingsboard.server.common.data.oauth2.OAuth2ClientRegistrationTemplate;
-import org.thingsboard.server.common.data.page.PageData;
-import org.thingsboard.server.common.data.page.PageLink;
 import org.thingsboard.server.common.data.rule.RuleChain;
 import org.thingsboard.server.common.data.rule.RuleChainMetaData;
-import org.thingsboard.server.common.data.widget.DeprecatedFilter;
 import org.thingsboard.server.common.data.widget.WidgetTypeDetails;
-import org.thingsboard.server.common.data.widget.WidgetTypeInfo;
 import org.thingsboard.server.common.data.widget.WidgetsBundle;
 import org.thingsboard.server.dao.dashboard.DashboardService;
 import org.thingsboard.server.dao.exception.DataValidationException;
@@ -57,8 +52,9 @@ import org.thingsboard.server.dao.widget.WidgetsBundleService;
 import org.thingsboard.server.service.install.update.ImagesUpdater;
 
 import java.io.IOException;
-import java.nio.file.DirectoryStream;
+import java.io.UncheckedIOException;
 import java.nio.file.Files;
+import java.nio.file.NoSuchFileException;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.util.ArrayList;
@@ -95,7 +91,7 @@ public class InstallScripts {
     public static final String OAUTH2_CONFIG_TEMPLATES_DIR = "oauth2_config_templates";
     public static final String DASHBOARDS_DIR = "dashboards";
     public static final String MODELS_LWM2M_DIR = "lwm2m-registry";
-    public static final String CREDENTIALS_DIR = "credentials";
+    public static final String RESOURCES_DIR = "resources";
 
     public static final String JSON_EXT = ".json";
     public static final String SVG_EXT = ".svg";
@@ -173,7 +169,6 @@ public class InstallScripts {
         loadRuleChainsFromPath(tenantId, edgeChainsDir);
     }
 
-    @SneakyThrows
     private void loadRuleChainsFromPath(TenantId tenantId, Path ruleChainsPath) {
         findRuleChainsFromPath(ruleChainsPath).forEach(path -> {
             try {
@@ -185,12 +180,10 @@ public class InstallScripts {
         });
     }
 
-    List<Path> findRuleChainsFromPath(Path ruleChainsPath) throws IOException {
-        List<Path> paths = new ArrayList<>();
-        try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(ruleChainsPath, path -> path.toString().endsWith(InstallScripts.JSON_EXT))) {
-            dirStream.forEach(paths::add);
+    List<Path> findRuleChainsFromPath(Path ruleChainsPath) {
+        try (Stream<Path> files = listDir(ruleChainsPath).filter(path -> path.toString().endsWith(InstallScripts.JSON_EXT))) {
+            return files.toList();
         }
-        return paths;
     }
 
     public RuleChain createDefaultRuleChain(TenantId tenantId, String ruleChainName) {
@@ -214,11 +207,11 @@ public class InstallScripts {
         return ruleChain;
     }
 
-    public void loadSystemWidgets() throws Exception {
+    public void loadSystemWidgets() {
         log.info("Loading system widgets");
         Map<Path, JsonNode> widgetsBundlesMap = new HashMap<>();
         Path widgetBundlesDir = Paths.get(getDataDir(), JSON_DIR, SYSTEM_DIR, WIDGET_BUNDLES_DIR);
-        try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(widgetBundlesDir, path -> path.toString().endsWith(JSON_EXT))) {
+        try (Stream<Path> dirStream = listDir(widgetBundlesDir).filter(path -> path.toString().endsWith(JSON_EXT))) {
             dirStream.forEach(
                     path -> {
                         JsonNode widgetsBundleDescriptorJson;
@@ -250,12 +243,14 @@ public class InstallScripts {
         }
         Path widgetTypesDir = Paths.get(getDataDir(), JSON_DIR, SYSTEM_DIR, WIDGET_TYPES_DIR);
         if (Files.exists(widgetTypesDir)) {
-            try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(widgetTypesDir, path -> path.toString().endsWith(JSON_EXT))) {
+            try (Stream<Path> dirStream = listDir(widgetTypesDir).filter(path -> path.toString().endsWith(JSON_EXT))) {
                 dirStream.forEach(
                         path -> {
                             try {
-                                JsonNode widgetTypeJson = JacksonUtil.toJsonNode(path.toFile());
-                                WidgetTypeDetails widgetTypeDetails = JacksonUtil.treeToValue(widgetTypeJson, WidgetTypeDetails.class);
+                                String widgetTypeJson = Files.readString(path);
+                                widgetTypeJson = resourceService.checkSystemResourcesUsage(widgetTypeJson, ResourceType.JS_MODULE);
+
+                                WidgetTypeDetails widgetTypeDetails = JacksonUtil.fromString(widgetTypeJson, WidgetTypeDetails.class);
                                 widgetTypeService.saveWidgetType(widgetTypeDetails);
                             } catch (Exception e) {
                                 log.error("Unable to load widget type from json: [{}]", path.toString());
@@ -303,12 +298,12 @@ public class InstallScripts {
         }
     }
 
-    private void loadSystemScadaSymbols() throws Exception {
+    private void loadSystemScadaSymbols() {
         log.info("Loading system SCADA symbols");
         Path scadaSymbolsDir = Paths.get(getDataDir(), JSON_DIR, SYSTEM_DIR, SCADA_SYMBOLS_DIR);
         if (Files.exists(scadaSymbolsDir)) {
             WidgetTypeDetails scadaSymbolWidgetTemplate = widgetTypeService.findWidgetTypeDetailsByTenantIdAndFqn(TenantId.SYS_TENANT_ID, "scada_symbol");
-            try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(scadaSymbolsDir, path -> path.toString().endsWith(SVG_EXT))) {
+            try (Stream<Path> dirStream = listDir(scadaSymbolsDir).filter(path -> path.toString().endsWith(SVG_EXT))) {
                 dirStream.forEach(
                         path -> {
                             try {
@@ -355,7 +350,7 @@ public class InstallScripts {
     }
 
     private WidgetTypeDetails saveScadaSymbolWidget(WidgetTypeDetails template, TbResourceInfo scadaSymbol,
-                                         ImageUtils.ScadaSymbolMetadataInfo metadata) {
+                                                    ImageUtils.ScadaSymbolMetadataInfo metadata) {
         String symbolUrl = DataConstants.TB_IMAGE_PREFIX + scadaSymbol.getLink();
         WidgetTypeDetails scadaSymbolWidget = new WidgetTypeDetails();
         JsonNode descriptor = JacksonUtil.clone(template.getDescriptor());
@@ -375,34 +370,26 @@ public class InstallScripts {
         defaultConfig.put("title", metadata.getTitle());
         ObjectNode settings;
         if (defaultConfig.has("settings")) {
-            settings = (ObjectNode)defaultConfig.get("settings");
+            settings = (ObjectNode) defaultConfig.get("settings");
         } else {
             settings = JacksonUtil.newObjectNode();
             defaultConfig.set("settings", settings);
         }
         settings.put("scadaSymbolUrl", symbolUrl);
-        ((ObjectNode)descriptor).put("defaultConfig", JacksonUtil.toString(defaultConfig));
-        ((ObjectNode)descriptor).put("sizeX", metadata.getWidgetSizeX());
-        ((ObjectNode)descriptor).put("sizeY", metadata.getWidgetSizeY());
+        ((ObjectNode) descriptor).put("defaultConfig", JacksonUtil.toString(defaultConfig));
+        ((ObjectNode) descriptor).put("sizeX", metadata.getWidgetSizeX());
+        ((ObjectNode) descriptor).put("sizeY", metadata.getWidgetSizeY());
         String controllerScript = descriptor.get("controllerScript").asText();
         controllerScript = controllerScript.replaceAll("previewWidth: '\\d*px'", "previewWidth: '" + (metadata.getWidgetSizeX() * 100) + "px'");
         controllerScript = controllerScript.replaceAll("previewHeight: '\\d*px'", "previewHeight: '" + (metadata.getWidgetSizeY() * 100 + 20) + "px'");
-        ((ObjectNode)descriptor).put("controllerScript", controllerScript);
+        ((ObjectNode) descriptor).put("controllerScript", controllerScript);
         return widgetTypeService.saveWidgetType(scadaSymbolWidget);
     }
 
     private void deleteSystemWidgetBundle(String bundleAlias) {
         WidgetsBundle widgetsBundle = widgetsBundleService.findWidgetsBundleByTenantIdAndAlias(TenantId.SYS_TENANT_ID, bundleAlias);
         if (widgetsBundle != null) {
-            PageData<WidgetTypeInfo> widgetTypes;
-            var pageLink = new PageLink(1024);
-            do {
-                widgetTypes = widgetTypeService.findWidgetTypesInfosByWidgetsBundleId(TenantId.SYS_TENANT_ID, widgetsBundle.getId(), false, DeprecatedFilter.ALL, null, pageLink);
-                for (var widgetType : widgetTypes.getData()) {
-                    widgetTypeService.deleteWidgetType(TenantId.SYS_TENANT_ID, widgetType.getId());
-                }
-                pageLink.nextPageLink();
-            } while (widgetTypes.hasNext());
+            widgetTypeService.deleteWidgetTypesByBundleId(TenantId.SYS_TENANT_ID, widgetsBundle.getId());
             widgetsBundleService.deleteWidgetsBundle(TenantId.SYS_TENANT_ID, widgetsBundle.getId());
         }
     }
@@ -415,11 +402,10 @@ public class InstallScripts {
         imagesUpdater.updateAssetProfilesImages();
     }
 
-    @SneakyThrows
     public void loadSystemImages() {
         log.info("Loading system images...");
-        Stream<Path> dashboardsFiles = Stream.concat(Files.list(Paths.get(getDataDir(), JSON_DIR, DEMO_DIR, DASHBOARDS_DIR)),
-                                                     Files.list(Paths.get(getDataDir(), JSON_DIR, TENANT_DIR, DASHBOARDS_DIR)));
+        Stream<Path> dashboardsFiles = Stream.concat(listDir(Paths.get(getDataDir(), JSON_DIR, DEMO_DIR, DASHBOARDS_DIR)),
+                listDir(Paths.get(getDataDir(), JSON_DIR, TENANT_DIR, DASHBOARDS_DIR)));
         try (dashboardsFiles) {
             dashboardsFiles.forEach(file -> {
                 try {
@@ -442,25 +428,22 @@ public class InstallScripts {
         loadDashboardsFromDir(tenantId, customerId, dashboardsDir);
     }
 
-    @SneakyThrows
     private void loadDashboardsFromDir(TenantId tenantId, CustomerId customerId, Path dashboardsDir) {
-        try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(dashboardsDir, path -> path.toString().endsWith(JSON_EXT))) {
-            dirStream.forEach(
-                    path -> {
-                        try {
-                            JsonNode dashboardJson = JacksonUtil.toJsonNode(path.toFile());
-                            Dashboard dashboard = JacksonUtil.treeToValue(dashboardJson, Dashboard.class);
-                            dashboard.setTenantId(tenantId);
-                            Dashboard savedDashboard = dashboardService.saveDashboard(dashboard);
-                            if (customerId != null && !customerId.isNullUid()) {
-                                dashboardService.assignDashboardToCustomer(TenantId.SYS_TENANT_ID, savedDashboard.getId(), customerId);
-                            }
-                        } catch (Exception e) {
-                            log.error("Unable to load dashboard from json: [{}]", path.toString());
-                            throw new RuntimeException("Unable to load dashboard from json", e);
-                        }
+        try (Stream<Path> dashboards = listDir(dashboardsDir).filter(path -> path.toString().endsWith(JSON_EXT))) {
+            dashboards.forEach(path -> {
+                try {
+                    JsonNode dashboardJson = JacksonUtil.toJsonNode(path.toFile());
+                    Dashboard dashboard = JacksonUtil.treeToValue(dashboardJson, Dashboard.class);
+                    dashboard.setTenantId(tenantId);
+                    Dashboard savedDashboard = dashboardService.saveDashboard(dashboard);
+                    if (customerId != null && !customerId.isNullUid()) {
+                        dashboardService.assignDashboardToCustomer(TenantId.SYS_TENANT_ID, savedDashboard.getId(), customerId);
                     }
-            );
+                } catch (Exception e) {
+                    log.error("Unable to load dashboard from json: [{}]", path.toString());
+                    throw new RuntimeException("Unable to load dashboard from json", e);
+                }
+            });
         }
     }
 
@@ -475,9 +458,9 @@ public class InstallScripts {
         }
     }
 
-    public void createOAuth2Templates() throws Exception {
+    public void createOAuth2Templates() {
         Path oauth2ConfigTemplatesDir = Paths.get(getDataDir(), JSON_DIR, SYSTEM_DIR, OAUTH2_CONFIG_TEMPLATES_DIR);
-        try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(oauth2ConfigTemplatesDir, path -> path.toString().endsWith(JSON_EXT))) {
+        try (Stream<Path> dirStream = listDir(oauth2ConfigTemplatesDir).filter(path -> path.toString().endsWith(JSON_EXT))) {
             dirStream.forEach(
                     path -> {
                         try {
@@ -500,7 +483,7 @@ public class InstallScripts {
 
     public void loadSystemLwm2mResources() {
         Path resourceLwm2mPath = Paths.get(getDataDir(), MODELS_LWM2M_DIR);
-        try (DirectoryStream<Path> dirStream = Files.newDirectoryStream(resourceLwm2mPath, path -> path.toString().endsWith(InstallScripts.XML_EXT))) {
+        try (Stream<Path> dirStream = listDir(resourceLwm2mPath).filter(path -> path.toString().endsWith(InstallScripts.XML_EXT))) {
             dirStream.forEach(
                     path -> {
                         try {
@@ -523,6 +506,43 @@ public class InstallScripts {
         }
     }
 
+    public void loadSystemResources() {
+        Path resourcesDir = Path.of(getDataDir(), RESOURCES_DIR);
+        loadSystemResources(resourcesDir.resolve("js_modules"), ResourceType.JS_MODULE);
+        loadSystemResources(resourcesDir.resolve("dashboards"), ResourceType.DASHBOARD);
+    }
+
+    private void loadSystemResources(Path dir, ResourceType resourceType) {
+        listDir(dir).forEach(resourceFile -> {
+            String resourceKey = resourceFile.getFileName().toString();
+            try {
+                String data = getContent(resourceFile);
+                TbResource resource = resourceService.createOrUpdateSystemResource(resourceType, resourceKey, data);
+                log.info("{} resource {}", (resource.getId() == null ? "Created" : "Updated"), resourceKey);
+            } catch (Exception e) {
+                throw new RuntimeException("Unable to load system resource " + resourceFile, e);
+            }
+        });
+    }
+
+    private String getContent(Path file) {
+        try {
+            return Files.readString(file);
+        } catch (IOException e) {
+            throw new UncheckedIOException(e);
+        }
+    }
+
+    private Stream<Path> listDir(Path dir) {
+        try {
+            return Files.list(dir);
+        } catch (NoSuchFileException e) {
+            return Stream.empty();
+        } catch (IOException e) {
+            throw new UncheckedIOException(e);
+        }
+    }
+
     private void doSaveLwm2mResource(TbResource resource) throws ThingsboardException {
         log.trace("Executing saveResource [{}]", resource);
         if (resource.getData() == null || resource.getData().length == 0) {
@@ -534,4 +554,5 @@ public class InstallScripts {
             resourceService.saveResource(resource);
         }
     }
+
 }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java b/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java
index 0a4b68c1e3..86d03d65f5 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/SqlDatabaseUpgradeService.java
@@ -16,24 +16,22 @@
 package org.thingsboard.server.service.install;
 
 import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.beans.factory.annotation.Value;
+import org.intellij.lang.annotations.Language;
 import org.springframework.context.annotation.Profile;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.StatementCallback;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.PlatformTransactionManager;
+import org.springframework.transaction.support.TransactionTemplate;
 import org.thingsboard.server.service.install.update.DefaultDataUpdateService;
 
-import java.nio.charset.Charset;
+import java.io.IOException;
+import java.io.UncheckedIOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
-import java.sql.Connection;
-import java.sql.DriverManager;
-import java.sql.ResultSet;
-import java.sql.SQLException;
 import java.sql.SQLWarning;
-import java.sql.Statement;
 import java.util.concurrent.TimeUnit;
-import java.util.function.Consumer;
 
 @Service
 @Profile("install")
@@ -42,137 +40,129 @@ public class SqlDatabaseUpgradeService implements DatabaseEntitiesUpgradeService
 
     private static final String SCHEMA_UPDATE_SQL = "schema_update.sql";
 
-    @Value("${spring.datasource.url}")
-    private String dbUrl;
+    private final InstallScripts installScripts;
+    private final JdbcTemplate jdbcTemplate;
+    private final TransactionTemplate transactionTemplate;
 
-    @Value("${spring.datasource.username}")
-    private String dbUserName;
-
-    @Value("${spring.datasource.password}")
-    private String dbPassword;
-
-    @Autowired
-    private InstallScripts installScripts;
+    public SqlDatabaseUpgradeService(InstallScripts installScripts, JdbcTemplate jdbcTemplate, PlatformTransactionManager transactionManager) {
+        this.installScripts = installScripts;
+        this.jdbcTemplate = jdbcTemplate;
+        this.transactionTemplate = new TransactionTemplate(transactionManager);
+        this.transactionTemplate.setTimeout((int) TimeUnit.MINUTES.toSeconds(120));
+    }
 
     @Override
-    public void upgradeDatabase(String fromVersion) throws Exception {
+    public void upgradeDatabase(String fromVersion) {
         switch (fromVersion) {
-            case "3.5.0":
-                updateSchema("3.5.0", 3005000, "3.5.1", 3005001, null);
-                break;
-            case "3.5.1":
-                updateSchema("3.5.1", 3005001, "3.6.0", 3006000, conn -> {
-                    String[] entityNames = new String[]{"device", "component_descriptor", "customer", "dashboard", "rule_chain", "rule_node", "ota_package",
-                            "asset_profile", "asset", "device_profile", "tb_user", "tenant_profile", "tenant", "widgets_bundle", "entity_view", "edge"};
-                    for (String entityName : entityNames) {
-                        try {
-                            conn.createStatement().execute("ALTER TABLE " + entityName + " DROP COLUMN search_text CASCADE");
-                        } catch (Exception e) {
-                        }
-                    }
-                    try {
-                        conn.createStatement().execute("ALTER TABLE component_descriptor ADD COLUMN IF NOT EXISTS configuration_version int DEFAULT 0;");
-                    } catch (Exception e) {
-                    }
-                    try {
-                        conn.createStatement().execute("ALTER TABLE rule_node ADD COLUMN IF NOT EXISTS configuration_version int DEFAULT 0;");
-                    } catch (Exception e) {
-                    }
-                    try {
-                        conn.createStatement().execute("CREATE INDEX IF NOT EXISTS idx_rule_node_type_configuration_version ON rule_node(type, configuration_version);");
-                    } catch (Exception e) {
-                    }
-                    try {
-                        conn.createStatement().execute("UPDATE rule_node SET " +
+            case "3.5.0" -> updateSchema("3.5.0", 3005000, "3.5.1", 3005001);
+            case "3.5.1" -> {
+                updateSchema("3.5.1", 3005001, "3.6.0", 3006000);
+
+                String[] tables = new String[]{"device", "component_descriptor", "customer", "dashboard", "rule_chain", "rule_node", "ota_package",
+                        "asset_profile", "asset", "device_profile", "tb_user", "tenant_profile", "tenant", "widgets_bundle", "entity_view", "edge"};
+                for (String table : tables) {
+                    execute("ALTER TABLE " + table + " DROP COLUMN IF EXISTS search_text CASCADE");
+                }
+                execute(
+                        "ALTER TABLE component_descriptor ADD COLUMN IF NOT EXISTS configuration_version int DEFAULT 0;",
+                        "ALTER TABLE rule_node ADD COLUMN IF NOT EXISTS configuration_version int DEFAULT 0;",
+                        "CREATE INDEX IF NOT EXISTS idx_rule_node_type_configuration_version ON rule_node(type, configuration_version);",
+                        "UPDATE rule_node SET " +
                                 "configuration = (configuration::jsonb || '{\"updateAttributesOnlyOnValueChange\": \"false\"}'::jsonb)::varchar, " +
                                 "configuration_version = 1 " +
-                                "WHERE type = 'org.thingsboard.rule.engine.telemetry.TbMsgAttributesNode' AND configuration_version < 1;");
-                    } catch (Exception e) {
-                    }
-                    try {
-                        conn.createStatement().execute("CREATE INDEX IF NOT EXISTS idx_notification_recipient_id_unread ON notification(recipient_id) WHERE status <> 'READ';");
-                    } catch (Exception e) {
-                    }
-                });
-                break;
-            case "3.6.0":
-                updateSchema("3.6.0", 3006000, "3.6.1", 3006001, null);
-                break;
-            case "3.6.1":
-                updateSchema("3.6.1", 3006001, "3.6.2", 3006002, connection -> {
-                    try {
-                        Path saveAttributesNodeUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", "3.6.1", "save_attributes_node_update.sql");
-                        loadSql(saveAttributesNodeUpdateFile, connection);
-                    } catch (Exception e) {
-                        log.warn("Failed to execute update script for save attributes rule nodes due to: ", e);
-                    }
-                    try {
-                        connection.createStatement().execute("CREATE INDEX IF NOT EXISTS idx_asset_profile_id ON asset(tenant_id, asset_profile_id);");
-                    } catch (Exception e) {
-                    }
-                });
-                break;
-            case "3.6.2":
-                updateSchema("3.6.2", 3006002, "3.6.3", 3006003, null);
-                break;
-            case "3.6.3":
-                updateSchema("3.6.3", 3006003, "3.6.4", 3006004, null);
-                break;
-            case "3.6.4":
-                updateSchema("3.6.4", 3006004, "3.7.0", 3007000, null);
-                break;
-            case "3.7.0":
-                updateSchema("3.7.0", 3007000, "3.8.0", 3008000, connection -> {
-                    try {
-                        connection.createStatement().execute("UPDATE rule_node SET " +
-                                "configuration = CASE " +
-                                "  WHEN (configuration::jsonb ->> 'persistAlarmRulesState') = 'false'" +
-                                "  THEN (configuration::jsonb || '{\"fetchAlarmRulesStateOnStart\": \"false\"}'::jsonb)::varchar " +
-                                "  ELSE configuration " +
-                                "END, " +
-                                "configuration_version = 1 " +
-                                "WHERE type = 'org.thingsboard.rule.engine.profile.TbDeviceProfileNode' " +
-                                "AND configuration_version < 1;");
-                    } catch (Exception e) {
-                        log.warn("Failed to execute update script for device profile rule nodes due to: ", e);
-                    }
-                });
-                break;
-            default:
-                throw new RuntimeException("Unable to upgrade SQL database, unsupported fromVersion: " + fromVersion);
+                                "WHERE type = 'org.thingsboard.rule.engine.telemetry.TbMsgAttributesNode' AND configuration_version < 1;",
+                        "CREATE INDEX IF NOT EXISTS idx_notification_recipient_id_unread ON notification(recipient_id) WHERE status <> 'READ';"
+                );
+            }
+            case "3.6.0" -> updateSchema("3.6.0", 3006000, "3.6.1", 3006001);
+            case "3.6.1" -> {
+                updateSchema("3.6.1", 3006001, "3.6.2", 3006002);
+
+                try {
+                    Path saveAttributesNodeUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", "3.6.1", "save_attributes_node_update.sql");
+                    loadSql(saveAttributesNodeUpdateFile);
+                } catch (Exception e) {
+                    log.warn("Failed to execute update script for save attributes rule nodes due to: ", e);
+                }
+                execute("CREATE INDEX IF NOT EXISTS idx_asset_profile_id ON asset(tenant_id, asset_profile_id);");
+            }
+            case "3.6.2" -> updateSchema("3.6.2", 3006002, "3.6.3", 3006003);
+            case "3.6.3" -> updateSchema("3.6.3", 3006003, "3.6.4", 3006004);
+            case "3.6.4" -> updateSchema("3.6.4", 3006004, "3.7.0", 3007000);
+            case "3.7.0" -> {
+                updateSchema("3.7.0", 3007000, "3.8.0", 3008000);
+
+                try {
+                    execute("UPDATE rule_node SET " +
+                            "configuration = CASE " +
+                            "  WHEN (configuration::jsonb ->> 'persistAlarmRulesState') = 'false'" +
+                            "  THEN (configuration::jsonb || '{\"fetchAlarmRulesStateOnStart\": \"false\"}'::jsonb)::varchar " +
+                            "  ELSE configuration " +
+                            "END, " +
+                            "configuration_version = 1 " +
+                            "WHERE type = 'org.thingsboard.rule.engine.profile.TbDeviceProfileNode' " +
+                            "AND configuration_version < 1;", false);
+                } catch (Exception e) {
+                    log.warn("Failed to execute update script for device profile rule nodes due to: ", e);
+                }
+            }
+            case "3.8.1" -> updateSchema("3.8.1", 3008001, "3.9.0", 3009000);
+            default -> throw new RuntimeException("Unsupported fromVersion '" + fromVersion + "'");
         }
     }
 
-    private void updateSchema(String oldVersionStr, int oldVersion, String newVersionStr, int newVersion, Consumer<Connection> additionalAction) {
-        try (Connection conn = DriverManager.getConnection(dbUrl, dbUserName, dbPassword)) {
-            log.info("Updating schema ...");
-            if (isOldSchema(conn, oldVersion)) {
-                Path schemaUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", oldVersionStr, SCHEMA_UPDATE_SQL);
-                loadSql(schemaUpdateFile, conn);
-                if (additionalAction != null) {
-                    additionalAction.accept(conn);
+    private void updateSchema(String oldVersionStr, int oldVersion, String newVersionStr, int newVersion) {
+        try {
+            transactionTemplate.executeWithoutResult(ts -> {
+                log.info("Updating schema ...");
+                if (isOldSchema(oldVersion)) {
+                    loadSql(getSchemaUpdateFile(oldVersionStr));
+                    jdbcTemplate.execute("UPDATE tb_schema_settings SET schema_version = " + newVersion);
+                    log.info("Schema updated to version {}", newVersionStr);
+                } else {
+                    log.info("Skip schema re-update to version {}. Use env flag 'SKIP_SCHEMA_VERSION_CHECK' to force the re-update.", newVersionStr);
                 }
-                conn.createStatement().execute("UPDATE tb_schema_settings SET schema_version = " + newVersion + ";");
-                log.info("Schema updated to version {}", newVersionStr);
-            } else {
-                log.info("Skip schema re-update to version {}. Use env flag 'SKIP_SCHEMA_VERSION_CHECK' to force the re-update.", newVersionStr);
-            }
+            });
         } catch (Exception e) {
-            log.error("Failed updating schema!!!", e);
+            throw new RuntimeException("Failed to update schema", e);
         }
     }
 
-    private void loadSql(Path sqlFile, Connection conn) throws Exception {
-        String sql = new String(Files.readAllBytes(sqlFile), Charset.forName("UTF-8"));
-        Statement st = conn.createStatement();
-        st.setQueryTimeout((int) TimeUnit.HOURS.toSeconds(3));
-        st.execute(sql);//NOSONAR, ignoring because method used to execute thingsboard database upgrade script
-        printWarnings(st);
-        Thread.sleep(5000);
+    private Path getSchemaUpdateFile(String version) {
+        return Paths.get(installScripts.getDataDir(), "upgrade", version, SCHEMA_UPDATE_SQL);
     }
 
-    protected void printWarnings(Statement statement) throws SQLException {
-        SQLWarning warnings = statement.getWarnings();
+    private void loadSql(Path sqlFile) {
+        String sql;
+        try {
+            sql = Files.readString(sqlFile);
+        } catch (IOException e) {
+            throw new UncheckedIOException(e);
+        }
+        jdbcTemplate.execute((StatementCallback<Object>) stmt -> {
+            stmt.execute(sql);
+            printWarnings(stmt.getWarnings());
+            return null;
+        });
+    }
+
+    private void execute(@Language("sql") String... statements) {
+        for (String statement : statements) {
+            execute(statement, true);
+        }
+    }
+
+    private void execute(@Language("sql") String statement, boolean ignoreErrors) {
+        try {
+            jdbcTemplate.execute(statement);
+        } catch (Exception e) {
+            if (!ignoreErrors) {
+                throw e;
+            }
+        }
+    }
+
+    private void printWarnings(SQLWarning warnings) {
         if (warnings != null) {
             log.info("{}", warnings.getMessage());
             SQLWarning nextWarning = warnings.getNextWarning();
@@ -183,26 +173,18 @@ public class SqlDatabaseUpgradeService implements DatabaseEntitiesUpgradeService
         }
     }
 
-    protected boolean isOldSchema(Connection conn, long fromVersion) {
+    private boolean isOldSchema(long fromVersion) {
         if (DefaultDataUpdateService.getEnv("SKIP_SCHEMA_VERSION_CHECK", false)) {
             log.info("Skipped DB schema version check due to SKIP_SCHEMA_VERSION_CHECK set to true!");
             return true;
         }
+        jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS tb_schema_settings (schema_version bigint NOT NULL, CONSTRAINT tb_schema_settings_pkey PRIMARY KEY (schema_version))");
+        Long schemaVersion = jdbcTemplate.queryForList("SELECT schema_version FROM tb_schema_settings", Long.class).stream().findFirst().orElse(null);
         boolean isOldSchema = true;
-        try {
-            Statement statement = conn.createStatement();
-            statement.execute("CREATE TABLE IF NOT EXISTS tb_schema_settings ( schema_version bigint NOT NULL, CONSTRAINT tb_schema_settings_pkey PRIMARY KEY (schema_version));");
-            Thread.sleep(1000);
-            ResultSet resultSet = statement.executeQuery("SELECT schema_version FROM tb_schema_settings;");
-            if (resultSet.next()) {
-                isOldSchema = resultSet.getLong(1) <= fromVersion;
-            } else {
-                resultSet.close();
-                statement.execute("INSERT INTO tb_schema_settings (schema_version) VALUES (" + fromVersion + ")");
-            }
-            statement.close();
-        } catch (InterruptedException | SQLException e) {
-            log.info("Failed to check current PostgreSQL schema due to: {}", e.getMessage());
+        if (schemaVersion != null) {
+            isOldSchema = schemaVersion <= fromVersion;
+        } else {
+            jdbcTemplate.execute("INSERT INTO tb_schema_settings (schema_version) VALUES (" + fromVersion + ")");
         }
         return isOldSchema;
     }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/SqlEntityDatabaseSchemaService.java b/application/src/main/java/org/thingsboard/server/service/install/SqlEntityDatabaseSchemaService.java
index 5e1357a48e..3bb8b0e58f 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/SqlEntityDatabaseSchemaService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/SqlEntityDatabaseSchemaService.java
@@ -16,7 +16,10 @@
 package org.thingsboard.server.service.install;
 
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.info.BuildProperties;
 import org.springframework.context.annotation.Profile;
+import org.springframework.jdbc.core.JdbcTemplate;
 import org.springframework.stereotype.Service;
 
 @Service
@@ -29,6 +32,11 @@ public class SqlEntityDatabaseSchemaService extends SqlAbstractDatabaseSchemaSer
     public static final String SCHEMA_ENTITIES_IDX_PSQL_ADDON_SQL = "schema-entities-idx-psql-addon.sql";
     public static final String SCHEMA_VIEWS_AND_FUNCTIONS_SQL = "schema-views-and-functions.sql";
 
+    @Autowired
+    private BuildProperties buildProperties;
+    @Autowired
+    private JdbcTemplate jdbcTemplate;
+
     public SqlEntityDatabaseSchemaService() {
         super(SCHEMA_ENTITIES_SQL, SCHEMA_ENTITIES_IDX_SQL);
     }
@@ -59,4 +67,26 @@ public class SqlEntityDatabaseSchemaService extends SqlAbstractDatabaseSchemaSer
                 "ALTER TABLE customer ADD CONSTRAINT customer_title_unq_key UNIQUE(tenant_id, title); END IF; END; $$;",
                 "create 'customer_title_unq_key' constraint if it doesn't already exist!");
     }
+
+    @Override
+    public void createSchemaVersion() {
+        try {
+            Long schemaVersion = jdbcTemplate.queryForList("SELECT schema_version FROM tb_schema_settings", Long.class).stream().findFirst().orElse(null);
+            if (schemaVersion == null) {
+                jdbcTemplate.execute("INSERT INTO tb_schema_settings (schema_version) VALUES (" + getSchemaVersion() + ")");
+            }
+        } catch (Exception e) {
+            log.warn("Failed to create schema version [{}]!", buildProperties.getVersion(), e);
+        }
+    }
+
+    private int getSchemaVersion() {
+        String[] versionParts = buildProperties.getVersion().replaceAll("[^\\d.]", "").split("\\.");
+
+        int major = Integer.parseInt(versionParts[0]);
+        int minor = Integer.parseInt(versionParts[1]);
+        int patch = versionParts.length > 2 ? Integer.parseInt(versionParts[2]) : 0;
+
+        return major * 1000000 + minor * 1000 + patch;
+    }
 }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/SqlTsDatabaseSchemaService.java b/application/src/main/java/org/thingsboard/server/service/install/SqlTsDatabaseSchemaService.java
index 66af786c83..428101ee05 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/SqlTsDatabaseSchemaService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/SqlTsDatabaseSchemaService.java
@@ -15,7 +15,6 @@
  */
 package org.thingsboard.server.service.install;
 
-import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Profile;
 import org.springframework.stereotype.Service;
 import org.thingsboard.server.dao.util.SqlTsDao;
@@ -25,9 +24,6 @@ import org.thingsboard.server.dao.util.SqlTsDao;
 @Profile("install")
 public class SqlTsDatabaseSchemaService extends SqlAbstractDatabaseSchemaService implements TsDatabaseSchemaService {
 
-    @Value("${sql.postgres.ts_key_value_partitioning:MONTHS}")
-    private String partitionType;
-
     public SqlTsDatabaseSchemaService() {
         super("schema-ts-psql.sql", null);
     }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/update/DefaultCacheCleanupService.java b/application/src/main/java/org/thingsboard/server/service/install/update/DefaultCacheCleanupService.java
index 1a03ae491a..8110642d7b 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/update/DefaultCacheCleanupService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/update/DefaultCacheCleanupService.java
@@ -62,7 +62,7 @@ public class DefaultCacheCleanupService implements CacheCleanupService {
                 clearAll();
                 break;
             case "3.7.0":
-                log.info("Clearing cache to upgrade from version 3.7.0 to 3.7.1");
+                log.info("Clearing cache to upgrade from version 3.7.0 to 3.8.0");
                 clearAll();
                 break;
             default:
diff --git a/application/src/main/java/org/thingsboard/server/service/mail/DefaultMailService.java b/application/src/main/java/org/thingsboard/server/service/mail/DefaultMailService.java
index 1603720450..d850dca43d 100644
--- a/application/src/main/java/org/thingsboard/server/service/mail/DefaultMailService.java
+++ b/application/src/main/java/org/thingsboard/server/service/mail/DefaultMailService.java
@@ -443,17 +443,16 @@ public class DefaultMailService implements MailService {
         }
     }
 
-    private void sendMailWithTimeout(JavaMailSender mailSender, MimeMessage msg, long timeout) {
+    private void sendMailWithTimeout(JavaMailSender mailSender, MimeMessage msg, long timeout) throws ThingsboardException {
         var submittedMail = Futures.withTimeout(
                 mailExecutorService.submit(() -> mailSender.send(msg)),
                 timeout, TimeUnit.MILLISECONDS, timeoutScheduler);
         try {
             submittedMail.get(timeout, TimeUnit.MILLISECONDS);
         } catch (TimeoutException e) {
-            log.debug("Error during mail submission", e);
             throw new RuntimeException("Timeout!");
         } catch (Exception e) {
-            throw new RuntimeException(ExceptionUtils.getRootCause(e));
+            throw new ThingsboardException("Unable to send mail", ExceptionUtils.getRootCause(e), ThingsboardErrorCode.GENERAL);
         }
     }
 
@@ -463,20 +462,20 @@ public class DefaultMailService implements MailService {
             Template template = freemarkerConfig.getTemplate(templateLocation);
             return FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
         } catch (Exception e) {
-            throw handleException(e);
+            log.warn("Failed to process mail template: {}", ExceptionUtils.getRootCauseMessage(e));
+            throw new ThingsboardException("Failed to process mail template: " + e.getMessage(), e, ThingsboardErrorCode.GENERAL);
         }
     }
 
-    protected ThingsboardException handleException(Exception exception) {
-        String message;
+    protected ThingsboardException handleException(Throwable exception) {
+        if (exception instanceof ThingsboardException thingsboardException) {
+            return thingsboardException;
+        }
         if (exception instanceof NestedRuntimeException) {
-            message = ((NestedRuntimeException) exception).getMostSpecificCause().getMessage();
-        } else {
-            message = exception.getMessage();
+            exception = ((NestedRuntimeException) exception).getMostSpecificCause();
         }
-        log.warn("Unable to send mail: {}", message);
-        return new ThingsboardException(String.format("Unable to send mail: %s", message),
-                ThingsboardErrorCode.GENERAL);
+        log.warn("Unable to send mail: {}", exception.getMessage());
+        return new ThingsboardException("Unable to send mail: " + exception.getMessage(), ThingsboardErrorCode.GENERAL);
     }
 
 }
diff --git a/application/src/main/java/org/thingsboard/server/service/notification/DefaultNotificationCenter.java b/application/src/main/java/org/thingsboard/server/service/notification/DefaultNotificationCenter.java
index 84d3b6c378..71e2b576ed 100644
--- a/application/src/main/java/org/thingsboard/server/service/notification/DefaultNotificationCenter.java
+++ b/application/src/main/java/org/thingsboard/server/service/notification/DefaultNotificationCenter.java
@@ -40,6 +40,7 @@ import org.thingsboard.server.common.data.notification.NotificationRequestConfig
 import org.thingsboard.server.common.data.notification.NotificationRequestStats;
 import org.thingsboard.server.common.data.notification.NotificationRequestStatus;
 import org.thingsboard.server.common.data.notification.NotificationStatus;
+import org.thingsboard.server.common.data.notification.info.GeneralNotificationInfo;
 import org.thingsboard.server.common.data.notification.info.RuleOriginatedNotificationInfo;
 import org.thingsboard.server.common.data.notification.settings.NotificationSettings;
 import org.thingsboard.server.common.data.notification.settings.UserNotificationSettings;
@@ -187,7 +188,7 @@ public class DefaultNotificationCenter extends AbstractSubscriptionService imple
     }
 
     @Override
-    public void sendGeneralWebNotification(TenantId tenantId, UsersFilter recipients, NotificationTemplate template) {
+    public void sendGeneralWebNotification(TenantId tenantId, UsersFilter recipients, NotificationTemplate template, GeneralNotificationInfo info) {
         NotificationTarget target = new NotificationTarget();
         target.setTenantId(tenantId);
         PlatformUsersNotificationTargetConfig targetConfig = new PlatformUsersNotificationTargetConfig();
@@ -198,6 +199,7 @@ public class DefaultNotificationCenter extends AbstractSubscriptionService imple
                 .tenantId(tenantId)
                 .template(template)
                 .targets(List.of(EntityId.NULL_UUID)) // this is temporary and will be removed when 'create from scratch' functionality is implemented for recipients
+                .info(info)
                 .status(NotificationRequestStatus.PROCESSING)
                 .build();
         try {
diff --git a/application/src/main/java/org/thingsboard/server/service/security/auth/mfa/provider/impl/EmailTwoFaProvider.java b/application/src/main/java/org/thingsboard/server/service/security/auth/mfa/provider/impl/EmailTwoFaProvider.java
index 4add550090..7cdbc9d54f 100644
--- a/application/src/main/java/org/thingsboard/server/service/security/auth/mfa/provider/impl/EmailTwoFaProvider.java
+++ b/application/src/main/java/org/thingsboard/server/service/security/auth/mfa/provider/impl/EmailTwoFaProvider.java
@@ -57,7 +57,11 @@ public class EmailTwoFaProvider extends OtpBasedTwoFaProvider<EmailTwoFaProvider
 
     @Override
     protected void sendVerificationCode(SecurityUser user, String verificationCode, EmailTwoFaProviderConfig providerConfig, EmailTwoFaAccountConfig accountConfig) throws ThingsboardException {
-        mailService.sendTwoFaVerificationEmail(accountConfig.getEmail(), verificationCode, providerConfig.getVerificationCodeLifetime());
+        try {
+            mailService.sendTwoFaVerificationEmail(accountConfig.getEmail(), verificationCode, providerConfig.getVerificationCodeLifetime());
+        } catch (Exception e) {
+            throw new ThingsboardException("Couldn't send 2FA verification email", ThingsboardErrorCode.GENERAL);
+        }
     }
 
     @Override
diff --git a/application/src/main/java/org/thingsboard/server/service/security/system/DefaultSystemSecurityService.java b/application/src/main/java/org/thingsboard/server/service/security/system/DefaultSystemSecurityService.java
index 6516bd7ce6..c969fa71ed 100644
--- a/application/src/main/java/org/thingsboard/server/service/security/system/DefaultSystemSecurityService.java
+++ b/application/src/main/java/org/thingsboard/server/service/security/system/DefaultSystemSecurityService.java
@@ -265,7 +265,7 @@ public class DefaultSystemSecurityService implements SystemSecurityService {
             }
         }
         if (actionType == ActionType.LOGIN && e == null) {
-            userService.setLastLoginTs(user.getTenantId(), user.getId());
+            userService.updateLastLoginTs(user.getTenantId(), user.getId());
         }
         auditLogService.logEntityAction(
                 user.getTenantId(), user.getCustomerId(), user.getId(),
diff --git a/application/src/main/java/org/thingsboard/server/service/subscription/DefaultTbLocalSubscriptionService.java b/application/src/main/java/org/thingsboard/server/service/subscription/DefaultTbLocalSubscriptionService.java
index 4043b519da..0a47f5f375 100644
--- a/application/src/main/java/org/thingsboard/server/service/subscription/DefaultTbLocalSubscriptionService.java
+++ b/application/src/main/java/org/thingsboard/server/service/subscription/DefaultTbLocalSubscriptionService.java
@@ -282,7 +282,6 @@ public class DefaultTbLocalSubscriptionService implements TbLocalSubscriptionSer
             if (sessionSubscriptions != null) {
                 TbSubscription<?> subscription = sessionSubscriptions.remove(subscriptionId);
                 if (subscription != null) {
-
                     if (sessionSubscriptions.isEmpty()) {
                         subscriptionsBySessionId.remove(sessionId);
                     }
@@ -304,22 +303,26 @@ public class DefaultTbLocalSubscriptionService implements TbLocalSubscriptionSer
     @Override
     public void cancelAllSessionSubscriptions(TenantId tenantId, String sessionId) {
         log.debug("[{}][{}] Going to remove session subscriptions.", tenantId, sessionId);
-        List<SubscriptionModificationResult> results = new ArrayList<>();
         Lock subsLock = getSubsLock(tenantId);
         subsLock.lock();
         try {
             Map<Integer, TbSubscription<?>> sessionSubscriptions = subscriptionsBySessionId.remove(sessionId);
             if (sessionSubscriptions != null) {
-                for (TbSubscription<?> subscription : sessionSubscriptions.values()) {
-                    results.add(modifySubscription(tenantId, subscription.getEntityId(), subscription, false));
-                }
+                Map<EntityId, List<TbSubscription<?>>> entitySubscriptions =
+                        sessionSubscriptions.values().stream().collect(Collectors.groupingBy(TbSubscription::getEntityId));
+
+                entitySubscriptions.forEach((entityId, subscriptions) -> {
+                    TbEntitySubEvent event = removeAllSubscriptions(tenantId, entityId, subscriptions);
+                    if (event != null) {
+                        pushSubscriptionsEvent(tenantId, entityId, event);
+                    }
+                });
             } else {
                 log.debug("[{}][{}] No session subscriptions found!", tenantId, sessionId);
             }
         } finally {
             subsLock.unlock();
         }
-        results.stream().filter(SubscriptionModificationResult::hasEvent).forEach(this::pushSubscriptionEvent);
     }
 
     @Override
@@ -500,6 +503,30 @@ public class DefaultTbLocalSubscriptionService implements TbLocalSubscriptionSer
         return new SubscriptionModificationResult(tenantId, entityId, subscription, missedUpdatesCandidate, event);
     }
 
+    private TbEntitySubEvent removeAllSubscriptions(TenantId tenantId, EntityId entityId, List<TbSubscription<?>> subscriptions) {
+        TbEntitySubEvent event = null;
+        try {
+            TbEntityLocalSubsInfo entitySubs = subscriptionsByEntityId.get(entityId.getId());
+            event = entitySubs.removeAll(subscriptions);
+            if (entitySubs.isEmpty()) {
+                subscriptionsByEntityId.remove(entityId.getId());
+                entityUpdates.remove(entityId.getId());
+            }
+        } catch (Exception e) {
+            log.warn("[{}][{}] Failed to remove all subscriptions {} due to ", tenantId, entityId, subscriptions, e);
+        }
+        return event;
+    }
+
+    private void pushSubscriptionsEvent(TenantId tenantId, EntityId entityId, TbEntitySubEvent event) {
+        try {
+            log.trace("[{}][{}] Event: {}", tenantId, entityId, event);
+            pushSubEventToManagerService(tenantId, entityId, event);
+        } catch (Exception e) {
+            log.warn("[{}][{}] Failed to push subscription event {} due to ", tenantId, entityId, event, e);
+        }
+    }
+
     private void pushSubscriptionEvent(SubscriptionModificationResult modificationResult) {
         try {
             TbEntitySubEvent event = modificationResult.getEvent();
diff --git a/application/src/main/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfo.java b/application/src/main/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfo.java
index f5a5639ec0..ee20843538 100644
--- a/application/src/main/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfo.java
+++ b/application/src/main/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfo.java
@@ -24,6 +24,7 @@ import org.thingsboard.server.common.data.id.TenantId;
 import org.thingsboard.server.common.data.plugin.ComponentLifecycleEvent;
 
 import java.util.HashSet;
+import java.util.List;
 import java.util.Map;
 import java.util.Set;
 import java.util.concurrent.ConcurrentHashMap;
@@ -129,13 +130,64 @@ public class TbEntityLocalSubsInfo {
         if (!subs.remove(sub)) {
             return null;
         }
-        if (subs.isEmpty()) {
+        if (isEmpty()) {
             return toEvent(ComponentLifecycleEvent.DELETED);
         }
-        TbSubscriptionsInfo oldState = state.copy();
-        TbSubscriptionsInfo newState = new TbSubscriptionsInfo();
+        TbSubscriptionType type = sub.getType();
+        TbSubscriptionsInfo newState = state.copy();
+        clearState(newState, type);
+        return updateState(Set.of(type), newState);
+    }
+
+    public TbEntitySubEvent removeAll(List<? extends TbSubscription<?>> subsToRemove) {
+        Set<TbSubscriptionType> changedTypes = new HashSet<>();
+        TbSubscriptionsInfo newState = state.copy();
+        for (TbSubscription<?> sub : subsToRemove) {
+            log.trace("[{}][{}][{}] Removing: {}", tenantId, entityId, sub.getSubscriptionId(), sub);
+            if (!subs.remove(sub)) {
+                continue;
+            }
+            if (isEmpty()) {
+                return toEvent(ComponentLifecycleEvent.DELETED);
+            }
+            TbSubscriptionType type = sub.getType();
+            if (changedTypes.contains(type)) {
+                continue;
+            }
+
+            clearState(newState, type);
+            changedTypes.add(type);
+        }
+
+        return updateState(changedTypes, newState);
+    }
+
+    private void clearState(TbSubscriptionsInfo state, TbSubscriptionType type) {
+        switch (type) {
+            case NOTIFICATIONS:
+            case NOTIFICATIONS_COUNT:
+                state.notifications = false;
+                break;
+            case ALARMS:
+                state.alarms = false;
+                break;
+            case ATTRIBUTES:
+                state.attrAllKeys = false;
+                state.attrKeys = null;
+                break;
+            case TIMESERIES:
+                state.tsAllKeys = false;
+                state.tsKeys = null;
+        }
+    }
+
+    private TbEntitySubEvent updateState(Set<TbSubscriptionType> updatedTypes, TbSubscriptionsInfo newState) {
         for (TbSubscription<?> subscription : subs) {
-            switch (subscription.getType()) {
+            TbSubscriptionType type = subscription.getType();
+            if (!updatedTypes.contains(type)) {
+                continue;
+            }
+            switch (type) {
                 case NOTIFICATIONS:
                 case NOTIFICATIONS_COUNT:
                     if (!newState.notifications) {
@@ -173,7 +225,7 @@ public class TbEntityLocalSubsInfo {
                     break;
             }
         }
-        if (newState.equals(oldState)) {
+        if (newState.equals(state)) {
             return null;
         } else {
             this.state = newState;
@@ -196,7 +248,7 @@ public class TbEntityLocalSubsInfo {
 
 
     public boolean isEmpty() {
-        return state.isEmpty();
+        return subs.isEmpty();
     }
 
     public TbSubscription<?> registerPendingSubscription(TbSubscription<?> subscription, TbEntitySubEvent event) {
diff --git a/application/src/main/java/org/thingsboard/server/service/sync/DefaultGitSyncService.java b/application/src/main/java/org/thingsboard/server/service/sync/DefaultGitSyncService.java
new file mode 100644
index 0000000000..30a22fe5ca
--- /dev/null
+++ b/application/src/main/java/org/thingsboard/server/service/sync/DefaultGitSyncService.java
@@ -0,0 +1,172 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.sync;
+
+import jakarta.annotation.PreDestroy;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import org.thingsboard.common.util.ThingsBoardThreadFactory;
+import org.thingsboard.server.common.data.sync.vc.RepositorySettings;
+import org.thingsboard.server.queue.util.TbCoreComponent;
+import org.thingsboard.server.service.sync.vc.GitRepository;
+import org.thingsboard.server.service.sync.vc.GitRepository.FileType;
+import org.thingsboard.server.service.sync.vc.GitRepository.RepoFile;
+
+import java.net.URI;
+import java.nio.file.Path;
+import java.util.List;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.Executors;
+import java.util.concurrent.ScheduledExecutorService;
+import java.util.concurrent.TimeUnit;
+
+@TbCoreComponent
+@Service
+@Slf4j
+public class DefaultGitSyncService implements GitSyncService {
+
+    @Value("${vc.git.repositories-folder:${java.io.tmpdir}/repositories}")
+    private String repositoriesFolder;
+
+    private final ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor(ThingsBoardThreadFactory.forName("git-sync"));
+    private final Map<String, GitRepository> repositories = new ConcurrentHashMap<>();
+    private final Map<String, Runnable> updateListeners = new ConcurrentHashMap<>();
+
+    @Override
+    public void registerSync(String key, String repoUri, String branch, long fetchFrequencyMs, Runnable onUpdate) {
+        RepositorySettings settings = new RepositorySettings();
+        settings.setRepositoryUri(repoUri);
+        settings.setDefaultBranch(branch);
+        if (onUpdate != null) {
+            updateListeners.put(key, onUpdate);
+        }
+
+        executor.execute(() -> {
+            initRepository(key, settings);
+        });
+
+        executor.scheduleWithFixedDelay(() -> {
+            GitRepository repository = repositories.get(key);
+            if (repository == null || !GitRepository.exists(repository.getDirectory())) {
+                initRepository(key, settings);
+                return;
+            }
+
+            try {
+                log.debug("[{}] Fetching repository", key);
+                boolean updated = repository.fetch();
+                if (updated) {
+                    onUpdate(key);
+                } else {
+                    log.debug("[{}] No changes in the repository", key);
+                }
+            } catch (Throwable e) {
+                log.error("[{}] Failed to fetch repository", key, e);
+            }
+        }, fetchFrequencyMs, fetchFrequencyMs, TimeUnit.MILLISECONDS);
+    }
+
+    @Override
+    public List<RepoFile> listFiles(String key, String path, int depth, FileType type) {
+        GitRepository repository = getRepository(key);
+        return repository.listFilesAtCommit(getBranchRef(repository), path, depth).stream()
+                .filter(file -> type == null || file.type() == type)
+                .toList();
+    }
+
+
+    @Override
+    public String getFileContent(String key, String path) {
+        GitRepository repository = getRepository(key);
+        try {
+            return repository.getFileContentAtCommit(path, getBranchRef(repository));
+        } catch (Exception e) {
+            log.warn("[{}] Failed to get file content for path {}: {}", key, path, e.getMessage());
+            return "{}";
+        }
+    }
+
+    @Override
+    public String getGithubRawContentUrl(String key, String path) {
+        if (path == null) {
+            return "";
+        }
+        RepositorySettings settings = getRepository(key).getSettings();
+        return StringUtils.removeEnd(settings.getRepositoryUri(), ".git") + "/blob/" + settings.getDefaultBranch() + "/" + path + "?raw=true";
+    }
+
+    private GitRepository getRepository(String key) {
+        GitRepository repository = repositories.get(key);
+        if (repository != null) {
+            if (!GitRepository.exists(repository.getDirectory())) {
+                // reinitializing the repository because folder was deleted
+                initRepository(key, repository.getSettings());
+            }
+        }
+
+        repository = repositories.get(key);
+        if (repository == null) {
+            throw new IllegalStateException(key + " repository is not initialized");
+        }
+        return repository;
+    }
+
+    private void initRepository(String key, RepositorySettings settings) {
+        try {
+            repositories.remove(key);
+            Path directory = getRepoDirectory(settings);
+
+            GitRepository repository = GitRepository.openOrClone(directory, settings, true);
+            repositories.put(key, repository);
+            log.info("[{}] Initialized repository", key);
+
+            onUpdate(key);
+        } catch (Throwable e) {
+            log.error("[{}] Failed to initialize repository with settings {}", key, settings, e);
+        }
+    }
+
+    private void onUpdate(String key) {
+        Runnable listener = updateListeners.get(key);
+        if (listener != null) {
+            log.debug("[{}] Handling repository update", key);
+            try {
+                listener.run();
+            } catch (Throwable e) {
+                log.error("[{}] Failed to handle repository update", key, e);
+            }
+        }
+    }
+
+    private Path getRepoDirectory(RepositorySettings settings) {
+        // using uri to define folder name in case repo url is changed
+        String name = URI.create(settings.getRepositoryUri()).getPath().replaceAll("[^a-zA-Z]", "");
+        return Path.of(repositoriesFolder, name);
+    }
+
+    private String getBranchRef(GitRepository repository) {
+        return "refs/remotes/origin/" + repository.getSettings().getDefaultBranch();
+    }
+
+    @PreDestroy
+    private void preDestroy() {
+        executor.shutdownNow();
+    }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.scss b/application/src/main/java/org/thingsboard/server/service/sync/GitSyncService.java
similarity index 53%
rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.scss
rename to application/src/main/java/org/thingsboard/server/service/sync/GitSyncService.java
index 9dbaa52831..d1a09757f7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.scss
+++ b/application/src/main/java/org/thingsboard/server/service/sync/GitSyncService.java
@@ -13,45 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
+package org.thingsboard.server.service.sync;
 
-  .tb-form-row {
-    &.bottom-same-padding {
-      padding-bottom: 16px;
-    }
+import org.thingsboard.server.service.sync.vc.GitRepository.FileType;
+import org.thingsboard.server.service.sync.vc.GitRepository.RepoFile;
 
-    &.top-same-padding {
-      padding-top: 16px;
-    }
+import java.util.List;
 
-    .fixed-title-width {
-      width: 19%;
-    }
-  }
+public interface GitSyncService {
 
-  .table-column {
-    width: 40%;
-  }
+    void registerSync(String key, String repoUri, String branch, long fetchFrequencyMs, Runnable onUpdate);
 
-  .table-name-column {
-    width: 20%;
-  }
+    List<RepoFile> listFiles(String key, String path, int depth, FileType type);
 
-  .raw-name {
-    width: 19%;
-  }
+    String getFileContent(String key, String path);
 
-  .raw-value-option {
-    max-width: 40%;
-  }
+    String getGithubRawContentUrl(String key, String path);
 
 }
-
-:host ::ng-deep {
-  .mat-mdc-form-field-icon-suffix {
-    display: flex;
-  }
-}
diff --git a/application/src/main/java/org/thingsboard/server/service/update/DeprecationService.java b/application/src/main/java/org/thingsboard/server/service/update/DeprecationService.java
new file mode 100644
index 0000000000..ddb8080bcd
--- /dev/null
+++ b/application/src/main/java/org/thingsboard/server/service/update/DeprecationService.java
@@ -0,0 +1,65 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.update;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import org.thingsboard.rule.engine.api.NotificationCenter;
+import org.thingsboard.server.common.data.id.TenantId;
+import org.thingsboard.server.common.data.notification.info.GeneralNotificationInfo;
+import org.thingsboard.server.common.data.notification.targets.platform.SystemAdministratorsFilter;
+import org.thingsboard.server.dao.notification.DefaultNotifications;
+import org.thingsboard.server.queue.util.AfterStartUp;
+
+import java.util.Map;
+
+@Service
+@Slf4j
+@RequiredArgsConstructor
+public class DeprecationService {
+
+    private final NotificationCenter notificationCenter;
+
+    @Value("${queue.type}")
+    private String queueType;
+
+    @AfterStartUp(order = Integer.MAX_VALUE)
+    public void checkDeprecation() {
+        checkQueueTypeDeprecation();
+    }
+
+    private void checkQueueTypeDeprecation() {
+        String queueTypeName;
+        switch (queueType) {
+            case "aws-sqs" -> queueTypeName = "AWS SQS";
+            case "pubsub" -> queueTypeName = "PubSub";
+            case "service-bus" -> queueTypeName = "Azure Service Bus";
+            case "rabbitmq" -> queueTypeName = "RabbitMQ";
+            default -> {
+                return;
+            }
+        }
+
+        log.warn("WARNING: {} queue type is deprecated and will be removed in ThingsBoard 4.0. Please migrate to Apache Kafka", queueTypeName);
+        notificationCenter.sendGeneralWebNotification(TenantId.SYS_TENANT_ID, new SystemAdministratorsFilter(),
+                DefaultNotifications.queueTypeDeprecation.toTemplate(), new GeneralNotificationInfo(Map.of(
+                        "queueType", queueTypeName
+                )));
+    }
+
+}
diff --git a/application/src/main/resources/thingsboard.yml b/application/src/main/resources/thingsboard.yml
index bfed0c06d3..106810a7a1 100644
--- a/application/src/main/resources/thingsboard.yml
+++ b/application/src/main/resources/thingsboard.yml
@@ -204,7 +204,7 @@ ui:
   # Help parameters
   help:
     # Base URL for UI help assets
-    base-url: "${UI_HELP_BASE_URL:https://raw.githubusercontent.com/thingsboard/thingsboard-ui-help/release-3.8}"
+    base-url: "${UI_HELP_BASE_URL:https://raw.githubusercontent.com/thingsboard/thingsboard-ui-help/release-3.9}"
 
 # Database telemetry parameters
 database:
@@ -802,7 +802,7 @@ spring:
         # This property controls the amount of time that a connection can be out of the pool before a message is logged indicating a possible connection leak for events datasource. A value of 0 means leak detection is disabled
         leakDetectionThreshold: "${SPRING_EVENTS_DATASOURCE_HIKARI_LEAK_DETECTION_THRESHOLD:0}"
         # This property increases the number of connections in the pool as demand increases for events datasource. At the same time, the property ensures that the pool doesn't grow to the point of exhausting a system's resources, which ultimately affects an application's performance and availability
-        maximumPoolSize: "${SPRING_EVENTS_DATASOURCE_MAXIMUM_POOL_SIZE:16}"
+        maximumPoolSize: "${SPRING_EVENTS_DATASOURCE_MAXIMUM_POOL_SIZE:4}"
         # Enable MBean to diagnose pools state via JMX for events datasource
         registerMbeans: "${SPRING_EVENTS_DATASOURCE_HIKARI_REGISTER_MBEANS:false}"
 
@@ -1244,6 +1244,17 @@ transport:
     enabled: "${TB_TRANSPORT_STATS_ENABLED:true}"
     # Interval of transport statistics logging
     print-interval-ms: "${TB_TRANSPORT_STATS_PRINT_INTERVAL_MS:60000}"
+  gateway:
+    dashboard:
+      sync:
+        # Enable/disable gateways dashboard sync with git repository
+        enabled: "${TB_GATEWAY_DASHBOARD_SYNC_ENABLED:true}"
+        # URL of gateways dashboard repository
+        repository_url: "${TB_GATEWAY_DASHBOARD_SYNC_REPOSITORY_URL:https://github.com/thingsboard/gateway-management-extensions-dist.git}"
+        # Branch of gateways dashboard repository to work with
+        branch: "${TB_GATEWAY_DASHBOARD_SYNC_BRANCH:main}"
+        # Fetch frequency in hours for gateways dashboard repository
+        fetch_frequency: "${TB_GATEWAY_DASHBOARD_SYNC_FETCH_FREQUENCY:24}"
 
 # CoAP server parameters
 coap:
diff --git a/application/src/test/java/org/thingsboard/server/controller/AuthControllerTest.java b/application/src/test/java/org/thingsboard/server/controller/AuthControllerTest.java
index 817ded33e7..73182587fb 100644
--- a/application/src/test/java/org/thingsboard/server/controller/AuthControllerTest.java
+++ b/application/src/test/java/org/thingsboard/server/controller/AuthControllerTest.java
@@ -27,6 +27,7 @@ import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.common.data.StringUtils;
 import org.thingsboard.server.common.data.User;
 import org.thingsboard.server.common.data.UserActivationLink;
+import org.thingsboard.server.common.data.id.UserId;
 import org.thingsboard.server.common.data.security.Authority;
 import org.thingsboard.server.common.data.security.UserCredentials;
 import org.thingsboard.server.common.data.security.model.SecuritySettings;
@@ -67,31 +68,30 @@ public class AuthControllerTest extends AbstractControllerTest {
                 .andExpect(status().isUnauthorized());
 
         loginSysAdmin();
-        doGet("/api/auth/user")
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.authority", is(Authority.SYS_ADMIN.name())))
-                .andExpect(jsonPath("$.email", is(SYS_ADMIN_EMAIL)));
+        User user = getCurrentUser();
+        assertThat(user.getAuthority()).isEqualTo(Authority.SYS_ADMIN);
+        assertThat(user.getEmail()).isEqualTo(SYS_ADMIN_EMAIL);
 
         loginTenantAdmin();
-        doGet("/api/auth/user")
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.authority", is(Authority.TENANT_ADMIN.name())))
-                .andExpect(jsonPath("$.email", is(TENANT_ADMIN_EMAIL)));
+        user = getCurrentUser();
+        assertThat(user.getAuthority()).isEqualTo(Authority.TENANT_ADMIN);
+        assertThat(user.getEmail()).isEqualTo(TENANT_ADMIN_EMAIL);
 
         loginCustomerUser();
-        doGet("/api/auth/user")
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.authority", is(Authority.CUSTOMER_USER.name())))
-                .andExpect(jsonPath("$.email", is(CUSTOMER_USER_EMAIL)));
+        user = getCurrentUser();
+        assertThat(user.getAuthority()).isEqualTo(Authority.CUSTOMER_USER);
+        assertThat(user.getEmail()).isEqualTo(CUSTOMER_USER_EMAIL);
+        user = getUser(customerUserId);
+        assertThat(user.getAdditionalInfo().get("userCredentialsEnabled").asBoolean()).isTrue();
+        assertThat(user.getAdditionalInfo().get("lastLoginTs").asLong()).isCloseTo(System.currentTimeMillis(), within(10000L));
     }
 
     @Test
     public void testLoginLogout() throws Exception {
         loginSysAdmin();
-        doGet("/api/auth/user")
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.authority", is(Authority.SYS_ADMIN.name())))
-                .andExpect(jsonPath("$.email", is(SYS_ADMIN_EMAIL)));
+        User user = getCurrentUser();
+        assertThat(user.getAuthority()).isEqualTo(Authority.SYS_ADMIN);
+        assertThat(user.getEmail()).isEqualTo(SYS_ADMIN_EMAIL);
 
         TimeUnit.SECONDS.sleep(1); //We need to make sure that event for invalidating token was successfully processed
 
@@ -102,19 +102,45 @@ public class AuthControllerTest extends AbstractControllerTest {
         resetTokens();
     }
 
+    @Test
+    public void testFailedLogin() throws Exception {
+        int maxFailedLoginAttempts = 3;
+        loginSysAdmin();
+        updateSecuritySettings(securitySettings -> {
+            securitySettings.setMaxFailedLoginAttempts(maxFailedLoginAttempts);
+        });
+        loginTenantAdmin();
+
+        for (int i = 0; i < maxFailedLoginAttempts; i++) {
+            String error = getErrorMessage(doPost("/api/auth/login",
+                    new LoginRequest(CUSTOMER_USER_EMAIL, "IncorrectPassword"))
+                    .andExpect(status().isUnauthorized()));
+            assertThat(error).containsIgnoringCase("invalid username or password");
+        }
+
+        User user = getUser(customerUserId);
+        assertThat(user.getAdditionalInfo().get("userCredentialsEnabled").asBoolean()).isTrue();
+
+        String error = getErrorMessage(doPost("/api/auth/login",
+                new LoginRequest(CUSTOMER_USER_EMAIL, "IncorrectPassword4"))
+                .andExpect(status().isUnauthorized()));
+        assertThat(error).containsIgnoringCase("account is locked");
+
+        user = getUser(customerUserId);
+        assertThat(user.getAdditionalInfo().get("userCredentialsEnabled").asBoolean()).isFalse();
+    }
+
     @Test
     public void testRefreshToken() throws Exception {
         loginSysAdmin();
-        doGet("/api/auth/user")
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.authority", is(Authority.SYS_ADMIN.name())))
-                .andExpect(jsonPath("$.email", is(SYS_ADMIN_EMAIL)));
+        User user = getCurrentUser();
+        assertThat(user.getAuthority()).isEqualTo(Authority.SYS_ADMIN);
+        assertThat(user.getEmail()).isEqualTo(SYS_ADMIN_EMAIL);
 
         refreshToken();
-        doGet("/api/auth/user")
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.authority", is(Authority.SYS_ADMIN.name())))
-                .andExpect(jsonPath("$.email", is(SYS_ADMIN_EMAIL)));
+        user = getCurrentUser();
+        assertThat(user.getAuthority()).isEqualTo(Authority.SYS_ADMIN);
+        assertThat(user.getEmail()).isEqualTo(SYS_ADMIN_EMAIL);
     }
 
     @Test
@@ -277,6 +303,14 @@ public class AuthControllerTest extends AbstractControllerTest {
         doPost("/api/admin/securitySettings", securitySettings).andExpect(status().isOk());
     }
 
+    private User getCurrentUser() throws Exception {
+        return doGet("/api/auth/user", User.class);
+    }
+
+    private User getUser(UserId id) throws Exception {
+        return doGet("/api/user/" + id, User.class);
+    }
+
     private String getActivationLink(User user) throws Exception {
         return doGet("/api/user/" + user.getId() + "/activationLink", String.class);
     }
diff --git a/application/src/test/java/org/thingsboard/server/controller/TwoFactorAuthTest.java b/application/src/test/java/org/thingsboard/server/controller/TwoFactorAuthTest.java
index 63703ae27b..7fa848f95d 100644
--- a/application/src/test/java/org/thingsboard/server/controller/TwoFactorAuthTest.java
+++ b/application/src/test/java/org/thingsboard/server/controller/TwoFactorAuthTest.java
@@ -319,7 +319,9 @@ public class TwoFactorAuthTest extends AbstractControllerTest {
             assertThat(successfulLogInAuditLog.getActionStatus()).isEqualTo(ActionStatus.SUCCESS);
             assertThat(successfulLogInAuditLog.getUserName()).isEqualTo(username);
         });
-        assertThat(userService.findUserById(tenantId, user.getId()).getAdditionalInfo()
+
+        loginTenantAdmin();
+        assertThat(doGet("/api/user/" + user.getId(), User.class).getAdditionalInfo()
                 .get("lastLoginTs").asLong())
                 .isGreaterThan(System.currentTimeMillis() - TimeUnit.SECONDS.toMillis(3));
     }
diff --git a/application/src/test/java/org/thingsboard/server/controller/UserControllerTest.java b/application/src/test/java/org/thingsboard/server/controller/UserControllerTest.java
index 17085f3ca9..c42ecc4545 100644
--- a/application/src/test/java/org/thingsboard/server/controller/UserControllerTest.java
+++ b/application/src/test/java/org/thingsboard/server/controller/UserControllerTest.java
@@ -113,6 +113,7 @@ public class UserControllerTest extends AbstractControllerTest {
         Assert.assertEquals(email, savedUser.getEmail());
 
         User foundUser = doGet("/api/user/" + savedUser.getId().getId().toString(), User.class);
+        foundUser.setAdditionalInfo(savedUser.getAdditionalInfo());
         Assert.assertEquals(foundUser, savedUser);
 
         testNotifyManyEntityManyTimeMsgToEdgeServiceEntityEqAny(foundUser, foundUser,
@@ -265,6 +266,7 @@ public class UserControllerTest extends AbstractControllerTest {
         User savedUser = doPost("/api/user", user, User.class);
         User foundUser = doGet("/api/user/" + savedUser.getId().getId().toString(), User.class);
         Assert.assertNotNull(foundUser);
+        foundUser.setAdditionalInfo(savedUser.getAdditionalInfo());
         Assert.assertEquals(savedUser, foundUser);
     }
 
diff --git a/application/src/test/java/org/thingsboard/server/edge/UserEdgeTest.java b/application/src/test/java/org/thingsboard/server/edge/UserEdgeTest.java
index 1c3b5ccb7a..52204f8fde 100644
--- a/application/src/test/java/org/thingsboard/server/edge/UserEdgeTest.java
+++ b/application/src/test/java/org/thingsboard/server/edge/UserEdgeTest.java
@@ -47,7 +47,7 @@ public class UserEdgeTest extends AbstractEdgeTest {
     @Test
     public void testCreateUpdateDeleteTenantUser() throws Exception {
         // create user
-        edgeImitator.expectMessageAmount(6);
+        edgeImitator.expectMessageAmount(3);
         User newTenantAdmin = new User();
         newTenantAdmin.setAuthority(Authority.TENANT_ADMIN);
         newTenantAdmin.setTenantId(tenantId);
@@ -55,9 +55,9 @@ public class UserEdgeTest extends AbstractEdgeTest {
         newTenantAdmin.setFirstName("Boris");
         newTenantAdmin.setLastName("Johnson");
         User savedTenantAdmin = createUser(newTenantAdmin, "tenant");
-        Assert.assertTrue(edgeImitator.waitForMessages()); // wait 6 messages - x2 user update msg and x4 user credentials update msgs (create + authenticate user)
-        Assert.assertEquals(2, edgeImitator.findAllMessagesByType(UserUpdateMsg.class).size());
-        Assert.assertEquals(4, edgeImitator.findAllMessagesByType(UserCredentialsUpdateMsg.class).size());
+        Assert.assertTrue(edgeImitator.waitForMessages()); // wait 3 messages - x1 user update msg and x2 user credentials update msgs (create + authenticate user)
+        Assert.assertEquals(1, edgeImitator.findAllMessagesByType(UserUpdateMsg.class).size());
+        Assert.assertEquals(2, edgeImitator.findAllMessagesByType(UserCredentialsUpdateMsg.class).size());
         Optional<UserUpdateMsg> userUpdateMsgOpt = edgeImitator.findMessageByType(UserUpdateMsg.class);
         Assert.assertTrue(userUpdateMsgOpt.isPresent());
         UserUpdateMsg userUpdateMsg = userUpdateMsgOpt.get();
@@ -133,7 +133,7 @@ public class UserEdgeTest extends AbstractEdgeTest {
         Assert.assertTrue(edgeImitator.waitForMessages());
 
         // create user
-        edgeImitator.expectMessageAmount(6);
+        edgeImitator.expectMessageAmount(3);
         User customerUser = new User();
         customerUser.setAuthority(Authority.CUSTOMER_USER);
         customerUser.setTenantId(tenantId);
@@ -142,9 +142,9 @@ public class UserEdgeTest extends AbstractEdgeTest {
         customerUser.setFirstName("John");
         customerUser.setLastName("Edwards");
         User savedCustomerUser = createUser(customerUser, "customer");
-        Assert.assertTrue(edgeImitator.waitForMessages());  // wait 6 messages - x2 user update msg and x4 user credentials update msgs (create + authenticate user)
-        Assert.assertEquals(2, edgeImitator.findAllMessagesByType(UserUpdateMsg.class).size());
-        Assert.assertEquals(4, edgeImitator.findAllMessagesByType(UserCredentialsUpdateMsg.class).size());
+        Assert.assertTrue(edgeImitator.waitForMessages());  // wait 3 messages - x1 user update msg and x2 user credentials update msgs (create + authenticate user)
+        Assert.assertEquals(1, edgeImitator.findAllMessagesByType(UserUpdateMsg.class).size());
+        Assert.assertEquals(2, edgeImitator.findAllMessagesByType(UserCredentialsUpdateMsg.class).size());
         Optional<UserUpdateMsg> userUpdateMsgOpt = edgeImitator.findMessageByType(UserUpdateMsg.class);
         Assert.assertTrue(userUpdateMsgOpt.isPresent());
         UserUpdateMsg userUpdateMsg = userUpdateMsgOpt.get();
diff --git a/application/src/test/java/org/thingsboard/server/service/entitiy/dashboard/DashboardSyncServiceTest.java b/application/src/test/java/org/thingsboard/server/service/entitiy/dashboard/DashboardSyncServiceTest.java
new file mode 100644
index 0000000000..c5374551ec
--- /dev/null
+++ b/application/src/test/java/org/thingsboard/server/service/entitiy/dashboard/DashboardSyncServiceTest.java
@@ -0,0 +1,74 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.entitiy.dashboard;
+
+import org.junit.After;
+import org.junit.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.mock.web.MockHttpServletResponse;
+import org.springframework.test.context.TestPropertySource;
+import org.thingsboard.common.util.JacksonUtil;
+import org.thingsboard.server.common.data.Dashboard;
+import org.thingsboard.server.controller.AbstractControllerTest;
+import org.thingsboard.server.dao.service.DaoSqlTest;
+import org.thingsboard.server.dao.sql.resource.TbResourceRepository;
+import org.thingsboard.server.dao.sql.widget.WidgetTypeRepository;
+import org.thingsboard.server.dao.sql.widget.WidgetsBundleRepository;
+
+import java.util.concurrent.TimeUnit;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.awaitility.Awaitility.await;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+@DaoSqlTest
+@TestPropertySource(properties = {
+        "transport.gateway.dashboard.sync.enabled=true"
+})
+public class DashboardSyncServiceTest extends AbstractControllerTest {
+
+    @Autowired
+    private WidgetTypeRepository widgetTypeRepository;
+    @Autowired
+    private WidgetsBundleRepository widgetsBundleRepository;
+    @Autowired
+    private TbResourceRepository resourceRepository;
+
+    @After
+    public void after() throws Exception {
+        widgetsBundleRepository.deleteAll();
+        widgetTypeRepository.deleteAll();
+        resourceRepository.deleteAll();
+    }
+
+    @Test
+    public void testGatewaysDashboardSync() throws Exception {
+        loginTenantAdmin();
+        await().atMost(60, TimeUnit.SECONDS).untilAsserted(() -> {
+            MockHttpServletResponse response = doGet("/api/resource/dashboard/system/gateways_dashboard.json")
+                    .andExpect(status().isOk())
+                    .andReturn().getResponse();
+            String dashboardJson = response.getContentAsString();
+            String etag = response.getHeader("ETag");
+
+            Dashboard dashboard = JacksonUtil.fromString(dashboardJson, Dashboard.class);
+            assertThat(dashboard).isNotNull();
+            assertThat(dashboard.getTitle()).containsIgnoringCase("gateway");
+            assertThat(etag).isNotBlank();
+        });
+    }
+
+}
\ No newline at end of file
diff --git a/application/src/test/java/org/thingsboard/server/service/install/InstallScriptsTest.java b/application/src/test/java/org/thingsboard/server/service/install/InstallScriptsTest.java
index 37b50fda4f..9d42c1d8ae 100644
--- a/application/src/test/java/org/thingsboard/server/service/install/InstallScriptsTest.java
+++ b/application/src/test/java/org/thingsboard/server/service/install/InstallScriptsTest.java
@@ -39,7 +39,6 @@ import org.thingsboard.server.dao.widget.WidgetTypeService;
 import org.thingsboard.server.dao.widget.WidgetsBundleService;
 import org.thingsboard.server.service.install.update.ImagesUpdater;
 
-import java.io.IOException;
 import java.nio.file.Path;
 import java.util.Collections;
 import java.util.List;
@@ -87,14 +86,14 @@ class InstallScriptsTest {
     }
 
     @Test
-    void testDefaultRuleChainsTemplates() throws IOException {
+    void testDefaultRuleChainsTemplates() {
         Path dir = installScripts.getTenantRuleChainsDir();
         installScripts.findRuleChainsFromPath(dir)
                 .forEach(this::validateRuleChainTemplate);
     }
 
     @Test
-    void testDefaultEdgeRuleChainsTemplates() throws IOException {
+    void testDefaultEdgeRuleChainsTemplates() {
         Path dir = installScripts.getEdgeRuleChainsDir();
         installScripts.findRuleChainsFromPath(dir)
                 .forEach(this::validateRuleChainTemplate);
diff --git a/application/src/test/java/org/thingsboard/server/service/notification/NotificationApiTest.java b/application/src/test/java/org/thingsboard/server/service/notification/NotificationApiTest.java
index 8bae1feca9..c7a1aeb9e8 100644
--- a/application/src/test/java/org/thingsboard/server/service/notification/NotificationApiTest.java
+++ b/application/src/test/java/org/thingsboard/server/service/notification/NotificationApiTest.java
@@ -56,6 +56,7 @@ import org.thingsboard.server.common.data.notification.NotificationRequestStatus
 import org.thingsboard.server.common.data.notification.NotificationType;
 import org.thingsboard.server.common.data.notification.info.AlarmCommentNotificationInfo;
 import org.thingsboard.server.common.data.notification.info.EntityActionNotificationInfo;
+import org.thingsboard.server.common.data.notification.info.GeneralNotificationInfo;
 import org.thingsboard.server.common.data.notification.rule.trigger.config.AlarmCommentNotificationRuleTriggerConfig;
 import org.thingsboard.server.common.data.notification.settings.MobileAppNotificationDeliveryMethodConfig;
 import org.thingsboard.server.common.data.notification.settings.NotificationSettings;
@@ -84,6 +85,7 @@ import org.thingsboard.server.common.data.notification.template.WebDeliveryMetho
 import org.thingsboard.server.common.data.page.PageLink;
 import org.thingsboard.server.common.data.security.Authority;
 import org.thingsboard.server.dao.notification.DefaultNotifications;
+import org.thingsboard.server.dao.notification.DefaultNotifications.DefaultNotification;
 import org.thingsboard.server.dao.service.DaoSqlTest;
 import org.thingsboard.server.service.notification.channels.MicrosoftTeamsNotificationChannel;
 import org.thingsboard.server.service.notification.channels.TeamsAdaptiveCard;
@@ -746,14 +748,21 @@ public class NotificationApiTest extends AbstractNotificationApiTest {
 
         getAnotherWsClient().registerWaitForUpdate();
 
-        DefaultNotifications.DefaultNotification expectedNotification = DefaultNotifications.maintenanceWork;
+        NotificationTemplate template = DefaultNotification.builder()
+                .name("Test")
+                .subject("Testing ${subjectVariable}")
+                .text("Testing ${bodyVariable}")
+                .build().toTemplate();
         notificationCenter.sendGeneralWebNotification(TenantId.SYS_TENANT_ID, new SystemAdministratorsFilter(),
-                expectedNotification.toTemplate());
+                template, new GeneralNotificationInfo(Map.of(
+                        "subjectVariable", "subject",
+                        "bodyVariable", "body"
+                )));
 
         getAnotherWsClient().waitForUpdate(true);
         Notification notification = getAnotherWsClient().getLastDataUpdate().getUpdate();
-        assertThat(notification.getSubject()).isEqualTo(expectedNotification.getSubject());
-        assertThat(notification.getText()).isEqualTo(expectedNotification.getText());
+        assertThat(notification.getSubject()).isEqualTo("Testing subject");
+        assertThat(notification.getText()).isEqualTo("Testing body");
     }
 
     @Test
diff --git a/application/src/test/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfoTest.java b/application/src/test/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfoTest.java
new file mode 100644
index 0000000000..e9b95ec832
--- /dev/null
+++ b/application/src/test/java/org/thingsboard/server/service/subscription/TbEntityLocalSubsInfoTest.java
@@ -0,0 +1,186 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.subscription;
+
+import org.junit.jupiter.api.Test;
+import org.thingsboard.server.common.data.id.DeviceId;
+import org.thingsboard.server.common.data.id.EntityId;
+import org.thingsboard.server.common.data.id.TenantId;
+import org.thingsboard.server.common.data.plugin.ComponentLifecycleEvent;
+
+import java.util.Collection;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertNotNull;
+import static org.junit.jupiter.api.Assertions.assertNull;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+public class TbEntityLocalSubsInfoTest {
+
+    @Test
+    public void addTest() {
+        Set<TbAttributeSubscription> expectedSubs = new HashSet<>();
+        TbEntityLocalSubsInfo subsInfo = createSubsInfo();
+        TenantId tenantId = subsInfo.getTenantId();
+        EntityId entityId = subsInfo.getEntityId();
+        TbAttributeSubscription attrSubscription1 = TbAttributeSubscription.builder()
+                .sessionId("session1")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key1", 1L, "key2", 2L))
+                .build();
+        expectedSubs.add(attrSubscription1);
+        TbEntitySubEvent created = subsInfo.add(attrSubscription1);
+        assertFalse(subsInfo.isEmpty());
+        assertNotNull(created);
+        assertEquals(expectedSubs, subsInfo.getSubs());
+        checkEvent(created, expectedSubs, ComponentLifecycleEvent.CREATED);
+
+        assertNull(subsInfo.add(attrSubscription1));
+
+        TbAttributeSubscription attrSubscription2 = TbAttributeSubscription.builder()
+                .sessionId("session2")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key3", 3L, "key4", 4L))
+                .build();
+        expectedSubs.add(attrSubscription2);
+        TbEntitySubEvent updated = subsInfo.add(attrSubscription2);
+        assertNotNull(updated);
+
+        assertEquals(expectedSubs, subsInfo.getSubs());
+        checkEvent(updated, expectedSubs, ComponentLifecycleEvent.UPDATED);
+    }
+
+    @Test
+    public void removeTest() {
+        Set<TbAttributeSubscription> expectedSubs = new HashSet<>();
+        TbEntityLocalSubsInfo subsInfo = createSubsInfo();
+        TenantId tenantId = subsInfo.getTenantId();
+        EntityId entityId = subsInfo.getEntityId();
+        TbAttributeSubscription attrSubscription1 = TbAttributeSubscription.builder()
+                .sessionId("session1")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key1", 1L, "key2", 2L))
+                .build();
+
+        TbAttributeSubscription attrSubscription2 = TbAttributeSubscription.builder()
+                .sessionId("session2")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key3", 3L, "key4", 4L))
+                .build();
+
+        expectedSubs.add(attrSubscription1);
+        expectedSubs.add(attrSubscription2);
+
+        subsInfo.add(attrSubscription1);
+        subsInfo.add(attrSubscription2);
+
+        assertEquals(expectedSubs, subsInfo.getSubs());
+
+        TbEntitySubEvent updatedEvent = subsInfo.remove(attrSubscription1);
+        expectedSubs.remove(attrSubscription1);
+        assertNotNull(updatedEvent);
+        assertEquals(expectedSubs, subsInfo.getSubs());
+        checkEvent(updatedEvent, expectedSubs, ComponentLifecycleEvent.UPDATED);
+
+        TbEntitySubEvent deletedEvent = subsInfo.remove(attrSubscription2);
+        expectedSubs.remove(attrSubscription2);
+        assertNotNull(deletedEvent);
+        assertEquals(expectedSubs, subsInfo.getSubs());
+        checkEvent(deletedEvent, expectedSubs, ComponentLifecycleEvent.DELETED);
+
+        assertTrue(subsInfo.isEmpty());
+    }
+
+    @Test
+    public void removeAllTest() {
+        TbEntityLocalSubsInfo subsInfo = createSubsInfo();
+        TenantId tenantId = subsInfo.getTenantId();
+        EntityId entityId = subsInfo.getEntityId();
+        TbAttributeSubscription attrSubscription1 = TbAttributeSubscription.builder()
+                .sessionId("session1")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key1", 1L, "key2", 2L))
+                .build();
+
+        TbAttributeSubscription attrSubscription2 = TbAttributeSubscription.builder()
+                .sessionId("session2")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key3", 3L, "key4", 4L))
+                .build();
+
+        TbAttributeSubscription attrSubscription3 = TbAttributeSubscription.builder()
+                .sessionId("session3")
+                .tenantId(tenantId)
+                .entityId(entityId)
+                .keyStates(Map.of("key5", 5L, "key6", 6L))
+                .build();
+
+        subsInfo.add(attrSubscription1);
+        subsInfo.add(attrSubscription2);
+        subsInfo.add(attrSubscription3);
+
+        assertFalse(subsInfo.isEmpty());
+
+        TbEntitySubEvent updatedEvent = subsInfo.removeAll(List.of(attrSubscription1, attrSubscription2));
+        assertNotNull(updatedEvent);
+        checkEvent(updatedEvent, Set.of(attrSubscription3), ComponentLifecycleEvent.UPDATED);
+
+        assertFalse(subsInfo.isEmpty());
+
+        TbEntitySubEvent deletedEvent = subsInfo.removeAll(List.of(attrSubscription3));
+        assertNotNull(deletedEvent);
+        checkEvent(deletedEvent, null, ComponentLifecycleEvent.DELETED);
+
+        assertTrue(subsInfo.isEmpty());
+    }
+
+    private TbEntityLocalSubsInfo createSubsInfo() {
+        return new TbEntityLocalSubsInfo(new TenantId(UUID.randomUUID()), new DeviceId(UUID.randomUUID()));
+    }
+
+    private void checkEvent(TbEntitySubEvent event, Set<TbAttributeSubscription> expectedSubs, ComponentLifecycleEvent expectedType) {
+        assertEquals(expectedType, event.getType());
+        TbSubscriptionsInfo info = event.getInfo();
+        if (event.getType() == ComponentLifecycleEvent.DELETED) {
+            assertNull(info);
+            return;
+        }
+        assertNotNull(info);
+        assertFalse(info.notifications);
+        assertFalse(info.alarms);
+        assertFalse(info.attrAllKeys);
+        assertFalse(info.tsAllKeys);
+        assertNull(info.tsKeys);
+        assertEquals(getAttrKeys(expectedSubs), info.attrKeys);
+    }
+
+    private Set<String> getAttrKeys(Set<TbAttributeSubscription> attributeSubscriptions) {
+        return attributeSubscriptions.stream().map(s -> s.getKeyStates().keySet()).flatMap(Collection::stream).collect(Collectors.toSet());
+    }
+}
diff --git a/application/src/test/java/org/thingsboard/server/transport/coap/rpc/AbstractCoapServerSideRpcIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/coap/rpc/AbstractCoapServerSideRpcIntegrationTest.java
index 384bfe4772..2c5c5a618e 100644
--- a/application/src/test/java/org/thingsboard/server/transport/coap/rpc/AbstractCoapServerSideRpcIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/coap/rpc/AbstractCoapServerSideRpcIntegrationTest.java
@@ -114,6 +114,13 @@ public abstract class AbstractCoapServerSideRpcIntegrationTest extends AbstractC
         CoapTestCallback callbackCoap = new TestCoapCallbackForRPC(client, false, protobuf);
 
         CoapObserveRelation observeRelation = client.getObserveRelation(callbackCoap);
+        String awaitAlias = "await Two Way Rpc (client.getObserveRelation)";
+        await(awaitAlias)
+                .atMost(DEFAULT_WAIT_TIMEOUT_SECONDS * 3, TimeUnit.SECONDS)
+                .until(() -> processTwoWayRpcTestWithAwait(callbackCoap, observeRelation, expectedResponseResult));
+    }
+
+    private boolean  processTwoWayRpcTestWithAwait(CoapTestCallback callbackCoap, CoapObserveRelation observeRelation, String expectedResponseResult) throws Exception {
         String awaitAlias = "await Two Way Rpc (client.getObserveRelation)";
         await(awaitAlias)
                 .atMost(DEFAULT_WAIT_TIMEOUT_SECONDS, TimeUnit.SECONDS)
@@ -146,7 +153,7 @@ public abstract class AbstractCoapServerSideRpcIntegrationTest extends AbstractC
         validateTwoWayStateChangedNotification(callbackCoap, expectedResponseResult, actualResult);
 
         observeRelation.proactiveCancel();
-        assertTrue(observeRelation.isCanceled());
+        return observeRelation.isCanceled();
     }
 
     protected void processOnLoadResponse(CoapResponse response, CoapTestClient client) {
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/AbstractLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/AbstractLwM2MIntegrationTest.java
index af5be0dc77..6d25701703 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/AbstractLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/AbstractLwM2MIntegrationTest.java
@@ -21,15 +21,16 @@ import com.google.gson.JsonArray;
 import com.google.gson.JsonElement;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.io.IOUtils;
-import org.eclipse.leshan.client.LeshanClient;
 import org.eclipse.leshan.client.object.Security;
 import org.eclipse.leshan.core.ResponseCode;
+import org.eclipse.leshan.server.registration.Registration;
 import org.junit.After;
-import org.junit.AfterClass;
 import org.junit.Assert;
 import org.junit.Before;
+import org.mockito.Mockito;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.mock.mockito.SpyBean;
+import org.springframework.http.HttpStatus;
 import org.springframework.test.context.TestPropertySource;
 import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.common.util.ThingsBoardThreadFactory;
@@ -54,6 +55,7 @@ import org.thingsboard.server.common.data.device.profile.lwm2m.TelemetryMappingC
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.AbstractLwM2MBootstrapServerCredential;
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.LwM2MBootstrapServerCredential;
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.NoSecLwM2MBootstrapServerCredential;
+import org.thingsboard.server.common.data.id.DeviceProfileId;
 import org.thingsboard.server.common.data.query.EntityData;
 import org.thingsboard.server.common.data.query.EntityDataPageLink;
 import org.thingsboard.server.common.data.query.EntityDataQuery;
@@ -70,9 +72,9 @@ import org.thingsboard.server.service.ws.telemetry.cmd.v2.LatestValueCmd;
 import org.thingsboard.server.transport.AbstractTransportIntegrationTest;
 import org.thingsboard.server.transport.lwm2m.client.LwM2MTestClient;
 import org.thingsboard.server.transport.lwm2m.server.client.LwM2mClientContext;
+import org.thingsboard.server.transport.lwm2m.server.uplink.DefaultLwM2mUplinkMsgHandler;
 import org.thingsboard.server.transport.lwm2m.server.uplink.LwM2mUplinkMsgHandler;
 
-import java.io.IOException;
 import java.net.ServerSocket;
 import java.util.ArrayList;
 import java.util.Arrays;
@@ -88,6 +90,8 @@ import static org.awaitility.Awaitility.await;
 import static org.eclipse.leshan.client.object.Security.noSec;
 import static org.hamcrest.core.IsInstanceOf.instanceOf;
 import static org.junit.Assert.assertEquals;
+import static org.mockito.Mockito.timeout;
+import static org.mockito.Mockito.verify;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_BOOTSTRAP_STARTED;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_BOOTSTRAP_SUCCESS;
@@ -107,7 +111,10 @@ import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MProfil
 public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportIntegrationTest {
 
     @SpyBean
-    LwM2mUplinkMsgHandler defaultLwM2mUplinkMsgHandlerTest;
+    protected LwM2mUplinkMsgHandler defaultLwM2mUplinkMsgHandlerTest;
+
+    @SpyBean
+    protected DefaultLwM2mUplinkMsgHandler defaultUplinkMsgHandlerTest;
 
     @Autowired
     private LwM2mClientContext clientContextTest;
@@ -117,7 +124,6 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
     public static final int securityPort = 5686;
     public static final int portBs = 5687;
     public static final int securityPortBs = 5688;
-    public static final int[] SERVERS_PORT_NUMBERS = {port, securityPort, portBs, securityPortBs};
 
     public static final String host = "localhost";
     public static final String hostBs = "localhost";
@@ -172,12 +178,10 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
     protected final Set<Lwm2mTestHelper.LwM2MClientState> expectedStatusesRegistrationLwm2mSuccess = new HashSet<>(Arrays.asList(ON_INIT, ON_REGISTRATION_STARTED, ON_REGISTRATION_SUCCESS));
     protected final Set<Lwm2mTestHelper.LwM2MClientState> expectedStatusesRegistrationLwm2mSuccessUpdate = new HashSet<>(Arrays.asList(ON_INIT, ON_REGISTRATION_STARTED, ON_REGISTRATION_SUCCESS, ON_UPDATE_STARTED, ON_UPDATE_SUCCESS));
     protected final Set<Lwm2mTestHelper.LwM2MClientState> expectedStatusesRegistrationBsSuccess = new HashSet<>(Arrays.asList(ON_BOOTSTRAP_STARTED, ON_BOOTSTRAP_SUCCESS, ON_REGISTRATION_STARTED, ON_REGISTRATION_SUCCESS));
-    protected DeviceProfile deviceProfile;
     protected ScheduledExecutorService executor;
     protected LwM2MTestClient lwM2MTestClient;
     private String[] resources;
     protected String deviceId;
-    protected boolean isWriteAttribute = false;
     protected boolean supportFormatOnly_SenMLJSON_SenMLCBOR = false;
 
     @Before
@@ -186,14 +190,11 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
     }
 
     @After
-    public void after() {
-        clientDestroy();
-        executor.shutdownNow();
-    }
-
-    @AfterClass
-    public static void afterClass() {
-        awaitServersDestroy();
+    public void after() throws Exception {
+        this.clientDestroy(true);
+        if (executor != null && !executor.isShutdown()) {
+            executor.shutdownNow();
+        }
     }
 
     private void init() throws Exception {
@@ -218,8 +219,8 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
                                                     String endpoint,
                                                     boolean queueMode) throws Exception {
         Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS, getBootstrapServerCredentialsNoSec(NONE));
-        createDeviceProfile(transportConfiguration);
-        Device device = createDevice(deviceCredentials, endpoint);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + endpoint, transportConfiguration);
+        Device device = createLwm2mDevice(deviceCredentials, endpoint, deviceProfile.getId());
 
         SingleEntityFilter sef = new SingleEntityFilter();
         sef.setSingleEntity(device.getId());
@@ -233,9 +234,8 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
         getWsClient().waitForReply();
 
         getWsClient().registerWaitForUpdate();
-        createNewClient(security, null, false, endpoint, null, queueMode);
-        deviceId = device.getId().getId().toString();
-        awaitObserveReadAll(0, deviceId);
+        this.createNewClient(security, null, false, endpoint, null, queueMode, device.getId().getId().toString());
+        awaitObserveReadAll(0, lwM2MTestClient.getDeviceIdStr());
         String msg = getWsClient().waitForUpdate();
 
         EntityDataUpdate update = JacksonUtil.fromString(msg, EntityDataUpdate.class);
@@ -255,29 +255,30 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
 
     }
 
-    protected void createDeviceProfile(Lwm2mDeviceProfileTransportConfiguration transportConfiguration) throws Exception {
-        deviceProfile = new DeviceProfile();
-        deviceProfile.setName("LwM2M");
-        deviceProfile.setType(DeviceProfileType.DEFAULT);
-        deviceProfile.setTenantId(tenantId);
-        deviceProfile.setTransportType(DeviceTransportType.LWM2M);
-        deviceProfile.setProvisionType(DeviceProfileProvisionType.DISABLED);
-        deviceProfile.setDescription(deviceProfile.getName());
+    protected DeviceProfile createLwm2mDeviceProfile(String name, Lwm2mDeviceProfileTransportConfiguration transportConfiguration) throws Exception {
+        DeviceProfile lwm2mDeviceProfile = new DeviceProfile();
+        lwm2mDeviceProfile.setName(name);
+        lwm2mDeviceProfile.setType(DeviceProfileType.DEFAULT);
+        lwm2mDeviceProfile.setTenantId(tenantId);
+        lwm2mDeviceProfile.setTransportType(DeviceTransportType.LWM2M);
+        lwm2mDeviceProfile.setProvisionType(DeviceProfileProvisionType.DISABLED);
+        lwm2mDeviceProfile.setDescription(name);
 
         DeviceProfileData deviceProfileData = new DeviceProfileData();
         deviceProfileData.setConfiguration(new DefaultDeviceProfileConfiguration());
         deviceProfileData.setProvisionConfiguration(new DisabledDeviceProfileProvisionConfiguration(null));
         deviceProfileData.setTransportConfiguration(transportConfiguration);
-        deviceProfile.setProfileData(deviceProfileData);
+        lwm2mDeviceProfile.setProfileData(deviceProfileData);
 
-        deviceProfile = doPost("/api/deviceProfile", deviceProfile, DeviceProfile.class);
-        Assert.assertNotNull(deviceProfile);
+        lwm2mDeviceProfile = doPost("/api/deviceProfile", lwm2mDeviceProfile, DeviceProfile.class);
+        Assert.assertNotNull(lwm2mDeviceProfile);
+        return lwm2mDeviceProfile;
     }
 
-    protected Device createDevice(LwM2MDeviceCredentials credentials, String endpoint) throws Exception {
+    protected Device createLwm2mDevice(LwM2MDeviceCredentials credentials, String endpoint, DeviceProfileId deviceProfileId) throws Exception {
         Device device = new Device();
         device.setName(endpoint);
-        device.setDeviceProfileId(deviceProfile.getId());
+        device.setDeviceProfileId(deviceProfileId);
         device.setTenantId(tenantId);
         device = doPost("/api/device", device, Device.class);
         Assert.assertNotNull(device);
@@ -302,33 +303,37 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
     }
 
     public void createNewClient(Security security, Security securityBs, boolean isRpc,
-                                String endpoint) throws Exception {
-        this.createNewClient(security, securityBs, isRpc, endpoint, null, false);
+                                String endpoint, String deviceIdStr) throws Exception {
+        this.createNewClient(security, securityBs, isRpc, endpoint, null, false, deviceIdStr);
     }
 
     public void createNewClient(Security security, Security securityBs, boolean isRpc,
-                                String endpoint, Integer clientDtlsCidLength) throws Exception {
-        this.createNewClient(security, securityBs, isRpc, endpoint, clientDtlsCidLength, false);
+                                String endpoint, Integer clientDtlsCidLength, String deviceIdStr) throws Exception {
+        this.createNewClient(security, securityBs, isRpc, endpoint, clientDtlsCidLength, false, deviceIdStr);
     }
 
     public void createNewClient(Security security, Security securityBs, boolean isRpc,
-                                String endpoint, Integer clientDtlsCidLength, boolean queueMode) throws Exception {
-        this.clientDestroy();
+                                String endpoint, Integer clientDtlsCidLength, boolean queueMode, String deviceIdStr) throws Exception {
+        this.clientDestroy(false);
         lwM2MTestClient = new LwM2MTestClient(this.executor, endpoint);
 
         try (ServerSocket socket = new ServerSocket(0)) {
             int clientPort = socket.getLocalPort();
             lwM2MTestClient.init(security, securityBs, clientPort, isRpc,
-                    this.defaultLwM2mUplinkMsgHandlerTest, this.clientContextTest, isWriteAttribute,
+                    this.defaultLwM2mUplinkMsgHandlerTest, this.clientContextTest,
                     clientDtlsCidLength, queueMode, supportFormatOnly_SenMLJSON_SenMLCBOR);
         }
+        lwM2MTestClient.setDeviceIdStr(deviceIdStr);
     }
 
-    private void clientDestroy() {
+    private void clientDestroy(boolean isAfter) {
         try {
             if (lwM2MTestClient != null) {
+                if (isAfter) {
+                    sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
+                    awaitDeleteDevice(lwM2MTestClient.getDeviceIdStr());
+                }
                 lwM2MTestClient.destroy();
-                awaitClientDestroy(lwM2MTestClient.getLeshanClient());
             }
         } catch (Exception e) {
             log.error("Failed client Destroy", e);
@@ -385,36 +390,20 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
         return credentials;
     }
 
-    private static void awaitServersDestroy() {
-        await("One of servers ports number is not free")
-                .atMost(DEFAULT_WAIT_TIMEOUT_SECONDS, TimeUnit.SECONDS)
-                .until(() -> isServerPortsAvailable() == null);
-    }
-
-    private static String isServerPortsAvailable() {
-        for (int port : SERVERS_PORT_NUMBERS) {
-            try (ServerSocket serverSocket = new ServerSocket(port)) {
-                serverSocket.close();
-                Assert.assertEquals(true, serverSocket.isClosed());
-            } catch (IOException e) {
-                log.warn(String.format("Port %n still in use", port));
-                return (String.format("Port %n still in use", port));
-            }
-        }
-        return null;
-    }
-
-    private static void awaitClientDestroy(LeshanClient leshanClient) {
-        await("Destroy LeshanClient: delete All is registered Servers.")
-                .atMost(DEFAULT_WAIT_TIMEOUT_SECONDS, TimeUnit.SECONDS)
-                .until(() -> leshanClient.getRegisteredServers().size() == 0);
-    }
-
     protected  void awaitObserveReadAll(int cntObserve, String deviceIdStr) throws Exception {
         await("ObserveReadAll: countObserve " + cntObserve)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> cntObserve == getCntObserveAll(deviceIdStr));
     }
+    protected  void awaitDeleteDevice(String deviceIdStr) throws Exception {
+        await("Delete device with id:  " + deviceIdStr)
+                .atMost(40, TimeUnit.SECONDS)
+                .until(() -> {
+                    doDelete("/api/device/" + deviceIdStr)
+                            .andExpect(status().isOk());
+                   return HttpStatus.NOT_FOUND.value() == doGet("/api/device/" + deviceIdStr).andReturn().getResponse().getStatus();
+                });
+    }
 
     protected Integer getCntObserveAll(String deviceIdStr) throws Exception {
         String actualResult = sendObserveOK("ObserveReadAll", null, deviceIdStr);
@@ -428,7 +417,7 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
         String actualResultCancelAll = sendObserveOK("ObserveCancelAll", null, deviceIdStr);
         ObjectNode rpcActualResultCancelAll = JacksonUtil.fromString(actualResultCancelAll, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultCancelAll.get("result").asText());
-        awaitObserveReadAll(0, deviceId);
+        awaitObserveReadAll(0, lwM2MTestClient.getDeviceIdStr());
     }
 
     protected String sendRpcObserveOkWithResultValue(String method, String params) throws Exception {
@@ -438,7 +427,7 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
         return rpcActualResult.get("value").asText();
     }
     protected String sendRpcObserveOk(String method, String params) throws Exception {
-        return sendObserveOK(method, params, deviceId);
+        return sendObserveOK(method, params, lwM2MTestClient.getDeviceIdStr());
     }
     protected String sendObserveOK(String method, String params, String deviceIdStr) throws Exception {
         String sendRpcRequest;
@@ -456,4 +445,15 @@ public abstract class AbstractLwM2MIntegrationTest extends AbstractTransportInte
         return JacksonUtil.fromString(actualResultReadAll, ObjectNode.class);
     }
 
+    protected long countUpdateReg() {
+        return Mockito.mockingDetails(defaultUplinkMsgHandlerTest)
+                .getInvocations().stream()
+                .filter(invocation -> invocation.getMethod().getName().equals("updatedReg"))
+                .count();
+    }
+
+    protected void awaitUpdateReg(int cntUpdate) {
+        verify(defaultUplinkMsgHandlerTest, timeout(50000).atLeast(cntUpdate))
+                .updatedReg(Mockito.any(Registration.class));
+    }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/attributes/LwM2mAttributesTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/attributes/LwM2mAttributesTest.java
index 73f8346566..ad23ed9f0c 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/attributes/LwM2mAttributesTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/attributes/LwM2mAttributesTest.java
@@ -49,13 +49,13 @@ public class LwM2mAttributesTest {
     @ParameterizedTest(name = "Tests {index} : {0}")
     @MethodSource("doesntSupportAttributesWithoutValue")
     public void check_attribute_can_not_be_created_without_value(LwM2mAttributeModel<?> model) {
-        assertThrows(UnsupportedOperationException.class, () -> LwM2mAttributes.create(model));
+        assertThrows(IllegalArgumentException.class, () -> LwM2mAttributes.create(model));
     }
 
     @ParameterizedTest(name = "Tests {index} : {0}")
     @MethodSource("doesntSupportAttributesWithValueNull")
     public void check_attribute_can_not_be_created_with_null(LwM2mAttributeModel<?> model) {
-        assertThrows(NullPointerException.class, () -> LwM2mAttributes.create(model, null));
+        assertThrows(IllegalArgumentException.class, () -> LwM2mAttributes.create(model, null));
     }
 
    private static Stream<Arguments> supportNullAttributes() throws InvalidAttributeException {
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2MTestClient.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2MTestClient.java
index 655edc6db6..387085c511 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2MTestClient.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2MTestClient.java
@@ -137,9 +137,12 @@ public class LwM2MTestClient {
     private Map<LwM2MClientState, Integer> clientDtlsCid;
     private LwM2mUplinkMsgHandler defaultLwM2mUplinkMsgHandlerTest;
     private LwM2mClientContext clientContext;
+    private LwM2mTemperatureSensor lwM2mTemperatureSensor12;
+    private String deviceIdStr;
+
     public void init(Security security, Security securityBs, int port, boolean isRpc,
                      LwM2mUplinkMsgHandler defaultLwM2mUplinkMsgHandler,
-                     LwM2mClientContext clientContext, boolean isWriteAttribute, Integer cIdLength, boolean queueMode,
+                     LwM2mClientContext clientContext, Integer cIdLength, boolean queueMode,
                      boolean supportFormatOnly_SenMLJSON_SenMLCBOR) throws InvalidDDFFileException, IOException {
         Assert.assertNull("client already initialized", leshanClient);
         this.defaultLwM2mUplinkMsgHandlerTest = defaultLwM2mUplinkMsgHandler;
@@ -149,7 +152,7 @@ public class LwM2MTestClient {
             models.addAll(ObjectLoader.loadDdfFile(LwM2MTestClient.class.getClassLoader().getResourceAsStream("lwm2m/" + resourceName), resourceName));
         }
         LwM2mModel model = new StaticModel(models);
-        ObjectsInitializer initializer = isWriteAttribute ? new TbObjectsInitializer(model) : new ObjectsInitializer(model);
+        ObjectsInitializer initializer = new ObjectsInitializer(model);
         if (securityBs != null && security != null) {
             // SECURITY
             security.setId(serverId);
@@ -189,7 +192,7 @@ public class LwM2MTestClient {
         locationParams.getPos();
         initializer.setInstancesForObject(LOCATION, new LwM2mLocation(locationParams.getLatitude(), locationParams.getLongitude(), locationParams.getScaleFactor(), executor, OBJECT_INSTANCE_ID_0));
         LwM2mTemperatureSensor lwM2mTemperatureSensor0 = new LwM2mTemperatureSensor(executor, OBJECT_INSTANCE_ID_0);
-        LwM2mTemperatureSensor lwM2mTemperatureSensor12 = new LwM2mTemperatureSensor(executor, OBJECT_INSTANCE_ID_12);
+        lwM2mTemperatureSensor12 = new LwM2mTemperatureSensor(executor, OBJECT_INSTANCE_ID_12);
         initializer.setInstancesForObject(TEMPERATURE_SENSOR, lwM2mTemperatureSensor0, lwM2mTemperatureSensor12);
 
         List<LwM2mObjectEnabler> enablers = initializer.createAll();
@@ -315,7 +318,6 @@ public class LwM2MTestClient {
         clientDtlsCid = new HashMap<>();
         clientStates.add(ON_INIT);
         leshanClient = builder.build();
-        lwM2mTemperatureSensor12.setLeshanClient(leshanClient);
 
         LwM2mClientObserver observer = new LwM2mClientObserver() {
             @Override
@@ -452,6 +454,7 @@ public class LwM2MTestClient {
             if (isStartLw) {
                 this.awaitClientAfterStartConnectLw();
             }
+            lwM2mTemperatureSensor12.setLeshanClient(leshanClient);
         }
     }
 
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mBinaryAppDataContainer.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mBinaryAppDataContainer.java
index 3efd6365dd..9c5b63bc3d 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mBinaryAppDataContainer.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mBinaryAppDataContainer.java
@@ -129,7 +129,7 @@ public class LwM2mBinaryAppDataContainer extends BaseInstanceEnabler implements
                     fireResourceChange(resourceId);
                     return WriteResponse.success();
                 } else {
-                    WriteResponse.badRequest("Invalidate value ...");
+                    return WriteResponse.badRequest("Invalidate value ...");
                 }
             case 1:
                 setPriority((Integer) (value.getValue() instanceof Long ? ((Long) value.getValue()).intValue() : value.getValue()));
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mTemperatureSensor.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mTemperatureSensor.java
index 4f594ed4c0..9f96956a49 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mTemperatureSensor.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/LwM2mTemperatureSensor.java
@@ -50,14 +50,17 @@ public class LwM2mTemperatureSensor extends BaseInstanceEnabler implements Destr
     private double maxMeasuredValue = currentTemp;
 
     private LeshanClient leshanClient;
-    private int cntRead_5700;
     private int cntIdentitySystem;
 
     protected static final Random RANDOM = new Random();
     private static final List<Integer> supportedResources = Arrays.asList(5601, 5602, 5700, 5701);
 
-    public LwM2mTemperatureSensor() {
+    private LwM2mServer registeredServer;
+    private ManualDataSender sender;
+
+    private int resourceIdForSendCollected = 5700;
 
+    public LwM2mTemperatureSensor() {
     }
 
     public LwM2mTemperatureSensor(ScheduledExecutorService executorService, Integer id) {
@@ -72,26 +75,33 @@ public class LwM2mTemperatureSensor extends BaseInstanceEnabler implements Destr
 
     @Override
     public synchronized ReadResponse read(LwM2mServer identity, int resourceId) {
-        log.info("Read on Temperature resource /[{}]/[{}]/[{}]", getModel().id, getId(), resourceId);
+        log.trace("Read on Temperature resource /[{}]/[{}]/[{}]", getModel().id, getId(), resourceId);
+        if (this.registeredServer == null && this.leshanClient != null && getId() == 12) {
+            try {
+                Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_0 = Instant.now().toEpochMilli();
+                this.registeredServer = this.leshanClient.getRegisteredServers().values().iterator().next();
+                this.sender = (ManualDataSender) this.leshanClient.getSendService().getDataSender(ManualDataSender.DEFAULT_NAME);
+                this.sender.collectData(Arrays.asList(getPathForCollectedValue(resourceIdForSendCollected)));
+            } catch (Exception e) {
+                log.error("[{}] Sender for SendCollected", e.toString());
+                e.printStackTrace();
+            }
+        }
         switch (resourceId) {
             case 5601:
                 return ReadResponse.success(resourceId, getTwoDigitValue(minMeasuredValue));
             case 5602:
                 return ReadResponse.success(resourceId, getTwoDigitValue(maxMeasuredValue));
             case 5700:
-                if (identity == LwM2mServer.SYSTEM) { // return value for ForCollectedValue
+                if (identity == LwM2mServer.SYSTEM) {
+                    double val5700 = cntIdentitySystem == 0 ? RESOURCE_ID_3303_12_5700_VALUE_0 : RESOURCE_ID_3303_12_5700_VALUE_1;
                     cntIdentitySystem++;
-                    return ReadResponse.success(resourceId, cntIdentitySystem == 1 ?
-                            RESOURCE_ID_3303_12_5700_VALUE_0 : RESOURCE_ID_3303_12_5700_VALUE_1);
-                }
-                cntRead_5700++;
-                if (cntRead_5700 == 1) {            // read value after start
-                    return ReadResponse.success(resourceId, getTwoDigitValue(currentTemp));
+                    return ReadResponse.success(resourceId, val5700);
                 } else {
-                    if (this.getId() == 12 && this.leshanClient != null) {
+                    if (cntIdentitySystem == 1 && this.getId() == 12 && this.leshanClient != null) {
                         sendCollected();
                     }
-                    return ReadResponse.success(resourceId, getTwoDigitValue(currentTemp));
+                    return super.read(identity, resourceId);
                 }
             case 5701:
                 return ReadResponse.success(resourceId, UNIT_CELSIUS);
@@ -163,14 +173,10 @@ public class LwM2mTemperatureSensor extends BaseInstanceEnabler implements Destr
 
     private void sendCollected() {
         try {
-            int resourceId = 5700;
-            LwM2mServer registeredServer = this.leshanClient.getRegisteredServers().values().iterator().next();
-            ManualDataSender sender = this.leshanClient.getSendService().getDataSender(ManualDataSender.DEFAULT_NAME,
-                    ManualDataSender.class);
-            sender.collectData(Arrays.asList(getPathForCollectedValue(resourceId)));
-            Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_0 = Instant.now().toEpochMilli();
-            Thread.sleep(RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS);
-            sender.collectData(Arrays.asList(getPathForCollectedValue(resourceId)));
+            if ((Instant.now().toEpochMilli() - Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_0) < RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS) {
+                Thread.sleep(RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS);
+            }
+            sender.collectData(Arrays.asList(getPathForCollectedValue(resourceIdForSendCollected)));
             Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_1 = Instant.now().toEpochMilli();
             sender.sendCollectedData(registeredServer, ContentFormat.SENML_JSON, 1000, false);
         } catch (InterruptedException e) {
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/SimpleLwM2MDevice.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/SimpleLwM2MDevice.java
index 370c2249df..a6a850a897 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/SimpleLwM2MDevice.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/SimpleLwM2MDevice.java
@@ -20,7 +20,7 @@ import org.eclipse.leshan.client.resource.BaseInstanceEnabler;
 import org.eclipse.leshan.client.servers.LwM2mServer;
 import org.eclipse.leshan.core.Destroyable;
 import org.eclipse.leshan.core.model.ObjectModel;
-import org.eclipse.leshan.core.model.ResourceModel;
+import org.eclipse.leshan.core.model.ResourceModel.Type;
 import org.eclipse.leshan.core.node.LwM2mResource;
 import org.eclipse.leshan.core.request.argument.Arguments;
 import org.eclipse.leshan.core.response.ExecuteResponse;
@@ -30,7 +30,6 @@ import org.eclipse.leshan.core.response.WriteResponse;
 import java.text.SimpleDateFormat;
 import java.util.Arrays;
 import java.util.Calendar;
-import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.PrimitiveIterator;
@@ -46,9 +45,46 @@ public class SimpleLwM2MDevice extends BaseInstanceEnabler implements Destroyabl
     private static final Random RANDOM = new Random();
     private static final int min = 5;
     private static final int max = 50;
-    private static final  PrimitiveIterator.OfInt randomIterator = new Random().ints(min,max + 1).iterator();
+    private static final PrimitiveIterator.OfInt randomIterator = new Random().ints(min, max + 1).iterator();
     private static final List<Integer> supportedResources = Arrays.asList(0, 1, 2, 3, 6, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 20, 21);
-
+    /**
+     * 0: DC power
+     * 1: Internal Battery
+     * 2: External Battery
+     * 3: Fuel Cell
+     * 4: Power over Ethernet
+     * 5: USB
+     * 6: AC (Mains) power
+     * 7: Solar
+     */
+    private static final Map<Integer, Long> availablePowerSources =
+            Map.of(0, 0L, 1, 1L, 2, 7L);
+    private static Map<Integer, Long> powerSourceVoltage =
+            Map.of(0, 12000L, 1, 12400L, 7, 14600L);   //mV
+    private static Map<Integer, Long> powerSourceCurrent =
+            Map.of(0, 72000L, 1, 2000L, 7, 25000L);    // mA
+
+    /**
+     * 0=No error
+     * 1=Low battery power
+     * 2=External power supply off
+     * 3=GPS module failure
+     * 4=Low received signal strength
+     * 5=Out of memory
+     * 6=SMS failure
+     * 7=IP connectivity failure
+     * 8=Peripheral malfunction
+     * 9..15=Reserved for future use
+     * 16..32=Device specific error codes
+     *
+     * When the single Device Object Instance is initiated, there is only one error code Resource Instance whose value is equal to 0 that means no error.
+     * When the first error happens, the LwM2M Client changes error code Resource Instance to any non-zero value to indicate the error type.
+     * When any other error happens, a new error code Resource Instance is created.
+     * When an error associated with a Resource Instance is no longer present, that Resource Instance is deleted.
+     * When the single existing error is no longer present, the LwM2M Client returns to the original no error state where Instance 0 has value 0.
+     */
+    private static Map<Integer, Long> errorCode =
+            Map.of(0, 0L);    // 0-32
 
     public SimpleLwM2MDevice() {
     }
@@ -81,15 +117,17 @@ public class SimpleLwM2MDevice extends BaseInstanceEnabler implements Destroyabl
             case 3:
                 return ReadResponse.success(resourceId, getFirmwareVersion());
             case 6:
-                return ReadResponse.success(resourceId, getAvailablePowerSources(), ResourceModel.Type.INTEGER);
+                return ReadResponse.success(resourceId, getAvailablePowerSources(), Type.INTEGER);
+            case 7:
+                return ReadResponse.success(resourceId, getPowerSourceVoltage(), Type.INTEGER);
+            case 8:
+                return ReadResponse.success(resourceId, getPowerSourceCurrent(), Type.INTEGER);
             case 9:
                 return ReadResponse.success(resourceId, getBatteryLevel());
             case 10:
                 return ReadResponse.success(resourceId, getMemoryFree());
             case 11:
-                Map<Integer, Long> errorCodes = new HashMap<>();
-                errorCodes.put(0, getErrorCode());
-                return ReadResponse.success(resourceId, errorCodes, ResourceModel.Type.INTEGER);
+                return ReadResponse.success(resourceId, getErrorCodes(), Type.INTEGER);
             case 14:
                 return ReadResponse.success(resourceId, getUtcOffset());
             case 15:
@@ -156,16 +194,19 @@ public class SimpleLwM2MDevice extends BaseInstanceEnabler implements Destroyabl
         return "1.0.2";
     }
 
-    private long getErrorCode() {
-        return 0;
+    private Map<Integer, ?> getAvailablePowerSources() {
+        return availablePowerSources;
     }
 
-    private Map<Integer, Long> getAvailablePowerSources() {
-        Map<Integer, Long> availablePowerSources = new HashMap<>();
-        availablePowerSources.put(0, 1L);
-        availablePowerSources.put(1, 2L);
-        availablePowerSources.put(2, 5L);
-        return availablePowerSources;
+    private Map<Integer, ?> getPowerSourceVoltage() {
+        return powerSourceVoltage;
+    }
+    private Map<Integer, ?> getPowerSourceCurrent() {
+        return powerSourceCurrent;
+    }
+
+    private Map<Integer, ?> getErrorCodes() {
+        return errorCode;
     }
 
     private int getBatteryLevel() {
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/TbLwm2mObjectEnabler.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/TbLwm2mObjectEnabler.java
deleted file mode 100644
index f548cc30e2..0000000000
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/TbLwm2mObjectEnabler.java
+++ /dev/null
@@ -1,732 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-package org.thingsboard.server.transport.lwm2m.client;
-
-import org.eclipse.leshan.client.LwM2mClient;
-import org.eclipse.leshan.client.resource.BaseObjectEnabler;
-import org.eclipse.leshan.client.resource.DummyInstanceEnabler;
-import org.eclipse.leshan.client.resource.LwM2mInstanceEnabler;
-import org.eclipse.leshan.client.resource.LwM2mInstanceEnablerFactory;
-import org.eclipse.leshan.client.resource.listener.ResourceListener;
-import org.eclipse.leshan.client.servers.LwM2mServer;
-import org.eclipse.leshan.client.servers.ServersInfoExtractor;
-import org.eclipse.leshan.client.util.LinkFormatHelper;
-import org.eclipse.leshan.core.Destroyable;
-import org.eclipse.leshan.core.LwM2mId;
-import org.eclipse.leshan.core.Startable;
-import org.eclipse.leshan.core.Stoppable;
-import org.eclipse.leshan.core.link.lwm2m.LwM2mLink;
-import org.eclipse.leshan.core.link.lwm2m.attributes.LwM2mAttribute;
-import org.eclipse.leshan.core.link.lwm2m.attributes.LwM2mAttributeSet;
-import org.eclipse.leshan.core.link.lwm2m.attributes.LwM2mAttributes;
-import org.eclipse.leshan.core.model.ObjectModel;
-import org.eclipse.leshan.core.model.ResourceModel;
-import org.eclipse.leshan.core.node.LwM2mMultipleResource;
-import org.eclipse.leshan.core.node.LwM2mObject;
-import org.eclipse.leshan.core.node.LwM2mObjectInstance;
-import org.eclipse.leshan.core.node.LwM2mPath;
-import org.eclipse.leshan.core.node.LwM2mResource;
-import org.eclipse.leshan.core.node.LwM2mResourceInstance;
-import org.eclipse.leshan.core.request.BootstrapDeleteRequest;
-import org.eclipse.leshan.core.request.BootstrapReadRequest;
-import org.eclipse.leshan.core.request.BootstrapWriteRequest;
-import org.eclipse.leshan.core.request.ContentFormat;
-import org.eclipse.leshan.core.request.CreateRequest;
-import org.eclipse.leshan.core.request.DeleteRequest;
-import org.eclipse.leshan.core.request.DiscoverRequest;
-import org.eclipse.leshan.core.request.DownlinkRequest;
-import org.eclipse.leshan.core.request.ExecuteRequest;
-import org.eclipse.leshan.core.request.ObserveRequest;
-import org.eclipse.leshan.core.request.ReadRequest;
-import org.eclipse.leshan.core.request.WriteAttributesRequest;
-import org.eclipse.leshan.core.request.WriteRequest;
-import org.eclipse.leshan.core.request.WriteRequest.Mode;
-import org.eclipse.leshan.core.response.BootstrapDeleteResponse;
-import org.eclipse.leshan.core.response.BootstrapReadResponse;
-import org.eclipse.leshan.core.response.BootstrapWriteResponse;
-import org.eclipse.leshan.core.response.CreateResponse;
-import org.eclipse.leshan.core.response.DeleteResponse;
-import org.eclipse.leshan.core.response.DiscoverResponse;
-import org.eclipse.leshan.core.response.ExecuteResponse;
-import org.eclipse.leshan.core.response.ObserveResponse;
-import org.eclipse.leshan.core.response.ReadResponse;
-import org.eclipse.leshan.core.response.WriteAttributesResponse;
-import org.eclipse.leshan.core.response.WriteResponse;
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Map.Entry;
-
-public class TbLwm2mObjectEnabler extends BaseObjectEnabler implements Destroyable, Startable, Stoppable {
-
-    private static Logger LOG = LoggerFactory.getLogger(DummyInstanceEnabler.class);
-
-    protected Map<Integer, LwM2mInstanceEnabler> instances;
-
-    protected LwM2mInstanceEnablerFactory instanceFactory;
-    protected ContentFormat defaultContentFormat;
-
-    private LinkFormatHelper tbLinkFormatHelper;
-    protected Map<LwM2mPath, LwM2mAttributeSet> lwM2mAttributes;
-    public TbLwm2mObjectEnabler(int id, ObjectModel objectModel, Map<Integer, LwM2mInstanceEnabler> instances,
-                                LwM2mInstanceEnablerFactory instanceFactory, ContentFormat defaultContentFormat) {
-        super(id, objectModel);
-        this.instances = new HashMap<>(instances);
-        ;
-        this.instanceFactory = instanceFactory;
-        this.defaultContentFormat = defaultContentFormat;
-        for (Entry<Integer, LwM2mInstanceEnabler> entry : this.instances.entrySet()) {
-            instances.put(entry.getKey(), entry.getValue());
-            listenInstance(entry.getValue(), entry.getKey());
-        }
-        this.lwM2mAttributes = new HashMap<>();
-    }
-
-    public TbLwm2mObjectEnabler(int id, ObjectModel objectModel) {
-        super(id, objectModel);
-    }
-
-    @Override
-    public synchronized List<Integer> getAvailableInstanceIds() {
-        List<Integer> ids = new ArrayList<>(instances.keySet());
-        Collections.sort(ids);
-        return ids;
-    }
-
-    @Override
-    public synchronized List<Integer> getAvailableResourceIds(int instanceId) {
-        LwM2mInstanceEnabler instanceEnabler = instances.get(instanceId);
-        if (instanceEnabler != null) {
-            return instanceEnabler.getAvailableResourceIds(getObjectModel());
-        } else {
-            return Collections.emptyList();
-        }
-    }
-
-    public synchronized void addInstance(int instanceId, LwM2mInstanceEnabler newInstance) {
-        instances.put(instanceId, newInstance);
-        listenInstance(newInstance, instanceId);
-        fireInstancesAdded(instanceId);
-    }
-
-    public synchronized LwM2mInstanceEnabler getInstance(int instanceId) {
-        return instances.get(instanceId);
-    }
-
-    public synchronized LwM2mInstanceEnabler removeInstance(int instanceId) {
-        LwM2mInstanceEnabler removedInstance = instances.remove(instanceId);
-        if (removedInstance != null) {
-            fireInstancesRemoved(removedInstance.getId());
-        }
-        return removedInstance;
-    }
-
-    @Override
-    protected CreateResponse doCreate(LwM2mServer server, CreateRequest request) {
-        if (!getObjectModel().multiple && instances.size() > 0) {
-            return CreateResponse.badRequest("an instance already exist for this single instance object");
-        }
-
-        if (request.unknownObjectInstanceId()) {
-            // create instance
-            LwM2mInstanceEnabler newInstance = createInstance(server, getObjectModel().multiple ? null : 0,
-                    request.getResources());
-
-            // add new instance to this object
-            instances.put(newInstance.getId(), newInstance);
-            listenInstance(newInstance, newInstance.getId());
-            fireInstancesAdded(newInstance.getId());
-
-            return CreateResponse
-                    .success(new LwM2mPath(request.getPath().getObjectId(), newInstance.getId()).toString());
-        } else {
-            List<LwM2mObjectInstance> instanceNodes = request.getObjectInstances();
-
-            // checks single object instances
-            if (!getObjectModel().multiple) {
-                if (request.getObjectInstances().size() > 1) {
-                    return CreateResponse.badRequest("can not create several instances on this single instance object");
-                }
-                if (request.getObjectInstances().get(0).getId() != 0) {
-                    return CreateResponse.badRequest("single instance object must use 0 as ID");
-                }
-            }
-            // ensure instance does not already exists
-            for (LwM2mObjectInstance instance : instanceNodes) {
-                if (instances.containsKey(instance.getId())) {
-                    return CreateResponse.badRequest(String.format("instance %d already exists", instance.getId()));
-                }
-            }
-
-            // create the new instances
-            int[] instanceIds = new int[request.getObjectInstances().size()];
-            int i = 0;
-            for (LwM2mObjectInstance instance : request.getObjectInstances()) {
-                // create instance
-                LwM2mInstanceEnabler newInstance = createInstance(server, instance.getId(),
-                        instance.getResources().values());
-
-                // add new instance to this object
-                instances.put(newInstance.getId(), newInstance);
-                listenInstance(newInstance, newInstance.getId());
-
-                // store instance ids
-                instanceIds[i] = newInstance.getId();
-                i++;
-            }
-            fireInstancesAdded(instanceIds);
-            return CreateResponse.success();
-        }
-    }
-
-    protected LwM2mInstanceEnabler createInstance(LwM2mServer server, Integer instanceId,
-                                                  Collection<LwM2mResource> resources) {
-        // create the new instance
-        LwM2mInstanceEnabler newInstance = instanceFactory.create(getObjectModel(), instanceId, instances.keySet());
-        newInstance.setLwM2mClient(getLwm2mClient());
-
-        // add/write resource
-        for (LwM2mResource resource : resources) {
-            newInstance.write(server, true, resource.getId(), resource);
-        }
-
-        return newInstance;
-    }
-
-    @Override
-    protected ReadResponse doRead(LwM2mServer server, ReadRequest request) {
-        LwM2mPath path = request.getPath();
-
-        // Manage Object case
-        if (path.isObject()) {
-            List<LwM2mObjectInstance> lwM2mObjectInstances = new ArrayList<>();
-            for (LwM2mInstanceEnabler instance : instances.values()) {
-                ReadResponse response = instance.read(server);
-                if (response.isSuccess()) {
-                    lwM2mObjectInstances.add((LwM2mObjectInstance) response.getContent());
-                }
-            }
-            return ReadResponse.success(new LwM2mObject(getId(), lwM2mObjectInstances));
-        }
-
-        // Manage Instance case
-        LwM2mInstanceEnabler instance = instances.get(path.getObjectInstanceId());
-        if (instance == null)
-            return ReadResponse.notFound();
-
-        if (path.getResourceId() == null) {
-            return instance.read(server);
-        }
-
-        // Manage Resource case
-        if (path.getResourceInstanceId() == null) {
-            return instance.read(server, path.getResourceId());
-        }
-
-        // Manage Resource Instance case
-        return instance.read(server, path.getResourceId(), path.getResourceInstanceId());
-    }
-
-    @Override
-    protected BootstrapReadResponse doRead(LwM2mServer server, BootstrapReadRequest request) {
-        // Basic implementation we delegate to classic Read Request
-        ReadResponse response = doRead(server,
-                new ReadRequest(request.getContentFormat(), request.getPath(), request.getCoapRequest()));
-        return new BootstrapReadResponse(response.getCode(), response.getContent(), response.getErrorMessage());
-    }
-
-    @Override
-    protected ObserveResponse doObserve(final LwM2mServer server, final ObserveRequest request) {
-        final LwM2mPath path = request.getPath();
-
-        // Manage Object case
-        if (path.isObject()) {
-            List<LwM2mObjectInstance> lwM2mObjectInstances = new ArrayList<>();
-            for (LwM2mInstanceEnabler instance : instances.values()) {
-                ReadResponse response = instance.observe(server);
-                if (response.isSuccess()) {
-                    lwM2mObjectInstances.add((LwM2mObjectInstance) response.getContent());
-                }
-            }
-            return ObserveResponse.success(new LwM2mObject(getId(), lwM2mObjectInstances));
-        }
-
-        // Manage Instance case
-        final LwM2mInstanceEnabler instance = instances.get(path.getObjectInstanceId());
-        if (instance == null)
-            return ObserveResponse.notFound();
-
-        if (path.getResourceId() == null) {
-            return instance.observe(server);
-        }
-
-        // Manage Resource case
-        if (path.getResourceInstanceId() == null) {
-            return instance.observe(server, path.getResourceId());
-        }
-
-        // Manage Resource Instance case
-        return instance.observe(server, path.getResourceId(), path.getResourceInstanceId());
-    }
-
-    @Override
-    protected WriteResponse doWrite(LwM2mServer server, WriteRequest request) {
-        LwM2mPath path = request.getPath();
-
-        // Manage Instance case
-        LwM2mInstanceEnabler instance = instances.get(path.getObjectInstanceId());
-        if (instance == null)
-            return WriteResponse.notFound();
-
-        if (path.isObjectInstance()) {
-            return instance.write(server, request.isReplaceRequest(), (LwM2mObjectInstance) request.getNode());
-        }
-
-        // Manage Resource case
-        if (path.getResourceInstanceId() == null) {
-            return instance.write(server, request.isReplaceRequest(), path.getResourceId(),
-                    (LwM2mResource) request.getNode());
-        }
-
-        // Manage Resource Instance case
-        return instance.write(server, false, path.getResourceId(), path.getResourceInstanceId(),
-                ((LwM2mResourceInstance) request.getNode()));
-    }
-
-    @Override
-    protected BootstrapWriteResponse doWrite(LwM2mServer server, BootstrapWriteRequest request) {
-        LwM2mPath path = request.getPath();
-
-        // Manage Object case
-        if (path.isObject()) {
-            for (LwM2mObjectInstance instanceNode : ((LwM2mObject) request.getNode()).getInstances().values()) {
-                LwM2mInstanceEnabler instanceEnabler = instances.get(instanceNode.getId());
-                if (instanceEnabler == null) {
-                    doCreate(server, new CreateRequest(path.getObjectId(), instanceNode));
-                } else {
-                    doWrite(server, new WriteRequest(Mode.REPLACE, path.getObjectId(), instanceEnabler.getId(),
-                            instanceNode.getResources().values()));
-                }
-            }
-            return BootstrapWriteResponse.success();
-        }
-
-        // Manage Instance case
-        if (path.isObjectInstance()) {
-            LwM2mObjectInstance instanceNode = (LwM2mObjectInstance) request.getNode();
-            LwM2mInstanceEnabler instanceEnabler = instances.get(path.getObjectInstanceId());
-            if (instanceEnabler == null) {
-                doCreate(server, new CreateRequest(path.getObjectId(), instanceNode));
-            } else {
-                doWrite(server, new WriteRequest(Mode.REPLACE, request.getContentFormat(), path.getObjectId(),
-                        path.getObjectInstanceId(), instanceNode.getResources().values()));
-            }
-            return BootstrapWriteResponse.success();
-        }
-
-        // Manage resource case
-        LwM2mResource resource = (LwM2mResource) request.getNode();
-        LwM2mInstanceEnabler instanceEnabler = instances.get(path.getObjectInstanceId());
-        if (instanceEnabler == null) {
-            doCreate(server, new CreateRequest(path.getObjectId(),
-                    new LwM2mObjectInstance(path.getObjectInstanceId(), resource)));
-        } else {
-            instanceEnabler.write(server, true, path.getResourceId(), resource);
-        }
-        return BootstrapWriteResponse.success();
-    }
-
-    @Override
-    protected ExecuteResponse doExecute(LwM2mServer server, ExecuteRequest request) {
-        LwM2mPath path = request.getPath();
-        LwM2mInstanceEnabler instance = instances.get(path.getObjectInstanceId());
-        if (instance == null) {
-            return ExecuteResponse.notFound();
-        }
-        return instance.execute(server, path.getResourceId(), request.getArguments());
-    }
-
-    @Override
-    protected DeleteResponse doDelete(LwM2mServer server, DeleteRequest request) {
-        LwM2mInstanceEnabler deletedInstance = instances.remove(request.getPath().getObjectInstanceId());
-        if (deletedInstance != null) {
-            deletedInstance.onDelete(server);
-            fireInstancesRemoved(deletedInstance.getId());
-            return DeleteResponse.success();
-        }
-        return DeleteResponse.notFound();
-    }
-
-    @Override
-    public BootstrapDeleteResponse doDelete(LwM2mServer server, BootstrapDeleteRequest request) {
-        if (request.getPath().isRoot() || request.getPath().isObject()) {
-            if (id == LwM2mId.SECURITY) {
-                // For security object, we clean everything except bootstrap Server account.
-
-                // Get bootstrap account and store removed instances ids
-                Entry<Integer, LwM2mInstanceEnabler> bootstrapServerAccount = null;
-                int[] instanceIds = new int[instances.size()];
-                int i = 0;
-                for (Entry<Integer, LwM2mInstanceEnabler> instance : instances.entrySet()) {
-                    if (ServersInfoExtractor.isBootstrapServer(instance.getValue())) {
-                        bootstrapServerAccount = instance;
-                    } else {
-                        // Store instance ids
-                        instanceIds[i] = instance.getKey();
-                        i++;
-                    }
-                }
-                // Clear everything
-                instances.clear();
-
-                // Put bootstrap account again
-                if (bootstrapServerAccount != null) {
-                    instances.put(bootstrapServerAccount.getKey(), bootstrapServerAccount.getValue());
-                }
-
-                fireInstancesRemoved(instanceIds);
-                return BootstrapDeleteResponse.success();
-            } else if (id == LwM2mId.OSCORE) {
-                // For OSCORE object, we clean everything except OSCORE object link to bootstrap Server account.
-
-                // Get bootstrap account
-                LwM2mObjectInstance bootstrapInstance = ServersInfoExtractor.getBootstrapSecurityInstance(
-                        getLwm2mClient().getObjectTree().getObjectEnabler(LwM2mId.SECURITY));
-                // Get OSCORE instance ID associated to it
-                Integer bootstrapOscoreInstanceId = bootstrapInstance != null
-                        ? ServersInfoExtractor.getOscoreSecurityMode(bootstrapInstance)
-                        : null;
-
-                // if bootstrap server use OSCORE,
-                // search the OSCORE instance for this ID and store removed instances ids
-                if (bootstrapOscoreInstanceId != null) {
-                    Entry<Integer, LwM2mInstanceEnabler> bootstrapServerOscore = null;
-                    int[] instanceIds = new int[instances.size()];
-                    int i = 0;
-                    for (Entry<Integer, LwM2mInstanceEnabler> instance : instances.entrySet()) {
-                        if (bootstrapOscoreInstanceId.equals(instance.getKey())) {
-                            bootstrapServerOscore = instance;
-                        } else {
-                            // Store instance ids
-                            instanceIds[i] = instance.getKey();
-                            i++;
-                        }
-                    }
-
-                    // Clear everything
-                    instances.clear();
-
-                    // Put bootstrap OSCORE instance again
-                    if (bootstrapServerOscore != null) {
-                        instances.put(bootstrapServerOscore.getKey(), bootstrapServerOscore.getValue());
-                    }
-                    fireInstancesRemoved(instanceIds);
-                    return BootstrapDeleteResponse.success();
-                }
-                // else delete everything.
-            }
-
-            // In all other cases, just delete everything
-            instances.clear();
-            // fired instances removed
-            int[] instanceIds = new int[instances.size()];
-            int i = 0;
-            for (Entry<Integer, LwM2mInstanceEnabler> instance : instances.entrySet()) {
-                instanceIds[i] = instance.getKey();
-                i++;
-            }
-            fireInstancesRemoved(instanceIds);
-
-            return BootstrapDeleteResponse.success();
-        } else if (request.getPath().isObjectInstance()) {
-            if (id == LwM2mId.SECURITY) {
-                // For security object, deleting bootstrap Server account is not allowed
-                LwM2mInstanceEnabler instance = instances.get(request.getPath().getObjectInstanceId());
-                if (instance == null) {
-                    return BootstrapDeleteResponse
-                            .badRequest(String.format("Instance %s not found", request.getPath()));
-                } else if (ServersInfoExtractor.isBootstrapServer(instance)) {
-                    return BootstrapDeleteResponse.badRequest("bootstrap server can not be deleted");
-                }
-            } else if (id == LwM2mId.OSCORE) {
-                // For OSCORE object, deleting instance linked to Bootstrap account is not allowed
-
-                // Get bootstrap instance
-                LwM2mObjectInstance bootstrapInstance = ServersInfoExtractor.getBootstrapSecurityInstance(
-                        getLwm2mClient().getObjectTree().getObjectEnabler(LwM2mId.SECURITY));
-                // Get OSCORE instance ID associated to it
-                Integer bootstrapOscoreInstanceId = bootstrapInstance != null
-                        ? ServersInfoExtractor.getOscoreSecurityMode(bootstrapInstance)
-                        : null;
-
-                if (bootstrapOscoreInstanceId != null
-                        && bootstrapOscoreInstanceId.equals(request.getPath().getObjectInstanceId())) {
-                    return BootstrapDeleteResponse
-                            .badRequest("OSCORE instance linked to bootstrap server can not be deleted");
-                }
-            }
-            if (null != instances.remove(request.getPath().getObjectInstanceId())) {
-                fireInstancesRemoved(request.getPath().getObjectInstanceId());
-                return BootstrapDeleteResponse.success();
-            } else {
-                return BootstrapDeleteResponse.badRequest(String.format("Instance %s not found", request.getPath()));
-            }
-        }
-        return BootstrapDeleteResponse.badRequest(String.format("unexcepted path %s", request.getPath()));
-    }
-
-    protected void listenInstance(LwM2mInstanceEnabler instance, final int instanceId) {
-        instance.addResourceListener(new ResourceListener() {
-            @Override
-            public void resourceChanged(LwM2mPath... paths) {
-                for (LwM2mPath path : paths) {
-                    if (!isValid(instanceId, path)) {
-                        LOG.warn("InstanceEnabler ({}) of object ({}) try to raise a change of {} which seems invalid.",
-                                instanceId, getId(), path);
-                    }
-                }
-                fireResourcesChanged(paths);
-            }
-        });
-    }
-
-    protected boolean isValid(int instanceId, LwM2mPath pathToValidate) {
-        if (!(pathToValidate.isResource() || pathToValidate.isResourceInstance()))
-            return false;
-
-        if (pathToValidate.getObjectId() != getId()) {
-            return false;
-        }
-
-        if (pathToValidate.getObjectInstanceId() != instanceId) {
-            return false;
-        }
-
-        return true;
-    }
-
-    @Override
-    public ContentFormat getDefaultEncodingFormat(DownlinkRequest<?> request) {
-        return defaultContentFormat;
-    }
-
-    @Override
-    public void init(LwM2mClient client, LinkFormatHelper linkFormatHelper) {
-        super.init(client, linkFormatHelper);
-        this.tbLinkFormatHelper = linkFormatHelper;
-        for (LwM2mInstanceEnabler instanceEnabler : instances.values()) {
-            instanceEnabler.setLwM2mClient(client);
-        }
-    }
-
-    @Override
-    public void destroy() {
-        for (LwM2mInstanceEnabler instanceEnabler : instances.values()) {
-            if (instanceEnabler instanceof Destroyable) {
-                ((Destroyable) instanceEnabler).destroy();
-            } else if (instanceEnabler instanceof Stoppable) {
-                ((Stoppable) instanceEnabler).stop();
-            }
-        }
-    }
-
-    @Override
-    public void start() {
-        for (LwM2mInstanceEnabler instanceEnabler : instances.values()) {
-            if (instanceEnabler instanceof Startable) {
-                ((Startable) instanceEnabler).start();
-            }
-        }
-    }
-
-    @Override
-    public void stop() {
-        for (LwM2mInstanceEnabler instanceEnabler : instances.values()) {
-            if (instanceEnabler instanceof Stoppable) {
-                ((Stoppable) instanceEnabler).stop();
-            }
-        }
-    }
-
-    @Override
-    public synchronized WriteAttributesResponse writeAttributes(LwM2mServer server, WriteAttributesRequest request) {
-        // execute is not supported for bootstrap
-        if (server.isLwm2mBootstrapServer()) {
-            return WriteAttributesResponse.methodNotAllowed();
-        }
-//        return WriteAttributesResponse.internalServerError("not implemented");
-        return doWriteAttributes(server, request);
-    }
-
-    /**
-     *  <NOTIFICATION> Class Attributes
-     * - pmin             (def = 0(sec)) Integer Resource/Object Instance/Object Readable Resource
-     * - pmax             (def = -- )    Integer Resource/Object Instance/Object Readable Resource
-     * - Greater Than  gt (def = -- )    Float   Resource                        Numerical&Readable Resource
-     * - Less Than     lt (def = -- )    Float   Resource                        Numerical&Readable Resource
-     * - Step          st (def = -- )    Float   Resource                        Numerical&Readable Resource
-     */
-    public  WriteAttributesResponse doWriteAttributes(LwM2mServer server, WriteAttributesRequest request) {
-        LwM2mPath lwM2mPath = request.getPath();
-        LwM2mAttributeSet attributeSet = lwM2mAttributes.get(lwM2mPath);
-        Map <String, LwM2mAttribute<?>> attributes = new HashMap<>();
-
-        for (LwM2mAttribute attr : request.getAttributes().getLwM2mAttributes()) {
-            if (attr.getName().equals("pmax") || attr.getName().equals("pmin")) {
-                if (lwM2mPath.isObject() || lwM2mPath.isObjectInstance() || lwM2mPath.isResource()) {
-                    attributes.put(attr.getName(), attr);
-                } else {
-                    return WriteAttributesResponse.badRequest("Attribute " + attr.getName() + " can be used for only Resource/Object Instance/Object.");
-                }
-            } else if (attr.getName().equals("gt") || attr.getName().equals("lt") || attr.getName().equals("st")) {
-                if (lwM2mPath.isResource()) {
-                    attributes.put(attr.getName(), attr);
-                } else {
-                    return WriteAttributesResponse.badRequest("Attribute " + attr.getName() + " can be used for only Resource.");
-                }
-            }
-        }
-        if (attributes.size()>0){
-            if (attributeSet == null) {
-                attributeSet = new LwM2mAttributeSet(attributes.values());
-            } else {
-                Iterable<LwM2mAttribute<?>> lwM2mAttributeIterable = attributeSet.getLwM2mAttributes();
-              Map <String, LwM2mAttribute<?>> attributesOld = new HashMap<>();
-                for (LwM2mAttribute<?> attr : lwM2mAttributeIterable) {
-                    attributesOld.put(attr.getName(), attr);
-                }
-                attributesOld.putAll(attributes);
-                attributeSet = new LwM2mAttributeSet(attributesOld.values());
-            }
-            lwM2mAttributes.put(lwM2mPath, attributeSet);
-            return WriteAttributesResponse.success();
-        }
-        return WriteAttributesResponse.internalServerError("not implemented");
-    }
-
-    @Override
-    public synchronized DiscoverResponse discover(LwM2mServer server, DiscoverRequest request) {
-
-        if (server.isLwm2mBootstrapServer()) {
-            // discover is not supported for bootstrap
-            return DiscoverResponse.methodNotAllowed();
-        }
-
-        if (id == LwM2mId.SECURITY || id == LwM2mId.OSCORE) {
-            return DiscoverResponse.notFound();
-        }
-        return doDiscover(server, request);
-
-    }
-
-    protected DiscoverResponse doDiscover(LwM2mServer server, DiscoverRequest request) {
-
-        LwM2mPath path = request.getPath();
-        if (path.isObject()) {
-            LwM2mLink[] ObjectLinks = linkUpdateAttributes(this.tbLinkFormatHelper.getObjectDescription(this, null), server);
-            return DiscoverResponse.success(ObjectLinks);
-
-        } else if (path.isObjectInstance()) {
-            // Manage discover on instance
-            if (!getAvailableInstanceIds().contains(path.getObjectInstanceId()))
-                return DiscoverResponse.notFound();
-
-            LwM2mLink[] instanceLink =  linkUpdateAttributes(this.tbLinkFormatHelper.getInstanceDescription(this, path.getObjectInstanceId(), null), server);
-            return DiscoverResponse.success(instanceLink);
-
-        } else if (path.isResource()) {
-            // Manage discover on resource
-            if (!getAvailableInstanceIds().contains(path.getObjectInstanceId()))
-                return DiscoverResponse.notFound();
-
-            ResourceModel resourceModel = getObjectModel().resources.get(path.getResourceId());
-            if (resourceModel == null)
-                return DiscoverResponse.notFound();
-
-            if (!getAvailableResourceIds(path.getObjectInstanceId()).contains(path.getResourceId()))
-                return DiscoverResponse.notFound();
-
-            LwM2mLink resourceLink  = linkAddAttribute(
-                    this.tbLinkFormatHelper.getResourceDescription(this, path.getObjectInstanceId(), path.getResourceId(), null),
-                    server);
-            return DiscoverResponse.success(new LwM2mLink[] { resourceLink });
-        }
-        return DiscoverResponse.badRequest(null);
-    }
-
-    private LwM2mLink[] linkUpdateAttributes(LwM2mLink[] links, LwM2mServer server) {
-        return  Arrays.stream(links)
-                .map(link -> linkAddAttribute(link, server))
-                .toArray(LwM2mLink[]::new);
-    }
-
-    private LwM2mLink linkAddAttribute(LwM2mLink link, LwM2mServer server) {
-
-        LwM2mAttributeSet lwM2mAttributeSetDop = null;
-        if (this.lwM2mAttributes.get(link.getPath())!= null){
-            lwM2mAttributeSetDop = this.lwM2mAttributes.get(link.getPath());
-        }
-        LwM2mAttribute resourceAttributeDim = getResourceAttributes (server, link.getPath());
-
-        Map <String, LwM2mAttribute<?>> attributes = new HashMap<>();
-        if (link.getAttributes() != null) {
-            for (LwM2mAttribute attr : link.getAttributes().getLwM2mAttributes()) {
-                attributes.put(attr.getName(), attr);
-            }
-        }
-        if (lwM2mAttributeSetDop != null) {
-            for (LwM2mAttribute attr : lwM2mAttributeSetDop.getLwM2mAttributes()) {
-                attributes.put(attr.getName(), attr);
-            }
-        }
-        if (resourceAttributeDim != null) {
-            attributes.put(resourceAttributeDim.getName(), resourceAttributeDim);
-        }
-        return new LwM2mLink(link.getRootPath(), link.getPath(), attributes.values());
-    }
-
-    protected LwM2mAttribute getResourceAttributes (LwM2mServer server, LwM2mPath path)    {
-        ResourceModel resourceModel = getObjectModel().resources.get(path.getResourceId());
-        if (path.isResource() && resourceModel.multiple) {
-            return getResourceAttributeDim(path, server);
-        }
-        return null;
-    }
-
-    protected LwM2mAttribute getResourceAttributeDim(LwM2mPath path, LwM2mServer server) {
-        LwM2mInstanceEnabler instance = instances.get(path.getObjectInstanceId());
-        try {
-            ReadResponse readResponse = instance.read(server, path.getResourceId());
-            if (readResponse.getCode().getCode()==205 && readResponse.getContent() instanceof LwM2mMultipleResource) {
-                long valueDim = ((LwM2mMultipleResource)readResponse.getContent()).getInstances().size();
-                return LwM2mAttributes.create(LwM2mAttributes.DIMENSION, valueDim);
-            } else {
-                return null;
-            }
-        } catch (Exception e ){
-            return null;
-        }
-    }
-
-}
-
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/TbObjectsInitializer.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/TbObjectsInitializer.java
deleted file mode 100644
index eff5ac962e..0000000000
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/client/TbObjectsInitializer.java
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-package org.thingsboard.server.transport.lwm2m.client;
-
-import org.eclipse.leshan.client.resource.BaseInstanceEnablerFactory;
-import org.eclipse.leshan.client.resource.LwM2mInstanceEnabler;
-import org.eclipse.leshan.client.resource.LwM2mObjectEnabler;
-import org.eclipse.leshan.client.resource.ObjectsInitializer;
-import org.eclipse.leshan.core.model.LwM2mModel;
-import org.eclipse.leshan.core.model.ObjectModel;
-
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-public class TbObjectsInitializer extends ObjectsInitializer {
-
-
-    public TbObjectsInitializer(LwM2mModel model) {
-        super(model);
-    }
-
-    public List<LwM2mObjectEnabler> create(int... objectId) {
-        List<LwM2mObjectEnabler> enablers = new ArrayList<>();
-        for (int anObjectId : objectId) {
-            LwM2mObjectEnabler objectEnabler = create(anObjectId);
-            if (objectEnabler != null)
-                enablers.add(objectEnabler);
-        }
-        return enablers;
-    }
-
-    public LwM2mObjectEnabler create(int objectId) {
-        ObjectModel objectModel = model.getObjectModel(objectId);
-        if (objectModel == null) {
-            throw new IllegalArgumentException(
-                    "Cannot create object for id " + objectId + " because no model is defined for this id.");
-        }
-        return createNodeEnabler(objectModel);
-    }
-
-    protected LwM2mObjectEnabler createNodeEnabler(ObjectModel objectModel) {
-        Map<Integer, LwM2mInstanceEnabler> instances = new HashMap<>();
-        LwM2mInstanceEnabler[] newInstances = createInstances(objectModel);
-        for (LwM2mInstanceEnabler instance : newInstances) {
-            // set id if not already set
-            if (instance.getId() == null) {
-                int id = BaseInstanceEnablerFactory.generateNewInstanceId(instances.keySet());
-                instance.setId(id);
-            }
-            instance.setModel(objectModel);
-            instances.put(instance.getId(), instance);
-        }
-        return new TbLwm2mObjectEnabler(objectModel.id, objectModel, instances, getFactoryFor(objectModel),
-                getContentFormat(objectModel.id));
-    }
-}
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/AbstractOtaLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/AbstractOtaLwM2MIntegrationTest.java
index 60e335e32a..6008c0352a 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/AbstractOtaLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/AbstractOtaLwM2MIntegrationTest.java
@@ -15,17 +15,31 @@
  */
 package org.thingsboard.server.transport.lwm2m.ota;
 
+import com.fasterxml.jackson.core.type.TypeReference;
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.mock.web.MockMultipartFile;
 import org.springframework.test.web.servlet.request.MockMultipartHttpServletRequestBuilder;
 import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
+import org.thingsboard.server.common.data.Device;
 import org.thingsboard.server.common.data.OtaPackageInfo;
+import org.thingsboard.server.common.data.id.DeviceProfileId;
+import org.thingsboard.server.common.data.kv.KvEntry;
+import org.thingsboard.server.common.data.kv.TsKvEntry;
+import org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus;
 import org.thingsboard.server.dao.service.DaoSqlTest;
 import org.thingsboard.server.transport.lwm2m.AbstractLwM2MIntegrationTest;
 
+import java.util.Comparator;
+import java.util.List;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+import static org.thingsboard.rest.client.utils.RestJsonConverter.toTimeseries;
 import static org.thingsboard.server.common.data.ota.OtaPackageType.FIRMWARE;
 import static org.thingsboard.server.common.data.ota.OtaPackageType.SOFTWARE;
 
+@Slf4j
 @DaoSqlTest
 public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MIntegrationTest {
 
@@ -33,9 +47,10 @@ public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MInteg
     protected static final String CLIENT_ENDPOINT_WITHOUT_FW_INFO = "WithoutFirmwareInfoDevice";
     protected static final String CLIENT_ENDPOINT_OTA5 = "Ota5_Device";
     protected static final String CLIENT_ENDPOINT_OTA9 = "Ota9_Device";
+    protected List<OtaPackageUpdateStatus> expectedStatuses;
 
 
-    protected final String OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA =
+    protected final String OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA5 =
 
             "    {\n" +
                     "    \"keyName\": {\n" +
@@ -43,22 +58,14 @@ public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MInteg
                     "      \"/5_1.2/0/5\": \"updateResult\",\n" +
                     "      \"/5_1.2/0/6\": \"pkgname\",\n" +
                     "      \"/5_1.2/0/7\": \"pkgversion\",\n" +
-                    "      \"/5_1.2/0/9\": \"firmwareUpdateDeliveryMethod\",\n" +
-                    "      \"/9_1.1/0/0\": \"pkgname\",\n" +
-                    "      \"/9_1.1/0/1\": \"pkgversion\",\n" +
-                    "      \"/9_1.1/0/7\": \"updateState\",\n" +
-                    "      \"/9_1.1/0/9\": \"updateResult\"\n" +
+                    "      \"/5_1.2/0/9\": \"firmwareUpdateDeliveryMethod\"\n" +
                     "    },\n" +
                     "    \"observe\": [\n" +
                     "      \"/5_1.2/0/3\",\n" +
                     "      \"/5_1.2/0/5\",\n" +
                     "      \"/5_1.2/0/6\",\n" +
                     "      \"/5_1.2/0/7\",\n" +
-                    "      \"/5_1.2/0/9\",\n" +
-                    "      \"/9_1.1/0/0\",\n" +
-                    "      \"/9_1.1/0/1\",\n" +
-                    "      \"/9_1.1/0/7\",\n" +
-                    "      \"/9_1.1/0/9\"\n" +
+                    "      \"/5_1.2/0/9\"\n" +
                     "    ],\n" +
                     "    \"attribute\": [],\n" +
                     "    \"telemetry\": [\n" +
@@ -66,7 +73,28 @@ public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MInteg
                     "      \"/5_1.2/0/5\",\n" +
                     "      \"/5_1.2/0/6\",\n" +
                     "      \"/5_1.2/0/7\",\n" +
-                    "      \"/5_1.2/0/9\",\n" +
+                    "      \"/5_1.2/0/9\"\n" +
+                    "    ],\n" +
+                    "    \"attributeLwm2m\": {}\n" +
+                    "  }";
+
+    protected final String OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA9 =
+
+            "    {\n" +
+                    "    \"keyName\": {\n" +
+                    "      \"/9_1.1/0/0\": \"pkgname\",\n" +
+                    "      \"/9_1.1/0/1\": \"pkgversion\",\n" +
+                    "      \"/9_1.1/0/7\": \"updateState\",\n" +
+                    "      \"/9_1.1/0/9\": \"updateResult\"\n" +
+                    "    },\n" +
+                    "    \"observe\": [\n" +
+                    "      \"/9_1.1/0/0\",\n" +
+                    "      \"/9_1.1/0/1\",\n" +
+                    "      \"/9_1.1/0/7\",\n" +
+                    "      \"/9_1.1/0/9\"\n" +
+                    "    ],\n" +
+                    "    \"attribute\": [],\n" +
+                    "    \"telemetry\": [\n" +
                     "      \"/9_1.1/0/0\",\n" +
                     "      \"/9_1.1/0/1\",\n" +
                     "      \"/9_1.1/0/7\",\n" +
@@ -79,14 +107,14 @@ public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MInteg
         setResources(this.RESOURCES_OTA);
     }
 
-    protected OtaPackageInfo createFirmware() throws Exception {
+    protected OtaPackageInfo createFirmware(String version, DeviceProfileId deviceProfileId) throws Exception {
         String CHECKSUM = "4bf5122f344554c53bde2ebb8cd2b7e3d1600ad631c385a5d7cce23c7785459a";
 
         OtaPackageInfo firmwareInfo = new OtaPackageInfo();
-        firmwareInfo.setDeviceProfileId(deviceProfile.getId());
+        firmwareInfo.setDeviceProfileId(deviceProfileId);
         firmwareInfo.setType(FIRMWARE);
         firmwareInfo.setTitle("My firmware");
-        firmwareInfo.setVersion("v1.0");
+        firmwareInfo.setVersion(version);
 
         OtaPackageInfo savedFirmwareInfo = doPost("/api/otaPackage", firmwareInfo, OtaPackageInfo.class);
 
@@ -95,11 +123,11 @@ public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MInteg
         return savaData("/api/otaPackage/" + savedFirmwareInfo.getId().getId().toString() + "?checksum={checksum}&checksumAlgorithm={checksumAlgorithm}", testData, CHECKSUM, "SHA256");
     }
 
-    protected OtaPackageInfo createSoftware() throws Exception {
+    protected OtaPackageInfo createSoftware(DeviceProfileId deviceProfileId) throws Exception {
         String CHECKSUM = "4bf5122f344554c53bde2ebb8cd2b7e3d1600ad631c385a5d7cce23c7785459a";
 
         OtaPackageInfo swInfo = new OtaPackageInfo();
-        swInfo.setDeviceProfileId(deviceProfile.getId());
+        swInfo.setDeviceProfileId(deviceProfileId);
         swInfo.setType(SOFTWARE);
         swInfo.setTitle("My sw");
         swInfo.setVersion("v1.0");
@@ -117,4 +145,28 @@ public abstract class AbstractOtaLwM2MIntegrationTest extends AbstractLwM2MInteg
         setJwtToken(postRequest);
         return readResponse(mockMvc.perform(postRequest).andExpect(status().isOk()), OtaPackageInfo.class);
     }
+
+
+    protected Device getDeviceFromAPI(UUID deviceId) throws Exception {
+        final Device device = doGet("/api/device/" + deviceId, Device.class);
+        log.trace("Fetched device by API for deviceId {}, device is {}", deviceId, device);
+        return device;
+    }
+
+    protected List<TsKvEntry> getFwSwStateTelemetryFromAPI(UUID deviceId, String type_state) throws Exception {
+        final List<TsKvEntry> tsKvEntries = toTimeseries(doGetAsyncTyped("/api/plugins/telemetry/DEVICE/" + deviceId + "/values/timeseries?orderBy=ASC&keys=" + type_state + "&startTs=0&endTs=" + System.currentTimeMillis(), new TypeReference<>() {
+        }));
+        log.warn("Fetched telemetry by API for deviceId {}, list size {}, tsKvEntries {}", deviceId, tsKvEntries.size(), tsKvEntries);
+        return tsKvEntries;
+    }
+
+    protected boolean predicateForStatuses(List<TsKvEntry> ts) {
+        List<OtaPackageUpdateStatus> statuses = ts.stream()
+                .sorted(Comparator.comparingLong(TsKvEntry::getTs))
+                .map(KvEntry::getValueAsString)
+                .map(OtaPackageUpdateStatus::valueOf)
+                .collect(Collectors.toList());
+        log.warn("{}", statuses);
+        return statuses.containsAll(expectedStatuses);
+    }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/OtaLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/Ota5LwM2MIntegrationTest.java
similarity index 51%
rename from application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/OtaLwM2MIntegrationTest.java
rename to application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/Ota5LwM2MIntegrationTest.java
index b78e738d72..a50f7df6a2 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/OtaLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/Ota5LwM2MIntegrationTest.java
@@ -20,6 +20,7 @@ import lombok.extern.slf4j.Slf4j;
 import org.junit.Assert;
 import org.junit.Test;
 import org.thingsboard.server.common.data.Device;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MDeviceCredentials;
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
 import org.thingsboard.server.common.data.kv.KvEntry;
@@ -29,9 +30,7 @@ import org.thingsboard.server.transport.lwm2m.ota.AbstractOtaLwM2MIntegrationTes
 
 import java.util.Arrays;
 import java.util.Collections;
-import java.util.Comparator;
 import java.util.List;
-import java.util.UUID;
 import java.util.concurrent.TimeUnit;
 import java.util.stream.Collectors;
 
@@ -45,24 +44,21 @@ import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.INIT
 import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.QUEUED;
 import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.UPDATED;
 import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.UPDATING;
-import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.VERIFIED;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MProfileBootstrapConfigType.NONE;
 
 @Slf4j
-public class OtaLwM2MIntegrationTest extends AbstractOtaLwM2MIntegrationTest {
-
-    private List<OtaPackageUpdateStatus> expectedStatuses;
+public class Ota5LwM2MIntegrationTest extends AbstractOtaLwM2MIntegrationTest {
 
     @Test
-    public void testFirmwareUpdateWithClientWithoutFirmwareOtaInfoFromProfile() throws Exception {
+    public void testFirmwareUpdateWithClientWithoutFirmwareOtaInfoFromProfile_IsNotSupported() throws Exception {
         Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS, getBootstrapServerCredentialsNoSec(NONE));
-        createDeviceProfile(transportConfiguration);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + this.CLIENT_ENDPOINT_WITHOUT_FW_INFO, transportConfiguration);
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsNoSec(createNoSecClientCredentials(this.CLIENT_ENDPOINT_WITHOUT_FW_INFO));
-        final Device device = createDevice(deviceCredentials, this.CLIENT_ENDPOINT_WITHOUT_FW_INFO);
-        createNewClient(SECURITY_NO_SEC, null, false, this.CLIENT_ENDPOINT_WITHOUT_FW_INFO);
+        final Device device = createLwm2mDevice(deviceCredentials, this.CLIENT_ENDPOINT_WITHOUT_FW_INFO, deviceProfile.getId());
+        createNewClient(SECURITY_NO_SEC, null, false, this.CLIENT_ENDPOINT_WITHOUT_FW_INFO, device.getId().getId().toString());
         awaitObserveReadAll(0, device.getId().getId().toString());
 
-        device.setFirmwareId(createFirmware().getId());
+        device.setFirmwareId(createFirmware("5.1", deviceProfile.getId()).getId());
         final Device savedDevice = doPost("/api/device", device, Device.class);
 
         Thread.sleep(1000);
@@ -78,81 +74,37 @@ public class OtaLwM2MIntegrationTest extends AbstractOtaLwM2MIntegrationTest {
         Assert.assertEquals(expectedStatuses, statuses);
     }
 
+    /**
+     * /5/0/5 -> Update Result (Res); 5/0/3 -> State;
+     * => ((Res>=0 && Res<=9) &&  State=0)
+     * => Write to Package/Write to Package URI -> DOWNLOADING ((Res>=0 && Res<=9) && State=1)
+     * => Download Finished -> DOWNLOADED ((Res==0 || Res=8) && State=2)
+     * => Executable resource Update is triggered / Initiate Firmware Update -> UPDATING (Res=0 && State=3)
+     * => Update Successful  [Res==1]
+     * => Start / Res=0 -> "IDLE" ....
+     * @throws Exception
+     */
     @Test
-    public void testFirmwareUpdateByObject5() throws Exception {
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA, getBootstrapServerCredentialsNoSec(NONE));
-        createDeviceProfile(transportConfiguration);
+    public void testFirmwareUpdateByObject5_Ok() throws Exception {
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA5, getBootstrapServerCredentialsNoSec(NONE));
+        DeviceProfile deviceProfile =  createLwm2mDeviceProfile("profileFor" + this.CLIENT_ENDPOINT_OTA5, transportConfiguration);
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsNoSec(createNoSecClientCredentials(this.CLIENT_ENDPOINT_OTA5));
-        final Device device = createDevice(deviceCredentials, this.CLIENT_ENDPOINT_OTA5);
-        createNewClient(SECURITY_NO_SEC, null, false, this.CLIENT_ENDPOINT_OTA5);
-        awaitObserveReadAll(9, device.getId().getId().toString());
+        final Device device = createLwm2mDevice(deviceCredentials, this.CLIENT_ENDPOINT_OTA5, deviceProfile.getId());
+        createNewClient(SECURITY_NO_SEC, null, false, this.CLIENT_ENDPOINT_OTA5, device.getId().getId().toString());
+        awaitObserveReadAll(5, device.getId().getId().toString());
 
-        device.setFirmwareId(createFirmware().getId());
+        device.setFirmwareId(createFirmware("fw.v.1.5.0-update", deviceProfile.getId()).getId());
         final Device savedDevice = doPost("/api/device", device, Device.class);
 
         assertThat(savedDevice).as("saved device").isNotNull();
         assertThat(getDeviceFromAPI(device.getId().getId())).as("fetched device").isEqualTo(savedDevice);
 
         expectedStatuses = Arrays.asList(QUEUED, INITIATED, DOWNLOADING, DOWNLOADED, UPDATING, UPDATED);
-        List<TsKvEntry> ts = await("await on timeseries")
+        List<TsKvEntry> ts = await("await on timeseries for FW")
                 .atMost(TIMEOUT, TimeUnit.SECONDS)
-                .until(() -> toTimeseries(doGetAsyncTyped("/api/plugins/telemetry/DEVICE/" +
-                        savedDevice.getId().getId() + "/values/timeseries?orderBy=ASC&keys=fw_state&startTs=0&endTs=" +
-                        System.currentTimeMillis(), new TypeReference<>() {
-                })), this::predicateForStatuses);
+                .until(() -> getFwSwStateTelemetryFromAPI(device.getId().getId(), "fw_state"), this::predicateForStatuses);
         log.warn("Object5: Got the ts: {}", ts);
     }
 
-    /**
-     * This is the example how to use the AWAITILITY instead Thread.sleep()
-     * Test will finish as fast as possible, but will await until TIMEOUT if a build machine is busy or slow
-     * Check the detailed log output to learn how Awaitility polling the API and when exactly expected result appears
-     * */
-    @Test
-    public void testSoftwareUpdateByObject9() throws Exception {
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA, getBootstrapServerCredentialsNoSec(NONE));
-        createDeviceProfile(transportConfiguration);
-        LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsNoSec(createNoSecClientCredentials(this.CLIENT_ENDPOINT_OTA9));
-        final Device device = createDevice(deviceCredentials, this.CLIENT_ENDPOINT_OTA9);
-        createNewClient(SECURITY_NO_SEC, null, false, this.CLIENT_ENDPOINT_OTA9);
-        awaitObserveReadAll(9, device.getId().getId().toString());
-
-        device.setSoftwareId(createSoftware().getId());
-        final Device savedDevice = doPost("/api/device", device, Device.class); //sync call
-
-        assertThat(savedDevice).as("saved device").isNotNull();
-        assertThat(getDeviceFromAPI(device.getId().getId())).as("fetched device").isEqualTo(savedDevice);
-
-        expectedStatuses = List.of(
-                QUEUED, INITIATED, DOWNLOADING, DOWNLOADING, DOWNLOADING, DOWNLOADED, VERIFIED, UPDATED);
-
-        List<TsKvEntry> ts = await("await on timeseries")
-                .atMost(TIMEOUT, TimeUnit.SECONDS)
-                .until(() -> getSwStateTelemetryFromAPI(device.getId().getId()), this::predicateForStatuses);
-        log.warn("Object9: Got the ts: {}", ts);
-    }
-
-    private Device getDeviceFromAPI(UUID deviceId) throws Exception {
-        final Device device = doGet("/api/device/" + deviceId, Device.class);
-        log.trace("Fetched device by API for deviceId {}, device is {}", deviceId, device);
-        return device;
-    }
-
-    private List<TsKvEntry> getSwStateTelemetryFromAPI(UUID deviceId) throws Exception {
-        final List<TsKvEntry> tsKvEntries = toTimeseries(doGetAsyncTyped("/api/plugins/telemetry/DEVICE/" + deviceId + "/values/timeseries?orderBy=ASC&keys=sw_state&startTs=0&endTs=" + System.currentTimeMillis(), new TypeReference<>() {
-        }));
-        log.warn("Fetched telemetry by API for deviceId {}, list size {}, tsKvEntries {}", deviceId, tsKvEntries.size(), tsKvEntries);
-        return tsKvEntries;
-    }
-
-    private boolean predicateForStatuses(List<TsKvEntry> ts) {
-        List<OtaPackageUpdateStatus> statuses = ts.stream()
-                .sorted(Comparator.comparingLong(TsKvEntry::getTs))
-                .map(KvEntry::getValueAsString)
-                .map(OtaPackageUpdateStatus::valueOf)
-                .collect(Collectors.toList());
-        log.warn("{}", statuses);
-        return statuses.containsAll(expectedStatuses);
-    }
 
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/Ota9LwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/Ota9LwM2MIntegrationTest.java
new file mode 100644
index 0000000000..68f69bc035
--- /dev/null
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/ota/sql/Ota9LwM2MIntegrationTest.java
@@ -0,0 +1,73 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.transport.lwm2m.ota.sql;
+
+import lombok.extern.slf4j.Slf4j;
+import org.junit.Test;
+import org.thingsboard.server.common.data.Device;
+import org.thingsboard.server.common.data.DeviceProfile;
+import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MDeviceCredentials;
+import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
+import org.thingsboard.server.common.data.kv.TsKvEntry;
+import org.thingsboard.server.transport.lwm2m.ota.AbstractOtaLwM2MIntegrationTest;
+
+import java.util.List;
+import java.util.concurrent.TimeUnit;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.awaitility.Awaitility.await;
+import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.DOWNLOADED;
+import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.DOWNLOADING;
+import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.INITIATED;
+import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.QUEUED;
+import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.UPDATED;
+import static org.thingsboard.server.common.data.ota.OtaPackageUpdateStatus.VERIFIED;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MProfileBootstrapConfigType.NONE;
+
+@Slf4j
+public class Ota9LwM2MIntegrationTest extends AbstractOtaLwM2MIntegrationTest {
+
+    /**
+     * => Start -> INITIAL (State=0) -> DOWNLOAD STARTED;
+     * => PKG / URI Write -> DOWNLOAD STARTED (Res=1 (Downloading) && State=1) -> DOWNLOADED
+     * => PKG Written -> DOWNLOADED (Res=1 Initial && State=2) -> DELIVERED;
+     * => PKG integrity verified -> DELIVERED  (Res=3 (Successfully Downloaded and package integrity verified) && State=3) -> INSTALLED;
+     * => Install -> INSTALLED (Res=2 SW successfully installed) && State=4) -> Start
+     *
+     * */
+    @Test
+    public void testSoftwareUpdateByObject9() throws Exception {
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS_OTA9, getBootstrapServerCredentialsNoSec(NONE));
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + this.CLIENT_ENDPOINT_OTA9, transportConfiguration);
+        LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsNoSec(createNoSecClientCredentials(this.CLIENT_ENDPOINT_OTA9));
+        final Device device = createLwm2mDevice(deviceCredentials, this.CLIENT_ENDPOINT_OTA9, deviceProfile.getId());
+        createNewClient(SECURITY_NO_SEC, null, false, this.CLIENT_ENDPOINT_OTA9, device.getId().getId().toString());
+        awaitObserveReadAll(4, device.getId().getId().toString());
+
+        device.setSoftwareId(createSoftware(deviceProfile.getId()).getId());
+        final Device savedDevice = doPost("/api/device", device, Device.class); //sync call
+
+        assertThat(savedDevice).as("saved device").isNotNull();
+        assertThat(getDeviceFromAPI(device.getId().getId())).as("fetched device").isEqualTo(savedDevice);
+
+        expectedStatuses = List.of(
+                QUEUED, INITIATED, DOWNLOADING, DOWNLOADING, DOWNLOADING, DOWNLOADED, VERIFIED, UPDATED);
+        List<TsKvEntry> ts = await("await on timeseries")
+                .atMost(TIMEOUT, TimeUnit.SECONDS)
+                .until(() -> getFwSwStateTelemetryFromAPI(device.getId().getId(), "sw_state"), this::predicateForStatuses);
+        log.warn("Object9: Got the ts: {}", ts);
+    }
+}
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationObserveTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationObserveTest.java
index ea9814c1d0..7195b0d229 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationObserveTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationObserveTest.java
@@ -15,8 +15,8 @@
  */
 package org.thingsboard.server.transport.lwm2m.rpc;
 
-import org.junit.Before;
 import org.thingsboard.server.dao.service.DaoSqlTest;
+import static org.junit.Assert.assertTrue;
 
 @DaoSqlTest
 public abstract class AbstractRpcLwM2MIntegrationObserveTest extends AbstractRpcLwM2MIntegrationTest{
@@ -26,9 +26,8 @@ public abstract class AbstractRpcLwM2MIntegrationObserveTest extends AbstractRpc
         setResources(this.RESOURCES_RPC_MULTIPLE_19);
     }
 
-    @Before
-    public void initTest () throws Exception {
-        awaitObserveReadAll(4, deviceId);
+    protected void sendRpcObserveWithContainsLwM2mSingleResource(String params) throws Exception {
+        String rpcActualResult = sendRpcObserveOkWithResultValue("Observe", params);
+        assertTrue(rpcActualResult.contains("LwM2mSingleResource") || rpcActualResult.contains("LwM2mMultipleResource"));
     }
-
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationTest.java
index d0b86fdab0..d5c9683c39 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/AbstractRpcLwM2MIntegrationTest.java
@@ -22,13 +22,13 @@ import org.junit.Before;
 import org.mockito.Mockito;
 import org.springframework.boot.test.mock.mockito.SpyBean;
 import org.thingsboard.server.common.data.Device;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MDeviceCredentials;
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
 import org.thingsboard.server.dao.service.DaoSqlTest;
 import org.thingsboard.server.gen.transport.TransportProtos;
 import org.thingsboard.server.transport.lwm2m.AbstractLwM2MIntegrationTest;
 import org.thingsboard.server.transport.lwm2m.server.LwM2mTransportServerHelper;
-import org.thingsboard.server.transport.lwm2m.server.uplink.DefaultLwM2mUplinkMsgHandler;
 
 import java.util.List;
 import java.util.Set;
@@ -71,7 +71,7 @@ import static org.thingsboard.server.transport.lwm2m.utils.LwM2MTransportUtil.fr
 public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MIntegrationTest {
 
     protected final LinkParser linkParser = new DefaultLwM2mLinkParser();
-    protected String OBSERVE_ATTRIBUTES_WITH_PARAMS_RPC;
+    protected String CONFIG_PROFILE_WITH_PARAMS_RPC;
     public Set expectedObjects;
     public Set expectedObjectIdVers;
     public Set expectedInstances;
@@ -98,9 +98,6 @@ public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MInteg
 
     protected String idVer_19_0_0;
 
-    @SpyBean
-    protected DefaultLwM2mUplinkMsgHandler defaultUplinkMsgHandlerTest;
-
     @SpyBean
     protected LwM2mTransportServerHelper lwM2mTransportServerHelperTest;
 
@@ -110,18 +107,21 @@ public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MInteg
 
     @Before
     public void startInitRPC() throws Exception {
-        if (this.getClass().getSimpleName().equals("RpcLwm2mIntegrationDiscoverWriteAttributesTest")){
-            isWriteAttribute = true;
-        }
-        if (this.getClass().getSimpleName().equals("RpcLwm2mIntegrationWriteCborTest")){
+        if (this.getClass().getSimpleName().equals("RpcLwm2mIntegrationWriteCborTest")) {
             supportFormatOnly_SenMLJSON_SenMLCBOR = true;
         }
-        initRpc();
+        if (this.getClass().getSimpleName().equals("RpcLwm2mIntegrationObserveTest")) {
+            initRpc(0);
+        } else if (this.getClass().getSimpleName().equals("RpcLwm2mIntegrationReadCollectedValueTest")) {
+            initRpc(3303);
+        } else {
+            initRpc(1);
+        }
     }
 
-    private void initRpc () throws Exception {
+    protected void initRpc(int typeConfigProfile) throws Exception {
         String endpoint = DEVICE_ENDPOINT_RPC_PREF + endpointSequence.incrementAndGet();
-        createNewClient(SECURITY_NO_SEC, null, true, endpoint);
+        createNewClient(SECURITY_NO_SEC, null, true, endpoint, null);
         expectedObjects = ConcurrentHashMap.newKeySet();
         expectedObjectIdVers = ConcurrentHashMap.newKeySet();
         expectedInstances = ConcurrentHashMap.newKeySet();
@@ -154,18 +154,17 @@ public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MInteg
 
         idVer_3_0_0 = objectIdVer_3 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_0;
         idVer_3_0_9 = objectIdVer_3 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_9;
-        id_3_0_9 =  fromVersionedIdToObjectId(idVer_3_0_9);
+        id_3_0_9 = fromVersionedIdToObjectId(idVer_3_0_9);
         idVer_19_0_0 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_0;
 
-        OBSERVE_ATTRIBUTES_WITH_PARAMS_RPC =
+        String ATTRIBUTES_TELEMETRY_WITH_PARAMS_RPC_WITH_OBSERVE =
                 "    {\n" +
                         "    \"keyName\": {\n" +
                         "      \"" + idVer_3_0_9 + "\": \"" + RESOURCE_ID_NAME_3_9 + "\",\n" +
                         "      \"" + objectIdVer_3 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_14 + "\": \"" + RESOURCE_ID_NAME_3_14 + "\",\n" +
                         "      \"" + idVer_19_0_0 + "\": \"" + RESOURCE_ID_NAME_19_0_0 + "\",\n" +
                         "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0 + "\": \"" + RESOURCE_ID_NAME_19_1_0 + "\",\n" +
-                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2 + "\": \"" + RESOURCE_ID_NAME_19_0_2 + "\",\n" +
-                        "      \"" + objectIdVer_3303 + "/" + OBJECT_INSTANCE_ID_12 + "/" + RESOURCE_ID_5700 + "\": \"" + RESOURCE_ID_NAME_3303_12_5700 + "\"\n" +
+                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2 + "\": \"" + RESOURCE_ID_NAME_19_0_2 + "\"\n" +
                         "    },\n" +
                         "    \"observe\": [\n" +
                         "      \"" + idVer_3_0_9 + "\",\n" +
@@ -180,19 +179,60 @@ public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MInteg
                         "    \"telemetry\": [\n" +
                         "      \"" + idVer_3_0_9 + "\",\n" +
                         "      \"" + idVer_19_0_0 + "\",\n" +
-                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0 + "\",\n" +
-                        "      \"" + objectIdVer_3303 + "/" + OBJECT_INSTANCE_ID_12 + "/" + RESOURCE_ID_5700 + "\"\n" +
+                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0 + "\"\n" +
                         "    ],\n" +
                         "    \"attributeLwm2m\": {}\n" +
                         "  }";
 
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITH_PARAMS_RPC, getBootstrapServerCredentialsNoSec(NONE));
-        createDeviceProfile(transportConfiguration);
+        String TELEMETRY_WITH_PARAMS_RPC_WITHOUT_OBSERVE =
+                "    {\n" +
+                        "    \"keyName\": {\n" +
+                        "      \"" + idVer_3_0_9 + "\": \"" + RESOURCE_ID_NAME_3_9 + "\",\n" +
+                        "      \"" + objectIdVer_3 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_14 + "\": \"" + RESOURCE_ID_NAME_3_14 + "\",\n" +
+                        "      \"" + idVer_19_0_0 + "\": \"" + RESOURCE_ID_NAME_19_0_0 + "\",\n" +
+                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0 + "\": \"" + RESOURCE_ID_NAME_19_1_0 + "\",\n" +
+                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2 + "\": \"" + RESOURCE_ID_NAME_19_0_2 + "\"\n" +
+                        "    },\n" +
+                        "    \"observe\": [\n" +
+                        "    ],\n" +
+                        "    \"attribute\": [\n" +
+                        "      \"" + objectIdVer_3 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_14 + "\",\n" +
+                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2 + "\"\n" +
+                        "    ],\n" +
+                        "    \"telemetry\": [\n" +
+                        "      \"" + idVer_3_0_9 + "\",\n" +
+                        "      \"" + idVer_19_0_0 + "\",\n" +
+                        "      \"" + objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0 + "\"\n" +
+                        "    ],\n" +
+                        "    \"attributeLwm2m\": {}\n" +
+                        "  }";
+        String TELEMETRY_WITH_PARAMS_RPC_COLLECTED_VALUE =
+                "    {\n" +
+                        "    \"keyName\": {\n" +
+                        "      \"" + objectIdVer_3303 + "/" + OBJECT_INSTANCE_ID_12 + "/" + RESOURCE_ID_5700 + "\": \"" + RESOURCE_ID_NAME_3303_12_5700 + "\"\n" +
+                        "    },\n" +
+                        "    \"observe\": [\n" +
+                        "    ],\n" +
+                        "    \"attribute\": [\n" +
+                        "    ],\n" +
+                        "    \"telemetry\": [\n" +
+                        "      \"" + objectIdVer_3303 + "/" + OBJECT_INSTANCE_ID_12 + "/" + RESOURCE_ID_5700 + "\"\n" +
+                        "    ],\n" +
+                        "    \"attributeLwm2m\": {}\n" +
+                        "  }";
+        CONFIG_PROFILE_WITH_PARAMS_RPC =
+                switch (typeConfigProfile) {
+                    case 0 -> ATTRIBUTES_TELEMETRY_WITH_PARAMS_RPC_WITH_OBSERVE;
+                    case 1 -> TELEMETRY_WITH_PARAMS_RPC_WITHOUT_OBSERVE;
+                    case 3303 -> TELEMETRY_WITH_PARAMS_RPC_COLLECTED_VALUE;
+                    default -> throw new IllegalStateException("Unexpected value: " + typeConfigProfile);
+                };
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(CONFIG_PROFILE_WITH_PARAMS_RPC, getBootstrapServerCredentialsNoSec(NONE));
+        DeviceProfile deviceProfile  = createLwm2mDeviceProfile("profileFor" + endpoint, transportConfiguration);
 
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsNoSec(createNoSecClientCredentials(endpoint));
-        final Device device = createDevice(deviceCredentials, endpoint);
-        deviceId = device.getId().getId().toString();
-
+        final Device device = createLwm2mDevice(deviceCredentials, endpoint, deviceProfile.getId());
+        lwM2MTestClient.setDeviceIdStr(device.getId().getId().toString());
         lwM2MTestClient.start(true);
     }
 
@@ -236,14 +276,7 @@ public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MInteg
         log.trace("updateRegAtLeastOnceAfterAction: newInvocationCount [{}]", newInvocationCount.get());
     }
 
-    protected long countUpdateReg() {
-        return Mockito.mockingDetails(defaultUplinkMsgHandlerTest)
-                .getInvocations().stream()
-                .filter(invocation -> invocation.getMethod().getName().equals("updatedReg"))
-                .count();
-    }
-
-   protected long countSendParametersOnThingsboardTelemetryResource(String rezName) {
+    protected long countSendParametersOnThingsboardTelemetryResource(String rezName) {
         return Mockito.mockingDetails(lwM2mTransportServerHelperTest)
                 .getInvocations().stream()
                 .filter(invocation ->
@@ -256,5 +289,4 @@ public abstract class AbstractRpcLwM2MIntegrationTest extends AbstractLwM2MInteg
                 )
                 .count();
     }
-
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2MIntegrationObserveCompositeTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2MIntegrationObserveCompositeTest.java
index a1ad762aaa..56de08e66d 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2MIntegrationObserveCompositeTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2MIntegrationObserveCompositeTest.java
@@ -58,7 +58,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveCompositeAnyResources_Result_CONTENT_Value_LwM2mSingleResource_LwM2mResourceInstance() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         String expectedIdVer5_0_7 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_7;
         String expectedIdVer5_0_5 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_5;
         String expectedIdVer5_0_3 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_3;
@@ -81,7 +80,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveComposite_ObjectInstanceWithOtherObjectResourceInstance_Result_CONTENT_Ok() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         String expectedIdVer19_1_0 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0;
         String expectedIdVer5_0 = objectInstanceIdVer_5;
         String expectedIds = "[\"" + expectedIdVer19_1_0 + "\", \"" + expectedIdVer5_0 + "\"]";
@@ -100,7 +98,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveReadAll_AfterCompositeObservation_WithResourceNotReadable_Result_CONTENT_ObserveResourceNotReadableIsNull() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         String expectedIdVer5_0_7 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_7;
         String expectedIdVer5_0_2 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_2;
         String expectedIds = "[\"" + expectedIdVer5_0_7 + "\", \"" + expectedIdVer5_0_2 + "\"]";
@@ -120,7 +117,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveComposite_Result_BAD_REQUEST_ONE_PATH_CONTAINCE_OTHER() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         String expectedIdVer5_0 = objectInstanceIdVer_5;
         String expectedIdVer5_0_2 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_2;
         String expectedIds = "[\"" + expectedIdVer5_0 + "\", \"" + expectedIdVer5_0_2 + "\"]";
@@ -133,7 +129,7 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
     }
 
     /**
-     *  Previous -> "3/0/9", "19/0/2", "19/1/0", "19/0/0", All only SingleObservation;
+     *  Previous -> "3/0/9" SingleObservation;
      *  if at least one of the resource objectIds (Composite) in SingleObservation or CompositeObservation is already registered - return BAD REQUEST
      *  ObserveComposite {"ids":["5/0/7", "5/0/5", "5/0/3", "3/0/9"]}
      * @throws Exception
@@ -145,13 +141,8 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         ObjectNode rpcActualResultReadAll = JacksonUtil.fromString(actualResultReadAll, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultReadAll.get("result").asText());
         String actualValues = rpcActualResultReadAll.get("value").asText();
-        String expectedIdVer19_0_2 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2;
-        String expectedIdVer19_1_0 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0;
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(idVer_3_0_9)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(expectedIdVer19_0_2)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(expectedIdVer19_1_0)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(idVer_19_0_0)));
-        // Send Observe composite with "/3/0/9"
+        assertTrue(actualValues.contains("[]"));
+        sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0_9);
         String expectedIdVer5_0_7 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_7;
         String expectedIdVer5_0_5 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_5;
         String expectedIdVer5_0_3 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_3;
@@ -167,9 +158,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultReadAll.get("result").asText());
         actualValues = rpcActualResultReadAll.get("value").asText();
         assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(idVer_3_0_9)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(expectedIdVer19_0_2)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(expectedIdVer19_1_0)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(idVer_19_0_0)));
     }
     /**
      *  Previous -> ["5/0/7", "5/0/5", "5/0/3"], CompositeObservation     *
@@ -206,12 +194,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         ObjectNode rpcActualResultReadAll = JacksonUtil.fromString(actualResultReadAll, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultReadAll.get("result").asText());
         actualValues = rpcActualResultReadAll.get("value").asText();
-        String expectedIdVer19_0_2 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2;
-        String expectedIdVer19_1_0 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0;
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(idVer_3_0_9)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(expectedIdVer19_0_2)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(expectedIdVer19_1_0)));
-        assertTrue(actualValues.contains("SingleObservation:" + fromVersionedIdToObjectId(idVer_19_0_0)));
         assertTrue(actualValues.contains("CompositeObservation:"));
         assertTrue(actualValues.contains(expectedId5_0_7));
         assertTrue(actualValues.contains(expectedId5_0_5));
@@ -224,8 +206,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveCompositeAnyResources_Result_CONTENT_Value_LwM2mSingleResource_LwM2mMultipleResource() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
-
         String expectedIdVer5_0_7 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_7;
         String expectedIdVer5_0_5 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_5;
         String expectedIdVer5_0_3 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_3;
@@ -248,8 +228,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveCompositeWithKeyName_Result_CONTENT_Value_SingleResources() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
-
         String expectedKey3_0_9 = RESOURCE_ID_NAME_3_9;
         String expectedKey3_0_14 = RESOURCE_ID_NAME_3_14;
         String expectedKey19_0_0 = RESOURCE_ID_NAME_19_0_0;
@@ -274,6 +252,7 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveCompositeWithKeyName_IfLeastOneResourceIsAlreadyRegistered_return_BadRequest() throws Exception {
+        sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0_9);
         String expectedKey3_0_9 = RESOURCE_ID_NAME_3_9;
         String expectedKey3_0_14 = RESOURCE_ID_NAME_3_14;
         String expectedKey19_0_0 = RESOURCE_ID_NAME_19_0_0;
@@ -292,8 +271,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveReadAll_AfterbserveCancelAllAndCompositeObservation_Result_CONTENT_Value_CompositeObservation_Only() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
-
         String expectedKey3_0_9 = RESOURCE_ID_NAME_3_9;
         String expectedKey3_0_14 = RESOURCE_ID_NAME_3_14;
         String expectedKey19_0_0 = RESOURCE_ID_NAME_19_0_0;
@@ -323,7 +300,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveCancelAllThenObserveCompositeAnyResources_Result_CONTENT_CancelObserveComposite_This_Result_Content_Count_1() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         // ObserveComposite
         String expectedIdVer5_0_7 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_7;
         String expectedIdVer5_0_5 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_5;
@@ -339,7 +315,7 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
         assertEquals("1", rpcActualResult.get("value").asText());
 
-        assertEquals(0, (Object) getCntObserveAll(deviceId));
+        assertEquals(0, (Object) getCntObserveAll(lwM2MTestClient.getDeviceIdStr()));
     }
 
     /**
@@ -349,7 +325,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveCompositeFiveResources_Result_CONTENT_CancelObserveComposite_TwoAnyResource_Result_BadRequest() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         // ObserveComposite five
         String expectedIdVer5_0_7 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_7;
         String expectedIdVer5_0_5 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_5;
@@ -360,7 +335,7 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         String actualResult = sendCompositeRPCByIds("ObserveComposite", expectedIds);
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-        awaitObserveReadAll(1, deviceId);
+        awaitObserveReadAll(1, lwM2MTestClient.getDeviceIdStr());
 
         // ObserveCompositeCancel two
         expectedIds = "[\"" + objectInstanceIdVer_5 + "\", \"" + expectedIdVer19_1_0_0 + "\"]";
@@ -377,7 +352,6 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
      */
     @Test
     public void testObserveOneObjectAnyResources_Result_CONTENT_Cancel_OneResourceFromObjectAnyResource_Result_BAD_REQUEST_Cancel_OneObject_Result_CONTENT() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
         // ObserveComposite
         String expectedIdVer5_0_3 = objectInstanceIdVer_5 + "/" + RESOURCE_ID_3;
         String expectedIdVer19_1_0_0 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_1 + "/" + RESOURCE_ID_0 + "/" + RESOURCE_INSTANCE_ID_0;
@@ -412,17 +386,25 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         String idVer_19_0_2 = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_2;
         String id_19_0_2 = fromVersionedIdToObjectId(idVer_19_0_2);
 
-        // 1 - "ObserveReadAll": at least one update value of all resources we observe - after connection
+        // 1 - Verify after start
         String actualResultReadAll = sendCompositeRPCByKeys("ObserveReadAll", null);
         ObjectNode rpcActualResultReadAll = JacksonUtil.fromString(actualResultReadAll, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultReadAll.get("result").asText());
-        String rpcActualVValuesReadAll = rpcActualResultReadAll.get("value").asText();
-        ArrayNode rpcactualValues = JacksonUtil.fromString(rpcActualVValuesReadAll, ArrayNode.class);
-        assertEquals(rpcactualValues.size(), 4);
-        assertTrue(actualResultReadAll.contains("SingleObservation:" + id_3_0_9));
-        assertTrue(actualResultReadAll.contains("SingleObservation:" + id_19_1_0));
-        assertTrue(actualResultReadAll.contains("SingleObservation:" + id_19_0_2));
-        assertTrue(actualResultReadAll.contains("SingleObservation:" + id_19_0_0));
+        String actualValues = rpcActualResultReadAll.get("value").asText();
+        assertTrue(actualValues.contains("[]"));
+        sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0_9);
+        sendRpcObserveWithContainsLwM2mSingleResource(idVer_19_0_0);
+        sendRpcObserveWithContainsLwM2mSingleResource(idVer_19_1_0);
+        sendRpcObserveWithContainsLwM2mSingleResource(idVer_19_0_2);
+
+        actualResultReadAll = sendCompositeRPCByKeys("ObserveReadAll", null);
+        rpcActualResultReadAll = JacksonUtil.fromString(actualResultReadAll, ObjectNode.class);
+        assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultReadAll.get("result").asText());
+        actualValues = rpcActualResultReadAll.get("value").asText();
+        assertTrue(actualValues.contains("SingleObservation:" + id_3_0_9));
+        assertTrue(actualValues.contains("SingleObservation:" + id_19_1_0));
+        assertTrue(actualValues.contains("SingleObservation:" + id_19_0_2));
+        assertTrue(actualValues.contains("SingleObservation:" + id_19_0_0));
         long initAttrTelemetryAtCount = countUpdateAttrTelemetryAll();
         long initAttrTelemetryAtCount_3_0_9 = countUpdateAttrTelemetryResource(idVer_3_0_9);
         long initAttrTelemetryAtCount_19_0_0 = countUpdateAttrTelemetryResource(idVer_19_0_0);
@@ -436,13 +418,13 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         updateAttrTelemetryResourceAtLeastOnceAfterAction(initAttrTelemetryAtCount_19_0_2, idVer_19_0_2);
 
         // 2 - "ObserveReadAll": No update of all resources we are observing - after "ObserveReadCancelAll"
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
         updateRegAtLeastOnceAfterAction();
         actualResultReadAll = sendCompositeRPCByKeys("ObserveReadAll", null);
         rpcActualResultReadAll = JacksonUtil.fromString(actualResultReadAll, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResultReadAll.get("result").asText());
-        rpcActualVValuesReadAll = rpcActualResultReadAll.get("value").asText();
-        rpcactualValues = JacksonUtil.fromString(rpcActualVValuesReadAll, ArrayNode.class);
+        String rpcActualVValuesReadAll = rpcActualResultReadAll.get("value").asText();
+        ArrayNode rpcactualValues = JacksonUtil.fromString(rpcActualVValuesReadAll, ArrayNode.class);
         assertEquals(rpcactualValues.size(), 0);
         // 2.1 - ObserveComposite: observeCancelAll verify"
         initAttrTelemetryAtCount = countUpdateAttrTelemetryAll();
@@ -497,17 +479,17 @@ public class RpcLwm2MIntegrationObserveCompositeTest extends AbstractRpcLwM2MInt
         } else {
             sendRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"id\": \"" + params + "\"}}";
         }
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, sendRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), sendRpcRequest, String.class, status().isOk());
     }
 
     private String sendCompositeRPCByIds(String method, String paths) throws Exception {
         String setRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"ids\":" + paths + "}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendCompositeRPCByKeys(String method, String keys) throws Exception {
         String sendRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"keys\":" + keys + "}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, sendRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), sendRpcRequest, String.class, status().isOk());
     }
 
     private void updateAttrTelemetryAllAtLeastOnceAfterAction(long initialInvocationCount) {
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationCreateTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationCreateTest.java
index 86ab77c733..93f8f3d88b 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationCreateTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationCreateTest.java
@@ -127,7 +127,7 @@ public class RpcLwm2mIntegrationCreateTest extends AbstractRpcLwM2MIntegrationTe
 
     private String sendRPCreateById(String path, String value) throws Exception {
         String setRpcRequest = "{\"method\": \"Create\", \"params\": {\"id\": \"" + path + "\", \"value\": " + value + " }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDeleteTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDeleteTest.java
index 9eef0578c5..a2b10c34bb 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDeleteTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDeleteTest.java
@@ -90,7 +90,7 @@ public class RpcLwm2mIntegrationDeleteTest extends AbstractRpcLwM2MIntegrationTe
 
     private String sendRPCDeleteById(String path) throws Exception {
         String setRpcRequest = "{\"method\": \"Delete\", \"params\": {\"id\": \"" + path  + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverTest.java
index 9518010f6a..1c0b4102a1 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverTest.java
@@ -22,6 +22,8 @@ import org.eclipse.leshan.core.link.Link;
 import org.eclipse.leshan.core.link.LinkParseException;
 import org.eclipse.leshan.core.node.LwM2mPath;
 import org.junit.Test;
+import org.junit.jupiter.api.BeforeEach;
+import org.springframework.test.context.event.annotation.BeforeTestClass;
 import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.common.data.StringUtils;
 import org.thingsboard.server.transport.lwm2m.config.TbLwM2mVersion;
@@ -30,8 +32,10 @@ import org.thingsboard.server.transport.lwm2m.rpc.AbstractRpcLwM2MIntegrationTes
 import java.util.Arrays;
 import java.util.Set;
 import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.TimeUnit;
 import java.util.stream.Collectors;
 
+import static org.awaitility.Awaitility.await;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
@@ -39,10 +43,16 @@ import static org.thingsboard.server.common.data.lwm2m.LwM2mConstants.LWM2M_SEPA
 import static org.thingsboard.server.common.data.lwm2m.LwM2mConstants.LWM2M_SEPARATOR_PATH;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.OBJECT_INSTANCE_ID_0;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_2;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_6;
 
 
 public class RpcLwm2mIntegrationDiscoverTest extends AbstractRpcLwM2MIntegrationTest {
 
+    @BeforeEach
+    public void beforeTest () throws Exception {
+        testInit();
+    }
+
     /**
      * DiscoverAll
      *
@@ -51,7 +61,7 @@ public class RpcLwm2mIntegrationDiscoverTest extends AbstractRpcLwM2MIntegration
     @Test
     public void testDiscoverAll_Return_CONTENT_LinksAllObjectsAllInstancesOfClient() throws Exception {
         String setRpcRequest = "{\"method\":\"DiscoverAll\"}";
-        String actualResult = doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        String actualResult = doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
         JsonNode rpcActualValue = JacksonUtil.toJsonNode(rpcActualResult.get("value").asText());
@@ -171,9 +181,20 @@ public class RpcLwm2mIntegrationDiscoverTest extends AbstractRpcLwM2MIntegration
         assertEquals(ResponseCode.NOT_FOUND.getName(), rpcActualResult.get("result").asText());
     }
 
+    @Test
+    public void testDiscoverRequestCannotTargetResourceInstance_Return_INTERNAL_SERVER_ERROR() throws Exception {
+        // ResourceInstanceId
+        String expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6 + "/1";
+        String actualResult = sendDiscover(expectedPath);
+        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.INTERNAL_SERVER_ERROR.getName(), rpcActualResult.get("result").asText());
+        String expected = "InvalidRequestException: Discover request cannot target resource instance path: /3/0/6/1";
+        assertTrue(rpcActualResult.get("error").asText().contains(expected));
+    }
+
     private String sendDiscover(String path) throws Exception {
         String setRpcRequest = "{\"method\": \"Discover\", \"params\": {\"id\": \"" + path + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private  String convertObjectIdToVerId(String path, String ver) {
@@ -190,4 +211,10 @@ public class RpcLwm2mIntegrationDiscoverTest extends AbstractRpcLwM2MIntegration
             return null;
         }
     }
+
+    public void testInit() throws Exception {
+        await("Update Registration at-least-once after start")
+                .atMost(50, TimeUnit.SECONDS)
+                .until(() -> countUpdateReg() > 0);
+    }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverWriteAttributesTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverWriteAttributesTest.java
index d7807ee24a..ebbfec1a10 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverWriteAttributesTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationDiscoverWriteAttributesTest.java
@@ -19,12 +19,12 @@ import com.fasterxml.jackson.databind.node.ObjectNode;
 import org.eclipse.leshan.core.ResponseCode;
 import org.junit.Test;
 import org.thingsboard.common.util.JacksonUtil;
+import org.thingsboard.server.common.transport.util.JsonUtils;
 import org.thingsboard.server.transport.lwm2m.rpc.AbstractRpcLwM2MIntegrationTest;
 
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_14;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_6;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_7;
 
@@ -32,68 +32,22 @@ import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID
 public class RpcLwm2mIntegrationDiscoverWriteAttributesTest extends AbstractRpcLwM2MIntegrationTest {
 
     /**
-     * WriteAttributes {"id":"/3_1.2/0/6","attributes":{"pmax":100, "pmin":10}}
-     * if not implemented:
-     * {"result":"INTERNAL_SERVER_ERROR","error":"not implemented"}
-     * if implemented:
-     * {"result":"BAD_REQUEST","error":"Attribute pmax can be used for only Resource/Object Instance/Object."}
+     *  <PROPERTIES> Class Attributes
+     * - dim              (0-65535)      Integer: Multiple-Instance Resource; R, Number of instances existing for a Multiple-Instance Resource
+     *  <NOTIFICATION> Class Attributes
+     * - pmin             (def = 0(sec)) Integer: Object; Object Instance; Resource; Resource Instance; RW, Readable Resource
+     * - pmax             (def = -- )    Integer: Object; Object Instance; Resource; Resource Instance; RW, Readable Resource
+     * - Greater Than  gt (def = -- )    Float:   Resource; Resource Instance; RW, Numerical&Readable Resource
+     * - Less Than     lt (def = -- )    Float:   Resource; Resource Instance; RW, Numerical&Readable Resource
+     * - Step          st (def = -- )    Float:   Resource; Resource Instance; RW, Numerical&Readable Resource
      */
-    @Test
-    public void testWriteAttributesResourceWithParametersByResourceInstanceId_Result_BAD_REQUEST() throws Exception {
-        String expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6 + "/1";
-        String expectedValue = "{\"pmax\":100, \"pmin\":10}";
-        String actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
-        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.BAD_REQUEST.getName(), rpcActualResult.get("result").asText());
-        String expected = "Attribute pmax can be used for only Resource/Object Instance/Object.";
-        String actual = rpcActualResult.get("error").asText();
-        assertTrue(actual.equals(expected));
-    }
-    /**
-     * WriteAttributes {"id":"/3_1.2/0/6","attributes":{"pmax":100, "pmin":10}}
-     * if not implemented:
-     * {"result":"INTERNAL_SERVER_ERROR","error":"not implemented"}
-     * if implemented:
-     * {"result":"BAD_REQUEST","error":"Attribute pmax can be used for only Resource/Object Instance/Object."}
-     */
-    @Test
-    public void testWriteAttributeResourceDimWithParametersByResourceId_Result_BAD_REQUEST() throws Exception {
-        String expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6;
-        String expectedValue = "{\"dim\":3}";
-        String actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
-        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.BAD_REQUEST.getName(), rpcActualResult.get("result").asText());
-        String expected = "Attribute dim is of class PROPERTIES but only NOTIFICATION attribute can be used in WRITE ATTRIBUTE request.";
-        String actual = rpcActualResult.get("error").asText();
-        assertTrue(actual.equals(expected));
-    }
-
-    @Test
-    public void testWriteAttributesResourceVerWithParametersById_Result_BAD_REQUEST() throws Exception {
-        String expectedPath = objectIdVer_3;
-        String expectedValue = "{\"ver\":1.3}";
-        String actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
-        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.BAD_REQUEST.getName(), rpcActualResult.get("result").asText());
-        String expected = "Attribute ver is of class PROPERTIES but only NOTIFICATION attribute can be used in WRITE ATTRIBUTE request.";
-        String actual = rpcActualResult.get("error").asText();
-        assertTrue(actual.equals(expected));
-    }
 
-    @Test
-    public void testWriteAttributesResourceServerUriWithParametersById_Result_BAD_REQUEST() throws Exception {
-        String expectedPath =  objectInstanceIdVer_1;
-        String actualResult = sendRPCReadById(expectedPath);
-        String expectedValue = "{\"uri\":\"coaps://localhost:5690\"}";
-        actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
-        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.BAD_REQUEST.getName(), rpcActualResult.get("result").asText());
-        String expected = "Attribute uri is of class PROPERTIES but only NOTIFICATION attribute can be used in WRITE ATTRIBUTE request.";
-        String actual = rpcActualResult.get("error").asText();
-        assertTrue(actual.equals(expected));
-    }
 
     /**
+     * <PROPERTIES> Class Attributes
+     * Object Version   ver   Object
+     * Provide the  version of the associated Object.
+     * "ver" only for objectId
      * <PROPERTIES> Class Attributes
      * Dimension 	dim Integer [0:255]
      * Number of instances existing for a Multiple-Instance Resource
@@ -105,145 +59,116 @@ public class RpcLwm2mIntegrationDiscoverWriteAttributesTest extends AbstractRpcL
      * 				<Type>Integer</Type>
      * 				<RangeEnumeration>0..7</RangeEnumeration>
      * WriteAttributes  implemented:	Discover {"id":"3/0/6"} ->  'dim' = 3
-     * "ver" only for objectId
-     */
-    @Test
-    public void testReadDIM_3_0_6_Only_R () throws Exception {
-        String path = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6;
-        String actualResult = sendDiscover(path);
-        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-        String expected = "</3/0/6>;dim=3";
-        assertTrue(rpcActualResult.get("value").asText().equals(expected));
-
-    }
-
-
-    /**
-     * <PROPERTIES> Class Attributes
-     * Object Version   ver   Object
-     * Provide the  version of the associated Object.
-     * "ver" only for objectId
      */
     @Test
-    public void testReadVer () throws Exception {
+    public void testReadDIM_3_0_6_Only_R() throws Exception {
         String path = objectIdVer_3;
         String actualResult = sendDiscover(path);
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
         String expected = "</3>;ver=1.2";
         assertTrue(rpcActualResult.get("value").asText().contains(expected));
+        expected = "</3/0/6>;dim=3";
+        assertTrue(rpcActualResult.get("value").asText().contains(expected));
+        expected = "</3/0/7>;dim=3";
+        assertTrue(rpcActualResult.get("value").asText().contains(expected));
+        expected = "</3/0/8>;dim=3";
+        assertTrue(rpcActualResult.get("value").asText().contains(expected));
+        expected = "</3/0/11>;dim=1";
+        assertTrue(rpcActualResult.get("value").asText().contains(expected));
     }
 
     /**
      * WriteAttributes {"id":"/3/0/14","attributes":{"pmax":100, "pmin":10}}
-     * if not implemented:
-     * {"result":"INTERNAL_SERVER_ERROR","error":"not implemented"}
-     * if implemented:
      * {"result":"CHANGED"}
+     * result changed:
+     *
      */
     @Test
     public void testWriteAttributesResourceWithParametersById_Result_CHANGED() throws Exception {
-        String expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_14;
+        String expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6;
         String expectedValue = "{\"pmax\":100, \"pmin\":10}";
         String actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
-            // result changed
+        // result changed
         actualResult = sendDiscover(expectedPath);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-        String expected = "</3/0/14>;pmax=100;pmin=10";
+        String expected = "</3/0/6>;pmax=100;pmin=10;dim=3";
         assertTrue(rpcActualResult.get("value").asText().contains(expected));
     }
 
-    /**
-     * <NOTIFICATION> Class Attributes
-     * Minimum/Maximum Period pmin/pmax
-     * Notes: The Minimum Period Attribute:
-     * -- indicates the minimum time in seconds the LwM2M Client MUST wait between two notifications. If a notification of an observed Resource is supposed to be generated but it is before pmin expiry, notification MUST be sent as soon as pmin expires. In the absence of this parameter, the Minimum Period is defined by the Default Minimum Period set in the LwM2M Server Account.
-     * Notes: The Maximum Period Attribute:
-     * -- indicates the maximum time in seconds the LwM2M Client MAY wait between two notifications. When this "Maximum Period" expires after the last notification, a new notification MUST be sent. In the absence of this parameter, the "Maximum Period" is defined by the Default Maximum Period when set in the LwM2M Server Account or considered as 0 otherwise. The value of 0, means pmax MUST be ignored. The maximum period parameter MUST be greater than the minimum period parameter otherwise pmax will be ignored for the Resource to which such inconsistent timing conditions are applied.
-     * Greater Than  gt Resource
-     * Less Than     lt Resource
-     * Step          st Resource
-     *
-     * Object Id = 1
-     * Default Minimum Period 	Id = 2 		300 or 0
-     * Default Maximum Period 	Id = 3 		6000 or "-"
-     * </3/0>;pmax=65, </3/0/1>, <3/0/2>, </3/0/3>, </3/0/4>,
-     * <3/0/6>;dim=8,<3/0/7>;gt=50;lt=42.2;st=0.5,<3/0/8>;...
-     */
     @Test
-    public void testWriteAttributesPeriodLtGt () throws Exception {
+    public void testWriteAttributesResourceVerWithParametersById_Result_BAD_REQUEST() throws Exception {
+        String expectedPath = objectIdVer_3;
+        String expectedValue = "{\"ver\":1.3}";
+        String actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
+        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.BAD_REQUEST.getName(), rpcActualResult.get("result").asText());
+        String expected = "Attribute ver is of class PROPERTIES but only NOTIFICATION attribute can be used in WRITE ATTRIBUTE request.";
+        String actual = rpcActualResult.get("error").asText();
+        assertTrue(actual.equals(expected));
+    }
+
+    @Test
+    public void testWriteAttributesObjectInstanceResourcePeriodLtGt_Return_CHANGED() throws Exception {
         String expectedPath = objectInstanceIdVer_3;
-        String expectedValue = "{\"pmax\":60}";
+        String expectedValue = "{\"pmax\":65, \"pmin\":5}";
         String actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
-        expectedPath = objectInstanceIdVer_3;
-        expectedValue = "{\"pmax\":65}";
-        actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
-        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
         expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_7;
-        expectedValue ="{\"gt\":50, \"lt\":42.2, \"st\":0.5}";
+        String expectedValueStr = "gt=50;lt=42.2;st=0.5";
+        JsonUtils.parse("{" + expectedValueStr + "}").toString();
+        expectedValue = JsonUtils.parse("{" + expectedValueStr + "}").toString();
         actualResult = sendRPCExecuteWithValueById(expectedPath, expectedValue);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
-            // ObjectId
+        // ObjectId
         expectedPath = objectIdVer_3;
         actualResult = sendDiscover(expectedPath);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-            // String expected = "</3>;ver=1.2,</3/0>;pmax=60,</3/0/0>,</3/0/1>,</3/0/2>,</3/0/3>,</3/0/6>;dim=3,</3/0/7>;st=0.5;lt=42.2;gt=50.0,</3/0/8>,</3/0/9>,</3/0/10>,</3/0/11>;dim=1,</3/0/13>,</3/0/14>,</3/0/15>,</3/0/16>,</3/0/17>,</3/0/18>,</3/0/19>,</3/0/20>,</3/0/21>";
-        String expected = "</3>;ver=1.2,</3/0>;pmax=65";
-        assertTrue(rpcActualResult.get("value").asText().contains(expected));
-        expected = "</3/0/6>;dim=3,</3/0/7>;st=0.5;lt=42.2;gt=50.0";
-        assertTrue(rpcActualResult.get("value").asText().contains(expected));
-            // ObjectInstanceId
+        String actualValue = rpcActualResult.get("value").asText();
+        String expected = "</3>;ver=1.2,</3/0>;pmax=65;pmin=5";
+        assertTrue(actualValue.contains(expected));
+        expected = "</3/0/6>;dim=3";
+        assertTrue(actualValue.contains(expected));
+        expected = "</3/0/7>;" + expectedValueStr + ";dim=3";
+        assertTrue(actualValue.contains(expected));
+        // ObjectInstanceId
         expectedPath = objectInstanceIdVer_3;
         actualResult = sendDiscover(expectedPath);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-        expected = "</3/0>;pmax=65";
-        assertTrue(rpcActualResult.get("value").asText().contains(expected));
-        expected = "</3/0/6>;dim=3,</3/0/7>;st=0.5;lt=42.2;gt=50.0";
-        assertTrue(rpcActualResult.get("value").asText().contains(expected));
-            // ResourceId
+        actualValue = rpcActualResult.get("value").asText();
+        expected = "</3/0>;pmax=65;pmin=5";
+        assertTrue(actualValue.contains(expected));
+        expected = "</3/0/7>;" + expectedValueStr + ";dim=3";
+        assertTrue(actualValue.contains(expected));
+        // ResourceId
         expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6;
         actualResult = sendDiscover(expectedPath);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-        expected = "</3/0/6>;dim=3";
+        expected = "</3/0/6>;dim=3,</3/0/6/0>,</3/0/6/1>,</3/0/6/2>";
         assertTrue(rpcActualResult.get("value").asText().contains(expected));
         expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_7;
         actualResult = sendDiscover(expectedPath);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
-        expected = "</3/0/7>;st=0.5;lt=42.2;gt=50.0";
+        expected = "</3/0/7>;" + expectedValueStr;
         assertTrue(rpcActualResult.get("value").asText().contains(expected));
-            // ResourceInstanceId
-        expectedPath = objectInstanceIdVer_3 + "/" + RESOURCE_ID_6+ "/1";
-        actualResult = sendDiscover(expectedPath);
-        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
-        assertEquals(ResponseCode.INTERNAL_SERVER_ERROR.getName(), rpcActualResult.get("result").asText());
-        expected = "InvalidRequestException: Discover request cannot target resource instance path: /3/0/6/1";
-        assertTrue(rpcActualResult.get("error").asText().contains(expected));
     }
 
     private String sendRPCExecuteWithValueById(String path, String value) throws Exception {
         String setRpcRequest = "{\"method\": \"WriteAttributes\", \"params\": {\"id\": \"" + path + "\", \"attributes\": " + value + " }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
-    }
-
-    private String sendRPCReadById(String path) throws Exception {
-        String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"id\": \"" + path + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendDiscover(String path) throws Exception {
         String setRpcRequest = "{\"method\": \"Discover\", \"params\": {\"id\": \"" + path + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationExecuteTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationExecuteTest.java
index d31dde1728..5aeb0a60b3 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationExecuteTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationExecuteTest.java
@@ -174,12 +174,12 @@ public class RpcLwm2mIntegrationExecuteTest extends AbstractRpcLwM2MIntegrationT
 
     private String sendRPCExecuteById(String path) throws Exception {
         String setRpcRequest = "{\"method\": \"Execute\", \"params\": {\"id\": \"" + path + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCExecuteWithValueById(String path, Object value) throws Exception {
         String setRpcRequest = "{\"method\": \"Execute\", \"params\": {\"id\": \"" + path + "\", \"value\": " + value + " }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationObserveTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationObserveTest.java
index a665f7f53c..4adf1ec000 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationObserveTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationObserveTest.java
@@ -20,14 +20,12 @@ import lombok.extern.slf4j.Slf4j;
 import org.eclipse.leshan.core.LwM2m.Version;
 import org.eclipse.leshan.core.ResponseCode;
 import org.eclipse.leshan.core.node.LwM2mPath;
-import org.eclipse.leshan.core.response.ReadResponse;
 import org.eclipse.leshan.server.registration.Registration;
+import org.junit.Before;
 import org.junit.Test;
 import org.mockito.Mockito;
 import org.thingsboard.server.transport.lwm2m.rpc.AbstractRpcLwM2MIntegrationObserveTest;
 
-import java.util.Optional;
-
 import static org.eclipse.leshan.core.LwM2mId.ACCESS_CONTROL;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
@@ -45,13 +43,15 @@ import static org.thingsboard.server.transport.lwm2m.utils.LwM2MTransportUtil.fr
 @Slf4j
 public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationObserveTest {
 
+    @Before
+    public void setupObserveTest() throws Exception {
+        awaitObserveReadAll(4,lwM2MTestClient.getDeviceIdStr());
+    }
+
+
     @Test
     public void testObserveReadAll_Count_4_CancelAll_Count_0_Ok() throws Exception {
-        String actualValuesReadAll = sendRpcObserveOkWithResultValue("ObserveReadAll", null);
-        assertEquals(4, actualValuesReadAll.split(",").length);
-        sendObserveCancelAllWithAwait(deviceId);
-        actualValuesReadAll = sendRpcObserveOkWithResultValue("ObserveReadAll", null);
-        assertEquals("[]", actualValuesReadAll);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
     }
 
     /**
@@ -61,7 +61,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
     @Test
     public void testObserveOneResource_Result_CONTENT_Value_Count_3_After_Cancel_Count_2() throws Exception {
         long initSendTelemetryAtCount = countSendParametersOnThingsboardTelemetryResource(RESOURCE_ID_NAME_3_9);
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
         sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0_9);
         updateRegAtLeastOnceAfterAction();
         long lastSendTelemetryAtCount = countSendParametersOnThingsboardTelemetryResource(RESOURCE_ID_NAME_3_9);
@@ -74,7 +74,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserveOneObjectInstance_Result_CONTENT_Value_Count_3_After_Cancel_Count_2() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
         String idVer_3_0 = objectInstanceIdVer_3;
         sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0);
 
@@ -89,7 +89,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserveOneObject_Result_CONTENT_Value_Count_3_After_Cancel_Count_2() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
         String idVer_3_0 = objectInstanceIdVer_3;
         sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0);
 
@@ -199,7 +199,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserves_OverlappedPaths_FirstResource_SecondObjectOrInstance() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
         // "19/0/0"
         sendRpcObserveOkWithResultValue("Observe", idVer_19_0_0);
         // PreviousObservation "19/0/0" change to CurrentObservation "19" - object
@@ -247,7 +247,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserveResource_ObserveCancelResource_Result_CONTENT_Count_1() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
 
         String actualValuesReadAll = sendRpcObserveReadAllWithResult(idVer_3_0_9);
         assertEquals(1, actualValuesReadAll.split(",").length);
@@ -265,7 +265,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserveObject_ObserveCancelOneResource_Result_INTERNAL_SERVER_ERROR_Than_Cancel_ObserveObject_Result_CONTENT_Count_1() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
 
         String actualValuesReadAll = sendRpcObserveReadAllWithResult(objectIdVer_3);
         assertEquals(1, actualValuesReadAll.split(",").length);
@@ -292,7 +292,7 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserveResource_ObserveCancelObject_Result_CONTENT_Count_1() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
         sendRpcObserveWithWithTwoResource(idVer_3_0_0, idVer_3_0_9);
         String rpcActualResul = sendRpcObserveOkWithResultValue("ObserveReadAll", null);
         assertEquals(2, rpcActualResul.split(",").length);
@@ -320,15 +320,13 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
      */
     @Test
     public void testObserveResource_Update_AfterUpdateRegistration() throws Exception {
-        sendObserveCancelAllWithAwait(deviceId);
+        sendObserveCancelAllWithAwait(lwM2MTestClient.getDeviceIdStr());
 
-        int cntUpdate = 3;
-        verify(defaultUplinkMsgHandlerTest, timeout(50000).atLeast(cntUpdate))
-                .updatedReg(Mockito.any(Registration.class));
+        awaitUpdateReg(3);
 
         sendRpcObserveWithContainsLwM2mSingleResource(idVer_3_0_9);
 
-        cntUpdate = 10;
+        int cntUpdate = 10;
         verify(defaultUplinkMsgHandlerTest, timeout(50000).atLeast(cntUpdate))
                 .updateAttrTelemetry(Mockito.any(Registration.class), eq(idVer_3_0_9), eq(null));
     }
@@ -344,11 +342,5 @@ public class RpcLwm2mIntegrationObserveTest extends AbstractRpcLwM2MIntegrationO
         assertEquals(ResponseCode.CONTENT.getName(), rpcActualResult.get("result").asText());
         return rpcActualResult.get("value").asText();
     }
-
-    private void sendRpcObserveWithContainsLwM2mSingleResource(String params) throws Exception {
-        String rpcActualResult = sendRpcObserveOkWithResultValue("Observe", params);
-        assertTrue(rpcActualResult.contains("LwM2mSingleResource"));
-        assertEquals(Optional.of(1).get(), Optional.ofNullable(getCntObserveAll(deviceId)).get());
-    }
 }
 
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadCollectedValueTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadCollectedValueTest.java
new file mode 100644
index 0000000000..55a69353d3
--- /dev/null
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadCollectedValueTest.java
@@ -0,0 +1,98 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.transport.lwm2m.rpc.sql;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import lombok.extern.slf4j.Slf4j;
+import org.junit.Before;
+import org.junit.Test;
+import org.thingsboard.server.transport.lwm2m.rpc.AbstractRpcLwM2MIntegrationTest;
+import java.util.concurrent.atomic.AtomicReference;
+import static java.util.concurrent.TimeUnit.SECONDS;
+import static org.awaitility.Awaitility.await;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.OBJECT_INSTANCE_ID_12;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_0;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_1;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_VALUE_0;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_VALUE_1;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_3303_12_5700;
+import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS;
+
+@Slf4j
+public class RpcLwm2mIntegrationReadCollectedValueTest extends AbstractRpcLwM2MIntegrationTest {
+
+    /**
+     * Read {"id":"/3303/12/5700"}
+     * Trigger a Send operation from the client with multiple values for the same resource as a payload
+     * acked "[{"bn":"/3303/12/5700","bt":1724".. 116 bytes]
+     * 2 values for the resource /3303/12/5700 should be stored with:
+     * - timestamps1 =  Instance.now() + RESOURCE_ID_VALUE_3303_12_5700_1
+     * - timestamps2 =  (timestamps1 + 3 sec) + RESOURCE_ID_VALUE_3303_12_5700_2
+     * @throws Exception
+     */
+    @Test
+    public void testReadSingleResource_sendFromClient_CollectedValue() throws Exception {
+        // init test
+        int cntValues = 2;
+        int resourceId = 5700;
+        String expectedIdVer = objectIdVer_3303 + "/" + OBJECT_INSTANCE_ID_12 + "/" + resourceId;
+        sendRPCById(expectedIdVer);
+
+        // verify time start/end send CollectedValue;
+        await().atMost(40, SECONDS).until(() -> RESOURCE_ID_3303_12_5700_TS_0 > 0
+                                                    && RESOURCE_ID_3303_12_5700_TS_1 > 0);
+
+        // verify result read: verify count value: 1-2: send CollectedValue;
+        AtomicReference<ObjectNode> actualValues = new AtomicReference<>();
+        await().atMost(40, SECONDS).until(() -> {
+            actualValues.set(doGetAsync(
+                    "/api/plugins/telemetry/DEVICE/" + lwM2MTestClient.getDeviceIdStr() + "/values/timeseries?keys="
+                            + RESOURCE_ID_NAME_3303_12_5700
+                            + "&startTs=" + (RESOURCE_ID_3303_12_5700_TS_0 - RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS)
+                            + "&endTs=" + (RESOURCE_ID_3303_12_5700_TS_1 + RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS)
+                            + "&interval=0&limit=100&useStrictDataTypes=false",
+                    ObjectNode.class));
+            return actualValues.get() != null && actualValues.get().size() > 0
+                    && actualValues.get().get(RESOURCE_ID_NAME_3303_12_5700).size() >= cntValues && verifyTs(actualValues);
+        });
+    }
+
+    private boolean verifyTs(AtomicReference<ObjectNode> actualValues) {
+        String expectedVal_0 = String.valueOf(RESOURCE_ID_3303_12_5700_VALUE_0);
+        String expectedVal_1 = String.valueOf(RESOURCE_ID_3303_12_5700_VALUE_1);
+        ArrayNode actual = (ArrayNode) actualValues.get().get(RESOURCE_ID_NAME_3303_12_5700);
+        long actualTS0 = 0;
+        long actualTS1 = 0;
+        for (JsonNode tsNode : actual) {
+            if (tsNode.get("value").asText().equals(expectedVal_0)) {
+                actualTS0 = tsNode.get("ts").asLong();
+            } else if (tsNode.get("value").asText().equals(expectedVal_1)) {
+                actualTS1 = tsNode.get("ts").asLong();
+            }
+        }
+        return actualTS0 >= RESOURCE_ID_3303_12_5700_TS_0
+                && actualTS1 <= RESOURCE_ID_3303_12_5700_TS_1
+                && (actualTS1 - actualTS0) >= RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS;
+    }
+
+    private String sendRPCById(String path) throws Exception {
+        String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"id\": \"" + path + "\"}}";
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
+    }
+}
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadTest.java
index 1ab4893ec4..afa35735c9 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationReadTest.java
@@ -15,23 +15,15 @@
  */
 package org.thingsboard.server.transport.lwm2m.rpc.sql;
 
-import com.fasterxml.jackson.databind.JsonNode;
-import com.fasterxml.jackson.databind.node.ArrayNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import lombok.extern.slf4j.Slf4j;
-import org.apache.commons.collections4.map.HashedMap;
 import org.eclipse.leshan.core.ResponseCode;
 import org.eclipse.leshan.core.node.LwM2mPath;
+import org.junit.Before;
 import org.junit.Test;
 import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.transport.lwm2m.rpc.AbstractRpcLwM2MIntegrationTest;
 
-import java.time.Instant;
-import java.util.Map;
-import java.util.concurrent.atomic.AtomicReference;
-
-import static java.util.concurrent.TimeUnit.SECONDS;
-import static org.awaitility.Awaitility.await;
 import static org.eclipse.leshan.core.LwM2mId.SERVER;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
@@ -39,24 +31,17 @@ import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.BINARY_APP_DATA_CONTAINER;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.OBJECT_INSTANCE_ID_0;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.OBJECT_INSTANCE_ID_1;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.OBJECT_INSTANCE_ID_12;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_0;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_1;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_11;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_14;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_2;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_0;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_TS_1;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_9;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_19_0_0;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_19_0_3;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_19_1_0;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_3303_12_5700;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_3_14;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_NAME_3_9;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_VALUE_0;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_3303_12_5700_VALUE_1;
-import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS;
 
 @Slf4j
 public class RpcLwm2mIntegrationReadTest extends AbstractRpcLwM2MIntegrationTest {
@@ -228,59 +213,6 @@ public class RpcLwm2mIntegrationReadTest extends AbstractRpcLwM2MIntegrationTest
         assertTrue(actualValues.contains(expected19_1_0));
     }
 
-
-    /**
-     * Read {"id":"/3303/12/5700"}
-     * Trigger a Send operation from the client with multiple values for the same resource as a payload
-     * acked "[{"bn":"/3303/12/5700","bt":1724".. 116 bytes]
-     * 2 values for the resource /3303/12/5700 should be stored with:
-     * - timestamps1 =  Instance.now() + RESOURCE_ID_VALUE_3303_12_5700_1
-     * - timestamps2 =  (timestamps1 + 3 sec) + RESOURCE_ID_VALUE_3303_12_5700_2
-     * @throws Exception
-     */
-    @Test
-    public void testReadSingleResource_sendFromClient_CollectedValue() throws Exception {
-        // init test
-        long startTs = Instant.now().toEpochMilli();
-        int cntValues = 4;
-        int resourceId = 5700;
-        String expectedIdVer = objectIdVer_3303 + "/" + OBJECT_INSTANCE_ID_12 + "/" + resourceId;
-        sendRPCById(expectedIdVer);
-        // verify result read: verify count value: 1-2: send CollectedValue; 3 - response for read;
-        long endTs = Instant.now().toEpochMilli() + RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS * 4;
-        String expectedVal_1 = String.valueOf(RESOURCE_ID_3303_12_5700_VALUE_0);
-        String expectedVal_2 = String.valueOf(RESOURCE_ID_3303_12_5700_VALUE_1);
-        AtomicReference<ObjectNode> actualValues = new AtomicReference<>();
-        await().atMost(40, SECONDS).until(() -> {
-            actualValues.set(doGetAsync(
-                    "/api/plugins/telemetry/DEVICE/" + deviceId + "/values/timeseries?keys="
-                            + RESOURCE_ID_NAME_3303_12_5700
-                            + "&startTs=" + startTs
-                            + "&endTs=" + endTs
-                            + "&interval=0&limit=100&useStrictDataTypes=false",
-                    ObjectNode.class));
-            // verify cntValues
-            return actualValues.get() != null && actualValues.get().get(RESOURCE_ID_NAME_3303_12_5700).size() == cntValues;
-        });
-        // verify ts
-        ArrayNode actual = (ArrayNode) actualValues.get().get(RESOURCE_ID_NAME_3303_12_5700);
-        Map<String, Long> keyTsMaps = new HashedMap();
-        for (JsonNode tsNode: actual) {
-            if (tsNode.get("value").asText().equals(expectedVal_1) || tsNode.get("value").asText().equals(expectedVal_2)) {
-                keyTsMaps.put(tsNode.get("value").asText(), tsNode.get("ts").asLong());
-            }
-        }
-        assertTrue(keyTsMaps.size() == 2);
-        long actualTS0 = keyTsMaps.get(expectedVal_1).longValue();
-        long actualTS1 = keyTsMaps.get(expectedVal_2).longValue();
-        assertTrue(actualTS0 > 0);
-        assertTrue(actualTS1 > 0);
-        assertTrue(actualTS1 > actualTS0);
-        assertTrue((actualTS1 - actualTS0) >= RESOURCE_ID_VALUE_3303_12_5700_DELTA_TS);
-        assertTrue(actualTS0 <= RESOURCE_ID_3303_12_5700_TS_0);
-        assertTrue(actualTS1 <= RESOURCE_ID_3303_12_5700_TS_1);
-    }
-
     /**
      * ReadComposite {"keys":["batteryLevel", "UtfOffset", "dataDescription"]}
      */
@@ -300,21 +232,21 @@ public class RpcLwm2mIntegrationReadTest extends AbstractRpcLwM2MIntegrationTest
 
     private String sendRPCById(String path) throws Exception {
         String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"id\": \"" + path + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCByKey(String key) throws Exception {
         String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"key\": \"" + key + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendCompositeRPCByIds(String paths) throws Exception {
         String setRpcRequest = "{\"method\": \"ReadComposite\", \"params\": {\"ids\":" + paths + "}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendCompositeRPCByKeys(String keys) throws Exception {
         String setRpcRequest = "{\"method\": \"ReadComposite\", \"params\": {\"keys\":" + keys + "}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteCborTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteCborTest.java
index 2850d5b8cd..f3f8e0b3be 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteCborTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteCborTest.java
@@ -88,11 +88,11 @@ public class RpcLwm2mIntegrationWriteCborTest extends AbstractRpcLwM2MIntegratio
 
     private String sendRPCWriteObjectById(String method, String path, Object value) throws Exception {
         String setRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"id\": \"" + path + "\", \"value\": " + value + " }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCReadById(String id) throws Exception {
         String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"id\": \"" + id + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteTest.java
index f99826780e..dce5233984 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/rpc/sql/RpcLwm2mIntegrationWriteTest.java
@@ -20,6 +20,7 @@ import org.eclipse.leshan.core.ResponseCode;
 import org.eclipse.leshan.core.node.LwM2mPath;
 import org.junit.Test;
 import org.thingsboard.common.util.JacksonUtil;
+import org.thingsboard.script.api.tbel.TbUtils;
 import org.thingsboard.server.transport.lwm2m.rpc.AbstractRpcLwM2MIntegrationTest;
 
 import static org.junit.Assert.assertEquals;
@@ -76,7 +77,157 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         String expected = "LwM2mSingleResource [id=" + RESOURCE_ID_14 + ", value=" + expectedValue + ", type=STRING]";
         assertTrue(actualValues.contains(expected));
     }
-
+    @Test
+    public void testWriteReplaceValueMultipleResource_Result_CHANGED_Multi_Instance_Resource_must_One() throws Exception {
+        int resourceInstanceId0 = 0;
+        String expectedPath = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId0;
+            // base64/String
+        String expectedValue = "QUJDREVGRw";
+        String actualResult = sendRPCWriteStringById("WriteReplace", expectedPath, expectedValue);
+        ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        String actualValues = rpcActualResult.get("value").asText();
+        byte[] expectedValue0 = TbUtils.base64ToBytes(expectedValue);
+        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+            // base64/String
+        expectedValue = "ABCDEFG";
+        actualResult = sendRPCWriteStringById("WriteReplace", expectedPath, expectedValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expectedValue0 = TbUtils.base64ToBytes(expectedValue);
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+            // hexDecimal/String
+        expectedValue = "01ABCDEF";
+        actualResult = sendRPCWriteStringById("WriteReplace", expectedPath, expectedValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue.length()/2 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+            // Integer
+        Integer expectedIntegerValue = 1234566;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedIntegerValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedIntegerValue = Integer.MAX_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedIntegerValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedIntegerValue = Integer.MIN_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedIntegerValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+            // Long
+        Long expectedLongValue = 4406483977L;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedLongValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 8 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedLongValue = Long.MAX_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedLongValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 8 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedLongValue = Long.MIN_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedLongValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 8 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+            // Float to byte[]: byte[] bytes = ByteBuffer.allocate(4).putFloat(((Float) value).floatValue()).array();
+            // Float from byte[]: float f = ByteBuffer.wrap(bytes).getFloat();
+        Float expectedFloatValue = 8.02f;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedFloatValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedFloatValue = Float.MAX_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedFloatValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedFloatValue = Float.MIN_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedFloatValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+           // Double to byte[]: byte[] bytes = ByteBuffer.allocate(8).putDouble(((Double) value).doubleValue()).array();
+           // Double from byte[]: double d = ByteBuffer.wrap(bytes).getDouble();
+        Double expectedDoubleValue = 1022.5906d;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedDoubleValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 4 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedDoubleValue = Double.MAX_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedDoubleValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 8 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        expectedDoubleValue = Double.MIN_VALUE;
+        actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedDoubleValue);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
+        actualResult = sendRPCReadById(expectedPath);
+        rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
+        actualValues = rpcActualResult.get("value").asText();
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + 8 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+    }
 
     /**
      * id
@@ -88,9 +239,9 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         String expectedPath = objectIdVer_19 + "/" + OBJECT_INSTANCE_ID_0 + "/" + RESOURCE_ID_0;
         int resourceInstanceId0 = 0;
         int resourceInstanceId15 = 15;
-        String expectedValue0 = "0000ad45675600";
-        String expectedValue15 = "1525ad45675600cdef";
-        String expectedValue = "{\"" + resourceInstanceId0 + "\":\"" + expectedValue0 + "\", \"" + resourceInstanceId15 + "\":\"" + expectedValue15 + "\"}";
+        String expectedValue0 = "1525ad45675600cdef";
+        Integer expectedValue15 = Integer.MAX_VALUE;
+        String expectedValue = "{\"" + resourceInstanceId0 + "\":\"" + expectedValue0 + "\", \"" + resourceInstanceId15 + "\":" + expectedValue15 + "}";
         String actualResult = sendRPCWriteObjectById("WriteReplace", expectedPath, expectedValue);
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
@@ -99,12 +250,12 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         actualResult = sendRPCReadById(expectedPath0);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         String actualValues = rpcActualResult.get("value").asText();
-        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length()/2 + "Bytes, type=OPAQUE]";
+        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
         actualResult = sendRPCReadById(expectedPath15);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         actualValues = rpcActualResult.get("value").asText();
-        expected = "LwM2mResourceInstance [id=" + resourceInstanceId15 + ", value=" + expectedValue15.length()/2 + "Bytes, type=OPAQUE]";
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId15 + ", value=" +  Integer.toHexString(expectedValue15).length()/2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
     }
 
@@ -130,7 +281,7 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         actualResult = sendRPCReadById(expectedPath0);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         String actualValues = rpcActualResult.get("value").asText();
-        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length()/2 + "Bytes, type=OPAQUE]";
+        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length() / 2 + "Bytes, type=OPAQUE]";
         assertFalse(actualValues.contains(expected));
     }
 
@@ -193,16 +344,16 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         ObjectNode rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         assertEquals(ResponseCode.CHANGED.getName(), rpcActualResult.get("result").asText());
         String expectedPath0 = expectedPath + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId0;
-        String expectedPath25 =expectedPath + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId25;
+        String expectedPath25 = expectedPath + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId25;
         actualResult = sendRPCReadById(expectedPath0);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         String actualValues = rpcActualResult.get("value").asText();
-        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length()/2 + "Bytes, type=OPAQUE]";
+        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
         actualResult = sendRPCReadById(expectedPath25);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         actualValues = rpcActualResult.get("value").asText();
-        expected = "LwM2mResourceInstance [id=" + resourceInstanceId25 + ", value=" + expectedValue25.length()/2 + "Bytes, type=OPAQUE]";
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId25 + ", value=" + expectedValue25.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
     }
 
@@ -232,13 +383,14 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         actualResult = sendRPCReadById(expectedPath_19_0 + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId0);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         String actualValues = rpcActualResult.get("value").asText();
-        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length()/2 + "Bytes, type=OPAQUE]";
+        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
         actualResult = sendRPCReadById(expectedPath_19_0 + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId25);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         actualValues = rpcActualResult.get("value").asText();
-        expected = "LwM2mResourceInstance [id=" + resourceInstanceId25 + ", value=" + expectedValue25.length()/2 + "Bytes, type=OPAQUE]";
-        assertTrue(actualValues.contains(expected));       actualResult = sendRPCReadByKey(expectedKey3_0_14);
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId25 + ", value=" + expectedValue25.length() / 2 + "Bytes, type=OPAQUE]";
+        assertTrue(actualValues.contains(expected));
+        actualResult = sendRPCReadByKey(expectedKey3_0_14);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         actualValues = rpcActualResult.get("value").asText();
         expected = "LwM2mSingleResource [id=" + RESOURCE_ID_14 + ", value=" + expectedValue3_0_14 + ", type=STRING]";
@@ -270,12 +422,12 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         actualResult = sendRPCReadById(expectedPath_19_0 + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId0);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         String actualValues = rpcActualResult.get("value").asText();
-        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length()/2 + "Bytes, type=OPAQUE]";
+        String expected = "LwM2mResourceInstance [id=" + resourceInstanceId0 + ", value=" + expectedValue0.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
         actualResult = sendRPCReadById(expectedPath_19_0 + "/" + RESOURCE_ID_0 + "/" + resourceInstanceId25);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         actualValues = rpcActualResult.get("value").asText();
-        expected = "LwM2mResourceInstance [id=" + resourceInstanceId25 + ", value=" + expectedValue25.length()/2 + "Bytes, type=OPAQUE]";
+        expected = "LwM2mResourceInstance [id=" + resourceInstanceId25 + ", value=" + expectedValue25.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
     }
 
@@ -301,7 +453,7 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
         actualResult = sendRPCReadById(expectedPath19_1_0_2);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
         String actualValues = rpcActualResult.get("value").asText();
-        String expected = "LwM2mResourceInstance [id=" + RESOURCE_INSTANCE_ID_2 + ", value=" + expectedValue19_1_0_2.length()/2 + "Bytes, type=OPAQUE]";
+        String expected = "LwM2mResourceInstance [id=" + RESOURCE_INSTANCE_ID_2 + ", value=" + expectedValue19_1_0_2.length() / 2 + "Bytes, type=OPAQUE]";
         assertTrue(actualValues.contains(expected));
         actualResult = sendRPCReadByKey(expectedKey3_0_14);
         rpcActualResult = JacksonUtil.fromString(actualResult, ObjectNode.class);
@@ -346,31 +498,31 @@ public class RpcLwm2mIntegrationWriteTest extends AbstractRpcLwM2MIntegrationTes
 
     private String sendRPCWriteStringById(String method, String path, String value) throws Exception {
         String setRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"id\": \"" + path + "\", \"value\": \"" + value + "\" }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCWriteObjectById(String method, String path, Object value) throws Exception {
         String setRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"id\": \"" + path + "\", \"value\": " + value + " }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCReadById(String id) throws Exception {
         String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"id\": \"" + id + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCWriteByKey(String method, String key, String value) throws Exception {
         String setRpcRequest = "{\"method\": \"" + method + "\", \"params\": {\"key\": \"" + key + "\", \"value\": \"" + value + "\" }}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendRPCReadByKey(String key) throws Exception {
         String setRpcRequest = "{\"method\": \"Read\", \"params\": {\"key\": \"" + key + "\"}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 
     private String sendCompositeRPC(String nodes) throws Exception {
         String setRpcRequest = "{\"method\": \"WriteComposite\", \"params\": {\"nodes\":" + nodes + "}}";
-        return doPostAsync("/api/plugins/rpc/twoway/" + deviceId, setRpcRequest, String.class, status().isOk());
+        return doPostAsync("/api/plugins/rpc/twoway/" + lwM2MTestClient.getDeviceIdStr(), setRpcRequest, String.class, status().isOk());
     }
 }
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/AbstractSecurityLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/AbstractSecurityLwM2MIntegrationTest.java
index e787d26265..eaade683d8 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/AbstractSecurityLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/AbstractSecurityLwM2MIntegrationTest.java
@@ -25,6 +25,7 @@ import org.junit.Assert;
 import org.springframework.test.web.servlet.MvcResult;
 import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.common.data.Device;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.AbstractLwM2MClientSecurityCredential;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MBootstrapClientCredentials;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MClientCredential;
@@ -41,6 +42,7 @@ import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.LwM2MBo
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.PSKLwM2MBootstrapServerCredential;
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.RPKLwM2MBootstrapServerCredential;
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.X509LwM2MBootstrapServerCredential;
+import org.thingsboard.server.common.data.id.DeviceProfileId;
 import org.thingsboard.server.common.data.security.DeviceCredentials;
 import org.thingsboard.server.common.data.security.DeviceCredentialsType;
 import org.thingsboard.server.dao.service.DaoSqlTest;
@@ -203,9 +205,9 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
                                        boolean isAwaitObserveReadAll,
                                        LwM2MClientState finishState,
                                        boolean isStartLw) throws Exception {
-        createDeviceProfile(transportConfiguration);
-        final Device device = createDevice(deviceCredentials, endpoint);
-        createNewClient(security, securityBs, true, endpoint);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + endpoint, transportConfiguration);
+        final Device device = createLwm2mDevice(deviceCredentials, endpoint, deviceProfile.getId());
+        createNewClient(security, securityBs, true, endpoint, device.getId().getId().toString());
         lwM2MTestClient.start(isStartLw);
         if (isAwaitObserveReadAll) {
             awaitObserveReadAll(0, device.getId().getId().toString());
@@ -216,6 +218,8 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
                     log.warn("basicTestConnection started -> finishState: [{}] states: {}", finishState, lwM2MTestClient.getClientStates());
                     return lwM2MTestClient.getClientStates().contains(finishState) || lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_STARTED);
                 });
+
+        awaitUpdateReg(1);
         await(awaitAlias)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> {
@@ -248,10 +252,10 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
                                                             Set<LwM2MClientState> expectedStatusesLwm2m,
                                                             Set<LwM2MClientState> expectedStatusesBs) throws Exception {
 
-        createDeviceProfile(transportConfiguration);
-        final Device device = createDevice(deviceCredentials, endpoint);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + endpoint, transportConfiguration);
+        final Device device = createLwm2mDevice(deviceCredentials, endpoint, deviceProfile.getId());
         String deviceIdStr = device.getId().getId().toString();
-        createNewClient(security, securityBs, true, endpoint);
+        createNewClient(security, securityBs, true, endpoint, deviceIdStr);
         lwM2MTestClient.start(true);
         awaitObserveReadAll(0, deviceIdStr);
         await(awaitAlias)
@@ -260,6 +264,8 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
                     log.warn("basicTest First Connection started -> finishState: [{}] states: {}", ON_REGISTRATION_SUCCESS, lwM2MTestClient.getClientStates());
                     return lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_SUCCESS) || lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_STARTED);
                 });
+
+        awaitUpdateReg(1);
         await(awaitAlias)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> {
@@ -286,6 +292,8 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
                     log.warn("basicTestConnection started -> finishState: [{}] states: {}", ON_REGISTRATION_SUCCESS, lwM2MTestClient.getClientStates());
                     return lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_SUCCESS) || lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_STARTED);
                 });
+
+        awaitUpdateReg(1);
         await(awaitAlias)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> {
@@ -390,12 +398,12 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
 
 
     protected void initDeviceCredentialsNoSek() {
-        clientEndpoint = CLIENT_ENDPOINT_NO_SEC + "_" + randomSuffix.nextInt(100);
+        clientEndpoint = CLIENT_ENDPOINT_NO_SEC + "_" + randomSuffix.nextInt(1000);
         security = SECURITY_NO_SEC;
         deviceCredentials = getDeviceCredentialsNoSec(createNoSecClientCredentials(clientEndpoint));
     }
     protected void initDeviceCredentialsPsk() {
-        int suf =  randomSuffix.nextInt(10);
+        int suf =  randomSuffix.nextInt(1000);
         clientEndpoint = CLIENT_ENDPOINT_PSK + "_" + suf;
         String identity = CLIENT_PSK_IDENTITY + "_" + suf;
         clientCredentials = new PSKClientCredential();
@@ -446,10 +454,10 @@ public abstract class AbstractSecurityLwM2MIntegrationTest extends AbstractLwM2M
         return bootstrapCredentials;
     }
 
-    protected MvcResult createDeviceWithMvcResult(LwM2MDeviceCredentials credentials, String endpoint) throws Exception {
+    protected MvcResult createDeviceWithMvcResult(LwM2MDeviceCredentials credentials, String endpoint, DeviceProfileId deviceProfileId) throws Exception {
         Device device = new Device();
         device.setName(endpoint);
-        device.setDeviceProfileId(deviceProfile.getId());
+        device.setDeviceProfileId(deviceProfileId);
         device.setTenantId(tenantId);
         device = doPost("/api/device", device, Device.class);
         Assert.assertNotNull(device);
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/cid/AbstractSecurityLwM2MIntegrationDtlsCidLengthTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/cid/AbstractSecurityLwM2MIntegrationDtlsCidLengthTest.java
index 291149b7e8..5b3457fe92 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/cid/AbstractSecurityLwM2MIntegrationDtlsCidLengthTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/cid/AbstractSecurityLwM2MIntegrationDtlsCidLengthTest.java
@@ -21,6 +21,7 @@ import org.eclipse.leshan.client.californium.endpoint.CaliforniumClientEndpoint;
 import org.eclipse.leshan.client.californium.endpoint.CaliforniumClientEndpointsProvider;
 import org.junit.Assert;
 import org.thingsboard.server.common.data.Device;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.dao.service.DaoSqlTest;
 import org.thingsboard.server.transport.lwm2m.security.AbstractSecurityLwM2MIntegrationTest;
 
@@ -49,11 +50,12 @@ public abstract class AbstractSecurityLwM2MIntegrationDtlsCidLengthTest extends
 
     protected void basicTestConnectionDtlsCidLength(Integer clientDtlsCidLength,
                                                     Integer serverDtlsCidLength) throws Exception {
-        createDeviceProfile(transportConfiguration);
-        final Device device = createDevice(deviceCredentials, clientEndpoint);
-        device.getId().getId().toString();
-        createNewClient(security, null, true, clientEndpoint, clientDtlsCidLength);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
+        final Device device = createLwm2mDevice(deviceCredentials, clientEndpoint, deviceProfile.getId());
+        createNewClient(security, null, true, clientEndpoint, clientDtlsCidLength, device.getId().getId().toString());
         lwM2MTestClient.start(true);
+
+        awaitUpdateReg(1);
         await(awaitAlias)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> lwM2MTestClient.getClientStates().contains(ON_UPDATE_SUCCESS));
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/diffPort/AbstractLwM2MIntegrationDiffPortTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/diffPort/AbstractLwM2MIntegrationDiffPortTest.java
index 9e9a38925c..c9161bbf0a 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/diffPort/AbstractLwM2MIntegrationDiffPortTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/diffPort/AbstractLwM2MIntegrationDiffPortTest.java
@@ -19,21 +19,28 @@ import lombok.extern.slf4j.Slf4j;
 import org.eclipse.leshan.core.peer.IpPeer;
 import org.eclipse.leshan.core.peer.LwM2mPeer;
 import org.eclipse.leshan.core.peer.SocketIdentity;
+import org.eclipse.leshan.server.registration.Registration;
 import org.eclipse.leshan.server.registration.RegistrationStore;
 import org.eclipse.leshan.server.registration.RegistrationUpdate;
 import org.junit.Assert;
+import org.mockito.Mockito;
 import org.springframework.boot.test.mock.mockito.SpyBean;
+import org.thingsboard.server.common.data.Device;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
 import org.thingsboard.server.dao.service.DaoSqlTest;
 import org.thingsboard.server.transport.lwm2m.security.AbstractSecurityLwM2MIntegrationTest;
 
 import java.net.InetAddress;
 import java.net.InetSocketAddress;
+import java.util.Collection;
 import java.util.concurrent.TimeUnit;
 
 import static org.awaitility.Awaitility.await;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.Mockito.doAnswer;
+import static org.mockito.Mockito.timeout;
+import static org.mockito.Mockito.verify;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_REGISTRATION_STARTED;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_REGISTRATION_SUCCESS;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_UPDATE_SUCCESS;
@@ -59,20 +66,27 @@ public abstract class AbstractLwM2MIntegrationDiffPortTest extends AbstractSecur
             return invocation.callRealMethod();
         }).when(registrationStoreTest).updateRegistration(any(RegistrationUpdate.class));
 
-        createDeviceProfile(transportConfiguration);
-        createDevice(deviceCredentials, clientEndpoint);
-        createNewClient(security, null, true, clientEndpoint);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
+        final Device device = createLwm2mDevice(deviceCredentials, clientEndpoint, deviceProfile.getId());
+        createNewClient(security, null, true, clientEndpoint, device.getId().getId().toString());
         lwM2MTestClient.start(true);
+
+        verify(defaultUplinkMsgHandlerTest, timeout(50000).atLeast(1))
+                .onRegistered(Mockito.any(Registration.class), Mockito.any());
         await(awaitAlias)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_SUCCESS) || lwM2MTestClient.getClientStates().contains(ON_REGISTRATION_STARTED));
         Assert.assertTrue(lwM2MTestClient.getClientStates().containsAll(expectedStatusesRegistrationLwm2mSuccess));
 
+        awaitUpdateReg(1);
         await(awaitAlias)
                 .atMost(40, TimeUnit.SECONDS)
                 .until(() -> lwM2MTestClient.getClientStates().contains(ON_UPDATE_SUCCESS));
 
         Assert.assertTrue(lwM2MTestClient.getClientStates().containsAll(expectedStatusesRegistrationLwm2mSuccessUpdate));
+
+        long cntBefore = countUpdateReg();
+        awaitUpdateReg((int) (cntBefore + 1));
     }
 
     private RegistrationUpdate registrationUpdateNewPort (RegistrationUpdate update, int portValueChange) {
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/PskLwm2mIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/PskLwm2mIntegrationTest.java
index e5c9cbf469..ac1c0866de 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/PskLwm2mIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/PskLwm2mIntegrationTest.java
@@ -20,6 +20,7 @@ import org.eclipse.leshan.client.object.Security;
 import org.eclipse.leshan.core.util.Hex;
 import org.junit.Test;
 import org.springframework.test.web.servlet.MvcResult;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MDeviceCredentials;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.PSKClientCredential;
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
@@ -76,9 +77,9 @@ public class PskLwm2mIntegrationTest extends AbstractSecurityLwM2MIntegrationTes
         clientCredentials.setIdentity(identity);
         clientCredentials.setKey(keyPsk);
         Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(PSK, NONE));
-        createDeviceProfile(transportConfiguration);
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsSecure(clientCredentials, null, null, PSK, false);
-        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint);
+        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint, deviceProfile.getId());
         assertEquals(HttpServletResponse.SC_BAD_REQUEST, result.getResponse().getStatus());
         String msgExpected = "Key must be HexDec format: 32, 64, 128 characters!";
         assertTrue(result.getResponse().getContentAsString().contains(msgExpected));
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/RpkLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/RpkLwM2MIntegrationTest.java
index c33d4b5059..af0be89feb 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/RpkLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/RpkLwM2MIntegrationTest.java
@@ -21,6 +21,7 @@ import org.eclipse.leshan.client.object.Security;
 import org.eclipse.leshan.core.util.Hex;
 import org.junit.Test;
 import org.springframework.test.web.servlet.MvcResult;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MDeviceCredentials;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.RPKClientCredential;
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
@@ -33,6 +34,7 @@ import static org.eclipse.leshan.client.object.Security.rpk;
 import static org.eclipse.leshan.client.object.Security.rpkBootstrap;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
+import static org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MSecurityMode.PSK;
 import static org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MSecurityMode.RPK;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_REGISTRATION_SUCCESS;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MProfileBootstrapConfigType.BOTH;
@@ -75,10 +77,11 @@ public class RpkLwM2MIntegrationTest extends AbstractSecurityLwM2MIntegrationTes
         RPKClientCredential clientCredentials = new RPKClientCredential();
         clientCredentials.setEndpoint(clientEndpoint);
         clientCredentials.setKey(Hex.encodeHexString(certificate.getPublicKey().getEncoded()));
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(RPK, NONE));
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(PSK, NONE));
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
+
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsSecure(clientCredentials, privateKey, certificate, RPK, false);
-        createDeviceProfile(transportConfiguration);
-        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint);
+        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint, deviceProfile.getId());
         assertEquals(HttpServletResponse.SC_BAD_REQUEST, result.getResponse().getStatus());
         String msgExpected = "LwM2M client RPK key must be in standard [RFC7250] and support only EC algorithm and then encoded to Base64 format!";
         assertTrue(result.getResponse().getContentAsString().contains(msgExpected));
@@ -92,10 +95,10 @@ public class RpkLwM2MIntegrationTest extends AbstractSecurityLwM2MIntegrationTes
         RPKClientCredential clientCredentials = new RPKClientCredential();
         clientCredentials.setEndpoint(clientEndpoint);
         clientCredentials.setKey(Base64.encodeBase64String(certificate.getPublicKey().getEncoded()));
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(RPK, NONE));
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(PSK, NONE));
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsSecure(clientCredentials, privateKey, certificate, RPK, true);
-        createDeviceProfile(transportConfiguration);
-        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint);
+        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint, deviceProfile.getId());
         assertEquals(HttpServletResponse.SC_BAD_REQUEST, result.getResponse().getStatus());
         String msgExpected = "Bootstrap server client RPK secret key must be in PKCS#8 format (DER encoding, standard [RFC5958]) and then encoded to Base64 format!";
         assertTrue(result.getResponse().getContentAsString().contains(msgExpected));
diff --git a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/X509_NoTrustLwM2MIntegrationTest.java b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/X509_NoTrustLwM2MIntegrationTest.java
index 072dea9a6e..743c007fdb 100644
--- a/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/X509_NoTrustLwM2MIntegrationTest.java
+++ b/application/src/test/java/org/thingsboard/server/transport/lwm2m/security/sql/X509_NoTrustLwM2MIntegrationTest.java
@@ -20,6 +20,7 @@ import org.eclipse.leshan.client.object.Security;
 import org.eclipse.leshan.core.util.Hex;
 import org.junit.Test;
 import org.springframework.test.web.servlet.MvcResult;
+import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MDeviceCredentials;
 import org.thingsboard.server.common.data.device.credentials.lwm2m.X509ClientCredential;
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
@@ -33,6 +34,7 @@ import static org.eclipse.leshan.client.object.Security.x509;
 import static org.eclipse.leshan.client.object.Security.x509Bootstrap;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
+import static org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MSecurityMode.PSK;
 import static org.thingsboard.server.common.data.device.credentials.lwm2m.LwM2MSecurityMode.X509;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MClientState.ON_REGISTRATION_SUCCESS;
 import static org.thingsboard.server.transport.lwm2m.Lwm2mTestHelper.LwM2MProfileBootstrapConfigType.BOTH;
@@ -76,10 +78,10 @@ public class X509_NoTrustLwM2MIntegrationTest extends AbstractSecurityLwM2MInteg
         X509ClientCredential clientCredentials = new X509ClientCredential();
         clientCredentials.setEndpoint(clientEndpoint);
         clientCredentials.setCert(Hex.encodeHexString(certificate.getEncoded()));
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(X509, NONE));
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsSecure(clientCredentials, privateKey, certificate, X509, false);
-        createDeviceProfile(transportConfiguration);
-        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint);
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(PSK, NONE));
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
+        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint, deviceProfile.getId());
         assertEquals(HttpServletResponse.SC_BAD_REQUEST, result.getResponse().getStatus());
         String msgExpected = "LwM2M client X509 certificate must be in DER-encoded X509v3 format and support only EC algorithm and then encoded to Base64 format!";
         assertTrue(result.getResponse().getContentAsString().contains(msgExpected));
@@ -93,10 +95,10 @@ public class X509_NoTrustLwM2MIntegrationTest extends AbstractSecurityLwM2MInteg
         X509ClientCredential clientCredentials = new X509ClientCredential();
         clientCredentials.setEndpoint(clientEndpoint);
         clientCredentials.setCert(Base64.getEncoder().encodeToString(certificate.getEncoded()));
-        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(X509, NONE));
         LwM2MDeviceCredentials deviceCredentials = getDeviceCredentialsSecure(clientCredentials, privateKey, certificate, X509, true);
-        createDeviceProfile(transportConfiguration);
-        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint);
+        Lwm2mDeviceProfileTransportConfiguration transportConfiguration = getTransportConfiguration(OBSERVE_ATTRIBUTES_WITHOUT_PARAMS, getBootstrapServerCredentialsSecure(PSK, NONE));
+        DeviceProfile deviceProfile = createLwm2mDeviceProfile("profileFor" + clientEndpoint, transportConfiguration);
+        MvcResult result = createDeviceWithMvcResult(deviceCredentials, clientEndpoint, deviceProfile.getId());
         assertEquals(HttpServletResponse.SC_BAD_REQUEST, result.getResponse().getStatus());
         String msgExpected = "Bootstrap server client X509 secret key must be in PKCS#8 format (DER encoding, standard [RFC5958]) and then encoded to Base64 format!";
         assertTrue(result.getResponse().getContentAsString().contains(msgExpected));
diff --git a/application/src/test/resources/application-test.properties b/application/src/test/resources/application-test.properties
index 92959e4552..9951caa876 100644
--- a/application/src/test/resources/application-test.properties
+++ b/application/src/test/resources/application-test.properties
@@ -54,3 +54,5 @@ sql.edge_events.partition_size=168
 sql.ttl.edge_events.edge_event_ttl=2592000
 
 server.log_controller_error_stack_trace=false
+
+transport.gateway.dashboard.sync.enabled=false
diff --git a/common/actor/pom.xml b/common/actor/pom.xml
index 350ff373c1..cc19cc949f 100644
--- a/common/actor/pom.xml
+++ b/common/actor/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/cache/pom.xml b/common/cache/pom.xml
index 949b2c2475..1ecb95c6c5 100644
--- a/common/cache/pom.xml
+++ b/common/cache/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/cluster-api/pom.xml b/common/cluster-api/pom.xml
index a8a04f7cbd..bd7dc214cf 100644
--- a/common/cluster-api/pom.xml
+++ b/common/cluster-api/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/coap-server/pom.xml b/common/coap-server/pom.xml
index b563792c7a..401d1e94fd 100644
--- a/common/coap-server/pom.xml
+++ b/common/coap-server/pom.xml
@@ -22,7 +22,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/dao-api/pom.xml b/common/dao-api/pom.xml
index f387c341d4..62c1e420c2 100644
--- a/common/dao-api/pom.xml
+++ b/common/dao-api/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/dashboard/DashboardService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/dashboard/DashboardService.java
index d85cd753dc..c823add6e2 100644
--- a/common/dao-api/src/main/java/org/thingsboard/server/dao/dashboard/DashboardService.java
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/dashboard/DashboardService.java
@@ -76,4 +76,6 @@ public interface DashboardService extends EntityDaoService {
 
     List<Dashboard> findTenantDashboardsByTitle(TenantId tenantId, String title);
 
+    boolean existsById(TenantId tenantId, DashboardId dashboardId);
+
 }
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ResourceService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ResourceService.java
index b1df83e3d8..d6da107c60 100644
--- a/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ResourceService.java
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/resource/ResourceService.java
@@ -38,6 +38,8 @@ public interface ResourceService extends EntityDaoService {
 
     TbResource findResourceById(TenantId tenantId, TbResourceId resourceId);
 
+    byte[] getResourceData(TenantId tenantId, TbResourceId resourceId);
+
     TbResourceInfo findResourceInfoById(TenantId tenantId, TbResourceId resourceId);
 
     TbResourceInfo findResourceInfoByTenantIdAndKey(TenantId tenantId, ResourceType resourceType, String resourceKey);
@@ -62,4 +64,8 @@ public interface ResourceService extends EntityDaoService {
 
     long sumDataSizeByTenantId(TenantId tenantId);
 
+    TbResource createOrUpdateSystemResource(ResourceType resourceType, String resourceKey, String data);
+
+    String checkSystemResourcesUsage(String content, ResourceType... usedResourceTypes);
+
 }
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/user/UserService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/user/UserService.java
index 8f22812cfc..586ae50f5d 100644
--- a/common/dao-api/src/main/java/org/thingsboard/server/dao/user/UserService.java
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/user/UserService.java
@@ -97,7 +97,7 @@ public interface UserService extends EntityDaoService {
 
     int increaseFailedLoginAttempts(TenantId tenantId, UserId userId);
 
-    void setLastLoginTs(TenantId tenantId, UserId userId);
+    void updateLastLoginTs(TenantId tenantId, UserId userId);
 
     void saveMobileSession(TenantId tenantId, UserId userId, String mobileToken, MobileSessionInfo sessionInfo);
 
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeService.java
index 39a5210849..34b27a7504 100644
--- a/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeService.java
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeService.java
@@ -65,4 +65,6 @@ public interface WidgetTypeService extends EntityDaoService {
 
     void deleteWidgetTypesByTenantId(TenantId tenantId);
 
+    void deleteWidgetTypesByBundleId(TenantId tenantId, WidgetsBundleId bundleId);
+
 }
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleService.java
index 9dbc0149a9..065a2a312b 100644
--- a/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleService.java
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleService.java
@@ -24,6 +24,7 @@ import org.thingsboard.server.common.data.widget.WidgetsBundleFilter;
 import org.thingsboard.server.dao.entity.EntityDaoService;
 
 import java.util.List;
+import java.util.stream.Stream;
 
 public interface WidgetsBundleService extends EntityDaoService {
 
@@ -49,4 +50,6 @@ public interface WidgetsBundleService extends EntityDaoService {
 
     void deleteWidgetsBundlesByTenantId(TenantId tenantId);
 
+    void updateSystemWidgets(Stream<String> bundles, Stream<String> widgets);
+
 }
diff --git a/common/data/pom.xml b/common/data/pom.xml
index 82230db5db..b206f0b173 100644
--- a/common/data/pom.xml
+++ b/common/data/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceType.java b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceType.java
index 32e354ec2c..f448440c5a 100644
--- a/common/data/src/main/java/org/thingsboard/server/common/data/ResourceType.java
+++ b/common/data/src/main/java/org/thingsboard/server/common/data/ResourceType.java
@@ -24,7 +24,8 @@ public enum ResourceType {
     JKS("application/x-java-keystore", false, false),
     PKCS_12("application/x-pkcs12", false, false),
     JS_MODULE("application/javascript", true, true),
-    IMAGE(null, true, true);
+    IMAGE(null, true, true),
+    DASHBOARD("application/json", true, true);
 
     @Getter
     private final String mediaType;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.scss b/common/data/src/main/java/org/thingsboard/server/common/data/notification/info/GeneralNotificationInfo.java
similarity index 59%
rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.scss
rename to common/data/src/main/java/org/thingsboard/server/common/data/notification/info/GeneralNotificationInfo.java
index 770f17cac6..0fd1a8f014 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.scss
+++ b/common/data/src/main/java/org/thingsboard/server/common/data/notification/info/GeneralNotificationInfo.java
@@ -13,37 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+package org.thingsboard.server.common.data.notification.info;
 
-:host {
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
 
-  .title-container {
-    max-width: 11vw;
-  }
+import java.util.Map;
 
-  .key-panel {
-    height: 250px;
-    overflow: auto;
-  }
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class GeneralNotificationInfo implements RuleOriginatedNotificationInfo {
 
-  .tb-form-panel {
-    .mat-mdc-icon-button {
-      width: 56px;
-      height: 56px;
-      padding: 16px;
-      color: rgba(0, 0, 0, 0.54);
-    }
-  }
+    private Map<String, String> data;
 
-  .see-example {
-    width: 32px;
-    height: 32px;
-    margin: 4px;
-  }
-}
+    @Override
+    public Map<String, String> getTemplateData() {
+        return data;
+    }
 
-:host ::ng-deep {
-  .mat-mdc-form-field-icon-suffix {
-    display: flex;
-  }
 }
-
diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/security/UserCredentials.java b/common/data/src/main/java/org/thingsboard/server/common/data/security/UserCredentials.java
index 1104ae2949..4a882795db 100644
--- a/common/data/src/main/java/org/thingsboard/server/common/data/security/UserCredentials.java
+++ b/common/data/src/main/java/org/thingsboard/server/common/data/security/UserCredentials.java
@@ -40,6 +40,8 @@ public class UserCredentials extends BaseDataWithAdditionalInfo<UserCredentialsI
     private Long activateTokenExpTime;
     private String resetToken;
     private Long resetTokenExpTime;
+    private Long lastLoginTs;
+    private Integer failedLoginAttempts;
 
     public UserCredentials() {
         super();
diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/util/ThrowingSupplier.java b/common/data/src/main/java/org/thingsboard/server/common/data/util/ThrowingSupplier.java
index 6353d73c17..0561869730 100644
--- a/common/data/src/main/java/org/thingsboard/server/common/data/util/ThrowingSupplier.java
+++ b/common/data/src/main/java/org/thingsboard/server/common/data/util/ThrowingSupplier.java
@@ -15,9 +15,11 @@
  */
 package org.thingsboard.server.common.data.util;
 
+import org.thingsboard.server.common.data.exception.ThingsboardException;
+
 @FunctionalInterface
 public interface ThrowingSupplier<T> {
 
-    T get() throws Exception;
+    T get() throws ThingsboardException;
 
 }
diff --git a/common/edge-api/pom.xml b/common/edge-api/pom.xml
index b8bfacad99..31d90de948 100644
--- a/common/edge-api/pom.xml
+++ b/common/edge-api/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/edge-api/src/main/java/org/thingsboard/edge/rpc/EdgeGrpcClient.java b/common/edge-api/src/main/java/org/thingsboard/edge/rpc/EdgeGrpcClient.java
index bfc95ea37c..1d3b157ec2 100644
--- a/common/edge-api/src/main/java/org/thingsboard/edge/rpc/EdgeGrpcClient.java
+++ b/common/edge-api/src/main/java/org/thingsboard/edge/rpc/EdgeGrpcClient.java
@@ -136,7 +136,7 @@ public class EdgeGrpcClient implements EdgeRpcClient {
                 .setConnectRequestMsg(ConnectRequestMsg.newBuilder()
                         .setEdgeRoutingKey(edgeKey)
                         .setEdgeSecret(edgeSecret)
-                        .setEdgeVersion(EdgeVersion.V_3_7_1)
+                        .setEdgeVersion(EdgeVersion.V_3_8_0)
                         .setMaxInboundMessageSize(maxInboundMessageSize)
                         .build())
                 .build());
diff --git a/common/edge-api/src/main/proto/edge.proto b/common/edge-api/src/main/proto/edge.proto
index 43ce1a222c..5fb51de2ab 100644
--- a/common/edge-api/src/main/proto/edge.proto
+++ b/common/edge-api/src/main/proto/edge.proto
@@ -39,7 +39,7 @@ enum EdgeVersion {
   V_3_6_2 = 5;
   V_3_6_4 = 6;
   V_3_7_0 = 7;
-  V_3_7_1 = 8;
+  V_3_8_0 = 8;
 }
 
 /**
diff --git a/common/message/pom.xml b/common/message/pom.xml
index 5a37027e5c..ac56095e7e 100644
--- a/common/message/pom.xml
+++ b/common/message/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/pom.xml b/common/pom.xml
index ce7164cdbd..c905e0eee9 100644
--- a/common/pom.xml
+++ b/common/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>common</artifactId>
diff --git a/common/proto/pom.xml b/common/proto/pom.xml
index 2c51dc0892..4409d6b97f 100644
--- a/common/proto/pom.xml
+++ b/common/proto/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/queue/pom.xml b/common/queue/pom.xml
index 240df65bcc..7485294f6e 100644
--- a/common/queue/pom.xml
+++ b/common/queue/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/queue/src/main/java/org/thingsboard/server/queue/azure/servicebus/TbServiceBusAdmin.java b/common/queue/src/main/java/org/thingsboard/server/queue/azure/servicebus/TbServiceBusAdmin.java
index 07561e7452..3f920778e6 100644
--- a/common/queue/src/main/java/org/thingsboard/server/queue/azure/servicebus/TbServiceBusAdmin.java
+++ b/common/queue/src/main/java/org/thingsboard/server/queue/azure/servicebus/TbServiceBusAdmin.java
@@ -31,6 +31,7 @@ import java.util.Set;
 import java.util.concurrent.ConcurrentHashMap;
 
 @Slf4j
+@Deprecated(forRemoval = true, since = "3.9") // for removal in 4.0
 public class TbServiceBusAdmin implements TbQueueAdmin {
     private final String MAX_SIZE = "maxSizeInMb";
     private final String MESSAGE_TIME_TO_LIVE = "messageTimeToLiveInSec";
diff --git a/common/queue/src/main/java/org/thingsboard/server/queue/pubsub/TbPubSubAdmin.java b/common/queue/src/main/java/org/thingsboard/server/queue/pubsub/TbPubSubAdmin.java
index 8d4b5abde0..bbae199c4a 100644
--- a/common/queue/src/main/java/org/thingsboard/server/queue/pubsub/TbPubSubAdmin.java
+++ b/common/queue/src/main/java/org/thingsboard/server/queue/pubsub/TbPubSubAdmin.java
@@ -37,6 +37,7 @@ import java.util.Set;
 import java.util.concurrent.ConcurrentHashMap;
 
 @Slf4j
+@Deprecated(forRemoval = true, since = "3.9") // for removal in 4.0
 public class TbPubSubAdmin implements TbQueueAdmin {
     private static final String ACK_DEADLINE = "ackDeadlineInSec";
     private static final String MESSAGE_RETENTION = "messageRetentionInSec";
diff --git a/common/queue/src/main/java/org/thingsboard/server/queue/rabbitmq/TbRabbitMqAdmin.java b/common/queue/src/main/java/org/thingsboard/server/queue/rabbitmq/TbRabbitMqAdmin.java
index 2d0cd5b414..aad3c1c8cc 100644
--- a/common/queue/src/main/java/org/thingsboard/server/queue/rabbitmq/TbRabbitMqAdmin.java
+++ b/common/queue/src/main/java/org/thingsboard/server/queue/rabbitmq/TbRabbitMqAdmin.java
@@ -27,6 +27,7 @@ import java.util.Map;
 import java.util.concurrent.TimeoutException;
 
 @Slf4j
+@Deprecated(forRemoval = true, since = "3.9") // for removal in 4.0
 public class TbRabbitMqAdmin implements TbQueueAdmin {
 
     private final Channel channel;
diff --git a/common/queue/src/main/java/org/thingsboard/server/queue/sqs/TbAwsSqsAdmin.java b/common/queue/src/main/java/org/thingsboard/server/queue/sqs/TbAwsSqsAdmin.java
index 92def925d7..6aa1ec4dad 100644
--- a/common/queue/src/main/java/org/thingsboard/server/queue/sqs/TbAwsSqsAdmin.java
+++ b/common/queue/src/main/java/org/thingsboard/server/queue/sqs/TbAwsSqsAdmin.java
@@ -36,6 +36,7 @@ import java.util.function.Function;
 import java.util.stream.Collectors;
 
 @Slf4j
+@Deprecated(forRemoval = true, since = "3.9") // for removal in 4.0
 public class TbAwsSqsAdmin implements TbQueueAdmin {
 
     private final Map<String, String> attributes;
diff --git a/common/script/pom.xml b/common/script/pom.xml
index 388aafaa64..88e35e8429 100644
--- a/common/script/pom.xml
+++ b/common/script/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/script/remote-js-client/pom.xml b/common/script/remote-js-client/pom.xml
index 090224e761..7309e6af51 100644
--- a/common/script/remote-js-client/pom.xml
+++ b/common/script/remote-js-client/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>script</artifactId>
     </parent>
     <groupId>org.thingsboard.common.script</groupId>
diff --git a/common/script/script-api/pom.xml b/common/script/script-api/pom.xml
index e083cafe51..08ef60713e 100644
--- a/common/script/script-api/pom.xml
+++ b/common/script/script-api/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>script</artifactId>
     </parent>
     <groupId>org.thingsboard.common.script</groupId>
diff --git a/common/script/script-api/src/main/java/org/thingsboard/script/api/tbel/TbUtils.java b/common/script/script-api/src/main/java/org/thingsboard/script/api/tbel/TbUtils.java
index 7f7b1f699f..6b321a3570 100644
--- a/common/script/script-api/src/main/java/org/thingsboard/script/api/tbel/TbUtils.java
+++ b/common/script/script-api/src/main/java/org/thingsboard/script/api/tbel/TbUtils.java
@@ -1255,7 +1255,7 @@ public class TbUtils {
         if (str == null || str.isEmpty()) {
             return -1;
         }
-        return str.matches("-?\\d+(\\.\\d+)?") ? DEC_RADIX : -1;
+        return str.matches("[+-]?\\d+(\\.\\d+)?") ? DEC_RADIX : -1;
     }
 
     public static int isHexadecimal(String str) {
diff --git a/common/script/script-api/src/test/java/org/thingsboard/script/api/tbel/TbUtilsTest.java b/common/script/script-api/src/test/java/org/thingsboard/script/api/tbel/TbUtilsTest.java
index b7276edd8d..1c5a1a2e1a 100644
--- a/common/script/script-api/src/test/java/org/thingsboard/script/api/tbel/TbUtilsTest.java
+++ b/common/script/script-api/src/test/java/org/thingsboard/script/api/tbel/TbUtilsTest.java
@@ -213,6 +213,7 @@ public class TbUtilsTest {
 
         Assertions.assertEquals((Integer) 0, TbUtils.parseInt("0"));
         Assertions.assertEquals((Integer) 0, TbUtils.parseInt("-0"));
+        Assertions.assertEquals((Integer) 0, TbUtils.parseInt("+0"));
         Assertions.assertEquals(java.util.Optional.of(473).get(), TbUtils.parseInt("473"));
         Assertions.assertEquals(java.util.Optional.of(-255).get(), TbUtils.parseInt("-0xFF"));
         Assertions.assertThrows(NumberFormatException.class, () -> TbUtils.parseInt("-0xFF123"));
diff --git a/common/stats/pom.xml b/common/stats/pom.xml
index d4c598d2af..31fbc72dcc 100644
--- a/common/stats/pom.xml
+++ b/common/stats/pom.xml
@@ -22,7 +22,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/transport/coap/pom.xml b/common/transport/coap/pom.xml
index 2652c9148a..d4528944e0 100644
--- a/common/transport/coap/pom.xml
+++ b/common/transport/coap/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.common.transport</groupId>
diff --git a/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResource.java b/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResource.java
index 1ba7c9aff1..1755335118 100644
--- a/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResource.java
+++ b/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResource.java
@@ -46,6 +46,7 @@ import org.thingsboard.server.transport.coap.CoapTransportContext;
 import org.thingsboard.server.transport.coap.callback.CoapDeviceAuthCallback;
 import org.thingsboard.server.transport.coap.callback.CoapEfentoCallback;
 import org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils;
+import org.thingsboard.server.transport.coap.efento.utils.PulseCounterType;
 
 import java.nio.ByteBuffer;
 import java.text.SimpleDateFormat;
@@ -62,8 +63,25 @@ import static org.thingsboard.server.transport.coap.CoapTransportService.CONFIGU
 import static org.thingsboard.server.transport.coap.CoapTransportService.CURRENT_TIMESTAMP;
 import static org.thingsboard.server.transport.coap.CoapTransportService.DEVICE_INFO;
 import static org.thingsboard.server.transport.coap.CoapTransportService.MEASUREMENTS;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.BREATH_VOC_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.CO2_EQUIVALENT_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.CO2_GAS_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.ELEC_METER_ACC_MAJOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.ELEC_METER_ACC_MINOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.IAQ_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.PULSE_CNT_ACC_MAJOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.PULSE_CNT_ACC_MINOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.PULSE_CNT_ACC_WIDE_MAJOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.PULSE_CNT_ACC_WIDE_MINOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.STATIC_IAQ_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.WATER_METER_ACC_MAJOR_METADATA_FACTOR;
+import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.WATER_METER_ACC_MINOR_METADATA_FACTOR;
 import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.isBinarySensor;
 import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.isSensorError;
+import static org.thingsboard.server.transport.coap.efento.utils.PulseCounterType.ELEC_METER_ACC;
+import static org.thingsboard.server.transport.coap.efento.utils.PulseCounterType.PULSE_CNT_ACC;
+import static org.thingsboard.server.transport.coap.efento.utils.PulseCounterType.PULSE_CNT_ACC_WIDE;
+import static org.thingsboard.server.transport.coap.efento.utils.PulseCounterType.WATER_CNT_ACC;
 
 @Slf4j
 public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
@@ -84,6 +102,7 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
         List<String> uriPath = request.getOptions().getUriPath();
         boolean validPath = uriPath.size() == CHILD_RESOURCE_POSITION && uriPath.get(1).equals(CURRENT_TIMESTAMP);
         if (!validPath) {
+            log.trace("Invalid path: [{}]", uriPath);
             exchange.respond(CoAP.ResponseCode.BAD_REQUEST);
         } else {
             int dateInSec = (int) (System.currentTimeMillis() / 1000);
@@ -98,6 +117,7 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
         Request request = advanced.getRequest();
         List<String> uriPath = request.getOptions().getUriPath();
         if (uriPath.size() != CHILD_RESOURCE_POSITION) {
+            log.trace("Unexpected uri path size, uri path: [{}]", uriPath);
             exchange.respond(CoAP.ResponseCode.BAD_REQUEST);
             return;
         }
@@ -113,6 +133,7 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
                 processConfigurationRequest(exchange);
                 break;
             default:
+                log.trace("Unexpected request type: [{}]", requestType);
                 exchange.respond(CoAP.ResponseCode.BAD_REQUEST);
                 break;
         }
@@ -179,6 +200,7 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
                     log.error("[{}] Failed to decode Efento ProtoConfig: ", sessionId, e);
                     exchange.respond(CoAP.ResponseCode.BAD_REQUEST);
                 } catch (InvalidProtocolBufferException e) {
+                    log.error("[{}] Error while processing efento message: ", sessionId, e);
                     throw new RuntimeException(e);
                 }
             });
@@ -312,7 +334,7 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
                 values.addProperty("pulse_cnt_" + channelNumber, (double) (startPoint + sampleOffset));
                 break;
             case MEASUREMENT_TYPE_IAQ:
-                values.addProperty("iaq_" + channelNumber, (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, "iaq_", channelNumber, startPoint + sampleOffset, IAQ_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_ELECTRICITY_METER:
                 values.addProperty("watt_hour_" + channelNumber, (double) (startPoint + sampleOffset));
@@ -330,22 +352,25 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
                 values.addProperty("distance_mm_" + channelNumber, (double) (startPoint + sampleOffset));
                 break;
             case MEASUREMENT_TYPE_WATER_METER_ACC_MINOR:
-                values.addProperty("acc_counter_water_minor_" + channelNumber, (double) (startPoint + sampleOffset));
+                calculateAccPulseCounterTotalValue(values, WATER_CNT_ACC , channelNumber, startPoint + sampleOffset, WATER_METER_ACC_MINOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_WATER_METER_ACC_MAJOR:
-                values.addProperty("acc_counter_water_major_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, WATER_CNT_ACC.getPrefix(), channelNumber, startPoint + sampleOffset, WATER_METER_ACC_MAJOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_HUMIDITY_ACCURATE:
                 values.addProperty("humidity_relative_" + channelNumber, (double) (startPoint + sampleOffset) / 10f);
                 break;
             case MEASUREMENT_TYPE_STATIC_IAQ:
-                values.addProperty("static_iaq_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, "static_iaq_", channelNumber, startPoint + sampleOffset, STATIC_IAQ_METADATA_FACTOR);
+                break;
+            case MEASUREMENT_TYPE_CO2_GAS:
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, "co2_gas_", channelNumber, startPoint + sampleOffset, CO2_GAS_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_CO2_EQUIVALENT:
-                values.addProperty("co2_ppm_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, "co2_", channelNumber, startPoint + sampleOffset, CO2_EQUIVALENT_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_BREATH_VOC:
-                values.addProperty("breath_voc_ppm_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, "breath_voc_", channelNumber, startPoint + sampleOffset, BREATH_VOC_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_PERCENTAGE:
                 values.addProperty("percentage_" + channelNumber, (double) (startPoint + sampleOffset) / 100f);
@@ -357,25 +382,25 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
                 values.addProperty("current_" + channelNumber, (double) (startPoint + sampleOffset) / 100f);
                 break;
             case MEASUREMENT_TYPE_PULSE_CNT_ACC_MINOR:
-                values.addProperty("pulse_cnt_minor_" + channelNumber, (double) (startPoint + sampleOffset));
+                calculateAccPulseCounterTotalValue(values, PULSE_CNT_ACC , channelNumber, startPoint + sampleOffset, PULSE_CNT_ACC_MINOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_PULSE_CNT_ACC_MAJOR:
-                values.addProperty("pulse_cnt_major_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, PULSE_CNT_ACC.getPrefix(), channelNumber, startPoint + sampleOffset, PULSE_CNT_ACC_MAJOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_ELEC_METER_ACC_MINOR:
-                values.addProperty("elec_meter_minor_" + channelNumber, (double) (startPoint + sampleOffset));
+                calculateAccPulseCounterTotalValue(values, ELEC_METER_ACC , channelNumber, startPoint + sampleOffset, ELEC_METER_ACC_MINOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_ELEC_METER_ACC_MAJOR:
-                values.addProperty("elec_meter_major_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, ELEC_METER_ACC.getPrefix(), channelNumber, startPoint + sampleOffset, ELEC_METER_ACC_MAJOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_PULSE_CNT_ACC_WIDE_MINOR:
-                values.addProperty("pulse_cnt_wide_minor_" + channelNumber, (double) (startPoint + sampleOffset));
+                calculateAccPulseCounterTotalValue(values, PULSE_CNT_ACC_WIDE , channelNumber, startPoint + sampleOffset, PULSE_CNT_ACC_WIDE_MINOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_PULSE_CNT_ACC_WIDE_MAJOR:
-                values.addProperty("pulse_cnt_wide_major_" + channelNumber, (double) (startPoint + sampleOffset));
+                addPropertiesForMeasurementTypeWithMetadataFactor(values, PULSE_CNT_ACC_WIDE.getPrefix(), channelNumber, startPoint + sampleOffset, PULSE_CNT_ACC_WIDE_MAJOR_METADATA_FACTOR);
                 break;
             case MEASUREMENT_TYPE_CURRENT_PRECISE:
-                values.addProperty("current_precise_" + channelNumber, (double) (startPoint + sampleOffset)/1000f);
+                values.addProperty("current_precise_" + channelNumber, (double) (startPoint + sampleOffset) / 1000f);
                 break;
             case MEASUREMENT_TYPE_NO_SENSOR:
             case UNRECOGNIZED:
@@ -387,6 +412,23 @@ public class CoapEfentoTransportResource extends AbstractCoapTransportResource {
         }
     }
 
+    private void addPropertiesForMeasurementTypeWithMetadataFactor(JsonObject values, String prefix, int channelNumber, int value, int metadataFactor) {
+        values.addProperty(prefix + channelNumber, value / metadataFactor);
+        values.addProperty(prefix + "metadata_" + channelNumber, value % metadataFactor);
+    }
+
+    private void calculateAccPulseCounterTotalValue(JsonObject values, PulseCounterType pulseCounterType, int channelNumber, int value, int metadataFactor) {
+        int minorValue = value / metadataFactor;
+        int majorChannel = value % metadataFactor + 1;
+        String majorPropertyKey = pulseCounterType.getPrefix() + majorChannel;
+        JsonElement majorProperty = values.get(majorPropertyKey);
+        if (majorProperty != null) {
+            int totalValue = majorProperty.getAsInt() * pulseCounterType.getMajorResolution() + minorValue;
+            values.addProperty(pulseCounterType.getPrefix() + "total_" + channelNumber, totalValue);
+            values.remove(majorPropertyKey);
+        }
+    }
+
     private void addBinarySample(ProtoChannel protoChannel, boolean valueIsOk, JsonObject values, int channel, UUID sessionId) {
         switch (protoChannel.getType()) {
             case MEASUREMENT_TYPE_OK_ALARM:
diff --git a/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/CoapEfentoUtils.java b/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/CoapEfentoUtils.java
index 96c1805be3..6e3e81dc94 100644
--- a/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/CoapEfentoUtils.java
+++ b/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/CoapEfentoUtils.java
@@ -28,6 +28,21 @@ import static org.thingsboard.server.gen.transport.coap.MeasurementTypeProtos.Me
 
 public class CoapEfentoUtils {
 
+    public static final int PULSE_CNT_ACC_MINOR_METADATA_FACTOR = 6;
+    public static final int PULSE_CNT_ACC_MAJOR_METADATA_FACTOR = 4;
+    public static final int ELEC_METER_ACC_MINOR_METADATA_FACTOR = 6;
+    public static final int ELEC_METER_ACC_MAJOR_METADATA_FACTOR = 4;
+    public static final int PULSE_CNT_ACC_WIDE_MINOR_METADATA_FACTOR = 6;
+    public static final int PULSE_CNT_ACC_WIDE_MAJOR_METADATA_FACTOR = 4;
+    public static final int WATER_METER_ACC_MINOR_METADATA_FACTOR = 6;
+    public static final int WATER_METER_ACC_MAJOR_METADATA_FACTOR = 4;
+    public static final int IAQ_METADATA_FACTOR = 3;
+    public static final int STATIC_IAQ_METADATA_FACTOR = 3;
+    public static final int CO2_GAS_METADATA_FACTOR = 3;
+    public static final int CO2_EQUIVALENT_METADATA_FACTOR = 3;
+    public static final int BREATH_VOC_METADATA_FACTOR = 3;
+
+
     public static String convertByteArrayToString(byte[] a) {
         StringBuilder out = new StringBuilder();
         for (byte b : a) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.scss b/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/PulseCounterType.java
similarity index 51%
rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.scss
rename to common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/PulseCounterType.java
index d242fd4e71..757e1c12a8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.scss
+++ b/common/transport/coap/src/main/java/org/thingsboard/server/transport/coap/efento/utils/PulseCounterType.java
@@ -13,33 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+package org.thingsboard.server.transport.coap.efento.utils;
 
-:host {
-  .tb-modbus-keys-panel {
-    width: 77vw;
-    max-width: 700px;
+public enum PulseCounterType {
 
-    .title-container {
-      width: 180px;
-    }
+    WATER_CNT_ACC("water_cnt_acc_", 100),
+    PULSE_CNT_ACC("pulse_cnt_acc_", 1000),
+    ELEC_METER_ACC("elec_meter_acc_", 1000),
+    PULSE_CNT_ACC_WIDE("pulse_cnt_acc_wide_", 1000000);
+
+    private final String prefix;
+    private final int majorResolution;
 
-    .key-label {
-      font-weight: 400;
+    PulseCounterType(String prefix, int majorResolution) {
+        this.prefix = prefix;
+        this.majorResolution = majorResolution;
     }
 
-    .key-panel {
-      height: 500px;
-      overflow: auto;
+    public String getPrefix() {
+        return prefix;
     }
 
-    .tb-form-panel {
-      .mat-mdc-icon-button {
-        width: 56px;
-        height: 56px;
-        padding: 16px;
-        color: rgba(0, 0, 0, 0.54);
-      }
+    public int getMajorResolution() {
+        return majorResolution;
     }
-  }
 }
-
diff --git a/common/transport/coap/src/test/java/org/thingsboard/server/transport/coap/efento/CoapEfentTransportResourceTest.java b/common/transport/coap/src/test/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResourceTest.java
similarity index 87%
rename from common/transport/coap/src/test/java/org/thingsboard/server/transport/coap/efento/CoapEfentTransportResourceTest.java
rename to common/transport/coap/src/test/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResourceTest.java
index 1b6327d62d..602e7fffc7 100644
--- a/common/transport/coap/src/test/java/org/thingsboard/server/transport/coap/efento/CoapEfentTransportResourceTest.java
+++ b/common/transport/coap/src/test/java/org/thingsboard/server/transport/coap/efento/CoapEfentoTransportResourceTest.java
@@ -29,6 +29,7 @@ import org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils;
 
 import java.nio.ByteBuffer;
 import java.time.Instant;
+import java.util.Arrays;
 import java.util.List;
 import java.util.UUID;
 import java.util.concurrent.TimeUnit;
@@ -70,7 +71,7 @@ import static org.thingsboard.server.gen.transport.coap.MeasurementTypeProtos.Me
 import static org.thingsboard.server.gen.transport.coap.MeasurementTypeProtos.MeasurementType.MEASUREMENT_TYPE_WATER_METER_ACC_MINOR;
 import static org.thingsboard.server.transport.coap.efento.utils.CoapEfentoUtils.convertTimestampToUtcString;
 
-class CoapEfentTransportResourceTest {
+class CoapEfentoTransportResourceTest {
 
     private static CoapEfentoTransportResource coapEfentoTransportResource;
 
@@ -152,31 +153,69 @@ class CoapEfentTransportResourceTest {
                 Arguments.of(MEASUREMENT_TYPE_ATMOSPHERIC_PRESSURE, List.of(1013), "pressure_1", 101.3),
                 Arguments.of(MEASUREMENT_TYPE_DIFFERENTIAL_PRESSURE, List.of(500), "pressure_diff_1", 500),
                 Arguments.of(MEASUREMENT_TYPE_PULSE_CNT, List.of(300), "pulse_cnt_1", 300),
-                Arguments.of(MEASUREMENT_TYPE_IAQ, List.of(150), "iaq_1", 150),
+                Arguments.of(MEASUREMENT_TYPE_IAQ, List.of(150), "iaq_1", 50.0),
                 Arguments.of(MEASUREMENT_TYPE_ELECTRICITY_METER, List.of(1200), "watt_hour_1", 1200),
                 Arguments.of(MEASUREMENT_TYPE_SOIL_MOISTURE, List.of(35), "soil_moisture_1", 35),
                 Arguments.of(MEASUREMENT_TYPE_AMBIENT_LIGHT, List.of(500), "ambient_light_1", 50),
                 Arguments.of(MEASUREMENT_TYPE_HIGH_PRESSURE, List.of(200000), "high_pressure_1", 200000),
                 Arguments.of(MEASUREMENT_TYPE_DISTANCE_MM, List.of(1500), "distance_mm_1", 1500),
-                Arguments.of(MEASUREMENT_TYPE_WATER_METER_ACC_MINOR, List.of(125), "acc_counter_water_minor_1", 125),
-                Arguments.of(MEASUREMENT_TYPE_WATER_METER_ACC_MAJOR, List.of(2500), "acc_counter_water_major_1", 2500),
                 Arguments.of(MEASUREMENT_TYPE_HUMIDITY_ACCURATE, List.of(525), "humidity_relative_1", 52.5),
-                Arguments.of(MEASUREMENT_TYPE_STATIC_IAQ, List.of(110), "static_iaq_1", 110),
-                Arguments.of(MEASUREMENT_TYPE_CO2_EQUIVALENT, List.of(450), "co2_ppm_1", 450),
-                Arguments.of(MEASUREMENT_TYPE_BREATH_VOC, List.of(220), "breath_voc_ppm_1", 220),
-                Arguments.of(MEASUREMENT_TYPE_PERCENTAGE, List.of(80), "percentage_1", 0.80),
-                Arguments.of(MEASUREMENT_TYPE_VOLTAGE, List.of(2400), "voltage_1", 240),
+                Arguments.of(MEASUREMENT_TYPE_STATIC_IAQ, List.of(110), "static_iaq_1", 36),
+                Arguments.of(MEASUREMENT_TYPE_CO2_EQUIVALENT, List.of(450), "co2_1", 150),
+                Arguments.of(MEASUREMENT_TYPE_BREATH_VOC, List.of(220), "breath_voc_1", 73),
+                Arguments.of(MEASUREMENT_TYPE_PERCENTAGE, List.of(80), "percentage_1", 0.8),
+                Arguments.of(MEASUREMENT_TYPE_VOLTAGE, List.of(2400), "voltage_1", 240.0),
                 Arguments.of(MEASUREMENT_TYPE_CURRENT, List.of(550), "current_1", 5.5),
-                Arguments.of(MEASUREMENT_TYPE_PULSE_CNT_ACC_MINOR, List.of(180), "pulse_cnt_minor_1", 180),
-                Arguments.of(MEASUREMENT_TYPE_PULSE_CNT_ACC_MAJOR, List.of(1200), "pulse_cnt_major_1", 1200),
-                Arguments.of(MEASUREMENT_TYPE_ELEC_METER_ACC_MINOR, List.of(550), "elec_meter_minor_1", 550),
-                Arguments.of(MEASUREMENT_TYPE_ELEC_METER_ACC_MAJOR, List.of(5500), "elec_meter_major_1", 5500),
-                Arguments.of(MEASUREMENT_TYPE_PULSE_CNT_ACC_WIDE_MINOR, List.of(230), "pulse_cnt_wide_minor_1", 230),
-                Arguments.of(MEASUREMENT_TYPE_PULSE_CNT_ACC_WIDE_MAJOR, List.of(1700), "pulse_cnt_wide_major_1", 1700),
                 Arguments.of(MEASUREMENT_TYPE_CURRENT_PRECISE, List.of(275), "current_precise_1", 0.275)
         );
     }
 
+    @ParameterizedTest
+    @MethodSource
+    void checkPulseCounterSensors(MeasurementType minorType, List<Integer> minorSampleOffsets, MeasurementType majorType, List<Integer> majorSampleOffsets,
+                                  String totalPropertyName, double expectedTotalValue) {
+        long tsInSec = Instant.now().getEpochSecond();
+        ProtoMeasurements measurements = ProtoMeasurements.newBuilder()
+                .setSerialNum(integerToByteString(1234))
+                .setCloudToken("test_token")
+                .setMeasurementPeriodBase(180)
+                .setMeasurementPeriodFactor(0)
+                .setBatteryStatus(true)
+                .setSignal(0)
+                .setNextTransmissionAt(1000)
+                .setTransferReason(0)
+                .setHash(0)
+                .addAllChannels(Arrays.asList(MeasurementsProtos.ProtoChannel.newBuilder()
+                                .setType(majorType)
+                                .setTimestamp(Math.toIntExact(tsInSec))
+                                .addAllSampleOffsets(majorSampleOffsets)
+                                .build(),
+                        MeasurementsProtos.ProtoChannel.newBuilder()
+                                .setType(minorType)
+                                .setTimestamp(Math.toIntExact(tsInSec))
+                                .addAllSampleOffsets(minorSampleOffsets)
+                                .build()))
+                .build();
+        List<CoapEfentoTransportResource.EfentoTelemetry> efentoMeasurements = coapEfentoTransportResource.getEfentoMeasurements(measurements, UUID.randomUUID());
+        assertThat(efentoMeasurements).hasSize(1);
+        assertThat(efentoMeasurements.get(0).getTs()).isEqualTo(tsInSec * 1000);
+        assertThat(efentoMeasurements.get(0).getValues().getAsJsonObject().get(totalPropertyName + "_2").getAsDouble()).isEqualTo(expectedTotalValue);
+        checkDefaultMeasurements(measurements, efentoMeasurements, 180, false);
+    }
+
+    private static Stream<Arguments> checkPulseCounterSensors() {
+        return Stream.of(
+                Arguments.of(MEASUREMENT_TYPE_WATER_METER_ACC_MINOR, List.of(15*6), MEASUREMENT_TYPE_WATER_METER_ACC_MAJOR,
+                        List.of(625*4), "water_cnt_acc_total", 625.0*100 + 15),
+                Arguments.of(MEASUREMENT_TYPE_PULSE_CNT_ACC_MINOR, List.of(10*6), MEASUREMENT_TYPE_PULSE_CNT_ACC_MAJOR,
+                        List.of(300*4), "pulse_cnt_acc_total", 300.0*1000 + 10),
+                Arguments.of(MEASUREMENT_TYPE_ELEC_METER_ACC_MINOR, List.of(12*6), MEASUREMENT_TYPE_ELEC_METER_ACC_MAJOR,
+                        List.of(100*4), "elec_meter_acc_total", 100.0*1000 + 12),
+                Arguments.of(MEASUREMENT_TYPE_PULSE_CNT_ACC_WIDE_MINOR, List.of(13*6), MEASUREMENT_TYPE_PULSE_CNT_ACC_WIDE_MAJOR,
+                        List.of(440*4), "pulse_cnt_acc_wide_total", 440.0*1000000 + 13));
+    }
+
+
     @Test
     void checkBinarySensor() {
         long tsInSec = Instant.now().getEpochSecond();
diff --git a/common/transport/http/pom.xml b/common/transport/http/pom.xml
index 82b846341d..054fc3cbbe 100644
--- a/common/transport/http/pom.xml
+++ b/common/transport/http/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.common.transport</groupId>
diff --git a/common/transport/lwm2m/pom.xml b/common/transport/lwm2m/pom.xml
index 07546b1d8d..54232ac104 100644
--- a/common/transport/lwm2m/pom.xml
+++ b/common/transport/lwm2m/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.common.transport</groupId>
diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/secure/LwM2mCredentialsSecurityInfoValidator.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/secure/LwM2mCredentialsSecurityInfoValidator.java
index a44c6adb6e..66b072fdaa 100644
--- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/secure/LwM2mCredentialsSecurityInfoValidator.java
+++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/secure/LwM2mCredentialsSecurityInfoValidator.java
@@ -18,7 +18,7 @@ package org.thingsboard.server.transport.lwm2m.secure;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.codec.DecoderException;
-import org.eclipse.leshan.core.util.SecurityUtil;
+import org.eclipse.leshan.core.security.util.SecurityUtil;
 import org.eclipse.leshan.server.security.SecurityInfo;
 import org.springframework.stereotype.Component;
 import org.thingsboard.common.util.JacksonUtil;
diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java
index 5672ae33c3..713d5b9fa8 100644
--- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java
+++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/client/LwM2mClient.java
@@ -449,7 +449,7 @@ public class LwM2mClient {
     }
 
     public LwM2m.Version getSupportedObjectVersion(Integer objectid) {
-        return this.supportedClientObjects.get(objectid);
+        return this.supportedClientObjects != null ? this.supportedClientObjects.get(objectid) : null;
     }
 
     private void setSupportedClientObjects(){
diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/downlink/DefaultLwM2mDownlinkMsgHandler.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/downlink/DefaultLwM2mDownlinkMsgHandler.java
index 80221eb5ea..bc617fcf57 100644
--- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/downlink/DefaultLwM2mDownlinkMsgHandler.java
+++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/downlink/DefaultLwM2mDownlinkMsgHandler.java
@@ -15,6 +15,7 @@
  */
 package org.thingsboard.server.transport.lwm2m.server.downlink;
 
+import com.google.gson.JsonParser;
 import jakarta.annotation.PostConstruct;
 import jakarta.annotation.PreDestroy;
 import lombok.RequiredArgsConstructor;
@@ -396,7 +397,12 @@ public class DefaultLwM2mDownlinkMsgHandler extends LwM2MExecutorAwareService im
                     String msgError = "";
                     if (resourceModelWrite.multiple) {
                         try {
-                            Map<Integer, Object> value = convertMultiResourceValuesFromRpcBody(request.getValue(), resourceModelWrite.type, request.getObjectId());
+                            Object valueForMultiResource = request.getValue();
+                            if (resultIds.isResourceInstance()) {
+                                String resourceInstance = "{" + resultIds.getResourceInstanceId() + "=" + request.getValue() + "}";
+                                valueForMultiResource = JsonParser.parseString(resourceInstance);
+                            }
+                            Map<Integer, Object> value = convertMultiResourceValuesFromRpcBody(valueForMultiResource, resourceModelWrite.type, request.getObjectId());
                             downlink = new WriteRequest(contentFormat, resultIds.getObjectId(), resultIds.getObjectInstanceId(), resultIds.getResourceId(),
                                     value, resourceModelWrite.type);
                         } catch (Exception e) {
@@ -707,7 +713,7 @@ public class DefaultLwM2mDownlinkMsgHandler extends LwM2MExecutorAwareService im
         LwM2mPath pathIds = new LwM2mPath(fromVersionedIdToObjectId(versionedId));
         if (pathIds.isResourceInstance() || pathIds.isResource()) {
             ResourceModel resourceModel = client.getResourceModel(versionedId, modelProvider);
-            if (resourceModel != null && (pathIds.isResourceInstance() || (pathIds.isResource() && !resourceModel.multiple))) {
+            if (resourceModel != null && !resourceModel.multiple) {
                 ContentFormat[] desiredFormats;
                 if (OBJLNK.equals(resourceModel.type)) {
                     desiredFormats = new ContentFormat[]{ContentFormat.LINK, ContentFormat.CBOR, ContentFormat.SENML_CBOR, ContentFormat.SENML_JSON};
diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/rpc/DefaultLwM2MRpcRequestHandler.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/rpc/DefaultLwM2MRpcRequestHandler.java
index 4655a27316..ca2a82968b 100644
--- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/rpc/DefaultLwM2MRpcRequestHandler.java
+++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/server/rpc/DefaultLwM2MRpcRequestHandler.java
@@ -277,17 +277,6 @@ public class DefaultLwM2MRpcRequestHandler implements LwM2MRpcRequestHandler {
 
     private void sendWriteReplaceRequest(LwM2mClient client, TransportProtos.ToDeviceRpcRequestMsg requestMsg, String versionedId) {
         RpcWriteReplaceRequest requestBody = JacksonUtil.fromString(requestMsg.getParams(), RpcWriteReplaceRequest.class);
-        LwM2mPath path = new LwM2mPath(fromVersionedIdToObjectId(versionedId));
-        if (path.isResource()) {
-            ResourceModel resourceModel = client.getResourceModel(versionedId, modelProvider);
-            if (resourceModel != null && resourceModel.multiple) {
-                try {
-                    Map<Integer, Object> value = convertMultiResourceValuesFromRpcBody(requestBody.getValue(), resourceModel.type, versionedId);
-                    requestBody.setValue(value);
-                } catch (Exception e) {
-                }
-            }
-        }
         TbLwM2MWriteReplaceRequest request = TbLwM2MWriteReplaceRequest.builder().versionedId(versionedId)
                 .value(requestBody.getValue())
                 .timeout(clientContext.getRequestTimeout(client)).build();
@@ -330,7 +319,7 @@ public class DefaultLwM2MRpcRequestHandler implements LwM2MRpcRequestHandler {
 
             if (versionedId == null) {
                 if (path.isResourceInstance()) {
-                    setValueToCompositeNodes(client, newNodes, nodes, key, value.toString());
+                    setValueToCompositeNodes(client, newNodes, nodes, key, value);
                 } else if (path.isResource()) {
                     validateResource(client, newNodes, nodes, key , value);
                 } else if (path.isObjectInstance() && value instanceof Map<?, ?>) {
@@ -342,7 +331,7 @@ public class DefaultLwM2MRpcRequestHandler implements LwM2MRpcRequestHandler {
                             "The WriteComposite operation is only used for SingleResources or/and ResourceInstance.", nodes));
                 }
             } else {
-                setValueToCompositeNodes(client, newNodes, nodes, versionedId, value.toString());
+                setValueToCompositeNodes(client, newNodes, nodes, versionedId, value);
             }
         });
         return newNodes;
@@ -351,10 +340,10 @@ public class DefaultLwM2MRpcRequestHandler implements LwM2MRpcRequestHandler {
     private void validateResource(LwM2mClient client, Map newNodes, Map nodes, String resourceId , Object value) {
         if (value instanceof Map<?, ?>) {
             ((Map<?, ?>) value).forEach((k, v) -> {
-                setValueToCompositeNodes(client, newNodes, nodes, validateResourceId (resourceId, k.toString(), nodes), v.toString());
+                setValueToCompositeNodes(client, newNodes, nodes, validateResourceId (resourceId, k.toString(), nodes), v);
             });
         } else {
-            setValueToCompositeNodes(client, newNodes, nodes, resourceId, value.toString());
+            setValueToCompositeNodes(client, newNodes, nodes, resourceId, value);
         }
     }
 
@@ -368,7 +357,7 @@ public class DefaultLwM2MRpcRequestHandler implements LwM2MRpcRequestHandler {
         }
     }
 
-    private void setValueToCompositeNodes (LwM2mClient client, Map newNodes, Map nodes, String versionedId , String value) {
+    private void setValueToCompositeNodes (LwM2mClient client, Map newNodes, Map nodes, String versionedId , Object value) {
         // validate value. Must be only primitive, not JsonObject or JsonArray
         try {
             JsonElement element = JsonUtils.parse(value);
@@ -378,7 +367,7 @@ public class DefaultLwM2MRpcRequestHandler implements LwM2MRpcRequestHandler {
             }
             // convert value from JsonPrimitive() to resource/ResourceInstance type
             ResourceModel resourceModel = client.getResourceModel(versionedId, modelProvider);
-            Object newValue = convertValueByTypeResource(value, resourceModel.type,  versionedId);
+            Object newValue = convertValueByTypeResource(element, resourceModel.type,  versionedId);
 
             // add new value after convert
             newNodes.put(fromVersionedIdToObjectId(versionedId), newValue);
diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2MTransportUtil.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2MTransportUtil.java
index 6b90ae21b6..66f68f0a05 100644
--- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2MTransportUtil.java
+++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2MTransportUtil.java
@@ -16,6 +16,7 @@
 package org.thingsboard.server.transport.lwm2m.utils;
 
 import com.google.gson.JsonElement;
+import com.google.gson.JsonPrimitive;
 import lombok.extern.slf4j.Slf4j;
 import org.eclipse.californium.elements.config.Configuration;
 import org.eclipse.leshan.core.model.LwM2mModel;
@@ -27,7 +28,6 @@ import org.eclipse.leshan.core.node.LwM2mPath;
 import org.eclipse.leshan.core.node.LwM2mResource;
 import org.eclipse.leshan.core.node.LwM2mSingleResource;
 import org.eclipse.leshan.core.util.Hex;
-import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.common.data.DeviceProfile;
 import org.thingsboard.server.common.data.DeviceTransportType;
 import org.thingsboard.server.common.data.StringUtils;
@@ -35,7 +35,6 @@ import org.thingsboard.server.common.data.device.profile.DeviceProfileTransportC
 import org.thingsboard.server.common.data.device.profile.Lwm2mDeviceProfileTransportConfiguration;
 import org.thingsboard.server.common.data.device.profile.lwm2m.bootstrap.LwM2MBootstrapServerCredential;
 import org.thingsboard.server.common.data.ota.OtaPackageKey;
-import org.thingsboard.server.common.transport.util.JsonUtils;
 import org.thingsboard.server.transport.lwm2m.config.TbLwM2mVersion;
 import org.thingsboard.server.transport.lwm2m.server.LwM2mOtaConvert;
 import org.thingsboard.server.transport.lwm2m.server.client.LwM2mClient;
@@ -62,6 +61,7 @@ import static org.eclipse.leshan.core.model.ResourceModel.Type.STRING;
 import static org.eclipse.leshan.core.model.ResourceModel.Type.TIME;
 import static org.thingsboard.server.common.data.lwm2m.LwM2mConstants.LWM2M_SEPARATOR_KEY;
 import static org.thingsboard.server.common.data.lwm2m.LwM2mConstants.LWM2M_SEPARATOR_PATH;
+import static org.thingsboard.server.common.transport.util.JsonUtils.convertToJsonObject;
 import static org.thingsboard.server.transport.lwm2m.server.ota.DefaultLwM2MOtaUpdateService.FW_RESULT_ID;
 import static org.thingsboard.server.transport.lwm2m.server.ota.DefaultLwM2MOtaUpdateService.FW_STATE_ID;
 import static org.thingsboard.server.transport.lwm2m.server.ota.DefaultLwM2MOtaUpdateService.SW_RESULT_ID;
@@ -180,9 +180,11 @@ public class LwM2MTransportUtil {
      */
     public static ResourceModel.Type equalsResourceTypeGetSimpleName(Object value) {
         switch (value.getClass().getSimpleName()) {
+            case "Float":
             case "Double":
                 return FLOAT;
             case "Integer":
+            case "Long":
                 return INTEGER;
             case "String":
                 return STRING;
@@ -199,6 +201,30 @@ public class LwM2MTransportUtil {
         }
     }
 
+    public static Object getJsonPrimitiveValue(JsonPrimitive value) {
+        if(value.isString()) {
+            return value.getAsString();
+        } else if (value.isNumber()){
+            try {
+                return Integer.valueOf(value.toString());
+            } catch (NumberFormatException i) {
+                try {
+                    return Long.valueOf(value.toString());
+                } catch (NumberFormatException l){
+                    if (value.getAsFloat() >= Float.MIN_VALUE && value.getAsFloat() <= Float.MAX_VALUE) {
+                        return value.getAsFloat();
+                    } else {
+                        return value.getAsDouble();
+                    }
+                }
+            }
+        } else if (value.isBoolean()){
+            return value.getAsBoolean();
+        } else {
+            return null;
+        }
+    }
+
     public static void validateVersionedId(LwM2mClient client, HasVersionedId request) {
         String msgExceptionStr = "";
         if (request.getObjectId() == null) {
@@ -212,22 +238,29 @@ public class LwM2MTransportUtil {
     }
 
     public static Map<Integer, Object> convertMultiResourceValuesFromRpcBody(Object value, ResourceModel.Type type, String versionedId) throws Exception {
-        String valueJsonStr = JacksonUtil.toString(value);
-        JsonElement element = JsonUtils.parse(valueJsonStr);
-        return convertMultiResourceValuesFromJson(element, type, versionedId);
+        if (value instanceof JsonElement) {
+            return convertMultiResourceValuesFromJson((JsonElement) value, type, versionedId);
+        } else if (value instanceof Map) {
+            JsonElement valueConvert =  convertToJsonObject((Map<String, ?>) value);
+            return convertMultiResourceValuesFromJson(valueConvert, type, versionedId);
+        } else {
+            return null;
+        }
     }
 
     public static Map<Integer, Object> convertMultiResourceValuesFromJson(JsonElement newValProto, ResourceModel.Type type, String versionedId) {
         Map<Integer, Object> newValues = new HashMap<>();
         newValProto.getAsJsonObject().entrySet().forEach((obj) -> {
-            newValues.put(Integer.valueOf(obj.getKey()), convertValueByTypeResource(obj.getValue().getAsString(), type, versionedId));
+            Object valueByTypeResource = convertValueByTypeResource(obj.getValue(), type, versionedId);
+            newValues.put(Integer.valueOf(obj.getKey()), valueByTypeResource);
         });
         return newValues;
     }
 
-    public static Object convertValueByTypeResource(String value, ResourceModel.Type type, String versionedId) {
-        return LwM2mValueConverterImpl.getInstance().convertValue(value,
-                STRING, type, new LwM2mPath(fromVersionedIdToObjectId(versionedId)));
+    public static Object convertValueByTypeResource(Object value, ResourceModel.Type type, String versionedId) {
+        Object valueCurrent = getJsonPrimitiveValue((JsonPrimitive) value);
+        return LwM2mValueConverterImpl.getInstance().convertValue(valueCurrent,
+                equalsResourceTypeGetSimpleName(valueCurrent), type, new LwM2mPath(fromVersionedIdToObjectId(versionedId)));
     }
 
     /**
diff --git a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2mValueConverterImpl.java b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2mValueConverterImpl.java
index 3125ae63f5..a584211605 100644
--- a/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2mValueConverterImpl.java
+++ b/common/transport/lwm2m/src/main/java/org/thingsboard/server/transport/lwm2m/utils/LwM2mValueConverterImpl.java
@@ -25,6 +25,7 @@ import org.eclipse.leshan.core.util.Hex;
 import org.thingsboard.server.common.data.StringUtils;
 
 import java.math.BigInteger;
+import java.nio.ByteBuffer;
 import java.text.DateFormat;
 import java.text.SimpleDateFormat;
 import java.util.Base64;
@@ -165,7 +166,19 @@ public class LwM2mValueConverterImpl implements LwM2mValueConverter {
                 }
                 break;
             case OPAQUE:
-                if (currentType == Type.STRING) {
+                if (currentType == Type.INTEGER) {
+                    if (value instanceof Integer) {
+                        return ByteBuffer.allocate(4).putInt((Integer) value).array();
+                    } else {
+                        return ByteBuffer.allocate(8).putLong((Long) value).array();
+                    }
+                } else if (currentType == Type.FLOAT) {
+                    if (value instanceof Float) {
+                        return ByteBuffer.allocate(4).putFloat((Float) value).array();
+                    } else {
+                        return ByteBuffer.allocate(8).putDouble((Double) value).array();
+                    }
+                } else if (currentType == Type.STRING) {
                     /** let's assume we received an hexadecimal string */
                     log.debug("Trying to convert hexadecimal/base64 string [{}] to byte array", value);
                     try {
@@ -178,6 +191,8 @@ public class LwM2mValueConverterImpl implements LwM2mValueConverter {
                                     value, resourcePath);
                         }
                     }
+                } else if (currentType == Type.BOOLEAN) {
+                    return  new byte[] {(byte)((boolean)value ? 1 : 0)};
                 }
                 break;
             case OBJLNK:
diff --git a/common/transport/mqtt/pom.xml b/common/transport/mqtt/pom.xml
index c422e799be..e672f7a5dd 100644
--- a/common/transport/mqtt/pom.xml
+++ b/common/transport/mqtt/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.common.transport</groupId>
diff --git a/common/transport/pom.xml b/common/transport/pom.xml
index 35309d4d96..c87fa8c2bf 100644
--- a/common/transport/pom.xml
+++ b/common/transport/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/transport/snmp/pom.xml b/common/transport/snmp/pom.xml
index aab9d5cf82..78665bfde2 100644
--- a/common/transport/snmp/pom.xml
+++ b/common/transport/snmp/pom.xml
@@ -21,7 +21,7 @@
 
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
 
diff --git a/common/transport/transport-api/pom.xml b/common/transport/transport-api/pom.xml
index c7ee182997..7d221c48bf 100644
--- a/common/transport/transport-api/pom.xml
+++ b/common/transport/transport-api/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.common</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.common.transport</groupId>
diff --git a/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/service/DefaultTransportService.java b/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/service/DefaultTransportService.java
index 8e48061db6..44f61270b4 100644
--- a/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/service/DefaultTransportService.java
+++ b/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/service/DefaultTransportService.java
@@ -45,6 +45,7 @@ import org.thingsboard.server.common.data.ResourceType;
 import org.thingsboard.server.common.data.StringUtils;
 import org.thingsboard.server.common.data.Tenant;
 import org.thingsboard.server.common.data.device.data.PowerMode;
+import org.thingsboard.server.common.data.exception.TenantNotFoundException;
 import org.thingsboard.server.common.data.id.CustomerId;
 import org.thingsboard.server.common.data.id.DeviceId;
 import org.thingsboard.server.common.data.id.DeviceProfileId;
@@ -1100,11 +1101,19 @@ public class DefaultTransportService extends TransportActivityManager implements
     }
 
     private void sendToCore(TenantId tenantId, EntityId entityId, ToCoreMsg msg, UUID routingKey, TransportServiceCallback<Void> callback) {
-        TopicPartitionInfo tpi = partitionService.resolve(ServiceType.TB_CORE, tenantId, entityId);
+        TopicPartitionInfo tpi;
+        try {
+            tpi = partitionService.resolve(ServiceType.TB_CORE, tenantId, entityId);
+        } catch (Exception e) {
+            log.warn("Failed to send message to core. Tenant with ID [{}], routingKey [{}], msg [{}]. Message delivery aborted.", tenantId, routingKey, msg, e);
+            if (callback != null) {
+                callback.onError(e);
+            }
+            return;
+        }
         if (log.isTraceEnabled()) {
             log.trace("[{}][{}] Pushing to topic {} message {}", tenantId, entityId, tpi.getFullTopicName(), msg);
         }
-
         TransportTbQueueCallback transportTbQueueCallback = callback != null ?
                 new TransportTbQueueCallback(callback) : null;
         tbCoreProducerStats.incrementTotal();
diff --git a/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/util/JsonUtils.java b/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/util/JsonUtils.java
index 1f273e6f04..ed0b425c76 100644
--- a/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/util/JsonUtils.java
+++ b/common/transport/transport-api/src/main/java/org/thingsboard/server/common/transport/util/JsonUtils.java
@@ -18,9 +18,11 @@ package org.thingsboard.server.common.transport.util;
 import com.google.gson.JsonElement;
 import com.google.gson.JsonObject;
 import com.google.gson.JsonParser;
+import com.google.gson.JsonPrimitive;
 import org.thingsboard.server.gen.transport.TransportProtos.KeyValueProto;
 
 import java.util.List;
+import java.util.Map;
 
 public class JsonUtils {
 
@@ -47,9 +49,30 @@ public class JsonUtils {
         }
         return json;
     }
-
-    public static JsonElement parse(String params) {
-        return JsonParser.parseString(params);
+    public static JsonElement parse(Object value) {
+        if (value instanceof Integer) {
+            return new JsonPrimitive((Integer) value);
+        } else if (value instanceof Long) {
+            return new JsonPrimitive((Long) value);
+        } else if (value instanceof String) {
+            return JsonParser.parseString((String) value);
+        } else if (value instanceof Boolean) {
+            return new JsonPrimitive((Boolean) value);
+        } else if (value instanceof Double) {
+            return new JsonPrimitive((Double) value);
+        } else if (value instanceof Float) {
+            return new JsonPrimitive((Float) value);
+        } else {
+            throw new IllegalArgumentException("Unsupported type: " + value.getClass().getSimpleName());
+        }
     }
 
+    public static JsonObject convertToJsonObject(Map<String,?> map) {
+        JsonObject jsonObject = new JsonObject();
+        for (Map.Entry<String, ?> entry : map.entrySet()) {
+            jsonObject.add(entry.getKey(), parse(entry.getValue()));
+        }
+
+        return jsonObject;
+    }
 }
diff --git a/common/util/pom.xml b/common/util/pom.xml
index 06c75a5de5..ad3bbaba58 100644
--- a/common/util/pom.xml
+++ b/common/util/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/util/src/main/java/org/thingsboard/common/util/RegexUtils.java b/common/util/src/main/java/org/thingsboard/common/util/RegexUtils.java
index 3935493d66..7289485e04 100644
--- a/common/util/src/main/java/org/thingsboard/common/util/RegexUtils.java
+++ b/common/util/src/main/java/org/thingsboard/common/util/RegexUtils.java
@@ -17,16 +17,24 @@ package org.thingsboard.common.util;
 
 import lombok.AccessLevel;
 import lombok.NoArgsConstructor;
+import org.intellij.lang.annotations.Language;
+import org.springframework.util.ConcurrentReferenceHashMap;
 
+import java.util.concurrent.ConcurrentMap;
+import java.util.function.Function;
 import java.util.function.UnaryOperator;
+import java.util.regex.MatchResult;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
+import static org.springframework.util.ConcurrentReferenceHashMap.ReferenceType.SOFT;
+
 @NoArgsConstructor(access = AccessLevel.PRIVATE)
 public class RegexUtils {
 
     public static final Pattern UUID_PATTERN = Pattern.compile("[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}");
 
+    private static final ConcurrentMap<String, Pattern> patternsCache = new ConcurrentReferenceHashMap<>(16, SOFT);
 
     public static String replace(String s, Pattern pattern, UnaryOperator<String> replacer) {
         return pattern.matcher(s).replaceAll(matchResult -> {
@@ -34,6 +42,10 @@ public class RegexUtils {
         });
     }
 
+    public static String replace(String input, @Language("regexp") String pattern, Function<MatchResult, String> replacer) {
+        return patternsCache.computeIfAbsent(pattern, Pattern::compile).matcher(input).replaceAll(replacer);
+    }
+
     public static boolean matches(String input, Pattern pattern) {
         return pattern.matcher(input).matches();
     }
diff --git a/common/version-control/pom.xml b/common/version-control/pom.xml
index 7e7cdfad12..f37139b3c5 100644
--- a/common/version-control/pom.xml
+++ b/common/version-control/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>common</artifactId>
     </parent>
     <groupId>org.thingsboard.common</groupId>
diff --git a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitRepositoryService.java b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitRepositoryService.java
index 0788143030..239eb18748 100644
--- a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitRepositoryService.java
+++ b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitRepositoryService.java
@@ -40,7 +40,6 @@ import org.thingsboard.server.service.sync.vc.GitRepository.Diff;
 import java.io.File;
 import java.io.IOException;
 import java.nio.charset.StandardCharsets;
-import java.nio.file.Files;
 import java.nio.file.Path;
 import java.util.HashSet;
 import java.util.List;
@@ -203,7 +202,7 @@ public class DefaultGitRepositoryService implements GitRepositoryService {
         GitRepository gitRepository = Optional.ofNullable(repositories.get(tenantId))
                 .orElseThrow(() -> new IllegalStateException("Repository is not initialized"));
 
-        if (!Files.exists(Path.of(gitRepository.getDirectory()))) {
+        if (!GitRepository.exists(gitRepository.getDirectory())) {
             try {
                 return openOrCloneRepository(tenantId, gitRepository.getSettings(), false);
             } catch (Exception e) {
@@ -283,22 +282,7 @@ public class DefaultGitRepositoryService implements GitRepositoryService {
     private GitRepository openOrCloneRepository(TenantId tenantId, RepositorySettings settings, boolean fetch) throws Exception {
         log.debug("[{}] Init tenant repository started.", tenantId);
         Path repositoryDirectory = Path.of(repositoriesFolder, settings.isLocalOnly() ? "local_" + settings.getRepositoryUri() : tenantId.getId().toString());
-
-        GitRepository repository;
-        if (Files.exists(repositoryDirectory)) {
-            repository = GitRepository.open(repositoryDirectory.toFile(), settings);
-            if (fetch) {
-                repository.fetch();
-            }
-        } else {
-            Files.createDirectories(repositoryDirectory);
-            if (settings.isLocalOnly()) {
-                repository = GitRepository.create(settings, repositoryDirectory.toFile());
-            } else {
-                repository = GitRepository.clone(settings, repositoryDirectory.toFile());
-            }
-        }
-
+        GitRepository repository = GitRepository.openOrClone(repositoryDirectory, settings, fetch);
         repositories.put(tenantId, repository);
         log.debug("[{}] Init tenant repository completed.", tenantId);
         return repository;
diff --git a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java
index aaa4c22289..50d1a00b09 100644
--- a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java
+++ b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java
@@ -21,6 +21,7 @@ import com.google.common.collect.Streams;
 import lombok.Data;
 import lombok.Getter;
 import lombok.RequiredArgsConstructor;
+import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.io.FileUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -67,6 +68,7 @@ import org.thingsboard.server.common.data.page.SortOrder;
 import org.thingsboard.server.common.data.sync.vc.BranchInfo;
 import org.thingsboard.server.common.data.sync.vc.RepositoryAuthMethod;
 import org.thingsboard.server.common.data.sync.vc.RepositorySettings;
+import org.thingsboard.server.common.data.util.CollectionsUtil;
 
 import java.io.ByteArrayInputStream;
 import java.io.ByteArrayOutputStream;
@@ -75,6 +77,7 @@ import java.io.IOException;
 import java.net.InetSocketAddress;
 import java.nio.charset.StandardCharsets;
 import java.nio.file.Files;
+import java.nio.file.Path;
 import java.security.KeyPair;
 import java.security.PublicKey;
 import java.util.ArrayList;
@@ -136,6 +139,25 @@ public class GitRepository {
         return new GitRepository(git, settings, authHandler, directory.getAbsolutePath());
     }
 
+    public static GitRepository openOrClone(Path directory, RepositorySettings settings, boolean fetch) throws IOException, GitAPIException {
+        GitRepository repository;
+        if (GitRepository.exists(directory.toString())) {
+            repository = GitRepository.open(directory.toFile(), settings);
+            if (fetch) {
+                repository.fetch();
+            }
+        } else {
+            FileUtils.deleteDirectory(directory.toFile());
+            Files.createDirectories(directory);
+            if (settings.isLocalOnly()) {
+                repository = GitRepository.create(settings, directory.toFile());
+            } else {
+                repository = GitRepository.clone(settings, directory.toFile());
+            }
+        }
+        return repository;
+    }
+
     public static void test(RepositorySettings settings, File directory) throws Exception {
         if (settings.isLocalOnly()) {
             return;
@@ -163,9 +185,9 @@ public class GitRepository {
         }
     }
 
-    public void fetch() throws GitAPIException {
+    public boolean fetch() throws GitAPIException {
         if (settings.isLocalOnly()) {
-            return;
+            return false;
         }
         log.debug("Executing fetch [{}]", settings.getRepositoryUri());
         FetchResult result = execute(git.fetch()
@@ -174,6 +196,7 @@ public class GitRepository {
         if (head != null) {
             this.headId = head.getObjectId();
         }
+        return CollectionsUtil.isNotEmpty(result.getTrackingRefUpdates());
     }
 
     public void deleteLocalBranchIfExists(String branch) throws GitAPIException {
@@ -233,22 +256,29 @@ public class GitRepository {
         return iterableToPageData(commits, this::toCommit, pageLink, revCommitComparatorFunction);
     }
 
-    public List<String> listFilesAtCommit(String commitId) throws IOException {
-        return listFilesAtCommit(commitId, null);
+    public List<String> listFilesAtCommit(String commitId, String path) {
+        return listFilesAtCommit(commitId, path, -1).stream().map(RepoFile::path).toList();
     }
 
-    public List<String> listFilesAtCommit(String commitId, String path) throws IOException {
+    @SneakyThrows
+    public List<RepoFile> listFilesAtCommit(String commitId, String path, int depth) {
         log.debug("Executing listFilesAtCommit [{}][{}][{}]", settings.getRepositoryUri(), commitId, path);
-        List<String> files = new ArrayList<>();
+        List<RepoFile> files = new ArrayList<>();
         RevCommit revCommit = resolveCommit(commitId);
         try (TreeWalk treeWalk = new TreeWalk(git.getRepository())) {
             treeWalk.reset(revCommit.getTree().getId());
             if (StringUtils.isNotEmpty(path)) {
                 treeWalk.setFilter(PathFilter.create(path));
             }
-            treeWalk.setRecursive(true);
+            boolean fixedDepth = depth != -1;
+            treeWalk.setRecursive(!fixedDepth);
             while (treeWalk.next()) {
-                files.add(treeWalk.getPathString());
+                if (!fixedDepth || treeWalk.getDepth() == depth) {
+                    files.add(new RepoFile(treeWalk.getPathString(), treeWalk.getNameString(), treeWalk.isSubtree() ? FileType.DIRECTORY : FileType.FILE));
+                }
+                if (fixedDepth && treeWalk.getDepth() < depth) {
+                    treeWalk.enterSubtree();
+                }
             }
         }
         return files;
@@ -409,6 +439,12 @@ public class GitRepository {
         return result;
     }
 
+    @SneakyThrows
+    public static boolean exists(String directory) {
+        File gitDirectory = Path.of(directory, ".git").toFile();
+        return FileUtils.isDirectory(gitDirectory) && !FileUtils.isEmptyDirectory(gitDirectory);
+    }
+
     private <C extends GitCommand<T>, T> T execute(C command) throws GitAPIException {
         if (command instanceof TransportCommand transportCommand && authHandler != null) {
             authHandler.configureCommand(transportCommand);
@@ -584,4 +620,10 @@ public class GitRepository {
         private String diffStringValue;
     }
 
+    public record RepoFile(String path, String name, FileType type) {}
+
+    public enum FileType {
+        FILE, DIRECTORY
+    }
+
 }
diff --git a/dao/pom.xml b/dao/pom.xml
index 1211f33d28..1dac54c142 100644
--- a/dao/pom.xml
+++ b/dao/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>dao</artifactId>
diff --git a/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java b/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java
index 43ed41e52a..a042bc32b1 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/AbstractVersionedInsertRepository.java
@@ -47,8 +47,7 @@ public abstract class AbstractVersionedInsertRepository<T> extends AbstractInser
 
             List<Integer> toInsertIndexes = new ArrayList<>(notUpdatedCount);
             List<T> insertEntities = new ArrayList<>(notUpdatedCount);
-            int keyHolderIndex = 0;
-            for (int i = 0; i < updateResult.length; i++) {
+            for (int i = 0, keyHolderIndex = 0; i < updateResult.length; i++) {
                 if (updateResult[i] == 0) {
                     insertEntities.add(entities.get(i));
                     seqNumbers.add(null);
@@ -67,9 +66,10 @@ public abstract class AbstractVersionedInsertRepository<T> extends AbstractInser
 
             seqNumbersList = keyHolder.getKeyList();
 
-            for (int i = 0; i < insertResult.length; i++) {
+            for (int i = 0, keyHolderIndex = 0; i < insertResult.length; i++) {
                 if (insertResult[i] != 0) {
-                    seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(i).get(VERSION_COLUMN));
+                    seqNumbers.set(toInsertIndexes.get(i), (Long) seqNumbersList.get(keyHolderIndex).get(VERSION_COLUMN));
+                    keyHolderIndex++;
                 }
             }
 
diff --git a/dao/src/main/java/org/thingsboard/server/dao/dashboard/DashboardServiceImpl.java b/dao/src/main/java/org/thingsboard/server/dao/dashboard/DashboardServiceImpl.java
index 0cd805ee24..6fc75c03df 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/dashboard/DashboardServiceImpl.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/dashboard/DashboardServiceImpl.java
@@ -385,6 +385,11 @@ public class DashboardServiceImpl extends AbstractEntityService implements Dashb
         return dashboardDao.findByTenantIdAndTitle(tenantId.getId(), title);
     }
 
+    @Override
+    public boolean existsById(TenantId tenantId, DashboardId dashboardId) {
+        return dashboardDao.existsById(tenantId, dashboardId.getId());
+    }
+
     private final PaginatedRemover<TenantId, DashboardId> tenantDashboardsRemover = new PaginatedRemover<>() {
 
         @Override
diff --git a/dao/src/main/java/org/thingsboard/server/dao/device/DeviceCredentialsServiceImpl.java b/dao/src/main/java/org/thingsboard/server/dao/device/DeviceCredentialsServiceImpl.java
index e958313d67..cce114f361 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/device/DeviceCredentialsServiceImpl.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/device/DeviceCredentialsServiceImpl.java
@@ -19,7 +19,7 @@ import com.fasterxml.jackson.databind.JsonNode;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.eclipse.leshan.core.SecurityMode;
-import org.eclipse.leshan.core.util.SecurityUtil;
+import org.eclipse.leshan.core.security.util.SecurityUtil;
 import org.hibernate.exception.ConstraintViolationException;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.event.TransactionalEventListener;
diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java
index b920160cc0..f85cd4bac4 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/model/ModelConstants.java
@@ -82,7 +82,8 @@ public class ModelConstants {
     public static final String USER_CREDENTIALS_ACTIVATE_TOKEN_EXP_TIME_PROPERTY = "activate_token_exp_time";
     public static final String USER_CREDENTIALS_RESET_TOKEN_PROPERTY = "reset_token";
     public static final String USER_CREDENTIALS_RESET_TOKEN_EXP_TIME_PROPERTY = "reset_token_exp_time";
-    public static final String USER_CREDENTIALS_ADDITIONAL_PROPERTY = "additional_info";
+    public static final String USER_CREDENTIALS_LAST_LOGIN_TS_PROPERTY = "last_login_ts";
+    public static final String USER_CREDENTIALS_FAILED_LOGIN_ATTEMPTS_PROPERTY = "failed_login_attempts";
 
     /**
      * User settings constants.
diff --git a/dao/src/main/java/org/thingsboard/server/dao/model/sql/UserCredentialsEntity.java b/dao/src/main/java/org/thingsboard/server/dao/model/sql/UserCredentialsEntity.java
index edd1536a04..7ac871932f 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/model/sql/UserCredentialsEntity.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/model/sql/UserCredentialsEntity.java
@@ -60,18 +60,21 @@ public final class UserCredentialsEntity extends BaseSqlEntity<UserCredentials>
     private Long resetTokenExpTime;
 
     @Convert(converter = JsonConverter.class)
-    @Column(name = ModelConstants.USER_CREDENTIALS_ADDITIONAL_PROPERTY)
+    @Column(name = ModelConstants.ADDITIONAL_INFO_PROPERTY)
     private JsonNode additionalInfo;
 
+    @Column(name = ModelConstants.USER_CREDENTIALS_LAST_LOGIN_TS_PROPERTY)
+    private Long lastLoginTs;
+
+    @Column(name = ModelConstants.USER_CREDENTIALS_FAILED_LOGIN_ATTEMPTS_PROPERTY)
+    private Integer failedLoginAttempts;
+
     public UserCredentialsEntity() {
         super();
     }
 
     public UserCredentialsEntity(UserCredentials userCredentials) {
-        if (userCredentials.getId() != null) {
-            this.setUuid(userCredentials.getId().getId());
-        }
-        this.setCreatedTime(userCredentials.getCreatedTime());
+        super(userCredentials);
         if (userCredentials.getUserId() != null) {
             this.userId = userCredentials.getUserId().getId();
         }
@@ -82,6 +85,8 @@ public final class UserCredentialsEntity extends BaseSqlEntity<UserCredentials>
         this.resetToken = userCredentials.getResetToken();
         this.resetTokenExpTime = userCredentials.getResetTokenExpTime();
         this.additionalInfo = userCredentials.getAdditionalInfo();
+        this.lastLoginTs = userCredentials.getLastLoginTs();
+        this.failedLoginAttempts = userCredentials.getFailedLoginAttempts();
     }
 
     @Override
@@ -98,6 +103,8 @@ public final class UserCredentialsEntity extends BaseSqlEntity<UserCredentials>
         userCredentials.setResetToken(resetToken);
         userCredentials.setResetTokenExpTime(resetTokenExpTime);
         userCredentials.setAdditionalInfo(additionalInfo);
+        userCredentials.setLastLoginTs(lastLoginTs);
+        userCredentials.setFailedLoginAttempts(failedLoginAttempts);
         return userCredentials;
     }
 
diff --git a/dao/src/main/java/org/thingsboard/server/dao/notification/DefaultNotifications.java b/dao/src/main/java/org/thingsboard/server/dao/notification/DefaultNotifications.java
index 1a4c3ffab2..65a5763c5a 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/notification/DefaultNotifications.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/notification/DefaultNotifications.java
@@ -372,6 +372,14 @@ public class DefaultNotifications {
                     .build())
             .build();
 
+    public static final DefaultNotification queueTypeDeprecation = DefaultNotification.builder()
+            .name("Queue type deprecation")
+            .type(NotificationType.GENERAL)
+            .subject("WARNING: ${queueType} deprecation")
+            .text("${queueType} queue type is deprecated and will be removed in ThingsBoard 4.0. Please migrate to Apache Kafka")
+            .icon("warning").color(RED_COLOR)
+            .build();
+
     private final NotificationTemplateService templateService;
     private final NotificationRuleService ruleService;
 
diff --git a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java
index 327f32f5a5..dc4b6c28fc 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseImageService.java
@@ -248,8 +248,7 @@ public class BaseImageService extends BaseResourceService implements ImageServic
 
     @Override
     public byte[] getImageData(TenantId tenantId, TbResourceId imageId) {
-        log.trace("Executing getImageData [{}] [{}]", tenantId, imageId);
-        return resourceDao.getResourceData(tenantId, imageId);
+        return getResourceData(tenantId, imageId);
     }
 
     @Override
@@ -448,7 +447,7 @@ public class BaseImageService extends BaseResourceService implements ImageServic
             mdResourceName = new String(Base64.getDecoder().decode(matcher.group(2)), StandardCharsets.UTF_8);
             if (StringUtils.isNotBlank(matcher.group(3))) {
                 mdResourceSubType = new String(Base64.getDecoder().decode(matcher.group(3)), StandardCharsets.UTF_8);
-            };
+            }
             mdMediaType = matcher.group(4);
         } else if (data.startsWith(DataConstants.TB_IMAGE_PREFIX + "data:image/") || (!strict && data.startsWith("data:image/"))) {
             mdMediaType = StringUtils.substringBetween(data, "data:", ";base64");
@@ -687,4 +686,5 @@ public class BaseImageService extends BaseResourceService implements ImageServic
         private final boolean updated;
         private final String value;
     }
+
 }
diff --git a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java
index fcace55c93..cea6842245 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/resource/BaseResourceService.java
@@ -17,14 +17,19 @@ package org.thingsboard.server.dao.resource;
 
 import com.google.common.hash.Hashing;
 import com.google.common.util.concurrent.ListenableFuture;
-import lombok.AllArgsConstructor;
+import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.hibernate.exception.ConstraintViolationException;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Lazy;
 import org.springframework.context.annotation.Primary;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.event.TransactionalEventListener;
+import org.thingsboard.common.util.JacksonUtil;
+import org.thingsboard.common.util.RegexUtils;
 import org.thingsboard.server.cache.resourceInfo.ResourceInfoCacheKey;
 import org.thingsboard.server.cache.resourceInfo.ResourceInfoEvictEvent;
+import org.thingsboard.server.common.data.Dashboard;
 import org.thingsboard.server.common.data.EntityType;
 import org.thingsboard.server.common.data.ResourceType;
 import org.thingsboard.server.common.data.TbResource;
@@ -44,6 +49,7 @@ import org.thingsboard.server.dao.service.PaginatedRemover;
 import org.thingsboard.server.dao.service.Validator;
 import org.thingsboard.server.dao.service.validator.ResourceDataValidator;
 
+import java.nio.charset.StandardCharsets;
 import java.util.List;
 import java.util.Optional;
 
@@ -52,7 +58,7 @@ import static org.thingsboard.server.dao.service.Validator.validateId;
 
 @Service("TbResourceDaoService")
 @Slf4j
-@AllArgsConstructor
+@RequiredArgsConstructor
 @Primary
 public class BaseResourceService extends AbstractCachedEntityService<ResourceInfoCacheKey, TbResourceInfo, ResourceInfoEvictEvent> implements ResourceService {
 
@@ -60,6 +66,8 @@ public class BaseResourceService extends AbstractCachedEntityService<ResourceInf
     protected final TbResourceDao resourceDao;
     protected final TbResourceInfoDao resourceInfoDao;
     protected final ResourceDataValidator resourceValidator;
+    @Autowired @Lazy
+    private ImageService imageService;
 
     @Override
     public TbResource saveResource(TbResource resource, boolean doValidate) {
@@ -120,6 +128,12 @@ public class BaseResourceService extends AbstractCachedEntityService<ResourceInf
         return resourceDao.findById(tenantId, resourceId.getId());
     }
 
+    @Override
+    public byte[] getResourceData(TenantId tenantId, TbResourceId resourceId) {
+        log.trace("Executing getResourceData [{}] [{}]", tenantId, resourceId);
+        return resourceDao.getResourceData(tenantId, resourceId);
+    }
+
     @Override
     public TbResourceInfo findResourceInfoById(TenantId tenantId, TbResourceId resourceId) {
         log.trace("Executing findResourceInfoById [{}] [{}]", tenantId, resourceId);
@@ -231,6 +245,46 @@ public class BaseResourceService extends AbstractCachedEntityService<ResourceInf
         return resourceDao.sumDataSizeByTenantId(tenantId);
     }
 
+    @Override
+    public TbResource createOrUpdateSystemResource(ResourceType resourceType, String resourceKey, String data) {
+        if (resourceType == ResourceType.DASHBOARD) {
+            data = checkSystemResourcesUsage(data, ResourceType.JS_MODULE);
+
+            Dashboard dashboard = JacksonUtil.fromString(data, Dashboard.class);
+            dashboard.setTenantId(TenantId.SYS_TENANT_ID);
+            imageService.replaceBase64WithImageUrl(dashboard);
+            data = JacksonUtil.toString(dashboard);
+        }
+
+        TbResource resource = findResourceByTenantIdAndKey(TenantId.SYS_TENANT_ID, resourceType, resourceKey);
+        if (resource == null) {
+            resource = new TbResource();
+            resource.setTenantId(TenantId.SYS_TENANT_ID);
+            resource.setResourceType(resourceType);
+            resource.setResourceKey(resourceKey);
+            resource.setFileName(resourceKey);
+            resource.setTitle(resourceKey);
+        }
+        resource.setData(data.getBytes(StandardCharsets.UTF_8));
+        log.debug("{} system resource {}", (resource.getId() == null ? "Creating" : "Updating"), resourceKey);
+        return saveResource(resource);
+    }
+
+    @Override
+    public String checkSystemResourcesUsage(String content, ResourceType... usedResourceTypes) {
+        return RegexUtils.replace(content, "\\$\\{RESOURCE:(.+)}", matchResult -> {
+            String resourceKey = matchResult.group(1);
+            for (ResourceType resourceType : usedResourceTypes) {
+                TbResourceInfo resource = findResourceInfoByTenantIdAndKey(TenantId.SYS_TENANT_ID, resourceType, resourceKey);
+                if (resource != null) {
+                    log.trace("Replaced '{}' with resource id {}", matchResult.group(), resource.getUuidId());
+                    return resource.getUuidId().toString();
+                }
+            }
+            return "";
+        });
+    }
+
     protected String calculateEtag(byte[] data) {
         return Hashing.sha256().hashBytes(data).toString();
     }
@@ -256,4 +310,5 @@ public class BaseResourceService extends AbstractCachedEntityService<ResourceInf
             cache.evict(new ResourceInfoCacheKey(event.getTenantId(), event.getResourceId()));
         }
     }
+
 }
diff --git a/dao/src/main/java/org/thingsboard/server/dao/service/validator/DeviceProfileDataValidator.java b/dao/src/main/java/org/thingsboard/server/dao/service/validator/DeviceProfileDataValidator.java
index 2d2c7bf21c..bfff00f6b1 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/service/validator/DeviceProfileDataValidator.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/service/validator/DeviceProfileDataValidator.java
@@ -18,7 +18,7 @@ package org.thingsboard.server.dao.service.validator;
 import com.google.protobuf.Descriptors;
 import com.google.protobuf.DynamicMessage;
 import lombok.extern.slf4j.Slf4j;
-import org.eclipse.leshan.core.util.SecurityUtil;
+import org.eclipse.leshan.core.security.util.SecurityUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Lazy;
diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/user/JpaUserCredentialsDao.java b/dao/src/main/java/org/thingsboard/server/dao/sql/user/JpaUserCredentialsDao.java
index 1f502db792..f277475896 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/sql/user/JpaUserCredentialsDao.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/sql/user/JpaUserCredentialsDao.java
@@ -69,4 +69,19 @@ public class JpaUserCredentialsDao extends JpaAbstractDao<UserCredentialsEntity,
         userCredentialsRepository.removeByUserId(userId.getId());
     }
 
+    @Override
+    public void setLastLoginTs(TenantId tenantId, UserId userId, long lastLoginTs) {
+        userCredentialsRepository.updateLastLoginTsByUserId(userId.getId(), lastLoginTs);
+    }
+
+    @Override
+    public int incrementFailedLoginAttempts(TenantId tenantId, UserId userId) {
+        return userCredentialsRepository.incrementFailedLoginAttemptsByUserId(userId.getId());
+    }
+
+    @Override
+    public void setFailedLoginAttempts(TenantId tenantId, UserId userId, int failedLoginAttempts) {
+        userCredentialsRepository.updateFailedLoginAttemptsByUserId(userId.getId(), failedLoginAttempts);
+    }
+
 }
diff --git a/dao/src/main/java/org/thingsboard/server/dao/sql/user/UserCredentialsRepository.java b/dao/src/main/java/org/thingsboard/server/dao/sql/user/UserCredentialsRepository.java
index ed7746db7f..4aca40647c 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/sql/user/UserCredentialsRepository.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/sql/user/UserCredentialsRepository.java
@@ -16,6 +16,8 @@
 package org.thingsboard.server.dao.sql.user;
 
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.transaction.annotation.Transactional;
 import org.thingsboard.server.dao.model.sql.UserCredentialsEntity;
 
@@ -35,4 +37,19 @@ public interface UserCredentialsRepository extends JpaRepository<UserCredentials
     @Transactional
     void removeByUserId(UUID userId);
 
+    @Transactional
+    @Modifying
+    @Query("UPDATE UserCredentialsEntity SET lastLoginTs = :lastLoginTs WHERE userId = :userId")
+    void updateLastLoginTsByUserId(UUID userId, long lastLoginTs);
+
+    @Transactional
+    @Query(value = "UPDATE user_credentials SET failed_login_attempts = coalesce(failed_login_attempts, 0) + 1 " +
+            "WHERE user_id = :userId RETURNING failed_login_attempts", nativeQuery = true)
+    int incrementFailedLoginAttemptsByUserId(UUID userId);
+
+    @Transactional
+    @Modifying
+    @Query("UPDATE UserCredentialsEntity SET failedLoginAttempts = :failedLoginAttempts WHERE userId = :userId")
+    void updateFailedLoginAttemptsByUserId(UUID userId, int failedLoginAttempts);
+
 }
diff --git a/dao/src/main/java/org/thingsboard/server/dao/user/UserCredentialsDao.java b/dao/src/main/java/org/thingsboard/server/dao/user/UserCredentialsDao.java
index a4c70741dd..55fbe24869 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/user/UserCredentialsDao.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/user/UserCredentialsDao.java
@@ -61,4 +61,10 @@ public interface UserCredentialsDao extends Dao<UserCredentials> {
 
     void removeByUserId(TenantId tenantId, UserId userId);
 
+    void setLastLoginTs(TenantId tenantId, UserId userId, long lastLoginTs);
+
+    int incrementFailedLoginAttempts(TenantId tenantId, UserId userId);
+
+    void setFailedLoginAttempts(TenantId tenantId, UserId userId, int failedLoginAttempts);
+
 }
diff --git a/dao/src/main/java/org/thingsboard/server/dao/user/UserServiceImpl.java b/dao/src/main/java/org/thingsboard/server/dao/user/UserServiceImpl.java
index ba0d3d69f3..dc758b6b5d 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/user/UserServiceImpl.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/user/UserServiceImpl.java
@@ -17,9 +17,6 @@ package org.thingsboard.server.dao.user;
 
 import com.fasterxml.jackson.core.type.TypeReference;
 import com.fasterxml.jackson.databind.JsonNode;
-import com.fasterxml.jackson.databind.node.BooleanNode;
-import com.fasterxml.jackson.databind.node.IntNode;
-import com.fasterxml.jackson.databind.node.LongNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.util.concurrent.ListenableFuture;
 import lombok.RequiredArgsConstructor;
@@ -87,15 +84,10 @@ public class UserServiceImpl extends AbstractCachedEntityService<UserCacheKey, U
 
     public static final String USER_PASSWORD_HISTORY = "userPasswordHistory";
 
-    public static final String LAST_LOGIN_TS = "lastLoginTs";
-    public static final String FAILED_LOGIN_ATTEMPTS = "failedLoginAttempts";
-
     private static final int DEFAULT_TOKEN_LENGTH = 30;
     public static final String INCORRECT_USER_ID = "Incorrect userId ";
     public static final String INCORRECT_TENANT_ID = "Incorrect tenantId ";
 
-    private static final String USER_CREDENTIALS_ENABLED = "userCredentialsEnabled";
-
     @Value("${security.user_login_case_sensitive:true}")
     private boolean userLoginCaseSensitive;
 
@@ -428,40 +420,28 @@ public class UserServiceImpl extends AbstractCachedEntityService<UserCacheKey, U
         customerUsersRemover.removeEntities(tenantId, customerId);
     }
 
+    @Transactional
     @Override
     public void setUserCredentialsEnabled(TenantId tenantId, UserId userId, boolean enabled) {
         log.trace("Executing setUserCredentialsEnabled [{}], [{}]", userId, enabled);
         validateId(userId, id -> INCORRECT_USER_ID + id);
         UserCredentials userCredentials = userCredentialsDao.findByUserId(tenantId, userId.getId());
         userCredentials.setEnabled(enabled);
-        saveUserCredentials(tenantId, userCredentials);
-
-        User user = findUserById(tenantId, userId);
-        user.setAdditionalInfoField(USER_CREDENTIALS_ENABLED, BooleanNode.valueOf(enabled));
         if (enabled) {
-            resetFailedLoginAttempts(user);
+            userCredentials.setFailedLoginAttempts(0);
         }
-        saveUser(tenantId, user);
+        saveUserCredentials(tenantId, userCredentials);
     }
 
-
     @Override
     public void resetFailedLoginAttempts(TenantId tenantId, UserId userId) {
-        log.trace("Executing onUserLoginSuccessful [{}]", userId);
-        User user = findUserById(tenantId, userId);
-        resetFailedLoginAttempts(user);
-        saveUser(tenantId, user);
-    }
-
-    private void resetFailedLoginAttempts(User user) {
-        user.setAdditionalInfoField(FAILED_LOGIN_ATTEMPTS, IntNode.valueOf(0));
+        log.trace("Executing resetFailedLoginAttempts [{}]", userId);
+        userCredentialsDao.setFailedLoginAttempts(tenantId, userId, 0);
     }
 
     @Override
-    public void setLastLoginTs(TenantId tenantId, UserId userId) {
-        User user = findUserById(tenantId, userId);
-        user.setAdditionalInfoField(LAST_LOGIN_TS, new LongNode(System.currentTimeMillis()));
-        saveUser(tenantId, user);
+    public void updateLastLoginTs(TenantId tenantId, UserId userId) {
+        userCredentialsDao.setLastLoginTs(tenantId, userId, System.currentTimeMillis());
     }
 
     @Override
@@ -502,18 +482,8 @@ public class UserServiceImpl extends AbstractCachedEntityService<UserCacheKey, U
 
     @Override
     public int increaseFailedLoginAttempts(TenantId tenantId, UserId userId) {
-        log.trace("Executing onUserLoginIncorrectCredentials [{}]", userId);
-        User user = findUserById(tenantId, userId);
-        int failedLoginAttempts = increaseFailedLoginAttempts(user);
-        saveUser(tenantId, user);
-        return failedLoginAttempts;
-    }
-
-    private int increaseFailedLoginAttempts(User user) {
-        int failedLoginAttempts = user.getAdditionalInfoField(FAILED_LOGIN_ATTEMPTS, JsonNode::asInt, 0);
-        failedLoginAttempts++;
-        user.setAdditionalInfoField(FAILED_LOGIN_ATTEMPTS, new IntNode(failedLoginAttempts));
-        return failedLoginAttempts;
+        log.trace("Executing increaseFailedLoginAttempts [{}]", userId);
+        return userCredentialsDao.incrementFailedLoginAttempts(tenantId, userId);
     }
 
     private void updatePasswordHistory(UserCredentials userCredentials) {
diff --git a/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeServiceImpl.java b/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeServiceImpl.java
index 3e2fe0bf35..37d0c4c4ac 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeServiceImpl.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetTypeServiceImpl.java
@@ -44,7 +44,6 @@ import org.thingsboard.server.dao.service.Validator;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
-import java.util.stream.Collectors;
 
 import static org.thingsboard.server.dao.service.Validator.validateIds;
 
@@ -218,7 +217,7 @@ public class WidgetTypeServiceImpl implements WidgetTypeService {
         List<WidgetTypeId> toRemove = existingBundleWidgets.stream()
                 .map(WidgetsBundleWidget::getWidgetTypeId)
                 .filter(widgetTypeId -> bundleWidgets.stream().noneMatch(newBundleWidget ->
-                        newBundleWidget.getWidgetTypeId().equals(widgetTypeId))).collect(Collectors.toList());
+                        newBundleWidget.getWidgetTypeId().equals(widgetTypeId))).toList();
         for (WidgetTypeId widgetTypeId : toRemove) {
             widgetTypeDao.removeWidgetTypeFromWidgetsBundle(widgetsBundleId.getId(), widgetTypeId.getId());
         }
@@ -243,6 +242,12 @@ public class WidgetTypeServiceImpl implements WidgetTypeService {
         tenantWidgetTypeRemover.removeEntities(tenantId, tenantId);
     }
 
+    @Override
+    public void deleteWidgetTypesByBundleId(TenantId tenantId, WidgetsBundleId bundleId) {
+        log.trace("Executing deleteWidgetTypesByBundleId, tenantId [{}], bundleId [{}]", tenantId, bundleId);
+        bundleWidgetTypesRemover.removeEntities(tenantId, bundleId);
+    }
+
     @Override
     public void deleteByTenantId(TenantId tenantId) {
         deleteWidgetTypesByTenantId(tenantId);
@@ -258,24 +263,36 @@ public class WidgetTypeServiceImpl implements WidgetTypeService {
         return EntityType.WIDGET_TYPE;
     }
 
-    private PaginatedRemover<TenantId, WidgetTypeInfo> tenantWidgetTypeRemover =
-            new PaginatedRemover<>() {
-
-                @Override
-                protected PageData<WidgetTypeInfo> findEntities(TenantId tenantId, TenantId id, PageLink pageLink) {
-                    return widgetTypeDao.findTenantWidgetTypesByTenantId(
-                            WidgetTypeFilter.builder()
-                                .tenantId(id)
-                                .fullSearch(false)
-                                .deprecatedFilter(DeprecatedFilter.ALL)
-                                .widgetTypes(null).build(),
-                            pageLink);
-                }
-
-                @Override
-                protected void removeEntity(TenantId tenantId, WidgetTypeInfo entity) {
-                    deleteWidgetType(tenantId, new WidgetTypeId(entity.getUuidId()));
-                }
-            };
+    private final PaginatedRemover<TenantId, WidgetTypeInfo> tenantWidgetTypeRemover = new PaginatedRemover<>() {
+
+        @Override
+        protected PageData<WidgetTypeInfo> findEntities(TenantId tenantId, TenantId id, PageLink pageLink) {
+            return widgetTypeDao.findTenantWidgetTypesByTenantId(
+                    WidgetTypeFilter.builder()
+                            .tenantId(id)
+                            .fullSearch(false)
+                            .deprecatedFilter(DeprecatedFilter.ALL)
+                            .widgetTypes(null).build(),
+                    pageLink);
+        }
+
+        @Override
+        protected void removeEntity(TenantId tenantId, WidgetTypeInfo entity) {
+            deleteWidgetType(tenantId, new WidgetTypeId(entity.getUuidId()));
+        }
+    };
+
+    private final PaginatedRemover<WidgetsBundleId, WidgetTypeInfo> bundleWidgetTypesRemover = new PaginatedRemover<>() {
+
+        @Override
+        protected PageData<WidgetTypeInfo> findEntities(TenantId tenantId, WidgetsBundleId widgetsBundleId, PageLink pageLink) {
+            return findWidgetTypesInfosByWidgetsBundleId(tenantId, widgetsBundleId, false, DeprecatedFilter.ALL, null, pageLink);
+        }
+
+        @Override
+        protected void removeEntity(TenantId tenantId, WidgetTypeInfo widgetTypeInfo) {
+            deleteWidgetType(tenantId, widgetTypeInfo.getId());
+        }
+    };
 
 }
diff --git a/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleServiceImpl.java b/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleServiceImpl.java
index d7006e9e56..e4ab458b92 100644
--- a/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleServiceImpl.java
+++ b/dao/src/main/java/org/thingsboard/server/dao/widget/WidgetsBundleServiceImpl.java
@@ -15,17 +15,23 @@
  */
 package org.thingsboard.server.dao.widget;
 
+import com.fasterxml.jackson.databind.JsonNode;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.ApplicationEventPublisher;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.thingsboard.common.util.JacksonUtil;
 import org.thingsboard.server.common.data.EntityType;
+import org.thingsboard.server.common.data.ResourceType;
 import org.thingsboard.server.common.data.id.EntityId;
 import org.thingsboard.server.common.data.id.HasId;
 import org.thingsboard.server.common.data.id.TenantId;
 import org.thingsboard.server.common.data.id.WidgetsBundleId;
 import org.thingsboard.server.common.data.page.PageData;
 import org.thingsboard.server.common.data.page.PageLink;
+import org.thingsboard.server.common.data.widget.WidgetType;
+import org.thingsboard.server.common.data.widget.WidgetTypeDetails;
 import org.thingsboard.server.common.data.widget.WidgetsBundle;
 import org.thingsboard.server.common.data.widget.WidgetsBundleFilter;
 import org.thingsboard.server.dao.entity.AbstractCachedEntityService;
@@ -33,6 +39,7 @@ import org.thingsboard.server.dao.eventsourcing.DeleteEntityEvent;
 import org.thingsboard.server.dao.eventsourcing.SaveEntityEvent;
 import org.thingsboard.server.dao.exception.IncorrectParameterException;
 import org.thingsboard.server.dao.resource.ImageService;
+import org.thingsboard.server.dao.resource.ResourceService;
 import org.thingsboard.server.dao.service.DataValidator;
 import org.thingsboard.server.dao.service.PaginatedRemover;
 import org.thingsboard.server.dao.service.Validator;
@@ -40,6 +47,7 @@ import org.thingsboard.server.dao.service.Validator;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
+import java.util.stream.Stream;
 
 @Service("WidgetsBundleDaoService")
 @Slf4j
@@ -64,6 +72,9 @@ public class WidgetsBundleServiceImpl implements WidgetsBundleService {
     @Autowired
     private ImageService imageService;
 
+    @Autowired
+    private ResourceService resourceService;
+
     @Override
     public WidgetsBundle findWidgetsBundleById(TenantId tenantId, WidgetsBundleId widgetsBundleId) {
         log.trace("Executing findWidgetsBundleById [{}]", widgetsBundleId);
@@ -196,6 +207,71 @@ public class WidgetsBundleServiceImpl implements WidgetsBundleService {
         deleteWidgetsBundlesByTenantId(tenantId);
     }
 
+    @Transactional
+    @Override
+    public void updateSystemWidgets(Stream<String> bundles, Stream<String> widgets) {
+        widgets.forEach(widgetTypeJson -> {
+            try {
+                updateSystemWidget(widgetTypeJson);
+            } catch (Exception e) {
+                throw new RuntimeException("Unable to load widget type from json: " + widgetTypeJson, e);
+            }
+        });
+
+        bundles.forEach(widgetsBundleDescriptorJson -> {
+            JsonNode widgetsBundleDescriptor = JacksonUtil.toJsonNode(widgetsBundleDescriptorJson);
+            if (widgetsBundleDescriptor == null || !widgetsBundleDescriptor.has("widgetsBundle")) {
+                throw new RuntimeException("Invalid widgets bundle json: [" + widgetsBundleDescriptorJson + "]");
+            }
+
+            JsonNode widgetsBundleJson = widgetsBundleDescriptor.get("widgetsBundle");
+            WidgetsBundle widgetsBundle = JacksonUtil.treeToValue(widgetsBundleJson, WidgetsBundle.class);
+            WidgetsBundle existingWidgetsBundle = findWidgetsBundleByTenantIdAndAlias(TenantId.SYS_TENANT_ID, widgetsBundle.getAlias());
+            if (existingWidgetsBundle != null) {
+                widgetsBundle.setId(existingWidgetsBundle.getId());
+                widgetsBundle.setCreatedTime(existingWidgetsBundle.getCreatedTime());
+            }
+            widgetsBundle.setTenantId(TenantId.SYS_TENANT_ID);
+            widgetsBundle = saveWidgetsBundle(widgetsBundle);
+            log.debug("{} widgets bundle {}", existingWidgetsBundle == null ? "Created" : "Updated", widgetsBundle.getAlias());
+
+            List<String> widgetTypeFqns = new ArrayList<>();
+            if (widgetsBundleDescriptor.has("widgetTypes")) {
+                JsonNode widgetTypesArrayJson = widgetsBundleDescriptor.get("widgetTypes");
+                widgetTypesArrayJson.forEach(widgetTypeJson -> {
+                    try {
+                        WidgetTypeDetails widgetTypeDetails = updateSystemWidget(widgetTypeJson.toString());
+                        widgetTypeFqns.add(widgetTypeDetails.getFqn());
+                    } catch (Exception e) {
+                        throw new RuntimeException("Unable to load widget type from json: " + widgetsBundleDescriptorJson, e);
+                    }
+                });
+            }
+            if (widgetsBundleDescriptor.has("widgetTypeFqns")) {
+                JsonNode widgetFqnsArrayJson = widgetsBundleDescriptor.get("widgetTypeFqns");
+                widgetFqnsArrayJson.forEach(fqnJson -> {
+                    widgetTypeFqns.add(fqnJson.asText());
+                });
+            }
+            widgetTypeService.updateWidgetsBundleWidgetFqns(TenantId.SYS_TENANT_ID, widgetsBundle.getId(), widgetTypeFqns);
+        });
+    }
+
+    private WidgetTypeDetails updateSystemWidget(String widgetTypeJson) {
+        widgetTypeJson = resourceService.checkSystemResourcesUsage(widgetTypeJson, ResourceType.JS_MODULE);
+
+        WidgetTypeDetails widgetTypeDetails = JacksonUtil.fromString(widgetTypeJson, WidgetTypeDetails.class);
+        WidgetType existingWidget = widgetTypeService.findWidgetTypeByTenantIdAndFqn(TenantId.SYS_TENANT_ID, widgetTypeDetails.getFqn());
+        if (existingWidget != null) {
+            widgetTypeDetails.setId(existingWidget.getId());
+            widgetTypeDetails.setCreatedTime(existingWidget.getCreatedTime());
+        }
+        widgetTypeDetails.setTenantId(TenantId.SYS_TENANT_ID);
+        widgetTypeDetails = widgetTypeService.saveWidgetType(widgetTypeDetails);
+        log.debug("{} widget type {}", existingWidget == null ? "Created" : "Updated", widgetTypeDetails.getFqn());
+        return widgetTypeDetails;
+    }
+
     @Override
     public Optional<HasId<?>> findEntity(TenantId tenantId, EntityId entityId) {
         return Optional.ofNullable(findWidgetsBundleById(tenantId, new WidgetsBundleId(entityId.getId())));
diff --git a/dao/src/main/resources/sql/schema-entities.sql b/dao/src/main/resources/sql/schema-entities.sql
index 9c95f385f8..a2f6e461bf 100644
--- a/dao/src/main/resources/sql/schema-entities.sql
+++ b/dao/src/main/resources/sql/schema-entities.sql
@@ -20,18 +20,6 @@ CREATE TABLE IF NOT EXISTS tb_schema_settings
     CONSTRAINT tb_schema_settings_pkey PRIMARY KEY (schema_version)
 );
 
-CREATE OR REPLACE PROCEDURE insert_tb_schema_settings()
-    LANGUAGE plpgsql AS
-$$
-BEGIN
-    IF (SELECT COUNT(*) FROM tb_schema_settings) = 0 THEN
-        INSERT INTO tb_schema_settings (schema_version) VALUES (3006004);
-    END IF;
-END;
-$$;
-
-call insert_tb_schema_settings();
-
 CREATE TABLE IF NOT EXISTS admin_settings (
     id uuid NOT NULL CONSTRAINT admin_settings_pkey PRIMARY KEY,
     tenant_id uuid NOT NULL,
@@ -497,7 +485,9 @@ CREATE TABLE IF NOT EXISTS user_credentials (
     reset_token varchar(255) UNIQUE,
     reset_token_exp_time BIGINT,
     user_id uuid UNIQUE,
-    additional_info varchar DEFAULT '{}'
+    additional_info varchar DEFAULT '{}',
+    last_login_ts BIGINT,
+    failed_login_attempts INT
 );
 
 CREATE TABLE IF NOT EXISTS widget_type (
diff --git a/dao/src/test/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDaoTest.java b/dao/src/test/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDaoTest.java
new file mode 100644
index 0000000000..bddd2f4f8c
--- /dev/null
+++ b/dao/src/test/java/org/thingsboard/server/dao/sqlts/SqlTimeseriesLatestDaoTest.java
@@ -0,0 +1,115 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.dao.sqlts;
+
+import com.google.common.util.concurrent.ListenableFuture;
+import org.apache.commons.lang3.RandomStringUtils;
+import org.junit.Assert;
+import org.junit.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.thingsboard.server.common.data.id.DeviceId;
+import org.thingsboard.server.common.data.kv.BasicTsKvEntry;
+import org.thingsboard.server.common.data.kv.StringDataEntry;
+import org.thingsboard.server.common.data.kv.TsKvEntry;
+import org.thingsboard.server.dao.service.AbstractServiceTest;
+import org.thingsboard.server.dao.service.DaoSqlTest;
+import org.thingsboard.server.dao.timeseries.TimeseriesLatestDao;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNotNull;
+import static org.junit.jupiter.api.Assertions.assertNull;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+@DaoSqlTest
+public class SqlTimeseriesLatestDaoTest extends AbstractServiceTest {
+
+    @Autowired
+    private TimeseriesLatestDao timeseriesLatestDao;
+
+    @Test
+    public void saveLatestTest() throws Exception {
+        DeviceId deviceId = new DeviceId(UUID.randomUUID());
+        var entry = createEntry("key", 1000);
+        Long version = timeseriesLatestDao.saveLatest(tenantId, deviceId, entry).get();
+        assertNotNull(version);
+        assertTrue(version > 0);
+
+        TsKvEntry foundEntry = timeseriesLatestDao.findLatest(tenantId, deviceId, "key").get();
+        assertNotNull(foundEntry);
+        equalsIgnoreVersion(entry, foundEntry);
+        assertEquals(version, foundEntry.getVersion());
+
+        var updatedEntry = createEntry("key", 2000);
+        Long updatedVersion = timeseriesLatestDao.saveLatest(tenantId, deviceId, updatedEntry).get();
+        assertNotNull(updatedVersion);
+        assertTrue(updatedVersion > version);
+
+        foundEntry = timeseriesLatestDao.findLatest(tenantId, deviceId, "key").get();
+        assertNotNull(foundEntry);
+        equalsIgnoreVersion(updatedEntry, foundEntry);
+        assertEquals(updatedVersion, foundEntry.getVersion());
+
+        var oldEntry = createEntry("key", 1);
+        Long oldVersion = timeseriesLatestDao.saveLatest(tenantId, deviceId, oldEntry).get();
+        assertNull(oldVersion);
+
+        foundEntry = timeseriesLatestDao.findLatest(tenantId, deviceId, "key").get();
+        assertNotNull(foundEntry);
+        equalsIgnoreVersion(updatedEntry, foundEntry);
+        assertEquals(updatedVersion, foundEntry.getVersion());
+    }
+
+    @Test
+    public void updateWithOldTsTest() throws Exception {
+        DeviceId deviceId = new DeviceId(UUID.randomUUID());
+        int n = 50;
+        for (int i = 0; i < n; i++) {
+            timeseriesLatestDao.saveLatest(tenantId, deviceId, createEntry("key_" + i, System.currentTimeMillis()));
+        }
+
+        List<ListenableFuture<Long>> futures = new ArrayList<>(n);
+
+        for (int i = 0; i < n; i++) {
+            long ts = i % 2 == 0 ? System.currentTimeMillis() : 1000;
+            futures.add(timeseriesLatestDao.saveLatest(tenantId, deviceId, createEntry("key_" + i, ts)));
+        }
+
+        for (int i = 0; i < futures.size(); i++) {
+            Long version = futures.get(i).get();
+            if (i % 2 == 0) {
+                assertNotNull(version);
+                assertTrue(version > 0);
+            } else {
+                assertNull(version);
+            }
+        }
+    }
+
+    private TsKvEntry createEntry(String key, long ts) {
+        return new BasicTsKvEntry(ts, new StringDataEntry(key, RandomStringUtils.random(10)));
+    }
+
+    private void equalsIgnoreVersion(TsKvEntry expected, TsKvEntry actual) {
+        Assert.assertEquals(expected.getKey(), actual.getKey());
+        Assert.assertEquals(expected.getValue(), actual.getValue());
+        Assert.assertEquals(expected.getTs(), actual.getTs());
+    }
+
+}
diff --git a/docker/docker-compose.hybrid.yml b/docker/docker-compose.hybrid.yml
index 43f1e81cd1..5bffa9fb1d 100644
--- a/docker/docker-compose.hybrid.yml
+++ b/docker/docker-compose.hybrid.yml
@@ -19,7 +19,7 @@ version: '3.0'
 services:
   postgres:
     restart: always
-    image: "postgres:15"
+    image: "postgres:16"
     ports:
       - "5432"
     environment:
diff --git a/docker/docker-compose.postgres.yml b/docker/docker-compose.postgres.yml
index 780d2ccefd..50844fa2eb 100644
--- a/docker/docker-compose.postgres.yml
+++ b/docker/docker-compose.postgres.yml
@@ -19,7 +19,7 @@ version: '3.0'
 services:
   postgres:
     restart: always
-    image: "postgres:15"
+    image: "postgres:16"
     ports:
     - "5432"
     environment:
diff --git a/monitoring/pom.xml b/monitoring/pom.xml
index 957267dc6e..013a0b5c47 100644
--- a/monitoring/pom.xml
+++ b/monitoring/pom.xml
@@ -21,7 +21,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
 
diff --git a/msa/black-box-tests/pom.xml b/msa/black-box-tests/pom.xml
index c3adaffde2..4d34a13f38 100644
--- a/msa/black-box-tests/pom.xml
+++ b/msa/black-box-tests/pom.xml
@@ -21,7 +21,7 @@
 
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/msa/js-executor/package.json b/msa/js-executor/package.json
index 17531a9df5..7f11bafbce 100644
--- a/msa/js-executor/package.json
+++ b/msa/js-executor/package.json
@@ -1,7 +1,7 @@
 {
   "name": "thingsboard-js-executor",
   "private": true,
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "ThingsBoard JavaScript Executor Microservice",
   "main": "server.ts",
   "bin": "server.js",
diff --git a/msa/js-executor/pom.xml b/msa/js-executor/pom.xml
index c16cf662ec..c42b987b03 100644
--- a/msa/js-executor/pom.xml
+++ b/msa/js-executor/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/msa/monitoring/pom.xml b/msa/monitoring/pom.xml
index 73454db230..3a4834236c 100644
--- a/msa/monitoring/pom.xml
+++ b/msa/monitoring/pom.xml
@@ -22,7 +22,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
 
diff --git a/msa/pom.xml b/msa/pom.xml
index f6c406e290..d77384cc74 100644
--- a/msa/pom.xml
+++ b/msa/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>msa</artifactId>
diff --git a/msa/tb-node/pom.xml b/msa/tb-node/pom.xml
index 36b20b67dd..11295dc4b9 100644
--- a/msa/tb-node/pom.xml
+++ b/msa/tb-node/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/msa/tb/docker-cassandra/Dockerfile b/msa/tb/docker-cassandra/Dockerfile
index 18071b249b..27613fe161 100644
--- a/msa/tb/docker-cassandra/Dockerfile
+++ b/msa/tb/docker-cassandra/Dockerfile
@@ -16,7 +16,7 @@
 
 FROM thingsboard/openjdk17:bookworm-slim
 
-ENV PG_MAJOR=15
+ENV PG_MAJOR=16
 
 ENV DATA_FOLDER=/data
 
diff --git a/msa/tb/pom.xml b/msa/tb/pom.xml
index 0ff97ebea5..79a2a66385 100644
--- a/msa/tb/pom.xml
+++ b/msa/tb/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
@@ -38,7 +38,7 @@
         <tb-postgres.docker.name>tb-postgres</tb-postgres.docker.name>
         <tb-cassandra.docker.name>tb-cassandra</tb-cassandra.docker.name>
         <pkg.installFolder>/usr/share/${pkg.name}</pkg.installFolder>
-        <pkg.upgradeVersion>3.8.0</pkg.upgradeVersion>
+        <pkg.upgradeVersion>3.9.0</pkg.upgradeVersion>
     </properties>
 
     <dependencies>
diff --git a/msa/transport/coap/pom.xml b/msa/transport/coap/pom.xml
index 21222dc736..9ec8589d9a 100644
--- a/msa/transport/coap/pom.xml
+++ b/msa/transport/coap/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.msa</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.msa.transport</groupId>
diff --git a/msa/transport/http/pom.xml b/msa/transport/http/pom.xml
index 82e89187d5..d562f89cd5 100644
--- a/msa/transport/http/pom.xml
+++ b/msa/transport/http/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.msa</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.msa.transport</groupId>
diff --git a/msa/transport/lwm2m/pom.xml b/msa/transport/lwm2m/pom.xml
index dd42a3332e..992187316a 100644
--- a/msa/transport/lwm2m/pom.xml
+++ b/msa/transport/lwm2m/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.msa</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.msa.transport</groupId>
diff --git a/msa/transport/mqtt/pom.xml b/msa/transport/mqtt/pom.xml
index 6a653e3a8b..32aa6a4f23 100644
--- a/msa/transport/mqtt/pom.xml
+++ b/msa/transport/mqtt/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard.msa</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.msa.transport</groupId>
diff --git a/msa/transport/pom.xml b/msa/transport/pom.xml
index 0b73c3214f..34be0bd338 100644
--- a/msa/transport/pom.xml
+++ b/msa/transport/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/msa/transport/snmp/pom.xml b/msa/transport/snmp/pom.xml
index fc3ef47797..95919ad175 100644
--- a/msa/transport/snmp/pom.xml
+++ b/msa/transport/snmp/pom.xml
@@ -21,7 +21,7 @@
     <parent>
         <groupId>org.thingsboard.msa</groupId>
         <artifactId>transport</artifactId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
     </parent>
 
     <groupId>org.thingsboard.msa.transport</groupId>
diff --git a/msa/vc-executor-docker/pom.xml b/msa/vc-executor-docker/pom.xml
index 26787ca2aa..8aeeed2b1e 100644
--- a/msa/vc-executor-docker/pom.xml
+++ b/msa/vc-executor-docker/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/msa/vc-executor/pom.xml b/msa/vc-executor/pom.xml
index 98ef210798..0932bf7c06 100644
--- a/msa/vc-executor/pom.xml
+++ b/msa/vc-executor/pom.xml
@@ -21,7 +21,7 @@
 
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/msa/web-ui/package.json b/msa/web-ui/package.json
index ec7a869aff..3ed1d69a22 100644
--- a/msa/web-ui/package.json
+++ b/msa/web-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "thingsboard-web-ui",
   "private": true,
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "ThingsBoard Web UI Microservice",
   "main": "server.ts",
   "bin": "server.js",
diff --git a/msa/web-ui/pom.xml b/msa/web-ui/pom.xml
index 0625dee9e7..bef4b5fee3 100644
--- a/msa/web-ui/pom.xml
+++ b/msa/web-ui/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>msa</artifactId>
     </parent>
     <groupId>org.thingsboard.msa</groupId>
diff --git a/netty-mqtt/pom.xml b/netty-mqtt/pom.xml
index c41faf8ec3..7de766b2da 100644
--- a/netty-mqtt/pom.xml
+++ b/netty-mqtt/pom.xml
@@ -19,11 +19,11 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>netty-mqtt</artifactId>
-    <version>3.8.0-RC</version>
+    <version>3.9.0-SNAPSHOT</version>
     <packaging>jar</packaging>
 
     <name>Netty MQTT Client</name>
diff --git a/pom.xml b/pom.xml
index d96782ce68..a1d5f26ecf 100755
--- a/pom.xml
+++ b/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>org.thingsboard</groupId>
     <artifactId>thingsboard</artifactId>
-    <version>3.8.0-RC</version>
+    <version>3.9.0-SNAPSHOT</version>
     <packaging>pom</packaging>
 
     <name>Thingsboard</name>
@@ -74,8 +74,8 @@
         <fasterxml-classmate.version>1.7.0</fasterxml-classmate.version>
         <auth0-jwt.version>4.4.0</auth0-jwt.version>
         <json-schema-validator.version>2.2.14</json-schema-validator.version>
-        <californium.version>3.11.0</californium.version>
-        <leshan.version>2.0.0-M14</leshan.version>
+        <californium.version>3.12.1</californium.version>
+        <leshan.version>2.0.0-M15</leshan.version>
         <gson.version>2.10.1</gson.version>
         <freemarker.version>2.3.32</freemarker.version>
         <mail.version>2.0.1</mail.version>
@@ -83,7 +83,7 @@
         <zookeeper.version>3.9.2</zookeeper.version>
         <protobuf.version>3.25.3</protobuf.version> <!-- A Major v4 does not support by the pubsub yet-->
         <grpc.version>1.63.0</grpc.version>
-        <tbel.version>1.2.3</tbel.version>
+        <tbel.version>1.2.4</tbel.version>
         <lombok.version>1.18.32</lombok.version>
         <paho.client.version>1.2.5</paho.client.version>
         <paho.mqttv5.client.version>1.2.5</paho.mqttv5.client.version>
@@ -849,6 +849,7 @@
                             <exclude>.run/**</exclude>
                             <exclude>**/NetworkReceive.java</exclude>
                             <exclude>**/lwm2m-registry/**</exclude>
+                            <exclude>src/main/data/resources/**</exclude>
                         </excludes>
                         <mapping>
                             <proto>JAVADOC_STYLE</proto>
diff --git a/rest-client/pom.xml b/rest-client/pom.xml
index 9517f25dc7..069f7b84f0 100644
--- a/rest-client/pom.xml
+++ b/rest-client/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>rest-client</artifactId>
diff --git a/rule-engine/pom.xml b/rule-engine/pom.xml
index 862e7efc99..e6abae70ef 100644
--- a/rule-engine/pom.xml
+++ b/rule-engine/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>rule-engine</artifactId>
diff --git a/rule-engine/rule-engine-api/pom.xml b/rule-engine/rule-engine-api/pom.xml
index 755674f987..57bc5771d2 100644
--- a/rule-engine/rule-engine-api/pom.xml
+++ b/rule-engine/rule-engine-api/pom.xml
@@ -22,7 +22,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>rule-engine</artifactId>
     </parent>
     <groupId>org.thingsboard.rule-engine</groupId>
diff --git a/rule-engine/rule-engine-api/src/main/java/org/thingsboard/rule/engine/api/NotificationCenter.java b/rule-engine/rule-engine-api/src/main/java/org/thingsboard/rule/engine/api/NotificationCenter.java
index d108a6981d..ce2ff08734 100644
--- a/rule-engine/rule-engine-api/src/main/java/org/thingsboard/rule/engine/api/NotificationCenter.java
+++ b/rule-engine/rule-engine-api/src/main/java/org/thingsboard/rule/engine/api/NotificationCenter.java
@@ -23,6 +23,7 @@ import org.thingsboard.server.common.data.id.UserId;
 import org.thingsboard.server.common.data.notification.NotificationDeliveryMethod;
 import org.thingsboard.server.common.data.notification.NotificationRequest;
 import org.thingsboard.server.common.data.notification.NotificationRequestStats;
+import org.thingsboard.server.common.data.notification.info.GeneralNotificationInfo;
 import org.thingsboard.server.common.data.notification.targets.platform.UsersFilter;
 import org.thingsboard.server.common.data.notification.template.NotificationTemplate;
 
@@ -32,7 +33,7 @@ public interface NotificationCenter {
 
     NotificationRequest processNotificationRequest(TenantId tenantId, NotificationRequest notificationRequest, FutureCallback<NotificationRequestStats> callback);
 
-    void sendGeneralWebNotification(TenantId tenantId, UsersFilter recipients, NotificationTemplate template);
+    void sendGeneralWebNotification(TenantId tenantId, UsersFilter recipients, NotificationTemplate template, GeneralNotificationInfo info);
 
     void deleteNotificationRequest(TenantId tenantId, NotificationRequestId notificationRequestId);
 
diff --git a/rule-engine/rule-engine-components/pom.xml b/rule-engine/rule-engine-components/pom.xml
index 21c5b9acad..99853b0950 100644
--- a/rule-engine/rule-engine-components/pom.xml
+++ b/rule-engine/rule-engine-components/pom.xml
@@ -22,7 +22,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>rule-engine</artifactId>
     </parent>
     <groupId>org.thingsboard.rule-engine</groupId>
diff --git a/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js b/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
index b0eda511ce..910cc7145b 100644
--- a/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
+++ b/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
@@ -1,25 +1 @@
-System.register(["@angular/core","@shared/public-api","@ngrx/store","@angular/forms","@angular/common","@angular/material/input","@angular/material/form-field","@angular/material/slide-toggle","@angular/flex-layout/flex","@ngx-translate/core","@angular/material/button","@angular/material/icon","@angular/material/select","@angular/material/core","@angular/material/tooltip","@angular/material/expansion","rxjs","@shared/components/hint-tooltip-icon.component","@shared/components/help-popup.component","@shared/pipe/safe.pipe","@core/public-api","@shared/components/js-func.component","@shared/components/script-lang.component","@angular/cdk/keycodes","@angular/material/checkbox","@angular/material/chips","@shared/components/entity/entity-type-select.component","@shared/components/relation/relation-type-autocomplete.component","@shared/components/entity/entity-select.component","@shared/components/toggle-header.component","@shared/components/toggle-select.component","@angular/cdk/coercion","@shared/components/tb-error.component","@angular/flex-layout/extended","@angular/material/list","@angular/cdk/drag-drop","rxjs/operators","@angular/material/autocomplete","@shared/pipe/highlight.pipe","@home/components/public-api","tslib","@shared/components/entity/entity-subtype-list.component","@home/components/relation/relation-filters.component","@shared/components/file-input.component","@shared/components/button/toggle-password.component","@shared/components/string-items-list.component","@shared/components/entity/entity-list.component","@shared/components/notification/template-autocomplete.component","@shared/components/tb-checkbox.component","@home/components/sms/sms-provider-configuration.component","@angular/material/radio","@shared/components/slack-conversation-autocomplete.component","@shared/components/entity/entity-autocomplete.component","@shared/components/entity/entity-type-list.component","@angular/cdk/platform"],(function(e){"use strict";var t,n,r,o,a,i,l,s,m,p,d,u,c,g,f,y,b,x,h,v,C,F,k,T,L,I,S,N,q,A,M,E,w,G,D,V,P,R,O,_,B,K,H,z,U,j,$,J,Q,Y,W,Z,X,ee,te,ne,re,oe,ae,ie,le,se,me,pe,de,ue,ce,ge,fe,ye,be,xe,he,ve,Ce,Fe,ke,Te,Le,Ie,Se,Ne,qe,Ae,Me,Ee,we,Ge,De,Ve,Pe,Re,Oe,_e,Be,Ke,He,ze,Ue,je,$e,Je,Qe,Ye,We,Ze,Xe,et,tt,nt,rt,ot,at,it,lt,st,mt,pt;return{setters:[function(e){t=e,n=e.Component,r=e.InjectionToken,o=e.Injectable,a=e.Inject,i=e.Optional,l=e.EventEmitter,s=e.Directive,m=e.Input,p=e.Output,d=e.NgModule,u=e.ViewChild,c=e.forwardRef},function(e){g=e.RuleNodeConfigurationComponent,f=e.AttributeScope,y=e.telemetryTypeTranslations,b=e.ScriptLanguage,x=e.AlarmSeverity,h=e.alarmSeverityTranslations,v=e.EntitySearchDirection,C=e.EntityType,F=e.entityFields,k=e.PageComponent,T=e.messageTypeNames,L=e.MessageType,I=e.coerceBoolean,S=e.entitySearchDirectionTranslations,N=e,q=e.AlarmStatus,A=e.alarmStatusTranslations,M=e.SharedModule,E=e.AggregationType,w=e.aggregationTranslations,G=e.NotificationType,D=e.SlackChanelType,V=e.SlackChanelTypesTranslateMap},function(e){P=e},function(e){R=e,O=e.Validators,_=e.NgControl,B=e.NG_VALUE_ACCESSOR,K=e.NG_VALIDATORS,H=e.FormArray,z=e.FormGroup},function(e){U=e,j=e.DOCUMENT,$=e.CommonModule},function(e){J=e},function(e){Q=e},function(e){Y=e},function(e){W=e},function(e){Z=e},function(e){X=e},function(e){ee=e},function(e){te=e},function(e){ne=e},function(e){re=e},function(e){oe=e},function(e){ae=e.Subject,ie=e.takeUntil,le=e.of,se=e.EMPTY,me=e.fromEvent},function(e){pe=e},function(e){de=e},function(e){ue=e},function(e){ce=e.getCurrentAuthState,ge=e,fe=e.isDefinedAndNotNull,ye=e.isEqual,be=e.deepTrim,xe=e.isObject,he=e.isNotEmptyStr},function(e){ve=e},function(e){Ce=e},function(e){Fe=e.ENTER,ke=e.COMMA,Te=e.SEMICOLON},function(e){Le=e},function(e){Ie=e},function(e){Se=e},function(e){Ne=e},function(e){qe=e},function(e){Ae=e},function(e){Me=e},function(e){Ee=e.coerceBooleanProperty,we=e.coerceElement,Ge=e.coerceNumberProperty},function(e){De=e},function(e){Ve=e},function(e){Pe=e},function(e){Re=e},function(e){Oe=e.tap,_e=e.map,Be=e.startWith,Ke=e.mergeMap,He=e.share,ze=e.takeUntil,Ue=e.auditTime},function(e){je=e},function(e){$e=e},function(e){Je=e.HomeComponentsModule},function(e){Qe=e.__decorate},function(e){Ye=e},function(e){We=e},function(e){Ze=e},function(e){Xe=e},function(e){et=e},function(e){tt=e},function(e){nt=e},function(e){rt=e},function(e){ot=e},function(e){at=e},function(e){it=e},function(e){lt=e},function(e){st=e},function(e){mt=e.normalizePassiveListenerOptions,pt=e}],execute:function(){class dt extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.emptyConfigForm}onConfigurationSet(e){this.emptyConfigForm=this.fb.group({})}}e("EmptyConfigComponent",dt),dt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:dt,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),dt.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:dt,selector:"tb-node-empty-config",usesInheritance:!0,ngImport:t,template:"<div></div>",isInline:!0}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:dt,decorators:[{type:n,args:[{selector:"tb-node-empty-config",template:"<div></div>"}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class ut extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.assignCustomerConfigForm}onConfigurationSet(e){this.assignCustomerConfigForm=this.fb.group({customerNamePattern:[e?e.customerNamePattern:null,[O.required,O.pattern(/.*\S.*/)]],createCustomerIfNotExists:[!!e&&e.createCustomerIfNotExists,[]]})}prepareOutputConfig(e){return e.customerNamePattern=e.customerNamePattern.trim(),e}}e("AssignCustomerConfigComponent",ut),ut.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ut,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),ut.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:ut,selector:"tb-action-node-assign-to-customer-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="assignCustomerConfigForm" fxLayout="column">\n  <div class="tb-form-panel no-padding no-border">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n      <input required matInput formControlName="customerNamePattern">\n      <mat-error *ngIf="assignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\') ||\n                        assignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'pattern\')">\n        {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint translate>tb.rulenode.customer-name-pattern-hint</mat-hint>\n    </mat-form-field>\n    <div class="tb-form-row">\n      <mat-slide-toggle class="mat-slide" formControlName="createCustomerIfNotExists">\n        {{ \'tb.rulenode.create-customer-if-not-exists\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ut,decorators:[{type:n,args:[{selector:"tb-action-node-assign-to-customer-config",template:'<section [formGroup]="assignCustomerConfigForm" fxLayout="column">\n  <div class="tb-form-panel no-padding no-border">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n      <input required matInput formControlName="customerNamePattern">\n      <mat-error *ngIf="assignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\') ||\n                        assignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'pattern\')">\n        {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint translate>tb.rulenode.customer-name-pattern-hint</mat-hint>\n    </mat-form-field>\n    <div class="tb-form-row">\n      <mat-slide-toggle class="mat-slide" formControlName="createCustomerIfNotExists">\n        {{ \'tb.rulenode.create-customer-if-not-exists\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});const ct=new r("WindowToken","undefined"!=typeof window&&window.document?{providedIn:"root",factory:()=>window}:{providedIn:"root",factory:()=>{}});class gt{constructor(e,t,n){this.ngZone=e,this.document=t,this.window=n,this.copySubject=new ae,this.copyResponse$=this.copySubject.asObservable(),this.config={}}configure(e){this.config=e}copy(e){if(!this.isSupported||!e)return this.pushCopyResponse({isSuccess:!1,content:e});const t=this.copyFromContent(e);return t?this.pushCopyResponse({content:e,isSuccess:t}):this.pushCopyResponse({isSuccess:!1,content:e})}get isSupported(){return!!this.document.queryCommandSupported&&!!this.document.queryCommandSupported("copy")&&!!this.window}isTargetValid(e){if(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement){if(e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');return!0}throw new Error("Target should be input or textarea")}copyFromInputElement(e,t=!0){try{this.selectTarget(e);const n=this.copyText();return this.clearSelection(t?e:void 0,this.window),n&&this.isCopySuccessInIE11()}catch(e){return!1}}isCopySuccessInIE11(){const e=this.window.clipboardData;return!(e&&e.getData&&!e.getData("Text"))}copyFromContent(e,t=this.document.body){if(this.tempTextArea&&!t.contains(this.tempTextArea)&&this.destroy(this.tempTextArea.parentElement||void 0),!this.tempTextArea){this.tempTextArea=this.createTempTextArea(this.document,this.window);try{t.appendChild(this.tempTextArea)}catch(e){throw new Error("Container should be a Dom element")}}this.tempTextArea.value=e;const n=this.copyFromInputElement(this.tempTextArea,!1);return this.config.cleanUpAfterCopy&&this.destroy(this.tempTextArea.parentElement||void 0),n}destroy(e=this.document.body){this.tempTextArea&&(e.removeChild(this.tempTextArea),this.tempTextArea=void 0)}selectTarget(e){return e.select(),e.setSelectionRange(0,e.value.length),e.value.length}copyText(){return this.document.execCommand("copy")}clearSelection(e,t){e&&e.focus(),t.getSelection()?.removeAllRanges()}createTempTextArea(e,t){const n="rtl"===e.documentElement.getAttribute("dir");let r;r=e.createElement("textarea"),r.style.fontSize="12pt",r.style.border="0",r.style.padding="0",r.style.margin="0",r.style.position="absolute",r.style[n?"right":"left"]="-9999px";const o=t.pageYOffset||e.documentElement.scrollTop;return r.style.top=o+"px",r.setAttribute("readonly",""),r}pushCopyResponse(e){this.copySubject.observers.length>0&&this.ngZone.run((()=>{this.copySubject.next(e)}))}pushCopyReponse(e){this.pushCopyResponse(e)}}gt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:gt,deps:[{token:t.NgZone},{token:j},{token:ct,optional:!0}],target:t.ɵɵFactoryTarget.Injectable}),gt.ɵprov=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:gt,providedIn:"root"}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:gt,decorators:[{type:o,args:[{providedIn:"root"}]}],ctorParameters:function(){return[{type:t.NgZone},{type:void 0,decorators:[{type:a,args:[j]}]},{type:void 0,decorators:[{type:i},{type:a,args:[ct]}]}]}});class ft{constructor(e,t,n,r){this.ngZone=e,this.host=t,this.renderer=n,this.clipboardSrv=r,this.cbOnSuccess=new l,this.cbOnError=new l,this.onClick=e=>{this.clipboardSrv.isSupported?this.targetElm&&this.clipboardSrv.isTargetValid(this.targetElm)?this.handleResult(this.clipboardSrv.copyFromInputElement(this.targetElm),this.targetElm.value,e):this.cbContent&&this.handleResult(this.clipboardSrv.copyFromContent(this.cbContent,this.container),this.cbContent,e):this.handleResult(!1,void 0,e)}}ngOnInit(){this.ngZone.runOutsideAngular((()=>{this.clickListener=this.renderer.listen(this.host.nativeElement,"click",this.onClick)}))}ngOnDestroy(){this.clickListener&&this.clickListener(),this.clipboardSrv.destroy(this.container)}handleResult(e,t,n){let r={isSuccess:e,content:t,successMessage:this.cbSuccessMsg,event:n};e?this.cbOnSuccess.observed&&this.ngZone.run((()=>{this.cbOnSuccess.emit(r)})):this.cbOnError.observed&&this.ngZone.run((()=>{this.cbOnError.emit(r)})),this.clipboardSrv.pushCopyResponse(r)}}ft.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:ft,deps:[{token:t.NgZone},{token:t.ElementRef},{token:t.Renderer2},{token:gt}],target:t.ɵɵFactoryTarget.Directive}),ft.ɵdir=t.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"13.0.1",type:ft,selector:"[ngxClipboard]",inputs:{targetElm:["ngxClipboard","targetElm"],container:"container",cbContent:"cbContent",cbSuccessMsg:"cbSuccessMsg"},outputs:{cbOnSuccess:"cbOnSuccess",cbOnError:"cbOnError"},ngImport:t}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:ft,decorators:[{type:s,args:[{selector:"[ngxClipboard]"}]}],ctorParameters:function(){return[{type:t.NgZone},{type:t.ElementRef},{type:t.Renderer2},{type:gt}]},propDecorators:{targetElm:[{type:m,args:["ngxClipboard"]}],container:[{type:m}],cbContent:[{type:m}],cbSuccessMsg:[{type:m}],cbOnSuccess:[{type:p}],cbOnError:[{type:p}]}});class yt{constructor(e,t,n){this._clipboardService=e,this._viewContainerRef=t,this._templateRef=n}ngOnInit(){this._clipboardService.isSupported&&this._viewContainerRef.createEmbeddedView(this._templateRef)}}yt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:yt,deps:[{token:gt},{token:t.ViewContainerRef},{token:t.TemplateRef}],target:t.ɵɵFactoryTarget.Directive}),yt.ɵdir=t.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"13.0.1",type:yt,selector:"[ngxClipboardIfSupported]",ngImport:t}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:yt,decorators:[{type:s,args:[{selector:"[ngxClipboardIfSupported]"}]}],ctorParameters:function(){return[{type:gt},{type:t.ViewContainerRef},{type:t.TemplateRef}]}});class bt{}bt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:bt,deps:[],target:t.ɵɵFactoryTarget.NgModule}),bt.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:bt,declarations:[ft,yt],imports:[$],exports:[ft,yt]}),bt.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:bt,imports:[[$]]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.0.1",ngImport:t,type:bt,decorators:[{type:d,args:[{imports:[$],declarations:[ft,yt],exports:[ft,yt]}]}]});class xt{constructor(){this.textAlign="left"}}e("ExampleHintComponent",xt),xt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:xt,deps:[],target:t.ɵɵFactoryTarget.Component}),xt.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:xt,selector:"tb-example-hint",inputs:{hintText:"hintText",popupHelpLink:"popupHelpLink",textAlign:"textAlign"},ngImport:t,template:'<div [hidden]="!hintText" class="tb-form-hint tb-primary-fill space-between">\n  <div [innerHTML]=" hintText | translate | safe: \'html\'"\n       [style.text-align]="textAlign"\n       class="hint-text"></div>\n  <div *ngIf="popupHelpLink" class="see-example" tb-help-popup="{{ popupHelpLink }}"\n       hintMode\n       tb-help-popup-placement="right"\n       trigger-style="letter-spacing:0.25px; font-size:12px"\n       [tb-help-popup-style]="{maxWidth: \'820px\'}"\n       trigger-text="{{ \'tb.key-val.see-examples\' | translate }}">\n  </div>\n</div>\n',styles:[":host .space-between{display:flex;justify-content:space-between;gap:20px}:host .space-between .see-example{display:flex;flex-shrink:0}:host .hint-text{width:100%}\n"],dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:de.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:xt,decorators:[{type:n,args:[{selector:"tb-example-hint",template:'<div [hidden]="!hintText" class="tb-form-hint tb-primary-fill space-between">\n  <div [innerHTML]=" hintText | translate | safe: \'html\'"\n       [style.text-align]="textAlign"\n       class="hint-text"></div>\n  <div *ngIf="popupHelpLink" class="see-example" tb-help-popup="{{ popupHelpLink }}"\n       hintMode\n       tb-help-popup-placement="right"\n       trigger-style="letter-spacing:0.25px; font-size:12px"\n       [tb-help-popup-style]="{maxWidth: \'820px\'}"\n       trigger-text="{{ \'tb.key-val.see-examples\' | translate }}">\n  </div>\n</div>\n',styles:[":host .space-between{display:flex;justify-content:space-between;gap:20px}:host .space-between .see-example{display:flex;flex-shrink:0}:host .hint-text{width:100%}\n"]}]}],propDecorators:{hintText:[{type:m}],popupHelpLink:[{type:m}],textAlign:[{type:m}]}});class ht extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopeMap=f,this.attributeScopes=Object.keys(f),this.telemetryTypeTranslationsMap=y}configForm(){return this.attributesConfigForm}onConfigurationSet(e){this.attributesConfigForm=this.fb.group({scope:[e?e.scope:null,[O.required]],notifyDevice:[!e||e.notifyDevice,[]],sendAttributesUpdatedNotification:[!!e&&e.sendAttributesUpdatedNotification,[]],updateAttributesOnlyOnValueChange:[!!e&&e.updateAttributesOnlyOnValueChange,[]]}),this.attributesConfigForm.get("scope").valueChanges.subscribe((e=>{e!==f.SHARED_SCOPE&&this.attributesConfigForm.get("notifyDevice").patchValue(!1,{emitEvent:!1}),e===f.CLIENT_SCOPE&&this.attributesConfigForm.get("sendAttributesUpdatedNotification").patchValue(!1,{emitEvent:!1}),this.attributesConfigForm.get("updateAttributesOnlyOnValueChange").patchValue(!1,{emitEvent:!1})}))}}e("AttributesConfigComponent",ht),ht.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ht,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),ht.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:ht,selector:"tb-action-node-attributes-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="attributesConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="attributesConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="attributesConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <section class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header>\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div tb-hint-tooltip-icon="{{ (attributesConfigForm.get(\'updateAttributesOnlyOnValueChange\').value\n                                     ? \'tb.rulenode.update-attributes-only-on-value-change-hint-enabled\'\n                                     : \'tb.rulenode.update-attributes-only-on-value-change-hint\') | translate }}"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="updateAttributesOnlyOnValueChange">\n          {{ \'tb.rulenode.update-attributes-only-on-value-change\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.send-attributes-updated-notification-hint\' | translate }}"\n           *ngIf="attributesConfigForm.get(\'scope\').value !== attributeScopeMap.CLIENT_SCOPE"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="sendAttributesUpdatedNotification">\n          {{ \'tb.rulenode.send-attributes-updated-notification\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.notify-device-on-update-hint\' | translate }}"\n           *ngIf="attributesConfigForm.get(\'scope\').value === attributeScopeMap.SHARED_SCOPE"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">\n          {{ \'tb.rulenode.notify-device\' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </mat-expansion-panel>\n  </section>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:ft,selector:"[ngxClipboard]",inputs:["ngxClipboard","container","cbContent","cbSuccessMsg"],outputs:["cbOnSuccess","cbOnError"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ht,decorators:[{type:n,args:[{selector:"tb-action-node-attributes-config",template:'<section [formGroup]="attributesConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="attributesConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="attributesConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <section class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header>\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div tb-hint-tooltip-icon="{{ (attributesConfigForm.get(\'updateAttributesOnlyOnValueChange\').value\n                                     ? \'tb.rulenode.update-attributes-only-on-value-change-hint-enabled\'\n                                     : \'tb.rulenode.update-attributes-only-on-value-change-hint\') | translate }}"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="updateAttributesOnlyOnValueChange">\n          {{ \'tb.rulenode.update-attributes-only-on-value-change\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.send-attributes-updated-notification-hint\' | translate }}"\n           *ngIf="attributesConfigForm.get(\'scope\').value !== attributeScopeMap.CLIENT_SCOPE"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="sendAttributesUpdatedNotification">\n          {{ \'tb.rulenode.send-attributes-updated-notification\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.notify-device-on-update-hint\' | translate }}"\n           *ngIf="attributesConfigForm.get(\'scope\').value === attributeScopeMap.SHARED_SCOPE"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">\n          {{ \'tb.rulenode.notify-device\' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </mat-expansion-panel>\n  </section>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class vt extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-details-function"}configForm(){return this.clearAlarmConfigForm}onConfigurationSet(e){this.clearAlarmConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:b.JS,[O.required]],alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[]],alarmDetailsBuildTbel:[e?e.alarmDetailsBuildTbel:null,[]],alarmType:[e?e.alarmType:null,[O.required]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.clearAlarmConfigForm.get("scriptLang").value;t!==b.TBEL||this.tbelEnabled||(t=b.JS,this.clearAlarmConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.clearAlarmConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.clearAlarmConfigForm.get("alarmDetailsBuildJs").setValidators(t===b.JS?[O.required]:[]),this.clearAlarmConfigForm.get("alarmDetailsBuildJs").updateValueAndValidity({emitEvent:e}),this.clearAlarmConfigForm.get("alarmDetailsBuildTbel").setValidators(t===b.TBEL?[O.required]:[]),this.clearAlarmConfigForm.get("alarmDetailsBuildTbel").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=b.JS)),e}testScript(e){const t=this.clearAlarmConfigForm.get("scriptLang").value,n=t===b.JS?"alarmDetailsBuildJs":"alarmDetailsBuildTbel",r=t===b.JS?"rulenode/clear_alarm_node_script_fn":"rulenode/tbel/clear_alarm_node_script_fn",o=this.clearAlarmConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.clearAlarmConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.clearAlarmConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}e("ClearAlarmConfigComponent",vt),vt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vt,deps:[{token:P.Store},{token:R.UntypedFormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),vt.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:vt,selector:"tb-action-node-clear-alarm-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="clearAlarmConfigForm" fxLayout="column">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="clearAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="alarmDetailsBuildJs"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/clear_alarm_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="clearAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="alarmDetailsBuildTbel"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/clear_alarm_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ testScriptLabel | translate }}\n    </button>\n  </div>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.alarm-type</mat-label>\n    <input required matInput formControlName="alarmType">\n    <mat-error *ngIf="clearAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n      {{ \'tb.rulenode.alarm-type-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Ce.TbScriptLangComponent,selector:"tb-script-lang",inputs:["disabled"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vt,decorators:[{type:n,args:[{selector:"tb-action-node-clear-alarm-config",template:'<section [formGroup]="clearAlarmConfigForm" fxLayout="column">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="clearAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="alarmDetailsBuildJs"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/clear_alarm_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="clearAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="alarmDetailsBuildTbel"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/clear_alarm_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ testScriptLabel | translate }}\n    </button>\n  </div>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.alarm-type</mat-label>\n    <input required matInput formControlName="alarmType">\n    <mat-error *ngIf="clearAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n      {{ \'tb.rulenode.alarm-type-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}});class Ct extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.alarmSeverities=Object.keys(x),this.alarmSeverityTranslationMap=h,this.separatorKeysCodes=[Fe,ke,Te],this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-details-function"}configForm(){return this.createAlarmConfigForm}onConfigurationSet(e){this.createAlarmConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:b.JS,[O.required]],alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[]],alarmDetailsBuildTbel:[e?e.alarmDetailsBuildTbel:null,[]],useMessageAlarmData:[!!e&&e.useMessageAlarmData,[]],overwriteAlarmDetails:[!!e&&e.overwriteAlarmDetails,[]],alarmType:[e?e.alarmType:null,[]],severity:[e?e.severity:null,[]],propagate:[!!e&&e.propagate,[]],relationTypes:[e?e.relationTypes:null,[]],propagateToOwner:[!!e&&e.propagateToOwner,[]],propagateToTenant:[!!e&&e.propagateToTenant,[]],dynamicSeverity:!1}),this.createAlarmConfigForm.get("dynamicSeverity").valueChanges.subscribe((e=>{e?this.createAlarmConfigForm.get("severity").patchValue("",{emitEvent:!1}):this.createAlarmConfigForm.get("severity").patchValue(this.alarmSeverities[0],{emitEvent:!1})}))}validatorTriggers(){return["useMessageAlarmData","overwriteAlarmDetails","scriptLang"]}updateValidators(e){const t=this.createAlarmConfigForm.get("useMessageAlarmData").value,n=this.createAlarmConfigForm.get("overwriteAlarmDetails").value;t?(this.createAlarmConfigForm.get("alarmType").setValidators([]),this.createAlarmConfigForm.get("severity").setValidators([])):(this.createAlarmConfigForm.get("alarmType").setValidators([O.required]),this.createAlarmConfigForm.get("severity").setValidators([O.required])),this.createAlarmConfigForm.get("alarmType").updateValueAndValidity({emitEvent:e}),this.createAlarmConfigForm.get("severity").updateValueAndValidity({emitEvent:e});let r=this.createAlarmConfigForm.get("scriptLang").value;r!==b.TBEL||this.tbelEnabled||(r=b.JS,this.createAlarmConfigForm.get("scriptLang").patchValue(r,{emitEvent:!1}),setTimeout((()=>{this.createAlarmConfigForm.updateValueAndValidity({emitEvent:!0})})));const o=!1===t||!0===n;this.createAlarmConfigForm.get("alarmDetailsBuildJs").setValidators(o&&r===b.JS?[O.required]:[]),this.createAlarmConfigForm.get("alarmDetailsBuildTbel").setValidators(o&&r===b.TBEL?[O.required]:[]),this.createAlarmConfigForm.get("alarmDetailsBuildJs").updateValueAndValidity({emitEvent:e}),this.createAlarmConfigForm.get("alarmDetailsBuildTbel").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=b.JS)),e}testScript(e){const t=this.createAlarmConfigForm.get("scriptLang").value,n=t===b.JS?"alarmDetailsBuildJs":"alarmDetailsBuildTbel",r=t===b.JS?"rulenode/create_alarm_node_script_fn":"rulenode/tbel/create_alarm_node_script_fn",o=this.createAlarmConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.createAlarmConfigForm.get(n).setValue(e),this.changeScript.emit())}))}removeKey(e,t){const n=this.createAlarmConfigForm.get(t).value,r=n.indexOf(e);r>=0&&(n.splice(r,1),this.createAlarmConfigForm.get(t).setValue(n,{emitEvent:!0}))}addKey(e,t){const n=e.input;let r=e.value;if((r||"").trim()){r=r.trim();let e=this.createAlarmConfigForm.get(t).value;e&&-1!==e.indexOf(r)||(e||(e=[]),e.push(r),this.createAlarmConfigForm.get(t).setValue(e,{emitEvent:!0}))}n&&(n.value="")}onValidate(){const e=this.createAlarmConfigForm.get("useMessageAlarmData").value,t=this.createAlarmConfigForm.get("overwriteAlarmDetails").value;if(!e||t){this.createAlarmConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}}e("CreateAlarmConfigComponent",Ct),Ct.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ct,deps:[{token:P.Store},{token:R.UntypedFormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Ct.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Ct,selector:"tb-action-node-create-alarm-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="createAlarmConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useMessageAlarmData">\n    {{ \'tb.rulenode.use-message-alarm-data\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="overwriteAlarmDetails" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === true">\n    {{ \'tb.rulenode.overwrite-alarm-details\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === false ||\n                                    createAlarmConfigForm.get(\'overwriteAlarmDetails\').value === true">\n    <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n    <tb-js-func *ngIf="createAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n                #jsFuncComponent\n                formControlName="alarmDetailsBuildJs"\n                functionName="Details"\n                [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n                helpId="rulenode/create_alarm_node_script_fn"\n                noValidate="true">\n      <button toolbarSuffixButton\n              mat-icon-button\n              matTooltip="{{ testScriptLabel | translate }}"\n              matTooltipPosition="above"\n              class="tb-mat-32"\n              (click)="testScript()">\n        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n      </button>\n    </tb-js-func>\n    <tb-js-func *ngIf="createAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n                #tbelFuncComponent\n                formControlName="alarmDetailsBuildTbel"\n                functionName="Details"\n                [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n                [disableUndefinedCheck]="true"\n                [scriptLanguage]="scriptLanguage.TBEL"\n                helpId="rulenode/tbel/create_alarm_node_script_fn"\n                noValidate="true">\n      <button toolbarSuffixButton\n              mat-icon-button\n              matTooltip="{{ testScriptLabel | translate }}"\n              matTooltipPosition="above"\n              class="tb-mat-32"\n              (click)="testScript()">\n        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n      </button>\n    </tb-js-func>\n    <div fxLayout="row" style="padding-bottom: 16px;">\n      <button mat-button mat-raised-button color="primary" (click)="testScript()">\n        {{ testScriptLabel | translate }}\n      </button>\n    </div>\n  </section>\n  <section fxLayout="column" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === false">\n    <mat-form-field fxFlex subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.alarm-type</mat-label>\n      <input required matInput formControlName="alarmType">\n      <mat-error *ngIf="createAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n        {{ \'tb.rulenode.alarm-type-required\' | translate }}\n      </mat-error>\n      <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n    </mat-form-field>\n    <mat-checkbox formControlName="dynamicSeverity">\n      {{ \'tb.rulenode.use-alarm-severity-pattern\' | translate }}\n    </mat-checkbox>\n    <mat-form-field fxFlex *ngIf="!createAlarmConfigForm.get(\'dynamicSeverity\').value">\n      <mat-label translate>tb.rulenode.alarm-severity</mat-label>\n      <mat-select formControlName="severity" required>\n        <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">\n          {{ alarmSeverityTranslationMap.get(severity) | translate }}\n        </mat-option>\n      </mat-select>\n      <mat-error *ngIf="createAlarmConfigForm.get(\'severity\').hasError(\'required\')">\n        {{ \'tb.rulenode.alarm-severity-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex *ngIf="createAlarmConfigForm.get(\'dynamicSeverity\').value" subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.alarm-severity-pattern</mat-label>\n      <input matInput formControlName="severity" required>\n      <mat-error *ngIf="createAlarmConfigForm.get(\'severity\').hasError(\'required\')">\n        {{ \'tb.rulenode.alarm-severity-required\' | translate }}\n      </mat-error>\n      <mat-hint [innerHTML]="\'tb.rulenode.alarm-severity-pattern-hint\' | translate | safe: \'html\'"></mat-hint>\n    </mat-form-field>\n    <mat-checkbox formControlName="propagate">\n      {{ \'tb.rulenode.propagate\' | translate }}\n    </mat-checkbox>\n    <section *ngIf="createAlarmConfigForm.get(\'propagate\').value === true">\n      <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic">\n        <mat-label translate>tb.rulenode.relation-types-list</mat-label>\n        <mat-chip-grid #relationTypesChipList>\n          <mat-chip-row\n            *ngFor="let key of createAlarmConfigForm.get(\'relationTypes\').value;"\n            (removed)="removeKey(key, \'relationTypes\')">\n            {{key}}\n            <mat-icon matChipRemove>close</mat-icon>\n          </mat-chip-row>\n          <input matInput type="text" placeholder="{{\'tb.rulenode.relation-types-list\' | translate}}"\n                 [matChipInputFor]="relationTypesChipList"\n                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n                 (matChipInputTokenEnd)="addKey($event, \'relationTypes\')"\n                 [matChipInputAddOnBlur]="true">\n        </mat-chip-grid>\n        <mat-hint translate>tb.rulenode.relation-types-list-hint</mat-hint>\n      </mat-form-field>\n    </section>\n    <mat-checkbox formControlName="propagateToOwner">\n      {{ \'tb.rulenode.propagate-to-owner\' | translate }}\n    </mat-checkbox>\n    <mat-checkbox formControlName="propagateToTenant">\n      {{ \'tb.rulenode.propagate-to-tenant\' | translate }}\n    </mat-checkbox>\n  </section>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Ie.MatChipGrid,selector:"mat-chip-grid",inputs:["tabIndex","disabled","placeholder","required","value","errorStateMatcher"],outputs:["change","valueChange"]},{kind:"directive",type:Ie.MatChipInput,selector:"input[matChipInputFor]",inputs:["matChipInputFor","matChipInputAddOnBlur","matChipInputSeparatorKeyCodes","placeholder","id","disabled"],outputs:["matChipInputTokenEnd"],exportAs:["matChipInput","matChipInputFor"]},{kind:"directive",type:Ie.MatChipRemove,selector:"[matChipRemove]"},{kind:"component",type:Ie.MatChipRow,selector:"mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]",inputs:["color","disabled","disableRipple","tabIndex","editable"],outputs:["edited"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Ce.TbScriptLangComponent,selector:"tb-script-lang",inputs:["disabled"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ct,decorators:[{type:n,args:[{selector:"tb-action-node-create-alarm-config",template:'<section [formGroup]="createAlarmConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useMessageAlarmData">\n    {{ \'tb.rulenode.use-message-alarm-data\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="overwriteAlarmDetails" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === true">\n    {{ \'tb.rulenode.overwrite-alarm-details\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === false ||\n                                    createAlarmConfigForm.get(\'overwriteAlarmDetails\').value === true">\n    <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n    <tb-js-func *ngIf="createAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n                #jsFuncComponent\n                formControlName="alarmDetailsBuildJs"\n                functionName="Details"\n                [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n                helpId="rulenode/create_alarm_node_script_fn"\n                noValidate="true">\n      <button toolbarSuffixButton\n              mat-icon-button\n              matTooltip="{{ testScriptLabel | translate }}"\n              matTooltipPosition="above"\n              class="tb-mat-32"\n              (click)="testScript()">\n        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n      </button>\n    </tb-js-func>\n    <tb-js-func *ngIf="createAlarmConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n                #tbelFuncComponent\n                formControlName="alarmDetailsBuildTbel"\n                functionName="Details"\n                [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n                [disableUndefinedCheck]="true"\n                [scriptLanguage]="scriptLanguage.TBEL"\n                helpId="rulenode/tbel/create_alarm_node_script_fn"\n                noValidate="true">\n      <button toolbarSuffixButton\n              mat-icon-button\n              matTooltip="{{ testScriptLabel | translate }}"\n              matTooltipPosition="above"\n              class="tb-mat-32"\n              (click)="testScript()">\n        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n      </button>\n    </tb-js-func>\n    <div fxLayout="row" style="padding-bottom: 16px;">\n      <button mat-button mat-raised-button color="primary" (click)="testScript()">\n        {{ testScriptLabel | translate }}\n      </button>\n    </div>\n  </section>\n  <section fxLayout="column" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === false">\n    <mat-form-field fxFlex subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.alarm-type</mat-label>\n      <input required matInput formControlName="alarmType">\n      <mat-error *ngIf="createAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n        {{ \'tb.rulenode.alarm-type-required\' | translate }}\n      </mat-error>\n      <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n    </mat-form-field>\n    <mat-checkbox formControlName="dynamicSeverity">\n      {{ \'tb.rulenode.use-alarm-severity-pattern\' | translate }}\n    </mat-checkbox>\n    <mat-form-field fxFlex *ngIf="!createAlarmConfigForm.get(\'dynamicSeverity\').value">\n      <mat-label translate>tb.rulenode.alarm-severity</mat-label>\n      <mat-select formControlName="severity" required>\n        <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">\n          {{ alarmSeverityTranslationMap.get(severity) | translate }}\n        </mat-option>\n      </mat-select>\n      <mat-error *ngIf="createAlarmConfigForm.get(\'severity\').hasError(\'required\')">\n        {{ \'tb.rulenode.alarm-severity-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex *ngIf="createAlarmConfigForm.get(\'dynamicSeverity\').value" subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.alarm-severity-pattern</mat-label>\n      <input matInput formControlName="severity" required>\n      <mat-error *ngIf="createAlarmConfigForm.get(\'severity\').hasError(\'required\')">\n        {{ \'tb.rulenode.alarm-severity-required\' | translate }}\n      </mat-error>\n      <mat-hint [innerHTML]="\'tb.rulenode.alarm-severity-pattern-hint\' | translate | safe: \'html\'"></mat-hint>\n    </mat-form-field>\n    <mat-checkbox formControlName="propagate">\n      {{ \'tb.rulenode.propagate\' | translate }}\n    </mat-checkbox>\n    <section *ngIf="createAlarmConfigForm.get(\'propagate\').value === true">\n      <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic">\n        <mat-label translate>tb.rulenode.relation-types-list</mat-label>\n        <mat-chip-grid #relationTypesChipList>\n          <mat-chip-row\n            *ngFor="let key of createAlarmConfigForm.get(\'relationTypes\').value;"\n            (removed)="removeKey(key, \'relationTypes\')">\n            {{key}}\n            <mat-icon matChipRemove>close</mat-icon>\n          </mat-chip-row>\n          <input matInput type="text" placeholder="{{\'tb.rulenode.relation-types-list\' | translate}}"\n                 [matChipInputFor]="relationTypesChipList"\n                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n                 (matChipInputTokenEnd)="addKey($event, \'relationTypes\')"\n                 [matChipInputAddOnBlur]="true">\n        </mat-chip-grid>\n        <mat-hint translate>tb.rulenode.relation-types-list-hint</mat-hint>\n      </mat-form-field>\n    </section>\n    <mat-checkbox formControlName="propagateToOwner">\n      {{ \'tb.rulenode.propagate-to-owner\' | translate }}\n    </mat-checkbox>\n    <mat-checkbox formControlName="propagateToTenant">\n      {{ \'tb.rulenode.propagate-to-tenant\' | translate }}\n    </mat-checkbox>\n  </section>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}});class Ft extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.keys(v),this.directionTypeTranslations=new Map([[v.FROM,"tb.rulenode.search-direction-from"],[v.TO,"tb.rulenode.search-direction-to"]]),this.entityType=C,this.entityTypeNamePatternTranslation=new Map([[C.DEVICE,"tb.rulenode.device-name-pattern"],[C.ASSET,"tb.rulenode.asset-name-pattern"],[C.ENTITY_VIEW,"tb.rulenode.entity-view-name-pattern"],[C.CUSTOMER,"tb.rulenode.customer-title-pattern"],[C.USER,"tb.rulenode.user-name-pattern"],[C.DASHBOARD,"tb.rulenode.dashboard-name-pattern"],[C.EDGE,"tb.rulenode.edge-name-pattern"]]),this.allowedEntityTypes=[C.DEVICE,C.ASSET,C.ENTITY_VIEW,C.TENANT,C.CUSTOMER,C.USER,C.DASHBOARD,C.EDGE]}configForm(){return this.createRelationConfigForm}onConfigurationSet(e){this.createRelationConfigForm=this.fb.group({direction:[e?e.direction:null,[O.required]],entityType:[e?e.entityType:null,[O.required]],entityNamePattern:[e?e.entityNamePattern:null,[]],entityTypePattern:[e?e.entityTypePattern:null,[]],relationType:[e?e.relationType:null,[O.required]],createEntityIfNotExists:[!!e&&e.createEntityIfNotExists,[]],removeCurrentRelations:[!!e&&e.removeCurrentRelations,[]],changeOriginatorToRelatedEntity:[!!e&&e.changeOriginatorToRelatedEntity,[]]})}validatorTriggers(){return["entityType","createEntityIfNotExists"]}updateValidators(e){const t=this.createRelationConfigForm.get("entityType").value;if(t?this.createRelationConfigForm.get("entityNamePattern").setValidators([O.required,O.pattern(/.*\S.*/)]):this.createRelationConfigForm.get("entityNamePattern").setValidators([]),!t||t!==C.DEVICE&&t!==C.ASSET)this.createRelationConfigForm.get("entityTypePattern").setValidators([]);else{const e=[O.pattern(/.*\S.*/)];this.createRelationConfigForm.get("createEntityIfNotExists").value&&e.push(O.required),this.createRelationConfigForm.get("entityTypePattern").setValidators(e)}this.createRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e}),this.createRelationConfigForm.get("entityTypePattern").updateValueAndValidity({emitEvent:e})}prepareOutputConfig(e){return e.entityNamePattern=e.entityNamePattern?e.entityNamePattern.trim():null,e.entityTypePattern=e.entityTypePattern?e.entityTypePattern.trim():null,e}}e("CreateRelationConfigComponent",Ft),Ft.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ft,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Ft.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Ft,selector:"tb-action-node-create-relation-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="createRelationConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.relation-parameters</div>\n    <div fxLayout="column">\n      <mat-form-field class="mat-block" hideRequiredMarker>\n        <mat-label translate>relation.direction</mat-label>\n        <mat-select required matInput formControlName="direction">\n          <mat-option *ngFor="let type of directionTypes" [value]="type">\n            {{ directionTypeTranslations.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <tb-relation-type-autocomplete\n        required\n        formControlName="relationType">\n      </tb-relation-type-autocomplete>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.target-entity</div>\n    <div fxLayout="row" fxLayoutGap="16px">\n      <tb-entity-type-select\n        fxFlex\n        showLabel\n        required\n        [allowedEntityTypes]="allowedEntityTypes"\n        formControlName="entityType">\n      </tb-entity-type-select>\n\n      <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value &&\n                      createRelationConfigForm.get(\'entityType\').value !== entityType.TENANT"\n                      fxFlex class="mat-block">\n        <mat-label>{{ entityTypeNamePatternTranslation.get(createRelationConfigForm.get(\'entityType\').value) | translate }}</mat-label>\n        <input required matInput formControlName="entityNamePattern">\n      </mat-form-field>\n\n      <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                           createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"\n                      fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.profile-name</mat-label>\n        <input matInput formControlName="entityTypePattern">\n      </mat-form-field>\n    </div>\n\n    <tb-example-hint [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n                     *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.CUSTOMER ||\n                     createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                     createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"></tb-example-hint>\n\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.create-entity-if-not-exists-hint\' | translate }}"\n         *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.CUSTOMER ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"\n         style="margin-bottom: 18px"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="createEntityIfNotExists">\n        {{ \'tb.rulenode.create-entity-if-not-exists\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <section class="tb-form-panel stroked no-padding">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header style="padding: 16px">\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class="tb-form-panel no-border no-padding-top">\n        <div tb-hint-tooltip-icon="{{ \'tb.rulenode.remove-current-relations-hint\' | translate }}"\n             class="tb-form-row no-border no-padding">\n          <mat-slide-toggle class="mat-slide" formControlName="removeCurrentRelations">\n            {{ \'tb.rulenode.remove-current-relations\' | translate }}\n          </mat-slide-toggle>\n        </div>\n        <div tb-hint-tooltip-icon="{{ \'tb.rulenode.change-originator-to-related-entity-hint\' | translate }}"\n             class="tb-form-row no-border no-padding">\n          <mat-slide-toggle class="mat-slide" formControlName="changeOriginatorToRelatedEntity">\n            {{ \'tb.rulenode.change-originator-to-related-entity\' | translate }}\n          </mat-slide-toggle>\n        </div>\n      </div>\n    </mat-expansion-panel>\n  </section>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Se.EntityTypeSelectComponent,selector:"tb-entity-type-select",inputs:["allowedEntityTypes","useAliasEntityTypes","filterAllowedEntityTypes","showLabel","required","disabled","additionEntityTypes"]},{kind:"component",type:Ne.RelationTypeAutocompleteComponent,selector:"tb-relation-type-autocomplete",inputs:["showLabel","additionalClasses","appearance","required","disabled","subscriptSizing"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ft,decorators:[{type:n,args:[{selector:"tb-action-node-create-relation-config",template:'<section [formGroup]="createRelationConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.relation-parameters</div>\n    <div fxLayout="column">\n      <mat-form-field class="mat-block" hideRequiredMarker>\n        <mat-label translate>relation.direction</mat-label>\n        <mat-select required matInput formControlName="direction">\n          <mat-option *ngFor="let type of directionTypes" [value]="type">\n            {{ directionTypeTranslations.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <tb-relation-type-autocomplete\n        required\n        formControlName="relationType">\n      </tb-relation-type-autocomplete>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.target-entity</div>\n    <div fxLayout="row" fxLayoutGap="16px">\n      <tb-entity-type-select\n        fxFlex\n        showLabel\n        required\n        [allowedEntityTypes]="allowedEntityTypes"\n        formControlName="entityType">\n      </tb-entity-type-select>\n\n      <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value &&\n                      createRelationConfigForm.get(\'entityType\').value !== entityType.TENANT"\n                      fxFlex class="mat-block">\n        <mat-label>{{ entityTypeNamePatternTranslation.get(createRelationConfigForm.get(\'entityType\').value) | translate }}</mat-label>\n        <input required matInput formControlName="entityNamePattern">\n      </mat-form-field>\n\n      <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                           createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"\n                      fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.profile-name</mat-label>\n        <input matInput formControlName="entityTypePattern">\n      </mat-form-field>\n    </div>\n\n    <tb-example-hint [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n                     *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.CUSTOMER ||\n                     createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                     createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"></tb-example-hint>\n\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.create-entity-if-not-exists-hint\' | translate }}"\n         *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.CUSTOMER ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"\n         style="margin-bottom: 18px"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="createEntityIfNotExists">\n        {{ \'tb.rulenode.create-entity-if-not-exists\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <section class="tb-form-panel stroked no-padding">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header style="padding: 16px">\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class="tb-form-panel no-border no-padding-top">\n        <div tb-hint-tooltip-icon="{{ \'tb.rulenode.remove-current-relations-hint\' | translate }}"\n             class="tb-form-row no-border no-padding">\n          <mat-slide-toggle class="mat-slide" formControlName="removeCurrentRelations">\n            {{ \'tb.rulenode.remove-current-relations\' | translate }}\n          </mat-slide-toggle>\n        </div>\n        <div tb-hint-tooltip-icon="{{ \'tb.rulenode.change-originator-to-related-entity-hint\' | translate }}"\n             class="tb-form-row no-border no-padding">\n          <mat-slide-toggle class="mat-slide" formControlName="changeOriginatorToRelatedEntity">\n            {{ \'tb.rulenode.change-originator-to-related-entity\' | translate }}\n          </mat-slide-toggle>\n        </div>\n      </div>\n    </mat-expansion-panel>\n  </section>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class kt extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.keys(v),this.directionTypeTranslations=new Map([[v.FROM,"tb.rulenode.del-relation-direction-from"],[v.TO,"tb.rulenode.del-relation-direction-to"]]),this.entityTypeNamePatternTranslation=new Map([[C.DEVICE,"tb.rulenode.device-name-pattern"],[C.ASSET,"tb.rulenode.asset-name-pattern"],[C.ENTITY_VIEW,"tb.rulenode.entity-view-name-pattern"],[C.CUSTOMER,"tb.rulenode.customer-title-pattern"],[C.USER,"tb.rulenode.user-name-pattern"],[C.DASHBOARD,"tb.rulenode.dashboard-name-pattern"],[C.EDGE,"tb.rulenode.edge-name-pattern"]]),this.entityType=C,this.allowedEntityTypes=[C.DEVICE,C.ASSET,C.ENTITY_VIEW,C.TENANT,C.CUSTOMER,C.USER,C.DASHBOARD,C.EDGE]}configForm(){return this.deleteRelationConfigForm}onConfigurationSet(e){this.deleteRelationConfigForm=this.fb.group({deleteForSingleEntity:[!!e&&e.deleteForSingleEntity,[]],direction:[e?e.direction:null,[O.required]],entityType:[e?e.entityType:null,[]],entityNamePattern:[e?e.entityNamePattern:null,[]],relationType:[e?e.relationType:null,[O.required]]})}validatorTriggers(){return["deleteForSingleEntity","entityType"]}updateValidators(e){const t=this.deleteRelationConfigForm.get("deleteForSingleEntity").value,n=this.deleteRelationConfigForm.get("entityType").value;t?this.deleteRelationConfigForm.get("entityType").setValidators([O.required]):this.deleteRelationConfigForm.get("entityType").setValidators([]),t&&n&&n!==C.TENANT?this.deleteRelationConfigForm.get("entityNamePattern").setValidators([O.required,O.pattern(/.*\S.*/)]):this.deleteRelationConfigForm.get("entityNamePattern").setValidators([]),this.deleteRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:!1}),this.deleteRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e})}prepareOutputConfig(e){return e.entityNamePattern=e.entityNamePattern?e.entityNamePattern.trim():null,e}}e("DeleteRelationConfigComponent",kt),kt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:kt,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),kt.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:kt,selector:"tb-action-node-delete-relation-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deleteRelationConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.relation-parameters</div>\n    <div fxLayout="column">\n      <mat-form-field class="mat-block" hideRequiredMarker>\n        <mat-label translate>relation.direction</mat-label>\n        <mat-select required matInput formControlName="direction">\n          <mat-option *ngFor="let type of directionTypes" [value]="type">\n            {{ directionTypeTranslations.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <tb-relation-type-autocomplete\n        required\n        formControlName="relationType">\n      </tb-relation-type-autocomplete>\n    </div>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.delete-relation-with-specific-entity-hint\' | translate }}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="deleteForSingleEntity">\n        {{ \'tb.rulenode.delete-relation-with-specific-entity\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div *ngIf="deleteRelationConfigForm.get(\'deleteForSingleEntity\').value">\n      <div fxLayout="row" fxLayoutGap="10px">\n        <tb-entity-type-select\n          fxFlex\n          showLabel\n          required\n          [allowedEntityTypes]="allowedEntityTypes"\n          formControlName="entityType">\n        </tb-entity-type-select>\n        <mat-form-field *ngIf="deleteRelationConfigForm.get(\'entityType\').value && deleteRelationConfigForm.get(\'entityType\').value !== entityType.TENANT"\n                        fxFlex class="mat-block">\n          <mat-label>{{ entityTypeNamePatternTranslation.get(deleteRelationConfigForm.get(\'entityType\').value) | translate }}</mat-label>\n          <input required matInput formControlName="entityNamePattern">\n        </mat-form-field>\n      </div>\n      <tb-example-hint *ngIf="deleteRelationConfigForm.get(\'entityType\').value && deleteRelationConfigForm.get(\'entityType\').value !== entityType.TENANT"\n                       [hintText]="\'tb.rulenode.kv-map-single-pattern-hint\'"></tb-example-hint>\n    </div>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Se.EntityTypeSelectComponent,selector:"tb-entity-type-select",inputs:["allowedEntityTypes","useAliasEntityTypes","filterAllowedEntityTypes","showLabel","required","disabled","additionEntityTypes"]},{kind:"component",type:Ne.RelationTypeAutocompleteComponent,selector:"tb-relation-type-autocomplete",inputs:["showLabel","additionalClasses","appearance","required","disabled","subscriptSizing"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:kt,decorators:[{type:n,args:[{selector:"tb-action-node-delete-relation-config",template:'<section [formGroup]="deleteRelationConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.relation-parameters</div>\n    <div fxLayout="column">\n      <mat-form-field class="mat-block" hideRequiredMarker>\n        <mat-label translate>relation.direction</mat-label>\n        <mat-select required matInput formControlName="direction">\n          <mat-option *ngFor="let type of directionTypes" [value]="type">\n            {{ directionTypeTranslations.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <tb-relation-type-autocomplete\n        required\n        formControlName="relationType">\n      </tb-relation-type-autocomplete>\n    </div>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.delete-relation-with-specific-entity-hint\' | translate }}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="deleteForSingleEntity">\n        {{ \'tb.rulenode.delete-relation-with-specific-entity\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div *ngIf="deleteRelationConfigForm.get(\'deleteForSingleEntity\').value">\n      <div fxLayout="row" fxLayoutGap="10px">\n        <tb-entity-type-select\n          fxFlex\n          showLabel\n          required\n          [allowedEntityTypes]="allowedEntityTypes"\n          formControlName="entityType">\n        </tb-entity-type-select>\n        <mat-form-field *ngIf="deleteRelationConfigForm.get(\'entityType\').value && deleteRelationConfigForm.get(\'entityType\').value !== entityType.TENANT"\n                        fxFlex class="mat-block">\n          <mat-label>{{ entityTypeNamePatternTranslation.get(deleteRelationConfigForm.get(\'entityType\').value) | translate }}</mat-label>\n          <input required matInput formControlName="entityNamePattern">\n        </mat-form-field>\n      </div>\n      <tb-example-hint *ngIf="deleteRelationConfigForm.get(\'entityType\').value && deleteRelationConfigForm.get(\'entityType\').value !== entityType.TENANT"\n                       [hintText]="\'tb.rulenode.kv-map-single-pattern-hint\'"></tb-example-hint>\n    </div>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Tt extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.deviceProfile}onConfigurationSet(e){this.deviceProfile=this.fb.group({persistAlarmRulesState:[!!e&&e.persistAlarmRulesState],fetchAlarmRulesStateOnStart:[!!e&&e.fetchAlarmRulesStateOnStart]})}validatorTriggers(){return["persistAlarmRulesState"]}updateValidators(e){this.deviceProfile.get("persistAlarmRulesState").value?this.deviceProfile.get("fetchAlarmRulesStateOnStart").enable({emitEvent:!1}):(this.deviceProfile.get("fetchAlarmRulesStateOnStart").setValue(!1,{emitEvent:!1}),this.deviceProfile.get("fetchAlarmRulesStateOnStart").disable({emitEvent:!1})),this.deviceProfile.get("fetchAlarmRulesStateOnStart").updateValueAndValidity({emitEvent:e})}}e("DeviceProfileConfigComponent",Tt),Tt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Tt,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Tt.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Tt,selector:"tb-device-profile-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deviceProfile" class="tb-form-panel stroked">\n  <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.device-profile-node-hint</div>\n  <div tb-hint-tooltip-icon="{{\'tb.rulenode.persist-alarm-rules-hint\' | translate }}"\n       class="tb-form-row no-border no-padding slide-toggle">\n    <mat-slide-toggle class="mat-slide" formControlName="persistAlarmRulesState">\n      {{ \'tb.rulenode.persist-alarm-rules\' | translate }}\n    </mat-slide-toggle>\n  </div>\n  <div tb-hint-tooltip-icon="{{\'tb.rulenode.fetch-alarm-rules-hint\' | translate }}"\n       class="tb-form-row no-border no-padding slide-toggle">\n    <mat-slide-toggle class="mat-slide" formControlName="fetchAlarmRulesStateOnStart">\n      {{ \'tb.rulenode.fetch-alarm-rules\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',dependencies:[{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Tt,decorators:[{type:n,args:[{selector:"tb-device-profile-config",template:'<section [formGroup]="deviceProfile" class="tb-form-panel stroked">\n  <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.device-profile-node-hint</div>\n  <div tb-hint-tooltip-icon="{{\'tb.rulenode.persist-alarm-rules-hint\' | translate }}"\n       class="tb-form-row no-border no-padding slide-toggle">\n    <mat-slide-toggle class="mat-slide" formControlName="persistAlarmRulesState">\n      {{ \'tb.rulenode.persist-alarm-rules\' | translate }}\n    </mat-slide-toggle>\n  </div>\n  <div tb-hint-tooltip-icon="{{\'tb.rulenode.fetch-alarm-rules-hint\' | translate }}"\n       class="tb-form-row no-border no-padding slide-toggle">\n    <mat-slide-toggle class="mat-slide" formControlName="fetchAlarmRulesStateOnStart">\n      {{ \'tb.rulenode.fetch-alarm-rules\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Lt extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.allowedEntityTypes=[C.DEVICE,C.ASSET,C.ENTITY_VIEW,C.CUSTOMER,C.USER,C.DASHBOARD],this.additionEntityTypes={TENANT:this.translate.instant("tb.rulenode.current-tenant"),RULE_NODE:this.translate.instant("tb.rulenode.current-rule-node")},this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-generator-function"}configForm(){return this.generatorConfigForm}onConfigurationSet(e){this.generatorConfigForm=this.fb.group({msgCount:[e?e.msgCount:null,[O.required,O.min(0)]],periodInSeconds:[e?e.periodInSeconds:null,[O.required,O.min(1)]],originator:[e?e.originator:{id:null,entityType:C.RULE_NODE},[]],scriptLang:[e?e.scriptLang:b.JS,[O.required]],jsScript:[e?e.jsScript:null,[]],tbelScript:[e?e.tbelScript:null,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.generatorConfigForm.get("scriptLang").value;t!==b.TBEL||this.tbelEnabled||(t=b.JS,this.generatorConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.generatorConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.generatorConfigForm.get("jsScript").setValidators(t===b.JS?[O.required]:[]),this.generatorConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.generatorConfigForm.get("tbelScript").setValidators(t===b.TBEL?[O.required]:[]),this.generatorConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return{msgCount:fe(e?.msgCount)?e?.msgCount:0,periodInSeconds:fe(e?.periodInSeconds)?e?.periodInSeconds:1,originator:{id:fe(e?.originatorId)?e?.originatorId:null,entityType:fe(e?.originatorType)?e?.originatorType:C.RULE_NODE},scriptLang:fe(e?.scriptLang)?e?.scriptLang:b.JS,tbelScript:fe(e?.tbelScript)?e?.tbelScript:null,jsScript:fe(e?.jsScript)?e?.jsScript:null}}prepareOutputConfig(e){return e.originator?(e.originatorId=e.originator.id,e.originatorType=e.originator.entityType):(e.originatorId=null,e.originatorType=null),delete e.originator,e}testScript(e){const t=this.generatorConfigForm.get("scriptLang").value,n=t===b.JS?"jsScript":"tbelScript",r=t===b.JS?"rulenode/generator_node_script_fn":"rulenode/tbel/generator_node_script_fn",o=this.generatorConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"generate",this.translate.instant("tb.rulenode.generator"),"Generate",["prevMsg","prevMetadata","prevMsgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.generatorConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.generatorConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}var It;e("GeneratorConfigComponent",Lt),Lt.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Lt,deps:[{token:P.Store},{token:R.UntypedFormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Lt.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Lt,selector:"tb-action-node-generator-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="generatorConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel no-padding-bottom stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.generation-parameters</div>\n    <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.message-count</mat-label>\n        <input required type="number" min="0" step="1" matInput formControlName="msgCount">\n        <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'required\')">\n          {{ \'tb.rulenode.message-count-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'min\')">\n          {{ \'tb.rulenode.min-message-count-message\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.period-seconds</mat-label>\n        <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">\n        <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n          {{ \'tb.rulenode.period-seconds-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n          {{ \'tb.rulenode.min-period-seconds-message\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <div class="tb-form-panel no-padding-bottom stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.originator</div>\n    <tb-entity-select fxFlex\n                      required="true"\n                      useAliasEntityTypes="true"\n                      [allowedEntityTypes]="allowedEntityTypes"\n                      [additionEntityTypes]="additionEntityTypes"\n                      formControlName="originator">\n    </tb-entity-select>\n  </div>\n  <div class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings" expanded>\n      <mat-expansion-panel-header>\n        <mat-panel-title translate>tb.rulenode.generator-function</mat-panel-title>\n      </mat-expansion-panel-header>\n      <tb-js-func *ngIf="generatorConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n                  #jsFuncComponent\n                  formControlName="jsScript"\n                  functionName="Generate"\n                  [functionArgs]="[\'prevMsg\', \'prevMetadata\', \'prevMsgType\']"\n                  helpId="rulenode/generator_node_script_fn"\n                  noValidate="true">\n        <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill" *ngIf="tbelEnabled">\n          <tb-toggle-option [value]="scriptLanguage.TBEL">\n            {{ \'tb.rulenode.script-lang-tbel\' | translate }}\n          </tb-toggle-option>\n          <tb-toggle-option [value]="scriptLanguage.JS">\n            {{ \'tb.rulenode.script-lang-js\' | translate }}\n          </tb-toggle-option>\n        </tb-toggle-select>\n        <button toolbarSuffixButton\n                mat-icon-button\n                matTooltip="{{ testScriptLabel | translate }}"\n                matTooltipPosition="above"\n                class="tb-mat-32"\n                (click)="testScript()">\n          <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n        </button>\n      </tb-js-func>\n      <tb-js-func *ngIf="generatorConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n                  #tbelFuncComponent\n                  formControlName="tbelScript"\n                  functionName="Generate"\n                  [functionArgs]="[\'prevMsg\', \'prevMetadata\', \'prevMsgType\']"\n                  [disableUndefinedCheck]="true"\n                  [scriptLanguage]="scriptLanguage.TBEL"\n                  helpId="rulenode/tbel/generator_node_script_fn"\n                  noValidate="true">\n        <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill">\n          <tb-toggle-option [value]="scriptLanguage.TBEL">\n            {{ \'tb.rulenode.script-lang-tbel\' | translate }}\n          </tb-toggle-option>\n          <tb-toggle-option [value]="scriptLanguage.JS">\n            {{ \'tb.rulenode.script-lang-js\' | translate }}\n          </tb-toggle-option>\n        </tb-toggle-select>\n        <button toolbarSuffixButton\n                mat-icon-button\n                matTooltip="{{ testScriptLabel | translate }}"\n                matTooltipPosition="above"\n                class="tb-mat-32"\n                (click)="testScript()">\n          <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n        </button>\n      </tb-js-func>\n      <div fxLayout="row" style="padding-bottom: 16px;">\n        <button mat-button mat-raised-button color="primary" (click)="testScript()">\n          {{ testScriptLabel | translate }}\n        </button>\n      </div>\n    </mat-expansion-panel>\n  </div>\n</section>\n',styles:[":host ::ng-deep .mat-button-toggle-group{min-width:120px;height:24px!important}:host ::ng-deep .mat-button-toggle-group .mat-button-toggle{font-size:0}:host ::ng-deep .mat-button-toggle-group .mat-button-toggle .mat-button-toggle-button{height:20px!important;line-height:20px!important;border:none!important}:host ::ng-deep .mat-button-toggle-group .mat-button-toggle .mat-button-toggle-button .mat-button-toggle-label-content{font-size:14px!important;line-height:20px!important}@media screen and (min-width: 599px){:host ::ng-deep .tb-entity-select{display:flex;flex-direction:row;gap:16px}}:host ::ng-deep .tb-entity-select tb-entity-type-select{flex:1}:host ::ng-deep .tb-entity-select tb-entity-autocomplete{flex:1}:host ::ng-deep .tb-entity-select tb-entity-autocomplete mat-form-field{width:100%!important}\n"],dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:qe.EntitySelectComponent,selector:"tb-entity-select",inputs:["allowedEntityTypes","useAliasEntityTypes","required","disabled","additionEntityTypes"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Lt,decorators:[{type:n,args:[{selector:"tb-action-node-generator-config",template:'<section [formGroup]="generatorConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel no-padding-bottom stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.generation-parameters</div>\n    <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.message-count</mat-label>\n        <input required type="number" min="0" step="1" matInput formControlName="msgCount">\n        <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'required\')">\n          {{ \'tb.rulenode.message-count-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'min\')">\n          {{ \'tb.rulenode.min-message-count-message\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.period-seconds</mat-label>\n        <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">\n        <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n          {{ \'tb.rulenode.period-seconds-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n          {{ \'tb.rulenode.min-period-seconds-message\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <div class="tb-form-panel no-padding-bottom stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.originator</div>\n    <tb-entity-select fxFlex\n                      required="true"\n                      useAliasEntityTypes="true"\n                      [allowedEntityTypes]="allowedEntityTypes"\n                      [additionEntityTypes]="additionEntityTypes"\n                      formControlName="originator">\n    </tb-entity-select>\n  </div>\n  <div class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings" expanded>\n      <mat-expansion-panel-header>\n        <mat-panel-title translate>tb.rulenode.generator-function</mat-panel-title>\n      </mat-expansion-panel-header>\n      <tb-js-func *ngIf="generatorConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n                  #jsFuncComponent\n                  formControlName="jsScript"\n                  functionName="Generate"\n                  [functionArgs]="[\'prevMsg\', \'prevMetadata\', \'prevMsgType\']"\n                  helpId="rulenode/generator_node_script_fn"\n                  noValidate="true">\n        <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill" *ngIf="tbelEnabled">\n          <tb-toggle-option [value]="scriptLanguage.TBEL">\n            {{ \'tb.rulenode.script-lang-tbel\' | translate }}\n          </tb-toggle-option>\n          <tb-toggle-option [value]="scriptLanguage.JS">\n            {{ \'tb.rulenode.script-lang-js\' | translate }}\n          </tb-toggle-option>\n        </tb-toggle-select>\n        <button toolbarSuffixButton\n                mat-icon-button\n                matTooltip="{{ testScriptLabel | translate }}"\n                matTooltipPosition="above"\n                class="tb-mat-32"\n                (click)="testScript()">\n          <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n        </button>\n      </tb-js-func>\n      <tb-js-func *ngIf="generatorConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n                  #tbelFuncComponent\n                  formControlName="tbelScript"\n                  functionName="Generate"\n                  [functionArgs]="[\'prevMsg\', \'prevMetadata\', \'prevMsgType\']"\n                  [disableUndefinedCheck]="true"\n                  [scriptLanguage]="scriptLanguage.TBEL"\n                  helpId="rulenode/tbel/generator_node_script_fn"\n                  noValidate="true">\n        <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill">\n          <tb-toggle-option [value]="scriptLanguage.TBEL">\n            {{ \'tb.rulenode.script-lang-tbel\' | translate }}\n          </tb-toggle-option>\n          <tb-toggle-option [value]="scriptLanguage.JS">\n            {{ \'tb.rulenode.script-lang-js\' | translate }}\n          </tb-toggle-option>\n        </tb-toggle-select>\n        <button toolbarSuffixButton\n                mat-icon-button\n                matTooltip="{{ testScriptLabel | translate }}"\n                matTooltipPosition="above"\n                class="tb-mat-32"\n                (click)="testScript()">\n          <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n        </button>\n      </tb-js-func>\n      <div fxLayout="row" style="padding-bottom: 16px;">\n        <button mat-button mat-raised-button color="primary" (click)="testScript()">\n          {{ testScriptLabel | translate }}\n        </button>\n      </div>\n    </mat-expansion-panel>\n  </div>\n</section>\n',styles:[":host ::ng-deep .mat-button-toggle-group{min-width:120px;height:24px!important}:host ::ng-deep .mat-button-toggle-group .mat-button-toggle{font-size:0}:host ::ng-deep .mat-button-toggle-group .mat-button-toggle .mat-button-toggle-button{height:20px!important;line-height:20px!important;border:none!important}:host ::ng-deep .mat-button-toggle-group .mat-button-toggle .mat-button-toggle-button .mat-button-toggle-label-content{font-size:14px!important;line-height:20px!important}@media screen and (min-width: 599px){:host ::ng-deep .tb-entity-select{display:flex;flex-direction:row;gap:16px}}:host ::ng-deep .tb-entity-select tb-entity-type-select{flex:1}:host ::ng-deep .tb-entity-select tb-entity-autocomplete{flex:1}:host ::ng-deep .tb-entity-select tb-entity-autocomplete mat-form-field{width:100%!important}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}}),function(e){e.CUSTOMER="CUSTOMER",e.TENANT="TENANT",e.RELATED="RELATED",e.ALARM_ORIGINATOR="ALARM_ORIGINATOR",e.ENTITY="ENTITY"}(It||(It={}));const St=new Map([[It.CUSTOMER,"tb.rulenode.originator-customer"],[It.TENANT,"tb.rulenode.originator-tenant"],[It.RELATED,"tb.rulenode.originator-related"],[It.ALARM_ORIGINATOR,"tb.rulenode.originator-alarm-originator"],[It.ENTITY,"tb.rulenode.originator-entity"]]),Nt=new Map([[It.CUSTOMER,"tb.rulenode.originator-customer-desc"],[It.TENANT,"tb.rulenode.originator-tenant-desc"],[It.RELATED,"tb.rulenode.originator-related-entity-desc"],[It.ALARM_ORIGINATOR,"tb.rulenode.originator-alarm-originator-desc"],[It.ENTITY,"tb.rulenode.originator-entity-by-name-pattern-desc"]]),qt=[F.createdTime,F.name,{value:"type",name:"tb.rulenode.profile-name",keyName:"originatorProfileName"},F.firstName,F.lastName,F.email,F.title,F.country,F.state,F.city,F.address,F.address2,F.zip,F.phone,F.label,{value:"id",name:"tb.rulenode.id",keyName:"id"},{value:"additionalInfo",name:"tb.rulenode.additional-info",keyName:"additionalInfo"}],At=new Map([["type","profileName"],["createdTime","createdTime"],["name","name"],["firstName","firstName"],["lastName","lastName"],["email","email"],["title","title"],["country","country"],["state","state"],["city","city"],["address","address"],["address2","address2"],["zip","zip"],["phone","phone"],["label","label"],["id","id"],["additionalInfo","additionalInfo"]]);var Mt;!function(e){e.CIRCLE="CIRCLE",e.POLYGON="POLYGON"}(Mt||(Mt={}));const Et=new Map([[Mt.CIRCLE,"tb.rulenode.perimeter-circle"],[Mt.POLYGON,"tb.rulenode.perimeter-polygon"]]);var wt;!function(e){e.MILLISECONDS="MILLISECONDS",e.SECONDS="SECONDS",e.MINUTES="MINUTES",e.HOURS="HOURS",e.DAYS="DAYS"}(wt||(wt={}));const Gt=new Map([[wt.MILLISECONDS,"tb.rulenode.time-unit-milliseconds"],[wt.SECONDS,"tb.rulenode.time-unit-seconds"],[wt.MINUTES,"tb.rulenode.time-unit-minutes"],[wt.HOURS,"tb.rulenode.time-unit-hours"],[wt.DAYS,"tb.rulenode.time-unit-days"]]);var Dt;!function(e){e.METER="METER",e.KILOMETER="KILOMETER",e.FOOT="FOOT",e.MILE="MILE",e.NAUTICAL_MILE="NAUTICAL_MILE"}(Dt||(Dt={}));const Vt=new Map([[Dt.METER,"tb.rulenode.range-unit-meter"],[Dt.KILOMETER,"tb.rulenode.range-unit-kilometer"],[Dt.FOOT,"tb.rulenode.range-unit-foot"],[Dt.MILE,"tb.rulenode.range-unit-mile"],[Dt.NAUTICAL_MILE,"tb.rulenode.range-unit-nautical-mile"]]);var Pt;!function(e){e.ID="ID",e.TITLE="TITLE",e.COUNTRY="COUNTRY",e.STATE="STATE",e.CITY="CITY",e.ZIP="ZIP",e.ADDRESS="ADDRESS",e.ADDRESS2="ADDRESS2",e.PHONE="PHONE",e.EMAIL="EMAIL",e.ADDITIONAL_INFO="ADDITIONAL_INFO"}(Pt||(Pt={}));const Rt=new Map([[Pt.ID,"tb.rulenode.entity-details-id"],[Pt.TITLE,"tb.rulenode.entity-details-title"],[Pt.COUNTRY,"tb.rulenode.entity-details-country"],[Pt.STATE,"tb.rulenode.entity-details-state"],[Pt.CITY,"tb.rulenode.entity-details-city"],[Pt.ZIP,"tb.rulenode.entity-details-zip"],[Pt.ADDRESS,"tb.rulenode.entity-details-address"],[Pt.ADDRESS2,"tb.rulenode.entity-details-address2"],[Pt.PHONE,"tb.rulenode.entity-details-phone"],[Pt.EMAIL,"tb.rulenode.entity-details-email"],[Pt.ADDITIONAL_INFO,"tb.rulenode.entity-details-additional_info"]]);var Ot;!function(e){e.FIRST="FIRST",e.LAST="LAST",e.ALL="ALL"}(Ot||(Ot={}));const _t=new Map([[Ot.FIRST,"tb.rulenode.first"],[Ot.LAST,"tb.rulenode.last"],[Ot.ALL,"tb.rulenode.all"]]),Bt=new Map([[Ot.FIRST,"tb.rulenode.first-mode-hint"],[Ot.LAST,"tb.rulenode.last-mode-hint"],[Ot.ALL,"tb.rulenode.all-mode-hint"]]);var Kt,Ht;!function(e){e.ASC="ASC",e.DESC="DESC"}(Kt||(Kt={})),function(e){e.ATTRIBUTES="ATTRIBUTES",e.LATEST_TELEMETRY="LATEST_TELEMETRY",e.FIELDS="FIELDS"}(Ht||(Ht={}));const zt=new Map([[Ht.ATTRIBUTES,"tb.rulenode.attributes"],[Ht.LATEST_TELEMETRY,"tb.rulenode.latest-telemetry"],[Ht.FIELDS,"tb.rulenode.fields"]]),Ut=new Map([[Ht.ATTRIBUTES,"tb.rulenode.add-mapped-attribute-to"],[Ht.LATEST_TELEMETRY,"tb.rulenode.add-mapped-latest-telemetry-to"],[Ht.FIELDS,"tb.rulenode.add-mapped-fields-to"]]),jt=new Map([[Kt.ASC,"tb.rulenode.ascending"],[Kt.DESC,"tb.rulenode.descending"]]);var $t;!function(e){e.STANDARD="STANDARD",e.FIFO="FIFO"}($t||($t={}));const Jt=new Map([[$t.STANDARD,"tb.rulenode.sqs-queue-standard"],[$t.FIFO,"tb.rulenode.sqs-queue-fifo"]]),Qt=["anonymous","basic","cert.PEM"],Yt=new Map([["anonymous","tb.rulenode.credentials-anonymous"],["basic","tb.rulenode.credentials-basic"],["cert.PEM","tb.rulenode.credentials-pem"]]),Wt=["sas","cert.PEM"],Zt=new Map([["sas","tb.rulenode.credentials-sas"],["cert.PEM","tb.rulenode.credentials-pem"]]);var Xt;!function(e){e.GET="GET",e.POST="POST",e.PUT="PUT",e.DELETE="DELETE"}(Xt||(Xt={}));const en=["US-ASCII","ISO-8859-1","UTF-8","UTF-16BE","UTF-16LE","UTF-16"],tn=new Map([["US-ASCII","tb.rulenode.charset-us-ascii"],["ISO-8859-1","tb.rulenode.charset-iso-8859-1"],["UTF-8","tb.rulenode.charset-utf-8"],["UTF-16BE","tb.rulenode.charset-utf-16be"],["UTF-16LE","tb.rulenode.charset-utf-16le"],["UTF-16","tb.rulenode.charset-utf-16"]]);var nn;!function(e){e.CUSTOM="CUSTOM",e.ADD="ADD",e.SUB="SUB",e.MULT="MULT",e.DIV="DIV",e.SIN="SIN",e.SINH="SINH",e.COS="COS",e.COSH="COSH",e.TAN="TAN",e.TANH="TANH",e.ACOS="ACOS",e.ASIN="ASIN",e.ATAN="ATAN",e.ATAN2="ATAN2",e.EXP="EXP",e.EXPM1="EXPM1",e.SQRT="SQRT",e.CBRT="CBRT",e.GET_EXP="GET_EXP",e.HYPOT="HYPOT",e.LOG="LOG",e.LOG10="LOG10",e.LOG1P="LOG1P",e.CEIL="CEIL",e.FLOOR="FLOOR",e.FLOOR_DIV="FLOOR_DIV",e.FLOOR_MOD="FLOOR_MOD",e.ABS="ABS",e.MIN="MIN",e.MAX="MAX",e.POW="POW",e.SIGNUM="SIGNUM",e.RAD="RAD",e.DEG="DEG"}(nn||(nn={}));const rn=new Map([[nn.CUSTOM,{value:nn.CUSTOM,name:"Custom Function",description:"Use this function to specify complex mathematical expression.",minArgs:1,maxArgs:16}],[nn.ADD,{value:nn.ADD,name:"Addition",description:"x + y",minArgs:2,maxArgs:2}],[nn.SUB,{value:nn.SUB,name:"Subtraction",description:"x - y",minArgs:2,maxArgs:2}],[nn.MULT,{value:nn.MULT,name:"Multiplication",description:"x * y",minArgs:2,maxArgs:2}],[nn.DIV,{value:nn.DIV,name:"Division",description:"x / y",minArgs:2,maxArgs:2}],[nn.SIN,{value:nn.SIN,name:"Sine",description:"Returns the trigonometric sine of an angle in radians.",minArgs:1,maxArgs:1}],[nn.SINH,{value:nn.SINH,name:"Hyperbolic sine",description:"Returns the hyperbolic sine of an argument.",minArgs:1,maxArgs:1}],[nn.COS,{value:nn.COS,name:"Cosine",description:"Returns the trigonometric cosine of an angle in radians.",minArgs:1,maxArgs:1}],[nn.COSH,{value:nn.COSH,name:"Hyperbolic cosine",description:"Returns the hyperbolic cosine of an argument.",minArgs:1,maxArgs:1}],[nn.TAN,{value:nn.TAN,name:"Tangent",description:"Returns the trigonometric tangent of an angle in radians",minArgs:1,maxArgs:1}],[nn.TANH,{value:nn.TANH,name:"Hyperbolic tangent",description:"Returns the hyperbolic tangent of an argument",minArgs:1,maxArgs:1}],[nn.ACOS,{value:nn.ACOS,name:"Arc cosine",description:"Returns the arc cosine of an argument",minArgs:1,maxArgs:1}],[nn.ASIN,{value:nn.ASIN,name:"Arc sine",description:"Returns the arc sine of an argument",minArgs:1,maxArgs:1}],[nn.ATAN,{value:nn.ATAN,name:"Arc tangent",description:"Returns the arc tangent of an argument",minArgs:1,maxArgs:1}],[nn.ATAN2,{value:nn.ATAN2,name:"2-argument arc tangent",description:"Returns the angle theta from the conversion of rectangular coordinates (x, y) to polar coordinates (r, theta)",minArgs:2,maxArgs:2}],[nn.EXP,{value:nn.EXP,name:"Exponential",description:"Returns Euler's number e raised to the power of an argument",minArgs:1,maxArgs:1}],[nn.EXPM1,{value:nn.EXPM1,name:"Exponential minus one",description:"Returns Euler's number e raised to the power of an argument minus one",minArgs:1,maxArgs:1}],[nn.SQRT,{value:nn.SQRT,name:"Square",description:"Returns the correctly rounded positive square root of an argument",minArgs:1,maxArgs:1}],[nn.CBRT,{value:nn.CBRT,name:"Cube root",description:"Returns the cube root of an argument",minArgs:1,maxArgs:1}],[nn.GET_EXP,{value:nn.GET_EXP,name:"Get exponent",description:"Returns the unbiased exponent used in the representation of an argument",minArgs:1,maxArgs:1}],[nn.HYPOT,{value:nn.HYPOT,name:"Square root",description:"Returns the square root of the squares of the arguments",minArgs:2,maxArgs:2}],[nn.LOG,{value:nn.LOG,name:"Logarithm",description:"Returns the natural logarithm of an argument",minArgs:1,maxArgs:1}],[nn.LOG10,{value:nn.LOG10,name:"Base 10 logarithm",description:"Returns the base 10 logarithm of an argument",minArgs:1,maxArgs:1}],[nn.LOG1P,{value:nn.LOG1P,name:"Logarithm of the sum",description:"Returns the natural logarithm of the sum of an argument",minArgs:1,maxArgs:1}],[nn.CEIL,{value:nn.CEIL,name:"Ceiling",description:"Returns the smallest (closest to negative infinity) of an argument",minArgs:1,maxArgs:1}],[nn.FLOOR,{value:nn.FLOOR,name:"Floor",description:"Returns the largest (closest to positive infinity) of an argument",minArgs:1,maxArgs:1}],[nn.FLOOR_DIV,{value:nn.FLOOR_DIV,name:"Floor division",description:"Returns the largest (closest to positive infinity) of the arguments",minArgs:2,maxArgs:2}],[nn.FLOOR_MOD,{value:nn.FLOOR_MOD,name:"Floor modulus",description:"Returns the floor modulus of the arguments",minArgs:2,maxArgs:2}],[nn.ABS,{value:nn.ABS,name:"Absolute",description:"Returns the absolute value of an argument",minArgs:1,maxArgs:1}],[nn.MIN,{value:nn.MIN,name:"Min",description:"Returns the smaller of the arguments",minArgs:2,maxArgs:2}],[nn.MAX,{value:nn.MAX,name:"Max",description:"Returns the greater of the arguments",minArgs:2,maxArgs:2}],[nn.POW,{value:nn.POW,name:"Raise to a power",description:"Returns the value of the first argument raised to the power of the second argument",minArgs:2,maxArgs:2}],[nn.SIGNUM,{value:nn.SIGNUM,name:"Sign of a real number",description:"Returns the signum function of the argument",minArgs:1,maxArgs:1}],[nn.RAD,{value:nn.RAD,name:"Radian",description:"Converts an angle measured in degrees to an approximately equivalent angle measured in radians",minArgs:1,maxArgs:1}],[nn.DEG,{value:nn.DEG,name:"Degrees",description:"Converts an angle measured in radians to an approximately equivalent angle measured in degrees.",minArgs:1,maxArgs:1}]]);var on,an,ln;!function(e){e.MESSAGE_BODY="MESSAGE_BODY",e.MESSAGE_METADATA="MESSAGE_METADATA",e.ATTRIBUTE="ATTRIBUTE",e.TIME_SERIES="TIME_SERIES",e.CONSTANT="CONSTANT"}(on||(on={})),function(e){e.MESSAGE_BODY="MESSAGE_BODY",e.MESSAGE_METADATA="MESSAGE_METADATA",e.ATTRIBUTE="ATTRIBUTE",e.TIME_SERIES="TIME_SERIES"}(an||(an={})),function(e){e.DATA="DATA",e.METADATA="METADATA"}(ln||(ln={}));const sn=new Map([[ln.DATA,"tb.rulenode.message-to-metadata"],[ln.METADATA,"tb.rulenode.metadata-to-message"]]),mn=(new Map([[ln.DATA,"tb.rulenode.from-message"],[ln.METADATA,"tb.rulenode.from-metadata"]]),new Map([[ln.DATA,"tb.rulenode.message"],[ln.METADATA,"tb.rulenode.metadata"]])),pn=new Map([[ln.DATA,"tb.rulenode.message"],[ln.METADATA,"tb.rulenode.message-metadata"]]),dn=new Map([[on.MESSAGE_BODY,{name:"tb.rulenode.message-body-type",description:"Fetch argument value from incoming message"}],[on.MESSAGE_METADATA,{name:"tb.rulenode.message-metadata-type",description:"Fetch argument value from incoming message metadata"}],[on.ATTRIBUTE,{name:"tb.rulenode.attribute-type",description:"Fetch attribute value from database"}],[on.TIME_SERIES,{name:"tb.rulenode.time-series-type",description:"Fetch latest time-series value from database"}],[on.CONSTANT,{name:"tb.rulenode.constant-type",description:"Define constant value"}]]),un=new Map([[an.MESSAGE_BODY,{name:"tb.rulenode.message-body-type",description:"Add result to the outgoing message"}],[an.MESSAGE_METADATA,{name:"tb.rulenode.message-metadata-type",description:"Add result to the outgoing message metadata"}],[an.ATTRIBUTE,{name:"tb.rulenode.attribute-type",description:"Store result as an entity attribute in the database"}],[an.TIME_SERIES,{name:"tb.rulenode.time-series-type",description:"Store result as an entity time-series in the database"}]]),cn=["x","y","z","a","b","c","d","k","l","m","n","o","p","r","s","t"];var gn,fn;!function(e){e.SHARED_SCOPE="SHARED_SCOPE",e.SERVER_SCOPE="SERVER_SCOPE",e.CLIENT_SCOPE="CLIENT_SCOPE"}(gn||(gn={})),function(e){e.SHARED_SCOPE="SHARED_SCOPE",e.SERVER_SCOPE="SERVER_SCOPE"}(fn||(fn={}));const yn=new Map([[gn.SHARED_SCOPE,"tb.rulenode.shared-scope"],[gn.SERVER_SCOPE,"tb.rulenode.server-scope"],[gn.CLIENT_SCOPE,"tb.rulenode.client-scope"]]);var bn;!function(e){e.ON_FIRST_MESSAGE="ON_FIRST_MESSAGE",e.ON_EACH_MESSAGE="ON_EACH_MESSAGE"}(bn||(bn={}));const xn=new Map([[bn.ON_EACH_MESSAGE,{value:!0,name:"tb.rulenode.presence-monitoring-strategy-on-each-message"}],[bn.ON_FIRST_MESSAGE,{value:!1,name:"tb.rulenode.presence-monitoring-strategy-on-first-message"}]]);class hn extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.perimeterType=Mt,this.perimeterTypes=Object.keys(Mt),this.perimeterTypeTranslationMap=Et,this.rangeUnits=Object.keys(Dt),this.rangeUnitTranslationMap=Vt,this.presenceMonitoringStrategies=xn,this.presenceMonitoringStrategyKeys=Array.from(this.presenceMonitoringStrategies.keys()),this.timeUnits=Object.keys(wt),this.timeUnitsTranslationMap=Gt,this.defaultPaddingEnable=!0}configForm(){return this.geoActionConfigForm}onConfigurationSet(e){this.geoActionConfigForm=this.fb.group({reportPresenceStatusOnEachMessage:[!e||e.reportPresenceStatusOnEachMessage,[O.required]],latitudeKeyName:[e?e.latitudeKeyName:null,[O.required]],longitudeKeyName:[e?e.longitudeKeyName:null,[O.required]],perimeterType:[e?e.perimeterType:null,[O.required]],fetchPerimeterInfoFromMessageMetadata:[!!e&&e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterKeyName:[e?e.perimeterKeyName:null,[]],centerLatitude:[e?e.centerLatitude:null,[]],centerLongitude:[e?e.centerLatitude:null,[]],range:[e?e.range:null,[]],rangeUnit:[e?e.rangeUnit:null,[]],polygonsDefinition:[e?e.polygonsDefinition:null,[]],minInsideDuration:[e?e.minInsideDuration:null,[O.required,O.min(1),O.max(2147483647)]],minInsideDurationTimeUnit:[e?e.minInsideDurationTimeUnit:null,[O.required]],minOutsideDuration:[e?e.minOutsideDuration:null,[O.required,O.min(1),O.max(2147483647)]],minOutsideDurationTimeUnit:[e?e.minOutsideDurationTimeUnit:null,[O.required]]})}validatorTriggers(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]}updateValidators(e){const t=this.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,n=this.geoActionConfigForm.get("perimeterType").value;t?this.geoActionConfigForm.get("perimeterKeyName").setValidators([O.required]):this.geoActionConfigForm.get("perimeterKeyName").setValidators([]),t||n!==Mt.CIRCLE?(this.geoActionConfigForm.get("centerLatitude").setValidators([]),this.geoActionConfigForm.get("centerLongitude").setValidators([]),this.geoActionConfigForm.get("range").setValidators([]),this.geoActionConfigForm.get("rangeUnit").setValidators([]),this.defaultPaddingEnable=!0):(this.geoActionConfigForm.get("centerLatitude").setValidators([O.required,O.min(-90),O.max(90)]),this.geoActionConfigForm.get("centerLongitude").setValidators([O.required,O.min(-180),O.max(180)]),this.geoActionConfigForm.get("range").setValidators([O.required,O.min(0)]),this.geoActionConfigForm.get("rangeUnit").setValidators([O.required]),this.defaultPaddingEnable=!1),t||n!==Mt.POLYGON?this.geoActionConfigForm.get("polygonsDefinition").setValidators([]):this.geoActionConfigForm.get("polygonsDefinition").setValidators([O.required]),this.geoActionConfigForm.get("perimeterKeyName").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})}}e("GpsGeoActionConfigComponent",hn),hn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:hn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),hn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:hn,selector:"tb-action-node-gps-geofencing-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="geoActionConfigForm" class="tb-form-panel no-border no-padding">\n  <section class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.coordinate-field-names</div>\n    <section>\n      <div fxLayout="row" fxLayoutGap="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.latitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="latitudeKeyName" required>\n          <mat-error *ngIf="geoActionConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.latitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.longitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="longitudeKeyName" required>\n          <mat-error *ngIf="geoActionConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.longitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.coordinate-field-hint</div>\n    </section>\n  </section>\n  <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">\n    <div class="tb-form-panel-title" translate>tb.rulenode.geofence-configuration</div>\n    <section fxLayout="column">\n      <mat-form-field fxFlex class="mat-block" hideRequiredMarker>\n        <mat-label>{{ \'tb.rulenode.perimeter-type\' | translate }}</mat-label>\n        <mat-select formControlName="perimeterType">\n          <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n            {{ perimeterTypeTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div tb-hint-tooltip-icon="{{ geoActionConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE\n        ? (\'tb.rulenode.fetch-circle-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoActionConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoActionConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'})\n        : (\'tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoActionConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoActionConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'}) }}"\n           class="tb-form-row no-border no-padding slide-toggle">\n        <mat-slide-toggle class="mat-slide" formControlName="fetchPerimeterInfoFromMessageMetadata">\n          {{ \'tb.rulenode.fetch-perimeter-info-from-metadata\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field *ngIf="geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value" class="mat-block">\n        <mat-label>{{ \'tb.rulenode.perimeter-key-name\' | translate }}</mat-label>\n        <input matInput formControlName="perimeterKeyName" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'perimeterKeyName\').hasError(\'required\')">\n          {{ \'tb.rulenode.perimeter-key-name-required\' | translate }}\n        </mat-error>\n        <mat-hint>{{ \'tb.rulenode.perimeter-key-name-hint\' | translate }}</mat-hint>\n      </mat-form-field>\n      <div fxLayout="column"\n           *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n              !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-latitude\' | translate }}</mat-label>\n            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-longitude\' | translate }}</mat-label>\n            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range\' | translate }}</mat-label>\n            <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'range\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range-units\' | translate }}</mat-label>\n            <mat-select formControlName="rangeUnit" required>\n              <mat-option *ngFor="let type of rangeUnits" [value]="type">\n                {{ rangeUnitTranslationMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf="geoActionConfigForm.get(\'rangeUnit\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-units-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n      <div fxLayout="column" *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                                 !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <mat-form-field class="mat-block" subscriptSizing="dynamic">\n          <mat-label translate>tb.rulenode.polygon-definition</mat-label>\n          <input matInput formControlName="polygonsDefinition" required>\n          <mat-icon matSuffix class="margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                    color="primary"\n                    matTooltip="{{ \'tb.rulenode.polygon-definition-hint\' | translate }}">\n            help\n          </mat-icon>\n          <mat-error *ngIf="geoActionConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n            {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </section>\n  </section>\n  <section class="tb-form-panel stroked no-padding-bottom">\n    <div fxLayout="column" fxLayout.gt-sm="row"  fxLayoutGap.lt-md="16px" fxLayoutAlign="space-between">\n      <div class="tb-form-panel-title">{{ \'tb.rulenode.presence-monitoring-strategy\' | translate }}</div>\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="reportPresenceStatusOnEachMessage" appearance="fill" >\n        <tb-toggle-option *ngFor="let strategy of presenceMonitoringStrategyKeys" [value]="presenceMonitoringStrategies.get(strategy).value">\n          {{ presenceMonitoringStrategies.get(strategy).name | translate }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n    <div class="tb-form-hint tb-primary-fill"> {{ geoActionConfigForm.get(\'reportPresenceStatusOnEachMessage\').value === false ?\n        (\'tb.rulenode.presence-monitoring-strategy-on-first-message-hint\' | translate) :\n        (\'tb.rulenode.presence-monitoring-strategy-on-each-message-hint\' | translate) }}\n    </div>\n    <section fxLayout="column">\n      <div *ngIf="geoActionConfigForm.get(\'reportPresenceStatusOnEachMessage\').value === false">\n        <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-inside-duration</mat-label>\n            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'required\')">\n              {{ \'tb.rulenode.min-inside-duration-value-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'min\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'max\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-inside-duration-time-unit</mat-label>\n            <mat-select formControlName="minInsideDurationTimeUnit" required>\n              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-outside-duration</mat-label>\n            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'required\')">\n              {{ \'tb.rulenode.min-outside-duration-value-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'min\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'max\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-outside-duration-time-unit</mat-label>\n            <mat-select formControlName="minOutsideDurationTimeUnit" required>\n              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </section>\n  </section>\n</section>\n',styles:[":host .slide-toggle{margin-bottom:18px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:hn,decorators:[{type:n,args:[{selector:"tb-action-node-gps-geofencing-config",template:'<section [formGroup]="geoActionConfigForm" class="tb-form-panel no-border no-padding">\n  <section class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.coordinate-field-names</div>\n    <section>\n      <div fxLayout="row" fxLayoutGap="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.latitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="latitudeKeyName" required>\n          <mat-error *ngIf="geoActionConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.latitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.longitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="longitudeKeyName" required>\n          <mat-error *ngIf="geoActionConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.longitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.coordinate-field-hint</div>\n    </section>\n  </section>\n  <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">\n    <div class="tb-form-panel-title" translate>tb.rulenode.geofence-configuration</div>\n    <section fxLayout="column">\n      <mat-form-field fxFlex class="mat-block" hideRequiredMarker>\n        <mat-label>{{ \'tb.rulenode.perimeter-type\' | translate }}</mat-label>\n        <mat-select formControlName="perimeterType">\n          <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n            {{ perimeterTypeTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div tb-hint-tooltip-icon="{{ geoActionConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE\n        ? (\'tb.rulenode.fetch-circle-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoActionConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoActionConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'})\n        : (\'tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoActionConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoActionConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'}) }}"\n           class="tb-form-row no-border no-padding slide-toggle">\n        <mat-slide-toggle class="mat-slide" formControlName="fetchPerimeterInfoFromMessageMetadata">\n          {{ \'tb.rulenode.fetch-perimeter-info-from-metadata\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field *ngIf="geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value" class="mat-block">\n        <mat-label>{{ \'tb.rulenode.perimeter-key-name\' | translate }}</mat-label>\n        <input matInput formControlName="perimeterKeyName" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'perimeterKeyName\').hasError(\'required\')">\n          {{ \'tb.rulenode.perimeter-key-name-required\' | translate }}\n        </mat-error>\n        <mat-hint>{{ \'tb.rulenode.perimeter-key-name-hint\' | translate }}</mat-hint>\n      </mat-form-field>\n      <div fxLayout="column"\n           *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n              !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-latitude\' | translate }}</mat-label>\n            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-longitude\' | translate }}</mat-label>\n            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range\' | translate }}</mat-label>\n            <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'range\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range-units\' | translate }}</mat-label>\n            <mat-select formControlName="rangeUnit" required>\n              <mat-option *ngFor="let type of rangeUnits" [value]="type">\n                {{ rangeUnitTranslationMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf="geoActionConfigForm.get(\'rangeUnit\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-units-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n      <div fxLayout="column" *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                                 !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <mat-form-field class="mat-block" subscriptSizing="dynamic">\n          <mat-label translate>tb.rulenode.polygon-definition</mat-label>\n          <input matInput formControlName="polygonsDefinition" required>\n          <mat-icon matSuffix class="margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                    color="primary"\n                    matTooltip="{{ \'tb.rulenode.polygon-definition-hint\' | translate }}">\n            help\n          </mat-icon>\n          <mat-error *ngIf="geoActionConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n            {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </section>\n  </section>\n  <section class="tb-form-panel stroked no-padding-bottom">\n    <div fxLayout="column" fxLayout.gt-sm="row"  fxLayoutGap.lt-md="16px" fxLayoutAlign="space-between">\n      <div class="tb-form-panel-title">{{ \'tb.rulenode.presence-monitoring-strategy\' | translate }}</div>\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="reportPresenceStatusOnEachMessage" appearance="fill" >\n        <tb-toggle-option *ngFor="let strategy of presenceMonitoringStrategyKeys" [value]="presenceMonitoringStrategies.get(strategy).value">\n          {{ presenceMonitoringStrategies.get(strategy).name | translate }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n    <div class="tb-form-hint tb-primary-fill"> {{ geoActionConfigForm.get(\'reportPresenceStatusOnEachMessage\').value === false ?\n        (\'tb.rulenode.presence-monitoring-strategy-on-first-message-hint\' | translate) :\n        (\'tb.rulenode.presence-monitoring-strategy-on-each-message-hint\' | translate) }}\n    </div>\n    <section fxLayout="column">\n      <div *ngIf="geoActionConfigForm.get(\'reportPresenceStatusOnEachMessage\').value === false">\n        <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-inside-duration</mat-label>\n            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'required\')">\n              {{ \'tb.rulenode.min-inside-duration-value-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'min\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'max\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-inside-duration-time-unit</mat-label>\n            <mat-select formControlName="minInsideDurationTimeUnit" required>\n              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-outside-duration</mat-label>\n            <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'required\')">\n              {{ \'tb.rulenode.min-outside-duration-value-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'min\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'max\')">\n              {{ \'tb.rulenode.time-value-range\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex class="mat-block">\n            <mat-label translate>tb.rulenode.min-outside-duration-time-unit</mat-label>\n            <mat-select formControlName="minOutsideDurationTimeUnit" required>\n              <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n                {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n    </section>\n  </section>\n</section>\n',styles:[":host .slide-toggle{margin-bottom:18px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class vn extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-to-string-function"}configForm(){return this.logConfigForm}onConfigurationSet(e){this.logConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:b.JS,[O.required]],jsScript:[e?e.jsScript:null,[]],tbelScript:[e?e.tbelScript:null,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.logConfigForm.get("scriptLang").value;t!==b.TBEL||this.tbelEnabled||(t=b.JS,this.logConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.logConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.logConfigForm.get("jsScript").setValidators(t===b.JS?[O.required]:[]),this.logConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.logConfigForm.get("tbelScript").setValidators(t===b.TBEL?[O.required]:[]),this.logConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=b.JS)),e}testScript(e){const t=this.logConfigForm.get("scriptLang").value,n=t===b.JS?"jsScript":"tbelScript",r=t===b.JS?"rulenode/log_node_script_fn":"rulenode/tbel/log_node_script_fn",o=this.logConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"string",this.translate.instant("tb.rulenode.to-string"),"ToString",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.logConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.logConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}e("LogConfigComponent",vn),vn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vn,deps:[{token:P.Store},{token:R.UntypedFormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),vn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:vn,selector:"tb-action-node-log-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="logConfigForm" fxLayout="column">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="logConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="ToString"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/log_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="logConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="ToString"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/log_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ testScriptLabel | translate }}\n    </button>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ce.TbScriptLangComponent,selector:"tb-script-lang",inputs:["disabled"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vn,decorators:[{type:n,args:[{selector:"tb-action-node-log-config",template:'<section [formGroup]="logConfigForm" fxLayout="column">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="logConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="ToString"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/log_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="logConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="ToString"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/log_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ testScriptLabel | translate }}\n    </button>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}});class Cn extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.msgCountConfigForm}onConfigurationSet(e){this.msgCountConfigForm=this.fb.group({interval:[e?e.interval:null,[O.required,O.min(1)]],telemetryPrefix:[e?e.telemetryPrefix:null,[O.required]]})}}e("MsgCountConfigComponent",Cn),Cn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Cn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Cn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Cn,selector:"tb-action-node-msg-count-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="msgCountConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.interval-seconds</mat-label>\n    <input required type="number" min="1" step="1" matInput formControlName="interval">\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'required\')">\n      {{ \'tb.rulenode.interval-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-interval-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.output-timeseries-key-prefix</mat-label>\n    <input required matInput formControlName="telemetryPrefix">\n    <mat-error *ngIf="msgCountConfigForm.get(\'telemetryPrefix\').hasError(\'required\')">\n      {{ \'tb.rulenode.output-timeseries-key-prefix-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Cn,decorators:[{type:n,args:[{selector:"tb-action-node-msg-count-config",template:'<section [formGroup]="msgCountConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.interval-seconds</mat-label>\n    <input required type="number" min="1" step="1" matInput formControlName="interval">\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'required\')">\n      {{ \'tb.rulenode.interval-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-interval-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.output-timeseries-key-prefix</mat-label>\n    <input required matInput formControlName="telemetryPrefix">\n    <mat-error *ngIf="msgCountConfigForm.get(\'telemetryPrefix\').hasError(\'required\')">\n      {{ \'tb.rulenode.output-timeseries-key-prefix-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Fn extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.msgDelayConfigForm}onConfigurationSet(e){this.msgDelayConfigForm=this.fb.group({useMetadataPeriodInSecondsPatterns:[!!e&&e.useMetadataPeriodInSecondsPatterns,[]],periodInSeconds:[e?e.periodInSeconds:null,[]],periodInSecondsPattern:[e?e.periodInSecondsPattern:null,[]],maxPendingMsgs:[e?e.maxPendingMsgs:null,[O.required,O.min(1),O.max(1e5)]]})}validatorTriggers(){return["useMetadataPeriodInSecondsPatterns"]}updateValidators(e){this.msgDelayConfigForm.get("useMetadataPeriodInSecondsPatterns").value?(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([O.required]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([])):(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([O.required,O.min(0)])),this.msgDelayConfigForm.get("periodInSecondsPattern").updateValueAndValidity({emitEvent:e}),this.msgDelayConfigForm.get("periodInSeconds").updateValueAndValidity({emitEvent:e})}}e("MsgDelayConfigComponent",Fn),Fn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Fn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Fn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Fn,selector:"tb-action-node-msg-delay-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="msgDelayConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useMetadataPeriodInSecondsPatterns">\n    {{ \'tb.rulenode.use-metadata-period-in-seconds-patterns\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.use-metadata-period-in-seconds-patterns-hint</div>\n  <mat-form-field *ngIf="msgDelayConfigForm.get(\'useMetadataPeriodInSecondsPatterns\').value !== true; else periodInSecondsPattern"\n                  class="mat-block">\n    <mat-label translate>tb.rulenode.period-seconds</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.period-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-period-0-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <ng-template #periodInSecondsPattern>\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.period-in-seconds-pattern</mat-label>\n      <input required matInput formControlName="periodInSecondsPattern">\n      <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSecondsPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.period-in-seconds-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n    </mat-form-field>\n  </ng-template>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.max-pending-messages</mat-label>\n    <input required type="number" min="1" max="100000" step="1" matInput formControlName="maxPendingMsgs">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'required\')">\n      {{ \'tb.rulenode.max-pending-messages-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'min\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Fn,decorators:[{type:n,args:[{selector:"tb-action-node-msg-delay-config",template:'<section [formGroup]="msgDelayConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useMetadataPeriodInSecondsPatterns">\n    {{ \'tb.rulenode.use-metadata-period-in-seconds-patterns\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.use-metadata-period-in-seconds-patterns-hint</div>\n  <mat-form-field *ngIf="msgDelayConfigForm.get(\'useMetadataPeriodInSecondsPatterns\').value !== true; else periodInSecondsPattern"\n                  class="mat-block">\n    <mat-label translate>tb.rulenode.period-seconds</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.period-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-period-0-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <ng-template #periodInSecondsPattern>\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n      <mat-label translate>tb.rulenode.period-in-seconds-pattern</mat-label>\n      <input required matInput formControlName="periodInSecondsPattern">\n      <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSecondsPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.period-in-seconds-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n    </mat-form-field>\n  </ng-template>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.max-pending-messages</mat-label>\n    <input required type="number" min="1" max="100000" step="1" matInput formControlName="maxPendingMsgs">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'required\')">\n      {{ \'tb.rulenode.max-pending-messages-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'min\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class kn extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopes=Object.keys(f),this.telemetryTypeTranslationsMap=y}configForm(){return this.pushToCloudConfigForm}onConfigurationSet(e){this.pushToCloudConfigForm=this.fb.group({scope:[e?e.scope:null,[O.required]]})}}e("PushToCloudConfigComponent",kn),kn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:kn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),kn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:kn,selector:"tb-action-node-push-to-cloud-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="pushToCloudConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="pushToCloudConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="pushToCloudConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:ft,selector:"[ngxClipboard]",inputs:["ngxClipboard","container","cbContent","cbSuccessMsg"],outputs:["cbOnSuccess","cbOnError"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:kn,decorators:[{type:n,args:[{selector:"tb-action-node-push-to-cloud-config",template:'<section [formGroup]="pushToCloudConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="pushToCloudConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="pushToCloudConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Tn extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopes=Object.keys(f),this.telemetryTypeTranslationsMap=y}configForm(){return this.pushToEdgeConfigForm}onConfigurationSet(e){this.pushToEdgeConfigForm=this.fb.group({scope:[e?e.scope:null,[O.required]]})}}e("PushToEdgeConfigComponent",Tn),Tn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Tn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Tn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Tn,selector:"tb-action-node-push-to-edge-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="pushToEdgeConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="pushToEdgeConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="pushToEdgeConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:ft,selector:"[ngxClipboard]",inputs:["ngxClipboard","container","cbContent","cbSuccessMsg"],outputs:["cbOnSuccess","cbOnError"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Tn,decorators:[{type:n,args:[{selector:"tb-action-node-push-to-edge-config",template:'<section [formGroup]="pushToEdgeConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="pushToEdgeConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="pushToEdgeConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Ln extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.rpcReplyConfigForm}onConfigurationSet(e){this.rpcReplyConfigForm=this.fb.group({serviceIdMetaDataAttribute:[e?e.serviceIdMetaDataAttribute:null,[]],sessionIdMetaDataAttribute:[e?e.sessionIdMetaDataAttribute:null,[]],requestIdMetaDataAttribute:[e?e.requestIdMetaDataAttribute:null,[]]})}}e("RpcReplyConfigComponent",Ln),Ln.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ln,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Ln.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Ln,selector:"tb-action-node-rpc-reply-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="rpcReplyConfigForm" class="tb-form-panel stroked no-padding-bottom">\n  <div class="tb-form-panel-title" translate>tb.rulenode.reply-routing-configuration</div>\n  <tb-example-hint [hintText]="\'tb.rulenode.rpc-reply-routing-configuration-hint\'">\n  </tb-example-hint>\n  <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.service-id-metadata-attribute</mat-label>\n      <input matInput formControlName="serviceIdMetaDataAttribute">\n    </mat-form-field>\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.session-id-metadata-attribute</mat-label>\n      <input matInput formControlName="sessionIdMetaDataAttribute">\n    </mat-form-field>\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.request-id-metadata-attribute</mat-label>\n      <input matInput formControlName="requestIdMetaDataAttribute">\n    </mat-form-field>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ln,decorators:[{type:n,args:[{selector:"tb-action-node-rpc-reply-config",template:'<section [formGroup]="rpcReplyConfigForm" class="tb-form-panel stroked no-padding-bottom">\n  <div class="tb-form-panel-title" translate>tb.rulenode.reply-routing-configuration</div>\n  <tb-example-hint [hintText]="\'tb.rulenode.rpc-reply-routing-configuration-hint\'">\n  </tb-example-hint>\n  <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.service-id-metadata-attribute</mat-label>\n      <input matInput formControlName="serviceIdMetaDataAttribute">\n    </mat-form-field>\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.session-id-metadata-attribute</mat-label>\n      <input matInput formControlName="sessionIdMetaDataAttribute">\n    </mat-form-field>\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.request-id-metadata-attribute</mat-label>\n      <input matInput formControlName="requestIdMetaDataAttribute">\n    </mat-form-field>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class In extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.rpcRequestConfigForm}onConfigurationSet(e){this.rpcRequestConfigForm=this.fb.group({timeoutInSeconds:[e?e.timeoutInSeconds:null,[O.required,O.min(0)]]})}}e("RpcRequestConfigComponent",In),In.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:In,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),In.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:In,selector:"tb-action-node-rpc-request-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="rpcRequestConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.timeout-sec</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="timeoutInSeconds" required>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.timeout-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-timeout-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:In,decorators:[{type:n,args:[{selector:"tb-action-node-rpc-request-config",template:'<section [formGroup]="rpcRequestConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.timeout-sec</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="timeoutInSeconds" required>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.timeout-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-timeout-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Sn extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.injector=n,this.fb=r,this.propagateChange=null,this.valueChangeSubscription=null}ngOnInit(){this.ngControl=this.injector.get(_),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.kvListFormGroup=this.fb.group({}),this.kvListFormGroup.addControl("keyVals",this.fb.array([]))}keyValsFormArray(){return this.kvListFormGroup.get("keyVals")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.kvListFormGroup.disable({emitEvent:!1}):this.kvListFormGroup.enable({emitEvent:!1})}writeValue(e){this.valueChangeSubscription&&this.valueChangeSubscription.unsubscribe();const t=[];if(e)for(const n of Object.keys(e))Object.prototype.hasOwnProperty.call(e,n)&&t.push(this.fb.group({key:[n,[O.required]],value:[e[n],[O.required]]}));this.kvListFormGroup.setControl("keyVals",this.fb.array(t)),this.valueChangeSubscription=this.kvListFormGroup.valueChanges.subscribe((()=>{this.updateModel()}))}removeKeyVal(e){this.kvListFormGroup.get("keyVals").removeAt(e)}addKeyVal(){this.kvListFormGroup.get("keyVals").push(this.fb.group({key:["",[O.required]],value:["",[O.required]]}))}validate(e){const t=this.kvListFormGroup.get("keyVals").value;if(!t.length&&this.required)return{kvMapRequired:!0};if(!this.kvListFormGroup.valid)return{kvFieldsRequired:!0};if(this.uniqueKeyValuePairValidator)for(const e of t)if(e.key===e.value)return{uniqueKeyValuePair:!0};return null}updateModel(){const e=this.kvListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.kvListFormGroup.valid)this.propagateChange(null);else{const t={};e.forEach((e=>{t[e.key]=e.value})),this.propagateChange(t)}}}e("KvMapConfigOldComponent",Sn),Sn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Sn,deps:[{token:P.Store},{token:Z.TranslateService},{token:t.Injector},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Sn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Sn,selector:"tb-kv-map-config-old",inputs:{disabled:"disabled",uniqueKeyValuePairValidator:"uniqueKeyValuePairValidator",requiredText:"requiredText",keyText:"keyText",keyRequiredText:"keyRequiredText",valText:"valText",valRequiredText:"valRequiredText",hintText:"hintText",required:"required"},providers:[{provide:B,useExisting:c((()=>Sn)),multi:!0},{provide:K,useExisting:c((()=>Sn)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section fxLayout="column" class="tb-kv-map-config" [formGroup]="kvListFormGroup">\n  <div class="header" fxFlex fxLayout="row" fxLayoutGap="8px">\n    <span class="cell tb-required" fxFlex>{{ keyText | translate }}</span>\n    <span class="cell tb-required" fxFlex>{{ valText | translate }}</span>\n    <span [fxShow]="!disabled" style="width: 52px;" innerHTML="&nbsp"></span>\n  </div>\n  <div class="body">\n    <div class="row" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"\n         formArrayName="keyVals"\n         *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">\n      <mat-form-field fxFlex class="cell mat-block">\n        <input [formControl]="keyValControl.get(\'key\')" matInput required\n               placeholder="{{ keyText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'key\').hasError(\'required\')">\n          {{ keyRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex class="cell mat-block">\n        <input [formControl]="keyValControl.get(\'value\')" matInput required\n               placeholder="{{ valText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'value\').hasError(\'required\')">\n          {{ valRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <button mat-icon-button color="primary"\n              [fxShow]="!disabled"\n              type="button"\n              (click)="removeKeyVal($index)"\n              [disabled]="isLoading$ | async"\n              matTooltip="{{ \'tb.key-val.remove-entry\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div *ngIf="hintText" class="tb-hint" [innerHTML]="hintText | translate | safe: \'html\'"></div>\n  </div>\n  <tb-error [error]="ngControl.hasError(\'kvMapRequired\') || ngControl.hasError(\'uniqueKeyValuePair\') ?\n                     (ngControl.hasError(\'kvMapRequired\') ? translate.instant(requiredText) :\n                     translate.instant(\'tb.key-val.unique-key-value-pair-error\', {keyText: translate.instant(keyText),\n                     valText: translate.instant(valText)})) : \'\'"></tb-error>\n  <div style="margin-top: 16px;">\n    <button mat-button mat-raised-button color="primary"\n            [fxShow]="!disabled"\n            [disabled]="isLoading$ | async"\n            (click)="addKeyVal()"\n            type="button"\n            matTooltip="{{ \'tb.key-val.add-entry\' | translate }}"\n            matTooltipPosition="above">\n      <mat-icon>add</mat-icon>\n      {{ \'action.add\' | translate }}\n    </button>\n  </div>\n</section>\n',styles:[":host .tb-kv-map-config{margin-bottom:16px}:host .tb-kv-map-config .header{padding-left:5px;padding-right:5px;padding-bottom:5px}:host .tb-kv-map-config .header .cell{padding-left:5px;padding-right:5px;color:#757575;font-size:12px;font-weight:700;white-space:nowrap}:host .tb-kv-map-config .header .tb-required:after{color:#757575;font-size:12px;font-weight:700}:host .tb-kv-map-config .body{padding-left:5px;padding-right:5px;padding-bottom:0;max-height:300px;overflow:auto}:host .tb-kv-map-config .body .cell{padding-left:5px;padding-right:5px}:host .tb-kv-map-config tb-error{display:block;margin-top:-12px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:De.TbErrorComponent,selector:"tb-error",inputs:["noMargin","error"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:Ve.DefaultShowHideDirective,selector:"  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]",inputs:["fxShow","fxShow.print","fxShow.xs","fxShow.sm","fxShow.md","fxShow.lg","fxShow.xl","fxShow.lt-sm","fxShow.lt-md","fxShow.lt-lg","fxShow.lt-xl","fxShow.gt-xs","fxShow.gt-sm","fxShow.gt-md","fxShow.gt-lg","fxHide","fxHide.print","fxHide.xs","fxHide.sm","fxHide.md","fxHide.lg","fxHide.xl","fxHide.lt-sm","fxHide.lt-md","fxHide.lt-lg","fxHide.lt-xl","fxHide.gt-xs","fxHide.gt-sm","fxHide.gt-md","fxHide.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormArrayName,selector:"[formArrayName]",inputs:["formArrayName"]},{kind:"pipe",type:U.AsyncPipe,name:"async"},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Sn,decorators:[{type:n,args:[{selector:"tb-kv-map-config-old",providers:[{provide:B,useExisting:c((()=>Sn)),multi:!0},{provide:K,useExisting:c((()=>Sn)),multi:!0}],template:'<section fxLayout="column" class="tb-kv-map-config" [formGroup]="kvListFormGroup">\n  <div class="header" fxFlex fxLayout="row" fxLayoutGap="8px">\n    <span class="cell tb-required" fxFlex>{{ keyText | translate }}</span>\n    <span class="cell tb-required" fxFlex>{{ valText | translate }}</span>\n    <span [fxShow]="!disabled" style="width: 52px;" innerHTML="&nbsp"></span>\n  </div>\n  <div class="body">\n    <div class="row" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"\n         formArrayName="keyVals"\n         *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">\n      <mat-form-field fxFlex class="cell mat-block">\n        <input [formControl]="keyValControl.get(\'key\')" matInput required\n               placeholder="{{ keyText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'key\').hasError(\'required\')">\n          {{ keyRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex class="cell mat-block">\n        <input [formControl]="keyValControl.get(\'value\')" matInput required\n               placeholder="{{ valText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'value\').hasError(\'required\')">\n          {{ valRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <button mat-icon-button color="primary"\n              [fxShow]="!disabled"\n              type="button"\n              (click)="removeKeyVal($index)"\n              [disabled]="isLoading$ | async"\n              matTooltip="{{ \'tb.key-val.remove-entry\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <div *ngIf="hintText" class="tb-hint" [innerHTML]="hintText | translate | safe: \'html\'"></div>\n  </div>\n  <tb-error [error]="ngControl.hasError(\'kvMapRequired\') || ngControl.hasError(\'uniqueKeyValuePair\') ?\n                     (ngControl.hasError(\'kvMapRequired\') ? translate.instant(requiredText) :\n                     translate.instant(\'tb.key-val.unique-key-value-pair-error\', {keyText: translate.instant(keyText),\n                     valText: translate.instant(valText)})) : \'\'"></tb-error>\n  <div style="margin-top: 16px;">\n    <button mat-button mat-raised-button color="primary"\n            [fxShow]="!disabled"\n            [disabled]="isLoading$ | async"\n            (click)="addKeyVal()"\n            type="button"\n            matTooltip="{{ \'tb.key-val.add-entry\' | translate }}"\n            matTooltipPosition="above">\n      <mat-icon>add</mat-icon>\n      {{ \'action.add\' | translate }}\n    </button>\n  </div>\n</section>\n',styles:[":host .tb-kv-map-config{margin-bottom:16px}:host .tb-kv-map-config .header{padding-left:5px;padding-right:5px;padding-bottom:5px}:host .tb-kv-map-config .header .cell{padding-left:5px;padding-right:5px;color:#757575;font-size:12px;font-weight:700;white-space:nowrap}:host .tb-kv-map-config .header .tb-required:after{color:#757575;font-size:12px;font-weight:700}:host .tb-kv-map-config .body{padding-left:5px;padding-right:5px;padding-bottom:0;max-height:300px;overflow:auto}:host .tb-kv-map-config .body .cell{padding-left:5px;padding-right:5px}:host .tb-kv-map-config tb-error{display:block;margin-top:-12px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:t.Injector},{type:R.FormBuilder}]},propDecorators:{disabled:[{type:m}],uniqueKeyValuePairValidator:[{type:m}],requiredText:[{type:m}],keyText:[{type:m}],keyRequiredText:[{type:m}],valText:[{type:m}],valRequiredText:[{type:m}],hintText:[{type:m}],required:[{type:m}]}});class Nn extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.saveToCustomTableConfigForm}onConfigurationSet(e){this.saveToCustomTableConfigForm=this.fb.group({tableName:[e?e.tableName:null,[O.required,O.pattern(/.*\S.*/)]],fieldsMapping:[e?e.fieldsMapping:null,[O.required]]})}prepareOutputConfig(e){return e.tableName=e.tableName.trim(),e}}e("SaveToCustomTableConfigComponent",Nn),Nn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Nn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Nn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Nn,selector:"tb-action-node-custom-table-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="saveToCustomTableConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.custom-table-name</mat-label>\n    <input required matInput formControlName="tableName">\n    <mat-error *ngIf="saveToCustomTableConfigForm.get(\'tableName\').hasError(\'required\') ||\n                      saveToCustomTableConfigForm.get(\'tableName\').hasError(\'pattern\')">\n      {{ \'tb.rulenode.custom-table-name-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.custom-table-hint</mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title tb-required">tb.rulenode.fields-mapping</label>\n  <tb-kv-map-config-old\n    required\n    formControlName="fieldsMapping"\n    requiredText="tb.rulenode.fields-mapping-required"\n    keyText="tb.rulenode.message-field"\n    keyRequiredText="tb.rulenode.message-field-required"\n    valText="tb.rulenode.table-col"\n    valRequiredText="tb.rulenode.table-col-required">\n  </tb-kv-map-config-old>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Sn,selector:"tb-kv-map-config-old",inputs:["disabled","uniqueKeyValuePairValidator","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","required"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Nn,decorators:[{type:n,args:[{selector:"tb-action-node-custom-table-config",template:'<section [formGroup]="saveToCustomTableConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.custom-table-name</mat-label>\n    <input required matInput formControlName="tableName">\n    <mat-error *ngIf="saveToCustomTableConfigForm.get(\'tableName\').hasError(\'required\') ||\n                      saveToCustomTableConfigForm.get(\'tableName\').hasError(\'pattern\')">\n      {{ \'tb.rulenode.custom-table-name-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.custom-table-hint</mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title tb-required">tb.rulenode.fields-mapping</label>\n  <tb-kv-map-config-old\n    required\n    formControlName="fieldsMapping"\n    requiredText="tb.rulenode.fields-mapping-required"\n    keyText="tb.rulenode.message-field"\n    keyRequiredText="tb.rulenode.message-field-required"\n    valText="tb.rulenode.table-col"\n    valRequiredText="tb.rulenode.table-col-required">\n  </tb-kv-map-config-old>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class qn extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.timeseriesConfigForm}onConfigurationSet(e){this.timeseriesConfigForm=this.fb.group({defaultTTL:[e?e.defaultTTL:null,[O.required,O.min(0)]],skipLatestPersistence:[!!e&&e.skipLatestPersistence,[]],useServerTs:[!!e&&e.useServerTs,[]]})}}e("TimeseriesConfigComponent",qn),qn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:qn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),qn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:qn,selector:"tb-action-node-timeseries-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="timeseriesConfigForm" class="tb-form-panel no-border no-padding">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.default-ttl</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="defaultTTL" required>\n    <mat-icon class="help-icon margin-8 cursor-pointer"\n              aria-hidden="false"\n              aria-label="help-icon"\n              matSuffix\n              matTooltip="{{ \'tb.rulenode.default-ttl-hint\' | translate }}">\n      help\n    </mat-icon>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'required\')">\n      {{ \'tb.rulenode.default-ttl-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-default-ttl-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div class="tb-form-panel stroked">\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.use-server-ts-hint\' | translate}}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="useServerTs">\n        {{ \'tb.rulenode.use-server-ts\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.skip-latest-persistence-hint\' | translate}}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="skipLatestPersistence">\n        {{ \'tb.rulenode.skip-latest-persistence\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:qn,decorators:[{type:n,args:[{selector:"tb-action-node-timeseries-config",template:'<section [formGroup]="timeseriesConfigForm" class="tb-form-panel no-border no-padding">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.default-ttl</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="defaultTTL" required>\n    <mat-icon class="help-icon margin-8 cursor-pointer"\n              aria-hidden="false"\n              aria-label="help-icon"\n              matSuffix\n              matTooltip="{{ \'tb.rulenode.default-ttl-hint\' | translate }}">\n      help\n    </mat-icon>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'required\')">\n      {{ \'tb.rulenode.default-ttl-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-default-ttl-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div class="tb-form-panel stroked">\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.use-server-ts-hint\' | translate}}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="useServerTs">\n        {{ \'tb.rulenode.use-server-ts\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.skip-latest-persistence-hint\' | translate}}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="skipLatestPersistence">\n        {{ \'tb.rulenode.skip-latest-persistence\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class An extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.unassignCustomerConfigForm}prepareInputConfig(e){return{customerNamePattern:fe(e?.customerNamePattern)?e.customerNamePattern:null,unassignFromCustomer:fe(e?.customerNamePattern)}}onConfigurationSet(e){this.unassignCustomerConfigForm=this.fb.group({customerNamePattern:[e.customerNamePattern,[]],unassignFromCustomer:[e.unassignFromCustomer,[]]})}validatorTriggers(){return["unassignFromCustomer"]}updateValidators(e){this.unassignCustomerConfigForm.get("unassignFromCustomer").value?this.unassignCustomerConfigForm.get("customerNamePattern").setValidators([O.required,O.pattern(/.*\S.*/)]):this.unassignCustomerConfigForm.get("customerNamePattern").setValidators([]),this.unassignCustomerConfigForm.get("customerNamePattern").updateValueAndValidity({emitEvent:e})}prepareOutputConfig(e){return{customerNamePattern:e.unassignFromCustomer?e.customerNamePattern.trim():null}}}e("UnassignCustomerConfigComponent",An),An.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:An,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),An.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:An,selector:"tb-action-node-un-assign-to-customer-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="unassignCustomerConfigForm" fxLayout="column">\n  <div class="tb-form-panel no-padding no-border">\n\n    <div class="tb-form-panel stroked" [class.no-padding-bottom]="unassignCustomerConfigForm.get(\'unassignFromCustomer\').value">\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.unassign-from-customer-tooltip\' | translate }}"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="unassignFromCustomer">\n          {{ \'tb.rulenode.unassign-from-customer\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field class="mat-block" subscriptSizing="dynamic" *ngIf="unassignCustomerConfigForm.get(\'unassignFromCustomer\').value">\n        <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n        <input required matInput formControlName="customerNamePattern">\n        <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\') ||\n                        unassignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'pattern\')">\n          {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n        </mat-error>\n        <mat-hint translate>tb.rulenode.customer-name-pattern-hint</mat-hint>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:An,decorators:[{type:n,args:[{selector:"tb-action-node-un-assign-to-customer-config",template:'<section [formGroup]="unassignCustomerConfigForm" fxLayout="column">\n  <div class="tb-form-panel no-padding no-border">\n\n    <div class="tb-form-panel stroked" [class.no-padding-bottom]="unassignCustomerConfigForm.get(\'unassignFromCustomer\').value">\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.unassign-from-customer-tooltip\' | translate }}"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="unassignFromCustomer">\n          {{ \'tb.rulenode.unassign-from-customer\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field class="mat-block" subscriptSizing="dynamic" *ngIf="unassignCustomerConfigForm.get(\'unassignFromCustomer\').value">\n        <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n        <input required matInput formControlName="customerNamePattern">\n        <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\') ||\n                        unassignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'pattern\')">\n          {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n        </mat-error>\n        <mat-hint translate>tb.rulenode.customer-name-pattern-hint</mat-hint>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Mn extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.sendRestApiCallReplyConfigForm}onConfigurationSet(e){this.sendRestApiCallReplyConfigForm=this.fb.group({requestIdMetaDataAttribute:[e?e.requestIdMetaDataAttribute:null,[]],serviceIdMetaDataAttribute:[e?e.serviceIdMetaDataAttribute:null,[]]})}}e("SendRestApiCallReplyConfigComponent",Mn),Mn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Mn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Mn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Mn,selector:"tb-action-node-send-rest-api-call-reply-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="sendRestApiCallReplyConfigForm" class="tb-form-panel stroked no-padding-bottom">\n  <div class="tb-form-panel-title" translate>tb.rulenode.reply-routing-configuration</div>\n  <tb-example-hint [hintText]="\'tb.rulenode.reply-routing-configuration-hint\'">\n  </tb-example-hint>\n  <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.service-id-metadata-attribute</mat-label>\n      <input matInput formControlName="serviceIdMetaDataAttribute">\n    </mat-form-field>\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.request-id-metadata-attribute</mat-label>\n      <input matInput formControlName="requestIdMetaDataAttribute">\n    </mat-form-field>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Mn,decorators:[{type:n,args:[{selector:"tb-action-node-send-rest-api-call-reply-config",template:'<section [formGroup]="sendRestApiCallReplyConfigForm" class="tb-form-panel stroked no-padding-bottom">\n  <div class="tb-form-panel-title" translate>tb.rulenode.reply-routing-configuration</div>\n  <tb-example-hint [hintText]="\'tb.rulenode.reply-routing-configuration-hint\'">\n  </tb-example-hint>\n  <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.service-id-metadata-attribute</mat-label>\n      <input matInput formControlName="serviceIdMetaDataAttribute">\n    </mat-form-field>\n    <mat-form-field class="flex">\n      <mat-label translate>tb.rulenode.request-id-metadata-attribute</mat-label>\n      <input matInput formControlName="requestIdMetaDataAttribute">\n    </mat-form-field>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class En extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopeMap=f,this.attributeScopes=Object.keys(f),this.telemetryTypeTranslationsMap=y,this.separatorKeysCodes=[Fe,ke,Te]}configForm(){return this.deleteAttributesConfigForm}onConfigurationSet(e){this.deleteAttributesConfigForm=this.fb.group({scope:[e?e.scope:null,[O.required]],keys:[e?e.keys:null,[O.required]],sendAttributesDeletedNotification:[!!e&&e.sendAttributesDeletedNotification,[]],notifyDevice:[!!e&&e.notifyDevice,[]]}),this.deleteAttributesConfigForm.get("scope").valueChanges.subscribe((e=>{e!==f.SHARED_SCOPE&&this.deleteAttributesConfigForm.get("notifyDevice").patchValue(!1,{emitEvent:!1})}))}removeKey(e){const t=this.deleteAttributesConfigForm.get("keys").value,n=t.indexOf(e);n>=0&&(t.splice(n,1),this.deleteAttributesConfigForm.get("keys").patchValue(t,{emitEvent:!0}))}addKey(e){const t=e.input;let n=e.value;if((n||"").trim()){n=n.trim();let e=this.deleteAttributesConfigForm.get("keys").value;e&&-1!==e.indexOf(n)||(e||(e=[]),e.push(n),this.deleteAttributesConfigForm.get("keys").patchValue(e,{emitEvent:!0}))}t&&(t.value="")}}e("DeleteAttributesConfigComponent",En),En.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:En,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),En.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:En,selector:"tb-action-node-delete-attributes-config",viewQueries:[{propertyName:"attributeChipList",first:!0,predicate:["attributeChipList"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deleteAttributesConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="deleteAttributesConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="deleteAttributesConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label>{{ \'tb.rulenode.attributes-keys\' | translate }}</mat-label>\n    <mat-chip-grid formControlName="keys" #attributeChipList>\n      <mat-chip-row\n        *ngFor="let key of deleteAttributesConfigForm.get(\'keys\').value;"\n        (removed)="removeKey(key)">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip-row>\n      <input matInput type="text"\n             [matChipInputFor]="attributeChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event)"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-grid>\n    <mat-error *ngIf="deleteAttributesConfigForm.get(\'keys\').hasError(\'required\')">{{ \'tb.rulenode.attributes-keys-required\' | translate }}</mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n\n  <section class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header>\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.send-attributes-deleted-notification-hint\' | translate }}"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="sendAttributesDeletedNotification">\n          {{ \'tb.rulenode.send-attributes-deleted-notification\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.notify-device-on-delete-hint\' | translate }}"\n           *ngIf="deleteAttributesConfigForm.get(\'scope\').value === attributeScopeMap.SHARED_SCOPE"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">\n          {{ \'tb.rulenode.notify-device\' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </mat-expansion-panel>\n  </section>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"component",type:Ie.MatChipGrid,selector:"mat-chip-grid",inputs:["tabIndex","disabled","placeholder","required","value","errorStateMatcher"],outputs:["change","valueChange"]},{kind:"directive",type:Ie.MatChipInput,selector:"input[matChipInputFor]",inputs:["matChipInputFor","matChipInputAddOnBlur","matChipInputSeparatorKeyCodes","placeholder","id","disabled"],outputs:["matChipInputTokenEnd"],exportAs:["matChipInput","matChipInputFor"]},{kind:"directive",type:Ie.MatChipRemove,selector:"[matChipRemove]"},{kind:"component",type:Ie.MatChipRow,selector:"mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]",inputs:["color","disabled","disableRipple","tabIndex","editable"],outputs:["edited"]},{kind:"directive",type:ft,selector:"[ngxClipboard]",inputs:["ngxClipboard","container","cbContent","cbSuccessMsg"],outputs:["cbOnSuccess","cbOnError"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:En,decorators:[{type:n,args:[{selector:"tb-action-node-delete-attributes-config",template:'<section [formGroup]="deleteAttributesConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <tb-example-hint [hintText]="\'tb.rulenode.attributes-scope-hint\'">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope\' | translate }}</mat-label>\n        <mat-select required\n                    class="tb-entity-type-select" matInput formControlName="scope">\n          <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n            {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label>{{ \'tb.rulenode.attributes-scope-value\' | translate }}</mat-label>\n        <input type="text" matInput readonly disabled [ngModel]="deleteAttributesConfigForm.get(\'scope\').value" [ngModelOptions]="{standalone: true}">\n        <button type="button"\n                matSuffix\n                mat-icon-button\n                aria-label="Copy"\n                ngxClipboard\n                [cbContent]="deleteAttributesConfigForm.get(\'scope\').value"\n                matTooltip="{{ \'tb.rulenode.attributes-scope-value-copy\' | translate }}">\n          <mat-icon aria-hidden="false"\n                    aria-label="help-icon">content_copy\n          </mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label>{{ \'tb.rulenode.attributes-keys\' | translate }}</mat-label>\n    <mat-chip-grid formControlName="keys" #attributeChipList>\n      <mat-chip-row\n        *ngFor="let key of deleteAttributesConfigForm.get(\'keys\').value;"\n        (removed)="removeKey(key)">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip-row>\n      <input matInput type="text"\n             [matChipInputFor]="attributeChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event)"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-grid>\n    <mat-error *ngIf="deleteAttributesConfigForm.get(\'keys\').hasError(\'required\')">{{ \'tb.rulenode.attributes-keys-required\' | translate }}</mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n\n  <section class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header>\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.send-attributes-deleted-notification-hint\' | translate }}"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="sendAttributesDeletedNotification">\n          {{ \'tb.rulenode.send-attributes-deleted-notification\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div tb-hint-tooltip-icon="{{ \'tb.rulenode.notify-device-on-delete-hint\' | translate }}"\n           *ngIf="deleteAttributesConfigForm.get(\'scope\').value === attributeScopeMap.SHARED_SCOPE"\n           class="tb-form-row no-border no-padding">\n        <mat-slide-toggle class="mat-slide" formControlName="notifyDevice">\n          {{ \'tb.rulenode.notify-device\' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </mat-expansion-panel>\n  </section>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]},propDecorators:{attributeChipList:[{type:u,args:["attributeChipList"]}]}});class wn extends k{get function(){return this.functionValue}set function(e){e&&this.functionValue!==e&&(this.functionValue=e,this.setupArgumentsFormGroup(!0))}constructor(e,t){super(e),this.store=e,this.fb=t,this.maxArgs=16,this.minArgs=1,this.displayArgumentName=!1,this.mathFunctionMap=rn,this.ArgumentType=on,this.attributeScopeMap=yn,this.argumentTypeMap=dn,this.arguments=Object.values(on),this.attributeScope=Object.values(gn),this.propagateChange=null,this.valueChangeSubscription=[]}ngOnInit(){this.argumentsFormGroup=this.fb.group({arguments:this.fb.array([])}),this.valueChangeSubscription.push(this.argumentsFormGroup.valueChanges.subscribe((()=>{this.updateModel()}))),this.setupArgumentsFormGroup()}onDrop(e){const t=this.argumentsFormArray,n=t.at(e.previousIndex);t.removeAt(e.previousIndex),t.insert(e.currentIndex,n),this.updateArgumentNames()}get argumentsFormArray(){return this.argumentsFormGroup.get("arguments")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.argumentsFormGroup.disable({emitEvent:!1}):(this.argumentsFormGroup.enable({emitEvent:!1}),this.argumentsFormArray.controls.forEach((e=>this.updateArgumentControlValidators(e))))}ngOnDestroy(){this.valueChangeSubscription.length&&this.valueChangeSubscription.forEach((e=>e.unsubscribe()))}writeValue(e){const t=[];e&&e.forEach(((e,n)=>{t.push(this.createArgumentControl(e,n))})),this.argumentsFormGroup.setControl("arguments",this.fb.array(t),{emitEvent:!1}),this.setupArgumentsFormGroup()}removeArgument(e){this.argumentsFormArray.removeAt(e),this.updateArgumentNames()}addArgument(e=!0){const t=this.argumentsFormArray,n=this.createArgumentControl(null,t.length);t.push(n,{emitEvent:e})}validate(e){return this.argumentsFormGroup.valid?null:{argumentsRequired:!0}}setupArgumentsFormGroup(e=!1){if(this.function&&(this.maxArgs=this.mathFunctionMap.get(this.function).maxArgs,this.minArgs=this.mathFunctionMap.get(this.function).minArgs,this.displayArgumentName=this.function===nn.CUSTOM),this.argumentsFormGroup){for(this.argumentsFormGroup.get("arguments").setValidators([O.minLength(this.minArgs),O.maxLength(this.maxArgs)]);this.argumentsFormArray.length>this.maxArgs;)this.removeArgument(this.maxArgs-1);for(;this.argumentsFormArray.length<this.minArgs;)this.addArgument(e);this.argumentsFormGroup.get("arguments").updateValueAndValidity({emitEvent:!1})}}createArgumentControl(e,t){const n=this.fb.group({type:[e?.type,[O.required]],key:[e?.key,[O.required]],name:[cn[t],[O.required]],attributeScope:[e?.attributeScope??gn.SERVER_SCOPE,[O.required]],defaultValue:[e?.defaultValue?e?.defaultValue:null]});return this.updateArgumentControlValidators(n),this.valueChangeSubscription.push(n.get("type").valueChanges.subscribe((()=>{this.updateArgumentControlValidators(n),n.get("attributeScope").updateValueAndValidity({emitEvent:!1}),n.get("defaultValue").updateValueAndValidity({emitEvent:!1})}))),n}updateArgumentControlValidators(e){const t=e.get("type").value;t===on.ATTRIBUTE?e.get("attributeScope").enable({emitEvent:!1}):e.get("attributeScope").disable({emitEvent:!1}),t&&t!==on.CONSTANT?e.get("defaultValue").enable({emitEvent:!1}):e.get("defaultValue").disable({emitEvent:!1})}updateArgumentNames(){this.argumentsFormArray.controls.forEach(((e,t)=>{e.get("name").setValue(cn[t])}))}updateModel(){const e=this.argumentsFormArray.value;e.length&&this.argumentsFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}}e("ArgumentsMapConfigComponent",wn),wn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:wn,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),wn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:wn,selector:"tb-arguments-map-config",inputs:{disabled:"disabled",function:"function"},providers:[{provide:B,useExisting:c((()=>wn)),multi:!0},{provide:K,useExisting:c((()=>wn)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section fxLayout="column">\n\n  <div [ngClass]="{\'tb-readonly\': disabled}"\n       style="max-height: 500px; overflow: auto;">\n    <mat-list class="tb-drop-list arguments-list" cdkDropList cdkDropListOrientation="vertical"\n              [formGroup]="argumentsFormGroup"\n              (cdkDropListDropped)="onDrop($event)"\n              [cdkDropListDisabled]="disabled">\n      <mat-list-item *ngFor="let argumentControl of argumentsFormArray.controls; let $index = index"\n                     formArrayName="arguments"\n                     cdkDrag class="tb-argument tb-draggable"\n                     [cdkDragDisabled]="disabled"\n                     style="height: 100%">\n        <div fxFlex fxLayout="row" fxLayoutAlign="start center">\n          <button *ngIf="!disabled" mat-icon-button color="primary"\n                  cdkDragHandle\n                  class="tb-drag-handle handle"\n                  style="min-width: 40px; margin: 0"\n                  matTooltip="{{ \'action.drag\' | translate }}"\n                  matTooltipPosition="above">\n            <mat-icon>drag_handle</mat-icon>\n          </button>\n          <div fxFlex fxLAyout="row" fxLayoutAlign="start center" fxLayoutGap="16px">\n            <span *ngIf="displayArgumentName"\n                  style="padding: 0 10px; min-width: 20px;">{{argumentControl.get(\'name\').value}}.</span>\n            <div fxFlex fxLayout="column">\n              <mat-form-field class="mat-block">\n                <mat-label translate>tb.rulenode.argument-source-field-input</mat-label>\n                <mat-select [formControl]="argumentControl.get(\'type\')" required>\n                  <mat-select-trigger>\n                    {{ argumentTypeMap.get(argumentControl.get(\'type\').value)?.name | translate }}\n                  </mat-select-trigger>\n                  <mat-option *ngFor="let argument of arguments" [value]="argument"\n                              style="border-bottom: 1px solid #eee;">\n                    {{ argumentTypeMap.get(argument).name | translate }}\n                    <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">\n                      {{ argumentTypeMap.get(argument).description }}\n                    </small>\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf="argumentControl.get(\'type\').hasError(\'required\')" translate>\n                  tb.rulenode.argument-source-field-input-required\n                </mat-error>\n              </mat-form-field>\n              <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">\n                <mat-form-field fxFlex="50" floatLabel="always" class="mat-block"\n                                *ngIf="argumentControl.get(\'type\').value && argumentControl.get(\'type\').value !== ArgumentType.CONSTANT">\n                  <mat-label translate>tb.rulenode.argument-key-field-input</mat-label>\n                  <input [formControl]="argumentControl.get(\'key\')" matInput required/>\n                  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix\n                            color="primary"\n                            matTooltip="{{ \'tb.rulenode.math-templatization-tooltip\' | translate }}">\n                    help\n                  </mat-icon>\n                  <mat-error *ngIf="argumentControl.get(\'key\').hasError(\'required\')" translate>\n                    tb.rulenode.argument-key-field-input-required\n                  </mat-error>\n                </mat-form-field>\n                <mat-form-field fxFlex floatLabel="always" class="mat-block"\n                                *ngIf="argumentControl.get(\'type\').value === ArgumentType.CONSTANT">\n                  <mat-label translate>tb.rulenode.constant-value-field-input</mat-label>\n                  <input [formControl]="argumentControl.get(\'key\')"\n                         matInput\n                         required\n                         step="1" min="0"\n                         type="number"/>\n                  <mat-error *ngIf="argumentControl.get(\'key\').hasError(\'required\')" translate>\n                    tb.rulenode.constant-value-field-input-required\n                  </mat-error>\n                </mat-form-field>\n                <mat-form-field *ngIf="argumentControl.get(\'type\').value && argumentControl.get(\'type\').value !== ArgumentType.CONSTANT"\n                                fxFlex="50" floatLabel="always" class="mat-block">\n                  <mat-label translate>tb.rulenode.default-value-field-input</mat-label>\n                  <input [formControl]="argumentControl.get(\'defaultValue\')" matInput step="1" type="number"/>\n                </mat-form-field>\n              </div>\n              <mat-form-field *ngIf="argumentControl.get(\'type\').value === ArgumentType.ATTRIBUTE" class="mat-block">\n                <mat-label translate>tb.rulenode.attribute-scope-field-input</mat-label>\n                <mat-select required [formControl]="argumentControl.get(\'attributeScope\')">\n                  <mat-option *ngFor="let scope of attributeScope" [value]="scope">\n                    {{ attributeScopeMap.get(scope) | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf="argumentControl.get(\'attributeScope\').hasError(\'required\')" translate>\n                  tb.rulenode.attribute-scope-field-input-required\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <button *ngIf="!disabled" mat-icon-button color="primary" style="min-width: 40px;"\n                    (click)="removeArgument($index)"\n                    matTooltip="{{ \'action.remove\' | translate }}"\n                    matTooltipPosition="above">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div *ngIf="!argumentsFormArray.length">\n      <span translate fxLayoutAlign="center center"\n            class="tb-prompt">tb.rulenode.no-arguments-prompt</span>\n  </div>\n  <button mat-button mat-raised-button color="primary"\n          [disabled]="argumentsFormArray.length >= maxArgs"\n          (click)="addArgument()"\n          type="button"\n          matTooltipPosition="above">\n    <mat-icon>add</mat-icon>\n    {{ \'action.add\' | translate }}\n  </button>\n</section>\n',styles:[":host .mat-mdc-list-item.tb-argument{border:solid rgba(0,0,0,.25) 1px;border-radius:4px;padding:10px 0;margin-bottom:16px}:host .arguments-list{padding:0}\n"],dependencies:[{kind:"directive",type:U.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"directive",type:te.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Pe.MatList,selector:"mat-list",exportAs:["matList"]},{kind:"component",type:Pe.MatListItem,selector:"mat-list-item, a[mat-list-item], button[mat-list-item]",inputs:["activated"],exportAs:["matListItem"]},{kind:"directive",type:Re.CdkDropList,selector:"[cdkDropList], cdk-drop-list",inputs:["cdkDropListConnectedTo","cdkDropListData","cdkDropListOrientation","id","cdkDropListLockAxis","cdkDropListDisabled","cdkDropListSortingDisabled","cdkDropListEnterPredicate","cdkDropListSortPredicate","cdkDropListAutoScrollDisabled","cdkDropListAutoScrollStep"],outputs:["cdkDropListDropped","cdkDropListEntered","cdkDropListExited","cdkDropListSorted"],exportAs:["cdkDropList"]},{kind:"directive",type:Re.CdkDrag,selector:"[cdkDrag]",inputs:["cdkDragData","cdkDragLockAxis","cdkDragRootElement","cdkDragBoundary","cdkDragStartDelay","cdkDragFreeDragPosition","cdkDragDisabled","cdkDragConstrainPosition","cdkDragPreviewClass","cdkDragPreviewContainer"],outputs:["cdkDragStarted","cdkDragReleased","cdkDragEnded","cdkDragEntered","cdkDragExited","cdkDragDropped","cdkDragMoved"],exportAs:["cdkDrag"]},{kind:"directive",type:Re.CdkDragHandle,selector:"[cdkDragHandle]",inputs:["cdkDragHandleDisabled"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:Ve.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormArrayName,selector:"[formArrayName]",inputs:["formArrayName"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:wn,decorators:[{type:n,args:[{selector:"tb-arguments-map-config",providers:[{provide:B,useExisting:c((()=>wn)),multi:!0},{provide:K,useExisting:c((()=>wn)),multi:!0}],template:'<section fxLayout="column">\n\n  <div [ngClass]="{\'tb-readonly\': disabled}"\n       style="max-height: 500px; overflow: auto;">\n    <mat-list class="tb-drop-list arguments-list" cdkDropList cdkDropListOrientation="vertical"\n              [formGroup]="argumentsFormGroup"\n              (cdkDropListDropped)="onDrop($event)"\n              [cdkDropListDisabled]="disabled">\n      <mat-list-item *ngFor="let argumentControl of argumentsFormArray.controls; let $index = index"\n                     formArrayName="arguments"\n                     cdkDrag class="tb-argument tb-draggable"\n                     [cdkDragDisabled]="disabled"\n                     style="height: 100%">\n        <div fxFlex fxLayout="row" fxLayoutAlign="start center">\n          <button *ngIf="!disabled" mat-icon-button color="primary"\n                  cdkDragHandle\n                  class="tb-drag-handle handle"\n                  style="min-width: 40px; margin: 0"\n                  matTooltip="{{ \'action.drag\' | translate }}"\n                  matTooltipPosition="above">\n            <mat-icon>drag_handle</mat-icon>\n          </button>\n          <div fxFlex fxLAyout="row" fxLayoutAlign="start center" fxLayoutGap="16px">\n            <span *ngIf="displayArgumentName"\n                  style="padding: 0 10px; min-width: 20px;">{{argumentControl.get(\'name\').value}}.</span>\n            <div fxFlex fxLayout="column">\n              <mat-form-field class="mat-block">\n                <mat-label translate>tb.rulenode.argument-source-field-input</mat-label>\n                <mat-select [formControl]="argumentControl.get(\'type\')" required>\n                  <mat-select-trigger>\n                    {{ argumentTypeMap.get(argumentControl.get(\'type\').value)?.name | translate }}\n                  </mat-select-trigger>\n                  <mat-option *ngFor="let argument of arguments" [value]="argument"\n                              style="border-bottom: 1px solid #eee;">\n                    {{ argumentTypeMap.get(argument).name | translate }}\n                    <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">\n                      {{ argumentTypeMap.get(argument).description }}\n                    </small>\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf="argumentControl.get(\'type\').hasError(\'required\')" translate>\n                  tb.rulenode.argument-source-field-input-required\n                </mat-error>\n              </mat-form-field>\n              <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">\n                <mat-form-field fxFlex="50" floatLabel="always" class="mat-block"\n                                *ngIf="argumentControl.get(\'type\').value && argumentControl.get(\'type\').value !== ArgumentType.CONSTANT">\n                  <mat-label translate>tb.rulenode.argument-key-field-input</mat-label>\n                  <input [formControl]="argumentControl.get(\'key\')" matInput required/>\n                  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix\n                            color="primary"\n                            matTooltip="{{ \'tb.rulenode.math-templatization-tooltip\' | translate }}">\n                    help\n                  </mat-icon>\n                  <mat-error *ngIf="argumentControl.get(\'key\').hasError(\'required\')" translate>\n                    tb.rulenode.argument-key-field-input-required\n                  </mat-error>\n                </mat-form-field>\n                <mat-form-field fxFlex floatLabel="always" class="mat-block"\n                                *ngIf="argumentControl.get(\'type\').value === ArgumentType.CONSTANT">\n                  <mat-label translate>tb.rulenode.constant-value-field-input</mat-label>\n                  <input [formControl]="argumentControl.get(\'key\')"\n                         matInput\n                         required\n                         step="1" min="0"\n                         type="number"/>\n                  <mat-error *ngIf="argumentControl.get(\'key\').hasError(\'required\')" translate>\n                    tb.rulenode.constant-value-field-input-required\n                  </mat-error>\n                </mat-form-field>\n                <mat-form-field *ngIf="argumentControl.get(\'type\').value && argumentControl.get(\'type\').value !== ArgumentType.CONSTANT"\n                                fxFlex="50" floatLabel="always" class="mat-block">\n                  <mat-label translate>tb.rulenode.default-value-field-input</mat-label>\n                  <input [formControl]="argumentControl.get(\'defaultValue\')" matInput step="1" type="number"/>\n                </mat-form-field>\n              </div>\n              <mat-form-field *ngIf="argumentControl.get(\'type\').value === ArgumentType.ATTRIBUTE" class="mat-block">\n                <mat-label translate>tb.rulenode.attribute-scope-field-input</mat-label>\n                <mat-select required [formControl]="argumentControl.get(\'attributeScope\')">\n                  <mat-option *ngFor="let scope of attributeScope" [value]="scope">\n                    {{ attributeScopeMap.get(scope) | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf="argumentControl.get(\'attributeScope\').hasError(\'required\')" translate>\n                  tb.rulenode.attribute-scope-field-input-required\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <button *ngIf="!disabled" mat-icon-button color="primary" style="min-width: 40px;"\n                    (click)="removeArgument($index)"\n                    matTooltip="{{ \'action.remove\' | translate }}"\n                    matTooltipPosition="above">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n  <div *ngIf="!argumentsFormArray.length">\n      <span translate fxLayoutAlign="center center"\n            class="tb-prompt">tb.rulenode.no-arguments-prompt</span>\n  </div>\n  <button mat-button mat-raised-button color="primary"\n          [disabled]="argumentsFormArray.length >= maxArgs"\n          (click)="addArgument()"\n          type="button"\n          matTooltipPosition="above">\n    <mat-icon>add</mat-icon>\n    {{ \'action.add\' | translate }}\n  </button>\n</section>\n',styles:[":host .mat-mdc-list-item.tb-argument{border:solid rgba(0,0,0,.25) 1px;border-radius:4px;padding:10px 0;margin-bottom:16px}:host .arguments-list{padding:0}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]},propDecorators:{disabled:[{type:m}],function:[{type:m}]}});class Gn extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.injector=n,this.fb=r,this.searchText="",this.dirty=!1,this.mathOperation=[...rn.values()],this.propagateChange=null}ngOnInit(){this.mathFunctionForm=this.fb.group({operation:[""]}),this.filteredOptions=this.mathFunctionForm.get("operation").valueChanges.pipe(Oe((e=>{let t;t="string"==typeof e&&nn[e]?nn[e]:null,this.updateView(t)})),_e((e=>(this.searchText=e||"",e?this._filter(e):this.mathOperation.slice()))))}_filter(e){const t=e.toLowerCase();return this.mathOperation.filter((e=>e.name.toLowerCase().includes(t)||e.value.toLowerCase().includes(t)))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.mathFunctionForm.disable({emitEvent:!1}):this.mathFunctionForm.enable({emitEvent:!1})}mathFunctionDisplayFn(e){if(e){const t=rn.get(e);return t.value+" | "+t.name}return""}writeValue(e){this.modelValue=e,this.mathFunctionForm.get("operation").setValue(e,{emitEvent:!1}),this.dirty=!0}updateView(e){this.modelValue!==e&&(this.modelValue=e,this.propagateChange(this.modelValue))}onFocus(){this.dirty&&(this.mathFunctionForm.get("operation").updateValueAndValidity({onlySelf:!0}),this.dirty=!1)}clear(){this.mathFunctionForm.get("operation").patchValue(""),setTimeout((()=>{this.operationInput.nativeElement.blur(),this.operationInput.nativeElement.focus()}),0)}}e("MathFunctionAutocompleteComponent",Gn),Gn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Gn,deps:[{token:P.Store},{token:Z.TranslateService},{token:t.Injector},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Gn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Gn,selector:"tb-math-function-autocomplete",inputs:{required:"required",disabled:"disabled"},providers:[{provide:B,useExisting:c((()=>Gn)),multi:!0}],viewQueries:[{propertyName:"operationInput",first:!0,predicate:["operationInput"],descendants:!0,static:!0}],usesInheritance:!0,ngImport:t,template:'<mat-form-field [formGroup]="mathFunctionForm" class="mat-block">\n  <mat-label translate>tb.rulenode.functions-field-input</mat-label>\n  <input [required]="required"\n         (focusin)="onFocus()"\n         type="text"\n         #operationInput matInput\n         formControlName="operation"\n         [matAutocomplete]="auto">\n  <button *ngIf="mathFunctionForm.get(\'operation\').value"\n          type="button"\n          matSuffix mat-icon-button aria-label="Clear"\n          (click)="clear()">\n    <mat-icon class="material-icons">close</mat-icon>\n  </button>\n  <mat-autocomplete #auto="matAutocomplete" class="tb-autocomplete" [displayWith]="mathFunctionDisplayFn">\n    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">\n      <span [innerHTML]="option.value + \' | \' + option.name | highlight:searchText"></span>\n      <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">\n        {{ option.description }}\n      </small>\n    </mat-option>\n    <mat-option *ngIf="!(filteredOptions | async)?.length" [value]="null">\n      <span translate>tb.rulenode.no-option-found</span>\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:je.MatAutocomplete,selector:"mat-autocomplete",inputs:["disableRipple","hideSingleSelectionIndicator"],exportAs:["matAutocomplete"]},{kind:"directive",type:je.MatAutocompleteTrigger,selector:"input[matAutocomplete], textarea[matAutocomplete]",exportAs:["matAutocompleteTrigger"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:U.AsyncPipe,name:"async"},{kind:"pipe",type:$e.HighlightPipe,name:"highlight"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Gn,decorators:[{type:n,args:[{selector:"tb-math-function-autocomplete",providers:[{provide:B,useExisting:c((()=>Gn)),multi:!0}],template:'<mat-form-field [formGroup]="mathFunctionForm" class="mat-block">\n  <mat-label translate>tb.rulenode.functions-field-input</mat-label>\n  <input [required]="required"\n         (focusin)="onFocus()"\n         type="text"\n         #operationInput matInput\n         formControlName="operation"\n         [matAutocomplete]="auto">\n  <button *ngIf="mathFunctionForm.get(\'operation\').value"\n          type="button"\n          matSuffix mat-icon-button aria-label="Clear"\n          (click)="clear()">\n    <mat-icon class="material-icons">close</mat-icon>\n  </button>\n  <mat-autocomplete #auto="matAutocomplete" class="tb-autocomplete" [displayWith]="mathFunctionDisplayFn">\n    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">\n      <span [innerHTML]="option.value + \' | \' + option.name | highlight:searchText"></span>\n      <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">\n        {{ option.description }}\n      </small>\n    </mat-option>\n    <mat-option *ngIf="!(filteredOptions | async)?.length" [value]="null">\n      <span translate>tb.rulenode.no-option-found</span>\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:t.Injector},{type:R.UntypedFormBuilder}]},propDecorators:{required:[{type:m}],disabled:[{type:m}],operationInput:[{type:u,args:["operationInput",{static:!0}]}]}});class Dn extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.MathFunction=nn,this.ArgumentTypeResult=an,this.argumentTypeResultMap=un,this.attributeScopeMap=yn,this.argumentsResult=Object.values(an),this.attributeScopeResult=Object.values(fn)}configForm(){return this.mathFunctionConfigForm}onConfigurationSet(e){this.mathFunctionConfigForm=this.fb.group({operation:[e?e.operation:null,[O.required]],arguments:[e?e.arguments:null,[O.required]],customFunction:[e?e.customFunction:"",[O.required]],result:this.fb.group({type:[e?e.result.type:null,[O.required]],attributeScope:[e?e.result.attributeScope:null,[O.required]],key:[e?e.result.key:"",[O.required]],resultValuePrecision:[e?e.result.resultValuePrecision:0],addToBody:[!!e&&e.result.addToBody],addToMetadata:[!!e&&e.result.addToMetadata]})})}updateValidators(e){const t=this.mathFunctionConfigForm.get("operation").value,n=this.mathFunctionConfigForm.get("result.type").value;t===nn.CUSTOM?(this.mathFunctionConfigForm.get("customFunction").enable({emitEvent:!1}),null===this.mathFunctionConfigForm.get("customFunction").value&&this.mathFunctionConfigForm.get("customFunction").patchValue("(x - 32) / 1.8",{emitEvent:!1})):this.mathFunctionConfigForm.get("customFunction").disable({emitEvent:!1}),n===an.ATTRIBUTE?this.mathFunctionConfigForm.get("result.attributeScope").enable({emitEvent:!1}):this.mathFunctionConfigForm.get("result.attributeScope").disable({emitEvent:!1}),this.mathFunctionConfigForm.get("customFunction").updateValueAndValidity({emitEvent:e}),this.mathFunctionConfigForm.get("result.attributeScope").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["operation","result.type"]}}e("MathFunctionConfigComponent",Dn),Dn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Dn,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Dn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Dn,selector:"tb-action-node-math-function-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="mathFunctionConfigForm" fxLayout="column">\n  <tb-math-function-autocomplete\n    fxFlex="30" fxFlex.md fxFlex.xs\n    required\n    formControlName="operation">\n  </tb-math-function-autocomplete>\n  <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">\n    <legend class="group-title" translate>tb.rulenode.argument-tile</legend>\n    <tb-arguments-map-config formControlName="arguments"\n                             [function]="mathFunctionConfigForm.get(\'operation\').value">\n    </tb-arguments-map-config>\n  </fieldset>\n  <fieldset *ngIf="mathFunctionConfigForm.get(\'operation\').value === MathFunction.CUSTOM"\n            class="fields-group" fxLayout="column" fxLayoutGap="8px">\n    <legend class="group-title">{{\'tb.rulenode.custom-expression-field-input\' | translate }} *</legend>\n    <mat-form-field fxFlex class="mat-block no-margin-top" subscriptSizing="dynamic">\n      <input matInput formControlName="customFunction" required/>\n      <mat-error *ngIf="mathFunctionConfigForm.get(\'customFunction\').hasError(\'required\')" translate>\n        tb.rulenode.custom-expression-field-input-required\n      </mat-error>\n      <mat-hint translate>tb.rulenode.custom-expression-field-input-hint</mat-hint>\n    </mat-form-field>\n  </fieldset>\n  <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">\n    <legend class="group-title" translate>tb.rulenode.result-title</legend>\n    <div formGroupName="result">\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.type-field-input</mat-label>\n        <mat-select formControlName="type" required>\n          <mat-select-trigger>\n            {{ argumentTypeResultMap.get(mathFunctionConfigForm.get(\'result.type\').value)?.name | translate }}\n          </mat-select-trigger>\n          <mat-option *ngFor="let argument of argumentsResult" [value]="argument"\n                      style="border-bottom: 1px solid #eee;">\n            {{ argumentTypeResultMap.get(argument).name | translate }}\n            <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">\n              {{ argumentTypeResultMap.get(argument).description }}\n            </small>\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="mathFunctionConfigForm.get(\'result.type\').hasError(\'required\')" translate>\n          tb.rulenode.type-field-input-required\n        </mat-error>\n      </mat-form-field>\n      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">\n        <mat-form-field fxFlex class="mat-block" *ngIf="mathFunctionConfigForm.get(\'result\').get(\'type\').value === ArgumentTypeResult.ATTRIBUTE">\n          <mat-label translate>tb.rulenode.attribute-scope-field-input</mat-label>\n          <mat-select required formControlName="attributeScope">\n            <mat-option *ngFor="let scope of attributeScopeResult" [value]="scope">\n              {{ attributeScopeMap.get(scope) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field fxFlex floatLabel="always" class="mat-block">\n          <mat-label translate>tb.rulenode.key-field-input</mat-label>\n          <input matInput formControlName="key" required/>\n          <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix\n                    color="primary"\n                    matTooltip="{{ \'tb.rulenode.math-templatization-tooltip\' | translate }}">help</mat-icon>\n          <mat-error *ngIf="mathFunctionConfigForm.get(\'result.key\').hasError(\'required\')" translate>\n            tb.rulenode.key-field-input-required\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">\n        <mat-form-field fxFlex floatLabel="always" class="mat-block" subscriptSizing="dynamic">\n          <mat-label translate>tb.rulenode.number-floating-point-field-input</mat-label>\n          <input formControlName="resultValuePrecision"\n                 matInput\n                 step="1" min="0"\n                 type="number"/>\n          <mat-hint [innerHTML]="\'tb.rulenode.number-floating-point-field-input-hint\' | translate | safe: \'html\'"></mat-hint>\n        </mat-form-field>\n      </div>\n      <div *ngIf="[ArgumentTypeResult.ATTRIBUTE, ArgumentTypeResult.TIME_SERIES].includes(mathFunctionConfigForm.get(\'result\').get(\'type\').value)"\n           fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap.gt-xs="16px" style="padding-top: 16px;">\n        <mat-checkbox formControlName="addToBody">\n          {{\'tb.rulenode.add-to-message-field-input\' | translate }}\n        </mat-checkbox>\n        <mat-checkbox formControlName="addToMetadata">\n          {{\'tb.rulenode.add-to-metadata-field-input\' | translate}}\n        </mat-checkbox>\n      </div>\n    </div>\n  </fieldset>\n</section>\n',styles:[":host ::ng-deep .fields-group{padding:0 16px 8px;margin:10px 0;border:1px groove rgba(0,0,0,.25);border-radius:4px}:host ::ng-deep .fields-group .mat-mdc-form-field .mat-mdc-form-field-infix{width:100%}:host ::ng-deep .fields-group legend{color:#000000b3;width:-moz-fit-content;width:fit-content}:host ::ng-deep .fields-group legend+*{display:block}:host ::ng-deep .fields-group legend+*.no-margin-top{margin-top:0}\n"],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"directive",type:te.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:R.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:wn,selector:"tb-arguments-map-config",inputs:["disabled","function"]},{kind:"component",type:Gn,selector:"tb-math-function-autocomplete",inputs:["required","disabled"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Dn,decorators:[{type:n,args:[{selector:"tb-action-node-math-function-config",template:'<section [formGroup]="mathFunctionConfigForm" fxLayout="column">\n  <tb-math-function-autocomplete\n    fxFlex="30" fxFlex.md fxFlex.xs\n    required\n    formControlName="operation">\n  </tb-math-function-autocomplete>\n  <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">\n    <legend class="group-title" translate>tb.rulenode.argument-tile</legend>\n    <tb-arguments-map-config formControlName="arguments"\n                             [function]="mathFunctionConfigForm.get(\'operation\').value">\n    </tb-arguments-map-config>\n  </fieldset>\n  <fieldset *ngIf="mathFunctionConfigForm.get(\'operation\').value === MathFunction.CUSTOM"\n            class="fields-group" fxLayout="column" fxLayoutGap="8px">\n    <legend class="group-title">{{\'tb.rulenode.custom-expression-field-input\' | translate }} *</legend>\n    <mat-form-field fxFlex class="mat-block no-margin-top" subscriptSizing="dynamic">\n      <input matInput formControlName="customFunction" required/>\n      <mat-error *ngIf="mathFunctionConfigForm.get(\'customFunction\').hasError(\'required\')" translate>\n        tb.rulenode.custom-expression-field-input-required\n      </mat-error>\n      <mat-hint translate>tb.rulenode.custom-expression-field-input-hint</mat-hint>\n    </mat-form-field>\n  </fieldset>\n  <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">\n    <legend class="group-title" translate>tb.rulenode.result-title</legend>\n    <div formGroupName="result">\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.type-field-input</mat-label>\n        <mat-select formControlName="type" required>\n          <mat-select-trigger>\n            {{ argumentTypeResultMap.get(mathFunctionConfigForm.get(\'result.type\').value)?.name | translate }}\n          </mat-select-trigger>\n          <mat-option *ngFor="let argument of argumentsResult" [value]="argument"\n                      style="border-bottom: 1px solid #eee;">\n            {{ argumentTypeResultMap.get(argument).name | translate }}\n            <small style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">\n              {{ argumentTypeResultMap.get(argument).description }}\n            </small>\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="mathFunctionConfigForm.get(\'result.type\').hasError(\'required\')" translate>\n          tb.rulenode.type-field-input-required\n        </mat-error>\n      </mat-form-field>\n      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">\n        <mat-form-field fxFlex class="mat-block" *ngIf="mathFunctionConfigForm.get(\'result\').get(\'type\').value === ArgumentTypeResult.ATTRIBUTE">\n          <mat-label translate>tb.rulenode.attribute-scope-field-input</mat-label>\n          <mat-select required formControlName="attributeScope">\n            <mat-option *ngFor="let scope of attributeScopeResult" [value]="scope">\n              {{ attributeScopeMap.get(scope) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field fxFlex floatLabel="always" class="mat-block">\n          <mat-label translate>tb.rulenode.key-field-input</mat-label>\n          <input matInput formControlName="key" required/>\n          <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix\n                    color="primary"\n                    matTooltip="{{ \'tb.rulenode.math-templatization-tooltip\' | translate }}">help</mat-icon>\n          <mat-error *ngIf="mathFunctionConfigForm.get(\'result.key\').hasError(\'required\')" translate>\n            tb.rulenode.key-field-input-required\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">\n        <mat-form-field fxFlex floatLabel="always" class="mat-block" subscriptSizing="dynamic">\n          <mat-label translate>tb.rulenode.number-floating-point-field-input</mat-label>\n          <input formControlName="resultValuePrecision"\n                 matInput\n                 step="1" min="0"\n                 type="number"/>\n          <mat-hint [innerHTML]="\'tb.rulenode.number-floating-point-field-input-hint\' | translate | safe: \'html\'"></mat-hint>\n        </mat-form-field>\n      </div>\n      <div *ngIf="[ArgumentTypeResult.ATTRIBUTE, ArgumentTypeResult.TIME_SERIES].includes(mathFunctionConfigForm.get(\'result\').get(\'type\').value)"\n           fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap.gt-xs="16px" style="padding-top: 16px;">\n        <mat-checkbox formControlName="addToBody">\n          {{\'tb.rulenode.add-to-message-field-input\' | translate }}\n        </mat-checkbox>\n        <mat-checkbox formControlName="addToMetadata">\n          {{\'tb.rulenode.add-to-metadata-field-input\' | translate}}\n        </mat-checkbox>\n      </div>\n    </div>\n  </fieldset>\n</section>\n',styles:[":host ::ng-deep .fields-group{padding:0 16px 8px;margin:10px 0;border:1px groove rgba(0,0,0,.25);border-radius:4px}:host ::ng-deep .fields-group .mat-mdc-form-field .mat-mdc-form-field-infix{width:100%}:host ::ng-deep .fields-group legend{color:#000000b3;width:-moz-fit-content;width:fit-content}:host ::ng-deep .fields-group legend+*{display:block}:host ::ng-deep .fields-group legend+*.no-margin-top{margin-top:0}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Vn extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.messageTypeNames=T,this.eventOptions=[L.CONNECT_EVENT,L.ACTIVITY_EVENT,L.DISCONNECT_EVENT,L.INACTIVITY_EVENT]}configForm(){return this.deviceState}prepareInputConfig(e){return{event:fe(e?.event)?e.event:L.ACTIVITY_EVENT}}onConfigurationSet(e){this.deviceState=this.fb.group({event:[e.event,[O.required]]})}}e("DeviceStateConfigComponent",Vn),Vn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Vn,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Vn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Vn,selector:"tb-action-node-device-state-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deviceState">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n        <mat-label>{{ \'tb.rulenode.select-device-connectivity-event\' | translate }}</mat-label>\n        <mat-select formControlName="event">\n            <mat-option *ngFor="let eventOption of eventOptions" [value]="eventOption">\n                {{ messageTypeNames.get(eventOption) }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Vn,decorators:[{type:n,args:[{selector:"tb-action-node-device-state-config",template:'<section [formGroup]="deviceState">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic">\n        <mat-label>{{ \'tb.rulenode.select-device-connectivity-event\' | translate }}</mat-label>\n        <mat-select formControlName="event">\n            <mat-option *ngFor="let eventOption of eventOptions" [value]="eventOption">\n                {{ messageTypeNames.get(eventOption) }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Pn{constructor(e,t){this.injector=e,this.fb=t,this.propagateChange=()=>{},this.destroy$=new ae,this.disabled=!1,this.uniqueKeyValuePairValidator=!1,this.required=!1,this.duplicateValuesValidator=e=>e.controls.key.value===e.controls.value.value&&e.controls.key.value&&e.controls.value.value?{uniqueKeyValuePair:!0}:null,this.oneMapRequiredValidator=e=>e.get("keyVals").value.length,this.propagateNestedErrors=e=>{if(this.kvListFormGroup&&this.kvListFormGroup.get("keyVals")&&"VALID"===this.kvListFormGroup.get("keyVals")?.status)return null;const t={};if(this.kvListFormGroup&&this.kvListFormGroup.setErrors(null),e instanceof H||e instanceof z){if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;for(const n of Object.keys(e.controls)){const r=this.propagateNestedErrors(e.controls[n]);if(r&&Object.keys(r).length)for(const e of Object.keys(r))t[e]=!0}return t}if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;return ye(t,{})?null:t}}ngOnInit(){this.ngControl=this.injector.get(_),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.kvListFormGroup=this.fb.group({keyVals:this.fb.array([])},{validators:[this.propagateNestedErrors,this.oneMapRequiredValidator]}),this.kvListFormGroup.valueChanges.pipe(ie(this.destroy$)).subscribe((()=>{this.updateModel()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}keyValsFormArray(){return this.kvListFormGroup.get("keyVals")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.kvListFormGroup.disable({emitEvent:!1}):this.kvListFormGroup.enable({emitEvent:!1})}writeValue(e){const t=Object.keys(e).map((t=>({key:t,value:e[t]})));if(this.keyValsFormArray().length===t.length)this.keyValsFormArray().patchValue(t,{emitEvent:!1});else{const e=[];t.forEach((t=>{e.push(this.fb.group({key:[t.key,[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],value:[t.value,[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]},{validators:this.uniqueKeyValuePairValidator?[this.duplicateValuesValidator]:[]}))})),this.kvListFormGroup.setControl("keyVals",this.fb.array(e,this.propagateNestedErrors),{emitEvent:!1})}}removeKeyVal(e){this.keyValsFormArray().removeAt(e)}addKeyVal(){this.keyValsFormArray().push(this.fb.group({key:["",[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],value:["",[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]},{validators:this.uniqueKeyValuePairValidator?[this.duplicateValuesValidator]:[]}))}validate(){const e=this.kvListFormGroup.get("keyVals").value;if(!e.length&&this.required)return{kvMapRequired:!0};if(!this.kvListFormGroup.valid)return{kvFieldsRequired:!0};if(this.uniqueKeyValuePairValidator)for(const t of e)if(t.key===t.value)return{uniqueKeyValuePair:!0};return null}updateModel(){const e=this.kvListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.kvListFormGroup.valid)this.propagateChange(null);else{const t={};e.forEach((e=>{t[e.key]=e.value})),this.propagateChange(t)}}}e("KvMapConfigComponent",Pn),Pn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Pn,deps:[{token:t.Injector},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Pn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Pn,selector:"tb-kv-map-config",inputs:{disabled:"disabled",uniqueKeyValuePairValidator:"uniqueKeyValuePairValidator",labelText:"labelText",requiredText:"requiredText",keyText:"keyText",keyRequiredText:"keyRequiredText",valText:"valText",valRequiredText:"valRequiredText",hintText:"hintText",popupHelpLink:"popupHelpLink",required:"required"},providers:[{provide:B,useExisting:c((()=>Pn)),multi:!0},{provide:K,useExisting:c((()=>Pn)),multi:!0}],ngImport:t,template:'<section [formGroup]="kvListFormGroup" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title">{{ labelText }}</div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError(\'kvMapRequired\')">\n      {{ requiredText }}\n    </div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError(\'required\')">\n      tb.rulenode.map-fields-required\n    </div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError(\'uniqueKeyValuePair\')">\n      {{ \'tb.key-val.unique-key-value-pair-error\' | translate:\n            {\n              valText: valText,\n              keyText: keyText\n            } }}\n    </div>\n  </div>\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-table">\n      <div class="tb-form-table-header">\n        <div class="tb-form-table-header-cell field-space">{{ keyText }}</div>\n        <div class="tb-form-table-header-cell field-space">{{ valText }}</div>\n        <div class="tb-form-table-header-cell actions-header"></div>\n      </div>\n      <div class="tb-form-table-body">\n        <div class="tb-form-table-row"\n             *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index;">\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <input [placeholder]="keyText+\'*\'" [formControl]="keyValControl.get(\'key\')" matInput/>\n          </mat-form-field>\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <input [placeholder]="valText+\'*\'" [formControl]="keyValControl.get(\'value\')" matInput/>\n          </mat-form-field>\n          <div class="tb-form-table-row-cell-buttons">\n            <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"\n                    type="button"\n                    mat-icon-button\n                    (click)="removeKeyVal($index)"\n                    [disabled]="disabled"\n                    matTooltip="{{ \'tb.key-val.remove-mapping-entry\' | translate }}"\n                    matTooltipPosition="above">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button type="button" mat-stroked-button color="primary" (click)="addKeyVal()">\n      {{ \'tb.key-val.add-mapping-entry\' | translate }}\n    </button>\n  </div>\n  <tb-example-hint [hintText]="hintText" [popupHelpLink]="popupHelpLink" *ngIf="popupHelpLink || hintText"></tb-example-hint>\n</section>\n',styles:[":host .field-space{flex:1 1 50%}:host .actions-header{width:40px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),Qe([I()],Pn.prototype,"disabled",void 0),Qe([I()],Pn.prototype,"uniqueKeyValuePairValidator",void 0),Qe([I()],Pn.prototype,"required",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Pn,decorators:[{type:n,args:[{selector:"tb-kv-map-config",providers:[{provide:B,useExisting:c((()=>Pn)),multi:!0},{provide:K,useExisting:c((()=>Pn)),multi:!0}],template:'<section [formGroup]="kvListFormGroup" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title">{{ labelText }}</div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError(\'kvMapRequired\')">\n      {{ requiredText }}\n    </div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError(\'required\')">\n      tb.rulenode.map-fields-required\n    </div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="kvListFormGroup.hasError(\'uniqueKeyValuePair\')">\n      {{ \'tb.key-val.unique-key-value-pair-error\' | translate:\n            {\n              valText: valText,\n              keyText: keyText\n            } }}\n    </div>\n  </div>\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-table">\n      <div class="tb-form-table-header">\n        <div class="tb-form-table-header-cell field-space">{{ keyText }}</div>\n        <div class="tb-form-table-header-cell field-space">{{ valText }}</div>\n        <div class="tb-form-table-header-cell actions-header"></div>\n      </div>\n      <div class="tb-form-table-body">\n        <div class="tb-form-table-row"\n             *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index;">\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <input [placeholder]="keyText+\'*\'" [formControl]="keyValControl.get(\'key\')" matInput/>\n          </mat-form-field>\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <input [placeholder]="valText+\'*\'" [formControl]="keyValControl.get(\'value\')" matInput/>\n          </mat-form-field>\n          <div class="tb-form-table-row-cell-buttons">\n            <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"\n                    type="button"\n                    mat-icon-button\n                    (click)="removeKeyVal($index)"\n                    [disabled]="disabled"\n                    matTooltip="{{ \'tb.key-val.remove-mapping-entry\' | translate }}"\n                    matTooltipPosition="above">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button type="button" mat-stroked-button color="primary" (click)="addKeyVal()">\n      {{ \'tb.key-val.add-mapping-entry\' | translate }}\n    </button>\n  </div>\n  <tb-example-hint [hintText]="hintText" [popupHelpLink]="popupHelpLink" *ngIf="popupHelpLink || hintText"></tb-example-hint>\n</section>\n',styles:[":host .field-space{flex:1 1 50%}:host .actions-header{width:40px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:t.Injector},{type:R.FormBuilder}]},propDecorators:{disabled:[{type:m}],uniqueKeyValuePairValidator:[{type:m}],labelText:[{type:m}],requiredText:[{type:m}],keyText:[{type:m}],keyRequiredText:[{type:m}],valText:[{type:m}],valRequiredText:[{type:m}],hintText:[{type:m}],popupHelpLink:[{type:m}],required:[{type:m}]}});class Rn extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.values(v),this.directionTypeTranslations=S,this.entityType=C,this.propagateChange=null}ngOnInit(){this.deviceRelationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[O.required]],maxLevel:[null,[O.min(1)]],relationType:[null],deviceTypes:[null,[O.required]]}),this.deviceRelationsQueryFormGroup.valueChanges.subscribe((e=>{this.deviceRelationsQueryFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.deviceRelationsQueryFormGroup.disable({emitEvent:!1}):this.deviceRelationsQueryFormGroup.enable({emitEvent:!1})}writeValue(e){this.deviceRelationsQueryFormGroup.reset(e,{emitEvent:!1})}}e("DeviceRelationsQueryConfigComponent",Rn),Rn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Rn,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Rn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Rn,selector:"tb-device-relations-query-config",inputs:{disabled:"disabled",required:"required"},providers:[{provide:B,useExisting:c((()=>Rn)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section fxLayout="column" [formGroup]="deviceRelationsQueryFormGroup">\n  <div fxLayoutGap="22px" fxLayout="row">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic" fxFlex="50" style="min-width: 100px;" hideRequiredMarker>\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex="50" floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n      <mat-error *ngIf="deviceRelationsQueryFormGroup.get(\'maxLevel\').hasError(\'min\')">\n        {{ \'tb.rulenode.max-relation-level-error\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.last-level-device-relation-tooltip\' | translate }}"\n       *ngIf="deviceRelationsQueryFormGroup.get(\'maxLevel\').value > 1"\n       class="tb-form-row no-border no-padding last-level-slide-toggle">\n    <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">\n      {{ \'alias.last-level-relation\' | translate }}\n    </mat-slide-toggle>\n  </div>\n  <tb-relation-type-autocomplete\n    fxFlex\n    formControlName="relationType">\n  </tb-relation-type-autocomplete>\n  <tb-entity-subtype-list\n    required\n    [label]="\'tb.rulenode.device-profiles\' | translate"\n    [entityType]="entityType.DEVICE"\n    [emptyInputPlaceholder]="\'tb.rulenode.add-device-profile\' | translate"\n    [filledInputPlaceholder]="\'tb.rulenode.add-device-profile\' | translate"\n    formControlName="deviceTypes">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.device-profile\' | translate } }}">help</mat-icon>\n  </tb-entity-subtype-list>\n</section>\n',styles:[":host .last-level-slide-toggle{margin:8px 0 24px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Ye.EntitySubTypeListComponent,selector:"tb-entity-subtype-list",inputs:["required","floatLabel","label","disabled","entityType","emptyInputPlaceholder","filledInputPlaceholder","appearance","subscriptSizing","additionalClasses"]},{kind:"component",type:Ne.RelationTypeAutocompleteComponent,selector:"tb-relation-type-autocomplete",inputs:["showLabel","additionalClasses","appearance","required","disabled","subscriptSizing"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Rn,decorators:[{type:n,args:[{selector:"tb-device-relations-query-config",providers:[{provide:B,useExisting:c((()=>Rn)),multi:!0}],template:'<section fxLayout="column" [formGroup]="deviceRelationsQueryFormGroup">\n  <div fxLayoutGap="22px" fxLayout="row">\n    <mat-form-field class="mat-block" subscriptSizing="dynamic" fxFlex="50" style="min-width: 100px;" hideRequiredMarker>\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex="50" floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n      <mat-error *ngIf="deviceRelationsQueryFormGroup.get(\'maxLevel\').hasError(\'min\')">\n        {{ \'tb.rulenode.max-relation-level-error\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.last-level-device-relation-tooltip\' | translate }}"\n       *ngIf="deviceRelationsQueryFormGroup.get(\'maxLevel\').value > 1"\n       class="tb-form-row no-border no-padding last-level-slide-toggle">\n    <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">\n      {{ \'alias.last-level-relation\' | translate }}\n    </mat-slide-toggle>\n  </div>\n  <tb-relation-type-autocomplete\n    fxFlex\n    formControlName="relationType">\n  </tb-relation-type-autocomplete>\n  <tb-entity-subtype-list\n    required\n    [label]="\'tb.rulenode.device-profiles\' | translate"\n    [entityType]="entityType.DEVICE"\n    [emptyInputPlaceholder]="\'tb.rulenode.add-device-profile\' | translate"\n    [filledInputPlaceholder]="\'tb.rulenode.add-device-profile\' | translate"\n    formControlName="deviceTypes">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.device-profile\' | translate } }}">help</mat-icon>\n  </tb-entity-subtype-list>\n</section>\n',styles:[":host .last-level-slide-toggle{margin:8px 0 24px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]},propDecorators:{disabled:[{type:m}],required:[{type:m}]}});class On extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.values(v),this.directionTypeTranslations=S,this.propagateChange=null}ngOnInit(){this.relationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[O.required]],maxLevel:[null,[O.min(1)]],filters:[null]}),this.relationsQueryFormGroup.valueChanges.subscribe((e=>{this.relationsQueryFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.relationsQueryFormGroup.disable({emitEvent:!1}):this.relationsQueryFormGroup.enable({emitEvent:!1})}writeValue(e){this.relationsQueryFormGroup.reset(e||{},{emitEvent:!1})}}e("RelationsQueryConfigComponent",On),On.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:On,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),On.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:On,selector:"tb-relations-query-config",inputs:{disabled:"disabled",required:"required"},providers:[{provide:B,useExisting:c((()=>On)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title tb-required" translate>tb.rulenode.relations-query</div>\n  <section>\n    <div fxLayoutGap="16px" fxLayout="row">\n      <mat-form-field fxFlex="50" class="mat-block" style="min-width: 100px;" hideRequiredMarker>\n        <mat-label translate>relation.direction</mat-label>\n        <mat-select required formControlName="direction">\n          <mat-option *ngFor="let type of directionTypes" [value]="type">\n            {{ directionTypeTranslations.get(type) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field fxFlex="50" floatLabel="always" class="mat-block">\n        <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n        <input matInput\n               type="number"\n               min="1"\n               step="1"\n               placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n               formControlName="maxLevel">\n        <mat-error *ngIf="relationsQueryFormGroup.get(\'maxLevel\').hasError(\'min\')">\n          {{ \'tb.rulenode.max-relation-level-error\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.last-level-relation-tooltip\' | translate }}"\n         *ngIf="relationsQueryFormGroup.get(\'maxLevel\').value > 1"\n         class="tb-form-row no-border no-padding last-level-slide-toggle">\n      <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">\n        {{ \'alias.last-level-relation\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </section>\n  <section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>relation.relation-filters</div>\n    <tb-relation-filters\n      formControlName="filters">\n    </tb-relation-filters>\n  </section>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:We.RelationFiltersComponent,selector:"tb-relation-filters",inputs:["disabled","allowedEntityTypes","enableNotOption"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:On,decorators:[{type:n,args:[{selector:"tb-relations-query-config",providers:[{provide:B,useExisting:c((()=>On)),multi:!0}],template:'<section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title tb-required" translate>tb.rulenode.relations-query</div>\n  <section>\n    <div fxLayoutGap="16px" fxLayout="row">\n      <mat-form-field fxFlex="50" class="mat-block" style="min-width: 100px;" hideRequiredMarker>\n        <mat-label translate>relation.direction</mat-label>\n        <mat-select required formControlName="direction">\n          <mat-option *ngFor="let type of directionTypes" [value]="type">\n            {{ directionTypeTranslations.get(type) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field fxFlex="50" floatLabel="always" class="mat-block">\n        <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n        <input matInput\n               type="number"\n               min="1"\n               step="1"\n               placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n               formControlName="maxLevel">\n        <mat-error *ngIf="relationsQueryFormGroup.get(\'maxLevel\').hasError(\'min\')">\n          {{ \'tb.rulenode.max-relation-level-error\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.last-level-relation-tooltip\' | translate }}"\n         *ngIf="relationsQueryFormGroup.get(\'maxLevel\').value > 1"\n         class="tb-form-row no-border no-padding last-level-slide-toggle">\n      <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">\n        {{ \'alias.last-level-relation\' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </section>\n  <section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>relation.relation-filters</div>\n    <tb-relation-filters\n      formControlName="filters">\n    </tb-relation-filters>\n  </section>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]},propDecorators:{disabled:[{type:m}],required:[{type:m}]}});class _n extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.truncate=n,this.fb=r,this.placeholder="tb.rulenode.add-message-type",this.separatorKeysCodes=[Fe,ke,Te],this.messageTypes=[],this.messageTypesList=[],this.searchText="",this.propagateChange=e=>{},this.messageTypeConfigForm=this.fb.group({messageType:[null]});for(const e of Object.keys(L))this.messageTypesList.push({name:T.get(L[e]),value:e})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}ngOnInit(){this.filteredMessageTypes=this.messageTypeConfigForm.get("messageType").valueChanges.pipe(Be(""),_e((e=>e||"")),Ke((e=>this.fetchMessageTypes(e))),He())}setDisabledState(e){this.disabled=e,this.disabled?this.messageTypeConfigForm.disable({emitEvent:!1}):this.messageTypeConfigForm.enable({emitEvent:!1})}writeValue(e){this.searchText="",this.messageTypes.length=0,e&&e.forEach((e=>{const t=this.messageTypesList.find((t=>t.value===e));t?this.messageTypes.push({name:t.name,value:t.value}):this.messageTypes.push({name:e,value:e})}))}displayMessageTypeFn(e){return e?e.name:void 0}textIsNotEmpty(e){return e&&e.length>0}createMessageType(e,t){e.preventDefault(),this.transformMessageType(t)}add(e){this.transformMessageType(e.value)}fetchMessageTypes(e){if(this.searchText=e,this.searchText&&this.searchText.length){const e=this.searchText.toUpperCase();return le(this.messageTypesList.filter((t=>t.name.toUpperCase().includes(e))))}return le(this.messageTypesList)}transformMessageType(e){if((e||"").trim()){let t;const n=e.trim(),r=this.messageTypesList.find((e=>e.name===n));t=r?{name:r.name,value:r.value}:{name:n,value:n},t&&this.addMessageType(t)}this.clear("")}remove(e){const t=this.messageTypes.indexOf(e);t>=0&&(this.messageTypes.splice(t,1),this.updateModel())}selected(e){this.addMessageType(e.option.value),this.clear("")}addMessageType(e){-1===this.messageTypes.findIndex((t=>t.value===e.value))&&(this.messageTypes.push(e),this.updateModel())}onFocus(){this.messageTypeConfigForm.get("messageType").updateValueAndValidity({onlySelf:!0,emitEvent:!0})}clear(e=""){this.messageTypeInput.nativeElement.value=e,this.messageTypeConfigForm.get("messageType").patchValue(null,{emitEvent:!0}),setTimeout((()=>{this.messageTypeInput.nativeElement.blur(),this.messageTypeInput.nativeElement.focus()}),0)}updateModel(){const e=this.messageTypes.map((e=>e.value));this.required?(this.chipList.errorState=!e.length,this.propagateChange(e.length>0?e:null)):(this.chipList.errorState=!1,this.propagateChange(e))}}e("MessageTypesConfigComponent",_n),_n.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:_n,deps:[{token:P.Store},{token:Z.TranslateService},{token:N.TruncatePipe},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),_n.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:_n,selector:"tb-message-types-config",inputs:{required:"required",label:"label",placeholder:"placeholder",disabled:"disabled"},providers:[{provide:B,useExisting:c((()=>_n)),multi:!0}],viewQueries:[{propertyName:"chipList",first:!0,predicate:["chipList"],descendants:!0},{propertyName:"matAutocomplete",first:!0,predicate:["messageTypeAutocomplete"],descendants:!0},{propertyName:"messageTypeInput",first:!0,predicate:["messageTypeInput"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;">\n  <mat-label *ngIf="label">{{ label }}</mat-label>\n  <mat-chip-grid #chipList [required]="required">\n    <mat-chip-row\n      *ngFor="let messageType of messageTypes"\n      [removable]="true"\n      (removed)="remove(messageType)">\n      {{messageType.name}}\n      <mat-icon matChipRemove>close</mat-icon>\n    </mat-chip-row>\n    <input matInput type="text" placeholder="{{ placeholder | translate }}"\n           #messageTypeInput\n           (focusin)="onFocus()"\n           formControlName="messageType"\n           matAutocompleteOrigin\n           #origin="matAutocompleteOrigin"\n           [matAutocompleteConnectedTo]="origin"\n           [matAutocomplete]="messageTypeAutocomplete"\n           [matChipInputFor]="chipList"\n           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n           (matChipInputTokenEnd)="add($event)">\n  </mat-chip-grid>\n  <mat-autocomplete #messageTypeAutocomplete="matAutocomplete"\n                    class="tb-autocomplete"\n                    (optionSelected)="selected($event)"\n                    [displayWith]="displayMessageTypeFn">\n    <mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType">\n      <span [innerHTML]="messageType.name | highlight:searchText"></span>\n    </mat-option>\n    <mat-option *ngIf="(filteredMessageTypes | async)?.length === 0" [value]="null" class="tb-not-found">\n      <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">\n          <span translate>tb.rulenode.no-message-types-found</span>\n        </div>\n        <ng-template #searchNotEmpty>\n                <span>\n                  {{ \'tb.rulenode.no-message-type-matching\' | translate :\n                  {messageType: truncate.transform(searchText, true, 6, &apos;...&apos;)}\n                  }}\n                </span>\n        </ng-template>\n        <span>\n          <a translate (click)="createMessageType($event, searchText)">tb.rulenode.create-new-message-type</a>\n        </span>\n      </div>\n    </mat-option>\n  </mat-autocomplete>\n  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix\n            color="primary"\n            matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.message-type\' | translate } }}">help</mat-icon>\n  <mat-error *ngIf="chipList.errorState">\n    {{ \'tb.rulenode.select-message-types-required\' | translate }}\n  </mat-error>\n</mat-form-field>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:je.MatAutocomplete,selector:"mat-autocomplete",inputs:["disableRipple","hideSingleSelectionIndicator"],exportAs:["matAutocomplete"]},{kind:"directive",type:je.MatAutocompleteTrigger,selector:"input[matAutocomplete], textarea[matAutocomplete]",exportAs:["matAutocompleteTrigger"]},{kind:"directive",type:je.MatAutocompleteOrigin,selector:"[matAutocompleteOrigin]",exportAs:["matAutocompleteOrigin"]},{kind:"component",type:Ie.MatChipGrid,selector:"mat-chip-grid",inputs:["tabIndex","disabled","placeholder","required","value","errorStateMatcher"],outputs:["change","valueChange"]},{kind:"directive",type:Ie.MatChipInput,selector:"input[matChipInputFor]",inputs:["matChipInputFor","matChipInputAddOnBlur","matChipInputSeparatorKeyCodes","placeholder","id","disabled"],outputs:["matChipInputTokenEnd"],exportAs:["matChipInput","matChipInputFor"]},{kind:"directive",type:Ie.MatChipRemove,selector:"[matChipRemove]"},{kind:"component",type:Ie.MatChipRow,selector:"mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]",inputs:["color","disabled","disableRipple","tabIndex","editable"],outputs:["edited"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:U.AsyncPipe,name:"async"},{kind:"pipe",type:$e.HighlightPipe,name:"highlight"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:_n,decorators:[{type:n,args:[{selector:"tb-message-types-config",providers:[{provide:B,useExisting:c((()=>_n)),multi:!0}],template:'<mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;">\n  <mat-label *ngIf="label">{{ label }}</mat-label>\n  <mat-chip-grid #chipList [required]="required">\n    <mat-chip-row\n      *ngFor="let messageType of messageTypes"\n      [removable]="true"\n      (removed)="remove(messageType)">\n      {{messageType.name}}\n      <mat-icon matChipRemove>close</mat-icon>\n    </mat-chip-row>\n    <input matInput type="text" placeholder="{{ placeholder | translate }}"\n           #messageTypeInput\n           (focusin)="onFocus()"\n           formControlName="messageType"\n           matAutocompleteOrigin\n           #origin="matAutocompleteOrigin"\n           [matAutocompleteConnectedTo]="origin"\n           [matAutocomplete]="messageTypeAutocomplete"\n           [matChipInputFor]="chipList"\n           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n           (matChipInputTokenEnd)="add($event)">\n  </mat-chip-grid>\n  <mat-autocomplete #messageTypeAutocomplete="matAutocomplete"\n                    class="tb-autocomplete"\n                    (optionSelected)="selected($event)"\n                    [displayWith]="displayMessageTypeFn">\n    <mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType">\n      <span [innerHTML]="messageType.name | highlight:searchText"></span>\n    </mat-option>\n    <mat-option *ngIf="(filteredMessageTypes | async)?.length === 0" [value]="null" class="tb-not-found">\n      <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">\n          <span translate>tb.rulenode.no-message-types-found</span>\n        </div>\n        <ng-template #searchNotEmpty>\n                <span>\n                  {{ \'tb.rulenode.no-message-type-matching\' | translate :\n                  {messageType: truncate.transform(searchText, true, 6, &apos;...&apos;)}\n                  }}\n                </span>\n        </ng-template>\n        <span>\n          <a translate (click)="createMessageType($event, searchText)">tb.rulenode.create-new-message-type</a>\n        </span>\n      </div>\n    </mat-option>\n  </mat-autocomplete>\n  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix\n            color="primary"\n            matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.message-type\' | translate } }}">help</mat-icon>\n  <mat-error *ngIf="chipList.errorState">\n    {{ \'tb.rulenode.select-message-types-required\' | translate }}\n  </mat-error>\n</mat-form-field>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:N.TruncatePipe},{type:R.FormBuilder}]},propDecorators:{required:[{type:m}],label:[{type:m}],placeholder:[{type:m}],disabled:[{type:m}],chipList:[{type:u,args:["chipList",{static:!1}]}],matAutocomplete:[{type:u,args:["messageTypeAutocomplete",{static:!1}]}],messageTypeInput:[{type:u,args:["messageTypeInput",{static:!1}]}]}});class Bn extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.subscriptions=[],this.disableCertPemCredentials=!1,this.passwordFieldRequired=!0,this.allCredentialsTypes=Qt,this.credentialsTypeTranslationsMap=Yt,this.propagateChange=e=>{}}ngOnInit(){this.credentialsConfigFormGroup=this.fb.group({type:[null,[O.required]],username:[null,[]],password:[null,[]],caCert:[null,[]],caCertFileName:[null,[]],privateKey:[null,[]],privateKeyFileName:[null,[]],cert:[null,[]],certFileName:[null,[]]}),this.subscriptions.push(this.credentialsConfigFormGroup.valueChanges.subscribe((()=>{this.updateView()}))),this.subscriptions.push(this.credentialsConfigFormGroup.get("type").valueChanges.subscribe((()=>{this.credentialsTypeChanged()})))}ngOnChanges(e){for(const t of Object.keys(e)){const n=e[t];if(!n.firstChange&&n.currentValue!==n.previousValue&&n.currentValue&&"disableCertPemCredentials"===t){"cert.PEM"===this.credentialsConfigFormGroup.get("type").value&&setTimeout((()=>{this.credentialsConfigFormGroup.get("type").patchValue("anonymous",{emitEvent:!0})}))}}}ngOnDestroy(){this.subscriptions.forEach((e=>e.unsubscribe()))}writeValue(e){fe(e)&&(this.credentialsConfigFormGroup.reset(e,{emitEvent:!1}),this.updateValidators())}setDisabledState(e){e?this.credentialsConfigFormGroup.disable({emitEvent:!1}):(this.credentialsConfigFormGroup.enable({emitEvent:!1}),this.updateValidators())}updateView(){let e=this.credentialsConfigFormGroup.value;const t=e.type;switch(t){case"anonymous":e={type:t};break;case"basic":e={type:t,username:e.username,password:e.password};break;case"cert.PEM":delete e.username}this.propagateChange(e)}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}validate(e){return this.credentialsConfigFormGroup.valid?null:{credentialsConfig:{valid:!1}}}credentialsTypeChanged(){this.credentialsConfigFormGroup.patchValue({username:null,password:null,caCert:null,caCertFileName:null,privateKey:null,privateKeyFileName:null,cert:null,certFileName:null}),this.updateValidators()}updateValidators(e=!1){const t=this.credentialsConfigFormGroup.get("type").value;switch(e&&this.credentialsConfigFormGroup.reset({type:t},{emitEvent:!1}),this.credentialsConfigFormGroup.setValidators([]),this.credentialsConfigFormGroup.get("username").setValidators([]),this.credentialsConfigFormGroup.get("password").setValidators([]),t){case"anonymous":break;case"basic":this.credentialsConfigFormGroup.get("username").setValidators([O.required]),this.credentialsConfigFormGroup.get("password").setValidators(this.passwordFieldRequired?[O.required]:[]);break;case"cert.PEM":this.credentialsConfigFormGroup.setValidators([this.requiredFilesSelected(O.required,[["caCert","caCertFileName"],["privateKey","privateKeyFileName","cert","certFileName"]])])}this.credentialsConfigFormGroup.get("username").updateValueAndValidity({emitEvent:e}),this.credentialsConfigFormGroup.get("password").updateValueAndValidity({emitEvent:e}),this.credentialsConfigFormGroup.updateValueAndValidity({emitEvent:e})}requiredFilesSelected(e,t=null){return n=>{t||(t=[Object.keys(n.controls)]);return n?.controls&&t.some((t=>t.every((t=>!e(n.controls[t])))))?null:{notAllRequiredFilesSelected:!0}}}}e("CredentialsConfigComponent",Bn),Bn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Bn,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Bn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Bn,selector:"tb-credentials-config",inputs:{required:"required",disableCertPemCredentials:"disableCertPemCredentials",passwordFieldRequired:"passwordFieldRequired"},providers:[{provide:B,useExisting:c((()=>Bn)),multi:!0},{provide:K,useExisting:c((()=>Bn)),multi:!0}],usesInheritance:!0,usesOnChanges:!0,ngImport:t,template:'<section [formGroup]="credentialsConfigFormGroup" fxLayout="column">\n  <mat-expansion-panel class="tb-credentials-config-panel-group">\n    <mat-expansion-panel-header>\n      <mat-panel-title translate>tb.rulenode.credentials</mat-panel-title>\n      <mat-panel-description>\n        {{ credentialsTypeTranslationsMap.get(credentialsConfigFormGroup.get(\'type\').value) | translate }}\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.credentials-type</mat-label>\n        <mat-select formControlName="type" required>\n          <mat-option *ngFor="let credentialsType of allCredentialsTypes" [value]="credentialsType"\n                      [disabled]="credentialsType === \'cert.PEM\' && disableCertPemCredentials">\n            {{ credentialsTypeTranslationsMap.get(credentialsType) | translate }}\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="credentialsConfigFormGroup.get(\'type\').hasError(\'required\')">\n          {{ \'tb.rulenode.credentials-type-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <section fxLayout="column" [ngSwitch]="credentialsConfigFormGroup.get(\'type\').value">\n        <ng-template ngSwitchCase="anonymous">\n        </ng-template>\n        <ng-template ngSwitchCase="basic">\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.username</mat-label>\n            <input required matInput formControlName="username">\n            <mat-error *ngIf="credentialsConfigFormGroup.get(\'username\').hasError(\'required\')">\n              {{ \'tb.rulenode.username-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.password</mat-label>\n            <input type="password" [required]="passwordFieldRequired" matInput formControlName="password">\n            <tb-toggle-password matSuffix></tb-toggle-password>\n            <mat-error *ngIf="credentialsConfigFormGroup.get(\'password\').hasError(\'required\')">\n              {{ \'tb.rulenode.password-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </ng-template>\n        <ng-template ngSwitchCase="cert.PEM">\n          <div class="tb-hint">{{ \'tb.rulenode.credentials-pem-hint\' | translate }}</div>\n          <tb-file-input formControlName="caCert"\n                         inputId="caCertSelect"\n                         [existingFileName]="credentialsConfigFormGroup.get(\'caCertFileName\').value"\n                         (fileNameChanged)="credentialsConfigFormGroup.get(\'caCertFileName\').setValue($event)"\n                         label="{{\'tb.rulenode.ca-cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input formControlName="cert"\n                         inputId="CertSelect"\n                         [existingFileName]="credentialsConfigFormGroup.get(\'certFileName\').value"\n                         (fileNameChanged)="credentialsConfigFormGroup.get(\'certFileName\').setValue($event)"\n                         label="{{\'tb.rulenode.cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input style="padding-bottom: 8px;"\n                         formControlName="privateKey"\n                         inputId="privateKeySelect"\n                         [existingFileName]="credentialsConfigFormGroup.get(\'privateKeyFileName\').value"\n                         (fileNameChanged)="credentialsConfigFormGroup.get(\'privateKeyFileName\').setValue($event)"\n                         label="{{\'tb.rulenode.private-key\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.private-key-password</mat-label>\n            <input type="password" matInput formControlName="password">\n            <tb-toggle-password matSuffix></tb-toggle-password>\n          </mat-form-field>\n        </ng-template>\n      </section>\n    </ng-template>\n  </mat-expansion-panel>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:U.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:U.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:oe.MatExpansionPanelDescription,selector:"mat-panel-description"},{kind:"directive",type:oe.MatExpansionPanelContent,selector:"ng-template[matExpansionPanelContent]"},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ze.FileInputComponent,selector:"tb-file-input",inputs:["label","hint","accept","noFileText","inputId","allowedExtensions","dropLabel","maxSizeByte","contentConvertFunction","required","requiredAsError","disabled","existingFileName","readAsBinary","workFromFileObj","multipleFile"],outputs:["fileNameChanged"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Xe.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Bn,decorators:[{type:n,args:[{selector:"tb-credentials-config",providers:[{provide:B,useExisting:c((()=>Bn)),multi:!0},{provide:K,useExisting:c((()=>Bn)),multi:!0}],template:'<section [formGroup]="credentialsConfigFormGroup" fxLayout="column">\n  <mat-expansion-panel class="tb-credentials-config-panel-group">\n    <mat-expansion-panel-header>\n      <mat-panel-title translate>tb.rulenode.credentials</mat-panel-title>\n      <mat-panel-description>\n        {{ credentialsTypeTranslationsMap.get(credentialsConfigFormGroup.get(\'type\').value) | translate }}\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.credentials-type</mat-label>\n        <mat-select formControlName="type" required>\n          <mat-option *ngFor="let credentialsType of allCredentialsTypes" [value]="credentialsType"\n                      [disabled]="credentialsType === \'cert.PEM\' && disableCertPemCredentials">\n            {{ credentialsTypeTranslationsMap.get(credentialsType) | translate }}\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="credentialsConfigFormGroup.get(\'type\').hasError(\'required\')">\n          {{ \'tb.rulenode.credentials-type-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <section fxLayout="column" [ngSwitch]="credentialsConfigFormGroup.get(\'type\').value">\n        <ng-template ngSwitchCase="anonymous">\n        </ng-template>\n        <ng-template ngSwitchCase="basic">\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.username</mat-label>\n            <input required matInput formControlName="username">\n            <mat-error *ngIf="credentialsConfigFormGroup.get(\'username\').hasError(\'required\')">\n              {{ \'tb.rulenode.username-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.password</mat-label>\n            <input type="password" [required]="passwordFieldRequired" matInput formControlName="password">\n            <tb-toggle-password matSuffix></tb-toggle-password>\n            <mat-error *ngIf="credentialsConfigFormGroup.get(\'password\').hasError(\'required\')">\n              {{ \'tb.rulenode.password-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </ng-template>\n        <ng-template ngSwitchCase="cert.PEM">\n          <div class="tb-hint">{{ \'tb.rulenode.credentials-pem-hint\' | translate }}</div>\n          <tb-file-input formControlName="caCert"\n                         inputId="caCertSelect"\n                         [existingFileName]="credentialsConfigFormGroup.get(\'caCertFileName\').value"\n                         (fileNameChanged)="credentialsConfigFormGroup.get(\'caCertFileName\').setValue($event)"\n                         label="{{\'tb.rulenode.ca-cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input formControlName="cert"\n                         inputId="CertSelect"\n                         [existingFileName]="credentialsConfigFormGroup.get(\'certFileName\').value"\n                         (fileNameChanged)="credentialsConfigFormGroup.get(\'certFileName\').setValue($event)"\n                         label="{{\'tb.rulenode.cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input style="padding-bottom: 8px;"\n                         formControlName="privateKey"\n                         inputId="privateKeySelect"\n                         [existingFileName]="credentialsConfigFormGroup.get(\'privateKeyFileName\').value"\n                         (fileNameChanged)="credentialsConfigFormGroup.get(\'privateKeyFileName\').setValue($event)"\n                         label="{{\'tb.rulenode.private-key\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.private-key-password</mat-label>\n            <input type="password" matInput formControlName="password">\n            <tb-toggle-password matSuffix></tb-toggle-password>\n          </mat-form-field>\n        </ng-template>\n      </section>\n    </ng-template>\n  </mat-expansion-panel>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]},propDecorators:{required:[{type:m}],disableCertPemCredentials:[{type:m}],passwordFieldRequired:[{type:m}]}});class Kn{set required(e){this.requiredValue!==e&&(this.requiredValue=e,this.updateValidators())}get required(){return this.requiredValue}constructor(e){this.fb=e,this.subscriptSizing="fixed",this.messageTypes=[{name:"Post attributes",value:"POST_ATTRIBUTES_REQUEST"},{name:"Post telemetry",value:"POST_TELEMETRY_REQUEST"},{name:"Custom",value:""}],this.propagateChange=()=>{},this.destroy$=new ae,this.messageTypeFormGroup=this.fb.group({messageTypeAlias:[null,[O.required]],messageType:[{value:null,disabled:!0},[O.maxLength(255)]]}),this.messageTypeFormGroup.get("messageTypeAlias").valueChanges.pipe(ie(this.destroy$)).subscribe((e=>this.updateMessageTypeValue(e))),this.messageTypeFormGroup.valueChanges.pipe(ie(this.destroy$)).subscribe((()=>this.updateView()))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnTouched(e){}registerOnChange(e){this.propagateChange=e}writeValue(e){this.modelValue=e;let t=this.messageTypes.find((t=>t.value===e));t||(t=this.messageTypes.find((e=>""===e.value))),this.messageTypeFormGroup.get("messageTypeAlias").patchValue(t,{emitEvent:!1}),this.messageTypeFormGroup.get("messageType").patchValue(e,{emitEvent:!1})}validate(){return this.messageTypeFormGroup.valid?null:{messageTypeInvalid:!0}}setDisabledState(e){this.disabled=e,e?this.messageTypeFormGroup.disable({emitEvent:!1}):(this.messageTypeFormGroup.enable({emitEvent:!1}),"Custom"!==this.messageTypeFormGroup.get("messageTypeAlias").value?.name&&this.messageTypeFormGroup.get("messageType").disable({emitEvent:!1}))}updateView(){const e=this.messageTypeFormGroup.getRawValue().messageType;this.modelValue!==e&&(this.modelValue=e,this.propagateChange(this.modelValue))}updateValidators(){this.messageTypeFormGroup.get("messageType").setValidators(this.required?[O.required,O.maxLength(255)]:[O.maxLength(255)]),this.messageTypeFormGroup.get("messageType").updateValueAndValidity({emitEvent:!1})}updateMessageTypeValue(e){"Custom"!==e?.name?this.messageTypeFormGroup.get("messageType").disable({emitEvent:!1}):this.messageTypeFormGroup.get("messageType").enable({emitEvent:!1}),this.messageTypeFormGroup.get("messageType").patchValue(e.value??null)}}e("OutputMessageTypeAutocompleteComponent",Kn),Kn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Kn,deps:[{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Kn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Kn,selector:"tb-output-message-type-autocomplete",inputs:{subscriptSizing:"subscriptSizing",disabled:"disabled",required:"required"},providers:[{provide:B,useExisting:c((()=>Kn)),multi:!0},{provide:K,useExisting:c((()=>Kn)),multi:!0}],ngImport:t,template:'<section class="tb-form-row no-border no-padding tb-standard-fields column-xs" [formGroup]="messageTypeFormGroup">\n  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" hideRequiredMarker>\n    <mat-label>{{\'tb.rulenode.output-message-type\' | translate}}</mat-label>\n    <mat-select formControlName="messageTypeAlias">\n      <mat-option *ngFor="let msgType of messageTypes" [value]="msgType">\n        {{msgType.name}}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" [hideRequiredMarker]="messageTypeFormGroup.get(\'messageType\').disabled">\n    <mat-label>{{\'tb.rulenode.message-type-value\' | translate}}</mat-label>\n    <input matInput type="text" formControlName="messageType">\n    <button type="button"\n            matSuffix\n            mat-icon-button\n            aria-label="Copy"\n            *ngIf="messageTypeFormGroup.get(\'messageType\').value"\n            ngxClipboard\n            [cbContent]="messageTypeFormGroup.get(\'messageType\').value"\n            matTooltip="{{ \'tb.rulenode.copy-message-type\' | translate }}">\n      <mat-icon aria-hidden="false"\n                aria-label="help-icon">content_copy\n      </mat-icon>\n    </button>\n    <mat-error *ngIf="messageTypeFormGroup.get(\'messageType\').hasError(\'required\')">\n      {{ \'tb.rulenode.message-type-value-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="messageTypeFormGroup.get(\'messageType\').hasError(\'maxlength\')">\n      {{ \'tb.rulenode.message-type-value-max-length\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:ft,selector:"[ngxClipboard]",inputs:["ngxClipboard","container","cbContent","cbSuccessMsg"],outputs:["cbOnSuccess","cbOnError"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),Qe([I()],Kn.prototype,"disabled",void 0),Qe([I()],Kn.prototype,"required",null),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Kn,decorators:[{type:n,args:[{selector:"tb-output-message-type-autocomplete",providers:[{provide:B,useExisting:c((()=>Kn)),multi:!0},{provide:K,useExisting:c((()=>Kn)),multi:!0}],template:'<section class="tb-form-row no-border no-padding tb-standard-fields column-xs" [formGroup]="messageTypeFormGroup">\n  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" hideRequiredMarker>\n    <mat-label>{{\'tb.rulenode.output-message-type\' | translate}}</mat-label>\n    <mat-select formControlName="messageTypeAlias">\n      <mat-option *ngFor="let msgType of messageTypes" [value]="msgType">\n        {{msgType.name}}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="flex" subscriptSizing="{{ subscriptSizing }}" [hideRequiredMarker]="messageTypeFormGroup.get(\'messageType\').disabled">\n    <mat-label>{{\'tb.rulenode.message-type-value\' | translate}}</mat-label>\n    <input matInput type="text" formControlName="messageType">\n    <button type="button"\n            matSuffix\n            mat-icon-button\n            aria-label="Copy"\n            *ngIf="messageTypeFormGroup.get(\'messageType\').value"\n            ngxClipboard\n            [cbContent]="messageTypeFormGroup.get(\'messageType\').value"\n            matTooltip="{{ \'tb.rulenode.copy-message-type\' | translate }}">\n      <mat-icon aria-hidden="false"\n                aria-label="help-icon">content_copy\n      </mat-icon>\n    </button>\n    <mat-error *ngIf="messageTypeFormGroup.get(\'messageType\').hasError(\'required\')">\n      {{ \'tb.rulenode.message-type-value-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="messageTypeFormGroup.get(\'messageType\').hasError(\'maxlength\')">\n      {{ \'tb.rulenode.message-type-value-max-length\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n\n'}]}],ctorParameters:function(){return[{type:R.FormBuilder}]},propDecorators:{subscriptSizing:[{type:m}],disabled:[{type:m}],required:[{type:m}]}});class Hn{constructor(e,t){this.fb=e,this.translate=t,this.translation=mn,this.propagateChange=()=>{},this.destroy$=new ae,this.selectOptions=[]}ngOnInit(){this.initOptions(),this.chipControlGroup=this.fb.group({chipControl:[null,[]]}),this.chipControlGroup.get("chipControl").valueChanges.pipe(ze(this.destroy$)).subscribe((e=>{e&&this.propagateChange(e)}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}initOptions(){for(const e of this.translation.keys())this.selectOptions.push({value:e,name:this.translate.instant(this.translation.get(e))})}writeValue(e){this.chipControlGroup.get("chipControl").patchValue(e,{emitEvent:!1})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){e?this.chipControlGroup.disable({emitEvent:!1}):this.chipControlGroup.enable({emitEvent:!1})}}e("MsgMetadataChipComponent",Hn),Hn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Hn,deps:[{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Hn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Hn,selector:"tb-msg-metadata-chip",inputs:{labelText:"labelText",translation:"translation"},providers:[{provide:B,useExisting:c((()=>Hn)),multi:!0}],ngImport:t,template:'<div [formGroup]="chipControlGroup" class="tb-form-row space-between">\n  <div class="fixed-title-width">{{ labelText }}</div>\n  <mat-chip-listbox formControlName="chipControl">\n    <mat-chip-option *ngFor="let option of selectOptions"\n                     selectable="{{ chipControlGroup.get(\'chipControl\').value !== option.value }}"\n                     color="primary"\n                     [value]="option.value">{{ option.name }}</mat-chip-option>\n  </mat-chip-listbox>\n</div>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"component",type:Ie.MatChipListbox,selector:"mat-chip-listbox",inputs:["tabIndex","multiple","aria-orientation","selectable","compareWith","required","hideSingleSelectionIndicator","value"],outputs:["change"]},{kind:"component",type:Ie.MatChipOption,selector:"mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]",inputs:["color","disabled","disableRipple","tabIndex","selectable","selected"],outputs:["selectionChange"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Hn,decorators:[{type:n,args:[{selector:"tb-msg-metadata-chip",providers:[{provide:B,useExisting:c((()=>Hn)),multi:!0}],template:'<div [formGroup]="chipControlGroup" class="tb-form-row space-between">\n  <div class="fixed-title-width">{{ labelText }}</div>\n  <mat-chip-listbox formControlName="chipControl">\n    <mat-chip-option *ngFor="let option of selectOptions"\n                     selectable="{{ chipControlGroup.get(\'chipControl\').value !== option.value }}"\n                     color="primary"\n                     [value]="option.value">{{ option.name }}</mat-chip-option>\n  </mat-chip-listbox>\n</div>\n'}]}],ctorParameters:function(){return[{type:R.FormBuilder},{type:Z.TranslateService}]},propDecorators:{labelText:[{type:m}],translation:[{type:m}]}});class zn extends k{constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.injector=n,this.fb=r,this.destroy$=new ae,this.sourceFieldSubcritption=[],this.propagateChange=null,this.disabled=!1,this.required=!1,this.oneMapRequiredValidator=e=>e.get("keyVals").value.length,this.propagateNestedErrors=e=>{if(this.svListFormGroup&&this.svListFormGroup.get("keyVals")&&"VALID"===this.svListFormGroup.get("keyVals")?.status)return null;const t={};if(this.svListFormGroup&&this.svListFormGroup.setErrors(null),e instanceof H||e instanceof z){if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;for(const n of Object.keys(e.controls)){const r=this.propagateNestedErrors(e.controls[n]);if(r&&Object.keys(r).length)for(const e of Object.keys(r))t[e]=!0}return t}if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;return ye(t,{})?null:t}}ngOnInit(){this.ngControl=this.injector.get(_),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.svListFormGroup=this.fb.group({keyVals:this.fb.array([])},{validators:[this.propagateNestedErrors,this.oneMapRequiredValidator]}),this.svListFormGroup.valueChanges.pipe(ze(this.destroy$)).subscribe((()=>{this.updateModel()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}keyValsFormArray(){return this.svListFormGroup.get("keyVals")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.svListFormGroup.disable({emitEvent:!1}):this.svListFormGroup.enable({emitEvent:!1})}writeValue(e){const t=Object.keys(e).map((t=>({key:t,value:e[t]})));if(this.keyValsFormArray().length===t.length)this.keyValsFormArray().patchValue(t,{emitEvent:!1});else{const e=[];t.forEach((t=>{e.push(this.fb.group({key:[t.key,[O.required]],value:[t.value,[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]}))})),this.svListFormGroup.setControl("keyVals",this.fb.array(e,this.propagateNestedErrors),{emitEvent:!1});for(const e of this.keyValsFormArray().controls)this.keyChangeSubscribe(e)}}filterSelectOptions(e){const t=[];for(const e of this.svListFormGroup.get("keyVals").value){const n=this.selectOptions.find((t=>t.value===e.key));n&&t.push(n)}const n=[];for(const r of this.selectOptions)fe(t.find((e=>e.value===r.value)))&&r.value!==e?.get("key").value||n.push(r);return n}removeKeyVal(e){this.keyValsFormArray().removeAt(e),this.sourceFieldSubcritption[e].unsubscribe(),this.sourceFieldSubcritption.splice(e,1)}addKeyVal(){this.keyValsFormArray().push(this.fb.group({key:["",[O.required]],value:["",[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]})),this.keyChangeSubscribe(this.keyValsFormArray().at(this.keyValsFormArray().length-1))}keyChangeSubscribe(e){this.sourceFieldSubcritption.push(e.get("key").valueChanges.pipe(ze(this.destroy$)).subscribe((t=>{const n=At.get(t);e.get("value").patchValue(this.targetKeyPrefix+n[0].toUpperCase()+n.slice(1))})))}validate(e){return!this.svListFormGroup.get("keyVals").value.length&&this.required?{svMapRequired:!0}:this.svListFormGroup.valid?null:{svFieldsRequired:!0}}updateModel(){const e=this.svListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.svListFormGroup.valid)this.propagateChange(null);else{const t={};e.forEach((e=>{t[e.key]=e.value})),this.propagateChange(t)}}}e("SvMapConfigComponent",zn),zn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:zn,deps:[{token:P.Store},{token:Z.TranslateService},{token:t.Injector},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),zn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:zn,selector:"tb-sv-map-config",inputs:{selectOptions:"selectOptions",disabled:"disabled",labelText:"labelText",requiredText:"requiredText",targetKeyPrefix:"targetKeyPrefix",selectText:"selectText",selectRequiredText:"selectRequiredText",valText:"valText",valRequiredText:"valRequiredText",hintText:"hintText",popupHelpLink:"popupHelpLink",required:"required"},providers:[{provide:B,useExisting:c((()=>zn)),multi:!0},{provide:K,useExisting:c((()=>zn)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="svListFormGroup" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title">{{ labelText }}</div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="svListFormGroup.hasError(\'required\')">\n      tb.rulenode.map-fields-required\n    </div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="svListFormGroup.hasError(\'svMapRequired\')">\n      {{ requiredText }}\n    </div>\n  </div>\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-table">\n      <div class="tb-form-table-header">\n        <div class="tb-form-table-header-cell field-space">{{ selectText }}</div>\n        <div class="tb-form-table-header-cell field-space">{{ valText }}</div>\n        <div class="tb-form-table-header-cell actions-header"></div>\n      </div>\n      <div class="tb-form-table-body">\n        <div class="tb-form-table-row"\n             *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index;">\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <mat-select [placeholder]="selectText" [formControl]="keyValControl.get(\'key\')" required>\n              <mat-option *ngFor="let option of filterSelectOptions(keyValControl)" [value]="option.value">\n                {{option.name}}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <input [placeholder]="valText" [formControl]="keyValControl.get(\'value\')" matInput/>\n          </mat-form-field>\n          <div class="tb-form-table-row-cell-buttons">\n            <button [ngClass]="{\'tb-hidden\': keyValsFormArray().controls.length === 1}"\n                    type="button"\n                    mat-icon-button\n                    (click)="removeKeyVal($index)"\n                    [disabled]="isLoading$ | async"\n                    matTooltip="{{ \'tb.key-val.remove-mapping-entry\' | translate }}"\n                    matTooltipPosition="above">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button [disabled]="(isLoading$ | async) || keyValsFormArray().length >= selectOptions.length"\n            type="button" mat-stroked-button color="primary" (click)="addKeyVal()">\n      {{ \'tb.key-val.add-mapping-entry\' | translate }}\n    </button>\n  </div>\n  <tb-example-hint [hintText]="hintText" [popupHelpLink]="popupHelpLink"></tb-example-hint>\n</section>\n',styles:[":host .field-space{flex:1 1 50%}:host .actions-header{width:40px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:Ve.DefaultClassDirective,selector:"  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]",inputs:["ngClass","ngClass.xs","ngClass.sm","ngClass.md","ngClass.lg","ngClass.xl","ngClass.lt-sm","ngClass.lt-md","ngClass.lt-lg","ngClass.lt-xl","ngClass.gt-xs","ngClass.gt-sm","ngClass.gt-md","ngClass.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormControlDirective,selector:"[formControl]",inputs:["formControl","disabled","ngModel"],outputs:["ngModelChange"],exportAs:["ngForm"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:U.AsyncPipe,name:"async"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),Qe([I()],zn.prototype,"disabled",void 0),Qe([I()],zn.prototype,"required",void 0),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:zn,decorators:[{type:n,args:[{selector:"tb-sv-map-config",providers:[{provide:B,useExisting:c((()=>zn)),multi:!0},{provide:K,useExisting:c((()=>zn)),multi:!0}],template:'<section [formGroup]="svListFormGroup" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title">{{ labelText }}</div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="svListFormGroup.hasError(\'required\')">\n      tb.rulenode.map-fields-required\n    </div>\n    <div class="tb-form-panel-hint tb-error" translate *ngIf="svListFormGroup.hasError(\'svMapRequired\')">\n      {{ requiredText }}\n    </div>\n  </div>\n  <div class="tb-form-panel no-border no-padding">\n    <div class="tb-form-table">\n      <div class="tb-form-table-header">\n        <div class="tb-form-table-header-cell field-space">{{ selectText }}</div>\n        <div class="tb-form-table-header-cell field-space">{{ valText }}</div>\n        <div class="tb-form-table-header-cell actions-header"></div>\n      </div>\n      <div class="tb-form-table-body">\n        <div class="tb-form-table-row"\n             *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index;">\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <mat-select [placeholder]="selectText" [formControl]="keyValControl.get(\'key\')" required>\n              <mat-option *ngFor="let option of filterSelectOptions(keyValControl)" [value]="option.value">\n                {{option.name}}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">\n            <input [placeholder]="valText" [formControl]="keyValControl.get(\'value\')" matInput/>\n          </mat-form-field>\n          <div class="tb-form-table-row-cell-buttons">\n            <button [ngClass]="{\'tb-hidden\': keyValsFormArray().controls.length === 1}"\n                    type="button"\n                    mat-icon-button\n                    (click)="removeKeyVal($index)"\n                    [disabled]="isLoading$ | async"\n                    matTooltip="{{ \'tb.key-val.remove-mapping-entry\' | translate }}"\n                    matTooltipPosition="above">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button [disabled]="(isLoading$ | async) || keyValsFormArray().length >= selectOptions.length"\n            type="button" mat-stroked-button color="primary" (click)="addKeyVal()">\n      {{ \'tb.key-val.add-mapping-entry\' | translate }}\n    </button>\n  </div>\n  <tb-example-hint [hintText]="hintText" [popupHelpLink]="popupHelpLink"></tb-example-hint>\n</section>\n',styles:[":host .field-space{flex:1 1 50%}:host .actions-header{width:40px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:t.Injector},{type:R.FormBuilder}]},propDecorators:{selectOptions:[{type:m}],disabled:[{type:m}],labelText:[{type:m}],requiredText:[{type:m}],targetKeyPrefix:[{type:m}],selectText:[{type:m}],selectRequiredText:[{type:m}],valText:[{type:m}],valRequiredText:[{type:m}],hintText:[{type:m}],popupHelpLink:[{type:m}],required:[{type:m}]}});class Un extends k{get required(){return this.requiredValue}set required(e){this.requiredValue=Ee(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.keys(v),this.directionTypeTranslations=S,this.propagateChange=null}ngOnInit(){this.relationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[O.required]],maxLevel:[null,[]],filters:[null]}),this.relationsQueryFormGroup.valueChanges.subscribe((e=>{this.relationsQueryFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.relationsQueryFormGroup.disable({emitEvent:!1}):this.relationsQueryFormGroup.enable({emitEvent:!1})}writeValue(e){this.relationsQueryFormGroup.reset(e||{},{emitEvent:!1})}}e("RelationsQueryConfigOldComponent",Un),Un.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Un,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Un.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Un,selector:"tb-relations-query-config-old",inputs:{disabled:"disabled",required:"required"},providers:[{provide:B,useExisting:c((()=>Un)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section fxLayout="column" [formGroup]="relationsQueryFormGroup">\n  <mat-checkbox formControlName="fetchLastLevelOnly">\n    {{ \'alias.last-level-relation\' | translate }}\n  </mat-checkbox>\n  <div fxLayoutGap="8px" fxLayout="row">\n    <mat-form-field class="mat-block" style="min-width: 100px;">\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required matInput formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n    </mat-form-field>\n  </div>\n  <div class="mat-caption" style="color: #6e6e6e;" translate>relation.relation-filters</div>\n  <tb-relation-filters\n    formControlName="filters"\n  ></tb-relation-filters>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:We.RelationFiltersComponent,selector:"tb-relation-filters",inputs:["disabled","allowedEntityTypes","enableNotOption"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Un,decorators:[{type:n,args:[{selector:"tb-relations-query-config-old",providers:[{provide:B,useExisting:c((()=>Un)),multi:!0}],template:'<section fxLayout="column" [formGroup]="relationsQueryFormGroup">\n  <mat-checkbox formControlName="fetchLastLevelOnly">\n    {{ \'alias.last-level-relation\' | translate }}\n  </mat-checkbox>\n  <div fxLayoutGap="8px" fxLayout="row">\n    <mat-form-field class="mat-block" style="min-width: 100px;">\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required matInput formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n    </mat-form-field>\n  </div>\n  <div class="mat-caption" style="color: #6e6e6e;" translate>relation.relation-filters</div>\n  <tb-relation-filters\n    formControlName="filters"\n  ></tb-relation-filters>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]},propDecorators:{disabled:[{type:m}],required:[{type:m}]}});class jn{constructor(e,t){this.translate=e,this.fb=t,this.propagateChange=e=>{},this.destroy$=new ae,this.separatorKeysCodes=[Fe,ke,Te],this.onTouched=()=>{}}ngOnInit(){this.attributeControlGroup=this.fb.group({clientAttributeNames:[[],[]],sharedAttributeNames:[[],[]],serverAttributeNames:[[],[]],latestTsKeyNames:[[],[]],getLatestValueWithTs:[!1,[]]},{validators:this.atLeastOne(O.required,["clientAttributeNames","sharedAttributeNames","serverAttributeNames","latestTsKeyNames"])}),this.attributeControlGroup.valueChanges.pipe(ze(this.destroy$)).subscribe((e=>{this.propagateChange(this.preparePropagateValue(e))}))}preparePropagateValue(e){const t={};for(const n in e)t[n]="getLatestValueWithTs"===n||fe(e[n])?e[n]:[];return t}validate(){return this.attributeControlGroup.valid?null:{atLeastOneRequired:!0}}atLeastOne(e,t=null){return n=>{t||(t=Object.keys(n.controls));return n?.controls&&t.some((t=>!e(n.controls[t])))?null:{atLeastOne:!0}}}writeValue(e){this.attributeControlGroup.setValue(e,{emitEvent:!1})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){this.onTouched=e}setDisabledState(e){e?this.attributeControlGroup.disable({emitEvent:!1}):this.attributeControlGroup.enable({emitEvent:!1})}ngOnDestroy(){this.destroy$.next(null),this.destroy$.complete()}}e("SelectAttributesComponent",jn),jn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:jn,deps:[{token:Z.TranslateService},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),jn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:jn,selector:"tb-select-attributes",inputs:{popupHelpLink:"popupHelpLink"},providers:[{provide:B,useExisting:c((()=>jn)),multi:!0},{provide:K,useExisting:jn,multi:!0}],ngImport:t,template:'<div class="tb-form-panel no-padding no-border" [formGroup]="attributeControlGroup">\n  <tb-example-hint [hintText]="\'tb.rulenode.kv-map-pattern-hint\' | translate"\n                   [popupHelpLink]="popupHelpLink"></tb-example-hint>\n  <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-attribute-key\' | translate"\n                        [label]="\'tb.rulenode.client-attributes\' | translate" formControlName="clientAttributeNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-attribute-key\' | translate"\n                        [label]="\'tb.rulenode.shared-attributes\' | translate" formControlName="sharedAttributeNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-attribute-key\' | translate"\n                        [label]="\'tb.rulenode.server-attributes\' | translate" formControlName="serverAttributeNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <tb-string-items-list subscriptSizing="dynamic" editable class="mat-block"\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-telemetry-key\' | translate"\n                        [label]="\'tb.rulenode.latest-telemetry\' | translate" formControlName="latestTsKeyNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.fetch-latest-telemetry-with-timestamp-tooltip\' | translate:\n                         { latestTsKeyName:  attributeControlGroup.get(\'latestTsKeyNames\').value[0]} }}"\n       *ngIf="attributeControlGroup.get(\'latestTsKeyNames\').value?.length > 0"\n       class="tb-form-row no-border no-padding">\n    <mat-slide-toggle class="mat-slide" formControlName="getLatestValueWithTs">\n      {{ \'tb.rulenode.fetch-latest-telemetry-with-timestamp\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</div>\n\n<ng-template #helpIcon>\n  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n            color="primary"\n            matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.field-name\' | translate } }}">help</mat-icon>\n</ng-template>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:U.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"component",type:et.StringItemsListComponent,selector:"tb-string-items-list",inputs:["required","disabled","label","placeholder","hint","requiredText","floatLabel","appearance","editable","subscriptSizing","predefinedValues"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:jn,decorators:[{type:n,args:[{selector:"tb-select-attributes",providers:[{provide:B,useExisting:c((()=>jn)),multi:!0},{provide:K,useExisting:jn,multi:!0}],template:'<div class="tb-form-panel no-padding no-border" [formGroup]="attributeControlGroup">\n  <tb-example-hint [hintText]="\'tb.rulenode.kv-map-pattern-hint\' | translate"\n                   [popupHelpLink]="popupHelpLink"></tb-example-hint>\n  <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-attribute-key\' | translate"\n                        [label]="\'tb.rulenode.client-attributes\' | translate" formControlName="clientAttributeNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-attribute-key\' | translate"\n                        [label]="\'tb.rulenode.shared-attributes\' | translate" formControlName="sharedAttributeNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <tb-string-items-list subscriptSizing="dynamic" class="mat-block" editable\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-attribute-key\' | translate"\n                        [label]="\'tb.rulenode.server-attributes\' | translate" formControlName="serverAttributeNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <tb-string-items-list subscriptSizing="dynamic" editable class="mat-block"\n                        (focusout)="onTouched()"\n                        [placeholder]="\'tb.rulenode.add-telemetry-key\' | translate"\n                        [label]="\'tb.rulenode.latest-telemetry\' | translate" formControlName="latestTsKeyNames">\n    <ng-container matSuffix *ngTemplateOutlet="helpIcon"></ng-container>\n  </tb-string-items-list>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.fetch-latest-telemetry-with-timestamp-tooltip\' | translate:\n                         { latestTsKeyName:  attributeControlGroup.get(\'latestTsKeyNames\').value[0]} }}"\n       *ngIf="attributeControlGroup.get(\'latestTsKeyNames\').value?.length > 0"\n       class="tb-form-row no-border no-padding">\n    <mat-slide-toggle class="mat-slide" formControlName="getLatestValueWithTs">\n      {{ \'tb.rulenode.fetch-latest-telemetry-with-timestamp\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</div>\n\n<ng-template #helpIcon>\n  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n            color="primary"\n            matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.field-name\' | translate } }}">help</mat-icon>\n</ng-template>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:Z.TranslateService},{type:R.FormBuilder}]},propDecorators:{popupHelpLink:[{type:m}]}});class $n extends k{constructor(e,t){super(e),this.store=e,this.fb=t,this.propagateChange=null,this.destroy$=new ae,this.alarmStatus=q,this.alarmStatusTranslations=A}ngOnInit(){this.alarmStatusGroup=this.fb.group({alarmStatus:[null,[]]}),this.alarmStatusGroup.get("alarmStatus").valueChanges.pipe(ze(this.destroy$)).subscribe((e=>{this.propagateChange(e)}))}setDisabledState(e){e?this.alarmStatusGroup.disable({emitEvent:!1}):this.alarmStatusGroup.enable({emitEvent:!1})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}writeValue(e){this.alarmStatusGroup.get("alarmStatus").patchValue(e,{emitEvent:!1})}}e("AlarmStatusSelectComponent",$n),$n.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:$n,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),$n.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:$n,selector:"tb-alarm-status-select",providers:[{provide:B,useExisting:c((()=>$n)),multi:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="alarmStatusGroup" fxLayout="column" fxLayoutAlign="center center">\n  <mat-chip-listbox multiple formControlName="alarmStatus" class="chip-listbox" fxLayout="column">\n    <div class="toggle-column">\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.ACTIVE_UNACK">\n        {{ alarmStatusTranslations.get(alarmStatus.ACTIVE_UNACK) | translate }}\n      </mat-chip-option>\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.ACTIVE_ACK">\n        {{ alarmStatusTranslations.get(alarmStatus.ACTIVE_ACK) | translate }}\n      </mat-chip-option>\n    </div>\n    <div class="toggle-column">\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.CLEARED_UNACK">\n        {{ alarmStatusTranslations.get(alarmStatus.CLEARED_UNACK) | translate }}\n      </mat-chip-option>\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.CLEARED_ACK">\n        {{ alarmStatusTranslations.get(alarmStatus.CLEARED_ACK) | translate }}\n      </mat-chip-option>\n    </div>\n  </mat-chip-listbox>\n</section>\n',styles:[":host .chip-listbox{max-width:460px;width:100%}:host .chip-listbox .toggle-column{display:flex;flex:1 1 100%;gap:8px}:host .chip-listbox .option{margin:0}@media screen and (max-width: 959px){:host .chip-listbox{max-width:360px}:host .chip-listbox .toggle-column{flex-direction:column}}:host ::ng-deep .chip-listbox .mdc-evolution-chip-set__chips{gap:8px}:host ::ng-deep .chip-listbox .option button{flex-basis:100%;justify-content:start}:host ::ng-deep .chip-listbox .option .mdc-evolution-chip__graphic{flex-grow:0}\n"],dependencies:[{kind:"component",type:Ie.MatChipListbox,selector:"mat-chip-listbox",inputs:["tabIndex","multiple","aria-orientation","selectable","compareWith","required","hideSingleSelectionIndicator","value"],outputs:["change"]},{kind:"component",type:Ie.MatChipOption,selector:"mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]",inputs:["color","disabled","disableRipple","tabIndex","selectable","selected"],outputs:["selectionChange"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:$n,decorators:[{type:n,args:[{selector:"tb-alarm-status-select",providers:[{provide:B,useExisting:c((()=>$n)),multi:!0}],template:'<section [formGroup]="alarmStatusGroup" fxLayout="column" fxLayoutAlign="center center">\n  <mat-chip-listbox multiple formControlName="alarmStatus" class="chip-listbox" fxLayout="column">\n    <div class="toggle-column">\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.ACTIVE_UNACK">\n        {{ alarmStatusTranslations.get(alarmStatus.ACTIVE_UNACK) | translate }}\n      </mat-chip-option>\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.ACTIVE_ACK">\n        {{ alarmStatusTranslations.get(alarmStatus.ACTIVE_ACK) | translate }}\n      </mat-chip-option>\n    </div>\n    <div class="toggle-column">\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.CLEARED_UNACK">\n        {{ alarmStatusTranslations.get(alarmStatus.CLEARED_UNACK) | translate }}\n      </mat-chip-option>\n      <mat-chip-option fxFlex class="option" [value]="alarmStatus.CLEARED_ACK">\n        {{ alarmStatusTranslations.get(alarmStatus.CLEARED_ACK) | translate }}\n      </mat-chip-option>\n    </div>\n  </mat-chip-listbox>\n</section>\n',styles:[":host .chip-listbox{max-width:460px;width:100%}:host .chip-listbox .toggle-column{display:flex;flex:1 1 100%;gap:8px}:host .chip-listbox .option{margin:0}@media screen and (max-width: 959px){:host .chip-listbox{max-width:360px}:host .chip-listbox .toggle-column{flex-direction:column}}:host ::ng-deep .chip-listbox .mdc-evolution-chip-set__chips{gap:8px}:host ::ng-deep .chip-listbox .option button{flex-basis:100%;justify-content:start}:host ::ng-deep .chip-listbox .option .mdc-evolution-chip__graphic{flex-grow:0}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Jn{}e("RulenodeCoreConfigCommonModule",Jn),Jn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Jn,deps:[],target:t.ɵɵFactoryTarget.NgModule}),Jn.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:Jn,declarations:[Pn,Rn,On,_n,Bn,wn,Gn,Kn,Sn,Hn,zn,Un,jn,$n,xt],imports:[$,M,Je],exports:[Pn,Rn,On,_n,Bn,wn,Gn,Kn,Sn,Hn,zn,Un,jn,$n,xt]}),Jn.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Jn,imports:[$,M,Je]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Jn,decorators:[{type:d,args:[{declarations:[Pn,Rn,On,_n,Bn,wn,Gn,Kn,Sn,Hn,zn,Un,jn,$n,xt],imports:[$,M,Je],exports:[Pn,Rn,On,_n,Bn,wn,Gn,Kn,Sn,Hn,zn,Un,jn,$n,xt]}]}]});class Qn{}e("RuleNodeCoreConfigActionModule",Qn),Qn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Qn,deps:[],target:t.ɵɵFactoryTarget.NgModule}),Qn.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:Qn,declarations:[En,ht,qn,In,vn,ut,vt,Ct,Ft,Fn,kt,Lt,hn,Cn,Ln,Nn,An,Mn,Tt,Tn,kn,Dn,Vn],imports:[$,M,Je,Jn],exports:[En,ht,qn,In,vn,ut,vt,Ct,Ft,Fn,kt,Lt,hn,Cn,Ln,Nn,An,Mn,Tt,Tn,kn,Dn,Vn]}),Qn.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Qn,imports:[$,M,Je,Jn]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Qn,decorators:[{type:d,args:[{declarations:[En,ht,qn,In,vn,ut,vt,Ct,Ft,Fn,kt,Lt,hn,Cn,Ln,Nn,An,Mn,Tt,Tn,kn,Dn,Vn],imports:[$,M,Je,Jn],exports:[En,ht,qn,In,vn,ut,vt,Ct,Ft,Fn,kt,Lt,hn,Cn,Ln,Nn,An,Mn,Tt,Tn,kn,Dn,Vn]}]}]});class Yn extends g{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n,this.separatorKeysCodes=[Fe,ke,Te]}configForm(){return this.calculateDeltaConfigForm}onConfigurationSet(e){this.calculateDeltaConfigForm=this.fb.group({inputValueKey:[e.inputValueKey,[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],outputValueKey:[e.outputValueKey,[O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],useCache:[e.useCache,[]],addPeriodBetweenMsgs:[e.addPeriodBetweenMsgs,[]],periodValueKey:[e.periodValueKey,[]],round:[e.round,[O.min(0),O.max(15)]],tellFailureIfDeltaIsNegative:[e.tellFailureIfDeltaIsNegative,[]],excludeZeroDeltas:[e.excludeZeroDeltas,[]]})}prepareInputConfig(e){return{inputValueKey:fe(e?.inputValueKey)?e.inputValueKey:null,outputValueKey:fe(e?.outputValueKey)?e.outputValueKey:null,useCache:!fe(e?.useCache)||e.useCache,addPeriodBetweenMsgs:!!fe(e?.addPeriodBetweenMsgs)&&e.addPeriodBetweenMsgs,periodValueKey:fe(e?.periodValueKey)?e.periodValueKey:null,round:fe(e?.round)?e.round:null,tellFailureIfDeltaIsNegative:!fe(e?.tellFailureIfDeltaIsNegative)||e.tellFailureIfDeltaIsNegative,excludeZeroDeltas:!!fe(e?.excludeZeroDeltas)&&e.excludeZeroDeltas}}prepareOutputConfig(e){return be(e)}updateValidators(e){this.calculateDeltaConfigForm.get("addPeriodBetweenMsgs").value?this.calculateDeltaConfigForm.get("periodValueKey").setValidators([O.required]):this.calculateDeltaConfigForm.get("periodValueKey").setValidators([]),this.calculateDeltaConfigForm.get("periodValueKey").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["addPeriodBetweenMsgs"]}}e("CalculateDeltaConfigComponent",Yn),Yn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Yn,deps:[{token:P.Store},{token:Z.TranslateService},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Yn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Yn,selector:"tb-enrichment-node-calculate-delta-config",usesInheritance:!0,ngImport:t,template:"<section [formGroup]=\"calculateDeltaConfigForm\">\n  <div fxLayout.gt-sm=\"row\" fxLayoutGap.gt-sm=\"22px\">\n    <mat-form-field class=\"mat-block\" fxFlex>\n      <mat-label>{{ 'tb.rulenode.input-value-key' | translate }}</mat-label>\n      <input matInput formControlName=\"inputValueKey\">\n      <mat-error *ngIf=\"calculateDeltaConfigForm.get('inputValueKey').hasError('required') ||\n      calculateDeltaConfigForm.get('inputValueKey').hasError('pattern')\">\n        {{ 'tb.rulenode.input-value-key-required' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"mat-block\" fxFlex>\n      <mat-label>{{ 'tb.rulenode.output-value-key' | translate }}</mat-label>\n      <input matInput formControlName=\"outputValueKey\">\n      <mat-error *ngIf=\"calculateDeltaConfigForm.get('outputValueKey').hasError('required') ||\n      calculateDeltaConfigForm.get('outputValueKey').hasError('pattern')\">\n        {{ 'tb.rulenode.output-value-key-required' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class=\"mat-block\" fxFlex>\n    <mat-label>{{ 'tb.rulenode.number-of-digits-after-floating-point' | translate }}</mat-label>\n    <input type=\"number\" min=\"0\" max=\"15\" step=\"1\" matInput formControlName=\"round\">\n    <mat-error *ngIf=\"calculateDeltaConfigForm.get('round').hasError('min')\">\n      {{ 'tb.rulenode.number-of-digits-after-floating-point-range' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"calculateDeltaConfigForm.get('round').hasError('max')\">\n      {{ 'tb.rulenode.number-of-digits-after-floating-point-range' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div class=\"tb-form-panel no-padding no-border\">\n    <div tb-hint-tooltip-icon=\"{{ 'tb.rulenode.failure-if-delta-negative-tooltip' | translate }}\"\n         class=\"tb-form-row same-padding\">\n      <mat-slide-toggle class=\"mat-slide margin\" formControlName=\"tellFailureIfDeltaIsNegative\">\n        {{ 'tb.rulenode.failure-if-delta-negative' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div tb-hint-tooltip-icon=\"{{ 'tb.rulenode.use-caching-tooltip' | translate :\n                       { inputValueKey: calculateDeltaConfigForm.get('inputValueKey').valid ?\n                                calculateDeltaConfigForm.get('inputValueKey').value : 'tb.rulenode.input-value-key' | translate } }}\"\n         class=\"tb-form-row same-padding\">\n      <mat-slide-toggle class=\"mat-slide margin\" formControlName=\"useCache\">\n        {{ 'tb.rulenode.use-caching' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div class=\"tb-form-panel stroked\" [class.no-padding-bottom]=\"calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value\">\n      <div tb-hint-tooltip-icon=\"{{ 'tb.rulenode.add-time-difference-between-readings-tooltip' | translate:\n                           { periodValueKey: (calculateDeltaConfigForm.get('periodValueKey').valid &&\n                           calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value) ? calculateDeltaConfigForm.get('periodValueKey').value :\n                           'periodInMs' } }}\"\n           class=\"tb-form-row no-border no-padding\">\n        <mat-slide-toggle class=\"mat-slide\" formControlName=\"addPeriodBetweenMsgs\">\n          {{ 'tb.rulenode.add-time-difference-between-readings' | translate:\n          { inputValueKey: calculateDeltaConfigForm.get('inputValueKey').valid ?\n                     calculateDeltaConfigForm.get('inputValueKey').value : 'tb.rulenode.input-value-key' | translate } }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field class=\"mat-block\" *ngIf=\"calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value\">\n        <mat-label>{{ 'tb.rulenode.period-value-key' | translate }}</mat-label>\n        <input required matInput formControlName=\"periodValueKey\">\n        <mat-error *ngIf=\"calculateDeltaConfigForm.get('periodValueKey').hasError('required')\">\n          {{ 'tb.rulenode.period-value-key-required' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div tb-hint-tooltip-icon=\"{{ calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value ? ('tb.rulenode.exclude-zero-deltas-time-difference-hint'  | translate :{\n            outputValueKey: calculateDeltaConfigForm.get('outputValueKey').valid ? calculateDeltaConfigForm.get('outputValueKey').value : 'tb.rulenode.output-value-key' | translate,\n            periodValueKey: calculateDeltaConfigForm.get('periodValueKey').valid ? calculateDeltaConfigForm.get('periodValueKey').value : 'tb.rulenode.period-value-key' | translate\n            }) : ('tb.rulenode.exclude-zero-deltas-hint' | translate :{ outputValueKey: calculateDeltaConfigForm.get('outputValueKey').valid ? calculateDeltaConfigForm.get('outputValueKey').value : 'tb.rulenode.output-value-key' | translate }) }}\"\n         class=\"tb-form-row same-padding\">\n      <mat-slide-toggle class=\"mat-slide margin\" formControlName=\"excludeZeroDeltas\">\n        {{ 'tb.rulenode.exclude-zero-deltas' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n</section>\n",dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Yn,decorators:[{type:n,args:[{selector:"tb-enrichment-node-calculate-delta-config",template:"<section [formGroup]=\"calculateDeltaConfigForm\">\n  <div fxLayout.gt-sm=\"row\" fxLayoutGap.gt-sm=\"22px\">\n    <mat-form-field class=\"mat-block\" fxFlex>\n      <mat-label>{{ 'tb.rulenode.input-value-key' | translate }}</mat-label>\n      <input matInput formControlName=\"inputValueKey\">\n      <mat-error *ngIf=\"calculateDeltaConfigForm.get('inputValueKey').hasError('required') ||\n      calculateDeltaConfigForm.get('inputValueKey').hasError('pattern')\">\n        {{ 'tb.rulenode.input-value-key-required' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field class=\"mat-block\" fxFlex>\n      <mat-label>{{ 'tb.rulenode.output-value-key' | translate }}</mat-label>\n      <input matInput formControlName=\"outputValueKey\">\n      <mat-error *ngIf=\"calculateDeltaConfigForm.get('outputValueKey').hasError('required') ||\n      calculateDeltaConfigForm.get('outputValueKey').hasError('pattern')\">\n        {{ 'tb.rulenode.output-value-key-required' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class=\"mat-block\" fxFlex>\n    <mat-label>{{ 'tb.rulenode.number-of-digits-after-floating-point' | translate }}</mat-label>\n    <input type=\"number\" min=\"0\" max=\"15\" step=\"1\" matInput formControlName=\"round\">\n    <mat-error *ngIf=\"calculateDeltaConfigForm.get('round').hasError('min')\">\n      {{ 'tb.rulenode.number-of-digits-after-floating-point-range' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"calculateDeltaConfigForm.get('round').hasError('max')\">\n      {{ 'tb.rulenode.number-of-digits-after-floating-point-range' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div class=\"tb-form-panel no-padding no-border\">\n    <div tb-hint-tooltip-icon=\"{{ 'tb.rulenode.failure-if-delta-negative-tooltip' | translate }}\"\n         class=\"tb-form-row same-padding\">\n      <mat-slide-toggle class=\"mat-slide margin\" formControlName=\"tellFailureIfDeltaIsNegative\">\n        {{ 'tb.rulenode.failure-if-delta-negative' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div tb-hint-tooltip-icon=\"{{ 'tb.rulenode.use-caching-tooltip' | translate :\n                       { inputValueKey: calculateDeltaConfigForm.get('inputValueKey').valid ?\n                                calculateDeltaConfigForm.get('inputValueKey').value : 'tb.rulenode.input-value-key' | translate } }}\"\n         class=\"tb-form-row same-padding\">\n      <mat-slide-toggle class=\"mat-slide margin\" formControlName=\"useCache\">\n        {{ 'tb.rulenode.use-caching' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div class=\"tb-form-panel stroked\" [class.no-padding-bottom]=\"calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value\">\n      <div tb-hint-tooltip-icon=\"{{ 'tb.rulenode.add-time-difference-between-readings-tooltip' | translate:\n                           { periodValueKey: (calculateDeltaConfigForm.get('periodValueKey').valid &&\n                           calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value) ? calculateDeltaConfigForm.get('periodValueKey').value :\n                           'periodInMs' } }}\"\n           class=\"tb-form-row no-border no-padding\">\n        <mat-slide-toggle class=\"mat-slide\" formControlName=\"addPeriodBetweenMsgs\">\n          {{ 'tb.rulenode.add-time-difference-between-readings' | translate:\n          { inputValueKey: calculateDeltaConfigForm.get('inputValueKey').valid ?\n                     calculateDeltaConfigForm.get('inputValueKey').value : 'tb.rulenode.input-value-key' | translate } }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field class=\"mat-block\" *ngIf=\"calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value\">\n        <mat-label>{{ 'tb.rulenode.period-value-key' | translate }}</mat-label>\n        <input required matInput formControlName=\"periodValueKey\">\n        <mat-error *ngIf=\"calculateDeltaConfigForm.get('periodValueKey').hasError('required')\">\n          {{ 'tb.rulenode.period-value-key-required' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div tb-hint-tooltip-icon=\"{{ calculateDeltaConfigForm.get('addPeriodBetweenMsgs').value ? ('tb.rulenode.exclude-zero-deltas-time-difference-hint'  | translate :{\n            outputValueKey: calculateDeltaConfigForm.get('outputValueKey').valid ? calculateDeltaConfigForm.get('outputValueKey').value : 'tb.rulenode.output-value-key' | translate,\n            periodValueKey: calculateDeltaConfigForm.get('periodValueKey').valid ? calculateDeltaConfigForm.get('periodValueKey').value : 'tb.rulenode.period-value-key' | translate\n            }) : ('tb.rulenode.exclude-zero-deltas-hint' | translate :{ outputValueKey: calculateDeltaConfigForm.get('outputValueKey').valid ? calculateDeltaConfigForm.get('outputValueKey').value : 'tb.rulenode.output-value-key' | translate }) }}\"\n         class=\"tb-form-row same-padding\">\n      <mat-slide-toggle class=\"mat-slide margin\" formControlName=\"excludeZeroDeltas\">\n        {{ 'tb.rulenode.exclude-zero-deltas' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n</section>\n"}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:R.FormBuilder}]}});class Wn extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.fetchToData=[],this.DataToFetch=Ht;for(const e of zt.keys())e!==Ht.FIELDS&&this.fetchToData.push({value:e,name:this.translate.instant(zt.get(e))})}configForm(){return this.customerAttributesConfigForm}prepareOutputConfig(e){const t={};for(const n of Object.keys(e.dataMapping))t[n.trim()]=e.dataMapping[n];return e.dataMapping=t,be(e)}prepareInputConfig(e){let t,n;return t=fe(e?.telemetry)?e.telemetry?Ht.LATEST_TELEMETRY:Ht.ATTRIBUTES:fe(e?.dataToFetch)?e.dataToFetch:Ht.ATTRIBUTES,n=fe(e?.attrMapping)?e.attrMapping:fe(e?.dataMapping)?e.dataMapping:null,{dataToFetch:t,dataMapping:n,fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA}}selectTranslation(e,t){return this.customerAttributesConfigForm.get("dataToFetch").value===Ht.LATEST_TELEMETRY?e:t}onConfigurationSet(e){this.customerAttributesConfigForm=this.fb.group({dataToFetch:[e.dataToFetch,[]],dataMapping:[e.dataMapping,[O.required]],fetchTo:[e.fetchTo]})}}e("CustomerAttributesConfigComponent",Wn),Wn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Wn,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Wn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Wn,selector:"tb-enrichment-node-customer-attributes-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="customerAttributesConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title" translate>tb.rulenode.mapping-of-customers</div>\n  <div fxFlex fxLayoutAlign="center center">\n    <div class="fetch-to-data-toggle">\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">\n        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">\n          {{ data.name }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n  </div>\n  <tb-kv-map-config\n    required\n    formControlName="dataMapping"\n    [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n    [labelText]="selectTranslation(\'tb.rulenode.latest-telemetry-mapping\',\'tb.rulenode.attributes-mapping\') | translate"\n    [keyText]="selectTranslation(\'tb.rulenode.source-telemetry\',\'tb.rulenode.source-attribute\') | translate"\n    [keyRequiredText]="selectTranslation(\'tb.rulenode.source-telemetry-required\',\'tb.rulenode.source-attribute-required\') | translate"\n    [valText]="\'tb.rulenode.target-key\' | translate"\n    [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n    [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n    popupHelpLink="rulenode/customer_attributes_node_fields_templatization">\n  </tb-kv-map-config>\n  <tb-msg-metadata-chip\n    [labelText]="customerAttributesConfigForm.get(\'dataToFetch\').value === DataToFetch.LATEST_TELEMETRY ?\n    (\'tb.rulenode.add-mapped-latest-telemetry-to\' | translate) : (\'tb.rulenode.add-mapped-attribute-to\' | translate)"\n    formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n</section>\n',styles:[":host .fetch-to-data-toggle{max-width:420px;width:100%}\n"],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:Pn,selector:"tb-kv-map-config",inputs:["disabled","uniqueKeyValuePairValidator","labelText","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","popupHelpLink","required"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Wn,decorators:[{type:n,args:[{selector:"tb-enrichment-node-customer-attributes-config",template:'<section [formGroup]="customerAttributesConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title" translate>tb.rulenode.mapping-of-customers</div>\n  <div fxFlex fxLayoutAlign="center center">\n    <div class="fetch-to-data-toggle">\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">\n        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">\n          {{ data.name }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n  </div>\n  <tb-kv-map-config\n    required\n    formControlName="dataMapping"\n    [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n    [labelText]="selectTranslation(\'tb.rulenode.latest-telemetry-mapping\',\'tb.rulenode.attributes-mapping\') | translate"\n    [keyText]="selectTranslation(\'tb.rulenode.source-telemetry\',\'tb.rulenode.source-attribute\') | translate"\n    [keyRequiredText]="selectTranslation(\'tb.rulenode.source-telemetry-required\',\'tb.rulenode.source-attribute-required\') | translate"\n    [valText]="\'tb.rulenode.target-key\' | translate"\n    [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n    [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n    popupHelpLink="rulenode/customer_attributes_node_fields_templatization">\n  </tb-kv-map-config>\n  <tb-msg-metadata-chip\n    [labelText]="customerAttributesConfigForm.get(\'dataToFetch\').value === DataToFetch.LATEST_TELEMETRY ?\n    (\'tb.rulenode.add-mapped-latest-telemetry-to\' | translate) : (\'tb.rulenode.add-mapped-attribute-to\' | translate)"\n    formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n</section>\n',styles:[":host .fetch-to-data-toggle{max-width:420px;width:100%}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class Zn extends g{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n}configForm(){return this.deviceAttributesConfigForm}onConfigurationSet(e){this.deviceAttributesConfigForm=this.fb.group({deviceRelationsQuery:[e.deviceRelationsQuery,[O.required]],tellFailureIfAbsent:[e.tellFailureIfAbsent,[]],fetchTo:[e.fetchTo,[]],attributesControl:[e.attributesControl,[]]})}prepareInputConfig(e){return xe(e)&&(e.attributesControl={clientAttributeNames:fe(e?.clientAttributeNames)?e.clientAttributeNames:[],latestTsKeyNames:fe(e?.latestTsKeyNames)?e.latestTsKeyNames:[],serverAttributeNames:fe(e?.serverAttributeNames)?e.serverAttributeNames:[],sharedAttributeNames:fe(e?.sharedAttributeNames)?e.sharedAttributeNames:[],getLatestValueWithTs:!!fe(e?.getLatestValueWithTs)&&e.getLatestValueWithTs}),{deviceRelationsQuery:fe(e?.deviceRelationsQuery)?e.deviceRelationsQuery:null,tellFailureIfAbsent:!fe(e?.tellFailureIfAbsent)||e.tellFailureIfAbsent,fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA,attributesControl:e?e.attributesControl:null}}prepareOutputConfig(e){for(const t of Object.keys(e.attributesControl))e[t]=e.attributesControl[t];return delete e.attributesControl,e}}e("DeviceAttributesConfigComponent",Zn),Zn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Zn,deps:[{token:P.Store},{token:Z.TranslateService},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Zn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Zn,selector:"tb-enrichment-node-device-attributes-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deviceAttributesConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.device-relations-query</div>\n    <tb-device-relations-query-config\n      required\n      formControlName="deviceRelationsQuery">\n    </tb-device-relations-query-config>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-row no-padding no-border space-between">\n      <div class="tb-form-panel-title tb-required" translate>tb.rulenode.related-device-attributes</div>\n      <div class="tb-form-panel-hint tb-error" translate\n           [hidden]="!(deviceAttributesConfigForm.get(\'attributesControl\').touched &&\n                        deviceAttributesConfigForm.get(\'attributesControl\').hasError(\'atLeastOneRequired\'))">\n        tb.rulenode.at-least-one-field-required\n      </div>\n    </div>\n    <tb-select-attributes formControlName="attributesControl"\n                          popupHelpLink="rulenode/related_device_attributes_node_fields_templatization"></tb-select-attributes>\n    <tb-msg-metadata-chip formControlName="fetchTo"\n                          [labelText]="\'tb.rulenode.add-selected-attributes-to\' | translate"></tb-msg-metadata-chip>\n  </div>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.tell-failure-tooltip\' | translate }}"\n       class="tb-form-row same-padding">\n    <mat-slide-toggle class="mat-slide margin" formControlName="tellFailureIfAbsent">\n      {{ \'tb.rulenode.tell-failure\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:Rn,selector:"tb-device-relations-query-config",inputs:["disabled","required"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"component",type:jn,selector:"tb-select-attributes",inputs:["popupHelpLink"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Zn,decorators:[{type:n,args:[{selector:"tb-enrichment-node-device-attributes-config",template:'<section [formGroup]="deviceAttributesConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked no-padding-bottom">\n    <div class="tb-form-panel-title" translate>tb.rulenode.device-relations-query</div>\n    <tb-device-relations-query-config\n      required\n      formControlName="deviceRelationsQuery">\n    </tb-device-relations-query-config>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-row no-padding no-border space-between">\n      <div class="tb-form-panel-title tb-required" translate>tb.rulenode.related-device-attributes</div>\n      <div class="tb-form-panel-hint tb-error" translate\n           [hidden]="!(deviceAttributesConfigForm.get(\'attributesControl\').touched &&\n                        deviceAttributesConfigForm.get(\'attributesControl\').hasError(\'atLeastOneRequired\'))">\n        tb.rulenode.at-least-one-field-required\n      </div>\n    </div>\n    <tb-select-attributes formControlName="attributesControl"\n                          popupHelpLink="rulenode/related_device_attributes_node_fields_templatization"></tb-select-attributes>\n    <tb-msg-metadata-chip formControlName="fetchTo"\n                          [labelText]="\'tb.rulenode.add-selected-attributes-to\' | translate"></tb-msg-metadata-chip>\n  </div>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.tell-failure-tooltip\' | translate }}"\n       class="tb-form-row same-padding">\n    <mat-slide-toggle class="mat-slide margin" formControlName="tellFailureIfAbsent">\n      {{ \'tb.rulenode.tell-failure\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:R.FormBuilder}]}});class Xn extends g{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n,this.predefinedValues=[];for(const e of Object.keys(Pt))this.predefinedValues.push({value:Pt[e],name:this.translate.instant(Rt.get(Pt[e]))})}ngOnInit(){super.ngOnInit()}configForm(){return this.entityDetailsConfigForm}prepareInputConfig(e){let t;return t=fe(e?.addToMetadata)?e.addToMetadata?ln.METADATA:ln.DATA:e?.fetchTo?e.fetchTo:ln.DATA,{detailsList:fe(e?.detailsList)?e.detailsList:null,fetchTo:t}}onConfigurationSet(e){this.entityDetailsConfigForm=this.fb.group({detailsList:[e.detailsList,[O.required]],fetchTo:[e.fetchTo,[]]})}}e("EntityDetailsConfigComponent",Xn),Xn.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Xn,deps:[{token:P.Store},{token:Z.TranslateService},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Xn.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Xn,selector:"tb-enrichment-node-entity-details-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="entityDetailsConfigForm">\n  <tb-string-items-list [predefinedValues]="predefinedValues"\n                        class="mat-block" required\n                        [label]="\'tb.rulenode.select-details\' | translate"\n                        [placeholder]="\'tb.rulenode.add-detail\' | translate"\n                        [requiredText]="\'tb.rulenode.entity-details-list-empty\' | translate"\n                        formControlName="detailsList">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.detail\' | translate } }}">\n      help\n    </mat-icon>\n  </tb-string-items-list>\n  <tb-msg-metadata-chip\n    [labelText]="\'tb.rulenode.add-selected-details-to\' | translate"\n    formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:et.StringItemsListComponent,selector:"tb-string-items-list",inputs:["required","disabled","label","placeholder","hint","requiredText","floatLabel","appearance","editable","subscriptSizing","predefinedValues"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Xn,decorators:[{type:n,args:[{selector:"tb-enrichment-node-entity-details-config",template:'<section [formGroup]="entityDetailsConfigForm">\n  <tb-string-items-list [predefinedValues]="predefinedValues"\n                        class="mat-block" required\n                        [label]="\'tb.rulenode.select-details\' | translate"\n                        [placeholder]="\'tb.rulenode.add-detail\' | translate"\n                        [requiredText]="\'tb.rulenode.entity-details-list-empty\' | translate"\n                        formControlName="detailsList">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.detail\' | translate } }}">\n      help\n    </mat-icon>\n  </tb-string-items-list>\n  <tb-msg-metadata-chip\n    [labelText]="\'tb.rulenode.add-selected-details-to\' | translate"\n    formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:R.FormBuilder}]}});class er extends g{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n,this.separatorKeysCodes=[Fe,ke,Te],this.aggregationTypes=E,this.aggregations=Object.values(E),this.aggregationTypesTranslations=w,this.fetchMode=Ot,this.samplingOrders=Object.values(Kt),this.samplingOrdersTranslate=jt,this.timeUnits=Object.values(wt),this.timeUnitsTranslationMap=Gt,this.deduplicationStrategiesHintTranslations=Bt,this.headerOptions=[],this.timeUnitMap={[wt.MILLISECONDS]:1,[wt.SECONDS]:1e3,[wt.MINUTES]:6e4,[wt.HOURS]:36e5,[wt.DAYS]:864e5},this.intervalValidator=()=>e=>e.get("startInterval").value*this.timeUnitMap[e.get("startIntervalTimeUnit").value]<=e.get("endInterval").value*this.timeUnitMap[e.get("endIntervalTimeUnit").value]?{intervalError:!0}:null;for(const e of _t.keys())this.headerOptions.push({value:e,name:this.translate.instant(_t.get(e))})}configForm(){return this.getTelemetryFromDatabaseConfigForm}onConfigurationSet(e){this.getTelemetryFromDatabaseConfigForm=this.fb.group({latestTsKeyNames:[e.latestTsKeyNames,[O.required]],aggregation:[e.aggregation,[O.required]],fetchMode:[e.fetchMode,[O.required]],orderBy:[e.orderBy,[]],limit:[e.limit,[]],useMetadataIntervalPatterns:[e.useMetadataIntervalPatterns,[]],interval:this.fb.group({startInterval:[e.interval.startInterval,[]],startIntervalTimeUnit:[e.interval.startIntervalTimeUnit,[]],endInterval:[e.interval.endInterval,[]],endIntervalTimeUnit:[e.interval.endIntervalTimeUnit,[]]}),startIntervalPattern:[e.startIntervalPattern,[]],endIntervalPattern:[e.endIntervalPattern,[]]})}validatorTriggers(){return["fetchMode","useMetadataIntervalPatterns"]}toggleChange(e){this.getTelemetryFromDatabaseConfigForm.get("fetchMode").patchValue(e,{emitEvent:!0})}prepareOutputConfig(e){return e.startInterval=e.interval.startInterval,e.startIntervalTimeUnit=e.interval.startIntervalTimeUnit,e.endInterval=e.interval.endInterval,e.endIntervalTimeUnit=e.interval.endIntervalTimeUnit,delete e.interval,be(e)}prepareInputConfig(e){return xe(e)&&(e.interval={startInterval:e.startInterval,startIntervalTimeUnit:e.startIntervalTimeUnit,endInterval:e.endInterval,endIntervalTimeUnit:e.endIntervalTimeUnit}),{latestTsKeyNames:fe(e?.latestTsKeyNames)?e.latestTsKeyNames:null,aggregation:fe(e?.aggregation)?e.aggregation:E.NONE,fetchMode:fe(e?.fetchMode)?e.fetchMode:Ot.FIRST,orderBy:fe(e?.orderBy)?e.orderBy:Kt.ASC,limit:fe(e?.limit)?e.limit:1e3,useMetadataIntervalPatterns:!!fe(e?.useMetadataIntervalPatterns)&&e.useMetadataIntervalPatterns,interval:{startInterval:fe(e?.interval?.startInterval)?e.interval.startInterval:2,startIntervalTimeUnit:fe(e?.interval?.startIntervalTimeUnit)?e.interval.startIntervalTimeUnit:wt.MINUTES,endInterval:fe(e?.interval?.endInterval)?e.interval.endInterval:1,endIntervalTimeUnit:fe(e?.interval?.endIntervalTimeUnit)?e.interval.endIntervalTimeUnit:wt.MINUTES},startIntervalPattern:fe(e?.startIntervalPattern)?e.startIntervalPattern:null,endIntervalPattern:fe(e?.endIntervalPattern)?e.endIntervalPattern:null}}updateValidators(e){const t=this.getTelemetryFromDatabaseConfigForm.get("fetchMode").value,n=this.getTelemetryFromDatabaseConfigForm.get("useMetadataIntervalPatterns").value;t&&t===Ot.ALL?(this.getTelemetryFromDatabaseConfigForm.get("aggregation").setValidators([O.required]),this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([O.required]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([O.required,O.min(2),O.max(1e3)])):(this.getTelemetryFromDatabaseConfigForm.get("aggregation").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([])),n?(this.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([O.required,O.pattern(/(?:.|\s)*\S(&:.|\s)*/)])):(this.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").setValidators([O.required,O.min(1),O.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").setValidators([O.required]),this.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").setValidators([O.required,O.min(1),O.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").setValidators([O.required]),this.getTelemetryFromDatabaseConfigForm.get("interval").setValidators([this.intervalValidator()]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([])),this.getTelemetryFromDatabaseConfigForm.get("aggregation").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("orderBy").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("limit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").updateValueAndValidity({emitEvent:e})}removeKey(e,t){const n=this.getTelemetryFromDatabaseConfigForm.get(t).value,r=n.indexOf(e);r>=0&&(n.splice(r,1),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(n,{emitEvent:!0}))}clearChipGrid(){this.getTelemetryFromDatabaseConfigForm.get("latestTsKeyNames").patchValue([],{emitEvent:!0})}addKey(e,t){const n=e.input;let r=e.value;if((r||"").trim()){r=r.trim();let e=this.getTelemetryFromDatabaseConfigForm.get(t).value;e&&-1!==e.indexOf(r)||(e||(e=[]),e.push(r),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(e,{emitEvent:!0}))}n&&(n.value="")}defaultPaddingEnable(){return this.getTelemetryFromDatabaseConfigForm.get("fetchMode").value===Ot.ALL&&this.getTelemetryFromDatabaseConfigForm.get("aggregation").value===E.NONE}}e("GetTelemetryFromDatabaseConfigComponent",er),er.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:er,deps:[{token:P.Store},{token:Z.TranslateService},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),er.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:er,selector:"tb-enrichment-node-get-telemetry-from-database",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="getTelemetryFromDatabaseConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-string-items-list class="mat-block" editable [placeholder]="\'tb.rulenode.add-timeseries-key\' | translate"\n                        subscriptSizing="dynamic" required\n                        [requiredText]="\'tb.rulenode.timeseries-keys-required\' | translate"\n                        [label]="\'tb.rulenode.timeseries-keys\' | translate" formControlName="latestTsKeyNames"\n                        [hint]="\'tb.rulenode.general-pattern-hint\' | translate">\n    <div matHintEnd class="see-example" tb-help-popup="{{\'rulenode/originator_telemetry_node_fields_templatization\'}}"\n         hintMode\n         tb-help-popup-placement="right"\n         trigger-style="letter-spacing:0.25px; font-size:12px"\n         [tb-help-popup-style]="{maxWidth: \'820px\'}"\n         trigger-text="{{ \'tb.key-val.see-examples\' | translate }}"></div>\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.timeseries-key\' | translate } }}">help\n    </mat-icon>\n  </tb-string-items-list>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.fetch-interval</div>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.use-metadata-dynamic-interval-tooltip\' | translate }}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="useMetadataIntervalPatterns">\n        {{ \'tb.rulenode.use-metadata-dynamic-interval\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div formGroupName="interval" fxLayout="column"\n         *ngIf="getTelemetryFromDatabaseConfigForm.get(\'useMetadataIntervalPatterns\').value === false; else intervalPattern">\n      <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="0" fxLayoutGap.gt-sm="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.interval-start\' | translate }}</mat-label>\n          <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').hasError(\'required\')">\n            {{ \'tb.rulenode.start-interval-value-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').hasError(\'min\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').hasError(\'max\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block" hideRequiredMarker>\n          <mat-label>{{ \'tb.rulenode.time-unit\' | translate }}</mat-label>\n          <mat-select formControlName="startIntervalTimeUnit" required>\n            <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n              {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="0" fxLayoutGap.gt-sm="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.interval-end\' | translate }}</mat-label>\n          <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').hasError(\'required\')">\n            {{ \'tb.rulenode.end-interval-value-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').hasError(\'min\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').hasError(\'max\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block" hideRequiredMarker>\n          <mat-label>{{ \'tb.rulenode.time-unit\' | translate }}</mat-label>\n          <mat-select formControlName="endIntervalTimeUnit" required>\n            <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n              {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class="description-block tb-primary-fill" [class.error]="getTelemetryFromDatabaseConfigForm.get(\'interval\').invalid">\n        <mat-icon class="description-icon">error_outline</mat-icon>\n        <div class="description-text">\n          <ng-container *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval\').valid; else invalidText">\n            {{ \'tb.rulenode.fetch-timeseries-from-to\' | translate:\n            {\n              startInterval: getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').value,\n              endInterval: getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').value,\n              startIntervalTimeUnit: getTelemetryFromDatabaseConfigForm.get(\'interval.startIntervalTimeUnit\').value.toLowerCase(),\n              endIntervalTimeUnit: getTelemetryFromDatabaseConfigForm.get(\'interval.endIntervalTimeUnit\').value.toLowerCase()\n            } }}\n          </ng-container>\n          <ng-template #invalidText>\n            {{ "tb.rulenode.fetch-timeseries-from-to-invalid" | translate }}\n          </ng-template>\n        </div>\n      </div>\n    </div>\n    <ng-template #intervalPattern>\n      <div fxLayout="column" class="input-block">\n        <mat-form-field fxFlex class="mat-block">\n          <mat-label>{{ \'tb.rulenode.start-interval\' | translate }}</mat-label>\n          <input matInput formControlName="startIntervalPattern" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startIntervalPattern\').hasError(\'required\') ||\n            getTelemetryFromDatabaseConfigForm.get(\'startIntervalPattern\').hasError(\'pattern\')">\n            {{ \'tb.rulenode.start-interval-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex class="mat-block">\n          <mat-label>{{ \'tb.rulenode.end-interval\' | translate }}</mat-label>\n          <input matInput formControlName="endIntervalPattern" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endIntervalPattern\').hasError(\'required\') ||\n          getTelemetryFromDatabaseConfigForm.get(\'endIntervalPattern\').hasError(\'pattern\')">\n            {{ \'tb.rulenode.end-interval-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <tb-example-hint [hintText]="\'tb.rulenode.metadata-dynamic-interval-hint\' | translate"\n                         popupHelpLink="rulenode/originator_telemetry_node_fields_templatization">\n        </tb-example-hint>\n      </div>\n    </ng-template>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.fetch-strategy</div>\n    <div class="tb-form-panel no-border no-padding item-center">\n      <div class="fetch-mod-toggle">\n        <tb-toggle-select formControlName="fetchMode" appearance="fill">\n          <tb-toggle-option *ngFor="let data of headerOptions" [value]="data.value">\n            {{ data.name }}\n          </tb-toggle-option>\n        </tb-toggle-select>\n      </div>\n      <div class="tb-form-hint tb-primary-fill hint-container">\n        {{ deduplicationStrategiesHintTranslations.get(getTelemetryFromDatabaseConfigForm.get(\'fetchMode\').value) | translate }}\n      </div>\n    </div>\n    <div *ngIf="getTelemetryFromDatabaseConfigForm.get(\'fetchMode\').value === fetchMode.ALL">\n      <mat-form-field class="mat-block" hideRequiredMarker\n                      [subscriptSizing]="defaultPaddingEnable() ? \'fixed\' : \'dynamic\'">\n        <mat-label>{{ \'aggregation.function\' | translate }}</mat-label>\n        <mat-select formControlName="aggregation" required>\n          <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">\n            {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div *ngIf="getTelemetryFromDatabaseConfigForm.get(\'aggregation\').value === aggregationTypes.NONE">\n        <mat-form-field class="mat-block" hideRequiredMarker>\n          <mat-label> {{ "tb.rulenode.order-by-timestamp" | translate }} </mat-label>\n          <mat-select formControlName="orderBy" required>\n            <mat-option *ngFor="let order of samplingOrders" [value]="order">\n              {{ samplingOrdersTranslate.get(order) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ "tb.rulenode.limit" | translate }}</mat-label>\n          <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>\n          <mat-hint>{{ "tb.rulenode.limit-hint" | translate }}</mat-hint>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'limit\').hasError(\'required\')">\n            {{ \'tb.rulenode.limit-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'limit\').hasError(\'min\')">\n            {{ \'tb.rulenode.limit-range\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'limit\').hasError(\'max\')">\n            {{ \'tb.rulenode.limit-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</section>\n',styles:[":host .see-example{display:inline-block}:host .description-block{display:flex;align-items:center;border-radius:6px;border:1px solid #EAEAEA}:host .description-block .description-icon{font-size:24px;height:24px;min-height:24px;width:24px;min-width:24px;line-height:24px;color:#d9d9d9;margin:4px}:host .description-block .description-text{font-size:12px;line-height:16px;letter-spacing:.25px;margin:6px}:host .description-block.error{color:var(--mdc-theme-error, #f44336)}:host .description-block.error .description-icon{color:var(--mdc-theme-error, #f44336)}:host .item-center{align-items:center}:host .item-center .fetch-mod-toggle{width:100%}:host .hint-container{width:100%}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:de.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"component",type:et.StringItemsListComponent,selector:"tb-string-items-list",inputs:["required","disabled","label","placeholder","hint","requiredText","floatLabel","appearance","editable","subscriptSizing","predefinedValues"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:R.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:er,decorators:[{type:n,args:[{selector:"tb-enrichment-node-get-telemetry-from-database",template:'<section [formGroup]="getTelemetryFromDatabaseConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-string-items-list class="mat-block" editable [placeholder]="\'tb.rulenode.add-timeseries-key\' | translate"\n                        subscriptSizing="dynamic" required\n                        [requiredText]="\'tb.rulenode.timeseries-keys-required\' | translate"\n                        [label]="\'tb.rulenode.timeseries-keys\' | translate" formControlName="latestTsKeyNames"\n                        [hint]="\'tb.rulenode.general-pattern-hint\' | translate">\n    <div matHintEnd class="see-example" tb-help-popup="{{\'rulenode/originator_telemetry_node_fields_templatization\'}}"\n         hintMode\n         tb-help-popup-placement="right"\n         trigger-style="letter-spacing:0.25px; font-size:12px"\n         [tb-help-popup-style]="{maxWidth: \'820px\'}"\n         trigger-text="{{ \'tb.key-val.see-examples\' | translate }}"></div>\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.timeseries-key\' | translate } }}">help\n    </mat-icon>\n  </tb-string-items-list>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.fetch-interval</div>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.use-metadata-dynamic-interval-tooltip\' | translate }}"\n         class="tb-form-row no-border no-padding">\n      <mat-slide-toggle class="mat-slide" formControlName="useMetadataIntervalPatterns">\n        {{ \'tb.rulenode.use-metadata-dynamic-interval\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div formGroupName="interval" fxLayout="column"\n         *ngIf="getTelemetryFromDatabaseConfigForm.get(\'useMetadataIntervalPatterns\').value === false; else intervalPattern">\n      <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="0" fxLayoutGap.gt-sm="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.interval-start\' | translate }}</mat-label>\n          <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').hasError(\'required\')">\n            {{ \'tb.rulenode.start-interval-value-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').hasError(\'min\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').hasError(\'max\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block" hideRequiredMarker>\n          <mat-label>{{ \'tb.rulenode.time-unit\' | translate }}</mat-label>\n          <mat-select formControlName="startIntervalTimeUnit" required>\n            <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n              {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="0" fxLayoutGap.gt-sm="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.interval-end\' | translate }}</mat-label>\n          <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').hasError(\'required\')">\n            {{ \'tb.rulenode.end-interval-value-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').hasError(\'min\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').hasError(\'max\')">\n            {{ \'tb.rulenode.time-value-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block" hideRequiredMarker>\n          <mat-label>{{ \'tb.rulenode.time-unit\' | translate }}</mat-label>\n          <mat-select formControlName="endIntervalTimeUnit" required>\n            <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n              {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div class="description-block tb-primary-fill" [class.error]="getTelemetryFromDatabaseConfigForm.get(\'interval\').invalid">\n        <mat-icon class="description-icon">error_outline</mat-icon>\n        <div class="description-text">\n          <ng-container *ngIf="getTelemetryFromDatabaseConfigForm.get(\'interval\').valid; else invalidText">\n            {{ \'tb.rulenode.fetch-timeseries-from-to\' | translate:\n            {\n              startInterval: getTelemetryFromDatabaseConfigForm.get(\'interval.startInterval\').value,\n              endInterval: getTelemetryFromDatabaseConfigForm.get(\'interval.endInterval\').value,\n              startIntervalTimeUnit: getTelemetryFromDatabaseConfigForm.get(\'interval.startIntervalTimeUnit\').value.toLowerCase(),\n              endIntervalTimeUnit: getTelemetryFromDatabaseConfigForm.get(\'interval.endIntervalTimeUnit\').value.toLowerCase()\n            } }}\n          </ng-container>\n          <ng-template #invalidText>\n            {{ "tb.rulenode.fetch-timeseries-from-to-invalid" | translate }}\n          </ng-template>\n        </div>\n      </div>\n    </div>\n    <ng-template #intervalPattern>\n      <div fxLayout="column" class="input-block">\n        <mat-form-field fxFlex class="mat-block">\n          <mat-label>{{ \'tb.rulenode.start-interval\' | translate }}</mat-label>\n          <input matInput formControlName="startIntervalPattern" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startIntervalPattern\').hasError(\'required\') ||\n            getTelemetryFromDatabaseConfigForm.get(\'startIntervalPattern\').hasError(\'pattern\')">\n            {{ \'tb.rulenode.start-interval-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex class="mat-block">\n          <mat-label>{{ \'tb.rulenode.end-interval\' | translate }}</mat-label>\n          <input matInput formControlName="endIntervalPattern" required>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endIntervalPattern\').hasError(\'required\') ||\n          getTelemetryFromDatabaseConfigForm.get(\'endIntervalPattern\').hasError(\'pattern\')">\n            {{ \'tb.rulenode.end-interval-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <tb-example-hint [hintText]="\'tb.rulenode.metadata-dynamic-interval-hint\' | translate"\n                         popupHelpLink="rulenode/originator_telemetry_node_fields_templatization">\n        </tb-example-hint>\n      </div>\n    </ng-template>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.fetch-strategy</div>\n    <div class="tb-form-panel no-border no-padding item-center">\n      <div class="fetch-mod-toggle">\n        <tb-toggle-select formControlName="fetchMode" appearance="fill">\n          <tb-toggle-option *ngFor="let data of headerOptions" [value]="data.value">\n            {{ data.name }}\n          </tb-toggle-option>\n        </tb-toggle-select>\n      </div>\n      <div class="tb-form-hint tb-primary-fill hint-container">\n        {{ deduplicationStrategiesHintTranslations.get(getTelemetryFromDatabaseConfigForm.get(\'fetchMode\').value) | translate }}\n      </div>\n    </div>\n    <div *ngIf="getTelemetryFromDatabaseConfigForm.get(\'fetchMode\').value === fetchMode.ALL">\n      <mat-form-field class="mat-block" hideRequiredMarker\n                      [subscriptSizing]="defaultPaddingEnable() ? \'fixed\' : \'dynamic\'">\n        <mat-label>{{ \'aggregation.function\' | translate }}</mat-label>\n        <mat-select formControlName="aggregation" required>\n          <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">\n            {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div *ngIf="getTelemetryFromDatabaseConfigForm.get(\'aggregation\').value === aggregationTypes.NONE">\n        <mat-form-field class="mat-block" hideRequiredMarker>\n          <mat-label> {{ "tb.rulenode.order-by-timestamp" | translate }} </mat-label>\n          <mat-select formControlName="orderBy" required>\n            <mat-option *ngFor="let order of samplingOrders" [value]="order">\n              {{ samplingOrdersTranslate.get(order) | translate }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label>{{ "tb.rulenode.limit" | translate }}</mat-label>\n          <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>\n          <mat-hint>{{ "tb.rulenode.limit-hint" | translate }}</mat-hint>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'limit\').hasError(\'required\')">\n            {{ \'tb.rulenode.limit-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'limit\').hasError(\'min\')">\n            {{ \'tb.rulenode.limit-range\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'limit\').hasError(\'max\')">\n            {{ \'tb.rulenode.limit-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</section>\n',styles:[":host .see-example{display:inline-block}:host .description-block{display:flex;align-items:center;border-radius:6px;border:1px solid #EAEAEA}:host .description-block .description-icon{font-size:24px;height:24px;min-height:24px;width:24px;min-width:24px;line-height:24px;color:#d9d9d9;margin:4px}:host .description-block .description-text{font-size:12px;line-height:16px;letter-spacing:.25px;margin:6px}:host .description-block.error{color:var(--mdc-theme-error, #f44336)}:host .description-block.error .description-icon{color:var(--mdc-theme-error, #f44336)}:host .item-center{align-items:center}:host .item-center .fetch-mod-toggle{width:100%}:host .hint-container{width:100%}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:R.FormBuilder}]}});class tr extends g{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n}configForm(){return this.originatorAttributesConfigForm}onConfigurationSet(e){this.originatorAttributesConfigForm=this.fb.group({tellFailureIfAbsent:[e.tellFailureIfAbsent,[]],fetchTo:[e.fetchTo,[]],attributesControl:[e.attributesControl,[]]})}prepareInputConfig(e){return xe(e)&&(e.attributesControl={clientAttributeNames:fe(e?.clientAttributeNames)?e.clientAttributeNames:[],latestTsKeyNames:fe(e?.latestTsKeyNames)?e.latestTsKeyNames:[],serverAttributeNames:fe(e?.serverAttributeNames)?e.serverAttributeNames:[],sharedAttributeNames:fe(e?.sharedAttributeNames)?e.sharedAttributeNames:[],getLatestValueWithTs:!!fe(e?.getLatestValueWithTs)&&e.getLatestValueWithTs}),{fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA,tellFailureIfAbsent:!!fe(e?.tellFailureIfAbsent)&&e.tellFailureIfAbsent,attributesControl:fe(e?.attributesControl)?e.attributesControl:null}}prepareOutputConfig(e){for(const t of Object.keys(e.attributesControl))e[t]=e.attributesControl[t];return delete e.attributesControl,e}}e("OriginatorAttributesConfigComponent",tr),tr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:tr,deps:[{token:P.Store},{token:Z.TranslateService},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),tr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:tr,selector:"tb-enrichment-node-originator-attributes-config",usesInheritance:!0,ngImport:t,template:'<section class="tb-form-panel no-padding no-border" [formGroup]="originatorAttributesConfigForm">\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-row no-padding no-border space-between">\n      <div class="tb-form-panel-title tb-required" translate>tb.rulenode.originator-attributes</div>\n      <div class="tb-form-panel-hint tb-error" translate\n           [hidden]="!(originatorAttributesConfigForm.get(\'attributesControl\').touched &&\n                        originatorAttributesConfigForm.get(\'attributesControl\').hasError(\'atLeastOneRequired\'))">\n        tb.rulenode.at-least-one-field-required\n      </div>\n    </div>\n    <tb-select-attributes formControlName="attributesControl"\n                          popupHelpLink="rulenode/originator_attributes_node_fields_templatization">\n    </tb-select-attributes>\n    <tb-msg-metadata-chip [labelText]="\'tb.rulenode.add-originator-attributes-to\' | translate"\n                          formControlName="fetchTo">\n    </tb-msg-metadata-chip>\n  </div>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.tell-failure-tooltip\' | translate }}" class="tb-form-row same-padding">\n    <mat-slide-toggle class="mat-slide margin" formControlName="tellFailureIfAbsent">\n      {{ \'tb.rulenode.tell-failure\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"component",type:jn,selector:"tb-select-attributes",inputs:["popupHelpLink"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:tr,decorators:[{type:n,args:[{selector:"tb-enrichment-node-originator-attributes-config",template:'<section class="tb-form-panel no-padding no-border" [formGroup]="originatorAttributesConfigForm">\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-row no-padding no-border space-between">\n      <div class="tb-form-panel-title tb-required" translate>tb.rulenode.originator-attributes</div>\n      <div class="tb-form-panel-hint tb-error" translate\n           [hidden]="!(originatorAttributesConfigForm.get(\'attributesControl\').touched &&\n                        originatorAttributesConfigForm.get(\'attributesControl\').hasError(\'atLeastOneRequired\'))">\n        tb.rulenode.at-least-one-field-required\n      </div>\n    </div>\n    <tb-select-attributes formControlName="attributesControl"\n                          popupHelpLink="rulenode/originator_attributes_node_fields_templatization">\n    </tb-select-attributes>\n    <tb-msg-metadata-chip [labelText]="\'tb.rulenode.add-originator-attributes-to\' | translate"\n                          formControlName="fetchTo">\n    </tb-msg-metadata-chip>\n  </div>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.tell-failure-tooltip\' | translate }}" class="tb-form-row same-padding">\n    <mat-slide-toggle class="mat-slide margin" formControlName="tellFailureIfAbsent">\n      {{ \'tb.rulenode.tell-failure\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:Z.TranslateService},{type:R.FormBuilder}]}});class nr extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.originatorFields=[];for(const e of qt)this.originatorFields.push({value:e.value,name:this.translate.instant(e.name)})}configForm(){return this.originatorFieldsConfigForm}prepareOutputConfig(e){return be(e)}prepareInputConfig(e){return{dataMapping:fe(e?.dataMapping)?e.dataMapping:null,ignoreNullStrings:fe(e?.ignoreNullStrings)?e.ignoreNullStrings:null,fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA}}onConfigurationSet(e){this.originatorFieldsConfigForm=this.fb.group({dataMapping:[e.dataMapping,[O.required]],ignoreNullStrings:[e.ignoreNullStrings,[]],fetchTo:[e.fetchTo,[]]})}}e("OriginatorFieldsConfigComponent",nr),nr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:nr,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),nr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:nr,selector:"tb-enrichment-node-originator-fields-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="originatorFieldsConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-sv-map-config\n    required\n    [selectOptions]="originatorFields"\n    targetKeyPrefix="originator"\n    formControlName="dataMapping"\n    [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n    [labelText]="\'tb.rulenode.originator-fields-mapping\' | translate"\n    [selectText]="\'tb.rulenode.source-field\' | translate"\n    [selectRequiredText]="\'tb.rulenode.source-field-required\' | translate"\n    [valText]="\'tb.rulenode.target-key\' | translate"\n    [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n    [hintText]="\'tb.rulenode.originator-fields-sv-map-hint\' | translate"\n    popupHelpLink="rulenode/originator_fields_node_fields_templatization">\n  </tb-sv-map-config>\n  <tb-msg-metadata-chip [labelText]="\'tb.rulenode.add-mapped-originator-fields-to\' | translate"\n                        formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.skip-empty-fields-tooltip\' | translate }}" class="tb-form-row same-padding">\n    <mat-slide-toggle class="mat-slide margin" formControlName="ignoreNullStrings">\n      {{ \'tb.rulenode.skip-empty-fields\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',dependencies:[{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"component",type:zn,selector:"tb-sv-map-config",inputs:["selectOptions","disabled","labelText","requiredText","targetKeyPrefix","selectText","selectRequiredText","valText","valRequiredText","hintText","popupHelpLink","required"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:nr,decorators:[{type:n,args:[{selector:"tb-enrichment-node-originator-fields-config",template:'<section [formGroup]="originatorFieldsConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-sv-map-config\n    required\n    [selectOptions]="originatorFields"\n    targetKeyPrefix="originator"\n    formControlName="dataMapping"\n    [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n    [labelText]="\'tb.rulenode.originator-fields-mapping\' | translate"\n    [selectText]="\'tb.rulenode.source-field\' | translate"\n    [selectRequiredText]="\'tb.rulenode.source-field-required\' | translate"\n    [valText]="\'tb.rulenode.target-key\' | translate"\n    [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n    [hintText]="\'tb.rulenode.originator-fields-sv-map-hint\' | translate"\n    popupHelpLink="rulenode/originator_fields_node_fields_templatization">\n  </tb-sv-map-config>\n  <tb-msg-metadata-chip [labelText]="\'tb.rulenode.add-mapped-originator-fields-to\' | translate"\n                        formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.skip-empty-fields-tooltip\' | translate }}" class="tb-form-row same-padding">\n    <mat-slide-toggle class="mat-slide margin" formControlName="ignoreNullStrings">\n      {{ \'tb.rulenode.skip-empty-fields\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class rr extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.DataToFetch=Ht,this.msgMetadataLabelTranslations=Ut,this.originatorFields=[],this.fetchToData=[];for(const e of Object.keys(qt))this.originatorFields.push({value:qt[e].value,name:this.translate.instant(qt[e].name)});for(const e of zt.keys())this.fetchToData.push({value:e,name:this.translate.instant(zt.get(e))})}configForm(){return this.relatedAttributesConfigForm}prepareOutputConfig(e){e.dataToFetch===Ht.FIELDS?(e.dataMapping=e.svMap,delete e.svMap):(e.dataMapping=e.kvMap,delete e.kvMap);const t={};if(e&&e.dataMapping)for(const n of Object.keys(e.dataMapping))t[n.trim()]=e.dataMapping[n];return e.dataMapping=t,delete e.svMap,delete e.kvMap,be(e)}prepareInputConfig(e){let t,n,r={[F.name.value]:`relatedEntity${this.translate.instant(F.name.name)}`},o={serialNumber:"sn"};return t=fe(e?.telemetry)?e.telemetry?Ht.LATEST_TELEMETRY:Ht.ATTRIBUTES:fe(e?.dataToFetch)?e.dataToFetch:Ht.ATTRIBUTES,n=fe(e?.attrMapping)?e.attrMapping:fe(e?.dataMapping)?e.dataMapping:null,t===Ht.FIELDS?r=n:o=n,{relationsQuery:fe(e?.relationsQuery)?e.relationsQuery:null,dataToFetch:t,svMap:r,kvMap:o,fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA}}selectTranslation(e,t){return this.relatedAttributesConfigForm.get("dataToFetch").value===Ht.LATEST_TELEMETRY?e:t}onConfigurationSet(e){this.relatedAttributesConfigForm=this.fb.group({relationsQuery:[e.relationsQuery,[O.required]],dataToFetch:[e.dataToFetch,[]],kvMap:[e.kvMap,[O.required]],svMap:[e.svMap,[O.required]],fetchTo:[e.fetchTo,[]]})}validatorTriggers(){return["dataToFetch"]}updateValidators(e){this.relatedAttributesConfigForm.get("dataToFetch").value===Ht.FIELDS?(this.relatedAttributesConfigForm.get("svMap").enable({emitEvent:!1}),this.relatedAttributesConfigForm.get("kvMap").disable({emitEvent:!1}),this.relatedAttributesConfigForm.get("svMap").updateValueAndValidity()):(this.relatedAttributesConfigForm.get("svMap").disable({emitEvent:!1}),this.relatedAttributesConfigForm.get("kvMap").enable({emitEvent:!1}),this.relatedAttributesConfigForm.get("kvMap").updateValueAndValidity())}}e("RelatedAttributesConfigComponent",rr),rr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:rr,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),rr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:rr,selector:"tb-enrichment-node-related-attributes-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="relatedAttributesConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-relations-query-config\n    required\n    formControlName="relationsQuery">\n  </tb-relations-query-config>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.data-to-fetch</div>\n    <tb-toggle-select formControlName="dataToFetch" appearance="fill">\n      <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">\n        {{ data.name }}\n      </tb-toggle-option>\n    </tb-toggle-select>\n    <tb-kv-map-config\n      [hidden]="relatedAttributesConfigForm.get(\'dataToFetch\').value === DataToFetch.FIELDS"\n      required\n      formControlName="kvMap"\n      [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n      [labelText]="selectTranslation(\'tb.rulenode.latest-telemetry-mapping\',\'tb.rulenode.attributes-mapping\') | translate"\n      [keyText]="selectTranslation(\'tb.rulenode.source-telemetry\',\'tb.rulenode.source-attribute\') | translate"\n      [keyRequiredText]="selectTranslation(\'tb.rulenode.source-telemetry-required\',\'tb.rulenode.source-attribute-required\') | translate"\n      [valText]="\'tb.rulenode.target-key\' | translate"\n      [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n      [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n      popupHelpLink="rulenode/related_entity_data_node_fields_templatization">\n    </tb-kv-map-config>\n    <tb-sv-map-config\n      [hidden]="relatedAttributesConfigForm.get(\'dataToFetch\').value !== DataToFetch.FIELDS"\n      required\n      [labelText]="\'tb.rulenode.fields-mapping\' | translate"\n      targetKeyPrefix="relatedEntity"\n      [selectOptions]="originatorFields"\n      formControlName="svMap"\n      [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n      [selectText]="\'tb.rulenode.source-field\' | translate"\n      [selectRequiredText]="\'tb.rulenode.source-field-required\' | translate"\n      [valText]="\'tb.rulenode.target-key\' | translate"\n      [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n      [hintText]="\'tb.rulenode.sv-map-hint\' | translate"\n      popupHelpLink="rulenode/related_entity_data_node_fields_templatization">\n    </tb-sv-map-config>\n    <tb-msg-metadata-chip formControlName="fetchTo"\n                          [labelText]="msgMetadataLabelTranslations.get(relatedAttributesConfigForm.get(\'dataToFetch\').value) | translate">\n    </tb-msg-metadata-chip>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:Pn,selector:"tb-kv-map-config",inputs:["disabled","uniqueKeyValuePairValidator","labelText","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","popupHelpLink","required"]},{kind:"component",type:On,selector:"tb-relations-query-config",inputs:["disabled","required"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"component",type:zn,selector:"tb-sv-map-config",inputs:["selectOptions","disabled","labelText","requiredText","targetKeyPrefix","selectText","selectRequiredText","valText","valRequiredText","hintText","popupHelpLink","required"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:rr,decorators:[{type:n,args:[{selector:"tb-enrichment-node-related-attributes-config",template:'<section [formGroup]="relatedAttributesConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-relations-query-config\n    required\n    formControlName="relationsQuery">\n  </tb-relations-query-config>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.data-to-fetch</div>\n    <tb-toggle-select formControlName="dataToFetch" appearance="fill">\n      <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">\n        {{ data.name }}\n      </tb-toggle-option>\n    </tb-toggle-select>\n    <tb-kv-map-config\n      [hidden]="relatedAttributesConfigForm.get(\'dataToFetch\').value === DataToFetch.FIELDS"\n      required\n      formControlName="kvMap"\n      [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n      [labelText]="selectTranslation(\'tb.rulenode.latest-telemetry-mapping\',\'tb.rulenode.attributes-mapping\') | translate"\n      [keyText]="selectTranslation(\'tb.rulenode.source-telemetry\',\'tb.rulenode.source-attribute\') | translate"\n      [keyRequiredText]="selectTranslation(\'tb.rulenode.source-telemetry-required\',\'tb.rulenode.source-attribute-required\') | translate"\n      [valText]="\'tb.rulenode.target-key\' | translate"\n      [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n      [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n      popupHelpLink="rulenode/related_entity_data_node_fields_templatization">\n    </tb-kv-map-config>\n    <tb-sv-map-config\n      [hidden]="relatedAttributesConfigForm.get(\'dataToFetch\').value !== DataToFetch.FIELDS"\n      required\n      [labelText]="\'tb.rulenode.fields-mapping\' | translate"\n      targetKeyPrefix="relatedEntity"\n      [selectOptions]="originatorFields"\n      formControlName="svMap"\n      [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n      [selectText]="\'tb.rulenode.source-field\' | translate"\n      [selectRequiredText]="\'tb.rulenode.source-field-required\' | translate"\n      [valText]="\'tb.rulenode.target-key\' | translate"\n      [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n      [hintText]="\'tb.rulenode.sv-map-hint\' | translate"\n      popupHelpLink="rulenode/related_entity_data_node_fields_templatization">\n    </tb-sv-map-config>\n    <tb-msg-metadata-chip formControlName="fetchTo"\n                          [labelText]="msgMetadataLabelTranslations.get(relatedAttributesConfigForm.get(\'dataToFetch\').value) | translate">\n    </tb-msg-metadata-chip>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class or extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.fetchToData=[],this.DataToFetch=Ht;for(const e of zt.keys())e!==Ht.FIELDS&&this.fetchToData.push({value:e,name:this.translate.instant(zt.get(e))})}configForm(){return this.tenantAttributesConfigForm}prepareInputConfig(e){let t,n;return t=fe(e?.telemetry)?e.telemetry?Ht.LATEST_TELEMETRY:Ht.ATTRIBUTES:fe(e?.dataToFetch)?e.dataToFetch:Ht.ATTRIBUTES,n=fe(e?.attrMapping)?e.attrMapping:fe(e?.dataMapping)?e.dataMapping:null,{dataToFetch:t,dataMapping:n,fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA}}selectTranslation(e,t){return this.tenantAttributesConfigForm.get("dataToFetch").value===Ht.LATEST_TELEMETRY?e:t}onConfigurationSet(e){this.tenantAttributesConfigForm=this.fb.group({dataToFetch:[e.dataToFetch,[]],dataMapping:[e.dataMapping,[O.required]],fetchTo:[e.fetchTo,[]]})}}e("TenantAttributesConfigComponent",or),or.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:or,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),or.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:or,selector:"tb-enrichment-node-tenant-attributes-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="tenantAttributesConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title" translate>tb.rulenode.mapping-of-tenant</div>\n  <div fxFlex fxLayoutAlign="center center">\n    <div class="fetch-to-data-toggle">\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">\n        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">\n          {{ data.name }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n  </div>\n  <tb-kv-map-config\n    required\n    formControlName="dataMapping"\n    [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n    [labelText]="selectTranslation(\'tb.rulenode.latest-telemetry-mapping\', \'tb.rulenode.attributes-mapping\') | translate"\n    [keyText]="selectTranslation(\'tb.rulenode.source-telemetry\', \'tb.rulenode.source-attribute\') | translate"\n    [keyRequiredText]="selectTranslation(\'tb.rulenode.source-telemetry-required\', \'tb.rulenode.source-attribute-required\') | translate"\n    [valText]="\'tb.rulenode.target-key\' | translate"\n    [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n    [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n    popupHelpLink="rulenode/tenant_attributes_node_fields_templatization">\n  </tb-kv-map-config>\n  <tb-msg-metadata-chip formControlName="fetchTo"\n                        [labelText]="tenantAttributesConfigForm.get(\'dataToFetch\').value === DataToFetch.LATEST_TELEMETRY ?\n                        (\'tb.rulenode.add-mapped-latest-telemetry-to\' | translate) : (\'tb.rulenode.add-mapped-attribute-to\' | translate)">\n  </tb-msg-metadata-chip>\n</section>\n',styles:[":host .fetch-to-data-toggle{max-width:420px;width:100%}\n"],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:W.DefaultLayoutAlignDirective,selector:"  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]",inputs:["fxLayoutAlign","fxLayoutAlign.xs","fxLayoutAlign.sm","fxLayoutAlign.md","fxLayoutAlign.lg","fxLayoutAlign.xl","fxLayoutAlign.lt-sm","fxLayoutAlign.lt-md","fxLayoutAlign.lt-lg","fxLayoutAlign.lt-xl","fxLayoutAlign.gt-xs","fxLayoutAlign.gt-sm","fxLayoutAlign.gt-md","fxLayoutAlign.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:Pn,selector:"tb-kv-map-config",inputs:["disabled","uniqueKeyValuePairValidator","labelText","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","popupHelpLink","required"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:or,decorators:[{type:n,args:[{selector:"tb-enrichment-node-tenant-attributes-config",template:'<section [formGroup]="tenantAttributesConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title" translate>tb.rulenode.mapping-of-tenant</div>\n  <div fxFlex fxLayoutAlign="center center">\n    <div class="fetch-to-data-toggle">\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">\n        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">\n          {{ data.name }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n  </div>\n  <tb-kv-map-config\n    required\n    formControlName="dataMapping"\n    [requiredText]="\'tb.rulenode.attr-mapping-required\' | translate"\n    [labelText]="selectTranslation(\'tb.rulenode.latest-telemetry-mapping\', \'tb.rulenode.attributes-mapping\') | translate"\n    [keyText]="selectTranslation(\'tb.rulenode.source-telemetry\', \'tb.rulenode.source-attribute\') | translate"\n    [keyRequiredText]="selectTranslation(\'tb.rulenode.source-telemetry-required\', \'tb.rulenode.source-attribute-required\') | translate"\n    [valText]="\'tb.rulenode.target-key\' | translate"\n    [valRequiredText]="\'tb.rulenode.target-key-required\' | translate"\n    [hintText]="\'tb.rulenode.kv-map-pattern-hint\'"\n    popupHelpLink="rulenode/tenant_attributes_node_fields_templatization">\n  </tb-kv-map-config>\n  <tb-msg-metadata-chip formControlName="fetchTo"\n                        [labelText]="tenantAttributesConfigForm.get(\'dataToFetch\').value === DataToFetch.LATEST_TELEMETRY ?\n                        (\'tb.rulenode.add-mapped-latest-telemetry-to\' | translate) : (\'tb.rulenode.add-mapped-attribute-to\' | translate)">\n  </tb-msg-metadata-chip>\n</section>\n',styles:[":host .fetch-to-data-toggle{max-width:420px;width:100%}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class ar extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.fetchDeviceCredentialsConfigForm}prepareInputConfig(e){return{fetchTo:fe(e?.fetchTo)?e.fetchTo:ln.METADATA}}onConfigurationSet(e){this.fetchDeviceCredentialsConfigForm=this.fb.group({fetchTo:[e.fetchTo,[]]})}}e("FetchDeviceCredentialsConfigComponent",ar),ar.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ar,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),ar.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:ar,selector:"./tb-enrichment-node-fetch-device-credentials-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="fetchDeviceCredentialsConfigForm">\n  <tb-msg-metadata-chip\n    [labelText]="\'tb.rulenode.fetch-credentials-to\' | translate"\n    formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n</section>\n',dependencies:[{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ar,decorators:[{type:n,args:[{selector:"./tb-enrichment-node-fetch-device-credentials-config",template:'<section [formGroup]="fetchDeviceCredentialsConfigForm">\n  <tb-msg-metadata-chip\n    [labelText]="\'tb.rulenode.fetch-credentials-to\' | translate"\n    formControlName="fetchTo">\n  </tb-msg-metadata-chip>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class ir{}e("RulenodeCoreConfigEnrichmentModule",ir),ir.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ir,deps:[],target:t.ɵɵFactoryTarget.NgModule}),ir.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:ir,declarations:[Wn,Xn,Zn,tr,nr,er,rr,or,Yn,ar],imports:[$,M,Jn],exports:[Wn,Xn,Zn,tr,nr,er,rr,or,Yn,ar]}),ir.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ir,imports:[$,M,Jn]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ir,decorators:[{type:d,args:[{declarations:[Wn,Xn,Zn,tr,nr,er,rr,or,Yn,ar],imports:[$,M,Jn],exports:[Wn,Xn,Zn,tr,nr,er,rr,or,Yn,ar]}]}]});class lr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.allAzureIotHubCredentialsTypes=Wt,this.azureIotHubCredentialsTypeTranslationsMap=Zt}configForm(){return this.azureIotHubConfigForm}onConfigurationSet(e){this.azureIotHubConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[O.required]],host:[e?e.host:null,[O.required]],port:[e?e.port:null,[O.required,O.min(1),O.max(65535)]],connectTimeoutSec:[e?e.connectTimeoutSec:null,[O.required,O.min(1),O.max(200)]],clientId:[e?e.clientId:null,[O.required]],cleanSession:[!!e&&e.cleanSession,[]],ssl:[!!e&&e.ssl,[]],credentials:this.fb.group({type:[e&&e.credentials?e.credentials.type:null,[O.required]],sasKey:[e&&e.credentials?e.credentials.sasKey:null,[]],caCert:[e&&e.credentials?e.credentials.caCert:null,[]],caCertFileName:[e&&e.credentials?e.credentials.caCertFileName:null,[]],privateKey:[e&&e.credentials?e.credentials.privateKey:null,[]],privateKeyFileName:[e&&e.credentials?e.credentials.privateKeyFileName:null,[]],cert:[e&&e.credentials?e.credentials.cert:null,[]],certFileName:[e&&e.credentials?e.credentials.certFileName:null,[]],password:[e&&e.credentials?e.credentials.password:null,[]]})})}prepareOutputConfig(e){const t=e.credentials.type;return"sas"===t&&(e.credentials={type:t,sasKey:e.credentials.sasKey,caCert:e.credentials.caCert,caCertFileName:e.credentials.caCertFileName}),e}validatorTriggers(){return["credentials.type"]}updateValidators(e){const t=this.azureIotHubConfigForm.get("credentials"),n=t.get("type").value;switch(e&&t.reset({type:n},{emitEvent:!1}),t.get("sasKey").setValidators([]),t.get("privateKey").setValidators([]),t.get("privateKeyFileName").setValidators([]),t.get("cert").setValidators([]),t.get("certFileName").setValidators([]),n){case"sas":t.get("sasKey").setValidators([O.required]);break;case"cert.PEM":t.get("privateKey").setValidators([O.required]),t.get("privateKeyFileName").setValidators([O.required]),t.get("cert").setValidators([O.required]),t.get("certFileName").setValidators([O.required])}t.get("sasKey").updateValueAndValidity({emitEvent:e}),t.get("privateKey").updateValueAndValidity({emitEvent:e}),t.get("privateKeyFileName").updateValueAndValidity({emitEvent:e}),t.get("cert").updateValueAndValidity({emitEvent:e}),t.get("certFileName").updateValueAndValidity({emitEvent:e})}}e("AzureIotHubConfigComponent",lr),lr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:lr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),lr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:lr,selector:"tb-external-node-azure-iot-hub-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="azureIotHubConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="azureIotHubConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.hostname</mat-label>\n    <input required matInput formControlName="host">\n    <mat-error *ngIf="azureIotHubConfigForm.get(\'host\').hasError(\'required\')">\n      {{ \'tb.rulenode.hostname-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.device-id</mat-label>\n    <input required matInput formControlName="clientId" autocomplete="new-clientId">\n    <mat-error *ngIf="azureIotHubConfigForm.get(\'clientId\').hasError(\'required\')">\n      {{ \'tb.rulenode.device-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-accordion>\n    <mat-expansion-panel class="tb-mqtt-credentials-panel-group">\n      <mat-expansion-panel-header>\n        <mat-panel-title class="tb-required" translate>tb.rulenode.credentials</mat-panel-title>\n        <mat-panel-description>\n          {{ azureIotHubCredentialsTypeTranslationsMap.get(azureIotHubConfigForm.get(\'credentials.type\').value) | translate }}\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      <section formGroupName="credentials" fxLayout="column">\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.credentials-type</mat-label>\n          <mat-select formControlName="type" required>\n            <mat-option *ngFor="let credentialsType of allAzureIotHubCredentialsTypes" [value]="credentialsType">\n              {{ azureIotHubCredentialsTypeTranslationsMap.get(credentialsType) | translate }}\n            </mat-option>\n          </mat-select>\n          <mat-error *ngIf="azureIotHubConfigForm.get(\'credentials.type\').hasError(\'required\')">\n            {{ \'tb.rulenode.credentials-type-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <section fxLayout="column" [ngSwitch]="azureIotHubConfigForm.get(\'credentials.type\').value">\n          <ng-template ngSwitchCase="anonymous">\n          </ng-template>\n          <ng-template ngSwitchCase="sas">\n            <mat-form-field class="mat-block">\n              <mat-label translate>tb.rulenode.sas-key</mat-label>\n              <input type="password" required matInput formControlName="sasKey" autocomplete="new-password">\n              <tb-toggle-password matSuffix></tb-toggle-password>\n              <mat-error *ngIf="azureIotHubConfigForm.get(\'credentials.sasKey\').hasError(\'required\')">\n                {{ \'tb.rulenode.sas-key-required\' | translate }}\n              </mat-error>\n            </mat-form-field>\n            <tb-file-input formControlName="caCert"\n                           inputId="caCertSelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.caCertFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.caCertFileName\').setValue($event)"\n                           label="{{\'tb.rulenode.azure-ca-cert\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n          </ng-template>\n          <ng-template ngSwitchCase="cert.PEM">\n            <tb-file-input formControlName="caCert"\n                           inputId="caCertSelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.caCertFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.caCertFileName\').setValue($event)"\n                           label="{{\'tb.rulenode.azure-ca-cert\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n            <tb-file-input formControlName="cert"\n                           inputId="CertSelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.certFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.certFileName\').setValue($event)"\n                           required\n                           requiredAsError\n                           label="{{\'tb.rulenode.cert\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n            <tb-file-input style="padding-bottom: 8px;"\n                           formControlName="privateKey"\n                           inputId="privateKeySelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.privateKeyFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.privateKeyFileName\').setValue($event)"\n                           required\n                           requiredAsError\n                           label="{{\'tb.rulenode.private-key\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n            <mat-form-field class="mat-block">\n              <mat-label translate>tb.rulenode.private-key-password</mat-label>\n              <input type="password" matInput formControlName="password" autocomplete="new-password">\n              <tb-toggle-password matSuffix></tb-toggle-password>\n            </mat-form-field>\n          </ng-template>\n        </section>\n      </section>\n    </mat-expansion-panel>\n  </mat-accordion>\n</section>\n',styles:[":host .tb-mqtt-credentials-panel-group{margin:0 6px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:U.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{kind:"directive",type:U.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:oe.MatAccordion,selector:"mat-accordion",inputs:["multi","hideToggle","displayMode","togglePosition"],exportAs:["matAccordion"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:oe.MatExpansionPanelDescription,selector:"mat-panel-description"},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:R.FormGroupName,selector:"[formGroupName]",inputs:["formGroupName"]},{kind:"component",type:Ze.FileInputComponent,selector:"tb-file-input",inputs:["label","hint","accept","noFileText","inputId","allowedExtensions","dropLabel","maxSizeByte","contentConvertFunction","required","requiredAsError","disabled","existingFileName","readAsBinary","workFromFileObj","multipleFile"],outputs:["fileNameChanged"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Xe.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:lr,decorators:[{type:n,args:[{selector:"tb-external-node-azure-iot-hub-config",template:'<section [formGroup]="azureIotHubConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="azureIotHubConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.hostname</mat-label>\n    <input required matInput formControlName="host">\n    <mat-error *ngIf="azureIotHubConfigForm.get(\'host\').hasError(\'required\')">\n      {{ \'tb.rulenode.hostname-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.device-id</mat-label>\n    <input required matInput formControlName="clientId" autocomplete="new-clientId">\n    <mat-error *ngIf="azureIotHubConfigForm.get(\'clientId\').hasError(\'required\')">\n      {{ \'tb.rulenode.device-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-accordion>\n    <mat-expansion-panel class="tb-mqtt-credentials-panel-group">\n      <mat-expansion-panel-header>\n        <mat-panel-title class="tb-required" translate>tb.rulenode.credentials</mat-panel-title>\n        <mat-panel-description>\n          {{ azureIotHubCredentialsTypeTranslationsMap.get(azureIotHubConfigForm.get(\'credentials.type\').value) | translate }}\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      <section formGroupName="credentials" fxLayout="column">\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.credentials-type</mat-label>\n          <mat-select formControlName="type" required>\n            <mat-option *ngFor="let credentialsType of allAzureIotHubCredentialsTypes" [value]="credentialsType">\n              {{ azureIotHubCredentialsTypeTranslationsMap.get(credentialsType) | translate }}\n            </mat-option>\n          </mat-select>\n          <mat-error *ngIf="azureIotHubConfigForm.get(\'credentials.type\').hasError(\'required\')">\n            {{ \'tb.rulenode.credentials-type-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <section fxLayout="column" [ngSwitch]="azureIotHubConfigForm.get(\'credentials.type\').value">\n          <ng-template ngSwitchCase="anonymous">\n          </ng-template>\n          <ng-template ngSwitchCase="sas">\n            <mat-form-field class="mat-block">\n              <mat-label translate>tb.rulenode.sas-key</mat-label>\n              <input type="password" required matInput formControlName="sasKey" autocomplete="new-password">\n              <tb-toggle-password matSuffix></tb-toggle-password>\n              <mat-error *ngIf="azureIotHubConfigForm.get(\'credentials.sasKey\').hasError(\'required\')">\n                {{ \'tb.rulenode.sas-key-required\' | translate }}\n              </mat-error>\n            </mat-form-field>\n            <tb-file-input formControlName="caCert"\n                           inputId="caCertSelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.caCertFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.caCertFileName\').setValue($event)"\n                           label="{{\'tb.rulenode.azure-ca-cert\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n          </ng-template>\n          <ng-template ngSwitchCase="cert.PEM">\n            <tb-file-input formControlName="caCert"\n                           inputId="caCertSelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.caCertFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.caCertFileName\').setValue($event)"\n                           label="{{\'tb.rulenode.azure-ca-cert\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n            <tb-file-input formControlName="cert"\n                           inputId="CertSelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.certFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.certFileName\').setValue($event)"\n                           required\n                           requiredAsError\n                           label="{{\'tb.rulenode.cert\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n            <tb-file-input style="padding-bottom: 8px;"\n                           formControlName="privateKey"\n                           inputId="privateKeySelect"\n                           [existingFileName]="azureIotHubConfigForm.get(\'credentials.privateKeyFileName\').value"\n                           (fileNameChanged)="azureIotHubConfigForm.get(\'credentials.privateKeyFileName\').setValue($event)"\n                           required\n                           requiredAsError\n                           label="{{\'tb.rulenode.private-key\' | translate}}"\n                           noFileText="tb.rulenode.no-file"\n                           dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n            </tb-file-input>\n            <mat-form-field class="mat-block">\n              <mat-label translate>tb.rulenode.private-key-password</mat-label>\n              <input type="password" matInput formControlName="password" autocomplete="new-password">\n              <tb-toggle-password matSuffix></tb-toggle-password>\n            </mat-form-field>\n          </ng-template>\n        </section>\n      </section>\n    </mat-expansion-panel>\n  </mat-accordion>\n</section>\n',styles:[":host .tb-mqtt-credentials-panel-group{margin:0 6px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class sr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.ackValues=["all","-1","0","1"],this.ToByteStandartCharsetTypesValues=en,this.ToByteStandartCharsetTypeTranslationMap=tn}configForm(){return this.kafkaConfigForm}onConfigurationSet(e){this.kafkaConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[O.required]],keyPattern:[e?e.keyPattern:null],bootstrapServers:[e?e.bootstrapServers:null,[O.required]],retries:[e?e.retries:null,[O.min(0)]],batchSize:[e?e.batchSize:null,[O.min(0)]],linger:[e?e.linger:null,[O.min(0)]],bufferMemory:[e?e.bufferMemory:null,[O.min(0)]],acks:[e?e.acks:null,[O.required]],keySerializer:[e?e.keySerializer:null,[O.required]],valueSerializer:[e?e.valueSerializer:null,[O.required]],otherProperties:[e?e.otherProperties:null,[]],addMetadataKeyValuesAsKafkaHeaders:[!!e&&e.addMetadataKeyValuesAsKafkaHeaders,[]],kafkaHeadersCharset:[e?e.kafkaHeadersCharset:null,[]]})}validatorTriggers(){return["addMetadataKeyValuesAsKafkaHeaders"]}updateValidators(e){this.kafkaConfigForm.get("addMetadataKeyValuesAsKafkaHeaders").value?this.kafkaConfigForm.get("kafkaHeadersCharset").setValidators([O.required]):this.kafkaConfigForm.get("kafkaHeadersCharset").setValidators([]),this.kafkaConfigForm.get("kafkaHeadersCharset").updateValueAndValidity({emitEvent:e})}}e("KafkaConfigComponent",sr),sr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:sr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),sr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:sr,selector:"tb-external-node-kafka-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="kafkaConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="kafkaConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.key-pattern</mat-label>\n    <input matInput formControlName="keyPattern">\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <div class="tb-hint" translate>tb.rulenode.key-pattern-hint</div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.bootstrap-servers</mat-label>\n    <input required matInput formControlName="bootstrapServers">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bootstrapServers\').hasError(\'required\')">\n      {{ \'tb.rulenode.bootstrap-servers-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.retries</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="retries">\n    <mat-error *ngIf="kafkaConfigForm.get(\'retries\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-retries-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.batch-size-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="batchSize">\n    <mat-error *ngIf="kafkaConfigForm.get(\'batchSize\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-batch-size-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.linger-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="linger">\n    <mat-error *ngIf="kafkaConfigForm.get(\'linger\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-linger-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.buffer-memory-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="bufferMemory">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bufferMemory\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-buffer-memory-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.acks</mat-label>\n    <mat-select formControlName="acks" required>\n      <mat-option *ngFor="let ackValue of ackValues" [value]="ackValue">\n        {{ ackValue }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.key-serializer</mat-label>\n    <input required matInput formControlName="keySerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'keySerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.key-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.value-serializer</mat-label>\n    <input required matInput formControlName="valueSerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'valueSerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.value-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.other-properties</label>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="otherProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n  <mat-checkbox fxFlex formControlName="addMetadataKeyValuesAsKafkaHeaders">\n    {{ \'tb.rulenode.add-metadata-key-values-as-kafka-headers\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.add-metadata-key-values-as-kafka-headers-hint</div>\n  <mat-form-field fxFlex class="mat-block" *ngIf="kafkaConfigForm.get(\'addMetadataKeyValuesAsKafkaHeaders\').value">\n    <mat-label translate>tb.rulenode.charset-encoding</mat-label>\n    <mat-select formControlName="kafkaHeadersCharset" required>\n      <mat-option *ngFor="let charset of ToByteStandartCharsetTypesValues" [value]="charset">\n        {{ ToByteStandartCharsetTypeTranslationMap.get(charset) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Sn,selector:"tb-kv-map-config-old",inputs:["disabled","uniqueKeyValuePairValidator","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","required"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:sr,decorators:[{type:n,args:[{selector:"tb-external-node-kafka-config",template:'<section [formGroup]="kafkaConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="kafkaConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.key-pattern</mat-label>\n    <input matInput formControlName="keyPattern">\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <div class="tb-hint" translate>tb.rulenode.key-pattern-hint</div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.bootstrap-servers</mat-label>\n    <input required matInput formControlName="bootstrapServers">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bootstrapServers\').hasError(\'required\')">\n      {{ \'tb.rulenode.bootstrap-servers-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.retries</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="retries">\n    <mat-error *ngIf="kafkaConfigForm.get(\'retries\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-retries-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.batch-size-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="batchSize">\n    <mat-error *ngIf="kafkaConfigForm.get(\'batchSize\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-batch-size-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.linger-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="linger">\n    <mat-error *ngIf="kafkaConfigForm.get(\'linger\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-linger-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.buffer-memory-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="bufferMemory">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bufferMemory\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-buffer-memory-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.acks</mat-label>\n    <mat-select formControlName="acks" required>\n      <mat-option *ngFor="let ackValue of ackValues" [value]="ackValue">\n        {{ ackValue }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.key-serializer</mat-label>\n    <input required matInput formControlName="keySerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'keySerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.key-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.value-serializer</mat-label>\n    <input required matInput formControlName="valueSerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'valueSerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.value-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.other-properties</label>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="otherProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n  <mat-checkbox fxFlex formControlName="addMetadataKeyValuesAsKafkaHeaders">\n    {{ \'tb.rulenode.add-metadata-key-values-as-kafka-headers\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.add-metadata-key-values-as-kafka-headers-hint</div>\n  <mat-form-field fxFlex class="mat-block" *ngIf="kafkaConfigForm.get(\'addMetadataKeyValuesAsKafkaHeaders\').value">\n    <mat-label translate>tb.rulenode.charset-encoding</mat-label>\n    <mat-select formControlName="kafkaHeadersCharset" required>\n      <mat-option *ngFor="let charset of ToByteStandartCharsetTypesValues" [value]="charset">\n        {{ ToByteStandartCharsetTypeTranslationMap.get(charset) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class mr extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.mqttConfigForm}onConfigurationSet(e){this.mqttConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[O.required]],host:[e?e.host:null,[O.required]],port:[e?e.port:null,[O.required,O.min(1),O.max(65535)]],connectTimeoutSec:[e?e.connectTimeoutSec:null,[O.required,O.min(1),O.max(200)]],clientId:[e?e.clientId:null,[]],appendClientIdSuffix:[{value:!!e&&e.appendClientIdSuffix,disabled:!(e&&he(e.clientId))},[]],parseToPlainText:[!!e&&e.parseToPlainText,[]],cleanSession:[!!e&&e.cleanSession,[]],retainedMessage:[!!e&&e.retainedMessage,[]],ssl:[!!e&&e.ssl,[]],credentials:[e?e.credentials:null,[]]})}updateValidators(e){he(this.mqttConfigForm.get("clientId").value)?this.mqttConfigForm.get("appendClientIdSuffix").enable({emitEvent:!1}):this.mqttConfigForm.get("appendClientIdSuffix").disable({emitEvent:!1}),this.mqttConfigForm.get("appendClientIdSuffix").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["clientId"]}}e("MqttConfigComponent",mr),mr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:mr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),mr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:mr,selector:"tb-external-node-mqtt-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="mqttConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="mqttConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <div fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="mqttConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.connect-timeout</mat-label>\n      <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'required\')">\n        {{ \'tb.rulenode.connect-timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'min\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'max\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.client-id</mat-label>\n    <input matInput formControlName="clientId">\n    <mat-hint>{{\'tb.rulenode.client-id-hint\' | translate}}</mat-hint>\n  </mat-form-field>\n  <mat-checkbox formControlName="appendClientIdSuffix">\n    {{ \'tb.rulenode.append-client-id-suffix\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint">{{ "tb.rulenode.client-id-suffix-hint" | translate }}</div>\n  <mat-checkbox formControlName="parseToPlainText">\n    {{ \'tb.rulenode.parse-to-plain-text\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint">{{ "tb.rulenode.parse-to-plain-text-hint" | translate }}</div>\n  <mat-checkbox formControlName="cleanSession">\n    {{ \'tb.rulenode.clean-session\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="retainedMessage">\n    {{ "tb.rulenode.retained-message" | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="ssl">\n    {{ \'tb.rulenode.enable-ssl\' | translate }}\n  </mat-checkbox>\n  <tb-credentials-config formControlName="credentials" [passwordFieldRequired]="false"></tb-credentials-config>\n</section>\n',styles:[":host .tb-mqtt-credentials-panel-group{margin:0 6px}\n"],dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Bn,selector:"tb-credentials-config",inputs:["required","disableCertPemCredentials","passwordFieldRequired"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:mr,decorators:[{type:n,args:[{selector:"tb-external-node-mqtt-config",template:'<section [formGroup]="mqttConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="mqttConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <div fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="mqttConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.connect-timeout</mat-label>\n      <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'required\')">\n        {{ \'tb.rulenode.connect-timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'min\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'max\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.client-id</mat-label>\n    <input matInput formControlName="clientId">\n    <mat-hint>{{\'tb.rulenode.client-id-hint\' | translate}}</mat-hint>\n  </mat-form-field>\n  <mat-checkbox formControlName="appendClientIdSuffix">\n    {{ \'tb.rulenode.append-client-id-suffix\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint">{{ "tb.rulenode.client-id-suffix-hint" | translate }}</div>\n  <mat-checkbox formControlName="parseToPlainText">\n    {{ \'tb.rulenode.parse-to-plain-text\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint">{{ "tb.rulenode.parse-to-plain-text-hint" | translate }}</div>\n  <mat-checkbox formControlName="cleanSession">\n    {{ \'tb.rulenode.clean-session\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="retainedMessage">\n    {{ "tb.rulenode.retained-message" | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="ssl">\n    {{ \'tb.rulenode.enable-ssl\' | translate }}\n  </mat-checkbox>\n  <tb-credentials-config formControlName="credentials" [passwordFieldRequired]="false"></tb-credentials-config>\n</section>\n',styles:[":host .tb-mqtt-credentials-panel-group{margin:0 6px}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class pr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.notificationType=G,this.entityType=C}configForm(){return this.notificationConfigForm}onConfigurationSet(e){this.notificationConfigForm=this.fb.group({templateId:[e?e.templateId:null,[O.required]],targets:[e?e.targets:[],[O.required]]})}}e("NotificationConfigComponent",pr),pr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:pr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),pr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:pr,selector:"tb-external-node-notification-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="notificationConfigForm" fxLayout="column">\n  <tb-template-autocomplete\n    required\n    allowCreate\n    formControlName="templateId"\n    [notificationTypes]="notificationType.RULE_NODE">\n  </tb-template-autocomplete>\n  <tb-entity-list\n    required\n    formControlName="targets"\n    labelText="{{ \'notification.recipients\' | translate }}"\n    placeholderText="{{ \'notification.recipient\' | translate }}"\n    requiredText="{{ \'notification.recipients-required\' | translate }}"\n    entityType="{{ entityType.NOTIFICATION_TARGET }}"\n    subType="{{ notificationType.RULE_NODE }}">\n  </tb-entity-list>\n</section>\n',dependencies:[{kind:"component",type:tt.EntityListComponent,selector:"tb-entity-list",inputs:["entityType","subType","labelText","placeholderText","requiredText","required","disabled","subscriptSizing","hint","syncIdsWithDB"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:nt.TemplateAutocompleteComponent,selector:"tb-template-autocomplete",inputs:["required","allowCreate","allowEdit","disabled","notificationTypes"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:pr,decorators:[{type:n,args:[{selector:"tb-external-node-notification-config",template:'<section [formGroup]="notificationConfigForm" fxLayout="column">\n  <tb-template-autocomplete\n    required\n    allowCreate\n    formControlName="templateId"\n    [notificationTypes]="notificationType.RULE_NODE">\n  </tb-template-autocomplete>\n  <tb-entity-list\n    required\n    formControlName="targets"\n    labelText="{{ \'notification.recipients\' | translate }}"\n    placeholderText="{{ \'notification.recipient\' | translate }}"\n    requiredText="{{ \'notification.recipients-required\' | translate }}"\n    entityType="{{ entityType.NOTIFICATION_TARGET }}"\n    subType="{{ notificationType.RULE_NODE }}">\n  </tb-entity-list>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class dr extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.pubSubConfigForm}onConfigurationSet(e){this.pubSubConfigForm=this.fb.group({projectId:[e?e.projectId:null,[O.required]],topicName:[e?e.topicName:null,[O.required]],serviceAccountKey:[e?e.serviceAccountKey:null,[O.required]],serviceAccountKeyFileName:[e?e.serviceAccountKeyFileName:null,[O.required]],messageAttributes:[e?e.messageAttributes:null,[]]})}}e("PubSubConfigComponent",dr),dr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:dr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),dr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:dr,selector:"tb-external-node-pub-sub-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="pubSubConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.gcp-project-id</mat-label>\n    <input required matInput formControlName="projectId">\n    <mat-error *ngIf="pubSubConfigForm.get(\'projectId\').hasError(\'required\')">\n      {{ \'tb.rulenode.gcp-project-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.pubsub-topic-name</mat-label>\n    <input required matInput formControlName="topicName">\n    <mat-error *ngIf="pubSubConfigForm.get(\'topicName\').hasError(\'required\')">\n      {{ \'tb.rulenode.pubsub-topic-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <tb-file-input style="padding-bottom: 24px;"\n                 formControlName="serviceAccountKey"\n                 [existingFileName]="pubSubConfigForm.get(\'serviceAccountKeyFileName\').value"\n                 (fileNameChanged)="pubSubConfigForm.get(\'serviceAccountKeyFileName\').setValue($event)"\n                 required\n                 requiredAsError\n                 label="{{\'tb.rulenode.gcp-service-account-key\' | translate}}"\n                 noFileText="tb.rulenode.no-file"\n                 dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n  </tb-file-input>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" [innerHTML]="\'tb.rulenode.message-attributes-hint\' | translate | safe: \'html\'"></div>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ze.FileInputComponent,selector:"tb-file-input",inputs:["label","hint","accept","noFileText","inputId","allowedExtensions","dropLabel","maxSizeByte","contentConvertFunction","required","requiredAsError","disabled","existingFileName","readAsBinary","workFromFileObj","multipleFile"],outputs:["fileNameChanged"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Sn,selector:"tb-kv-map-config-old",inputs:["disabled","uniqueKeyValuePairValidator","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","required"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:dr,decorators:[{type:n,args:[{selector:"tb-external-node-pub-sub-config",template:'<section [formGroup]="pubSubConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.gcp-project-id</mat-label>\n    <input required matInput formControlName="projectId">\n    <mat-error *ngIf="pubSubConfigForm.get(\'projectId\').hasError(\'required\')">\n      {{ \'tb.rulenode.gcp-project-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.pubsub-topic-name</mat-label>\n    <input required matInput formControlName="topicName">\n    <mat-error *ngIf="pubSubConfigForm.get(\'topicName\').hasError(\'required\')">\n      {{ \'tb.rulenode.pubsub-topic-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <tb-file-input style="padding-bottom: 24px;"\n                 formControlName="serviceAccountKey"\n                 [existingFileName]="pubSubConfigForm.get(\'serviceAccountKeyFileName\').value"\n                 (fileNameChanged)="pubSubConfigForm.get(\'serviceAccountKeyFileName\').setValue($event)"\n                 required\n                 requiredAsError\n                 label="{{\'tb.rulenode.gcp-service-account-key\' | translate}}"\n                 noFileText="tb.rulenode.no-file"\n                 dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n  </tb-file-input>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" [innerHTML]="\'tb.rulenode.message-attributes-hint\' | translate | safe: \'html\'"></div>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class ur extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.messageProperties=[null,"BASIC","TEXT_PLAIN","MINIMAL_BASIC","MINIMAL_PERSISTENT_BASIC","PERSISTENT_BASIC","PERSISTENT_TEXT_PLAIN"]}configForm(){return this.rabbitMqConfigForm}onConfigurationSet(e){this.rabbitMqConfigForm=this.fb.group({exchangeNamePattern:[e?e.exchangeNamePattern:null,[]],routingKeyPattern:[e?e.routingKeyPattern:null,[]],messageProperties:[e?e.messageProperties:null,[]],host:[e?e.host:null,[O.required]],port:[e?e.port:null,[O.required,O.min(1),O.max(65535)]],virtualHost:[e?e.virtualHost:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]],automaticRecoveryEnabled:[!!e&&e.automaticRecoveryEnabled,[]],connectionTimeout:[e?e.connectionTimeout:null,[O.min(0)]],handshakeTimeout:[e?e.handshakeTimeout:null,[O.min(0)]],clientProperties:[e?e.clientProperties:null,[]]})}}e("RabbitMqConfigComponent",ur),ur.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ur,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),ur.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:ur,selector:"tb-external-node-rabbit-mq-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="rabbitMqConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.exchange-name-pattern</mat-label>\n    <input matInput formControlName="exchangeNamePattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.routing-key-pattern</mat-label>\n    <input matInput formControlName="routingKeyPattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.message-properties</mat-label>\n    <mat-select formControlName="messageProperties">\n      <mat-option *ngFor="let property of messageProperties" [value]="property">\n        {{ property }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.virtual-host</mat-label>\n    <input matInput formControlName="virtualHost">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.username</mat-label>\n    <input matInput formControlName="username">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.password</mat-label>\n    <input type="password" matInput formControlName="password">\n    <tb-toggle-password matSuffix></tb-toggle-password>\n  </mat-form-field>\n  <mat-checkbox formControlName="automaticRecoveryEnabled">\n    {{ \'tb.rulenode.automatic-recovery\' | translate }}\n  </mat-checkbox>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.connection-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="connectionTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'connectionTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-connection-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.handshake-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="handshakeTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'handshakeTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-handshake-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.client-properties</label>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="clientProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Xe.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"component",type:Sn,selector:"tb-kv-map-config-old",inputs:["disabled","uniqueKeyValuePairValidator","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","required"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:ur,decorators:[{type:n,args:[{selector:"tb-external-node-rabbit-mq-config",template:'<section [formGroup]="rabbitMqConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.exchange-name-pattern</mat-label>\n    <input matInput formControlName="exchangeNamePattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.routing-key-pattern</mat-label>\n    <input matInput formControlName="routingKeyPattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.message-properties</mat-label>\n    <mat-select formControlName="messageProperties">\n      <mat-option *ngFor="let property of messageProperties" [value]="property">\n        {{ property }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.virtual-host</mat-label>\n    <input matInput formControlName="virtualHost">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.username</mat-label>\n    <input matInput formControlName="username">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.password</mat-label>\n    <input type="password" matInput formControlName="password">\n    <tb-toggle-password matSuffix></tb-toggle-password>\n  </mat-form-field>\n  <mat-checkbox formControlName="automaticRecoveryEnabled">\n    {{ \'tb.rulenode.automatic-recovery\' | translate }}\n  </mat-checkbox>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.connection-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="connectionTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'connectionTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-connection-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.handshake-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="handshakeTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'handshakeTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-handshake-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.client-properties</label>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="clientProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class cr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.proxySchemes=["http","https"],this.httpRequestTypes=Object.keys(Xt)}configForm(){return this.restApiCallConfigForm}onConfigurationSet(e){this.restApiCallConfigForm=this.fb.group({restEndpointUrlPattern:[e?e.restEndpointUrlPattern:null,[O.required]],requestMethod:[e?e.requestMethod:null,[O.required]],useSimpleClientHttpFactory:[!!e&&e.useSimpleClientHttpFactory,[]],parseToPlainText:[!!e&&e.parseToPlainText,[]],ignoreRequestBody:[!!e&&e.ignoreRequestBody,[]],enableProxy:[!!e&&e.enableProxy,[]],useSystemProxyProperties:[!!e&&e.enableProxy,[]],proxyScheme:[e?e.proxyHost:null,[]],proxyHost:[e?e.proxyHost:null,[]],proxyPort:[e?e.proxyPort:null,[]],proxyUser:[e?e.proxyUser:null,[]],proxyPassword:[e?e.proxyPassword:null,[]],readTimeoutMs:[e?e.readTimeoutMs:null,[]],maxParallelRequestsCount:[e?e.maxParallelRequestsCount:null,[O.min(0)]],headers:[e?e.headers:null,[]],credentials:[e?e.credentials:null,[]],maxInMemoryBufferSizeInKb:[e?e.maxInMemoryBufferSizeInKb:null,[O.min(1)]]})}validatorTriggers(){return["useSimpleClientHttpFactory","enableProxy","useSystemProxyProperties"]}updateValidators(e){const t=this.restApiCallConfigForm.get("useSimpleClientHttpFactory").value,n=this.restApiCallConfigForm.get("enableProxy").value,r=this.restApiCallConfigForm.get("useSystemProxyProperties").value;n&&!r?(this.restApiCallConfigForm.get("proxyHost").setValidators(n?[O.required]:[]),this.restApiCallConfigForm.get("proxyPort").setValidators(n?[O.required,O.min(1),O.max(65535)]:[])):(this.restApiCallConfigForm.get("proxyHost").setValidators([]),this.restApiCallConfigForm.get("proxyPort").setValidators([]),t?this.restApiCallConfigForm.get("readTimeoutMs").setValidators([]):this.restApiCallConfigForm.get("readTimeoutMs").setValidators([O.min(0)])),this.restApiCallConfigForm.get("readTimeoutMs").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("proxyHost").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("proxyPort").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("credentials").updateValueAndValidity({emitEvent:e})}}e("RestApiCallConfigComponent",cr),cr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:cr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),cr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:cr,selector:"tb-external-node-rest-api-call-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="restApiCallConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.endpoint-url-pattern</mat-label>\n    <input required matInput formControlName="restEndpointUrlPattern">\n    <mat-error *ngIf="restApiCallConfigForm.get(\'restEndpointUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.endpoint-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.request-method</mat-label>\n    <mat-select formControlName="requestMethod">\n      <mat-option *ngFor="let requestType of httpRequestTypes" [value]="requestType">\n        {{ requestType }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-checkbox formControlName="enableProxy">\n    {{ \'tb.rulenode.enable-proxy\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox *ngIf="!restApiCallConfigForm.get(\'enableProxy\').value" formControlName="useSimpleClientHttpFactory">\n    {{ \'tb.rulenode.use-simple-client-http-factory\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="parseToPlainText">\n    {{ \'tb.rulenode.parse-to-plain-text\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 5px;" translate>tb.rulenode.parse-to-plain-text-hint</div>\n  <mat-checkbox formControlName="ignoreRequestBody">\n    {{ \'tb.rulenode.ignore-request-body\' | translate }}\n  </mat-checkbox>\n  <div *ngIf="restApiCallConfigForm.get(\'enableProxy\').value">\n    <mat-checkbox formControlName="useSystemProxyProperties">\n      {{ \'tb.rulenode.use-system-proxy-properties\' | translate }}\n    </mat-checkbox>\n    <div *ngIf="!restApiCallConfigForm.get(\'useSystemProxyProperties\').value">\n      <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="10">\n          <mat-label translate>tb.rulenode.proxy-scheme</mat-label>\n          <mat-select formControlName="proxyScheme">\n            <mat-option *ngFor="let proxyScheme of proxySchemes" [value]="proxyScheme">\n              {{ proxyScheme }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class="md-block" fxFlex="100" fxFlex.gt-sm="50">\n          <mat-label translate>tb.rulenode.proxy-host</mat-label>\n          <input matInput required formControlName="proxyHost">\n          <mat-error *ngIf="restApiCallConfigForm.get(\'proxyHost\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-host-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">\n          <mat-label translate>tb.rulenode.proxy-port</mat-label>\n          <input matInput required formControlName="proxyPort" type="number" step="1">\n          <mat-error *ngIf="restApiCallConfigForm.get(\'proxyPort\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-port-required\' | translate }}\n          </mat-error>\n          <mat-error\n            *ngIf="restApiCallConfigForm.get(\'proxyPort\').hasError(\'min\') || restApiCallConfigForm.get(\'proxyPort\').hasError(\'max\')">\n            {{ \'tb.rulenode.proxy-port-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-user</mat-label>\n        <input matInput formControlName="proxyUser">\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-password</mat-label>\n        <input matInput formControlName="proxyPassword">\n      </mat-form-field>\n    </div>\n  </div>\n  <mat-form-field *ngIf="!restApiCallConfigForm.get(\'useSimpleClientHttpFactory\').value || restApiCallConfigForm.get(\'enableProxy\').value" class="mat-block"\n                  subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.read-timeout</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="readTimeoutMs">\n    <mat-hint translate>tb.rulenode.read-timeout-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.max-parallel-requests-count</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="maxParallelRequestsCount">\n    <mat-hint translate>tb.rulenode.max-parallel-requests-count-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.max-response-size</mat-label>\n    <input type="number" step="1" min="1" matInput formControlName="maxInMemoryBufferSizeInKb">\n    <mat-hint translate>tb.rulenode.max-response-size-hint</mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.headers</label>\n  <div class="tb-hint" [innerHTML]="\'tb.rulenode.headers-hint\' | translate | safe: \'html\'">  </div>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="headers"\n    keyText="tb.rulenode.header"\n    keyRequiredText="tb.rulenode.header-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n  <tb-credentials-config formControlName="credentials" [disableCertPemCredentials]="restApiCallConfigForm.get(\'useSimpleClientHttpFactory\').value"></tb-credentials-config>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Bn,selector:"tb-credentials-config",inputs:["required","disableCertPemCredentials","passwordFieldRequired"]},{kind:"component",type:Sn,selector:"tb-kv-map-config-old",inputs:["disabled","uniqueKeyValuePairValidator","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","required"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:cr,decorators:[{type:n,args:[{selector:"tb-external-node-rest-api-call-config",template:'<section [formGroup]="restApiCallConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.endpoint-url-pattern</mat-label>\n    <input required matInput formControlName="restEndpointUrlPattern">\n    <mat-error *ngIf="restApiCallConfigForm.get(\'restEndpointUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.endpoint-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.request-method</mat-label>\n    <mat-select formControlName="requestMethod">\n      <mat-option *ngFor="let requestType of httpRequestTypes" [value]="requestType">\n        {{ requestType }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-checkbox formControlName="enableProxy">\n    {{ \'tb.rulenode.enable-proxy\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox *ngIf="!restApiCallConfigForm.get(\'enableProxy\').value" formControlName="useSimpleClientHttpFactory">\n    {{ \'tb.rulenode.use-simple-client-http-factory\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="parseToPlainText">\n    {{ \'tb.rulenode.parse-to-plain-text\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 5px;" translate>tb.rulenode.parse-to-plain-text-hint</div>\n  <mat-checkbox formControlName="ignoreRequestBody">\n    {{ \'tb.rulenode.ignore-request-body\' | translate }}\n  </mat-checkbox>\n  <div *ngIf="restApiCallConfigForm.get(\'enableProxy\').value">\n    <mat-checkbox formControlName="useSystemProxyProperties">\n      {{ \'tb.rulenode.use-system-proxy-properties\' | translate }}\n    </mat-checkbox>\n    <div *ngIf="!restApiCallConfigForm.get(\'useSystemProxyProperties\').value">\n      <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="10">\n          <mat-label translate>tb.rulenode.proxy-scheme</mat-label>\n          <mat-select formControlName="proxyScheme">\n            <mat-option *ngFor="let proxyScheme of proxySchemes" [value]="proxyScheme">\n              {{ proxyScheme }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field class="md-block" fxFlex="100" fxFlex.gt-sm="50">\n          <mat-label translate>tb.rulenode.proxy-host</mat-label>\n          <input matInput required formControlName="proxyHost">\n          <mat-error *ngIf="restApiCallConfigForm.get(\'proxyHost\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-host-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">\n          <mat-label translate>tb.rulenode.proxy-port</mat-label>\n          <input matInput required formControlName="proxyPort" type="number" step="1">\n          <mat-error *ngIf="restApiCallConfigForm.get(\'proxyPort\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-port-required\' | translate }}\n          </mat-error>\n          <mat-error\n            *ngIf="restApiCallConfigForm.get(\'proxyPort\').hasError(\'min\') || restApiCallConfigForm.get(\'proxyPort\').hasError(\'max\')">\n            {{ \'tb.rulenode.proxy-port-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-user</mat-label>\n        <input matInput formControlName="proxyUser">\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-password</mat-label>\n        <input matInput formControlName="proxyPassword">\n      </mat-form-field>\n    </div>\n  </div>\n  <mat-form-field *ngIf="!restApiCallConfigForm.get(\'useSimpleClientHttpFactory\').value || restApiCallConfigForm.get(\'enableProxy\').value" class="mat-block"\n                  subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.read-timeout</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="readTimeoutMs">\n    <mat-hint translate>tb.rulenode.read-timeout-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.max-parallel-requests-count</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="maxParallelRequestsCount">\n    <mat-hint translate>tb.rulenode.max-parallel-requests-count-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.max-response-size</mat-label>\n    <input type="number" step="1" min="1" matInput formControlName="maxInMemoryBufferSizeInKb">\n    <mat-hint translate>tb.rulenode.max-response-size-hint</mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.headers</label>\n  <div class="tb-hint" [innerHTML]="\'tb.rulenode.headers-hint\' | translate | safe: \'html\'">  </div>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="headers"\n    keyText="tb.rulenode.header"\n    keyRequiredText="tb.rulenode.header-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n  <tb-credentials-config formControlName="credentials" [disableCertPemCredentials]="restApiCallConfigForm.get(\'useSimpleClientHttpFactory\').value"></tb-credentials-config>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class gr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.smtpProtocols=["smtp","smtps"],this.tlsVersions=["TLSv1","TLSv1.1","TLSv1.2","TLSv1.3"]}configForm(){return this.sendEmailConfigForm}onConfigurationSet(e){this.sendEmailConfigForm=this.fb.group({useSystemSmtpSettings:[!!e&&e.useSystemSmtpSettings,[]],smtpProtocol:[e?e.smtpProtocol:null,[]],smtpHost:[e?e.smtpHost:null,[]],smtpPort:[e?e.smtpPort:null,[]],timeout:[e?e.timeout:null,[]],enableTls:[!!e&&e.enableTls,[]],tlsVersion:[e?e.tlsVersion:null,[]],enableProxy:[!!e&&e.enableProxy,[]],proxyHost:[e?e.proxyHost:null,[]],proxyPort:[e?e.proxyPort:null,[]],proxyUser:[e?e.proxyUser:null,[]],proxyPassword:[e?e.proxyPassword:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]]})}validatorTriggers(){return["useSystemSmtpSettings","enableProxy"]}updateValidators(e){const t=this.sendEmailConfigForm.get("useSystemSmtpSettings").value,n=this.sendEmailConfigForm.get("enableProxy").value;t?(this.sendEmailConfigForm.get("smtpProtocol").setValidators([]),this.sendEmailConfigForm.get("smtpHost").setValidators([]),this.sendEmailConfigForm.get("smtpPort").setValidators([]),this.sendEmailConfigForm.get("timeout").setValidators([]),this.sendEmailConfigForm.get("proxyHost").setValidators([]),this.sendEmailConfigForm.get("proxyPort").setValidators([])):(this.sendEmailConfigForm.get("smtpProtocol").setValidators([O.required]),this.sendEmailConfigForm.get("smtpHost").setValidators([O.required]),this.sendEmailConfigForm.get("smtpPort").setValidators([O.required,O.min(1),O.max(65535)]),this.sendEmailConfigForm.get("timeout").setValidators([O.required,O.min(0)]),this.sendEmailConfigForm.get("proxyHost").setValidators(n?[O.required]:[]),this.sendEmailConfigForm.get("proxyPort").setValidators(n?[O.required,O.min(1),O.max(65535)]:[])),this.sendEmailConfigForm.get("smtpProtocol").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpHost").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpPort").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("timeout").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("proxyHost").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("proxyPort").updateValueAndValidity({emitEvent:e})}}e("SendEmailConfigComponent",gr),gr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:gr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),gr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:gr,selector:"tb-external-node-send-email-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="sendEmailConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useSystemSmtpSettings">\n    {{ \'tb.rulenode.use-system-smtp-settings\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="sendEmailConfigForm.get(\'useSystemSmtpSettings\').value === false">\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.smtp-protocol</mat-label>\n      <mat-select formControlName="smtpProtocol">\n        <mat-option *ngFor="let smtpProtocol of smtpProtocols" [value]="smtpProtocol">\n          {{ smtpProtocol.toUpperCase() }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-host</mat-label>\n        <input required matInput formControlName="smtpHost">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpHost\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-host-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-port</mat-label>\n        <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-port-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'min\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'max\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.timeout-msec</mat-label>\n      <input required type="number" step="1" min="0" matInput formControlName="timeout">\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'required\')">\n        {{ \'tb.rulenode.timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'min\')">\n        {{ \'tb.rulenode.min-timeout-msec-message\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-checkbox formControlName="enableTls">\n      {{ \'tb.rulenode.enable-tls\' | translate }}\n    </mat-checkbox>\n    <mat-form-field class="mat-block" *ngIf="sendEmailConfigForm.get(\'enableTls\').value === true">\n      <mat-label translate>tb.rulenode.tls-version</mat-label>\n      <mat-select formControlName="tlsVersion">\n        <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">\n          {{ tlsVersion }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <tb-checkbox formControlName="enableProxy">\n      {{ \'tb.rulenode.enable-proxy\' | translate }}\n    </tb-checkbox>\n    <div *ngIf="sendEmailConfigForm.get(\'enableProxy\').value">\n      <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">\n          <mat-label translate>tb.rulenode.proxy-host</mat-label>\n          <input matInput required formControlName="proxyHost">\n          <mat-error *ngIf="sendEmailConfigForm.get(\'proxyHost\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-host-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">\n          <mat-label translate>tb.rulenode.proxy-port</mat-label>\n          <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">\n          <mat-error *ngIf="sendEmailConfigForm.get(\'proxyPort\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-port-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="sendEmailConfigForm.get(\'proxyPort\').hasError(\'min\') || sendEmailConfigForm.get(\'proxyPort\').hasError(\'max\')">\n            {{ \'tb.rulenode.proxy-port-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-user</mat-label>\n        <input matInput formControlName="proxyUser">\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-password</mat-label>\n        <input matInput formControlName="proxyPassword">\n      </mat-form-field>\n    </div>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.username</mat-label>\n      <input matInput placeholder="{{ \'tb.rulenode.enter-username\' | translate }}" formControlName="username">\n    </mat-form-field>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.password</mat-label>\n      <input matInput type="password" placeholder="{{ \'tb.rulenode.enter-password\' | translate }}" formControlName="password">\n      <tb-toggle-password matSuffix></tb-toggle-password>\n    </mat-form-field>\n  </section>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:rt.TbCheckboxComponent,selector:"tb-checkbox",inputs:["disabled","trueValue","falseValue"],outputs:["valueChange"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Xe.TogglePasswordComponent,selector:"tb-toggle-password"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:gr,decorators:[{type:n,args:[{selector:"tb-external-node-send-email-config",template:'<section [formGroup]="sendEmailConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useSystemSmtpSettings">\n    {{ \'tb.rulenode.use-system-smtp-settings\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="sendEmailConfigForm.get(\'useSystemSmtpSettings\').value === false">\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.smtp-protocol</mat-label>\n      <mat-select formControlName="smtpProtocol">\n        <mat-option *ngFor="let smtpProtocol of smtpProtocols" [value]="smtpProtocol">\n          {{ smtpProtocol.toUpperCase() }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-host</mat-label>\n        <input required matInput formControlName="smtpHost">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpHost\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-host-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-port</mat-label>\n        <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-port-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'min\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'max\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.timeout-msec</mat-label>\n      <input required type="number" step="1" min="0" matInput formControlName="timeout">\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'required\')">\n        {{ \'tb.rulenode.timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'min\')">\n        {{ \'tb.rulenode.min-timeout-msec-message\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-checkbox formControlName="enableTls">\n      {{ \'tb.rulenode.enable-tls\' | translate }}\n    </mat-checkbox>\n    <mat-form-field class="mat-block" *ngIf="sendEmailConfigForm.get(\'enableTls\').value === true">\n      <mat-label translate>tb.rulenode.tls-version</mat-label>\n      <mat-select formControlName="tlsVersion">\n        <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">\n          {{ tlsVersion }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <tb-checkbox formControlName="enableProxy">\n      {{ \'tb.rulenode.enable-proxy\' | translate }}\n    </tb-checkbox>\n    <div *ngIf="sendEmailConfigForm.get(\'enableProxy\').value">\n      <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">\n          <mat-label translate>tb.rulenode.proxy-host</mat-label>\n          <input matInput required formControlName="proxyHost">\n          <mat-error *ngIf="sendEmailConfigForm.get(\'proxyHost\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-host-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">\n          <mat-label translate>tb.rulenode.proxy-port</mat-label>\n          <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">\n          <mat-error *ngIf="sendEmailConfigForm.get(\'proxyPort\').hasError(\'required\')">\n            {{ \'tb.rulenode.proxy-port-required\' | translate }}\n          </mat-error>\n          <mat-error *ngIf="sendEmailConfigForm.get(\'proxyPort\').hasError(\'min\') || sendEmailConfigForm.get(\'proxyPort\').hasError(\'max\')">\n            {{ \'tb.rulenode.proxy-port-range\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-user</mat-label>\n        <input matInput formControlName="proxyUser">\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.proxy-password</mat-label>\n        <input matInput formControlName="proxyPassword">\n      </mat-form-field>\n    </div>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.username</mat-label>\n      <input matInput placeholder="{{ \'tb.rulenode.enter-username\' | translate }}" formControlName="username">\n    </mat-form-field>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.password</mat-label>\n      <input matInput type="password" placeholder="{{ \'tb.rulenode.enter-password\' | translate }}" formControlName="password">\n      <tb-toggle-password matSuffix></tb-toggle-password>\n    </mat-form-field>\n  </section>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class fr extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.sendSmsConfigForm}onConfigurationSet(e){this.sendSmsConfigForm=this.fb.group({numbersToTemplate:[e?e.numbersToTemplate:null,[O.required]],smsMessageTemplate:[e?e.smsMessageTemplate:null,[O.required]],useSystemSmsSettings:[!!e&&e.useSystemSmsSettings,[]],smsProviderConfiguration:[e?e.smsProviderConfiguration:null,[]]})}validatorTriggers(){return["useSystemSmsSettings"]}updateValidators(e){this.sendSmsConfigForm.get("useSystemSmsSettings").value?this.sendSmsConfigForm.get("smsProviderConfiguration").setValidators([]):this.sendSmsConfigForm.get("smsProviderConfiguration").setValidators([O.required]),this.sendSmsConfigForm.get("smsProviderConfiguration").updateValueAndValidity({emitEvent:e})}}e("SendSmsConfigComponent",fr),fr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:fr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),fr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:fr,selector:"tb-external-node-send-sms-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="sendSmsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.numbers-to-template</mat-label>\n    <input required matInput formControlName="numbersToTemplate">\n    <mat-error *ngIf="sendSmsConfigForm.get(\'numbersToTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.numbers-to-template-required\' | translate }}\n    </mat-error>\n    <mat-hint [innerHTML]="\'tb.rulenode.numbers-to-template-hint\' | translate | safe: \'html\'"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.sms-message-template</mat-label>\n    <textarea required matInput formControlName="smsMessageTemplate" rows="6"></textarea>\n    <mat-error *ngIf="sendSmsConfigForm.get(\'smsMessageTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.sms-message-template-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-checkbox formControlName="useSystemSmsSettings">\n    {{ \'tb.rulenode.use-system-sms-settings\' | translate }}\n  </mat-checkbox>\n  <tb-sms-provider-configuration\n    *ngIf="sendSmsConfigForm.get(\'useSystemSmsSettings\').value === false"\n    formControlName="smsProviderConfiguration"\n    required>\n  </tb-sms-provider-configuration>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:ot.SmsProviderConfigurationComponent,selector:"tb-sms-provider-configuration",inputs:["required","disabled"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:fr,decorators:[{type:n,args:[{selector:"tb-external-node-send-sms-config",template:'<section [formGroup]="sendSmsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.numbers-to-template</mat-label>\n    <input required matInput formControlName="numbersToTemplate">\n    <mat-error *ngIf="sendSmsConfigForm.get(\'numbersToTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.numbers-to-template-required\' | translate }}\n    </mat-error>\n    <mat-hint [innerHTML]="\'tb.rulenode.numbers-to-template-hint\' | translate | safe: \'html\'"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.sms-message-template</mat-label>\n    <textarea required matInput formControlName="smsMessageTemplate" rows="6"></textarea>\n    <mat-error *ngIf="sendSmsConfigForm.get(\'smsMessageTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.sms-message-template-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-checkbox formControlName="useSystemSmsSettings">\n    {{ \'tb.rulenode.use-system-sms-settings\' | translate }}\n  </mat-checkbox>\n  <tb-sms-provider-configuration\n    *ngIf="sendSmsConfigForm.get(\'useSystemSmsSettings\').value === false"\n    formControlName="smsProviderConfiguration"\n    required>\n  </tb-sms-provider-configuration>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class yr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.slackChanelTypes=Object.keys(D),this.slackChanelTypesTranslateMap=V}configForm(){return this.slackConfigForm}onConfigurationSet(e){this.slackConfigForm=this.fb.group({botToken:[e?e.botToken:null],useSystemSettings:[!!e&&e.useSystemSettings],messageTemplate:[e?e.messageTemplate:null,[O.required]],conversationType:[e?e.conversationType:null,[O.required]],conversation:[e?e.conversation:null,[O.required]]})}validatorTriggers(){return["useSystemSettings"]}updateValidators(e){this.slackConfigForm.get("useSystemSettings").value?this.slackConfigForm.get("botToken").clearValidators():this.slackConfigForm.get("botToken").setValidators([O.required]),this.slackConfigForm.get("botToken").updateValueAndValidity({emitEvent:e})}}e("SlackConfigComponent",yr),yr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:yr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),yr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:yr,selector:"tb-external-node-slack-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="slackConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.message-template</mat-label>\n    <input required matInput formControlName="messageTemplate">\n    <mat-error *ngIf="slackConfigForm.get(\'messageTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.message-template-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-checkbox formControlName="useSystemSettings">\n    {{ \'tb.rulenode.use-system-slack-settings\' | translate }}\n  </mat-checkbox>\n  <mat-form-field *ngIf="!slackConfigForm.get(\'useSystemSettings\').value" class="mat-block">\n    <mat-label translate>tb.rulenode.slack-api-token</mat-label>\n    <input required matInput formControlName="botToken">\n    <mat-error *ngIf="slackConfigForm.get(\'botToken\').hasError(\'required\')">\n      {{ \'tb.rulenode.slack-api-token-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label class="tb-title">{{ \'notification.slack-chanel-type\' | translate }}</label>\n  <mat-radio-group formControlName="conversationType">\n    <mat-radio-button *ngFor="let slackChanelType of slackChanelTypes" [value]="slackChanelType">\n      {{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}\n    </mat-radio-button>\n  </mat-radio-group>\n  <tb-slack-conversation-autocomplete\n    formControlName="conversation"\n    required\n    [token]="slackConfigForm.get(\'useSystemSettings\').value ? \'\' : slackConfigForm.get(\'botToken\').value"\n    [slackChanelType]="slackConfigForm.get(\'conversationType\').value">\n  </tb-slack-conversation-autocomplete>\n</section>\n',styles:[":host .tb-title{display:block;padding-bottom:6px}:host ::ng-deep .mat-mdc-radio-group{display:flex;flex-direction:row;margin-bottom:22px;gap:12px}:host ::ng-deep .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 100%;padding:4px;border:1px solid rgba(0,0,0,.12);border-radius:6px}@media screen and (max-width: 599px){:host ::ng-deep .mat-mdc-radio-group{flex-direction:column}}\n"],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Le.MatCheckbox,selector:"mat-checkbox",inputs:["disableRipple","color","tabIndex"],exportAs:["matCheckbox"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:at.MatRadioGroup,selector:"mat-radio-group",exportAs:["matRadioGroup"]},{kind:"component",type:at.MatRadioButton,selector:"mat-radio-button",inputs:["disableRipple","tabIndex"],exportAs:["matRadioButton"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:it.SlackConversationAutocompleteComponent,selector:"tb-slack-conversation-autocomplete",inputs:["labelText","requiredText","required","disabled","slackChanelType","token"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:yr,decorators:[{type:n,args:[{selector:"tb-external-node-slack-config",template:'<section [formGroup]="slackConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.message-template</mat-label>\n    <input required matInput formControlName="messageTemplate">\n    <mat-error *ngIf="slackConfigForm.get(\'messageTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.message-template-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-checkbox formControlName="useSystemSettings">\n    {{ \'tb.rulenode.use-system-slack-settings\' | translate }}\n  </mat-checkbox>\n  <mat-form-field *ngIf="!slackConfigForm.get(\'useSystemSettings\').value" class="mat-block">\n    <mat-label translate>tb.rulenode.slack-api-token</mat-label>\n    <input required matInput formControlName="botToken">\n    <mat-error *ngIf="slackConfigForm.get(\'botToken\').hasError(\'required\')">\n      {{ \'tb.rulenode.slack-api-token-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label class="tb-title">{{ \'notification.slack-chanel-type\' | translate }}</label>\n  <mat-radio-group formControlName="conversationType">\n    <mat-radio-button *ngFor="let slackChanelType of slackChanelTypes" [value]="slackChanelType">\n      {{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}\n    </mat-radio-button>\n  </mat-radio-group>\n  <tb-slack-conversation-autocomplete\n    formControlName="conversation"\n    required\n    [token]="slackConfigForm.get(\'useSystemSettings\').value ? \'\' : slackConfigForm.get(\'botToken\').value"\n    [slackChanelType]="slackConfigForm.get(\'conversationType\').value">\n  </tb-slack-conversation-autocomplete>\n</section>\n',styles:[":host .tb-title{display:block;padding-bottom:6px}:host ::ng-deep .mat-mdc-radio-group{display:flex;flex-direction:row;margin-bottom:22px;gap:12px}:host ::ng-deep .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 100%;padding:4px;border:1px solid rgba(0,0,0,.12);border-radius:6px}@media screen and (max-width: 599px){:host ::ng-deep .mat-mdc-radio-group{flex-direction:column}}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class br extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.snsConfigForm}onConfigurationSet(e){this.snsConfigForm=this.fb.group({topicArnPattern:[e?e.topicArnPattern:null,[O.required]],accessKeyId:[e?e.accessKeyId:null,[O.required]],secretAccessKey:[e?e.secretAccessKey:null,[O.required]],region:[e?e.region:null,[O.required]]})}}e("SnsConfigComponent",br),br.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:br,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),br.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:br,selector:"tb-external-node-sns-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="snsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic-arn-pattern</mat-label>\n    <input required matInput formControlName="topicArnPattern">\n    <mat-error *ngIf="snsConfigForm.get(\'topicArnPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-arn-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="snsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="snsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="snsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:br,decorators:[{type:n,args:[{selector:"tb-external-node-sns-config",template:'<section [formGroup]="snsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.topic-arn-pattern</mat-label>\n    <input required matInput formControlName="topicArnPattern">\n    <mat-error *ngIf="snsConfigForm.get(\'topicArnPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-arn-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="snsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="snsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="snsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class xr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.sqsQueueType=$t,this.sqsQueueTypes=Object.keys($t),this.sqsQueueTypeTranslationsMap=Jt}configForm(){return this.sqsConfigForm}onConfigurationSet(e){this.sqsConfigForm=this.fb.group({queueType:[e?e.queueType:null,[O.required]],queueUrlPattern:[e?e.queueUrlPattern:null,[O.required]],delaySeconds:[e?e.delaySeconds:null,[O.min(0),O.max(900)]],messageAttributes:[e?e.messageAttributes:null,[]],accessKeyId:[e?e.accessKeyId:null,[O.required]],secretAccessKey:[e?e.secretAccessKey:null,[O.required]],region:[e?e.region:null,[O.required]]})}}e("SqsConfigComponent",xr),xr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:xr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),xr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:xr,selector:"tb-external-node-sqs-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="sqsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.queue-type</mat-label>\n    <mat-select formControlName="queueType" required>\n      <mat-option *ngFor="let type of sqsQueueTypes" [value]="type">\n        {{ sqsQueueTypeTranslationsMap.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.queue-url-pattern</mat-label>\n    <input required matInput formControlName="queueUrlPattern">\n    <mat-error *ngIf="sqsConfigForm.get(\'queueUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.queue-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field *ngIf="sqsConfigForm.get(\'queueType\').value === sqsQueueType.STANDARD" class="mat-block">\n    <mat-label translate>tb.rulenode.delay-seconds</mat-label>\n    <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-delay-seconds-message\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-delay-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" [innerHTML]="\'tb.rulenode.message-attributes-hint\' | translate | safe: \'html\'"></div>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="sqsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="sqsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="sqsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:Sn,selector:"tb-kv-map-config-old",inputs:["disabled","uniqueKeyValuePairValidator","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","required"]},{kind:"pipe",type:ue.SafePipe,name:"safe"},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:xr,decorators:[{type:n,args:[{selector:"tb-external-node-sqs-config",template:'<section [formGroup]="sqsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.queue-type</mat-label>\n    <mat-select formControlName="queueType" required>\n      <mat-option *ngFor="let type of sqsQueueTypes" [value]="type">\n        {{ sqsQueueTypeTranslationsMap.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block" subscriptSizing="dynamic">\n    <mat-label translate>tb.rulenode.queue-url-pattern</mat-label>\n    <input required matInput formControlName="queueUrlPattern">\n    <mat-error *ngIf="sqsConfigForm.get(\'queueUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.queue-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>\n  </mat-form-field>\n  <mat-form-field *ngIf="sqsConfigForm.get(\'queueType\').value === sqsQueueType.STANDARD" class="mat-block">\n    <mat-label translate>tb.rulenode.delay-seconds</mat-label>\n    <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-delay-seconds-message\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-delay-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" [innerHTML]="\'tb.rulenode.message-attributes-hint\' | translate | safe: \'html\'"></div>\n  <tb-kv-map-config-old\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config-old>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="sqsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="sqsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="sqsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class hr extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.lambdaConfigForm}onConfigurationSet(e){this.lambdaConfigForm=this.fb.group({functionName:[e?e.functionName:null,[O.required]],qualifier:[e?e.qualifier:null,[]],accessKey:[e?e.accessKey:null,[O.required]],secretKey:[e?e.secretKey:null,[O.required]],region:[e?e.region:null,[O.required]],connectionTimeout:[e?e.connectionTimeout:null,[O.required,O.min(0)]],requestTimeout:[e?e.requestTimeout:null,[O.required,O.min(0)]],tellFailureIfFuncThrowsExc:[!!e&&e.tellFailureIfFuncThrowsExc,[]]})}}e("LambdaConfigComponent",hr),hr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:hr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),hr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:hr,selector:"tb-external-node-lambda-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="lambdaConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-row no-padding no-border">\n      <div class="tb-form-panel-title tb-required" translate>tb.rulenode.function-configuration</div>\n    </div>\n    <tb-example-hint [hintText]="\'tb.rulenode.template-rules-hint\'"\n                     popupHelpLink="rulenode/node-templatization-doc">\n    </tb-example-hint>\n    <div class="tb-standard-fields">\n      <mat-form-field class="mat-block">\n        <mat-label>{{\'tb.rulenode.function-name\' | translate}}</mat-label>\n        <input required matInput formControlName="functionName">\n        <mat-error *ngIf="lambdaConfigForm.get(\'functionName\').hasError(\'required\')">\n          {{\'tb.rulenode.function-name-required\' | translate}}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label>{{\'tb.rulenode.qualifier\' | translate}}</mat-label>\n        <input matInput formControlName="qualifier">\n        <mat-hint translate>tb.rulenode.qualifier-hint</mat-hint>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings" expanded>\n      <mat-expansion-panel-header>\n        <mat-panel-title class="tb-form-panel-title tb-required" translate>tb.rulenode.aws-credentials</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class="tb-standard-fields">\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n          <input required matInput formControlName="accessKey">\n          <mat-error *ngIf="lambdaConfigForm.get(\'accessKey\').hasError(\'required\')">\n            {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n          <input required matInput formControlName="secretKey">\n          <mat-error *ngIf="lambdaConfigForm.get(\'secretKey\').hasError(\'required\')">\n            {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.aws-region</mat-label>\n          <input required matInput formControlName="region">\n          <mat-error *ngIf="lambdaConfigForm.get(\'region\').hasError(\'required\')">\n            {{ \'tb.rulenode.aws-region-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </mat-expansion-panel>\n  </div>\n  <div class="tb-form-panel stroked no-padding">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header style="padding: 16px">\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class="tb-form-panel no-border no-padding no-gap" style="margin-top: 0">\n        <div class="tb-form-row no-border same-padding tb-standard-fields">\n          <mat-form-field class="flex">\n            <mat-label translate>tb.rulenode.connection-timeout</mat-label>\n            <input type="number" required min="0" matInput formControlName="connectionTimeout">\n            <mat-error *ngIf="lambdaConfigForm.get(\'connectionTimeout\').hasError(\'required\')">\n              {{ \'tb.rulenode.connection-timeout-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="lambdaConfigForm.get(\'connectionTimeout\').hasError(\'min\')">\n              {{ \'tb.rulenode.connection-timeout-min\' | translate }}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.connection-timeout-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n          <mat-form-field class="flex">\n            <mat-label translate>tb.rulenode.request-timeout</mat-label>\n            <input type="number" required min="0" matInput formControlName="requestTimeout">\n            <mat-error *ngIf="lambdaConfigForm.get(\'requestTimeout\').hasError(\'required\')">\n              {{ \'tb.rulenode.request-timeout-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="lambdaConfigForm.get(\'requestTimeout\').hasError(\'min\')">\n              {{ \'tb.rulenode.request-timeout-min\' | translate }}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.request-timeout-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n        </div>\n        <div tb-hint-tooltip-icon="{{ \'tb.rulenode.tell-failure-aws-lambda-hint\' | translate }}"\n             class="tb-form-row no-border" style="margin-bottom: 16px">\n          <mat-slide-toggle class="mat-slide" formControlName="tellFailureIfFuncThrowsExc">\n            {{ \'tb.rulenode.tell-failure-aws-lambda\' | translate }}\n          </mat-slide-toggle>\n        </div>\n      </div>\n    </mat-expansion-panel>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:hr,decorators:[{type:n,args:[{selector:"tb-external-node-lambda-config",template:'<section [formGroup]="lambdaConfigForm" class="tb-form-panel no-padding no-border">\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-row no-padding no-border">\n      <div class="tb-form-panel-title tb-required" translate>tb.rulenode.function-configuration</div>\n    </div>\n    <tb-example-hint [hintText]="\'tb.rulenode.template-rules-hint\'"\n                     popupHelpLink="rulenode/node-templatization-doc">\n    </tb-example-hint>\n    <div class="tb-standard-fields">\n      <mat-form-field class="mat-block">\n        <mat-label>{{\'tb.rulenode.function-name\' | translate}}</mat-label>\n        <input required matInput formControlName="functionName">\n        <mat-error *ngIf="lambdaConfigForm.get(\'functionName\').hasError(\'required\')">\n          {{\'tb.rulenode.function-name-required\' | translate}}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label>{{\'tb.rulenode.qualifier\' | translate}}</mat-label>\n        <input matInput formControlName="qualifier">\n        <mat-hint translate>tb.rulenode.qualifier-hint</mat-hint>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <div class="tb-form-panel stroked">\n    <mat-expansion-panel class="tb-settings" expanded>\n      <mat-expansion-panel-header>\n        <mat-panel-title class="tb-form-panel-title tb-required" translate>tb.rulenode.aws-credentials</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class="tb-standard-fields">\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n          <input required matInput formControlName="accessKey">\n          <mat-error *ngIf="lambdaConfigForm.get(\'accessKey\').hasError(\'required\')">\n            {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n          <input required matInput formControlName="secretKey">\n          <mat-error *ngIf="lambdaConfigForm.get(\'secretKey\').hasError(\'required\')">\n            {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field class="mat-block">\n          <mat-label translate>tb.rulenode.aws-region</mat-label>\n          <input required matInput formControlName="region">\n          <mat-error *ngIf="lambdaConfigForm.get(\'region\').hasError(\'required\')">\n            {{ \'tb.rulenode.aws-region-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </mat-expansion-panel>\n  </div>\n  <div class="tb-form-panel stroked no-padding">\n    <mat-expansion-panel class="tb-settings">\n      <mat-expansion-panel-header style="padding: 16px">\n        <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class="tb-form-panel no-border no-padding no-gap" style="margin-top: 0">\n        <div class="tb-form-row no-border same-padding tb-standard-fields">\n          <mat-form-field class="flex">\n            <mat-label translate>tb.rulenode.connection-timeout</mat-label>\n            <input type="number" required min="0" matInput formControlName="connectionTimeout">\n            <mat-error *ngIf="lambdaConfigForm.get(\'connectionTimeout\').hasError(\'required\')">\n              {{ \'tb.rulenode.connection-timeout-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="lambdaConfigForm.get(\'connectionTimeout\').hasError(\'min\')">\n              {{ \'tb.rulenode.connection-timeout-min\' | translate }}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.connection-timeout-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n          <mat-form-field class="flex">\n            <mat-label translate>tb.rulenode.request-timeout</mat-label>\n            <input type="number" required min="0" matInput formControlName="requestTimeout">\n            <mat-error *ngIf="lambdaConfigForm.get(\'requestTimeout\').hasError(\'required\')">\n              {{ \'tb.rulenode.request-timeout-required\' | translate }}\n            </mat-error>\n            <mat-error *ngIf="lambdaConfigForm.get(\'requestTimeout\').hasError(\'min\')">\n              {{ \'tb.rulenode.request-timeout-min\' | translate }}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.request-timeout-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n        </div>\n        <div tb-hint-tooltip-icon="{{ \'tb.rulenode.tell-failure-aws-lambda-hint\' | translate }}"\n             class="tb-form-row no-border" style="margin-bottom: 16px">\n          <mat-slide-toggle class="mat-slide" formControlName="tellFailureIfFuncThrowsExc">\n            {{ \'tb.rulenode.tell-failure-aws-lambda\' | translate }}\n          </mat-slide-toggle>\n        </div>\n      </div>\n    </mat-expansion-panel>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class vr{}e("RulenodeCoreConfigExternalModule",vr),vr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vr,deps:[],target:t.ɵɵFactoryTarget.NgModule}),vr.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:vr,declarations:[br,xr,hr,dr,sr,mr,pr,ur,cr,gr,lr,fr,yr],imports:[$,M,Je,Jn],exports:[br,xr,hr,dr,sr,mr,pr,ur,cr,gr,lr,fr,yr]}),vr.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vr,imports:[$,M,Je,Jn]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:vr,decorators:[{type:d,args:[{declarations:[br,xr,hr,dr,sr,mr,pr,ur,cr,gr,lr,fr,yr],imports:[$,M,Je,Jn],exports:[br,xr,hr,dr,sr,mr,pr,ur,cr,gr,lr,fr,yr]}]}]});class Cr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.searchText=""}configForm(){return this.alarmStatusConfigForm}prepareInputConfig(e){return{alarmStatusList:fe(e?.alarmStatusList)?e.alarmStatusList:null}}onConfigurationSet(e){this.alarmStatusConfigForm=this.fb.group({alarmStatusList:[e.alarmStatusList,[O.required]]})}}e("CheckAlarmStatusComponent",Cr),Cr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Cr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Cr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Cr,selector:"tb-filter-node-check-alarm-status-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="alarmStatusConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title tb-required" translate>tb.rulenode.alarm-status</div>\n    <div class="tb-form-panel-hint tb-error" translate [hidden]="alarmStatusConfigForm.get(\'alarmStatusList\').valid">\n      tb.rulenode.alarm-required\n    </div>\n  </div>\n  <tb-alarm-status-select formControlName="alarmStatusList"></tb-alarm-status-select>\n</section>\n\n\n\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:$n,selector:"tb-alarm-status-select"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Cr,decorators:[{type:n,args:[{selector:"tb-filter-node-check-alarm-status-config",template:'<section [formGroup]="alarmStatusConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title tb-required" translate>tb.rulenode.alarm-status</div>\n    <div class="tb-form-panel-hint tb-error" translate [hidden]="alarmStatusConfigForm.get(\'alarmStatusList\').valid">\n      tb.rulenode.alarm-required\n    </div>\n  </div>\n  <tb-alarm-status-select formControlName="alarmStatusList"></tb-alarm-status-select>\n</section>\n\n\n\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Fr extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.checkMessageConfigForm}prepareInputConfig(e){return{messageNames:fe(e?.messageNames)?e.messageNames:[],metadataNames:fe(e?.metadataNames)?e.metadataNames:[],checkAllKeys:!!fe(e?.checkAllKeys)&&e.checkAllKeys}}prepareOutputConfig(e){return{messageNames:fe(e?.messageNames)?e.messageNames:[],metadataNames:fe(e?.metadataNames)?e.metadataNames:[],checkAllKeys:e.checkAllKeys}}atLeastOne(e,t=null){return n=>{t||(t=Object.keys(n.controls));return n?.controls&&t.some((t=>!e(n.controls[t])))?null:{atLeastOne:!0}}}onConfigurationSet(e){this.checkMessageConfigForm=this.fb.group({messageNames:[e.messageNames,[]],metadataNames:[e.metadataNames,[]],checkAllKeys:[e.checkAllKeys,[]]},{validators:this.atLeastOne(O.required,["messageNames","metadataNames"])})}get touchedValidationControl(){return["messageNames","metadataNames"].some((e=>this.checkMessageConfigForm.get(e).touched))}}e("CheckMessageConfigComponent",Fr),Fr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Fr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Fr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Fr,selector:"tb-filter-node-check-message-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="checkMessageConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title tb-required" translate>tb.rulenode.fields-to-check</div>\n    <div class="tb-form-panel-hint tb-error" translate [hidden]="!(touchedValidationControl && checkMessageConfigForm.hasError(\'atLeastOne\'))">\n      tb.rulenode.at-least-one-field-required\n    </div>\n  </div>\n  <tb-string-items-list editable subscriptSizing="dynamic"\n                        [label]="\'tb.rulenode.data-keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-message-field\' | translate"\n                        formControlName="messageNames">\n    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.field-name\' | translate } }}">help</mat-icon>\n  </tb-string-items-list>\n  <tb-string-items-list editable subscriptSizing="dynamic"\n                        [label]="\'tb.rulenode.metadata-keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-metadata-field\' | translate"\n                        formControlName="metadataNames">\n    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.field-name\' | translate } }}">help</mat-icon>\n  </tb-string-items-list>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.check-all-keys-tooltip\' | translate }}"\n       class="tb-form-row no-border no-padding">\n    <mat-slide-toggle class="mat-slide" formControlName="checkAllKeys">\n      {{ \'tb.rulenode.check-all-keys\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:et.StringItemsListComponent,selector:"tb-string-items-list",inputs:["required","disabled","label","placeholder","hint","requiredText","floatLabel","appearance","editable","subscriptSizing","predefinedValues"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Fr,decorators:[{type:n,args:[{selector:"tb-filter-node-check-message-config",template:'<section [formGroup]="checkMessageConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-row no-padding no-border space-between">\n    <div class="tb-form-panel-title tb-required" translate>tb.rulenode.fields-to-check</div>\n    <div class="tb-form-panel-hint tb-error" translate [hidden]="!(touchedValidationControl && checkMessageConfigForm.hasError(\'atLeastOne\'))">\n      tb.rulenode.at-least-one-field-required\n    </div>\n  </div>\n  <tb-string-items-list editable subscriptSizing="dynamic"\n                        [label]="\'tb.rulenode.data-keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-message-field\' | translate"\n                        formControlName="messageNames">\n    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.field-name\' | translate } }}">help</mat-icon>\n  </tb-string-items-list>\n  <tb-string-items-list editable subscriptSizing="dynamic"\n                        [label]="\'tb.rulenode.metadata-keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-metadata-field\' | translate"\n                        formControlName="metadataNames">\n    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.field-name\' | translate } }}">help</mat-icon>\n  </tb-string-items-list>\n  <div tb-hint-tooltip-icon="{{ \'tb.rulenode.check-all-keys-tooltip\' | translate }}"\n       class="tb-form-row no-border no-padding">\n    <mat-slide-toggle class="mat-slide" formControlName="checkAllKeys">\n      {{ \'tb.rulenode.check-all-keys\' | translate }}\n    </mat-slide-toggle>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class kr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.entitySearchDirection=Object.values(v),this.entitySearchDirectionTranslationsMap=S}configForm(){return this.checkRelationConfigForm}prepareInputConfig(e){return{checkForSingleEntity:!!fe(e?.checkForSingleEntity)&&e.checkForSingleEntity,direction:fe(e?.direction)?e.direction:null,entityType:fe(e?.entityType)?e.entityType:null,entityId:fe(e?.entityId)?e.entityId:null,relationType:fe(e?.relationType)?e.relationType:null}}onConfigurationSet(e){this.checkRelationConfigForm=this.fb.group({checkForSingleEntity:[e.checkForSingleEntity,[]],direction:[e.direction,[]],entityType:[e.entityType,e&&e.checkForSingleEntity?[O.required]:[]],entityId:[e.entityId,e&&e.checkForSingleEntity?[O.required]:[]],relationType:[e.relationType,[O.required]]})}validatorTriggers(){return["checkForSingleEntity"]}updateValidators(e){const t=this.checkRelationConfigForm.get("checkForSingleEntity").value;this.checkRelationConfigForm.get("entityType").setValidators(t?[O.required]:[]),this.checkRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:e}),this.checkRelationConfigForm.get("entityId").setValidators(t?[O.required]:[]),this.checkRelationConfigForm.get("entityId").updateValueAndValidity({emitEvent:e})}}e("CheckRelationConfigComponent",kr),kr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:kr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),kr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:kr,selector:"tb-filter-node-check-relation-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="checkRelationConfigForm" class="tb-form-panel stroked no-padding-bottom">\n  <div class="tb-form-panel-title" translate>tb.rulenode.relation-search-parameters</div>\n  <div fxLayout="column">\n    <mat-form-field class="mat-block" hideRequiredMarker>\n      <mat-label>{{ \'relation.direction\' | translate }}</mat-label>\n      <mat-select formControlName="direction" required>\n        <mat-option *ngFor="let direction of entitySearchDirection" [value]="direction">\n          {{ entitySearchDirectionTranslationsMap.get(direction) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <tb-relation-type-autocomplete\n      required\n      formControlName="relationType">\n    </tb-relation-type-autocomplete>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.check-relation-to-specific-entity-tooltip\' | translate }}"\n         class="tb-form-row no-border no-padding slide-toggle">\n      <mat-slide-toggle class="mat-slide" formControlName="checkForSingleEntity">\n        {{ \'tb.rulenode.check-relation-to-specific-entity\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div *ngIf="checkRelationConfigForm.get(\'checkForSingleEntity\').value" class="same-width-component-row">\n      <tb-entity-type-select\n        style="min-width: 100px; flex: 1;"\n        showLabel\n        required\n        formControlName="entityType">\n      </tb-entity-type-select>\n      <tb-entity-autocomplete\n        fxFlex\n        required\n        *ngIf="checkRelationConfigForm.get(\'entityType\').value"\n        [entityType]="checkRelationConfigForm.get(\'entityType\').value"\n        formControlName="entityId">\n      </tb-entity-autocomplete>\n    </div>\n  </div>\n</section>\n',styles:[":host .slide-toggle{margin-bottom:18px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:lt.EntityAutocompleteComponent,selector:"tb-entity-autocomplete",inputs:["entityType","entitySubtype","excludeEntityIds","labelText","requiredText","useFullEntityId","appearance","required","disabled"],outputs:["entityChanged"]},{kind:"component",type:Se.EntityTypeSelectComponent,selector:"tb-entity-type-select",inputs:["allowedEntityTypes","useAliasEntityTypes","filterAllowedEntityTypes","showLabel","required","disabled","additionEntityTypes"]},{kind:"component",type:Ne.RelationTypeAutocompleteComponent,selector:"tb-relation-type-autocomplete",inputs:["showLabel","additionalClasses","appearance","required","disabled","subscriptSizing"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:kr,decorators:[{type:n,args:[{selector:"tb-filter-node-check-relation-config",template:'<section [formGroup]="checkRelationConfigForm" class="tb-form-panel stroked no-padding-bottom">\n  <div class="tb-form-panel-title" translate>tb.rulenode.relation-search-parameters</div>\n  <div fxLayout="column">\n    <mat-form-field class="mat-block" hideRequiredMarker>\n      <mat-label>{{ \'relation.direction\' | translate }}</mat-label>\n      <mat-select formControlName="direction" required>\n        <mat-option *ngFor="let direction of entitySearchDirection" [value]="direction">\n          {{ entitySearchDirectionTranslationsMap.get(direction) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <tb-relation-type-autocomplete\n      required\n      formControlName="relationType">\n    </tb-relation-type-autocomplete>\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.check-relation-to-specific-entity-tooltip\' | translate }}"\n         class="tb-form-row no-border no-padding slide-toggle">\n      <mat-slide-toggle class="mat-slide" formControlName="checkForSingleEntity">\n        {{ \'tb.rulenode.check-relation-to-specific-entity\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <div *ngIf="checkRelationConfigForm.get(\'checkForSingleEntity\').value" class="same-width-component-row">\n      <tb-entity-type-select\n        style="min-width: 100px; flex: 1;"\n        showLabel\n        required\n        formControlName="entityType">\n      </tb-entity-type-select>\n      <tb-entity-autocomplete\n        fxFlex\n        required\n        *ngIf="checkRelationConfigForm.get(\'entityType\').value"\n        [entityType]="checkRelationConfigForm.get(\'entityType\').value"\n        formControlName="entityId">\n      </tb-entity-autocomplete>\n    </div>\n  </div>\n</section>\n',styles:[":host .slide-toggle{margin-bottom:18px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Tr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.perimeterType=Mt,this.perimeterTypes=Object.values(Mt),this.perimeterTypeTranslationMap=Et,this.rangeUnits=Object.values(Dt),this.rangeUnitTranslationMap=Vt,this.defaultPaddingEnable=!0}configForm(){return this.geoFilterConfigForm}prepareInputConfig(e){return{latitudeKeyName:fe(e?.latitudeKeyName)?e.latitudeKeyName:null,longitudeKeyName:fe(e?.longitudeKeyName)?e.longitudeKeyName:null,perimeterType:fe(e?.perimeterType)?e.perimeterType:null,fetchPerimeterInfoFromMessageMetadata:!!fe(e?.fetchPerimeterInfoFromMessageMetadata)&&e.fetchPerimeterInfoFromMessageMetadata,perimeterKeyName:fe(e?.perimeterKeyName)?e.perimeterKeyName:null,centerLatitude:fe(e?.centerLatitude)?e.centerLatitude:null,centerLongitude:fe(e?.centerLongitude)?e.centerLongitude:null,range:fe(e?.range)?e.range:null,rangeUnit:fe(e?.rangeUnit)?e.rangeUnit:null,polygonsDefinition:fe(e?.polygonsDefinition)?e.polygonsDefinition:null}}onConfigurationSet(e){this.geoFilterConfigForm=this.fb.group({latitudeKeyName:[e.latitudeKeyName,[O.required]],longitudeKeyName:[e.longitudeKeyName,[O.required]],perimeterType:[e.perimeterType,[O.required]],fetchPerimeterInfoFromMessageMetadata:[e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterKeyName:[e.perimeterKeyName,[]],centerLatitude:[e.centerLatitude,[]],centerLongitude:[e.centerLongitude,[]],range:[e.range,[]],rangeUnit:[e.rangeUnit,[]],polygonsDefinition:[e.polygonsDefinition,[]]})}validatorTriggers(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]}updateValidators(e){const t=this.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,n=this.geoFilterConfigForm.get("perimeterType").value;t?this.geoFilterConfigForm.get("perimeterKeyName").setValidators([O.required]):this.geoFilterConfigForm.get("perimeterKeyName").setValidators([]),t||n!==Mt.CIRCLE?(this.geoFilterConfigForm.get("centerLatitude").setValidators([]),this.geoFilterConfigForm.get("centerLongitude").setValidators([]),this.geoFilterConfigForm.get("range").setValidators([]),this.geoFilterConfigForm.get("rangeUnit").setValidators([]),this.defaultPaddingEnable=!0):(this.geoFilterConfigForm.get("centerLatitude").setValidators([O.required,O.min(-90),O.max(90)]),this.geoFilterConfigForm.get("centerLongitude").setValidators([O.required,O.min(-180),O.max(180)]),this.geoFilterConfigForm.get("range").setValidators([O.required,O.min(0)]),this.geoFilterConfigForm.get("rangeUnit").setValidators([O.required]),this.defaultPaddingEnable=!1),t||n!==Mt.POLYGON?this.geoFilterConfigForm.get("polygonsDefinition").setValidators([]):this.geoFilterConfigForm.get("polygonsDefinition").setValidators([O.required]),this.geoFilterConfigForm.get("perimeterKeyName").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})}}e("GpsGeoFilterConfigComponent",Tr),Tr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Tr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Tr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Tr,selector:"tb-filter-node-gps-geofencing-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="geoFilterConfigForm" class="tb-form-panel no-border no-padding">\n  <section class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.coordinate-field-names</div>\n    <section>\n      <div fxLayout="row" fxLayoutGap="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.latitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="latitudeKeyName" required>\n          <mat-error *ngIf="geoFilterConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.latitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.longitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="longitudeKeyName" required>\n          <mat-error *ngIf="geoFilterConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.longitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.coordinate-field-hint</div>\n    </section>\n  </section>\n  <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">\n    <div class="tb-form-panel-title" translate>tb.rulenode.geofence-configuration</div>\n    <section fxLayout="column">\n      <mat-form-field fxFlex class="mat-block" hideRequiredMarker>\n        <mat-label>{{ \'tb.rulenode.perimeter-type\' | translate }}</mat-label>\n        <mat-select formControlName="perimeterType">\n          <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n            {{ perimeterTypeTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div tb-hint-tooltip-icon="{{ geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE\n        ? (\'tb.rulenode.fetch-circle-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoFilterConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoFilterConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'})\n        : (\'tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoFilterConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoFilterConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'}) }}"\n           class="tb-form-row no-border no-padding slide-toggle">\n        <mat-slide-toggle class="mat-slide" formControlName="fetchPerimeterInfoFromMessageMetadata">\n          {{ \'tb.rulenode.fetch-perimeter-info-from-metadata\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field *ngIf="geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value" class="mat-block">\n        <mat-label>{{ \'tb.rulenode.perimeter-key-name\' | translate }}</mat-label>\n        <input matInput formControlName="perimeterKeyName" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'perimeterKeyName\').hasError(\'required\')">\n          {{ \'tb.rulenode.perimeter-key-name-required\' | translate }}\n        </mat-error>\n        <mat-hint>{{ \'tb.rulenode.perimeter-key-name-hint\' | translate }}</mat-hint>\n      </mat-form-field>\n      <div fxLayout="column"\n           *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n                    !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-latitude\' | translate }}</mat-label>\n            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-longitude\' | translate }}</mat-label>\n            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range\' | translate }}</mat-label>\n            <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'range\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range-units\' | translate }}</mat-label>\n            <mat-select formControlName="rangeUnit" required>\n              <mat-option *ngFor="let type of rangeUnits" [value]="type">\n                {{ rangeUnitTranslationMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'rangeUnit\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-units-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n      <mat-form-field class="mat-block" subscriptSizing="dynamic"\n                      *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                         !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <mat-label>{{ \'tb.rulenode.polygon-definition\' | translate }}</mat-label>\n        <input matInput formControlName="polygonsDefinition" required>\n        <mat-hint>{{ \'tb.rulenode.polygon-definition-hint\' | translate }}</mat-hint>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n          {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </section>\n  </section>\n</section>\n',styles:[":host .slide-toggle{margin-bottom:18px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:W.DefaultLayoutGapDirective,selector:"  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]",inputs:["fxLayoutGap","fxLayoutGap.xs","fxLayoutGap.sm","fxLayoutGap.md","fxLayoutGap.lg","fxLayoutGap.xl","fxLayoutGap.lt-sm","fxLayoutGap.lt-md","fxLayoutGap.lt-lg","fxLayoutGap.lt-xl","fxLayoutGap.gt-xs","fxLayoutGap.gt-sm","fxLayoutGap.gt-md","fxLayoutGap.gt-lg"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:R.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Tr,decorators:[{type:n,args:[{selector:"tb-filter-node-gps-geofencing-config",template:'<section [formGroup]="geoFilterConfigForm" class="tb-form-panel no-border no-padding">\n  <section class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.coordinate-field-names</div>\n    <section>\n      <div fxLayout="row" fxLayoutGap="16px">\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.latitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="latitudeKeyName" required>\n          <mat-error *ngIf="geoFilterConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.latitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex="50" class="mat-block">\n          <mat-label>{{ \'tb.rulenode.longitude-field-name\' | translate }}</mat-label>\n          <input matInput formControlName="longitudeKeyName" required>\n          <mat-error *ngIf="geoFilterConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n            {{ \'tb.rulenode.longitude-field-name-required\' | translate }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    <div class="tb-form-hint tb-primary-fill" translate>tb.rulenode.coordinate-field-hint</div>\n    </section>\n  </section>\n  <section class="tb-form-panel stroked" [class.no-padding-bottom]="!defaultPaddingEnable">\n    <div class="tb-form-panel-title" translate>tb.rulenode.geofence-configuration</div>\n    <section fxLayout="column">\n      <mat-form-field fxFlex class="mat-block" hideRequiredMarker>\n        <mat-label>{{ \'tb.rulenode.perimeter-type\' | translate }}</mat-label>\n        <mat-select formControlName="perimeterType">\n          <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n            {{ perimeterTypeTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div tb-hint-tooltip-icon="{{ geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE\n        ? (\'tb.rulenode.fetch-circle-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoFilterConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoFilterConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'})\n        : (\'tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint\'\n            | translate : { perimeterKeyName: geoFilterConfigForm.get(\'perimeterKeyName\').valid\n                              ? geoFilterConfigForm.get(\'perimeterKeyName\').value\n                              : \'ss_perimeter\'}) }}"\n           class="tb-form-row no-border no-padding slide-toggle">\n        <mat-slide-toggle class="mat-slide" formControlName="fetchPerimeterInfoFromMessageMetadata">\n          {{ \'tb.rulenode.fetch-perimeter-info-from-metadata\' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <mat-form-field *ngIf="geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value" class="mat-block">\n        <mat-label>{{ \'tb.rulenode.perimeter-key-name\' | translate }}</mat-label>\n        <input matInput formControlName="perimeterKeyName" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'perimeterKeyName\').hasError(\'required\')">\n          {{ \'tb.rulenode.perimeter-key-name-required\' | translate }}\n        </mat-error>\n        <mat-hint>{{ \'tb.rulenode.perimeter-key-name-hint\' | translate }}</mat-hint>\n      </mat-form-field>\n      <div fxLayout="column"\n           *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n                    !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-latitude\' | translate }}</mat-label>\n            <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.circle-center-longitude\' | translate }}</mat-label>\n            <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n              {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n        <div fxLayout="row" fxLayoutGap="16px">\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range\' | translate }}</mat-label>\n            <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'range\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field fxFlex>\n            <mat-label>{{ \'tb.rulenode.range-units\' | translate }}</mat-label>\n            <mat-select formControlName="rangeUnit" required>\n              <mat-option *ngFor="let type of rangeUnits" [value]="type">\n                {{ rangeUnitTranslationMap.get(type) | translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf="geoFilterConfigForm.get(\'rangeUnit\').hasError(\'required\')">\n              {{ \'tb.rulenode.range-units-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n      <mat-form-field class="mat-block" subscriptSizing="dynamic"\n                      *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                         !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n        <mat-label>{{ \'tb.rulenode.polygon-definition\' | translate }}</mat-label>\n        <input matInput formControlName="polygonsDefinition" required>\n        <mat-hint>{{ \'tb.rulenode.polygon-definition-hint\' | translate }}</mat-hint>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n          {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </section>\n  </section>\n</section>\n',styles:[":host .slide-toggle{margin-bottom:18px}\n",':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Lr extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.messageTypeConfigForm}prepareInputConfig(e){return{messageTypes:fe(e?.messageTypes)?e.messageTypes:null}}onConfigurationSet(e){this.messageTypeConfigForm=this.fb.group({messageTypes:[e.messageTypes,[O.required]]})}}e("MessageTypeConfigComponent",Lr),Lr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Lr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Lr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Lr,selector:"tb-filter-node-message-type-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="messageTypeConfigForm">\n  <tb-message-types-config\n    required\n    [label]="\'tb.rulenode.select-message-types\' | translate"\n    formControlName="messageTypes">\n  </tb-message-types-config>\n</section>\n',dependencies:[{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:_n,selector:"tb-message-types-config",inputs:["required","label","placeholder","disabled"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Lr,decorators:[{type:n,args:[{selector:"tb-filter-node-message-type-config",template:'<section [formGroup]="messageTypeConfigForm">\n  <tb-message-types-config\n    required\n    [label]="\'tb.rulenode.select-message-types\' | translate"\n    formControlName="messageTypes">\n  </tb-message-types-config>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Ir extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.allowedEntityTypes=[C.DEVICE,C.ASSET,C.ENTITY_VIEW,C.TENANT,C.CUSTOMER,C.USER,C.DASHBOARD,C.RULE_CHAIN,C.RULE_NODE,C.EDGE]}configForm(){return this.originatorTypeConfigForm}prepareInputConfig(e){return{originatorTypes:fe(e?.originatorTypes)?e.originatorTypes:null}}onConfigurationSet(e){this.originatorTypeConfigForm=this.fb.group({originatorTypes:[e.originatorTypes,[O.required]]})}}e("OriginatorTypeConfigComponent",Ir),Ir.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ir,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Ir.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Ir,selector:"tb-filter-node-originator-type-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="originatorTypeConfigForm">\n  <tb-entity-type-list fxFlex\n                       formControlName="originatorTypes"\n                       [allowedEntityTypes]="allowedEntityTypes"\n                       [ignoreAuthorityFilter]="true"\n                       [emptyInputPlaceholder]="\'tb.rulenode.add-entity-type\' | translate"\n                       [filledInputPlaceholder]="\'tb.rulenode.add-entity-type\' | translate"\n                       [label]="\'tb.rulenode.select-entity-types\' | translate"\n                       required>\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.entity-type\' | translate } }}">help</mat-icon>\n  </tb-entity-type-list>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:st.EntityTypeListComponent,selector:"tb-entity-type-list",inputs:["required","additionalClasses","appearance","label","floatLabel","disabled","subscriptSizing","allowedEntityTypes","emptyInputPlaceholder","filledInputPlaceholder","ignoreAuthorityFilter"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:W.DefaultFlexDirective,selector:"  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]",inputs:["fxFlex","fxFlex.xs","fxFlex.sm","fxFlex.md","fxFlex.lg","fxFlex.xl","fxFlex.lt-sm","fxFlex.lt-md","fxFlex.lt-lg","fxFlex.lt-xl","fxFlex.gt-xs","fxFlex.gt-sm","fxFlex.gt-md","fxFlex.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ir,decorators:[{type:n,args:[{selector:"tb-filter-node-originator-type-config",template:'<section [formGroup]="originatorTypeConfigForm">\n  <tb-entity-type-list fxFlex\n                       formControlName="originatorTypes"\n                       [allowedEntityTypes]="allowedEntityTypes"\n                       [ignoreAuthorityFilter]="true"\n                       [emptyInputPlaceholder]="\'tb.rulenode.add-entity-type\' | translate"\n                       [filledInputPlaceholder]="\'tb.rulenode.add-entity-type\' | translate"\n                       [label]="\'tb.rulenode.select-entity-types\' | translate"\n                       required>\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.chip-help\' | translate: { inputName: \'tb.rulenode.entity-type\' | translate } }}">help</mat-icon>\n  </tb-entity-type-list>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Sr extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-filter-function"}configForm(){return this.scriptConfigForm}onConfigurationSet(e){this.scriptConfigForm=this.fb.group({scriptLang:[e.scriptLang,[O.required]],jsScript:[e.jsScript,[]],tbelScript:[e.tbelScript,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.scriptConfigForm.get("scriptLang").value;t!==b.TBEL||this.tbelEnabled||(t=b.JS,this.scriptConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.scriptConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.scriptConfigForm.get("jsScript").setValidators(t===b.JS?[O.required]:[]),this.scriptConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.scriptConfigForm.get("tbelScript").setValidators(t===b.TBEL?[O.required]:[]),this.scriptConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=b.JS)),{scriptLang:fe(e?.scriptLang)?e.scriptLang:b.JS,jsScript:fe(e?.jsScript)?e.jsScript:null,tbelScript:fe(e?.tbelScript)?e.tbelScript:null}}testScript(e){const t=this.scriptConfigForm.get("scriptLang").value,n=t===b.JS?"jsScript":"tbelScript",r=t===b.JS?"rulenode/filter_node_script_fn":"rulenode/tbel/filter_node_script_fn",o=this.scriptConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"filter",this.translate.instant("tb.rulenode.filter"),"Filter",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.scriptConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.scriptConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}e("ScriptConfigComponent",Sr),Sr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Sr,deps:[{token:P.Store},{token:R.UntypedFormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Sr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Sr,selector:"tb-filter-node-script-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="scriptConfigForm">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Filter"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/filter_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="Filter"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/filter_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <button mat-button mat-raised-button color="primary" (click)="testScript()">\n    {{ testScriptLabel | translate }}\n  </button>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ce.TbScriptLangComponent,selector:"tb-script-lang",inputs:["disabled"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Sr,decorators:[{type:n,args:[{selector:"tb-filter-node-script-config",template:'<section [formGroup]="scriptConfigForm">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Filter"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/filter_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="Filter"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/filter_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <button mat-button mat-raised-button color="primary" (click)="testScript()">\n    {{ testScriptLabel | translate }}\n  </button>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}});class Nr extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-switch-function"}configForm(){return this.switchConfigForm}onConfigurationSet(e){this.switchConfigForm=this.fb.group({scriptLang:[e.scriptLang,[O.required]],jsScript:[e.jsScript,[]],tbelScript:[e.tbelScript,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.switchConfigForm.get("scriptLang").value;t!==b.TBEL||this.tbelEnabled||(t=b.JS,this.switchConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.switchConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.switchConfigForm.get("jsScript").setValidators(t===b.JS?[O.required]:[]),this.switchConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.switchConfigForm.get("tbelScript").setValidators(t===b.TBEL?[O.required]:[]),this.switchConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=b.JS)),{scriptLang:fe(e?.scriptLang)?e.scriptLang:b.JS,jsScript:fe(e?.jsScript)?e.jsScript:null,tbelScript:fe(e?.tbelScript)?e.tbelScript:null}}testScript(e){const t=this.switchConfigForm.get("scriptLang").value,n=t===b.JS?"jsScript":"tbelScript",r=t===b.JS?"rulenode/switch_node_script_fn":"rulenode/tbel/switch_node_script_fn",o=this.switchConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"switch",this.translate.instant("tb.rulenode.switch"),"Switch",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.switchConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.switchConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}e("SwitchConfigComponent",Nr),Nr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Nr,deps:[{token:P.Store},{token:R.UntypedFormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Nr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Nr,selector:"tb-filter-node-switch-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="switchConfigForm">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="switchConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Switch"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/switch_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="switchConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="Switch"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/switch_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <button mat-button mat-raised-button color="primary" (click)="testScript()">\n    {{ testScriptLabel | translate }}\n  </button>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ce.TbScriptLangComponent,selector:"tb-script-lang",inputs:["disabled"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Nr,decorators:[{type:n,args:[{selector:"tb-filter-node-switch-config",template:'<section [formGroup]="switchConfigForm">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="switchConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Switch"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              helpId="rulenode/switch_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="switchConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="Switch"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              helpId="rulenode/tbel/switch_node_script_fn"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <button mat-button mat-raised-button color="primary" (click)="testScript()">\n    {{ testScriptLabel | translate }}\n  </button>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}});class qr{}e("RuleNodeCoreConfigFilterModule",qr),qr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:qr,deps:[],target:t.ɵɵFactoryTarget.NgModule}),qr.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:qr,declarations:[Fr,kr,Tr,Lr,Ir,Sr,Nr,Cr],imports:[$,M,Jn],exports:[Fr,kr,Tr,Lr,Ir,Sr,Nr,Cr]}),qr.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:qr,imports:[$,M,Jn]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:qr,decorators:[{type:d,args:[{declarations:[Fr,kr,Tr,Lr,Ir,Sr,Nr,Cr],imports:[$,M,Jn],exports:[Fr,kr,Tr,Lr,Ir,Sr,Nr,Cr]}]}]});class Ar extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.originatorSource=It,this.originatorSources=Object.keys(It),this.originatorSourceTranslationMap=St,this.originatorSourceDescTranslationMap=Nt,this.allowedEntityTypes=[C.DEVICE,C.ASSET,C.ENTITY_VIEW,C.USER,C.EDGE]}configForm(){return this.changeOriginatorConfigForm}onConfigurationSet(e){this.changeOriginatorConfigForm=this.fb.group({originatorSource:[e?e.originatorSource:null,[O.required]],entityType:[e?e.entityType:null,[]],entityNamePattern:[e?e.entityNamePattern:null,[]],relationsQuery:[e?e.relationsQuery:null,[]]})}validatorTriggers(){return["originatorSource"]}updateValidators(e){const t=this.changeOriginatorConfigForm.get("originatorSource").value;t===It.RELATED?this.changeOriginatorConfigForm.get("relationsQuery").setValidators([O.required]):this.changeOriginatorConfigForm.get("relationsQuery").setValidators([]),t===It.ENTITY?(this.changeOriginatorConfigForm.get("entityType").setValidators([O.required]),this.changeOriginatorConfigForm.get("entityNamePattern").setValidators([O.required,O.pattern(/.*\S.*/)])):(this.changeOriginatorConfigForm.get("entityType").patchValue(null,{emitEvent:e}),this.changeOriginatorConfigForm.get("entityNamePattern").patchValue(null,{emitEvent:e}),this.changeOriginatorConfigForm.get("entityType").setValidators([]),this.changeOriginatorConfigForm.get("entityNamePattern").setValidators([])),this.changeOriginatorConfigForm.get("relationsQuery").updateValueAndValidity({emitEvent:e}),this.changeOriginatorConfigForm.get("entityType").updateValueAndValidity({emitEvent:e}),this.changeOriginatorConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e})}}e("ChangeOriginatorConfigComponent",Ar),Ar.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ar,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Ar.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Ar,selector:"tb-transformation-node-change-originator-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="changeOriginatorConfigForm" class="tb-form-panel no-border no-padding">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic" hideRequiredMarker>\n    <mat-label translate>tb.rulenode.new-originator</mat-label>\n    <mat-select formControlName="originatorSource" required>\n      <mat-select-trigger>\n        <span *ngIf="originatorSourceTranslationMap.get(changeOriginatorConfigForm.get(\'originatorSource\').value)">\n          {{ originatorSourceTranslationMap.get(changeOriginatorConfigForm.get(\'originatorSource\').value) | translate }}\n        </span>\n      </mat-select-trigger>\n      <mat-option *ngFor="let source of originatorSources" [value]="source">\n        <span matListItemTitle>\n          {{ originatorSourceTranslationMap.get(source) | translate }}\n        </span>\n        <br>\n        <small matListItemMeta style="color: inherit">\n          {{ originatorSourceDescTranslationMap.get(source) | translate }}\n        </small>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div class="tb-form-panel stroked no-padding-bottom"\n        *ngIf="changeOriginatorConfigForm.get(\'originatorSource\').value === \'ENTITY\'">\n    <tb-example-hint [hintText]="\'tb.rulenode.entity-name-pattern-hint\'"\n                      popupHelpLink="rulenode/change_originator_node_fields_templatization">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <tb-entity-type-select\n        showLabel\n        required\n        [allowedEntityTypes] = "allowedEntityTypes"\n        formControlName="entityType"\n        class="mat-mdc-form-field flex">\n      </tb-entity-type-select>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.entity-name-pattern</mat-label>\n        <input required matInput formControlName="entityNamePattern">\n        <mat-error *ngIf="changeOriginatorConfigForm.get(\'entityNamePattern\').hasError(\'required\') ||\n                          changeOriginatorConfigForm.get(\'entityNamePattern\').hasError(\'pattern\')">\n          {{ \'tb.rulenode.entity-name-pattern-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <tb-relations-query-config\n    required\n    *ngIf="changeOriginatorConfigForm.get(\'originatorSource\').value === originatorSource.RELATED"\n    formControlName="relationsQuery">\n  </tb-relations-query-config>\n</section>\n',dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:Se.EntityTypeSelectComponent,selector:"tb-entity-type-select",inputs:["allowedEntityTypes","useAliasEntityTypes","filterAllowedEntityTypes","showLabel","required","disabled","additionEntityTypes"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"directive",type:te.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:Pe.MatListItemTitle,selector:"[matListItemTitle]"},{kind:"directive",type:Pe.MatListItemMeta,selector:"[matListItemMeta]"},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:On,selector:"tb-relations-query-config",inputs:["disabled","required"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ar,decorators:[{type:n,args:[{selector:"tb-transformation-node-change-originator-config",template:'<section [formGroup]="changeOriginatorConfigForm" class="tb-form-panel no-border no-padding">\n  <mat-form-field class="mat-block" subscriptSizing="dynamic" hideRequiredMarker>\n    <mat-label translate>tb.rulenode.new-originator</mat-label>\n    <mat-select formControlName="originatorSource" required>\n      <mat-select-trigger>\n        <span *ngIf="originatorSourceTranslationMap.get(changeOriginatorConfigForm.get(\'originatorSource\').value)">\n          {{ originatorSourceTranslationMap.get(changeOriginatorConfigForm.get(\'originatorSource\').value) | translate }}\n        </span>\n      </mat-select-trigger>\n      <mat-option *ngFor="let source of originatorSources" [value]="source">\n        <span matListItemTitle>\n          {{ originatorSourceTranslationMap.get(source) | translate }}\n        </span>\n        <br>\n        <small matListItemMeta style="color: inherit">\n          {{ originatorSourceDescTranslationMap.get(source) | translate }}\n        </small>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div class="tb-form-panel stroked no-padding-bottom"\n        *ngIf="changeOriginatorConfigForm.get(\'originatorSource\').value === \'ENTITY\'">\n    <tb-example-hint [hintText]="\'tb.rulenode.entity-name-pattern-hint\'"\n                      popupHelpLink="rulenode/change_originator_node_fields_templatization">\n    </tb-example-hint>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <tb-entity-type-select\n        showLabel\n        required\n        [allowedEntityTypes] = "allowedEntityTypes"\n        formControlName="entityType"\n        class="mat-mdc-form-field flex">\n      </tb-entity-type-select>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.entity-name-pattern</mat-label>\n        <input required matInput formControlName="entityNamePattern">\n        <mat-error *ngIf="changeOriginatorConfigForm.get(\'entityNamePattern\').hasError(\'required\') ||\n                          changeOriginatorConfigForm.get(\'entityNamePattern\').hasError(\'pattern\')">\n          {{ \'tb.rulenode.entity-name-pattern-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <tb-relations-query-config\n    required\n    *ngIf="changeOriginatorConfigForm.get(\'originatorSource\').value === originatorSource.RELATED"\n    formControlName="relationsQuery">\n  </tb-relations-query-config>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Mr extends g{constructor(e,t,n,r){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=n,this.translate=r,this.tbelEnabled=ce(this.store).tbelEnabled,this.scriptLanguage=b,this.changeScript=new l,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-transformer-function"}configForm(){return this.scriptConfigForm}onConfigurationSet(e){this.scriptConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:b.JS,[O.required]],jsScript:[e?e.jsScript:null,[O.required]],tbelScript:[e?e.tbelScript:null,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.scriptConfigForm.get("scriptLang").value;t!==b.TBEL||this.tbelEnabled||(t=b.JS,this.scriptConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.scriptConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.scriptConfigForm.get("jsScript").setValidators(t===b.JS?[O.required]:[]),this.scriptConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.scriptConfigForm.get("tbelScript").setValidators(t===b.TBEL?[O.required]:[]),this.scriptConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=b.JS)),e}testScript(e){const t=this.scriptConfigForm.get("scriptLang").value,n=t===b.JS?"jsScript":"tbelScript",r=t===b.JS?"rulenode/transformation_node_script_fn":"rulenode/tbel/transformation_node_script_fn",o=this.scriptConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(o,"update",this.translate.instant("tb.rulenode.transformer"),"Transform",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.scriptConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.scriptConfigForm.get("scriptLang").value===b.JS&&this.jsFuncComponent.validateOnSubmit()}}e("TransformScriptConfigComponent",Mr),Mr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Mr,deps:[{token:P.Store},{token:R.FormBuilder},{token:ge.NodeScriptTestService},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Mr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Mr,selector:"tb-transformation-node-script-config",viewQueries:[{propertyName:"jsFuncComponent",first:!0,predicate:["jsFuncComponent"],descendants:!0},{propertyName:"tbelFuncComponent",first:!0,predicate:["tbelFuncComponent"],descendants:!0}],usesInheritance:!0,ngImport:t,template:'<section [formGroup]="scriptConfigForm">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Transform"\n              helpId="rulenode/transformation_node_script_fn"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="Transform"\n              helpId="rulenode/tbel/transformation_node_script_fn"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <div>\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ testScriptLabel | translate }}\n    </button>\n  </div>\n</section>\n',dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ve.JsFuncComponent,selector:"tb-js-func",inputs:["functionTitle","functionName","functionArgs","validationArgs","resultType","disabled","fillHeight","minHeight","editorCompleter","propertyHighlightRules","objectHighlightRules","globalVariables","disableUndefinedCheck","helpId","scriptLanguage","hideBrackets","noValidate","required"]},{kind:"component",type:X.MatButton,selector:"    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:X.MatIconButton,selector:"button[mat-icon-button]",inputs:["disabled","disableRipple","color"],exportAs:["matButton"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Ce.TbScriptLangComponent,selector:"tb-script-lang",inputs:["disabled"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Mr,decorators:[{type:n,args:[{selector:"tb-transformation-node-script-config",template:'<section [formGroup]="scriptConfigForm">\n  <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.JS"\n              #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Transform"\n              helpId="rulenode/transformation_node_script_fn"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <tb-js-func *ngIf="scriptConfigForm.get(\'scriptLang\').value === scriptLanguage.TBEL"\n              #tbelFuncComponent\n              formControlName="tbelScript"\n              functionName="Transform"\n              helpId="rulenode/tbel/transformation_node_script_fn"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              [disableUndefinedCheck]="true"\n              [scriptLanguage]="scriptLanguage.TBEL"\n              noValidate="true">\n    <button toolbarSuffixButton\n            mat-icon-button\n            matTooltip="{{ testScriptLabel | translate }}"\n            matTooltipPosition="above"\n            class="tb-mat-32"\n            (click)="testScript()">\n      <mat-icon class="material-icons" color="primary">bug_report</mat-icon>\n    </button>\n  </tb-js-func>\n  <div>\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ testScriptLabel | translate }}\n    </button>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:ge.NodeScriptTestService},{type:Z.TranslateService}]},propDecorators:{jsFuncComponent:[{type:u,args:["jsFuncComponent",{static:!1}]}],tbelFuncComponent:[{type:u,args:["tbelFuncComponent",{static:!1}]}]}});
-                /**
-                 * @license
-                 * Copyright Google LLC All Rights Reserved.
-                 *
-                 * Use of this source code is governed by an MIT-style license that can be
-                 * found in the LICENSE file at https://angular.io/license
-                 */
-                const Er=mt({passive:!0});class wr{constructor(e,t){this._platform=e,this._ngZone=t,this._monitoredElements=new Map}monitor(e){if(!this._platform.isBrowser)return se;const t=we(e),n=this._monitoredElements.get(t);if(n)return n.subject;const r=new ae,o="cdk-text-field-autofilled",a=e=>{"cdk-text-field-autofill-start"!==e.animationName||t.classList.contains(o)?"cdk-text-field-autofill-end"===e.animationName&&t.classList.contains(o)&&(t.classList.remove(o),this._ngZone.run((()=>r.next({target:e.target,isAutofilled:!1})))):(t.classList.add(o),this._ngZone.run((()=>r.next({target:e.target,isAutofilled:!0}))))};return this._ngZone.runOutsideAngular((()=>{t.addEventListener("animationstart",a,Er),t.classList.add("cdk-text-field-autofill-monitored")})),this._monitoredElements.set(t,{subject:r,unlisten:()=>{t.removeEventListener("animationstart",a,Er)}}),r}stopMonitoring(e){const t=we(e),n=this._monitoredElements.get(t);n&&(n.unlisten(),n.subject.complete(),t.classList.remove("cdk-text-field-autofill-monitored"),t.classList.remove("cdk-text-field-autofilled"),this._monitoredElements.delete(t))}ngOnDestroy(){this._monitoredElements.forEach(((e,t)=>this.stopMonitoring(t)))}}wr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:wr,deps:[{token:pt.Platform},{token:t.NgZone}],target:t.ɵɵFactoryTarget.Injectable}),wr.ɵprov=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:wr,providedIn:"root"}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:wr,decorators:[{type:o,args:[{providedIn:"root"}]}],ctorParameters:function(){return[{type:pt.Platform},{type:t.NgZone}]}});class Gr{constructor(e,t){this._elementRef=e,this._autofillMonitor=t,this.cdkAutofill=new l}ngOnInit(){this._autofillMonitor.monitor(this._elementRef).subscribe((e=>this.cdkAutofill.emit(e)))}ngOnDestroy(){this._autofillMonitor.stopMonitoring(this._elementRef)}}Gr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Gr,deps:[{token:t.ElementRef},{token:wr}],target:t.ɵɵFactoryTarget.Directive}),Gr.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"15.2.0-rc.0",type:Gr,selector:"[cdkAutofill]",outputs:{cdkAutofill:"cdkAutofill"},ngImport:t}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Gr,decorators:[{type:s,args:[{selector:"[cdkAutofill]"}]}],ctorParameters:function(){return[{type:t.ElementRef},{type:wr}]},propDecorators:{cdkAutofill:[{type:p}]}});
-                /**
-                 * @license
-                 * Copyright Google LLC All Rights Reserved.
-                 *
-                 * Use of this source code is governed by an MIT-style license that can be
-                 * found in the LICENSE file at https://angular.io/license
-                 */
-                class Dr{get minRows(){return this._minRows}set minRows(e){this._minRows=Ge(e),this._setMinHeight()}get maxRows(){return this._maxRows}set maxRows(e){this._maxRows=Ge(e),this._setMaxHeight()}get enabled(){return this._enabled}set enabled(e){e=Ee(e),this._enabled!==e&&((this._enabled=e)?this.resizeToFitContent(!0):this.reset())}get placeholder(){return this._textareaElement.placeholder}set placeholder(e){this._cachedPlaceholderHeight=void 0,e?this._textareaElement.setAttribute("placeholder",e):this._textareaElement.removeAttribute("placeholder"),this._cacheTextareaPlaceholderHeight()}constructor(e,t,n,r){this._elementRef=e,this._platform=t,this._ngZone=n,this._destroyed=new ae,this._enabled=!0,this._previousMinRows=-1,this._isViewInited=!1,this._handleFocusEvent=e=>{this._hasFocus="focus"===e.type},this._document=r,this._textareaElement=this._elementRef.nativeElement}_setMinHeight(){const e=this.minRows&&this._cachedLineHeight?this.minRows*this._cachedLineHeight+"px":null;e&&(this._textareaElement.style.minHeight=e)}_setMaxHeight(){const e=this.maxRows&&this._cachedLineHeight?this.maxRows*this._cachedLineHeight+"px":null;e&&(this._textareaElement.style.maxHeight=e)}ngAfterViewInit(){this._platform.isBrowser&&(this._initialHeight=this._textareaElement.style.height,this.resizeToFitContent(),this._ngZone.runOutsideAngular((()=>{const e=this._getWindow();me(e,"resize").pipe(Ue(16),ze(this._destroyed)).subscribe((()=>this.resizeToFitContent(!0))),this._textareaElement.addEventListener("focus",this._handleFocusEvent),this._textareaElement.addEventListener("blur",this._handleFocusEvent)})),this._isViewInited=!0,this.resizeToFitContent(!0))}ngOnDestroy(){this._textareaElement.removeEventListener("focus",this._handleFocusEvent),this._textareaElement.removeEventListener("blur",this._handleFocusEvent),this._destroyed.next(),this._destroyed.complete()}_cacheTextareaLineHeight(){if(this._cachedLineHeight)return;let e=this._textareaElement.cloneNode(!1);e.rows=1,e.style.position="absolute",e.style.visibility="hidden",e.style.border="none",e.style.padding="0",e.style.height="",e.style.minHeight="",e.style.maxHeight="",e.style.overflow="hidden",this._textareaElement.parentNode.appendChild(e),this._cachedLineHeight=e.clientHeight,e.remove(),this._setMinHeight(),this._setMaxHeight()}_measureScrollHeight(){const e=this._textareaElement,t=e.style.marginBottom||"",n=this._platform.FIREFOX,r=n&&this._hasFocus,o=n?"cdk-textarea-autosize-measuring-firefox":"cdk-textarea-autosize-measuring";r&&(e.style.marginBottom=`${e.clientHeight}px`),e.classList.add(o);const a=e.scrollHeight-4;return e.classList.remove(o),r&&(e.style.marginBottom=t),a}_cacheTextareaPlaceholderHeight(){if(!this._isViewInited||null!=this._cachedPlaceholderHeight)return;if(!this.placeholder)return void(this._cachedPlaceholderHeight=0);const e=this._textareaElement.value;this._textareaElement.value=this._textareaElement.placeholder,this._cachedPlaceholderHeight=this._measureScrollHeight(),this._textareaElement.value=e}ngDoCheck(){this._platform.isBrowser&&this.resizeToFitContent()}resizeToFitContent(e=!1){if(!this._enabled)return;if(this._cacheTextareaLineHeight(),this._cacheTextareaPlaceholderHeight(),!this._cachedLineHeight)return;const t=this._elementRef.nativeElement,n=t.value;if(!e&&this._minRows===this._previousMinRows&&n===this._previousValue)return;const r=this._measureScrollHeight(),o=Math.max(r,this._cachedPlaceholderHeight||0);t.style.height=`${o}px`,this._ngZone.runOutsideAngular((()=>{"undefined"!=typeof requestAnimationFrame?requestAnimationFrame((()=>this._scrollToCaretPosition(t))):setTimeout((()=>this._scrollToCaretPosition(t)))})),this._previousValue=n,this._previousMinRows=this._minRows}reset(){void 0!==this._initialHeight&&(this._textareaElement.style.height=this._initialHeight)}_noopInputHandler(){}_getDocument(){return this._document||document}_getWindow(){return this._getDocument().defaultView||window}_scrollToCaretPosition(e){const{selectionStart:t,selectionEnd:n}=e;!this._destroyed.isStopped&&this._hasFocus&&e.setSelectionRange(t,n)}}Dr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Dr,deps:[{token:t.ElementRef},{token:pt.Platform},{token:t.NgZone},{token:j,optional:!0}],target:t.ɵɵFactoryTarget.Directive}),Dr.ɵdir=t.ɵɵngDeclareDirective({minVersion:"14.0.0",version:"15.2.0-rc.0",type:Dr,selector:"textarea[cdkTextareaAutosize]",inputs:{minRows:["cdkAutosizeMinRows","minRows"],maxRows:["cdkAutosizeMaxRows","maxRows"],enabled:["cdkTextareaAutosize","enabled"],placeholder:"placeholder"},host:{attributes:{rows:"1"},listeners:{input:"_noopInputHandler()"},classAttribute:"cdk-textarea-autosize"},exportAs:["cdkTextareaAutosize"],ngImport:t}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Dr,decorators:[{type:s,args:[{selector:"textarea[cdkTextareaAutosize]",exportAs:"cdkTextareaAutosize",host:{class:"cdk-textarea-autosize",rows:"1","(input)":"_noopInputHandler()"}}]}],ctorParameters:function(){return[{type:t.ElementRef},{type:pt.Platform},{type:t.NgZone},{type:void 0,decorators:[{type:i},{type:a,args:[j]}]}]},propDecorators:{minRows:[{type:m,args:["cdkAutosizeMinRows"]}],maxRows:[{type:m,args:["cdkAutosizeMaxRows"]}],enabled:[{type:m,args:["cdkTextareaAutosize"]}],placeholder:[{type:m}]}});
-                /**
-                 * @license
-                 * Copyright Google LLC All Rights Reserved.
-                 *
-                 * Use of this source code is governed by an MIT-style license that can be
-                 * found in the LICENSE file at https://angular.io/license
-                 */
-                class Vr{}Vr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Vr,deps:[],target:t.ɵɵFactoryTarget.NgModule}),Vr.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.0-rc.0",ngImport:t,type:Vr,declarations:[Gr,Dr],exports:[Gr,Dr]}),Vr.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Vr}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.0-rc.0",ngImport:t,type:Vr,decorators:[{type:d,args:[{declarations:[Gr,Dr],exports:[Gr,Dr]}]}]});class Pr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.mailBodyTypes=[{name:"tb.mail-body-type.plain-text",description:"tb.mail-body-type.plain-text-description",value:"false"},{name:"tb.mail-body-type.html",description:"tb.mail-body-type.html-text-description",value:"true"},{name:"tb.mail-body-type.use-body-type-template",description:"tb.mail-body-type.dynamic-text-description",value:"dynamic"}]}configForm(){return this.toEmailConfigForm}onConfigurationSet(e){this.toEmailConfigForm=this.fb.group({fromTemplate:[e?e.fromTemplate:null,[O.required]],toTemplate:[e?e.toTemplate:null,[O.required]],ccTemplate:[e?e.ccTemplate:null,[]],bccTemplate:[e?e.bccTemplate:null,[]],subjectTemplate:[e?e.subjectTemplate:null,[O.required]],mailBodyType:[e?e.mailBodyType:null],isHtmlTemplate:[e?e.isHtmlTemplate:null,[O.required]],bodyTemplate:[e?e.bodyTemplate:null,[O.required]]})}prepareInputConfig(e){return{fromTemplate:fe(e?.fromTemplate)?e.fromTemplate:null,toTemplate:fe(e?.toTemplate)?e.toTemplate:null,ccTemplate:fe(e?.ccTemplate)?e.ccTemplate:null,bccTemplate:fe(e?.bccTemplate)?e.bccTemplate:null,subjectTemplate:fe(e?.subjectTemplate)?e.subjectTemplate:null,mailBodyType:fe(e?.mailBodyType)?e.mailBodyType:null,isHtmlTemplate:fe(e?.isHtmlTemplate)?e.isHtmlTemplate:null,bodyTemplate:fe(e?.bodyTemplate)?e.bodyTemplate:null}}updateValidators(e){"dynamic"===this.toEmailConfigForm.get("mailBodyType").value?this.toEmailConfigForm.get("isHtmlTemplate").enable({emitEvent:!1}):this.toEmailConfigForm.get("isHtmlTemplate").disable({emitEvent:!1}),this.toEmailConfigForm.get("isHtmlTemplate").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["mailBodyType"]}getBodyTypeName(){return this.mailBodyTypes.find((e=>e.value===this.toEmailConfigForm.get("mailBodyType").value)).name}}e("ToEmailConfigComponent",Pr),Pr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Pr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Pr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Pr,selector:"tb-transformation-node-to-email-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="toEmailConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.email-sender</div>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex" subscriptSizing="dynamic">\n        <mat-label translate>tb.rulenode.from-template</mat-label>\n        <input required matInput formControlName="fromTemplate">\n        <mat-hint align="start">\n          {{ \'tb.rulenode.email-from-template-hint\' | translate }}\n        </mat-hint>\n        <mat-hint align="end">\n          <div class="input-bottom-double-hint">\n            <div class="see-example"\n                hintMode\n                tb-help-popup="{{\'rulenode/to_email_node_fields_templatization\'}}"\n                tb-help-popup-placement="right"\n                trigger-style="letter-spacing:0.25px; font-size:12px;"\n                [tb-help-popup-style]="{maxWidth: \'820px\'}"\n                trigger-text="{{ \'tb.key-val.see-examples\' | translate }}"></div>\n          </div>\n        </mat-hint>\n        <mat-error *ngIf="toEmailConfigForm.get(\'fromTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.from-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel no-padding no-border">\n      <div class="tb-form-panel-title" translate>tb.rulenode.recipients</div>\n      <tb-example-hint [hintText]="\'tb.rulenode.recipients-block-main-hint\' | translate"\n                        popupHelpLink="rulenode/to_email_node_fields_templatization">\n      </tb-example-hint>\n    </div>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.to-template</mat-label>\n        <textarea required\n                  matInput\n                  class="tb-enable-vertical-resize"\n                  formControlName="toTemplate"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n        <mat-error *ngIf="toEmailConfigForm.get(\'toTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.to-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.cc-template</mat-label>\n        <textarea matInput\n                  formControlName="ccTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.bcc-template</mat-label>\n        <textarea matInput\n                  formControlName="bccTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.message-subject-and-content</div>\n    <tb-example-hint [hintText]="\'tb.rulenode.kv-map-pattern-hint\' | translate"\n                      popupHelpLink="rulenode/to_email_node_fields_templatization">\n    </tb-example-hint>\n    <section>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.subject-template</mat-label>\n        <textarea required\n                  matInput\n                  formControlName="subjectTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n        <mat-error *ngIf="toEmailConfigForm.get(\'subjectTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.subject-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.mail-body-type</mat-label>\n        <mat-select formControlName="mailBodyType">\n          <mat-select-trigger>\n            <span *ngIf="toEmailConfigForm.get(\'mailBodyType\').value">\n              {{ getBodyTypeName() | translate }}\n            </span>\n          </mat-select-trigger>\n          <mat-option *ngFor="let type of mailBodyTypes" [value]="type.value">\n            <span matListItemTitle>\n              {{ type.name | translate }}\n            </span>\n            <br>\n            <small matListItemMeta style="color: inherit">\n              {{ type.description | translate }}\n            </small>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="mat-block" *ngIf="toEmailConfigForm.get(\'mailBodyType\').value === \'dynamic\'">\n        <mat-label translate>tb.rulenode.body-type-template</mat-label>\n        <input required matInput formControlName="isHtmlTemplate">\n        <mat-hint translate>tb.mail-body-type.after-template-evaluation-hint</mat-hint>\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.body-template</mat-label>\n        <textarea required\n                  matInput\n                  formControlName="bodyTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="2"></textarea>\n        <mat-error *ngIf="toEmailConfigForm.get(\'bodyTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.body-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </section>\n  </div>\n</section>\n',styles:[":host .input-bottom-double-hint{display:inline-flex}:host .input-bottom-double-hint .see-example{flex-shrink:0;padding-right:16px}:host textarea.tb-enable-vertical-resize{resize:vertical}\n"],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:de.HelpPopupComponent,selector:"[tb-help-popup], [tb-help-popup-content]",inputs:["tb-help-popup","tb-help-popup-content","trigger-text","trigger-style","tb-help-popup-placement","tb-help-popup-style","hintMode"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Dr,selector:"textarea[cdkTextareaAutosize]",inputs:["cdkAutosizeMinRows","cdkAutosizeMaxRows","cdkTextareaAutosize","placeholder"],exportAs:["cdkTextareaAutosize"]},{kind:"component",type:te.MatSelect,selector:"mat-select",inputs:["disabled","disableRipple","tabIndex","hideSingleSelectionIndicator"],exportAs:["matSelect"]},{kind:"directive",type:te.MatSelectTrigger,selector:"mat-select-trigger"},{kind:"component",type:ne.MatOption,selector:"mat-option",exportAs:["matOption"]},{kind:"directive",type:Pe.MatListItemTitle,selector:"[matListItemTitle]"},{kind:"directive",type:Pe.MatListItemMeta,selector:"[matListItemMeta]"},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Pr,decorators:[{type:n,args:[{selector:"tb-transformation-node-to-email-config",template:'<section [formGroup]="toEmailConfigForm" class="tb-form-panel no-border no-padding">\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.email-sender</div>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex" subscriptSizing="dynamic">\n        <mat-label translate>tb.rulenode.from-template</mat-label>\n        <input required matInput formControlName="fromTemplate">\n        <mat-hint align="start">\n          {{ \'tb.rulenode.email-from-template-hint\' | translate }}\n        </mat-hint>\n        <mat-hint align="end">\n          <div class="input-bottom-double-hint">\n            <div class="see-example"\n                hintMode\n                tb-help-popup="{{\'rulenode/to_email_node_fields_templatization\'}}"\n                tb-help-popup-placement="right"\n                trigger-style="letter-spacing:0.25px; font-size:12px;"\n                [tb-help-popup-style]="{maxWidth: \'820px\'}"\n                trigger-text="{{ \'tb.key-val.see-examples\' | translate }}"></div>\n          </div>\n        </mat-hint>\n        <mat-error *ngIf="toEmailConfigForm.get(\'fromTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.from-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel no-padding no-border">\n      <div class="tb-form-panel-title" translate>tb.rulenode.recipients</div>\n      <tb-example-hint [hintText]="\'tb.rulenode.recipients-block-main-hint\' | translate"\n                        popupHelpLink="rulenode/to_email_node_fields_templatization">\n      </tb-example-hint>\n    </div>\n    <div class="tb-form-row no-border no-padding tb-standard-fields">\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.to-template</mat-label>\n        <textarea required\n                  matInput\n                  class="tb-enable-vertical-resize"\n                  formControlName="toTemplate"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n        <mat-error *ngIf="toEmailConfigForm.get(\'toTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.to-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.cc-template</mat-label>\n        <textarea matInput\n                  formControlName="ccTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n      </mat-form-field>\n      <mat-form-field class="flex">\n        <mat-label translate>tb.rulenode.bcc-template</mat-label>\n        <textarea matInput\n                  formControlName="bccTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n  <div class="tb-form-panel stroked">\n    <div class="tb-form-panel-title" translate>tb.rulenode.message-subject-and-content</div>\n    <tb-example-hint [hintText]="\'tb.rulenode.kv-map-pattern-hint\' | translate"\n                      popupHelpLink="rulenode/to_email_node_fields_templatization">\n    </tb-example-hint>\n    <section>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.subject-template</mat-label>\n        <textarea required\n                  matInput\n                  formControlName="subjectTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="1"></textarea>\n        <mat-error *ngIf="toEmailConfigForm.get(\'subjectTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.subject-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.mail-body-type</mat-label>\n        <mat-select formControlName="mailBodyType">\n          <mat-select-trigger>\n            <span *ngIf="toEmailConfigForm.get(\'mailBodyType\').value">\n              {{ getBodyTypeName() | translate }}\n            </span>\n          </mat-select-trigger>\n          <mat-option *ngFor="let type of mailBodyTypes" [value]="type.value">\n            <span matListItemTitle>\n              {{ type.name | translate }}\n            </span>\n            <br>\n            <small matListItemMeta style="color: inherit">\n              {{ type.description | translate }}\n            </small>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class="mat-block" *ngIf="toEmailConfigForm.get(\'mailBodyType\').value === \'dynamic\'">\n        <mat-label translate>tb.rulenode.body-type-template</mat-label>\n        <input required matInput formControlName="isHtmlTemplate">\n        <mat-hint translate>tb.mail-body-type.after-template-evaluation-hint</mat-hint>\n      </mat-form-field>\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.body-template</mat-label>\n        <textarea required\n                  matInput\n                  formControlName="bodyTemplate"\n                  class="tb-enable-vertical-resize"\n                  cdkTextareaAutosize\n                  cdkAutosizeMinRows="2"></textarea>\n        <mat-error *ngIf="toEmailConfigForm.get(\'bodyTemplate\').hasError(\'required\')">\n          {{ \'tb.rulenode.body-template-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </section>\n  </div>\n</section>\n',styles:[":host .input-bottom-double-hint{display:inline-flex}:host .input-bottom-double-hint .see-example{flex-shrink:0;padding-right:16px}:host textarea.tb-enable-vertical-resize{resize:vertical}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Rr extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.copyFrom=[],this.translation=sn;for(const e of this.translation.keys())this.copyFrom.push({value:e,name:this.translate.instant(this.translation.get(e))})}onConfigurationSet(e){this.copyKeysConfigForm=this.fb.group({copyFrom:[e.copyFrom,[O.required]],keys:[e?e.keys:null,[O.required]]})}configForm(){return this.copyKeysConfigForm}prepareInputConfig(e){let t;return t=fe(e?.fromMetadata)?e.copyFrom?ln.METADATA:ln.DATA:fe(e?.copyFrom)?e.copyFrom:ln.DATA,{keys:fe(e?.keys)?e.keys:null,copyFrom:t}}}e("CopyKeysConfigComponent",Rr),Rr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Rr,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Rr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Rr,selector:"tb-transformation-node-copy-keys-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="copyKeysConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-msg-metadata-chip\n    [labelText]="(\'tb.key-val.copy-key-values-from\' | translate)"\n    [translation]="translation"\n    formControlName="copyFrom">\n  </tb-msg-metadata-chip>\n  <tb-string-items-list class="mat-block"\n                        required\n                        [label]="\'tb.rulenode.keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-key\' | translate"\n                        [requiredText]="\'tb.key-val.at-least-one-key-error\' | translate"\n                        formControlName="keys">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.use-regular-expression-hint\' | translate }}">\n      help\n    </mat-icon>\n  </tb-string-items-list>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:et.StringItemsListComponent,selector:"tb-string-items-list",inputs:["required","disabled","label","placeholder","hint","requiredText","floatLabel","appearance","editable","subscriptSizing","predefinedValues"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Rr,decorators:[{type:n,args:[{selector:"tb-transformation-node-copy-keys-config",template:'<section [formGroup]="copyKeysConfigForm" class="tb-form-panel no-padding no-border">\n  <tb-msg-metadata-chip\n    [labelText]="(\'tb.key-val.copy-key-values-from\' | translate)"\n    [translation]="translation"\n    formControlName="copyFrom">\n  </tb-msg-metadata-chip>\n  <tb-string-items-list class="mat-block"\n                        required\n                        [label]="\'tb.rulenode.keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-key\' | translate"\n                        [requiredText]="\'tb.key-val.at-least-one-key-error\' | translate"\n                        formControlName="keys">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.use-regular-expression-hint\' | translate }}">\n      help\n    </mat-icon>\n  </tb-string-items-list>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class Or extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.renameIn=[],this.translation=pn;for(const e of this.translation.keys())this.renameIn.push({value:e,name:this.translate.instant(this.translation.get(e))})}configForm(){return this.renameKeysConfigForm}onConfigurationSet(e){this.renameKeysConfigForm=this.fb.group({renameIn:[e?e.renameIn:null,[O.required]],renameKeysMapping:[e?e.renameKeysMapping:null,[O.required]]})}prepareInputConfig(e){let t;return t=fe(e?.fromMetadata)?e.fromMetadata?ln.METADATA:ln.DATA:fe(e?.renameIn)?e?.renameIn:ln.DATA,{renameKeysMapping:fe(e?.renameKeysMapping)?e.renameKeysMapping:null,renameIn:t}}}e("RenameKeysConfigComponent",Or),Or.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Or,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Or.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Or,selector:"tb-transformation-node-rename-keys-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="renameKeysConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title" translate>tb.rulenode.rename-keys-in</div>\n  <div class="fx-centered">\n    <div class="fetch-to-data-toggle">\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="renameIn" appearance="fill">\n        <tb-toggle-option *ngFor="let data of renameIn" [value]="data.value">\n          {{ data.name }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n  </div>\n  <tb-kv-map-config\n    required\n    labelText="{{ translation.get(renameKeysConfigForm.get(\'renameIn\').value) | translate }} {{\'tb.rulenode.keys-mapping\' | translate}}"\n    formControlName="renameKeysMapping"\n    uniqueKeyValuePairValidator\n    requiredText="{{\'tb.rulenode.attr-mapping-required\' | translate}}"\n    keyText="{{\'tb.rulenode.current-key-name\' | translate}}"\n    keyRequiredText="{{\'tb.rulenode.key-name-required\' | translate}}"\n    valText="{{\'tb.rulenode.new-key-name\' | translate}}"\n    valRequiredText="{{\'tb.rulenode.new-key-name-required\' | translate}}">\n  </tb-kv-map-config>\n</section>\n',styles:[":host .fetch-to-data-toggle{max-width:420px;width:100%}:host .fx-centered{display:flex;width:100%;justify-content:space-around}\n"],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:Pn,selector:"tb-kv-map-config",inputs:["disabled","uniqueKeyValuePairValidator","labelText","requiredText","keyText","keyRequiredText","valText","valRequiredText","hintText","popupHelpLink","required"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Or,decorators:[{type:n,args:[{selector:"tb-transformation-node-rename-keys-config",template:'<section [formGroup]="renameKeysConfigForm" class="tb-form-panel stroked">\n  <div class="tb-form-panel-title" translate>tb.rulenode.rename-keys-in</div>\n  <div class="fx-centered">\n    <div class="fetch-to-data-toggle">\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="renameIn" appearance="fill">\n        <tb-toggle-option *ngFor="let data of renameIn" [value]="data.value">\n          {{ data.name }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n    </div>\n  </div>\n  <tb-kv-map-config\n    required\n    labelText="{{ translation.get(renameKeysConfigForm.get(\'renameIn\').value) | translate }} {{\'tb.rulenode.keys-mapping\' | translate}}"\n    formControlName="renameKeysMapping"\n    uniqueKeyValuePairValidator\n    requiredText="{{\'tb.rulenode.attr-mapping-required\' | translate}}"\n    keyText="{{\'tb.rulenode.current-key-name\' | translate}}"\n    keyRequiredText="{{\'tb.rulenode.key-name-required\' | translate}}"\n    valText="{{\'tb.rulenode.new-key-name\' | translate}}"\n    valRequiredText="{{\'tb.rulenode.new-key-name-required\' | translate}}">\n  </tb-kv-map-config>\n</section>\n',styles:[":host .fetch-to-data-toggle{max-width:420px;width:100%}:host .fx-centered{display:flex;width:100%;justify-content:space-around}\n"]}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class _r extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.jsonPathConfigForm}onConfigurationSet(e){this.jsonPathConfigForm=this.fb.group({jsonPath:[e?e.jsonPath:null,[O.required]]})}}e("NodeJsonPathConfigComponent",_r),_r.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:_r,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),_r.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:_r,selector:"tb-transformation-node-json-path-config",usesInheritance:!0,ngImport:t,template:"<section [formGroup]=\"jsonPathConfigForm\">\n  <mat-form-field subscriptSizing=\"dynamic\" class=\"mat-block\">\n    <mat-label>{{ 'tb.rulenode.json-path-expression' | translate }}</mat-label>\n    <input matInput formControlName=\"jsonPath\" required/>\n    <mat-hint>{{ 'tb.rulenode.json-path-expression-hint' | translate }}</mat-hint>\n    <mat-error *ngIf=\"jsonPathConfigForm.get('jsonPath').hasError('required')\">{{ 'tb.rulenode.json-path-expression-required' | translate }}</mat-error>\n  </mat-form-field>\n</section>\n",dependencies:[{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatHint,selector:"mat-hint",inputs:["align","id"]},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:_r,decorators:[{type:n,args:[{selector:"tb-transformation-node-json-path-config",template:"<section [formGroup]=\"jsonPathConfigForm\">\n  <mat-form-field subscriptSizing=\"dynamic\" class=\"mat-block\">\n    <mat-label>{{ 'tb.rulenode.json-path-expression' | translate }}</mat-label>\n    <input matInput formControlName=\"jsonPath\" required/>\n    <mat-hint>{{ 'tb.rulenode.json-path-expression-hint' | translate }}</mat-hint>\n    <mat-error *ngIf=\"jsonPathConfigForm.get('jsonPath').hasError('required')\">{{ 'tb.rulenode.json-path-expression-required' | translate }}</mat-error>\n  </mat-form-field>\n</section>\n"}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Br extends g{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.deleteFrom=[],this.translation=mn;for(const e of this.translation.keys())this.deleteFrom.push({value:e,name:this.translate.instant(this.translation.get(e))})}onConfigurationSet(e){this.deleteKeysConfigForm=this.fb.group({deleteFrom:[e.deleteFrom,[O.required]],keys:[e?e.keys:null,[O.required]]})}prepareInputConfig(e){let t;return t=fe(e?.fromMetadata)?e.fromMetadata?ln.METADATA:ln.DATA:fe(e?.deleteFrom)?e?.deleteFrom:ln.DATA,{keys:fe(e?.keys)?e.keys:null,deleteFrom:t}}configForm(){return this.deleteKeysConfigForm}}e("DeleteKeysConfigComponent",Br),Br.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Br,deps:[{token:P.Store},{token:R.FormBuilder},{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.Component}),Br.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Br,selector:"tb-transformation-node-delete-keys-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deleteKeysConfigForm" class="tb-form-panel no-border no-padding">\n  <tb-msg-metadata-chip\n    [labelText]="(\'tb.key-val.delete-key-values-from\' | translate)"\n    formControlName="deleteFrom">\n  </tb-msg-metadata-chip>\n  <tb-string-items-list class="mat-block"\n                        required\n                        [label]="\'tb.rulenode.keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-key\' | translate"\n                        [requiredText]="\'tb.key-val.at-least-one-key-error\' | translate"\n                        formControlName="keys">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.use-regular-expression-delete-hint\' | translate }}">\n      help\n    </mat-icon>\n  </tb-string-items-list>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"component",type:et.StringItemsListComponent,selector:"tb-string-items-list",inputs:["required","disabled","label","placeholder","hint","requiredText","floatLabel","appearance","editable","subscriptSizing","predefinedValues"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:Hn,selector:"tb-msg-metadata-chip",inputs:["labelText","translation"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Br,decorators:[{type:n,args:[{selector:"tb-transformation-node-delete-keys-config",template:'<section [formGroup]="deleteKeysConfigForm" class="tb-form-panel no-border no-padding">\n  <tb-msg-metadata-chip\n    [labelText]="(\'tb.key-val.delete-key-values-from\' | translate)"\n    formControlName="deleteFrom">\n  </tb-msg-metadata-chip>\n  <tb-string-items-list class="mat-block"\n                        required\n                        [label]="\'tb.rulenode.keys\' | translate"\n                        [placeholder]="\'tb.rulenode.add-key\' | translate"\n                        [requiredText]="\'tb.key-val.at-least-one-key-error\' | translate"\n                        formControlName="keys">\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.use-regular-expression-delete-hint\' | translate }}">\n      help\n    </mat-icon>\n  </tb-string-items-list>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder},{type:Z.TranslateService}]}});class Kr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.deduplicationStrategie=Ot,this.deduplicationStrategies=Object.keys(this.deduplicationStrategie),this.deduplicationStrategiesTranslations=_t}configForm(){return this.deduplicationConfigForm}onConfigurationSet(e){this.deduplicationConfigForm=this.fb.group({interval:[fe(e?.interval)?e.interval:null,[O.required,O.min(1)]],strategy:[fe(e?.strategy)?e.strategy:null,[O.required]],outMsgType:[fe(e?.outMsgType)?e.outMsgType:null,[O.required]],maxPendingMsgs:[fe(e?.maxPendingMsgs)?e.maxPendingMsgs:null,[O.required,O.min(1),O.max(1e3)]],maxRetries:[fe(e?.maxRetries)?e.maxRetries:null,[O.required,O.min(0),O.max(100)]]})}prepareInputConfig(e){return e||(e={}),e.outMsgType||(e.outMsgType="POST_TELEMETRY_REQUEST"),super.prepareInputConfig(e)}updateValidators(e){this.deduplicationConfigForm.get("strategy").value===this.deduplicationStrategie.ALL?this.deduplicationConfigForm.get("outMsgType").enable({emitEvent:!1}):this.deduplicationConfigForm.get("outMsgType").disable({emitEvent:!1}),this.deduplicationConfigForm.get("outMsgType").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["strategy"]}}e("DeduplicationConfigComponent",Kr),Kr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Kr,deps:[{token:P.Store},{token:R.FormBuilder}],target:t.ɵɵFactoryTarget.Component}),Kr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Kr,selector:"tb-action-node-msg-deduplication-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="deduplicationConfigForm">\n  <mat-form-field class="mat-block">\n    <mat-label>{{\'tb.rulenode.interval\' | translate}}</mat-label>\n    <input type=\'number\' required matInput formControlName="interval">\n    <mat-error *ngIf="deduplicationConfigForm.get(\'interval\').hasError(\'required\')">\n      {{\'tb.rulenode.interval-required\' | translate}}\n    </mat-error>\n    <mat-error *ngIf="deduplicationConfigForm.get(\'interval\').hasError(\'min\')">\n      {{\'tb.rulenode.interval-min-error\' | translate}}\n    </mat-error>\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.interval-hint\' | translate }}">help</mat-icon>\n  </mat-form-field>\n  <div class="tb-form-panel no-padding no-border">\n    <div class="tb-form-panel stroked">\n      <div class="tb-form-panel-title  tb-required" translate>tb.rulenode.strategy</div>\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="strategy" appearance="fill">\n        <tb-toggle-option *ngFor="let strategy of deduplicationStrategies" [value]="strategy">\n          {{ deduplicationStrategiesTranslations.get(strategy) | translate }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n      <tb-example-hint [hintText]="\'tb.rulenode.strategy-all-hint\' | translate"\n                       *ngIf="deduplicationConfigForm.get(\'strategy\').value === \'ALL\'">\n      </tb-example-hint>\n      <tb-example-hint [hintText]="\'tb.rulenode.strategy-first-hint\' | translate"\n                        textAlign="\'center\'"\n                       *ngIf="deduplicationConfigForm.get(\'strategy\').value === \'FIRST\'">\n      </tb-example-hint>\n      <tb-example-hint [hintText]="\'tb.rulenode.strategy-last-hint\' | translate"\n                        textAlign="\'center\'"\n                       *ngIf="deduplicationConfigForm.get(\'strategy\').value === \'LAST\'">\n      </tb-example-hint>\n      <div *ngIf="deduplicationConfigForm.get(\'strategy\').value === deduplicationStrategie.ALL">\n        <tb-output-message-type-autocomplete\n          required\n          formControlName="outMsgType">\n        </tb-output-message-type-autocomplete>\n      </div>\n    </div>\n    <section class="tb-form-panel stroked">\n      <mat-expansion-panel class="tb-settings">\n        <mat-expansion-panel-header>\n          <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class="tb-form-row no-border no-padding tb-standard-fields">\n          <mat-form-field class="flex">\n            <mat-label>{{\'tb.rulenode.max-pending-msgs\' | translate}}</mat-label>\n            <input type = \'number\' required matInput formControlName="maxPendingMsgs">\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxPendingMsgs\').hasError(\'required\')">\n              {{\'tb.rulenode.max-pending-msgs-required\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxPendingMsgs\').hasError(\'max\')">\n              {{\'tb.rulenode.max-pending-msgs-max-error\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxPendingMsgs\').hasError(\'min\')">\n              {{\'tb.rulenode.max-pending-msgs-min-error\' | translate}}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.max-pending-msgs-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n          <mat-form-field class="flex">\n            <mat-label>{{\'tb.rulenode.max-retries\' | translate}}</mat-label>\n            <input type = \'number\' required matInput formControlName="maxRetries">\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxRetries\').hasError(\'required\')">\n              {{\'tb.rulenode.max-retries-required\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxRetries\').hasError(\'max\')">\n              {{\'tb.rulenode.max-retries-max-error\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxRetries\').hasError(\'min\')">\n              {{\'tb.rulenode.max-retries-min-error\' | translate}}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.max-retries-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n        </div>\n      </mat-expansion-panel>\n    </section>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n'],dependencies:[{kind:"directive",type:U.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:U.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"component",type:ee.MatIcon,selector:"mat-icon",inputs:["color","inline","svgIcon","fontSet","fontIcon"],exportAs:["matIcon"]},{kind:"directive",type:J.MatInput,selector:"input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",inputs:["disabled","id","placeholder","name","required","type","errorStateMatcher","aria-describedby","value","readonly"],exportAs:["matInput"]},{kind:"component",type:Q.MatFormField,selector:"mat-form-field",inputs:["hideRequiredMarker","color","floatLabel","appearance","subscriptSizing","hintLabel"],exportAs:["matFormField"]},{kind:"directive",type:Q.MatLabel,selector:"mat-label"},{kind:"directive",type:Q.MatError,selector:"mat-error, [matError]",inputs:["id"]},{kind:"directive",type:Q.MatSuffix,selector:"[matSuffix], [matIconSuffix], [matTextSuffix]",inputs:["matTextSuffix"]},{kind:"directive",type:re.MatTooltip,selector:"[matTooltip]",exportAs:["matTooltip"]},{kind:"component",type:oe.MatExpansionPanel,selector:"mat-expansion-panel",inputs:["disabled","expanded","hideToggle","togglePosition"],outputs:["opened","closed","expandedChange","afterExpand","afterCollapse"],exportAs:["matExpansionPanel"]},{kind:"component",type:oe.MatExpansionPanelHeader,selector:"mat-expansion-panel-header",inputs:["tabIndex","expandedHeight","collapsedHeight"]},{kind:"directive",type:oe.MatExpansionPanelTitle,selector:"mat-panel-title"},{kind:"directive",type:R.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:R.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"directive",type:Z.TranslateDirective,selector:"[translate],[ngx-translate]",inputs:["translate","translateParams"]},{kind:"directive",type:Ae.ToggleOption,selector:"tb-toggle-option",inputs:["value"]},{kind:"component",type:Me.ToggleSelectComponent,selector:"tb-toggle-select",inputs:["disabled","selectMediaBreakpoint","appearance","disablePagination","fillHeight","extraPadding","primaryBackground"]},{kind:"component",type:Kn,selector:"tb-output-message-type-autocomplete",inputs:["subscriptSizing","disabled","required"]},{kind:"component",type:xt,selector:"tb-example-hint",inputs:["hintText","popupHelpLink","textAlign"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Kr,decorators:[{type:n,args:[{selector:"tb-action-node-msg-deduplication-config",template:'<section [formGroup]="deduplicationConfigForm">\n  <mat-form-field class="mat-block">\n    <mat-label>{{\'tb.rulenode.interval\' | translate}}</mat-label>\n    <input type=\'number\' required matInput formControlName="interval">\n    <mat-error *ngIf="deduplicationConfigForm.get(\'interval\').hasError(\'required\')">\n      {{\'tb.rulenode.interval-required\' | translate}}\n    </mat-error>\n    <mat-error *ngIf="deduplicationConfigForm.get(\'interval\').hasError(\'min\')">\n      {{\'tb.rulenode.interval-min-error\' | translate}}\n    </mat-error>\n    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n              color="primary"\n              matTooltip="{{ \'tb.rulenode.interval-hint\' | translate }}">help</mat-icon>\n  </mat-form-field>\n  <div class="tb-form-panel no-padding no-border">\n    <div class="tb-form-panel stroked">\n      <div class="tb-form-panel-title  tb-required" translate>tb.rulenode.strategy</div>\n      <tb-toggle-select class="fetch-to-data-toggle" formControlName="strategy" appearance="fill">\n        <tb-toggle-option *ngFor="let strategy of deduplicationStrategies" [value]="strategy">\n          {{ deduplicationStrategiesTranslations.get(strategy) | translate }}\n        </tb-toggle-option>\n      </tb-toggle-select>\n      <tb-example-hint [hintText]="\'tb.rulenode.strategy-all-hint\' | translate"\n                       *ngIf="deduplicationConfigForm.get(\'strategy\').value === \'ALL\'">\n      </tb-example-hint>\n      <tb-example-hint [hintText]="\'tb.rulenode.strategy-first-hint\' | translate"\n                        textAlign="\'center\'"\n                       *ngIf="deduplicationConfigForm.get(\'strategy\').value === \'FIRST\'">\n      </tb-example-hint>\n      <tb-example-hint [hintText]="\'tb.rulenode.strategy-last-hint\' | translate"\n                        textAlign="\'center\'"\n                       *ngIf="deduplicationConfigForm.get(\'strategy\').value === \'LAST\'">\n      </tb-example-hint>\n      <div *ngIf="deduplicationConfigForm.get(\'strategy\').value === deduplicationStrategie.ALL">\n        <tb-output-message-type-autocomplete\n          required\n          formControlName="outMsgType">\n        </tb-output-message-type-autocomplete>\n      </div>\n    </div>\n    <section class="tb-form-panel stroked">\n      <mat-expansion-panel class="tb-settings">\n        <mat-expansion-panel-header>\n          <mat-panel-title translate>tb.rulenode.advanced-settings</mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class="tb-form-row no-border no-padding tb-standard-fields">\n          <mat-form-field class="flex">\n            <mat-label>{{\'tb.rulenode.max-pending-msgs\' | translate}}</mat-label>\n            <input type = \'number\' required matInput formControlName="maxPendingMsgs">\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxPendingMsgs\').hasError(\'required\')">\n              {{\'tb.rulenode.max-pending-msgs-required\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxPendingMsgs\').hasError(\'max\')">\n              {{\'tb.rulenode.max-pending-msgs-max-error\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxPendingMsgs\').hasError(\'min\')">\n              {{\'tb.rulenode.max-pending-msgs-min-error\' | translate}}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.max-pending-msgs-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n          <mat-form-field class="flex">\n            <mat-label>{{\'tb.rulenode.max-retries\' | translate}}</mat-label>\n            <input type = \'number\' required matInput formControlName="maxRetries">\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxRetries\').hasError(\'required\')">\n              {{\'tb.rulenode.max-retries-required\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxRetries\').hasError(\'max\')">\n              {{\'tb.rulenode.max-retries-max-error\' | translate}}\n            </mat-error>\n            <mat-error *ngIf="deduplicationConfigForm.get(\'maxRetries\').hasError(\'min\')">\n              {{\'tb.rulenode.max-retries-min-error\' | translate}}\n            </mat-error>\n            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"\n                      color="primary"\n                      matTooltip="{{ \'tb.rulenode.max-retries-hint\' | translate }}">help</mat-icon>\n          </mat-form-field>\n        </div>\n      </mat-expansion-panel>\n    </section>\n  </div>\n</section>\n',styles:[':host .margin-8{margin:8px}:host .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}:host .tb-required:after{content:"*";font-size:16px;color:#000000de}:host .help-icon{color:#000;opacity:.38;padding:unset}:host .help-icon:hover{color:#305680;opacity:unset}.same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.same-width-component-row{gap:8px}}.same-width-component-row>*{flex:1}\n']}]}],ctorParameters:function(){return[{type:P.Store},{type:R.FormBuilder}]}});class Hr{}e("RulenodeCoreConfigTransformModule",Hr),Hr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Hr,deps:[],target:t.ɵɵFactoryTarget.NgModule}),Hr.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:Hr,declarations:[Ar,Mr,Pr,Rr,Or,_r,Br,Kr],imports:[$,M,Jn],exports:[Ar,Mr,Pr,Rr,Or,_r,Br,Kr]}),Hr.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Hr,imports:[$,M,Jn]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Hr,decorators:[{type:d,args:[{declarations:[Ar,Mr,Pr,Rr,Or,_r,Br,Kr],imports:[$,M,Jn],exports:[Ar,Mr,Pr,Rr,Or,_r,Br,Kr]}]}]});class zr extends g{constructor(e,t){super(e),this.store=e,this.fb=t,this.entityType=C}configForm(){return this.ruleChainInputConfigForm}onConfigurationSet(e){this.ruleChainInputConfigForm=this.fb.group({forwardMsgToDefaultRuleChain:[!!e&&e?.forwardMsgToDefaultRuleChain,[]],ruleChainId:[e?e.ruleChainId:null,[O.required]]})}}e("RuleChainInputComponent",zr),zr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:zr,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),zr.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:zr,selector:"tb-flow-node-rule-chain-input-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="ruleChainInputConfigForm" fxLayout="column">\n  <div class="tb-form-panel no-padding no-border">\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.forward-msg-default-rule-chain-tooltip\' | translate }}"\n         class="tb-form-row no-border">\n      <mat-slide-toggle class="mat-slide" formControlName="forwardMsgToDefaultRuleChain">\n        {{ \'tb.rulenode.forward-msg-default-rule-chain\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <tb-entity-autocomplete required\n                            [excludeEntityIds]="[ruleChainId]"\n                            [entityType]="entityType.RULE_CHAIN"\n                            [entitySubtype]="ruleChainType"\n                            formControlName="ruleChainId">\n    </tb-entity-autocomplete>\n  </div>\n</section>\n',dependencies:[{kind:"component",type:lt.EntityAutocompleteComponent,selector:"tb-entity-autocomplete",inputs:["entityType","entitySubtype","excludeEntityIds","labelText","requiredText","useFullEntityId","appearance","required","disabled"],outputs:["entityChanged"]},{kind:"component",type:Y.MatSlideToggle,selector:"mat-slide-toggle",inputs:["disabled","disableRipple","color","tabIndex"],exportAs:["matSlideToggle"]},{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.RequiredValidator,selector:":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",inputs:["required"]},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"directive",type:R.FormControlName,selector:"[formControlName]",inputs:["formControlName","disabled","ngModel"],outputs:["ngModelChange"]},{kind:"component",type:pe.HintTooltipIconComponent,selector:"[tb-hint-tooltip-icon]",inputs:["tb-hint-tooltip-icon","tooltipPosition","hintIcon"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:zr,decorators:[{type:n,args:[{selector:"tb-flow-node-rule-chain-input-config",template:'<section [formGroup]="ruleChainInputConfigForm" fxLayout="column">\n  <div class="tb-form-panel no-padding no-border">\n    <div tb-hint-tooltip-icon="{{ \'tb.rulenode.forward-msg-default-rule-chain-tooltip\' | translate }}"\n         class="tb-form-row no-border">\n      <mat-slide-toggle class="mat-slide" formControlName="forwardMsgToDefaultRuleChain">\n        {{ \'tb.rulenode.forward-msg-default-rule-chain\' | translate }}\n      </mat-slide-toggle>\n    </div>\n    <tb-entity-autocomplete required\n                            [excludeEntityIds]="[ruleChainId]"\n                            [entityType]="entityType.RULE_CHAIN"\n                            [entitySubtype]="ruleChainType"\n                            formControlName="ruleChainId">\n    </tb-entity-autocomplete>\n  </div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class Ur extends g{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.ruleChainOutputConfigForm}onConfigurationSet(e){this.ruleChainOutputConfigForm=this.fb.group({})}}e("RuleChainOutputComponent",Ur),Ur.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ur,deps:[{token:P.Store},{token:R.UntypedFormBuilder}],target:t.ɵɵFactoryTarget.Component}),Ur.ɵcmp=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"15.2.10",type:Ur,selector:"tb-flow-node-rule-chain-output-config",usesInheritance:!0,ngImport:t,template:'<section [formGroup]="ruleChainOutputConfigForm" fxLayout="column">\n  <div innerHTML="{{ \'tb.rulenode.output-node-name-hint\' | translate }}"></div>\n</section>\n',dependencies:[{kind:"directive",type:W.DefaultLayoutDirective,selector:"  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]",inputs:["fxLayout","fxLayout.xs","fxLayout.sm","fxLayout.md","fxLayout.lg","fxLayout.xl","fxLayout.lt-sm","fxLayout.lt-md","fxLayout.lt-lg","fxLayout.lt-xl","fxLayout.gt-xs","fxLayout.gt-sm","fxLayout.gt-md","fxLayout.gt-lg"]},{kind:"directive",type:R.NgControlStatusGroup,selector:"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]"},{kind:"directive",type:R.FormGroupDirective,selector:"[formGroup]",inputs:["formGroup"],outputs:["ngSubmit"],exportAs:["ngForm"]},{kind:"pipe",type:Z.TranslatePipe,name:"translate"}]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:Ur,decorators:[{type:n,args:[{selector:"tb-flow-node-rule-chain-output-config",template:'<section [formGroup]="ruleChainOutputConfigForm" fxLayout="column">\n  <div innerHTML="{{ \'tb.rulenode.output-node-name-hint\' | translate }}"></div>\n</section>\n'}]}],ctorParameters:function(){return[{type:P.Store},{type:R.UntypedFormBuilder}]}});class jr{}e("RuleNodeCoreConfigFlowModule",jr),jr.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:jr,deps:[],target:t.ɵɵFactoryTarget.NgModule}),jr.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:jr,declarations:[zr,Ur],imports:[$,M,Jn],exports:[zr,Ur]}),jr.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:jr,imports:[$,M,Jn]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:jr,decorators:[{type:d,args:[{declarations:[zr,Ur],imports:[$,M,Jn],exports:[zr,Ur]}]}]});class $r{constructor(e){!function(e){e.setTranslation("en_US",{tb:{rulenode:{id:"Id","additional-info":"Additional Info","advanced-settings":"Advanced settings","create-entity-if-not-exists":"Create new entity if it doesn't exist","create-entity-if-not-exists-hint":"If enabled, a new entity with specified parameters will be created unless it already exists. Existing entities will be used as is for relation.","select-device-connectivity-event":"Select device connectivity event","entity-name-pattern":"Name pattern","device-name-pattern":"Device name","asset-name-pattern":"Asset name","entity-view-name-pattern":"Entity view name","customer-title-pattern":"Customer title","dashboard-name-pattern":"Dashboard title","user-name-pattern":"User email","edge-name-pattern":"Edge name","entity-name-pattern-required":"Name pattern is required","entity-name-pattern-hint":"Name pattern field support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","copy-message-type":"Copy message type","entity-type-pattern":"Type pattern","entity-type-pattern-required":"Type pattern is required","message-type-value":"Message type value","message-type-value-required":"Message type value is required","message-type-value-max-length":"Message type value should be less than 256","output-message-type":"Output message type","entity-cache-expiration":"Entities cache expiration time (sec)","entity-cache-expiration-hint":"Specifies maximum time interval allowed to store found entity records. 0 value means that records will never expire.","entity-cache-expiration-required":"Entities cache expiration time is required.","entity-cache-expiration-range":"Entities cache expiration time should be greater than or equal to 0.","customer-name-pattern":"Customer title","customer-name-pattern-required":"Customer title is required","customer-name-pattern-hint":"Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","create-customer-if-not-exists":"Create new customer if it doesn't exist","unassign-from-customer":"Unassign from specific customer if originator is dashboard","unassign-from-customer-tooltip":"Only dashboards can be assigned to multiple customers at once. \nIf the message originator is a dashboard, you need to explicitly specify the customer's title to unassign from.","customer-cache-expiration":"Customers cache expiration time (sec)","customer-cache-expiration-hint":"Specifies maximum time interval allowed to store found customer records. 0 value means that records will never expire.","customer-cache-expiration-required":"Customers cache expiration time is required.","customer-cache-expiration-range":"Customers cache expiration time should be greater than or equal to 0.","interval-start":"Interval start","interval-end":"Interval end","time-unit":"Time unit","fetch-mode":"Fetch mode","order-by-timestamp":"Order by timestamp",limit:"Limit","limit-hint":"Min limit value is 2, max - 1000. If you want to fetch a single entry, select fetch mode 'First' or 'Last'.","limit-required":"Limit is required.","limit-range":"Limit should be in a range from 2 to 1000.","time-unit-milliseconds":"Milliseconds","time-unit-seconds":"Seconds","time-unit-minutes":"Minutes","time-unit-hours":"Hours","time-unit-days":"Days","time-value-range":"Allowing range from 1 to 2147483647.","start-interval-value-required":"Interval start is required.","end-interval-value-required":"Interval end is required.",filter:"Filter",switch:"Switch","math-templatization-tooltip":"This field support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","add-message-type":"Add message type","select-message-types-required":"At least one message type should be selected.","select-message-types":"Select message types","no-message-types-found":"No message types found","no-message-type-matching":"'{{messageType}}' not found.","create-new-message-type":"Create a new one.","message-types-required":"Message types are required.","client-attributes":"Client attributes","shared-attributes":"Shared attributes","server-attributes":"Server attributes","attributes-keys":"Attributes keys","attributes-keys-required":"Attributes keys are required","attributes-scope":"Attributes scope","attributes-scope-value":"Attributes scope value","attributes-scope-value-copy":"Copy attributes scope value","attributes-scope-hint":"Use the 'scope' metadata key to dynamically set the attribute scope per message. If provided, this overrides the scope set in the configuration.","notify-device":"Force notification to the device","send-attributes-updated-notification":"Send attributes updated notification","send-attributes-updated-notification-hint":"Send notification about updated attributes as a separate message to the rule engine queue.","send-attributes-deleted-notification":"Send attributes deleted notification","send-attributes-deleted-notification-hint":"Send notification about deleted attributes as a separate message to the rule engine queue.","update-attributes-only-on-value-change":"Save attributes only if the value changes","update-attributes-only-on-value-change-hint":"Updates the attributes on every incoming message disregarding if their value has changed. Increases API usage and reduces performance.","update-attributes-only-on-value-change-hint-enabled":"Updates the attributes only if their value has changed. If the value is not changed, no update to the attribute timestamp nor attribute change notification will be sent.","fetch-credentials-to-metadata":"Fetch credentials to metadata","notify-device-on-update-hint":"If enabled, force notification to the device about shared attributes update. If disabled, the notification behavior is controlled by the 'notifyDevice' parameter from the incoming message metadata. To turn off the notification, the message metadata must contain the 'notifyDevice' parameter set to 'false'. Any other case will trigger the notification to the device.","notify-device-on-delete-hint":"If enabled, force notification to the device about shared attributes removal. If disabled, the notification behavior is controlled by the 'notifyDevice' parameter from the incoming message metadata. To turn on the notification, the message metadata must contain the 'notifyDevice' parameter set to 'true'. In any other case, the notification will not be triggered to the device.","latest-timeseries":"Latest time series data keys","timeseries-keys":"Time series keys","timeseries-keys-required":"At least one time series key should be selected.","add-timeseries-key":"Add time series key","add-message-field":"Add message field","relation-search-parameters":"Relation search parameters","relation-parameters":"Relation parameters","add-metadata-field":"Add metadata field","data-keys":"Message field names","copy-from":"Copy from","data-to-metadata":"Data to metadata","metadata-to-data":"Metadata to data","use-regular-expression-hint":"Use regular expression to copy keys by pattern.\n\nTips & tricks:\nPress 'Enter' to complete field name input.\nPress 'Backspace' to delete field name. Multiple field names supported.",interval:"Interval","interval-required":"Interval is required","interval-hint":"Deduplication interval in seconds.","interval-min-error":"Min allowed value is 1","max-pending-msgs":"Max pending messages","max-pending-msgs-hint":"Maximum number of messages that are stored in memory for each unique deduplication id.","max-pending-msgs-required":"Max pending messages is required","max-pending-msgs-max-error":"Max allowed value is 1000","max-pending-msgs-min-error":"Min allowed value is 1","max-retries":"Max retries","max-retries-required":"Max retries is required","max-retries-hint":"Maximum number of retries to push the deduplicated messages into the queue. 10 seconds delay is used between retries","max-retries-max-error":"Max allowed value is 100","max-retries-min-error":"Min allowed value is 0",strategy:"Strategy","strategy-required":"Strategy is required","strategy-all-hint":"Return all messages that arrived during deduplication period as a single JSON array message. Where each element represents object with msg and metadata inner properties.","strategy-first-hint":"Return first message that arrived during deduplication period.","strategy-last-hint":"Return last message that arrived during deduplication period.",first:"First",last:"Last",all:"All","output-msg-type-hint":"The message type of the deduplication result.","queue-name-hint":"The queue name where the deduplication result will be published.",keys:"Keys","keys-required":"Keys are required","rename-keys-in":"Rename keys in",data:"Data",message:"Message",metadata:"Metadata","current-key-name":"Current key name","key-name-required":"Key name is required","new-key-name":"New key name","new-key-name-required":"New key name is required","metadata-keys":"Metadata field names","json-path-expression":"JSON path expression","json-path-expression-required":"JSON path expression is required","json-path-expression-hint":"JSONPath specifies a path to an element or a set of elements in a JSON structure. '$' represents the root object or array.","relations-query":"Relations query","device-relations-query":"Device relations query","max-relation-level":"Max relation level","max-relation-level-error":"Value should be greater than 0 or unspecified.","relation-type":"Relation type","relation-type-pattern":"Relation type pattern","relation-type-pattern-required":"Relation type pattern is required","relation-types-list":"Relation types to propagate","relation-types-list-hint":"If Propagate relation types are not selected, alarms will be propagated without filtering by relation type.","unlimited-level":"Unlimited level","latest-telemetry":"Latest telemetry","add-telemetry-key":"Add telemetry key","delete-from":"Delete from","use-regular-expression-delete-hint":"Use regular expression to delete keys by pattern.\n\nTips & tricks:\nPress 'Enter' to complete field name input.\nPress 'Backspace' to delete field name.\nMultiple field names supported.","fetch-into":"Fetch into","attr-mapping":"Attributes mapping:","source-attribute":"Source attribute key","source-attribute-required":"Source attribute key is required.","source-telemetry":"Source telemetry key","source-telemetry-required":"Source telemetry key is required.","target-key":"Target key","target-key-required":"Target key is required.","attr-mapping-required":"At least one mapping entry should be specified.","fields-mapping":"Fields mapping","relations-query-config-direction-suffix":"originator","profile-name":"Profile name","fetch-circle-parameter-info-from-metadata-hint":'Metadata field \'{{perimeterKeyName}}\' should be defined in next format: {"latitude":48.196, "longitude":24.6532, "radius":100.0, "radiusUnit":"METER"}',"fetch-poligon-parameter-info-from-metadata-hint":"Metadata field '{{perimeterKeyName}}' should be defined in next format: [[48.19736,24.65235],[48.19800,24.65060],...,[48.19849,24.65420]]","short-templatization-tooltip":"Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","fields-mapping-required":"At least one field mapping should be specified.","at-least-one-field-required":"At least one input field must have a value(s) provided.","originator-fields-sv-map-hint":"Target key fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","sv-map-hint":"Only target key fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","source-field":"Source field","source-field-required":"Source field is required.","originator-source":"Originator source","new-originator":"New originator","originator-customer":"Customer","originator-tenant":"Tenant","originator-related":"Related entity","originator-alarm-originator":"Alarm Originator","originator-entity":"Entity by name pattern","clone-message":"Clone message",transform:"Transform","default-ttl":"Default TTL in seconds","default-ttl-required":"Default TTL is required.","default-ttl-hint":"Rule node will fetch Time-to-Live (TTL) value from the message metadata. If no value is present, it defaults to the TTL specified in the configuration. If the value is set to 0, the TTL from the tenant profile configuration will be applied.","min-default-ttl-message":"Only 0 minimum TTL is allowed.","generation-parameters":"Generation parameters","message-count":"Generated messages limit (0 - unlimited)","message-count-required":"Generated messages limit is required.","min-message-count-message":"Only 0 minimum message count is allowed.","period-seconds":"Generation frequency in seconds","period-seconds-required":"Period is required.","script-lang-tbel":"TBEL","script-lang-js":"JS","use-metadata-period-in-seconds-patterns":"Use period in seconds pattern","use-metadata-period-in-seconds-patterns-hint":"If selected, rule node use period in seconds interval pattern from message metadata or data assuming that intervals are in the seconds.","period-in-seconds-pattern":"Period in seconds pattern","period-in-seconds-pattern-required":"Period in seconds pattern is required","min-period-seconds-message":"Only 1 second minimum period is allowed.",originator:"Originator","message-body":"Message body","message-metadata":"Message metadata",generate:"Generate","current-rule-node":"Current Rule Node","current-tenant":"Current Tenant","generator-function":"Generator function","test-generator-function":"Test generator function",generator:"Generator","test-filter-function":"Test filter function","test-switch-function":"Test switch function","test-transformer-function":"Test transformer function",transformer:"Transformer","alarm-create-condition":"Alarm create condition","test-condition-function":"Test condition function","alarm-clear-condition":"Alarm clear condition","alarm-details-builder":"Alarm details builder","test-details-function":"Test details function","alarm-type":"Alarm type","select-entity-types":"Select entity types","alarm-type-required":"Alarm type is required.","alarm-severity":"Alarm severity","alarm-severity-required":"Alarm severity is required","alarm-severity-pattern":"Alarm severity pattern","alarm-status-filter":"Alarm status filter","alarm-status-list-empty":"Alarm status list is empty","no-alarm-status-matching":"No alarm status matching were found.",propagate:"Propagate alarm to related entities","propagate-to-owner":"Propagate alarm to entity owner (Customer or Tenant)","propagate-to-tenant":"Propagate alarm to Tenant",condition:"Condition",details:"Details","to-string":"To string","test-to-string-function":"Test to string function","from-template":"From","from-template-required":"From is required","message-to-metadata":"Message to metadata","metadata-to-message":"Metadata to message","from-message":"From message","from-metadata":"From metadata","to-template":"To","to-template-required":"To Template is required","mail-address-list-template-hint":'Comma separated address list, use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body',"cc-template":"Cc","bcc-template":"Bcc","subject-template":"Subject","subject-template-required":"Subject Template is required","body-template":"Body","body-template-required":"Body Template is required","dynamic-mail-body-type":"Dynamic mail body type","mail-body-type":"Mail body type","body-type-template":"Body type template","reply-routing-configuration":"Reply Routing Configuration","rpc-reply-routing-configuration-hint":"These configuration parameters specify the metadata key names used to identify the service, session, and request for sending a reply back.","reply-routing-configuration-hint":"These configuration parameters specify the metadata key names used to identify the service and request for sending a reply back.","request-id-metadata-attribute":"Request Id","service-id-metadata-attribute":"Service Id","session-id-metadata-attribute":"Session Id","timeout-sec":"Timeout in seconds","timeout-required":"Timeout is required","min-timeout-message":"Only 0 minimum timeout value is allowed.","endpoint-url-pattern":"Endpoint URL pattern","endpoint-url-pattern-required":"Endpoint URL pattern is required","request-method":"Request method","use-simple-client-http-factory":"Use simple client HTTP factory","ignore-request-body":"Without request body","parse-to-plain-text":"Parse to plain text","parse-to-plain-text-hint":'If selected, request body message payload will be transformed from JSON string to plain text, e.g. msg = "Hello,\\t\\"world\\"" will be parsed to Hello, "world"',"read-timeout":"Read timeout in millis","read-timeout-hint":"The value of 0 means an infinite timeout","max-parallel-requests-count":"Max number of parallel requests","max-parallel-requests-count-hint":"The value of 0 specifies no limit in parallel processing","max-response-size":"Max response size (in KB)","max-response-size-hint":"The maximum amount of memory allocated for buffering data when decoding or encoding HTTP messages, such as JSON or XML payloads",headers:"Headers","headers-hint":'Use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body in header/value fields',header:"Header","header-required":"Header is required",value:"Value","value-required":"Value is required","topic-pattern":"Topic pattern","key-pattern":"Key pattern","key-pattern-hint":"Optional. If a valid partition number is specified, it will be used when sending the record. If no partition is specified, the key will be used instead. If neither is specified, a partition will be assigned in a round-robin fashion.","topic-pattern-required":"Topic pattern is required",topic:"Topic","topic-required":"Topic is required","bootstrap-servers":"Bootstrap servers","bootstrap-servers-required":"Bootstrap servers value is required","other-properties":"Other properties",key:"Key","key-required":"Key is required",retries:"Automatically retry times if fails","min-retries-message":"Only 0 minimum retries is allowed.","batch-size-bytes":"Produces batch size in bytes","min-batch-size-bytes-message":"Only 0 minimum batch size is allowed.","linger-ms":"Time to buffer locally (ms)","min-linger-ms-message":"Only 0 ms minimum value is allowed.","buffer-memory-bytes":"Client buffer max size in bytes","min-buffer-memory-message":"Only 0 minimum buffer size is allowed.",acks:"Number of acknowledgments","key-serializer":"Key serializer","key-serializer-required":"Key serializer is required","value-serializer":"Value serializer","value-serializer-required":"Value serializer is required","topic-arn-pattern":"Topic ARN pattern","topic-arn-pattern-required":"Topic ARN pattern is required","aws-access-key-id":"AWS Access Key ID","aws-access-key-id-required":"AWS Access Key ID is required","aws-secret-access-key":"AWS Secret Access Key","aws-secret-access-key-required":"AWS Secret Access Key is required","aws-region":"AWS Region","aws-region-required":"AWS Region is required","exchange-name-pattern":"Exchange name pattern","routing-key-pattern":"Routing key pattern","message-properties":"Message properties",host:"Host","host-required":"Host is required",port:"Port","port-required":"Port is required","port-range":"Port should be in a range from 1 to 65535.","virtual-host":"Virtual host",username:"Username",password:"Password","automatic-recovery":"Automatic recovery","connection-timeout-ms":"Connection timeout (ms)","min-connection-timeout-ms-message":"Only 0 ms minimum value is allowed.","handshake-timeout-ms":"Handshake timeout (ms)","min-handshake-timeout-ms-message":"Only 0 ms minimum value is allowed.","client-properties":"Client properties","queue-url-pattern":"Queue URL pattern","queue-url-pattern-required":"Queue URL pattern is required","delay-seconds":"Delay (seconds)","min-delay-seconds-message":"Only 0 seconds minimum value is allowed.","max-delay-seconds-message":"Only 900 seconds maximum value is allowed.",name:"Name","name-required":"Name is required","queue-type":"Queue type","sqs-queue-standard":"Standard","sqs-queue-fifo":"FIFO","gcp-project-id":"GCP project ID","gcp-project-id-required":"GCP project ID is required","gcp-service-account-key":"GCP service account key file","gcp-service-account-key-required":"GCP service account key file is required","pubsub-topic-name":"Topic name","pubsub-topic-name-required":"Topic name is required","message-attributes":"Message attributes","message-attributes-hint":'Use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body in name/value fields',"connect-timeout":"Connection timeout (sec)","connect-timeout-required":"Connection timeout is required.","connect-timeout-range":"Connection timeout should be in a range from 1 to 200.","client-id":"Client ID","client-id-hint":'Optional. Leave empty for auto-generated Client ID. Be careful when specifying the Client ID. Majority of the MQTT brokers will not allow multiple connections with the same Client ID. To connect to such brokers, your mqtt Client ID must be unique. When platform is running in a micro-services mode, the copy of rule node is launched in each micro-service. This will automatically lead to multiple mqtt clients with the same ID and may cause failures of the rule node. To avoid such failures enable "Add Service ID as suffix to Client ID" option below.',"append-client-id-suffix":"Add Service ID as suffix to Client ID","client-id-suffix-hint":'Optional. Applied when "Client ID" specified explicitly. If selected then Service ID will be added to Client ID as a suffix. Helps to avoid failures when platform is running in a micro-services mode.',"device-id":"Device ID","device-id-required":"Device ID is required.","clean-session":"Clean session","enable-ssl":"Enable SSL",credentials:"Credentials","credentials-type":"Credentials type","credentials-type-required":"Credentials type is required.","credentials-anonymous":"Anonymous","credentials-basic":"Basic","credentials-pem":"PEM","credentials-pem-hint":"At least Server CA certificate file or a pair of Client certificate and Client private key files are required","credentials-sas":"Shared Access Signature","sas-key":"SAS Key","sas-key-required":"SAS Key is required.",hostname:"Hostname","hostname-required":"Hostname is required.","azure-ca-cert":"CA certificate file","username-required":"Username is required.","password-required":"Password is required.","ca-cert":"Server CA certificate file","private-key":"Client private key file",cert:"Client certificate file","no-file":"No file selected.","drop-file":"Drop a file or click to select a file to upload.","private-key-password":"Private key password","use-system-smtp-settings":"Use system SMTP settings","use-metadata-dynamic-interval":"Use dynamic interval","metadata-dynamic-interval-hint":"Interval start and end input fields support templatization. Note that the substituted template value should be set in milliseconds. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","use-metadata-interval-patterns-hint":"If selected, rule node use start and end interval patterns from message metadata or data assuming that intervals are in the milliseconds.","use-message-alarm-data":"Use message alarm data","overwrite-alarm-details":"Overwrite alarm details","use-alarm-severity-pattern":"Use alarm severity pattern","check-all-keys":"Check that all specified fields are present","check-all-keys-hint":"If selected, checks that all specified keys are present in the message data and metadata.","check-relation-to-specific-entity":"Check relation to specific entity","check-relation-to-specific-entity-tooltip":"If enabled, checks the presence of relation with a specific entity otherwise, checks the presence of relation with any entity. In both cases, relation lookup is based on configured direction and type.","check-relation-hint":"Checks existence of relation to specific entity or to any entity based on direction and relation type.","delete-relation-with-specific-entity":"Delete relation with specific entity","delete-relation-with-specific-entity-hint":"If enabled, will delete the relation with just one specific entity. Otherwise, the relation will be removed with all matching entities.","delete-relation-hint":"Deletes relation from the originator of the incoming message to the specified entity or list of entities based on direction and type.","remove-current-relations":"Remove current relations","remove-current-relations-hint":"Removes current relations from the originator of the incoming message based on direction and type.","change-originator-to-related-entity":"Change originator to related entity","change-originator-to-related-entity-hint":"Used to process submitted message as a message from another entity.","start-interval":"Interval start","end-interval":"Interval end","start-interval-required":"Interval start is required.","end-interval-required":"Interval end is required.","smtp-protocol":"Protocol","smtp-host":"SMTP host","smtp-host-required":"SMTP host is required.","smtp-port":"SMTP port","smtp-port-required":"You must supply a smtp port.","smtp-port-range":"SMTP port should be in a range from 1 to 65535.","timeout-msec":"Timeout ms","min-timeout-msec-message":"Only 0 ms minimum value is allowed.","enter-username":"Enter username","enter-password":"Enter password","enable-tls":"Enable TLS","tls-version":"TLS version","enable-proxy":"Enable proxy","use-system-proxy-properties":"Use system proxy properties","proxy-host":"Proxy host","proxy-host-required":"Proxy host is required.","proxy-port":"Proxy port","proxy-port-required":"Proxy port is required.","proxy-port-range":"Proxy port should be in a range from 1 to 65535.","proxy-user":"Proxy user","proxy-password":"Proxy password","proxy-scheme":"Proxy scheme","numbers-to-template":"Phone Numbers To Template","numbers-to-template-required":"Phone Numbers To Template is required","numbers-to-template-hint":'Comma separated Phone Numbers, use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body',"sms-message-template":"SMS message Template","sms-message-template-required":"SMS message Template is required","use-system-sms-settings":"Use system SMS provider settings","min-period-0-seconds-message":"Only 0 second minimum period is allowed.","max-pending-messages":"Maximum pending messages","max-pending-messages-required":"Maximum pending messages is required.","max-pending-messages-range":"Maximum pending messages should be in a range from 1 to 100000.","originator-types-filter":"Originator types filter","interval-seconds":"Interval in seconds","interval-seconds-required":"Interval is required.","min-interval-seconds-message":"Only 1 second minimum interval is allowed.","output-timeseries-key-prefix":"Output time series key prefix","output-timeseries-key-prefix-required":"Output time series key prefix required.","separator-hint":'Press "Enter" to complete field input.',"select-details":"Select details","entity-details-id":"Id","entity-details-title":"Title","entity-details-country":"Country","entity-details-state":"State","entity-details-city":"City","entity-details-zip":"Zip","entity-details-address":"Address","entity-details-address2":"Address2","entity-details-additional_info":"Additional Info","entity-details-phone":"Phone","entity-details-email":"Email","email-sender":"Email sender","fields-to-check":"Fields to check","add-detail":"Add detail","check-all-keys-tooltip":"If enabled, checks the presence of all fields listed in the message and metadata field names within the incoming message and its metadata.","fields-to-check-hint":'Press "Enter" to complete field name input. Multiple field names supported.',"entity-details-list-empty":"At least one detail should be selected.","alarm-status":"Alarm status","alarm-required":"At least one alarm status should be selected.","no-entity-details-matching":"No entity details matching were found.","custom-table-name":"Custom table name","custom-table-name-required":"Table Name is required","custom-table-hint":"Enter the table name without prefix 'cs_tb_'.","message-field":"Message field","message-field-required":"Message field is required.","table-col":"Table column","table-col-required":"Table column is required.","latitude-field-name":"Latitude field name","longitude-field-name":"Longitude field name","latitude-field-name-required":"Latitude field name is required.","longitude-field-name-required":"Longitude field name is required.","fetch-perimeter-info-from-metadata":"Fetch perimeter information from metadata","fetch-perimeter-info-from-metadata-tooltip":"If perimeter type is set to 'Polygon' the value of metadata field '{{perimeterKeyName}}' will be set as perimeter definition without additional parsing of the value. Otherwise, if perimeter type is set to 'Circle' the value of '{{perimeterKeyName}}' metadata field will be parsed to extract 'latitude', 'longitude',  'radius', 'radiusUnit' fields that uses for circle perimeter definition.","perimeter-key-name":"Perimeter key name","perimeter-key-name-hint":"Metadata field name that includes perimeter information.","perimeter-key-name-required":"Perimeter key name is required.","perimeter-circle":"Circle","perimeter-polygon":"Polygon","perimeter-type":"Perimeter type","circle-center-latitude":"Center latitude","circle-center-latitude-required":"Center latitude is required.","circle-center-longitude":"Center longitude","circle-center-longitude-required":"Center longitude is required.","range-unit-meter":"Meter","range-unit-kilometer":"Kilometer","range-unit-foot":"Foot","range-unit-mile":"Mile","range-unit-nautical-mile":"Nautical mile","range-units":"Range units","range-units-required":"Range units is required.",range:"Range","range-required":"Range is required.","polygon-definition":"Polygon definition","polygon-definition-required":"Polygon definition is required.","polygon-definition-hint":"Use the following format for manual definition of polygon: [[lat1,lon1],[lat2,lon2], ... ,[latN,lonN]].","min-inside-duration":"Minimal inside duration","min-inside-duration-value-required":"Minimal inside duration is required","min-inside-duration-time-unit":"Minimal inside duration time unit","min-outside-duration":"Minimal outside duration","min-outside-duration-value-required":"Minimal outside duration is required","min-outside-duration-time-unit":"Minimal outside duration time unit","tell-failure-if-absent":"Tell Failure","tell-failure-if-absent-hint":'If at least one selected key doesn\'t exist the outbound message will report "Failure".',"get-latest-value-with-ts":"Fetch timestamp for the latest telemetry values","get-latest-value-with-ts-hint":'If selected, the latest telemetry values will also include timestamp, e.g: "temp": "&#123;"ts":1574329385897, "value":42&#125;"',"ignore-null-strings":"Ignore null strings","ignore-null-strings-hint":"If selected rule node will ignore entity fields with empty value.","add-metadata-key-values-as-kafka-headers":"Add Message metadata key-value pairs to Kafka record headers","add-metadata-key-values-as-kafka-headers-hint":"If selected, key-value pairs from message metadata will be added to the outgoing records headers as byte arrays with predefined charset encoding.","charset-encoding":"Charset encoding","charset-encoding-required":"Charset encoding is required.","charset-us-ascii":"US-ASCII","charset-iso-8859-1":"ISO-8859-1","charset-utf-8":"UTF-8","charset-utf-16be":"UTF-16BE","charset-utf-16le":"UTF-16LE","charset-utf-16":"UTF-16","select-queue-hint":"The queue name can be selected from a drop-down list or add a custom name.","device-profile-node-hint":"Useful if you have duration or repeating conditions to ensure continuity of alarm state evaluation.","persist-alarm-rules":"Persist state of alarm rules","persist-alarm-rules-hint":"If enabled, the rule node will store the state of processing to the database.","fetch-alarm-rules":"Fetch state of alarm rules","fetch-alarm-rules-hint":"If enabled, the rule node will restore the state of processing on initialization and ensure that alarms are raised even after server restarts. Otherwise, the state will be restored when the first message from the device arrives.","input-value-key":"Input value key","input-value-key-required":"Input value key is required.","output-value-key":"Output value key","output-value-key-required":"Output value key is required.","number-of-digits-after-floating-point":"Number of digits after floating point","number-of-digits-after-floating-point-range":"Number of digits after floating point should be in a range from 0 to 15.","failure-if-delta-negative":"Tell Failure if delta is negative","failure-if-delta-negative-tooltip":"Rule node forces failure of message processing if delta value is negative.","use-caching":"Use caching","use-caching-tooltip":'Rule node will cache the value of "{{inputValueKey}}" that arrives from the incoming message to improve performance. Note that the cache will not be updated if you modify the "{{inputValueKey}}" value elsewhere.',"add-time-difference-between-readings":'Add the time difference between "{{inputValueKey}}" readings',"add-time-difference-between-readings-tooltip":'If enabled, the rule node will add the "{{periodValueKey}}" to the outbound message.',"period-value-key":"Period value key","period-value-key-required":"Period value key is required.","general-pattern-hint":"Use ${metadataKey} for value from metadata, $[messageKey] for value from message body.","alarm-severity-pattern-hint":'Use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body. Alarm severity should be system (CRITICAL, MAJOR etc.)',"output-node-name-hint":"The <b>rule node name</b> corresponds to the <b>relation type</b> of the output message, and it is used to forward messages to other rule nodes in the caller rule chain.","skip-latest-persistence":"Skip latest persistence","skip-latest-persistence-hint":"Rule node will not update values for incoming keys for the latest time series data. Useful for highly loaded use-cases to decrease the pressure on the DB.","use-server-ts":"Use server ts","use-server-ts-hint":"Rule node will use the timestamp of message processing instead of the timestamp from the message. Useful for all sorts of sequential processing if you merge messages from multiple sources (devices, assets, etc).","kv-map-pattern-hint":"All input fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","kv-map-single-pattern-hint":"Input field support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","shared-scope":"Shared scope","server-scope":"Server scope","client-scope":"Client scope","attribute-type":"Attribute","constant-type":"Constant","time-series-type":"Time series","message-body-type":"Message","message-metadata-type":"Metadata","argument-tile":"Arguments","no-arguments-prompt":"No arguments configured","result-title":"Result","functions-field-input":"Functions","no-option-found":"No option found","argument-source-field-input":"Source","argument-source-field-input-required":"Argument source is required.","argument-key-field-input":"Key","argument-key-field-input-required":"Argument key is required.","constant-value-field-input":"Constant value","constant-value-field-input-required":"Constant value is required.","attribute-scope-field-input":"Attribute scope","attribute-scope-field-input-required":"Attribute scope os required.","default-value-field-input":"Default value","type-field-input":"Type","type-field-input-required":"Type is required.","key-field-input":"Key","add-entity-type":"Add entity type","add-device-profile":"Add device profile","key-field-input-required":"Key is required.","number-floating-point-field-input":"Number of digits after floating point","number-floating-point-field-input-hint":"Use <i>0</i> to convert result to integer","add-to-message-field-input":"Add to message","add-to-metadata-field-input":"Add to metadata","custom-expression-field-input":"Mathematical Expression","custom-expression-field-input-required":"Mathematical expression is required","custom-expression-field-input-hint":"Specify a mathematical expression to evaluate. Default expression demonstrates how to transform Fahrenheit to Celsius","retained-message":"Retained","attributes-mapping":"Attributes mapping","latest-telemetry-mapping":"Latest telemetry mapping","add-mapped-attribute-to":"Add mapped attributes to","add-mapped-latest-telemetry-to":"Add mapped latest telemetry to","add-mapped-fields-to":"Add mapped fields to","add-selected-details-to":"Add selected details to","clear-selected-types":"Clear selected types","clear-selected-details":"Clear selected details","clear-selected-fields":"Clear selected fields","clear-selected-keys":"Clear selected keys","geofence-configuration":"Geofence configuration","coordinate-field-names":"Coordinate field names","coordinate-field-hint":"Rule node tries to retrieve the specified fields from the message. If they are not present, it will look them up in the metadata.","presence-monitoring-strategy":"Presence monitoring strategy","presence-monitoring-strategy-on-first-message":"On first message","presence-monitoring-strategy-on-each-message":"On each message","presence-monitoring-strategy-on-first-message-hint":"Reports presence status 'Inside' or 'Outside' on the first message after the configured minimal duration has passed since previous presence status 'Entered' or 'Left' update.","presence-monitoring-strategy-on-each-message-hint":"Reports presence status 'Inside' or 'Outside' on each message after presence status 'Entered' or 'Left' update.","fetch-credentials-to":"Fetch credentials to","add-originator-attributes-to":"Add originator attributes to","originator-attributes":"Originator attributes","fetch-latest-telemetry-with-timestamp":"Fetch latest telemetry with timestamp","fetch-latest-telemetry-with-timestamp-tooltip":'If selected, latest telemetry values will be added to the outbound metadata with timestamp, e.g: "{{latestTsKeyName}}": "{"ts":1574329385897, "value":42}"',"tell-failure":"Tell failure if any of the attributes are missing","tell-failure-tooltip":'If at least one selected key doesn\'t exist the outbound message will report "Failure".',"created-time":"Created time","chip-help":"Press 'Enter' to complete {{inputName}} input. \nPress 'Backspace' to delete {{inputName}}. \nMultiple values supported.",detail:"detail","field-name":"field name","device-profile":"device profile","entity-type":"entity type","message-type":"message type","timeseries-key":"time series key",type:"Type","first-name":"First name","last-name":"Last name",label:"Label","originator-fields-mapping":"Originator fields mapping","add-mapped-originator-fields-to":"Add mapped originator fields to",fields:"Fields","skip-empty-fields":"Skip empty fields","skip-empty-fields-tooltip":"Fields with empty values will not be added to the output message/output metadata.","fetch-interval":"Fetch interval","fetch-strategy":"Fetch strategy","fetch-timeseries-from-to":"Fetch time series from {{startInterval}} {{startIntervalTimeUnit}} ago to {{endInterval}} {{endIntervalTimeUnit}} ago.","fetch-timeseries-from-to-invalid":'Fetch time series invalid ("Interval start" should be less than "Interval end").',"use-metadata-dynamic-interval-tooltip":"If selected, the rule node will use dynamic interval start and end based on the message and metadata patterns.","all-mode-hint":'If selected fetch mode "All" rule node will retrieve telemetry from the fetch interval with configurable query parameters.',"first-mode-hint":'If selected fetch mode "First" rule node will retrieve the closest telemetry to the fetch interval\'s start.',"last-mode-hint":'If selected fetch mode "Last" rule node will retrieve the closest telemetry to the fetch interval\'s end.',ascending:"Ascending",descending:"Descending",min:"Min",max:"Max",average:"Average",sum:"Sum",count:"Count",none:"None","last-level-relation-tooltip":"If selected, the rule node will search related entities only on the level set in the max relation level.","last-level-device-relation-tooltip":"If selected, the rule node will search related devices only on the level set in the max relation level.","data-to-fetch":"Data to fetch","mapping-of-customers":"Mapping of customer's","map-fields-required":"All mapping fields are required.",attributes:"Attributes","related-device-attributes":"Related device attributes","add-selected-attributes-to":"Add selected attributes to","device-profiles":"Device profiles","mapping-of-tenant":"Mapping of tenant's","add-attribute-key":"Add attribute key","message-template":"Message template","message-template-required":"Message template is required","use-system-slack-settings":"Use system slack settings","slack-api-token":"Slack API token","slack-api-token-required":"Slack API token is required","keys-mapping":"keys mapping","add-key":"Add key",recipients:"Recipients","message-subject-and-content":"Message subject and content","template-rules-hint":"Both input fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the message metadata.","originator-customer-desc":"Use customer of incoming message originator as new originator.","originator-tenant-desc":"Use current tenant as new originator.","originator-related-entity-desc":"Use related entity as new originator. Lookup based on configured relation type and direction.","originator-alarm-originator-desc":"Use alarm originator as new originator. Only if incoming message originator is alarm entity.","originator-entity-by-name-pattern-desc":"Use entity fetched from DB as new originator. Lookup based on entity type and specified name pattern.","email-from-template-hint":"Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","recipients-block-main-hint":"Comma-separated address list. All input fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","forward-msg-default-rule-chain":"Forward message to the originator's default rule chain","forward-msg-default-rule-chain-tooltip":"If enabled, message will be forwarded to the originator's default rule chain, or rule chain from configuration, if originator has no default rule chain defined in the entity profile.","exclude-zero-deltas":"Exclude zero deltas from outbound message","exclude-zero-deltas-hint":'If enabled, the "{{outputValueKey}}" output key will be added to the outbound message if its value is not zero.',"exclude-zero-deltas-time-difference-hint":'If enabled, the "{{outputValueKey}}" and "{{periodValueKey}}" output keys will be added to the outbound message only if the "{{outputValueKey}}" value is not zero.',"search-direction-from":"From originator to target entity","search-direction-to":"From target entity to originator","del-relation-direction-from":"From originator","del-relation-direction-to":"To originator","target-entity":"Target entity","function-configuration":"Function configuration","function-name":"Function name","function-name-required":"Function name is required.",qualifier:"Qualifier","qualifier-hint":'If the qualifier is not specified, the default qualifier "$LATEST" will be used.',"aws-credentials":"AWS Credentials","connection-timeout":"Connection timeout","connection-timeout-required":"Connection timeout is required.","connection-timeout-min":"Min connection timeout is 0.","connection-timeout-hint":"The amount of time to wait in seconds when initially establishing a connection before giving up and timing out. A value of 0 means infinity, and is not recommended.","request-timeout":"Request timeout","request-timeout-required":"Request timeout is required","request-timeout-min":"Min request timeout is 0","request-timeout-hint":"The amount of time to wait in seconds for the request to complete before giving up and timing out. A value of 0 means infinity, and is not recommended.","tell-failure-aws-lambda":"Tell Failure if AWS Lambda function execution raises exception","tell-failure-aws-lambda-hint":"Rule node forces failure of message processing if AWS Lambda function execution raises exception."},"key-val":{key:"Key",value:"Value","see-examples":"See examples.","remove-entry":"Remove entry","remove-mapping-entry":"Remove mapping entry","add-mapping-entry":"Add mapping","add-entry":"Add entry","copy-key-values-from":"Copy key-values from","delete-key-values":"Delete key-values","delete-key-values-from":"Delete key-values from","at-least-one-key-error":"At least one key should be selected.","unique-key-value-pair-error":"'{{keyText}}' must be different from the '{{valText}}'!"},"mail-body-type":{"plain-text":"Plain text",html:"HTML",dynamic:"Dynamic","use-body-type-template":"Use body type template","plain-text-description":"Simple, unformatted text with no special styling or formating.","html-text-description":"Allows you to use HTML tags for formatting, links and images in your mai body.","dynamic-text-description":"Allows to use Plain Text or HTML body type dynamically based on templatization feature.","after-template-evaluation-hint":"After template evaluation value should be true for HTML, and false for Plain text."}}},!0)}(e)}}e("RuleNodeCoreConfigModule",$r),$r.ɵfac=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:$r,deps:[{token:Z.TranslateService}],target:t.ɵɵFactoryTarget.NgModule}),$r.ɵmod=t.ɵɵngDeclareNgModule({minVersion:"14.0.0",version:"15.2.10",ngImport:t,type:$r,declarations:[dt],imports:[$,M],exports:[Qn,qr,ir,vr,Hr,jr,dt]}),$r.ɵinj=t.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:$r,imports:[$,M,Qn,qr,ir,vr,Hr,jr]}),t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"15.2.10",ngImport:t,type:$r,decorators:[{type:d,args:[{declarations:[dt],imports:[$,M],exports:[Qn,qr,ir,vr,Hr,jr,dt]}]}],ctorParameters:function(){return[{type:Z.TranslateService}]}})}}}));//# sourceMappingURL=rulenode-core-config.js.map
+System.register(["@angular/core","@shared/public-api","@ngrx/store","@angular/forms","@core/public-api","@ngx-translate/core","@angular/cdk/keycodes","@angular/common","@home/components/public-api","tslib","rxjs","@angular/cdk/coercion","rxjs/operators"],(function(e){"use strict";var t,n,r,a,i,o,l,s,p,m,d,u,c,g,f,h,y,b,v,x,C,S,T,I,E,F,q,A,k,N,w,M,V,B,O,D,L,P,R,_,j,G,K,U,H,z,$,Q,J,Y,W,X,Z,ee,te,ne,re,ae,ie;return{setters:[function(e){t=e,n=e.EventEmitter,r=e.forwardRef,a=e.ɵNG_COMP_DEF},function(e){i=e.RuleNodeConfigurationComponent,o=e.AttributeScope,l=e.telemetryTypeTranslations,s=e.ScriptLanguage,p=e.AlarmSeverity,m=e.alarmSeverityTranslations,d=e.EntitySearchDirection,u=e.EntityType,c=e.entityFields,g=e.messageTypeNames,f=e.MessageType,h=e.coerceBoolean,y=e.PageComponent,b=e.entitySearchDirectionTranslations,v=e,x=e.AlarmStatus,C=e.alarmStatusTranslations,S=e.SharedModule,T=e.AggregationType,I=e.aggregationTranslations,E=e.NotificationType,F=e.SlackChanelType,q=e.SlackChanelTypesTranslateMap},function(e){A=e},function(e){k=e,N=e.Validators,w=e.FormArray,M=e.FormGroup,V=e.NgControl,B=e.NG_VALUE_ACCESSOR,O=e.NG_VALIDATORS},function(e){D=e.getCurrentAuthState,L=e,P=e.isDefinedAndNotNull,R=e.isEqual,_=e.deepTrim,j=e.isObject,G=e.isNotEmptyStr},function(e){K=e},function(e){U=e.ENTER,H=e.COMMA,z=e.SEMICOLON},function(e){$=e.CommonModule},function(e){Q=e.HomeComponentsModule},function(e){J=e.__decorate},function(e){Y=e.Subject,W=e.takeUntil,X=e.of},function(e){Z=e.coerceBooleanProperty},function(e){ee=e.startWith,te=e.map,ne=e.mergeMap,re=e.share,ae=e.tap,ie=e.takeUntil}],execute:function(){class oe extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.emptyConfigForm}onConfigurationSet(e){this.emptyConfigForm=this.fb.group({})}static{this.ɵfac=function(e){return new(e||oe)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:oe,selectors:[["tb-node-empty-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:1,vars:0,template:function(e,n){1&e&&t.ɵɵelement(0,"div")},dependencies:t.ɵɵgetComponentDepsFactory(oe),encapsulation:2})}}function le(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.customer-name-pattern-required")," "))}e("EmptyConfigComponent",oe);class se extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.assignCustomerConfigForm}onConfigurationSet(e){this.assignCustomerConfigForm=this.fb.group({customerNamePattern:[e?e.customerNamePattern:null,[N.required,N.pattern(/.*\S.*/)]],createCustomerIfNotExists:[!!e&&e.createCustomerIfNotExists,[]]})}prepareOutputConfig(e){return e.customerNamePattern=e.customerNamePattern.trim(),e}static{this.ɵfac=function(e){return new(e||se)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:se,selectors:[["tb-action-node-assign-to-customer-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:13,vars:5,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"tb-form-panel","no-padding","no-border"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","customerNamePattern"],[4,"ngIf"],[1,"tb-form-row"],["formControlName","createCustomerIfNotExists",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"mat-form-field",2)(3,"mat-label",3),t.ɵɵtext(4,"tb.rulenode.customer-name-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(5,"input",4),t.ɵɵtemplate(6,le,3,3,"mat-error",5),t.ɵɵelementStart(7,"mat-hint",3),t.ɵɵtext(8,"tb.rulenode.customer-name-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(9,"div",6)(10,"mat-slide-toggle",7),t.ɵɵtext(11),t.ɵɵpipe(12,"translate"),t.ɵɵelementEnd()()()()),2&e&&(t.ɵɵproperty("formGroup",n.assignCustomerConfigForm),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.assignCustomerConfigForm.get("customerNamePattern").hasError("required")||n.assignCustomerConfigForm.get("customerNamePattern").hasError("pattern")),t.ɵɵadvance(5),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(12,3,"tb.rulenode.create-customer-if-not-exists")," "))},dependencies:t.ɵɵgetComponentDepsFactory(se),encapsulation:2})}}e("AssignCustomerConfigComponent",se);const pe=()=>({standalone:!0});function me(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",15),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.telemetryTypeTranslationsMap.get(e))," ")}}function de(e,n){1&e&&(t.ɵɵelementStart(0,"div",12),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",16),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(1,2,"tb.rulenode.send-attributes-updated-notification-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,4,"tb.rulenode.send-attributes-updated-notification")," "))}function ue(e,n){1&e&&(t.ɵɵelementStart(0,"div",12),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",17),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(1,2,"tb.rulenode.notify-device-on-update-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,4,"tb.rulenode.notify-device")," "))}class ce extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopeMap=o,this.attributeScopes=Object.keys(o),this.telemetryTypeTranslationsMap=l}configForm(){return this.attributesConfigForm}onConfigurationSet(e){this.attributesConfigForm=this.fb.group({scope:[e?e.scope:null,[N.required]],notifyDevice:[!e||e.notifyDevice,[]],sendAttributesUpdatedNotification:[!!e&&e.sendAttributesUpdatedNotification,[]],updateAttributesOnlyOnValueChange:[!!e&&e.updateAttributesOnlyOnValueChange,[]]}),this.attributesConfigForm.get("scope").valueChanges.subscribe((e=>{e!==o.SHARED_SCOPE&&this.attributesConfigForm.get("notifyDevice").patchValue(!1,{emitEvent:!1}),e===o.CLIENT_SCOPE&&this.attributesConfigForm.get("sendAttributesUpdatedNotification").patchValue(!1,{emitEvent:!1}),this.attributesConfigForm.get("updateAttributesOnlyOnValueChange").patchValue(!1,{emitEvent:!1})}))}static{this.ɵfac=function(e){return new(e||ce)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ce,selectors:[["tb-action-node-attributes-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:31,vars:24,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],[1,"flex"],["required","","matInput","","formControlName","scope",1,"tb-entity-type-select"],[3,"value",4,"ngFor","ngForOf"],["type","text","matInput","","readonly","","disabled","",3,"ngModel","ngModelOptions"],["type","button","matSuffix","","mat-icon-button","","aria-label","Copy","ngxClipboard","",3,"cbContent","matTooltip"],["aria-hidden","false","aria-label","help-icon"],[1,"tb-settings"],["translate",""],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","updateAttributesOnlyOnValueChange",1,"mat-slide"],["class","tb-form-row no-border no-padding",3,"tb-hint-tooltip-icon",4,"ngIf"],[3,"value"],["formControlName","sendAttributesUpdatedNotification",1,"mat-slide"],["formControlName","notifyDevice",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵelement(2,"tb-example-hint",2),t.ɵɵelementStart(3,"div",3)(4,"mat-form-field",4)(5,"mat-label"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",5),t.ɵɵtemplate(9,me,3,4,"mat-option",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(10,"mat-form-field",4)(11,"mat-label"),t.ɵɵtext(12),t.ɵɵpipe(13,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(14,"input",7),t.ɵɵelementStart(15,"button",8),t.ɵɵpipe(16,"translate"),t.ɵɵelementStart(17,"mat-icon",9),t.ɵɵtext(18,"content_copy "),t.ɵɵelementEnd()()()()(),t.ɵɵelementStart(19,"section",1)(20,"mat-expansion-panel",10)(21,"mat-expansion-panel-header")(22,"mat-panel-title",11),t.ɵɵtext(23,"tb.rulenode.advanced-settings"),t.ɵɵelementEnd()(),t.ɵɵelementStart(24,"div",12),t.ɵɵpipe(25,"translate"),t.ɵɵelementStart(26,"mat-slide-toggle",13),t.ɵɵtext(27),t.ɵɵpipe(28,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(29,de,5,6,"div",14)(30,ue,5,6,"div",14),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.attributesConfigForm),t.ɵɵadvance(2),t.ɵɵproperty("hintText","tb.rulenode.attributes-scope-hint"),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,13,"tb.rulenode.attributes-scope")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.attributeScopes),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(13,15,"tb.rulenode.attributes-scope-value")),t.ɵɵadvance(2),t.ɵɵproperty("ngModel",n.attributesConfigForm.get("scope").value)("ngModelOptions",t.ɵɵpureFunction0(23,pe)),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(16,17,"tb.rulenode.attributes-scope-value-copy")),t.ɵɵproperty("cbContent",n.attributesConfigForm.get("scope").value),t.ɵɵadvance(9),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(25,19,n.attributesConfigForm.get("updateAttributesOnlyOnValueChange").value?"tb.rulenode.update-attributes-only-on-value-change-hint-enabled":"tb.rulenode.update-attributes-only-on-value-change-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(28,21,"tb.rulenode.update-attributes-only-on-value-change")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.attributesConfigForm.get("scope").value!==n.attributeScopeMap.CLIENT_SCOPE),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.attributesConfigForm.get("scope").value===n.attributeScopeMap.SHARED_SCOPE))},dependencies:t.ɵɵgetComponentDepsFactory(ce),encapsulation:2})}}e("AttributesConfigComponent",ce);const ge=["jsFuncComponent"],fe=["tbelFuncComponent"],he=()=>["msg","metadata","msgType"];function ye(e,n){1&e&&t.ɵɵelement(0,"tb-script-lang",12)}function be(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",13,0)(2,"button",14),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",15),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(4,he)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,2,e.testScriptLabel))}}function ve(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",16,1)(2,"button",14),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",15),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(6,he))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,4,e.testScriptLabel))}}function xe(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.alarm-type-required")," "))}class Ce extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-details-function"}configForm(){return this.clearAlarmConfigForm}onConfigurationSet(e){this.clearAlarmConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:s.JS,[N.required]],alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[]],alarmDetailsBuildTbel:[e?e.alarmDetailsBuildTbel:null,[]],alarmType:[e?e.alarmType:null,[N.required]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.clearAlarmConfigForm.get("scriptLang").value;t!==s.TBEL||this.tbelEnabled||(t=s.JS,this.clearAlarmConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.clearAlarmConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.clearAlarmConfigForm.get("alarmDetailsBuildJs").setValidators(t===s.JS?[N.required]:[]),this.clearAlarmConfigForm.get("alarmDetailsBuildJs").updateValueAndValidity({emitEvent:e}),this.clearAlarmConfigForm.get("alarmDetailsBuildTbel").setValidators(t===s.TBEL?[N.required]:[]),this.clearAlarmConfigForm.get("alarmDetailsBuildTbel").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=s.JS)),e}testScript(e){const t=this.clearAlarmConfigForm.get("scriptLang").value,n=t===s.JS?"alarmDetailsBuildJs":"alarmDetailsBuildTbel",r=t===s.JS?"rulenode/clear_alarm_node_script_fn":"rulenode/tbel/clear_alarm_node_script_fn",a=this.clearAlarmConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.clearAlarmConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.clearAlarmConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}static{this.ɵfac=function(e){return new(e||Ce)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ce,selectors:[["tb-action-node-clear-alarm-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(ge,5),t.ɵɵviewQuery(fe,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:15,vars:8,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],[1,"flex","flex-col",3,"formGroup"],["formControlName","scriptLang",4,"ngIf"],["formControlName","alarmDetailsBuildJs","functionName","Details","helpId","rulenode/clear_alarm_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","alarmDetailsBuildTbel","functionName","Details","helpId","rulenode/tbel/clear_alarm_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],[1,"flex","flex-row",2,"padding-bottom","16px"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","alarmType"],[4,"ngIf"],["formControlName","scriptLang"],["formControlName","alarmDetailsBuildJs","functionName","Details","helpId","rulenode/clear_alarm_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["formControlName","alarmDetailsBuildTbel","functionName","Details","helpId","rulenode/tbel/clear_alarm_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",2),t.ɵɵtemplate(1,ye,1,0,"tb-script-lang",3)(2,be,6,5,"tb-js-func",4)(3,ve,6,7,"tb-js-func",5),t.ɵɵelementStart(4,"div",6)(5,"button",7),t.ɵɵlistener("click",(function(){return n.testScript()})),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-form-field",8)(9,"mat-label",9),t.ɵɵtext(10,"tb.rulenode.alarm-type"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",10),t.ɵɵtemplate(12,xe,3,3,"mat-error",11),t.ɵɵelementStart(13,"mat-hint",9),t.ɵɵtext(14,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.clearAlarmConfigForm),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.tbelEnabled),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.clearAlarmConfigForm.get("scriptLang").value===n.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.clearAlarmConfigForm.get("scriptLang").value===n.scriptLanguage.TBEL),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,6,n.testScriptLabel)," "),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.clearAlarmConfigForm.get("alarmType").hasError("required")))},dependencies:t.ɵɵgetComponentDepsFactory(Ce),encapsulation:2})}}e("ClearAlarmConfigComponent",Ce);const Se=["jsFuncComponent"],Te=["tbelFuncComponent"],Ie=()=>["msg","metadata","msgType"];function Ee(e,n){1&e&&(t.ɵɵelementStart(0,"mat-checkbox",7),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.overwrite-alarm-details")," "))}function Fe(e,n){1&e&&t.ɵɵelement(0,"tb-script-lang",14)}function qe(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",15,0)(2,"button",16),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext(2);return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",17),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext(2);t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(4,Ie)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,2,e.testScriptLabel))}}function Ae(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",18,1)(2,"button",16),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext(2);return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",17),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext(2);t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(6,Ie))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,4,e.testScriptLabel))}}function ke(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"section",8),t.ɵɵtemplate(1,Fe,1,0,"tb-script-lang",9)(2,qe,6,5,"tb-js-func",10)(3,Ae,6,7,"tb-js-func",11),t.ɵɵelementStart(4,"div",12)(5,"button",13),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.tbelEnabled),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.createAlarmConfigForm.get("scriptLang").value===e.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.createAlarmConfigForm.get("scriptLang").value===e.scriptLanguage.TBEL),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,4,e.testScriptLabel)," ")}}function Ne(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.alarm-type-required")," "))}function we(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",32),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(3);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.alarmSeverityTranslationMap.get(e))," ")}}function Me(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.alarm-severity-required")," "))}function Ve(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",29)(1,"mat-label",20),t.ɵɵtext(2,"tb.rulenode.alarm-severity"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-select",30),t.ɵɵtemplate(4,we,3,4,"mat-option",31),t.ɵɵelementEnd(),t.ɵɵtemplate(5,Me,3,3,"mat-error",22),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(4),t.ɵɵproperty("ngForOf",e.alarmSeverities),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.createAlarmConfigForm.get("severity").hasError("required"))}}function Be(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.alarm-severity-required")," "))}function Oe(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",19)(1,"mat-label",20),t.ɵɵtext(2,"tb.rulenode.alarm-severity-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",33),t.ɵɵtemplate(4,Be,3,3,"mat-error",22),t.ɵɵelement(5,"mat-hint",34),t.ɵɵpipe(6,"translate"),t.ɵɵpipe(7,"safe"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.createAlarmConfigForm.get("severity").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(7,4,t.ɵɵpipeBind1(6,2,"tb.rulenode.alarm-severity-pattern-hint"),"html"),t.ɵɵsanitizeHtml)}}function De(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-chip-row",38),t.ɵɵlistener("removed",(function(){const n=t.ɵɵrestoreView(e).$implicit,r=t.ɵɵnextContext(3);return t.ɵɵresetView(r.removeKey(n,"relationTypes"))})),t.ɵɵtext(1),t.ɵɵelementStart(2,"mat-icon",39),t.ɵɵtext(3,"close"),t.ɵɵelementEnd()()}if(2&e){const e=n.$implicit;t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function Le(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"section")(1,"mat-form-field",35)(2,"mat-label",20),t.ɵɵtext(3,"tb.rulenode.relation-types-list"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"mat-chip-grid",null,2),t.ɵɵtemplate(6,De,4,1,"mat-chip-row",36),t.ɵɵelementStart(7,"input",37),t.ɵɵpipe(8,"translate"),t.ɵɵlistener("matChipInputTokenEnd",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext(2);return t.ɵɵresetView(r.addKey(n,"relationTypes"))})),t.ɵɵelementEnd()(),t.ɵɵelementStart(9,"mat-hint",20),t.ɵɵtext(10,"tb.rulenode.relation-types-list-hint"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵreference(5),n=t.ɵɵnextContext(2);t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",n.createAlarmConfigForm.get("relationTypes").value),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(8,5,"tb.rulenode.relation-types-list")),t.ɵɵproperty("matChipInputFor",e)("matChipInputSeparatorKeyCodes",n.separatorKeysCodes)("matChipInputAddOnBlur",!0)}}function Pe(e,n){if(1&e&&(t.ɵɵelementStart(0,"section",8)(1,"mat-form-field",19)(2,"mat-label",20),t.ɵɵtext(3,"tb.rulenode.alarm-type"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",21),t.ɵɵtemplate(5,Ne,3,3,"mat-error",22),t.ɵɵelementStart(6,"mat-hint",20),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-checkbox",23),t.ɵɵtext(9),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(11,Ve,6,2,"mat-form-field",24)(12,Oe,8,7,"mat-form-field",25),t.ɵɵelementStart(13,"mat-checkbox",26),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(16,Le,11,7,"section",22),t.ɵɵelementStart(17,"mat-checkbox",27),t.ɵɵtext(18),t.ɵɵpipe(19,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(20,"mat-checkbox",28),t.ɵɵtext(21),t.ɵɵpipe(22,"translate"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.createAlarmConfigForm.get("alarmType").hasError("required")),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(10,8,"tb.rulenode.use-alarm-severity-pattern")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!e.createAlarmConfigForm.get("dynamicSeverity").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.createAlarmConfigForm.get("dynamicSeverity").value),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(15,10,"tb.rulenode.propagate")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!0===e.createAlarmConfigForm.get("propagate").value),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(19,12,"tb.rulenode.propagate-to-owner")," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(22,14,"tb.rulenode.propagate-to-tenant")," ")}}class Re extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.alarmSeverities=Object.keys(p),this.alarmSeverityTranslationMap=m,this.separatorKeysCodes=[U,H,z],this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-details-function"}configForm(){return this.createAlarmConfigForm}onConfigurationSet(e){this.createAlarmConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:s.JS,[N.required]],alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[]],alarmDetailsBuildTbel:[e?e.alarmDetailsBuildTbel:null,[]],useMessageAlarmData:[!!e&&e.useMessageAlarmData,[]],overwriteAlarmDetails:[!!e&&e.overwriteAlarmDetails,[]],alarmType:[e?e.alarmType:null,[]],severity:[e?e.severity:null,[]],propagate:[!!e&&e.propagate,[]],relationTypes:[e?e.relationTypes:null,[]],propagateToOwner:[!!e&&e.propagateToOwner,[]],propagateToTenant:[!!e&&e.propagateToTenant,[]],dynamicSeverity:!1}),this.createAlarmConfigForm.get("dynamicSeverity").valueChanges.subscribe((e=>{e?this.createAlarmConfigForm.get("severity").patchValue("",{emitEvent:!1}):this.createAlarmConfigForm.get("severity").patchValue(this.alarmSeverities[0],{emitEvent:!1})}))}validatorTriggers(){return["useMessageAlarmData","overwriteAlarmDetails","scriptLang"]}updateValidators(e){const t=this.createAlarmConfigForm.get("useMessageAlarmData").value,n=this.createAlarmConfigForm.get("overwriteAlarmDetails").value;t?(this.createAlarmConfigForm.get("alarmType").setValidators([]),this.createAlarmConfigForm.get("severity").setValidators([])):(this.createAlarmConfigForm.get("alarmType").setValidators([N.required]),this.createAlarmConfigForm.get("severity").setValidators([N.required])),this.createAlarmConfigForm.get("alarmType").updateValueAndValidity({emitEvent:e}),this.createAlarmConfigForm.get("severity").updateValueAndValidity({emitEvent:e});let r=this.createAlarmConfigForm.get("scriptLang").value;r!==s.TBEL||this.tbelEnabled||(r=s.JS,this.createAlarmConfigForm.get("scriptLang").patchValue(r,{emitEvent:!1}),setTimeout((()=>{this.createAlarmConfigForm.updateValueAndValidity({emitEvent:!0})})));const a=!1===t||!0===n;this.createAlarmConfigForm.get("alarmDetailsBuildJs").setValidators(a&&r===s.JS?[N.required]:[]),this.createAlarmConfigForm.get("alarmDetailsBuildTbel").setValidators(a&&r===s.TBEL?[N.required]:[]),this.createAlarmConfigForm.get("alarmDetailsBuildJs").updateValueAndValidity({emitEvent:e}),this.createAlarmConfigForm.get("alarmDetailsBuildTbel").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=s.JS)),e}testScript(e){const t=this.createAlarmConfigForm.get("scriptLang").value,n=t===s.JS?"alarmDetailsBuildJs":"alarmDetailsBuildTbel",r=t===s.JS?"rulenode/create_alarm_node_script_fn":"rulenode/tbel/create_alarm_node_script_fn",a=this.createAlarmConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.createAlarmConfigForm.get(n).setValue(e),this.changeScript.emit())}))}removeKey(e,t){const n=this.createAlarmConfigForm.get(t).value,r=n.indexOf(e);r>=0&&(n.splice(r,1),this.createAlarmConfigForm.get(t).setValue(n,{emitEvent:!0}))}addKey(e,t){const n=e.input;let r=e.value;if((r||"").trim()){r=r.trim();let e=this.createAlarmConfigForm.get(t).value;e&&-1!==e.indexOf(r)||(e||(e=[]),e.push(r),this.createAlarmConfigForm.get(t).setValue(e,{emitEvent:!0}))}n&&(n.value="")}onValidate(){const e=this.createAlarmConfigForm.get("useMessageAlarmData").value,t=this.createAlarmConfigForm.get("overwriteAlarmDetails").value;if(!e||t){this.createAlarmConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}}static{this.ɵfac=function(e){return new(e||Re)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Re,selectors:[["tb-action-node-create-alarm-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(Se,5),t.ɵɵviewQuery(Te,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:7,vars:7,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],["relationTypesChipList",""],[1,"flex","flex-col",3,"formGroup"],["formControlName","useMessageAlarmData"],["formControlName","overwriteAlarmDetails",4,"ngIf"],["class","flex flex-col",4,"ngIf"],["formControlName","overwriteAlarmDetails"],[1,"flex","flex-col"],["formControlName","scriptLang",4,"ngIf"],["formControlName","alarmDetailsBuildJs","functionName","Details","helpId","rulenode/create_alarm_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","alarmDetailsBuildTbel","functionName","Details","helpId","rulenode/tbel/create_alarm_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],[1,"flex","flex-row",2,"padding-bottom","16px"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["formControlName","scriptLang"],["formControlName","alarmDetailsBuildJs","functionName","Details","helpId","rulenode/create_alarm_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["formControlName","alarmDetailsBuildTbel","functionName","Details","helpId","rulenode/tbel/create_alarm_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"],["subscriptSizing","dynamic",1,"flex-1"],["translate",""],["required","","matInput","","formControlName","alarmType"],[4,"ngIf"],["formControlName","dynamicSeverity"],["class","flex-1",4,"ngIf"],["class","flex-1","subscriptSizing","dynamic",4,"ngIf"],["formControlName","propagate"],["formControlName","propagateToOwner"],["formControlName","propagateToTenant"],[1,"flex-1"],["formControlName","severity","required",""],[3,"value",4,"ngFor","ngForOf"],[3,"value"],["matInput","","formControlName","severity","required",""],[3,"innerHTML"],["floatLabel","always","subscriptSizing","dynamic",1,"mat-block"],[3,"removed",4,"ngFor","ngForOf"],["matInput","","type","text",3,"matChipInputTokenEnd","placeholder","matChipInputFor","matChipInputSeparatorKeyCodes","matChipInputAddOnBlur"],[3,"removed"],["matChipRemove",""]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",3)(1,"mat-checkbox",4),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(4,Ee,3,3,"mat-checkbox",5)(5,ke,8,6,"section",6)(6,Pe,23,16,"section",6),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.createAlarmConfigForm),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,5,"tb.rulenode.use-message-alarm-data")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!0===n.createAlarmConfigForm.get("useMessageAlarmData").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",!1===n.createAlarmConfigForm.get("useMessageAlarmData").value||!0===n.createAlarmConfigForm.get("overwriteAlarmDetails").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",!1===n.createAlarmConfigForm.get("useMessageAlarmData").value))},dependencies:t.ɵɵgetComponentDepsFactory(Re),encapsulation:2})}}function _e(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",21),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.directionTypeTranslations.get(e))," ")}}function je(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",22)(1,"mat-label"),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",23),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(3,1,e.entityTypeNamePatternTranslation.get(e.createRelationConfigForm.get("entityType").value)))}}function Ge(e,n){1&e&&(t.ɵɵelementStart(0,"mat-form-field",22)(1,"mat-label",5),t.ɵɵtext(2,"tb.rulenode.profile-name"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",24),t.ɵɵelementEnd())}function Ke(e,n){1&e&&t.ɵɵelement(0,"tb-example-hint",25),2&e&&t.ɵɵproperty("hintText","tb.rulenode.kv-map-pattern-hint")}function Ue(e,n){1&e&&(t.ɵɵelementStart(0,"div",26),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",27),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(1,2,"tb.rulenode.create-entity-if-not-exists-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,4,"tb.rulenode.create-entity-if-not-exists")," "))}e("CreateAlarmConfigComponent",Re);class He extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.keys(d),this.directionTypeTranslations=new Map([[d.FROM,"tb.rulenode.search-direction-from"],[d.TO,"tb.rulenode.search-direction-to"]]),this.entityType=u,this.entityTypeNamePatternTranslation=new Map([[u.DEVICE,"tb.rulenode.device-name-pattern"],[u.ASSET,"tb.rulenode.asset-name-pattern"],[u.ENTITY_VIEW,"tb.rulenode.entity-view-name-pattern"],[u.CUSTOMER,"tb.rulenode.customer-title-pattern"],[u.USER,"tb.rulenode.user-name-pattern"],[u.DASHBOARD,"tb.rulenode.dashboard-name-pattern"],[u.EDGE,"tb.rulenode.edge-name-pattern"]]),this.allowedEntityTypes=[u.DEVICE,u.ASSET,u.ENTITY_VIEW,u.TENANT,u.CUSTOMER,u.USER,u.DASHBOARD,u.EDGE]}configForm(){return this.createRelationConfigForm}onConfigurationSet(e){this.createRelationConfigForm=this.fb.group({direction:[e?e.direction:null,[N.required]],entityType:[e?e.entityType:null,[N.required]],entityNamePattern:[e?e.entityNamePattern:null,[]],entityTypePattern:[e?e.entityTypePattern:null,[]],relationType:[e?e.relationType:null,[N.required]],createEntityIfNotExists:[!!e&&e.createEntityIfNotExists,[]],removeCurrentRelations:[!!e&&e.removeCurrentRelations,[]],changeOriginatorToRelatedEntity:[!!e&&e.changeOriginatorToRelatedEntity,[]]})}validatorTriggers(){return["entityType","createEntityIfNotExists"]}updateValidators(e){const t=this.createRelationConfigForm.get("entityType").value;if(t?this.createRelationConfigForm.get("entityNamePattern").setValidators([N.required,N.pattern(/.*\S.*/)]):this.createRelationConfigForm.get("entityNamePattern").setValidators([]),!t||t!==u.DEVICE&&t!==u.ASSET)this.createRelationConfigForm.get("entityTypePattern").setValidators([]);else{const e=[N.pattern(/.*\S.*/)];this.createRelationConfigForm.get("createEntityIfNotExists").value&&e.push(N.required),this.createRelationConfigForm.get("entityTypePattern").setValidators(e)}this.createRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e}),this.createRelationConfigForm.get("entityTypePattern").updateValueAndValidity({emitEvent:e})}prepareOutputConfig(e){return e.entityNamePattern=e.entityNamePattern?e.entityNamePattern.trim():null,e.entityTypePattern=e.entityTypePattern?e.entityTypePattern.trim():null,e}static{this.ɵfac=function(e){return new(e||He)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:He,selectors:[["tb-action-node-create-relation-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:36,vars:19,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],[1,"tb-form-panel","stroked","no-padding-bottom"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-col"],["hideRequiredMarker","",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","direction"],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","relationType"],[1,"flex","flex-row","gap-4"],["showLabel","","required","","formControlName","entityType",1,"flex-1",3,"allowedEntityTypes"],["class","mat-block flex-1",4,"ngIf"],[3,"hintText",4,"ngIf"],["style","margin-bottom: 18px","class","tb-form-row no-border no-padding",3,"tb-hint-tooltip-icon",4,"ngIf"],[1,"tb-form-panel","stroked","no-padding"],[1,"tb-settings"],[2,"padding","16px"],[1,"tb-form-panel","no-border","no-padding-top"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","removeCurrentRelations",1,"mat-slide"],["formControlName","changeOriginatorToRelatedEntity",1,"mat-slide"],[3,"value"],[1,"mat-block","flex-1"],["required","","matInput","","formControlName","entityNamePattern"],["matInput","","formControlName","entityTypePattern"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding",2,"margin-bottom","18px",3,"tb-hint-tooltip-icon"],["formControlName","createEntityIfNotExists",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.relation-parameters"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",3)(5,"mat-form-field",4)(6,"mat-label",5),t.ɵɵtext(7,"relation.direction"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",6),t.ɵɵtemplate(9,_e,3,4,"mat-option",7),t.ɵɵelementEnd()(),t.ɵɵelement(10,"tb-relation-type-autocomplete",8),t.ɵɵelementEnd()(),t.ɵɵelementStart(11,"div",1)(12,"div",2),t.ɵɵtext(13,"tb.rulenode.target-entity"),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"div",9),t.ɵɵelement(15,"tb-entity-type-select",10),t.ɵɵtemplate(16,je,5,3,"mat-form-field",11)(17,Ge,4,0,"mat-form-field",11),t.ɵɵelementEnd(),t.ɵɵtemplate(18,Ke,1,1,"tb-example-hint",12)(19,Ue,5,6,"div",13),t.ɵɵelementEnd(),t.ɵɵelementStart(20,"section",14)(21,"mat-expansion-panel",15)(22,"mat-expansion-panel-header",16)(23,"mat-panel-title",5),t.ɵɵtext(24,"tb.rulenode.advanced-settings"),t.ɵɵelementEnd()(),t.ɵɵelementStart(25,"div",17)(26,"div",18),t.ɵɵpipe(27,"translate"),t.ɵɵelementStart(28,"mat-slide-toggle",19),t.ɵɵtext(29),t.ɵɵpipe(30,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(31,"div",18),t.ɵɵpipe(32,"translate"),t.ɵɵelementStart(33,"mat-slide-toggle",20),t.ɵɵtext(34),t.ɵɵpipe(35,"translate"),t.ɵɵelementEnd()()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.createRelationConfigForm),t.ɵɵadvance(9),t.ɵɵproperty("ngForOf",n.directionTypes),t.ɵɵadvance(6),t.ɵɵproperty("allowedEntityTypes",n.allowedEntityTypes),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.createRelationConfigForm.get("entityType").value&&n.createRelationConfigForm.get("entityType").value!==n.entityType.TENANT),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.createRelationConfigForm.get("entityType").value===n.entityType.DEVICE||n.createRelationConfigForm.get("entityType").value===n.entityType.ASSET),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.createRelationConfigForm.get("entityType").value===n.entityType.CUSTOMER||n.createRelationConfigForm.get("entityType").value===n.entityType.DEVICE||n.createRelationConfigForm.get("entityType").value===n.entityType.ASSET),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.createRelationConfigForm.get("entityType").value===n.entityType.CUSTOMER||n.createRelationConfigForm.get("entityType").value===n.entityType.DEVICE||n.createRelationConfigForm.get("entityType").value===n.entityType.ASSET),t.ɵɵadvance(7),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(27,11,"tb.rulenode.remove-current-relations-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(30,13,"tb.rulenode.remove-current-relations")," "),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(32,15,"tb.rulenode.change-originator-to-related-entity-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(35,17,"tb.rulenode.change-originator-to-related-entity")," "))},dependencies:t.ɵɵgetComponentDepsFactory(He),encapsulation:2})}}function ze(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",13),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.directionTypeTranslations.get(e))," ")}}function $e(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",18)(1,"mat-label"),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",19),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(3,1,e.entityTypeNamePatternTranslation.get(e.deleteRelationConfigForm.get("entityType").value)))}}function Qe(e,n){1&e&&t.ɵɵelement(0,"tb-example-hint",20),2&e&&t.ɵɵproperty("hintText","tb.rulenode.kv-map-single-pattern-hint")}function Je(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"div",14),t.ɵɵelement(2,"tb-entity-type-select",15),t.ɵɵtemplate(3,$e,5,3,"mat-form-field",16),t.ɵɵelementEnd(),t.ɵɵtemplate(4,Qe,1,1,"tb-example-hint",17),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵproperty("allowedEntityTypes",e.allowedEntityTypes),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.deleteRelationConfigForm.get("entityType").value&&e.deleteRelationConfigForm.get("entityType").value!==e.entityType.TENANT),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.deleteRelationConfigForm.get("entityType").value&&e.deleteRelationConfigForm.get("entityType").value!==e.entityType.TENANT)}}e("CreateRelationConfigComponent",He);class Ye extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.keys(d),this.directionTypeTranslations=new Map([[d.FROM,"tb.rulenode.del-relation-direction-from"],[d.TO,"tb.rulenode.del-relation-direction-to"]]),this.entityTypeNamePatternTranslation=new Map([[u.DEVICE,"tb.rulenode.device-name-pattern"],[u.ASSET,"tb.rulenode.asset-name-pattern"],[u.ENTITY_VIEW,"tb.rulenode.entity-view-name-pattern"],[u.CUSTOMER,"tb.rulenode.customer-title-pattern"],[u.USER,"tb.rulenode.user-name-pattern"],[u.DASHBOARD,"tb.rulenode.dashboard-name-pattern"],[u.EDGE,"tb.rulenode.edge-name-pattern"]]),this.entityType=u,this.allowedEntityTypes=[u.DEVICE,u.ASSET,u.ENTITY_VIEW,u.TENANT,u.CUSTOMER,u.USER,u.DASHBOARD,u.EDGE]}configForm(){return this.deleteRelationConfigForm}onConfigurationSet(e){this.deleteRelationConfigForm=this.fb.group({deleteForSingleEntity:[!!e&&e.deleteForSingleEntity,[]],direction:[e?e.direction:null,[N.required]],entityType:[e?e.entityType:null,[]],entityNamePattern:[e?e.entityNamePattern:null,[]],relationType:[e?e.relationType:null,[N.required]]})}validatorTriggers(){return["deleteForSingleEntity","entityType"]}updateValidators(e){const t=this.deleteRelationConfigForm.get("deleteForSingleEntity").value,n=this.deleteRelationConfigForm.get("entityType").value;t?this.deleteRelationConfigForm.get("entityType").setValidators([N.required]):this.deleteRelationConfigForm.get("entityType").setValidators([]),t&&n&&n!==u.TENANT?this.deleteRelationConfigForm.get("entityNamePattern").setValidators([N.required,N.pattern(/.*\S.*/)]):this.deleteRelationConfigForm.get("entityNamePattern").setValidators([]),this.deleteRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:!1}),this.deleteRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e})}prepareOutputConfig(e){return e.entityNamePattern=e.entityNamePattern?e.entityNamePattern.trim():null,e}static{this.ɵfac=function(e){return new(e||Ye)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ye,selectors:[["tb-action-node-delete-relation-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:18,vars:9,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],[1,"tb-form-panel","stroked","no-padding-bottom"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-col"],["hideRequiredMarker","",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","direction"],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","relationType"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","deleteForSingleEntity",1,"mat-slide"],[4,"ngIf"],[3,"value"],[1,"flex","flex-row","gap-2.5"],["showLabel","","required","","formControlName","entityType",1,"flex-1",3,"allowedEntityTypes"],["class","mat-block flex-1",4,"ngIf"],[3,"hintText",4,"ngIf"],[1,"mat-block","flex-1"],["required","","matInput","","formControlName","entityNamePattern"],[3,"hintText"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.relation-parameters"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",3)(5,"mat-form-field",4)(6,"mat-label",5),t.ɵɵtext(7,"relation.direction"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",6),t.ɵɵtemplate(9,ze,3,4,"mat-option",7),t.ɵɵelementEnd()(),t.ɵɵelement(10,"tb-relation-type-autocomplete",8),t.ɵɵelementEnd()(),t.ɵɵelementStart(11,"div",9)(12,"div",10),t.ɵɵpipe(13,"translate"),t.ɵɵelementStart(14,"mat-slide-toggle",11),t.ɵɵtext(15),t.ɵɵpipe(16,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(17,Je,5,3,"div",12),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.deleteRelationConfigForm),t.ɵɵadvance(9),t.ɵɵproperty("ngForOf",n.directionTypes),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(13,5,"tb.rulenode.delete-relation-with-specific-entity-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(16,7,"tb.rulenode.delete-relation-with-specific-entity")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.deleteRelationConfigForm.get("deleteForSingleEntity").value))},dependencies:t.ɵɵgetComponentDepsFactory(Ye),encapsulation:2})}}e("DeleteRelationConfigComponent",Ye);class We extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.deviceProfile}onConfigurationSet(e){this.deviceProfile=this.fb.group({persistAlarmRulesState:[!!e&&e.persistAlarmRulesState],fetchAlarmRulesStateOnStart:[!!e&&e.fetchAlarmRulesStateOnStart]})}validatorTriggers(){return["persistAlarmRulesState"]}updateValidators(e){this.deviceProfile.get("persistAlarmRulesState").value?this.deviceProfile.get("fetchAlarmRulesStateOnStart").enable({emitEvent:!1}):(this.deviceProfile.get("fetchAlarmRulesStateOnStart").setValue(!1,{emitEvent:!1}),this.deviceProfile.get("fetchAlarmRulesStateOnStart").disable({emitEvent:!1})),this.deviceProfile.get("fetchAlarmRulesStateOnStart").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||We)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:We,selectors:[["tb-device-profile-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:13,vars:13,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],["translate","",1,"tb-form-hint","tb-primary-fill"],[1,"tb-form-row","no-border","no-padding","slide-toggle",3,"tb-hint-tooltip-icon"],["formControlName","persistAlarmRulesState",1,"mat-slide"],["formControlName","fetchAlarmRulesStateOnStart",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.device-profile-node-hint"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"div",2),t.ɵɵpipe(4,"translate"),t.ɵɵelementStart(5,"mat-slide-toggle",3),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"div",2),t.ɵɵpipe(9,"translate"),t.ɵɵelementStart(10,"mat-slide-toggle",4),t.ɵɵtext(11),t.ɵɵpipe(12,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.deviceProfile),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(4,5,"tb.rulenode.persist-alarm-rules-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,7,"tb.rulenode.persist-alarm-rules")," "),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(9,9,"tb.rulenode.fetch-alarm-rules-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(12,11,"tb.rulenode.fetch-alarm-rules")," "))},dependencies:t.ɵɵgetComponentDepsFactory(We),encapsulation:2})}}e("DeviceProfileConfigComponent",We);const Xe=["jsFuncComponent"],Ze=["tbelFuncComponent"],et=()=>["prevMsg","prevMetadata","prevMsgType"];function tt(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.message-count-required")," "))}function nt(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-message-count-message")," "))}function rt(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.period-seconds-required")," "))}function at(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-period-seconds-message")," "))}function it(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-select",22)(1,"tb-toggle-option",23),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"tb-toggle-option",23),t.ɵɵtext(5),t.ɵɵpipe(6,"translate"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(),t.ɵɵproperty("value",e.scriptLanguage.TBEL),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,4,"tb.rulenode.script-lang-tbel")," "),t.ɵɵadvance(2),t.ɵɵproperty("value",e.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(6,6,"tb.rulenode.script-lang-js")," ")}}function ot(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",18,0),t.ɵɵtemplate(2,it,7,8,"tb-toggle-select",19),t.ɵɵelementStart(3,"button",20),t.ɵɵpipe(4,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(5,"mat-icon",21),t.ɵɵtext(6,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(5,et)),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.tbelEnabled),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(4,3,e.testScriptLabel))}}function lt(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",24,1)(2,"tb-toggle-select",22)(3,"tb-toggle-option",23),t.ɵɵtext(4),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"tb-toggle-option",23),t.ɵɵtext(7),t.ɵɵpipe(8,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(9,"button",20),t.ɵɵpipe(10,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(11,"mat-icon",21),t.ɵɵtext(12,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(14,et))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(3),t.ɵɵproperty("value",e.scriptLanguage.TBEL),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(5,8,"tb.rulenode.script-lang-tbel")," "),t.ɵɵadvance(2),t.ɵɵproperty("value",e.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(8,10,"tb.rulenode.script-lang-js")," "),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(10,12,e.testScriptLabel))}}class st extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.allowedEntityTypes=[u.DEVICE,u.ASSET,u.ENTITY_VIEW,u.CUSTOMER,u.USER,u.DASHBOARD],this.additionEntityTypes={TENANT:this.translate.instant("tb.rulenode.current-tenant"),RULE_NODE:this.translate.instant("tb.rulenode.current-rule-node")},this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-generator-function"}configForm(){return this.generatorConfigForm}onConfigurationSet(e){this.generatorConfigForm=this.fb.group({msgCount:[e?e.msgCount:null,[N.required,N.min(0)]],periodInSeconds:[e?e.periodInSeconds:null,[N.required,N.min(1)]],originator:[e?e.originator:{id:null,entityType:u.RULE_NODE},[]],scriptLang:[e?e.scriptLang:s.JS,[N.required]],jsScript:[e?e.jsScript:null,[]],tbelScript:[e?e.tbelScript:null,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.generatorConfigForm.get("scriptLang").value;t!==s.TBEL||this.tbelEnabled||(t=s.JS,this.generatorConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.generatorConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.generatorConfigForm.get("jsScript").setValidators(t===s.JS?[N.required]:[]),this.generatorConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.generatorConfigForm.get("tbelScript").setValidators(t===s.TBEL?[N.required]:[]),this.generatorConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return{msgCount:P(e?.msgCount)?e?.msgCount:0,periodInSeconds:P(e?.periodInSeconds)?e?.periodInSeconds:1,originator:{id:P(e?.originatorId)?e?.originatorId:null,entityType:P(e?.originatorType)?e?.originatorType:u.RULE_NODE},scriptLang:P(e?.scriptLang)?e?.scriptLang:s.JS,tbelScript:P(e?.tbelScript)?e?.tbelScript:null,jsScript:P(e?.jsScript)?e?.jsScript:null}}prepareOutputConfig(e){return e.originator?(e.originatorId=e.originator.id,e.originatorType=e.originator.entityType):(e.originatorId=null,e.originatorType=null),delete e.originator,e}testScript(e){const t=this.generatorConfigForm.get("scriptLang").value,n=t===s.JS?"jsScript":"tbelScript",r=t===s.JS?"rulenode/generator_node_script_fn":"rulenode/tbel/generator_node_script_fn",a=this.generatorConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"generate",this.translate.instant("tb.rulenode.generator"),"Generate",["prevMsg","prevMetadata","prevMsgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.generatorConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.generatorConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}static{this.ɵfac=function(e){return new(e||st)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:st,selectors:[["tb-action-node-generator-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(Xe,5),t.ɵɵviewQuery(Ze,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:32,vars:12,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","no-padding-bottom","stroked"],["translate","",1,"tb-form-panel-title"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields","column-xs"],[1,"flex"],["translate",""],["required","","type","number","min","0","step","1","matInput","","formControlName","msgCount"],[4,"ngIf"],["required","","type","number","min","1","step","1","matInput","","formControlName","periodInSeconds"],["required","true","useAliasEntityTypes","true","formControlName","originator",1,"flex-1",3,"allowedEntityTypes","additionEntityTypes"],[1,"tb-form-panel","stroked"],["expanded","",1,"tb-settings"],["formControlName","jsScript","functionName","Generate","helpId","rulenode/generator_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","tbelScript","functionName","Generate","helpId","rulenode/tbel/generator_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],[1,"flex","flex-row",2,"padding-bottom","16px"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["formControlName","jsScript","functionName","Generate","helpId","rulenode/generator_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarPrefixButton","","formControlName","scriptLang","appearance","fill",4,"ngIf"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["toolbarPrefixButton","","formControlName","scriptLang","appearance","fill"],[3,"value"],["formControlName","tbelScript","functionName","Generate","helpId","rulenode/tbel/generator_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",2)(1,"div",3)(2,"div",4),t.ɵɵtext(3,"tb.rulenode.generation-parameters"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",5)(5,"mat-form-field",6)(6,"mat-label",7),t.ɵɵtext(7,"tb.rulenode.message-count"),t.ɵɵelementEnd(),t.ɵɵelement(8,"input",8),t.ɵɵtemplate(9,tt,3,3,"mat-error",9)(10,nt,3,3,"mat-error",9),t.ɵɵelementEnd(),t.ɵɵelementStart(11,"mat-form-field",6)(12,"mat-label",7),t.ɵɵtext(13,"tb.rulenode.period-seconds"),t.ɵɵelementEnd(),t.ɵɵelement(14,"input",10),t.ɵɵtemplate(15,rt,3,3,"mat-error",9)(16,at,3,3,"mat-error",9),t.ɵɵelementEnd()()(),t.ɵɵelementStart(17,"div",3)(18,"div",4),t.ɵɵtext(19,"tb.rulenode.originator"),t.ɵɵelementEnd(),t.ɵɵelement(20,"tb-entity-select",11),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"div",12)(22,"mat-expansion-panel",13)(23,"mat-expansion-panel-header")(24,"mat-panel-title",7),t.ɵɵtext(25,"tb.rulenode.generator-function"),t.ɵɵelementEnd()(),t.ɵɵtemplate(26,ot,7,6,"tb-js-func",14)(27,lt,13,15,"tb-js-func",15),t.ɵɵelementStart(28,"div",16)(29,"button",17),t.ɵɵlistener("click",(function(){return n.testScript()})),t.ɵɵtext(30),t.ɵɵpipe(31,"translate"),t.ɵɵelementEnd()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.generatorConfigForm),t.ɵɵadvance(9),t.ɵɵproperty("ngIf",n.generatorConfigForm.get("msgCount").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.generatorConfigForm.get("msgCount").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.generatorConfigForm.get("periodInSeconds").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.generatorConfigForm.get("periodInSeconds").hasError("min")),t.ɵɵadvance(4),t.ɵɵproperty("allowedEntityTypes",n.allowedEntityTypes)("additionEntityTypes",n.additionEntityTypes),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.generatorConfigForm.get("scriptLang").value===n.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.generatorConfigForm.get("scriptLang").value===n.scriptLanguage.TBEL),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(31,10,n.testScriptLabel)," "))},dependencies:t.ɵɵgetComponentDepsFactory(st),styles:["[_nghost-%COMP%]     .mat-button-toggle-group{min-width:120px;height:24px!important}[_nghost-%COMP%]     .mat-button-toggle-group .mat-button-toggle{font-size:0}[_nghost-%COMP%]     .mat-button-toggle-group .mat-button-toggle .mat-button-toggle-button{height:20px!important;line-height:20px!important;border:none!important}[_nghost-%COMP%]     .mat-button-toggle-group .mat-button-toggle .mat-button-toggle-button .mat-button-toggle-label-content{font-size:14px!important;line-height:20px!important}@media screen and (min-width: 599px){[_nghost-%COMP%]     .tb-entity-select{display:flex;flex-direction:row;gap:16px}}[_nghost-%COMP%]     .tb-entity-select tb-entity-type-select{flex:1}[_nghost-%COMP%]     .tb-entity-select tb-entity-autocomplete{flex:1}[_nghost-%COMP%]     .tb-entity-select tb-entity-autocomplete mat-form-field{width:100%!important}"]})}}var pt;e("GeneratorConfigComponent",st),function(e){e.CUSTOMER="CUSTOMER",e.TENANT="TENANT",e.RELATED="RELATED",e.ALARM_ORIGINATOR="ALARM_ORIGINATOR",e.ENTITY="ENTITY"}(pt||(pt={}));const mt=new Map([[pt.CUSTOMER,"tb.rulenode.originator-customer"],[pt.TENANT,"tb.rulenode.originator-tenant"],[pt.RELATED,"tb.rulenode.originator-related"],[pt.ALARM_ORIGINATOR,"tb.rulenode.originator-alarm-originator"],[pt.ENTITY,"tb.rulenode.originator-entity"]]),dt=new Map([[pt.CUSTOMER,"tb.rulenode.originator-customer-desc"],[pt.TENANT,"tb.rulenode.originator-tenant-desc"],[pt.RELATED,"tb.rulenode.originator-related-entity-desc"],[pt.ALARM_ORIGINATOR,"tb.rulenode.originator-alarm-originator-desc"],[pt.ENTITY,"tb.rulenode.originator-entity-by-name-pattern-desc"]]),ut=[c.createdTime,c.name,{value:"type",name:"tb.rulenode.profile-name",keyName:"originatorProfileName"},c.firstName,c.lastName,c.email,c.title,c.country,c.state,c.city,c.address,c.address2,c.zip,c.phone,c.label,{value:"id",name:"tb.rulenode.id",keyName:"id"},{value:"additionalInfo",name:"tb.rulenode.additional-info",keyName:"additionalInfo"}],ct=new Map([["type","profileName"],["createdTime","createdTime"],["name","name"],["firstName","firstName"],["lastName","lastName"],["email","email"],["title","title"],["country","country"],["state","state"],["city","city"],["address","address"],["address2","address2"],["zip","zip"],["phone","phone"],["label","label"],["id","id"],["additionalInfo","additionalInfo"]]);var gt;!function(e){e.CIRCLE="CIRCLE",e.POLYGON="POLYGON"}(gt||(gt={}));const ft=new Map([[gt.CIRCLE,"tb.rulenode.perimeter-circle"],[gt.POLYGON,"tb.rulenode.perimeter-polygon"]]);var ht;!function(e){e.MILLISECONDS="MILLISECONDS",e.SECONDS="SECONDS",e.MINUTES="MINUTES",e.HOURS="HOURS",e.DAYS="DAYS"}(ht||(ht={}));const yt=new Map([[ht.MILLISECONDS,"tb.rulenode.time-unit-milliseconds"],[ht.SECONDS,"tb.rulenode.time-unit-seconds"],[ht.MINUTES,"tb.rulenode.time-unit-minutes"],[ht.HOURS,"tb.rulenode.time-unit-hours"],[ht.DAYS,"tb.rulenode.time-unit-days"]]);var bt;!function(e){e.METER="METER",e.KILOMETER="KILOMETER",e.FOOT="FOOT",e.MILE="MILE",e.NAUTICAL_MILE="NAUTICAL_MILE"}(bt||(bt={}));const vt=new Map([[bt.METER,"tb.rulenode.range-unit-meter"],[bt.KILOMETER,"tb.rulenode.range-unit-kilometer"],[bt.FOOT,"tb.rulenode.range-unit-foot"],[bt.MILE,"tb.rulenode.range-unit-mile"],[bt.NAUTICAL_MILE,"tb.rulenode.range-unit-nautical-mile"]]);var xt;!function(e){e.ID="ID",e.TITLE="TITLE",e.COUNTRY="COUNTRY",e.STATE="STATE",e.CITY="CITY",e.ZIP="ZIP",e.ADDRESS="ADDRESS",e.ADDRESS2="ADDRESS2",e.PHONE="PHONE",e.EMAIL="EMAIL",e.ADDITIONAL_INFO="ADDITIONAL_INFO"}(xt||(xt={}));const Ct=new Map([[xt.ID,"tb.rulenode.entity-details-id"],[xt.TITLE,"tb.rulenode.entity-details-title"],[xt.COUNTRY,"tb.rulenode.entity-details-country"],[xt.STATE,"tb.rulenode.entity-details-state"],[xt.CITY,"tb.rulenode.entity-details-city"],[xt.ZIP,"tb.rulenode.entity-details-zip"],[xt.ADDRESS,"tb.rulenode.entity-details-address"],[xt.ADDRESS2,"tb.rulenode.entity-details-address2"],[xt.PHONE,"tb.rulenode.entity-details-phone"],[xt.EMAIL,"tb.rulenode.entity-details-email"],[xt.ADDITIONAL_INFO,"tb.rulenode.entity-details-additional_info"]]);var St;!function(e){e.FIRST="FIRST",e.LAST="LAST",e.ALL="ALL"}(St||(St={}));const Tt=new Map([[St.FIRST,"tb.rulenode.first"],[St.LAST,"tb.rulenode.last"],[St.ALL,"tb.rulenode.all"]]),It=new Map([[St.FIRST,"tb.rulenode.first-mode-hint"],[St.LAST,"tb.rulenode.last-mode-hint"],[St.ALL,"tb.rulenode.all-mode-hint"]]);var Et,Ft;!function(e){e.ASC="ASC",e.DESC="DESC"}(Et||(Et={})),function(e){e.ATTRIBUTES="ATTRIBUTES",e.LATEST_TELEMETRY="LATEST_TELEMETRY",e.FIELDS="FIELDS"}(Ft||(Ft={}));const qt=new Map([[Ft.ATTRIBUTES,"tb.rulenode.attributes"],[Ft.LATEST_TELEMETRY,"tb.rulenode.latest-telemetry"],[Ft.FIELDS,"tb.rulenode.fields"]]),At=new Map([[Ft.ATTRIBUTES,"tb.rulenode.add-mapped-attribute-to"],[Ft.LATEST_TELEMETRY,"tb.rulenode.add-mapped-latest-telemetry-to"],[Ft.FIELDS,"tb.rulenode.add-mapped-fields-to"]]),kt=new Map([[Et.ASC,"tb.rulenode.ascending"],[Et.DESC,"tb.rulenode.descending"]]);var Nt;!function(e){e.STANDARD="STANDARD",e.FIFO="FIFO"}(Nt||(Nt={}));const wt=new Map([[Nt.STANDARD,"tb.rulenode.sqs-queue-standard"],[Nt.FIFO,"tb.rulenode.sqs-queue-fifo"]]),Mt=["anonymous","basic","cert.PEM"],Vt=new Map([["anonymous","tb.rulenode.credentials-anonymous"],["basic","tb.rulenode.credentials-basic"],["cert.PEM","tb.rulenode.credentials-pem"]]),Bt=["sas","cert.PEM"],Ot=new Map([["sas","tb.rulenode.credentials-sas"],["cert.PEM","tb.rulenode.credentials-pem"]]);var Dt;!function(e){e.GET="GET",e.POST="POST",e.PUT="PUT",e.DELETE="DELETE"}(Dt||(Dt={}));const Lt=["US-ASCII","ISO-8859-1","UTF-8","UTF-16BE","UTF-16LE","UTF-16"],Pt=new Map([["US-ASCII","tb.rulenode.charset-us-ascii"],["ISO-8859-1","tb.rulenode.charset-iso-8859-1"],["UTF-8","tb.rulenode.charset-utf-8"],["UTF-16BE","tb.rulenode.charset-utf-16be"],["UTF-16LE","tb.rulenode.charset-utf-16le"],["UTF-16","tb.rulenode.charset-utf-16"]]);var Rt;!function(e){e.CUSTOM="CUSTOM",e.ADD="ADD",e.SUB="SUB",e.MULT="MULT",e.DIV="DIV",e.SIN="SIN",e.SINH="SINH",e.COS="COS",e.COSH="COSH",e.TAN="TAN",e.TANH="TANH",e.ACOS="ACOS",e.ASIN="ASIN",e.ATAN="ATAN",e.ATAN2="ATAN2",e.EXP="EXP",e.EXPM1="EXPM1",e.SQRT="SQRT",e.CBRT="CBRT",e.GET_EXP="GET_EXP",e.HYPOT="HYPOT",e.LOG="LOG",e.LOG10="LOG10",e.LOG1P="LOG1P",e.CEIL="CEIL",e.FLOOR="FLOOR",e.FLOOR_DIV="FLOOR_DIV",e.FLOOR_MOD="FLOOR_MOD",e.ABS="ABS",e.MIN="MIN",e.MAX="MAX",e.POW="POW",e.SIGNUM="SIGNUM",e.RAD="RAD",e.DEG="DEG"}(Rt||(Rt={}));const _t=new Map([[Rt.CUSTOM,{value:Rt.CUSTOM,name:"Custom Function",description:"Use this function to specify complex mathematical expression.",minArgs:1,maxArgs:16}],[Rt.ADD,{value:Rt.ADD,name:"Addition",description:"x + y",minArgs:2,maxArgs:2}],[Rt.SUB,{value:Rt.SUB,name:"Subtraction",description:"x - y",minArgs:2,maxArgs:2}],[Rt.MULT,{value:Rt.MULT,name:"Multiplication",description:"x * y",minArgs:2,maxArgs:2}],[Rt.DIV,{value:Rt.DIV,name:"Division",description:"x / y",minArgs:2,maxArgs:2}],[Rt.SIN,{value:Rt.SIN,name:"Sine",description:"Returns the trigonometric sine of an angle in radians.",minArgs:1,maxArgs:1}],[Rt.SINH,{value:Rt.SINH,name:"Hyperbolic sine",description:"Returns the hyperbolic sine of an argument.",minArgs:1,maxArgs:1}],[Rt.COS,{value:Rt.COS,name:"Cosine",description:"Returns the trigonometric cosine of an angle in radians.",minArgs:1,maxArgs:1}],[Rt.COSH,{value:Rt.COSH,name:"Hyperbolic cosine",description:"Returns the hyperbolic cosine of an argument.",minArgs:1,maxArgs:1}],[Rt.TAN,{value:Rt.TAN,name:"Tangent",description:"Returns the trigonometric tangent of an angle in radians",minArgs:1,maxArgs:1}],[Rt.TANH,{value:Rt.TANH,name:"Hyperbolic tangent",description:"Returns the hyperbolic tangent of an argument",minArgs:1,maxArgs:1}],[Rt.ACOS,{value:Rt.ACOS,name:"Arc cosine",description:"Returns the arc cosine of an argument",minArgs:1,maxArgs:1}],[Rt.ASIN,{value:Rt.ASIN,name:"Arc sine",description:"Returns the arc sine of an argument",minArgs:1,maxArgs:1}],[Rt.ATAN,{value:Rt.ATAN,name:"Arc tangent",description:"Returns the arc tangent of an argument",minArgs:1,maxArgs:1}],[Rt.ATAN2,{value:Rt.ATAN2,name:"2-argument arc tangent",description:"Returns the angle theta from the conversion of rectangular coordinates (x, y) to polar coordinates (r, theta)",minArgs:2,maxArgs:2}],[Rt.EXP,{value:Rt.EXP,name:"Exponential",description:"Returns Euler's number e raised to the power of an argument",minArgs:1,maxArgs:1}],[Rt.EXPM1,{value:Rt.EXPM1,name:"Exponential minus one",description:"Returns Euler's number e raised to the power of an argument minus one",minArgs:1,maxArgs:1}],[Rt.SQRT,{value:Rt.SQRT,name:"Square",description:"Returns the correctly rounded positive square root of an argument",minArgs:1,maxArgs:1}],[Rt.CBRT,{value:Rt.CBRT,name:"Cube root",description:"Returns the cube root of an argument",minArgs:1,maxArgs:1}],[Rt.GET_EXP,{value:Rt.GET_EXP,name:"Get exponent",description:"Returns the unbiased exponent used in the representation of an argument",minArgs:1,maxArgs:1}],[Rt.HYPOT,{value:Rt.HYPOT,name:"Square root",description:"Returns the square root of the squares of the arguments",minArgs:2,maxArgs:2}],[Rt.LOG,{value:Rt.LOG,name:"Logarithm",description:"Returns the natural logarithm of an argument",minArgs:1,maxArgs:1}],[Rt.LOG10,{value:Rt.LOG10,name:"Base 10 logarithm",description:"Returns the base 10 logarithm of an argument",minArgs:1,maxArgs:1}],[Rt.LOG1P,{value:Rt.LOG1P,name:"Logarithm of the sum",description:"Returns the natural logarithm of the sum of an argument",minArgs:1,maxArgs:1}],[Rt.CEIL,{value:Rt.CEIL,name:"Ceiling",description:"Returns the smallest (closest to negative infinity) of an argument",minArgs:1,maxArgs:1}],[Rt.FLOOR,{value:Rt.FLOOR,name:"Floor",description:"Returns the largest (closest to positive infinity) of an argument",minArgs:1,maxArgs:1}],[Rt.FLOOR_DIV,{value:Rt.FLOOR_DIV,name:"Floor division",description:"Returns the largest (closest to positive infinity) of the arguments",minArgs:2,maxArgs:2}],[Rt.FLOOR_MOD,{value:Rt.FLOOR_MOD,name:"Floor modulus",description:"Returns the floor modulus of the arguments",minArgs:2,maxArgs:2}],[Rt.ABS,{value:Rt.ABS,name:"Absolute",description:"Returns the absolute value of an argument",minArgs:1,maxArgs:1}],[Rt.MIN,{value:Rt.MIN,name:"Min",description:"Returns the smaller of the arguments",minArgs:2,maxArgs:2}],[Rt.MAX,{value:Rt.MAX,name:"Max",description:"Returns the greater of the arguments",minArgs:2,maxArgs:2}],[Rt.POW,{value:Rt.POW,name:"Raise to a power",description:"Returns the value of the first argument raised to the power of the second argument",minArgs:2,maxArgs:2}],[Rt.SIGNUM,{value:Rt.SIGNUM,name:"Sign of a real number",description:"Returns the signum function of the argument",minArgs:1,maxArgs:1}],[Rt.RAD,{value:Rt.RAD,name:"Radian",description:"Converts an angle measured in degrees to an approximately equivalent angle measured in radians",minArgs:1,maxArgs:1}],[Rt.DEG,{value:Rt.DEG,name:"Degrees",description:"Converts an angle measured in radians to an approximately equivalent angle measured in degrees.",minArgs:1,maxArgs:1}]]);var jt,Gt,Kt;!function(e){e.MESSAGE_BODY="MESSAGE_BODY",e.MESSAGE_METADATA="MESSAGE_METADATA",e.ATTRIBUTE="ATTRIBUTE",e.TIME_SERIES="TIME_SERIES",e.CONSTANT="CONSTANT"}(jt||(jt={})),function(e){e.MESSAGE_BODY="MESSAGE_BODY",e.MESSAGE_METADATA="MESSAGE_METADATA",e.ATTRIBUTE="ATTRIBUTE",e.TIME_SERIES="TIME_SERIES"}(Gt||(Gt={})),function(e){e.DATA="DATA",e.METADATA="METADATA"}(Kt||(Kt={}));const Ut=new Map([[Kt.DATA,"tb.rulenode.message-to-metadata"],[Kt.METADATA,"tb.rulenode.metadata-to-message"]]),Ht=(new Map([[Kt.DATA,"tb.rulenode.from-message"],[Kt.METADATA,"tb.rulenode.from-metadata"]]),new Map([[Kt.DATA,"tb.rulenode.message"],[Kt.METADATA,"tb.rulenode.metadata"]])),zt=new Map([[Kt.DATA,"tb.rulenode.message"],[Kt.METADATA,"tb.rulenode.message-metadata"]]),$t=new Map([[jt.MESSAGE_BODY,{name:"tb.rulenode.message-body-type",description:"Fetch argument value from incoming message"}],[jt.MESSAGE_METADATA,{name:"tb.rulenode.message-metadata-type",description:"Fetch argument value from incoming message metadata"}],[jt.ATTRIBUTE,{name:"tb.rulenode.attribute-type",description:"Fetch attribute value from database"}],[jt.TIME_SERIES,{name:"tb.rulenode.time-series-type",description:"Fetch latest time-series value from database"}],[jt.CONSTANT,{name:"tb.rulenode.constant-type",description:"Define constant value"}]]),Qt=new Map([[Gt.MESSAGE_BODY,{name:"tb.rulenode.message-body-type",description:"Add result to the outgoing message"}],[Gt.MESSAGE_METADATA,{name:"tb.rulenode.message-metadata-type",description:"Add result to the outgoing message metadata"}],[Gt.ATTRIBUTE,{name:"tb.rulenode.attribute-type",description:"Store result as an entity attribute in the database"}],[Gt.TIME_SERIES,{name:"tb.rulenode.time-series-type",description:"Store result as an entity time-series in the database"}]]),Jt=["x","y","z","a","b","c","d","k","l","m","n","o","p","r","s","t"];var Yt,Wt;!function(e){e.SHARED_SCOPE="SHARED_SCOPE",e.SERVER_SCOPE="SERVER_SCOPE",e.CLIENT_SCOPE="CLIENT_SCOPE"}(Yt||(Yt={})),function(e){e.SHARED_SCOPE="SHARED_SCOPE",e.SERVER_SCOPE="SERVER_SCOPE"}(Wt||(Wt={}));const Xt=new Map([[Yt.SHARED_SCOPE,"tb.rulenode.shared-scope"],[Yt.SERVER_SCOPE,"tb.rulenode.server-scope"],[Yt.CLIENT_SCOPE,"tb.rulenode.client-scope"]]);var Zt;!function(e){e.ON_FIRST_MESSAGE="ON_FIRST_MESSAGE",e.ON_EACH_MESSAGE="ON_EACH_MESSAGE"}(Zt||(Zt={}));const en=new Map([[Zt.ON_EACH_MESSAGE,{value:!0,name:"tb.rulenode.presence-monitoring-strategy-on-each-message"}],[Zt.ON_FIRST_MESSAGE,{value:!1,name:"tb.rulenode.presence-monitoring-strategy-on-first-message"}]]),tn=e=>({perimeterKeyName:e});function nn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.latitude-field-name-required")," "))}function rn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.longitude-field-name-required")," "))}function an(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.perimeterTypeTranslationMap.get(e))," ")}}function on(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.perimeter-key-name-required")," "))}function ln(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",23)(1,"mat-label"),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",24),t.ɵɵtemplate(5,on,3,3,"mat-error",6),t.ɵɵelementStart(6,"mat-hint"),t.ɵɵtext(7),t.ɵɵpipe(8,"translate"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(3,3,"tb.rulenode.perimeter-key-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("perimeterKeyName").hasError("required")),t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(8,5,"tb.rulenode.perimeter-key-name-hint"))}}function sn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.circle-center-latitude-required")," "))}function pn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.circle-center-longitude-required")," "))}function mn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.range-required")," "))}function dn(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.rangeUnitTranslationMap.get(e))," ")}}function un(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.range-units-required")," "))}function cn(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",9)(1,"div",3)(2,"mat-form-field",25)(3,"mat-label"),t.ɵɵtext(4),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(6,"input",26),t.ɵɵtemplate(7,sn,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-form-field",25)(9,"mat-label"),t.ɵɵtext(10),t.ɵɵpipe(11,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",27),t.ɵɵtemplate(13,pn,3,3,"mat-error",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(14,"div",3)(15,"mat-form-field",25)(16,"mat-label"),t.ɵɵtext(17),t.ɵɵpipe(18,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(19,"input",28),t.ɵɵtemplate(20,mn,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"mat-form-field",25)(22,"mat-label"),t.ɵɵtext(23),t.ɵɵpipe(24,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(25,"mat-select",29),t.ɵɵtemplate(26,dn,3,4,"mat-option",12),t.ɵɵelementEnd(),t.ɵɵtemplate(27,un,3,3,"mat-error",6),t.ɵɵelementEnd()()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(5,9,"tb.rulenode.circle-center-latitude")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("centerLatitude").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(11,11,"tb.rulenode.circle-center-longitude")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("centerLongitude").hasError("required")),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(18,13,"tb.rulenode.range")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("range").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(24,15,"tb.rulenode.range-units")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",e.rangeUnits),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("rangeUnit").hasError("required"))}}function gn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.polygon-definition-required")," "))}function fn(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",9)(1,"mat-form-field",30)(2,"mat-label",31),t.ɵɵtext(3,"tb.rulenode.polygon-definition"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",32),t.ɵɵelementStart(5,"mat-icon",33),t.ɵɵpipe(6,"translate"),t.ɵɵtext(7," help "),t.ɵɵelementEnd(),t.ɵɵtemplate(8,gn,3,3,"mat-error",6),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(5),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(6,2,"tb.rulenode.polygon-definition-hint")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("polygonsDefinition").hasError("required"))}}function hn(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",22),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",r.presenceMonitoringStrategies.get(e).value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.presenceMonitoringStrategies.get(e).name)," ")}}function yn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-inside-duration-value-required")," "))}function bn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function vn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function xn(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.timeUnitsTranslationMap.get(e))," ")}}function Cn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-outside-duration-value-required")," "))}function Sn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function Tn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function In(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.timeUnitsTranslationMap.get(e))," ")}}function En(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"div",34)(2,"mat-form-field",35)(3,"mat-label",31),t.ɵɵtext(4,"tb.rulenode.min-inside-duration"),t.ɵɵelementEnd(),t.ɵɵelement(5,"input",36),t.ɵɵtemplate(6,yn,3,3,"mat-error",6)(7,bn,3,3,"mat-error",6)(8,vn,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-form-field",35)(10,"mat-label",31),t.ɵɵtext(11,"tb.rulenode.min-inside-duration-time-unit"),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-select",37),t.ɵɵtemplate(13,xn,3,4,"mat-option",12),t.ɵɵelementEnd()()(),t.ɵɵelementStart(14,"div",34)(15,"mat-form-field",35)(16,"mat-label",31),t.ɵɵtext(17,"tb.rulenode.min-outside-duration"),t.ɵɵelementEnd(),t.ɵɵelement(18,"input",38),t.ɵɵtemplate(19,Cn,3,3,"mat-error",6)(20,Sn,3,3,"mat-error",6)(21,Tn,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(22,"mat-form-field",35)(23,"mat-label",31),t.ɵɵtext(24,"tb.rulenode.min-outside-duration-time-unit"),t.ɵɵelementEnd(),t.ɵɵelementStart(25,"mat-select",39),t.ɵɵtemplate(26,In,3,4,"mat-option",12),t.ɵɵelementEnd()()()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(6),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("minInsideDuration").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("minInsideDuration").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("minInsideDuration").hasError("max")),t.ɵɵadvance(5),t.ɵɵproperty("ngForOf",e.timeUnits),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("minOutsideDuration").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("minOutsideDuration").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.geoActionConfigForm.get("minOutsideDuration").hasError("max")),t.ɵɵadvance(5),t.ɵɵproperty("ngForOf",e.timeUnits)}}class Fn extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.perimeterType=gt,this.perimeterTypes=Object.keys(gt),this.perimeterTypeTranslationMap=ft,this.rangeUnits=Object.keys(bt),this.rangeUnitTranslationMap=vt,this.presenceMonitoringStrategies=en,this.presenceMonitoringStrategyKeys=Array.from(this.presenceMonitoringStrategies.keys()),this.timeUnits=Object.keys(ht),this.timeUnitsTranslationMap=yt,this.defaultPaddingEnable=!0}configForm(){return this.geoActionConfigForm}onConfigurationSet(e){this.geoActionConfigForm=this.fb.group({reportPresenceStatusOnEachMessage:[!e||e.reportPresenceStatusOnEachMessage,[N.required]],latitudeKeyName:[e?e.latitudeKeyName:null,[N.required]],longitudeKeyName:[e?e.longitudeKeyName:null,[N.required]],perimeterType:[e?e.perimeterType:null,[N.required]],fetchPerimeterInfoFromMessageMetadata:[!!e&&e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterKeyName:[e?e.perimeterKeyName:null,[]],centerLatitude:[e?e.centerLatitude:null,[]],centerLongitude:[e?e.centerLatitude:null,[]],range:[e?e.range:null,[]],rangeUnit:[e?e.rangeUnit:null,[]],polygonsDefinition:[e?e.polygonsDefinition:null,[]],minInsideDuration:[e?e.minInsideDuration:null,[N.required,N.min(1),N.max(2147483647)]],minInsideDurationTimeUnit:[e?e.minInsideDurationTimeUnit:null,[N.required]],minOutsideDuration:[e?e.minOutsideDuration:null,[N.required,N.min(1),N.max(2147483647)]],minOutsideDurationTimeUnit:[e?e.minOutsideDurationTimeUnit:null,[N.required]]})}validatorTriggers(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]}updateValidators(e){const t=this.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,n=this.geoActionConfigForm.get("perimeterType").value;t?this.geoActionConfigForm.get("perimeterKeyName").setValidators([N.required]):this.geoActionConfigForm.get("perimeterKeyName").setValidators([]),t||n!==gt.CIRCLE?(this.geoActionConfigForm.get("centerLatitude").setValidators([]),this.geoActionConfigForm.get("centerLongitude").setValidators([]),this.geoActionConfigForm.get("range").setValidators([]),this.geoActionConfigForm.get("rangeUnit").setValidators([]),this.defaultPaddingEnable=!0):(this.geoActionConfigForm.get("centerLatitude").setValidators([N.required,N.min(-90),N.max(90)]),this.geoActionConfigForm.get("centerLongitude").setValidators([N.required,N.min(-180),N.max(180)]),this.geoActionConfigForm.get("range").setValidators([N.required,N.min(0)]),this.geoActionConfigForm.get("rangeUnit").setValidators([N.required]),this.defaultPaddingEnable=!1),t||n!==gt.POLYGON?this.geoActionConfigForm.get("polygonsDefinition").setValidators([]):this.geoActionConfigForm.get("polygonsDefinition").setValidators([N.required]),this.geoActionConfigForm.get("perimeterKeyName").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||Fn)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Fn,selectors:[["tb-action-node-gps-geofencing-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:52,vars:42,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-row","gap-4"],[1,"mat-block","max-w-50%","flex-full"],["matInput","","formControlName","latitudeKeyName","required",""],[4,"ngIf"],["matInput","","formControlName","longitudeKeyName","required",""],["translate","",1,"tb-form-hint","tb-primary-fill"],[1,"flex","flex-col"],["hideRequiredMarker","",1,"mat-block","flex-1"],["formControlName","perimeterType"],[3,"value",4,"ngFor","ngForOf"],[1,"tb-form-row","no-border","no-padding","slide-toggle",3,"tb-hint-tooltip-icon"],["formControlName","fetchPerimeterInfoFromMessageMetadata",1,"mat-slide"],["class","mat-block",4,"ngIf"],["class","flex flex-col",4,"ngIf"],[1,"tb-form-panel","stroked","no-padding-bottom"],[1,"flex","flex-col","items-stretch","justify-between","gt-sm:flex-row","lt-md:gap-4"],[1,"tb-form-panel-title"],["formControlName","reportPresenceStatusOnEachMessage","appearance","fill",1,"fetch-to-data-toggle"],[1,"tb-form-hint","tb-primary-fill"],[3,"value"],[1,"mat-block"],["matInput","","formControlName","perimeterKeyName","required",""],[1,"flex-1"],["type","number","min","-90","max","90","step","0.1","matInput","","formControlName","centerLatitude","required",""],["type","number","min","-180","max","180","step","0.1","matInput","","formControlName","centerLongitude","required",""],["type","number","min","0","step","0.1","matInput","","formControlName","range","required",""],["formControlName","rangeUnit","required",""],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["matInput","","formControlName","polygonsDefinition","required",""],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"margin-8","cursor-pointer",3,"matTooltip"],[1,"flex","flex-col","gt-sm:flex-row","gt-sm:gap-2"],[1,"mat-block","flex-1"],["type","number","step","1","min","1","max","2147483647","matInput","","formControlName","minInsideDuration","required",""],["formControlName","minInsideDurationTimeUnit","required",""],["type","number","step","1","min","1","max","2147483647","matInput","","formControlName","minOutsideDuration","required",""],["formControlName","minOutsideDurationTimeUnit","required",""]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"section",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.coordinate-field-names"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"section")(5,"div",3)(6,"mat-form-field",4)(7,"mat-label"),t.ɵɵtext(8),t.ɵɵpipe(9,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",5),t.ɵɵtemplate(11,nn,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-form-field",4)(13,"mat-label"),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(16,"input",7),t.ɵɵtemplate(17,rn,3,3,"mat-error",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(18,"div",8),t.ɵɵtext(19,"tb.rulenode.coordinate-field-hint"),t.ɵɵelementEnd()()(),t.ɵɵelementStart(20,"section",1)(21,"div",2),t.ɵɵtext(22,"tb.rulenode.geofence-configuration"),t.ɵɵelementEnd(),t.ɵɵelementStart(23,"section",9)(24,"mat-form-field",10)(25,"mat-label"),t.ɵɵtext(26),t.ɵɵpipe(27,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(28,"mat-select",11),t.ɵɵtemplate(29,an,3,4,"mat-option",12),t.ɵɵelementEnd()(),t.ɵɵelementStart(30,"div",13),t.ɵɵpipe(31,"translate"),t.ɵɵpipe(32,"translate"),t.ɵɵelementStart(33,"mat-slide-toggle",14),t.ɵɵtext(34),t.ɵɵpipe(35,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(36,ln,9,7,"mat-form-field",15)(37,cn,28,17,"div",16)(38,fn,9,4,"div",16),t.ɵɵelementEnd()(),t.ɵɵelementStart(39,"section",17)(40,"div",18)(41,"div",19),t.ɵɵtext(42),t.ɵɵpipe(43,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(44,"tb-toggle-select",20),t.ɵɵtemplate(45,hn,3,4,"tb-toggle-option",12),t.ɵɵelementEnd()(),t.ɵɵelementStart(46,"div",21),t.ɵɵtext(47),t.ɵɵpipe(48,"translate"),t.ɵɵpipe(49,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(50,"section",9),t.ɵɵtemplate(51,En,27,8,"div",6),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.geoActionConfigForm),t.ɵɵadvance(8),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(9,18,"tb.rulenode.latitude-field-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.geoActionConfigForm.get("latitudeKeyName").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(15,20,"tb.rulenode.longitude-field-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.geoActionConfigForm.get("longitudeKeyName").hasError("required")),t.ɵɵadvance(3),t.ɵɵclassProp("no-padding-bottom",!n.defaultPaddingEnable),t.ɵɵadvance(6),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(27,22,"tb.rulenode.perimeter-type")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.perimeterTypes),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",n.geoActionConfigForm.get("perimeterType").value===n.perimeterType.CIRCLE?t.ɵɵpipeBind2(31,24,"tb.rulenode.fetch-circle-parameter-info-from-metadata-hint",t.ɵɵpureFunction1(38,tn,n.geoActionConfigForm.get("perimeterKeyName").valid?n.geoActionConfigForm.get("perimeterKeyName").value:"ss_perimeter")):t.ɵɵpipeBind2(32,27,"tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint",t.ɵɵpureFunction1(40,tn,n.geoActionConfigForm.get("perimeterKeyName").valid?n.geoActionConfigForm.get("perimeterKeyName").value:"ss_perimeter"))),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(35,30,"tb.rulenode.fetch-perimeter-info-from-metadata")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.geoActionConfigForm.get("perimeterType").value===n.perimeterType.CIRCLE&&!n.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.geoActionConfigForm.get("perimeterType").value===n.perimeterType.POLYGON&&!n.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(43,32,"tb.rulenode.presence-monitoring-strategy")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.presenceMonitoringStrategyKeys),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",!1===n.geoActionConfigForm.get("reportPresenceStatusOnEachMessage").value?t.ɵɵpipeBind1(48,34,"tb.rulenode.presence-monitoring-strategy-on-first-message-hint"):t.ɵɵpipeBind1(49,36,"tb.rulenode.presence-monitoring-strategy-on-each-message-hint")," "),t.ɵɵadvance(4),t.ɵɵproperty("ngIf",!1===n.geoActionConfigForm.get("reportPresenceStatusOnEachMessage").value))},dependencies:t.ɵɵgetComponentDepsFactory(Fn),styles:["[_nghost-%COMP%]   .slide-toggle[_ngcontent-%COMP%]{margin-bottom:18px}"]})}}e("GpsGeoActionConfigComponent",Fn);const qn=["jsFuncComponent"],An=["tbelFuncComponent"],kn=()=>["msg","metadata","msgType"];function Nn(e,n){1&e&&t.ɵɵelement(0,"tb-script-lang",8)}function wn(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",9,0)(2,"button",10),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",11),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(4,kn)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,2,e.testScriptLabel))}}function Mn(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",12,1)(2,"button",10),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",11),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(6,kn))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,4,e.testScriptLabel))}}class Vn extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-to-string-function"}configForm(){return this.logConfigForm}onConfigurationSet(e){this.logConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:s.JS,[N.required]],jsScript:[e?e.jsScript:null,[]],tbelScript:[e?e.tbelScript:null,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.logConfigForm.get("scriptLang").value;t!==s.TBEL||this.tbelEnabled||(t=s.JS,this.logConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.logConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.logConfigForm.get("jsScript").setValidators(t===s.JS?[N.required]:[]),this.logConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.logConfigForm.get("tbelScript").setValidators(t===s.TBEL?[N.required]:[]),this.logConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=s.JS)),e}testScript(e){const t=this.logConfigForm.get("scriptLang").value,n=t===s.JS?"jsScript":"tbelScript",r=t===s.JS?"rulenode/log_node_script_fn":"rulenode/tbel/log_node_script_fn",a=this.logConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"string",this.translate.instant("tb.rulenode.to-string"),"ToString",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.logConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.logConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}static{this.ɵfac=function(e){return new(e||Vn)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Vn,selectors:[["tb-action-node-log-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(qn,5),t.ɵɵviewQuery(An,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:8,vars:7,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],[1,"flex","flex-col",3,"formGroup"],["formControlName","scriptLang",4,"ngIf"],["formControlName","jsScript","functionName","ToString","helpId","rulenode/log_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","tbelScript","functionName","ToString","helpId","rulenode/tbel/log_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],[1,"flex","flex-row"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["formControlName","scriptLang"],["formControlName","jsScript","functionName","ToString","helpId","rulenode/log_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["formControlName","tbelScript","functionName","ToString","helpId","rulenode/tbel/log_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",2),t.ɵɵtemplate(1,Nn,1,0,"tb-script-lang",3)(2,wn,6,5,"tb-js-func",4)(3,Mn,6,7,"tb-js-func",5),t.ɵɵelementStart(4,"div",6)(5,"button",7),t.ɵɵlistener("click",(function(){return n.testScript()})),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.logConfigForm),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.tbelEnabled),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.logConfigForm.get("scriptLang").value===n.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.logConfigForm.get("scriptLang").value===n.scriptLanguage.TBEL),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,5,n.testScriptLabel)," "))},dependencies:t.ɵɵgetComponentDepsFactory(Vn),encapsulation:2})}}function Bn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.interval-seconds-required")," "))}function On(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-interval-seconds-message")," "))}function Dn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.output-timeseries-key-prefix-required")," "))}e("LogConfigComponent",Vn);class Ln extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.msgCountConfigForm}onConfigurationSet(e){this.msgCountConfigForm=this.fb.group({interval:[e?e.interval:null,[N.required,N.min(1)]],telemetryPrefix:[e?e.telemetryPrefix:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||Ln)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ln,selectors:[["tb-action-node-msg-count-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:12,vars:4,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"mat-block"],["translate",""],["required","","type","number","min","1","step","1","matInput","","formControlName","interval"],[4,"ngIf"],["required","","matInput","","formControlName","telemetryPrefix"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.interval-seconds"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,Bn,3,3,"mat-error",4)(6,On,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(7,"mat-form-field",1)(8,"mat-label",2),t.ɵɵtext(9,"tb.rulenode.output-timeseries-key-prefix"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",5),t.ɵɵtemplate(11,Dn,3,3,"mat-error",4),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.msgCountConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.msgCountConfigForm.get("interval").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.msgCountConfigForm.get("interval").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.msgCountConfigForm.get("telemetryPrefix").hasError("required")))},dependencies:t.ɵɵgetComponentDepsFactory(Ln),encapsulation:2})}}function Pn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.period-seconds-required")," "))}function Rn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-period-0-seconds-message")," "))}function _n(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",5)(1,"mat-label",6),t.ɵɵtext(2,"tb.rulenode.period-seconds"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",9),t.ɵɵtemplate(4,Pn,3,3,"mat-error",8)(5,Rn,3,3,"mat-error",8),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.msgDelayConfigForm.get("periodInSeconds").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.msgDelayConfigForm.get("periodInSeconds").hasError("min"))}}function jn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.period-in-seconds-pattern-required")," "))}function Gn(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",10)(1,"mat-label",6),t.ɵɵtext(2,"tb.rulenode.period-in-seconds-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",11),t.ɵɵtemplate(4,jn,3,3,"mat-error",8),t.ɵɵelementStart(5,"mat-hint",6),t.ɵɵtext(6,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.msgDelayConfigForm.get("periodInSecondsPattern").hasError("required"))}}function Kn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-pending-messages-required")," "))}function Un(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-pending-messages-range")," "))}function Hn(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-pending-messages-range")," "))}e("MsgCountConfigComponent",Ln);class zn extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.msgDelayConfigForm}onConfigurationSet(e){this.msgDelayConfigForm=this.fb.group({useMetadataPeriodInSecondsPatterns:[!!e&&e.useMetadataPeriodInSecondsPatterns,[]],periodInSeconds:[e?e.periodInSeconds:null,[]],periodInSecondsPattern:[e?e.periodInSecondsPattern:null,[]],maxPendingMsgs:[e?e.maxPendingMsgs:null,[N.required,N.min(1),N.max(1e5)]]})}validatorTriggers(){return["useMetadataPeriodInSecondsPatterns"]}updateValidators(e){this.msgDelayConfigForm.get("useMetadataPeriodInSecondsPatterns").value?(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([N.required]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([])):(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([N.required,N.min(0)])),this.msgDelayConfigForm.get("periodInSecondsPattern").updateValueAndValidity({emitEvent:e}),this.msgDelayConfigForm.get("periodInSeconds").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||zn)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:zn,selectors:[["tb-action-node-msg-delay-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:16,vars:9,consts:[["periodInSecondsPattern",""],[1,"flex","flex-col",3,"formGroup"],["formControlName","useMetadataPeriodInSecondsPatterns"],["translate","",1,"tb-hint"],["class","mat-block",4,"ngIf","ngIfElse"],[1,"mat-block"],["translate",""],["required","","type","number","min","1","max","100000","step","1","matInput","","formControlName","maxPendingMsgs"],[4,"ngIf"],["required","","type","number","min","0","step","1","matInput","","formControlName","periodInSeconds"],["subscriptSizing","dynamic",1,"mat-block"],["required","","matInput","","formControlName","periodInSecondsPattern"]],template:function(e,n){if(1&e&&(t.ɵɵelementStart(0,"section",1)(1,"mat-checkbox",2),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",3),t.ɵɵtext(5,"tb.rulenode.use-metadata-period-in-seconds-patterns-hint"),t.ɵɵelementEnd(),t.ɵɵtemplate(6,_n,6,2,"mat-form-field",4)(7,Gn,7,1,"ng-template",null,0,t.ɵɵtemplateRefExtractor),t.ɵɵelementStart(9,"mat-form-field",5)(10,"mat-label",6),t.ɵɵtext(11,"tb.rulenode.max-pending-messages"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",7),t.ɵɵtemplate(13,Kn,3,3,"mat-error",8)(14,Un,3,3,"mat-error",8)(15,Hn,3,3,"mat-error",8),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵreference(8);t.ɵɵproperty("formGroup",n.msgDelayConfigForm),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,7,"tb.rulenode.use-metadata-period-in-seconds-patterns")," "),t.ɵɵadvance(4),t.ɵɵproperty("ngIf",!0!==n.msgDelayConfigForm.get("useMetadataPeriodInSecondsPatterns").value)("ngIfElse",e),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.msgDelayConfigForm.get("maxPendingMsgs").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.msgDelayConfigForm.get("maxPendingMsgs").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.msgDelayConfigForm.get("maxPendingMsgs").hasError("max"))}},dependencies:t.ɵɵgetComponentDepsFactory(zn),encapsulation:2})}}e("MsgDelayConfigComponent",zn);const $n=()=>({standalone:!0});function Qn(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",10),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.telemetryTypeTranslationsMap.get(e))," ")}}class Jn extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopes=Object.keys(o),this.telemetryTypeTranslationsMap=l}configForm(){return this.pushToCloudConfigForm}onConfigurationSet(e){this.pushToCloudConfigForm=this.fb.group({scope:[e?e.scope:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||Jn)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Jn,selectors:[["tb-action-node-push-to-cloud-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:19,vars:16,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],[1,"flex"],["required","","matInput","","formControlName","scope",1,"tb-entity-type-select"],[3,"value",4,"ngFor","ngForOf"],["type","text","matInput","","readonly","","disabled","",3,"ngModel","ngModelOptions"],["type","button","matSuffix","","mat-icon-button","","aria-label","Copy","ngxClipboard","",3,"cbContent","matTooltip"],["aria-hidden","false","aria-label","help-icon"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵelement(2,"tb-example-hint",2),t.ɵɵelementStart(3,"div",3)(4,"mat-form-field",4)(5,"mat-label"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",5),t.ɵɵtemplate(9,Qn,3,4,"mat-option",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(10,"mat-form-field",4)(11,"mat-label"),t.ɵɵtext(12),t.ɵɵpipe(13,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(14,"input",7),t.ɵɵelementStart(15,"button",8),t.ɵɵpipe(16,"translate"),t.ɵɵelementStart(17,"mat-icon",9),t.ɵɵtext(18,"content_copy "),t.ɵɵelementEnd()()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.pushToCloudConfigForm),t.ɵɵadvance(2),t.ɵɵproperty("hintText","tb.rulenode.attributes-scope-hint"),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,9,"tb.rulenode.attributes-scope")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.attributeScopes),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(13,11,"tb.rulenode.attributes-scope-value")),t.ɵɵadvance(2),t.ɵɵproperty("ngModel",n.pushToCloudConfigForm.get("scope").value)("ngModelOptions",t.ɵɵpureFunction0(15,$n)),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(16,13,"tb.rulenode.attributes-scope-value-copy")),t.ɵɵproperty("cbContent",n.pushToCloudConfigForm.get("scope").value))},dependencies:t.ɵɵgetComponentDepsFactory(Jn),encapsulation:2})}}e("PushToCloudConfigComponent",Jn);const Yn=()=>({standalone:!0});function Wn(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",10),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.telemetryTypeTranslationsMap.get(e))," ")}}class Xn extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopes=Object.keys(o),this.telemetryTypeTranslationsMap=l}configForm(){return this.pushToEdgeConfigForm}onConfigurationSet(e){this.pushToEdgeConfigForm=this.fb.group({scope:[e?e.scope:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||Xn)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Xn,selectors:[["tb-action-node-push-to-edge-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:19,vars:16,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],[1,"flex"],["required","","matInput","","formControlName","scope",1,"tb-entity-type-select"],[3,"value",4,"ngFor","ngForOf"],["type","text","matInput","","readonly","","disabled","",3,"ngModel","ngModelOptions"],["type","button","matSuffix","","mat-icon-button","","aria-label","Copy","ngxClipboard","",3,"cbContent","matTooltip"],["aria-hidden","false","aria-label","help-icon"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵelement(2,"tb-example-hint",2),t.ɵɵelementStart(3,"div",3)(4,"mat-form-field",4)(5,"mat-label"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",5),t.ɵɵtemplate(9,Wn,3,4,"mat-option",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(10,"mat-form-field",4)(11,"mat-label"),t.ɵɵtext(12),t.ɵɵpipe(13,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(14,"input",7),t.ɵɵelementStart(15,"button",8),t.ɵɵpipe(16,"translate"),t.ɵɵelementStart(17,"mat-icon",9),t.ɵɵtext(18,"content_copy "),t.ɵɵelementEnd()()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.pushToEdgeConfigForm),t.ɵɵadvance(2),t.ɵɵproperty("hintText","tb.rulenode.attributes-scope-hint"),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,9,"tb.rulenode.attributes-scope")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.attributeScopes),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(13,11,"tb.rulenode.attributes-scope-value")),t.ɵɵadvance(2),t.ɵɵproperty("ngModel",n.pushToEdgeConfigForm.get("scope").value)("ngModelOptions",t.ɵɵpureFunction0(15,Yn)),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(16,13,"tb.rulenode.attributes-scope-value-copy")),t.ɵɵproperty("cbContent",n.pushToEdgeConfigForm.get("scope").value))},dependencies:t.ɵɵgetComponentDepsFactory(Xn),encapsulation:2})}}e("PushToEdgeConfigComponent",Xn);class Zn extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.rpcReplyConfigForm}onConfigurationSet(e){this.rpcReplyConfigForm=this.fb.group({serviceIdMetaDataAttribute:[e?e.serviceIdMetaDataAttribute:null,[]],sessionIdMetaDataAttribute:[e?e.sessionIdMetaDataAttribute:null,[]],requestIdMetaDataAttribute:[e?e.requestIdMetaDataAttribute:null,[]]})}static{this.ɵfac=function(e){return new(e||Zn)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Zn,selectors:[["tb-action-node-rpc-reply-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:17,vars:2,consts:[[1,"tb-form-panel","stroked","no-padding-bottom",3,"formGroup"],["translate","",1,"tb-form-panel-title"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields","column-xs"],[1,"flex"],["translate",""],["matInput","","formControlName","serviceIdMetaDataAttribute"],["matInput","","formControlName","sessionIdMetaDataAttribute"],["matInput","","formControlName","requestIdMetaDataAttribute"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.reply-routing-configuration"),t.ɵɵelementEnd(),t.ɵɵelement(3,"tb-example-hint",2),t.ɵɵelementStart(4,"div",3)(5,"mat-form-field",4)(6,"mat-label",5),t.ɵɵtext(7,"tb.rulenode.service-id-metadata-attribute"),t.ɵɵelementEnd(),t.ɵɵelement(8,"input",6),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-form-field",4)(10,"mat-label",5),t.ɵɵtext(11,"tb.rulenode.session-id-metadata-attribute"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",7),t.ɵɵelementEnd(),t.ɵɵelementStart(13,"mat-form-field",4)(14,"mat-label",5),t.ɵɵtext(15,"tb.rulenode.request-id-metadata-attribute"),t.ɵɵelementEnd(),t.ɵɵelement(16,"input",8),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.rpcReplyConfigForm),t.ɵɵadvance(3),t.ɵɵproperty("hintText","tb.rulenode.rpc-reply-routing-configuration-hint"))},dependencies:t.ɵɵgetComponentDepsFactory(Zn),encapsulation:2})}}function er(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.timeout-required")," "))}function tr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-timeout-message")," "))}e("RpcReplyConfigComponent",Zn);class nr extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.rpcRequestConfigForm}onConfigurationSet(e){this.rpcRequestConfigForm=this.fb.group({timeoutInSeconds:[e?e.timeoutInSeconds:null,[N.required,N.min(0)]]})}static{this.ɵfac=function(e){return new(e||nr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:nr,selectors:[["tb-action-node-rpc-request-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:7,vars:3,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"mat-block","flex-1"],["translate",""],["type","number","min","0","step","1","matInput","","formControlName","timeoutInSeconds","required",""],[4,"ngIf"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.timeout-sec"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,er,3,3,"mat-error",4)(6,tr,3,3,"mat-error",4),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.rpcRequestConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.rpcRequestConfigForm.get("timeoutInSeconds").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.rpcRequestConfigForm.get("timeoutInSeconds").hasError("min")))},dependencies:t.ɵɵgetComponentDepsFactory(nr),encapsulation:2})}}function rr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.custom-table-name-required")," "))}e("RpcRequestConfigComponent",nr);class ar extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.saveToCustomTableConfigForm}onConfigurationSet(e){this.saveToCustomTableConfigForm=this.fb.group({tableName:[e?e.tableName:null,[N.required,N.pattern(/.*\S.*/)]],fieldsMapping:[e?e.fieldsMapping:null,[N.required]]})}prepareOutputConfig(e){return e.tableName=e.tableName.trim(),e}static{this.ɵfac=function(e){return new(e||ar)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ar,selectors:[["tb-action-node-custom-table-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:11,vars:2,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","tableName"],[4,"ngIf"],["translate","",1,"tb-title","tb-required"],["required","","formControlName","fieldsMapping","requiredText","tb.rulenode.fields-mapping-required","keyText","tb.rulenode.message-field","keyRequiredText","tb.rulenode.message-field-required","valText","tb.rulenode.table-col","valRequiredText","tb.rulenode.table-col-required"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.custom-table-name"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,rr,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.custom-table-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"label",5),t.ɵɵtext(9,"tb.rulenode.fields-mapping"),t.ɵɵelementEnd(),t.ɵɵelement(10,"tb-kv-map-config-old",6),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.saveToCustomTableConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.saveToCustomTableConfigForm.get("tableName").hasError("required")||n.saveToCustomTableConfigForm.get("tableName").hasError("pattern")))},dependencies:t.ɵɵgetComponentDepsFactory(ar),encapsulation:2})}}function ir(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.default-ttl-required")," "))}function or(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-default-ttl-message")," "))}e("SaveToCustomTableConfigComponent",ar);class lr extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.timeseriesConfigForm}onConfigurationSet(e){this.timeseriesConfigForm=this.fb.group({defaultTTL:[e?e.defaultTTL:null,[N.required,N.min(0)]],skipLatestPersistence:[!!e&&e.skipLatestPersistence,[]],useServerTs:[!!e&&e.useServerTs,[]]})}static{this.ɵfac=function(e){return new(e||lr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:lr,selectors:[["tb-action-node-timeseries-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:21,vars:18,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"mat-block","flex-1"],["translate",""],["type","number","min","0","step","1","matInput","","formControlName","defaultTTL","required",""],["aria-hidden","false","aria-label","help-icon","matSuffix","",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],[4,"ngIf"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","useServerTs",1,"mat-slide"],["formControlName","skipLatestPersistence",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.default-ttl"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵelementStart(5,"mat-icon",4),t.ɵɵpipe(6,"translate"),t.ɵɵtext(7," help "),t.ɵɵelementEnd(),t.ɵɵtemplate(8,ir,3,3,"mat-error",5)(9,or,3,3,"mat-error",5),t.ɵɵelementEnd(),t.ɵɵelementStart(10,"div",6)(11,"div",7),t.ɵɵpipe(12,"translate"),t.ɵɵelementStart(13,"mat-slide-toggle",8),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(16,"div",7),t.ɵɵpipe(17,"translate"),t.ɵɵelementStart(18,"mat-slide-toggle",9),t.ɵɵtext(19),t.ɵɵpipe(20,"translate"),t.ɵɵelementEnd()()()()),2&e&&(t.ɵɵproperty("formGroup",n.timeseriesConfigForm),t.ɵɵadvance(5),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(6,8,"tb.rulenode.default-ttl-hint")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.timeseriesConfigForm.get("defaultTTL").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.timeseriesConfigForm.get("defaultTTL").hasError("min")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(12,10,"tb.rulenode.use-server-ts-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(15,12,"tb.rulenode.use-server-ts")," "),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(17,14,"tb.rulenode.skip-latest-persistence-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(20,16,"tb.rulenode.skip-latest-persistence")," "))},dependencies:t.ɵɵgetComponentDepsFactory(lr),encapsulation:2})}}function sr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.customer-name-pattern-required")," "))}function pr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",6)(1,"mat-label",7),t.ɵɵtext(2,"tb.rulenode.customer-name-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",8),t.ɵɵtemplate(4,sr,3,3,"mat-error",9),t.ɵɵelementStart(5,"mat-hint",7),t.ɵɵtext(6,"tb.rulenode.customer-name-pattern-hint"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.unassignCustomerConfigForm.get("customerNamePattern").hasError("required")||e.unassignCustomerConfigForm.get("customerNamePattern").hasError("pattern"))}}e("TimeseriesConfigComponent",lr);class mr extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.unassignCustomerConfigForm}prepareInputConfig(e){return{customerNamePattern:P(e?.customerNamePattern)?e.customerNamePattern:null,unassignFromCustomer:P(e?.customerNamePattern)}}onConfigurationSet(e){this.unassignCustomerConfigForm=this.fb.group({customerNamePattern:[e.customerNamePattern,[]],unassignFromCustomer:[e.unassignFromCustomer,[]]})}validatorTriggers(){return["unassignFromCustomer"]}updateValidators(e){this.unassignCustomerConfigForm.get("unassignFromCustomer").value?this.unassignCustomerConfigForm.get("customerNamePattern").setValidators([N.required,N.pattern(/.*\S.*/)]):this.unassignCustomerConfigForm.get("customerNamePattern").setValidators([]),this.unassignCustomerConfigForm.get("customerNamePattern").updateValueAndValidity({emitEvent:e})}prepareOutputConfig(e){return{customerNamePattern:e.unassignFromCustomer?e.customerNamePattern.trim():null}}static{this.ɵfac=function(e){return new(e||mr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:mr,selectors:[["tb-action-node-un-assign-to-customer-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:9,vars:10,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"tb-form-panel","no-padding","no-border"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","unassignFromCustomer",1,"mat-slide"],["class","mat-block","subscriptSizing","dynamic",4,"ngIf"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","customerNamePattern"],[4,"ngIf"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2)(3,"div",3),t.ɵɵpipe(4,"translate"),t.ɵɵelementStart(5,"mat-slide-toggle",4),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(8,pr,7,1,"mat-form-field",5),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.unassignCustomerConfigForm),t.ɵɵadvance(2),t.ɵɵclassProp("no-padding-bottom",n.unassignCustomerConfigForm.get("unassignFromCustomer").value),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(4,6,"tb.rulenode.unassign-from-customer-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,8,"tb.rulenode.unassign-from-customer")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.unassignCustomerConfigForm.get("unassignFromCustomer").value))},dependencies:t.ɵɵgetComponentDepsFactory(mr),encapsulation:2})}}e("UnassignCustomerConfigComponent",mr);class dr extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.sendRestApiCallReplyConfigForm}onConfigurationSet(e){this.sendRestApiCallReplyConfigForm=this.fb.group({requestIdMetaDataAttribute:[e?e.requestIdMetaDataAttribute:null,[]],serviceIdMetaDataAttribute:[e?e.serviceIdMetaDataAttribute:null,[]]})}static{this.ɵfac=function(e){return new(e||dr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:dr,selectors:[["tb-action-node-send-rest-api-call-reply-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:13,vars:2,consts:[[1,"tb-form-panel","stroked","no-padding-bottom",3,"formGroup"],["translate","",1,"tb-form-panel-title"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields","column-xs"],[1,"flex"],["translate",""],["matInput","","formControlName","serviceIdMetaDataAttribute"],["matInput","","formControlName","requestIdMetaDataAttribute"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.reply-routing-configuration"),t.ɵɵelementEnd(),t.ɵɵelement(3,"tb-example-hint",2),t.ɵɵelementStart(4,"div",3)(5,"mat-form-field",4)(6,"mat-label",5),t.ɵɵtext(7,"tb.rulenode.service-id-metadata-attribute"),t.ɵɵelementEnd(),t.ɵɵelement(8,"input",6),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-form-field",4)(10,"mat-label",5),t.ɵɵtext(11,"tb.rulenode.request-id-metadata-attribute"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",7),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.sendRestApiCallReplyConfigForm),t.ɵɵadvance(3),t.ɵɵproperty("hintText","tb.rulenode.reply-routing-configuration-hint"))},dependencies:t.ɵɵgetComponentDepsFactory(dr),encapsulation:2})}}e("SendRestApiCallReplyConfigComponent",dr);const ur=["attributeChipList"],cr=()=>({standalone:!0});function gr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",21),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.telemetryTypeTranslationsMap.get(e))," ")}}function fr(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-chip-row",22),t.ɵɵlistener("removed",(function(){const n=t.ɵɵrestoreView(e).$implicit,r=t.ɵɵnextContext();return t.ɵɵresetView(r.removeKey(n))})),t.ɵɵtext(1),t.ɵɵelementStart(2,"mat-icon",23),t.ɵɵtext(3,"close"),t.ɵɵelementEnd()()}if(2&e){const e=n.$implicit;t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function hr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(2,1,"tb.rulenode.attributes-keys-required")))}function yr(e,n){1&e&&(t.ɵɵelementStart(0,"div",18),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",24),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(1,2,"tb.rulenode.notify-device-on-delete-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,4,"tb.rulenode.notify-device")," "))}class br extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.attributeScopeMap=o,this.attributeScopes=Object.keys(o),this.telemetryTypeTranslationsMap=l,this.separatorKeysCodes=[U,H,z]}configForm(){return this.deleteAttributesConfigForm}onConfigurationSet(e){this.deleteAttributesConfigForm=this.fb.group({scope:[e?e.scope:null,[N.required]],keys:[e?e.keys:null,[N.required]],sendAttributesDeletedNotification:[!!e&&e.sendAttributesDeletedNotification,[]],notifyDevice:[!!e&&e.notifyDevice,[]]}),this.deleteAttributesConfigForm.get("scope").valueChanges.subscribe((e=>{e!==o.SHARED_SCOPE&&this.deleteAttributesConfigForm.get("notifyDevice").patchValue(!1,{emitEvent:!1})}))}removeKey(e){const t=this.deleteAttributesConfigForm.get("keys").value,n=t.indexOf(e);n>=0&&(t.splice(n,1),this.deleteAttributesConfigForm.get("keys").patchValue(t,{emitEvent:!0}))}addKey(e){const t=e.input;let n=e.value;if((n||"").trim()){n=n.trim();let e=this.deleteAttributesConfigForm.get("keys").value;e&&-1!==e.indexOf(n)||(e||(e=[]),e.push(n),this.deleteAttributesConfigForm.get("keys").patchValue(e,{emitEvent:!0}))}t&&(t.value="")}static{this.ɵfac=function(e){return new(e||br)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:br,selectors:[["tb-action-node-delete-attributes-config"]],viewQuery:function(e,n){if(1&e&&t.ɵɵviewQuery(ur,5),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.attributeChipList=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:41,vars:31,consts:[["attributeChipList",""],[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],[3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],[1,"flex"],["required","","matInput","","formControlName","scope",1,"tb-entity-type-select"],[3,"value",4,"ngFor","ngForOf"],["type","text","matInput","","readonly","","disabled","",3,"ngModel","ngModelOptions"],["type","button","matSuffix","","mat-icon-button","","aria-label","Copy","ngxClipboard","",3,"cbContent","matTooltip"],["aria-hidden","false","aria-label","help-icon"],["subscriptSizing","dynamic",1,"mat-block"],["formControlName","keys"],[3,"removed",4,"ngFor","ngForOf"],["matInput","","type","text",3,"matChipInputTokenEnd","matChipInputFor","matChipInputSeparatorKeyCodes","matChipInputAddOnBlur"],[4,"ngIf"],["translate",""],[1,"tb-settings"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","sendAttributesDeletedNotification",1,"mat-slide"],["class","tb-form-row no-border no-padding",3,"tb-hint-tooltip-icon",4,"ngIf"],[3,"value"],[3,"removed"],["matChipRemove",""],["formControlName","notifyDevice",1,"mat-slide"]],template:function(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"section",1)(1,"div",2),t.ɵɵelement(2,"tb-example-hint",3),t.ɵɵelementStart(3,"div",4)(4,"mat-form-field",5)(5,"mat-label"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",6),t.ɵɵtemplate(9,gr,3,4,"mat-option",7),t.ɵɵelementEnd()(),t.ɵɵelementStart(10,"mat-form-field",5)(11,"mat-label"),t.ɵɵtext(12),t.ɵɵpipe(13,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(14,"input",8),t.ɵɵelementStart(15,"button",9),t.ɵɵpipe(16,"translate"),t.ɵɵelementStart(17,"mat-icon",10),t.ɵɵtext(18,"content_copy "),t.ɵɵelementEnd()()()()(),t.ɵɵelementStart(19,"mat-form-field",11)(20,"mat-label"),t.ɵɵtext(21),t.ɵɵpipe(22,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(23,"mat-chip-grid",12,0),t.ɵɵtemplate(25,fr,4,1,"mat-chip-row",13),t.ɵɵelementStart(26,"input",14),t.ɵɵlistener("matChipInputTokenEnd",(function(r){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.addKey(r))})),t.ɵɵelementEnd()(),t.ɵɵtemplate(27,hr,3,3,"mat-error",15),t.ɵɵelementStart(28,"mat-hint",16),t.ɵɵtext(29,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(30,"section",2)(31,"mat-expansion-panel",17)(32,"mat-expansion-panel-header")(33,"mat-panel-title",16),t.ɵɵtext(34,"tb.rulenode.advanced-settings"),t.ɵɵelementEnd()(),t.ɵɵelementStart(35,"div",18),t.ɵɵpipe(36,"translate"),t.ɵɵelementStart(37,"mat-slide-toggle",19),t.ɵɵtext(38),t.ɵɵpipe(39,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(40,yr,5,6,"div",20),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵreference(24);t.ɵɵproperty("formGroup",n.deleteAttributesConfigForm),t.ɵɵadvance(2),t.ɵɵproperty("hintText","tb.rulenode.attributes-scope-hint"),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,18,"tb.rulenode.attributes-scope")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.attributeScopes),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(13,20,"tb.rulenode.attributes-scope-value")),t.ɵɵadvance(2),t.ɵɵproperty("ngModel",n.deleteAttributesConfigForm.get("scope").value)("ngModelOptions",t.ɵɵpureFunction0(30,cr)),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(16,22,"tb.rulenode.attributes-scope-value-copy")),t.ɵɵproperty("cbContent",n.deleteAttributesConfigForm.get("scope").value),t.ɵɵadvance(6),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(22,24,"tb.rulenode.attributes-keys")),t.ɵɵadvance(4),t.ɵɵproperty("ngForOf",n.deleteAttributesConfigForm.get("keys").value),t.ɵɵadvance(),t.ɵɵproperty("matChipInputFor",e)("matChipInputSeparatorKeyCodes",n.separatorKeysCodes)("matChipInputAddOnBlur",!0),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deleteAttributesConfigForm.get("keys").hasError("required")),t.ɵɵadvance(8),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(36,26,"tb.rulenode.send-attributes-deleted-notification-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(39,28,"tb.rulenode.send-attributes-deleted-notification")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.deleteAttributesConfigForm.get("scope").value===n.attributeScopeMap.SHARED_SCOPE)}},dependencies:t.ɵɵgetComponentDepsFactory(br),encapsulation:2})}}e("DeleteAttributesConfigComponent",br);const vr=(e,t)=>[e,t];function xr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",8),t.ɵɵtext(1," tb.rulenode.custom-expression-field-input-required "),t.ɵɵelementEnd())}function Cr(e,n){if(1&e&&(t.ɵɵelementStart(0,"fieldset",2)(1,"legend",21),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"mat-form-field",22),t.ɵɵelement(5,"input",23),t.ɵɵtemplate(6,xr,2,0,"mat-error",11),t.ɵɵelementStart(7,"mat-hint",8),t.ɵɵtext(8,"tb.rulenode.custom-expression-field-input-hint"),t.ɵɵelementEnd()()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate1("",t.ɵɵpipeBind1(3,2,"tb.rulenode.custom-expression-field-input")," *"),t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.mathFunctionConfigForm.get("customFunction").hasError("required"))}}function Sr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",24),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"small",25),t.ɵɵtext(4),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,3,r.argumentTypeResultMap.get(e).name)," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",r.argumentTypeResultMap.get(e).description," ")}}function Tr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",8),t.ɵɵtext(1," tb.rulenode.type-field-input-required "),t.ɵɵelementEnd())}function Ir(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",28),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.attributeScopeMap.get(e))," ")}}function Er(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",7)(1,"mat-label",8),t.ɵɵtext(2,"tb.rulenode.attribute-scope-field-input"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-select",26),t.ɵɵtemplate(4,Ir,3,4,"mat-option",27),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngForOf",e.attributeScopeResult)}}function Fr(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",8),t.ɵɵtext(1," tb.rulenode.key-field-input-required "),t.ɵɵelementEnd())}function qr(e,n){1&e&&(t.ɵɵelementStart(0,"div",29)(1,"mat-checkbox",30),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"mat-checkbox",31),t.ɵɵtext(5),t.ɵɵpipe(6,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,2,"tb.rulenode.add-to-message-field-input")," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(6,4,"tb.rulenode.add-to-metadata-field-input")," "))}class Ar extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.MathFunction=Rt,this.ArgumentTypeResult=Gt,this.argumentTypeResultMap=Qt,this.attributeScopeMap=Xt,this.argumentsResult=Object.values(Gt),this.attributeScopeResult=Object.values(Wt)}configForm(){return this.mathFunctionConfigForm}onConfigurationSet(e){this.mathFunctionConfigForm=this.fb.group({operation:[e?e.operation:null,[N.required]],arguments:[e?e.arguments:null,[N.required]],customFunction:[e?e.customFunction:"",[N.required]],result:this.fb.group({type:[e?e.result.type:null,[N.required]],attributeScope:[e?e.result.attributeScope:null,[N.required]],key:[e?e.result.key:"",[N.required]],resultValuePrecision:[e?e.result.resultValuePrecision:0],addToBody:[!!e&&e.result.addToBody],addToMetadata:[!!e&&e.result.addToMetadata]})})}updateValidators(e){const t=this.mathFunctionConfigForm.get("operation").value,n=this.mathFunctionConfigForm.get("result.type").value;t===Rt.CUSTOM?(this.mathFunctionConfigForm.get("customFunction").enable({emitEvent:!1}),null===this.mathFunctionConfigForm.get("customFunction").value&&this.mathFunctionConfigForm.get("customFunction").patchValue("(x - 32) / 1.8",{emitEvent:!1})):this.mathFunctionConfigForm.get("customFunction").disable({emitEvent:!1}),n===Gt.ATTRIBUTE?this.mathFunctionConfigForm.get("result.attributeScope").enable({emitEvent:!1}):this.mathFunctionConfigForm.get("result.attributeScope").disable({emitEvent:!1}),this.mathFunctionConfigForm.get("customFunction").updateValueAndValidity({emitEvent:e}),this.mathFunctionConfigForm.get("result.attributeScope").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["operation","result.type"]}static{this.ɵfac=function(e){return new(e||Ar)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ar,selectors:[["tb-action-node-math-function-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:39,vars:23,consts:[[1,"flex","flex-col",3,"formGroup"],["required","","formControlName","operation",1,"flex-full","max-h-30%","xs:max-h-full","md:max-h-full"],[1,"fields-group","flex","flex-col","gap-2"],["translate","",1,"group-title"],["formControlName","arguments",3,"function"],["class","fields-group flex flex-col gap-2",4,"ngIf"],["formGroupName","result"],[1,"mat-block","flex-1"],["translate",""],["formControlName","type","required",""],["style","border-bottom: 1px solid #eee;",3,"value",4,"ngFor","ngForOf"],["translate","",4,"ngIf"],[1,"xs:flex-col","gt-xs:gap-4","flex","flex-1","flex-row"],["class","mat-block flex-1",4,"ngIf"],["floatLabel","always",1,"mat-block","flex-1"],["matInput","","formControlName","key","required",""],["aria-hidden","false","aria-label","help-icon","matSuffix","","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],["floatLabel","always","subscriptSizing","dynamic",1,"mat-block","flex-1"],["formControlName","resultValuePrecision","matInput","","step","1","min","0","type","number"],[3,"innerHTML"],["class","xs:flex-col gt-xs:gap-4 flex flex-1 flex-row items-stretch justify-start","style","padding-top: 16px;",4,"ngIf"],[1,"group-title"],["subscriptSizing","dynamic",1,"mat-block","no-margin-top","flex-1"],["matInput","","formControlName","customFunction","required",""],[2,"border-bottom","1px solid #eee",3,"value"],[2,"display","block","overflow","hidden","text-overflow","ellipsis","white-space","nowrap"],["required","","formControlName","attributeScope"],[3,"value",4,"ngFor","ngForOf"],[3,"value"],[1,"xs:flex-col","gt-xs:gap-4","flex","flex-1","flex-row","items-stretch","justify-start",2,"padding-top","16px"],["formControlName","addToBody"],["formControlName","addToMetadata"]],template:function(e,n){if(1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-math-function-autocomplete",1),t.ɵɵelementStart(2,"fieldset",2)(3,"legend",3),t.ɵɵtext(4,"tb.rulenode.argument-tile"),t.ɵɵelementEnd(),t.ɵɵelement(5,"tb-arguments-map-config",4),t.ɵɵelementEnd(),t.ɵɵtemplate(6,Cr,9,4,"fieldset",5),t.ɵɵelementStart(7,"fieldset",2)(8,"legend",3),t.ɵɵtext(9,"tb.rulenode.result-title"),t.ɵɵelementEnd(),t.ɵɵelementStart(10,"div",6)(11,"mat-form-field",7)(12,"mat-label",8),t.ɵɵtext(13,"tb.rulenode.type-field-input"),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"mat-select",9)(15,"mat-select-trigger"),t.ɵɵtext(16),t.ɵɵpipe(17,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(18,Sr,5,5,"mat-option",10),t.ɵɵelementEnd(),t.ɵɵtemplate(19,Tr,2,0,"mat-error",11),t.ɵɵelementEnd(),t.ɵɵelementStart(20,"div",12),t.ɵɵtemplate(21,Er,5,1,"mat-form-field",13),t.ɵɵelementStart(22,"mat-form-field",14)(23,"mat-label",8),t.ɵɵtext(24,"tb.rulenode.key-field-input"),t.ɵɵelementEnd(),t.ɵɵelement(25,"input",15),t.ɵɵelementStart(26,"mat-icon",16),t.ɵɵpipe(27,"translate"),t.ɵɵtext(28,"help"),t.ɵɵelementEnd(),t.ɵɵtemplate(29,Fr,2,0,"mat-error",11),t.ɵɵelementEnd()(),t.ɵɵelementStart(30,"div",12)(31,"mat-form-field",17)(32,"mat-label",8),t.ɵɵtext(33,"tb.rulenode.number-floating-point-field-input"),t.ɵɵelementEnd(),t.ɵɵelement(34,"input",18)(35,"mat-hint",19),t.ɵɵpipe(36,"translate"),t.ɵɵpipe(37,"safe"),t.ɵɵelementEnd()(),t.ɵɵtemplate(38,qr,7,6,"div",20),t.ɵɵelementEnd()()()),2&e){let e;t.ɵɵproperty("formGroup",n.mathFunctionConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("function",n.mathFunctionConfigForm.get("operation").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.mathFunctionConfigForm.get("operation").value===n.MathFunction.CUSTOM),t.ɵɵadvance(10),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(17,11,null==(e=n.argumentTypeResultMap.get(n.mathFunctionConfigForm.get("result.type").value))?null:e.name)," "),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",n.argumentsResult),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.mathFunctionConfigForm.get("result.type").hasError("required")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.mathFunctionConfigForm.get("result").get("type").value===n.ArgumentTypeResult.ATTRIBUTE),t.ɵɵadvance(5),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(27,13,"tb.rulenode.math-templatization-tooltip")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.mathFunctionConfigForm.get("result.key").hasError("required")),t.ɵɵadvance(6),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(37,17,t.ɵɵpipeBind1(36,15,"tb.rulenode.number-floating-point-field-input-hint"),"html"),t.ɵɵsanitizeHtml),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",t.ɵɵpureFunction2(20,vr,n.ArgumentTypeResult.ATTRIBUTE,n.ArgumentTypeResult.TIME_SERIES).includes(n.mathFunctionConfigForm.get("result").get("type").value))}},dependencies:t.ɵɵgetComponentDepsFactory(Ar),styles:["[_nghost-%COMP%]     .fields-group{padding:0 16px 8px;margin:10px 0;border:1px groove rgba(0,0,0,.25);border-radius:4px}[_nghost-%COMP%]     .fields-group .mat-mdc-form-field .mat-mdc-form-field-infix{width:100%}[_nghost-%COMP%]     .fields-group legend{color:#000000b3;width:fit-content}[_nghost-%COMP%]     .fields-group legend+*{display:block}[_nghost-%COMP%]     .fields-group legend+*.no-margin-top{margin-top:0}"]})}}function kr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",4),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",r.messageTypeNames.get(e)," ")}}e("MathFunctionConfigComponent",Ar);class Nr extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.messageTypeNames=g,this.eventOptions=[f.CONNECT_EVENT,f.ACTIVITY_EVENT,f.DISCONNECT_EVENT,f.INACTIVITY_EVENT]}configForm(){return this.deviceState}prepareInputConfig(e){return{event:P(e?.event)?e.event:f.ACTIVITY_EVENT}}onConfigurationSet(e){this.deviceState=this.fb.group({event:[e.event,[N.required]]})}static{this.ɵfac=function(e){return new(e||Nr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Nr,selectors:[["tb-action-node-device-state-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:7,vars:5,consts:[[3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["formControlName","event"],[3,"value",4,"ngFor","ngForOf"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-select",2),t.ɵɵtemplate(6,kr,2,2,"mat-option",3),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.deviceState),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,3,"tb.rulenode.select-device-connectivity-event")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.eventOptions))},dependencies:t.ɵɵgetComponentDepsFactory(Nr),encapsulation:2})}}e("DeviceStateConfigComponent",Nr);const wr=(e,t)=>({valText:e,keyText:t});function Mr(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",13),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.requiredText," ")}}function Vr(e,n){1&e&&(t.ɵɵelementStart(0,"div",13),t.ɵɵtext(1," tb.rulenode.map-fields-required "),t.ɵɵelementEnd())}function Br(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",13),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind2(2,1,"tb.key-val.unique-key-value-pair-error",t.ɵɵpureFunction2(4,wr,e.valText,e.keyText))," ")}}function Or(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"div",14)(1,"mat-form-field",15),t.ɵɵelement(2,"input",16),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-form-field",15),t.ɵɵelement(4,"input",16),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"div",17)(6,"button",18),t.ɵɵpipe(7,"translate"),t.ɵɵlistener("click",(function(){const n=t.ɵɵrestoreView(e).index,r=t.ɵɵnextContext();return t.ɵɵresetView(r.removeKeyVal(n))})),t.ɵɵelementStart(8,"mat-icon"),t.ɵɵtext(9,"delete"),t.ɵɵelementEnd()()()()}if(2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵproperty("placeholder",r.keyText+"*")("formControl",e.get("key")),t.ɵɵadvance(2),t.ɵɵproperty("placeholder",r.valText+"*")("formControl",e.get("value")),t.ɵɵadvance(2),t.ɵɵclassProp("tb-hidden",1===r.keyValsFormArray().controls.length),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(7,8,"tb.key-val.remove-mapping-entry")),t.ɵɵproperty("disabled",r.disabled)}}function Dr(e,n){if(1&e&&t.ɵɵelement(0,"tb-example-hint",19),2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("hintText",e.hintText)("popupHelpLink",e.popupHelpLink)}}class Lr{constructor(e,t){this.injector=e,this.fb=t,this.propagateChange=()=>{},this.destroy$=new Y,this.disabled=!1,this.uniqueKeyValuePairValidator=!1,this.required=!1,this.duplicateValuesValidator=e=>e.controls.key.value===e.controls.value.value&&e.controls.key.value&&e.controls.value.value?{uniqueKeyValuePair:!0}:null,this.oneMapRequiredValidator=e=>e.get("keyVals").value.length,this.propagateNestedErrors=e=>{if(this.kvListFormGroup&&this.kvListFormGroup.get("keyVals")&&"VALID"===this.kvListFormGroup.get("keyVals")?.status)return null;const t={};if(this.kvListFormGroup&&this.kvListFormGroup.setErrors(null),e instanceof w||e instanceof M){if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;for(const n of Object.keys(e.controls)){const r=this.propagateNestedErrors(e.controls[n]);if(r&&Object.keys(r).length)for(const e of Object.keys(r))t[e]=!0}return t}if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;return R(t,{})?null:t}}ngOnInit(){this.ngControl=this.injector.get(V),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.kvListFormGroup=this.fb.group({keyVals:this.fb.array([])},{validators:[this.propagateNestedErrors,this.oneMapRequiredValidator]}),this.kvListFormGroup.valueChanges.pipe(W(this.destroy$)).subscribe((()=>{this.updateModel()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}keyValsFormArray(){return this.kvListFormGroup.get("keyVals")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.kvListFormGroup.disable({emitEvent:!1}):this.kvListFormGroup.enable({emitEvent:!1})}writeValue(e){const t=Object.keys(e).map((t=>({key:t,value:e[t]})));if(this.keyValsFormArray().length===t.length)this.keyValsFormArray().patchValue(t,{emitEvent:!1});else{const e=[];t.forEach((t=>{e.push(this.fb.group({key:[t.key,[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],value:[t.value,[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]},{validators:this.uniqueKeyValuePairValidator?[this.duplicateValuesValidator]:[]}))})),this.kvListFormGroup.setControl("keyVals",this.fb.array(e,this.propagateNestedErrors),{emitEvent:!1})}}removeKeyVal(e){this.keyValsFormArray().removeAt(e)}addKeyVal(){this.keyValsFormArray().push(this.fb.group({key:["",[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],value:["",[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]},{validators:this.uniqueKeyValuePairValidator?[this.duplicateValuesValidator]:[]}))}validate(){const e=this.kvListFormGroup.get("keyVals").value;if(!e.length&&this.required)return{kvMapRequired:!0};if(!this.kvListFormGroup.valid)return{kvFieldsRequired:!0};if(this.uniqueKeyValuePairValidator)for(const t of e)if(t.key===t.value)return{uniqueKeyValuePair:!0};return null}updateModel(){const e=this.kvListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.kvListFormGroup.valid)this.propagateChange(null);else{const t={};e.forEach((e=>{t[e.key]=e.value})),this.propagateChange(t)}}static{this.ɵfac=function(e){return new(e||Lr)(t.ɵɵdirectiveInject(t.Injector),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Lr,selectors:[["tb-kv-map-config"]],inputs:{disabled:"disabled",uniqueKeyValuePairValidator:"uniqueKeyValuePairValidator",labelText:"labelText",requiredText:"requiredText",keyText:"keyText",keyRequiredText:"keyRequiredText",valText:"valText",valRequiredText:"valRequiredText",hintText:"hintText",popupHelpLink:"popupHelpLink",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>Lr)),multi:!0},{provide:O,useExisting:r((()=>Lr)),multi:!0}])],decls:22,vars:12,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],[1,"tb-form-row","no-padding","no-border","space-between"],[1,"tb-form-panel-title"],["class","tb-form-panel-hint tb-error","translate","",4,"ngIf"],[1,"tb-form-panel","no-border","no-padding"],[1,"tb-form-table"],[1,"tb-form-table-header"],[1,"tb-form-table-header-cell","field-space"],[1,"tb-form-table-header-cell","actions-header"],[1,"tb-form-table-body"],["class","tb-form-table-row",4,"ngFor","ngForOf"],["type","button","mat-stroked-button","","color","primary",3,"click"],[3,"hintText","popupHelpLink",4,"ngIf"],["translate","",1,"tb-form-panel-hint","tb-error"],[1,"tb-form-table-row"],["appearance","outline","subscriptSizing","dynamic",1,"tb-inline-field","field-space"],["matInput","",3,"placeholder","formControl"],[1,"tb-form-table-row-cell-buttons"],["type","button","mat-icon-button","","matTooltipPosition","above",3,"click","disabled","matTooltip"],[3,"hintText","popupHelpLink"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3),t.ɵɵelementEnd(),t.ɵɵtemplate(4,Mr,2,1,"div",3)(5,Vr,2,0,"div",3)(6,Br,3,7,"div",3),t.ɵɵelementEnd(),t.ɵɵelementStart(7,"div",4)(8,"div",5)(9,"div",6)(10,"div",7),t.ɵɵtext(11),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"div",7),t.ɵɵtext(13),t.ɵɵelementEnd(),t.ɵɵelement(14,"div",8),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"div",9),t.ɵɵtemplate(16,Or,10,10,"div",10),t.ɵɵelementEnd()()(),t.ɵɵelementStart(17,"div")(18,"button",11),t.ɵɵlistener("click",(function(){return n.addKeyVal()})),t.ɵɵtext(19),t.ɵɵpipe(20,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(21,Dr,1,2,"tb-example-hint",12),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.kvListFormGroup),t.ɵɵadvance(3),t.ɵɵtextInterpolate(n.labelText),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.kvListFormGroup.hasError("kvMapRequired")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.kvListFormGroup.hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.kvListFormGroup.hasError("uniqueKeyValuePair")),t.ɵɵadvance(5),t.ɵɵtextInterpolate(n.keyText),t.ɵɵadvance(2),t.ɵɵtextInterpolate(n.valText),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.keyValsFormArray().controls),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(20,10,"tb.key-val.add-mapping-entry")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.popupHelpLink||n.hintText))},dependencies:t.ɵɵgetComponentDepsFactory(Lr),styles:["[_nghost-%COMP%]   .field-space[_ngcontent-%COMP%]{flex:1 1 50%}[_nghost-%COMP%]   .actions-header[_ngcontent-%COMP%]{width:40px}"]})}}e("KvMapConfigComponent",Lr),J([h()],Lr.prototype,"disabled",void 0),J([h()],Lr.prototype,"uniqueKeyValuePairValidator",void 0),J([h()],Lr.prototype,"required",void 0);const Pr=e=>({inputName:e});function Rr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",13),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"span",3),t.ɵɵtext(4,"tb.rulenode.relations-query-config-direction-suffix"),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.directionTypeTranslations.get(e))," ")}}function _r(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-relation-level-error")," "))}function jr(e,n){1&e&&(t.ɵɵelementStart(0,"div",14),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",15),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(1,2,"tb.rulenode.last-level-device-relation-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,4,"alias.last-level-relation")," "))}class Gr extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.values(d),this.directionTypeTranslations=b,this.entityType=u,this.propagateChange=null}ngOnInit(){this.deviceRelationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[N.required]],maxLevel:[null,[N.min(1)]],relationType:[null],deviceTypes:[null,[N.required]]}),this.deviceRelationsQueryFormGroup.valueChanges.subscribe((e=>{this.deviceRelationsQueryFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.deviceRelationsQueryFormGroup.disable({emitEvent:!1}):this.deviceRelationsQueryFormGroup.enable({emitEvent:!1})}writeValue(e){this.deviceRelationsQueryFormGroup.reset(e,{emitEvent:!1})}static{this.ɵfac=function(e){return new(e||Gr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Gr,selectors:[["tb-device-relations-query-config"]],inputs:{disabled:"disabled",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>Gr)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:23,vars:25,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"flex","flex-row","gap-5.5"],["subscriptSizing","dynamic","hideRequiredMarker","",1,"mat-block","max-w-50%","flex-full",2,"min-width","100px"],["translate",""],["required","","formControlName","direction"],[3,"value",4,"ngFor","ngForOf"],["floatLabel","always",1,"mat-block","max-w-50%","flex-full"],["matInput","","type","number","min","1","step","1","formControlName","maxLevel",3,"placeholder"],[4,"ngIf"],["class","tb-form-row no-border no-padding last-level-slide-toggle",3,"tb-hint-tooltip-icon",4,"ngIf"],["formControlName","relationType",1,"flex-1"],["required","","formControlName","deviceTypes",3,"label","entityType","emptyInputPlaceholder","filledInputPlaceholder"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],[3,"value"],[1,"tb-form-row","no-border","no-padding","last-level-slide-toggle",3,"tb-hint-tooltip-icon"],["formControlName","fetchLastLevelOnly",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"mat-form-field",2)(3,"mat-label",3),t.ɵɵtext(4,"relation.direction"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-select",4),t.ɵɵtemplate(6,Rr,5,4,"mat-option",5),t.ɵɵelementEnd()(),t.ɵɵelementStart(7,"mat-form-field",6)(8,"mat-label",3),t.ɵɵtext(9,"tb.rulenode.max-relation-level"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",7),t.ɵɵpipe(11,"translate"),t.ɵɵtemplate(12,_r,3,3,"mat-error",8),t.ɵɵelementEnd()(),t.ɵɵtemplate(13,jr,5,6,"div",9),t.ɵɵelement(14,"tb-relation-type-autocomplete",10),t.ɵɵelementStart(15,"tb-entity-subtype-list",11),t.ɵɵpipe(16,"translate"),t.ɵɵpipe(17,"translate"),t.ɵɵpipe(18,"translate"),t.ɵɵelementStart(19,"mat-icon",12),t.ɵɵpipe(20,"translate"),t.ɵɵpipe(21,"translate"),t.ɵɵtext(22,"help"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.deviceRelationsQueryFormGroup),t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",n.directionTypes),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(11,10,"tb.rulenode.unlimited-level")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.deviceRelationsQueryFormGroup.get("maxLevel").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deviceRelationsQueryFormGroup.get("maxLevel").value>1),t.ɵɵadvance(2),t.ɵɵproperty("label",t.ɵɵpipeBind1(16,12,"tb.rulenode.device-profiles"))("entityType",n.entityType.DEVICE)("emptyInputPlaceholder",t.ɵɵpipeBind1(17,14,"tb.rulenode.add-device-profile"))("filledInputPlaceholder",t.ɵɵpipeBind1(18,16,"tb.rulenode.add-device-profile")),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(21,20,"tb.rulenode.chip-help",t.ɵɵpureFunction1(23,Pr,t.ɵɵpipeBind1(20,18,"tb.rulenode.device-profile")))))},dependencies:t.ɵɵgetComponentDepsFactory(Gr),styles:["[_nghost-%COMP%]   .last-level-slide-toggle[_ngcontent-%COMP%]{margin:8px 0 24px}"]})}}function Kr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",13),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"span",4),t.ɵɵtext(4,"tb.rulenode.relations-query-config-direction-suffix"),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.directionTypeTranslations.get(e))," ")}}function Ur(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-relation-level-error")," "))}function Hr(e,n){1&e&&(t.ɵɵelementStart(0,"div",14),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",15),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(1,2,"tb.rulenode.last-level-relation-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,4,"alias.last-level-relation")," "))}e("DeviceRelationsQueryConfigComponent",Gr);class zr extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.values(d),this.directionTypeTranslations=b,this.propagateChange=null}ngOnInit(){this.relationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[N.required]],maxLevel:[null,[N.min(1)]],filters:[null]}),this.relationsQueryFormGroup.valueChanges.subscribe((e=>{this.relationsQueryFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.relationsQueryFormGroup.disable({emitEvent:!1}):this.relationsQueryFormGroup.enable({emitEvent:!1})}writeValue(e){this.relationsQueryFormGroup.reset(e||{},{emitEvent:!1})}static{this.ɵfac=function(e){return new(e||zr)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:zr,selectors:[["tb-relations-query-config"]],inputs:{disabled:"disabled",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>zr)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:21,vars:8,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],["translate","",1,"tb-form-panel-title","tb-required"],[1,"flex","flex-row","gap-4"],["hideRequiredMarker","",1,"mat-block","max-w-50%","flex-full",2,"min-width","100px"],["translate",""],["required","","formControlName","direction"],[3,"value",4,"ngFor","ngForOf"],["floatLabel","always",1,"mat-block","max-w-50%","flex-full"],["matInput","","type","number","min","1","step","1","formControlName","maxLevel",3,"placeholder"],[4,"ngIf"],["class","tb-form-row no-border no-padding last-level-slide-toggle",3,"tb-hint-tooltip-icon",4,"ngIf"],["translate","",1,"tb-form-panel-title"],["formControlName","filters"],[3,"value"],[1,"tb-form-row","no-border","no-padding","last-level-slide-toggle",3,"tb-hint-tooltip-icon"],["formControlName","fetchLastLevelOnly",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.relations-query"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"section")(4,"div",2)(5,"mat-form-field",3)(6,"mat-label",4),t.ɵɵtext(7,"relation.direction"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",5),t.ɵɵtemplate(9,Kr,5,4,"mat-option",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(10,"mat-form-field",7)(11,"mat-label",4),t.ɵɵtext(12,"tb.rulenode.max-relation-level"),t.ɵɵelementEnd(),t.ɵɵelement(13,"input",8),t.ɵɵpipe(14,"translate"),t.ɵɵtemplate(15,Ur,3,3,"mat-error",9),t.ɵɵelementEnd()(),t.ɵɵtemplate(16,Hr,5,6,"div",10),t.ɵɵelementEnd(),t.ɵɵelementStart(17,"section",0)(18,"div",11),t.ɵɵtext(19,"relation.relation-filters"),t.ɵɵelementEnd(),t.ɵɵelement(20,"tb-relation-filters",12),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.relationsQueryFormGroup),t.ɵɵadvance(9),t.ɵɵproperty("ngForOf",n.directionTypes),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(14,6,"tb.rulenode.unlimited-level")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.relationsQueryFormGroup.get("maxLevel").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.relationsQueryFormGroup.get("maxLevel").value>1),t.ɵɵadvance(),t.ɵɵproperty("formGroup",n.relationsQueryFormGroup))},dependencies:t.ɵɵgetComponentDepsFactory(zr),encapsulation:2})}}e("RelationsQueryConfigComponent",zr);const $r=["chipList"],Qr=["messageTypeAutocomplete"],Jr=["messageTypeInput"],Yr=e=>({inputName:e}),Wr=e=>({messageType:e});function Xr(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-label"),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵtextInterpolate(e.label)}}function Zr(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-chip-row",13),t.ɵɵlistener("removed",(function(){const n=t.ɵɵrestoreView(e).$implicit,r=t.ɵɵnextContext();return t.ɵɵresetView(r.remove(n))})),t.ɵɵtext(1),t.ɵɵelementStart(2,"mat-icon",14),t.ɵɵtext(3,"close"),t.ɵɵelementEnd()()}if(2&e){const e=n.$implicit;t.ɵɵproperty("removable",!0),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}function ea(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",15),t.ɵɵelement(1,"span",16),t.ɵɵpipe(2,"highlight"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(2,2,e.name,r.searchText),t.ɵɵsanitizeHtml)}}function ta(e,n){1&e&&(t.ɵɵelementStart(0,"div")(1,"span",21),t.ɵɵtext(2,"tb.rulenode.no-message-types-found"),t.ɵɵelementEnd()())}function na(e,n){if(1&e&&(t.ɵɵelementStart(0,"span"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind2(2,1,"tb.rulenode.no-message-type-matching",t.ɵɵpureFunction1(4,Wr,e.truncate.transform(e.searchText,!0,6,"...")))," ")}}function ra(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-option",17)(1,"div",18),t.ɵɵlistener("click",(function(n){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.stopPropagation())})),t.ɵɵtemplate(2,ta,3,0,"div",19)(3,na,3,6,"ng-template",null,3,t.ɵɵtemplateRefExtractor),t.ɵɵelementStart(5,"span")(6,"a",20),t.ɵɵlistener("click",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext();return t.ɵɵresetView(r.createMessageType(n,r.searchText))})),t.ɵɵtext(7,"tb.rulenode.create-new-message-type"),t.ɵɵelementEnd()()()()}if(2&e){const e=t.ɵɵreference(4),n=t.ɵɵnextContext();t.ɵɵproperty("value",null),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!n.textIsNotEmpty(n.searchText))("ngIfElse",e)}}function aa(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.select-message-types-required")," "))}class ia extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.truncate=n,this.fb=r,this.placeholder="tb.rulenode.add-message-type",this.separatorKeysCodes=[U,H,z],this.messageTypes=[],this.messageTypesList=[],this.searchText="",this.propagateChange=e=>{},this.messageTypeConfigForm=this.fb.group({messageType:[null]});for(const e of Object.keys(f))this.messageTypesList.push({name:g.get(f[e]),value:e})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}ngOnInit(){this.filteredMessageTypes=this.messageTypeConfigForm.get("messageType").valueChanges.pipe(ee(""),te((e=>e||"")),ne((e=>this.fetchMessageTypes(e))),re())}setDisabledState(e){this.disabled=e,this.disabled?this.messageTypeConfigForm.disable({emitEvent:!1}):this.messageTypeConfigForm.enable({emitEvent:!1})}writeValue(e){this.searchText="",this.messageTypes.length=0,e&&e.forEach((e=>{const t=this.messageTypesList.find((t=>t.value===e));t?this.messageTypes.push({name:t.name,value:t.value}):this.messageTypes.push({name:e,value:e})}))}displayMessageTypeFn(e){return e?e.name:void 0}textIsNotEmpty(e){return e&&e.length>0}createMessageType(e,t){e.preventDefault(),this.transformMessageType(t)}add(e){this.transformMessageType(e.value)}fetchMessageTypes(e){if(this.searchText=e,this.searchText&&this.searchText.length){const e=this.searchText.toUpperCase();return X(this.messageTypesList.filter((t=>t.name.toUpperCase().includes(e))))}return X(this.messageTypesList)}transformMessageType(e){if((e||"").trim()){let t;const n=e.trim(),r=this.messageTypesList.find((e=>e.name===n));t=r?{name:r.name,value:r.value}:{name:n,value:n},t&&this.addMessageType(t)}this.clear("")}remove(e){const t=this.messageTypes.indexOf(e);t>=0&&(this.messageTypes.splice(t,1),this.updateModel())}selected(e){this.addMessageType(e.option.value),this.clear("")}addMessageType(e){-1===this.messageTypes.findIndex((t=>t.value===e.value))&&(this.messageTypes.push(e),this.updateModel())}onFocus(){this.messageTypeConfigForm.get("messageType").updateValueAndValidity({onlySelf:!0,emitEvent:!0})}clear(e=""){this.messageTypeInput.nativeElement.value=e,this.messageTypeConfigForm.get("messageType").patchValue(null,{emitEvent:!0}),setTimeout((()=>{this.messageTypeInput.nativeElement.blur(),this.messageTypeInput.nativeElement.focus()}),0)}updateModel(){const e=this.messageTypes.map((e=>e.value));this.required?(this.chipList.errorState=!e.length,this.propagateChange(e.length>0?e:null)):(this.chipList.errorState=!1,this.propagateChange(e))}static{this.ɵfac=function(e){return new(e||ia)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(v.TruncatePipe),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ia,selectors:[["tb-message-types-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery($r,5),t.ɵɵviewQuery(Qr,5),t.ɵɵviewQuery(Jr,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.chipList=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.matAutocomplete=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.messageTypeInput=e.first)}},inputs:{required:"required",label:"label",placeholder:"placeholder",disabled:"disabled"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>ia)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:20,vars:27,consts:[["chipList",""],["messageTypeInput","","origin","matAutocompleteOrigin"],["messageTypeAutocomplete","matAutocomplete"],["searchNotEmpty",""],[2,"width","100%",3,"formGroup"],[4,"ngIf"],[3,"required"],[3,"removable","removed",4,"ngFor","ngForOf"],["matInput","","type","text","formControlName","messageType","matAutocompleteOrigin","",3,"focusin","matChipInputTokenEnd","placeholder","matAutocompleteConnectedTo","matAutocomplete","matChipInputFor","matChipInputSeparatorKeyCodes"],[1,"tb-autocomplete",3,"optionSelected","displayWith"],[3,"value",4,"ngFor","ngForOf"],["class","tb-not-found",3,"value",4,"ngIf"],["aria-hidden","false","aria-label","help-icon","matSuffix","","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],[3,"removed","removable"],["matChipRemove",""],[3,"value"],[3,"innerHTML"],[1,"tb-not-found",3,"value"],[1,"tb-not-found-content",3,"click"],[4,"ngIf","ngIfElse"],["translate","",3,"click"],["translate",""]],template:function(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-form-field",4),t.ɵɵtemplate(1,Xr,2,1,"mat-label",5),t.ɵɵelementStart(2,"mat-chip-grid",6,0),t.ɵɵtemplate(4,Zr,4,2,"mat-chip-row",7),t.ɵɵelementStart(5,"input",8,1),t.ɵɵpipe(8,"translate"),t.ɵɵlistener("focusin",(function(){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.onFocus())}))("matChipInputTokenEnd",(function(r){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.add(r))})),t.ɵɵelementEnd()(),t.ɵɵelementStart(9,"mat-autocomplete",9,2),t.ɵɵlistener("optionSelected",(function(r){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.selected(r))})),t.ɵɵtemplate(11,ea,3,5,"mat-option",10),t.ɵɵpipe(12,"async"),t.ɵɵtemplate(13,ra,8,3,"mat-option",11),t.ɵɵpipe(14,"async"),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"mat-icon",12),t.ɵɵpipe(16,"translate"),t.ɵɵpipe(17,"translate"),t.ɵɵtext(18,"help"),t.ɵɵelementEnd(),t.ɵɵtemplate(19,aa,3,3,"mat-error",5),t.ɵɵelementEnd()}if(2&e){let e;const r=t.ɵɵreference(3),a=t.ɵɵreference(7),i=t.ɵɵreference(10);t.ɵɵproperty("formGroup",n.messageTypeConfigForm),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.label),t.ɵɵadvance(),t.ɵɵproperty("required",n.required),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",n.messageTypes),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(8,14,n.placeholder)),t.ɵɵproperty("matAutocompleteConnectedTo",a)("matAutocomplete",i)("matChipInputFor",r)("matChipInputSeparatorKeyCodes",n.separatorKeysCodes),t.ɵɵadvance(4),t.ɵɵproperty("displayWith",n.displayMessageTypeFn),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",t.ɵɵpipeBind1(12,16,n.filteredMessageTypes)),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",0===(null==(e=t.ɵɵpipeBind1(14,18,n.filteredMessageTypes))?null:e.length)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(17,22,"tb.rulenode.chip-help",t.ɵɵpureFunction1(25,Yr,t.ɵɵpipeBind1(16,20,"tb.rulenode.message-type")))),t.ɵɵadvance(4),t.ɵɵproperty("ngIf",r.errorState)}},dependencies:t.ɵɵgetComponentDepsFactory(ia),encapsulation:2})}}function oa(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",12),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e)("disabled","cert.PEM"===e&&r.disableCertPemCredentials),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,3,r.credentialsTypeTranslationsMap.get(e))," ")}}function la(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.credentials-type-required")," "))}function sa(e,t){}function pa(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.username-required")," "))}function ma(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.password-required")," "))}function da(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",4)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.username"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",13),t.ɵɵtemplate(4,pa,3,3,"mat-error",7),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-form-field",4)(6,"mat-label",2),t.ɵɵtext(7,"tb.rulenode.password"),t.ɵɵelementEnd(),t.ɵɵelement(8,"input",14)(9,"tb-toggle-password",15),t.ɵɵtemplate(10,ma,3,3,"mat-error",7),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.credentialsConfigFormGroup.get("username").hasError("required")),t.ɵɵadvance(4),t.ɵɵproperty("required",e.passwordFieldRequired),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.credentialsConfigFormGroup.get("password").hasError("required"))}}function ua(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"div",16),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"tb-file-input",17),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext(2);return t.ɵɵresetView(r.credentialsConfigFormGroup.get("caCertFileName").setValue(n))})),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"tb-file-input",18),t.ɵɵpipe(7,"translate"),t.ɵɵpipe(8,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext(2);return t.ɵɵresetView(r.credentialsConfigFormGroup.get("certFileName").setValue(n))})),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"tb-file-input",19),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext(2);return t.ɵɵresetView(r.credentialsConfigFormGroup.get("privateKeyFileName").setValue(n))})),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-form-field",4)(13,"mat-label",2),t.ɵɵtext(14,"tb.rulenode.private-key-password"),t.ɵɵelementEnd(),t.ɵɵelement(15,"input",20)(16,"tb-toggle-password",15),t.ɵɵelementEnd()}if(2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(2,10,"tb.rulenode.credentials-pem-hint")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(4,12,"tb.rulenode.ca-cert")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(5,14,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.credentialsConfigFormGroup.get("caCertFileName").value),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(7,16,"tb.rulenode.cert")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(8,18,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.credentialsConfigFormGroup.get("certFileName").value),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(10,20,"tb.rulenode.private-key")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(11,22,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.credentialsConfigFormGroup.get("privateKeyFileName").value)}}function ca(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",4)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.credentials-type"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-select",5),t.ɵɵtemplate(4,oa,3,5,"mat-option",6),t.ɵɵelementEnd(),t.ɵɵtemplate(5,la,3,3,"mat-error",7),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"section",8),t.ɵɵtemplate(7,sa,0,0,"ng-template",9)(8,da,11,3,"ng-template",10)(9,ua,17,24,"ng-template",11),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngForOf",e.allCredentialsTypes),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.credentialsConfigFormGroup.get("type").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngSwitch",e.credentialsConfigFormGroup.get("type").value)}}e("MessageTypesConfigComponent",ia);class ga extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.subscriptions=[],this.disableCertPemCredentials=!1,this.passwordFieldRequired=!0,this.allCredentialsTypes=Mt,this.credentialsTypeTranslationsMap=Vt,this.propagateChange=e=>{}}ngOnInit(){this.credentialsConfigFormGroup=this.fb.group({type:[null,[N.required]],username:[null,[]],password:[null,[]],caCert:[null,[]],caCertFileName:[null,[]],privateKey:[null,[]],privateKeyFileName:[null,[]],cert:[null,[]],certFileName:[null,[]]}),this.subscriptions.push(this.credentialsConfigFormGroup.valueChanges.subscribe((()=>{this.updateView()}))),this.subscriptions.push(this.credentialsConfigFormGroup.get("type").valueChanges.subscribe((()=>{this.credentialsTypeChanged()})))}ngOnChanges(e){for(const t of Object.keys(e)){const n=e[t];if(!n.firstChange&&n.currentValue!==n.previousValue&&n.currentValue&&"disableCertPemCredentials"===t){"cert.PEM"===this.credentialsConfigFormGroup.get("type").value&&setTimeout((()=>{this.credentialsConfigFormGroup.get("type").patchValue("anonymous",{emitEvent:!0})}))}}}ngOnDestroy(){this.subscriptions.forEach((e=>e.unsubscribe()))}writeValue(e){P(e)&&(this.credentialsConfigFormGroup.reset(e,{emitEvent:!1}),this.updateValidators())}setDisabledState(e){e?this.credentialsConfigFormGroup.disable({emitEvent:!1}):(this.credentialsConfigFormGroup.enable({emitEvent:!1}),this.updateValidators())}updateView(){let e=this.credentialsConfigFormGroup.value;const t=e.type;switch(t){case"anonymous":e={type:t};break;case"basic":e={type:t,username:e.username,password:e.password};break;case"cert.PEM":delete e.username}this.propagateChange(e)}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}validate(e){return this.credentialsConfigFormGroup.valid?null:{credentialsConfig:{valid:!1}}}credentialsTypeChanged(){this.credentialsConfigFormGroup.patchValue({username:null,password:null,caCert:null,caCertFileName:null,privateKey:null,privateKeyFileName:null,cert:null,certFileName:null}),this.updateValidators()}updateValidators(e=!1){const t=this.credentialsConfigFormGroup.get("type").value;switch(e&&this.credentialsConfigFormGroup.reset({type:t},{emitEvent:!1}),this.credentialsConfigFormGroup.setValidators([]),this.credentialsConfigFormGroup.get("username").setValidators([]),this.credentialsConfigFormGroup.get("password").setValidators([]),t){case"anonymous":break;case"basic":this.credentialsConfigFormGroup.get("username").setValidators([N.required]),this.credentialsConfigFormGroup.get("password").setValidators(this.passwordFieldRequired?[N.required]:[]);break;case"cert.PEM":this.credentialsConfigFormGroup.setValidators([this.requiredFilesSelected(N.required,[["caCert","caCertFileName"],["privateKey","privateKeyFileName","cert","certFileName"]])])}this.credentialsConfigFormGroup.get("username").updateValueAndValidity({emitEvent:e}),this.credentialsConfigFormGroup.get("password").updateValueAndValidity({emitEvent:e}),this.credentialsConfigFormGroup.updateValueAndValidity({emitEvent:e})}requiredFilesSelected(e,t=null){return n=>{t||(t=[Object.keys(n.controls)]);return n?.controls&&t.some((t=>t.every((t=>!e(n.controls[t])))))?null:{notAllRequiredFilesSelected:!0}}}static{this.ɵfac=function(e){return new(e||ga)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ga,selectors:[["tb-credentials-config"]],inputs:{required:"required",disableCertPemCredentials:"disableCertPemCredentials",passwordFieldRequired:"passwordFieldRequired"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>ga)),multi:!0},{provide:O,useExisting:r((()=>ga)),multi:!0}]),t.ɵɵInheritDefinitionFeature,t.ɵɵNgOnChangesFeature],decls:9,vars:4,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"tb-credentials-config-panel-group"],["translate",""],["matExpansionPanelContent",""],[1,"mat-block"],["formControlName","type","required",""],[3,"value","disabled",4,"ngFor","ngForOf"],[4,"ngIf"],[1,"flex","flex-col",3,"ngSwitch"],["ngSwitchCase","anonymous"],["ngSwitchCase","basic"],["ngSwitchCase","cert.PEM"],[3,"value","disabled"],["required","","matInput","","formControlName","username"],["type","password","matInput","","formControlName","password",3,"required"],["matSuffix",""],[1,"tb-hint"],["formControlName","caCert","inputId","caCertSelect","noFileText","tb.rulenode.no-file",3,"fileNameChanged","existingFileName","label","dropLabel"],["formControlName","cert","inputId","CertSelect","noFileText","tb.rulenode.no-file",3,"fileNameChanged","existingFileName","label","dropLabel"],["formControlName","privateKey","inputId","privateKeySelect","noFileText","tb.rulenode.no-file",2,"padding-bottom","8px",3,"fileNameChanged","existingFileName","label","dropLabel"],["type","password","matInput","","formControlName","password"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-expansion-panel",1)(2,"mat-expansion-panel-header")(3,"mat-panel-title",2),t.ɵɵtext(4,"tb.rulenode.credentials"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-panel-description"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(8,ca,10,3,"ng-template",3),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.credentialsConfigFormGroup),t.ɵɵadvance(6),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,2,n.credentialsTypeTranslationsMap.get(n.credentialsConfigFormGroup.get("type").value))," "))},dependencies:t.ɵɵgetComponentDepsFactory(ga),encapsulation:2})}}function fa(e,n){1&e&&(t.ɵɵelementStart(0,"button",22),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-icon"),t.ɵɵtext(3,"drag_handle"),t.ɵɵelementEnd()()),2&e&&t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(1,1,"action.drag"))}function ha(e,n){if(1&e&&(t.ɵɵelementStart(0,"span",23),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext().$implicit;t.ɵɵadvance(),t.ɵɵtextInterpolate1("",e.get("name").value,".")}}function ya(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",24),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"small",25),t.ɵɵtext(4),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,3,r.argumentTypeMap.get(e).name)," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",r.argumentTypeMap.get(e).description," ")}}function ba(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",13),t.ɵɵtext(1," tb.rulenode.argument-source-field-input-required "),t.ɵɵelementEnd())}function va(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",13),t.ɵɵtext(1," tb.rulenode.argument-key-field-input-required "),t.ɵɵelementEnd())}function xa(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",26)(1,"mat-label",13),t.ɵɵtext(2,"tb.rulenode.argument-key-field-input"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",27),t.ɵɵelementStart(4,"mat-icon",28),t.ɵɵpipe(5,"translate"),t.ɵɵtext(6," help "),t.ɵɵelementEnd(),t.ɵɵtemplate(7,va,2,0,"mat-error",16),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext().$implicit;t.ɵɵadvance(3),t.ɵɵproperty("formControl",e.get("key")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(5,3,"tb.rulenode.math-templatization-tooltip")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.get("key").hasError("required"))}}function Ca(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",13),t.ɵɵtext(1," tb.rulenode.constant-value-field-input-required "),t.ɵɵelementEnd())}function Sa(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",29)(1,"mat-label",13),t.ɵɵtext(2,"tb.rulenode.constant-value-field-input"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",30),t.ɵɵtemplate(4,Ca,2,0,"mat-error",16),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext().$implicit;t.ɵɵadvance(3),t.ɵɵproperty("formControl",e.get("key")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.get("key").hasError("required"))}}function Ta(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",26)(1,"mat-label",13),t.ɵɵtext(2,"tb.rulenode.default-value-field-input"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",31),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext().$implicit;t.ɵɵadvance(3),t.ɵɵproperty("formControl",e.get("defaultValue"))}}function Ia(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",33),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(3);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.attributeScopeMap.get(e))," ")}}function Ea(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error",13),t.ɵɵtext(1," tb.rulenode.attribute-scope-field-input-required "),t.ɵɵelementEnd())}function Fa(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",12)(1,"mat-label",13),t.ɵɵtext(2,"tb.rulenode.attribute-scope-field-input"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-select",14),t.ɵɵtemplate(4,Ia,3,4,"mat-option",32),t.ɵɵelementEnd(),t.ɵɵtemplate(5,Ea,2,0,"mat-error",16),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext().$implicit,n=t.ɵɵnextContext();t.ɵɵadvance(3),t.ɵɵproperty("formControl",e.get("attributeScope")),t.ɵɵadvance(),t.ɵɵproperty("ngForOf",n.attributeScope),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.get("attributeScope").hasError("required"))}}function qa(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"button",34),t.ɵɵpipe(1,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext().index,r=t.ɵɵnextContext();return t.ɵɵresetView(r.removeArgument(n))})),t.ɵɵelementStart(2,"mat-icon"),t.ɵɵtext(3,"close"),t.ɵɵelementEnd()()}2&e&&t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(1,1,"action.remove"))}function Aa(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-list-item",6)(1,"div",7),t.ɵɵtemplate(2,fa,4,3,"button",8),t.ɵɵelementStart(3,"div",9),t.ɵɵtemplate(4,ha,2,1,"span",10),t.ɵɵelementStart(5,"div",11)(6,"mat-form-field",12)(7,"mat-label",13),t.ɵɵtext(8,"tb.rulenode.argument-source-field-input"),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-select",14)(10,"mat-select-trigger"),t.ɵɵtext(11),t.ɵɵpipe(12,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(13,ya,5,5,"mat-option",15),t.ɵɵelementEnd(),t.ɵɵtemplate(14,ba,2,0,"mat-error",16),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"div",17),t.ɵɵtemplate(16,xa,8,5,"mat-form-field",18)(17,Sa,5,2,"mat-form-field",19)(18,Ta,4,1,"mat-form-field",18),t.ɵɵelementEnd(),t.ɵɵtemplate(19,Fa,6,3,"mat-form-field",20),t.ɵɵelementEnd(),t.ɵɵtemplate(20,qa,4,3,"button",21),t.ɵɵelementEnd()()()),2&e){let e;const r=n.$implicit,a=t.ɵɵnextContext();t.ɵɵproperty("cdkDragDisabled",a.disabled),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!a.disabled),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",a.displayArgumentName),t.ɵɵadvance(5),t.ɵɵproperty("formControl",r.get("type")),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(12,12,null==(e=a.argumentTypeMap.get(r.get("type").value))?null:e.name)," "),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",a.arguments),t.ɵɵadvance(),t.ɵɵproperty("ngIf",r.get("type").hasError("required")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",r.get("type").value&&r.get("type").value!==a.ArgumentType.CONSTANT),t.ɵɵadvance(),t.ɵɵproperty("ngIf",r.get("type").value===a.ArgumentType.CONSTANT),t.ɵɵadvance(),t.ɵɵproperty("ngIf",r.get("type").value&&r.get("type").value!==a.ArgumentType.CONSTANT),t.ɵɵadvance(),t.ɵɵproperty("ngIf",r.get("type").value===a.ArgumentType.ATTRIBUTE),t.ɵɵadvance(),t.ɵɵproperty("ngIf",!a.disabled)}}function ka(e,n){1&e&&(t.ɵɵelementStart(0,"div")(1,"span",35),t.ɵɵtext(2,"tb.rulenode.no-arguments-prompt"),t.ɵɵelementEnd()())}e("CredentialsConfigComponent",ga);class Na extends y{get function(){return this.functionValue}set function(e){e&&this.functionValue!==e&&(this.functionValue=e,this.setupArgumentsFormGroup(!0))}constructor(e,t){super(e),this.store=e,this.fb=t,this.maxArgs=16,this.minArgs=1,this.displayArgumentName=!1,this.mathFunctionMap=_t,this.ArgumentType=jt,this.attributeScopeMap=Xt,this.argumentTypeMap=$t,this.arguments=Object.values(jt),this.attributeScope=Object.values(Yt),this.propagateChange=null,this.valueChangeSubscription=[]}ngOnInit(){this.argumentsFormGroup=this.fb.group({arguments:this.fb.array([])}),this.valueChangeSubscription.push(this.argumentsFormGroup.valueChanges.subscribe((()=>{this.updateModel()}))),this.setupArgumentsFormGroup()}onDrop(e){const t=this.argumentsFormArray,n=t.at(e.previousIndex);t.removeAt(e.previousIndex),t.insert(e.currentIndex,n),this.updateArgumentNames()}get argumentsFormArray(){return this.argumentsFormGroup.get("arguments")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.argumentsFormGroup.disable({emitEvent:!1}):(this.argumentsFormGroup.enable({emitEvent:!1}),this.argumentsFormArray.controls.forEach((e=>this.updateArgumentControlValidators(e))))}ngOnDestroy(){this.valueChangeSubscription.length&&this.valueChangeSubscription.forEach((e=>e.unsubscribe()))}writeValue(e){const t=[];e&&e.forEach(((e,n)=>{t.push(this.createArgumentControl(e,n))})),this.argumentsFormGroup.setControl("arguments",this.fb.array(t),{emitEvent:!1}),this.setupArgumentsFormGroup()}removeArgument(e){this.argumentsFormArray.removeAt(e),this.updateArgumentNames()}addArgument(e=!0){const t=this.argumentsFormArray,n=this.createArgumentControl(null,t.length);t.push(n,{emitEvent:e})}validate(e){return this.argumentsFormGroup.valid?null:{argumentsRequired:!0}}setupArgumentsFormGroup(e=!1){if(this.function&&(this.maxArgs=this.mathFunctionMap.get(this.function).maxArgs,this.minArgs=this.mathFunctionMap.get(this.function).minArgs,this.displayArgumentName=this.function===Rt.CUSTOM),this.argumentsFormGroup){for(this.argumentsFormGroup.get("arguments").setValidators([N.minLength(this.minArgs),N.maxLength(this.maxArgs)]);this.argumentsFormArray.length>this.maxArgs;)this.removeArgument(this.maxArgs-1);for(;this.argumentsFormArray.length<this.minArgs;)this.addArgument(e);this.argumentsFormGroup.get("arguments").updateValueAndValidity({emitEvent:!1})}}createArgumentControl(e,t){const n=this.fb.group({type:[e?.type,[N.required]],key:[e?.key,[N.required]],name:[Jt[t],[N.required]],attributeScope:[e?.attributeScope??Yt.SERVER_SCOPE,[N.required]],defaultValue:[e?.defaultValue?e?.defaultValue:null]});return this.updateArgumentControlValidators(n),this.valueChangeSubscription.push(n.get("type").valueChanges.subscribe((()=>{this.updateArgumentControlValidators(n),n.get("attributeScope").updateValueAndValidity({emitEvent:!1}),n.get("defaultValue").updateValueAndValidity({emitEvent:!1})}))),n}updateArgumentControlValidators(e){const t=e.get("type").value;t===jt.ATTRIBUTE?e.get("attributeScope").enable({emitEvent:!1}):e.get("attributeScope").disable({emitEvent:!1}),t&&t!==jt.CONSTANT?e.get("defaultValue").enable({emitEvent:!1}):e.get("defaultValue").disable({emitEvent:!1})}updateArgumentNames(){this.argumentsFormArray.controls.forEach(((e,t)=>{e.get("name").setValue(Jt[t])}))}updateModel(){const e=this.argumentsFormArray.value;e.length&&this.argumentsFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}static{this.ɵfac=function(e){return new(e||Na)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Na,selectors:[["tb-arguments-map-config"]],inputs:{disabled:"disabled",function:"function"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>Na)),multi:!0},{provide:O,useExisting:r((()=>Na)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:10,vars:10,consts:[[1,"flex","flex-col"],[2,"max-height","500px","overflow","auto"],["cdkDropList","","cdkDropListOrientation","vertical",1,"tb-drop-list","arguments-list",3,"cdkDropListDropped","formGroup","cdkDropListDisabled"],["formArrayName","arguments","cdkDrag","","class","tb-argument tb-draggable","style","height: 100%",3,"cdkDragDisabled",4,"ngFor","ngForOf"],[4,"ngIf"],["mat-button","","mat-raised-button","","color","primary","type","button","matTooltipPosition","above",3,"click","disabled"],["formArrayName","arguments","cdkDrag","",1,"tb-argument","tb-draggable",2,"height","100%",3,"cdkDragDisabled"],[1,"flex","flex-1","flex-row","items-center","justify-start"],["mat-icon-button","","color","primary","cdkDragHandle","","class","tb-drag-handle handle","style","min-width: 40px; margin: 0","matTooltipPosition","above",3,"matTooltip",4,"ngIf"],[1,"flex","flex-1","flex-row","items-center","justify-start","gap-4"],["style","padding: 0 10px; min-width: 20px;",4,"ngIf"],[1,"flex","flex-1","flex-col"],[1,"mat-block"],["translate",""],["required","",3,"formControl"],["style","border-bottom: 1px solid #eee;",3,"value",4,"ngFor","ngForOf"],["translate","",4,"ngIf"],[1,"flex","flex-1","flex-row","xs:flex-col","gt-xs:gap-4"],["floatLabel","always","class","mat-block gt-xs:max-w-50% gt-xs:flex-full",4,"ngIf"],["floatLabel","always","class","mat-block flex-1",4,"ngIf"],["class","mat-block",4,"ngIf"],["mat-icon-button","","color","primary","style","min-width: 40px;","matTooltipPosition","above",3,"matTooltip","click",4,"ngIf"],["mat-icon-button","","color","primary","cdkDragHandle","","matTooltipPosition","above",1,"tb-drag-handle","handle",2,"min-width","40px","margin","0",3,"matTooltip"],[2,"padding","0 10px","min-width","20px"],[2,"border-bottom","1px solid #eee",3,"value"],[2,"display","block","overflow","hidden","text-overflow","ellipsis","white-space","nowrap"],["floatLabel","always",1,"mat-block","gt-xs:max-w-50%","gt-xs:flex-full"],["matInput","","required","",3,"formControl"],["aria-hidden","false","aria-label","help-icon","matSuffix","","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],["floatLabel","always",1,"mat-block","flex-1"],["matInput","","required","","step","1","min","0","type","number",3,"formControl"],["matInput","","step","1","type","number",3,"formControl"],[3,"value",4,"ngFor","ngForOf"],[3,"value"],["mat-icon-button","","color","primary","matTooltipPosition","above",2,"min-width","40px",3,"click","matTooltip"],["translate","",1,"tb-prompt","flex","items-center","justify-center"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"mat-list",2),t.ɵɵlistener("cdkDropListDropped",(function(e){return n.onDrop(e)})),t.ɵɵtemplate(3,Aa,21,14,"mat-list-item",3),t.ɵɵelementEnd()(),t.ɵɵtemplate(4,ka,3,0,"div",4),t.ɵɵelementStart(5,"button",5),t.ɵɵlistener("click",(function(){return n.addArgument()})),t.ɵɵelementStart(6,"mat-icon"),t.ɵɵtext(7,"add"),t.ɵɵelementEnd(),t.ɵɵtext(8),t.ɵɵpipe(9,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵadvance(),t.ɵɵclassProp("readonly",n.disabled),t.ɵɵadvance(),t.ɵɵproperty("formGroup",n.argumentsFormGroup)("cdkDropListDisabled",n.disabled),t.ɵɵadvance(),t.ɵɵproperty("ngForOf",n.argumentsFormArray.controls),t.ɵɵadvance(),t.ɵɵproperty("ngIf",!n.argumentsFormArray.length),t.ɵɵadvance(),t.ɵɵproperty("disabled",n.argumentsFormArray.length>=n.maxArgs),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(9,8,"action.add")," "))},dependencies:t.ɵɵgetComponentDepsFactory(Na),styles:["[_nghost-%COMP%]   .mat-mdc-list-item.tb-argument[_ngcontent-%COMP%]{border:solid rgba(0,0,0,.25) 1px;border-radius:4px;padding:10px 0;margin-bottom:16px}[_nghost-%COMP%]   .arguments-list[_ngcontent-%COMP%]{padding:0}"]})}}e("ArgumentsMapConfigComponent",Na);const wa=["operationInput"];function Ma(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"button",9),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.clear())})),t.ɵɵelementStart(1,"mat-icon",10),t.ɵɵtext(2,"close"),t.ɵɵelementEnd()()}}function Va(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",11),t.ɵɵelement(1,"span",12),t.ɵɵpipe(2,"highlight"),t.ɵɵelementStart(3,"small",13),t.ɵɵtext(4),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(2,3,e.value+" | "+e.name,r.searchText),t.ɵɵsanitizeHtml),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",e.description," ")}}function Ba(e,n){1&e&&(t.ɵɵelementStart(0,"mat-option",11)(1,"span",3),t.ɵɵtext(2,"tb.rulenode.no-option-found"),t.ɵɵelementEnd()()),2&e&&t.ɵɵproperty("value",null)}class Oa extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.injector=n,this.fb=r,this.searchText="",this.dirty=!1,this.mathOperation=[..._t.values()],this.propagateChange=null}ngOnInit(){this.mathFunctionForm=this.fb.group({operation:[""]}),this.filteredOptions=this.mathFunctionForm.get("operation").valueChanges.pipe(ae((e=>{let t;t="string"==typeof e&&Rt[e]?Rt[e]:null,this.updateView(t)})),te((e=>(this.searchText=e||"",e?this._filter(e):this.mathOperation.slice()))))}_filter(e){const t=e.toLowerCase();return this.mathOperation.filter((e=>e.name.toLowerCase().includes(t)||e.value.toLowerCase().includes(t)))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.mathFunctionForm.disable({emitEvent:!1}):this.mathFunctionForm.enable({emitEvent:!1})}mathFunctionDisplayFn(e){if(e){const t=_t.get(e);return t.value+" | "+t.name}return""}writeValue(e){this.modelValue=e,this.mathFunctionForm.get("operation").setValue(e,{emitEvent:!1}),this.dirty=!0}updateView(e){this.modelValue!==e&&(this.modelValue=e,this.propagateChange(this.modelValue))}onFocus(){this.dirty&&(this.mathFunctionForm.get("operation").updateValueAndValidity({onlySelf:!0}),this.dirty=!1)}clear(){this.mathFunctionForm.get("operation").patchValue(""),setTimeout((()=>{this.operationInput.nativeElement.blur(),this.operationInput.nativeElement.focus()}),0)}static{this.ɵfac=function(e){return new(e||Oa)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(t.Injector),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Oa,selectors:[["tb-math-function-autocomplete"]],viewQuery:function(e,n){if(1&e&&t.ɵɵviewQuery(wa,7),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.operationInput=e.first)}},inputs:{required:"required",disabled:"disabled"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>Oa)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:12,vars:11,consts:[["operationInput",""],["auto","matAutocomplete"],[1,"mat-block",3,"formGroup"],["translate",""],["type","text","matInput","","formControlName","operation",3,"focusin","required","matAutocomplete"],["type","button","matSuffix","","mat-icon-button","","aria-label","Clear",3,"click",4,"ngIf"],[1,"tb-autocomplete",3,"displayWith"],[3,"value",4,"ngFor","ngForOf"],[3,"value",4,"ngIf"],["type","button","matSuffix","","mat-icon-button","","aria-label","Clear",3,"click"],[1,"material-icons"],[3,"value"],[3,"innerHTML"],[2,"display","block","overflow","hidden","text-overflow","ellipsis","white-space","nowrap"]],template:function(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-form-field",2)(1,"mat-label",3),t.ɵɵtext(2,"tb.rulenode.functions-field-input"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"input",4,0),t.ɵɵlistener("focusin",(function(){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.onFocus())})),t.ɵɵelementEnd(),t.ɵɵtemplate(5,Ma,3,0,"button",5),t.ɵɵelementStart(6,"mat-autocomplete",6,1),t.ɵɵtemplate(8,Va,5,6,"mat-option",7),t.ɵɵpipe(9,"async"),t.ɵɵtemplate(10,Ba,3,1,"mat-option",8),t.ɵɵpipe(11,"async"),t.ɵɵelementEnd()()}if(2&e){let e;const r=t.ɵɵreference(7);t.ɵɵproperty("formGroup",n.mathFunctionForm),t.ɵɵadvance(3),t.ɵɵproperty("required",n.required)("matAutocomplete",r),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.mathFunctionForm.get("operation").value),t.ɵɵadvance(),t.ɵɵproperty("displayWith",n.mathFunctionDisplayFn),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",t.ɵɵpipeBind1(9,7,n.filteredOptions)),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!(null!=(e=t.ɵɵpipeBind1(11,9,n.filteredOptions))&&e.length))}},dependencies:t.ɵɵgetComponentDepsFactory(Oa),encapsulation:2})}}function Da(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",8),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}function La(e,n){if(1&e&&(t.ɵɵelementStart(0,"button",9),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-icon",10),t.ɵɵtext(3,"content_copy "),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(1,2,"tb.rulenode.copy-message-type")),t.ɵɵproperty("cbContent",e.messageTypeFormGroup.get("messageType").value)}}function Pa(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.message-type-value-required")," "))}function Ra(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.message-type-value-max-length")," "))}e("MathFunctionAutocompleteComponent",Oa);class _a{set required(e){this.requiredValue!==e&&(this.requiredValue=e,this.updateValidators())}get required(){return this.requiredValue}constructor(e){this.fb=e,this.subscriptSizing="fixed",this.messageTypes=[{name:"Post attributes",value:"POST_ATTRIBUTES_REQUEST"},{name:"Post telemetry",value:"POST_TELEMETRY_REQUEST"},{name:"Custom",value:""}],this.propagateChange=()=>{},this.destroy$=new Y,this.messageTypeFormGroup=this.fb.group({messageTypeAlias:[null,[N.required]],messageType:[{value:null,disabled:!0},[N.maxLength(255)]]}),this.messageTypeFormGroup.get("messageTypeAlias").valueChanges.pipe(W(this.destroy$)).subscribe((e=>this.updateMessageTypeValue(e))),this.messageTypeFormGroup.valueChanges.pipe(W(this.destroy$)).subscribe((()=>this.updateView()))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}registerOnTouched(e){}registerOnChange(e){this.propagateChange=e}writeValue(e){this.modelValue=e;let t=this.messageTypes.find((t=>t.value===e));t||(t=this.messageTypes.find((e=>""===e.value))),this.messageTypeFormGroup.get("messageTypeAlias").patchValue(t,{emitEvent:!1}),this.messageTypeFormGroup.get("messageType").patchValue(e,{emitEvent:!1})}validate(){return this.messageTypeFormGroup.valid?null:{messageTypeInvalid:!0}}setDisabledState(e){this.disabled=e,e?this.messageTypeFormGroup.disable({emitEvent:!1}):(this.messageTypeFormGroup.enable({emitEvent:!1}),"Custom"!==this.messageTypeFormGroup.get("messageTypeAlias").value?.name&&this.messageTypeFormGroup.get("messageType").disable({emitEvent:!1}))}updateView(){const e=this.messageTypeFormGroup.getRawValue().messageType;this.modelValue!==e&&(this.modelValue=e,this.propagateChange(this.modelValue))}updateValidators(){this.messageTypeFormGroup.get("messageType").setValidators(this.required?[N.required,N.maxLength(255)]:[N.maxLength(255)]),this.messageTypeFormGroup.get("messageType").updateValueAndValidity({emitEvent:!1})}updateMessageTypeValue(e){"Custom"!==e?.name?this.messageTypeFormGroup.get("messageType").disable({emitEvent:!1}):this.messageTypeFormGroup.get("messageType").enable({emitEvent:!1}),this.messageTypeFormGroup.get("messageType").patchValue(e.value??null)}static{this.ɵfac=function(e){return new(e||_a)(t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:_a,selectors:[["tb-output-message-type-autocomplete"]],inputs:{subscriptSizing:"subscriptSizing",disabled:"disabled",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>_a)),multi:!0},{provide:O,useExisting:r((()=>_a)),multi:!0}])],decls:15,vars:14,consts:[[1,"tb-form-row","no-border","no-padding","tb-standard-fields","column-xs",3,"formGroup"],["hideRequiredMarker","",1,"flex",3,"subscriptSizing"],["formControlName","messageTypeAlias"],[3,"value",4,"ngFor","ngForOf"],[1,"flex",3,"subscriptSizing","hideRequiredMarker"],["matInput","","type","text","formControlName","messageType"],["type","button","matSuffix","","mat-icon-button","","aria-label","Copy","ngxClipboard","",3,"cbContent","matTooltip",4,"ngIf"],[4,"ngIf"],[3,"value"],["type","button","matSuffix","","mat-icon-button","","aria-label","Copy","ngxClipboard","",3,"cbContent","matTooltip"],["aria-hidden","false","aria-label","help-icon"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-select",2),t.ɵɵtemplate(6,Da,2,2,"mat-option",3),t.ɵɵelementEnd()(),t.ɵɵelementStart(7,"mat-form-field",4)(8,"mat-label"),t.ɵɵtext(9),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",5),t.ɵɵtemplate(12,La,4,4,"button",6)(13,Pa,3,3,"mat-error",7)(14,Ra,3,3,"mat-error",7),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.messageTypeFormGroup),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("subscriptSizing",n.subscriptSizing),t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,10,"tb.rulenode.output-message-type")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.messageTypes),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("subscriptSizing",n.subscriptSizing),t.ɵɵproperty("hideRequiredMarker",n.messageTypeFormGroup.get("messageType").disabled),t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(10,12,"tb.rulenode.message-type-value")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.messageTypeFormGroup.get("messageType").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.messageTypeFormGroup.get("messageType").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.messageTypeFormGroup.get("messageType").hasError("maxlength")))},dependencies:t.ɵɵgetComponentDepsFactory(_a),encapsulation:2})}}e("OutputMessageTypeAutocompleteComponent",_a),J([h()],_a.prototype,"disabled",void 0),J([h()],_a.prototype,"required",null);const ja=(e,t)=>({keyText:e,valText:t});function Ga(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,e.keyRequiredText)," ")}}function Ka(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,e.valRequiredText)," ")}}function Ua(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"div",10)(1,"mat-form-field",11),t.ɵɵelement(2,"input",12),t.ɵɵpipe(3,"translate"),t.ɵɵtemplate(4,Ga,3,3,"mat-error",13),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-form-field",11),t.ɵɵelement(6,"input",12),t.ɵɵpipe(7,"translate"),t.ɵɵtemplate(8,Ka,3,3,"mat-error",13),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"button",14),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"async"),t.ɵɵlistener("click",(function(){const n=t.ɵɵrestoreView(e).index,r=t.ɵɵnextContext();return t.ɵɵresetView(r.removeKeyVal(n))})),t.ɵɵelementStart(12,"mat-icon"),t.ɵɵtext(13,"close"),t.ɵɵelementEnd()()()}if(2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(3,10,r.keyText)),t.ɵɵproperty("formControl",e.get("key")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.get("key").hasError("required")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(7,12,r.valText)),t.ɵɵproperty("formControl",e.get("value")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.get("value").hasError("required")),t.ɵɵadvance(),t.ɵɵclassProp("!hidden",r.disabled),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(10,14,"tb.key-val.remove-entry")),t.ɵɵproperty("disabled",t.ɵɵpipeBind1(11,16,r.isLoading$))}}function Ha(e,n){if(1&e&&(t.ɵɵelement(0,"div",15),t.ɵɵpipe(1,"translate"),t.ɵɵpipe(2,"safe")),2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(2,3,t.ɵɵpipeBind1(1,1,e.hintText),"html"),t.ɵɵsanitizeHtml)}}class za extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.injector=n,this.fb=r,this.propagateChange=null,this.valueChangeSubscription=null}ngOnInit(){this.ngControl=this.injector.get(V),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.kvListFormGroup=this.fb.group({}),this.kvListFormGroup.addControl("keyVals",this.fb.array([]))}keyValsFormArray(){return this.kvListFormGroup.get("keyVals")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.kvListFormGroup.disable({emitEvent:!1}):this.kvListFormGroup.enable({emitEvent:!1})}writeValue(e){this.valueChangeSubscription&&this.valueChangeSubscription.unsubscribe();const t=[];if(e)for(const n of Object.keys(e))Object.prototype.hasOwnProperty.call(e,n)&&t.push(this.fb.group({key:[n,[N.required]],value:[e[n],[N.required]]}));this.kvListFormGroup.setControl("keyVals",this.fb.array(t)),this.valueChangeSubscription=this.kvListFormGroup.valueChanges.subscribe((()=>{this.updateModel()}))}removeKeyVal(e){this.kvListFormGroup.get("keyVals").removeAt(e)}addKeyVal(){this.kvListFormGroup.get("keyVals").push(this.fb.group({key:["",[N.required]],value:["",[N.required]]}))}validate(e){const t=this.kvListFormGroup.get("keyVals").value;if(!t.length&&this.required)return{kvMapRequired:!0};if(!this.kvListFormGroup.valid)return{kvFieldsRequired:!0};if(this.uniqueKeyValuePairValidator)for(const e of t)if(e.key===e.value)return{uniqueKeyValuePair:!0};return null}updateModel(){const e=this.kvListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.kvListFormGroup.valid)this.propagateChange(null);else{const t={};e.forEach((e=>{t[e.key]=e.value})),this.propagateChange(t)}}static{this.ɵfac=function(e){return new(e||za)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(t.Injector),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:za,selectors:[["tb-kv-map-config-old"]],inputs:{disabled:"disabled",uniqueKeyValuePairValidator:"uniqueKeyValuePairValidator",requiredText:"requiredText",keyText:"keyText",keyRequiredText:"keyRequiredText",valText:"valText",valRequiredText:"valRequiredText",hintText:"hintText",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>za)),multi:!0},{provide:O,useExisting:r((()=>za)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:21,vars:26,consts:[[1,"tb-kv-map-config","flex","flex-col",3,"formGroup"],[1,"header","flex","flex-1","flex-row","gap-2"],[1,"cell","tb-required","flex-1"],["innerHTML",t.ɵɵtrustConstantHtml`&nbsp`,2,"width","52px"],[1,"body"],["class","row flex flex-row items-center justify-start gap-2","formArrayName","keyVals",4,"ngFor","ngForOf"],["class","tb-hint",3,"innerHTML",4,"ngIf"],[3,"error"],[2,"margin-top","16px"],["mat-button","","mat-raised-button","","color","primary","type","button","matTooltipPosition","above",3,"click","disabled","matTooltip"],["formArrayName","keyVals",1,"row","flex","flex-row","items-center","justify-start","gap-2"],[1,"cell","mat-block","flex-1"],["matInput","","required","",3,"formControl","placeholder"],[4,"ngIf"],["mat-icon-button","","color","primary","type","button","matTooltipPosition","above",3,"click","disabled","matTooltip"],[1,"tb-hint",3,"innerHTML"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"span",2),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"span",2),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(8,"span",3),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"div",4),t.ɵɵtemplate(10,Ua,14,18,"div",5)(11,Ha,3,6,"div",6),t.ɵɵelementEnd(),t.ɵɵelement(12,"tb-error",7),t.ɵɵelementStart(13,"div",8)(14,"button",9),t.ɵɵpipe(15,"translate"),t.ɵɵpipe(16,"async"),t.ɵɵlistener("click",(function(){return n.addKeyVal()})),t.ɵɵelementStart(17,"mat-icon"),t.ɵɵtext(18,"add"),t.ɵɵelementEnd(),t.ɵɵtext(19),t.ɵɵpipe(20,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.kvListFormGroup),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,13,n.keyText)),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,15,n.valText)),t.ɵɵadvance(2),t.ɵɵclassProp("!hidden",n.disabled),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",n.keyValsFormArray().controls),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.hintText),t.ɵɵadvance(),t.ɵɵproperty("error",n.ngControl.hasError("kvMapRequired")||n.ngControl.hasError("uniqueKeyValuePair")?n.ngControl.hasError("kvMapRequired")?n.translate.instant(n.requiredText):n.translate.instant("tb.key-val.unique-key-value-pair-error",t.ɵɵpureFunction2(23,ja,n.translate.instant(n.keyText),n.translate.instant(n.valText))):""),t.ɵɵadvance(2),t.ɵɵclassProp("!hidden",n.disabled),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(15,17,"tb.key-val.add-entry")),t.ɵɵproperty("disabled",t.ɵɵpipeBind1(16,19,n.isLoading$)),t.ɵɵadvance(5),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(20,21,"action.add")," "))},dependencies:t.ɵɵgetComponentDepsFactory(za),styles:["[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]{margin-bottom:16px}[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{padding-left:5px;padding-right:5px;padding-bottom:5px}[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]   .cell[_ngcontent-%COMP%]{padding-left:5px;padding-right:5px;color:#757575;font-size:12px;font-weight:700;white-space:nowrap}[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]   .tb-required[_ngcontent-%COMP%]:after{color:#757575;font-size:12px;font-weight:700}[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]{padding-left:5px;padding-right:5px;padding-bottom:0;max-height:300px;overflow:auto}[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]   .body[_ngcontent-%COMP%]   .cell[_ngcontent-%COMP%]{padding-left:5px;padding-right:5px}[_nghost-%COMP%]   .tb-kv-map-config[_ngcontent-%COMP%]   tb-error[_ngcontent-%COMP%]{display:block;margin-top:-12px}"]})}}function $a(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-chip-option",4),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵpropertyInterpolate("selectable",r.chipControlGroup.get("chipControl").value!==e.value),t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate(e.name)}}e("KvMapConfigOldComponent",za);class Qa{constructor(e,t){this.fb=e,this.translate=t,this.translation=Ht,this.propagateChange=()=>{},this.destroy$=new Y,this.selectOptions=[]}ngOnInit(){this.initOptions(),this.chipControlGroup=this.fb.group({chipControl:[null,[]]}),this.chipControlGroup.get("chipControl").valueChanges.pipe(ie(this.destroy$)).subscribe((e=>{e&&this.propagateChange(e)}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}initOptions(){for(const e of this.translation.keys())this.selectOptions.push({value:e,name:this.translate.instant(this.translation.get(e))})}writeValue(e){this.chipControlGroup.get("chipControl").patchValue(e,{emitEvent:!1})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){e?this.chipControlGroup.disable({emitEvent:!1}):this.chipControlGroup.enable({emitEvent:!1})}static{this.ɵfac=function(e){return new(e||Qa)(t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Qa,selectors:[["tb-msg-metadata-chip"]],inputs:{labelText:"labelText",translation:"translation"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>Qa)),multi:!0}])],decls:5,vars:3,consts:[[1,"tb-form-row","space-between",3,"formGroup"],[1,"fixed-title-width"],["formControlName","chipControl"],["color","primary",3,"selectable","value",4,"ngFor","ngForOf"],["color","primary",3,"selectable","value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"div",0)(1,"div",1),t.ɵɵtext(2),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-chip-listbox",2),t.ɵɵtemplate(4,$a,2,3,"mat-chip-option",3),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.chipControlGroup),t.ɵɵadvance(2),t.ɵɵtextInterpolate(n.labelText),t.ɵɵadvance(2),t.ɵɵproperty("ngForOf",n.selectOptions))},dependencies:t.ɵɵgetComponentDepsFactory(Qa),encapsulation:2})}}function Ja(e,n){1&e&&(t.ɵɵelementStart(0,"div",13),t.ɵɵtext(1," tb.rulenode.map-fields-required "),t.ɵɵelementEnd())}function Ya(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",13),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.requiredText," ")}}function Wa(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",21),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}function Xa(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"div",14)(1,"mat-form-field",15)(2,"mat-select",16),t.ɵɵtemplate(3,Wa,2,2,"mat-option",17),t.ɵɵelementEnd()(),t.ɵɵelementStart(4,"mat-form-field",15),t.ɵɵelement(5,"input",18),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"div",19)(7,"button",20),t.ɵɵpipe(8,"translate"),t.ɵɵpipe(9,"async"),t.ɵɵlistener("click",(function(){const n=t.ɵɵrestoreView(e).index,r=t.ɵɵnextContext();return t.ɵɵresetView(r.removeKeyVal(n))})),t.ɵɵelementStart(10,"mat-icon"),t.ɵɵtext(11,"delete"),t.ɵɵelementEnd()()()()}if(2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵproperty("placeholder",r.selectText)("formControl",e.get("key")),t.ɵɵadvance(),t.ɵɵproperty("ngForOf",r.filterSelectOptions(e)),t.ɵɵadvance(2),t.ɵɵproperty("placeholder",r.valText)("formControl",e.get("value")),t.ɵɵadvance(2),t.ɵɵclassProp("tb-hidden",1===r.keyValsFormArray().controls.length),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(8,9,"tb.key-val.remove-mapping-entry")),t.ɵɵproperty("disabled",t.ɵɵpipeBind1(9,11,r.isLoading$))}}e("MsgMetadataChipComponent",Qa);class Za extends y{constructor(e,t,n,r){super(e),this.store=e,this.translate=t,this.injector=n,this.fb=r,this.destroy$=new Y,this.sourceFieldSubcritption=[],this.propagateChange=null,this.disabled=!1,this.required=!1,this.oneMapRequiredValidator=e=>e.get("keyVals").value.length,this.propagateNestedErrors=e=>{if(this.svListFormGroup&&this.svListFormGroup.get("keyVals")&&"VALID"===this.svListFormGroup.get("keyVals")?.status)return null;const t={};if(this.svListFormGroup&&this.svListFormGroup.setErrors(null),e instanceof w||e instanceof M){if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;for(const n of Object.keys(e.controls)){const r=this.propagateNestedErrors(e.controls[n]);if(r&&Object.keys(r).length)for(const e of Object.keys(r))t[e]=!0}return t}if(e.errors)for(const n of Object.keys(e.errors))t[n]=!0;return R(t,{})?null:t}}ngOnInit(){this.ngControl=this.injector.get(V),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.svListFormGroup=this.fb.group({keyVals:this.fb.array([])},{validators:[this.propagateNestedErrors,this.oneMapRequiredValidator]}),this.svListFormGroup.valueChanges.pipe(ie(this.destroy$)).subscribe((()=>{this.updateModel()}))}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}keyValsFormArray(){return this.svListFormGroup.get("keyVals")}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.svListFormGroup.disable({emitEvent:!1}):this.svListFormGroup.enable({emitEvent:!1})}writeValue(e){const t=Object.keys(e).map((t=>({key:t,value:e[t]})));if(this.keyValsFormArray().length===t.length)this.keyValsFormArray().patchValue(t,{emitEvent:!1});else{const e=[];t.forEach((t=>{e.push(this.fb.group({key:[t.key,[N.required]],value:[t.value,[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]}))})),this.svListFormGroup.setControl("keyVals",this.fb.array(e,this.propagateNestedErrors),{emitEvent:!1});for(const e of this.keyValsFormArray().controls)this.keyChangeSubscribe(e)}}filterSelectOptions(e){const t=[];for(const e of this.svListFormGroup.get("keyVals").value){const n=this.selectOptions.find((t=>t.value===e.key));n&&t.push(n)}const n=[];for(const r of this.selectOptions)P(t.find((e=>e.value===r.value)))&&r.value!==e?.get("key").value||n.push(r);return n}removeKeyVal(e){this.keyValsFormArray().removeAt(e),this.sourceFieldSubcritption[e].unsubscribe(),this.sourceFieldSubcritption.splice(e,1)}addKeyVal(){this.keyValsFormArray().push(this.fb.group({key:["",[N.required]],value:["",[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]]})),this.keyChangeSubscribe(this.keyValsFormArray().at(this.keyValsFormArray().length-1))}keyChangeSubscribe(e){this.sourceFieldSubcritption.push(e.get("key").valueChanges.pipe(ie(this.destroy$)).subscribe((t=>{const n=ct.get(t);e.get("value").patchValue(this.targetKeyPrefix+n[0].toUpperCase()+n.slice(1))})))}validate(e){return!this.svListFormGroup.get("keyVals").value.length&&this.required?{svMapRequired:!0}:this.svListFormGroup.valid?null:{svFieldsRequired:!0}}updateModel(){const e=this.svListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.svListFormGroup.valid)this.propagateChange(null);else{const t={};e.forEach((e=>{t[e.key]=e.value})),this.propagateChange(t)}}static{this.ɵfac=function(e){return new(e||Za)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(t.Injector),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Za,selectors:[["tb-sv-map-config"]],inputs:{selectOptions:"selectOptions",disabled:"disabled",labelText:"labelText",requiredText:"requiredText",targetKeyPrefix:"targetKeyPrefix",selectText:"selectText",selectRequiredText:"selectRequiredText",valText:"valText",valRequiredText:"valRequiredText",hintText:"hintText",popupHelpLink:"popupHelpLink",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>Za)),multi:!0},{provide:O,useExisting:r((()=>Za)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:22,vars:15,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],[1,"tb-form-row","no-padding","no-border","space-between"],[1,"tb-form-panel-title"],["class","tb-form-panel-hint tb-error","translate","",4,"ngIf"],[1,"tb-form-panel","no-border","no-padding"],[1,"tb-form-table"],[1,"tb-form-table-header"],[1,"tb-form-table-header-cell","field-space"],[1,"tb-form-table-header-cell","actions-header"],[1,"tb-form-table-body"],["class","tb-form-table-row",4,"ngFor","ngForOf"],["type","button","mat-stroked-button","","color","primary",3,"click","disabled"],[3,"hintText","popupHelpLink"],["translate","",1,"tb-form-panel-hint","tb-error"],[1,"tb-form-table-row"],["appearance","outline","subscriptSizing","dynamic",1,"tb-inline-field","field-space"],["required","",3,"placeholder","formControl"],[3,"value",4,"ngFor","ngForOf"],["matInput","",3,"placeholder","formControl"],[1,"tb-form-table-row-cell-buttons"],["type","button","mat-icon-button","","matTooltipPosition","above",3,"click","disabled","matTooltip"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3),t.ɵɵelementEnd(),t.ɵɵtemplate(4,Ja,2,0,"div",3)(5,Ya,2,1,"div",3),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"div",4)(7,"div",5)(8,"div",6)(9,"div",7),t.ɵɵtext(10),t.ɵɵelementEnd(),t.ɵɵelementStart(11,"div",7),t.ɵɵtext(12),t.ɵɵelementEnd(),t.ɵɵelement(13,"div",8),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"div",9),t.ɵɵtemplate(15,Xa,12,13,"div",10),t.ɵɵelementEnd()()(),t.ɵɵelementStart(16,"div")(17,"button",11),t.ɵɵpipe(18,"async"),t.ɵɵlistener("click",(function(){return n.addKeyVal()})),t.ɵɵtext(19),t.ɵɵpipe(20,"translate"),t.ɵɵelementEnd()(),t.ɵɵelement(21,"tb-example-hint",12),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.svListFormGroup),t.ɵɵadvance(3),t.ɵɵtextInterpolate(n.labelText),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.svListFormGroup.hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.svListFormGroup.hasError("svMapRequired")),t.ɵɵadvance(5),t.ɵɵtextInterpolate(n.selectText),t.ɵɵadvance(2),t.ɵɵtextInterpolate(n.valText),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.keyValsFormArray().controls),t.ɵɵadvance(2),t.ɵɵproperty("disabled",t.ɵɵpipeBind1(18,11,n.isLoading$)||n.keyValsFormArray().length>=n.selectOptions.length),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(20,13,"tb.key-val.add-mapping-entry")," "),t.ɵɵadvance(2),t.ɵɵproperty("hintText",n.hintText)("popupHelpLink",n.popupHelpLink))},dependencies:t.ɵɵgetComponentDepsFactory(Za),styles:["[_nghost-%COMP%]   .field-space[_ngcontent-%COMP%]{flex:1 1 50%}[_nghost-%COMP%]   .actions-header[_ngcontent-%COMP%]{width:40px}"]})}}function ei(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",11),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.directionTypeTranslations.get(e))," ")}}e("SvMapConfigComponent",Za),J([h()],Za.prototype,"disabled",void 0),J([h()],Za.prototype,"required",void 0);class ti extends y{get required(){return this.requiredValue}set required(e){this.requiredValue=Z(e)}constructor(e,t){super(e),this.store=e,this.fb=t,this.directionTypes=Object.keys(d),this.directionTypeTranslations=b,this.propagateChange=null}ngOnInit(){this.relationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[N.required]],maxLevel:[null,[]],filters:[null]}),this.relationsQueryFormGroup.valueChanges.subscribe((e=>{this.relationsQueryFormGroup.valid?this.propagateChange(e):this.propagateChange(null)}))}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}setDisabledState(e){this.disabled=e,this.disabled?this.relationsQueryFormGroup.disable({emitEvent:!1}):this.relationsQueryFormGroup.enable({emitEvent:!1})}writeValue(e){this.relationsQueryFormGroup.reset(e||{},{emitEvent:!1})}static{this.ɵfac=function(e){return new(e||ti)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ti,selectors:[["tb-relations-query-config-old"]],inputs:{disabled:"disabled",required:"required"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>ti)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:18,vars:8,consts:[[1,"flex","flex-col",3,"formGroup"],["formControlName","fetchLastLevelOnly"],[1,"flex","flex-row","gap-2"],[1,"mat-block",2,"min-width","100px"],["translate",""],["required","","matInput","","formControlName","direction"],[3,"value",4,"ngFor","ngForOf"],["floatLabel","always",1,"mat-block","flex-1"],["matInput","","type","number","min","1","step","1","formControlName","maxLevel",3,"placeholder"],["translate","",1,"mat-caption",2,"color","#6e6e6e"],["formControlName","filters"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-checkbox",1),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",2)(5,"mat-form-field",3)(6,"mat-label",4),t.ɵɵtext(7,"relation.direction"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",5),t.ɵɵtemplate(9,ei,3,4,"mat-option",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(10,"mat-form-field",7)(11,"mat-label",4),t.ɵɵtext(12,"tb.rulenode.max-relation-level"),t.ɵɵelementEnd(),t.ɵɵelement(13,"input",8),t.ɵɵpipe(14,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(15,"div",9),t.ɵɵtext(16,"relation.relation-filters"),t.ɵɵelementEnd(),t.ɵɵelement(17,"tb-relation-filters",10),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.relationsQueryFormGroup),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,4,"alias.last-level-relation")," "),t.ɵɵadvance(7),t.ɵɵproperty("ngForOf",n.directionTypes),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(14,6,"tb.rulenode.unlimited-level")))},dependencies:t.ɵɵgetComponentDepsFactory(ti),encapsulation:2})}}e("RelationsQueryConfigOldComponent",ti);const ni=e=>({latestTsKeyName:e}),ri=e=>({inputName:e});function ai(e,n){1&e&&t.ɵɵelementContainer(0,9)}function ii(e,n){1&e&&t.ɵɵelementContainer(0,9)}function oi(e,n){1&e&&t.ɵɵelementContainer(0,9)}function li(e,n){1&e&&t.ɵɵelementContainer(0,9)}function si(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",10),t.ɵɵpipe(1,"translate"),t.ɵɵelementStart(2,"mat-slide-toggle",11),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind2(1,2,"tb.rulenode.fetch-latest-telemetry-with-timestamp-tooltip",t.ɵɵpureFunction1(7,ni,e.attributeControlGroup.get("latestTsKeyNames").value[0]))),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,5,"tb.rulenode.fetch-latest-telemetry-with-timestamp")," ")}}function pi(e,n){1&e&&(t.ɵɵelementStart(0,"mat-icon",12),t.ɵɵpipe(1,"translate"),t.ɵɵpipe(2,"translate"),t.ɵɵtext(3,"help"),t.ɵɵelementEnd()),2&e&&t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(2,3,"tb.rulenode.chip-help",t.ɵɵpureFunction1(6,ri,t.ɵɵpipeBind1(1,1,"tb.rulenode.field-name"))))}class mi{constructor(e,t){this.translate=e,this.fb=t,this.propagateChange=e=>{},this.destroy$=new Y,this.separatorKeysCodes=[U,H,z],this.onTouched=()=>{}}ngOnInit(){this.attributeControlGroup=this.fb.group({clientAttributeNames:[[],[]],sharedAttributeNames:[[],[]],serverAttributeNames:[[],[]],latestTsKeyNames:[[],[]],getLatestValueWithTs:[!1,[]]},{validators:this.atLeastOne(N.required,["clientAttributeNames","sharedAttributeNames","serverAttributeNames","latestTsKeyNames"])}),this.attributeControlGroup.valueChanges.pipe(ie(this.destroy$)).subscribe((e=>{this.propagateChange(this.preparePropagateValue(e))}))}preparePropagateValue(e){const t={};for(const n in e)t[n]="getLatestValueWithTs"===n||P(e[n])?e[n]:[];return t}validate(){return this.attributeControlGroup.valid?null:{atLeastOneRequired:!0}}atLeastOne(e,t=null){return n=>{t||(t=Object.keys(n.controls));return n?.controls&&t.some((t=>!e(n.controls[t])))?null:{atLeastOne:!0}}}writeValue(e){this.attributeControlGroup.setValue(e,{emitEvent:!1})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){this.onTouched=e}setDisabledState(e){e?this.attributeControlGroup.disable({emitEvent:!1}):this.attributeControlGroup.enable({emitEvent:!1})}ngOnDestroy(){this.destroy$.next(null),this.destroy$.complete()}static{this.ɵfac=function(e){return new(e||mi)(t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:mi,selectors:[["tb-select-attributes"]],inputs:{popupHelpLink:"popupHelpLink"},features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>mi)),multi:!0},{provide:O,useExisting:mi,multi:!0}])],decls:22,vars:34,consts:[["helpIcon",""],[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],[3,"hintText","popupHelpLink"],["subscriptSizing","dynamic","editable","","formControlName","clientAttributeNames",1,"mat-block",3,"focusout","placeholder","label"],["matSuffix","",4,"ngTemplateOutlet"],["subscriptSizing","dynamic","editable","","formControlName","sharedAttributeNames",1,"mat-block",3,"focusout","placeholder","label"],["subscriptSizing","dynamic","editable","","formControlName","serverAttributeNames",1,"mat-block",3,"focusout","placeholder","label"],["subscriptSizing","dynamic","editable","","formControlName","latestTsKeyNames",1,"mat-block",3,"focusout","placeholder","label"],["class","tb-form-row no-border no-padding",3,"tb-hint-tooltip-icon",4,"ngIf"],["matSuffix",""],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","getLatestValueWithTs",1,"mat-slide"],["aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"]],template:function(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"div",1),t.ɵɵelement(1,"tb-example-hint",2),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"tb-string-items-list",3),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵlistener("focusout",(function(){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.onTouched())})),t.ɵɵtemplate(6,ai,1,0,"ng-container",4),t.ɵɵelementEnd(),t.ɵɵelementStart(7,"tb-string-items-list",5),t.ɵɵpipe(8,"translate"),t.ɵɵpipe(9,"translate"),t.ɵɵlistener("focusout",(function(){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.onTouched())})),t.ɵɵtemplate(10,ii,1,0,"ng-container",4),t.ɵɵelementEnd(),t.ɵɵelementStart(11,"tb-string-items-list",6),t.ɵɵpipe(12,"translate"),t.ɵɵpipe(13,"translate"),t.ɵɵlistener("focusout",(function(){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.onTouched())})),t.ɵɵtemplate(14,oi,1,0,"ng-container",4),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"tb-string-items-list",7),t.ɵɵpipe(16,"translate"),t.ɵɵpipe(17,"translate"),t.ɵɵlistener("focusout",(function(){return t.ɵɵrestoreView(e),t.ɵɵresetView(n.onTouched())})),t.ɵɵtemplate(18,li,1,0,"ng-container",4),t.ɵɵelementEnd(),t.ɵɵtemplate(19,si,5,9,"div",8),t.ɵɵelementEnd(),t.ɵɵtemplate(20,pi,4,8,"ng-template",null,0,t.ɵɵtemplateRefExtractor)}if(2&e){let e;const r=t.ɵɵreference(21);t.ɵɵproperty("formGroup",n.attributeControlGroup),t.ɵɵadvance(),t.ɵɵproperty("hintText",t.ɵɵpipeBind1(2,16,"tb.rulenode.kv-map-pattern-hint"))("popupHelpLink",n.popupHelpLink),t.ɵɵadvance(2),t.ɵɵproperty("placeholder",t.ɵɵpipeBind1(4,18,"tb.rulenode.add-attribute-key"))("label",t.ɵɵpipeBind1(5,20,"tb.rulenode.client-attributes")),t.ɵɵadvance(3),t.ɵɵproperty("ngTemplateOutlet",r),t.ɵɵadvance(),t.ɵɵproperty("placeholder",t.ɵɵpipeBind1(8,22,"tb.rulenode.add-attribute-key"))("label",t.ɵɵpipeBind1(9,24,"tb.rulenode.shared-attributes")),t.ɵɵadvance(3),t.ɵɵproperty("ngTemplateOutlet",r),t.ɵɵadvance(),t.ɵɵproperty("placeholder",t.ɵɵpipeBind1(12,26,"tb.rulenode.add-attribute-key"))("label",t.ɵɵpipeBind1(13,28,"tb.rulenode.server-attributes")),t.ɵɵadvance(3),t.ɵɵproperty("ngTemplateOutlet",r),t.ɵɵadvance(),t.ɵɵproperty("placeholder",t.ɵɵpipeBind1(16,30,"tb.rulenode.add-telemetry-key"))("label",t.ɵɵpipeBind1(17,32,"tb.rulenode.latest-telemetry")),t.ɵɵadvance(3),t.ɵɵproperty("ngTemplateOutlet",r),t.ɵɵadvance(),t.ɵɵproperty("ngIf",(null==(e=n.attributeControlGroup.get("latestTsKeyNames").value)?null:e.length)>0)}},dependencies:t.ɵɵgetComponentDepsFactory(mi),encapsulation:2})}}e("SelectAttributesComponent",mi);class di extends y{constructor(e,t){super(e),this.store=e,this.fb=t,this.propagateChange=null,this.destroy$=new Y,this.alarmStatus=x,this.alarmStatusTranslations=C}ngOnInit(){this.alarmStatusGroup=this.fb.group({alarmStatus:[null,[]]}),this.alarmStatusGroup.get("alarmStatus").valueChanges.pipe(ie(this.destroy$)).subscribe((e=>{this.propagateChange(e)}))}setDisabledState(e){e?this.alarmStatusGroup.disable({emitEvent:!1}):this.alarmStatusGroup.enable({emitEvent:!1})}registerOnChange(e){this.propagateChange=e}registerOnTouched(e){}ngOnDestroy(){this.destroy$.next(),this.destroy$.complete()}writeValue(e){this.alarmStatusGroup.get("alarmStatus").patchValue(e,{emitEvent:!1})}static{this.ɵfac=function(e){return new(e||di)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:di,selectors:[["tb-alarm-status-select"]],features:[t.ɵɵProvidersFeature([{provide:B,useExisting:r((()=>di)),multi:!0}]),t.ɵɵInheritDefinitionFeature],decls:16,vars:17,consts:[[1,"flex","flex-col","items-center","justify-center",3,"formGroup"],["multiple","","formControlName","alarmStatus",1,"chip-listbox","flex","flex-col"],[1,"toggle-column"],[1,"option","flex-1",3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-chip-listbox",1)(2,"div",2)(3,"mat-chip-option",3),t.ɵɵtext(4),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"mat-chip-option",3),t.ɵɵtext(7),t.ɵɵpipe(8,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(9,"div",2)(10,"mat-chip-option",3),t.ɵɵtext(11),t.ɵɵpipe(12,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(13,"mat-chip-option",3),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd()()()()),2&e&&(t.ɵɵproperty("formGroup",n.alarmStatusGroup),t.ɵɵadvance(3),t.ɵɵproperty("value",n.alarmStatus.ACTIVE_UNACK),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(5,9,n.alarmStatusTranslations.get(n.alarmStatus.ACTIVE_UNACK))," "),t.ɵɵadvance(2),t.ɵɵproperty("value",n.alarmStatus.ACTIVE_ACK),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(8,11,n.alarmStatusTranslations.get(n.alarmStatus.ACTIVE_ACK))," "),t.ɵɵadvance(3),t.ɵɵproperty("value",n.alarmStatus.CLEARED_UNACK),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(12,13,n.alarmStatusTranslations.get(n.alarmStatus.CLEARED_UNACK))," "),t.ɵɵadvance(2),t.ɵɵproperty("value",n.alarmStatus.CLEARED_ACK),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(15,15,n.alarmStatusTranslations.get(n.alarmStatus.CLEARED_ACK))," "))},dependencies:t.ɵɵgetComponentDepsFactory(di),styles:["[_nghost-%COMP%]   .chip-listbox[_ngcontent-%COMP%]{max-width:460px;width:100%}[_nghost-%COMP%]   .chip-listbox[_ngcontent-%COMP%]   .toggle-column[_ngcontent-%COMP%]{display:flex;flex:1 1 100%;gap:8px}[_nghost-%COMP%]   .chip-listbox[_ngcontent-%COMP%]   .option[_ngcontent-%COMP%]{margin:0}@media screen and (max-width: 959px){[_nghost-%COMP%]   .chip-listbox[_ngcontent-%COMP%]{max-width:360px}[_nghost-%COMP%]   .chip-listbox[_ngcontent-%COMP%]   .toggle-column[_ngcontent-%COMP%]{flex-direction:column}}[_nghost-%COMP%]     .chip-listbox .mdc-evolution-chip-set__chips{gap:8px}[_nghost-%COMP%]     .chip-listbox .option button{flex-basis:100%;justify-content:start}[_nghost-%COMP%]     .chip-listbox .option .mdc-evolution-chip__graphic{flex-grow:0}"]})}}e("AlarmStatusSelectComponent",di);const ui=()=>({maxWidth:"820px"});function ci(e,n){if(1&e&&(t.ɵɵelement(0,"div",3),t.ɵɵpipe(1,"translate")),2&e){const e=t.ɵɵnextContext();t.ɵɵpropertyInterpolate("tb-help-popup",e.popupHelpLink),t.ɵɵpropertyInterpolate("trigger-text",t.ɵɵpipeBind1(1,3,"tb.key-val.see-examples")),t.ɵɵproperty("tb-help-popup-style",t.ɵɵpureFunction0(5,ui))}}class gi{constructor(){this.textAlign="left"}static{this.ɵfac=function(e){return new(e||gi)}}static{this.ɵcmp=t.ɵɵdefineComponent({type:gi,selectors:[["tb-example-hint"]],inputs:{hintText:"hintText",popupHelpLink:"popupHelpLink",textAlign:"textAlign"},decls:5,vars:10,consts:[[1,"tb-form-hint","tb-primary-fill","space-between",3,"hidden"],[1,"hint-text",3,"innerHTML"],["class","see-example","hintMode","","tb-help-popup-placement","right","trigger-style","letter-spacing:0.25px; font-size:12px",3,"tb-help-popup","tb-help-popup-style","trigger-text",4,"ngIf"],["hintMode","","tb-help-popup-placement","right","trigger-style","letter-spacing:0.25px; font-size:12px",1,"see-example",3,"tb-help-popup","tb-help-popup-style","trigger-text"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"div",0),t.ɵɵelement(1,"div",1),t.ɵɵpipe(2,"translate"),t.ɵɵpipe(3,"safe"),t.ɵɵtemplate(4,ci,2,6,"div",2),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("hidden",!n.hintText),t.ɵɵadvance(),t.ɵɵstyleProp("text-align",n.textAlign),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(3,7,t.ɵɵpipeBind1(2,5,n.hintText),"html"),t.ɵɵsanitizeHtml),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.popupHelpLink))},dependencies:t.ɵɵgetComponentDepsFactory(gi),styles:["[_nghost-%COMP%]   .space-between[_ngcontent-%COMP%]{display:flex;justify-content:space-between;gap:20px}[_nghost-%COMP%]   .space-between[_ngcontent-%COMP%]   .see-example[_ngcontent-%COMP%]{display:flex;flex-shrink:0}[_nghost-%COMP%]   .hint-text[_ngcontent-%COMP%]{width:100%}"]})}}e("ExampleHintComponent",gi);class fi{static{this.ɵfac=function(e){return new(e||fi)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:fi})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,Q,Lr,Gr,zr,ia,ga,Na,Oa,_a,za,Qa,Za,ti,mi,di,gi]})}}e("RulenodeCoreConfigCommonModule",fi),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(fi,{declarations:[Lr,Gr,zr,ia,ga,Na,Oa,_a,za,Qa,Za,ti,mi,di,gi],imports:[$,S,Q],exports:[Lr,Gr,zr,ia,ga,Na,Oa,_a,za,Qa,Za,ti,mi,di,gi]});class hi{static{this.ɵfac=function(e){return new(e||hi)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:hi})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,Q,fi,br,ce,lr,nr,Vn,se,Ce,Re,He,zn,Ye,st,Fn,Ln,Zn,ar,mr,dr,We,Xn,Jn,Ar,Nr]})}}e("RuleNodeCoreConfigActionModule",hi),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(hi,{declarations:[br,ce,lr,nr,Vn,se,Ce,Re,He,zn,Ye,st,Fn,Ln,Zn,ar,mr,dr,We,Xn,Jn,Ar,Nr],imports:[$,S,Q,fi],exports:[br,ce,lr,nr,Vn,se,Ce,Re,He,zn,Ye,st,Fn,Ln,Zn,ar,mr,dr,We,Xn,Jn,Ar,Nr]});const yi=e=>({inputValueKey:e}),bi=e=>({periodValueKey:e}),vi=(e,t)=>({outputValueKey:e,periodValueKey:t}),xi=e=>({outputValueKey:e});function Ci(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.input-value-key-required")," "))}function Si(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.output-value-key-required")," "))}function Ti(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.number-of-digits-after-floating-point-range")," "))}function Ii(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.number-of-digits-after-floating-point-range")," "))}function Ei(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.period-value-key-required")," "))}function Fi(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",16)(1,"mat-label"),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",17),t.ɵɵtemplate(5,Ei,3,3,"mat-error",4),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(3,2,"tb.rulenode.period-value-key")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.calculateDeltaConfigForm.get("periodValueKey").hasError("required"))}}class qi extends i{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n,this.separatorKeysCodes=[U,H,z]}configForm(){return this.calculateDeltaConfigForm}onConfigurationSet(e){this.calculateDeltaConfigForm=this.fb.group({inputValueKey:[e.inputValueKey,[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],outputValueKey:[e.outputValueKey,[N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],useCache:[e.useCache,[]],addPeriodBetweenMsgs:[e.addPeriodBetweenMsgs,[]],periodValueKey:[e.periodValueKey,[]],round:[e.round,[N.min(0),N.max(15)]],tellFailureIfDeltaIsNegative:[e.tellFailureIfDeltaIsNegative,[]],excludeZeroDeltas:[e.excludeZeroDeltas,[]]})}prepareInputConfig(e){return{inputValueKey:P(e?.inputValueKey)?e.inputValueKey:null,outputValueKey:P(e?.outputValueKey)?e.outputValueKey:null,useCache:!P(e?.useCache)||e.useCache,addPeriodBetweenMsgs:!!P(e?.addPeriodBetweenMsgs)&&e.addPeriodBetweenMsgs,periodValueKey:P(e?.periodValueKey)?e.periodValueKey:null,round:P(e?.round)?e.round:null,tellFailureIfDeltaIsNegative:!P(e?.tellFailureIfDeltaIsNegative)||e.tellFailureIfDeltaIsNegative,excludeZeroDeltas:!!P(e?.excludeZeroDeltas)&&e.excludeZeroDeltas}}prepareOutputConfig(e){return _(e)}updateValidators(e){this.calculateDeltaConfigForm.get("addPeriodBetweenMsgs").value?this.calculateDeltaConfigForm.get("periodValueKey").setValidators([N.required]):this.calculateDeltaConfigForm.get("periodValueKey").setValidators([]),this.calculateDeltaConfigForm.get("periodValueKey").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["addPeriodBetweenMsgs"]}static{this.ɵfac=function(e){return new(e||qi)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:qi,selectors:[["tb-enrichment-node-calculate-delta-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:50,vars:69,consts:[[3,"formGroup"],[1,"gt-sm:flex","gt-sm:flex-row","gt-sm:gap-5.5"],[1,"mat-block","flex-1"],["matInput","","formControlName","inputValueKey"],[4,"ngIf"],["matInput","","formControlName","outputValueKey"],["type","number","min","0","max","15","step","1","matInput","","formControlName","round"],[1,"tb-form-panel","no-padding","no-border"],[1,"tb-form-row","same-padding",3,"tb-hint-tooltip-icon"],["formControlName","tellFailureIfDeltaIsNegative",1,"mat-slide","margin"],["formControlName","useCache",1,"mat-slide","margin"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","addPeriodBetweenMsgs",1,"mat-slide"],["class","mat-block",4,"ngIf"],["formControlName","excludeZeroDeltas",1,"mat-slide","margin"],[1,"mat-block"],["required","","matInput","","formControlName","periodValueKey"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"mat-form-field",2)(3,"mat-label"),t.ɵɵtext(4),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(6,"input",3),t.ɵɵtemplate(7,Ci,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-form-field",2)(9,"mat-label"),t.ɵɵtext(10),t.ɵɵpipe(11,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",5),t.ɵɵtemplate(13,Si,3,3,"mat-error",4),t.ɵɵelementEnd()(),t.ɵɵelementStart(14,"mat-form-field",2)(15,"mat-label"),t.ɵɵtext(16),t.ɵɵpipe(17,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(18,"input",6),t.ɵɵtemplate(19,Ti,3,3,"mat-error",4)(20,Ii,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"div",7)(22,"div",8),t.ɵɵpipe(23,"translate"),t.ɵɵelementStart(24,"mat-slide-toggle",9),t.ɵɵtext(25),t.ɵɵpipe(26,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(27,"div",8),t.ɵɵpipe(28,"translate"),t.ɵɵpipe(29,"translate"),t.ɵɵelementStart(30,"mat-slide-toggle",10),t.ɵɵtext(31),t.ɵɵpipe(32,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(33,"div",11)(34,"div",12),t.ɵɵpipe(35,"translate"),t.ɵɵelementStart(36,"mat-slide-toggle",13),t.ɵɵtext(37),t.ɵɵpipe(38,"translate"),t.ɵɵpipe(39,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(40,Fi,6,4,"mat-form-field",14),t.ɵɵelementEnd(),t.ɵɵelementStart(41,"div",8),t.ɵɵpipe(42,"translate"),t.ɵɵpipe(43,"translate"),t.ɵɵpipe(44,"translate"),t.ɵɵpipe(45,"translate"),t.ɵɵpipe(46,"translate"),t.ɵɵelementStart(47,"mat-slide-toggle",15),t.ɵɵtext(48),t.ɵɵpipe(49,"translate"),t.ɵɵelementEnd()()()()),2&e&&(t.ɵɵproperty("formGroup",n.calculateDeltaConfigForm),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(5,19,"tb.rulenode.input-value-key")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.calculateDeltaConfigForm.get("inputValueKey").hasError("required")||n.calculateDeltaConfigForm.get("inputValueKey").hasError("pattern")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(11,21,"tb.rulenode.output-value-key")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.calculateDeltaConfigForm.get("outputValueKey").hasError("required")||n.calculateDeltaConfigForm.get("outputValueKey").hasError("pattern")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(17,23,"tb.rulenode.number-of-digits-after-floating-point")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.calculateDeltaConfigForm.get("round").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.calculateDeltaConfigForm.get("round").hasError("max")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(23,25,"tb.rulenode.failure-if-delta-negative-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(26,27,"tb.rulenode.failure-if-delta-negative")," "),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind2(29,31,"tb.rulenode.use-caching-tooltip",t.ɵɵpureFunction1(58,yi,n.calculateDeltaConfigForm.get("inputValueKey").valid?n.calculateDeltaConfigForm.get("inputValueKey").value:t.ɵɵpipeBind1(28,29,"tb.rulenode.input-value-key")))),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(32,34,"tb.rulenode.use-caching")," "),t.ɵɵadvance(2),t.ɵɵclassProp("no-padding-bottom",n.calculateDeltaConfigForm.get("addPeriodBetweenMsgs").value),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind2(35,36,"tb.rulenode.add-time-difference-between-readings-tooltip",t.ɵɵpureFunction1(60,bi,n.calculateDeltaConfigForm.get("periodValueKey").valid&&n.calculateDeltaConfigForm.get("addPeriodBetweenMsgs").value?n.calculateDeltaConfigForm.get("periodValueKey").value:"periodInMs"))),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind2(39,41,"tb.rulenode.add-time-difference-between-readings",t.ɵɵpureFunction1(62,yi,n.calculateDeltaConfigForm.get("inputValueKey").valid?n.calculateDeltaConfigForm.get("inputValueKey").value:t.ɵɵpipeBind1(38,39,"tb.rulenode.input-value-key")))," "),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.calculateDeltaConfigForm.get("addPeriodBetweenMsgs").value),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",n.calculateDeltaConfigForm.get("addPeriodBetweenMsgs").value?t.ɵɵpipeBind2(44,48,"tb.rulenode.exclude-zero-deltas-time-difference-hint",t.ɵɵpureFunction2(64,vi,n.calculateDeltaConfigForm.get("outputValueKey").valid?n.calculateDeltaConfigForm.get("outputValueKey").value:t.ɵɵpipeBind1(42,44,"tb.rulenode.output-value-key"),n.calculateDeltaConfigForm.get("periodValueKey").valid?n.calculateDeltaConfigForm.get("periodValueKey").value:t.ɵɵpipeBind1(43,46,"tb.rulenode.period-value-key"))):t.ɵɵpipeBind2(46,53,"tb.rulenode.exclude-zero-deltas-hint",t.ɵɵpureFunction1(67,xi,n.calculateDeltaConfigForm.get("outputValueKey").valid?n.calculateDeltaConfigForm.get("outputValueKey").value:t.ɵɵpipeBind1(45,51,"tb.rulenode.output-value-key")))),t.ɵɵadvance(7),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(49,56,"tb.rulenode.exclude-zero-deltas")," "))},dependencies:t.ɵɵgetComponentDepsFactory(qi),encapsulation:2})}}function Ai(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",8),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}e("CalculateDeltaConfigComponent",qi);class ki extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.fetchToData=[],this.DataToFetch=Ft;for(const e of qt.keys())e!==Ft.FIELDS&&this.fetchToData.push({value:e,name:this.translate.instant(qt.get(e))})}configForm(){return this.customerAttributesConfigForm}prepareOutputConfig(e){const t={};for(const n of Object.keys(e.dataMapping))t[n.trim()]=e.dataMapping[n];return e.dataMapping=t,_(e)}prepareInputConfig(e){let t,n;return t=P(e?.telemetry)?e.telemetry?Ft.LATEST_TELEMETRY:Ft.ATTRIBUTES:P(e?.dataToFetch)?e.dataToFetch:Ft.ATTRIBUTES,n=P(e?.attrMapping)?e.attrMapping:P(e?.dataMapping)?e.dataMapping:null,{dataToFetch:t,dataMapping:n,fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA}}selectTranslation(e,t){return this.customerAttributesConfigForm.get("dataToFetch").value===Ft.LATEST_TELEMETRY?e:t}onConfigurationSet(e){this.customerAttributesConfigForm=this.fb.group({dataToFetch:[e.dataToFetch,[]],dataMapping:[e.dataMapping,[N.required]],fetchTo:[e.fetchTo]})}static{this.ɵfac=function(e){return new(e||ki)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ki,selectors:[["tb-enrichment-node-customer-attributes-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:17,vars:26,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-1","items-center","justify-center"],[1,"fetch-to-data-toggle"],["formControlName","dataToFetch","appearance","fill",1,"fetch-to-data-toggle"],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","dataMapping","popupHelpLink","rulenode/customer_attributes_node_fields_templatization",3,"requiredText","labelText","keyText","keyRequiredText","valText","valRequiredText","hintText"],["formControlName","fetchTo",3,"labelText"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.mapping-of-customers"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"div",2)(4,"div",3)(5,"tb-toggle-select",4),t.ɵɵtemplate(6,Ai,2,2,"tb-toggle-option",5),t.ɵɵelementEnd()()(),t.ɵɵelement(7,"tb-kv-map-config",6),t.ɵɵpipe(8,"translate"),t.ɵɵpipe(9,"translate"),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"translate"),t.ɵɵpipe(12,"translate"),t.ɵɵpipe(13,"translate"),t.ɵɵelement(14,"tb-msg-metadata-chip",7),t.ɵɵpipe(15,"translate"),t.ɵɵpipe(16,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.customerAttributesConfigForm),t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",n.fetchToData),t.ɵɵadvance(),t.ɵɵproperty("requiredText",t.ɵɵpipeBind1(8,10,"tb.rulenode.attr-mapping-required"))("labelText",t.ɵɵpipeBind1(9,12,n.selectTranslation("tb.rulenode.latest-telemetry-mapping","tb.rulenode.attributes-mapping")))("keyText",t.ɵɵpipeBind1(10,14,n.selectTranslation("tb.rulenode.source-telemetry","tb.rulenode.source-attribute")))("keyRequiredText",t.ɵɵpipeBind1(11,16,n.selectTranslation("tb.rulenode.source-telemetry-required","tb.rulenode.source-attribute-required")))("valText",t.ɵɵpipeBind1(12,18,"tb.rulenode.target-key"))("valRequiredText",t.ɵɵpipeBind1(13,20,"tb.rulenode.target-key-required"))("hintText","tb.rulenode.kv-map-pattern-hint"),t.ɵɵadvance(7),t.ɵɵproperty("labelText",n.customerAttributesConfigForm.get("dataToFetch").value===n.DataToFetch.LATEST_TELEMETRY?t.ɵɵpipeBind1(15,22,"tb.rulenode.add-mapped-latest-telemetry-to"):t.ɵɵpipeBind1(16,24,"tb.rulenode.add-mapped-attribute-to")))},dependencies:t.ɵɵgetComponentDepsFactory(ki),styles:["[_nghost-%COMP%]   .fetch-to-data-toggle[_ngcontent-%COMP%]{max-width:420px;width:100%}"]})}}e("CustomerAttributesConfigComponent",ki);class Ni extends i{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n}configForm(){return this.deviceAttributesConfigForm}onConfigurationSet(e){this.deviceAttributesConfigForm=this.fb.group({deviceRelationsQuery:[e.deviceRelationsQuery,[N.required]],tellFailureIfAbsent:[e.tellFailureIfAbsent,[]],fetchTo:[e.fetchTo,[]],attributesControl:[e.attributesControl,[]]})}prepareInputConfig(e){return j(e)&&(e.attributesControl={clientAttributeNames:P(e?.clientAttributeNames)?e.clientAttributeNames:[],latestTsKeyNames:P(e?.latestTsKeyNames)?e.latestTsKeyNames:[],serverAttributeNames:P(e?.serverAttributeNames)?e.serverAttributeNames:[],sharedAttributeNames:P(e?.sharedAttributeNames)?e.sharedAttributeNames:[],getLatestValueWithTs:!!P(e?.getLatestValueWithTs)&&e.getLatestValueWithTs}),{deviceRelationsQuery:P(e?.deviceRelationsQuery)?e.deviceRelationsQuery:null,tellFailureIfAbsent:!P(e?.tellFailureIfAbsent)||e.tellFailureIfAbsent,fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA,attributesControl:e?e.attributesControl:null}}prepareOutputConfig(e){for(const t of Object.keys(e.attributesControl))e[t]=e.attributesControl[t];return delete e.attributesControl,e}static{this.ɵfac=function(e){return new(e||Ni)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ni,selectors:[["tb-enrichment-node-device-attributes-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:19,vars:11,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],[1,"tb-form-panel","stroked","no-padding-bottom"],["translate","",1,"tb-form-panel-title"],["required","","formControlName","deviceRelationsQuery"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-padding","no-border","space-between"],["translate","",1,"tb-form-panel-title","tb-required"],["translate","",1,"tb-form-panel-hint","tb-error",3,"hidden"],["formControlName","attributesControl","popupHelpLink","rulenode/related_device_attributes_node_fields_templatization"],["formControlName","fetchTo",3,"labelText"],[1,"tb-form-row","same-padding",3,"tb-hint-tooltip-icon"],["formControlName","tellFailureIfAbsent",1,"mat-slide","margin"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.device-relations-query"),t.ɵɵelementEnd(),t.ɵɵelement(4,"tb-device-relations-query-config",3),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"div",4)(6,"div",5)(7,"div",6),t.ɵɵtext(8,"tb.rulenode.related-device-attributes"),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"div",7),t.ɵɵtext(10," tb.rulenode.at-least-one-field-required "),t.ɵɵelementEnd()(),t.ɵɵelement(11,"tb-select-attributes",8)(12,"tb-msg-metadata-chip",9),t.ɵɵpipe(13,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"div",10),t.ɵɵpipe(15,"translate"),t.ɵɵelementStart(16,"mat-slide-toggle",11),t.ɵɵtext(17),t.ɵɵpipe(18,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.deviceAttributesConfigForm),t.ɵɵadvance(9),t.ɵɵproperty("hidden",!(n.deviceAttributesConfigForm.get("attributesControl").touched&&n.deviceAttributesConfigForm.get("attributesControl").hasError("atLeastOneRequired"))),t.ɵɵadvance(3),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(13,5,"tb.rulenode.add-selected-attributes-to")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(15,7,"tb.rulenode.tell-failure-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(18,9,"tb.rulenode.tell-failure")," "))},dependencies:t.ɵɵgetComponentDepsFactory(Ni),encapsulation:2})}}e("DeviceAttributesConfigComponent",Ni);const wi=e=>({inputName:e});class Mi extends i{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n,this.predefinedValues=[];for(const e of Object.keys(xt))this.predefinedValues.push({value:xt[e],name:this.translate.instant(Ct.get(xt[e]))})}ngOnInit(){super.ngOnInit()}configForm(){return this.entityDetailsConfigForm}prepareInputConfig(e){let t;return t=P(e?.addToMetadata)?e.addToMetadata?Kt.METADATA:Kt.DATA:e?.fetchTo?e.fetchTo:Kt.DATA,{detailsList:P(e?.detailsList)?e.detailsList:null,fetchTo:t}}onConfigurationSet(e){this.entityDetailsConfigForm=this.fb.group({detailsList:[e.detailsList,[N.required]],fetchTo:[e.fetchTo,[]]})}static{this.ɵfac=function(e){return new(e||Mi)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Mi,selectors:[["tb-enrichment-node-entity-details-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:11,vars:22,consts:[[3,"formGroup"],["required","","formControlName","detailsList",1,"mat-block",3,"predefinedValues","label","placeholder","requiredText"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],["formControlName","fetchTo",3,"labelText"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"tb-string-items-list",1),t.ɵɵpipe(2,"translate"),t.ɵɵpipe(3,"translate"),t.ɵɵpipe(4,"translate"),t.ɵɵelementStart(5,"mat-icon",2),t.ɵɵpipe(6,"translate"),t.ɵɵpipe(7,"translate"),t.ɵɵtext(8," help "),t.ɵɵelementEnd()(),t.ɵɵelement(9,"tb-msg-metadata-chip",3),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.entityDetailsConfigForm),t.ɵɵadvance(),t.ɵɵproperty("predefinedValues",n.predefinedValues)("label",t.ɵɵpipeBind1(2,7,"tb.rulenode.select-details"))("placeholder",t.ɵɵpipeBind1(3,9,"tb.rulenode.add-detail"))("requiredText",t.ɵɵpipeBind1(4,11,"tb.rulenode.entity-details-list-empty")),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(7,15,"tb.rulenode.chip-help",t.ɵɵpureFunction1(20,wi,t.ɵɵpipeBind1(6,13,"tb.rulenode.detail")))),t.ɵɵadvance(4),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(10,18,"tb.rulenode.add-selected-details-to")))},dependencies:t.ɵɵgetComponentDepsFactory(Mi),encapsulation:2})}}e("EntityDetailsConfigComponent",Mi);const Vi=()=>({maxWidth:"820px"}),Bi=e=>({inputName:e}),Oi=(e,t,n,r)=>({startInterval:e,endInterval:t,startIntervalTimeUnit:n,endIntervalTimeUnit:r});function Di(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.start-interval-value-required")," "))}function Li(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function Pi(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function Ri(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",29),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.timeUnitsTranslationMap.get(e))," ")}}function _i(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.end-interval-value-required")," "))}function ji(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function Gi(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.time-value-range")," "))}function Ki(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",29),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.timeUnitsTranslationMap.get(e))," ")}}function Ui(e,n){if(1&e&&(t.ɵɵelementContainerStart(0),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementContainerEnd()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind2(2,1,"tb.rulenode.fetch-timeseries-from-to",t.ɵɵpureFunction4(4,Oi,e.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").value,e.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").value,e.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").value.toLowerCase(),e.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").value.toLowerCase()))," ")}}function Hi(e,n){1&e&&(t.ɵɵtext(0),t.ɵɵpipe(1,"translate")),2&e&&t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(1,1,"tb.rulenode.fetch-timeseries-from-to-invalid")," ")}function zi(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",17)(1,"div",18)(2,"mat-form-field",19)(3,"mat-label"),t.ɵɵtext(4),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(6,"input",20),t.ɵɵtemplate(7,Di,3,3,"mat-error",16)(8,Li,3,3,"mat-error",16)(9,Pi,3,3,"mat-error",16),t.ɵɵelementEnd(),t.ɵɵelementStart(10,"mat-form-field",21)(11,"mat-label"),t.ɵɵtext(12),t.ɵɵpipe(13,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"mat-select",22),t.ɵɵtemplate(15,Ri,3,4,"mat-option",14),t.ɵɵelementEnd()()(),t.ɵɵelementStart(16,"div",18)(17,"mat-form-field",19)(18,"mat-label"),t.ɵɵtext(19),t.ɵɵpipe(20,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(21,"input",23),t.ɵɵtemplate(22,_i,3,3,"mat-error",16)(23,ji,3,3,"mat-error",16)(24,Gi,3,3,"mat-error",16),t.ɵɵelementEnd(),t.ɵɵelementStart(25,"mat-form-field",21)(26,"mat-label"),t.ɵɵtext(27),t.ɵɵpipe(28,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(29,"mat-select",24),t.ɵɵtemplate(30,Ki,3,4,"mat-option",14),t.ɵɵelementEnd()()(),t.ɵɵelementStart(31,"div",25)(32,"mat-icon",26),t.ɵɵtext(33,"error_outline"),t.ɵɵelementEnd(),t.ɵɵelementStart(34,"div",27),t.ɵɵtemplate(35,Ui,3,9,"ng-container",28)(36,Hi,2,3,"ng-template",null,1,t.ɵɵtemplateRefExtractor),t.ɵɵelementEnd()()()),2&e){const e=t.ɵɵreference(37),n=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(5,16,"tb.rulenode.interval-start")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").hasError("max")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(13,18,"tb.rulenode.time-unit")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.timeUnits),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(20,20,"tb.rulenode.interval-end")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").hasError("max")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(28,22,"tb.rulenode.time-unit")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.timeUnits),t.ɵɵadvance(),t.ɵɵclassProp("error",n.getTelemetryFromDatabaseConfigForm.get("interval").invalid),t.ɵɵadvance(4),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("interval").valid)("ngIfElse",e)}}function $i(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.start-interval-required")," "))}function Qi(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.end-interval-required")," "))}function Ji(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",30)(1,"mat-form-field",31)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(5,"input",32),t.ɵɵtemplate(6,$i,3,3,"mat-error",16),t.ɵɵelementEnd(),t.ɵɵelementStart(7,"mat-form-field",31)(8,"mat-label"),t.ɵɵtext(9),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",33),t.ɵɵtemplate(12,Qi,3,3,"mat-error",16),t.ɵɵelementEnd(),t.ɵɵelement(13,"tb-example-hint",34),t.ɵɵpipe(14,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,5,"tb.rulenode.start-interval")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").hasError("required")||e.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").hasError("pattern")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(10,7,"tb.rulenode.end-interval")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").hasError("required")||e.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").hasError("pattern")),t.ɵɵadvance(),t.ɵɵproperty("hintText",t.ɵɵpipeBind1(14,9,"tb.rulenode.metadata-dynamic-interval-hint"))}}function Yi(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",29),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}function Wi(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",29),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.aggregationTypesTranslations.get(r.aggregationTypes[e]))," ")}}function Xi(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",29),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(3);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.samplingOrdersTranslate.get(e))," ")}}function Zi(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.limit-required")," "))}function eo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.limit-range")," "))}function to(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.limit-range")," "))}function no(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"mat-form-field",37)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-select",38),t.ɵɵtemplate(6,Xi,3,4,"mat-option",14),t.ɵɵelementEnd()(),t.ɵɵelementStart(7,"mat-form-field",39)(8,"mat-label"),t.ɵɵtext(9),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",40),t.ɵɵelementStart(12,"mat-hint"),t.ɵɵtext(13),t.ɵɵpipe(14,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(15,Zi,3,3,"mat-error",16)(16,eo,3,3,"mat-error",16)(17,to,3,3,"mat-error",16),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(4,7,"tb.rulenode.order-by-timestamp")," "),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",e.samplingOrders),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(10,9,"tb.rulenode.limit")),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(14,11,"tb.rulenode.limit-hint")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.getTelemetryFromDatabaseConfigForm.get("limit").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.getTelemetryFromDatabaseConfigForm.get("limit").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.getTelemetryFromDatabaseConfigForm.get("limit").hasError("max"))}}function ro(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"mat-form-field",35)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-select",36),t.ɵɵtemplate(6,Wi,3,4,"mat-option",14),t.ɵɵelementEnd()(),t.ɵɵtemplate(7,no,18,13,"div",16),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵproperty("subscriptSizing",e.defaultPaddingEnable()?"fixed":"dynamic"),t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,4,"aggregation.function")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",e.aggregations),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.getTelemetryFromDatabaseConfigForm.get("aggregation").value===e.aggregationTypes.NONE)}}class ao extends i{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n,this.separatorKeysCodes=[U,H,z],this.aggregationTypes=T,this.aggregations=Object.values(T),this.aggregationTypesTranslations=I,this.fetchMode=St,this.samplingOrders=Object.values(Et),this.samplingOrdersTranslate=kt,this.timeUnits=Object.values(ht),this.timeUnitsTranslationMap=yt,this.deduplicationStrategiesHintTranslations=It,this.headerOptions=[],this.timeUnitMap={[ht.MILLISECONDS]:1,[ht.SECONDS]:1e3,[ht.MINUTES]:6e4,[ht.HOURS]:36e5,[ht.DAYS]:864e5},this.intervalValidator=()=>e=>e.get("startInterval").value*this.timeUnitMap[e.get("startIntervalTimeUnit").value]<=e.get("endInterval").value*this.timeUnitMap[e.get("endIntervalTimeUnit").value]?{intervalError:!0}:null;for(const e of Tt.keys())this.headerOptions.push({value:e,name:this.translate.instant(Tt.get(e))})}configForm(){return this.getTelemetryFromDatabaseConfigForm}onConfigurationSet(e){this.getTelemetryFromDatabaseConfigForm=this.fb.group({latestTsKeyNames:[e.latestTsKeyNames,[N.required]],aggregation:[e.aggregation,[N.required]],fetchMode:[e.fetchMode,[N.required]],orderBy:[e.orderBy,[]],limit:[e.limit,[]],useMetadataIntervalPatterns:[e.useMetadataIntervalPatterns,[]],interval:this.fb.group({startInterval:[e.interval.startInterval,[]],startIntervalTimeUnit:[e.interval.startIntervalTimeUnit,[]],endInterval:[e.interval.endInterval,[]],endIntervalTimeUnit:[e.interval.endIntervalTimeUnit,[]]}),startIntervalPattern:[e.startIntervalPattern,[]],endIntervalPattern:[e.endIntervalPattern,[]]})}validatorTriggers(){return["fetchMode","useMetadataIntervalPatterns"]}toggleChange(e){this.getTelemetryFromDatabaseConfigForm.get("fetchMode").patchValue(e,{emitEvent:!0})}prepareOutputConfig(e){return e.startInterval=e.interval.startInterval,e.startIntervalTimeUnit=e.interval.startIntervalTimeUnit,e.endInterval=e.interval.endInterval,e.endIntervalTimeUnit=e.interval.endIntervalTimeUnit,delete e.interval,_(e)}prepareInputConfig(e){return j(e)&&(e.interval={startInterval:e.startInterval,startIntervalTimeUnit:e.startIntervalTimeUnit,endInterval:e.endInterval,endIntervalTimeUnit:e.endIntervalTimeUnit}),{latestTsKeyNames:P(e?.latestTsKeyNames)?e.latestTsKeyNames:null,aggregation:P(e?.aggregation)?e.aggregation:T.NONE,fetchMode:P(e?.fetchMode)?e.fetchMode:St.FIRST,orderBy:P(e?.orderBy)?e.orderBy:Et.ASC,limit:P(e?.limit)?e.limit:1e3,useMetadataIntervalPatterns:!!P(e?.useMetadataIntervalPatterns)&&e.useMetadataIntervalPatterns,interval:{startInterval:P(e?.interval?.startInterval)?e.interval.startInterval:2,startIntervalTimeUnit:P(e?.interval?.startIntervalTimeUnit)?e.interval.startIntervalTimeUnit:ht.MINUTES,endInterval:P(e?.interval?.endInterval)?e.interval.endInterval:1,endIntervalTimeUnit:P(e?.interval?.endIntervalTimeUnit)?e.interval.endIntervalTimeUnit:ht.MINUTES},startIntervalPattern:P(e?.startIntervalPattern)?e.startIntervalPattern:null,endIntervalPattern:P(e?.endIntervalPattern)?e.endIntervalPattern:null}}updateValidators(e){const t=this.getTelemetryFromDatabaseConfigForm.get("fetchMode").value,n=this.getTelemetryFromDatabaseConfigForm.get("useMetadataIntervalPatterns").value;t&&t===St.ALL?(this.getTelemetryFromDatabaseConfigForm.get("aggregation").setValidators([N.required]),this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([N.required]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([N.required,N.min(2),N.max(1e3)])):(this.getTelemetryFromDatabaseConfigForm.get("aggregation").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([])),n?(this.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("interval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([N.required,N.pattern(/(?:.|\s)*\S(&:.|\s)*/)])):(this.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").setValidators([N.required,N.min(1),N.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").setValidators([N.required]),this.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").setValidators([N.required,N.min(1),N.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").setValidators([N.required]),this.getTelemetryFromDatabaseConfigForm.get("interval").setValidators([this.intervalValidator()]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([])),this.getTelemetryFromDatabaseConfigForm.get("aggregation").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("orderBy").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("limit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.startInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.startIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.endInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval.endIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("interval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").updateValueAndValidity({emitEvent:e})}removeKey(e,t){const n=this.getTelemetryFromDatabaseConfigForm.get(t).value,r=n.indexOf(e);r>=0&&(n.splice(r,1),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(n,{emitEvent:!0}))}clearChipGrid(){this.getTelemetryFromDatabaseConfigForm.get("latestTsKeyNames").patchValue([],{emitEvent:!0})}addKey(e,t){const n=e.input;let r=e.value;if((r||"").trim()){r=r.trim();let e=this.getTelemetryFromDatabaseConfigForm.get(t).value;e&&-1!==e.indexOf(r)||(e||(e=[]),e.push(r),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(e,{emitEvent:!0}))}n&&(n.value="")}defaultPaddingEnable(){return this.getTelemetryFromDatabaseConfigForm.get("fetchMode").value===St.ALL&&this.getTelemetryFromDatabaseConfigForm.get("aggregation").value===T.NONE}static{this.ɵfac=function(e){return new(e||ao)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ao,selectors:[["tb-enrichment-node-get-telemetry-from-database"]],features:[t.ɵɵInheritDefinitionFeature],decls:34,vars:40,consts:[["intervalPattern",""],["invalidText",""],[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],["editable","","subscriptSizing","dynamic","required","","formControlName","latestTsKeyNames",1,"mat-block",3,"placeholder","requiredText","label","hint"],["matHintEnd","","hintMode","","tb-help-popup-placement","right","trigger-style","letter-spacing:0.25px; font-size:12px",1,"see-example",3,"tb-help-popup","tb-help-popup-style","trigger-text"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],[1,"tb-form-panel","stroked"],["translate","",1,"tb-form-panel-title"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","useMetadataIntervalPatterns",1,"mat-slide"],["formGroupName","interval","class","flex flex-col",4,"ngIf","ngIfElse"],[1,"tb-form-panel","no-border","no-padding","item-center"],[1,"fetch-mod-toggle"],["formControlName","fetchMode","appearance","fill"],[3,"value",4,"ngFor","ngForOf"],[1,"tb-form-hint","tb-primary-fill","hint-container"],[4,"ngIf"],["formGroupName","interval",1,"flex","flex-col"],[1,"flex","flex-col","gap-0","gt-sm:flex-row","gt-sm:gap-4"],[1,"mat-block","gt-sm:max-w-50%","gt-sm:flex-full"],["type","number","step","1","min","1","max","2147483647","matInput","","formControlName","startInterval","required",""],["hideRequiredMarker","",1,"mat-block","gt-sm:max-w-50%","gt-sm:flex-full"],["formControlName","startIntervalTimeUnit","required",""],["type","number","step","1","min","1","max","2147483647","matInput","","formControlName","endInterval","required",""],["formControlName","endIntervalTimeUnit","required",""],[1,"description-block","tb-primary-fill"],[1,"description-icon"],[1,"description-text"],[4,"ngIf","ngIfElse"],[3,"value"],[1,"input-block","flex","flex-col"],[1,"mat-block","flex-1"],["matInput","","formControlName","startIntervalPattern","required",""],["matInput","","formControlName","endIntervalPattern","required",""],["popupHelpLink","rulenode/originator_telemetry_node_fields_templatization",3,"hintText"],["hideRequiredMarker","",1,"mat-block",3,"subscriptSizing"],["formControlName","aggregation","required",""],["hideRequiredMarker","",1,"mat-block"],["formControlName","orderBy","required",""],[1,"mat-block"],["type","number","min","2","max","1000","step","1","matInput","","formControlName","limit","required",""]],template:function(e,n){if(1&e&&(t.ɵɵelementStart(0,"section",2)(1,"tb-string-items-list",3),t.ɵɵpipe(2,"translate"),t.ɵɵpipe(3,"translate"),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵelement(6,"div",4),t.ɵɵpipe(7,"translate"),t.ɵɵelementStart(8,"mat-icon",5),t.ɵɵpipe(9,"translate"),t.ɵɵpipe(10,"translate"),t.ɵɵtext(11,"help "),t.ɵɵelementEnd()(),t.ɵɵelementStart(12,"div",6)(13,"div",7),t.ɵɵtext(14,"tb.rulenode.fetch-interval"),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"div",8),t.ɵɵpipe(16,"translate"),t.ɵɵelementStart(17,"mat-slide-toggle",9),t.ɵɵtext(18),t.ɵɵpipe(19,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(20,zi,38,24,"div",10)(21,Ji,15,11,"ng-template",null,0,t.ɵɵtemplateRefExtractor),t.ɵɵelementEnd(),t.ɵɵelementStart(23,"div",6)(24,"div",7),t.ɵɵtext(25,"tb.rulenode.fetch-strategy"),t.ɵɵelementEnd(),t.ɵɵelementStart(26,"div",11)(27,"div",12)(28,"tb-toggle-select",13),t.ɵɵtemplate(29,Yi,2,2,"tb-toggle-option",14),t.ɵɵelementEnd()(),t.ɵɵelementStart(30,"div",15),t.ɵɵtext(31),t.ɵɵpipe(32,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(33,ro,8,6,"div",16),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵreference(22);t.ɵɵproperty("formGroup",n.getTelemetryFromDatabaseConfigForm),t.ɵɵadvance(),t.ɵɵproperty("placeholder",t.ɵɵpipeBind1(2,16,"tb.rulenode.add-timeseries-key"))("requiredText",t.ɵɵpipeBind1(3,18,"tb.rulenode.timeseries-keys-required"))("label",t.ɵɵpipeBind1(4,20,"tb.rulenode.timeseries-keys"))("hint",t.ɵɵpipeBind1(5,22,"tb.rulenode.general-pattern-hint")),t.ɵɵadvance(5),t.ɵɵpropertyInterpolate("tb-help-popup","rulenode/originator_telemetry_node_fields_templatization"),t.ɵɵpropertyInterpolate("trigger-text",t.ɵɵpipeBind1(7,24,"tb.key-val.see-examples")),t.ɵɵproperty("tb-help-popup-style",t.ɵɵpureFunction0(37,Vi)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(10,28,"tb.rulenode.chip-help",t.ɵɵpureFunction1(38,Bi,t.ɵɵpipeBind1(9,26,"tb.rulenode.timeseries-key")))),t.ɵɵadvance(7),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(16,31,"tb.rulenode.use-metadata-dynamic-interval-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(19,33,"tb.rulenode.use-metadata-dynamic-interval")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!1===n.getTelemetryFromDatabaseConfigForm.get("useMetadataIntervalPatterns").value)("ngIfElse",e),t.ɵɵadvance(9),t.ɵɵproperty("ngForOf",n.headerOptions),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(32,35,n.deduplicationStrategiesHintTranslations.get(n.getTelemetryFromDatabaseConfigForm.get("fetchMode").value))," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.getTelemetryFromDatabaseConfigForm.get("fetchMode").value===n.fetchMode.ALL)}},dependencies:t.ɵɵgetComponentDepsFactory(ao),styles:["[_nghost-%COMP%]   .see-example[_ngcontent-%COMP%]{display:inline-block}[_nghost-%COMP%]   .description-block[_ngcontent-%COMP%]{display:flex;align-items:center;border-radius:6px;border:1px solid #EAEAEA}[_nghost-%COMP%]   .description-block[_ngcontent-%COMP%]   .description-icon[_ngcontent-%COMP%]{font-size:24px;height:24px;min-height:24px;width:24px;min-width:24px;line-height:24px;color:#d9d9d9;margin:4px}[_nghost-%COMP%]   .description-block[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%]{font-size:12px;line-height:16px;letter-spacing:.25px;margin:6px}[_nghost-%COMP%]   .description-block.error[_ngcontent-%COMP%]{color:var(--mdc-theme-error, #f44336)}[_nghost-%COMP%]   .description-block.error[_ngcontent-%COMP%]   .description-icon[_ngcontent-%COMP%]{color:var(--mdc-theme-error, #f44336)}[_nghost-%COMP%]   .item-center[_ngcontent-%COMP%]{align-items:center}[_nghost-%COMP%]   .item-center[_ngcontent-%COMP%]   .fetch-mod-toggle[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .hint-container[_ngcontent-%COMP%]{width:100%}"]})}}e("GetTelemetryFromDatabaseConfigComponent",ao);class io extends i{constructor(e,t,n){super(e),this.store=e,this.translate=t,this.fb=n}configForm(){return this.originatorAttributesConfigForm}onConfigurationSet(e){this.originatorAttributesConfigForm=this.fb.group({tellFailureIfAbsent:[e.tellFailureIfAbsent,[]],fetchTo:[e.fetchTo,[]],attributesControl:[e.attributesControl,[]]})}prepareInputConfig(e){return j(e)&&(e.attributesControl={clientAttributeNames:P(e?.clientAttributeNames)?e.clientAttributeNames:[],latestTsKeyNames:P(e?.latestTsKeyNames)?e.latestTsKeyNames:[],serverAttributeNames:P(e?.serverAttributeNames)?e.serverAttributeNames:[],sharedAttributeNames:P(e?.sharedAttributeNames)?e.sharedAttributeNames:[],getLatestValueWithTs:!!P(e?.getLatestValueWithTs)&&e.getLatestValueWithTs}),{fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA,tellFailureIfAbsent:!!P(e?.tellFailureIfAbsent)&&e.tellFailureIfAbsent,attributesControl:P(e?.attributesControl)?e.attributesControl:null}}prepareOutputConfig(e){for(const t of Object.keys(e.attributesControl))e[t]=e.attributesControl[t];return delete e.attributesControl,e}static{this.ɵfac=function(e){return new(e||io)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(K.TranslateService),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:io,selectors:[["tb-enrichment-node-originator-attributes-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:15,vars:11,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-padding","no-border","space-between"],["translate","",1,"tb-form-panel-title","tb-required"],["translate","",1,"tb-form-panel-hint","tb-error",3,"hidden"],["formControlName","attributesControl","popupHelpLink","rulenode/originator_attributes_node_fields_templatization"],["formControlName","fetchTo",3,"labelText"],[1,"tb-form-row","same-padding",3,"tb-hint-tooltip-icon"],["formControlName","tellFailureIfAbsent",1,"mat-slide","margin"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2)(3,"div",3),t.ɵɵtext(4,"tb.rulenode.originator-attributes"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"div",4),t.ɵɵtext(6," tb.rulenode.at-least-one-field-required "),t.ɵɵelementEnd()(),t.ɵɵelement(7,"tb-select-attributes",5)(8,"tb-msg-metadata-chip",6),t.ɵɵpipe(9,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(10,"div",7),t.ɵɵpipe(11,"translate"),t.ɵɵelementStart(12,"mat-slide-toggle",8),t.ɵɵtext(13),t.ɵɵpipe(14,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.originatorAttributesConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("hidden",!(n.originatorAttributesConfigForm.get("attributesControl").touched&&n.originatorAttributesConfigForm.get("attributesControl").hasError("atLeastOneRequired"))),t.ɵɵadvance(3),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(9,5,"tb.rulenode.add-originator-attributes-to")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(11,7,"tb.rulenode.tell-failure-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(14,9,"tb.rulenode.tell-failure")," "))},dependencies:t.ɵɵgetComponentDepsFactory(io),encapsulation:2})}}e("OriginatorAttributesConfigComponent",io);class oo extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.originatorFields=[];for(const e of ut)this.originatorFields.push({value:e.value,name:this.translate.instant(e.name)})}configForm(){return this.originatorFieldsConfigForm}prepareOutputConfig(e){return _(e)}prepareInputConfig(e){return{dataMapping:P(e?.dataMapping)?e.dataMapping:null,ignoreNullStrings:P(e?.ignoreNullStrings)?e.ignoreNullStrings:null,fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA}}onConfigurationSet(e){this.originatorFieldsConfigForm=this.fb.group({dataMapping:[e.dataMapping,[N.required]],ignoreNullStrings:[e.ignoreNullStrings,[]],fetchTo:[e.fetchTo,[]]})}static{this.ɵfac=function(e){return new(e||oo)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:oo,selectors:[["tb-enrichment-node-originator-fields-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:16,vars:32,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],["required","","targetKeyPrefix","originator","formControlName","dataMapping","popupHelpLink","rulenode/originator_fields_node_fields_templatization",3,"selectOptions","requiredText","labelText","selectText","selectRequiredText","valText","valRequiredText","hintText"],["formControlName","fetchTo",3,"labelText"],[1,"tb-form-row","same-padding",3,"tb-hint-tooltip-icon"],["formControlName","ignoreNullStrings",1,"mat-slide","margin"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-sv-map-config",1),t.ɵɵpipe(2,"translate"),t.ɵɵpipe(3,"translate"),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵpipe(6,"translate"),t.ɵɵpipe(7,"translate"),t.ɵɵpipe(8,"translate"),t.ɵɵelement(9,"tb-msg-metadata-chip",2),t.ɵɵpipe(10,"translate"),t.ɵɵelementStart(11,"div",3),t.ɵɵpipe(12,"translate"),t.ɵɵelementStart(13,"mat-slide-toggle",4),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.originatorFieldsConfigForm),t.ɵɵadvance(),t.ɵɵproperty("selectOptions",n.originatorFields)("requiredText",t.ɵɵpipeBind1(2,12,"tb.rulenode.attr-mapping-required"))("labelText",t.ɵɵpipeBind1(3,14,"tb.rulenode.originator-fields-mapping"))("selectText",t.ɵɵpipeBind1(4,16,"tb.rulenode.source-field"))("selectRequiredText",t.ɵɵpipeBind1(5,18,"tb.rulenode.source-field-required"))("valText",t.ɵɵpipeBind1(6,20,"tb.rulenode.target-key"))("valRequiredText",t.ɵɵpipeBind1(7,22,"tb.rulenode.target-key-required"))("hintText",t.ɵɵpipeBind1(8,24,"tb.rulenode.originator-fields-sv-map-hint")),t.ɵɵadvance(8),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(10,26,"tb.rulenode.add-mapped-originator-fields-to")),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(12,28,"tb.rulenode.skip-empty-fields-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(15,30,"tb.rulenode.skip-empty-fields")," "))},dependencies:t.ɵɵgetComponentDepsFactory(oo),encapsulation:2})}}function lo(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",9),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}e("OriginatorFieldsConfigComponent",oo);class so extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.DataToFetch=Ft,this.msgMetadataLabelTranslations=At,this.originatorFields=[],this.fetchToData=[];for(const e of Object.keys(ut))this.originatorFields.push({value:ut[e].value,name:this.translate.instant(ut[e].name)});for(const e of qt.keys())this.fetchToData.push({value:e,name:this.translate.instant(qt.get(e))})}configForm(){return this.relatedAttributesConfigForm}prepareOutputConfig(e){e.dataToFetch===Ft.FIELDS?(e.dataMapping=e.svMap,delete e.svMap):(e.dataMapping=e.kvMap,delete e.kvMap);const t={};if(e&&e.dataMapping)for(const n of Object.keys(e.dataMapping))t[n.trim()]=e.dataMapping[n];return e.dataMapping=t,delete e.svMap,delete e.kvMap,_(e)}prepareInputConfig(e){let t,n,r={[c.name.value]:`relatedEntity${this.translate.instant(c.name.name)}`},a={serialNumber:"sn"};return t=P(e?.telemetry)?e.telemetry?Ft.LATEST_TELEMETRY:Ft.ATTRIBUTES:P(e?.dataToFetch)?e.dataToFetch:Ft.ATTRIBUTES,n=P(e?.attrMapping)?e.attrMapping:P(e?.dataMapping)?e.dataMapping:null,t===Ft.FIELDS?r=n:a=n,{relationsQuery:P(e?.relationsQuery)?e.relationsQuery:null,dataToFetch:t,svMap:r,kvMap:a,fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA}}selectTranslation(e,t){return this.relatedAttributesConfigForm.get("dataToFetch").value===Ft.LATEST_TELEMETRY?e:t}onConfigurationSet(e){this.relatedAttributesConfigForm=this.fb.group({relationsQuery:[e.relationsQuery,[N.required]],dataToFetch:[e.dataToFetch,[]],kvMap:[e.kvMap,[N.required]],svMap:[e.svMap,[N.required]],fetchTo:[e.fetchTo,[]]})}validatorTriggers(){return["dataToFetch"]}updateValidators(e){this.relatedAttributesConfigForm.get("dataToFetch").value===Ft.FIELDS?(this.relatedAttributesConfigForm.get("svMap").enable({emitEvent:!1}),this.relatedAttributesConfigForm.get("kvMap").disable({emitEvent:!1}),this.relatedAttributesConfigForm.get("svMap").updateValueAndValidity()):(this.relatedAttributesConfigForm.get("svMap").disable({emitEvent:!1}),this.relatedAttributesConfigForm.get("kvMap").enable({emitEvent:!1}),this.relatedAttributesConfigForm.get("kvMap").updateValueAndValidity())}static{this.ɵfac=function(e){return new(e||so)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:so,selectors:[["tb-enrichment-node-related-attributes-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:24,vars:48,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],["required","","formControlName","relationsQuery"],[1,"tb-form-panel","stroked"],["translate","",1,"tb-form-panel-title"],["formControlName","dataToFetch","appearance","fill"],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","kvMap","popupHelpLink","rulenode/related_entity_data_node_fields_templatization",3,"hidden","requiredText","labelText","keyText","keyRequiredText","valText","valRequiredText","hintText"],["required","","targetKeyPrefix","relatedEntity","formControlName","svMap","popupHelpLink","rulenode/related_entity_data_node_fields_templatization",3,"hidden","labelText","selectOptions","requiredText","selectText","selectRequiredText","valText","valRequiredText","hintText"],["formControlName","fetchTo",3,"labelText"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-relations-query-config",1),t.ɵɵelementStart(2,"div",2)(3,"div",3),t.ɵɵtext(4,"tb.rulenode.data-to-fetch"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"tb-toggle-select",4),t.ɵɵtemplate(6,lo,2,2,"tb-toggle-option",5),t.ɵɵelementEnd(),t.ɵɵelement(7,"tb-kv-map-config",6),t.ɵɵpipe(8,"translate"),t.ɵɵpipe(9,"translate"),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"translate"),t.ɵɵpipe(12,"translate"),t.ɵɵpipe(13,"translate"),t.ɵɵelement(14,"tb-sv-map-config",7),t.ɵɵpipe(15,"translate"),t.ɵɵpipe(16,"translate"),t.ɵɵpipe(17,"translate"),t.ɵɵpipe(18,"translate"),t.ɵɵpipe(19,"translate"),t.ɵɵpipe(20,"translate"),t.ɵɵpipe(21,"translate"),t.ɵɵelement(22,"tb-msg-metadata-chip",8),t.ɵɵpipe(23,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.relatedAttributesConfigForm),t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",n.fetchToData),t.ɵɵadvance(),t.ɵɵproperty("hidden",n.relatedAttributesConfigForm.get("dataToFetch").value===n.DataToFetch.FIELDS)("requiredText",t.ɵɵpipeBind1(8,20,"tb.rulenode.attr-mapping-required"))("labelText",t.ɵɵpipeBind1(9,22,n.selectTranslation("tb.rulenode.latest-telemetry-mapping","tb.rulenode.attributes-mapping")))("keyText",t.ɵɵpipeBind1(10,24,n.selectTranslation("tb.rulenode.source-telemetry","tb.rulenode.source-attribute")))("keyRequiredText",t.ɵɵpipeBind1(11,26,n.selectTranslation("tb.rulenode.source-telemetry-required","tb.rulenode.source-attribute-required")))("valText",t.ɵɵpipeBind1(12,28,"tb.rulenode.target-key"))("valRequiredText",t.ɵɵpipeBind1(13,30,"tb.rulenode.target-key-required"))("hintText","tb.rulenode.kv-map-pattern-hint"),t.ɵɵadvance(7),t.ɵɵproperty("hidden",n.relatedAttributesConfigForm.get("dataToFetch").value!==n.DataToFetch.FIELDS)("labelText",t.ɵɵpipeBind1(15,32,"tb.rulenode.fields-mapping"))("selectOptions",n.originatorFields)("requiredText",t.ɵɵpipeBind1(16,34,"tb.rulenode.attr-mapping-required"))("selectText",t.ɵɵpipeBind1(17,36,"tb.rulenode.source-field"))("selectRequiredText",t.ɵɵpipeBind1(18,38,"tb.rulenode.source-field-required"))("valText",t.ɵɵpipeBind1(19,40,"tb.rulenode.target-key"))("valRequiredText",t.ɵɵpipeBind1(20,42,"tb.rulenode.target-key-required"))("hintText",t.ɵɵpipeBind1(21,44,"tb.rulenode.sv-map-hint")),t.ɵɵadvance(8),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(23,46,n.msgMetadataLabelTranslations.get(n.relatedAttributesConfigForm.get("dataToFetch").value))))},dependencies:t.ɵɵgetComponentDepsFactory(so),encapsulation:2})}}function po(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",8),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}e("RelatedAttributesConfigComponent",so);class mo extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.fetchToData=[],this.DataToFetch=Ft;for(const e of qt.keys())e!==Ft.FIELDS&&this.fetchToData.push({value:e,name:this.translate.instant(qt.get(e))})}configForm(){return this.tenantAttributesConfigForm}prepareInputConfig(e){let t,n;return t=P(e?.telemetry)?e.telemetry?Ft.LATEST_TELEMETRY:Ft.ATTRIBUTES:P(e?.dataToFetch)?e.dataToFetch:Ft.ATTRIBUTES,n=P(e?.attrMapping)?e.attrMapping:P(e?.dataMapping)?e.dataMapping:null,{dataToFetch:t,dataMapping:n,fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA}}selectTranslation(e,t){return this.tenantAttributesConfigForm.get("dataToFetch").value===Ft.LATEST_TELEMETRY?e:t}onConfigurationSet(e){this.tenantAttributesConfigForm=this.fb.group({dataToFetch:[e.dataToFetch,[]],dataMapping:[e.dataMapping,[N.required]],fetchTo:[e.fetchTo,[]]})}static{this.ɵfac=function(e){return new(e||mo)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:mo,selectors:[["tb-enrichment-node-tenant-attributes-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:17,vars:26,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-1","items-center","justify-center"],[1,"fetch-to-data-toggle"],["formControlName","dataToFetch","appearance","fill",1,"fetch-to-data-toggle"],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","dataMapping","popupHelpLink","rulenode/tenant_attributes_node_fields_templatization",3,"requiredText","labelText","keyText","keyRequiredText","valText","valRequiredText","hintText"],["formControlName","fetchTo",3,"labelText"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.mapping-of-tenant"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"div",2)(4,"div",3)(5,"tb-toggle-select",4),t.ɵɵtemplate(6,po,2,2,"tb-toggle-option",5),t.ɵɵelementEnd()()(),t.ɵɵelement(7,"tb-kv-map-config",6),t.ɵɵpipe(8,"translate"),t.ɵɵpipe(9,"translate"),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"translate"),t.ɵɵpipe(12,"translate"),t.ɵɵpipe(13,"translate"),t.ɵɵelement(14,"tb-msg-metadata-chip",7),t.ɵɵpipe(15,"translate"),t.ɵɵpipe(16,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.tenantAttributesConfigForm),t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",n.fetchToData),t.ɵɵadvance(),t.ɵɵproperty("requiredText",t.ɵɵpipeBind1(8,10,"tb.rulenode.attr-mapping-required"))("labelText",t.ɵɵpipeBind1(9,12,n.selectTranslation("tb.rulenode.latest-telemetry-mapping","tb.rulenode.attributes-mapping")))("keyText",t.ɵɵpipeBind1(10,14,n.selectTranslation("tb.rulenode.source-telemetry","tb.rulenode.source-attribute")))("keyRequiredText",t.ɵɵpipeBind1(11,16,n.selectTranslation("tb.rulenode.source-telemetry-required","tb.rulenode.source-attribute-required")))("valText",t.ɵɵpipeBind1(12,18,"tb.rulenode.target-key"))("valRequiredText",t.ɵɵpipeBind1(13,20,"tb.rulenode.target-key-required"))("hintText","tb.rulenode.kv-map-pattern-hint"),t.ɵɵadvance(7),t.ɵɵproperty("labelText",n.tenantAttributesConfigForm.get("dataToFetch").value===n.DataToFetch.LATEST_TELEMETRY?t.ɵɵpipeBind1(15,22,"tb.rulenode.add-mapped-latest-telemetry-to"):t.ɵɵpipeBind1(16,24,"tb.rulenode.add-mapped-attribute-to")))},dependencies:t.ɵɵgetComponentDepsFactory(mo),styles:["[_nghost-%COMP%]   .fetch-to-data-toggle[_ngcontent-%COMP%]{max-width:420px;width:100%}"]})}}e("TenantAttributesConfigComponent",mo);class uo extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.fetchDeviceCredentialsConfigForm}prepareInputConfig(e){return{fetchTo:P(e?.fetchTo)?e.fetchTo:Kt.METADATA}}onConfigurationSet(e){this.fetchDeviceCredentialsConfigForm=this.fb.group({fetchTo:[e.fetchTo,[]]})}static{this.ɵfac=function(e){return new(e||uo)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:uo,selectors:[["tb-enrichment-node-fetch-device-credentials-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:3,vars:4,consts:[[3,"formGroup"],["formControlName","fetchTo",3,"labelText"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-msg-metadata-chip",1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.fetchDeviceCredentialsConfigForm),t.ɵɵadvance(),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(2,2,"tb.rulenode.fetch-credentials-to")))},dependencies:t.ɵɵgetComponentDepsFactory(uo),encapsulation:2})}}e("FetchDeviceCredentialsConfigComponent",uo);class co{static{this.ɵfac=function(e){return new(e||co)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:co})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,fi,ki,Mi,Ni,io,oo,ao,so,mo,qi,uo]})}}function go(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.topic-required")," "))}function fo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.hostname-required")," "))}function ho(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.device-id-required")," "))}function yo(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",17),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.azureIotHubCredentialsTypeTranslationsMap.get(e))," ")}}function bo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.credentials-type-required")," "))}function vo(e,t){}function xo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.sas-key-required")," "))}function Co(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"mat-form-field",5)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.sas-key"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",18)(4,"tb-toggle-password",19),t.ɵɵtemplate(5,xo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"tb-file-input",20),t.ɵɵpipe(7,"translate"),t.ɵɵpipe(8,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext();return t.ɵɵresetView(r.azureIotHubConfigForm.get("credentials.caCertFileName").setValue(n))})),t.ɵɵelementEnd()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.azureIotHubConfigForm.get("credentials.sasKey").hasError("required")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(7,4,"tb.rulenode.azure-ca-cert")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(8,6,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.azureIotHubConfigForm.get("credentials.caCertFileName").value)}}function So(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-file-input",20),t.ɵɵpipe(1,"translate"),t.ɵɵpipe(2,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext();return t.ɵɵresetView(r.azureIotHubConfigForm.get("credentials.caCertFileName").setValue(n))})),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"tb-file-input",21),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext();return t.ɵɵresetView(r.azureIotHubConfigForm.get("credentials.certFileName").setValue(n))})),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"tb-file-input",22),t.ɵɵpipe(7,"translate"),t.ɵɵpipe(8,"translate"),t.ɵɵlistener("fileNameChanged",(function(n){t.ɵɵrestoreView(e);const r=t.ɵɵnextContext();return t.ɵɵresetView(r.azureIotHubConfigForm.get("credentials.privateKeyFileName").setValue(n))})),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-form-field",5)(10,"mat-label",2),t.ɵɵtext(11,"tb.rulenode.private-key-password"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",23)(13,"tb-toggle-password",19),t.ɵɵelementEnd()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(1,9,"tb.rulenode.azure-ca-cert")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(2,11,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.azureIotHubConfigForm.get("credentials.caCertFileName").value),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(4,13,"tb.rulenode.cert")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(5,15,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.azureIotHubConfigForm.get("credentials.certFileName").value),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(7,17,"tb.rulenode.private-key")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(8,19,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",e.azureIotHubConfigForm.get("credentials.privateKeyFileName").value)}}e("RulenodeCoreConfigEnrichmentModule",co),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(co,{declarations:[ki,Mi,Ni,io,oo,ao,so,mo,qi,uo],imports:[$,S,fi],exports:[ki,Mi,Ni,io,oo,ao,so,mo,qi,uo]});class To extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.allAzureIotHubCredentialsTypes=Bt,this.azureIotHubCredentialsTypeTranslationsMap=Ot}configForm(){return this.azureIotHubConfigForm}onConfigurationSet(e){this.azureIotHubConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[N.required]],host:[e?e.host:null,[N.required]],port:[e?e.port:null,[N.required,N.min(1),N.max(65535)]],connectTimeoutSec:[e?e.connectTimeoutSec:null,[N.required,N.min(1),N.max(200)]],clientId:[e?e.clientId:null,[N.required]],cleanSession:[!!e&&e.cleanSession,[]],ssl:[!!e&&e.ssl,[]],credentials:this.fb.group({type:[e&&e.credentials?e.credentials.type:null,[N.required]],sasKey:[e&&e.credentials?e.credentials.sasKey:null,[]],caCert:[e&&e.credentials?e.credentials.caCert:null,[]],caCertFileName:[e&&e.credentials?e.credentials.caCertFileName:null,[]],privateKey:[e&&e.credentials?e.credentials.privateKey:null,[]],privateKeyFileName:[e&&e.credentials?e.credentials.privateKeyFileName:null,[]],cert:[e&&e.credentials?e.credentials.cert:null,[]],certFileName:[e&&e.credentials?e.credentials.certFileName:null,[]],password:[e&&e.credentials?e.credentials.password:null,[]]})})}prepareOutputConfig(e){const t=e.credentials.type;return"sas"===t&&(e.credentials={type:t,sasKey:e.credentials.sasKey,caCert:e.credentials.caCert,caCertFileName:e.credentials.caCertFileName}),e}validatorTriggers(){return["credentials.type"]}updateValidators(e){const t=this.azureIotHubConfigForm.get("credentials"),n=t.get("type").value;switch(e&&t.reset({type:n},{emitEvent:!1}),t.get("sasKey").setValidators([]),t.get("privateKey").setValidators([]),t.get("privateKeyFileName").setValidators([]),t.get("cert").setValidators([]),t.get("certFileName").setValidators([]),n){case"sas":t.get("sasKey").setValidators([N.required]);break;case"cert.PEM":t.get("privateKey").setValidators([N.required]),t.get("privateKeyFileName").setValidators([N.required]),t.get("cert").setValidators([N.required]),t.get("certFileName").setValidators([N.required])}t.get("sasKey").updateValueAndValidity({emitEvent:e}),t.get("privateKey").updateValueAndValidity({emitEvent:e}),t.get("privateKeyFileName").updateValueAndValidity({emitEvent:e}),t.get("cert").updateValueAndValidity({emitEvent:e}),t.get("certFileName").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||To)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:To,selectors:[["tb-external-node-azure-iot-hub-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:37,vars:10,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","topicPattern"],[4,"ngIf"],[1,"mat-block"],["required","","matInput","","formControlName","host"],["required","","matInput","","formControlName","clientId","autocomplete","new-clientId"],[1,"tb-mqtt-credentials-panel-group"],["translate","",1,"tb-required"],["formGroupName","credentials",1,"flex","flex-col"],["formControlName","type","required",""],[3,"value",4,"ngFor","ngForOf"],[1,"flex","flex-col",3,"ngSwitch"],["ngSwitchCase","anonymous"],["ngSwitchCase","sas"],["ngSwitchCase","cert.PEM"],[3,"value"],["type","password","required","","matInput","","formControlName","sasKey","autocomplete","new-password"],["matSuffix",""],["formControlName","caCert","inputId","caCertSelect","noFileText","tb.rulenode.no-file",3,"fileNameChanged","existingFileName","label","dropLabel"],["formControlName","cert","inputId","CertSelect","required","","requiredAsError","","noFileText","tb.rulenode.no-file",3,"fileNameChanged","existingFileName","label","dropLabel"],["formControlName","privateKey","inputId","privateKeySelect","required","","requiredAsError","","noFileText","tb.rulenode.no-file",2,"padding-bottom","8px",3,"fileNameChanged","existingFileName","label","dropLabel"],["type","password","matInput","","formControlName","password","autocomplete","new-password"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.topic"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,go,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-form-field",5)(9,"mat-label",2),t.ɵɵtext(10,"tb.rulenode.hostname"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",6),t.ɵɵtemplate(12,fo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(13,"mat-form-field",5)(14,"mat-label",2),t.ɵɵtext(15,"tb.rulenode.device-id"),t.ɵɵelementEnd(),t.ɵɵelement(16,"input",7),t.ɵɵtemplate(17,ho,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(18,"mat-accordion")(19,"mat-expansion-panel",8)(20,"mat-expansion-panel-header")(21,"mat-panel-title",9),t.ɵɵtext(22,"tb.rulenode.credentials"),t.ɵɵelementEnd(),t.ɵɵelementStart(23,"mat-panel-description"),t.ɵɵtext(24),t.ɵɵpipe(25,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(26,"section",10)(27,"mat-form-field",5)(28,"mat-label",2),t.ɵɵtext(29,"tb.rulenode.credentials-type"),t.ɵɵelementEnd(),t.ɵɵelementStart(30,"mat-select",11),t.ɵɵtemplate(31,yo,3,4,"mat-option",12),t.ɵɵelementEnd(),t.ɵɵtemplate(32,bo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(33,"section",13),t.ɵɵtemplate(34,vo,0,0,"ng-template",14)(35,Co,9,8,"ng-template",15)(36,So,14,21,"ng-template",16),t.ɵɵelementEnd()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.azureIotHubConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.azureIotHubConfigForm.get("topicPattern").hasError("required")),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.azureIotHubConfigForm.get("host").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.azureIotHubConfigForm.get("clientId").hasError("required")),t.ɵɵadvance(7),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(25,8,n.azureIotHubCredentialsTypeTranslationsMap.get(n.azureIotHubConfigForm.get("credentials.type").value))," "),t.ɵɵadvance(7),t.ɵɵproperty("ngForOf",n.allAzureIotHubCredentialsTypes),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.azureIotHubConfigForm.get("credentials.type").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngSwitch",n.azureIotHubConfigForm.get("credentials.type").value))},dependencies:t.ɵɵgetComponentDepsFactory(To),styles:["[_nghost-%COMP%]   .tb-mqtt-credentials-panel-group[_ngcontent-%COMP%]{margin:0 6px}"]})}}function Io(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.topic-pattern-required")," "))}function Eo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.bootstrap-servers-required")," "))}function Fo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-retries-message")," "))}function qo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-batch-size-bytes-message")," "))}function Ao(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-linger-ms-message")," "))}function ko(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-buffer-memory-bytes-message")," "))}function No(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",21),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function wo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.key-serializer-required")," "))}function Mo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.value-serializer-required")," "))}function Vo(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",21),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.ToByteStandartCharsetTypeTranslationMap.get(e))," ")}}function Bo(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",22)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.charset-encoding"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-select",23),t.ɵɵtemplate(4,Vo,3,4,"mat-option",14),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngForOf",e.ToByteStandartCharsetTypesValues)}}e("AzureIotHubConfigComponent",To);class Oo extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.ackValues=["all","-1","0","1"],this.ToByteStandartCharsetTypesValues=Lt,this.ToByteStandartCharsetTypeTranslationMap=Pt}configForm(){return this.kafkaConfigForm}onConfigurationSet(e){this.kafkaConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[N.required]],keyPattern:[e?e.keyPattern:null],bootstrapServers:[e?e.bootstrapServers:null,[N.required]],retries:[e?e.retries:null,[N.min(0)]],batchSize:[e?e.batchSize:null,[N.min(0)]],linger:[e?e.linger:null,[N.min(0)]],bufferMemory:[e?e.bufferMemory:null,[N.min(0)]],acks:[e?e.acks:null,[N.required]],keySerializer:[e?e.keySerializer:null,[N.required]],valueSerializer:[e?e.valueSerializer:null,[N.required]],otherProperties:[e?e.otherProperties:null,[]],addMetadataKeyValuesAsKafkaHeaders:[!!e&&e.addMetadataKeyValuesAsKafkaHeaders,[]],kafkaHeadersCharset:[e?e.kafkaHeadersCharset:null,[]]})}validatorTriggers(){return["addMetadataKeyValuesAsKafkaHeaders"]}updateValidators(e){this.kafkaConfigForm.get("addMetadataKeyValuesAsKafkaHeaders").value?this.kafkaConfigForm.get("kafkaHeadersCharset").setValidators([N.required]):this.kafkaConfigForm.get("kafkaHeadersCharset").setValidators([]),this.kafkaConfigForm.get("kafkaHeadersCharset").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||Oo)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Oo,selectors:[["tb-external-node-kafka-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:65,vars:14,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","topicPattern"],[4,"ngIf"],["matInput","","formControlName","keyPattern"],["translate","",1,"tb-hint"],[1,"mat-block"],["required","","matInput","","formControlName","bootstrapServers"],["type","number","step","1","min","0","matInput","","formControlName","retries"],["type","number","step","1","min","0","matInput","","formControlName","batchSize"],["type","number","step","1","min","0","matInput","","formControlName","linger"],["type","number","step","1","min","0","matInput","","formControlName","bufferMemory"],["formControlName","acks","required",""],[3,"value",4,"ngFor","ngForOf"],["required","","matInput","","formControlName","keySerializer"],["required","","matInput","","formControlName","valueSerializer"],["translate","",1,"tb-title"],["required","false","formControlName","otherProperties","keyText","tb.rulenode.key","keyRequiredText","tb.rulenode.key-required","valText","tb.rulenode.value","valRequiredText","tb.rulenode.value-required"],["formControlName","addMetadataKeyValuesAsKafkaHeaders",1,"flex-1"],["class","mat-block flex-1",4,"ngIf"],[3,"value"],[1,"mat-block","flex-1"],["formControlName","kafkaHeadersCharset","required",""]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.topic-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,Io,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-form-field",1)(9,"mat-label",2),t.ɵɵtext(10,"tb.rulenode.key-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",5),t.ɵɵelementStart(12,"mat-hint",2),t.ɵɵtext(13,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(14,"div",6),t.ɵɵtext(15,"tb.rulenode.key-pattern-hint"),t.ɵɵelementEnd(),t.ɵɵelementStart(16,"mat-form-field",7)(17,"mat-label",2),t.ɵɵtext(18,"tb.rulenode.bootstrap-servers"),t.ɵɵelementEnd(),t.ɵɵelement(19,"input",8),t.ɵɵtemplate(20,Eo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"mat-form-field",7)(22,"mat-label",2),t.ɵɵtext(23,"tb.rulenode.retries"),t.ɵɵelementEnd(),t.ɵɵelement(24,"input",9),t.ɵɵtemplate(25,Fo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(26,"mat-form-field",7)(27,"mat-label",2),t.ɵɵtext(28,"tb.rulenode.batch-size-bytes"),t.ɵɵelementEnd(),t.ɵɵelement(29,"input",10),t.ɵɵtemplate(30,qo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(31,"mat-form-field",7)(32,"mat-label",2),t.ɵɵtext(33,"tb.rulenode.linger-ms"),t.ɵɵelementEnd(),t.ɵɵelement(34,"input",11),t.ɵɵtemplate(35,Ao,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(36,"mat-form-field",7)(37,"mat-label",2),t.ɵɵtext(38,"tb.rulenode.buffer-memory-bytes"),t.ɵɵelementEnd(),t.ɵɵelement(39,"input",12),t.ɵɵtemplate(40,ko,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(41,"mat-form-field",7)(42,"mat-label",2),t.ɵɵtext(43,"tb.rulenode.acks"),t.ɵɵelementEnd(),t.ɵɵelementStart(44,"mat-select",13),t.ɵɵtemplate(45,No,2,2,"mat-option",14),t.ɵɵelementEnd()(),t.ɵɵelementStart(46,"mat-form-field",7)(47,"mat-label",2),t.ɵɵtext(48,"tb.rulenode.key-serializer"),t.ɵɵelementEnd(),t.ɵɵelement(49,"input",15),t.ɵɵtemplate(50,wo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(51,"mat-form-field",7)(52,"mat-label",2),t.ɵɵtext(53,"tb.rulenode.value-serializer"),t.ɵɵelementEnd(),t.ɵɵelement(54,"input",16),t.ɵɵtemplate(55,Mo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(56,"label",17),t.ɵɵtext(57,"tb.rulenode.other-properties"),t.ɵɵelementEnd(),t.ɵɵelement(58,"tb-kv-map-config-old",18),t.ɵɵelementStart(59,"mat-checkbox",19),t.ɵɵtext(60),t.ɵɵpipe(61,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(62,"div",6),t.ɵɵtext(63,"tb.rulenode.add-metadata-key-values-as-kafka-headers-hint"),t.ɵɵelementEnd(),t.ɵɵtemplate(64,Bo,5,1,"mat-form-field",20),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.kafkaConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("topicPattern").hasError("required")),t.ɵɵadvance(15),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("bootstrapServers").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("retries").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("batchSize").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("linger").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("bufferMemory").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngForOf",n.ackValues),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("keySerializer").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("valueSerializer").hasError("required")),t.ɵɵadvance(5),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(61,12,"tb.rulenode.add-metadata-key-values-as-kafka-headers")," "),t.ɵɵadvance(4),t.ɵɵproperty("ngIf",n.kafkaConfigForm.get("addMetadataKeyValuesAsKafkaHeaders").value))},dependencies:t.ɵɵgetComponentDepsFactory(Oo),encapsulation:2})}}function Do(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.topic-pattern-required")," "))}function Lo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.host-required")," "))}function Po(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.port-required")," "))}function Ro(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.port-range")," "))}function _o(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.port-range")," "))}function jo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.connect-timeout-required")," "))}function Go(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.connect-timeout-range")," "))}function Ko(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.connect-timeout-range")," "))}e("KafkaConfigComponent",Oo);class Uo extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.mqttConfigForm}onConfigurationSet(e){this.mqttConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[N.required]],host:[e?e.host:null,[N.required]],port:[e?e.port:null,[N.required,N.min(1),N.max(65535)]],connectTimeoutSec:[e?e.connectTimeoutSec:null,[N.required,N.min(1),N.max(200)]],clientId:[e?e.clientId:null,[]],appendClientIdSuffix:[{value:!!e&&e.appendClientIdSuffix,disabled:!(e&&G(e.clientId))},[]],parseToPlainText:[!!e&&e.parseToPlainText,[]],cleanSession:[!!e&&e.cleanSession,[]],retainedMessage:[!!e&&e.retainedMessage,[]],ssl:[!!e&&e.ssl,[]],credentials:[e?e.credentials:null,[]]})}updateValidators(e){G(this.mqttConfigForm.get("clientId").value)?this.mqttConfigForm.get("appendClientIdSuffix").enable({emitEvent:!1}):this.mqttConfigForm.get("appendClientIdSuffix").disable({emitEvent:!1}),this.mqttConfigForm.get("appendClientIdSuffix").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["clientId"]}static{this.ɵfac=function(e){return new(e||Uo)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Uo,selectors:[["tb-external-node-mqtt-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:57,vars:34,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","topicPattern"],[4,"ngIf"],[1,"flex","flex-1","flex-col","gt-sm:flex-row","gt-sm:gap-2"],[1,"mat-block","gt-sm:max-w-60%","gt-sm:flex-full"],["required","","matInput","","formControlName","host"],[1,"mat-block","gt-sm:max-w-40%","gt-sm:flex-full"],["required","","type","number","step","1","min","1","max","65535","matInput","","formControlName","port"],["required","","type","number","step","1","min","1","max","200","matInput","","formControlName","connectTimeoutSec"],["matInput","","formControlName","clientId"],["formControlName","appendClientIdSuffix"],[1,"tb-hint"],["formControlName","parseToPlainText"],["formControlName","cleanSession"],["formControlName","retainedMessage"],["formControlName","ssl"],["formControlName","credentials",3,"passwordFieldRequired"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.topic-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,Do,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"div",5)(9,"mat-form-field",6)(10,"mat-label",2),t.ɵɵtext(11,"tb.rulenode.host"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",7),t.ɵɵtemplate(13,Lo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"mat-form-field",8)(15,"mat-label",2),t.ɵɵtext(16,"tb.rulenode.port"),t.ɵɵelementEnd(),t.ɵɵelement(17,"input",9),t.ɵɵtemplate(18,Po,3,3,"mat-error",4)(19,Ro,3,3,"mat-error",4)(20,_o,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"mat-form-field",8)(22,"mat-label",2),t.ɵɵtext(23,"tb.rulenode.connect-timeout"),t.ɵɵelementEnd(),t.ɵɵelement(24,"input",10),t.ɵɵtemplate(25,jo,3,3,"mat-error",4)(26,Go,3,3,"mat-error",4)(27,Ko,3,3,"mat-error",4),t.ɵɵelementEnd()(),t.ɵɵelementStart(28,"mat-form-field",1)(29,"mat-label",2),t.ɵɵtext(30,"tb.rulenode.client-id"),t.ɵɵelementEnd(),t.ɵɵelement(31,"input",11),t.ɵɵelementStart(32,"mat-hint"),t.ɵɵtext(33),t.ɵɵpipe(34,"translate"),t.ɵɵelementEnd()(),t.ɵɵelementStart(35,"mat-checkbox",12),t.ɵɵtext(36),t.ɵɵpipe(37,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(38,"div",13),t.ɵɵtext(39),t.ɵɵpipe(40,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(41,"mat-checkbox",14),t.ɵɵtext(42),t.ɵɵpipe(43,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(44,"div",13),t.ɵɵtext(45),t.ɵɵpipe(46,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(47,"mat-checkbox",15),t.ɵɵtext(48),t.ɵɵpipe(49,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(50,"mat-checkbox",16),t.ɵɵtext(51),t.ɵɵpipe(52,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(53,"mat-checkbox",17),t.ɵɵtext(54),t.ɵɵpipe(55,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(56,"tb-credentials-config",18),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.mqttConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("topicPattern").hasError("required")),t.ɵɵadvance(8),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("host").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("port").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("port").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("port").hasError("max")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("connectTimeoutSec").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("connectTimeoutSec").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.mqttConfigForm.get("connectTimeoutSec").hasError("max")),t.ɵɵadvance(6),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(34,18,"tb.rulenode.client-id-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(37,20,"tb.rulenode.append-client-id-suffix")," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(40,22,"tb.rulenode.client-id-suffix-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(43,24,"tb.rulenode.parse-to-plain-text")," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(46,26,"tb.rulenode.parse-to-plain-text-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(49,28,"tb.rulenode.clean-session")," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(52,30,"tb.rulenode.retained-message")," "),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(55,32,"tb.rulenode.enable-ssl")," "),t.ɵɵadvance(2),t.ɵɵproperty("passwordFieldRequired",!1))},dependencies:t.ɵɵgetComponentDepsFactory(Uo),styles:["[_nghost-%COMP%]   .tb-mqtt-credentials-panel-group[_ngcontent-%COMP%]{margin:0 6px}"]})}}e("MqttConfigComponent",Uo);class Ho extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.notificationType=E,this.entityType=u}configForm(){return this.notificationConfigForm}onConfigurationSet(e){this.notificationConfigForm=this.fb.group({templateId:[e?e.templateId:null,[N.required]],targets:[e?e.targets:[],[N.required]]})}static{this.ɵfac=function(e){return new(e||Ho)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ho,selectors:[["tb-external-node-notification-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:6,vars:13,consts:[[1,"flex","flex-col",3,"formGroup"],["required","","allowCreate","","formControlName","templateId",3,"notificationTypes"],["required","","formControlName","targets",3,"labelText","placeholderText","requiredText","entityType","subType"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-template-autocomplete",1)(2,"tb-entity-list",2),t.ɵɵpipe(3,"translate"),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.notificationConfigForm),t.ɵɵadvance(),t.ɵɵproperty("notificationTypes",n.notificationType.RULE_NODE),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("labelText",t.ɵɵpipeBind1(3,7,"notification.recipients")),t.ɵɵpropertyInterpolate("placeholderText",t.ɵɵpipeBind1(4,9,"notification.recipient")),t.ɵɵpropertyInterpolate("requiredText",t.ɵɵpipeBind1(5,11,"notification.recipients-required")),t.ɵɵpropertyInterpolate("entityType",n.entityType.NOTIFICATION_TARGET),t.ɵɵpropertyInterpolate("subType",n.notificationType.RULE_NODE))},dependencies:t.ɵɵgetComponentDepsFactory(Ho),encapsulation:2})}}function zo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.gcp-project-id-required")," "))}function $o(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.pubsub-topic-name-required")," "))}e("NotificationConfigComponent",Ho);class Qo extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.pubSubConfigForm}onConfigurationSet(e){this.pubSubConfigForm=this.fb.group({projectId:[e?e.projectId:null,[N.required]],topicName:[e?e.topicName:null,[N.required]],serviceAccountKey:[e?e.serviceAccountKey:null,[N.required]],serviceAccountKeyFileName:[e?e.serviceAccountKeyFileName:null,[N.required]],messageAttributes:[e?e.messageAttributes:null,[]]})}static{this.ɵfac=function(e){return new(e||Qo)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Qo,selectors:[["tb-external-node-pub-sub-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:20,vars:16,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"mat-block"],["translate",""],["required","","matInput","","formControlName","projectId"],[4,"ngIf"],["required","","matInput","","formControlName","topicName"],["formControlName","serviceAccountKey","required","","requiredAsError","","noFileText","tb.rulenode.no-file",2,"padding-bottom","24px",3,"fileNameChanged","existingFileName","label","dropLabel"],["translate","",1,"tb-title"],[1,"tb-hint",3,"innerHTML"],["required","false","formControlName","messageAttributes","keyText","tb.rulenode.name","keyRequiredText","tb.rulenode.name-required","valText","tb.rulenode.value","valRequiredText","tb.rulenode.value-required"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.gcp-project-id"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,zo,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(6,"mat-form-field",1)(7,"mat-label",2),t.ɵɵtext(8,"tb.rulenode.pubsub-topic-name"),t.ɵɵelementEnd(),t.ɵɵelement(9,"input",5),t.ɵɵtemplate(10,$o,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(11,"tb-file-input",6),t.ɵɵpipe(12,"translate"),t.ɵɵpipe(13,"translate"),t.ɵɵlistener("fileNameChanged",(function(e){return n.pubSubConfigForm.get("serviceAccountKeyFileName").setValue(e)})),t.ɵɵelementEnd(),t.ɵɵelementStart(14,"label",7),t.ɵɵtext(15,"tb.rulenode.message-attributes"),t.ɵɵelementEnd(),t.ɵɵelement(16,"div",8),t.ɵɵpipe(17,"translate"),t.ɵɵpipe(18,"safe"),t.ɵɵelement(19,"tb-kv-map-config-old",9),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.pubSubConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.pubSubConfigForm.get("projectId").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.pubSubConfigForm.get("topicName").hasError("required")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("label",t.ɵɵpipeBind1(12,7,"tb.rulenode.gcp-service-account-key")),t.ɵɵpropertyInterpolate("dropLabel",t.ɵɵpipeBind1(13,9,"tb.rulenode.drop-file")),t.ɵɵproperty("existingFileName",n.pubSubConfigForm.get("serviceAccountKeyFileName").value),t.ɵɵadvance(5),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(18,13,t.ɵɵpipeBind1(17,11,"tb.rulenode.message-attributes-hint"),"html"),t.ɵɵsanitizeHtml))},dependencies:t.ɵɵgetComponentDepsFactory(Qo),encapsulation:2})}}function Jo(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function Yo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.host-required")," "))}function Wo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.port-required")," "))}function Xo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.port-range")," "))}function Zo(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.port-range")," "))}function el(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-connection-timeout-ms-message")," "))}function tl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-handshake-timeout-ms-message")," "))}e("PubSubConfigComponent",Qo);class nl extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.messageProperties=[null,"BASIC","TEXT_PLAIN","MINIMAL_BASIC","MINIMAL_PERSISTENT_BASIC","PERSISTENT_BASIC","PERSISTENT_TEXT_PLAIN"]}configForm(){return this.rabbitMqConfigForm}onConfigurationSet(e){this.rabbitMqConfigForm=this.fb.group({exchangeNamePattern:[e?e.exchangeNamePattern:null,[]],routingKeyPattern:[e?e.routingKeyPattern:null,[]],messageProperties:[e?e.messageProperties:null,[]],host:[e?e.host:null,[N.required]],port:[e?e.port:null,[N.required,N.min(1),N.max(65535)]],virtualHost:[e?e.virtualHost:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]],automaticRecoveryEnabled:[!!e&&e.automaticRecoveryEnabled,[]],connectionTimeout:[e?e.connectionTimeout:null,[N.min(0)]],handshakeTimeout:[e?e.handshakeTimeout:null,[N.min(0)]],clientProperties:[e?e.clientProperties:null,[]]})}static{this.ɵfac=function(e){return new(e||nl)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:nl,selectors:[["tb-external-node-rabbit-mq-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:56,vars:11,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"mat-block"],["translate",""],["matInput","","formControlName","exchangeNamePattern"],["matInput","","formControlName","routingKeyPattern"],["formControlName","messageProperties"],[3,"value",4,"ngFor","ngForOf"],[1,"gt-sm:flex","gt-sm:flex-row","gt-sm:gap-2"],[1,"mat-block","gt-sm:max-w-60%","gt-sm:flex-full"],["required","","matInput","","formControlName","host"],[4,"ngIf"],[1,"mat-block","gt-sm:max-w-40%","gt-sm:flex-full"],["required","","type","number","step","1","min","1","max","65535","matInput","","formControlName","port"],["matInput","","formControlName","virtualHost"],["matInput","","formControlName","username"],["type","password","matInput","","formControlName","password"],["matSuffix",""],["formControlName","automaticRecoveryEnabled"],["type","number","step","1","min","0","matInput","","formControlName","connectionTimeout"],["type","number","step","1","min","0","matInput","","formControlName","handshakeTimeout"],["translate","",1,"tb-title"],["required","false","formControlName","clientProperties","keyText","tb.rulenode.key","keyRequiredText","tb.rulenode.key-required","valText","tb.rulenode.value","valRequiredText","tb.rulenode.value-required"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.exchange-name-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-form-field",1)(6,"mat-label",2),t.ɵɵtext(7,"tb.rulenode.routing-key-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(8,"input",4),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-form-field",1)(10,"mat-label",2),t.ɵɵtext(11,"tb.rulenode.message-properties"),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-select",5),t.ɵɵtemplate(13,Jo,2,2,"mat-option",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(14,"div",7)(15,"mat-form-field",8)(16,"mat-label",2),t.ɵɵtext(17,"tb.rulenode.host"),t.ɵɵelementEnd(),t.ɵɵelement(18,"input",9),t.ɵɵtemplate(19,Yo,3,3,"mat-error",10),t.ɵɵelementEnd(),t.ɵɵelementStart(20,"mat-form-field",11)(21,"mat-label",2),t.ɵɵtext(22,"tb.rulenode.port"),t.ɵɵelementEnd(),t.ɵɵelement(23,"input",12),t.ɵɵtemplate(24,Wo,3,3,"mat-error",10)(25,Xo,3,3,"mat-error",10)(26,Zo,3,3,"mat-error",10),t.ɵɵelementEnd()(),t.ɵɵelementStart(27,"mat-form-field",1)(28,"mat-label",2),t.ɵɵtext(29,"tb.rulenode.virtual-host"),t.ɵɵelementEnd(),t.ɵɵelement(30,"input",13),t.ɵɵelementEnd(),t.ɵɵelementStart(31,"mat-form-field",1)(32,"mat-label",2),t.ɵɵtext(33,"tb.rulenode.username"),t.ɵɵelementEnd(),t.ɵɵelement(34,"input",14),t.ɵɵelementEnd(),t.ɵɵelementStart(35,"mat-form-field",1)(36,"mat-label",2),t.ɵɵtext(37,"tb.rulenode.password"),t.ɵɵelementEnd(),t.ɵɵelement(38,"input",15)(39,"tb-toggle-password",16),t.ɵɵelementEnd(),t.ɵɵelementStart(40,"mat-checkbox",17),t.ɵɵtext(41),t.ɵɵpipe(42,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(43,"mat-form-field",1)(44,"mat-label",2),t.ɵɵtext(45,"tb.rulenode.connection-timeout-ms"),t.ɵɵelementEnd(),t.ɵɵelement(46,"input",18),t.ɵɵtemplate(47,el,3,3,"mat-error",10),t.ɵɵelementEnd(),t.ɵɵelementStart(48,"mat-form-field",1)(49,"mat-label",2),t.ɵɵtext(50,"tb.rulenode.handshake-timeout-ms"),t.ɵɵelementEnd(),t.ɵɵelement(51,"input",19),t.ɵɵtemplate(52,tl,3,3,"mat-error",10),t.ɵɵelementEnd(),t.ɵɵelementStart(53,"label",20),t.ɵɵtext(54,"tb.rulenode.client-properties"),t.ɵɵelementEnd(),t.ɵɵelement(55,"tb-kv-map-config-old",21),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.rabbitMqConfigForm),t.ɵɵadvance(13),t.ɵɵproperty("ngForOf",n.messageProperties),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.rabbitMqConfigForm.get("host").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.rabbitMqConfigForm.get("port").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.rabbitMqConfigForm.get("port").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.rabbitMqConfigForm.get("port").hasError("max")),t.ɵɵadvance(15),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(42,9,"tb.rulenode.automatic-recovery")," "),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.rabbitMqConfigForm.get("connectionTimeout").hasError("min")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.rabbitMqConfigForm.get("handshakeTimeout").hasError("min")))},dependencies:t.ɵɵgetComponentDepsFactory(nl),encapsulation:2})}}function rl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.endpoint-url-pattern-required")," "))}function al(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",20),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function il(e,n){1&e&&(t.ɵɵelementStart(0,"mat-checkbox",21),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.use-simple-client-http-factory")," "))}function ol(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",20),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function ll(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.proxy-host-required")," "))}function sl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.proxy-port-required")," "))}function pl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.proxy-port-range")," "))}function ml(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"div",23)(2,"mat-form-field",24)(3,"mat-label",2),t.ɵɵtext(4,"tb.rulenode.proxy-scheme"),t.ɵɵelementEnd(),t.ɵɵelementStart(5,"mat-select",25),t.ɵɵtemplate(6,ol,2,2,"mat-option",7),t.ɵɵelementEnd()(),t.ɵɵelementStart(7,"mat-form-field",26)(8,"mat-label",2),t.ɵɵtext(9,"tb.rulenode.proxy-host"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",27),t.ɵɵtemplate(11,ll,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-form-field",28)(13,"mat-label",2),t.ɵɵtext(14,"tb.rulenode.proxy-port"),t.ɵɵelementEnd(),t.ɵɵelement(15,"input",29),t.ɵɵtemplate(16,sl,3,3,"mat-error",4)(17,pl,3,3,"mat-error",4),t.ɵɵelementEnd()(),t.ɵɵelementStart(18,"mat-form-field",5)(19,"mat-label",2),t.ɵɵtext(20,"tb.rulenode.proxy-user"),t.ɵɵelementEnd(),t.ɵɵelement(21,"input",30),t.ɵɵelementEnd(),t.ɵɵelementStart(22,"mat-form-field",5)(23,"mat-label",2),t.ɵɵtext(24,"tb.rulenode.proxy-password"),t.ɵɵelementEnd(),t.ɵɵelement(25,"input",31),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",e.proxySchemes),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.restApiCallConfigForm.get("proxyHost").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.restApiCallConfigForm.get("proxyPort").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.restApiCallConfigForm.get("proxyPort").hasError("min")||e.restApiCallConfigForm.get("proxyPort").hasError("max"))}}function dl(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"mat-checkbox",22),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(4,ml,26,4,"div",4),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,2,"tb.rulenode.use-system-proxy-properties")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!e.restApiCallConfigForm.get("useSystemProxyProperties").value)}}function ul(e,n){1&e&&(t.ɵɵelementStart(0,"mat-form-field",1)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.read-timeout"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",32),t.ɵɵelementStart(4,"mat-hint",2),t.ɵɵtext(5,"tb.rulenode.read-timeout-hint"),t.ɵɵelementEnd()())}e("RabbitMqConfigComponent",nl);class cl extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.proxySchemes=["http","https"],this.httpRequestTypes=Object.keys(Dt)}configForm(){return this.restApiCallConfigForm}onConfigurationSet(e){this.restApiCallConfigForm=this.fb.group({restEndpointUrlPattern:[e?e.restEndpointUrlPattern:null,[N.required]],requestMethod:[e?e.requestMethod:null,[N.required]],useSimpleClientHttpFactory:[!!e&&e.useSimpleClientHttpFactory,[]],parseToPlainText:[!!e&&e.parseToPlainText,[]],ignoreRequestBody:[!!e&&e.ignoreRequestBody,[]],enableProxy:[!!e&&e.enableProxy,[]],useSystemProxyProperties:[!!e&&e.enableProxy,[]],proxyScheme:[e?e.proxyHost:null,[]],proxyHost:[e?e.proxyHost:null,[]],proxyPort:[e?e.proxyPort:null,[]],proxyUser:[e?e.proxyUser:null,[]],proxyPassword:[e?e.proxyPassword:null,[]],readTimeoutMs:[e?e.readTimeoutMs:null,[]],maxParallelRequestsCount:[e?e.maxParallelRequestsCount:null,[N.min(0)]],headers:[e?e.headers:null,[]],credentials:[e?e.credentials:null,[]],maxInMemoryBufferSizeInKb:[e?e.maxInMemoryBufferSizeInKb:null,[N.min(1)]]})}validatorTriggers(){return["useSimpleClientHttpFactory","enableProxy","useSystemProxyProperties"]}updateValidators(e){const t=this.restApiCallConfigForm.get("useSimpleClientHttpFactory").value,n=this.restApiCallConfigForm.get("enableProxy").value,r=this.restApiCallConfigForm.get("useSystemProxyProperties").value;n&&!r?(this.restApiCallConfigForm.get("proxyHost").setValidators(n?[N.required]:[]),this.restApiCallConfigForm.get("proxyPort").setValidators(n?[N.required,N.min(1),N.max(65535)]:[])):(this.restApiCallConfigForm.get("proxyHost").setValidators([]),this.restApiCallConfigForm.get("proxyPort").setValidators([]),t?this.restApiCallConfigForm.get("readTimeoutMs").setValidators([]):this.restApiCallConfigForm.get("readTimeoutMs").setValidators([N.min(0)])),this.restApiCallConfigForm.get("readTimeoutMs").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("proxyHost").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("proxyPort").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("credentials").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||cl)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:cl,selectors:[["tb-external-node-rest-api-call-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:46,vars:22,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","restEndpointUrlPattern"],[4,"ngIf"],[1,"mat-block"],["formControlName","requestMethod"],[3,"value",4,"ngFor","ngForOf"],["formControlName","enableProxy"],["formControlName","useSimpleClientHttpFactory",4,"ngIf"],["formControlName","parseToPlainText"],["translate","",1,"tb-hint",2,"padding-bottom","5px"],["formControlName","ignoreRequestBody"],["class","mat-block","subscriptSizing","dynamic",4,"ngIf"],["type","number","step","1","min","0","matInput","","formControlName","maxParallelRequestsCount"],["type","number","step","1","min","1","matInput","","formControlName","maxInMemoryBufferSizeInKb"],["translate","",1,"tb-title"],[1,"tb-hint",3,"innerHTML"],["required","false","formControlName","headers","keyText","tb.rulenode.header","keyRequiredText","tb.rulenode.header-required","valText","tb.rulenode.value","valRequiredText","tb.rulenode.value-required"],["formControlName","credentials",3,"disableCertPemCredentials"],[3,"value"],["formControlName","useSimpleClientHttpFactory"],["formControlName","useSystemProxyProperties"],[1,"gt-sm:flex","gt-sm:flex-row","gt-sm:gap-2"],[1,"mat-block","gt-sm:max-w-10%","gt-sm:flex-full"],["formControlName","proxyScheme"],[1,"md-block","gt-sm:max-w-50%","gt-sm:flex-full"],["matInput","","required","","formControlName","proxyHost"],[1,"mat-block","gt-sm:max-w-40%","gt-sm:flex-full"],["matInput","","required","","formControlName","proxyPort","type","number","step","1"],["matInput","","formControlName","proxyUser"],["matInput","","formControlName","proxyPassword"],["type","number","step","1","min","0","matInput","","formControlName","readTimeoutMs"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.endpoint-url-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,rl,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-form-field",5)(9,"mat-label",2),t.ɵɵtext(10,"tb.rulenode.request-method"),t.ɵɵelementEnd(),t.ɵɵelementStart(11,"mat-select",6),t.ɵɵtemplate(12,al,2,2,"mat-option",7),t.ɵɵelementEnd()(),t.ɵɵelementStart(13,"mat-checkbox",8),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(16,il,3,3,"mat-checkbox",9),t.ɵɵelementStart(17,"mat-checkbox",10),t.ɵɵtext(18),t.ɵɵpipe(19,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(20,"div",11),t.ɵɵtext(21,"tb.rulenode.parse-to-plain-text-hint"),t.ɵɵelementEnd(),t.ɵɵelementStart(22,"mat-checkbox",12),t.ɵɵtext(23),t.ɵɵpipe(24,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(25,dl,5,4,"div",4)(26,ul,6,0,"mat-form-field",13),t.ɵɵelementStart(27,"mat-form-field",1)(28,"mat-label",2),t.ɵɵtext(29,"tb.rulenode.max-parallel-requests-count"),t.ɵɵelementEnd(),t.ɵɵelement(30,"input",14),t.ɵɵelementStart(31,"mat-hint",2),t.ɵɵtext(32,"tb.rulenode.max-parallel-requests-count-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(33,"mat-form-field",1)(34,"mat-label",2),t.ɵɵtext(35,"tb.rulenode.max-response-size"),t.ɵɵelementEnd(),t.ɵɵelement(36,"input",15),t.ɵɵelementStart(37,"mat-hint",2),t.ɵɵtext(38,"tb.rulenode.max-response-size-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(39,"label",16),t.ɵɵtext(40,"tb.rulenode.headers"),t.ɵɵelementEnd(),t.ɵɵelement(41,"div",17),t.ɵɵpipe(42,"translate"),t.ɵɵpipe(43,"safe"),t.ɵɵelement(44,"tb-kv-map-config-old",18)(45,"tb-credentials-config",19),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.restApiCallConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.restApiCallConfigForm.get("restEndpointUrlPattern").hasError("required")),t.ɵɵadvance(7),t.ɵɵproperty("ngForOf",n.httpRequestTypes),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(15,11,"tb.rulenode.enable-proxy")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!n.restApiCallConfigForm.get("enableProxy").value),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(19,13,"tb.rulenode.parse-to-plain-text")," "),t.ɵɵadvance(5),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(24,15,"tb.rulenode.ignore-request-body")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.restApiCallConfigForm.get("enableProxy").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",!n.restApiCallConfigForm.get("useSimpleClientHttpFactory").value||n.restApiCallConfigForm.get("enableProxy").value),t.ɵɵadvance(15),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(43,19,t.ɵɵpipeBind1(42,17,"tb.rulenode.headers-hint"),"html"),t.ɵɵsanitizeHtml),t.ɵɵadvance(4),t.ɵɵproperty("disableCertPemCredentials",n.restApiCallConfigForm.get("useSimpleClientHttpFactory").value))},dependencies:t.ɵɵgetComponentDepsFactory(cl),encapsulation:2})}}function gl(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.toUpperCase()," ")}}function fl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.smtp-host-required")," "))}function hl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.smtp-port-required")," "))}function yl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.smtp-port-range")," "))}function bl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.smtp-port-range")," "))}function vl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.timeout-required")," "))}function xl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-timeout-msec-message")," "))}function Cl(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",22),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e," ")}}function Sl(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",4)(1,"mat-label",5),t.ɵɵtext(2,"tb.rulenode.tls-version"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"mat-select",23),t.ɵɵtemplate(4,Cl,2,2,"mat-option",7),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(4),t.ɵɵproperty("ngForOf",e.tlsVersions)}}function Tl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.proxy-host-required")," "))}function Il(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.proxy-port-required")," "))}function El(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.proxy-port-range")," "))}function Fl(e,n){if(1&e&&(t.ɵɵelementStart(0,"div")(1,"div",8)(2,"mat-form-field",9)(3,"mat-label",5),t.ɵɵtext(4,"tb.rulenode.proxy-host"),t.ɵɵelementEnd(),t.ɵɵelement(5,"input",24),t.ɵɵtemplate(6,Tl,3,3,"mat-error",11),t.ɵɵelementEnd(),t.ɵɵelementStart(7,"mat-form-field",12)(8,"mat-label",5),t.ɵɵtext(9,"tb.rulenode.proxy-port"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",25),t.ɵɵtemplate(11,Il,3,3,"mat-error",11)(12,El,3,3,"mat-error",11),t.ɵɵelementEnd()(),t.ɵɵelementStart(13,"mat-form-field",4)(14,"mat-label",5),t.ɵɵtext(15,"tb.rulenode.proxy-user"),t.ɵɵelementEnd(),t.ɵɵelement(16,"input",26),t.ɵɵelementEnd(),t.ɵɵelementStart(17,"mat-form-field",4)(18,"mat-label",5),t.ɵɵtext(19,"tb.rulenode.proxy-password"),t.ɵɵelementEnd(),t.ɵɵelement(20,"input",27),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext(2);t.ɵɵadvance(6),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("proxyHost").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("proxyPort").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("proxyPort").hasError("min")||e.sendEmailConfigForm.get("proxyPort").hasError("max"))}}function ql(e,n){if(1&e&&(t.ɵɵelementStart(0,"section",3)(1,"mat-form-field",4)(2,"mat-label",5),t.ɵɵtext(3,"tb.rulenode.smtp-protocol"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"mat-select",6),t.ɵɵtemplate(5,gl,2,2,"mat-option",7),t.ɵɵelementEnd()(),t.ɵɵelementStart(6,"div",8)(7,"mat-form-field",9)(8,"mat-label",5),t.ɵɵtext(9,"tb.rulenode.smtp-host"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",10),t.ɵɵtemplate(11,fl,3,3,"mat-error",11),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-form-field",12)(13,"mat-label",5),t.ɵɵtext(14,"tb.rulenode.smtp-port"),t.ɵɵelementEnd(),t.ɵɵelement(15,"input",13),t.ɵɵtemplate(16,hl,3,3,"mat-error",11)(17,yl,3,3,"mat-error",11)(18,bl,3,3,"mat-error",11),t.ɵɵelementEnd()(),t.ɵɵelementStart(19,"mat-form-field",4)(20,"mat-label",5),t.ɵɵtext(21,"tb.rulenode.timeout-msec"),t.ɵɵelementEnd(),t.ɵɵelement(22,"input",14),t.ɵɵtemplate(23,vl,3,3,"mat-error",11)(24,xl,3,3,"mat-error",11),t.ɵɵelementEnd(),t.ɵɵelementStart(25,"mat-checkbox",15),t.ɵɵtext(26),t.ɵɵpipe(27,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(28,Sl,5,1,"mat-form-field",16),t.ɵɵelementStart(29,"tb-checkbox",17),t.ɵɵtext(30),t.ɵɵpipe(31,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(32,Fl,21,3,"div",11),t.ɵɵelementStart(33,"mat-form-field",18)(34,"mat-label",5),t.ɵɵtext(35,"tb.rulenode.username"),t.ɵɵelementEnd(),t.ɵɵelement(36,"input",19),t.ɵɵpipe(37,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(38,"mat-form-field",18)(39,"mat-label",5),t.ɵɵtext(40,"tb.rulenode.password"),t.ɵɵelementEnd(),t.ɵɵelement(41,"input",20),t.ɵɵpipe(42,"translate"),t.ɵɵelement(43,"tb-toggle-password",21),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(5),t.ɵɵproperty("ngForOf",e.smtpProtocols),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("smtpHost").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("smtpPort").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("smtpPort").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("smtpPort").hasError("max")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("timeout").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("timeout").hasError("min")),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(27,13,"tb.rulenode.enable-tls")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!0===e.sendEmailConfigForm.get("enableTls").value),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(31,15,"tb.rulenode.enable-proxy")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.sendEmailConfigForm.get("enableProxy").value),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(37,17,"tb.rulenode.enter-username")),t.ɵɵadvance(5),t.ɵɵpropertyInterpolate("placeholder",t.ɵɵpipeBind1(42,19,"tb.rulenode.enter-password"))}}e("RestApiCallConfigComponent",cl);class Al extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.smtpProtocols=["smtp","smtps"],this.tlsVersions=["TLSv1","TLSv1.1","TLSv1.2","TLSv1.3"]}configForm(){return this.sendEmailConfigForm}onConfigurationSet(e){this.sendEmailConfigForm=this.fb.group({useSystemSmtpSettings:[!!e&&e.useSystemSmtpSettings,[]],smtpProtocol:[e?e.smtpProtocol:null,[]],smtpHost:[e?e.smtpHost:null,[]],smtpPort:[e?e.smtpPort:null,[]],timeout:[e?e.timeout:null,[]],enableTls:[!!e&&e.enableTls,[]],tlsVersion:[e?e.tlsVersion:null,[]],enableProxy:[!!e&&e.enableProxy,[]],proxyHost:[e?e.proxyHost:null,[]],proxyPort:[e?e.proxyPort:null,[]],proxyUser:[e?e.proxyUser:null,[]],proxyPassword:[e?e.proxyPassword:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]]})}validatorTriggers(){return["useSystemSmtpSettings","enableProxy"]}updateValidators(e){const t=this.sendEmailConfigForm.get("useSystemSmtpSettings").value,n=this.sendEmailConfigForm.get("enableProxy").value;t?(this.sendEmailConfigForm.get("smtpProtocol").setValidators([]),this.sendEmailConfigForm.get("smtpHost").setValidators([]),this.sendEmailConfigForm.get("smtpPort").setValidators([]),this.sendEmailConfigForm.get("timeout").setValidators([]),this.sendEmailConfigForm.get("proxyHost").setValidators([]),this.sendEmailConfigForm.get("proxyPort").setValidators([])):(this.sendEmailConfigForm.get("smtpProtocol").setValidators([N.required]),this.sendEmailConfigForm.get("smtpHost").setValidators([N.required]),this.sendEmailConfigForm.get("smtpPort").setValidators([N.required,N.min(1),N.max(65535)]),this.sendEmailConfigForm.get("timeout").setValidators([N.required,N.min(0)]),this.sendEmailConfigForm.get("proxyHost").setValidators(n?[N.required]:[]),this.sendEmailConfigForm.get("proxyPort").setValidators(n?[N.required,N.min(1),N.max(65535)]:[])),this.sendEmailConfigForm.get("smtpProtocol").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpHost").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpPort").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("timeout").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("proxyHost").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("proxyPort").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||Al)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Al,selectors:[["tb-external-node-send-email-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:5,vars:5,consts:[[1,"flex","flex-col",3,"formGroup"],["formControlName","useSystemSmtpSettings"],["class","flex flex-col",4,"ngIf"],[1,"flex","flex-col"],[1,"mat-block"],["translate",""],["formControlName","smtpProtocol"],[3,"value",4,"ngFor","ngForOf"],[1,"gt-sm:flex","gt-sm:flex-row","gt-sm:gap-2"],[1,"mat-block","gt-sm:max-w-60%","gt-sm:flex-full"],["required","","matInput","","formControlName","smtpHost"],[4,"ngIf"],[1,"mat-block","gt-sm:max-w-40%","gt-sm:flex-full"],["required","","type","number","step","1","min","1","max","65535","matInput","","formControlName","smtpPort"],["required","","type","number","step","1","min","0","matInput","","formControlName","timeout"],["formControlName","enableTls"],["class","mat-block",4,"ngIf"],["formControlName","enableProxy"],["floatLabel","always",1,"mat-block"],["matInput","","formControlName","username",3,"placeholder"],["matInput","","type","password","formControlName","password",3,"placeholder"],["matSuffix",""],[3,"value"],["formControlName","tlsVersion"],["matInput","","required","","formControlName","proxyHost"],["matInput","","required","","formControlName","proxyPort","type","number","step","1","min","1","max","65535"],["matInput","","formControlName","proxyUser"],["matInput","","formControlName","proxyPassword"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-checkbox",1),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(4,ql,44,21,"section",2),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.sendEmailConfigForm),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,3,"tb.rulenode.use-system-smtp-settings")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!1===n.sendEmailConfigForm.get("useSystemSmtpSettings").value))},dependencies:t.ɵɵgetComponentDepsFactory(Al),encapsulation:2})}}function kl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.numbers-to-template-required")," "))}function Nl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.sms-message-template-required")," "))}function wl(e,n){1&e&&t.ɵɵelement(0,"tb-sms-provider-configuration",9)}e("SendEmailConfigComponent",Al);class Ml extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.sendSmsConfigForm}onConfigurationSet(e){this.sendSmsConfigForm=this.fb.group({numbersToTemplate:[e?e.numbersToTemplate:null,[N.required]],smsMessageTemplate:[e?e.smsMessageTemplate:null,[N.required]],useSystemSmsSettings:[!!e&&e.useSystemSmsSettings,[]],smsProviderConfiguration:[e?e.smsProviderConfiguration:null,[]]})}validatorTriggers(){return["useSystemSmsSettings"]}updateValidators(e){this.sendSmsConfigForm.get("useSystemSmsSettings").value?this.sendSmsConfigForm.get("smsProviderConfiguration").setValidators([]):this.sendSmsConfigForm.get("smsProviderConfiguration").setValidators([N.required]),this.sendSmsConfigForm.get("smsProviderConfiguration").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||Ml)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ml,selectors:[["tb-external-node-send-sms-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:20,vars:13,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","numbersToTemplate"],[4,"ngIf"],[3,"innerHTML"],["required","","matInput","","formControlName","smsMessageTemplate","rows","6"],["formControlName","useSystemSmsSettings"],["formControlName","smsProviderConfiguration","required","",4,"ngIf"],["formControlName","smsProviderConfiguration","required",""]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.numbers-to-template"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,kl,3,3,"mat-error",4),t.ɵɵelement(6,"mat-hint",5),t.ɵɵpipe(7,"translate"),t.ɵɵpipe(8,"safe"),t.ɵɵelementEnd(),t.ɵɵelementStart(9,"mat-form-field",1)(10,"mat-label",2),t.ɵɵtext(11,"tb.rulenode.sms-message-template"),t.ɵɵelementEnd(),t.ɵɵelement(12,"textarea",6),t.ɵɵtemplate(13,Nl,3,3,"mat-error",4),t.ɵɵelementStart(14,"mat-hint",2),t.ɵɵtext(15,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(16,"mat-checkbox",7),t.ɵɵtext(17),t.ɵɵpipe(18,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(19,wl,1,0,"tb-sms-provider-configuration",8),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.sendSmsConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.sendSmsConfigForm.get("numbersToTemplate").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(8,8,t.ɵɵpipeBind1(7,6,"tb.rulenode.numbers-to-template-hint"),"html"),t.ɵɵsanitizeHtml),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.sendSmsConfigForm.get("smsMessageTemplate").hasError("required")),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(18,11,"tb.rulenode.use-system-sms-settings")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!1===n.sendSmsConfigForm.get("useSystemSmsSettings").value))},dependencies:t.ɵɵgetComponentDepsFactory(Ml),encapsulation:2})}}function Vl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.message-template-required")," "))}function Bl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.slack-api-token-required")," "))}function Ol(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",11)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.slack-api-token"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",12),t.ɵɵtemplate(4,Bl,3,3,"mat-error",4),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.slackConfigForm.get("botToken").hasError("required"))}}function Dl(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-radio-button",13),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.slackChanelTypesTranslateMap.get(e))," ")}}e("SendSmsConfigComponent",Ml);class Ll extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.slackChanelTypes=Object.keys(F),this.slackChanelTypesTranslateMap=q}configForm(){return this.slackConfigForm}onConfigurationSet(e){this.slackConfigForm=this.fb.group({botToken:[e?e.botToken:null],useSystemSettings:[!!e&&e.useSystemSettings],messageTemplate:[e?e.messageTemplate:null,[N.required]],conversationType:[e?e.conversationType:null,[N.required]],conversation:[e?e.conversation:null,[N.required]]})}validatorTriggers(){return["useSystemSettings"]}updateValidators(e){this.slackConfigForm.get("useSystemSettings").value?this.slackConfigForm.get("botToken").clearValidators():this.slackConfigForm.get("botToken").setValidators([N.required]),this.slackConfigForm.get("botToken").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||Ll)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ll,selectors:[["tb-external-node-slack-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:18,vars:12,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"mat-block","flex-1"],["translate",""],["required","","matInput","","formControlName","messageTemplate"],[4,"ngIf"],["formControlName","useSystemSettings"],["class","mat-block",4,"ngIf"],[1,"tb-title"],["formControlName","conversationType"],[3,"value",4,"ngFor","ngForOf"],["formControlName","conversation","required","",3,"token","slackChanelType"],[1,"mat-block"],["required","","matInput","","formControlName","botToken"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.message-template"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,Vl,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-checkbox",5),t.ɵɵtext(9),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(11,Ol,5,1,"mat-form-field",6),t.ɵɵelementStart(12,"label",7),t.ɵɵtext(13),t.ɵɵpipe(14,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"mat-radio-group",8),t.ɵɵtemplate(16,Dl,3,4,"mat-radio-button",9),t.ɵɵelementEnd(),t.ɵɵelement(17,"tb-slack-conversation-autocomplete",10),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.slackConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.slackConfigForm.get("messageTemplate").hasError("required")),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(10,8,"tb.rulenode.use-system-slack-settings")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",!n.slackConfigForm.get("useSystemSettings").value),t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(14,10,"notification.slack-chanel-type")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.slackChanelTypes),t.ɵɵadvance(),t.ɵɵproperty("token",n.slackConfigForm.get("useSystemSettings").value?"":n.slackConfigForm.get("botToken").value)("slackChanelType",n.slackConfigForm.get("conversationType").value))},dependencies:t.ɵɵgetComponentDepsFactory(Ll),styles:["[_nghost-%COMP%]   .tb-title[_ngcontent-%COMP%]{display:block;padding-bottom:6px}[_nghost-%COMP%]     .mat-mdc-radio-group{display:flex;flex-direction:row;margin-bottom:22px;gap:12px}[_nghost-%COMP%]     .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 100%;padding:4px;border:1px solid rgba(0,0,0,.12);border-radius:6px}@media screen and (max-width: 599px){[_nghost-%COMP%]     .mat-mdc-radio-group{flex-direction:column}}"]})}}function Pl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.topic-arn-pattern-required")," "))}function Rl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-access-key-id-required")," "))}function _l(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-secret-access-key-required")," "))}function jl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-region-required")," "))}e("SlackConfigComponent",Ll);class Gl extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.snsConfigForm}onConfigurationSet(e){this.snsConfigForm=this.fb.group({topicArnPattern:[e?e.topicArnPattern:null,[N.required]],accessKeyId:[e?e.accessKeyId:null,[N.required]],secretAccessKey:[e?e.secretAccessKey:null,[N.required]],region:[e?e.region:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||Gl)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Gl,selectors:[["tb-external-node-sns-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:23,vars:5,consts:[[1,"flex","flex-col",3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["translate",""],["required","","matInput","","formControlName","topicArnPattern"],[4,"ngIf"],[1,"mat-block"],["required","","matInput","","formControlName","accessKeyId"],["required","","matInput","","formControlName","secretAccessKey"],["required","","matInput","","formControlName","region"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.topic-arn-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",3),t.ɵɵtemplate(5,Pl,3,3,"mat-error",4),t.ɵɵelementStart(6,"mat-hint",2),t.ɵɵtext(7,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵelementStart(8,"mat-form-field",5)(9,"mat-label",2),t.ɵɵtext(10,"tb.rulenode.aws-access-key-id"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",6),t.ɵɵtemplate(12,Rl,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(13,"mat-form-field",5)(14,"mat-label",2),t.ɵɵtext(15,"tb.rulenode.aws-secret-access-key"),t.ɵɵelementEnd(),t.ɵɵelement(16,"input",7),t.ɵɵtemplate(17,_l,3,3,"mat-error",4),t.ɵɵelementEnd(),t.ɵɵelementStart(18,"mat-form-field",5)(19,"mat-label",2),t.ɵɵtext(20,"tb.rulenode.aws-region"),t.ɵɵelementEnd(),t.ɵɵelement(21,"input",8),t.ɵɵtemplate(22,jl,3,3,"mat-error",4),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.snsConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.snsConfigForm.get("topicArnPattern").hasError("required")),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.snsConfigForm.get("accessKeyId").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.snsConfigForm.get("secretAccessKey").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.snsConfigForm.get("region").hasError("required")))},dependencies:t.ɵɵgetComponentDepsFactory(Gl),encapsulation:2})}}function Kl(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",15),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.sqsQueueTypeTranslationsMap.get(e))," ")}}function Ul(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.queue-url-pattern-required")," "))}function Hl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.min-delay-seconds-message")," "))}function zl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-delay-seconds-message")," "))}function $l(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",1)(1,"mat-label",2),t.ɵɵtext(2,"tb.rulenode.delay-seconds"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",16),t.ɵɵtemplate(4,Hl,3,3,"mat-error",7)(5,zl,3,3,"mat-error",7),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵproperty("ngIf",e.sqsConfigForm.get("delaySeconds").hasError("min")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.sqsConfigForm.get("delaySeconds").hasError("max"))}}function Ql(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-access-key-id-required")," "))}function Jl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-secret-access-key-required")," "))}function Yl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-region-required")," "))}e("SnsConfigComponent",Gl);class Wl extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.sqsQueueType=Nt,this.sqsQueueTypes=Object.keys(Nt),this.sqsQueueTypeTranslationsMap=wt}configForm(){return this.sqsConfigForm}onConfigurationSet(e){this.sqsConfigForm=this.fb.group({queueType:[e?e.queueType:null,[N.required]],queueUrlPattern:[e?e.queueUrlPattern:null,[N.required]],delaySeconds:[e?e.delaySeconds:null,[N.min(0),N.max(900)]],messageAttributes:[e?e.messageAttributes:null,[]],accessKeyId:[e?e.accessKeyId:null,[N.required]],secretAccessKey:[e?e.secretAccessKey:null,[N.required]],region:[e?e.region:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||Wl)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Wl,selectors:[["tb-external-node-sqs-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:35,vars:13,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"mat-block"],["translate",""],["formControlName","queueType","required",""],[3,"value",4,"ngFor","ngForOf"],["subscriptSizing","dynamic",1,"mat-block"],["required","","matInput","","formControlName","queueUrlPattern"],[4,"ngIf"],["class","mat-block",4,"ngIf"],["translate","",1,"tb-title"],[1,"tb-hint",3,"innerHTML"],["required","false","formControlName","messageAttributes","keyText","tb.rulenode.name","keyRequiredText","tb.rulenode.name-required","valText","tb.rulenode.value","valRequiredText","tb.rulenode.value-required"],["required","","matInput","","formControlName","accessKeyId"],["required","","matInput","","formControlName","secretAccessKey"],["required","","matInput","","formControlName","region"],[3,"value"],["required","","type","number","min","0","max","900","step","1","matInput","","formControlName","delaySeconds"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.queue-type"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"mat-select",3),t.ɵɵtemplate(5,Kl,3,4,"mat-option",4),t.ɵɵelementEnd()(),t.ɵɵelementStart(6,"mat-form-field",5)(7,"mat-label",2),t.ɵɵtext(8,"tb.rulenode.queue-url-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(9,"input",6),t.ɵɵtemplate(10,Ul,3,3,"mat-error",7),t.ɵɵelementStart(11,"mat-hint",2),t.ɵɵtext(12,"tb.rulenode.general-pattern-hint"),t.ɵɵelementEnd()(),t.ɵɵtemplate(13,$l,6,2,"mat-form-field",8),t.ɵɵelementStart(14,"label",9),t.ɵɵtext(15,"tb.rulenode.message-attributes"),t.ɵɵelementEnd(),t.ɵɵelement(16,"div",10),t.ɵɵpipe(17,"translate"),t.ɵɵpipe(18,"safe"),t.ɵɵelement(19,"tb-kv-map-config-old",11),t.ɵɵelementStart(20,"mat-form-field",1)(21,"mat-label",2),t.ɵɵtext(22,"tb.rulenode.aws-access-key-id"),t.ɵɵelementEnd(),t.ɵɵelement(23,"input",12),t.ɵɵtemplate(24,Ql,3,3,"mat-error",7),t.ɵɵelementEnd(),t.ɵɵelementStart(25,"mat-form-field",1)(26,"mat-label",2),t.ɵɵtext(27,"tb.rulenode.aws-secret-access-key"),t.ɵɵelementEnd(),t.ɵɵelement(28,"input",13),t.ɵɵtemplate(29,Jl,3,3,"mat-error",7),t.ɵɵelementEnd(),t.ɵɵelementStart(30,"mat-form-field",1)(31,"mat-label",2),t.ɵɵtext(32,"tb.rulenode.aws-region"),t.ɵɵelementEnd(),t.ɵɵelement(33,"input",14),t.ɵɵtemplate(34,Yl,3,3,"mat-error",7),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.sqsConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("ngForOf",n.sqsQueueTypes),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.sqsConfigForm.get("queueUrlPattern").hasError("required")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.sqsConfigForm.get("queueType").value===n.sqsQueueType.STANDARD),t.ɵɵadvance(3),t.ɵɵproperty("innerHTML",t.ɵɵpipeBind2(18,10,t.ɵɵpipeBind1(17,8,"tb.rulenode.message-attributes-hint"),"html"),t.ɵɵsanitizeHtml),t.ɵɵadvance(8),t.ɵɵproperty("ngIf",n.sqsConfigForm.get("accessKeyId").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.sqsConfigForm.get("secretAccessKey").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.sqsConfigForm.get("region").hasError("required")))},dependencies:t.ɵɵgetComponentDepsFactory(Wl),encapsulation:2})}}function Xl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.function-name-required")," "))}function Zl(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-access-key-id-required")," "))}function es(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-secret-access-key-required")," "))}function ts(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.aws-region-required")," "))}function ns(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.connection-timeout-required")," "))}function rs(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.connection-timeout-min")," "))}function as(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.request-timeout-required")," "))}function is(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.request-timeout-min")," "))}e("SqsConfigComponent",Wl);class os extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.lambdaConfigForm}onConfigurationSet(e){this.lambdaConfigForm=this.fb.group({functionName:[e?e.functionName:null,[N.required]],qualifier:[e?e.qualifier:null,[]],accessKey:[e?e.accessKey:null,[N.required]],secretKey:[e?e.secretKey:null,[N.required]],region:[e?e.region:null,[N.required]],connectionTimeout:[e?e.connectionTimeout:null,[N.required,N.min(0)]],requestTimeout:[e?e.requestTimeout:null,[N.required,N.min(0)]],tellFailureIfFuncThrowsExc:[!!e&&e.tellFailureIfFuncThrowsExc,[]]})}static{this.ɵfac=function(e){return new(e||os)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:os,selectors:[["tb-external-node-lambda-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:71,vars:28,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],[1,"tb-form-panel","stroked"],[1,"tb-form-row","no-padding","no-border"],["translate","",1,"tb-form-panel-title","tb-required"],["popupHelpLink","rulenode/node-templatization-doc",3,"hintText"],[1,"tb-standard-fields"],[1,"mat-block"],["required","","matInput","","formControlName","functionName"],[4,"ngIf"],["matInput","","formControlName","qualifier"],["translate",""],["expanded","",1,"tb-settings"],["required","","matInput","","formControlName","accessKey"],["required","","matInput","","formControlName","secretKey"],["required","","matInput","","formControlName","region"],[1,"tb-form-panel","stroked","no-padding"],[1,"tb-settings"],[2,"padding","16px"],[1,"tb-form-panel","no-border","no-padding","no-gap",2,"margin-top","0"],[1,"tb-form-row","no-border","same-padding","tb-standard-fields"],[1,"flex"],["type","number","required","","min","0","matInput","","formControlName","connectionTimeout"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],["type","number","required","","min","0","matInput","","formControlName","requestTimeout"],[1,"tb-form-row","no-border",2,"margin-bottom","16px",3,"tb-hint-tooltip-icon"],["formControlName","tellFailureIfFuncThrowsExc",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2)(3,"div",3),t.ɵɵtext(4,"tb.rulenode.function-configuration"),t.ɵɵelementEnd()(),t.ɵɵelement(5,"tb-example-hint",4),t.ɵɵelementStart(6,"div",5)(7,"mat-form-field",6)(8,"mat-label"),t.ɵɵtext(9),t.ɵɵpipe(10,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(11,"input",7),t.ɵɵtemplate(12,Xl,3,3,"mat-error",8),t.ɵɵelementEnd(),t.ɵɵelementStart(13,"mat-form-field",6)(14,"mat-label"),t.ɵɵtext(15),t.ɵɵpipe(16,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(17,"input",9),t.ɵɵelementStart(18,"mat-hint",10),t.ɵɵtext(19,"tb.rulenode.qualifier-hint"),t.ɵɵelementEnd()()()(),t.ɵɵelementStart(20,"div",1)(21,"mat-expansion-panel",11)(22,"mat-expansion-panel-header")(23,"mat-panel-title",3),t.ɵɵtext(24,"tb.rulenode.aws-credentials"),t.ɵɵelementEnd()(),t.ɵɵelementStart(25,"div",5)(26,"mat-form-field",6)(27,"mat-label",10),t.ɵɵtext(28,"tb.rulenode.aws-access-key-id"),t.ɵɵelementEnd(),t.ɵɵelement(29,"input",12),t.ɵɵtemplate(30,Zl,3,3,"mat-error",8),t.ɵɵelementEnd(),t.ɵɵelementStart(31,"mat-form-field",6)(32,"mat-label",10),t.ɵɵtext(33,"tb.rulenode.aws-secret-access-key"),t.ɵɵelementEnd(),t.ɵɵelement(34,"input",13),t.ɵɵtemplate(35,es,3,3,"mat-error",8),t.ɵɵelementEnd(),t.ɵɵelementStart(36,"mat-form-field",6)(37,"mat-label",10),t.ɵɵtext(38,"tb.rulenode.aws-region"),t.ɵɵelementEnd(),t.ɵɵelement(39,"input",14),t.ɵɵtemplate(40,ts,3,3,"mat-error",8),t.ɵɵelementEnd()()()(),t.ɵɵelementStart(41,"div",15)(42,"mat-expansion-panel",16)(43,"mat-expansion-panel-header",17)(44,"mat-panel-title",10),t.ɵɵtext(45,"tb.rulenode.advanced-settings"),t.ɵɵelementEnd()(),t.ɵɵelementStart(46,"div",18)(47,"div",19)(48,"mat-form-field",20)(49,"mat-label",10),t.ɵɵtext(50,"tb.rulenode.connection-timeout"),t.ɵɵelementEnd(),t.ɵɵelement(51,"input",21),t.ɵɵtemplate(52,ns,3,3,"mat-error",8)(53,rs,3,3,"mat-error",8),t.ɵɵelementStart(54,"mat-icon",22),t.ɵɵpipe(55,"translate"),t.ɵɵtext(56,"help"),t.ɵɵelementEnd()(),t.ɵɵelementStart(57,"mat-form-field",20)(58,"mat-label",10),t.ɵɵtext(59,"tb.rulenode.request-timeout"),t.ɵɵelementEnd(),t.ɵɵelement(60,"input",23),t.ɵɵtemplate(61,as,3,3,"mat-error",8)(62,is,3,3,"mat-error",8),t.ɵɵelementStart(63,"mat-icon",22),t.ɵɵpipe(64,"translate"),t.ɵɵtext(65,"help"),t.ɵɵelementEnd()()(),t.ɵɵelementStart(66,"div",24),t.ɵɵpipe(67,"translate"),t.ɵɵelementStart(68,"mat-slide-toggle",25),t.ɵɵtext(69),t.ɵɵpipe(70,"translate"),t.ɵɵelementEnd()()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.lambdaConfigForm),t.ɵɵadvance(5),t.ɵɵproperty("hintText","tb.rulenode.template-rules-hint"),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(10,16,"tb.rulenode.function-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("functionName").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(16,18,"tb.rulenode.qualifier")),t.ɵɵadvance(15),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("accessKey").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("secretKey").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("region").hasError("required")),t.ɵɵadvance(12),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("connectionTimeout").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("connectionTimeout").hasError("min")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(55,20,"tb.rulenode.connection-timeout-hint")),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("requestTimeout").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.lambdaConfigForm.get("requestTimeout").hasError("min")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(64,22,"tb.rulenode.request-timeout-hint")),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(67,24,"tb.rulenode.tell-failure-aws-lambda-hint")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(70,26,"tb.rulenode.tell-failure-aws-lambda")," "))},dependencies:t.ɵɵgetComponentDepsFactory(os),encapsulation:2})}}e("LambdaConfigComponent",os);class ls{static{this.ɵfac=function(e){return new(e||ls)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:ls})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,Q,fi,Gl,Wl,os,Qo,Oo,Uo,Ho,nl,cl,Al,To,Ml,Ll]})}}e("RulenodeCoreConfigExternalModule",ls),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(ls,{declarations:[Gl,Wl,os,Qo,Oo,Uo,Ho,nl,cl,Al,To,Ml,Ll],imports:[$,S,Q,fi],exports:[Gl,Wl,os,Qo,Oo,Uo,Ho,nl,cl,Al,To,Ml,Ll]});class ss extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.searchText=""}configForm(){return this.alarmStatusConfigForm}prepareInputConfig(e){return{alarmStatusList:P(e?.alarmStatusList)?e.alarmStatusList:null}}onConfigurationSet(e){this.alarmStatusConfigForm=this.fb.group({alarmStatusList:[e.alarmStatusList,[N.required]]})}static{this.ɵfac=function(e){return new(e||ss)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ss,selectors:[["tb-filter-node-check-alarm-status-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:7,vars:2,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],[1,"tb-form-row","no-padding","no-border","space-between"],["translate","",1,"tb-form-panel-title","tb-required"],["translate","",1,"tb-form-panel-hint","tb-error",3,"hidden"],["formControlName","alarmStatusList"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.alarm-status"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",3),t.ɵɵtext(5," tb.rulenode.alarm-required "),t.ɵɵelementEnd()(),t.ɵɵelement(6,"tb-alarm-status-select",4),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.alarmStatusConfigForm),t.ɵɵadvance(4),t.ɵɵproperty("hidden",n.alarmStatusConfigForm.get("alarmStatusList").valid))},dependencies:t.ɵɵgetComponentDepsFactory(ss),encapsulation:2})}}e("CheckAlarmStatusComponent",ss);const ps=e=>({inputName:e});class ms extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.checkMessageConfigForm}prepareInputConfig(e){return{messageNames:P(e?.messageNames)?e.messageNames:[],metadataNames:P(e?.metadataNames)?e.metadataNames:[],checkAllKeys:!!P(e?.checkAllKeys)&&e.checkAllKeys}}prepareOutputConfig(e){return{messageNames:P(e?.messageNames)?e.messageNames:[],metadataNames:P(e?.metadataNames)?e.metadataNames:[],checkAllKeys:e.checkAllKeys}}atLeastOne(e,t=null){return n=>{t||(t=Object.keys(n.controls));return n?.controls&&t.some((t=>!e(n.controls[t])))?null:{atLeastOne:!0}}}onConfigurationSet(e){this.checkMessageConfigForm=this.fb.group({messageNames:[e.messageNames,[]],metadataNames:[e.metadataNames,[]],checkAllKeys:[e.checkAllKeys,[]]},{validators:this.atLeastOne(N.required,["messageNames","metadataNames"])})}get touchedValidationControl(){return["messageNames","metadataNames"].some((e=>this.checkMessageConfigForm.get(e).touched))}static{this.ɵfac=function(e){return new(e||ms)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ms,selectors:[["tb-filter-node-check-message-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:25,vars:36,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],[1,"tb-form-row","no-padding","no-border","space-between"],["translate","",1,"tb-form-panel-title","tb-required"],["translate","",1,"tb-form-panel-hint","tb-error",3,"hidden"],["editable","","subscriptSizing","dynamic","formControlName","messageNames",3,"label","placeholder"],["matSuffix","","color","primary","aria-hidden","false","aria-label","help-icon",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],["editable","","subscriptSizing","dynamic","formControlName","metadataNames",3,"label","placeholder"],[1,"tb-form-row","no-border","no-padding",3,"tb-hint-tooltip-icon"],["formControlName","checkAllKeys",1,"mat-slide"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.fields-to-check"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",3),t.ɵɵtext(5," tb.rulenode.at-least-one-field-required "),t.ɵɵelementEnd()(),t.ɵɵelementStart(6,"tb-string-items-list",4),t.ɵɵpipe(7,"translate"),t.ɵɵpipe(8,"translate"),t.ɵɵelementStart(9,"mat-icon",5),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"translate"),t.ɵɵtext(12,"help"),t.ɵɵelementEnd()(),t.ɵɵelementStart(13,"tb-string-items-list",6),t.ɵɵpipe(14,"translate"),t.ɵɵpipe(15,"translate"),t.ɵɵelementStart(16,"mat-icon",5),t.ɵɵpipe(17,"translate"),t.ɵɵpipe(18,"translate"),t.ɵɵtext(19,"help"),t.ɵɵelementEnd()(),t.ɵɵelementStart(20,"div",7),t.ɵɵpipe(21,"translate"),t.ɵɵelementStart(22,"mat-slide-toggle",8),t.ɵɵtext(23),t.ɵɵpipe(24,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.checkMessageConfigForm),t.ɵɵadvance(4),t.ɵɵproperty("hidden",!(n.touchedValidationControl&&n.checkMessageConfigForm.hasError("atLeastOne"))),t.ɵɵadvance(2),t.ɵɵproperty("label",t.ɵɵpipeBind1(7,10,"tb.rulenode.data-keys"))("placeholder",t.ɵɵpipeBind1(8,12,"tb.rulenode.add-message-field")),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(11,16,"tb.rulenode.chip-help",t.ɵɵpureFunction1(32,ps,t.ɵɵpipeBind1(10,14,"tb.rulenode.field-name")))),t.ɵɵadvance(4),t.ɵɵproperty("label",t.ɵɵpipeBind1(14,19,"tb.rulenode.metadata-keys"))("placeholder",t.ɵɵpipeBind1(15,21,"tb.rulenode.add-metadata-field")),t.ɵɵadvance(3),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(18,25,"tb.rulenode.chip-help",t.ɵɵpureFunction1(34,ps,t.ɵɵpipeBind1(17,23,"tb.rulenode.field-name")))),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(21,28,"tb.rulenode.check-all-keys-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(24,30,"tb.rulenode.check-all-keys")," "))},dependencies:t.ɵɵgetComponentDepsFactory(ms),encapsulation:2})}}function ds(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",10),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"span",11),t.ɵɵtext(4,"tb.rulenode.relations-query-config-direction-suffix"),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.entitySearchDirectionTranslationsMap.get(e))," ")}}function us(e,n){if(1&e&&t.ɵɵelement(0,"tb-entity-autocomplete",15),2&e){const e=t.ɵɵnextContext(2);t.ɵɵproperty("entityType",e.checkRelationConfigForm.get("entityType").value)}}function cs(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",12),t.ɵɵelement(1,"tb-entity-type-select",13),t.ɵɵtemplate(2,us,1,1,"tb-entity-autocomplete",14),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.checkRelationConfigForm.get("entityType").value)}}e("CheckMessageConfigComponent",ms);class gs extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.entitySearchDirection=Object.values(d),this.entitySearchDirectionTranslationsMap=b}configForm(){return this.checkRelationConfigForm}prepareInputConfig(e){return{checkForSingleEntity:!!P(e?.checkForSingleEntity)&&e.checkForSingleEntity,direction:P(e?.direction)?e.direction:null,entityType:P(e?.entityType)?e.entityType:null,entityId:P(e?.entityId)?e.entityId:null,relationType:P(e?.relationType)?e.relationType:null}}onConfigurationSet(e){this.checkRelationConfigForm=this.fb.group({checkForSingleEntity:[e.checkForSingleEntity,[]],direction:[e.direction,[]],entityType:[e.entityType,e&&e.checkForSingleEntity?[N.required]:[]],entityId:[e.entityId,e&&e.checkForSingleEntity?[N.required]:[]],relationType:[e.relationType,[N.required]]})}validatorTriggers(){return["checkForSingleEntity"]}updateValidators(e){const t=this.checkRelationConfigForm.get("checkForSingleEntity").value;this.checkRelationConfigForm.get("entityType").setValidators(t?[N.required]:[]),this.checkRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:e}),this.checkRelationConfigForm.get("entityId").setValidators(t?[N.required]:[]),this.checkRelationConfigForm.get("entityId").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||gs)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:gs,selectors:[["tb-filter-node-check-relation-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:17,vars:12,consts:[[1,"tb-form-panel","stroked","no-padding-bottom",3,"formGroup"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-col"],["hideRequiredMarker","",1,"mat-block"],["formControlName","direction","required",""],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","relationType"],[1,"tb-form-row","no-border","no-padding","slide-toggle",3,"tb-hint-tooltip-icon"],["formControlName","checkForSingleEntity",1,"mat-slide"],["class","same-width-component-row",4,"ngIf"],[3,"value"],["translate",""],[1,"same-width-component-row"],["showLabel","","required","","formControlName","entityType",2,"min-width","100px","flex","1"],["class","flex-1","required","","formControlName","entityId",3,"entityType",4,"ngIf"],["required","","formControlName","entityId",1,"flex-1",3,"entityType"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.relation-search-parameters"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"div",2)(4,"mat-form-field",3)(5,"mat-label"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-select",4),t.ɵɵtemplate(9,ds,5,4,"mat-option",5),t.ɵɵelementEnd()(),t.ɵɵelement(10,"tb-relation-type-autocomplete",6),t.ɵɵelementStart(11,"div",7),t.ɵɵpipe(12,"translate"),t.ɵɵelementStart(13,"mat-slide-toggle",8),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(16,cs,3,1,"div",9),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.checkRelationConfigForm),t.ɵɵadvance(6),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,6,"relation.direction")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.entitySearchDirection),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(12,8,"tb.rulenode.check-relation-to-specific-entity-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(15,10,"tb.rulenode.check-relation-to-specific-entity")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.checkRelationConfigForm.get("checkForSingleEntity").value))},dependencies:t.ɵɵgetComponentDepsFactory(gs),styles:["[_nghost-%COMP%]   .slide-toggle[_ngcontent-%COMP%]{margin-bottom:18px}"]})}}e("CheckRelationConfigComponent",gs);const fs=e=>({perimeterKeyName:e});function hs(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.latitude-field-name-required")," "))}function ys(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.longitude-field-name-required")," "))}function bs(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",18),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.perimeterTypeTranslationMap.get(e))," ")}}function vs(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.perimeter-key-name-required")," "))}function xs(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",19)(1,"mat-label"),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",20),t.ɵɵtemplate(5,vs,3,3,"mat-error",6),t.ɵɵelementStart(6,"mat-hint"),t.ɵɵtext(7),t.ɵɵpipe(8,"translate"),t.ɵɵelementEnd()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(3,3,"tb.rulenode.perimeter-key-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoFilterConfigForm.get("perimeterKeyName").hasError("required")),t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(8,5,"tb.rulenode.perimeter-key-name-hint"))}}function Cs(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.circle-center-latitude-required")," "))}function Ss(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.circle-center-longitude-required")," "))}function Ts(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.range-required")," "))}function Is(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",18),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext(2);t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.rangeUnitTranslationMap.get(e))," ")}}function Es(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.range-units-required")," "))}function Fs(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",9)(1,"div",3)(2,"mat-form-field",21)(3,"mat-label"),t.ɵɵtext(4),t.ɵɵpipe(5,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(6,"input",22),t.ɵɵtemplate(7,Cs,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(8,"mat-form-field",21)(9,"mat-label"),t.ɵɵtext(10),t.ɵɵpipe(11,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(12,"input",23),t.ɵɵtemplate(13,Ss,3,3,"mat-error",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(14,"div",3)(15,"mat-form-field",21)(16,"mat-label"),t.ɵɵtext(17),t.ɵɵpipe(18,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(19,"input",24),t.ɵɵtemplate(20,Ts,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"mat-form-field",21)(22,"mat-label"),t.ɵɵtext(23),t.ɵɵpipe(24,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(25,"mat-select",25),t.ɵɵtemplate(26,Is,3,4,"mat-option",12),t.ɵɵelementEnd(),t.ɵɵtemplate(27,Es,3,3,"mat-error",6),t.ɵɵelementEnd()()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(5,9,"tb.rulenode.circle-center-latitude")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoFilterConfigForm.get("centerLatitude").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(11,11,"tb.rulenode.circle-center-longitude")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoFilterConfigForm.get("centerLongitude").hasError("required")),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(18,13,"tb.rulenode.range")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",e.geoFilterConfigForm.get("range").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(24,15,"tb.rulenode.range-units")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",e.rangeUnits),t.ɵɵadvance(),t.ɵɵproperty("ngIf",e.geoFilterConfigForm.get("rangeUnit").hasError("required"))}}function qs(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.polygon-definition-required")," "))}function As(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-form-field",26)(1,"mat-label"),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"input",27),t.ɵɵelementStart(5,"mat-hint"),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(8,qs,3,3,"mat-error",6),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(2),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(3,3,"tb.rulenode.polygon-definition")),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(7,5,"tb.rulenode.polygon-definition-hint")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",e.geoFilterConfigForm.get("polygonsDefinition").hasError("required"))}}class ks extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.perimeterType=gt,this.perimeterTypes=Object.values(gt),this.perimeterTypeTranslationMap=ft,this.rangeUnits=Object.values(bt),this.rangeUnitTranslationMap=vt,this.defaultPaddingEnable=!0}configForm(){return this.geoFilterConfigForm}prepareInputConfig(e){return{latitudeKeyName:P(e?.latitudeKeyName)?e.latitudeKeyName:null,longitudeKeyName:P(e?.longitudeKeyName)?e.longitudeKeyName:null,perimeterType:P(e?.perimeterType)?e.perimeterType:null,fetchPerimeterInfoFromMessageMetadata:!!P(e?.fetchPerimeterInfoFromMessageMetadata)&&e.fetchPerimeterInfoFromMessageMetadata,perimeterKeyName:P(e?.perimeterKeyName)?e.perimeterKeyName:null,centerLatitude:P(e?.centerLatitude)?e.centerLatitude:null,centerLongitude:P(e?.centerLongitude)?e.centerLongitude:null,range:P(e?.range)?e.range:null,rangeUnit:P(e?.rangeUnit)?e.rangeUnit:null,polygonsDefinition:P(e?.polygonsDefinition)?e.polygonsDefinition:null}}onConfigurationSet(e){this.geoFilterConfigForm=this.fb.group({latitudeKeyName:[e.latitudeKeyName,[N.required]],longitudeKeyName:[e.longitudeKeyName,[N.required]],perimeterType:[e.perimeterType,[N.required]],fetchPerimeterInfoFromMessageMetadata:[e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterKeyName:[e.perimeterKeyName,[]],centerLatitude:[e.centerLatitude,[]],centerLongitude:[e.centerLongitude,[]],range:[e.range,[]],rangeUnit:[e.rangeUnit,[]],polygonsDefinition:[e.polygonsDefinition,[]]})}validatorTriggers(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]}updateValidators(e){const t=this.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,n=this.geoFilterConfigForm.get("perimeterType").value;t?this.geoFilterConfigForm.get("perimeterKeyName").setValidators([N.required]):this.geoFilterConfigForm.get("perimeterKeyName").setValidators([]),t||n!==gt.CIRCLE?(this.geoFilterConfigForm.get("centerLatitude").setValidators([]),this.geoFilterConfigForm.get("centerLongitude").setValidators([]),this.geoFilterConfigForm.get("range").setValidators([]),this.geoFilterConfigForm.get("rangeUnit").setValidators([]),this.defaultPaddingEnable=!0):(this.geoFilterConfigForm.get("centerLatitude").setValidators([N.required,N.min(-90),N.max(90)]),this.geoFilterConfigForm.get("centerLongitude").setValidators([N.required,N.min(-180),N.max(180)]),this.geoFilterConfigForm.get("range").setValidators([N.required,N.min(0)]),this.geoFilterConfigForm.get("rangeUnit").setValidators([N.required]),this.defaultPaddingEnable=!1),t||n!==gt.POLYGON?this.geoFilterConfigForm.get("polygonsDefinition").setValidators([]):this.geoFilterConfigForm.get("polygonsDefinition").setValidators([N.required]),this.geoFilterConfigForm.get("perimeterKeyName").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||ks)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:ks,selectors:[["tb-filter-node-gps-geofencing-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:39,vars:32,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],["translate","",1,"tb-form-panel-title"],[1,"flex","flex-row","gap-4"],[1,"mat-block","max-w-50%","flex-full"],["matInput","","formControlName","latitudeKeyName","required",""],[4,"ngIf"],["matInput","","formControlName","longitudeKeyName","required",""],["translate","",1,"tb-form-hint","tb-primary-fill"],[1,"flex","flex-col"],["hideRequiredMarker","",1,"mat-block","flex-1"],["formControlName","perimeterType"],[3,"value",4,"ngFor","ngForOf"],[1,"tb-form-row","no-border","no-padding","slide-toggle",3,"tb-hint-tooltip-icon"],["formControlName","fetchPerimeterInfoFromMessageMetadata",1,"mat-slide"],["class","mat-block",4,"ngIf"],["class","flex flex-col",4,"ngIf"],["class","mat-block","subscriptSizing","dynamic",4,"ngIf"],[3,"value"],[1,"mat-block"],["matInput","","formControlName","perimeterKeyName","required",""],[1,"flex-1"],["type","number","min","-90","max","90","step","0.1","matInput","","formControlName","centerLatitude","required",""],["type","number","min","-180","max","180","step","0.1","matInput","","formControlName","centerLongitude","required",""],["type","number","min","0","step","0.1","matInput","","formControlName","range","required",""],["formControlName","rangeUnit","required",""],["subscriptSizing","dynamic",1,"mat-block"],["matInput","","formControlName","polygonsDefinition","required",""]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"section",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.coordinate-field-names"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"section")(5,"div",3)(6,"mat-form-field",4)(7,"mat-label"),t.ɵɵtext(8),t.ɵɵpipe(9,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(10,"input",5),t.ɵɵtemplate(11,hs,3,3,"mat-error",6),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-form-field",4)(13,"mat-label"),t.ɵɵtext(14),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(16,"input",7),t.ɵɵtemplate(17,ys,3,3,"mat-error",6),t.ɵɵelementEnd()(),t.ɵɵelementStart(18,"div",8),t.ɵɵtext(19,"tb.rulenode.coordinate-field-hint"),t.ɵɵelementEnd()()(),t.ɵɵelementStart(20,"section",1)(21,"div",2),t.ɵɵtext(22,"tb.rulenode.geofence-configuration"),t.ɵɵelementEnd(),t.ɵɵelementStart(23,"section",9)(24,"mat-form-field",10)(25,"mat-label"),t.ɵɵtext(26),t.ɵɵpipe(27,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(28,"mat-select",11),t.ɵɵtemplate(29,bs,3,4,"mat-option",12),t.ɵɵelementEnd()(),t.ɵɵelementStart(30,"div",13),t.ɵɵpipe(31,"translate"),t.ɵɵpipe(32,"translate"),t.ɵɵelementStart(33,"mat-slide-toggle",14),t.ɵɵtext(34),t.ɵɵpipe(35,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(36,xs,9,7,"mat-form-field",15)(37,Fs,28,17,"div",16)(38,As,9,7,"mat-form-field",17),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.geoFilterConfigForm),t.ɵɵadvance(8),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(9,14,"tb.rulenode.latitude-field-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.geoFilterConfigForm.get("latitudeKeyName").hasError("required")),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(15,16,"tb.rulenode.longitude-field-name")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.geoFilterConfigForm.get("longitudeKeyName").hasError("required")),t.ɵɵadvance(3),t.ɵɵclassProp("no-padding-bottom",!n.defaultPaddingEnable),t.ɵɵadvance(6),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(27,18,"tb.rulenode.perimeter-type")),t.ɵɵadvance(3),t.ɵɵproperty("ngForOf",n.perimeterTypes),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",n.geoFilterConfigForm.get("perimeterType").value===n.perimeterType.CIRCLE?t.ɵɵpipeBind2(31,20,"tb.rulenode.fetch-circle-parameter-info-from-metadata-hint",t.ɵɵpureFunction1(28,fs,n.geoFilterConfigForm.get("perimeterKeyName").valid?n.geoFilterConfigForm.get("perimeterKeyName").value:"ss_perimeter")):t.ɵɵpipeBind2(32,23,"tb.rulenode.fetch-poligon-parameter-info-from-metadata-hint",t.ɵɵpureFunction1(30,fs,n.geoFilterConfigForm.get("perimeterKeyName").valid?n.geoFilterConfigForm.get("perimeterKeyName").value:"ss_perimeter"))),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(35,26,"tb.rulenode.fetch-perimeter-info-from-metadata")," "),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.geoFilterConfigForm.get("perimeterType").value===n.perimeterType.CIRCLE&&!n.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.geoFilterConfigForm.get("perimeterType").value===n.perimeterType.POLYGON&&!n.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value))},dependencies:t.ɵɵgetComponentDepsFactory(ks),styles:["[_nghost-%COMP%]   .slide-toggle[_ngcontent-%COMP%]{margin-bottom:18px}"]})}}e("GpsGeoFilterConfigComponent",ks);class Ns extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.messageTypeConfigForm}prepareInputConfig(e){return{messageTypes:P(e?.messageTypes)?e.messageTypes:null}}onConfigurationSet(e){this.messageTypeConfigForm=this.fb.group({messageTypes:[e.messageTypes,[N.required]]})}static{this.ɵfac=function(e){return new(e||Ns)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ns,selectors:[["tb-filter-node-message-type-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:3,vars:4,consts:[[3,"formGroup"],["required","","formControlName","messageTypes",3,"label"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-message-types-config",1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.messageTypeConfigForm),t.ɵɵadvance(),t.ɵɵproperty("label",t.ɵɵpipeBind1(2,2,"tb.rulenode.select-message-types")))},dependencies:t.ɵɵgetComponentDepsFactory(Ns),encapsulation:2})}}e("MessageTypeConfigComponent",Ns);const ws=e=>({inputName:e});class Ms extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.allowedEntityTypes=[u.DEVICE,u.ASSET,u.ENTITY_VIEW,u.TENANT,u.CUSTOMER,u.USER,u.DASHBOARD,u.RULE_CHAIN,u.RULE_NODE,u.EDGE]}configForm(){return this.originatorTypeConfigForm}prepareInputConfig(e){return{originatorTypes:P(e?.originatorTypes)?e.originatorTypes:null}}onConfigurationSet(e){this.originatorTypeConfigForm=this.fb.group({originatorTypes:[e.originatorTypes,[N.required]]})}static{this.ɵfac=function(e){return new(e||Ms)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Ms,selectors:[["tb-filter-node-originator-type-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:9,vars:20,consts:[[3,"formGroup"],["formControlName","originatorTypes","required","",1,"flex-1",3,"allowedEntityTypes","ignoreAuthorityFilter","emptyInputPlaceholder","filledInputPlaceholder","label"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"tb-entity-type-list",1),t.ɵɵpipe(2,"translate"),t.ɵɵpipe(3,"translate"),t.ɵɵpipe(4,"translate"),t.ɵɵelementStart(5,"mat-icon",2),t.ɵɵpipe(6,"translate"),t.ɵɵpipe(7,"translate"),t.ɵɵtext(8,"help"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.originatorTypeConfigForm),t.ɵɵadvance(),t.ɵɵproperty("allowedEntityTypes",n.allowedEntityTypes)("ignoreAuthorityFilter",!0)("emptyInputPlaceholder",t.ɵɵpipeBind1(2,7,"tb.rulenode.add-entity-type"))("filledInputPlaceholder",t.ɵɵpipeBind1(3,9,"tb.rulenode.add-entity-type"))("label",t.ɵɵpipeBind1(4,11,"tb.rulenode.select-entity-types")),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind2(7,15,"tb.rulenode.chip-help",t.ɵɵpureFunction1(18,ws,t.ɵɵpipeBind1(6,13,"tb.rulenode.entity-type")))))},dependencies:t.ɵɵgetComponentDepsFactory(Ms),encapsulation:2})}}e("OriginatorTypeConfigComponent",Ms);const Vs=["jsFuncComponent"],Bs=["tbelFuncComponent"],Os=()=>["msg","metadata","msgType"];function Ds(e,n){1&e&&t.ɵɵelement(0,"tb-script-lang",7)}function Ls(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",8,0)(2,"button",9),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",10),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(4,Os)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,2,e.testScriptLabel))}}function Ps(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",11,1)(2,"button",9),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",10),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(6,Os))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,4,e.testScriptLabel))}}class Rs extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-filter-function"}configForm(){return this.scriptConfigForm}onConfigurationSet(e){this.scriptConfigForm=this.fb.group({scriptLang:[e.scriptLang,[N.required]],jsScript:[e.jsScript,[]],tbelScript:[e.tbelScript,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.scriptConfigForm.get("scriptLang").value;t!==s.TBEL||this.tbelEnabled||(t=s.JS,this.scriptConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.scriptConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.scriptConfigForm.get("jsScript").setValidators(t===s.JS?[N.required]:[]),this.scriptConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.scriptConfigForm.get("tbelScript").setValidators(t===s.TBEL?[N.required]:[]),this.scriptConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=s.JS)),{scriptLang:P(e?.scriptLang)?e.scriptLang:s.JS,jsScript:P(e?.jsScript)?e.jsScript:null,tbelScript:P(e?.tbelScript)?e.tbelScript:null}}testScript(e){const t=this.scriptConfigForm.get("scriptLang").value,n=t===s.JS?"jsScript":"tbelScript",r=t===s.JS?"rulenode/filter_node_script_fn":"rulenode/tbel/filter_node_script_fn",a=this.scriptConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"filter",this.translate.instant("tb.rulenode.filter"),"Filter",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.scriptConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.scriptConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}static{this.ɵfac=function(e){return new(e||Rs)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Rs,selectors:[["tb-filter-node-script-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(Vs,5),t.ɵɵviewQuery(Bs,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:7,vars:7,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],[3,"formGroup"],["formControlName","scriptLang",4,"ngIf"],["formControlName","jsScript","functionName","Filter","helpId","rulenode/filter_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","tbelScript","functionName","Filter","helpId","rulenode/tbel/filter_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["formControlName","scriptLang"],["formControlName","jsScript","functionName","Filter","helpId","rulenode/filter_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["formControlName","tbelScript","functionName","Filter","helpId","rulenode/tbel/filter_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",2),t.ɵɵtemplate(1,Ds,1,0,"tb-script-lang",3)(2,Ls,6,5,"tb-js-func",4)(3,Ps,6,7,"tb-js-func",5),t.ɵɵelementStart(4,"button",6),t.ɵɵlistener("click",(function(){return n.testScript()})),t.ɵɵtext(5),t.ɵɵpipe(6,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.scriptConfigForm),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.tbelEnabled),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.scriptConfigForm.get("scriptLang").value===n.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.scriptConfigForm.get("scriptLang").value===n.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(6,5,n.testScriptLabel)," "))},dependencies:t.ɵɵgetComponentDepsFactory(Rs),encapsulation:2})}}e("ScriptConfigComponent",Rs);const _s=["jsFuncComponent"],js=["tbelFuncComponent"],Gs=()=>["msg","metadata","msgType"];function Ks(e,n){1&e&&t.ɵɵelement(0,"tb-script-lang",7)}function Us(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",8,0)(2,"button",9),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",10),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(4,Gs)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,2,e.testScriptLabel))}}function Hs(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",11,1)(2,"button",9),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",10),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(6,Gs))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,4,e.testScriptLabel))}}class zs extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-switch-function"}configForm(){return this.switchConfigForm}onConfigurationSet(e){this.switchConfigForm=this.fb.group({scriptLang:[e.scriptLang,[N.required]],jsScript:[e.jsScript,[]],tbelScript:[e.tbelScript,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.switchConfigForm.get("scriptLang").value;t!==s.TBEL||this.tbelEnabled||(t=s.JS,this.switchConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.switchConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.switchConfigForm.get("jsScript").setValidators(t===s.JS?[N.required]:[]),this.switchConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.switchConfigForm.get("tbelScript").setValidators(t===s.TBEL?[N.required]:[]),this.switchConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=s.JS)),{scriptLang:P(e?.scriptLang)?e.scriptLang:s.JS,jsScript:P(e?.jsScript)?e.jsScript:null,tbelScript:P(e?.tbelScript)?e.tbelScript:null}}testScript(e){const t=this.switchConfigForm.get("scriptLang").value,n=t===s.JS?"jsScript":"tbelScript",r=t===s.JS?"rulenode/switch_node_script_fn":"rulenode/tbel/switch_node_script_fn",a=this.switchConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"switch",this.translate.instant("tb.rulenode.switch"),"Switch",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.switchConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.switchConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}static{this.ɵfac=function(e){return new(e||zs)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:zs,selectors:[["tb-filter-node-switch-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(_s,5),t.ɵɵviewQuery(js,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:7,vars:7,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],[3,"formGroup"],["formControlName","scriptLang",4,"ngIf"],["formControlName","jsScript","functionName","Switch","helpId","rulenode/switch_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","tbelScript","functionName","Switch","helpId","rulenode/tbel/switch_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["formControlName","scriptLang"],["formControlName","jsScript","functionName","Switch","helpId","rulenode/switch_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["formControlName","tbelScript","functionName","Switch","helpId","rulenode/tbel/switch_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",2),t.ɵɵtemplate(1,Ks,1,0,"tb-script-lang",3)(2,Us,6,5,"tb-js-func",4)(3,Hs,6,7,"tb-js-func",5),t.ɵɵelementStart(4,"button",6),t.ɵɵlistener("click",(function(){return n.testScript()})),t.ɵɵtext(5),t.ɵɵpipe(6,"translate"),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.switchConfigForm),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.tbelEnabled),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.switchConfigForm.get("scriptLang").value===n.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.switchConfigForm.get("scriptLang").value===n.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(6,5,n.testScriptLabel)," "))},dependencies:t.ɵɵgetComponentDepsFactory(zs),encapsulation:2})}}e("SwitchConfigComponent",zs);class $s{static{this.ɵfac=function(e){return new(e||$s)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:$s})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,fi,ms,gs,ks,Ns,Ms,Rs,zs,ss]})}}function Qs(e,n){if(1&e&&(t.ɵɵelementStart(0,"span"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,e.originatorSourceTranslationMap.get(e.changeOriginatorConfigForm.get("originatorSource").value))," ")}}function Js(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",8)(1,"span",9),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"br"),t.ɵɵelementStart(5,"small",10),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,3,r.originatorSourceTranslationMap.get(e))," "),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,5,r.originatorSourceDescTranslationMap.get(e))," ")}}function Ys(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.entity-name-pattern-required")," "))}function Ws(e,n){if(1&e&&(t.ɵɵelementStart(0,"div",11),t.ɵɵelement(1,"tb-example-hint",12),t.ɵɵelementStart(2,"div",13),t.ɵɵelement(3,"tb-entity-type-select",14),t.ɵɵelementStart(4,"mat-form-field",15)(5,"mat-label",2),t.ɵɵtext(6,"tb.rulenode.entity-name-pattern"),t.ɵɵelementEnd(),t.ɵɵelement(7,"input",16),t.ɵɵtemplate(8,Ys,3,3,"mat-error",4),t.ɵɵelementEnd()()()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵproperty("hintText","tb.rulenode.entity-name-pattern-hint"),t.ɵɵadvance(2),t.ɵɵproperty("allowedEntityTypes",e.allowedEntityTypes),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",e.changeOriginatorConfigForm.get("entityNamePattern").hasError("required")||e.changeOriginatorConfigForm.get("entityNamePattern").hasError("pattern"))}}function Xs(e,n){1&e&&t.ɵɵelement(0,"tb-relations-query-config",17)}e("RuleNodeCoreConfigFilterModule",$s),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope($s,{declarations:[ms,gs,ks,Ns,Ms,Rs,zs,ss],imports:[$,S,fi],exports:[ms,gs,ks,Ns,Ms,Rs,zs,ss]});class Zs extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.originatorSource=pt,this.originatorSources=Object.keys(pt),this.originatorSourceTranslationMap=mt,this.originatorSourceDescTranslationMap=dt,this.allowedEntityTypes=[u.DEVICE,u.ASSET,u.ENTITY_VIEW,u.USER,u.EDGE]}configForm(){return this.changeOriginatorConfigForm}onConfigurationSet(e){this.changeOriginatorConfigForm=this.fb.group({originatorSource:[e?e.originatorSource:null,[N.required]],entityType:[e?e.entityType:null,[]],entityNamePattern:[e?e.entityNamePattern:null,[]],relationsQuery:[e?e.relationsQuery:null,[]]})}validatorTriggers(){return["originatorSource"]}updateValidators(e){const t=this.changeOriginatorConfigForm.get("originatorSource").value;t===pt.RELATED?this.changeOriginatorConfigForm.get("relationsQuery").setValidators([N.required]):this.changeOriginatorConfigForm.get("relationsQuery").setValidators([]),t===pt.ENTITY?(this.changeOriginatorConfigForm.get("entityType").setValidators([N.required]),this.changeOriginatorConfigForm.get("entityNamePattern").setValidators([N.required,N.pattern(/.*\S.*/)])):(this.changeOriginatorConfigForm.get("entityType").patchValue(null,{emitEvent:e}),this.changeOriginatorConfigForm.get("entityNamePattern").patchValue(null,{emitEvent:e}),this.changeOriginatorConfigForm.get("entityType").setValidators([]),this.changeOriginatorConfigForm.get("entityNamePattern").setValidators([])),this.changeOriginatorConfigForm.get("relationsQuery").updateValueAndValidity({emitEvent:e}),this.changeOriginatorConfigForm.get("entityType").updateValueAndValidity({emitEvent:e}),this.changeOriginatorConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e})}static{this.ɵfac=function(e){return new(e||Zs)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Zs,selectors:[["tb-transformation-node-change-originator-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:10,vars:5,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],["subscriptSizing","dynamic","hideRequiredMarker","",1,"mat-block"],["translate",""],["formControlName","originatorSource","required",""],[4,"ngIf"],[3,"value",4,"ngFor","ngForOf"],["class","tb-form-panel stroked no-padding-bottom",4,"ngIf"],["required","","formControlName","relationsQuery",4,"ngIf"],[3,"value"],["matListItemTitle",""],["matListItemMeta","",2,"color","inherit"],[1,"tb-form-panel","stroked","no-padding-bottom"],["popupHelpLink","rulenode/change_originator_node_fields_templatization",3,"hintText"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],["showLabel","","required","","formControlName","entityType",1,"mat-mdc-form-field","flex",3,"allowedEntityTypes"],[1,"flex"],["required","","matInput","","formControlName","entityNamePattern"],["required","","formControlName","relationsQuery"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label",2),t.ɵɵtext(3,"tb.rulenode.new-originator"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"mat-select",3)(5,"mat-select-trigger"),t.ɵɵtemplate(6,Qs,3,3,"span",4),t.ɵɵelementEnd(),t.ɵɵtemplate(7,Js,8,7,"mat-option",5),t.ɵɵelementEnd()(),t.ɵɵtemplate(8,Ws,9,3,"div",6)(9,Xs,1,0,"tb-relations-query-config",7),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.changeOriginatorConfigForm),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.originatorSourceTranslationMap.get(n.changeOriginatorConfigForm.get("originatorSource").value)),t.ɵɵadvance(),t.ɵɵproperty("ngForOf",n.originatorSources),t.ɵɵadvance(),t.ɵɵproperty("ngIf","ENTITY"===n.changeOriginatorConfigForm.get("originatorSource").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.changeOriginatorConfigForm.get("originatorSource").value===n.originatorSource.RELATED))},dependencies:t.ɵɵgetComponentDepsFactory(Zs),encapsulation:2})}}e("ChangeOriginatorConfigComponent",Zs);const ep=["jsFuncComponent"],tp=["tbelFuncComponent"],np=()=>["msg","metadata","msgType"];function rp(e,n){1&e&&t.ɵɵelement(0,"tb-script-lang",7)}function ap(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",8,0)(2,"button",9),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",10),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(4,np)),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,2,e.testScriptLabel))}}function ip(e,n){if(1&e){const e=t.ɵɵgetCurrentView();t.ɵɵelementStart(0,"tb-js-func",11,1)(2,"button",9),t.ɵɵpipe(3,"translate"),t.ɵɵlistener("click",(function(){t.ɵɵrestoreView(e);const n=t.ɵɵnextContext();return t.ɵɵresetView(n.testScript())})),t.ɵɵelementStart(4,"mat-icon",10),t.ɵɵtext(5,"bug_report"),t.ɵɵelementEnd()()()}if(2&e){const e=t.ɵɵnextContext();t.ɵɵproperty("functionArgs",t.ɵɵpureFunction0(6,np))("disableUndefinedCheck",!0)("scriptLanguage",e.scriptLanguage.TBEL),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(3,4,e.testScriptLabel))}}class op extends i{constructor(e,t,r,a){super(e),this.store=e,this.fb=t,this.nodeScriptTestService=r,this.translate=a,this.tbelEnabled=D(this.store).tbelEnabled,this.scriptLanguage=s,this.changeScript=new n,this.hasScript=!0,this.testScriptLabel="tb.rulenode.test-transformer-function"}configForm(){return this.scriptConfigForm}onConfigurationSet(e){this.scriptConfigForm=this.fb.group({scriptLang:[e?e.scriptLang:s.JS,[N.required]],jsScript:[e?e.jsScript:null,[N.required]],tbelScript:[e?e.tbelScript:null,[]]})}validatorTriggers(){return["scriptLang"]}updateValidators(e){let t=this.scriptConfigForm.get("scriptLang").value;t!==s.TBEL||this.tbelEnabled||(t=s.JS,this.scriptConfigForm.get("scriptLang").patchValue(t,{emitEvent:!1}),setTimeout((()=>{this.scriptConfigForm.updateValueAndValidity({emitEvent:!0})}))),this.scriptConfigForm.get("jsScript").setValidators(t===s.JS?[N.required]:[]),this.scriptConfigForm.get("jsScript").updateValueAndValidity({emitEvent:e}),this.scriptConfigForm.get("tbelScript").setValidators(t===s.TBEL?[N.required]:[]),this.scriptConfigForm.get("tbelScript").updateValueAndValidity({emitEvent:e})}prepareInputConfig(e){return e&&(e.scriptLang||(e.scriptLang=s.JS)),e}testScript(e){const t=this.scriptConfigForm.get("scriptLang").value,n=t===s.JS?"jsScript":"tbelScript",r=t===s.JS?"rulenode/transformation_node_script_fn":"rulenode/tbel/transformation_node_script_fn",a=this.scriptConfigForm.get(n).value;this.nodeScriptTestService.testNodeScript(a,"update",this.translate.instant("tb.rulenode.transformer"),"Transform",["msg","metadata","msgType"],this.ruleNodeId,r,t,e).subscribe((e=>{e&&(this.scriptConfigForm.get(n).setValue(e),this.changeScript.emit())}))}onValidate(){this.scriptConfigForm.get("scriptLang").value===s.JS&&this.jsFuncComponent.validateOnSubmit()}static{this.ɵfac=function(e){return new(e||op)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(L.NodeScriptTestService),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:op,selectors:[["tb-transformation-node-script-config"]],viewQuery:function(e,n){if(1&e&&(t.ɵɵviewQuery(ep,5),t.ɵɵviewQuery(tp,5)),2&e){let e;t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.jsFuncComponent=e.first),t.ɵɵqueryRefresh(e=t.ɵɵloadQuery())&&(n.tbelFuncComponent=e.first)}},features:[t.ɵɵInheritDefinitionFeature],decls:8,vars:7,consts:[["jsFuncComponent",""],["tbelFuncComponent",""],[3,"formGroup"],["formControlName","scriptLang",4,"ngIf"],["formControlName","jsScript","functionName","Transform","helpId","rulenode/transformation_node_script_fn","noValidate","true",3,"functionArgs",4,"ngIf"],["formControlName","tbelScript","functionName","Transform","helpId","rulenode/tbel/transformation_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage",4,"ngIf"],["mat-button","","mat-raised-button","","color","primary",3,"click"],["formControlName","scriptLang"],["formControlName","jsScript","functionName","Transform","helpId","rulenode/transformation_node_script_fn","noValidate","true",3,"functionArgs"],["toolbarSuffixButton","","mat-icon-button","","matTooltipPosition","above",1,"tb-mat-32",3,"click","matTooltip"],["color","primary",1,"material-icons"],["formControlName","tbelScript","functionName","Transform","helpId","rulenode/tbel/transformation_node_script_fn","noValidate","true",3,"functionArgs","disableUndefinedCheck","scriptLanguage"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",2),t.ɵɵtemplate(1,rp,1,0,"tb-script-lang",3)(2,ap,6,5,"tb-js-func",4)(3,ip,6,7,"tb-js-func",5),t.ɵɵelementStart(4,"div")(5,"button",6),t.ɵɵlistener("click",(function(){return n.testScript()})),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.scriptConfigForm),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.tbelEnabled),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.scriptConfigForm.get("scriptLang").value===n.scriptLanguage.JS),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.scriptConfigForm.get("scriptLang").value===n.scriptLanguage.TBEL),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,5,n.testScriptLabel)," "))},dependencies:t.ɵɵgetComponentDepsFactory(op),encapsulation:2})}}e("TransformScriptConfigComponent",op);const lp=()=>({maxWidth:"820px"});function sp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.from-template-required")," "))}function pp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.to-template-required")," "))}function mp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.subject-template-required")," "))}function dp(e,n){if(1&e&&(t.ɵɵelementStart(0,"span"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=t.ɵɵnextContext();t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,e.getBodyTypeName())," ")}}function up(e,n){if(1&e&&(t.ɵɵelementStart(0,"mat-option",24)(1,"span",25),t.ɵɵtext(2),t.ɵɵpipe(3,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(4,"br"),t.ɵɵelementStart(5,"small",26),t.ɵɵtext(6),t.ɵɵpipe(7,"translate"),t.ɵɵelementEnd()()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(2),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(3,3,e.name)," "),t.ɵɵadvance(4),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(7,5,e.description)," ")}}function cp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-form-field",18)(1,"mat-label",5),t.ɵɵtext(2,"tb.rulenode.body-type-template"),t.ɵɵelementEnd(),t.ɵɵelement(3,"input",27),t.ɵɵelementStart(4,"mat-hint",5),t.ɵɵtext(5,"tb.mail-body-type.after-template-evaluation-hint"),t.ɵɵelementEnd()())}function gp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.body-template-required")," "))}class fp extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.mailBodyTypes=[{name:"tb.mail-body-type.plain-text",description:"tb.mail-body-type.plain-text-description",value:"false"},{name:"tb.mail-body-type.html",description:"tb.mail-body-type.html-text-description",value:"true"},{name:"tb.mail-body-type.use-body-type-template",description:"tb.mail-body-type.dynamic-text-description",value:"dynamic"}]}configForm(){return this.toEmailConfigForm}onConfigurationSet(e){this.toEmailConfigForm=this.fb.group({fromTemplate:[e?e.fromTemplate:null,[N.required]],toTemplate:[e?e.toTemplate:null,[N.required]],ccTemplate:[e?e.ccTemplate:null,[]],bccTemplate:[e?e.bccTemplate:null,[]],subjectTemplate:[e?e.subjectTemplate:null,[N.required]],mailBodyType:[e?e.mailBodyType:null],isHtmlTemplate:[e?e.isHtmlTemplate:null,[N.required]],bodyTemplate:[e?e.bodyTemplate:null,[N.required]]})}prepareInputConfig(e){return{fromTemplate:P(e?.fromTemplate)?e.fromTemplate:null,toTemplate:P(e?.toTemplate)?e.toTemplate:null,ccTemplate:P(e?.ccTemplate)?e.ccTemplate:null,bccTemplate:P(e?.bccTemplate)?e.bccTemplate:null,subjectTemplate:P(e?.subjectTemplate)?e.subjectTemplate:null,mailBodyType:P(e?.mailBodyType)?e.mailBodyType:null,isHtmlTemplate:P(e?.isHtmlTemplate)?e.isHtmlTemplate:null,bodyTemplate:P(e?.bodyTemplate)?e.bodyTemplate:null}}updateValidators(e){"dynamic"===this.toEmailConfigForm.get("mailBodyType").value?this.toEmailConfigForm.get("isHtmlTemplate").enable({emitEvent:!1}):this.toEmailConfigForm.get("isHtmlTemplate").disable({emitEvent:!1}),this.toEmailConfigForm.get("isHtmlTemplate").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["mailBodyType"]}getBodyTypeName(){return this.mailBodyTypes.find((e=>e.value===this.toEmailConfigForm.get("mailBodyType").value)).name}static{this.ɵfac=function(e){return new(e||fp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:fp,selectors:[["tb-transformation-node-to-email-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:61,vars:23,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],[1,"tb-form-panel","stroked"],["translate","",1,"tb-form-panel-title"],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],["subscriptSizing","dynamic",1,"flex"],["translate",""],["required","","matInput","","formControlName","fromTemplate"],["align","start"],["align","end"],[1,"input-bottom-double-hint"],["hintMode","","tb-help-popup-placement","right","trigger-style","letter-spacing:0.25px; font-size:12px;",1,"see-example",3,"tb-help-popup","tb-help-popup-style","trigger-text"],[4,"ngIf"],[1,"tb-form-panel","no-padding","no-border"],["popupHelpLink","rulenode/to_email_node_fields_templatization",3,"hintText"],[1,"flex"],["required","","matInput","","formControlName","toTemplate","cdkTextareaAutosize","","cdkAutosizeMinRows","1",1,"tb-enable-vertical-resize"],["matInput","","formControlName","ccTemplate","cdkTextareaAutosize","","cdkAutosizeMinRows","1",1,"tb-enable-vertical-resize"],["matInput","","formControlName","bccTemplate","cdkTextareaAutosize","","cdkAutosizeMinRows","1",1,"tb-enable-vertical-resize"],[1,"mat-block"],["required","","matInput","","formControlName","subjectTemplate","cdkTextareaAutosize","","cdkAutosizeMinRows","1",1,"tb-enable-vertical-resize"],["formControlName","mailBodyType"],[3,"value",4,"ngFor","ngForOf"],["class","mat-block",4,"ngIf"],["required","","matInput","","formControlName","bodyTemplate","cdkTextareaAutosize","","cdkAutosizeMinRows","2",1,"tb-enable-vertical-resize"],[3,"value"],["matListItemTitle",""],["matListItemMeta","",2,"color","inherit"],["required","","matInput","","formControlName","isHtmlTemplate"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵtext(3,"tb.rulenode.email-sender"),t.ɵɵelementEnd(),t.ɵɵelementStart(4,"div",3)(5,"mat-form-field",4)(6,"mat-label",5),t.ɵɵtext(7,"tb.rulenode.from-template"),t.ɵɵelementEnd(),t.ɵɵelement(8,"input",6),t.ɵɵelementStart(9,"mat-hint",7),t.ɵɵtext(10),t.ɵɵpipe(11,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(12,"mat-hint",8)(13,"div",9),t.ɵɵelement(14,"div",10),t.ɵɵpipe(15,"translate"),t.ɵɵelementEnd()(),t.ɵɵtemplate(16,sp,3,3,"mat-error",11),t.ɵɵelementEnd()()(),t.ɵɵelementStart(17,"div",1)(18,"div",12)(19,"div",2),t.ɵɵtext(20,"tb.rulenode.recipients"),t.ɵɵelementEnd(),t.ɵɵelement(21,"tb-example-hint",13),t.ɵɵpipe(22,"translate"),t.ɵɵelementEnd(),t.ɵɵelementStart(23,"div",3)(24,"mat-form-field",14)(25,"mat-label",5),t.ɵɵtext(26,"tb.rulenode.to-template"),t.ɵɵelementEnd(),t.ɵɵelement(27,"textarea",15),t.ɵɵtemplate(28,pp,3,3,"mat-error",11),t.ɵɵelementEnd(),t.ɵɵelementStart(29,"mat-form-field",14)(30,"mat-label",5),t.ɵɵtext(31,"tb.rulenode.cc-template"),t.ɵɵelementEnd(),t.ɵɵelement(32,"textarea",16),t.ɵɵelementEnd(),t.ɵɵelementStart(33,"mat-form-field",14)(34,"mat-label",5),t.ɵɵtext(35,"tb.rulenode.bcc-template"),t.ɵɵelementEnd(),t.ɵɵelement(36,"textarea",17),t.ɵɵelementEnd()()(),t.ɵɵelementStart(37,"div",1)(38,"div",2),t.ɵɵtext(39,"tb.rulenode.message-subject-and-content"),t.ɵɵelementEnd(),t.ɵɵelement(40,"tb-example-hint",13),t.ɵɵpipe(41,"translate"),t.ɵɵelementStart(42,"section")(43,"mat-form-field",18)(44,"mat-label",5),t.ɵɵtext(45,"tb.rulenode.subject-template"),t.ɵɵelementEnd(),t.ɵɵelement(46,"textarea",19),t.ɵɵtemplate(47,mp,3,3,"mat-error",11),t.ɵɵelementEnd(),t.ɵɵelementStart(48,"mat-form-field",18)(49,"mat-label",5),t.ɵɵtext(50,"tb.rulenode.mail-body-type"),t.ɵɵelementEnd(),t.ɵɵelementStart(51,"mat-select",20)(52,"mat-select-trigger"),t.ɵɵtemplate(53,dp,3,3,"span",11),t.ɵɵelementEnd(),t.ɵɵtemplate(54,up,8,7,"mat-option",21),t.ɵɵelementEnd()(),t.ɵɵtemplate(55,cp,6,0,"mat-form-field",22),t.ɵɵelementStart(56,"mat-form-field",18)(57,"mat-label",5),t.ɵɵtext(58,"tb.rulenode.body-template"),t.ɵɵelementEnd(),t.ɵɵelement(59,"textarea",23),t.ɵɵtemplate(60,gp,3,3,"mat-error",11),t.ɵɵelementEnd()()()()),2&e&&(t.ɵɵproperty("formGroup",n.toEmailConfigForm),t.ɵɵadvance(10),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(11,14,"tb.rulenode.email-from-template-hint")," "),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("tb-help-popup","rulenode/to_email_node_fields_templatization"),t.ɵɵpropertyInterpolate("trigger-text",t.ɵɵpipeBind1(15,16,"tb.key-val.see-examples")),t.ɵɵproperty("tb-help-popup-style",t.ɵɵpureFunction0(22,lp)),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.toEmailConfigForm.get("fromTemplate").hasError("required")),t.ɵɵadvance(5),t.ɵɵproperty("hintText",t.ɵɵpipeBind1(22,18,"tb.rulenode.recipients-block-main-hint")),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.toEmailConfigForm.get("toTemplate").hasError("required")),t.ɵɵadvance(12),t.ɵɵproperty("hintText",t.ɵɵpipeBind1(41,20,"tb.rulenode.kv-map-pattern-hint")),t.ɵɵadvance(7),t.ɵɵproperty("ngIf",n.toEmailConfigForm.get("subjectTemplate").hasError("required")),t.ɵɵadvance(6),t.ɵɵproperty("ngIf",n.toEmailConfigForm.get("mailBodyType").value),t.ɵɵadvance(),t.ɵɵproperty("ngForOf",n.mailBodyTypes),t.ɵɵadvance(),t.ɵɵproperty("ngIf","dynamic"===n.toEmailConfigForm.get("mailBodyType").value),t.ɵɵadvance(5),t.ɵɵproperty("ngIf",n.toEmailConfigForm.get("bodyTemplate").hasError("required")))},dependencies:t.ɵɵgetComponentDepsFactory(fp),styles:["[_nghost-%COMP%]   .input-bottom-double-hint[_ngcontent-%COMP%]{display:inline-flex}[_nghost-%COMP%]   .input-bottom-double-hint[_ngcontent-%COMP%]   .see-example[_ngcontent-%COMP%]{flex-shrink:0;padding-right:16px}[_nghost-%COMP%]   textarea.tb-enable-vertical-resize[_ngcontent-%COMP%]{resize:vertical}"]})}}e("ToEmailConfigComponent",fp);class hp extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.copyFrom=[],this.translation=Ut;for(const e of this.translation.keys())this.copyFrom.push({value:e,name:this.translate.instant(this.translation.get(e))})}onConfigurationSet(e){this.copyKeysConfigForm=this.fb.group({copyFrom:[e.copyFrom,[N.required]],keys:[e?e.keys:null,[N.required]]})}configForm(){return this.copyKeysConfigForm}prepareInputConfig(e){let t;return t=P(e?.fromMetadata)?e.copyFrom?Kt.METADATA:Kt.DATA:P(e?.copyFrom)?e.copyFrom:Kt.DATA,{keys:P(e?.keys)?e.keys:null,copyFrom:t}}static{this.ɵfac=function(e){return new(e||hp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:hp,selectors:[["tb-transformation-node-copy-keys-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:10,vars:17,consts:[[1,"tb-form-panel","no-padding","no-border",3,"formGroup"],["formControlName","copyFrom",3,"labelText","translation"],["required","","formControlName","keys",1,"mat-block",3,"label","placeholder","requiredText"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-msg-metadata-chip",1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"tb-string-items-list",2),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵpipe(6,"translate"),t.ɵɵelementStart(7,"mat-icon",3),t.ɵɵpipe(8,"translate"),t.ɵɵtext(9," help "),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.copyKeysConfigForm),t.ɵɵadvance(),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(2,7,"tb.key-val.copy-key-values-from"))("translation",n.translation),t.ɵɵadvance(2),t.ɵɵproperty("label",t.ɵɵpipeBind1(4,9,"tb.rulenode.keys"))("placeholder",t.ɵɵpipeBind1(5,11,"tb.rulenode.add-key"))("requiredText",t.ɵɵpipeBind1(6,13,"tb.key-val.at-least-one-key-error")),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(8,15,"tb.rulenode.use-regular-expression-hint")))},dependencies:t.ɵɵgetComponentDepsFactory(hp),encapsulation:2})}}function yp(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",7),t.ɵɵtext(1),t.ɵɵelementEnd()),2&e){const e=n.$implicit;t.ɵɵproperty("value",e.value),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",e.name," ")}}e("CopyKeysConfigComponent",hp);class bp extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.renameIn=[],this.translation=zt;for(const e of this.translation.keys())this.renameIn.push({value:e,name:this.translate.instant(this.translation.get(e))})}configForm(){return this.renameKeysConfigForm}onConfigurationSet(e){this.renameKeysConfigForm=this.fb.group({renameIn:[e?e.renameIn:null,[N.required]],renameKeysMapping:[e?e.renameKeysMapping:null,[N.required]]})}prepareInputConfig(e){let t;return t=P(e?.fromMetadata)?e.fromMetadata?Kt.METADATA:Kt.DATA:P(e?.renameIn)?e?.renameIn:Kt.DATA,{renameKeysMapping:P(e?.renameKeysMapping)?e.renameKeysMapping:null,renameIn:t}}static{this.ɵfac=function(e){return new(e||bp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:bp,selectors:[["tb-transformation-node-rename-keys-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:15,vars:24,consts:[[1,"tb-form-panel","stroked",3,"formGroup"],["translate","",1,"tb-form-panel-title"],[1,"fx-centered"],[1,"fetch-to-data-toggle"],["formControlName","renameIn","appearance","fill",1,"fetch-to-data-toggle"],[3,"value",4,"ngFor","ngForOf"],["required","","formControlName","renameKeysMapping","uniqueKeyValuePairValidator","",3,"labelText","requiredText","keyText","keyRequiredText","valText","valRequiredText"],[3,"value"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1),t.ɵɵtext(2,"tb.rulenode.rename-keys-in"),t.ɵɵelementEnd(),t.ɵɵelementStart(3,"div",2)(4,"div",3)(5,"tb-toggle-select",4),t.ɵɵtemplate(6,yp,2,2,"tb-toggle-option",5),t.ɵɵelementEnd()()(),t.ɵɵelement(7,"tb-kv-map-config",6),t.ɵɵpipe(8,"translate"),t.ɵɵpipe(9,"translate"),t.ɵɵpipe(10,"translate"),t.ɵɵpipe(11,"translate"),t.ɵɵpipe(12,"translate"),t.ɵɵpipe(13,"translate"),t.ɵɵpipe(14,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.renameKeysConfigForm),t.ɵɵadvance(6),t.ɵɵproperty("ngForOf",n.renameIn),t.ɵɵadvance(),t.ɵɵpropertyInterpolate2("labelText","",t.ɵɵpipeBind1(8,10,n.translation.get(n.renameKeysConfigForm.get("renameIn").value))," ",t.ɵɵpipeBind1(9,12,"tb.rulenode.keys-mapping"),""),t.ɵɵpropertyInterpolate("requiredText",t.ɵɵpipeBind1(10,14,"tb.rulenode.attr-mapping-required")),t.ɵɵpropertyInterpolate("keyText",t.ɵɵpipeBind1(11,16,"tb.rulenode.current-key-name")),t.ɵɵpropertyInterpolate("keyRequiredText",t.ɵɵpipeBind1(12,18,"tb.rulenode.key-name-required")),t.ɵɵpropertyInterpolate("valText",t.ɵɵpipeBind1(13,20,"tb.rulenode.new-key-name")),t.ɵɵpropertyInterpolate("valRequiredText",t.ɵɵpipeBind1(14,22,"tb.rulenode.new-key-name-required")))},dependencies:t.ɵɵgetComponentDepsFactory(bp),styles:["[_nghost-%COMP%]   .fetch-to-data-toggle[_ngcontent-%COMP%]{max-width:420px;width:100%}[_nghost-%COMP%]   .fx-centered[_ngcontent-%COMP%]{display:flex;width:100%;justify-content:space-around}"]})}}function vp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(2,1,"tb.rulenode.json-path-expression-required")))}e("RenameKeysConfigComponent",bp);class xp extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.jsonPathConfigForm}onConfigurationSet(e){this.jsonPathConfigForm=this.fb.group({jsonPath:[e?e.jsonPath:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||xp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:xp,selectors:[["tb-transformation-node-json-path-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:10,vars:8,consts:[[3,"formGroup"],["subscriptSizing","dynamic",1,"mat-block"],["matInput","","formControlName","jsonPath","required",""],[4,"ngIf"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(5,"input",2),t.ɵɵelementStart(6,"mat-hint"),t.ɵɵtext(7),t.ɵɵpipe(8,"translate"),t.ɵɵelementEnd(),t.ɵɵtemplate(9,vp,3,3,"mat-error",3),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.jsonPathConfigForm),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,4,"tb.rulenode.json-path-expression")),t.ɵɵadvance(4),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(8,6,"tb.rulenode.json-path-expression-hint")),t.ɵɵadvance(2),t.ɵɵproperty("ngIf",n.jsonPathConfigForm.get("jsonPath").hasError("required")))},dependencies:t.ɵɵgetComponentDepsFactory(xp),encapsulation:2})}}e("NodeJsonPathConfigComponent",xp);class Cp extends i{constructor(e,t,n){super(e),this.store=e,this.fb=t,this.translate=n,this.deleteFrom=[],this.translation=Ht;for(const e of this.translation.keys())this.deleteFrom.push({value:e,name:this.translate.instant(this.translation.get(e))})}onConfigurationSet(e){this.deleteKeysConfigForm=this.fb.group({deleteFrom:[e.deleteFrom,[N.required]],keys:[e?e.keys:null,[N.required]]})}prepareInputConfig(e){let t;return t=P(e?.fromMetadata)?e.fromMetadata?Kt.METADATA:Kt.DATA:P(e?.deleteFrom)?e?.deleteFrom:Kt.DATA,{keys:P(e?.keys)?e.keys:null,deleteFrom:t}}configForm(){return this.deleteKeysConfigForm}static{this.ɵfac=function(e){return new(e||Cp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder),t.ɵɵdirectiveInject(K.TranslateService))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Cp,selectors:[["tb-transformation-node-delete-keys-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:10,vars:16,consts:[[1,"tb-form-panel","no-border","no-padding",3,"formGroup"],["formControlName","deleteFrom",3,"labelText"],["required","","formControlName","keys",1,"mat-block",3,"label","placeholder","requiredText"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"tb-msg-metadata-chip",1),t.ɵɵpipe(2,"translate"),t.ɵɵelementStart(3,"tb-string-items-list",2),t.ɵɵpipe(4,"translate"),t.ɵɵpipe(5,"translate"),t.ɵɵpipe(6,"translate"),t.ɵɵelementStart(7,"mat-icon",3),t.ɵɵpipe(8,"translate"),t.ɵɵtext(9," help "),t.ɵɵelementEnd()()()),2&e&&(t.ɵɵproperty("formGroup",n.deleteKeysConfigForm),t.ɵɵadvance(),t.ɵɵproperty("labelText",t.ɵɵpipeBind1(2,6,"tb.key-val.delete-key-values-from")),t.ɵɵadvance(2),t.ɵɵproperty("label",t.ɵɵpipeBind1(4,8,"tb.rulenode.keys"))("placeholder",t.ɵɵpipeBind1(5,10,"tb.rulenode.add-key"))("requiredText",t.ɵɵpipeBind1(6,12,"tb.key-val.at-least-one-key-error")),t.ɵɵadvance(4),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(8,14,"tb.rulenode.use-regular-expression-delete-hint")))},dependencies:t.ɵɵgetComponentDepsFactory(Cp),encapsulation:2})}}function Sp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.interval-required")," "))}function Tp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.interval-min-error")," "))}function Ip(e,n){if(1&e&&(t.ɵɵelementStart(0,"tb-toggle-option",18),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e){const e=n.$implicit,r=t.ɵɵnextContext();t.ɵɵproperty("value",e),t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,2,r.deduplicationStrategiesTranslations.get(e))," ")}}function Ep(e,n){1&e&&(t.ɵɵelement(0,"tb-example-hint",19),t.ɵɵpipe(1,"translate")),2&e&&t.ɵɵproperty("hintText",t.ɵɵpipeBind1(1,1,"tb.rulenode.strategy-all-hint"))}function Fp(e,n){1&e&&(t.ɵɵelement(0,"tb-example-hint",20),t.ɵɵpipe(1,"translate")),2&e&&t.ɵɵproperty("hintText",t.ɵɵpipeBind1(1,1,"tb.rulenode.strategy-first-hint"))}function qp(e,n){1&e&&(t.ɵɵelement(0,"tb-example-hint",20),t.ɵɵpipe(1,"translate")),2&e&&t.ɵɵproperty("hintText",t.ɵɵpipeBind1(1,1,"tb.rulenode.strategy-last-hint"))}function Ap(e,n){1&e&&(t.ɵɵelementStart(0,"div"),t.ɵɵelement(1,"tb-output-message-type-autocomplete",21),t.ɵɵelementEnd())}function kp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-pending-msgs-required")," "))}function Np(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-pending-msgs-max-error")," "))}function wp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-pending-msgs-min-error")," "))}function Mp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-retries-required")," "))}function Vp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-retries-max-error")," "))}function Bp(e,n){1&e&&(t.ɵɵelementStart(0,"mat-error"),t.ɵɵtext(1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵadvance(),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(2,1,"tb.rulenode.max-retries-min-error")," "))}e("DeleteKeysConfigComponent",Cp);class Op extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.deduplicationStrategie=St,this.deduplicationStrategies=Object.keys(this.deduplicationStrategie),this.deduplicationStrategiesTranslations=Tt}configForm(){return this.deduplicationConfigForm}onConfigurationSet(e){this.deduplicationConfigForm=this.fb.group({interval:[P(e?.interval)?e.interval:null,[N.required,N.min(1)]],strategy:[P(e?.strategy)?e.strategy:null,[N.required]],outMsgType:[P(e?.outMsgType)?e.outMsgType:null,[N.required]],maxPendingMsgs:[P(e?.maxPendingMsgs)?e.maxPendingMsgs:null,[N.required,N.min(1),N.max(1e3)]],maxRetries:[P(e?.maxRetries)?e.maxRetries:null,[N.required,N.min(0),N.max(100)]]})}prepareInputConfig(e){return e||(e={}),e.outMsgType||(e.outMsgType="POST_TELEMETRY_REQUEST"),super.prepareInputConfig(e)}updateValidators(e){this.deduplicationConfigForm.get("strategy").value===this.deduplicationStrategie.ALL?this.deduplicationConfigForm.get("outMsgType").enable({emitEvent:!1}):this.deduplicationConfigForm.get("outMsgType").disable({emitEvent:!1}),this.deduplicationConfigForm.get("outMsgType").updateValueAndValidity({emitEvent:e})}validatorTriggers(){return["strategy"]}static{this.ɵfac=function(e){return new(e||Op)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.FormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Op,selectors:[["tb-action-node-msg-deduplication-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:49,vars:32,consts:[[3,"formGroup"],[1,"mat-block"],["type","number","required","","matInput","","formControlName","interval"],[4,"ngIf"],["matSuffix","","aria-hidden","false","aria-label","help-icon","color","primary",1,"help-icon","margin-8","cursor-pointer",3,"matTooltip"],[1,"tb-form-panel","no-padding","no-border"],[1,"tb-form-panel","stroked"],["translate","",1,"tb-form-panel-title","tb-required"],["formControlName","strategy","appearance","fill",1,"fetch-to-data-toggle"],[3,"value",4,"ngFor","ngForOf"],[3,"hintText",4,"ngIf"],["textAlign","'center'",3,"hintText",4,"ngIf"],[1,"tb-settings"],["translate",""],[1,"tb-form-row","no-border","no-padding","tb-standard-fields"],[1,"flex"],["type","number","required","","matInput","","formControlName","maxPendingMsgs"],["type","number","required","","matInput","","formControlName","maxRetries"],[3,"value"],[3,"hintText"],["textAlign","'center'",3,"hintText"],["required","","formControlName","outMsgType"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"mat-form-field",1)(2,"mat-label"),t.ɵɵtext(3),t.ɵɵpipe(4,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(5,"input",2),t.ɵɵtemplate(6,Sp,3,3,"mat-error",3)(7,Tp,3,3,"mat-error",3),t.ɵɵelementStart(8,"mat-icon",4),t.ɵɵpipe(9,"translate"),t.ɵɵtext(10,"help"),t.ɵɵelementEnd()(),t.ɵɵelementStart(11,"div",5)(12,"div",6)(13,"div",7),t.ɵɵtext(14,"tb.rulenode.strategy"),t.ɵɵelementEnd(),t.ɵɵelementStart(15,"tb-toggle-select",8),t.ɵɵtemplate(16,Ip,3,4,"tb-toggle-option",9),t.ɵɵelementEnd(),t.ɵɵtemplate(17,Ep,2,3,"tb-example-hint",10)(18,Fp,2,3,"tb-example-hint",11)(19,qp,2,3,"tb-example-hint",11)(20,Ap,2,0,"div",3),t.ɵɵelementEnd(),t.ɵɵelementStart(21,"section",6)(22,"mat-expansion-panel",12)(23,"mat-expansion-panel-header")(24,"mat-panel-title",13),t.ɵɵtext(25,"tb.rulenode.advanced-settings"),t.ɵɵelementEnd()(),t.ɵɵelementStart(26,"div",14)(27,"mat-form-field",15)(28,"mat-label"),t.ɵɵtext(29),t.ɵɵpipe(30,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(31,"input",16),t.ɵɵtemplate(32,kp,3,3,"mat-error",3)(33,Np,3,3,"mat-error",3)(34,wp,3,3,"mat-error",3),t.ɵɵelementStart(35,"mat-icon",4),t.ɵɵpipe(36,"translate"),t.ɵɵtext(37,"help"),t.ɵɵelementEnd()(),t.ɵɵelementStart(38,"mat-form-field",15)(39,"mat-label"),t.ɵɵtext(40),t.ɵɵpipe(41,"translate"),t.ɵɵelementEnd(),t.ɵɵelement(42,"input",17),t.ɵɵtemplate(43,Mp,3,3,"mat-error",3)(44,Vp,3,3,"mat-error",3)(45,Bp,3,3,"mat-error",3),t.ɵɵelementStart(46,"mat-icon",4),t.ɵɵpipe(47,"translate"),t.ɵɵtext(48,"help"),t.ɵɵelementEnd()()()()()()()),2&e&&(t.ɵɵproperty("formGroup",n.deduplicationConfigForm),t.ɵɵadvance(3),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(4,20,"tb.rulenode.interval")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("interval").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("interval").hasError("min")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(9,22,"tb.rulenode.interval-hint")),t.ɵɵadvance(8),t.ɵɵproperty("ngForOf",n.deduplicationStrategies),t.ɵɵadvance(),t.ɵɵproperty("ngIf","ALL"===n.deduplicationConfigForm.get("strategy").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf","FIRST"===n.deduplicationConfigForm.get("strategy").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf","LAST"===n.deduplicationConfigForm.get("strategy").value),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("strategy").value===n.deduplicationStrategie.ALL),t.ɵɵadvance(9),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(30,24,"tb.rulenode.max-pending-msgs")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("maxPendingMsgs").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("maxPendingMsgs").hasError("max")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("maxPendingMsgs").hasError("min")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(36,26,"tb.rulenode.max-pending-msgs-hint")),t.ɵɵadvance(5),t.ɵɵtextInterpolate(t.ɵɵpipeBind1(41,28,"tb.rulenode.max-retries")),t.ɵɵadvance(3),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("maxRetries").hasError("required")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("maxRetries").hasError("max")),t.ɵɵadvance(),t.ɵɵproperty("ngIf",n.deduplicationConfigForm.get("maxRetries").hasError("min")),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("matTooltip",t.ɵɵpipeBind1(47,30,"tb.rulenode.max-retries-hint")))},dependencies:t.ɵɵgetComponentDepsFactory(Op),encapsulation:2})}}e("DeduplicationConfigComponent",Op);class Dp{static{this.ɵfac=function(e){return new(e||Dp)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:Dp})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,fi,Zs,op,fp,hp,bp,xp,Cp,Op]})}}e("RulenodeCoreConfigTransformModule",Dp),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(Dp,{declarations:[Zs,op,fp,hp,bp,xp,Cp,Op],imports:[$,S,fi],exports:[Zs,op,fp,hp,bp,xp,Cp,Op]});const Lp=e=>[e];class Pp extends i{constructor(e,t){super(e),this.store=e,this.fb=t,this.entityType=u}configForm(){return this.ruleChainInputConfigForm}onConfigurationSet(e){this.ruleChainInputConfigForm=this.fb.group({forwardMsgToDefaultRuleChain:[!!e&&e?.forwardMsgToDefaultRuleChain,[]],ruleChainId:[e?e.ruleChainId:null,[N.required]]})}static{this.ɵfac=function(e){return new(e||Pp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Pp,selectors:[["tb-flow-node-rule-chain-input-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:8,vars:12,consts:[[1,"flex","flex-col",3,"formGroup"],[1,"tb-form-panel","no-padding","no-border"],[1,"tb-form-row","no-border",3,"tb-hint-tooltip-icon"],["formControlName","forwardMsgToDefaultRuleChain",1,"mat-slide"],["required","","formControlName","ruleChainId",3,"excludeEntityIds","entityType","entitySubtype"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0)(1,"div",1)(2,"div",2),t.ɵɵpipe(3,"translate"),t.ɵɵelementStart(4,"mat-slide-toggle",3),t.ɵɵtext(5),t.ɵɵpipe(6,"translate"),t.ɵɵelementEnd()(),t.ɵɵelement(7,"tb-entity-autocomplete",4),t.ɵɵelementEnd()()),2&e&&(t.ɵɵproperty("formGroup",n.ruleChainInputConfigForm),t.ɵɵadvance(2),t.ɵɵpropertyInterpolate("tb-hint-tooltip-icon",t.ɵɵpipeBind1(3,6,"tb.rulenode.forward-msg-default-rule-chain-tooltip")),t.ɵɵadvance(3),t.ɵɵtextInterpolate1(" ",t.ɵɵpipeBind1(6,8,"tb.rulenode.forward-msg-default-rule-chain")," "),t.ɵɵadvance(2),t.ɵɵproperty("excludeEntityIds",t.ɵɵpureFunction1(10,Lp,n.ruleChainId))("entityType",n.entityType.RULE_CHAIN)("entitySubtype",n.ruleChainType))},dependencies:t.ɵɵgetComponentDepsFactory(Pp),encapsulation:2})}}e("RuleChainInputComponent",Pp);class Rp extends i{constructor(e,t){super(e),this.store=e,this.fb=t}configForm(){return this.ruleChainOutputConfigForm}onConfigurationSet(e){this.ruleChainOutputConfigForm=this.fb.group({})}static{this.ɵfac=function(e){return new(e||Rp)(t.ɵɵdirectiveInject(A.Store),t.ɵɵdirectiveInject(k.UntypedFormBuilder))}}static{this.ɵcmp=t.ɵɵdefineComponent({type:Rp,selectors:[["tb-flow-node-rule-chain-output-config"]],features:[t.ɵɵInheritDefinitionFeature],decls:3,vars:4,consts:[[1,"flex","flex-col",3,"formGroup"],[3,"innerHTML"]],template:function(e,n){1&e&&(t.ɵɵelementStart(0,"section",0),t.ɵɵelement(1,"div",1),t.ɵɵpipe(2,"translate"),t.ɵɵelementEnd()),2&e&&(t.ɵɵproperty("formGroup",n.ruleChainOutputConfigForm),t.ɵɵadvance(),t.ɵɵpropertyInterpolate("innerHTML",t.ɵɵpipeBind1(2,2,"tb.rulenode.output-node-name-hint"),t.ɵɵsanitizeHtml))},dependencies:t.ɵɵgetComponentDepsFactory(Rp),encapsulation:2})}}e("RuleChainOutputComponent",Rp);class _p{static{this.ɵfac=function(e){return new(e||_p)}}static{this.ɵmod=t.ɵɵdefineNgModule({type:_p})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,fi,Pp,Rp]})}}e("RuleNodeCoreConfigFlowModule",_p),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(_p,{declarations:[Pp,Rp],imports:[$,S,fi],exports:[Pp,Rp]});class jp{constructor(){}static{this.ɵfac=function(e){return new(e||jp)}}static{this.ɵcmp=t.ɵɵdefineComponent({type:jp,selectors:[["tb-lib-styles-entry"]],standalone:!0,features:[t.ɵɵStandaloneFeature],decls:0,vars:0,template:function(e,t){},styles:['.tb-default tb-rule-node-config .margin-8{margin:8px}.tb-default tb-rule-node-config .tb-error{letter-spacing:.25px;color:var(--mdc-theme-error, #f44336)}.tb-default tb-rule-node-config .tb-required:after{content:"*";font-size:16px;color:#000000de}.tb-default tb-rule-node-config .help-icon{color:#000;opacity:.38;padding:unset}.tb-default tb-rule-node-config .help-icon:hover{color:#305680;opacity:unset}.tb-default tb-rule-node-config .same-width-component-row{display:flex;flex-wrap:nowrap;gap:16px}@media screen and (max-width: 599px){.tb-default tb-rule-node-config .same-width-component-row{gap:8px}}.tb-default tb-rule-node-config .same-width-component-row>*{flex:1}.tb-default .gap-0{gap:0px}.tb-default .gap-5\\.5{gap:1.375rem}@media (max-width: 599px){.tb-default .xs\\:max-h-full{max-height:100%}}@media (min-width: 960px) and (max-width: 1279px){.tb-default .md\\:max-h-full{max-height:100%}}@media (max-width: 959px){.tb-default .lt-md\\:gap-4{gap:1rem}}@media (min-width: 960px){.tb-default .gt-sm\\:max-w-10{max-width:2.5rem}.tb-default .gt-sm\\:max-w-10\\%{max-width:10%}.tb-default .gt-sm\\:gap-4{gap:1rem}.tb-default .gt-sm\\:gap-5\\.5{gap:1.375rem}}\n'],encapsulation:2})}}const Gp=(e,t)=>{const n=e[a];if(n.styles?.length){const e=n.styles[0];let r=document.getElementById(t);if(!r){r=document.createElement("style"),r.id=t;(document.head||document.getElementsByTagName("head")[0]).appendChild(r)}r.innerHTML=e}};class Kp{constructor(e){!function(e){e.setTranslation("en_US",{tb:{rulenode:{id:"Id","additional-info":"Additional Info","advanced-settings":"Advanced settings","create-entity-if-not-exists":"Create new entity if it doesn't exist","create-entity-if-not-exists-hint":"If enabled, a new entity with specified parameters will be created unless it already exists. Existing entities will be used as is for relation.","select-device-connectivity-event":"Select device connectivity event","entity-name-pattern":"Name pattern","device-name-pattern":"Device name","asset-name-pattern":"Asset name","entity-view-name-pattern":"Entity view name","customer-title-pattern":"Customer title","dashboard-name-pattern":"Dashboard title","user-name-pattern":"User email","edge-name-pattern":"Edge name","entity-name-pattern-required":"Name pattern is required","entity-name-pattern-hint":"Name pattern field support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","copy-message-type":"Copy message type","entity-type-pattern":"Type pattern","entity-type-pattern-required":"Type pattern is required","message-type-value":"Message type value","message-type-value-required":"Message type value is required","message-type-value-max-length":"Message type value should be less than 256","output-message-type":"Output message type","entity-cache-expiration":"Entities cache expiration time (sec)","entity-cache-expiration-hint":"Specifies maximum time interval allowed to store found entity records. 0 value means that records will never expire.","entity-cache-expiration-required":"Entities cache expiration time is required.","entity-cache-expiration-range":"Entities cache expiration time should be greater than or equal to 0.","customer-name-pattern":"Customer title","customer-name-pattern-required":"Customer title is required","customer-name-pattern-hint":"Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","create-customer-if-not-exists":"Create new customer if it doesn't exist","unassign-from-customer":"Unassign from specific customer if originator is dashboard","unassign-from-customer-tooltip":"Only dashboards can be assigned to multiple customers at once. \nIf the message originator is a dashboard, you need to explicitly specify the customer's title to unassign from.","customer-cache-expiration":"Customers cache expiration time (sec)","customer-cache-expiration-hint":"Specifies maximum time interval allowed to store found customer records. 0 value means that records will never expire.","customer-cache-expiration-required":"Customers cache expiration time is required.","customer-cache-expiration-range":"Customers cache expiration time should be greater than or equal to 0.","interval-start":"Interval start","interval-end":"Interval end","time-unit":"Time unit","fetch-mode":"Fetch mode","order-by-timestamp":"Order by timestamp",limit:"Limit","limit-hint":"Min limit value is 2, max - 1000. If you want to fetch a single entry, select fetch mode 'First' or 'Last'.","limit-required":"Limit is required.","limit-range":"Limit should be in a range from 2 to 1000.","time-unit-milliseconds":"Milliseconds","time-unit-seconds":"Seconds","time-unit-minutes":"Minutes","time-unit-hours":"Hours","time-unit-days":"Days","time-value-range":"Allowing range from 1 to 2147483647.","start-interval-value-required":"Interval start is required.","end-interval-value-required":"Interval end is required.",filter:"Filter",switch:"Switch","math-templatization-tooltip":"This field support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","add-message-type":"Add message type","select-message-types-required":"At least one message type should be selected.","select-message-types":"Select message types","no-message-types-found":"No message types found","no-message-type-matching":"'{{messageType}}' not found.","create-new-message-type":"Create a new one.","message-types-required":"Message types are required.","client-attributes":"Client attributes","shared-attributes":"Shared attributes","server-attributes":"Server attributes","attributes-keys":"Attributes keys","attributes-keys-required":"Attributes keys are required","attributes-scope":"Attributes scope","attributes-scope-value":"Attributes scope value","attributes-scope-value-copy":"Copy attributes scope value","attributes-scope-hint":"Use the 'scope' metadata key to dynamically set the attribute scope per message. If provided, this overrides the scope set in the configuration.","notify-device":"Force notification to the device","send-attributes-updated-notification":"Send attributes updated notification","send-attributes-updated-notification-hint":"Send notification about updated attributes as a separate message to the rule engine queue.","send-attributes-deleted-notification":"Send attributes deleted notification","send-attributes-deleted-notification-hint":"Send notification about deleted attributes as a separate message to the rule engine queue.","update-attributes-only-on-value-change":"Save attributes only if the value changes","update-attributes-only-on-value-change-hint":"Updates the attributes on every incoming message disregarding if their value has changed. Increases API usage and reduces performance.","update-attributes-only-on-value-change-hint-enabled":"Updates the attributes only if their value has changed. If the value is not changed, no update to the attribute timestamp nor attribute change notification will be sent.","fetch-credentials-to-metadata":"Fetch credentials to metadata","notify-device-on-update-hint":"If enabled, force notification to the device about shared attributes update. If disabled, the notification behavior is controlled by the 'notifyDevice' parameter from the incoming message metadata. To turn off the notification, the message metadata must contain the 'notifyDevice' parameter set to 'false'. Any other case will trigger the notification to the device.","notify-device-on-delete-hint":"If enabled, force notification to the device about shared attributes removal. If disabled, the notification behavior is controlled by the 'notifyDevice' parameter from the incoming message metadata. To turn on the notification, the message metadata must contain the 'notifyDevice' parameter set to 'true'. In any other case, the notification will not be triggered to the device.","latest-timeseries":"Latest time series data keys","timeseries-keys":"Time series keys","timeseries-keys-required":"At least one time series key should be selected.","add-timeseries-key":"Add time series key","add-message-field":"Add message field","relation-search-parameters":"Relation search parameters","relation-parameters":"Relation parameters","add-metadata-field":"Add metadata field","data-keys":"Message field names","copy-from":"Copy from","data-to-metadata":"Data to metadata","metadata-to-data":"Metadata to data","use-regular-expression-hint":"Use regular expression to copy keys by pattern.\n\nTips & tricks:\nPress 'Enter' to complete field name input.\nPress 'Backspace' to delete field name. Multiple field names supported.",interval:"Interval","interval-required":"Interval is required","interval-hint":"Deduplication interval in seconds.","interval-min-error":"Min allowed value is 1","max-pending-msgs":"Max pending messages","max-pending-msgs-hint":"Maximum number of messages that are stored in memory for each unique deduplication id.","max-pending-msgs-required":"Max pending messages is required","max-pending-msgs-max-error":"Max allowed value is 1000","max-pending-msgs-min-error":"Min allowed value is 1","max-retries":"Max retries","max-retries-required":"Max retries is required","max-retries-hint":"Maximum number of retries to push the deduplicated messages into the queue. 10 seconds delay is used between retries","max-retries-max-error":"Max allowed value is 100","max-retries-min-error":"Min allowed value is 0",strategy:"Strategy","strategy-required":"Strategy is required","strategy-all-hint":"Return all messages that arrived during deduplication period as a single JSON array message. Where each element represents object with msg and metadata inner properties.","strategy-first-hint":"Return first message that arrived during deduplication period.","strategy-last-hint":"Return last message that arrived during deduplication period.",first:"First",last:"Last",all:"All","output-msg-type-hint":"The message type of the deduplication result.","queue-name-hint":"The queue name where the deduplication result will be published.",keys:"Keys","keys-required":"Keys are required","rename-keys-in":"Rename keys in",data:"Data",message:"Message",metadata:"Metadata","current-key-name":"Current key name","key-name-required":"Key name is required","new-key-name":"New key name","new-key-name-required":"New key name is required","metadata-keys":"Metadata field names","json-path-expression":"JSON path expression","json-path-expression-required":"JSON path expression is required","json-path-expression-hint":"JSONPath specifies a path to an element or a set of elements in a JSON structure. '$' represents the root object or array.","relations-query":"Relations query","device-relations-query":"Device relations query","max-relation-level":"Max relation level","max-relation-level-error":"Value should be greater than 0 or unspecified.","relation-type":"Relation type","relation-type-pattern":"Relation type pattern","relation-type-pattern-required":"Relation type pattern is required","relation-types-list":"Relation types to propagate","relation-types-list-hint":"If Propagate relation types are not selected, alarms will be propagated without filtering by relation type.","unlimited-level":"Unlimited level","latest-telemetry":"Latest telemetry","add-telemetry-key":"Add telemetry key","delete-from":"Delete from","use-regular-expression-delete-hint":"Use regular expression to delete keys by pattern.\n\nTips & tricks:\nPress 'Enter' to complete field name input.\nPress 'Backspace' to delete field name.\nMultiple field names supported.","fetch-into":"Fetch into","attr-mapping":"Attributes mapping:","source-attribute":"Source attribute key","source-attribute-required":"Source attribute key is required.","source-telemetry":"Source telemetry key","source-telemetry-required":"Source telemetry key is required.","target-key":"Target key","target-key-required":"Target key is required.","attr-mapping-required":"At least one mapping entry should be specified.","fields-mapping":"Fields mapping","relations-query-config-direction-suffix":"originator","profile-name":"Profile name","fetch-circle-parameter-info-from-metadata-hint":'Metadata field \'{{perimeterKeyName}}\' should be defined in next format: {"latitude":48.196, "longitude":24.6532, "radius":100.0, "radiusUnit":"METER"}',"fetch-poligon-parameter-info-from-metadata-hint":"Metadata field '{{perimeterKeyName}}' should be defined in next format: [[48.19736,24.65235],[48.19800,24.65060],...,[48.19849,24.65420]]","short-templatization-tooltip":"Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","fields-mapping-required":"At least one field mapping should be specified.","at-least-one-field-required":"At least one input field must have a value(s) provided.","originator-fields-sv-map-hint":"Target key fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","sv-map-hint":"Only target key fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","source-field":"Source field","source-field-required":"Source field is required.","originator-source":"Originator source","new-originator":"New originator","originator-customer":"Customer","originator-tenant":"Tenant","originator-related":"Related entity","originator-alarm-originator":"Alarm Originator","originator-entity":"Entity by name pattern","clone-message":"Clone message",transform:"Transform","default-ttl":"Default TTL in seconds","default-ttl-required":"Default TTL is required.","default-ttl-hint":"Rule node will fetch Time-to-Live (TTL) value from the message metadata. If no value is present, it defaults to the TTL specified in the configuration. If the value is set to 0, the TTL from the tenant profile configuration will be applied.","min-default-ttl-message":"Only 0 minimum TTL is allowed.","generation-parameters":"Generation parameters","message-count":"Generated messages limit (0 - unlimited)","message-count-required":"Generated messages limit is required.","min-message-count-message":"Only 0 minimum message count is allowed.","period-seconds":"Generation frequency in seconds","period-seconds-required":"Period is required.","script-lang-tbel":"TBEL","script-lang-js":"JS","use-metadata-period-in-seconds-patterns":"Use period in seconds pattern","use-metadata-period-in-seconds-patterns-hint":"If selected, rule node use period in seconds interval pattern from message metadata or data assuming that intervals are in the seconds.","period-in-seconds-pattern":"Period in seconds pattern","period-in-seconds-pattern-required":"Period in seconds pattern is required","min-period-seconds-message":"Only 1 second minimum period is allowed.",originator:"Originator","message-body":"Message body","message-metadata":"Message metadata",generate:"Generate","current-rule-node":"Current Rule Node","current-tenant":"Current Tenant","generator-function":"Generator function","test-generator-function":"Test generator function",generator:"Generator","test-filter-function":"Test filter function","test-switch-function":"Test switch function","test-transformer-function":"Test transformer function",transformer:"Transformer","alarm-create-condition":"Alarm create condition","test-condition-function":"Test condition function","alarm-clear-condition":"Alarm clear condition","alarm-details-builder":"Alarm details builder","test-details-function":"Test details function","alarm-type":"Alarm type","select-entity-types":"Select entity types","alarm-type-required":"Alarm type is required.","alarm-severity":"Alarm severity","alarm-severity-required":"Alarm severity is required","alarm-severity-pattern":"Alarm severity pattern","alarm-status-filter":"Alarm status filter","alarm-status-list-empty":"Alarm status list is empty","no-alarm-status-matching":"No alarm status matching were found.",propagate:"Propagate alarm to related entities","propagate-to-owner":"Propagate alarm to entity owner (Customer or Tenant)","propagate-to-tenant":"Propagate alarm to Tenant",condition:"Condition",details:"Details","to-string":"To string","test-to-string-function":"Test to string function","from-template":"From","from-template-required":"From is required","message-to-metadata":"Message to metadata","metadata-to-message":"Metadata to message","from-message":"From message","from-metadata":"From metadata","to-template":"To","to-template-required":"To Template is required","mail-address-list-template-hint":'Comma separated address list, use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body',"cc-template":"Cc","bcc-template":"Bcc","subject-template":"Subject","subject-template-required":"Subject Template is required","body-template":"Body","body-template-required":"Body Template is required","dynamic-mail-body-type":"Dynamic mail body type","mail-body-type":"Mail body type","body-type-template":"Body type template","reply-routing-configuration":"Reply Routing Configuration","rpc-reply-routing-configuration-hint":"These configuration parameters specify the metadata key names used to identify the service, session, and request for sending a reply back.","reply-routing-configuration-hint":"These configuration parameters specify the metadata key names used to identify the service and request for sending a reply back.","request-id-metadata-attribute":"Request Id","service-id-metadata-attribute":"Service Id","session-id-metadata-attribute":"Session Id","timeout-sec":"Timeout in seconds","timeout-required":"Timeout is required","min-timeout-message":"Only 0 minimum timeout value is allowed.","endpoint-url-pattern":"Endpoint URL pattern","endpoint-url-pattern-required":"Endpoint URL pattern is required","request-method":"Request method","use-simple-client-http-factory":"Use simple client HTTP factory","ignore-request-body":"Without request body","parse-to-plain-text":"Parse to plain text","parse-to-plain-text-hint":'If selected, request body message payload will be transformed from JSON string to plain text, e.g. msg = "Hello,\\t\\"world\\"" will be parsed to Hello, "world"',"read-timeout":"Read timeout in millis","read-timeout-hint":"The value of 0 means an infinite timeout","max-parallel-requests-count":"Max number of parallel requests","max-parallel-requests-count-hint":"The value of 0 specifies no limit in parallel processing","max-response-size":"Max response size (in KB)","max-response-size-hint":"The maximum amount of memory allocated for buffering data when decoding or encoding HTTP messages, such as JSON or XML payloads",headers:"Headers","headers-hint":'Use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body in header/value fields',header:"Header","header-required":"Header is required",value:"Value","value-required":"Value is required","topic-pattern":"Topic pattern","key-pattern":"Key pattern","key-pattern-hint":"Optional. If a valid partition number is specified, it will be used when sending the record. If no partition is specified, the key will be used instead. If neither is specified, a partition will be assigned in a round-robin fashion.","topic-pattern-required":"Topic pattern is required",topic:"Topic","topic-required":"Topic is required","bootstrap-servers":"Bootstrap servers","bootstrap-servers-required":"Bootstrap servers value is required","other-properties":"Other properties",key:"Key","key-required":"Key is required",retries:"Automatically retry times if fails","min-retries-message":"Only 0 minimum retries is allowed.","batch-size-bytes":"Produces batch size in bytes","min-batch-size-bytes-message":"Only 0 minimum batch size is allowed.","linger-ms":"Time to buffer locally (ms)","min-linger-ms-message":"Only 0 ms minimum value is allowed.","buffer-memory-bytes":"Client buffer max size in bytes","min-buffer-memory-message":"Only 0 minimum buffer size is allowed.",acks:"Number of acknowledgments","key-serializer":"Key serializer","key-serializer-required":"Key serializer is required","value-serializer":"Value serializer","value-serializer-required":"Value serializer is required","topic-arn-pattern":"Topic ARN pattern","topic-arn-pattern-required":"Topic ARN pattern is required","aws-access-key-id":"AWS Access Key ID","aws-access-key-id-required":"AWS Access Key ID is required","aws-secret-access-key":"AWS Secret Access Key","aws-secret-access-key-required":"AWS Secret Access Key is required","aws-region":"AWS Region","aws-region-required":"AWS Region is required","exchange-name-pattern":"Exchange name pattern","routing-key-pattern":"Routing key pattern","message-properties":"Message properties",host:"Host","host-required":"Host is required",port:"Port","port-required":"Port is required","port-range":"Port should be in a range from 1 to 65535.","virtual-host":"Virtual host",username:"Username",password:"Password","automatic-recovery":"Automatic recovery","connection-timeout-ms":"Connection timeout (ms)","min-connection-timeout-ms-message":"Only 0 ms minimum value is allowed.","handshake-timeout-ms":"Handshake timeout (ms)","min-handshake-timeout-ms-message":"Only 0 ms minimum value is allowed.","client-properties":"Client properties","queue-url-pattern":"Queue URL pattern","queue-url-pattern-required":"Queue URL pattern is required","delay-seconds":"Delay (seconds)","min-delay-seconds-message":"Only 0 seconds minimum value is allowed.","max-delay-seconds-message":"Only 900 seconds maximum value is allowed.",name:"Name","name-required":"Name is required","queue-type":"Queue type","sqs-queue-standard":"Standard","sqs-queue-fifo":"FIFO","gcp-project-id":"GCP project ID","gcp-project-id-required":"GCP project ID is required","gcp-service-account-key":"GCP service account key file","gcp-service-account-key-required":"GCP service account key file is required","pubsub-topic-name":"Topic name","pubsub-topic-name-required":"Topic name is required","message-attributes":"Message attributes","message-attributes-hint":'Use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body in name/value fields',"connect-timeout":"Connection timeout (sec)","connect-timeout-required":"Connection timeout is required.","connect-timeout-range":"Connection timeout should be in a range from 1 to 200.","client-id":"Client ID","client-id-hint":'Optional. Leave empty for auto-generated Client ID. Be careful when specifying the Client ID. Majority of the MQTT brokers will not allow multiple connections with the same Client ID. To connect to such brokers, your mqtt Client ID must be unique. When platform is running in a micro-services mode, the copy of rule node is launched in each micro-service. This will automatically lead to multiple mqtt clients with the same ID and may cause failures of the rule node. To avoid such failures enable "Add Service ID as suffix to Client ID" option below.',"append-client-id-suffix":"Add Service ID as suffix to Client ID","client-id-suffix-hint":'Optional. Applied when "Client ID" specified explicitly. If selected then Service ID will be added to Client ID as a suffix. Helps to avoid failures when platform is running in a micro-services mode.',"device-id":"Device ID","device-id-required":"Device ID is required.","clean-session":"Clean session","enable-ssl":"Enable SSL",credentials:"Credentials","credentials-type":"Credentials type","credentials-type-required":"Credentials type is required.","credentials-anonymous":"Anonymous","credentials-basic":"Basic","credentials-pem":"PEM","credentials-pem-hint":"At least Server CA certificate file or a pair of Client certificate and Client private key files are required","credentials-sas":"Shared Access Signature","sas-key":"SAS Key","sas-key-required":"SAS Key is required.",hostname:"Hostname","hostname-required":"Hostname is required.","azure-ca-cert":"CA certificate file","username-required":"Username is required.","password-required":"Password is required.","ca-cert":"Server CA certificate file","private-key":"Client private key file",cert:"Client certificate file","no-file":"No file selected.","drop-file":"Drop a file or click to select a file to upload.","private-key-password":"Private key password","use-system-smtp-settings":"Use system SMTP settings","use-metadata-dynamic-interval":"Use dynamic interval","metadata-dynamic-interval-hint":"Interval start and end input fields support templatization. Note that the substituted template value should be set in milliseconds. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","use-metadata-interval-patterns-hint":"If selected, rule node use start and end interval patterns from message metadata or data assuming that intervals are in the milliseconds.","use-message-alarm-data":"Use message alarm data","overwrite-alarm-details":"Overwrite alarm details","use-alarm-severity-pattern":"Use alarm severity pattern","check-all-keys":"Check that all specified fields are present","check-all-keys-hint":"If selected, checks that all specified keys are present in the message data and metadata.","check-relation-to-specific-entity":"Check relation to specific entity","check-relation-to-specific-entity-tooltip":"If enabled, checks the presence of relation with a specific entity otherwise, checks the presence of relation with any entity. In both cases, relation lookup is based on configured direction and type.","check-relation-hint":"Checks existence of relation to specific entity or to any entity based on direction and relation type.","delete-relation-with-specific-entity":"Delete relation with specific entity","delete-relation-with-specific-entity-hint":"If enabled, will delete the relation with just one specific entity. Otherwise, the relation will be removed with all matching entities.","delete-relation-hint":"Deletes relation from the originator of the incoming message to the specified entity or list of entities based on direction and type.","remove-current-relations":"Remove current relations","remove-current-relations-hint":"Removes current relations from the originator of the incoming message based on direction and type.","change-originator-to-related-entity":"Change originator to related entity","change-originator-to-related-entity-hint":"Used to process submitted message as a message from another entity.","start-interval":"Interval start","end-interval":"Interval end","start-interval-required":"Interval start is required.","end-interval-required":"Interval end is required.","smtp-protocol":"Protocol","smtp-host":"SMTP host","smtp-host-required":"SMTP host is required.","smtp-port":"SMTP port","smtp-port-required":"You must supply a smtp port.","smtp-port-range":"SMTP port should be in a range from 1 to 65535.","timeout-msec":"Timeout ms","min-timeout-msec-message":"Only 0 ms minimum value is allowed.","enter-username":"Enter username","enter-password":"Enter password","enable-tls":"Enable TLS","tls-version":"TLS version","enable-proxy":"Enable proxy","use-system-proxy-properties":"Use system proxy properties","proxy-host":"Proxy host","proxy-host-required":"Proxy host is required.","proxy-port":"Proxy port","proxy-port-required":"Proxy port is required.","proxy-port-range":"Proxy port should be in a range from 1 to 65535.","proxy-user":"Proxy user","proxy-password":"Proxy password","proxy-scheme":"Proxy scheme","numbers-to-template":"Phone Numbers To Template","numbers-to-template-required":"Phone Numbers To Template is required","numbers-to-template-hint":'Comma separated Phone Numbers, use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body',"sms-message-template":"SMS message Template","sms-message-template-required":"SMS message Template is required","use-system-sms-settings":"Use system SMS provider settings","min-period-0-seconds-message":"Only 0 second minimum period is allowed.","max-pending-messages":"Maximum pending messages","max-pending-messages-required":"Maximum pending messages is required.","max-pending-messages-range":"Maximum pending messages should be in a range from 1 to 100000.","originator-types-filter":"Originator types filter","interval-seconds":"Interval in seconds","interval-seconds-required":"Interval is required.","min-interval-seconds-message":"Only 1 second minimum interval is allowed.","output-timeseries-key-prefix":"Output time series key prefix","output-timeseries-key-prefix-required":"Output time series key prefix required.","separator-hint":'Press "Enter" to complete field input.',"select-details":"Select details","entity-details-id":"Id","entity-details-title":"Title","entity-details-country":"Country","entity-details-state":"State","entity-details-city":"City","entity-details-zip":"Zip","entity-details-address":"Address","entity-details-address2":"Address2","entity-details-additional_info":"Additional Info","entity-details-phone":"Phone","entity-details-email":"Email","email-sender":"Email sender","fields-to-check":"Fields to check","add-detail":"Add detail","check-all-keys-tooltip":"If enabled, checks the presence of all fields listed in the message and metadata field names within the incoming message and its metadata.","fields-to-check-hint":'Press "Enter" to complete field name input. Multiple field names supported.',"entity-details-list-empty":"At least one detail should be selected.","alarm-status":"Alarm status","alarm-required":"At least one alarm status should be selected.","no-entity-details-matching":"No entity details matching were found.","custom-table-name":"Custom table name","custom-table-name-required":"Table Name is required","custom-table-hint":"Enter the table name without prefix 'cs_tb_'.","message-field":"Message field","message-field-required":"Message field is required.","table-col":"Table column","table-col-required":"Table column is required.","latitude-field-name":"Latitude field name","longitude-field-name":"Longitude field name","latitude-field-name-required":"Latitude field name is required.","longitude-field-name-required":"Longitude field name is required.","fetch-perimeter-info-from-metadata":"Fetch perimeter information from metadata","fetch-perimeter-info-from-metadata-tooltip":"If perimeter type is set to 'Polygon' the value of metadata field '{{perimeterKeyName}}' will be set as perimeter definition without additional parsing of the value. Otherwise, if perimeter type is set to 'Circle' the value of '{{perimeterKeyName}}' metadata field will be parsed to extract 'latitude', 'longitude',  'radius', 'radiusUnit' fields that uses for circle perimeter definition.","perimeter-key-name":"Perimeter key name","perimeter-key-name-hint":"Metadata field name that includes perimeter information.","perimeter-key-name-required":"Perimeter key name is required.","perimeter-circle":"Circle","perimeter-polygon":"Polygon","perimeter-type":"Perimeter type","circle-center-latitude":"Center latitude","circle-center-latitude-required":"Center latitude is required.","circle-center-longitude":"Center longitude","circle-center-longitude-required":"Center longitude is required.","range-unit-meter":"Meter","range-unit-kilometer":"Kilometer","range-unit-foot":"Foot","range-unit-mile":"Mile","range-unit-nautical-mile":"Nautical mile","range-units":"Range units","range-units-required":"Range units is required.",range:"Range","range-required":"Range is required.","polygon-definition":"Polygon definition","polygon-definition-required":"Polygon definition is required.","polygon-definition-hint":"Use the following format for manual definition of polygon: [[lat1,lon1],[lat2,lon2], ... ,[latN,lonN]].","min-inside-duration":"Minimal inside duration","min-inside-duration-value-required":"Minimal inside duration is required","min-inside-duration-time-unit":"Minimal inside duration time unit","min-outside-duration":"Minimal outside duration","min-outside-duration-value-required":"Minimal outside duration is required","min-outside-duration-time-unit":"Minimal outside duration time unit","tell-failure-if-absent":"Tell Failure","tell-failure-if-absent-hint":'If at least one selected key doesn\'t exist the outbound message will report "Failure".',"get-latest-value-with-ts":"Fetch timestamp for the latest telemetry values","get-latest-value-with-ts-hint":'If selected, the latest telemetry values will also include timestamp, e.g: "temp": "&#123;"ts":1574329385897, "value":42&#125;"',"ignore-null-strings":"Ignore null strings","ignore-null-strings-hint":"If selected rule node will ignore entity fields with empty value.","add-metadata-key-values-as-kafka-headers":"Add Message metadata key-value pairs to Kafka record headers","add-metadata-key-values-as-kafka-headers-hint":"If selected, key-value pairs from message metadata will be added to the outgoing records headers as byte arrays with predefined charset encoding.","charset-encoding":"Charset encoding","charset-encoding-required":"Charset encoding is required.","charset-us-ascii":"US-ASCII","charset-iso-8859-1":"ISO-8859-1","charset-utf-8":"UTF-8","charset-utf-16be":"UTF-16BE","charset-utf-16le":"UTF-16LE","charset-utf-16":"UTF-16","select-queue-hint":"The queue name can be selected from a drop-down list or add a custom name.","device-profile-node-hint":"Useful if you have duration or repeating conditions to ensure continuity of alarm state evaluation.","persist-alarm-rules":"Persist state of alarm rules","persist-alarm-rules-hint":"If enabled, the rule node will store the state of processing to the database.","fetch-alarm-rules":"Fetch state of alarm rules","fetch-alarm-rules-hint":"If enabled, the rule node will restore the state of processing on initialization and ensure that alarms are raised even after server restarts. Otherwise, the state will be restored when the first message from the device arrives.","input-value-key":"Input value key","input-value-key-required":"Input value key is required.","output-value-key":"Output value key","output-value-key-required":"Output value key is required.","number-of-digits-after-floating-point":"Number of digits after floating point","number-of-digits-after-floating-point-range":"Number of digits after floating point should be in a range from 0 to 15.","failure-if-delta-negative":"Tell Failure if delta is negative","failure-if-delta-negative-tooltip":"Rule node forces failure of message processing if delta value is negative.","use-caching":"Use caching","use-caching-tooltip":'Rule node will cache the value of "{{inputValueKey}}" that arrives from the incoming message to improve performance. Note that the cache will not be updated if you modify the "{{inputValueKey}}" value elsewhere.',"add-time-difference-between-readings":'Add the time difference between "{{inputValueKey}}" readings',"add-time-difference-between-readings-tooltip":'If enabled, the rule node will add the "{{periodValueKey}}" to the outbound message.',"period-value-key":"Period value key","period-value-key-required":"Period value key is required.","general-pattern-hint":"Use ${metadataKey} for value from metadata, $[messageKey] for value from message body.","alarm-severity-pattern-hint":'Use <code><span style="color: #000;">$&#123;</span>metadataKey<span style="color: #000;">&#125;</span></code> for value from metadata, <code><span style="color: #000;">$[</span>messageKey<span style="color: #000;">]</span></code> for value from message body. Alarm severity should be system (CRITICAL, MAJOR etc.)',"output-node-name-hint":"The <b>rule node name</b> corresponds to the <b>relation type</b> of the output message, and it is used to forward messages to other rule nodes in the caller rule chain.","skip-latest-persistence":"Skip latest persistence","skip-latest-persistence-hint":"Rule node will not update values for incoming keys for the latest time series data. Useful for highly loaded use-cases to decrease the pressure on the DB.","use-server-ts":"Use server ts","use-server-ts-hint":"Rule node will use the timestamp of message processing instead of the timestamp from the message. Useful for all sorts of sequential processing if you merge messages from multiple sources (devices, assets, etc).","kv-map-pattern-hint":"All input fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","kv-map-single-pattern-hint":"Input field support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","shared-scope":"Shared scope","server-scope":"Server scope","client-scope":"Client scope","attribute-type":"Attribute","constant-type":"Constant","time-series-type":"Time series","message-body-type":"Message","message-metadata-type":"Metadata","argument-tile":"Arguments","no-arguments-prompt":"No arguments configured","result-title":"Result","functions-field-input":"Functions","no-option-found":"No option found","argument-source-field-input":"Source","argument-source-field-input-required":"Argument source is required.","argument-key-field-input":"Key","argument-key-field-input-required":"Argument key is required.","constant-value-field-input":"Constant value","constant-value-field-input-required":"Constant value is required.","attribute-scope-field-input":"Attribute scope","attribute-scope-field-input-required":"Attribute scope os required.","default-value-field-input":"Default value","type-field-input":"Type","type-field-input-required":"Type is required.","key-field-input":"Key","add-entity-type":"Add entity type","add-device-profile":"Add device profile","key-field-input-required":"Key is required.","number-floating-point-field-input":"Number of digits after floating point","number-floating-point-field-input-hint":"Use <i>0</i> to convert result to integer","add-to-message-field-input":"Add to message","add-to-metadata-field-input":"Add to metadata","custom-expression-field-input":"Mathematical Expression","custom-expression-field-input-required":"Mathematical expression is required","custom-expression-field-input-hint":"Specify a mathematical expression to evaluate. Default expression demonstrates how to transform Fahrenheit to Celsius","retained-message":"Retained","attributes-mapping":"Attributes mapping","latest-telemetry-mapping":"Latest telemetry mapping","add-mapped-attribute-to":"Add mapped attributes to","add-mapped-latest-telemetry-to":"Add mapped latest telemetry to","add-mapped-fields-to":"Add mapped fields to","add-selected-details-to":"Add selected details to","clear-selected-types":"Clear selected types","clear-selected-details":"Clear selected details","clear-selected-fields":"Clear selected fields","clear-selected-keys":"Clear selected keys","geofence-configuration":"Geofence configuration","coordinate-field-names":"Coordinate field names","coordinate-field-hint":"Rule node tries to retrieve the specified fields from the message. If they are not present, it will look them up in the metadata.","presence-monitoring-strategy":"Presence monitoring strategy","presence-monitoring-strategy-on-first-message":"On first message","presence-monitoring-strategy-on-each-message":"On each message","presence-monitoring-strategy-on-first-message-hint":"Reports presence status 'Inside' or 'Outside' on the first message after the configured minimal duration has passed since previous presence status 'Entered' or 'Left' update.","presence-monitoring-strategy-on-each-message-hint":"Reports presence status 'Inside' or 'Outside' on each message after presence status 'Entered' or 'Left' update.","fetch-credentials-to":"Fetch credentials to","add-originator-attributes-to":"Add originator attributes to","originator-attributes":"Originator attributes","fetch-latest-telemetry-with-timestamp":"Fetch latest telemetry with timestamp","fetch-latest-telemetry-with-timestamp-tooltip":'If selected, latest telemetry values will be added to the outbound metadata with timestamp, e.g: "{{latestTsKeyName}}": "{"ts":1574329385897, "value":42}"',"tell-failure":"Tell failure if any of the attributes are missing","tell-failure-tooltip":'If at least one selected key doesn\'t exist the outbound message will report "Failure".',"created-time":"Created time","chip-help":"Press 'Enter' to complete {{inputName}} input. \nPress 'Backspace' to delete {{inputName}}. \nMultiple values supported.",detail:"detail","field-name":"field name","device-profile":"device profile","entity-type":"entity type","message-type":"message type","timeseries-key":"time series key",type:"Type","first-name":"First name","last-name":"Last name",label:"Label","originator-fields-mapping":"Originator fields mapping","add-mapped-originator-fields-to":"Add mapped originator fields to",fields:"Fields","skip-empty-fields":"Skip empty fields","skip-empty-fields-tooltip":"Fields with empty values will not be added to the output message/output metadata.","fetch-interval":"Fetch interval","fetch-strategy":"Fetch strategy","fetch-timeseries-from-to":"Fetch time series from {{startInterval}} {{startIntervalTimeUnit}} ago to {{endInterval}} {{endIntervalTimeUnit}} ago.","fetch-timeseries-from-to-invalid":'Fetch time series invalid ("Interval start" should be less than "Interval end").',"use-metadata-dynamic-interval-tooltip":"If selected, the rule node will use dynamic interval start and end based on the message and metadata patterns.","all-mode-hint":'If selected fetch mode "All" rule node will retrieve telemetry from the fetch interval with configurable query parameters.',"first-mode-hint":'If selected fetch mode "First" rule node will retrieve the closest telemetry to the fetch interval\'s start.',"last-mode-hint":'If selected fetch mode "Last" rule node will retrieve the closest telemetry to the fetch interval\'s end.',ascending:"Ascending",descending:"Descending",min:"Min",max:"Max",average:"Average",sum:"Sum",count:"Count",none:"None","last-level-relation-tooltip":"If selected, the rule node will search related entities only on the level set in the max relation level.","last-level-device-relation-tooltip":"If selected, the rule node will search related devices only on the level set in the max relation level.","data-to-fetch":"Data to fetch","mapping-of-customers":"Mapping of customer's","map-fields-required":"All mapping fields are required.",attributes:"Attributes","related-device-attributes":"Related device attributes","add-selected-attributes-to":"Add selected attributes to","device-profiles":"Device profiles","mapping-of-tenant":"Mapping of tenant's","add-attribute-key":"Add attribute key","message-template":"Message template","message-template-required":"Message template is required","use-system-slack-settings":"Use system slack settings","slack-api-token":"Slack API token","slack-api-token-required":"Slack API token is required","keys-mapping":"keys mapping","add-key":"Add key",recipients:"Recipients","message-subject-and-content":"Message subject and content","template-rules-hint":"Both input fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the message metadata.","originator-customer-desc":"Use customer of incoming message originator as new originator.","originator-tenant-desc":"Use current tenant as new originator.","originator-related-entity-desc":"Use related entity as new originator. Lookup based on configured relation type and direction.","originator-alarm-originator-desc":"Use alarm originator as new originator. Only if incoming message originator is alarm entity.","originator-entity-by-name-pattern-desc":"Use entity fetched from DB as new originator. Lookup based on entity type and specified name pattern.","email-from-template-hint":"Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","recipients-block-main-hint":"Comma-separated address list. All input fields support templatization. Use $[messageKey] to extract value from the message and ${metadataKey} to extract value from the metadata.","forward-msg-default-rule-chain":"Forward message to the originator's default rule chain","forward-msg-default-rule-chain-tooltip":"If enabled, message will be forwarded to the originator's default rule chain, or rule chain from configuration, if originator has no default rule chain defined in the entity profile.","exclude-zero-deltas":"Exclude zero deltas from outbound message","exclude-zero-deltas-hint":'If enabled, the "{{outputValueKey}}" output key will be added to the outbound message if its value is not zero.',"exclude-zero-deltas-time-difference-hint":'If enabled, the "{{outputValueKey}}" and "{{periodValueKey}}" output keys will be added to the outbound message only if the "{{outputValueKey}}" value is not zero.',"search-direction-from":"From originator to target entity","search-direction-to":"From target entity to originator","del-relation-direction-from":"From originator","del-relation-direction-to":"To originator","target-entity":"Target entity","function-configuration":"Function configuration","function-name":"Function name","function-name-required":"Function name is required.",qualifier:"Qualifier","qualifier-hint":'If the qualifier is not specified, the default qualifier "$LATEST" will be used.',"aws-credentials":"AWS Credentials","connection-timeout":"Connection timeout","connection-timeout-required":"Connection timeout is required.","connection-timeout-min":"Min connection timeout is 0.","connection-timeout-hint":"The amount of time to wait in seconds when initially establishing a connection before giving up and timing out. A value of 0 means infinity, and is not recommended.","request-timeout":"Request timeout","request-timeout-required":"Request timeout is required","request-timeout-min":"Min request timeout is 0","request-timeout-hint":"The amount of time to wait in seconds for the request to complete before giving up and timing out. A value of 0 means infinity, and is not recommended.","tell-failure-aws-lambda":"Tell Failure if AWS Lambda function execution raises exception","tell-failure-aws-lambda-hint":"Rule node forces failure of message processing if AWS Lambda function execution raises exception."},"key-val":{key:"Key",value:"Value","see-examples":"See examples.","remove-entry":"Remove entry","remove-mapping-entry":"Remove mapping entry","add-mapping-entry":"Add mapping","add-entry":"Add entry","copy-key-values-from":"Copy key-values from","delete-key-values":"Delete key-values","delete-key-values-from":"Delete key-values from","at-least-one-key-error":"At least one key should be selected.","unique-key-value-pair-error":"'{{keyText}}' must be different from the '{{valText}}'!"},"mail-body-type":{"plain-text":"Plain text",html:"HTML",dynamic:"Dynamic","use-body-type-template":"Use body type template","plain-text-description":"Simple, unformatted text with no special styling or formating.","html-text-description":"Allows you to use HTML tags for formatting, links and images in your mai body.","dynamic-text-description":"Allows to use Plain Text or HTML body type dynamically based on templatization feature.","after-template-evaluation-hint":"After template evaluation value should be true for HTML, and false for Plain text."}}},!0)}(e),Gp(jp,"tb-rule-node-core-config-css")}static{this.ɵfac=function(e){return new(e||Kp)(t.ɵɵinject(K.TranslateService))}}static{this.ɵmod=t.ɵɵdefineNgModule({type:Kp})}static{this.ɵinj=t.ɵɵdefineInjector({imports:[$,S,hi,$s,co,ls,Dp,_p,oe]})}}e("RuleNodeCoreConfigModule",Kp),("undefined"==typeof ngJitMode||ngJitMode)&&t.ɵɵsetNgModuleScope(Kp,{declarations:[oe],imports:[$,S],exports:[hi,$s,co,ls,Dp,_p,oe]})}}}));//# sourceMappingURL=rulenode-core-config.js.map
diff --git a/tools/pom.xml b/tools/pom.xml
index 31bca1dfbe..2d196cec7d 100644
--- a/tools/pom.xml
+++ b/tools/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>tools</artifactId>
diff --git a/transport/coap/pom.xml b/transport/coap/pom.xml
index 0dc5242ac5..76655178ae 100644
--- a/transport/coap/pom.xml
+++ b/transport/coap/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.transport</groupId>
diff --git a/transport/http/pom.xml b/transport/http/pom.xml
index 2dad550719..7e569ea1f1 100644
--- a/transport/http/pom.xml
+++ b/transport/http/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.transport</groupId>
diff --git a/transport/lwm2m/pom.xml b/transport/lwm2m/pom.xml
index 4eb872f163..b5b7867146 100644
--- a/transport/lwm2m/pom.xml
+++ b/transport/lwm2m/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.transport</groupId>
diff --git a/transport/mqtt/pom.xml b/transport/mqtt/pom.xml
index a8bed687bc..88009474aa 100644
--- a/transport/mqtt/pom.xml
+++ b/transport/mqtt/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
     <groupId>org.thingsboard.transport</groupId>
diff --git a/transport/pom.xml b/transport/pom.xml
index 588c8553d4..8e7f77be9b 100644
--- a/transport/pom.xml
+++ b/transport/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <artifactId>transport</artifactId>
diff --git a/transport/snmp/pom.xml b/transport/snmp/pom.xml
index 4bdc6180bf..02fe36f657 100644
--- a/transport/snmp/pom.xml
+++ b/transport/snmp/pom.xml
@@ -21,7 +21,7 @@
 
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>transport</artifactId>
     </parent>
 
diff --git a/ui-ngx/.eslintrc.json b/ui-ngx/.eslintrc.json
index 764733e4d7..2d17064e40 100644
--- a/ui-ngx/.eslintrc.json
+++ b/ui-ngx/.eslintrc.json
@@ -1,68 +1,74 @@
 {
-    "root": true,
-    "ignorePatterns": [
-        "projects/**/*"
-    ],
-    "overrides": [
-        {
-            "files": [
-                "*.ts"
-            ],
-            "parserOptions": {
-                "project": [
-                    "tsconfig.json",
-                    "e2e/tsconfig.json"
-                ],
-                "createDefaultProgram": true
-            },
-            "extends": [
-                "plugin:@angular-eslint/ng-cli-compat",
-                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ],
-            "rules": {
-                "@typescript-eslint/explicit-member-accessibility": [
-                    "off",
-                    {
-                        "accessibility": "explicit"
-                    }
-                ],
-                "arrow-parens": [
-                    "off",
-                    "always"
-                ],
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "prefix": [ "tb" ]
-                    }
-                ],
-                "id-blacklist": [
-                    "error",
-                    "any",
-                    "Number",
-                    "String",
-                    "string",
-                    "Boolean",
-                    "boolean",
-                    "Undefined",
-                    "undefined"
-                ],
-                "import/order": "off",
-                "@typescript-eslint/member-ordering": "off",
-                "no-underscore-dangle": "off",
-                "@typescript-eslint/naming-convention": "off",
-                "jsdoc/newline-after-description": 0
-            }
-        },
-        {
-            "files": [
-                "*.html"
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended"
-            ],
-            "rules": {}
-        }
-    ]
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": [
+              "tb"
+            ]
+          }
+        ],
+        "id-blacklist": [
+          "error",
+          "any",
+          "Number",
+          "String",
+          "string",
+          "Boolean",
+          "boolean",
+          "Undefined",
+          "undefined"
+        ],
+        "import/order": "off",
+        "@typescript-eslint/member-ordering": "off",
+        "no-underscore-dangle": "off",
+        "@typescript-eslint/naming-convention": "off",
+        "jsdoc/newline-after-description": 0
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:tailwindcss/recommended"
+      ],
+      "rules": {
+          "tailwindcss/no-custom-classname": "off",
+          "tailwindcss/migration-from-tailwind-2": "off",
+          "tailwindcss/enforces-negative-arbitrary-values": "off"
+      }
+    }
+  ]
 }
diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json
index 10c904f88d..f1efd8943a 100644
--- a/ui-ngx/angular.json
+++ b/ui-ngx/angular.json
@@ -18,12 +18,20 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-builders/custom-esbuild:application",
           "options": {
-            "outputPath": "target/generated-resources/public",
+            "plugins": ["./esbuild/tb-esbuild-plugins.ts"],
+            "loader": {
+                ".raw": "text"
+            },
+            "outputPath": {
+                "base": "target/generated-resources/public",
+                "media": ".",
+                "browser": ""
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "src/tsconfig.app.json",
             "aot": true,
             "assets": [
@@ -122,49 +130,8 @@
               "node_modules/prismjs/components/prism-typescript.min.js",
               "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.min.js"
             ],
-            "customWebpackConfig": {
-              "path": "./extra-webpack.config.js"
-            },
             "allowedCommonJsDependencies": [
-              "hammerjs",
-              "react",
-              "react-dom",
-              "reactcss",
-              "react-ace",
-              "schema-inspector",
-              "@flowjs/flow.js",
-              "@material-ui/icons/Add",
-              "@material-ui/icons/Clear",
-              "js-beautify",
-              "mousetrap",
-              "prop-types",
-              "react-is",
-              "hoist-non-react-statics",
-              "classnames",
-              "raf",
-              "moment-timezone",
-              "tinycolor2",
-              "json-schema-defaults",
-              "leaflet-providers",
-              "lodash",
-              "jquery",
-              "jquery.terminal",
-              "tooltipster",
-              "jstree",
-              "qrcode",
-              "wcwidth",
-              "leaflet-polylinedecorator",
-              "ace-diff",
-              "messageformat-parser",
-              "html2canvas",
-              "jszip",
-              "moment",
-              "ace",
-              "ace-builds",
-              "diff-match-patch",
-              "tv4",
-              "@messageformat/parser",
-              "sorted-btree"
+              "*"
             ]
           },
           "configurations": {
@@ -187,8 +154,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": false,
               "budgets": [
                 {
                   "type": "initial",
@@ -198,7 +163,6 @@
               ]
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": {
                 "scripts": false,
                 "styles": {
@@ -207,7 +171,6 @@
                 },
                 "fonts": false
               },
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -215,42 +178,25 @@
           }
         },
         "serve": {
-          "builder": "@angular-builders/custom-webpack:dev-server",
+          "builder": "@angular-builders/custom-esbuild:dev-server",
           "options": {
-            "browserTarget": "thingsboard:build",
+            "buildTarget": "thingsboard:build",
             "proxyConfig": "proxy.conf.js"
           },
           "configurations": {
             "production": {
-              "browserTarget": "thingsboard:build:production"
+              "buildTarget": "thingsboard:build:production"
             },
             "development": {
-              "browserTarget": "thingsboard:build:development"
+              "buildTarget": "thingsboard:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "thingsboard:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "buildTarget": "thingsboard:build"
           }
         },
         "lint": {
@@ -263,25 +209,6 @@
           }
         }
       }
-    },
-    "thingsboard-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "thingsboard:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "thingsboard:serve:production"
-            }
-          }
-        }
-      }
     }
   },
   "cli": {
diff --git a/ui-ngx/e2e/protractor.conf.js b/ui-ngx/e2e/protractor.conf.js
deleted file mode 100644
index 20c3ebfd66..0000000000
--- a/ui-ngx/e2e/protractor.conf.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require("jasmine-spec-reporter");
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    "./src/**/*.e2e-spec.ts",
-  ],
-  capabilities: {
-    "browserName": "chrome",
-  },
-  directConnect: true,
-  baseUrl: "http://localhost:4200/",
-  framework: "jasmine",
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {},
-  },
-  onPrepare() {
-    require("ts-node").register({
-      project: require("path").join(__dirname, "./tsconfig.e2e.json"),
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  },
-};
diff --git a/ui-ngx/e2e/src/app.e2e-spec.ts b/ui-ngx/e2e/src/app.e2e-spec.ts
deleted file mode 100644
index 88412e7669..0000000000
--- a/ui-ngx/e2e/src/app.e2e-spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to tb-license-server!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
diff --git a/ui-ngx/e2e/src/app.po.ts b/ui-ngx/e2e/src/app.po.ts
deleted file mode 100644
index 5064eb2e1b..0000000000
--- a/ui-ngx/e2e/src/app.po.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('tb-root h1')).getText() as Promise<string>;
-  }
-}
diff --git a/ui-ngx/e2e/tsconfig.e2e.json b/ui-ngx/e2e/tsconfig.e2e.json
deleted file mode 100644
index 77d311e88d..0000000000
--- a/ui-ngx/e2e/tsconfig.e2e.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
diff --git a/ui-ngx/esbuild/tb-esbuild-plugins.ts b/ui-ngx/esbuild/tb-esbuild-plugins.ts
new file mode 100644
index 0000000000..db2ec59930
--- /dev/null
+++ b/ui-ngx/esbuild/tb-esbuild-plugins.ts
@@ -0,0 +1,104 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import type { Plugin, PluginBuild, OutputFile } from 'esbuild';
+import dirTree from 'directory-tree';
+import * as packageJson from '../package.json';
+import { gzip } from 'node:zlib';
+import * as path from 'node:path';
+
+const defineTbVariablesPlugin: Plugin = {
+  name: 'tb-define-variables',
+  setup(build: PluginBuild) {
+    const options = build.initialOptions;
+
+    const langs: string[] = [];
+
+    dirTree("./src/assets/locale/", {extensions: /\.json$/}, (item) => {
+      /* It is expected what the name of a locale file has the following format: */
+      /* 'locale.constant-LANG_CODE[_REGION_CODE].json', e.g. locale.constant-es.json or locale.constant-zh_CN.json*/
+      langs.push(item.name.slice(item.name.lastIndexOf("-") + 1, -5));
+    });
+    options.define.TB_VERSION = JSON.stringify(packageJson.version);
+    options.define.SUPPORTED_LANGS = JSON.stringify(langs);
+    options.define.ngJitMode = 'true';
+  },
+};
+
+const resolveJQueryPlugin: Plugin = {
+  name: 'tb-resolve-jquery-plugin',
+  setup(build: PluginBuild) {
+    if (isProduction()) {
+      const jQueryPath = require.resolve('jquery');
+      build.onResolve({filter: /^(jquery|\$)$/}, () => {
+        return {path: jQueryPath};
+      })
+    }
+  }
+};
+
+const compressFileTypes = ['.js', '.css', '.html', '.svg', '.png', '.jpg', '.ttf', '.gif', '.woff', '.woff2', '.eot', '.json'];
+const compressThreshold = 10240;
+
+const compressorPlugin: Plugin = {
+  name: 'tb-compressor-plugin',
+  setup(build) {
+    build.onEnd(async result => {
+      if (!result.outputFiles || !isProduction()) return;
+      const outputExt = '.gz';
+      const gzippedFiles: OutputFile[] = [];
+      for (const file of result.outputFiles) {
+        if (!compressFileTypes.some((ext) => ext === path.extname(file.path))) continue;
+        if (file.contents.byteLength <= compressThreshold) continue;
+        const compressedContent = await gzipContent(file.contents);
+        const compressedFilePath = `${file.path}${outputExt}`;
+        gzippedFiles.push(
+          {
+            path: compressedFilePath,
+            hash: file.hash,
+            contents: new Uint8Array(compressedContent),
+            text: '',
+          }
+        );
+      }
+      result.outputFiles.push(...gzippedFiles);
+    });
+  },
+};
+
+async function gzipContent(content): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    gzip(content, (error, result) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    });
+  });
+}
+
+function isProduction(): boolean {
+  const configurationIndex = process.argv.indexOf('--configuration');
+  let production = false;
+  if (configurationIndex > -1) {
+    const configurationValue = process.argv[configurationIndex + 1];
+    production = configurationValue === 'production';
+  }
+  return production;
+}
+
+export default [defineTbVariablesPlugin, resolveJQueryPlugin, compressorPlugin];
diff --git a/ui-ngx/extra-webpack.config.js b/ui-ngx/extra-webpack.config.js
deleted file mode 100644
index 4c896eea64..0000000000
--- a/ui-ngx/extra-webpack.config.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const CompressionPlugin = require("compression-webpack-plugin");
-const JavaScriptOptimizerPlugin = require("@angular-devkit/build-angular/src/webpack/plugins/javascript-optimizer-plugin").JavaScriptOptimizerPlugin;
-const webpack = require("webpack");
-const dirTree = require("directory-tree");
-const ngWebpack = require('@ngtools/webpack');
-const keysTransformer = require('ts-transformer-keys/transformer').default;
-
-var langs = [];
-
-dirTree("./src/assets/locale/", {extensions: /\.json$/}, (item) => {
-  /* It is expected what the name of a locale file has the following format: */
-  /* 'locale.constant-LANG_CODE[_REGION_CODE].json', e.g. locale.constant-es.json or locale.constant-zh_CN.json*/
-  langs.push(item.name.slice(item.name.lastIndexOf("-") + 1, -5));
-});
-
-module.exports = (config, options) => {
-
-  config.ignoreWarnings.push(/Usage of '~' in imports is deprecated/);
-  config.ignoreWarnings.push(/Did you mean "left" instead?/);
-  config.ignoreWarnings.push(/autoprefixer/);
-
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      TB_VERSION: JSON.stringify(require("./package.json").version),
-      SUPPORTED_LANGS: JSON.stringify(langs),
-    })
-  );
-  config.plugins.push(
-    new webpack.ProvidePlugin(
-      {
-        $: "jquery"
-      }
-    )
-  );
-  config.plugins.push(
-    new CompressionPlugin({
-      filename: "[path][base].gz[query]",
-      algorithm: "gzip",
-      test: /\.js$|\.css$|\.html$|\.svg?.+$|\.jpg$|\.ttf?.+$|\.woff?.+$|\.eot?.+$|\.json$/,
-      threshold: 10240,
-      minRatio: 0.8,
-      deleteOriginalAssets: false,
-    })
-  );
-  config.plugins.push(
-    new webpack.IgnorePlugin({
-      resourceRegExp: /^\.\/locale$/,
-      contextRegExp: /moment$/,
-    })
-  );
-
-  config.module.rules[2].use[0].options.aot = false;
-  const index = config.plugins.findIndex(p => p instanceof ngWebpack.AngularWebpackPlugin);
-  let angularWebpackPlugin = config.plugins[index];
-  if (config.mode === 'production') {
-    const angularCompilerOptions = angularWebpackPlugin.pluginOptions;
-    angularCompilerOptions.emitClassMetadata = true;
-    angularCompilerOptions.emitNgModuleScope = true;
-    config.plugins.splice(index, 1);
-    angularWebpackPlugin = new ngWebpack.AngularWebpackPlugin(angularCompilerOptions);
-    config.plugins.push(angularWebpackPlugin);
-    const javascriptOptimizerOptions = config.optimization.minimizer[0].options;
-    delete javascriptOptimizerOptions.define.ngJitMode;
-    config.optimization.minimizer.splice(0, 1);
-    config.optimization.minimizer.unshift(new JavaScriptOptimizerPlugin(javascriptOptimizerOptions));
-  }
-
-  addTransformerToAngularWebpackPlugin(angularWebpackPlugin, keysTransformer);
-
-  return config;
-};
-
-function addTransformerToAngularWebpackPlugin(plugin, transformer) {
-  const originalCreateFileEmitter = plugin.createFileEmitter; // private method
-  plugin.createFileEmitter = function (program, transformers, getExtraDependencies, onAfterEmit) {
-    if (!transformers) {
-      transformers = {};
-    }
-    if (!transformers.before) {
-      transformers = { before: [] };
-    }
-    transformers.before.push(transformer(program.getProgram()));
-    return originalCreateFileEmitter.apply(plugin, [program, transformers, getExtraDependencies, onAfterEmit]);
-  };
-}
diff --git a/ui-ngx/generate-icon-metadata.js b/ui-ngx/generate-icon-metadata.js
new file mode 100644
index 0000000000..fcf6446fe2
--- /dev/null
+++ b/ui-ngx/generate-icon-metadata.js
@@ -0,0 +1,130 @@
+/*
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const materialIconDir = path.join('.', 'src', 'assets', 'metadata');
+const mdiMetadata = path.join('.', 'node_modules', '@mdi', 'svg', 'meta.json');
+
+async function init() {
+  const iconsBundle = JSON.parse(await fs.promises.readFile(path.join(materialIconDir, 'material-icons.json')));
+
+  await getMaterialIconMetadataAndUpdated(iconsBundle);
+  await getMDIMetadataAndUpdated(iconsBundle);
+
+  await fs.promises.writeFile(path.join(materialIconDir, 'material-icons.json'), JSON.stringify(iconsBundle), 'utf8')
+}
+
+async function getMaterialIconMetadataAndUpdated(iconsBundle){
+  const iconsResponse = await fetch('https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true');
+  const iconsText = await iconsResponse.text();
+  const clearText = iconsText.substring(iconsText.indexOf("\n") + 1);
+
+  const icons = JSON.parse(clearText).icons;
+
+  let prevItem;
+  const filterIcons = icons.filter((item) => {
+    if (prevItem?.name !== item.name && !item.unsupported_families.includes('Material Icons')) {
+      prevItem = item;
+      return true;
+    }
+    return false;
+  });
+
+  filterIcons.forEach((item, index) => {
+    const findItem = iconsBundle.find((el) => el.name === item.name);
+    if (!findItem) {
+      let prevIndexIcon = 0;
+      if (index === 0) {
+        prevIndexIcon = 45;
+      } else {
+        let iteration = 0;
+        while (prevIndexIcon < 45) {
+          iteration++;
+          const prevIconName = filterIcons[index - iteration].name;
+          prevIndexIcon = findPreviousIcon(iconsBundle, prevIconName);
+        }
+      }
+      if (prevIndexIcon >= 0) {
+        iconsBundle.splice(prevIndexIcon + 1, 0, {name:item.name, tags:item.tags});
+      }
+      console.log('Not found icon:', item.name);
+      console.count('Not found material icon');
+      return;
+    }
+    if (JSON.stringify(item.tags) !== JSON.stringify(findItem.tags)) {
+      findItem.tags = item.tags;
+      console.log('Difference tags in', item.name);
+      console.count('Difference tags in material icon');
+    }
+  });
+}
+
+async function getMDIMetadataAndUpdated(iconsBundle){
+  const mdiBundle = JSON.parse(await fs.promises.readFile(mdiMetadata));
+
+  iconsBundle
+    .filter(item => item.name.startsWith('mdi:'))
+    .forEach(item => {
+      const iconName = item.name.substring(item.name.indexOf(":") + 1);
+      const findItem = mdiBundle.find((el) => el.name === iconName);
+      if (!findItem) {
+        console.error('Delete icon:', item.name);
+      }
+    });
+
+
+  mdiBundle.forEach((item, index) => {
+    const iconName = `mdi:${item.name}`
+    let iconTags = item.tags;
+    const iconAliases = item.aliases.map(item => item.replaceAll('-', ' '));
+    if (!iconTags.length && item.aliases.length)  {
+      iconTags = iconAliases;
+    } else if (item.aliases.length) {
+      iconTags = iconTags.concat(iconAliases);
+    }
+    iconTags = iconTags.map(item => item.toLowerCase());
+
+    const findItem = iconsBundle.find((el) => el.name === iconName);
+    if (!findItem) {
+      let prevIndexIcon;
+      if (index === 0) {
+        prevIndexIcon = iconsBundle.findIndex(item => item.name.startsWith('mdi:'))
+      } else {
+        const prevIconName = `mdi:${mdiBundle[index - 1].name}`;
+        prevIndexIcon = findPreviousIcon(iconsBundle, prevIconName);
+      }
+      if (prevIndexIcon >= 0) {
+        iconsBundle.splice(prevIndexIcon + 1, 0, {name:iconName, tags:iconTags});
+      }
+      console.log('Not found icon:', iconName);
+      console.count('Not found mdi icon');
+      return;
+    }
+    if (JSON.stringify(iconTags) !== JSON.stringify(findItem.tags)) {
+      findItem.tags = iconTags;
+      console.log('Difference tags in', iconName);
+      console.count('Difference tags in mdi icon');
+    }
+  });
+}
+
+function findPreviousIcon(iconsBundle, findName) {
+  return iconsBundle.findIndex(item => item.name === findName);
+}
+
+init();
diff --git a/ui-ngx/generate-types.js b/ui-ngx/generate-types.js
index 647552aa9e..3cc35ebba3 100644
--- a/ui-ngx/generate-types.js
+++ b/ui-ngx/generate-types.js
@@ -19,8 +19,10 @@ const path = require('path');
 
 const typeDir = path.join('.', 'target', 'types');
 const srcDir = path.join('.', 'target', 'types', 'src');
+const stylesCss = path.join(srcDir, 'styles.css');
 const moduleMapPath = path.join('src', 'app', 'modules', 'common', 'modules-map.ts');
 const ngcPath = path.join('.', 'node_modules', '.bin', 'ngc');
+const tailwindcss = path.join('.', 'node_modules', '.bin', 'tailwindcss');
 const tsconfigPath = path.join('src', 'tsconfig.app.json');
 
 console.log(`Remove directory: ${typeDir}`);
@@ -31,12 +33,28 @@ try {
 }
 
 const cliCommand = `${ngcPath} --p ${tsconfigPath} --declaration --outDir ${srcDir}`;
-console.log(cliCommand);
-try {
-  child_process.execSync(cliCommand);
-} catch (err) {
-  console.error("Build types", err);
-  process.exit(1);
+executeCliCommand(cliCommand, 'Build types');
+
+fromDir(srcDir, /(\.js|\.js\.map)$/, function (filename) {
+  try {
+    fs.rmSync(filename);
+  } catch (err) {
+    console.error(`Remove file error ${filename}: ${err}`);
+  }
+});
+fs.cpSync(moduleMapPath, `${typeDir}/${moduleMapPath}`);
+
+const generateStyleCssCommand = `${tailwindcss} -o ${stylesCss} --minify`;
+executeCliCommand(generateStyleCssCommand, 'Generate styles.css');
+
+function executeCliCommand(cliCommand, description) {
+  console.log(cliCommand);
+  try {
+    child_process.execSync(cliCommand);
+  } catch (err) {
+    console.error(description, err);
+    process.exit(1);
+  }
 }
 
 function fromDir(startPath, filter, callback) {
@@ -56,13 +74,3 @@ function fromDir(startPath, filter, callback) {
     }
   }
 }
-
-
-fromDir(srcDir, /(\.js|\.js\.map)$/, function (filename) {
-  try {
-    fs.rmSync(filename);
-  } catch (err) {
-    console.error(`Remove file error ${filename}: ${err}`);
-  }
-});
-fs.cpSync(moduleMapPath, `${typeDir}/${moduleMapPath}`);
diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index c726b58680..ee2eb448f1 100644
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@@ -1,178 +1,173 @@
 {
   "name": "thingsboard",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "scripts": {
     "ng": "ng",
     "start": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --configuration development --host 0.0.0.0 --open",
     "build": "ng build",
-    "build:prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --vendor-chunk",
+    "build:prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production",
     "build:types": "node generate-types.js",
-    "test": "ng test",
+    "build:icon-metadata": "node generate-icon-metadata.js",
     "lint": "ng lint",
-    "e2e": "ng e2e",
     "prepare": "patch-package"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.10",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^15.2.10",
+    "@angular/animations": "18.2.6",
+    "@angular/cdk": "18.2.6",
+    "@angular/common": "18.2.6",
+    "@angular/compiler": "18.2.6",
+    "@angular/core": "18.2.6",
     "@angular/flex-layout": "^15.0.0-beta.42",
-    "@angular/forms": "^15.2.10",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^15.2.10",
-    "@auth0/angular-jwt": "^5.1.2",
-    "@date-io/core": "1.3.7",
-    "@date-io/date-fns": "1.3.7",
+    "@angular/forms": "18.2.6",
+    "@angular/material": "18.2.6",
+    "@angular/platform-browser": "18.2.6",
+    "@angular/platform-browser-dynamic": "18.2.6",
+    "@angular/router": "18.2.6",
+    "@auth0/angular-jwt": "^5.2.0",
+    "@emotion/react": "11.13.3",
+    "@emotion/styled": "11.13.0",
     "@flowjs/flow.js": "^2.14.1",
-    "@flowjs/ngx-flow": "~0.6.0",
-    "@geoman-io/leaflet-geoman-free": "2.14.2",
-    "@iplab/ngx-color-picker": "^15.0.2",
-    "@mat-datetimepicker/core": "~11.0.3",
-    "@material-ui/core": "4.12.3",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/pickers": "3.3.10",
-    "@mdi/svg": "^7.2.96",
-    "@messageformat/core": "^3.1.0",
-    "@ngrx/effects": "^15.4.0",
-    "@ngrx/store": "^15.4.0",
-    "@ngrx/store-devtools": "^15.4.0",
-    "@ngx-translate/core": "^14.0.0",
+    "@flowjs/ngx-flow": "~0.8.1",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@geoman-io/leaflet-geoman-free": "2.17.0",
+    "@iplab/ngx-color-picker": "^18.0.1",
+    "@mat-datetimepicker/core": "~14.0.0",
+    "@mdi/svg": "^7.4.47",
+    "@messageformat/core": "^3.4.0",
+    "@mui/icons-material": "6.1.2",
+    "@mui/lab": "6.0.0-beta.10",
+    "@mui/material": "6.1.2",
+    "@mui/styles": "6.1.2",
+    "@mui/system": "6.1.2",
+    "@mui/x-date-pickers": "7.18.0",
+    "@ngrx/effects": "^18.0.2",
+    "@ngrx/store": "^18.0.2",
+    "@ngrx/store-devtools": "^18.0.2",
+    "@ngx-translate/core": "^15.0.0",
     "@svgdotjs/svg.filter.js": "^3.0.8",
-    "@svgdotjs/svg.js": "^3.2.0",
+    "@svgdotjs/svg.js": "^3.2.4",
     "@svgdotjs/svg.panzoom.js": "^2.1.2",
-    "@tinymce/tinymce-angular": "^7.0.0",
-    "ace-builds": "1.4.13",
+    "@tinymce/tinymce-angular": "^8.0.1",
+    "ace-builds": "1.36.2",
     "ace-diff": "^3.0.3",
-    "angular-gridster2": "~15.0.4",
-    "angular2-hotkeys": "^13.1.0",
+    "angular-gridster2": "~18.0.1",
+    "angular2-hotkeys": "^16.0.1",
     "canvas-gauges": "^2.1.7",
-    "core-js": "^3.29.1",
-    "date-fns": "2.0.0-alpha.27",
-    "dayjs": "1.11.4",
+    "core-js": "^3.38.1",
+    "dayjs": "1.11.13",
     "echarts": "https://github.com/thingsboard/echarts/archive/5.5.0-TB.tar.gz",
     "flot": "https://github.com/thingsboard/flot.git#0.9-work",
     "flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master",
     "font-awesome": "^4.7.0",
     "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
-    "jquery.terminal": "^2.35.3",
-    "js-beautify": "1.14.7",
+    "jquery.terminal": "^2.43.1",
+    "js-beautify": "1.15.1",
     "json-schema-defaults": "^0.4.0",
-    "jstree": "^3.3.15",
+    "jstree": "^3.3.17",
     "jstree-bootstrap-theme": "^1.0.1",
     "jszip": "^3.10.1",
-    "leaflet": "1.8.0",
+    "leaflet": "1.9.4",
     "leaflet-polylinedecorator": "1.6.0",
-    "leaflet-providers": "1.13.0",
+    "leaflet-providers": "2.0.0",
     "leaflet.gridlayer.googlemutant": "0.14.1",
     "leaflet.markercluster": "1.5.3",
-    "libphonenumber-js": "^1.10.4",
-    "marked": "^4.0.17",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.42",
-    "ngx-clipboard": "^15.1.0",
+    "libphonenumber-js": "^1.11.10",
+    "marked": "~12.0.2",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.45",
+    "ngx-clipboard": "^16.0.0",
     "ngx-daterangepicker-material": "^6.0.4",
-    "ngx-drag-drop": "^15.0.1",
-    "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/2.0.0",
-    "ngx-hm-carousel": "^3.0.0",
-    "ngx-markdown": "^15.1.2",
-    "ngx-sharebuttons": "^12.0.0",
-    "ngx-translate-messageformat-compiler": "^6.2.0",
+    "ngx-drag-drop": "^18.0.2",
+    "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/3.0.0",
+    "ngx-hm-carousel": "^18.0.0",
+    "ngx-markdown": "^18.1.0",
+    "ngx-sharebuttons": "^15.0.3",
+    "ngx-translate-messageformat-compiler": "^7.0.0",
     "objectpath": "^2.0.0",
     "prettier": "^2.8.3",
     "prop-types": "^15.8.1",
-    "qrcode": "^1.5.1",
+    "qrcode": "^1.5.4",
     "raphael": "^2.3.0",
-    "rc-select": "13.2.1",
-    "react": "17.0.2",
-    "react-ace": "9.5.0",
-    "react-dom": "17.0.2",
-    "react-dropzone": "^11.4.2",
+    "rc-select": "14.15.2",
+    "react": "18.3.1",
+    "react-ace": "12.0.0",
+    "react-dom": "18.3.1",
+    "react-dropzone": "14.2.9",
     "reactcss": "^1.2.3",
-    "rxjs": "~7.8.0",
-    "schema-inspector": "^2.0.2",
+    "rxjs": "~7.8.1",
+    "schema-inspector": "^2.1.0",
     "screenfull": "^6.0.2",
     "sorted-btree": "^1.8.1",
     "split.js": "^1.6.5",
-    "systemjs": "6.14.1",
+    "systemjs": "6.15.1",
     "tinycolor2": "^1.6.0",
-    "tinymce": "~5.10.7",
+    "tinymce": "~6.8.5",
     "tooltipster": "^4.2.8",
-    "ts-transformer-keys": "^0.4.4",
-    "tslib": "^2.5.0",
+    "tslib": "^2.7.0",
     "tv4": "^1.3.0",
     "typeface-roboto": "^1.1.13",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "~15.0.0",
-    "@angular-devkit/build-angular": "^15.2.10",
-    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "^15.2.10",
-    "@angular/compiler-cli": "^15.2.10",
-    "@angular/language-service": "^15.2.10",
-    "@ngtools/webpack": "15.2.10",
-    "@types/ace-diff": "^2.1.1",
-    "@types/canvas-gauges": "^2.1.4",
-    "@types/flot": "^0.0.32",
-    "@types/flowjs": "^2.13.9",
-    "@types/jasmine": "~3.10.2",
-    "@types/jasminewd2": "^2.0.10",
-    "@types/jquery": "^3.5.30",
-    "@types/js-beautify": "^1.13.3",
-    "@types/leaflet": "1.8.0",
+    "@angular-builders/custom-esbuild": "18.0.0",
+    "@angular-devkit/build-angular": "18.2.10",
+    "@angular-devkit/core": "18.2.10",
+    "@angular-devkit/schematics": "18.2.10",
+    "@angular-eslint/builder": "18.3.1",
+    "@angular-eslint/eslint-plugin": "18.3.1",
+    "@angular-eslint/eslint-plugin-template": "18.3.1",
+    "@angular-eslint/schematics": "18.3.1",
+    "@angular-eslint/template-parser": "18.3.1",
+    "@angular/build": "18.2.10",
+    "@angular/cli": "18.2.10",
+    "@angular/compiler-cli": "18.2.9",
+    "@angular/language-service": "18.2.9",
+    "@types/ace-diff": "^2.1.4",
+    "@types/canvas-gauges": "^2.1.8",
+    "@types/flot": "^0.0.36",
+    "@types/flowjs": "^2.13.14",
+    "@types/jquery": "^3.5.31",
+    "@types/js-beautify": "^1.14.3",
+    "@types/leaflet": "1.9.12",
     "@types/leaflet-polylinedecorator": "1.6.4",
     "@types/leaflet-providers": "1.2.4",
     "@types/leaflet.gridlayer.googlemutant": "0.4.9",
     "@types/leaflet.markercluster": "1.5.4",
-    "@types/lodash": "^4.14.192",
-    "@types/marked": "^4.0.8",
+    "@types/lodash": "^4.17.10",
     "@types/node": "~18.15.11",
-    "@types/raphael": "^2.3.2",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/systemjs": "6.13.1",
-    "@types/tinycolor2": "^1.4.3",
-    "@types/tooltipster": "^0.0.31",
-    "@typescript-eslint/eslint-plugin": "5.57.0",
-    "@typescript-eslint/parser": "5.57.0",
-    "compression-webpack-plugin": "^10.0.0",
-    "directory-tree": "^3.5.1",
-    "eslint": "^8.37.0",
+    "@types/raphael": "^2.3.9",
+    "@types/react": "18.3.10",
+    "@types/react-dom": "18.3.0",
+    "@types/systemjs": "6.15.1",
+    "@types/tinycolor2": "^1.4.6",
+    "@types/tooltipster": "^0.0.35",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "@typescript-eslint/utils": "^8.11.0",
+    "autoprefixer": "^10.4.20",
+    "compression-webpack-plugin": "^11.1.0",
+    "directory-tree": "^3.5.2",
+    "eslint": "~9.13.0",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
-    "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.9",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "ngrx-store-freeze": "^0.2.4",
-    "patch-package": "^6.5.1",
+    "patch-package": "^8.0.0",
+    "postcss": "^8.4.47",
     "postinstall-prepare": "^2.0.0",
-    "protractor": "~7.0.0",
     "raw-loader": "^4.0.2",
-    "ts-node": "^10.9.1",
-    "typescript": "~4.9.5",
-    "webpack": "5.77.0"
+    "tailwindcss": "^3.4.13",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.5.4",
+    "webpack": "5.95.0"
   },
   "resolutions": {
-    "@types/react": "17.0.37",
-    "ace-builds": "1.4.13",
-    "@date-io/core": "1.3.7",
-    "rc-virtual-list": "3.4.13",
-    "read-package-json": "6.0.0",
-    "cacache": "17.0.4"
+    "@types/react": "18.3.10",
+    "rc-virtual-list": "3.5.2",
+    "ace-builds": "1.36.2",
+    "tinymce": "6.8.5"
   }
 }
diff --git a/ui-ngx/patches/@angular+build+18.2.10.patch b/ui-ngx/patches/@angular+build+18.2.10.patch
new file mode 100644
index 0000000000..17b84e45c6
--- /dev/null
+++ b/ui-ngx/patches/@angular+build+18.2.10.patch
@@ -0,0 +1,43 @@
+diff --git a/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js b/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js
+index 625c621..4fc8bd8 100755
+--- a/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js
++++ b/node_modules/@angular/build/src/tools/angular/compilation/angular-compilation.js
+@@ -68,8 +68,6 @@ class AngularCompilation {
+             allowEmptyCodegenFiles: false,
+             annotationsAs: 'decorators',
+             enableResourceInlining: false,
+-            supportTestBed: false,
+-            supportJitMode: false,
+         }));
+     }
+     async diagnoseFiles(modes = DiagnosticModes.All) {
+diff --git a/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js b/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js
+index b1bb6ea..c76b4c6 100755
+--- a/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js
++++ b/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js
+@@ -79,7 +79,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
+                 sourcemap: !!pluginOptions.sourcemap,
+                 thirdPartySourcemaps: pluginOptions.thirdPartySourcemaps,
+                 advancedOptimizations: pluginOptions.advancedOptimizations,
+-                jit: pluginOptions.jit,
++                jit: true, // pluginOptions.jit,
+             }, environment_options_1.maxWorkers, cacheStore?.createCache('jstransformer'));
+             // Setup defines based on the values used by the Angular compiler-cli
+             build.initialOptions.define ??= {};
+@@ -377,12 +377,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
+             async function hasSideEffects(path) {
+                 if (!pluginOptions.advancedOptimizations) {
+                     return undefined;
++                } else {
++                    return true;
+                 }
+-                const { sideEffects } = await build.resolve(path, {
++                /*const { sideEffects } = await build.resolve(path, {
+                     kind: 'import-statement',
+                     resolveDir: build.initialOptions.absWorkingDir ?? '',
+                 });
+-                return sideEffects;
++                return sideEffects;*/
+             }
+         },
+     };
diff --git a/ui-ngx/patches/@angular+core+15.2.10.patch b/ui-ngx/patches/@angular+core+18.2.6.patch
similarity index 78%
rename from ui-ngx/patches/@angular+core+15.2.10.patch
rename to ui-ngx/patches/@angular+core+18.2.6.patch
index 3265415263..1f9427d2b3 100644
--- a/ui-ngx/patches/@angular+core+15.2.10.patch
+++ b/ui-ngx/patches/@angular+core+18.2.6.patch
@@ -1,8 +1,8 @@
-diff --git a/node_modules/@angular/core/fesm2020/core.mjs b/node_modules/@angular/core/fesm2020/core.mjs
-index e9a9b75..17044d9 100755
---- a/node_modules/@angular/core/fesm2020/core.mjs
-+++ b/node_modules/@angular/core/fesm2020/core.mjs
-@@ -11053,13 +11053,13 @@ function findDirectiveDefMatches(tView, tNode) {
+diff --git a/node_modules/@angular/core/fesm2022/core.mjs b/node_modules/@angular/core/fesm2022/core.mjs
+index 0fa881f..b844dfa 100755
+--- a/node_modules/@angular/core/fesm2022/core.mjs
++++ b/node_modules/@angular/core/fesm2022/core.mjs
+@@ -12868,13 +12868,13 @@ function findDirectiveDefMatches(tView, tNode) {
              if (isNodeMatchingSelectorList(tNode, def.selectors, /* isProjectionMode */ false)) {
                  matches || (matches = []);
                  if (isComponentDef(def)) {
diff --git a/ui-ngx/patches/@angular+flex-layout+15.0.0-beta.42.patch b/ui-ngx/patches/@angular+flex-layout+15.0.0-beta.42.patch
new file mode 100644
index 0000000000..d4bf9d42cd
--- /dev/null
+++ b/ui-ngx/patches/@angular+flex-layout+15.0.0-beta.42.patch
@@ -0,0 +1,21 @@
+diff --git a/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs b/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs
+index 735dff5..52b6392 100644
+--- a/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs
++++ b/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs
+@@ -124,7 +124,7 @@ class ClassDirective extends BaseDirective2 {
+         if (!this.ngClassInstance) {
+             // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
+             // the same host element; since the responsive variations may be defined...
+-            this.ngClassInstance = new NgClass(iterableDiffers, keyValueDiffers, elementRef, renderer2);
++            this.ngClassInstance = new NgClass(elementRef, renderer2);
+         }
+         this.init();
+         this.setValue('', '');
+diff --git a/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs.map b/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs.map
+index a184784..2d0682e 100644
+--- a/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs.map
++++ b/node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-extended.mjs.map
+@@ -1 +1 @@
+-{"version":3,"file":"angular-flex-layout-extended.mjs","sources":["../../../../projects/libs/flex-layout/extended/img-src/img-src.ts","../../../../projects/libs/flex-layout/extended/class/class.ts","../../../../projects/libs/flex-layout/extended/show-hide/show-hide.ts","../../../../projects/libs/flex-layout/extended/style/style-transforms.ts","../../../../projects/libs/flex-layout/extended/style/style.ts","../../../../projects/libs/flex-layout/extended/module.ts","../../../../projects/libs/flex-layout/extended/public-api.ts","../../../../projects/libs/flex-layout/extended/angular-flex-layout-extended.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {Directive, ElementRef, Inject, PLATFORM_ID, Injectable, Input} from '@angular/core';\nimport {isPlatformServer} from '@angular/common';\nimport {\n  MediaMarshaller,\n  BaseDirective2,\n  SERVER_TOKEN,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@angular/flex-layout/core';\n\n@Injectable({providedIn: 'root'})\nexport class ImgSrcStyleBuilder extends StyleBuilder {\n  buildStyles(url: string) {\n    return {'content': url ? `url(${url})` : ''};\n  }\n}\n\n@Directive()\nexport class ImgSrcDirective extends BaseDirective2 {\n  protected override DIRECTIVE_KEY = 'img-src';\n  protected defaultSrc = '';\n\n  @Input('src')\n  set src(val: string) {\n    this.defaultSrc = val;\n    this.setValue(this.defaultSrc, '');\n  }\n\n  constructor(elementRef: ElementRef,\n              styleBuilder: ImgSrcStyleBuilder,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              @Inject(PLATFORM_ID) protected platformId: Object,\n              @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {\n    super(elementRef, styleBuilder, styler, marshal);\n    this.init();\n    this.setValue(this.nativeElement.getAttribute('src') || '', '');\n    if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {\n      this.nativeElement.setAttribute('src', '');\n    }\n  }\n\n  /**\n   * Use the [responsively] activated input value to update\n   * the host img src attribute or assign a default `img.src=''`\n   * if the src has not been defined.\n   *\n   * Do nothing to standard `<img src=\"\">` usages, only when responsive\n   * keys are present do we actually call `setAttribute()`\n   */\n  protected override updateWithValue(value?: string) {\n    const url = value || this.defaultSrc;\n    if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {\n      this.addStyles(url);\n    } else {\n      this.nativeElement.setAttribute('src', url);\n    }\n  }\n\n  protected override styleCache = imgSrcCache;\n}\n\nconst imgSrcCache: Map<string, StyleDefinition> = new Map();\n\nconst inputs = [\n  'src.xs', 'src.sm', 'src.md', 'src.lg', 'src.xl',\n  'src.lt-sm', 'src.lt-md', 'src.lt-lg', 'src.lt-xl',\n  'src.gt-xs', 'src.gt-sm', 'src.gt-md', 'src.gt-lg'\n];\n\nconst selector = `\n  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],\n  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],\n  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]\n`;\n\n/**\n * This directive provides a responsive API for the HTML <img> 'src' attribute\n * and will update the img.src property upon each responsive activation.\n *\n * e.g.\n *      <img src=\"defaultScene.jpg\" src.xs=\"mobileScene.jpg\"></img>\n *\n * @see https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-src/\n */\n@Directive({selector, inputs})\nexport class DefaultImgSrcDirective extends ImgSrcDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  DoCheck,\n  ElementRef,\n  Input,\n  IterableDiffers,\n  KeyValueDiffers,\n  Optional,\n  Renderer2,\n  Self,\n} from '@angular/core';\nimport {NgClass} from '@angular/common';\nimport {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/core';\n\n@Directive()\nexport class ClassDirective extends BaseDirective2 implements DoCheck {\n\n  protected override DIRECTIVE_KEY = 'ngClass';\n\n  /**\n   * Capture class assignments so we cache the default classes\n   * which are merged with activated styles and used as fallbacks.\n   */\n  @Input('class')\n  set klass(val: string) {\n    this.ngClassInstance.klass = val;\n    this.setValue(val, '');\n  }\n\n  constructor(elementRef: ElementRef,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              iterableDiffers: IterableDiffers,\n              keyValueDiffers: KeyValueDiffers,\n              renderer2: Renderer2,\n              @Optional() @Self() protected readonly ngClassInstance: NgClass) {\n    super(elementRef, null!, styler, marshal);\n    if (!this.ngClassInstance) {\n      // Create an instance NgClass Directive instance only if `ngClass=\"\"` has NOT been defined on\n      // the same host element; since the responsive variations may be defined...\n      this.ngClassInstance = new NgClass(iterableDiffers, keyValueDiffers, elementRef, renderer2);\n    }\n    this.init();\n    this.setValue('', '');\n  }\n\n  protected override updateWithValue(value: any) {\n    this.ngClassInstance.ngClass = value;\n    this.ngClassInstance.ngDoCheck();\n  }\n\n  // ******************************************************************\n  // Lifecycle Hooks\n  // ******************************************************************\n\n  /**\n   * For ChangeDetectionStrategy.onPush and ngOnChanges() updates\n   */\n  ngDoCheck() {\n    this.ngClassInstance.ngDoCheck();\n  }\n}\n\nconst inputs = [\n  'ngClass', 'ngClass.xs', 'ngClass.sm', 'ngClass.md', 'ngClass.lg', 'ngClass.xl',\n  'ngClass.lt-sm', 'ngClass.lt-md', 'ngClass.lt-lg', 'ngClass.lt-xl',\n  'ngClass.gt-xs', 'ngClass.gt-sm', 'ngClass.gt-md', 'ngClass.gt-lg'\n];\n\nconst selector = `\n  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],\n  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],\n  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]\n`;\n\n/**\n * Directive to add responsive support for ngClass.\n * This maintains the core functionality of 'ngClass' and adds responsive API\n * Note: this class is a no-op when rendered on the server\n */\n@Directive({selector, inputs})\nexport class DefaultClassDirective extends ClassDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  ElementRef,\n  OnChanges,\n  SimpleChanges,\n  Inject,\n  PLATFORM_ID,\n  Injectable,\n  AfterViewInit,\n} from '@angular/core';\nimport {isPlatformServer} from '@angular/common';\nimport {\n  BaseDirective2,\n  LAYOUT_CONFIG,\n  LayoutConfigOptions,\n  MediaMarshaller,\n  SERVER_TOKEN,\n  StyleUtils,\n  StyleBuilder,\n} from '@angular/flex-layout/core';\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {takeUntil} from 'rxjs/operators';\n\nexport interface ShowHideParent {\n  display: string;\n  isServer: boolean;\n}\n\n@Injectable({providedIn: 'root'})\nexport class ShowHideStyleBuilder extends StyleBuilder {\n  buildStyles(show: string, parent: ShowHideParent) {\n    const shouldShow = show === 'true';\n    return {'display': shouldShow ? parent.display || (parent.isServer ? 'initial' : '') : 'none'};\n  }\n}\n\n@Directive()\nexport class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges {\n  protected override DIRECTIVE_KEY = 'show-hide';\n\n  /** Original DOM Element CSS display style */\n  protected display: string = '';\n  protected hasLayout = false;\n  protected hasFlexChild = false;\n\n  constructor(elementRef: ElementRef,\n              styleBuilder: ShowHideStyleBuilder,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions,\n              @Inject(PLATFORM_ID) protected platformId: Object,\n              @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {\n    super(elementRef, styleBuilder, styler, marshal);\n  }\n\n  // *********************************************\n  // Lifecycle Methods\n  // *********************************************\n\n  ngAfterViewInit() {\n    this.trackExtraTriggers();\n\n    const children = Array.from(this.nativeElement.children);\n    for (let i = 0; i < children.length; i++) {\n      if (this.marshal.hasValue(children[i] as HTMLElement, 'flex')) {\n        this.hasFlexChild = true;\n        break;\n      }\n    }\n\n    if (DISPLAY_MAP.has(this.nativeElement)) {\n      this.display = DISPLAY_MAP.get(this.nativeElement)!;\n    } else {\n      this.display = this.getDisplayStyle();\n      DISPLAY_MAP.set(this.nativeElement, this.display);\n    }\n\n    this.init();\n    // set the default to show unless explicitly overridden\n    const defaultValue = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY, '');\n    if (defaultValue === undefined || defaultValue === '') {\n      this.setValue(true, '');\n    } else {\n      this.triggerUpdate();\n    }\n  }\n\n  /**\n   * On changes to any @Input properties...\n   * Default to use the non-responsive Input value ('fxShow')\n   * Then conditionally override with the mq-activated Input's current value\n   */\n  override ngOnChanges(changes: SimpleChanges) {\n    Object.keys(changes).forEach(key => {\n      if (this.inputs.indexOf(key) !== -1) {\n        const inputKey = key.split('.');\n        const bp = inputKey.slice(1).join('.');\n        const inputValue = changes[key].currentValue;\n        let shouldShow = inputValue !== '' ?\n            inputValue !== 0 ? coerceBooleanProperty(inputValue) : false\n            : true;\n        if (inputKey[0] === 'fxHide') {\n          shouldShow = !shouldShow;\n        }\n        this.setValue(shouldShow, bp);\n      }\n    });\n  }\n\n  // *********************************************\n  // Protected methods\n  // *********************************************\n\n  /**\n   *  Watch for these extra triggers to update fxShow, fxHide stylings\n   */\n  protected trackExtraTriggers() {\n    this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout');\n\n    ['layout', 'layout-align'].forEach(key => {\n      this.marshal\n          .trackValue(this.nativeElement, key)\n          .pipe(takeUntil(this.destroySubject))\n          .subscribe(this.triggerUpdate.bind(this));\n    });\n  }\n\n  /**\n   * Override accessor to the current HTMLElement's `display` style\n   * Note: Show/Hide will not change the display to 'flex' but will set it to 'block'\n   * unless it was already explicitly specified inline or in a CSS stylesheet.\n   */\n  protected getDisplayStyle(): string {\n    return (this.hasLayout || (this.hasFlexChild && this.layoutConfig.addFlexToParent)) ?\n        'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true);\n  }\n\n  /** Validate the visibility value and then update the host's inline display style */\n  protected override updateWithValue(value: boolean | string = true) {\n    if (value === '') {\n      return;\n    }\n    const isServer = isPlatformServer(this.platformId);\n    this.addStyles(value ? 'true' : 'false', {display: this.display, isServer});\n    if (isServer && this.serverModuleLoaded) {\n      this.nativeElement.style.setProperty('display', '');\n    }\n    this.marshal.triggerUpdate(this.parentElement!, 'layout-gap');\n  }\n}\n\nconst DISPLAY_MAP: WeakMap<HTMLElement, string> = new WeakMap();\n\nconst inputs = [\n  'fxShow', 'fxShow.print',\n  'fxShow.xs', 'fxShow.sm', 'fxShow.md', 'fxShow.lg', 'fxShow.xl',\n  'fxShow.lt-sm', 'fxShow.lt-md', 'fxShow.lt-lg', 'fxShow.lt-xl',\n  'fxShow.gt-xs', 'fxShow.gt-sm', 'fxShow.gt-md', 'fxShow.gt-lg',\n  'fxHide', 'fxHide.print',\n  'fxHide.xs', 'fxHide.sm', 'fxHide.md', 'fxHide.lg', 'fxHide.xl',\n  'fxHide.lt-sm', 'fxHide.lt-md', 'fxHide.lt-lg', 'fxHide.lt-xl',\n  'fxHide.gt-xs', 'fxHide.gt-sm', 'fxHide.gt-md', 'fxHide.gt-lg'\n];\n\nconst selector = `\n  [fxShow], [fxShow.print],\n  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],\n  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],\n  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],\n  [fxHide], [fxHide.print],\n  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],\n  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],\n  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]\n`;\n\n/**\n * 'show' Layout API directive\n */\n@Directive({selector, inputs})\nexport class DefaultShowHideDirective extends ShowHideDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport type NgStyleRawList = string[];\nexport type NgStyleMap = {[klass: string]: string};\n// NgStyle selectors accept NgStyleType values\nexport type NgStyleType = string | Set<string> | NgStyleRawList | NgStyleMap;\n\n/**\n * Callback function for SecurityContext.STYLE sanitization\n */\nexport type NgStyleSanitizer = (val: any) => string;\n\n/** NgStyle allowed inputs */\nexport class NgStyleKeyValue {\n  constructor(public key: string, public value: string, noQuotes = true) {\n    this.key = noQuotes ? key.replace(/['\"]/g, '').trim() : key.trim();\n\n    this.value = noQuotes ? value.replace(/['\"]/g, '').trim() : value.trim();\n    this.value = this.value.replace(/;/, '');\n  }\n}\n\nexport function getType(target: any): string {\n  let what = typeof target;\n  if (what === 'object') {\n    return (target.constructor === Array) ? 'array' :\n        (target.constructor === Set) ? 'set' : 'object';\n  }\n  return what;\n}\n\n/**\n * Split string of key:value pairs into Array of k-v pairs\n * e.g.  'key:value; key:value; key:value;' -> ['key:value',...]\n */\nexport function buildRawList(source: any, delimiter = ';'): NgStyleRawList {\n  return String(source)\n      .trim()\n      .split(delimiter)\n      .map((val: string) => val.trim())\n      .filter(val => val !== '');\n}\n\n/** Convert array of key:value strings to a iterable map object */\nexport function buildMapFromList(styles: NgStyleRawList, sanitize?: NgStyleSanitizer): NgStyleMap {\n  const sanitizeValue = (it: NgStyleKeyValue) => {\n    if (sanitize) {\n      it.value = sanitize(it.value);\n    }\n    return it;\n  };\n\n  return styles\n      .map(stringToKeyValue)\n      .filter(entry => !!entry)\n      .map(sanitizeValue)\n      .reduce(keyValuesToMap, {} as NgStyleMap);\n}\n\n/** Convert Set<string> or raw Object to an iterable NgStyleMap */\nexport function buildMapFromSet(source: NgStyleType, sanitize?: NgStyleSanitizer): NgStyleMap {\n  let list: string[] = [];\n  if (getType(source) === 'set') {\n    (source as Set<string>).forEach(entry => list.push(entry));\n  } else {\n    Object.keys(source).forEach((key: string) => {\n      list.push(`${key}:${(source as NgStyleMap)[key]}`);\n    });\n  }\n  return buildMapFromList(list, sanitize);\n}\n\n\n/** Convert 'key:value' -> [key, value] */\nexport function stringToKeyValue(it: string): NgStyleKeyValue {\n  const [key, ...vals] = it.split(':');\n  return new NgStyleKeyValue(key, vals.join(':'));\n}\n\n/** Convert [ [key,value] ] -> { key : value } */\nexport function keyValuesToMap(map: NgStyleMap, entry: NgStyleKeyValue): NgStyleMap {\n  if (!!entry.key) {\n    map[entry.key] = entry.value;\n  }\n  return map;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  DoCheck,\n  ElementRef,\n  Inject,\n  KeyValueDiffers,\n  Optional,\n  PLATFORM_ID,\n  Renderer2,\n  SecurityContext,\n  Self,\n} from '@angular/core';\nimport {isPlatformServer, NgStyle} from '@angular/common';\nimport {DomSanitizer} from '@angular/platform-browser';\nimport {\n  BaseDirective2,\n  StyleUtils,\n  MediaMarshaller,\n  SERVER_TOKEN,\n} from '@angular/flex-layout/core';\n\nimport {\n  NgStyleRawList,\n  NgStyleType,\n  NgStyleSanitizer,\n  buildRawList,\n  getType,\n  buildMapFromSet,\n  NgStyleMap,\n  NgStyleKeyValue,\n  stringToKeyValue,\n  keyValuesToMap,\n} from './style-transforms';\n\n@Directive()\nexport class StyleDirective extends BaseDirective2 implements DoCheck {\n\n  protected override DIRECTIVE_KEY = 'ngStyle';\n  protected fallbackStyles: NgStyleMap;\n  protected isServer: boolean;\n\n  constructor(elementRef: ElementRef,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              protected sanitizer: DomSanitizer,\n              differs: KeyValueDiffers,\n              renderer2: Renderer2,\n              @Optional() @Self() private readonly ngStyleInstance: NgStyle,\n              @Inject(SERVER_TOKEN) serverLoaded: boolean,\n              @Inject(PLATFORM_ID) platformId: Object) {\n    super(elementRef, null!, styler, marshal);\n    if (!this.ngStyleInstance) {\n      // Create an instance NgStyle Directive instance only if `ngStyle=\"\"` has NOT been\n      // defined on the same host element; since the responsive variations may be defined...\n      this.ngStyleInstance = new NgStyle(elementRef, differs, renderer2);\n    }\n    this.init();\n    const styles = this.nativeElement.getAttribute('style') ?? '';\n    this.fallbackStyles = this.buildStyleMap(styles);\n    this.isServer = serverLoaded && isPlatformServer(platformId);\n  }\n\n  /** Add generated styles */\n  protected override updateWithValue(value: any) {\n    const styles = this.buildStyleMap(value);\n    this.ngStyleInstance.ngStyle = {...this.fallbackStyles, ...styles};\n    if (this.isServer) {\n      this.applyStyleToElement(styles);\n    }\n    this.ngStyleInstance.ngDoCheck();\n  }\n\n  /** Remove generated styles */\n  protected override clearStyles() {\n    this.ngStyleInstance.ngStyle = this.fallbackStyles;\n    this.ngStyleInstance.ngDoCheck();\n  }\n\n  /**\n   * Convert raw strings to ngStyleMap; which is required by ngStyle\n   * NOTE: Raw string key-value pairs MUST be delimited by `;`\n   *       Comma-delimiters are not supported due to complexities of\n   *       possible style values such as `rgba(x,x,x,x)` and others\n   */\n  protected buildStyleMap(styles: NgStyleType): NgStyleMap {\n    // Always safe-guard (aka sanitize) style property values\n    const sanitizer: NgStyleSanitizer = (val: any) =>\n      this.sanitizer.sanitize(SecurityContext.STYLE, val) ?? '';\n    if (styles) {\n      switch (getType(styles)) {\n        case 'string':  return buildMapFromList(buildRawList(styles),\n          sanitizer);\n        case 'array' :  return buildMapFromList(styles as NgStyleRawList, sanitizer);\n        case 'set'   :  return buildMapFromSet(styles, sanitizer);\n        default      :  return buildMapFromSet(styles, sanitizer);\n      }\n    }\n\n    return {};\n  }\n\n  // ******************************************************************\n  // Lifecycle Hooks\n  // ******************************************************************\n\n  /** For ChangeDetectionStrategy.onPush and ngOnChanges() updates */\n  ngDoCheck() {\n    this.ngStyleInstance.ngDoCheck();\n  }\n}\n\nconst inputs = [\n  'ngStyle',\n  'ngStyle.xs', 'ngStyle.sm', 'ngStyle.md', 'ngStyle.lg', 'ngStyle.xl',\n  'ngStyle.lt-sm', 'ngStyle.lt-md', 'ngStyle.lt-lg', 'ngStyle.lt-xl',\n  'ngStyle.gt-xs', 'ngStyle.gt-sm', 'ngStyle.gt-md', 'ngStyle.gt-lg'\n];\n\nconst selector = `\n  [ngStyle],\n  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],\n  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],\n  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]\n`;\n\n/**\n * Directive to add responsive support for ngStyle.\n *\n */\n@Directive({selector, inputs})\nexport class DefaultStyleDirective extends StyleDirective implements DoCheck {\n  protected override inputs = inputs;\n}\n\n/** Build a styles map from a list of styles, while sanitizing bad values first */\nfunction buildMapFromList(styles: NgStyleRawList, sanitize?: NgStyleSanitizer): NgStyleMap {\n  const sanitizeValue = (it: NgStyleKeyValue) => {\n    if (sanitize) {\n      it.value = sanitize(it.value);\n    }\n    return it;\n  };\n\n  return styles\n    .map(stringToKeyValue)\n    .filter(entry => !!entry)\n    .map(sanitizeValue)\n    .reduce(keyValuesToMap, {} as NgStyleMap);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\nimport {CoreModule} from '@angular/flex-layout/core';\n\nimport {DefaultImgSrcDirective} from './img-src/img-src';\nimport {DefaultClassDirective} from './class/class';\nimport {DefaultShowHideDirective} from './show-hide/show-hide';\nimport {DefaultStyleDirective} from './style/style';\n\n\nconst ALL_DIRECTIVES = [\n  DefaultShowHideDirective,\n  DefaultClassDirective,\n  DefaultStyleDirective,\n  DefaultImgSrcDirective,\n];\n\n/**\n * *****************************************************************\n * Define module for the Extended API\n * *****************************************************************\n */\n\n@NgModule({\n  imports: [CoreModule],\n  declarations: [...ALL_DIRECTIVES],\n  exports: [...ALL_DIRECTIVES]\n})\nexport class ExtendedModule {\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './module';\n\nexport * from './class/class';\nexport * from './img-src/img-src';\nexport * from './show-hide/show-hide';\nexport * from './style/style';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["inputs","selector","buildMapFromList","i2","i3"],"mappings":";;;;;;;;;;AAAA;;;;;;AAMG;AAaG,MAAO,kBAAmB,SAAQ,YAAY,CAAA;AAClD,IAAA,WAAW,CAAC,GAAW,EAAA;AACrB,QAAA,OAAO,EAAC,SAAS,EAAE,GAAG,GAAG,CAAO,IAAA,EAAA,GAAG,GAAG,GAAG,EAAE,EAAC,CAAC;KAC9C;;+GAHU,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADN,MAAM,EAAA,CAAA,CAAA;2FAClB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAC,UAAU,EAAE,MAAM,EAAC,CAAA;;AAQ1B,MAAO,eAAgB,SAAQ,cAAc,CAAA;IAUjD,WAAY,CAAA,UAAsB,EACtB,YAAgC,EAChC,MAAkB,EAClB,OAAwB,EACO,UAAkB,EACjB,kBAA2B,EAAA;QACrE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAFR,IAAU,CAAA,UAAA,GAAV,UAAU,CAAQ;QACjB,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAS;QAdpD,IAAa,CAAA,aAAA,GAAG,SAAS,CAAC;QACnC,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;QAuCP,IAAU,CAAA,UAAA,GAAG,WAAW,CAAC;QAxB1C,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;QAChE,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAChE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAC5C,SAAA;KACF;IAlBD,IACI,GAAG,CAAC,GAAW,EAAA;AACjB,QAAA,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;KACpC;AAgBD;;;;;;;AAOG;AACgB,IAAA,eAAe,CAAC,KAAc,EAAA;AAC/C,QAAA,MAAM,GAAG,GAAG,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC;QACrC,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAChE,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;AACrB,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC7C,SAAA;KACF;;4GAvCU,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAcN,WAAW,EAAA,EAAA,EAAA,KAAA,EACX,YAAY,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;gGAfrB,eAAe,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B,SAAS;;0BAeK,MAAM;2BAAC,WAAW,CAAA;;0BAClB,MAAM;2BAAC,YAAY,CAAA;4CAV5B,GAAG,EAAA,CAAA;sBADN,KAAK;uBAAC,KAAK,CAAA;;AAwCd,MAAM,WAAW,GAAiC,IAAI,GAAG,EAAE,CAAC;AAE5D,MAAMA,QAAM,GAAG;AACb,IAAA,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;AAChD,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;AAClD,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;CACnD,CAAC;AAEF,MAAMC,UAAQ,GAAG,CAAA;;;;CAIhB,CAAC;AAEF;;;;;;;;AAQG;AAEG,MAAO,sBAAuB,SAAQ,eAAe,CAAA;AAD3D,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAGD,QAAM,CAAC;AACpC,KAAA;;mHAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;uGAAtB,sBAAsB,EAAA,QAAA,EAAA,wNAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBADlC,SAAS;mBAAC,YAACC,UAAQ,UAAED,QAAM,EAAC,CAAA;;;AC7F7B;;;;;;AAMG;AAgBG,MAAO,cAAe,SAAQ,cAAc,CAAA;AAchD,IAAA,WAAA,CAAY,UAAsB,EACtB,MAAkB,EAClB,OAAwB,EACxB,eAAgC,EAChC,eAAgC,EAChC,SAAoB,EACmB,eAAwB,EAAA;QACzE,KAAK,CAAC,UAAU,EAAE,IAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QADO,IAAe,CAAA,eAAA,GAAf,eAAe,CAAS;QAlBxD,IAAa,CAAA,aAAA,GAAG,SAAS,CAAC;AAoB3C,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;;;AAGzB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAC,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7F,SAAA;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;KACvB;AAzBD;;;AAGG;IACH,IACI,KAAK,CAAC,GAAW,EAAA;AACnB,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,GAAG,CAAC;AACjC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;KACxB;AAmBkB,IAAA,eAAe,CAAC,KAAU,EAAA;AAC3C,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;AACrC,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;;;AAMD;;AAEG;IACH,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;2GA7CU,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;+FAAd,cAAc,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;;0BAqBK,QAAQ;;0BAAI,IAAI;4CAXzB,KAAK,EAAA,CAAA;sBADR,KAAK;uBAAC,OAAO,CAAA;;AAwChB,MAAMA,QAAM,GAAG;IACb,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;AAC/E,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;AAClE,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;CACnE,CAAC;AAEF,MAAMC,UAAQ,GAAG,CAAA;;;;CAIhB,CAAC;AAEF;;;;AAIG;AAEG,MAAO,qBAAsB,SAAQ,cAAc,CAAA;AADzD,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAGD,QAAM,CAAC;AACpC,KAAA;;kHAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sGAArB,qBAAqB,EAAA,QAAA,EAAA,qOAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,SAAS;mBAAC,YAACC,UAAQ,UAAED,QAAM,EAAC,CAAA;;;ACvF7B;;;;;;AAMG;AA8BG,MAAO,oBAAqB,SAAQ,YAAY,CAAA;IACpD,WAAW,CAAC,IAAY,EAAE,MAAsB,EAAA;AAC9C,QAAA,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC;AACnC,QAAA,OAAO,EAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAAC,OAAO,KAAK,MAAM,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,GAAG,MAAM,EAAC,CAAC;KAChG;;iHAJU,oBAAoB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAApB,oBAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cADR,MAAM,EAAA,CAAA,CAAA;2FAClB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,UAAU;mBAAC,EAAC,UAAU,EAAE,MAAM,EAAC,CAAA;;AAS1B,MAAO,iBAAkB,SAAQ,cAAc,CAAA;AAQnD,IAAA,WAAA,CAAY,UAAsB,EACtB,YAAkC,EAClC,MAAkB,EAClB,OAAwB,EACS,YAAiC,EACnC,UAAkB,EACjB,kBAA2B,EAAA;QACrE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAHN,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAqB;QACnC,IAAU,CAAA,UAAA,GAAV,UAAU,CAAQ;QACjB,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAS;QAbpD,IAAa,CAAA,aAAA,GAAG,WAAW,CAAC;;QAGrC,IAAO,CAAA,OAAA,GAAW,EAAE,CAAC;QACrB,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAClB,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;KAU9B;;;;IAMD,eAAe,GAAA;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAE1B,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACzD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACxC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAgB,EAAE,MAAM,CAAC,EAAE;AAC7D,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,MAAM;AACP,aAAA;AACF,SAAA;QAED,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YACvC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAE,CAAC;AACrD,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACtC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;AACnD,SAAA;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;;AAEZ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;AACvF,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,EAAE,EAAE;AACrD,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACzB,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;AACtB,SAAA;KACF;AAED;;;;AAIG;AACM,IAAA,WAAW,CAAC,OAAsB,EAAA;QACzC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;YACjC,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE;gBACnC,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAChC,gBAAA,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC;AAC7C,gBAAA,IAAI,UAAU,GAAG,UAAU,KAAK,EAAE;AAC9B,oBAAA,UAAU,KAAK,CAAC,GAAG,qBAAqB,CAAC,UAAU,CAAC,GAAG,KAAK;sBAC1D,IAAI,CAAC;AACX,gBAAA,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;oBAC5B,UAAU,GAAG,CAAC,UAAU,CAAC;AAC1B,iBAAA;AACD,gBAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AAC/B,aAAA;AACH,SAAC,CAAC,CAAC;KACJ;;;;AAMD;;AAEG;IACO,kBAAkB,GAAA;AAC1B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAErE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;AACvC,YAAA,IAAI,CAAC,OAAO;AACP,iBAAA,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC;AACnC,iBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;iBACpC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD,SAAC,CAAC,CAAC;KACJ;AAED;;;;AAIG;IACO,eAAe,GAAA;AACvB,QAAA,OAAO,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;AAC9E,YAAA,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;KAC3E;;IAGkB,eAAe,CAAC,QAA0B,IAAI,EAAA;QAC/D,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,OAAO;AACR,SAAA;QACD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,CAAC,CAAC;AAC5E,QAAA,IAAI,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACvC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACrD,SAAA;QACD,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,aAAc,EAAE,YAAY,CAAC,CAAC;KAC/D;;AA/GU,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,EAYR,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,aAAa,EACb,EAAA,EAAA,KAAA,EAAA,WAAW,aACX,YAAY,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAdrB,iBAAiB,EAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;;0BAaK,MAAM;2BAAC,aAAa,CAAA;;0BACpB,MAAM;2BAAC,WAAW,CAAA;;0BAClB,MAAM;2BAAC,YAAY,CAAA;;AAoGlC,MAAM,WAAW,GAAiC,IAAI,OAAO,EAAE,CAAC;AAEhE,MAAMA,QAAM,GAAG;AACb,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;AAC/D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;AAC9D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;AAC9D,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;AAC/D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;AAC9D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;CAC/D,CAAC;AAEF,MAAMC,UAAQ,GAAG,CAAA;;;;;;;;;CAShB,CAAC;AAEF;;AAEG;AAEG,MAAO,wBAAyB,SAAQ,iBAAiB,CAAA;AAD/D,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAGD,QAAM,CAAC;AACpC,KAAA;;qHAFY,wBAAwB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;yGAAxB,wBAAwB,EAAA,QAAA,EAAA,idAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,cAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,cAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBADpC,SAAS;mBAAC,YAACC,UAAQ,UAAED,QAAM,EAAC,CAAA;;;ACzL7B;;;;;;AAMG;AAYH;MACa,eAAe,CAAA;AAC1B,IAAA,WAAA,CAAmB,GAAW,EAAS,KAAa,EAAE,QAAQ,GAAG,IAAI,EAAA;QAAlD,IAAG,CAAA,GAAA,GAAH,GAAG,CAAQ;QAAS,IAAK,CAAA,KAAA,GAAL,KAAK,CAAQ;QAClD,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC;QAEnE,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;AACzE,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;KAC1C;AACF,CAAA;AAEK,SAAU,OAAO,CAAC,MAAW,EAAA;AACjC,IAAA,IAAI,IAAI,GAAG,OAAO,MAAM,CAAC;IACzB,IAAI,IAAI,KAAK,QAAQ,EAAE;AACrB,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,KAAK,IAAI,OAAO;AAC3C,YAAA,CAAC,MAAM,CAAC,WAAW,KAAK,GAAG,IAAI,KAAK,GAAG,QAAQ,CAAC;AACrD,KAAA;AACD,IAAA,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;AAGG;SACa,YAAY,CAAC,MAAW,EAAE,SAAS,GAAG,GAAG,EAAA;IACvD,OAAO,MAAM,CAAC,MAAM,CAAC;AAChB,SAAA,IAAI,EAAE;SACN,KAAK,CAAC,SAAS,CAAC;SAChB,GAAG,CAAC,CAAC,GAAW,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;SAChC,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC;AACjC,CAAC;AAED;AACgB,SAAAE,kBAAgB,CAAC,MAAsB,EAAE,QAA2B,EAAA;AAClF,IAAA,MAAM,aAAa,GAAG,CAAC,EAAmB,KAAI;AAC5C,QAAA,IAAI,QAAQ,EAAE;YACZ,EAAE,CAAC,KAAK,GAAG,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAO,MAAM;SACR,GAAG,CAAC,gBAAgB,CAAC;SACrB,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;SACxB,GAAG,CAAC,aAAa,CAAC;AAClB,SAAA,MAAM,CAAC,cAAc,EAAE,EAAgB,CAAC,CAAC;AAChD,CAAC;AAED;AACgB,SAAA,eAAe,CAAC,MAAmB,EAAE,QAA2B,EAAA;IAC9E,IAAI,IAAI,GAAa,EAAE,CAAC;AACxB,IAAA,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE;AAC5B,QAAA,MAAsB,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5D,KAAA;AAAM,SAAA;QACL,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,KAAI;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,CAAA,EAAG,GAAG,CAAA,CAAA,EAAK,MAAqB,CAAC,GAAG,CAAC,CAAE,CAAA,CAAC,CAAC;AACrD,SAAC,CAAC,CAAC;AACJ,KAAA;AACD,IAAA,OAAOA,kBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC1C,CAAC;AAGD;AACM,SAAU,gBAAgB,CAAC,EAAU,EAAA;AACzC,IAAA,MAAM,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACrC,IAAA,OAAO,IAAI,eAAe,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAClD,CAAC;AAED;AACgB,SAAA,cAAc,CAAC,GAAe,EAAE,KAAsB,EAAA;AACpE,IAAA,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;QACf,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;AAC9B,KAAA;AACD,IAAA,OAAO,GAAG,CAAC;AACb;;AC3FA;;;;;;AAMG;AAoCG,MAAO,cAAe,SAAQ,cAAc,CAAA;AAMhD,IAAA,WAAA,CAAY,UAAsB,EACtB,MAAkB,EAClB,OAAwB,EACd,SAAuB,EACjC,OAAwB,EACxB,SAAoB,EACiB,eAAwB,EACvC,YAAqB,EACtB,UAAkB,EAAA;QACjD,KAAK,CAAC,UAAU,EAAE,IAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QANtB,IAAS,CAAA,SAAA,GAAT,SAAS,CAAc;QAGI,IAAe,CAAA,eAAA,GAAf,eAAe,CAAS;QAVtD,IAAa,CAAA,aAAA,GAAG,SAAS,CAAC;AAc3C,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;;;AAGzB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;AACpE,SAAA;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC9D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;KAC9D;;AAGkB,IAAA,eAAe,CAAC,KAAU,EAAA;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACzC,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,MAAM,EAAC,CAAC;QACnE,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAClC,SAAA;AACD,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;IAGkB,WAAW,GAAA;QAC5B,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;AACnD,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;AAED;;;;;AAKG;AACO,IAAA,aAAa,CAAC,MAAmB,EAAA;;QAEzC,MAAM,SAAS,GAAqB,CAAC,GAAQ,KAC3C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;AAC5D,QAAA,IAAI,MAAM,EAAE;AACV,YAAA,QAAQ,OAAO,CAAC,MAAM,CAAC;AACrB,gBAAA,KAAK,QAAQ,EAAG,OAAO,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EAC1D,SAAS,CAAC,CAAC;gBACb,KAAK,OAAQ,EAAG,OAAO,gBAAgB,CAAC,MAAwB,EAAE,SAAS,CAAC,CAAC;gBAC7E,KAAK,KAAQ,EAAG,OAAO,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;gBAC1D,SAAgB,OAAO,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAC3D,aAAA;AACF,SAAA;AAED,QAAA,OAAO,EAAE,CAAC;KACX;;;;;IAOD,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;2GAzEU,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAAC,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAaL,YAAY,EAAA,EAAA,EAAA,KAAA,EACZ,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;+FAdpB,cAAc,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;;0BAaK,QAAQ;;0BAAI,IAAI;;0BAChB,MAAM;2BAAC,YAAY,CAAA;;0BACnB,MAAM;2BAAC,WAAW,CAAA;;AA8DjC,MAAM,MAAM,GAAG;IACb,SAAS;AACT,IAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;AACpE,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;AAClE,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;CACnE,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAA;;;;;CAKhB,CAAC;AAEF;;;AAGG;AAEG,MAAO,qBAAsB,SAAQ,cAAc,CAAA;AADzD,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAG,MAAM,CAAC;AACpC,KAAA;;kHAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sGAArB,qBAAqB,EAAA,QAAA,EAAA,wOAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,SAAS;mBAAC,EAAC,QAAQ,EAAE,MAAM,EAAC,CAAA;;AAK7B;AACA,SAAS,gBAAgB,CAAC,MAAsB,EAAE,QAA2B,EAAA;AAC3E,IAAA,MAAM,aAAa,GAAG,CAAC,EAAmB,KAAI;AAC5C,QAAA,IAAI,QAAQ,EAAE;YACZ,EAAE,CAAC,KAAK,GAAG,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAO,MAAM;SACV,GAAG,CAAC,gBAAgB,CAAC;SACrB,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;SACxB,GAAG,CAAC,aAAa,CAAC;AAClB,SAAA,MAAM,CAAC,cAAc,EAAE,EAAgB,CAAC,CAAC;AAC9C;;AC3JA;;;;;;AAMG;AAUH,MAAM,cAAc,GAAG;IACrB,wBAAwB;IACxB,qBAAqB;IACrB,qBAAqB;IACrB,sBAAsB;CACvB,CAAC;AAEF;;;;AAIG;MAOU,cAAc,CAAA;;2GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,iBAjBzB,wBAAwB;QACxB,qBAAqB;QACrB,qBAAqB;QACrB,sBAAsB,CAAA,EAAA,OAAA,EAAA,CAUZ,UAAU,CAAA,EAAA,OAAA,EAAA,CAbpB,wBAAwB;QACxB,qBAAqB;QACrB,qBAAqB;QACrB,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAcX,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAJf,UAAU,CAAA,EAAA,CAAA,CAAA;2FAIT,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,UAAU,CAAC;AACrB,oBAAA,YAAY,EAAE,CAAC,GAAG,cAAc,CAAC;AACjC,oBAAA,OAAO,EAAE,CAAC,GAAG,cAAc,CAAC;AAC7B,iBAAA,CAAA;;;ACjCD;;;;;;AAMG;;ACNH;;AAEG;;;;"}
+\ No newline at end of file
++{"version":3,"file":"angular-flex-layout-extended.mjs","sources":["../../../../projects/libs/flex-layout/extended/img-src/img-src.ts","../../../../projects/libs/flex-layout/extended/class/class.ts","../../../../projects/libs/flex-layout/extended/show-hide/show-hide.ts","../../../../projects/libs/flex-layout/extended/style/style-transforms.ts","../../../../projects/libs/flex-layout/extended/style/style.ts","../../../../projects/libs/flex-layout/extended/module.ts","../../../../projects/libs/flex-layout/extended/public-api.ts","../../../../projects/libs/flex-layout/extended/angular-flex-layout-extended.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {Directive, ElementRef, Inject, PLATFORM_ID, Injectable, Input} from '@angular/core';\nimport {isPlatformServer} from '@angular/common';\nimport {\n  MediaMarshaller,\n  BaseDirective2,\n  SERVER_TOKEN,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@angular/flex-layout/core';\n\n@Injectable({providedIn: 'root'})\nexport class ImgSrcStyleBuilder extends StyleBuilder {\n  buildStyles(url: string) {\n    return {'content': url ? `url(${url})` : ''};\n  }\n}\n\n@Directive()\nexport class ImgSrcDirective extends BaseDirective2 {\n  protected override DIRECTIVE_KEY = 'img-src';\n  protected defaultSrc = '';\n\n  @Input('src')\n  set src(val: string) {\n    this.defaultSrc = val;\n    this.setValue(this.defaultSrc, '');\n  }\n\n  constructor(elementRef: ElementRef,\n              styleBuilder: ImgSrcStyleBuilder,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              @Inject(PLATFORM_ID) protected platformId: Object,\n              @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {\n    super(elementRef, styleBuilder, styler, marshal);\n    this.init();\n    this.setValue(this.nativeElement.getAttribute('src') || '', '');\n    if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {\n      this.nativeElement.setAttribute('src', '');\n    }\n  }\n\n  /**\n   * Use the [responsively] activated input value to update\n   * the host img src attribute or assign a default `img.src=''`\n   * if the src has not been defined.\n   *\n   * Do nothing to standard `<img src=\"\">` usages, only when responsive\n   * keys are present do we actually call `setAttribute()`\n   */\n  protected override updateWithValue(value?: string) {\n    const url = value || this.defaultSrc;\n    if (isPlatformServer(this.platformId) && this.serverModuleLoaded) {\n      this.addStyles(url);\n    } else {\n      this.nativeElement.setAttribute('src', url);\n    }\n  }\n\n  protected override styleCache = imgSrcCache;\n}\n\nconst imgSrcCache: Map<string, StyleDefinition> = new Map();\n\nconst inputs = [\n  'src.xs', 'src.sm', 'src.md', 'src.lg', 'src.xl',\n  'src.lt-sm', 'src.lt-md', 'src.lt-lg', 'src.lt-xl',\n  'src.gt-xs', 'src.gt-sm', 'src.gt-md', 'src.gt-lg'\n];\n\nconst selector = `\n  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],\n  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],\n  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]\n`;\n\n/**\n * This directive provides a responsive API for the HTML <img> 'src' attribute\n * and will update the img.src property upon each responsive activation.\n *\n * e.g.\n *      <img src=\"defaultScene.jpg\" src.xs=\"mobileScene.jpg\"></img>\n *\n * @see https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-src/\n */\n@Directive({selector, inputs})\nexport class DefaultImgSrcDirective extends ImgSrcDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  DoCheck,\n  ElementRef,\n  Input,\n  IterableDiffers,\n  KeyValueDiffers,\n  Optional,\n  Renderer2,\n  Self,\n} from '@angular/core';\nimport {NgClass} from '@angular/common';\nimport {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/core';\n\n@Directive()\nexport class ClassDirective extends BaseDirective2 implements DoCheck {\n\n  protected override DIRECTIVE_KEY = 'ngClass';\n\n  /**\n   * Capture class assignments so we cache the default classes\n   * which are merged with activated styles and used as fallbacks.\n   */\n  @Input('class')\n  set klass(val: string) {\n    this.ngClassInstance.klass = val;\n    this.setValue(val, '');\n  }\n\n  constructor(elementRef: ElementRef,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              iterableDiffers: IterableDiffers,\n              keyValueDiffers: KeyValueDiffers,\n              renderer2: Renderer2,\n              @Optional() @Self() protected readonly ngClassInstance: NgClass) {\n    super(elementRef, null!, styler, marshal);\n    if (!this.ngClassInstance) {\n      // Create an instance NgClass Directive instance only if `ngClass=\"\"` has NOT been defined on\n      // the same host element; since the responsive variations may be defined...\n      this.ngClassInstance = new NgClass(elementRef, renderer2);\n    }\n    this.init();\n    this.setValue('', '');\n  }\n\n  protected override updateWithValue(value: any) {\n    this.ngClassInstance.ngClass = value;\n    this.ngClassInstance.ngDoCheck();\n  }\n\n  // ******************************************************************\n  // Lifecycle Hooks\n  // ******************************************************************\n\n  /**\n   * For ChangeDetectionStrategy.onPush and ngOnChanges() updates\n   */\n  ngDoCheck() {\n    this.ngClassInstance.ngDoCheck();\n  }\n}\n\nconst inputs = [\n  'ngClass', 'ngClass.xs', 'ngClass.sm', 'ngClass.md', 'ngClass.lg', 'ngClass.xl',\n  'ngClass.lt-sm', 'ngClass.lt-md', 'ngClass.lt-lg', 'ngClass.lt-xl',\n  'ngClass.gt-xs', 'ngClass.gt-sm', 'ngClass.gt-md', 'ngClass.gt-lg'\n];\n\nconst selector = `\n  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],\n  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],\n  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]\n`;\n\n/**\n * Directive to add responsive support for ngClass.\n * This maintains the core functionality of 'ngClass' and adds responsive API\n * Note: this class is a no-op when rendered on the server\n */\n@Directive({selector, inputs})\nexport class DefaultClassDirective extends ClassDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  ElementRef,\n  OnChanges,\n  SimpleChanges,\n  Inject,\n  PLATFORM_ID,\n  Injectable,\n  AfterViewInit,\n} from '@angular/core';\nimport {isPlatformServer} from '@angular/common';\nimport {\n  BaseDirective2,\n  LAYOUT_CONFIG,\n  LayoutConfigOptions,\n  MediaMarshaller,\n  SERVER_TOKEN,\n  StyleUtils,\n  StyleBuilder,\n} from '@angular/flex-layout/core';\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {takeUntil} from 'rxjs/operators';\n\nexport interface ShowHideParent {\n  display: string;\n  isServer: boolean;\n}\n\n@Injectable({providedIn: 'root'})\nexport class ShowHideStyleBuilder extends StyleBuilder {\n  buildStyles(show: string, parent: ShowHideParent) {\n    const shouldShow = show === 'true';\n    return {'display': shouldShow ? parent.display || (parent.isServer ? 'initial' : '') : 'none'};\n  }\n}\n\n@Directive()\nexport class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges {\n  protected override DIRECTIVE_KEY = 'show-hide';\n\n  /** Original DOM Element CSS display style */\n  protected display: string = '';\n  protected hasLayout = false;\n  protected hasFlexChild = false;\n\n  constructor(elementRef: ElementRef,\n              styleBuilder: ShowHideStyleBuilder,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions,\n              @Inject(PLATFORM_ID) protected platformId: Object,\n              @Inject(SERVER_TOKEN) protected serverModuleLoaded: boolean) {\n    super(elementRef, styleBuilder, styler, marshal);\n  }\n\n  // *********************************************\n  // Lifecycle Methods\n  // *********************************************\n\n  ngAfterViewInit() {\n    this.trackExtraTriggers();\n\n    const children = Array.from(this.nativeElement.children);\n    for (let i = 0; i < children.length; i++) {\n      if (this.marshal.hasValue(children[i] as HTMLElement, 'flex')) {\n        this.hasFlexChild = true;\n        break;\n      }\n    }\n\n    if (DISPLAY_MAP.has(this.nativeElement)) {\n      this.display = DISPLAY_MAP.get(this.nativeElement)!;\n    } else {\n      this.display = this.getDisplayStyle();\n      DISPLAY_MAP.set(this.nativeElement, this.display);\n    }\n\n    this.init();\n    // set the default to show unless explicitly overridden\n    const defaultValue = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY, '');\n    if (defaultValue === undefined || defaultValue === '') {\n      this.setValue(true, '');\n    } else {\n      this.triggerUpdate();\n    }\n  }\n\n  /**\n   * On changes to any @Input properties...\n   * Default to use the non-responsive Input value ('fxShow')\n   * Then conditionally override with the mq-activated Input's current value\n   */\n  override ngOnChanges(changes: SimpleChanges) {\n    Object.keys(changes).forEach(key => {\n      if (this.inputs.indexOf(key) !== -1) {\n        const inputKey = key.split('.');\n        const bp = inputKey.slice(1).join('.');\n        const inputValue = changes[key].currentValue;\n        let shouldShow = inputValue !== '' ?\n            inputValue !== 0 ? coerceBooleanProperty(inputValue) : false\n            : true;\n        if (inputKey[0] === 'fxHide') {\n          shouldShow = !shouldShow;\n        }\n        this.setValue(shouldShow, bp);\n      }\n    });\n  }\n\n  // *********************************************\n  // Protected methods\n  // *********************************************\n\n  /**\n   *  Watch for these extra triggers to update fxShow, fxHide stylings\n   */\n  protected trackExtraTriggers() {\n    this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout');\n\n    ['layout', 'layout-align'].forEach(key => {\n      this.marshal\n          .trackValue(this.nativeElement, key)\n          .pipe(takeUntil(this.destroySubject))\n          .subscribe(this.triggerUpdate.bind(this));\n    });\n  }\n\n  /**\n   * Override accessor to the current HTMLElement's `display` style\n   * Note: Show/Hide will not change the display to 'flex' but will set it to 'block'\n   * unless it was already explicitly specified inline or in a CSS stylesheet.\n   */\n  protected getDisplayStyle(): string {\n    return (this.hasLayout || (this.hasFlexChild && this.layoutConfig.addFlexToParent)) ?\n        'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true);\n  }\n\n  /** Validate the visibility value and then update the host's inline display style */\n  protected override updateWithValue(value: boolean | string = true) {\n    if (value === '') {\n      return;\n    }\n    const isServer = isPlatformServer(this.platformId);\n    this.addStyles(value ? 'true' : 'false', {display: this.display, isServer});\n    if (isServer && this.serverModuleLoaded) {\n      this.nativeElement.style.setProperty('display', '');\n    }\n    this.marshal.triggerUpdate(this.parentElement!, 'layout-gap');\n  }\n}\n\nconst DISPLAY_MAP: WeakMap<HTMLElement, string> = new WeakMap();\n\nconst inputs = [\n  'fxShow', 'fxShow.print',\n  'fxShow.xs', 'fxShow.sm', 'fxShow.md', 'fxShow.lg', 'fxShow.xl',\n  'fxShow.lt-sm', 'fxShow.lt-md', 'fxShow.lt-lg', 'fxShow.lt-xl',\n  'fxShow.gt-xs', 'fxShow.gt-sm', 'fxShow.gt-md', 'fxShow.gt-lg',\n  'fxHide', 'fxHide.print',\n  'fxHide.xs', 'fxHide.sm', 'fxHide.md', 'fxHide.lg', 'fxHide.xl',\n  'fxHide.lt-sm', 'fxHide.lt-md', 'fxHide.lt-lg', 'fxHide.lt-xl',\n  'fxHide.gt-xs', 'fxHide.gt-sm', 'fxHide.gt-md', 'fxHide.gt-lg'\n];\n\nconst selector = `\n  [fxShow], [fxShow.print],\n  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],\n  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],\n  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],\n  [fxHide], [fxHide.print],\n  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],\n  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],\n  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]\n`;\n\n/**\n * 'show' Layout API directive\n */\n@Directive({selector, inputs})\nexport class DefaultShowHideDirective extends ShowHideDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport type NgStyleRawList = string[];\nexport type NgStyleMap = {[klass: string]: string};\n// NgStyle selectors accept NgStyleType values\nexport type NgStyleType = string | Set<string> | NgStyleRawList | NgStyleMap;\n\n/**\n * Callback function for SecurityContext.STYLE sanitization\n */\nexport type NgStyleSanitizer = (val: any) => string;\n\n/** NgStyle allowed inputs */\nexport class NgStyleKeyValue {\n  constructor(public key: string, public value: string, noQuotes = true) {\n    this.key = noQuotes ? key.replace(/['\"]/g, '').trim() : key.trim();\n\n    this.value = noQuotes ? value.replace(/['\"]/g, '').trim() : value.trim();\n    this.value = this.value.replace(/;/, '');\n  }\n}\n\nexport function getType(target: any): string {\n  let what = typeof target;\n  if (what === 'object') {\n    return (target.constructor === Array) ? 'array' :\n        (target.constructor === Set) ? 'set' : 'object';\n  }\n  return what;\n}\n\n/**\n * Split string of key:value pairs into Array of k-v pairs\n * e.g.  'key:value; key:value; key:value;' -> ['key:value',...]\n */\nexport function buildRawList(source: any, delimiter = ';'): NgStyleRawList {\n  return String(source)\n      .trim()\n      .split(delimiter)\n      .map((val: string) => val.trim())\n      .filter(val => val !== '');\n}\n\n/** Convert array of key:value strings to a iterable map object */\nexport function buildMapFromList(styles: NgStyleRawList, sanitize?: NgStyleSanitizer): NgStyleMap {\n  const sanitizeValue = (it: NgStyleKeyValue) => {\n    if (sanitize) {\n      it.value = sanitize(it.value);\n    }\n    return it;\n  };\n\n  return styles\n      .map(stringToKeyValue)\n      .filter(entry => !!entry)\n      .map(sanitizeValue)\n      .reduce(keyValuesToMap, {} as NgStyleMap);\n}\n\n/** Convert Set<string> or raw Object to an iterable NgStyleMap */\nexport function buildMapFromSet(source: NgStyleType, sanitize?: NgStyleSanitizer): NgStyleMap {\n  let list: string[] = [];\n  if (getType(source) === 'set') {\n    (source as Set<string>).forEach(entry => list.push(entry));\n  } else {\n    Object.keys(source).forEach((key: string) => {\n      list.push(`${key}:${(source as NgStyleMap)[key]}`);\n    });\n  }\n  return buildMapFromList(list, sanitize);\n}\n\n\n/** Convert 'key:value' -> [key, value] */\nexport function stringToKeyValue(it: string): NgStyleKeyValue {\n  const [key, ...vals] = it.split(':');\n  return new NgStyleKeyValue(key, vals.join(':'));\n}\n\n/** Convert [ [key,value] ] -> { key : value } */\nexport function keyValuesToMap(map: NgStyleMap, entry: NgStyleKeyValue): NgStyleMap {\n  if (!!entry.key) {\n    map[entry.key] = entry.value;\n  }\n  return map;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  DoCheck,\n  ElementRef,\n  Inject,\n  KeyValueDiffers,\n  Optional,\n  PLATFORM_ID,\n  Renderer2,\n  SecurityContext,\n  Self,\n} from '@angular/core';\nimport {isPlatformServer, NgStyle} from '@angular/common';\nimport {DomSanitizer} from '@angular/platform-browser';\nimport {\n  BaseDirective2,\n  StyleUtils,\n  MediaMarshaller,\n  SERVER_TOKEN,\n} from '@angular/flex-layout/core';\n\nimport {\n  NgStyleRawList,\n  NgStyleType,\n  NgStyleSanitizer,\n  buildRawList,\n  getType,\n  buildMapFromSet,\n  NgStyleMap,\n  NgStyleKeyValue,\n  stringToKeyValue,\n  keyValuesToMap,\n} from './style-transforms';\n\n@Directive()\nexport class StyleDirective extends BaseDirective2 implements DoCheck {\n\n  protected override DIRECTIVE_KEY = 'ngStyle';\n  protected fallbackStyles: NgStyleMap;\n  protected isServer: boolean;\n\n  constructor(elementRef: ElementRef,\n              styler: StyleUtils,\n              marshal: MediaMarshaller,\n              protected sanitizer: DomSanitizer,\n              differs: KeyValueDiffers,\n              renderer2: Renderer2,\n              @Optional() @Self() private readonly ngStyleInstance: NgStyle,\n              @Inject(SERVER_TOKEN) serverLoaded: boolean,\n              @Inject(PLATFORM_ID) platformId: Object) {\n    super(elementRef, null!, styler, marshal);\n    if (!this.ngStyleInstance) {\n      // Create an instance NgStyle Directive instance only if `ngStyle=\"\"` has NOT been\n      // defined on the same host element; since the responsive variations may be defined...\n      this.ngStyleInstance = new NgStyle(elementRef, differs, renderer2);\n    }\n    this.init();\n    const styles = this.nativeElement.getAttribute('style') ?? '';\n    this.fallbackStyles = this.buildStyleMap(styles);\n    this.isServer = serverLoaded && isPlatformServer(platformId);\n  }\n\n  /** Add generated styles */\n  protected override updateWithValue(value: any) {\n    const styles = this.buildStyleMap(value);\n    this.ngStyleInstance.ngStyle = {...this.fallbackStyles, ...styles};\n    if (this.isServer) {\n      this.applyStyleToElement(styles);\n    }\n    this.ngStyleInstance.ngDoCheck();\n  }\n\n  /** Remove generated styles */\n  protected override clearStyles() {\n    this.ngStyleInstance.ngStyle = this.fallbackStyles;\n    this.ngStyleInstance.ngDoCheck();\n  }\n\n  /**\n   * Convert raw strings to ngStyleMap; which is required by ngStyle\n   * NOTE: Raw string key-value pairs MUST be delimited by `;`\n   *       Comma-delimiters are not supported due to complexities of\n   *       possible style values such as `rgba(x,x,x,x)` and others\n   */\n  protected buildStyleMap(styles: NgStyleType): NgStyleMap {\n    // Always safe-guard (aka sanitize) style property values\n    const sanitizer: NgStyleSanitizer = (val: any) =>\n      this.sanitizer.sanitize(SecurityContext.STYLE, val) ?? '';\n    if (styles) {\n      switch (getType(styles)) {\n        case 'string':  return buildMapFromList(buildRawList(styles),\n          sanitizer);\n        case 'array' :  return buildMapFromList(styles as NgStyleRawList, sanitizer);\n        case 'set'   :  return buildMapFromSet(styles, sanitizer);\n        default      :  return buildMapFromSet(styles, sanitizer);\n      }\n    }\n\n    return {};\n  }\n\n  // ******************************************************************\n  // Lifecycle Hooks\n  // ******************************************************************\n\n  /** For ChangeDetectionStrategy.onPush and ngOnChanges() updates */\n  ngDoCheck() {\n    this.ngStyleInstance.ngDoCheck();\n  }\n}\n\nconst inputs = [\n  'ngStyle',\n  'ngStyle.xs', 'ngStyle.sm', 'ngStyle.md', 'ngStyle.lg', 'ngStyle.xl',\n  'ngStyle.lt-sm', 'ngStyle.lt-md', 'ngStyle.lt-lg', 'ngStyle.lt-xl',\n  'ngStyle.gt-xs', 'ngStyle.gt-sm', 'ngStyle.gt-md', 'ngStyle.gt-lg'\n];\n\nconst selector = `\n  [ngStyle],\n  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],\n  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],\n  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]\n`;\n\n/**\n * Directive to add responsive support for ngStyle.\n *\n */\n@Directive({selector, inputs})\nexport class DefaultStyleDirective extends StyleDirective implements DoCheck {\n  protected override inputs = inputs;\n}\n\n/** Build a styles map from a list of styles, while sanitizing bad values first */\nfunction buildMapFromList(styles: NgStyleRawList, sanitize?: NgStyleSanitizer): NgStyleMap {\n  const sanitizeValue = (it: NgStyleKeyValue) => {\n    if (sanitize) {\n      it.value = sanitize(it.value);\n    }\n    return it;\n  };\n\n  return styles\n    .map(stringToKeyValue)\n    .filter(entry => !!entry)\n    .map(sanitizeValue)\n    .reduce(keyValuesToMap, {} as NgStyleMap);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\nimport {CoreModule} from '@angular/flex-layout/core';\n\nimport {DefaultImgSrcDirective} from './img-src/img-src';\nimport {DefaultClassDirective} from './class/class';\nimport {DefaultShowHideDirective} from './show-hide/show-hide';\nimport {DefaultStyleDirective} from './style/style';\n\n\nconst ALL_DIRECTIVES = [\n  DefaultShowHideDirective,\n  DefaultClassDirective,\n  DefaultStyleDirective,\n  DefaultImgSrcDirective,\n];\n\n/**\n * *****************************************************************\n * Define module for the Extended API\n * *****************************************************************\n */\n\n@NgModule({\n  imports: [CoreModule],\n  declarations: [...ALL_DIRECTIVES],\n  exports: [...ALL_DIRECTIVES]\n})\nexport class ExtendedModule {\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './module';\n\nexport * from './class/class';\nexport * from './img-src/img-src';\nexport * from './show-hide/show-hide';\nexport * from './style/style';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["inputs","selector","buildMapFromList","i2","i3"],"mappings":";;;;;;;;;;AAAA;;;;;;AAMG;AAaG,MAAO,kBAAmB,SAAQ,YAAY,CAAA;AAClD,IAAA,WAAW,CAAC,GAAW,EAAA;AACrB,QAAA,OAAO,EAAC,SAAS,EAAE,GAAG,GAAG,CAAO,IAAA,EAAA,GAAG,GAAG,GAAG,EAAE,EAAC,CAAC;KAC9C;;+GAHU,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADN,MAAM,EAAA,CAAA,CAAA;2FAClB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAC,UAAU,EAAE,MAAM,EAAC,CAAA;;AAQ1B,MAAO,eAAgB,SAAQ,cAAc,CAAA;IAUjD,WAAY,CAAA,UAAsB,EACtB,YAAgC,EAChC,MAAkB,EAClB,OAAwB,EACO,UAAkB,EACjB,kBAA2B,EAAA;QACrE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAFR,IAAU,CAAA,UAAA,GAAV,UAAU,CAAQ;QACjB,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAS;QAdpD,IAAa,CAAA,aAAA,GAAG,SAAS,CAAC;QACnC,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;QAuCP,IAAU,CAAA,UAAA,GAAG,WAAW,CAAC;QAxB1C,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;QAChE,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAChE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAC5C,SAAA;KACF;IAlBD,IACI,GAAG,CAAC,GAAW,EAAA;AACjB,QAAA,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;KACpC;AAgBD;;;;;;;AAOG;AACgB,IAAA,eAAe,CAAC,KAAc,EAAA;AAC/C,QAAA,MAAM,GAAG,GAAG,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC;QACrC,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAChE,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;AACrB,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC7C,SAAA;KACF;;4GAvCU,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAcN,WAAW,EAAA,EAAA,EAAA,KAAA,EACX,YAAY,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;gGAfrB,eAAe,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B,SAAS;;0BAeK,MAAM;2BAAC,WAAW,CAAA;;0BAClB,MAAM;2BAAC,YAAY,CAAA;4CAV5B,GAAG,EAAA,CAAA;sBADN,KAAK;uBAAC,KAAK,CAAA;;AAwCd,MAAM,WAAW,GAAiC,IAAI,GAAG,EAAE,CAAC;AAE5D,MAAMA,QAAM,GAAG;AACb,IAAA,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;AAChD,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;AAClD,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;CACnD,CAAC;AAEF,MAAMC,UAAQ,GAAG,CAAA;;;;CAIhB,CAAC;AAEF;;;;;;;;AAQG;AAEG,MAAO,sBAAuB,SAAQ,eAAe,CAAA;AAD3D,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAGD,QAAM,CAAC;AACpC,KAAA;;mHAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;uGAAtB,sBAAsB,EAAA,QAAA,EAAA,wNAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBADlC,SAAS;mBAAC,YAACC,UAAQ,UAAED,QAAM,EAAC,CAAA;;;AC7F7B;;;;;;AAMG;AAgBG,MAAO,cAAe,SAAQ,cAAc,CAAA;AAchD,IAAA,WAAA,CAAY,UAAsB,EACtB,MAAkB,EAClB,OAAwB,EACxB,eAAgC,EAChC,eAAgC,EAChC,SAAoB,EACmB,eAAwB,EAAA;QACzE,KAAK,CAAC,UAAU,EAAE,IAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QADO,IAAe,CAAA,eAAA,GAAf,eAAe,CAAS;QAlBxD,IAAa,CAAA,aAAA,GAAG,SAAS,CAAC;AAoB3C,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;;;AAGzB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAC,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7F,SAAA;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;KACvB;AAzBD;;;AAGG;IACH,IACI,KAAK,CAAC,GAAW,EAAA;AACnB,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,GAAG,CAAC;AACjC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;KACxB;AAmBkB,IAAA,eAAe,CAAC,KAAU,EAAA;AAC3C,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;AACrC,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;;;AAMD;;AAEG;IACH,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;2GA7CU,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;+FAAd,cAAc,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;;0BAqBK,QAAQ;;0BAAI,IAAI;4CAXzB,KAAK,EAAA,CAAA;sBADR,KAAK;uBAAC,OAAO,CAAA;;AAwChB,MAAMA,QAAM,GAAG;IACb,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;AAC/E,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;AAClE,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;CACnE,CAAC;AAEF,MAAMC,UAAQ,GAAG,CAAA;;;;CAIhB,CAAC;AAEF;;;;AAIG;AAEG,MAAO,qBAAsB,SAAQ,cAAc,CAAA;AADzD,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAGD,QAAM,CAAC;AACpC,KAAA;;kHAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sGAArB,qBAAqB,EAAA,QAAA,EAAA,qOAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,SAAS;mBAAC,YAACC,UAAQ,UAAED,QAAM,EAAC,CAAA;;;ACvF7B;;;;;;AAMG;AA8BG,MAAO,oBAAqB,SAAQ,YAAY,CAAA;IACpD,WAAW,CAAC,IAAY,EAAE,MAAsB,EAAA;AAC9C,QAAA,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC;AACnC,QAAA,OAAO,EAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAAC,OAAO,KAAK,MAAM,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,GAAG,MAAM,EAAC,CAAC;KAChG;;iHAJU,oBAAoB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAApB,oBAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cADR,MAAM,EAAA,CAAA,CAAA;2FAClB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,UAAU;mBAAC,EAAC,UAAU,EAAE,MAAM,EAAC,CAAA;;AAS1B,MAAO,iBAAkB,SAAQ,cAAc,CAAA;AAQnD,IAAA,WAAA,CAAY,UAAsB,EACtB,YAAkC,EAClC,MAAkB,EAClB,OAAwB,EACS,YAAiC,EACnC,UAAkB,EACjB,kBAA2B,EAAA;QACrE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAHN,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAqB;QACnC,IAAU,CAAA,UAAA,GAAV,UAAU,CAAQ;QACjB,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAS;QAbpD,IAAa,CAAA,aAAA,GAAG,WAAW,CAAC;;QAGrC,IAAO,CAAA,OAAA,GAAW,EAAE,CAAC;QACrB,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAClB,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;KAU9B;;;;IAMD,eAAe,GAAA;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAE1B,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACzD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACxC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAgB,EAAE,MAAM,CAAC,EAAE;AAC7D,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBACzB,MAAM;AACP,aAAA;AACF,SAAA;QAED,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YACvC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAE,CAAC;AACrD,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACtC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;AACnD,SAAA;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;;AAEZ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;AACvF,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,YAAY,KAAK,EAAE,EAAE;AACrD,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACzB,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,aAAa,EAAE,CAAC;AACtB,SAAA;KACF;AAED;;;;AAIG;AACM,IAAA,WAAW,CAAC,OAAsB,EAAA;QACzC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;YACjC,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE;gBACnC,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAChC,gBAAA,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACvC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC;AAC7C,gBAAA,IAAI,UAAU,GAAG,UAAU,KAAK,EAAE;AAC9B,oBAAA,UAAU,KAAK,CAAC,GAAG,qBAAqB,CAAC,UAAU,CAAC,GAAG,KAAK;sBAC1D,IAAI,CAAC;AACX,gBAAA,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;oBAC5B,UAAU,GAAG,CAAC,UAAU,CAAC;AAC1B,iBAAA;AACD,gBAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AAC/B,aAAA;AACH,SAAC,CAAC,CAAC;KACJ;;;;AAMD;;AAEG;IACO,kBAAkB,GAAA;AAC1B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAErE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;AACvC,YAAA,IAAI,CAAC,OAAO;AACP,iBAAA,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC;AACnC,iBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;iBACpC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD,SAAC,CAAC,CAAC;KACJ;AAED;;;;AAIG;IACO,eAAe,GAAA;AACvB,QAAA,OAAO,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;AAC9E,YAAA,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;KAC3E;;IAGkB,eAAe,CAAC,QAA0B,IAAI,EAAA;QAC/D,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,OAAO;AACR,SAAA;QACD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,CAAC,CAAC;AAC5E,QAAA,IAAI,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACvC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACrD,SAAA;QACD,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,aAAc,EAAE,YAAY,CAAC,CAAC;KAC/D;;AA/GU,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,EAYR,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,aAAa,EACb,EAAA,EAAA,KAAA,EAAA,WAAW,aACX,YAAY,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAdrB,iBAAiB,EAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;;0BAaK,MAAM;2BAAC,aAAa,CAAA;;0BACpB,MAAM;2BAAC,WAAW,CAAA;;0BAClB,MAAM;2BAAC,YAAY,CAAA;;AAoGlC,MAAM,WAAW,GAAiC,IAAI,OAAO,EAAE,CAAC;AAEhE,MAAMA,QAAM,GAAG;AACb,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;AAC/D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;AAC9D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;AAC9D,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;AAC/D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;AAC9D,IAAA,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;CAC/D,CAAC;AAEF,MAAMC,UAAQ,GAAG,CAAA;;;;;;;;;CAShB,CAAC;AAEF;;AAEG;AAEG,MAAO,wBAAyB,SAAQ,iBAAiB,CAAA;AAD/D,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAGD,QAAM,CAAC;AACpC,KAAA;;qHAFY,wBAAwB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;yGAAxB,wBAAwB,EAAA,QAAA,EAAA,idAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,cAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,cAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBADpC,SAAS;mBAAC,YAACC,UAAQ,UAAED,QAAM,EAAC,CAAA;;;ACzL7B;;;;;;AAMG;AAYH;MACa,eAAe,CAAA;AAC1B,IAAA,WAAA,CAAmB,GAAW,EAAS,KAAa,EAAE,QAAQ,GAAG,IAAI,EAAA;QAAlD,IAAG,CAAA,GAAA,GAAH,GAAG,CAAQ;QAAS,IAAK,CAAA,KAAA,GAAL,KAAK,CAAQ;QAClD,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC;QAEnE,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;AACzE,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;KAC1C;AACF,CAAA;AAEK,SAAU,OAAO,CAAC,MAAW,EAAA;AACjC,IAAA,IAAI,IAAI,GAAG,OAAO,MAAM,CAAC;IACzB,IAAI,IAAI,KAAK,QAAQ,EAAE;AACrB,QAAA,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,KAAK,IAAI,OAAO;AAC3C,YAAA,CAAC,MAAM,CAAC,WAAW,KAAK,GAAG,IAAI,KAAK,GAAG,QAAQ,CAAC;AACrD,KAAA;AACD,IAAA,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;AAGG;SACa,YAAY,CAAC,MAAW,EAAE,SAAS,GAAG,GAAG,EAAA;IACvD,OAAO,MAAM,CAAC,MAAM,CAAC;AAChB,SAAA,IAAI,EAAE;SACN,KAAK,CAAC,SAAS,CAAC;SAChB,GAAG,CAAC,CAAC,GAAW,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC;SAChC,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC;AACjC,CAAC;AAED;AACgB,SAAAE,kBAAgB,CAAC,MAAsB,EAAE,QAA2B,EAAA;AAClF,IAAA,MAAM,aAAa,GAAG,CAAC,EAAmB,KAAI;AAC5C,QAAA,IAAI,QAAQ,EAAE;YACZ,EAAE,CAAC,KAAK,GAAG,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAO,MAAM;SACR,GAAG,CAAC,gBAAgB,CAAC;SACrB,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;SACxB,GAAG,CAAC,aAAa,CAAC;AAClB,SAAA,MAAM,CAAC,cAAc,EAAE,EAAgB,CAAC,CAAC;AAChD,CAAC;AAED;AACgB,SAAA,eAAe,CAAC,MAAmB,EAAE,QAA2B,EAAA;IAC9E,IAAI,IAAI,GAAa,EAAE,CAAC;AACxB,IAAA,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,KAAK,EAAE;AAC5B,QAAA,MAAsB,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5D,KAAA;AAAM,SAAA;QACL,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,KAAI;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,CAAA,EAAG,GAAG,CAAA,CAAA,EAAK,MAAqB,CAAC,GAAG,CAAC,CAAE,CAAA,CAAC,CAAC;AACrD,SAAC,CAAC,CAAC;AACJ,KAAA;AACD,IAAA,OAAOA,kBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC1C,CAAC;AAGD;AACM,SAAU,gBAAgB,CAAC,EAAU,EAAA;AACzC,IAAA,MAAM,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACrC,IAAA,OAAO,IAAI,eAAe,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAClD,CAAC;AAED;AACgB,SAAA,cAAc,CAAC,GAAe,EAAE,KAAsB,EAAA;AACpE,IAAA,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;QACf,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;AAC9B,KAAA;AACD,IAAA,OAAO,GAAG,CAAC;AACb;;AC3FA;;;;;;AAMG;AAoCG,MAAO,cAAe,SAAQ,cAAc,CAAA;AAMhD,IAAA,WAAA,CAAY,UAAsB,EACtB,MAAkB,EAClB,OAAwB,EACd,SAAuB,EACjC,OAAwB,EACxB,SAAoB,EACiB,eAAwB,EACvC,YAAqB,EACtB,UAAkB,EAAA;QACjD,KAAK,CAAC,UAAU,EAAE,IAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QANtB,IAAS,CAAA,SAAA,GAAT,SAAS,CAAc;QAGI,IAAe,CAAA,eAAA,GAAf,eAAe,CAAS;QAVtD,IAAa,CAAA,aAAA,GAAG,SAAS,CAAC;AAc3C,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;;;AAGzB,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;AACpE,SAAA;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC9D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;KAC9D;;AAGkB,IAAA,eAAe,CAAC,KAAU,EAAA;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACzC,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,MAAM,EAAC,CAAC;QACnE,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAClC,SAAA;AACD,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;IAGkB,WAAW,GAAA;QAC5B,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;AACnD,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;AAED;;;;;AAKG;AACO,IAAA,aAAa,CAAC,MAAmB,EAAA;;QAEzC,MAAM,SAAS,GAAqB,CAAC,GAAQ,KAC3C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;AAC5D,QAAA,IAAI,MAAM,EAAE;AACV,YAAA,QAAQ,OAAO,CAAC,MAAM,CAAC;AACrB,gBAAA,KAAK,QAAQ,EAAG,OAAO,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EAC1D,SAAS,CAAC,CAAC;gBACb,KAAK,OAAQ,EAAG,OAAO,gBAAgB,CAAC,MAAwB,EAAE,SAAS,CAAC,CAAC;gBAC7E,KAAK,KAAQ,EAAG,OAAO,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;gBAC1D,SAAgB,OAAO,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAC3D,aAAA;AACF,SAAA;AAED,QAAA,OAAO,EAAE,CAAC;KACX;;;;;IAOD,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;KAClC;;2GAzEU,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAAC,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAaL,YAAY,EAAA,EAAA,EAAA,KAAA,EACZ,WAAW,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;+FAdpB,cAAc,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;;0BAaK,QAAQ;;0BAAI,IAAI;;0BAChB,MAAM;2BAAC,YAAY,CAAA;;0BACnB,MAAM;2BAAC,WAAW,CAAA;;AA8DjC,MAAM,MAAM,GAAG;IACb,SAAS;AACT,IAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY;AACpE,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;AAClE,IAAA,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe;CACnE,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAA;;;;;CAKhB,CAAC;AAEF;;;AAGG;AAEG,MAAO,qBAAsB,SAAQ,cAAc,CAAA;AADzD,IAAA,WAAA,GAAA;;QAEqB,IAAM,CAAA,MAAA,GAAG,MAAM,CAAC;AACpC,KAAA;;kHAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sGAArB,qBAAqB,EAAA,QAAA,EAAA,wOAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,SAAS;mBAAC,EAAC,QAAQ,EAAE,MAAM,EAAC,CAAA;;AAK7B;AACA,SAAS,gBAAgB,CAAC,MAAsB,EAAE,QAA2B,EAAA;AAC3E,IAAA,MAAM,aAAa,GAAG,CAAC,EAAmB,KAAI;AAC5C,QAAA,IAAI,QAAQ,EAAE;YACZ,EAAE,CAAC,KAAK,GAAG,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAO,MAAM;SACV,GAAG,CAAC,gBAAgB,CAAC;SACrB,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;SACxB,GAAG,CAAC,aAAa,CAAC;AAClB,SAAA,MAAM,CAAC,cAAc,EAAE,EAAgB,CAAC,CAAC;AAC9C;;AC3JA;;;;;;AAMG;AAUH,MAAM,cAAc,GAAG;IACrB,wBAAwB;IACxB,qBAAqB;IACrB,qBAAqB;IACrB,sBAAsB;CACvB,CAAC;AAEF;;;;AAIG;MAOU,cAAc,CAAA;;2GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,iBAjBzB,wBAAwB;QACxB,qBAAqB;QACrB,qBAAqB;QACrB,sBAAsB,CAAA,EAAA,OAAA,EAAA,CAUZ,UAAU,CAAA,EAAA,OAAA,EAAA,CAbpB,wBAAwB;QACxB,qBAAqB;QACrB,qBAAqB;QACrB,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAcX,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAJf,UAAU,CAAA,EAAA,CAAA,CAAA;2FAIT,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,UAAU,CAAC;AACrB,oBAAA,YAAY,EAAE,CAAC,GAAG,cAAc,CAAC;AACjC,oBAAA,OAAO,EAAE,CAAC,GAAG,cAAc,CAAC;AAC7B,iBAAA,CAAA;;;ACjCD;;;;;;AAMG;;ACNH;;AAEG;;;;"}
diff --git a/ui-ngx/patches/@mat-datetimepicker+core+11.0.3.patch b/ui-ngx/patches/@mat-datetimepicker+core+11.0.3.patch
deleted file mode 100644
index 990754ef1a..0000000000
--- a/ui-ngx/patches/@mat-datetimepicker+core+11.0.3.patch
+++ /dev/null
@@ -1,51 +0,0 @@
-diff --git a/node_modules/@mat-datetimepicker/core/esm2020/datetimepicker/clock.mjs b/node_modules/@mat-datetimepicker/core/esm2020/datetimepicker/clock.mjs
-index e3457ea..a069460 100644
---- a/node_modules/@mat-datetimepicker/core/esm2020/datetimepicker/clock.mjs
-+++ b/node_modules/@mat-datetimepicker/core/esm2020/datetimepicker/clock.mjs
-@@ -259,9 +259,9 @@ export class MatDatetimepickerClockComponent {
-                 value = 0;
-             }
-             // Don't close the minutes view if an invalid minute is clicked.
--            if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
--                return;
--            }
-+            // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
-+            //     return;
-+            // }
-             date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
-         }
-         this._timeChanged = true;
-diff --git a/node_modules/@mat-datetimepicker/core/fesm2015/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2015/mat-datetimepicker-core.mjs
-index 7699ff6..01aad13 100644
---- a/node_modules/@mat-datetimepicker/core/fesm2015/mat-datetimepicker-core.mjs
-+++ b/node_modules/@mat-datetimepicker/core/fesm2015/mat-datetimepicker-core.mjs
-@@ -951,9 +951,9 @@ class MatDatetimepickerClockComponent {
-                 value = 0;
-             }
-             // Don't close the minutes view if an invalid minute is clicked.
--            if (!((_b = this._minutes.find((m) => (m === null || m === void 0 ? void 0 : m['value']) === value)) === null || _b === void 0 ? void 0 : _b['enabled'])) {
--                return;
--            }
-+            // if (!((_b = this._minutes.find((m) => (m === null || m === void 0 ? void 0 : m['value']) === value)) === null || _b === void 0 ? void 0 : _b['enabled'])) {
-+            //     return;
-+            // }
-             date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
-         }
-         this._timeChanged = true;
-diff --git a/node_modules/@mat-datetimepicker/core/fesm2020/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2020/mat-datetimepicker-core.mjs
-index 809a57d..f712b84 100644
---- a/node_modules/@mat-datetimepicker/core/fesm2020/mat-datetimepicker-core.mjs
-+++ b/node_modules/@mat-datetimepicker/core/fesm2020/mat-datetimepicker-core.mjs
-@@ -946,9 +946,9 @@ class MatDatetimepickerClockComponent {
-                 value = 0;
-             }
-             // Don't close the minutes view if an invalid minute is clicked.
--            if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
--                return;
--            }
-+            // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
-+            //     return;
-+            // }
-             date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
-         }
-         this._timeChanged = true;
diff --git a/ui-ngx/patches/@mat-datetimepicker+core+14.0.0.patch b/ui-ngx/patches/@mat-datetimepicker+core+14.0.0.patch
new file mode 100644
index 0000000000..293ac10a21
--- /dev/null
+++ b/ui-ngx/patches/@mat-datetimepicker+core+14.0.0.patch
@@ -0,0 +1,34 @@
+diff --git a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
+index 7ecfae7..08363d3 100644
+--- a/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
++++ b/node_modules/@mat-datetimepicker/core/esm2022/datetimepicker/clock.mjs
+@@ -259,9 +259,9 @@ export class MatDatetimepickerClockComponent {
+                 value = 0;
+             }
+             // Don't close the minutes view if an invalid minute is clicked.
+-            if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
+-                return;
+-            }
++            // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
++            //    return;
++            // }
+             date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
+         }
+         this._timeChanged = true;
+diff --git a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
+index 00f4a52..df688e3 100644
+--- a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
++++ b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
+@@ -946,9 +946,9 @@ class MatDatetimepickerClockComponent {
+                 value = 0;
+             }
+             // Don't close the minutes view if an invalid minute is clicked.
+-            if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
+-                return;
+-            }
++            // if (!this._minutes.find((m) => m?.['value'] === value)?.['enabled']) {
++            //    return;
++            // }
+             date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
+         }
+         this._timeChanged = true;
diff --git a/ui-ngx/patches/angular-gridster2+15.0.4.patch b/ui-ngx/patches/angular-gridster2+18.0.1.patch
similarity index 69%
rename from ui-ngx/patches/angular-gridster2+15.0.4.patch
rename to ui-ngx/patches/angular-gridster2+18.0.1.patch
index df511350c5..b8f51f39f8 100644
--- a/ui-ngx/patches/angular-gridster2+15.0.4.patch
+++ b/ui-ngx/patches/angular-gridster2+18.0.1.patch
@@ -1,15 +1,15 @@
-diff --git a/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs b/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs
-index cf4e220..df51c91 100644
---- a/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs
-+++ b/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs
+diff --git a/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs b/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
+index 0dcd873..e99b602 100644
+--- a/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
++++ b/node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
 @@ -666,8 +666,8 @@ class GridsterRenderer {
-             renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', '');
-         }
-         else {
--            const x = Math.round(this.gridster.curColWidth * item.x);
--            const y = Math.round(this.gridster.curRowHeight * item.y);
-+            const x = this.gridster.curColWidth * item.x;
-+            const y = this.gridster.curRowHeight * item.y;
-             const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
-             const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;
-             // set the cell style
+             renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', '');
+         }
+         else {
+-            const x = Math.round(this.gridster.curColWidth * item.x);
+-            const y = Math.round(this.gridster.curRowHeight * item.y);
++            const x = this.gridster.curColWidth * item.x;
++            const y = this.gridster.curRowHeight * item.y;
+             const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
+             const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;
+             // set the cell style
diff --git a/ui-ngx/patches/jquery.terminal+2.43.1.patch b/ui-ngx/patches/jquery.terminal+2.43.1.patch
new file mode 100644
index 0000000000..f5c34ac212
--- /dev/null
+++ b/ui-ngx/patches/jquery.terminal+2.43.1.patch
@@ -0,0 +1,14 @@
+diff --git a/node_modules/jquery.terminal/css/jquery.terminal.min.css b/node_modules/jquery.terminal/css/jquery.terminal.min.css
+index 830ba6e..978e57b 100644
+--- a/node_modules/jquery.terminal/css/jquery.terminal.min.css
++++ b/node_modules/jquery.terminal/css/jquery.terminal.min.css
+@@ -13,7 +13,7 @@
+  * Released under the MIT license
+  *
+  * Date: Sun, 08 Sep 2024 09:58:43 +0000
+- */.cmd .format,.cmd-prompt,.cmd-prompt div,.terminal .terminal-output .format{display:inline-block}.cmd,.terminal h1,.terminal h2,.terminal h3,.terminal h4,.terminal h5,.terminal h6,.terminal pre{margin:0}.cmd .cmd-clipboard{let:-16px;background:transparent!important;border:none!important;box-shadow:none!important;color:transparent!important;height:16px;height:calc(16px/var(--pixel-density, 1))!important;left:calc(-16px/var(--pixel-density, 1))!important;outline:none!important;overflow:hidden!important;padding:0!important;position:absolute!important;resize:none!important;text-indent:-9999em!important;top:0!important;top:calc(var(--cursor-line, 0)*var(--size, 1)*(14px/var(--pixel-density, 1)))!important;white-space:pre!important;width:16px;width:calc(16px/var(--pixel-density, 1))!important;z-index:1000!important}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;left:0;overflow:hidden;position:absolute;top:0;user-select:none;white-space:nowrap;width:1px}.cmd .cursor+span:empty,.cmd div.cmd-end-line span[data-text]:last-child,.cmd div.cmd-end-line span[data-text]:last-child span,.cmd span.cmd-end-line,.cmd span.cmd-end-line span,.cmd textarea{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.terminal audio,.terminal canvas,.terminal img,.terminal object{cursor:default}.terminal{--base-background:var(--background,#000);--base-color:var(--color);contain:content;line-height:normal;position:relative}.terminal-scroller{scrollbar-gutter:stable;box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:auto;position:relative}terminal.terminal-temp{visibility:hidden}body.terminal{height:100%;min-height:100vh}html{height:100%}body.full-screen-terminal,body.terminal{height:100%;margin:0}body.full-screen-terminal .terminal{height:100%!important}body.full-screen-terminal{height:100%;height:var(--terminal-force-height,100dvh)}.terminal>div.terminal-fill{height:100%;min-height:100%}.terminal>.terminal-pixel{display:inline;height:1px;left:-2px;position:absolute;top:-2px;width:1px}.terminal>.terminal-font .terminal-resizer,.terminal>.terminal-resizer{border:none!important;bottom:0!important;height:100%!important;left:0!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:-1!important}.cmd{padding:0;position:relative;width:100%;z-index:300}.terminal .cmd,.terminal .cmd div{background:transparent!important}.terminal a[tabindex="1000"],.terminal a[tabindex="1000"]:active,.terminal a[tabindex="1000"]:focus{outline:none}.cmd.cmd.cmd .cmd-inverted,.cmd.cmd.cmd .inverted,.terminal .inverted,.terminal .terminal-inverted{background-color:#aaa!important;color:#000!important}.cmd a[href],.terminal .terminal-output>:not(.raw) a[href],.terminal.external a[href]{color:#37f;color:var(--link-color,#37f);cursor:pointer}.cmd a[href]:not(.terminal-inverted),.terminal .terminal-output>:not(.raw) a[href]:not(.terminal-inverted),.terminal.external a[href]:not(.terminal-inverted){--color:var(--link-color,#37f);text-shadow:0 0 calc(var(--glow)*5px) var(--color,#ccc)}.terminal .terminal-output>:not(.raw) a[href].terminal-inverted,.terminal.external a[href].terminal-inverted{background:var(--color,#ccc);text-shadow:0 0 calc(var(--glow)*5px) var(--background,#000)}.cmd a[href]:hover,.terminal .terminal-output>:not(.raw) a[href]:hover,.terminal.external a[href]:hover{background-color:#37f;background-color:var(--link-color,#37f)!important;color:#000;color:var(--base-background,#000)!important;text-decoration:none}.cmd a[href] span,.terminal .terminal-output>:not(.raw) a[href] span,.terminal.external a[href] span{--color:var(--link-color,#37f);color:#37f!important;color:var(--link-color,#37f)!important;text-decoration:underline}.cmd a[href]:hover span,.terminal .terminal-output>:not(.raw) a[href]:hover span,.terminal.external a[href]:hover span{background-color:#37f!important;background-color:var(--link-color,#37f)!important;color:#000!important;color:var(--background,#000)!important;text-decoration:none}.terminal a[href]{transition-duration:.2s;transition-property:color,background-color;transition-timing-function:ease-out}.cmd .cmd-cursor,.cmd .cmd-cursor-line img,.cmd .cmd-cursor-line>span{display:inline-block}.cmd .cmd-cursor .emoji,.cmd .cmd-cursor.cmd-blink .fa,.cmd .cmd-cursor.cmd-blink .far,.cmd .cmd-cursor.cmd-blink .fas,.cmd .cmd-cursor.cmd-blink a,.cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span{-webkit-animation:terminal-blink 1s linear infinite;-moz-animation:terminal-blink 1s linear infinite;-ms-animation:terminal-blink 1s linear infinite;animation:terminal-blink 1s linear infinite}.bar.cmd .cmd-inverted,.bar.terminal .inverted{box-shadow:-2px 0 0 -1px #aaa;box-shadow:-2px 0 0 -1px var(--original-color,#aaa)}.cmd .cmd-prompt,.terminal,.terminal .terminal-output>div>div{display:block;height:auto}.terminal .terminal-output>div:not(.raw) div{clear:both;white-space:nowrap}.cmd .cmd-prompt:empty,.cmd .cmd-prompt>a,.cmd .cmd-prompt>span{float:left}.cmd-prompt [data-text]>span,.cmd-wrapper>div{white-space:pre}.cmd [data-text] span,.terminal [data-text] span{display:inline-block}.terminal-ouput span[style*=width]{min-height:14px;min-height:calc(var(--size, 1)*(14px/var(--pixel-density, 1)))}.cmd div,.terminal .terminal-output>:not(.raw)>div,.terminal.external div{line-height:1em}.cmd .cmd-prompt span.fa:before,.cmd .cmd-prompt span.fab:before,.cmd .cmd-prompt span.fad:before,.cmd .cmd-prompt span.fal:before,.cmd .cmd-prompt span.far:before,.cmd .cmd-prompt span.fas{position:relative;top:2px}.cmd,.cmd span:not(.fas):not(.far):not(.fa),.terminal,.terminal-font-forcer,.terminal-output>:not(.raw),.terminal-output>:not(.raw) a,.terminal-output>:not(.raw) span:not(.fas):not(.far):not(.fa){font-family:monospace;font-family:var(--font,monospace)}.cmd,.terminal{font-size:12px}.cmd .cmd-line:before,.terminal-output>div:not(.raw) div:before{content:"\0200B";display:inline-block;width:0}.cmd .cmd-line{white-space:nowrap}.cmd span[data-text],.terminal span[data-text]{display:inline-block}.cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji),.terminal,terminal-output>div:not(.raw) div>span:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji){background-color:#000;color:#aaa}.cmd span[data-text] span,.terminal span[data-text] span{text-decoration:inherit}.terminal .ansi>div{line-height:13px!important;line-height:calc(var(--size, 1)*(13px/var(--pixel-density, 1)))!important}.cmd .cmd-prompt span,.cmd span.cmd-prompt{--background:transparent}.cmd .emoji,.terminal-output .emoji{background-repeat:no-repeat;background-size:contain;color:transparent;height:12px;height:calc(12px/var(--pixel-density, 1));position:relative}.cmd .fa span,.cmd .far span,.cmd .fas span,.terminal .terminal-output .fa span,.terminal .terminal-output .far span,.terminal .terminal-output .fas span{clip:rect(1px,1px,1px,1px);background:transparent!important;color:transparent!important;position:absolute}.cmd .emoji,.cmd .emoji span,.terminal-output .emoji,.terminal-output .emoji span{display:inline-block;width:2ch}.cmd,.terminal{box-sizing:border-box}.cmd .cmd-cursor span:not(.token):not(.inverted){background-color:inherit;color:inherit}.cmd .emoji.emoji.emoji.emoji,.cmd .emoji.emoji.emoji.emoji span{background-color:transparent;color:transparent}.cmd .cmd-cursor *{background-color:transparent}.cmd span[style*=width] span,.terminal span[style*=width] span{width:inherit}.cmd div{clear:both}.cmd .cmd-prompt+div{clear:right}terminal .terminal-output>div{margin-top:-1px}.terminal-output>div.raw>div *{word-wrap:break-word;overflow-wrap:break-word}.terminal .terminal-font{float:left;font-size:inherit;left:0;line-height:inherit;margin-bottom:1px;position:absolute;top:-100%}.cmd>span:not(.cmd-prompt){float:left}.cmd .cmd-prompt span.cmd-line{display:block;float:none}.terminal table{border-collapse:collapse}.terminal td{border:1px solid #aaa}.cmd span[data-text]:not(.emoji):not(.fa):not(.fas):not(.far) span{background-color:inherit;color:inherit}.cmd [role=presentation].cmd-cursor-line{cursor:text;position:relative;z-index:100}.cmd .cmd-prompt{position:relative;z-index:200}.cmd [role=presentation]:not(.cmd-cursor-line){overflow:hidden}.cmd{--original-color:var(
++ */.cmd .format,.cmd-prompt,.cmd-prompt div,.terminal .terminal-output .format{display:inline-block}.cmd,.terminal h1,.terminal h2,.terminal h3,.terminal h4,.terminal h5,.terminal h6,.terminal pre{margin:0}.cmd .cmd-clipboard{left:-16px;background:transparent!important;border:none!important;box-shadow:none!important;color:transparent!important;height:16px;height:calc(16px/var(--pixel-density, 1))!important;left:calc(-16px/var(--pixel-density, 1))!important;outline:none!important;overflow:hidden!important;padding:0!important;position:absolute!important;resize:none!important;text-indent:-9999em!important;top:0!important;top:calc(var(--cursor-line, 0)*var(--size, 1)*(14px/var(--pixel-density, 1)))!important;white-space:pre!important;width:16px;width:calc(16px/var(--pixel-density, 1))!important;z-index:1000!important}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;left:0;overflow:hidden;position:absolute;top:0;user-select:none;white-space:nowrap;width:1px}.cmd .cursor+span:empty,.cmd div.cmd-end-line span[data-text]:last-child,.cmd div.cmd-end-line span[data-text]:last-child span,.cmd span.cmd-end-line,.cmd span.cmd-end-line span,.cmd textarea{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.terminal audio,.terminal canvas,.terminal img,.terminal object{cursor:default}.terminal{--base-background:var(--background,#000);--base-color:var(--color);contain:content;line-height:normal;position:relative}.terminal-scroller{scrollbar-gutter:stable;box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:auto;position:relative}terminal.terminal-temp{visibility:hidden}body.terminal{height:100%;min-height:100vh}html{height:100%}body.full-screen-terminal,body.terminal{height:100%;margin:0}body.full-screen-terminal .terminal{height:100%!important}body.full-screen-terminal{height:100%;height:var(--terminal-force-height,100dvh)}.terminal>div.terminal-fill{height:100%;min-height:100%}.terminal>.terminal-pixel{display:inline;height:1px;left:-2px;position:absolute;top:-2px;width:1px}.terminal>.terminal-font .terminal-resizer,.terminal>.terminal-resizer{border:none!important;bottom:0!important;height:100%!important;left:0!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:-1!important}.cmd{padding:0;position:relative;width:100%;z-index:300}.terminal .cmd,.terminal .cmd div{background:transparent!important}.terminal a[tabindex="1000"],.terminal a[tabindex="1000"]:active,.terminal a[tabindex="1000"]:focus{outline:none}.cmd.cmd.cmd .cmd-inverted,.cmd.cmd.cmd .inverted,.terminal .inverted,.terminal .terminal-inverted{background-color:#aaa!important;color:#000!important}.cmd a[href],.terminal .terminal-output>:not(.raw) a[href],.terminal.external a[href]{color:#37f;color:var(--link-color,#37f);cursor:pointer}.cmd a[href]:not(.terminal-inverted),.terminal .terminal-output>:not(.raw) a[href]:not(.terminal-inverted),.terminal.external a[href]:not(.terminal-inverted){--color:var(--link-color,#37f);text-shadow:0 0 calc(var(--glow)*5px) var(--color,#ccc)}.terminal .terminal-output>:not(.raw) a[href].terminal-inverted,.terminal.external a[href].terminal-inverted{background:var(--color,#ccc);text-shadow:0 0 calc(var(--glow)*5px) var(--background,#000)}.cmd a[href]:hover,.terminal .terminal-output>:not(.raw) a[href]:hover,.terminal.external a[href]:hover{background-color:#37f;background-color:var(--link-color,#37f)!important;color:#000;color:var(--base-background,#000)!important;text-decoration:none}.cmd a[href] span,.terminal .terminal-output>:not(.raw) a[href] span,.terminal.external a[href] span{--color:var(--link-color,#37f);color:#37f!important;color:var(--link-color,#37f)!important;text-decoration:underline}.cmd a[href]:hover span,.terminal .terminal-output>:not(.raw) a[href]:hover span,.terminal.external a[href]:hover span{background-color:#37f!important;background-color:var(--link-color,#37f)!important;color:#000!important;color:var(--background,#000)!important;text-decoration:none}.terminal a[href]{transition-duration:.2s;transition-property:color,background-color;transition-timing-function:ease-out}.cmd .cmd-cursor,.cmd .cmd-cursor-line img,.cmd .cmd-cursor-line>span{display:inline-block}.cmd .cmd-cursor .emoji,.cmd .cmd-cursor.cmd-blink .fa,.cmd .cmd-cursor.cmd-blink .far,.cmd .cmd-cursor.cmd-blink .fas,.cmd .cmd-cursor.cmd-blink a,.cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span{-webkit-animation:terminal-blink 1s linear infinite;-moz-animation:terminal-blink 1s linear infinite;-ms-animation:terminal-blink 1s linear infinite;animation:terminal-blink 1s linear infinite}.bar.cmd .cmd-inverted,.bar.terminal .inverted{box-shadow:-2px 0 0 -1px #aaa;box-shadow:-2px 0 0 -1px var(--original-color,#aaa)}.cmd .cmd-prompt,.terminal,.terminal .terminal-output>div>div{display:block;height:auto}.terminal .terminal-output>div:not(.raw) div{clear:both;white-space:nowrap}.cmd .cmd-prompt:empty,.cmd .cmd-prompt>a,.cmd .cmd-prompt>span{float:left}.cmd-prompt [data-text]>span,.cmd-wrapper>div{white-space:pre}.cmd [data-text] span,.terminal [data-text] span{display:inline-block}.terminal-ouput span[style*=width]{min-height:14px;min-height:calc(var(--size, 1)*(14px/var(--pixel-density, 1)))}.cmd div,.terminal .terminal-output>:not(.raw)>div,.terminal.external div{line-height:1em}.cmd .cmd-prompt span.fa:before,.cmd .cmd-prompt span.fab:before,.cmd .cmd-prompt span.fad:before,.cmd .cmd-prompt span.fal:before,.cmd .cmd-prompt span.far:before,.cmd .cmd-prompt span.fas{position:relative;top:2px}.cmd,.cmd span:not(.fas):not(.far):not(.fa),.terminal,.terminal-font-forcer,.terminal-output>:not(.raw),.terminal-output>:not(.raw) a,.terminal-output>:not(.raw) span:not(.fas):not(.far):not(.fa){font-family:monospace;font-family:var(--font,monospace)}.cmd,.terminal{font-size:12px}.cmd .cmd-line:before,.terminal-output>div:not(.raw) div:before{content:"\0200B";display:inline-block;width:0}.cmd .cmd-line{white-space:nowrap}.cmd span[data-text],.terminal span[data-text]{display:inline-block}.cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji),.terminal,terminal-output>div:not(.raw) div>span:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji){background-color:#000;color:#aaa}.cmd span[data-text] span,.terminal span[data-text] span{text-decoration:inherit}.terminal .ansi>div{line-height:13px!important;line-height:calc(var(--size, 1)*(13px/var(--pixel-density, 1)))!important}.cmd .cmd-prompt span,.cmd span.cmd-prompt{--background:transparent}.cmd .emoji,.terminal-output .emoji{background-repeat:no-repeat;background-size:contain;color:transparent;height:12px;height:calc(12px/var(--pixel-density, 1));position:relative}.cmd .fa span,.cmd .far span,.cmd .fas span,.terminal .terminal-output .fa span,.terminal .terminal-output .far span,.terminal .terminal-output .fas span{clip:rect(1px,1px,1px,1px);background:transparent!important;color:transparent!important;position:absolute}.cmd .emoji,.cmd .emoji span,.terminal-output .emoji,.terminal-output .emoji span{display:inline-block;width:2ch}.cmd,.terminal{box-sizing:border-box}.cmd .cmd-cursor span:not(.token):not(.inverted){background-color:inherit;color:inherit}.cmd .emoji.emoji.emoji.emoji,.cmd .emoji.emoji.emoji.emoji span{background-color:transparent;color:transparent}.cmd .cmd-cursor *{background-color:transparent}.cmd span[style*=width] span,.terminal span[style*=width] span{width:inherit}.cmd div{clear:both}.cmd .cmd-prompt+div{clear:right}terminal .terminal-output>div{margin-top:-1px}.terminal-output>div.raw>div *{word-wrap:break-word;overflow-wrap:break-word}.terminal .terminal-font{float:left;font-size:inherit;left:0;line-height:inherit;margin-bottom:1px;position:absolute;top:-100%}.cmd>span:not(.cmd-prompt){float:left}.cmd .cmd-prompt span.cmd-line{display:block;float:none}.terminal table{border-collapse:collapse}.terminal td{border:1px solid #aaa}.cmd span[data-text]:not(.emoji):not(.fa):not(.fas):not(.far) span{background-color:inherit;color:inherit}.cmd [role=presentation].cmd-cursor-line{cursor:text;position:relative;z-index:100}.cmd .cmd-prompt{position:relative;z-index:200}.cmd [role=presentation]:not(.cmd-cursor-line){overflow:hidden}.cmd{--original-color:var(
+     --color,#aaa);--original-background:var(
+     --background)}.cmd a[href]{--original-color:var(--link-color,#37f)}@-webkit-keyframes terminal-blink{0%,50%{background-color:#aaa;background-color:var(--original-color,#aaa);-webkit-box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);color:#000;color:var(--original-background,#000)}50.1%,to{background-color:inherit;color:inherit;color:var(--original-color,#aaa)}}@-moz-keyframes terminal-blink{0%,50%{background-color:#aaa;background-color:var(--original-color,#aaa);-webkit-box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);color:#000;color:var(--original-background,#000)}50.1%,to{background-color:inherit;color:inherit;color:var(--original-color,#aaa)}}@keyframes terminal-blink{0%,50%{background-color:#aaa;background-color:var(--original-color,#aaa);-webkit-box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);color:#000;color:var(--original-background,#000)}50.1%,to{background-color:inherit;-webkit-box-shadow:none;box-shadow:none;color:inherit;color:var(--original-color,#aaa)}}@-webkit-keyframes terminal-glow{0%,50%{background-color:#aaa;background-color:var(--original-color,#aaa);box-shadow:0 0 3px #aaa;-webkit-box-shadow:0 0 3px var(--color,#aaa);box-shadow:0 0 3px var(--color,#aaa);color:#000;color:var(--original-background,#000)}50.1%,to{background-color:inherit;-webkit-box-shadow:none;box-shadow:none;color:inherit}}@-moz-keyframes terminal-glow{0%,50%{background-color:#aaa;background-color:var(--original-color,#aaa);box-shadow:0 0 3px #aaa;-moz-box-shadow:0 0 3px var(--color,#aaa);box-shadow:0 0 3px var(--color,#aaa);color:#000;color:var(--original-background,#000)}50.1%,to{background-color:inherit;-moz-box-shadow:none;box-shadow:none;color:inherit}}@keyframes terminal-glow{0%,50%{background-color:#aaa;background-color:var(--original-color,#aaa);box-shadow:0 0 3px #aaa;box-shadow:0 0 3px var(--color,#aaa);color:#000;color:var(--original-background,#000)}50.1%,to{background-color:inherit;box-shadow:none;color:inherit}}@-webkit-keyframes terminal-bar{0%,50%{box-shadow:-2px 0 0 -1px #aaa;box-shadow:calc(var(--line-thickness, 2)*-1px) 0 0 -1px var(--original-color,#aaa)}50.1%,to{box-shadow:none}}@-moz-keyframes terminal-bar{0%,50%{box-shadow:-2px 0 0 -1px #aaa;box-shadow:calc(var(--line-thickness, 2)*-1px) 0 0 -1px var(--original-color,#aaa)}50.1%,to{box-shadow:none}}@keyframes terminal-bar{0%,50%{box-shadow:-2px 0 0 -1px #aaa;box-shadow:calc(var(--line-thickness, 2)*-1px) 0 0 -1px var(--original-color,#aaa)}50.1%,to{box-shadow:none}}@-webkit-keyframes terminal-underline{0%,50%{box-shadow:0 2px 0 #aaa;box-shadow:0 calc(var(--line-thickness, 2)*1px) 0 var(--original-color,#aaa)}50.1%,to{box-shadow:none}}@-moz-keyframes terminal-underline{0%,50%{box-shadow:0 2px 0 #aaa;box-shadow:0 calc(var(--line-thickness, 2)*1px) 0 var(--original-color,#aaa)}50.1%,to{box-shadow:none}}@keyframes terminal-underline{0%,50%{box-shadow:0 2px 0 #aaa;box-shadow:0 calc(var(--line-thickness, 2)*1px) 0 var(--original-color,#aaa)}50.1%,to{box-shadow:none}}@-webkit-keyframes terminal-none{0%,to{background-color:#aaa;background-color:var(--original-color,#aaa);-webkit-box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);color:#000;color:var(--original-background,#000)}}@-moz-keyframes terminal-none{0%,to{background-color:#aaa;background-color:var(--original-color,#aaa);-webkit-box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);color:#000;color:var(--background,#000)}}@keyframes terminal-none{0%,to{background-color:#aaa;background-color:var(--original-color,#aaa);-webkit-box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);box-shadow:0 0 calc(var(--glow)*3px) var(--color,#aaa);color:#000;color:var(--original-background,#000)}}.underline-animation .cmd .cmd-cursor .emoji,.underline-animation .cmd .cmd-cursor.cmd-blink .fa,.underline-animation .cmd .cmd-cursor.cmd-blink .far,.underline-animation .cmd .cmd-cursor.cmd-blink .fas,.underline-animation .cmd .cmd-cursor.cmd-blink a,.underline-animation .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span{-webkit-animation-name:terminal-underline;-moz-animation-name:terminal-underline;-ms-animation-name:terminal-underline;animation-name:terminal-underline}.glow-animation .cmd .cmd-cursor .emoji,.glow-animation .cmd .cmd-cursor.cmd-blink .fa,.glow-animation .cmd .cmd-cursor.cmd-blink .far,.glow-animation .cmd .cmd-cursor.cmd-blink .fas,.glow-animation .cmd .cmd-cursor.cmd-blink a,.glow-animation .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span{-webkit-animation-name:terminal-glow;-moz-animation-name:terminal-glow;-ms-animation-name:terminal-glow;animation-name:terminal-glow}.bar-animation .cmd .cmd-cursor .emoji,.bar-animation .cmd .cmd-cursor.cmd-blink .fa,.bar-animation .cmd .cmd-cursor.cmd-blink .far,.bar-animation .cmd .cmd-cursor.cmd-blink .fas,.bar-animation .cmd .cmd-cursor.cmd-blink a,.bar-animation .cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span{-webkit-animation-name:terminal-bar;-moz-animation-name:terminal-bar;-ms-animation-name:terminal-bar;animation-name:terminal-bar}@supports (-ms-ime-align:auto){.cmd .cmd-clipboard{margin-left:-9999px}@keyframes terminal-blink{0%,50%{background-color:var(--original-color,#aaa);color:var(--background,#000)}50.1%,to{background-color:var(--background,#000);color:var(--original-color,#aaa)}}@keyframes terminal-bar{0%,50%{border-left-color:var(--color,#aaa)}50.1%,to{border-left-color:var(--background,#000)}}@keyframes terminal-underline{0%,50%{border-bottom-color:var(--color,#aaa);line-height:12px;line-height:calc(var(--size, 1)*(12px/var(--pixel-density, 1)))}50.1%,to{border-bottom-color:var(--background,#000);line-height:12px;line-height:calc(var(--size, 1)*(12px/var(--pixel-density, 1)))}}}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.cmd .cmd-clipboard{margin-left:-9999px}.underline-animation .cursor.blink span span{margin-top:1px}@-ms-keyframes terminal-blink{0%,50%{background-color:#aaa;color:#000}50.1%,to{background-color:#000;color:#aaa}}}.cmd span[data-text]::-moz-selection,.cmd span[data-text]:not(.far):not(.fa):not(.fas) span::-moz-selection,.terminal .terminal-output .raw ::-moz-selection,.terminal .terminal-output .raw div::-moz-selection,.terminal .terminal-output div div a::-moz-selection,.terminal .terminal-output div div::-moz-selection,.terminal .terminal-output span[data-text]::-moz-selection,.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas) span::-moz-selection{background-color:#aaa;color:#000}.terminal .cmd{pointer-events:none}.terminal .cmd-prompt *{pointer-events:visible}.cmd-prompt>span:first-child{margin-left:var(--prompt-offset)}.terminal .cmd textarea,.terminal .cmd-cursor-line>span,.terminal .cmd-wrapper>div:not(.cmd-cursor-line){pointer-events:visible}.cmd span[data-text]:not(.far):not(.fa):not(.fas) span::selection,.terminal .terminal-output .raw ::selection,.terminal .terminal-output .raw div::selection,.terminal .terminal-output div div a::selection,.terminal .terminal-output div div::selection,.terminal .terminal-output span[data-text]::selection,.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas) span::selection,.terminal-revese{background-color:hsla(0,0%,67%,.99);color:#000}.cmd .emoji span::-moz-selection,.cmd .emoji::-moz-selection,.cmd textarea::-moz-selection,.terminal-output .emoji span::-moz-selection,.terminal-output .emoji::-moz-selection{background-color:transparent!important;color:transparent!important}.cmd .emoji span::selection,.cmd .emoji::selection,.cmd textarea::selection,.terminal-output .emoji span::selection,.terminal-output .emoji::selection{background-color:transparent!important;color:transparent!important}.terminal .terminal-output>:not(.raw) .terminal-error,.terminal .terminal-output>:not(.raw) .terminal-error *{color:red;color:var(--error-color,red)}.tilda{left:0;position:fixed;top:0;width:100%;z-index:1100}.ui-dialog-content .terminal{box-sizing:border-box;height:100%;width:100%}.ui-dialog .ui-dialog-content.dterm{padding:0}.clear{clear:both}.terminal .terminal-fill{border:none;box-sizing:border-box;height:100%;left:0;margin:1px 0 0;opacity:.01;pointer-events:none;position:absolute;top:-100%;width:100%}.cmd-editable,.terminal .terminal-fill,.terminal-scroller{padding:calc(1px*var(--padding, 10)/var(--pixel-density, 1))}.cmd-editable{padding-top:0}.terminal-scroller{padding-bottom:0}.terminal .terminal-output>:not(.raw) .terminal-error,.terminal .terminal-output>:not(.raw) .terminal-error *{--color:var(--error-color,red);text-shadow:0 0 calc(var(--glow)*5px) var(--color)}.terminal .terminal-output>:not(.raw) a[href]{text-shadow:0 0 calc(var(--glow)*5px) var(--color)}.terminal .cmd{margin-bottom:calc(1px*var(--padding, 10)/var(--pixel-density, 1));position:relative}.terminal .partial,.terminal .partial>div{display:inline-block}@supports (--css:variables){.cmd,.cmd div,.cmd span[data-text]:not(.cmd-inverted):not(.token):not(.emoji),.terminal,.terminal-output>:not(.raw) a,.terminal-output>:not(.raw) div,.terminal-output>:not(.raw) span[data-text]:not(.token):not(.inverted):not(.terminal-inverted):not(.cmd-inverted):not(.terminal-error):not(.emoji),.terminal.external [data-text]{background-color:var(--background,#000);color:var(--color,#aaa)}.terminal{--terminal-line:calc(var(--size, 1)*(16px/var(--pixel-density, 1)) + 1px/var(--pixel-density, 1));height:auto;height:calc(var(--terminal-line)*var(--rows) + var(--padding, 10)*2px)}.cmd div,.terminal .terminal-output>:not(.raw)>div,.terminal.external div{line-height:var(--terminal-line,1em)}.cmd [data-text],.terminal [data-text]{text-shadow:var(--text-shadow,0 0 calc(var(--glow)*5px) var(--color,#ccc))}.terminal span[style*="--length"]{display:inline-block;width:calc(var(--length, 1)*var(--char-width, 7.23438)*1px)}.cmd,.cmd div,.cmd span,.terminal,.terminal-output>:not(.raw) a,.terminal-output>:not(.raw) div,.terminal-output>:not(.raw) span{font-size:calc(var(--size, 1)*(12px/var(--pixel-density, 1)))}.cmd .emoji,.terminal-output .emoji{height:calc(var(--size, 1)*(12px/var(--pixel-density, 1)))}.cmd .clipboard{top:calc(var(--size, 1)*(14/var(--pixel-density, 1))*var(--cursor-line, 0)*1px)}.cmd span[style*="--background"],.terminal span[style*="--background"]{--base-background:var(--background)}.cmd.cmd.cmd .cmd-inverted,.cmd.cmd.cmd .inverted,.terminal .inverted>span,.terminal .terminal-inverted>span{background-color:var(--color,#aaa)!important;color:var(--base-background,#000)!important}.cmd .cmd-cursor.cmd-blink{background-color:var(--background,#000);color:var(--color,#aaa)}.cmd .cmd-cursor.cmd-blink .emoji,.cmd .cmd-cursor.cmd-blink .fa,.cmd .cmd-cursor.cmd-blink .far,.cmd .cmd-cursor.cmd-blink .fas,.cmd .cmd-cursor.cmd-blink a,.cmd .cmd-cursor.cmd-blink>span[data-text]:not(.emoji):not(.fa):not(.far):not(.fas) span{--original-background:inherit;-webkit-animation:var(--animation,terminal-blink) 1s infinite linear;-moz-animation:var(--animation,terminal-blink) 1s infinite linear;-ms-animation:var(--animation,terminal-blink) 1s infinite linear;animation:var(--animation,terminal-blink) 1s infinite linear}.cmd .cmd-cursor.cmd-blink .emoji span{background:transparent;color:transparent}.cmd span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::-moz-selection,.terminal .terminal-output .raw ::-moz-selection,.terminal .terminal-output .raw div::-moz-selection,.terminal .terminal-output div div a::-moz-selection,.terminal .terminal-output div div::-moz-selection,.terminal .terminal-output span[data-text]::-moz-selection,.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::-moz-selection{background-color:var(--color,#aaa);color:var(--background,#000)}.terminal .terminal-output div div a::-moz-selection{background-color:var(--link-color,rgba(15,96,255,.99))!important;color:var(--background,#000)!important}.terminal .terminal-output div div a:hover::-moz-selection{background-color:var(--link-color,rgba(2,50,144,.99))!important}.cmd span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::selection,.terminal .terminal-output .raw ::selection,.terminal .terminal-output .raw div::selection,.terminal .terminal-output div div a::selection,.terminal .terminal-output div div::selection,.terminal .terminal-output span[data-text]:not(.emoji)::selection,.terminal .terminal-output span[data-text]:not(.far):not(.fa):not(.fas):not(.emoji) span::selection{background-color:var(--color,hsla(0,0%,67%,.99))!important;color:var(--background,#000)!important}.terminal .terminal-output div div a::selection{background-color:var(--link-color,rgba(15,96,255,.99))!important;color:var(--background,#000)!important}.terminal .terminal-output div div a:hover::selection{background-color:var(--link-color,rgba(2,50,144,.99))!important}}@property --color{syntax:"<color>";inherits:true;initial-value:hsla(0,0%,67%,.99)}@property --background{syntax:"<color>";inherits:true;initial-value:#000}@property --link-color{syntax:"<color>";inherits:true;initial-value:#37f}@property --size{syntax:"<number>";inherits:true;initial-value:1}@property --padding{syntax:"<number>";inherits:true;initial-value:10}@property --rows{syntax:"<number>";inherits:true}@supports (-ms-ime-align:auto){.cmd span[data-text]::selection,.terminal .terminal-output div div a::selection,.terminal .terminal-output div div::selection,.terminal h1::selection,.terminal h2::selection,.terminal h3::selection,.terminal h4::selection,.terminal h5::selection,.terminal h6::selection,.terminal pre::selection,.terminal td::selection{background-color:hsla(0,0%,67%,.99);color:#000}}.cmd .style .token.string,.cmd .token.entity,.cmd .token.operator,.cmd .token.string,.cmd .token.token,.cmd .token.url,.cmd .token.variable,.terminal .style .token.string,.terminal .token.entity,.terminal .token.operator,.terminal .token.string,.terminal .token.token,.terminal .token.url,.terminal .token.variable{background-color:inherit}.cmd .cursor-wrapper ul{float:left;left:0;list-style:none;margin:0;padding:0;position:absolute;top:14px}.cmd .cursor-wrapper li{cursor:pointer;white-space:nowrap}.cmd .cursor-wrapper li:hover{background:#aaa;color:#000}.cursor-wrapper{position:relative}.terminal-output img{vertical-align:top}.cmd img{border:1px solid transparent;height:14px;height:calc(var(--size, 1)*(14px/var(--pixel-density, 1)))}.cmd-cursor img{border-color:#ccc;border-color:var(--color,#ccc)}.terminal-output svg.terminal-broken-image{height:calc(var(--size, 1)*(14px/var(--pixel-density, 1)))}.terminal-output svg.terminal-broken-image use{fill:var(--color,#ccc)}.terminal-error{--color:var(--error-color)}.terminal-glow{--animation:terminal-glow}.terminal-glow .cmd-prompt>span,.terminal-glow .terminal-output>div a[href],.terminal-glow .terminal-output>div span,.terminal-glow [data-text] span,.terminal-glow a[data-text],.terminal-glow span[data-text]{text-shadow:1px 1px 5px #ccc;text-shadow:1px 1px 5px var(--color,#ccc)}.terminal-scroll-marker{height:1px;height:calc(1px/var(--pixel-density, 1));margin-top:-1px;margin-top:calc(-1px/var(--pixel-density, 1));position:relative;z-index:100}.terminal-scroll-marker div{bottom:0;left:0;position:absolute;right:0;z-index:200}.terminal-less{overscroll-behavior-y:contain;touch-action:none}.terminal-mobile.terminal-less .terminal-wrapper{pointer-events:none}.cmd-editable,.terminal-mobile.terminal-less .terminal-output a{pointer-events:visible}.cmd-editable:before{content:attr(data-cmd-prompt);display:inline-block}.cmd-editable{background:transparent;bottom:0;color:transparent;left:0;opacity:.01;outline:0 solid transparent;position:absolute;right:0;top:calc(var(--cmd-top)*1px);z-index:500}.terminal-scroller::-webkit-scrollbar{background:var(--background,#000);height:calc(6px/var(--pixel-density, 1));width:calc(6px/var(--pixel-density, 1))}.terminal-scroller::-webkit-scrollbar-thumb,.terminal-scroller::-webkit-scrollbar-thumb:hover{background:var(--color,#aaa)}.terminal-scroller{scrollbar-color:#aaa #000;scrollbar-color:var(--color,#aaa) var(--background,#000);scrollbar-width:thin}.terminal-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.terminal-wrapper{--color:var(--base-color);--background:var(--base-background)}.cmd .token{--original-color:var(--color)}.cmd .terminal-blink,.terminal .terminal-blink{animation:terminal-ansi-blink 1s steps(2,start) infinite;-webkit-animation:terminal-ansi-blink 1s steps(2,start) infinite}.terminal .cmd *,.terminal .terminal-output,.terminal .terminal-output *{--background:transparent}.terminal .cmd ::selection,.terminal .cmd::selection,.terminal .terminal-output ::selection,.terminal .terminal-output::selection{--background:var(--base-background)}@keyframes terminal-ansi-blink{to{color:var(--background)}}@-webkit-keyframes terminal-ansi-blink{to{color:var(--background)}}@media (prefers-reduced-motion){:root{--animation:terminal-none}}
+ /*# sourceMappingURL=jquery.terminal.min.css.map */
+\ No newline at end of file
diff --git a/ui-ngx/pom.xml b/ui-ngx/pom.xml
index 409e4d5674..52d1583357 100644
--- a/ui-ngx/pom.xml
+++ b/ui-ngx/pom.xml
@@ -20,7 +20,7 @@
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.thingsboard</groupId>
-        <version>3.8.0-RC</version>
+        <version>3.9.0-SNAPSHOT</version>
         <artifactId>thingsboard</artifactId>
     </parent>
     <groupId>org.thingsboard</groupId>
@@ -57,7 +57,7 @@
                         </goals>
                         <configuration>
                             <nodeVersion>v20.11.1</nodeVersion>
-                            <yarnVersion>v1.22.17</yarnVersion>
+                            <yarnVersion>v1.22.22</yarnVersion>
                         </configuration>
                     </execution>
                     <execution>
diff --git a/ui-ngx/src/app/core/api/alias-controller.ts b/ui-ngx/src/app/core/api/alias-controller.ts
index 83dd4e102f..e22aeb5248 100644
--- a/ui-ngx/src/app/core/api/alias-controller.ts
+++ b/ui-ngx/src/app/core/api/alias-controller.ts
@@ -61,6 +61,9 @@ export class AliasController implements IAliasController {
   resolvedAliases: { [aliasId: string]: AliasInfo } = {};
   resolvedAliasesObservable: { [aliasId: string]: Observable<AliasInfo> } = {};
 
+  resolvedDevices: { [deviceId: string]: EntityInfo } = {};
+  resolvedDevicesObservable: { [deviceId: string]: Observable<EntityInfo> } = {};
+
   resolvedAliasesToStateEntities: { [aliasId: string]: StateEntityInfo } = {};
 
   constructor(private utils: UtilsService,
@@ -261,9 +264,35 @@ export class AliasController implements IAliasController {
   }
 
   resolveSingleEntityInfoForDeviceId(deviceId: string): Observable<EntityInfo> {
-    const entityFilter = singleEntityFilterFromDeviceId(deviceId);
-    return this.entityService.findSingleEntityInfoByEntityFilter(entityFilter,
-      {ignoreLoading: true, ignoreErrors: true});
+    let entityInfo = this.resolvedDevices[deviceId];
+    if (entityInfo) {
+      return of(entityInfo);
+    } else if (this.resolvedDevicesObservable[deviceId]) {
+      return this.resolvedDevicesObservable[deviceId];
+    } else {
+      const resolvedDeviceSubject = new ReplaySubject<EntityInfo>();
+      this.resolvedDevicesObservable[deviceId] = resolvedDeviceSubject.asObservable();
+      const entityFilter = singleEntityFilterFromDeviceId(deviceId);
+      this.entityService.findSingleEntityInfoByEntityFilter(entityFilter,
+        {ignoreLoading: true, ignoreErrors: true}).subscribe(
+        (resolvedEntityInfo) => {
+          this.resolvedDevices[deviceId] = resolvedEntityInfo;
+          delete this.resolvedDevicesObservable[deviceId];
+          resolvedDeviceSubject.next(resolvedEntityInfo);
+          resolvedDeviceSubject.complete();
+        },
+        () => {
+          resolvedDeviceSubject.error(null);
+          delete this.resolvedDevicesObservable[deviceId];
+        }
+      );
+      entityInfo = this.resolvedDevices[deviceId];
+      if (entityInfo) {
+        return of(entityInfo);
+      } else {
+        return this.resolvedDevicesObservable[deviceId];
+      }
+    }
   }
 
   resolveSingleEntityInfoForTargetDevice(targetDevice: TargetDevice): Observable<EntityInfo> {
diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts
index bca6a05644..82ac4e299c 100644
--- a/ui-ngx/src/app/core/api/widget-api.models.ts
+++ b/ui-ngx/src/app/core/api/widget-api.models.ts
@@ -42,7 +42,6 @@ import { RafService } from '@core/services/raf.service';
 import { EntityAliases } from '@shared/models/alias.models';
 import { EntityInfo } from '@app/shared/models/entity.models';
 import { IDashboardComponent } from '@home/models/dashboard-component.models';
-import moment_ from 'moment';
 import {
   AlarmData,
   AlarmDataPageLink,
diff --git a/ui-ngx/src/app/core/core.module.ts b/ui-ngx/src/app/core/core.module.ts
index 4b3fb44b12..43f3f14df4 100644
--- a/ui-ngx/src/app/core/core.module.ts
+++ b/ui-ngx/src/app/core/core.module.ts
@@ -15,8 +15,8 @@
 ///
 
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { CommonModule, IMAGE_CONFIG } from '@angular/common';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -35,7 +35,6 @@ import { TbMissingTranslationHandler } from './translate/missing-translate-handl
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
 import { HotkeyModule } from 'angular2-hotkeys';
@@ -43,74 +42,71 @@ import { TranslateDefaultParser } from '@core/translate/translate-default-parser
 import { TranslateDefaultLoader } from '@core/translate/translate-default-loader';
 import { EntityConflictInterceptor } from '@core/interceptors/entity-conflict.interceptor';
 
-@NgModule({
-  imports: [
-    CommonModule,
-    HttpClientModule,
-    FlexLayoutModule.withConfig({addFlexToParent: false}),
-    MatDialogModule,
-    MatButtonModule,
-    MatSnackBarModule,
-
-    // ngx-translate
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useClass: TranslateDefaultLoader
-      },
-      missingTranslationHandler: {
-        provide: MissingTranslationHandler,
-        useClass: TbMissingTranslationHandler
-      },
-      compiler: {
-        provide: TranslateCompiler,
-        useClass: TranslateDefaultCompiler
-      },
-      parser: {
-        provide: TranslateParser,
-        useClass: TranslateDefaultParser
-      }
-    }),
-    HotkeyModule.forRoot(),
-
-    // ngrx
-    StoreModule.forRoot(reducers,
-      { metaReducers,
-        runtimeChecks: {
-          strictStateImmutability: true,
-          strictActionImmutability: true,
-          strictStateSerializability: true,
-          strictActionSerializability: true
-        }}
-    ),
-    EffectsModule.forRoot(effects),
-    env.production
-      ? []
-      : StoreDevtoolsModule.instrument({
-        name: env.appTitle
-      })
-  ],
-  providers: [
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: GlobalHttpInterceptor,
-      multi: true
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: EntityConflictInterceptor,
-      multi: true
-    },
-    {
-      provide: MAT_DIALOG_DEFAULT_OPTIONS,
-      useValue: {
-        ...new MatDialogConfig(),
-        restoreFocus: false
-      }
-    },
-    WINDOW_PROVIDERS
-  ],
-  exports: []
-})
+@NgModule({ exports: [], imports: [CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatSnackBarModule,
+        // ngx-translate
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useClass: TranslateDefaultLoader
+            },
+            missingTranslationHandler: {
+                provide: MissingTranslationHandler,
+                useClass: TbMissingTranslationHandler
+            },
+            compiler: {
+                provide: TranslateCompiler,
+                useClass: TranslateDefaultCompiler
+            },
+            parser: {
+                provide: TranslateParser,
+                useClass: TranslateDefaultParser
+            }
+        }),
+        HotkeyModule.forRoot(),
+        // ngrx
+        StoreModule.forRoot(reducers, { metaReducers,
+            runtimeChecks: {
+                strictStateImmutability: true,
+                strictActionImmutability: true,
+                strictStateSerializability: true,
+                strictActionSerializability: true
+            } }),
+        EffectsModule.forRoot(effects),
+        env.production
+            ? []
+            : StoreDevtoolsModule.instrument({
+                name: env.appTitle,
+                connectInZone: true
+            })], providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: GlobalHttpInterceptor,
+            multi: true
+        },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: EntityConflictInterceptor,
+            multi: true
+        },
+        {
+            provide: MAT_DIALOG_DEFAULT_OPTIONS,
+            useValue: {
+                ...new MatDialogConfig(),
+                restoreFocus: false
+            }
+        },
+        WINDOW_PROVIDERS,
+        provideHttpClient(withInterceptorsFromDi()),
+       {
+            provide: IMAGE_CONFIG,
+            useValue: {
+              disableImageSizeWarning: true,
+              disableImageLazyLoadWarning: true
+            }
+       }
+    ] })
 export class CoreModule {
 }
diff --git a/ui-ngx/src/app/core/guards/auth.guard.ts b/ui-ngx/src/app/core/guards/auth.guard.ts
index 7970f21b05..49408975de 100644
--- a/ui-ngx/src/app/core/guards/auth.guard.ts
+++ b/ui-ngx/src/app/core/guards/auth.guard.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgZone } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { AuthService } from '../auth/auth.service';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '../core.state';
@@ -34,7 +34,7 @@ import { MobileService } from '@core/services/mobile.service';
 @Injectable({
   providedIn: 'root'
 })
-export class AuthGuard implements CanActivate, CanActivateChild {
+export class AuthGuard  {
 
   constructor(private store: Store<AppState>,
               private router: Router,
diff --git a/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts b/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts
index e7d2aababc..a9401dfb03 100644
--- a/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts
+++ b/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { UntypedFormGroup } from '@angular/forms';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -39,7 +39,7 @@ export interface HasDirtyFlag {
 @Injectable({
   providedIn: 'root'
 })
-export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm & HasDirtyFlag> {
+export class ConfirmOnExitGuard  {
 
   constructor(private store: Store<AppState>,
               private dialogService: DialogService,
diff --git a/ui-ngx/src/app/core/http/rule-chain.service.ts b/ui-ngx/src/app/core/http/rule-chain.service.ts
index 15cd79c2e3..e3353989cc 100644
--- a/ui-ngx/src/app/core/http/rule-chain.service.ts
+++ b/ui-ngx/src/app/core/http/rule-chain.service.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ComponentFactory, Injectable } from '@angular/core';
+import { Injectable, Type } from '@angular/core';
 import { defaultHttpOptionsFromConfig, RequestConfig } from './http-utils';
 import { forkJoin, Observable, of } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
@@ -31,11 +31,13 @@ import { ComponentDescriptorService } from './component-descriptor.service';
 import {
   IRuleNodeConfigurationComponent,
   LinkLabel,
-  RuleNodeComponentDescriptor, RuleNodeConfiguration, ScriptLanguage,
+  RuleNodeComponentDescriptor,
+  RuleNodeConfiguration,
+  ScriptLanguage,
   TestScriptInputParams,
   TestScriptResult
 } from '@app/shared/models/rule-node.models';
-import { ResourcesService } from '../services/resources.service';
+import { componentTypeBySelector, ResourcesService } from '../services/resources.service';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { deepClone, snakeCase } from '@core/utils';
@@ -50,7 +52,7 @@ export class RuleChainService {
 
   private ruleNodeComponentsMap: Map<RuleChainType, Array<RuleNodeComponentDescriptor>> =
     new Map<RuleChainType, Array<RuleNodeComponentDescriptor>>();
-  private ruleNodeConfigFactories: {[directive: string]: ComponentFactory<IRuleNodeConfigurationComponent>} = {};
+  private ruleNodeConfigComponents: {[directive: string]: Type<IRuleNodeConfigurationComponent>} = {};
 
   constructor(
     private http: HttpClient,
@@ -126,8 +128,8 @@ export class RuleChainService {
     }
   }
 
-  public getRuleNodeConfigFactory(directive: string): ComponentFactory<IRuleNodeConfigurationComponent> {
-    return this.ruleNodeConfigFactories[directive];
+  public getRuleNodeConfigComponent(directive: string): Type<IRuleNodeConfigurationComponent> {
+    return this.ruleNodeConfigComponents[directive];
   }
 
   public getRuleNodeComponentByClazz(ruleChainType: RuleChainType = RuleChainType.CORE, clazz: string): RuleNodeComponentDescriptor {
@@ -219,14 +221,13 @@ export class RuleChainService {
         });
       }
       if (moduleResource) {
-        tasks.push(this.resourcesService.loadFactories(moduleResource, modulesMap).pipe(
+        tasks.push(this.resourcesService.loadModulesWithComponents(moduleResource, modulesMap).pipe(
           map((res) => {
             if (nodeDefinition.configDirective && nodeDefinition.configDirective.length) {
               const selector = snakeCase(nodeDefinition.configDirective, '-');
-              const componentFactory = res.factories.find((factory) =>
-              factory.selector === selector);
-              if (componentFactory) {
-                this.ruleNodeConfigFactories[nodeDefinition.configDirective] = componentFactory;
+              const componentType = componentTypeBySelector(res, selector);
+              if (componentType) {
+                this.ruleNodeConfigComponents[nodeDefinition.configDirective] = componentType;
               } else {
                 component.configurationDescriptor.nodeDefinition.uiResourceLoadError =
                   this.translate.instant('rulenode.directive-is-not-loaded',
diff --git a/ui-ngx/src/app/core/interceptors/entity-conflict.interceptor.ts b/ui-ngx/src/app/core/interceptors/entity-conflict.interceptor.ts
index e4db59ec66..6575ba4f65 100644
--- a/ui-ngx/src/app/core/interceptors/entity-conflict.interceptor.ts
+++ b/ui-ngx/src/app/core/interceptors/entity-conflict.interceptor.ts
@@ -15,15 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import {
-  HttpErrorResponse,
-  HttpEvent,
-  HttpHandler,
-  HttpInterceptor,
-  HttpParams,
-  HttpRequest,
-  HttpStatusCode
-} from '@angular/common/http';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpParams, HttpRequest, HttpStatusCode } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { catchError, switchMap } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index 9f1c94a83e..235924f98f 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -636,7 +636,7 @@ export class DashboardUtilsService {
                            targetLayout: DashboardLayoutId,
                            widget: Widget,
                            originalColumns?: number,
-                           originalSize?: {sizeX: number; sizeY: number},
+                           originalSize?: WidgetSize,
                            row?: number,
                            column?: number,
                            breakpoint = 'default'): void {
@@ -661,8 +661,8 @@ export class DashboardUtilsService {
       mobileHeight: widget.config.mobileHeight,
       mobileHide: widget.config.mobileHide,
       desktopHide: widget.config.desktopHide,
-      preserveAspectRatio: widget.config.preserveAspectRatio,
-      resizable: widget.config.resizable
+      preserveAspectRatio: originalSize ? originalSize.preserveAspectRatio : widget.config.preserveAspectRatio,
+      resizable: originalSize ? originalSize.resizable : widget.config.resizable
     };
     if (isUndefined(originalColumns)) {
       originalColumns = 24;
@@ -749,12 +749,57 @@ export class DashboardUtilsService {
         widget.sizeY = 1;
       }
     }
+    const widgets: WidgetLayout[] = [];
     for (const w of Object.keys(layout.widgets)) {
       const widget = layout.widgets[w];
       widget.row = Math.round(widget.row * ratio);
       widget.col = Math.round(widget.col * ratio);
-      widget.sizeX = Math.round(widget.sizeX * ratio);
-      widget.sizeY = Math.round(widget.sizeY * ratio);
+      widget.sizeX = Math.max(1, Math.round(widget.sizeX * ratio));
+      widget.sizeY = Math.max(1, Math.round(widget.sizeY * ratio));
+      widgets.push(widget);
+    }
+    widgets.sort((w1, w2) => {
+      let res = w1.col - w2.col;
+      if (res === 0) {
+        res = w1.row - w2.row;
+      }
+      return res;
+    });
+    for (const widget of widgets) {
+      for (const widget2 of widgets) {
+        if (widget !== widget2) {
+          const left = widget.col;
+          const right = widget.col + widget.sizeX;
+          const top = widget.row;
+          const bottom = widget.row + widget.sizeY;
+          const left2 = widget2.col;
+          const right2 = widget2.col + widget2.sizeX;
+          const top2 = widget2.row;
+          const bottom2 = widget2.row + widget2.sizeY;
+          if (left < right2 && right > left2 &&
+            top < bottom2 && bottom > top2 ) {
+            let horizontalOverlapFixed = false;
+            if (right - left2 === 1) {
+              if (widget.sizeX > 1) {
+                widget.sizeX--;
+                horizontalOverlapFixed = true;
+              } else if (widget2.sizeX > 1) {
+                widget2.col++;
+                widget2.sizeX--;
+                horizontalOverlapFixed = true;
+              }
+            }
+            if (!horizontalOverlapFixed && (bottom - top2) === 1) {
+              if (widget.sizeY > 1) {
+                widget.sizeY--;
+              } else if (widget2.sizeY > 1) {
+                widget2.row++;
+                widget2.sizeY--;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -1020,7 +1065,9 @@ export class DashboardUtilsService {
     const widgetLayout = layout.widgets[widget.id];
     return {
       sizeX: widgetLayout.sizeX,
-      sizeY: widgetLayout.sizeY
+      sizeY: widgetLayout.sizeY,
+      preserveAspectRatio: widgetLayout.preserveAspectRatio,
+      resizable: widgetLayout.resizable
     };
   }
 
diff --git a/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts b/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
index 1c7150bac3..cbf56dc44d 100644
--- a/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
+++ b/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
@@ -15,9 +15,11 @@
 ///
 
 import { Component, Injectable, Type, ɵComponentDef, ɵNG_COMP_DEF } from '@angular/core';
-import { from, Observable, of } from 'rxjs';
+import { forkJoin, from, Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { mergeMap } from 'rxjs/operators';
+import { guid } from '@core/utils';
+import { getFlexLayoutModule } from '@shared/legacy/flex-layout.models';
 
 @Injectable({
     providedIn: 'root'
@@ -30,14 +32,14 @@ export class DynamicComponentFactoryService {
   public createDynamicComponent<T>(
                      componentType: Type<T>,
                      template: string,
-                     modules?: Type<any>[],
+                     imports?: Type<any>[],
                      preserveWhitespaces?: boolean,
                      styles?: string[]): Observable<Type<T>> {
-    return from(import('@angular/compiler')).pipe(
-      mergeMap(() => {
-        let componentImports: Type<any>[] = [CommonModule];
-        if (modules) {
-          componentImports = [...componentImports, ...modules];
+    return forkJoin({flexLayoutModule: getFlexLayoutModule(), compiler: from(import('@angular/compiler'))}).pipe(
+      mergeMap((data) => {
+        let componentImports: Type<any>[] = [CommonModule, data.flexLayoutModule];
+        if (imports) {
+          componentImports = [...componentImports, ...imports];
         }
         const comp = this.createAndCompileDynamicComponent(componentType, template, componentImports, preserveWhitespaces, styles);
         return of(comp.type);
@@ -60,7 +62,8 @@ export class DynamicComponentFactoryService {
       imports,
       preserveWhitespaces,
       styles,
-      standalone: true
+      standalone: true,
+      selector: 'tb-dynamic-component#' + guid()
     })(componentType);
     // Trigger component compilation
     return comp[ɵNG_COMP_DEF];
diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts
index ee4c36b6f2..917d4e28bf 100644
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/ui-ngx/src/app/core/services/menu.models.ts
@@ -88,6 +88,7 @@ export enum MenuId {
   devices = 'devices',
   assets = 'assets',
   entity_views = 'entity_views',
+  gateways = 'gateways',
   profiles = 'profiles',
   device_profiles = 'device_profiles',
   asset_profiles = 'asset_profiles',
@@ -508,6 +509,16 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       icon: 'view_quilt'
     }
   ],
+  [
+    MenuId.gateways,
+    {
+      id: MenuId.gateways,
+      name: 'gateway.gateways',
+      type: 'link',
+      path: '/entities/gateways',
+      icon: 'tb_gateway'
+    }
+  ],
   [
     MenuId.profiles,
     {
@@ -725,7 +736,8 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
         pages: [
           {id: MenuId.devices},
           {id: MenuId.assets},
-          {id: MenuId.entity_views}
+          {id: MenuId.entity_views},
+          {id: MenuId.gateways}
         ]
       },
       {
diff --git a/ui-ngx/src/app/core/services/resources.service.ts b/ui-ngx/src/app/core/services/resources.service.ts
index 013c3e5d72..21bd11293e 100644
--- a/ui-ngx/src/app/core/services/resources.service.ts
+++ b/ui-ngx/src/app/core/services/resources.service.ts
@@ -15,16 +15,19 @@
 ///
 
 import {
-  Compiler,
-  ComponentFactory,
+  createNgModule,
   Inject,
   Injectable,
   Injector,
-  ModuleWithComponentFactories,
-  Type, ɵNG_MOD_DEF
+  Type,
+  ɵComponentDef,
+  ɵCssSelectorList,
+  ɵNG_COMP_DEF,
+  ɵNG_MOD_DEF,
+  ɵNgModuleDef
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { forkJoin, Observable, ReplaySubject, throwError } from 'rxjs';
+import { forkJoin, from, Observable, ReplaySubject, throwError } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { IModulesMap } from '@modules/common/modules-map.models';
 import { TbResourceId } from '@shared/models/id/tb-resource-id';
@@ -35,14 +38,58 @@ import { selectIsAuthenticated } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { map, tap } from 'rxjs/operators';
 import { RequestConfig } from '@core/http/http-utils';
+import { getFlexLayoutModule } from '@app/shared/legacy/flex-layout.models';
 
-declare const System;
+export interface ModuleInfo {
+  module: ɵNgModuleDef<any>;
+  components: ɵComponentDef<any>[];
+}
+
+export interface ModulesWithComponents {
+  modules: ModuleInfo[];
+  standaloneComponents: ɵComponentDef<any>[];
+}
 
-export interface ModulesWithFactories {
-  modules: Type<any>[];
-  factories: ComponentFactory<any>[];
+export const flatModulesWithComponents = (modulesWithComponentsList: ModulesWithComponents[]): ModulesWithComponents => {
+  const modulesWithComponents: ModulesWithComponents = {
+    modules: [],
+    standaloneComponents: []
+  };
+  for (const m of modulesWithComponentsList) {
+    for (const module of m.modules) {
+      if (!modulesWithComponents.modules.some(m1 => m1.module === module.module)) {
+        modulesWithComponents.modules.push(module);
+      }
+    }
+    for (const comp of m.standaloneComponents) {
+      if (!modulesWithComponents.standaloneComponents.includes(comp)) {
+        modulesWithComponents.standaloneComponents.push(comp);
+      }
+    }
+  }
+  return modulesWithComponents;
 }
 
+export const modulesWithComponentsToTypes = (modulesWithComponents: ModulesWithComponents): Type<any>[] =>
+  [...modulesWithComponents.modules.map(m => m.module.type),
+    ...modulesWithComponents.standaloneComponents.map(c => c.type)];
+
+export const componentTypeBySelector = (modulesWithComponents: ModulesWithComponents, selector: string): Type<any> | undefined => {
+  let found = modulesWithComponents.standaloneComponents.find(c => matchesSelector(c.selectors, selector));
+  if (!found) {
+    for (const m of modulesWithComponents.modules) {
+      found = m.components.find(c => matchesSelector(c.selectors, selector));
+      if (found) {
+        break;
+      }
+    }
+  }
+  return found?.type;
+}
+
+const matchesSelector = (selectors: ɵCssSelectorList, selector: string) =>
+  selectors.some(s => s.some(s1 => typeof s1 === 'string' && s1 === selector));
+
 @Injectable({
   providedIn: 'root'
 })
@@ -50,16 +97,15 @@ export class ResourcesService {
 
   private loadedJsonResources: { [url: string]: ReplaySubject<any> } = {};
   private loadedResources: { [url: string]: ReplaySubject<void> } = {};
-  private loadedModulesAndFactories: { [url: string]: ReplaySubject<ModulesWithFactories> } = {};
+  private loadedModulesWithComponents: { [url: string]: ReplaySubject<ModulesWithComponents> } = {};
 
   private anchor = this.document.getElementsByTagName('head')[0] || this.document.getElementsByTagName('body')[0];
 
-  constructor(@Inject(DOCUMENT) private readonly document: any,
+  constructor(@Inject(DOCUMENT) private readonly document: Document,
               protected store: Store<AppState>,
-              private compiler: Compiler,
               private http: HttpClient,
               private injector: Injector) {
-    this.store.pipe(select(selectIsAuthenticated)).subscribe(() => this.clearModulesCache());
+    this.store.pipe(select(selectIsAuthenticated)).subscribe(() => this.clearModulesWithComponentsCache());
   }
 
   public loadJsonResource<T>(url: string, postProcess?: (data: T) => T): Observable<T> {
@@ -93,7 +139,7 @@ export class ResourcesService {
       return this.loadedResources[url].asObservable();
     }
 
-    let fileType;
+    let fileType: string;
     const match = /[./](css|less|html|htm|js)?(([?#]).*)?$/.exec(url);
     if (match !== null) {
       fileType = match[1];
@@ -137,53 +183,58 @@ export class ResourcesService {
     );
   }
 
-  public loadFactories(resourceId: string | TbResourceId, modulesMap: IModulesMap): Observable<ModulesWithFactories> {
+  public loadModulesWithComponents(resourceId: string | TbResourceId, modulesMap: IModulesMap): Observable<ModulesWithComponents> {
     const url = this.getDownloadUrl(resourceId);
-    if (this.loadedModulesAndFactories[url]) {
-      return this.loadedModulesAndFactories[url].asObservable();
+    if (this.loadedModulesWithComponents[url]) {
+      return this.loadedModulesWithComponents[url].asObservable();
     }
-    modulesMap.init();
     const meta = this.getMetaInfo(resourceId);
-    const subject = new ReplaySubject<ModulesWithFactories>();
-    this.loadedModulesAndFactories[url] = subject;
-    import('@angular/compiler').then(
+    const subject = new ReplaySubject<ModulesWithComponents>();
+    this.loadedModulesWithComponents[url] = subject;
+
+    forkJoin(
+      [
+        modulesMap.init(),
+        from(import('@angular/compiler'))
+      ]
+    ).subscribe(
       () => {
+        // @ts-ignore
         System.import(url, undefined, meta).then(
-          (module) => {
-            const modules = this.extractNgModules(module);
-            if (modules.length) {
-              const tasks: Promise<ModuleWithComponentFactories<any>>[] = [];
-              for (const m of modules) {
-                tasks.push(this.compiler.compileModuleAndAllComponentsAsync(m));
-              }
-              forkJoin(tasks).subscribe({
-                next: (compiled) => {
-                  try {
-                    const componentFactories: ComponentFactory<any>[] = [];
-                    for (const c of compiled) {
-                      c.ngModuleFactory.create(this.injector);
-                      componentFactories.push(...c.componentFactories);
+          (module: any) => {
+            try {
+              const modulesWithComponents = this.extractModulesWithComponents(module);
+              this.patchModulesWithFlexLayout(modulesWithComponents).subscribe(
+                {
+                  next: modules => {
+                    if (modules.modules.length || modules.standaloneComponents.length) {
+                      try {
+                        for (const module of modules.modules) {
+                          createNgModule(module.module.type, this.injector);
+                        }
+                        this.loadedModulesWithComponents[url].next(modulesWithComponents);
+                        this.loadedModulesWithComponents[url].complete();
+                      } catch (e) {
+                        console.log(`Unable to parse module from url: ${url}`, e);
+                        this.loadedModulesWithComponents[url].error(new Error(`Unable to parse module from url: ${url}`));
+                      }
+                    } else {
+                      this.loadedModulesWithComponents[url].error(new Error(`Module '${url}' doesn't have exported modules or components!`));
                     }
-                    const modulesWithFactories: ModulesWithFactories = {
-                      modules,
-                      factories: componentFactories
-                    };
-                    this.loadedModulesAndFactories[url].next(modulesWithFactories);
-                    this.loadedModulesAndFactories[url].complete();
-                  } catch (e) {
-                    this.loadedModulesAndFactories[url].error(new Error(`Unable to init module from url: ${url}`));
+                  },
+                  error: err => {
+                    console.log(`Unable to patch module with flexLayout, module url: ${url}`, err);
+                    this.loadedModulesWithComponents[url].error(new Error(`Unable to patch module with flexLayout, module url: ${url}`));
                   }
-                },
-                error: (e) => {
-                  this.loadedModulesAndFactories[url].error(new Error(`Unable to compile module from url: ${url}`));
                 }
-              });
-            } else {
-              this.loadedModulesAndFactories[url].error(new Error(`Module '${url}' doesn't have default export!`));
+              );
+            } catch (e) {
+              console.log(`Unable to parse module from url: ${url}`, e);
+              this.loadedModulesWithComponents[url].error(new Error(`Unable to parse module from url: ${url}`));
             }
           },
-          (e) => {
-            this.loadedModulesAndFactories[url].error(new Error(`Unable to load module from url: ${url}`));
+          () => {
+            this.loadedModulesWithComponents[url].error(new Error(`Unable to load module from url: ${url}`));
           }
         );
       }
@@ -192,7 +243,7 @@ export class ResourcesService {
       tap({
         next: () => System.delete(url),
         error: () => {
-          delete this.loadedModulesAndFactories[url];
+          delete this.loadedModulesWithComponents[url];
           System.delete(url);
         },
         complete: () => System.delete(url)
@@ -200,41 +251,98 @@ export class ResourcesService {
     );
   }
 
-  private extractNgModules(module: any, modules: Type<any>[] = []): Type<any>[] {
-    try {
-      let potentialModules = [module];
-      let currentScanDepth = 0;
 
-      while (potentialModules.length && currentScanDepth < 10) {
-        const newPotentialModules = [];
-        for (const potentialModule of potentialModules) {
-          if (potentialModule && (ɵNG_MOD_DEF in potentialModule)) {
-            modules.push(potentialModule);
-          } else {
-            for (const k of Object.keys(potentialModule)) {
-              if (!this.isPrimitive(potentialModule[k])) {
-                newPotentialModules.push(potentialModule[k]);
-              }
+  private extractModulesWithComponents(module: any,
+                                       modulesWithComponents: ModulesWithComponents = {
+                                         modules: [],
+                                         standaloneComponents: []
+                                       },
+                                       visitedModules: Set<any> = new Set<any>()): ModulesWithComponents {
+    if (module && ['object', 'function'].includes(typeof module) && !visitedModules.has(module)) {
+      visitedModules.add(module);
+      if (ɵNG_MOD_DEF in module) {
+        const moduleDef: ɵNgModuleDef<any> = module[ɵNG_MOD_DEF];
+        const moduleInfo: ModuleInfo = {
+          module: moduleDef,
+          components: []
+        }
+        modulesWithComponents.modules.push(moduleInfo);
+        const exportsDecl = moduleDef.exports;
+        let exports: Type<any>[];
+        if (Array.isArray(exportsDecl)) {
+          exports = exportsDecl;
+        } else {
+          exports = exportsDecl();
+        }
+        for (const element of exports) {
+          if (ɵNG_COMP_DEF in element) {
+            const component: ɵComponentDef<any> = element[ɵNG_COMP_DEF];
+            if (!component.standalone) {
+              moduleInfo.components.push(component);
+            } else {
+              modulesWithComponents.standaloneComponents.push(component);
             }
+          } else {
+            this.extractModulesWithComponents(module, modulesWithComponents, visitedModules);
+          }
+        }
+      } else if (ɵNG_COMP_DEF in module) {
+        const component: ɵComponentDef<any> = module[ɵNG_COMP_DEF];
+        if (component.standalone) {
+          if (!modulesWithComponents.standaloneComponents.includes(component)) {
+            modulesWithComponents.standaloneComponents.push(component);
+          }
+        }
+      } else {
+        for (const k of Object.keys(module)) {
+          const val = module[k];
+          if (val && ['object', 'function'].includes(typeof val)) {
+            this.extractModulesWithComponents(val, modulesWithComponents, visitedModules);
           }
         }
-        potentialModules = newPotentialModules;
-        currentScanDepth++;
       }
-    } catch (e) {
-      console.log('Could not load NgModule', e);
     }
-    return modules;
+    return modulesWithComponents;
   }
 
-  private isPrimitive(test) {
-    return test !== Object(test);
+  private patchModulesWithFlexLayout(modulesWithComponents: ModulesWithComponents): Observable<ModulesWithComponents> {
+    return getFlexLayoutModule().pipe(
+      map((flexLayoutModule) => {
+        modulesWithComponents.modules.forEach(m => {
+          if (Array.isArray(m.module.imports)) {
+            if (!m.module.imports.includes(flexLayoutModule)) {
+              m.module.imports.push(flexLayoutModule);
+            }
+          } else {
+            const imports = m.module.imports();
+            if (!imports.includes(flexLayoutModule)) {
+              imports.push(flexLayoutModule);
+              m.module.imports = imports;
+            }
+          }
+        });
+        modulesWithComponents.standaloneComponents.forEach(c => {
+          if (Array.isArray(c.dependencies)) {
+            if (!c.dependencies.includes(flexLayoutModule)) {
+              c.dependencies.push(flexLayoutModule);
+            }
+          } else {
+            const dependencies = c.dependencies();
+            if (!dependencies.includes(flexLayoutModule)) {
+              dependencies.push(flexLayoutModule);
+              c.dependencies = dependencies;
+            }
+          }
+        });
+        return modulesWithComponents;
+      })
+    );
   }
 
   private loadResourceByType(type: 'css' | 'js', url: string): Observable<any> {
     const subject = new ReplaySubject<void>();
     this.loadedResources[url] = subject;
-    let el;
+    let el: any;
     let loaded = false;
     switch (type) {
       case 'js':
@@ -250,7 +358,7 @@ export class ResourcesService {
         el.href = url;
         break;
     }
-    el.onload = el.onreadystatechange = (e) => {
+    el.onload = el.onreadystatechange = () => {
       if (el.readyState && !/^c|loade/.test(el.readyState) || loaded) { return; }
       el.onload = el.onreadystatechange = null;
       loaded = true;
@@ -282,7 +390,7 @@ export class ResourcesService {
     }
   }
 
-  private clearModulesCache() {
-    this.loadedModulesAndFactories = {};
+  private clearModulesWithComponentsCache() {
+    this.loadedModulesWithComponents = {};
   }
 }
diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts
index 4e78336b32..f2f2ba39e8 100644
--- a/ui-ngx/src/app/core/services/utils.service.ts
+++ b/ui-ngx/src/app/core/services/utils.service.ts
@@ -40,24 +40,15 @@ import { WindowMessage } from '@shared/models/window-message.model';
 import { TranslateService } from '@ngx-translate/core';
 import { customTranslationsPrefix, i18nPrefix } from '@app/shared/models/constants';
 import { DataKey, Datasource, DatasourceType, KeyInfo } from '@shared/models/widget.models';
-import { DataKeyType } from '@app/shared/models/telemetry/telemetry.models';
-import {
-  alarmFields,
-  alarmSeverityTranslations,
-  alarmStatusTranslations
-} from '@shared/models/alarm.models';
+import { DataKeyType, SharedTelemetrySubscriber } from '@app/shared/models/telemetry/telemetry.models';
+import { alarmFields, alarmSeverityTranslations, alarmStatusTranslations } from '@shared/models/alarm.models';
 import { materialColors } from '@app/shared/models/material.models';
 import { WidgetInfo } from '@home/models/widget-component.models';
 import jsonSchemaDefaults from 'json-schema-defaults';
 import { Observable } from 'rxjs';
 import { publishReplay, refCount } from 'rxjs/operators';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
-import {
-  AttributeData,
-  LatestTelemetry,
-  TelemetrySubscriber,
-  TelemetryType
-} from '@shared/models/telemetry/telemetry.models';
+import { AttributeData, LatestTelemetry, TelemetryType } from '@shared/models/telemetry/telemetry.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { DatePipe, DOCUMENT } from '@angular/common';
 import { entityTypeTranslations } from '@shared/models/entity-type.models';
@@ -483,13 +474,13 @@ export class UtilsService {
     if (!entityId && ctx.datasources.length > 0) {
       entityId = this.getEntityIdFromDatasource(ctx.datasources[0]);
     }
-    const subscription = TelemetrySubscriber.createEntityAttributesSubscription(ctx.telemetryWsService, entityId, type, ctx.ngZone, keys);
+    const subscription = SharedTelemetrySubscriber.createEntityAttributesSubscription(ctx.telemetryWsService, entityId, type, ctx.ngZone, keys);
     if (!ctx.telemetrySubscribers) {
       ctx.telemetrySubscribers = [];
     }
     ctx.telemetrySubscribers.push(subscription);
     subscription.subscribe();
-    return subscription.attributeData$().pipe(
+    return subscription.attributeData$.pipe(
       publishReplay(1),
       refCount()
     );
diff --git a/ui-ngx/src/app/core/settings/settings.utils.ts b/ui-ngx/src/app/core/settings/settings.utils.ts
index 3730878237..8f0a261d08 100644
--- a/ui-ngx/src/app/core/settings/settings.utils.ts
+++ b/ui-ngx/src/app/core/settings/settings.utils.ts
@@ -16,11 +16,14 @@
 
 import { environment as env } from '@env/environment';
 import { TranslateService } from '@ngx-translate/core';
-import * as _moment from 'moment';
+import _moment from 'moment';
 import { Observable } from 'rxjs';
 
 export function updateUserLang(translate: TranslateService, userLang: string, translations = env.supportedLangs): Observable<any> {
   let targetLang = userLang;
+  if (!translations) {
+    translations = env.supportedLangs;
+  }
   if (!env.production) {
     console.log(`User lang: ${targetLang}`);
   }
diff --git a/ui-ngx/src/app/core/translate/translate-default-compiler.ts b/ui-ngx/src/app/core/translate/translate-default-compiler.ts
index bd2954e422..58d4503b23 100644
--- a/ui-ngx/src/app/core/translate/translate-default-compiler.ts
+++ b/ui-ngx/src/app/core/translate/translate-default-compiler.ts
@@ -33,7 +33,7 @@ export class TranslateDefaultCompiler extends TranslateMessageFormatCompiler {
     super(config);
   }
 
-  public compile(value: string, lang: string): (params: any) => string {
+  public compile(value: string, lang: string): any {
     return this.defaultCompile(value, lang);
   }
 
diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts
index 2ab104f8f4..43030a19f6 100644
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@@ -894,3 +894,11 @@ export const camelCase = (str: string): string => {
 export const convertKeysToCamelCase = (obj: Record<string, any>): Record<string, any> => {
   return _.mapKeys(obj, (value, key) => _.camelCase(key));
 };
+
+export const unwrapModule = (module: any) : any => {
+  if ('default' in module && Object.keys(module).length === 1) {
+    return module.default;
+  } else {
+    return module;
+  }
+};
diff --git a/ui-ngx/src/app/modules/common/modules-map.models.ts b/ui-ngx/src/app/modules/common/modules-map.models.ts
index e1c88e557a..8913996851 100644
--- a/ui-ngx/src/app/modules/common/modules-map.models.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.models.ts
@@ -14,6 +14,8 @@
 /// limitations under the License.
 ///
 
+import { Observable } from 'rxjs';
+
 export interface IModulesMap {
-  init(): void;
+  init(): Observable<any>;
 }
diff --git a/ui-ngx/src/app/modules/common/modules-map.ts b/ui-ngx/src/app/modules/common/modules-map.ts
index 512719c513..52995f3f9a 100644
--- a/ui-ngx/src/app/modules/common/modules-map.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.ts
@@ -20,10 +20,6 @@ import * as AngularAnimations from '@angular/animations';
 import * as AngularCore from '@angular/core';
 import * as AngularCommon from '@angular/common';
 import * as AngularForms from '@angular/forms';
-import * as AngularFlexLayout from '@angular/flex-layout';
-import * as AngularFlexLayoutFlex from '@angular/flex-layout/flex';
-import * as AngularFlexLayoutGrid from '@angular/flex-layout/grid';
-import * as AngularFlexLayoutExtended from '@angular/flex-layout/extended';
 import * as AngularPlatformBrowser from '@angular/platform-browser';
 import * as AngularPlatformBrowserAnimations from '@angular/platform-browser/animations';
 import * as AngularRouter from '@angular/router';
@@ -78,7 +74,7 @@ import * as RxJs from 'rxjs';
 import * as RxJsOperators from 'rxjs/operators';
 import * as TranslateCore from '@ngx-translate/core';
 import * as MatDateTimePicker from '@mat-datetimepicker/core';
-import * as _moment from 'moment';
+import _moment from 'moment';
 import * as tslib from 'tslib';
 
 import * as TbCore from '@core/public-api';
@@ -104,7 +100,6 @@ import * as TruncateWithTooltipDirective from '@shared/directives/truncate-with-
 
 import * as coercion from '@shared/decorators/coercion';
 import * as enumerable from '@shared/decorators/enumerable';
-import * as TbInject from '@shared/decorators/tb-inject';
 
 import * as FooterComponent from '@shared/components/footer.component';
 import * as LogoComponent from '@shared/components/logo.component';
@@ -196,6 +191,8 @@ import * as HintTooltipIconComponent from '@shared/components/hint-tooltip-icon.
 import * as ScrollGridComponent from '@shared/components/grid/scroll-grid.component';
 import * as GalleryImageInputComponent from '@shared/components/image/gallery-image-input.component';
 import * as MultipleGalleryImageInputComponent from '@shared/components/image/multiple-gallery-image-input.component';
+import * as TbPopoverService from '@shared/components/popover.service';
+
 
 import * as CssUnitSelectComponent from '@home/components/widget/lib/settings/common/css-unit-select.component';
 import * as WidgetActionsPanelComponent from '@home/components/widget/config/basic/common/widget-actions-panel.component';
@@ -247,6 +244,7 @@ import * as CustomActionPrettyEditorComponent from '@home/components/widget/lib/
 import * as MobileActionEditorComponent from '@home/components/widget/lib/settings/common/action/mobile-action-editor.component';
 import * as CustomDialogService from '@home/components/widget/dialog/custom-dialog.service';
 import * as CustomDialogContainerComponent from '@home/components/widget/dialog/custom-dialog-container.component';
+import * as ImportExportService from '@shared/import-export/import-export.service';
 import * as ImportDialogComponent from '@shared/import-export/import-dialog.component';
 import * as AddWidgetToDashboardDialogComponent from '@home/components/attribute/add-widget-to-dashboard-dialog.component';
 import * as ImportDialogCsvComponent from '@shared/import-export/import-dialog-csv.component';
@@ -338,8 +336,8 @@ import { IModulesMap } from '@modules/common/modules-map.models';
 import { TimezoneComponent } from '@shared/components/time/timezone.component';
 import { TimezonePanelComponent } from '@shared/components/time/timezone-panel.component';
 import { DatapointsLimitComponent } from '@shared/components/time/datapoints-limit.component';
-
-declare const System;
+import { Observable, map, of } from 'rxjs';
+import { getFlexLayout } from '@shared/legacy/flex-layout.models';
 
 class ModulesMap implements IModulesMap {
 
@@ -351,10 +349,10 @@ class ModulesMap implements IModulesMap {
     '@angular/common': AngularCommon,
     '@angular/common/http': HttpClientModule,
     '@angular/forms': AngularForms,
-    '@angular/flex-layout': AngularFlexLayout,
-    '@angular/flex-layout/flex': AngularFlexLayoutFlex,
-    '@angular/flex-layout/grid': AngularFlexLayoutGrid,
-    '@angular/flex-layout/extended': AngularFlexLayoutExtended,
+    '@angular/flex-layout': {},
+    '@angular/flex-layout/flex': {},
+    '@angular/flex-layout/grid': {},
+    '@angular/flex-layout/extended': {},
     '@angular/platform-browser': AngularPlatformBrowser,
     '@angular/platform-browser/animations': AngularPlatformBrowserAnimations,
     '@angular/router': AngularRouter,
@@ -433,8 +431,8 @@ class ModulesMap implements IModulesMap {
 
     '@shared/decorators/coercion': coercion,
     '@shared/decorators/enumerable': enumerable,
-    '@shared/decorators/tb-inject': TbInject,
 
+    '@shared/import-export/import-export.service': ImportExportService,
     '@shared/import-export/import-dialog.component': ImportDialogComponent,
     '@shared/import-export/import-dialog-csv.component': ImportDialogCsvComponent,
     '@shared/import-export/table-columns-assignment.component': TableColumnsAssignmentComponent,
@@ -533,6 +531,8 @@ class ModulesMap implements IModulesMap {
     '@shared/components/grid/scroll-grid.component': ScrollGridComponent,
     '@shared/components/image/gallery-image-input.component': GalleryImageInputComponent,
     '@shared/components/image/multiple-gallery-image-input.component': MultipleGalleryImageInputComponent,
+    '@shared/components/popover.service': TbPopoverService,
+
 
     '@home/components/alarm/alarm-filter-config.component': AlarmFilterConfigComponent,
     '@home/components/alarm/alarm-comment-dialog.component': AlarmCommentDialogComponent,
@@ -671,30 +671,40 @@ class ModulesMap implements IModulesMap {
     '@home/components/queue/queue-form.component': QueueFormComponent
   };
 
-  init() {
+  init(): Observable<any> {
     if (!this.initialized) {
-      System.constructor.prototype.resolve = (id) => {
-        try {
-          if (this.modulesMap[id]) {
-            return 'app:' + id;
-          } else {
-            return id;
+      return getFlexLayout().pipe(
+        map((flexLayout) => {
+          this.modulesMap['@angular/flex-layout'] = flexLayout;
+          this.modulesMap['@angular/flex-layout/flex'] = flexLayout;
+          this.modulesMap['@angular/flex-layout/grid'] = flexLayout;
+          this.modulesMap['@angular/flex-layout/extended'] = flexLayout;
+          System.constructor.prototype.resolve = (id: string) => {
+            try {
+              if (this.modulesMap[id]) {
+                return 'app:' + id;
+              } else {
+                return id;
+              }
+            } catch (err) {
+              return id;
+            }
+          };
+          for (const moduleId of Object.keys(this.modulesMap)) {
+            System.set('app:' + moduleId, this.modulesMap[moduleId]);
           }
-        } catch (err) {
-          return id;
-        }
-      };
-      for (const moduleId of Object.keys(this.modulesMap)) {
-        System.set('app:' + moduleId, this.modulesMap[moduleId]);
-      }
-      System.constructor.prototype.shouldFetch = (url: string) => url.endsWith('/download');
-      System.constructor.prototype.fetch = (url, options: RequestInit & {meta?: any}) => {
-        if (options?.meta?.additionalHeaders) {
-          options.headers = { ...options.headers, ...options.meta.additionalHeaders };
-        }
-        return fetch(url, options);
-      };
-      this.initialized = true;
+          System.constructor.prototype.shouldFetch = (url: string) => url.endsWith('/download');
+          System.constructor.prototype.fetch = (url: string, options: RequestInit & {meta?: any}) => {
+            if (options?.meta?.additionalHeaders) {
+              options.headers = { ...options.headers, ...options.meta.additionalHeaders };
+            }
+            return fetch(url, options);
+          };
+          this.initialized = true;
+        })
+      );
+    } else {
+      return of(null);
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts b/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts
index da23f14414..189fea6e5c 100644
--- a/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts
+++ b/ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgModule } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, RouterModule, Routes } from '@angular/router';
 
 import { Authority } from '@shared/models/authority.enum';
 import { DashboardPageComponent } from '@home/components/dashboard-page/dashboard-page.component';
@@ -28,7 +28,7 @@ import { Widget } from '@app/shared/models/widget.models';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 
 @Injectable()
-export class WidgetEditorDashboardResolver implements Resolve<Dashboard> {
+export class WidgetEditorDashboardResolver  {
 
   constructor(private dashboardService: DashboardService,
               private dashboardUtils: DashboardUtilsService,
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
index ffd0a196e9..d16176e7f4 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html
@@ -35,11 +35,11 @@
       <span>{{ assignedToCurrentUserText | translate }}</span>
     </mat-option>
     <mat-option *ngFor="let user of filteredUsers | async" [value]="user"
-                [fxHide]="assigneeId === user.id.id">
+                [class.!hidden]="assigneeId === user.id.id">
       <span class="user-avatar" [innerHTML]="getUserInitials(user)"
             [style.background-color]="getAvatarBgColor(user)">
       </span>
-      <div class="user-display-name" fxLayout="column" fxLayoutGap="2px">
+      <div class="user-display-name flex flex-col gap-0.5">
         <span *ngIf="user.firstName || user.lastName"
               [innerHTML]="getFullName(user) | highlight:searchText"></span>
         <span [innerHTML]="user.email | highlight:searchText"></span>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
index 903b473dbe..8ef4044dac 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select.component.html
@@ -16,16 +16,16 @@
 
 -->
 <ng-container [formGroup]="assigneeFormGroup">
-  <mat-form-field [ngStyle]="inline ? {width: '100%'} : {marginBottom: '25px'}"
+  <mat-form-field [style]="inline ? {width: '100%'} : {marginBottom: '25px'}"
                   (click)="openAlarmAssigneeSelectPanel($event)"
                   subscriptSizing="dynamic" [appearance]="inline ? 'outline' : 'fill'">
     <mat-label *ngIf="!inline" translate>alarm.assignee</mat-label>
     <input matInput readonly formControlName="assignee">
-    <span *ngIf="assignee" matPrefix class="user-avatar" [ngClass]="{'inline': inline}"
-          [style.backgroundColor]="getAvatarBgColor()">
+    <span *ngIf="assignee" matPrefix class="user-avatar" [class.inline]="inline"
+          [style.background-color]="getAvatarBgColor()">
       {{ getUserInitials() }}
     </span>
-    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [ngClass]="{'inline': inline}">account_circle</mat-icon>
-    <mat-icon *ngIf="!disabled" matSuffix class="drop-down-icon" [ngClass]="{'inline': inline}">arrow_drop_down</mat-icon>
+    <mat-icon *ngIf="!assignee" matPrefix class="unassigned-icon" [class.inline]="inline">account_circle</mat-icon>
+    <mat-icon *ngIf="!disabled" matSuffix class="drop-down-icon" [class.inline]="inline">arrow_drop_down</mat-icon>
   </mat-form-field>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
index 229566a3ae..7fb20305bd 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex class="mat-block" style="margin-bottom: 25px"
+<mat-form-field class="mat-block flex-1" style="margin-bottom: 25px"
                 (click)="openAlarmAssigneePanel($event, alarm)"
                 subscriptSizing="dynamic">
   <mat-label translate>alarm.assignee</mat-label>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index 8145c31b06..293f7efe08 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form style="width: 600px;">
   <mat-toolbar color="primary">
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index d98e960081..f4a2b6f987 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -15,10 +15,11 @@
     limitations under the License.
 
 -->
-<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments" fxLayout="column">
-  <div class="header"  [ngClass]="{'activity-only': alarmActivityOnly}">
-    <div class="header-container" fxLayout="row" fxLayoutAlign="space-between center"
-         [ngClass]="{'asc': isDirectionAscending(), 'activity-only': alarmActivityOnly}">
+<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments flex flex-col">
+  <div class="header" [class.activity-only]="alarmActivityOnly">
+    <div class="header-container flex flex-row items-center justify-between"
+         [class.asc]="isDirectionAscending()"
+         [class.activity-only]="alarmActivityOnly">
       <span class="header-title" translate>
         alarm-activity.activity
       </span>
@@ -47,13 +48,14 @@
       </div>
     </div>
   </div>
-  <div fxLayout="column">
+  <div class="flex flex-col">
     <ng-container *ngIf="!isDirectionAscending()">
       <ng-container *ngTemplateOutlet="commentInput"></ng-container>
     </ng-container>
-    <div class="comments-container" fxLayout="column" fxLayoutGap="12px" style="padding: 24px"
-         [ngClass]="{'asc': isDirectionAscending(), 'activity-only': alarmActivityOnly}">
-      <div fxFlex *ngFor="let displayDataElement of displayData; index as i">
+    <div class="comments-container flex flex-col gap-3" style="padding: 24px"
+         [class.asc]="isDirectionAscending()"
+         [class.activity-only]="alarmActivityOnly">
+      <div class="flex-1" *ngFor="let displayDataElement of displayData; index as i">
         <div class="system-comment" *ngIf="displayDataElement.isSystemComment; else userComment">
           <span class="system-text" style="margin-right: 8px">
             {{ displayDataElement.commentText }}
@@ -65,20 +67,20 @@
           </span>
         </div>
         <ng-template #userComment>
-          <div class="user-comment" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"
+          <div class="user-comment flex flex-row items-center justify-start gap-2"
                *ngIf="!displayDataElement.edit; else commentEditing"
                (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                (mouseleave)="onCommentMouseLeave(i)">
-            <div *ngIf="displayDataElement.userExists; else userDeleted" class="user-avatar"
-                 fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" fxHide.xs
+            <div *ngIf="displayDataElement.userExists; else userDeleted"
+                 class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
             <ng-template #userDeleted>
-              <mat-icon class="mat-icon tb-mat-28" fxHide.xs>no_accounts</mat-icon>
+              <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
             </ng-template>
-            <div fxFlex fxLayout="column" fxLayoutGap="5px">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <div class="flex flex-1 flex-col" style="gap: 5px">
+              <div class="flex flex-row items-center justify-start gap-2">
                 <span class="user-name">{{ displayDataElement.displayName }}</span>
                 <span class="time"
                       [matTooltip]="displayDataElement.createdTime"
@@ -93,8 +95,8 @@
               </div>
               <span class="text">{{ displayDataElement.commentText }}</span>
             </div>
-            <div fxLayout="row" fxLayout.xs="column"  class="action-buttons"
-                 [ngClass]="{ 'show-buttons': displayDataElement.showActions }">
+            <div class="action-buttons flex flex-row xs:flex-col"
+                 [class.show-buttons]="displayDataElement.showActions">
               <button mat-icon-button
                       type="button"
                       (click)="editComment(displayDataElement.commentId)">
@@ -108,13 +110,12 @@
             </div>
           </div>
           <ng-template #commentEditing>
-            <div fxLayoutAlign="row center" fxLayoutGap="8px">
-              <div fxLayout="row" fxLayoutAlign="center center"
-                   class="user-avatar"
+            <div class="flex flex-row items-center justify-start gap-2">
+              <div class="user-avatar flex flex-row items-center justify-center"
                    [style.background-color]="displayDataElement.avatarBgColor">
                 {{ getUserInitials(displayDataElement.displayName) }}
               </div>
-              <mat-form-field fxFlex class="mat-block tb-appearance-transparent">
+              <mat-form-field class="mat-block tb-appearance-transparent flex-1">
                 <textarea matInput
                           type="text"
                           placeholder="{{ 'alarm-activity.add' | translate }}"
@@ -125,7 +126,7 @@
                           (keyup.enter)="saveEditedComment(displayDataElement.commentId)"
                           (keydown.enter)="$event.preventDefault()">
                 </textarea>
-                <div matSuffix fxLayout="row">
+                <div matSuffix class="flex flex-row">
                   <button mat-icon-button
                           (click)="cancelEdit(displayDataElement.commentId)"
                           type="button">
@@ -149,15 +150,16 @@
   </div>
   <ng-template #commentInput>
     <div style="background-color: white" class="comment-input"
-         [ngClass]="{'newest-first': !isDirectionAscending(), 'oldest-first': isDirectionAscending(), 'activity-only': alarmActivityOnly}">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="inner-wrap">
-        <div fxLayout="row" fxLayoutAlign="center center"
-             class="user-avatar"
+         [class.newest-first]="!isDirectionAscending()"
+         [class.oldest-first]="isDirectionAscending()"
+         [class.activity-only]="alarmActivityOnly">
+      <div class="inner-wrap flex flex-row items-center justify-start gap-2">
+        <div class="user-avatar flex flex-row items-center justify-center"
              *ngIf="userDisplayName$ | async; let userDisplayName"
              [style.background-color]="getCurrentUserBgColor(userDisplayName)">
           {{ getUserInitials(userDisplayName) }}
         </div>
-        <mat-form-field fxFlex class="mat-block tb-appearance-transparent">
+        <mat-form-field class="mat-block tb-appearance-transparent flex-1">
           <textarea matInput
                     type="text"
                     placeholder="{{ 'alarm-activity.add' | translate }}"
@@ -171,7 +173,7 @@
           <button mat-icon-button
                   type="button"
                   matSuffix
-                  *ngIf="getAlarmCommentFormControl().value"
+                  *ngIf="getAlarmCommentValue()"
                   (click)="saveComment()">
             <mat-icon color="primary">
               send
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss
index ec48adfa11..d12778a409 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss
@@ -16,8 +16,8 @@
 @use '@angular/material' as mat;
 @import '../theme.scss';
 
-$primary-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.4);
-$border: 1px solid mat.get-color-from-palette($tb-primary);
+$primary-color: rgba(mat.m2-get-color-from-palette($tb-primary, 50), 0.4);
+$border: 1px solid mat.m2-get-color-from-palette($tb-primary);
 
 :host {
   .tb-alarm-comments {
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
index 88277588dc..cd1c9f6a05 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
@@ -156,7 +156,7 @@ export class AlarmCommentComponent implements OnInit {
   }
 
   saveComment(): void {
-    const commentInputValue: string = this.getAlarmCommentFormControl().value;
+    const commentInputValue: string = this.getAlarmCommentValue();
     if (commentInputValue) {
       const comment: AlarmComment = {
         alarmId: {
@@ -174,7 +174,7 @@ export class AlarmCommentComponent implements OnInit {
   }
 
   saveEditedComment(commentId: string): void {
-    const commentEditInputValue: string = this.getAlarmCommentEditFormControl().value;
+    const commentEditInputValue: string = this.getAlarmCommentEditValue();
     if (commentEditInputValue) {
       const editedComment: AlarmComment = this.getAlarmCommentById(commentId);
       editedComment.comment.text = commentEditInputValue;
@@ -277,6 +277,14 @@ export class AlarmCommentComponent implements OnInit {
     return this.alarmCommentFormGroup.get('alarmCommentEdit');
   }
 
+  getAlarmCommentValue(): string {
+    return this.alarmCommentFormGroup.get('alarmComment').value.trim();
+  }
+
+  private getAlarmCommentEditValue(): string {
+    return this.alarmCommentFormGroup.get('alarmCommentEdit').value.trim();
+  }
+
   private clearCommentInput(): void {
     this.getAlarmCommentFormControl().patchValue('');
   }
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index 7059899765..70a52e9576 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="alarmFormGroup" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -27,45 +27,46 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" style="margin-bottom: 22px">
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.originator</mat-label>
           <input matInput formControlName="originatorName" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.severity</mat-label>
           <input matInput formControlName="alarmSeverity" readonly
-                 [ngStyle]="{fontWeight: 'bold', color: alarmSeverityColorsMap.get((alarm$ | async)?.severity)}">
+                 style="font-weight: bold"
+                 [style.color]="alarmSeverityColorsMap.get((alarm$ | async)?.severity)">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5">
+        <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" class="mat-block flex-1">
           <mat-label translate>alarm.start-time</mat-label>
           <input matInput formControlName="startTime" readonly>
         </mat-form-field>
-        <mat-form-field *ngIf="alarmFormGroup.get('duration').value" fxFlex class="mat-block">
+        <mat-form-field *ngIf="alarmFormGroup.get('duration').value" class="mat-block flex-1">
           <mat-label translate>alarm.duration</mat-label>
           <input matInput formControlName="duration" readonly>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.type</mat-label>
           <input matInput formControlName="type" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>alarm.status</mat-label>
           <input matInput formControlName="alarmStatus" readonly>
         </mat-form-field>
       </div>
       <mat-expansion-panel class="tb-alarm-details">
-        <mat-expansion-panel-header  fxLayout="row wrap" style="margin-bottom: 8px">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap" style="margin-bottom: 8px">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             alarm.show-more
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -79,15 +80,15 @@
         </ng-template>
       </mat-expansion-panel>
     </fieldset>
-    <tb-alarm-assignee fxFlex [allowAssign]="allowAssign"
+    <tb-alarm-assignee class="flex-1" [allowAssign]="allowAssign"
                        [alarm]="alarm$ | async"
                        (alarmReassigned)="onReassign()">
     </tb-alarm-assignee>
     <tb-alarm-comment #alarmCommentComponent [alarmId]="alarmId"></tb-alarm-comment>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <div fxLayout="row" *ngIf="alarm$ | async; let alarm;" fxLayoutGap="8px">
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2" *ngIf="alarm$ | async; let alarm;">
       <button *ngIf="allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
                                              alarm.status === alarmStatuses.CLEARED_UNACK)"
               mat-raised-button
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
index 82278e9585..3742f4fd54 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html
@@ -30,16 +30,16 @@
   </ng-container>
 </ng-template>
 <ng-template #alarmFilterPanel>
-  <form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()">
+  <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="alarmFilter"></ng-container>
-    <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+    <div class="tb-panel-actions flex flex-row items-center justify-end">
       <button type="button"
               mat-button
               color="primary"
               (click)="reset()">
         {{ 'action.reset' | translate }}
       </button>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button type="button"
               mat-button
               (click)="cancel()">
@@ -73,7 +73,7 @@
       </mat-chip-listbox>
     </div>
     <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>alarm.alarm-type-list</div>
+      <div class="fixed-title-width" ranslate>alarm.alarm-type-list</div>
       <tb-entity-subtype-list subscriptSizing="dynamic"
                               formControlName="typeList"
                               appearance="outline"
@@ -83,7 +83,7 @@
     </div>
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>alarm.assignee</div>
-      <tb-alarm-assignee-select fxFlex inline="true"
+      <tb-alarm-assignee-select class="flex-1" inline="true"
                                 [userMode]="userMode"
         formControlName="assigneeId">
       </tb-alarm-assignee-select>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
index bec2c21de5..df86e9a08b 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-entities-table [entitiesTableConfig]="alarmTableConfig" [ngClass]="{'tb-details-mode': detailsMode}"></tb-entities-table>
+<tb-entities-table [entitiesTableConfig]="alarmTableConfig" [class.tb-details-mode]="detailsMode"></tb-entities-table>
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
index 7ebd42358e..4f4f6258d8 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
-  <div fxLayout="row" *ngFor="let alias of entityAliasesInfo | keyvalue">
-    <tb-aliases-entity-autocomplete fxFlex
+<div class="mat-content mat-padding flex flex-col">
+  <div class="flex flex-row" *ngFor="let alias of entityAliasesInfo | keyvalue">
+    <tb-aliases-entity-autocomplete class="flex-1"
       required
       [alias]="alias.value.alias"
       [entityFilter]="alias.value.entityFilter"
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
index 18044ad2f7..cc714bccd0 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasSelectableAliasEntities">
+<section class="tb-aliases-entity-select flex flex-row items-center justify-start" *ngIf="hasSelectableAliasEntities">
   <button mat-icon-button
           cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
@@ -23,7 +23,7 @@
           [matTooltipPosition]="tooltipPosition">
     <mat-icon class="material-icons">devices_other</mat-icon>
   </button>
-  <span fxHide.lt-lg
+  <span class="lt-lg:!hidden"
         (click)="openEditMode()"
         matTooltip="{{ 'entity.select-entities' | translate }}"
         [matTooltipPosition]="tooltipPosition">
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index d6edb9b4cd..8f0243844d 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -55,7 +55,7 @@
                 ? translate.instant('alias.entity-filter-no-entity-matched') : ''"></tb-error>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 8e8e3ee7a9..438c43bc35 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -27,36 +27,34 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-aliases-header" fxLayout="row" fxLayoutAlign="start center">
-      <span fxFlex="5"></span>
-      <div fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-        <span class="tb-header-label" translate fxFlex fxFlex.gt-sm="200px">alias.name</span>
-        <span class="tb-header-label" translate fxFlex style="padding-left: 10px;">alias.entity-filter</span>
-        <span class="tb-header-label" translate fxFlex="120px" style="padding-left: 10px;">alias.resolve-multiple</span>
+    <div class="tb-aliases-header flex flex-row items-center justify-start">
+      <span class="max-w-5% flex-full"></span>
+      <div class="flex max-w-95% flex-full flex-row items-center justify-start">
+        <span class="tb-header-label flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" translate>alias.name</span>
+        <span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
+        <span class="tb-header-label min-w-32 max-w-32 flex-1 basis-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
         <span style="min-width: 80px;"></span>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center"
+      <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span fxFlex="5">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias" fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-          <mat-form-field class="mat-block" fxFlex fxFlex.gt-sm="200px" style="padding-top: 20px;">
+        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-alias flex max-w-95% flex-full flex-row items-center justify-start">
+          <mat-form-field class="mat-block flex-1 gt-sm:min-w-52 gt-sm:max-w-52 gt-sm:basis-52" style="padding-top: 20px;">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-entity-filter-view fxFlex style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
+          <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
           </tb-entity-filter-view>
-          <section fxFlex="120px" style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch"
-                   fxLayout="column"
-                   fxLayoutAlign="center center">
+          <section style="padding-left: 10px;"
+                   class="tb-resolve-multiple-switch flex min-w-32 max-w-32 flex-1 basis-32 flex-col items-center justify-center">
             <mat-slide-toggle class="resolve-multiple-switch"
                    [formControl]="entityAliasControl.get('resolveMultiple')">
             </mat-slide-toggle>
@@ -87,13 +85,13 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addAlias()"
-            [fxShow]="!disableAdd"
+            [class.!hidden]="disableAdd"
             [disabled]="isLoading$ | async"
             matTooltip="{{ 'alias.add' | translate }}"
             matTooltipPosition="above">
       {{ 'alias.add' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
index b70159d9b3..b80bf95ddb 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="attributeFormGroup" (ngSubmit)="add()" style="min-width: 420px; max-width: 420px;">
   <mat-toolbar color="primary">
     <h2>{{ (isTelemetry ? 'attribute.add-telemetry' : 'attribute.add') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -46,7 +46,7 @@
       </tb-value-input>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index 25c806c92d..a59732a999 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
   <mat-toolbar color="primary">
     <h2 translate>attribute.add-widget-to-dashboard</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -27,11 +27,11 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div mat-dialog-content fxLayout="column">
+  <div mat-dialog-content class="flex flex-col">
     <fieldset [disabled]="isLoading$ | async">
       <mat-radio-group formControlName="addToDashboardType">
         <mat-radio-button [value]="0" color="primary">
-          <section fxLayout="column" style="width: 300px;">
+          <section class="flex flex-col" style="width: 300px;">
             <span translate>dashboard.select-existing</span>
             <tb-dashboard-autocomplete formControlName="dashboardId"
                                        [required]="addWidgetFormGroup.get('addToDashboardType').value === 0"
@@ -40,7 +40,7 @@
           </section>
         </mat-radio-button>
         <mat-radio-button [value]="1" color="primary">
-          <section fxLayout="column" style="width: 300px;">
+          <section class="flex flex-col" style="width: 300px;">
             <span translate>dashboard.create-new</span>
             <mat-form-field class="mat-block">
               <mat-label translate>dashboard.new-dashboard-title</mat-label>
@@ -55,12 +55,12 @@
       </mat-radio-group>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <mat-checkbox formControlName="openDashboard"
                   style="margin-bottom: 0;">
       {{ 'dashboard.open-dashboard' | translate }}
     </mat-checkbox>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index cc4930483e..4ba296d79d 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
+  <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="mode !== 'default' || textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
           <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection && !attributeScopeSelectionReadonly">
             <mat-label translate>attribute.attributes-scope</mat-label>
@@ -32,7 +32,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button
                 *ngIf="attributeScope !== attributeScopeTypes.CLIENT_SCOPE"
                 [disabled]="isLoading$ | async"
@@ -58,14 +58,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="mode !== 'default' || !textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -78,14 +78,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools" fxLayout.xs="row wrap">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'default' || dataSource.selection.isEmpty()">
+      <div class="mat-toolbar-tools xs:flex xs:flex-row xs:flex-wrap">
         <span class="tb-entity-table-info">
           {{ (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY ?
                 'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
         </span>
-        <span fxFlex></span>
-        <button [fxShow]="attributeScope !== attributeScopeTypes.CLIENT_SCOPE"
+        <span class="flex-1"></span>
+        <button [class.!hidden]="attributeScope === attributeScopeTypes.CLIENT_SCOPE"
                 class="button-widget-action"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
@@ -104,12 +104,12 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'widget'">
-      <div class="mat-toolbar-tools" fxLayoutGap="8px" fxLayout.xs="row wrap">
-        <div fxFlex fxLayout="row" fxLayoutAlign="start">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'widget'">
+      <div class="mat-toolbar-tools gap-2 xs:flex xs:flex-row xs:flex-wrap">
+        <div class="flex flex-1 flex-row items-stretch justify-start">
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
-          <tb-widgets-bundle-select fxFlexOffset="5"
-                                    fxFlex
+          <tb-widgets-bundle-select class="flex-1"
+                                    style="margin-left: 5%"
                                     required
                                     [selectFirstBundle]="false"
                                     [selectBundleAlias]="selectedWidgetsBundleAlias"
@@ -117,7 +117,7 @@
                                     (ngModelChange)="onWidgetsBundleChanged($event)">
           </tb-widgets-bundle-select>
         </div>
-        <button mat-raised-button [fxShow]="widgetsList.length > 0"
+        <button mat-raised-button [class.!hidden]="!widgetsList.length"
                 color="accent"
                 class="button-widget-action"
                 [disabled]="isLoading$ | async"
@@ -136,7 +136,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container" [fxShow]="mode !== 'widget'">
+    <div class="table-container flex-1" [class.!hidden]="mode === 'widget'">
       <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -162,7 +162,7 @@
         <ng-container matColumnDef="key">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute" class="attribute">
-            <div fxLayout="row" style="align-items: center">
+            <div class="flex flex-row" style="align-items: center">
               <span class="ellipsis">{{ attribute.key }}</span>
               <tb-copy-button
                 class="attribute-copy"
@@ -182,8 +182,8 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell attribute"
                     (click)="editAttribute($event, attribute)">
-            <div fxFlex fxLayout="row" style="align-items: center">
-              <div fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
+            <div class="flex flex-1 flex-row" style="align-items: center">
+              <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   *ngIf="attribute.value !== ''"
@@ -197,7 +197,7 @@
                 >
                 </tb-copy-button>
               </div>
-              <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
+              <span [class.!hidden]="isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
               </span>
               <button mat-icon-button *ngIf="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
@@ -207,34 +207,32 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                             'mat-selected': dataSource.selection.isSelected(attribute)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select" [class.mat-selected]="dataSource.selection.isSelected(attribute)"
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex items-center justify-center" translate>{{
           attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
               ? 'attribute.no-telemetry-text'
               : 'attribute.no-attributes-text'
         }}</span>
     </div>
-    <mat-divider [fxShow]="mode !== 'widget'"></mat-divider>
-    <mat-paginator [fxShow]="mode !== 'widget'"
+    <mat-divider [class.!hidden]="mode === 'widget'"></mat-divider>
+    <mat-paginator [class.!hidden]="mode === 'widget'"
                    [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
                    [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
-    <ngx-hm-carousel fxFlex *ngIf="mode === 'widget' && widgetsList.length > 0"
+    <ngx-hm-carousel *ngIf="mode === 'widget' && widgetsList.length > 0"
                      #carousel
                      [(ngModel)]="widgetsCarouselIndex"
                      (ngModelChange)="onWidgetsCarouselIndexChanged()"
                      [data]="widgetsList"
                      [infinite]="false"
-                     class="carousel c-accent">
+                     class="carousel c-accent flex-1">
       <section ngx-hm-carousel-container class="content">
         <article class="item cursor-pointer"
                  ngx-hm-carousel-item
@@ -277,12 +275,8 @@
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetBundleSet"
-          fxFlex fxLayoutAlign="center center"
-          style="display: flex;"
-          class="mat-headline-5">widgets-bundle.empty</span>
+          class="mat-headline-5 flex flex-1 items-center justify-center">widgets-bundle.empty</span>
     <span translate *ngIf="mode === 'widget' && !widgetBundleSet"
-          fxFlex fxLayoutAlign="center center"
-          style="display: flex;"
-          class="mat-headline-5">widget.select-widgets-bundle</span>
+          class="mat-headline-5 flex flex-1 items-center justify-center">widget.select-widgets-bundle</span>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
index 9d7123a94b..7e0fc13986 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar>
   <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           type="button"
           (click)="cancel()">
@@ -51,8 +51,8 @@
     {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
   </mat-slide-toggle>
 </form>
-<div fxLayout="row" class="tb-panel-actions">
-  <span fxFlex></span>
+<div class="tb-panel-actions flex flex-row">
+  <span class="flex-1"></span>
   <button mat-button color="primary"
           type="button"
           (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
index 7c682e6c0c..1308290991 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/edit-attribute-value-panel.component.html
@@ -23,8 +23,8 @@
       requiredText="attribute.value-required">
     </tb-value-input>
   </fieldset>
-  <div fxLayout="row" class="tb-panel-actions">
-    <span fxFlex></span>
+  <div class="tb-panel-actions flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
index 11b67279f0..cc28e8c307 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@@ -17,23 +17,23 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>audit-log.audit-log-details</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           [mat-dialog-close]="false"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content fxLayout="column">
+<div mat-dialog-content class="flex flex-col">
   <label translate class="tb-title no-padding">audit-log.action-data</label>
   <div #actionDataEditor class="tb-audit-log-action-data">
   </div>
   <span style="min-height: 30px;"></span>
-  <label [fxShow]="displayFailureDetails" translate class="tb-title no-padding">audit-log.failure-details</label>
-  <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
+  <label [class.!hidden]="!displayFailureDetails" translate class="tb-title no-padding">audit-log.failure-details</label>
+  <div #failureDetailsEditor [class.!hidden]="!displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
index b6b6073567..fc4f12d37a 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-entities-table [entitiesTableConfig]="auditLogTableConfig" [ngClass]="{'tb-details-mode': detailsMode}"></tb-entities-table>
+<tb-entities-table [entitiesTableConfig]="auditLogTableConfig" [class.tb-details-mode]="detailsMode"></tb-entities-table>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index b86d41a5b5..3fbfcdaa9c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -19,8 +19,8 @@
   <mat-toolbar color="primary">
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
-      <span fxFlex>{{data.widgetInfo.widgetName}}</span>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-xs="16px" style="min-width: fit-content;">
+      <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
+      <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
         <tb-toggle-select *ngIf="widgetConfig.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs"
                           [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
           <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
@@ -66,14 +66,14 @@
       </div>
     </tb-widget-preview>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="space-between center">
+  <div mat-dialog-actions class="flex items-center justify-between">
     <button mat-button color="primary"
             type="button"
             (click)="cancel()"
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <div class="flex flex-row gap-2">
       <button *ngIf="!previewMode"
               mat-button color="primary"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 2dd4ea3fb4..1586a8b872 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.update-image</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -28,13 +28,13 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content style="position: relative;">
-    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" fxLayout="column" fxLayoutAlign="center stretch" fxLayoutGap="8px">
-      <div [formGroup]="dashboardRectFormGroup" fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center center">
+    <fieldset [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)" class="flex flex-col items-stretch justify-center gap-2">
+      <div [formGroup]="dashboardRectFormGroup" class="flex flex-col items-center justify-center gap-2">
         <mat-form-field class="rect-field">
           <mat-label>Top %</mat-label>
           <input matInput formControlName="top" type="number" step="1" min="0" max="100">
         </mat-form-field>
-        <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center">
+        <div class="flex flex-row items-center justify-center gap-2">
           <mat-form-field  class="rect-field">
             <mat-label>Left %</mat-label>
             <input matInput formControlName="left" type="number" step="1" min="0" max="100">
@@ -53,7 +53,7 @@
           <input matInput formControlName="bottom" type="number" step="1" min="0" max="100">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutAlign="center center">
+      <div class="flex flex-row items-center justify-center">
         <button mat-raised-button color="accent"
                 type="button"
                 [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
@@ -67,12 +67,11 @@
         </tb-gallery-image-input>
       </div>
     </fieldset>
-    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill" fxLayout="column"
-         fxLayoutAlign="center center">
+    <div *ngIf="takingScreenshot$ | async" class="taking-screenshot-progress tb-absolute-fill flex flex-col items-center justify-center">
         <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async) || (takingScreenshot$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index 694a6e9a41..ddf97d1c85 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -15,32 +15,29 @@
     limitations under the License.
 
 -->
-<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" tb-toast
-     fxFlex tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
+<div class="tb-dashboard-page mat-content flex-1" [class.mobile-app]="isMobileApp && !isEdit" tb-toast
+     tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
   <section class="tb-dashboard-toolbar"
-           [ngClass]="{ 'tb-dashboard-toolbar-opened': toolbarOpened,
-                        'tb-dashboard-toolbar-closed': !toolbarOpened }">
-    <tb-dashboard-toolbar [fxShow]="!widgetEditMode && !hideToolbar" [forceFullscreen]="forceFullscreen"
+           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
+           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
+    <tb-dashboard-toolbar [class.!hidden]="widgetEditMode || hideToolbar" [forceFullscreen]="forceFullscreen"
                           [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
-      <div class="tb-dashboard-action-panels" fxLayout="column" fxLayout.gt-sm="row"
-           fxLayoutAlign="center stretch" fxLayoutAlign.gt-sm="space-between center">
-        <div class="tb-dashboard-action-panel tb-left-panel" [fxHide]="isMobileApp && !isEdit">
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.gt-sm displayUserInfo="true">
+      <div class="tb-dashboard-action-panels flex flex-col items-stretch justify-center gt-sm:flex-row gt-sm:items-center gt-sm:justify-between">
+        <div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
+          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
           </tb-user-menu>
           <ng-container *ngIf="isEdit">
-            <div style="flex: 1 1 100%" fxHide.gt-sm></div>
-            <div fxFlex.lt-md fxLayout="row"
-                 fxLayoutAlign.gt-sm="start center"
-                 fxLayoutAlign="end center" fxLayoutGap.lt-lg="3px" fxLayoutGap.lg="6px" fxLayoutGap.gt-lg="12px">
+            <div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
+            <div class="flex flex-row items-center justify-end lg:gap-1.5 lt-md:flex-1 lt-lg:gap-0.75 gt-sm:items-center gt-sm:justify-start gt-lg:gap-3">
               <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
-              <button fxHide.gt-md mat-icon-button
+              <button class="gt-md:!hidden" mat-icon-button
                       matTooltip="{{'layout.manage' | translate}}"
                       matTooltipPosition="below"
                       (click)="manageDashboardLayouts($event)">
                 <mat-icon>view_compact</mat-icon>
               </button>
-              <button fxHide.lt-lg mat-button
+              <button class="lt-lg:!hidden" mat-button
                       matTooltip="{{'layout.manage' | translate}}"
                       matTooltipPosition="below"
                       (click)="manageDashboardLayouts($event)">
@@ -52,7 +49,7 @@
               </tb-select-dashboard-breakpoint>
             </div>
           </ng-container>
-          <tb-states-component fxFlex.lt-md
+          <tb-states-component class="lt-md:flex-1"
                                [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
                                [dashboardCtrl]="this"
                                [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
@@ -63,13 +60,13 @@
                                [states]="dashboardConfiguration.states">
           </tb-states-component>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-md mat-icon-button
+            <button class="gt-md:!hidden" mat-icon-button
                     matTooltip="{{'dashboard.manage-states' | translate}}"
                     matTooltipPosition="below"
                     (click)="manageDashboardStates($event)">
               <mat-icon>layers</mat-icon>
             </button>
-            <button fxHide.lt-lg mat-button
+            <button class="lt-lg:!hidden" mat-button
                     matTooltip="{{'dashboard.manage-states' | translate}}"
                     matTooltipPosition="below"
                     (click)="manageDashboardStates($event)">
@@ -81,65 +78,65 @@
                aria-label="dashboard_logo" class="dashboard_logo"/>
         </div>
         <div class="tb-dashboard-action-panel">
-          <button [fxShow]="showCloseToolbar()" mat-icon-button class="close-action"
+          <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"
                   matTooltip="{{ 'dashboard.close-toolbar' | translate }}"
                   matTooltipPosition="below"
                   (click)="closeToolbar()">
             <mat-icon>arrow_forward</mat-icon>
           </button>
-          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.lt-md displayUserInfo="true">
+          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="lt-md:!hidden" displayUserInfo="true">
           </tb-user-menu>
-          <button [fxShow]="showRightLayoutSwitch()" mat-icon-button
+          <button [class.!hidden]="!showRightLayoutSwitch()" mat-icon-button
                   matTooltip="{{ (isRightLayoutOpened ? 'dashboard.hide-details' : 'dashboard.show-details') | translate }}"
                   matTooltipPosition="below"
                   (click)="toggleLayouts()">
             <mat-icon>{{isRightLayoutOpened ? 'arrow_back' : 'menu'}}</mat-icon>
           </button>
-          <button [fxShow]="!hideFullscreenButton()" mat-icon-button fxHide.xs
+          <button [class.!hidden]="hideFullscreenButton()" class="xs:!hidden" mat-icon-button
                   matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                   matTooltipPosition="below"
                   (click)="isFullscreen = !isFullscreen">
             <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
           </button>
-          <button [fxShow]="currentDashboardId && !isMobileApp && displayExport() && !isEdit" mat-icon-button
+          <button [class.!hidden]="!currentDashboardId || isMobileApp || !displayExport() || isEdit" mat-icon-button
                   matTooltip="{{'dashboard.export' | translate}}"
                   matTooltipPosition="below"
                   (click)="exportDashboard($event)">
             <mat-icon>file_download</mat-icon>
           </button>
           <ng-container *ngIf="!readonly && !isEdit">
-            <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
+            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                     matTooltip="{{'dashboard.edit-mode' | translate}}"
                     matTooltipPosition="below">
               <mat-icon>edit</mat-icon></button>
-            <button fxHide.lt-lg mat-stroked-button (click)="toggleDashboardEditMode()">
+            <button class="lt-lg:!hidden" mat-stroked-button (click)="toggleDashboardEditMode()">
               <mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-md mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
+            <button class="gt-md:!hidden" mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
                     matTooltip="{{'action.save' | translate}}"
                     matTooltipPosition="below">
               <mat-icon>done</mat-icon></button>
-            <button fxHide.lt-lg mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
+            <button class="lt-lg:!hidden" mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
               <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
-            <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
+            <button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
                     matTooltip="{{'action.cancel' | translate}}"
                     [disabled]="isLoading$ | async"
                     matTooltipPosition="below">
               <mat-icon>close</mat-icon></button>
-            <button fxHide.lt-lg mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
+            <button class="lt-lg:!hidden" mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
               <mat-icon>close</mat-icon>{{ 'action.cancel' | translate }}</button>
             <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
           </ng-container>
           <ng-container *ngIf="currentDashboardId && isEdit && isTenantAdmin()">
-            <button fxHide.lt-lg fxHide.gt-lg mat-icon-button
+            <button class="lt-lg:!hidden gt-lg:!hidden" mat-icon-button
                     #versionControlIconButton
                     matTooltip="{{'version-control.version-control' | translate}}"
                     matTooltipPosition="below"
                     (click)="toggleVersionControl($event, versionControlIconButton)">
               <mat-icon>history</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     #versionControlButton
                     matTooltip="{{'version-control.version-control' | translate}}"
                     matTooltipPosition="below"
@@ -149,13 +146,13 @@
             </button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-lg mat-icon-button
+            <button class="gt-lg:!hidden" mat-icon-button
                     matTooltip="{{ 'filter.filters' | translate }}"
                     matTooltipPosition="below"
                     (click)="openFilters($event)">
               <mat-icon>filter_list</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     matTooltip="{{ 'filter.filters' | translate }}"
                     matTooltipPosition="below"
                     (click)="openFilters($event)">
@@ -164,13 +161,13 @@
             </button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-lg mat-icon-button
+            <button class="gt-lg:!hidden" mat-icon-button
                     matTooltip="{{ 'entity.aliases' | translate }}"
                     matTooltipPosition="below"
                     (click)="openEntityAliases($event)">
               <mat-icon>devices_other</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     matTooltip="{{ 'entity.aliases' | translate }}"
                     matTooltipPosition="below"
                     (click)="openEntityAliases($event)">
@@ -179,13 +176,13 @@
             </button>
           </ng-container>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-lg mat-icon-button
+            <button class="gt-lg:!hidden" mat-icon-button
                     matTooltip="{{ 'dashboard.settings' | translate }}"
                     matTooltipPosition="below"
                     (click)="openDashboardSettings($event)">
               <mat-icon>settings</mat-icon>
             </button>
-            <button fxHide.lt-xl mat-button
+            <button class="lt-xl:!hidden" mat-button
                     matTooltip="{{ 'dashboard.settings' | translate }}"
                     matTooltipPosition="below"
                     (click)="openDashboardSettings($event)">
@@ -193,14 +190,14 @@
               {{ 'dashboard.settings' | translate }}
             </button>
           </ng-container>
-          <button [fxShow]="currentDashboardId && !isEdit && !isMobileApp && isTenantAdmin() && displayUpdateDashboardImage()" mat-icon-button
+          <button [class.!hidden]="!currentDashboardId || isEdit || isMobileApp || !isTenantAdmin() || !displayUpdateDashboardImage()" mat-icon-button
                   matTooltip="{{'dashboard.update-image' | translate}}"
                   matTooltipPosition="below"
                   (click)="updateDashboardImage($event)">
             <mat-icon>wallpaper</mat-icon>
           </button>
           <ng-container *ngIf="isEdit; else timewindowTemplate">
-            <tb-timewindow fxHide.lt-xl asButton
+            <tb-timewindow class="lt-xl:!hidden" asButton
                            flatButton
                            [displayTimewindowValue]="false"
                            [isEdit]="true"
@@ -209,7 +206,7 @@
                            timezone="true"
                            [(ngModel)]="dashboardCtx.dashboardTimewindow">
             </tb-timewindow>
-            <tb-timewindow fxHide.gt-lg
+            <tb-timewindow class="gt-lg:!hidden"
                            hideLabel
                            [isEdit]="true"
                            tooltipPosition="below"
@@ -220,7 +217,7 @@
           </ng-container>
           <ng-template #timewindowTemplate>
             <ng-container *ngIf="displayDashboardTimewindow()">
-              <tb-timewindow fxHide.gt-md
+              <tb-timewindow class="gt-md:!hidden"
                              [isEdit]="false"
                              hideLabel
                              tooltipPosition="below"
@@ -228,7 +225,7 @@
                              timezone="true"
                              [(ngModel)]="dashboardCtx.dashboardTimewindow">
               </tb-timewindow>
-              <tb-timewindow fxHide.lt-lg
+              <tb-timewindow class="lt-lg:!hidden"
                              [isEdit]="false"
                              tooltipPosition="below"
                              aggregation="true"
@@ -238,13 +235,13 @@
             </ng-container>
           </ng-template>
           <ng-container *ngIf="isEdit">
-            <button fxHide.gt-md mat-icon-button
+            <button class="gt-md:!hidden" mat-icon-button
                     matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                     matTooltipPosition="below"
                     (click)="addWidget($event)">
               <mat-icon>add</mat-icon>
             </button>
-            <button fxHide.lt-lg mat-stroked-button
+            <button class="lt-lg:!hidden" mat-stroked-button
                     matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                     matTooltipPosition="below"
                     (click)="addWidget($event)">
@@ -252,11 +249,11 @@
               {{ 'dashboard.add-widget-button-text' | translate }}
             </button>
           </ng-container>
-          <tb-filters-edit [fxShow]="!isEdit && displayFilters()"
+          <tb-filters-edit [class.!hidden]="isEdit || !displayFilters()"
                            tooltipPosition="below"
                            [aliasController]="dashboardCtx.aliasController">
           </tb-filters-edit>
-          <tb-aliases-entity-select [fxShow]="!isEdit && displayEntitiesSelect()"
+          <tb-aliases-entity-select [class.!hidden]="isEdit || !displayEntitiesSelect()"
                                     tooltipPosition="below"
                                     [aliasController]="dashboardCtx.aliasController">
           </tb-aliases-entity-select>
@@ -273,30 +270,30 @@
   <section class="tb-dashboard-container tb-absolute-fill"
            tb-toast toastTarget="dashboardRoot"
            #dashboardContainer
-           [ngClass]="{ 'is-fullscreen': forceFullscreen,
-           'tb-dashboard-toolbar-opened': toolbarOpened,
-           'tb-dashboard-toolbar-animated': isToolbarOpenedAnimate,
-           'tb-dashboard-toolbar-closed': !toolbarOpened }">
+           [class.is-fullscreen]="forceFullscreen"
+           [class.tb-dashboard-toolbar-opened]="toolbarOpened"
+           [class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
+           [class.tb-dashboard-toolbar-closed]="!toolbarOpened">
     <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
-      <mat-drawer-content #dashboardContent fxLayout="column" fxLayoutAlign="center start">
+      <mat-drawer-content #dashboardContent class="flex flex-col items-start justify-center">
         <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
-                 [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
-          <h3 [fxShow]="!isEdit && displayTitle()">{{ translatedDashboardTitle }}</h3>
-          <mat-form-field [fxShow]="isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
-            <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
+                 [style.color]="dashboard.configuration.settings.titleColor">
+          <h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
+          <mat-form-field [class.!hidden]="!isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
+            <mat-label translate [style.color]="dashboard.configuration.settings.titleColor">dashboard.title</mat-label>
             <input matInput class="tb-dashboard-title"
-                   [ngStyle]="{'color': dashboard.configuration.settings.titleColor}"
+                   [style.color]="dashboard.configuration.settings.titleColor"
                    required name="title" [(ngModel)]="dashboard.title">
           </mat-form-field>
         </section>
-        <mat-drawer-container class="tb-dashboard-layouts" fxFlex
-                              [class]="{'tb-shrinked' : isEditingWidget}">
+        <mat-drawer-container class="tb-dashboard-layouts flex-1"
+                              [class.tb-shrinked]="isEditingWidget">
           <mat-drawer *ngIf="layouts.right.show"
                       id="tb-right-layout"
-                      [ngStyle]="{minWidth: rightLayoutSize.width,
-                                  maxWidth: rightLayoutSize.width,
-                                  height: rightLayoutSize.height,
-                                  borderLeft: 'none'}"
+                      style="border-left: none"
+                      [style.min-width]="rightLayoutSize.width"
+                      [style.max-width]="rightLayoutSize.width"
+                      [style.height]="rightLayoutSize.height"
               disableClose="true"
               [@.disabled]="!isMobile"
               position="end"
@@ -314,10 +311,10 @@
               [popoverComponent]="popoverComponent">
             </tb-dashboard-layout>
           </mat-drawer>
-          <mat-drawer-content [fxShow]="layouts.main.show"
+          <mat-drawer-content [class.!hidden]="!layouts.main.show"
                               id="tb-main-layout"
-                              [style]="{width: mainLayoutSize.width,
-                                        height: mainLayoutSize.height}">
+                              [style.width]="mainLayoutSize.width"
+                              [style.height]="mainLayoutSize.height">
             <tb-dashboard-layout
               [style.max-width]="mainLayoutSize.maxWidth"
               [style.min-width]="mainLayoutSize.minWidth"
@@ -333,13 +330,13 @@
             </tb-dashboard-layout>
             <div class="layout-filler"
                  *ngIf="isEdit"
-                 [fxShow]="showMainLayoutFiller">
+                 [class.!hidden]="!showMainLayoutFiller">
               {{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
             </div>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-header-buttons tb-enter-edit-mode" fxLayoutAlign="start end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
-          <button [fxShow]="!isEdit"
+        <section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap items-end justify-start" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
+          <button [class.!hidden]="isEdit"
                   color="primary"
                   mat-mini-fab
                   class="tb-btn-header tb-btn-edit"
@@ -348,7 +345,7 @@
                   matTooltipPosition="above">
             <mat-icon>edit</mat-icon>
           </button>
-          <button [fxShow]="isEdit"
+          <button [class.!hidden]="!isEdit"
                   color="primary"
                   mat-mini-fab
                   class="tb-btn-header tb-btn-edit"
@@ -357,7 +354,7 @@
                   matTooltip="{{'action.save' | translate}}"
                   matTooltipPosition="below">
             <mat-icon>done</mat-icon></button>
-          <button [fxShow]="isEdit"
+          <button [class.!hidden]="!isEdit"
                   color="primary"
                   mat-mini-fab
                   class="tb-btn-header tb-btn-edit"
@@ -367,7 +364,7 @@
                   matTooltipPosition="below">
             <mat-icon>close</mat-icon></button>
         </section>
-        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
+        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [style.color]="dashboard.configuration.settings.titleColor">
           <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
         </section>
       </mat-drawer-content>
@@ -378,12 +375,12 @@
                   disableClose
                   mode="over"
                   position="end">
-        <tb-details-panel *ngIf="!isEditingWidgetClosed" fxFlex
+        <tb-details-panel *ngIf="!isEditingWidgetClosed" class="flex-1"
                           headerTitle="{{editingWidget?.config.title}}"
                           headerSubtitle="{{ editingWidgetSubtitle }}"
                           [isReadOnly]="true"
                           (closeDetails)="onEditWidgetClosed()">
-          <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+          <div class="details-buttons flex flex-row items-center justify-start gap-4">
             <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
               <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
               <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
@@ -403,7 +400,7 @@
                           (applyWidgetConfig)="saveWidget()">
           </tb-edit-widget>
         </tb-details-panel>
-        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" fxFlex
+        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" class="flex-1"
                           headerTitle="{{ isAddingWidget ?
                             ((dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets' ? ('dashboard.select-widget-value' | translate: { title: ('widget.all-widgets' | translate) }) :
                                (!dashboardWidgetSelectComponent?.widgetsBundle ?
@@ -416,19 +413,19 @@
                           backgroundColor="#cfd8dc"
                           (closeDetails)="onAddWidgetClosed()"
                           (closeSearch)="dashboardWidgetSelectComponent.search = ''">
-          <div class="prefix-title-buttons" [fxShow]="!!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
+          <div class="prefix-title-buttons" [class.!hidden]="!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
             <button class="tb-mat-28" mat-icon-button type="button" (click)="clearSelectedWidgetBundle()">
               <mat-icon>arrow_back</mat-icon>
             </button>
           </div>
-          <div class="search-pane" *ngIf="isAddingWidget && dashboardWidgetSelectComponent" fxLayout="row">
-            <tb-widgets-bundle-search fxFlex
+          <div class="search-pane flex flex-row" *ngIf="isAddingWidget && dashboardWidgetSelectComponent">
+            <tb-widgets-bundle-search class="flex-1"
                                       [(ngModel)]="dashboardWidgetSelectComponent.search"
                                       placeholder="{{ ((!dashboardWidgetSelectComponent.widgetsBundle && dashboardWidgetSelectComponent.selectWidgetMode === 'bundles')
                                                         ? 'widgets-bundle.search' : 'widget.search') | translate }}">
             </tb-widgets-bundle-search>
           </div>
-          <div class="details-buttons" *ngIf="isAddingWidget" fxLayout="row" fxLayoutAlign="start center">
+          <div class="details-buttons flex flex-row items-center justify-start" *ngIf="isAddingWidget">
             <button mat-button type="button" (click)="importWidget($event)"
                     *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
               <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 5137f6128d..719fc375f3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 750px;">
   <mat-toolbar color="primary">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -58,7 +58,7 @@
             {{ 'dashboard.display-dashboard-logo' | translate }}
           </mat-slide-toggle>
         </div>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.dashboard-logo-image' | translate}}"
                                 formControlName="dashboardLogoUrl">
         </tb-gallery-image-input>
@@ -92,7 +92,7 @@
       </div>
       <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header>
-          <mat-panel-description fxLayoutAlign="end" translate>
+          <mat-panel-description class="flex items-stretch justify-end" translate>
             dashboard.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -197,7 +197,7 @@
                           formControlName="backgroundColor">
           </tb-color-input>
         </div>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.background-image' | translate}}"
                                 formControlName="backgroundImageUrl">
         </tb-gallery-image-input>
@@ -244,7 +244,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
index 6878ce8113..3b4a66112a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-toolbar.component.html
@@ -16,7 +16,8 @@
 
 -->
 <mat-fab-toolbar [isOpen]="toolbarOpened" color="primary" direction="left"
-                 [ngClass]="{'is-fullscreen': forceFullscreen, 'mat-elevation-z1': forceFullscreen && toolbarOpened }">
+                 [class.is-fullscreen]="forceFullscreen"
+                 [class.mat-elevation-z1]="forceFullscreen && toolbarOpened">
   <mat-fab-trigger>
     <button mat-fab color="primary"
             [matTooltip]="!toolbarOpened ? ('dashboard.open-toolbar' | translate) : ''"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 1b38be7fdf..bfaaf700ce 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -36,7 +36,7 @@
       [noData]="noWidgets">
     </tb-scroll-grid>
     <ng-template #widgetCard let-item="item">
-      <mat-card class="tb-widget-preview-card" appearance="raised" fxLayout="column" fxLayoutGap="8px" (click)="onWidgetClicked($event, item)">
+      <mat-card class="tb-widget-preview-card flex flex-col gap-2" appearance="raised" (click)="onWidgetClicked($event, item)">
         <div class="title-container">
           <div title="{{item.name}}" class="widget-title">
             {{item.name}}
@@ -56,8 +56,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgets>
-      <div fxLayout="column"
-           fxLayoutAlign="center center" class="tb-absolute-fill">
+      <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widget.loading-widgets' | translate }}
         </span>
@@ -65,9 +64,7 @@
       </div>
     </ng-template>
     <ng-template #noWidgets>
-        <span style="display: flex;"
-              fxLayoutAlign="center center"
-              class="mat-headline-5 tb-absolute-fill">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
+        <span class="mat-headline-5 tb-absolute-fill flex items-center justify-center">{{(selectWidgetMode === 'bundles' ? 'widgets-bundle.empty' : 'widget.no-widgets-text') | translate}}</span>
     </ng-template>
   </ng-template>
 
@@ -83,7 +80,7 @@
       [noData]="noWidgetBundles">
     </tb-scroll-grid>
     <ng-template #widgetsBundleCard let-item="item">
-      <mat-card class="tb-widget-preview-card" appearance="raised" fxLayout="column" fxLayoutGap="8px" (click)="selectBundle($event, item)">
+      <mat-card class="tb-widget-preview-card flex flex-col gap-2" appearance="raised" (click)="selectBundle($event, item)">
         <div class="title-container">
           <div title="{{item.name}}" class="widget-title">
             {{item.title}}
@@ -100,8 +97,7 @@
       </mat-card>
     </ng-template>
     <ng-template #loadingWidgetBundles>
-      <div fxLayout="column"
-           fxLayoutAlign="center center" class="tb-absolute-fill">
+      <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span class="mat-headline-5" style="padding-bottom: 20px;">
           {{ 'widgets-bundle.loading-widgets-bundles' | translate }}
         </span>
@@ -110,13 +106,11 @@
     </ng-template>
     <ng-template #noWidgetBundles>
         <span translate
-              style="display: flex;"
-              fxLayoutAlign="center center"
-              class="mat-headline-5 tb-absolute-fill">widgets-bundle.no-widgets-bundles-text</span>
+              class="mat-headline-5 tb-absolute-fill flex items-center justify-center">widgets-bundle.no-widgets-bundles-text</span>
     </ng-template>
   </ng-template>
   <ng-template #widgetLoadingCard>
-    <mat-card class="tb-widget-preview-card loading-cell" appearance="raised" fxLayout="column" fxLayoutGap="8px">
+    <mat-card class="tb-widget-preview-card loading-cell flex flex-col gap-2" appearance="raised">
       <div class="title-container">
       </div>
       <div class="preview-container">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
index 9748558b67..4b8259fefd 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html
@@ -35,7 +35,7 @@
           {{ 'action.back' | translate }}
         </button>
         <button *ngIf="!previewMode"
-                fxHide.gt-sm
+                class="gt-sm:!hidden"
                 [disabled]="!widgetFormGroup.valid"
                 mat-button color="primary"
                 (click)="previewMode = true">
@@ -43,16 +43,16 @@
           {{ 'widget-config.preview' | translate }}
         </button>
       </div>
-      <div fxFlex.lt-md class="tb-widget-config-header-suffix" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="12px">
+      <div class="tb-widget-config-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
         <button *ngIf="!previewMode"
-                fxHide.lt-md
+                class="lt-md:!hidden"
                 [disabled]="!widgetFormGroup.valid"
                 mat-button color="primary"
                 (click)="previewMode = true">
           <mat-icon>visibility</mat-icon>
           {{ 'widget-config.preview' | translate }}
         </button>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+        <div class="flex flex-row items-center justify-start gap-3">
           <button [disabled]="!widgetFormGroup.dirty"
             mat-stroked-button color="primary"
             (click)="onRevertWidgetConfig()">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 15b7ee173a..72c6520270 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>layout.add-new-breakpoint</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -50,7 +50,7 @@
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button
           color="primary"
           type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
index 0442061e99..103f98d757 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="tb-progress-cover" fxLayoutAlign="center center"
+<div class="tb-progress-cover flex flex-col items-center justify-center"
   *ngIf="layoutCtx.widgets.isLoading()">
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
@@ -23,11 +23,11 @@
 <div class="mat-content"
           style="position: relative; width: 100%; height: 100%;" [tb-hotkeys]="hotKeys"
           [cheatSheet]="dashboardCheatSheet"
-          [style.backgroundImage]="backgroundImage$ | async"
-          [ngStyle]="dashboardStyle">
-  <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
-           style="display: flex; z-index: 1; pointer-events: none;"
-           class="mat-headline-5 tb-absolute-fill">
+          [style.background-image]="backgroundImage$ | async"
+          [style]="dashboardStyle">
+  <section *ngIf="layoutCtx.widgets.isEmpty()"
+           style="z-index: 1; pointer-events: none;"
+           class="mat-headline-5 tb-absolute-fill flex items-center justify-center">
     <span *ngIf="!isEdit" style="text-align: center;">
       {{'dashboard.no-widgets' | translate}}
     </span>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
index c04a2af3df..52742c54c4 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts
@@ -39,6 +39,7 @@ import { map } from 'rxjs/operators';
 import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
 import { BreakpointId, LayoutType, ViewFormatType } from '@shared/models/dashboard.models';
 import { isNotEmptyStr } from '@core/utils';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 
 @Component({
   selector: 'tb-dashboard-layout',
@@ -319,12 +320,12 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
     this.layoutCtx.dashboardCtrl.copyWidgetReference($event, this.layoutCtx, widget);
   }
 
-  pasteWidget($event: Event) {
+  pasteWidget($event: TbContextMenuEvent | KeyboardEvent) {
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidget($event, this.layoutCtx, pos);
   }
 
-  pasteWidgetReference($event: Event) {
+  pasteWidgetReference($event: TbContextMenuEvent | KeyboardEvent) {
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos);
   }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
index 3ea9f553a8..7b54261945 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
@@ -14,13 +14,15 @@
 /// limitations under the License.
 ///
 
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
+
 export interface ILayoutController {
   reload();
   resetHighlight();
   highlightWidget(widgetId: string, delay?: number);
   selectWidget(widgetId: string, delay?: number);
-  pasteWidget($event: MouseEvent);
-  pasteWidgetReference($event: MouseEvent);
+  pasteWidget($event: TbContextMenuEvent | KeyboardEvent);
+  pasteWidgetReference($event: TbContextMenuEvent | KeyboardEvent);
 }
 
 export enum LayoutWidthType {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index 71adbc91c8..56287982ed 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>layout.manage</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
       (click)="cancel()"
             type="button">
@@ -80,7 +80,7 @@
             </ng-container>
           </div>
         </div>
-        <button mat-button fxFlex class="tb-add-breakpoint-button"
+        <button mat-button class="tb-add-breakpoint-button flex-1"
                 matTooltip="{{ 'layout.add-new-breakpoint' | translate }}"
                 matTooltipPosition="above"
                 color="primary"
@@ -92,25 +92,24 @@
       </div>
     </section>
     <ng-template #dividerLayout>
-    <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="20px">
+    <div class="flex flex-col items-center justify-start gap-5">
       <mat-button-toggle-group aria-label="Select width value type"
                                formControlName="type"
-                               [fxShow]="isDividerLayout">
-        <mat-button-toggle fxFlex value="percentage">
+                               [class.!hidden]="!isDividerLayout">
+        <mat-button-toggle class="flex-1" value="percentage">
           {{ 'layout.percentage-width' | translate }}
         </mat-button-toggle>
-        <mat-button-toggle fxFlex value="fixed">
+        <mat-button-toggle class="flex-1" value="fixed">
           {{ 'layout.fixed-width' | translate }}
         </mat-button-toggle>
       </mat-button-toggle-group>
-      <div fxLayout="row" fxLayoutAlign="center center" class="tb-layout-preview">
-        <div fxLayout="row"
-             fxLayoutAlign="start center"
-             class="tb-layout-preview-container"
+      <div class="tb-layout-preview flex flex-row items-center justify-center">
+        <div class="tb-layout-preview-container flex flex-row items-center justify-start"
              #tooltip="matTooltip"
              matTooltip=""
              matTooltipPosition="below">
-          <div fxLayout="column" fxLayoutAlign="start center" fxFlex="{{ buttonFlexValue() }}" class="tb-layout-preview-container-main">
+          <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
+               class="tb-layout-preview-container-main flex flex-1 flex-col items-center justify-start">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -118,25 +117,24 @@
                     (click)="openLayoutSettings('main')"
                     class="tb-layout-preview-element"
                     aria-label="Layout settings"
-                    [ngClass]="layoutButtonClass('main')">
+                    [class]="layoutButtonClass('main')">
               <mat-icon>settings</mat-icon>
             </button>
-            <button fxFlex
-                    type="button"
+            <button type="button"
                     mat-raised-button
                     color="primary"
-                    class="tb-layout-button"
+                    class="tb-layout-button flex-1"
                     (mouseover)="mainLayoutTooltip.show()"
                     (mouseleave)="mainLayoutTooltip.hide()"
                     (click)="setFixedLayout('main')"
-                    [ngClass]="layoutButtonClass('main', true)">
+                    [class]="layoutButtonClass('main', true)">
               <span [matTooltip]="layoutButtonText('main')"
                     #mainLayoutTooltip="matTooltip"
                     matTooltipPosition="above">
                 {{ (isDividerLayout ? 'layout.left' : 'layout.main')  | translate }}
               </span>
             </button>
-            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
+            <div class="tb-layout-preview-element tb-layout-preview-input flex-1" *ngIf="showPreviewInputs('main')">
               <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
                      formControlName="leftWidthPercentage"
                      type="number"
@@ -154,7 +152,7 @@
                      required>
             </div>
           </div>
-          <div fxLayout="column" fxLayoutAlign="start center" fxFlex *ngIf="isDividerLayout" matTooltip="">
+          <div class="flex flex-1 flex-col items-center justify-start" *ngIf="isDividerLayout" matTooltip="">
             <button mat-icon-button
                     type="button"
                     matTooltip="{{ 'layout.settings' | translate }}"
@@ -162,25 +160,24 @@
                     (click)="openLayoutSettings('right')"
                     class="tb-layout-preview-element"
                     aria-label="Layout settings"
-                    [ngClass]="layoutButtonClass('right')">
+                    [class]="layoutButtonClass('right')">
               <mat-icon>settings</mat-icon>
             </button>
-            <button fxFlex
-                    type="button"
+            <button type="button"
                     mat-raised-button
                     color="primary"
-                    class="tb-layout-button tb-layout-button-right"
+                    class="tb-layout-button tb-layout-button-right flex-1"
                     (mouseover)="rightLayoutTooltip.show()"
                     (mouseleave)="rightLayoutTooltip.hide()"
                     (click)="setFixedLayout('right')"
-                    [ngClass]="layoutButtonClass('right')">
+                    [class]="layoutButtonClass('right')">
               <span [matTooltip]="layoutButtonText('right')"
                     #rightLayoutTooltip="matTooltip"
                     matTooltipPosition="above">
                 {{ 'layout.right' | translate }}
               </span>
             </button>
-            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
+            <div class="tb-layout-preview-element tb-layout-preview-input flex-1" *ngIf="showPreviewInputs('right')">
               <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
                      formControlName="rightWidthPercentage"
                      type="number"
@@ -199,7 +196,7 @@
           </div>
         </div>
       </div>
-      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" *ngIf="isDividerLayout" style="width: 80%">
+      <div class="flex flex-col items-center justify-center gap-2" *ngIf="isDividerLayout" style="width: 80%">
         <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
                     step="1"
                     min="{{ layoutPercentageSize.MIN }}"
@@ -218,7 +215,7 @@
                     discrete
                     [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
         </mat-slider>
-        <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
+        <div class="tb-hint tb-hint-group flex flex-row items-center justify-between" style="width: 100%;">
           <label>
             {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
           </label>
@@ -230,7 +227,7 @@
     </div>
     </ng-template>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
index 0933cafaff..e953d2187f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
@@ -17,7 +17,7 @@
 @import '../theme.scss';
 @import '../scss/constants.scss';
 
-$tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
+$tb-warn: mat.m2-get-color-from-palette(map-get($tb-theme, warn), text);
 
 :host {
   .tb-layout-fixed-container {
@@ -30,12 +30,11 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
   .tb-hint-group {
     padding: 0;
     margin-top: -14px;
-    display: block;
   }
 
   .tb-layout-preview {
     width: 100%;
-    background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.6);
+    background-color: rgba(mat.m2-get-color-from-palette($tb-primary, 50), 0.6);
     padding: 35px;
 
     &-container {
@@ -182,6 +181,11 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
     .mat-button-toggle {
       border: none !important;
     }
+    .mat-button-toggle-label-content {
+      .mat-pseudo-checkbox {
+        display: none;
+      }
+    }
   }
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
index 1feeaacc75..aae19ed6e7 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="move()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.move-all-widgets</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div mat-dialog-content class="tb-form-panel no-border no-padding" [formGroup]="moveWidgetsFormGroup">
     <div class="tb-form-row space-between column-xs">
       <div translate>dashboard.move-by</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input required matInput formControlName="cols"
                  type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -44,7 +44,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index e8f586635f..98c26d0cf3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -28,7 +28,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state-name</mat-label>
         <input required matInput formControlName="name">
@@ -51,7 +51,7 @@
       </mat-checkbox>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
index 2bcf03726e..03604d6d94 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/default-state-controller.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-select class="default-state-controller" [fxShow]="displayStateSelection()"
+<mat-select class="default-state-controller" [class.!hidden]="!displayStateSelection()"
     [(ngModel)]="stateObject[0].id" (ngModelChange)="selectedStateIdChanged()">
   <mat-option *ngFor="let stateKv of states | keyvalue" [value]="stateKv.key">
     {{getStateName(stateKv.key, stateKv.value)}}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
index 27ab2e094d..33bca0dab5 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/entity-state-controller.component.html
@@ -16,11 +16,12 @@
 
 -->
 <div class="entity-state-controller">
-  <div *ngIf="!isMobile || stateObject.length === 1" fxLayout="row" fxLayoutAlign="start center">
-        <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry" [ngStyle]="{fontWeight: isLast ? 'bold' : 'normal',
-                         cursor: isLast ? 'default' : 'pointer'}" (click)="navigatePrevState(i)">
+  <div *ngIf="!isMobile || stateObject.length === 1" class="flex flex-row items-center justify-start">
+        <span *ngFor="let state of stateObject; index as i; last as isLast" class="state-entry"
+              [style.font-weight]="isLast ? 'bold' : 'normal'"
+              [style.cursor]="isLast ? 'default' : 'pointer'" (click)="navigatePrevState(i)">
             {{getStateName(i)}}
-          <span class='state-divider' [fxHide]="isLast"> > </span>
+          <span class='state-divider' [class.!hidden]="isLast"> > </span>
         </span>
   </div>
   <mat-select *ngIf="isMobile && stateObject.length > 1"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index 55a9f8e42a..0119c8e757 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="width: 750px;">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.manage-states</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -31,11 +31,11 @@
     <fieldset [disabled]="isLoading$ | async">
       <div class="manage-dashboard-states">
         <div class="tb-entity-table">
-          <div fxLayout="column" class="tb-entity-table-content">
-            <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+          <div class="tb-entity-table-content flex flex-col">
+            <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
               <div class="mat-toolbar-tools">
                 <span class="tb-entity-table-title" translate>dashboard.states</span>
-                <span fxFlex></span>
+                <span class="flex-1"></span>
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         type="button"
                         (click)="addState($event)"
@@ -51,7 +51,7 @@
                 </button>
               </div>
             </mat-toolbar>
-            <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+            <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
               <div class="mat-toolbar-tools">
                 <button mat-icon-button
                         type="button"
@@ -59,7 +59,7 @@
                         matTooltipPosition="above">
                   <mat-icon>search</mat-icon>
                 </button>
-                <mat-form-field fxFlex>
+                <mat-form-field class="flex-1">
                   <mat-label>&nbsp;</mat-label>
                   <input #searchInput matInput
                          [(ngModel)]="pageLink.textSearch"
@@ -99,7 +99,7 @@
                   <mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
                   </mat-header-cell>
                   <mat-cell *matCellDef="let state">
-                    <div fxFlex fxLayout="row">
+                    <div class="flex flex-1 flex-row">
                       <button mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.edit-state' | translate }}"
@@ -114,7 +114,7 @@
                               (click)="duplicateState($event, state)">
                         <mat-icon>content_copy</mat-icon>
                       </button>
-                      <button [fxShow]="!state.root" mat-icon-button [disabled]="isLoading$ | async"
+                      <button [class.!hidden]="state.root" mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
                               matTooltip="{{ 'dashboard.delete-state' | translate }}"
                               matTooltipPosition="above"
@@ -128,9 +128,8 @@
                 <mat-row class="mat-row-select"
                          *matRowDef="let state; columns: displayedColumns;"></mat-row>
               </table>
-              <span [fxShow]="dataSource.isEmpty() | async"
-                    fxLayoutAlign="center center"
-                    class="no-data-found" translate>{{ 'dashboard.no-states-text' }}</span>
+              <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+                    class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
             </div>
             <mat-divider></mat-divider>
             <mat-paginator [length]="dataSource.total() | async"
@@ -142,7 +141,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts
index 9d413b7e81..f1f7313106 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-component.directive.ts
@@ -126,8 +126,7 @@ export class StatesComponentDirective implements OnInit, OnDestroy, OnChanges {
     }
     const stateControllerInstanceId = this.dashboardCtrl.dashboardCtx.instanceId + '_' +  this.statesControllerId;
     const preservedState = this.statesControllerService.withdrawStateControllerState(stateControllerInstanceId);
-    const stateControllerFactory = stateControllerData.factory;
-    this.stateControllerComponentRef = this.viewContainerRef.createComponent(stateControllerFactory);
+    this.stateControllerComponentRef = this.viewContainerRef.createComponent(stateControllerData.component);
     this.stateControllerComponent = this.stateControllerComponentRef.instance;
     this.dashboardCtrl.dashboardCtx.stateController = this.stateControllerComponent;
     this.dashboardCtrl.dashboardCtx.stateChanged = this.stateChangedSubject.asObservable();
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-controller.service.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-controller.service.ts
index efa6c19f74..5c0619b832 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-controller.service.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/states-controller.service.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import { ComponentFactory, ComponentFactoryResolver, Injectable, Type } from '@angular/core';
+import { Injectable, Type } from '@angular/core';
 import { deepClone } from '@core/utils';
 import { IStateControllerComponent } from '@home/components/dashboard-page/states/state-controller.models';
 
 export interface StateControllerData {
-  factory: ComponentFactory<IStateControllerComponent>;
+  component: Type<IStateControllerComponent>;
 }
 
 @Injectable()
@@ -29,13 +29,12 @@ export class StatesControllerService {
 
   statesControllerStates: {[stateControllerInstanceId: string]: any} = {};
 
-  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
+  constructor() {
   }
 
   public registerStatesController(stateControllerId: string, stateControllerComponent: Type<IStateControllerComponent>): void {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(stateControllerComponent);
     this.statesControllers[stateControllerId] = {
-      factory: componentFactory
+      component: stateControllerComponent
     };
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
index ede082dd6d..9a10b78e06 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/widget-types-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="type.display" *ngFor="let type of types"
                 (ngModelChange)="update()">
     {{ 'widget.' + type.type | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.html b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.html
similarity index 87%
rename from ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.html
rename to ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.html
index 1064e2c35f..58cbc142ca 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<tb-dashboard-page [embedded]="true" [dashboard]="apiUsageDashboard"></tb-dashboard-page>
+<tb-dashboard-page [embedded]="true" [dashboard]="dashboard"></tb-dashboard-page>
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.scss
similarity index 100%
rename from ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.scss
rename to ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.scss
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts
similarity index 80%
rename from ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts
rename to ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts
index a313a98b85..4dd68aadc0 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-view/dashboard-view.component.ts
@@ -22,13 +22,13 @@ import { Dashboard } from '@shared/models/dashboard.models';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
-  selector: 'tb-api-usage',
-  templateUrl: './api-usage.component.html',
-  styleUrls: ['./api-usage.component.scss']
+  selector: 'tb-dashboard-view',
+  templateUrl: './dashboard-view.component.html',
+  styleUrls: ['./dashboard-view.component.scss']
 })
-export class ApiUsageComponent extends PageComponent {
+export class DashboardViewComponent extends PageComponent {
 
-  apiUsageDashboard: Dashboard = this.route.snapshot.data.apiUsageDashboard;
+  dashboard: Dashboard = this.route.snapshot.data.dashboard;
 
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute) {
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
index 16498100ae..50c66eaaf3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" class="tb-progress-cover" fxLayoutAlign="center center"
+<div class="tb-progress-cover flex flex-1 flex-col items-center justify-center"
      [style]="dashboardStyle"
-     [style.backgroundImage]="backgroundImage"
-     [fxShow]="(isLoading$ | async) && !ignoreLoading && !isEdit">
+     [style.background-image]="backgroundImage"
+     [class.!hidden]="(isLoading$ | async) === false || ignoreLoading || isEdit">
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
 </div>
 <div id="gridster-parent"
-     fxFlex class="tb-dashboard-content" [class.autofill-height]="isAutofillHeight()"
+     class="tb-dashboard-content flex-1" [class.autofill-height]="isAutofillHeight()"
                 [class.center-vertical]="centerVertical"
                 [class.center-horizontal]="centerHorizontal"
                 (mousedown)="onDashboardMouseDown($event)"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
index fd031fa90f..7169e4a20b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
@@ -529,7 +529,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     return dashboardWidget ? dashboardWidget.widget : null;
   }
 
-  getEventGridPosition(event: Event): WidgetPosition {
+  getEventGridPosition(event: TbContextMenuEvent | KeyboardEvent): WidgetPosition {
     const pos: WidgetPosition = {
       row: 0,
       column: 0
@@ -537,7 +537,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     const parentElement = $(this.gridster.el);
     let pageX = 0;
     let pageY = 0;
-    if (event instanceof MouseEvent) {
+    if ('pageX' in event && 'pageY' in event) {
       pageX = event.pageX;
       pageY = event.pageY;
     }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
index d85a9ab64c..dd09d6e7b2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
@@ -30,3 +30,11 @@
     }
   }
 }
+
+:host ::ng-deep {
+  button.tb-layout-button {
+    .mdc-button__label {
+      line-height: 36px;
+    }
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index 92210ec057..6425997c09 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -18,7 +18,7 @@
 <form>
   <mat-toolbar color="primary">
     <h2 translate>layout.select</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
       (click)="cancel()"
             type="button">
@@ -28,19 +28,17 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <button fxFlex
-                mat-raised-button color="primary"
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <button mat-raised-button color="primary"
                 type="button"
-                class="tb-layout-button"
+                class="tb-layout-button flex-1"
                 (click)="selectLayout('main')">
           <span translate>layout.main</span>
         </button>
-        <button fxFlex
-                mat-raised-button color="primary"
+        <button mat-raised-button color="primary"
                 type="button"
-                class="tb-layout-button"
+                class="tb-layout-button flex-1"
                 (click)="selectLayout('right')">
           <span translate>layout.right</span>
         </button>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index 817e4b777b..4cc0f1131b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()">
   <mat-toolbar color="primary">
     <h2 translate>dashboard.select-state</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -28,7 +28,7 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>dashboard.state</mat-label>
         <mat-select required formControlName="stateId">
@@ -39,7 +39,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index 2483a5b5e3..9b3ebc5762 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html
@@ -16,10 +16,10 @@
 
 -->
 <header>
-  <mat-toolbar class="details-toolbar" color="primary" [ngStyle]="{height: headerHeightPx+'px'}">
-    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" style="height: 100%;">
-      <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start" [fxHide]="showSearchPane">
-        <div class="tb-details-title" fxLayout="row" fxLayoutAlign="start center">
+  <mat-toolbar class="details-toolbar" color="primary" [style.height]="headerHeightPx+'px'">
+    <div class="mat-toolbar-tools flex flex-row items-center justify-start" style="height: 100%;">
+      <div class="mat-toolbar-tools tb-details-title-header flex flex-1 flex-col items-start justify-start" [class.!hidden]="showSearchPane">
+        <div class="tb-details-title flex flex-row items-center justify-start">
           <ng-content select=".prefix-title-buttons"></ng-content>
           <span class="tb-details-title-text">{{ headerTitle }}</span>
         </div>
@@ -28,7 +28,7 @@
           <ng-content select=".header-pane"></ng-content>
         </span>
       </div>
-      <div *ngIf="isShowSearch" [fxHide]="!showSearchPane" fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
+      <div *ngIf="isShowSearch" [class.!hidden]="!showSearchPane" class="flex flex-row items-center justify-start" style="width: 100%;">
         <button mat-icon-button (click)="onToggleSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
@@ -44,13 +44,13 @@
         <mat-icon class="material-icons">close</mat-icon>
       </button>
     </div>
-    <section *ngIf="!isReadOnly" fxLayout="row" class="layout-wrap tb-header-buttons">
+    <section *ngIf="!isReadOnly" class="layout-wrap tb-header-buttons flex flex-row">
       <button [disabled]="(isLoading$ | async) || theForm?.invalid || !theForm?.dirty"
               mat-fab
               matTooltip="{{ 'action.apply-changes' | translate }}"
               matTooltipPosition="above"
               color="accent" class="tb-btn-header mat-fab-bottom-right"
-              [ngClass]="{'tb-hide': !isEdit}"
+              [class.tb-hide]="!isEdit"
               (click)="onApplyDetails()">
         <mat-icon class="material-icons">done</mat-icon>
       </button>
@@ -65,6 +65,6 @@
     </section>
   </mat-toolbar>
 </header>
-<div fxFlex class="mat-content" [ngStyle]="{backgroundColor: backgroundColor}">
+<div class="mat-content flex-1" [style.background-color]="backgroundColor">
   <ng-content></ng-content>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
index 1fe15c534c..5581e3d524 100644
--- a/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.html
@@ -19,7 +19,7 @@
         ngxClipboard
         [cbContent]="credential"
         (cbOnSuccess)="onCopyCredential()"
-        [fxHide]="hideButton"
+        [class.!hidden]="hideButton"
         [disabled]="disabled || loading">
   <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
   <span>{{ buttonLabel }}</span>
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
index 0f2412b857..31f7fe968a 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials-lwm2m-server.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="serverFormGroup" fxLayout="column">
+<section [formGroup]="serverFormGroup" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-label translate>device.lwm2m-security-config.mode</mat-label>
     <mat-select formControlName="securityMode">
@@ -24,7 +24,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <div [fxShow]="serverFormGroup.get('securityMode').value !== securityConfigLwM2MType.NO_SEC">
+  <div [class.!hidden]="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.NO_SEC">
     <mat-form-field class="mat-block">
       <mat-label>{{ 'device.lwm2m-security-config.client-publicKey-or-id' | translate }}</mat-label>
       <mat-icon class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index 6298417df7..4465f8320a 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="deviceCredentialsFormGroup">
-  <section [fxShow]="credentialsTypes?.length > 1" style="margin-bottom: 16px">
+  <section [class.!hidden]="!(credentialsTypes?.length > 1)" style="margin-bottom: 16px">
     <div class="tb-type-title" translate>device.credentials-type</div>
     <tb-toggle-select formControlName="credentialsType" appearance="fill">
       <tb-toggle-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
diff --git a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
index 2590c24699..c08f042331 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-info-filter.component.html
@@ -30,9 +30,9 @@
   </ng-container>
 </ng-template>
 <ng-template #deviceFilterPanel>
-  <form fxLayout="column" class="mat-content mat-padding" (ngSubmit)="update()">
+  <form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()">
     <ng-container *ngTemplateOutlet="deviceFilter"></ng-container>
-    <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+    <div class="tb-panel-actions flex flex-row items-center justify-end">
       <button type="button"
               mat-button
               (click)="cancel()">
@@ -48,7 +48,7 @@
   </form>
 </ng-template>
 <ng-template #deviceFilter>
-  <div fxLayout="column" fxLayoutGap="16px" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
+  <div class="flex flex-col gap-4" style="min-width: 280px;" [formGroup]="deviceInfoFilterForm">
     <tb-device-profile-autocomplete
       subscriptSizing="dynamic"
       formControlName="deviceProfileId"
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 2238cb99ea..8122273fd7 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
+<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
   <mat-toolbar color="primary">
     <h2 translate>{{ translations.add }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,7 +32,7 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
index 9fd6cd3792..224366a8cb 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ComponentFactoryResolver, Inject, Injector, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, Inject, Injector, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -55,7 +55,6 @@ export class AddEntityDialogComponent extends
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: AddEntityDialogData<BaseData<HasId>>,
               public dialogRef: MatDialogRef<AddEntityDialogComponent, BaseData<HasId>>,
-              private componentFactoryResolver: ComponentFactoryResolver,
               private injector: Injector,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher) {
     super(store, router, dialogRef);
@@ -66,7 +65,6 @@ export class AddEntityDialogComponent extends
     this.translations = this.entitiesTableConfig.entityTranslations;
     this.resources = this.entitiesTableConfig.entityResources;
     this.entity = {};
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.entityComponent);
     const viewContainerRef = this.entityDetailsFormAnchor.viewContainerRef;
     viewContainerRef.clear();
     const injector: Injector = Injector.create(
@@ -84,7 +82,7 @@ export class AddEntityDialogComponent extends
         parent: this.injector
       }
     );
-    const componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
+    const componentRef = viewContainerRef.createComponent(this.entitiesTableConfig.entityComponent, {index: 0, injector});
     this.entityComponent = componentRef.instance;
     this.entityComponent.isEdit = true;
     this.detailsForm = this.entityComponent.entityForm;
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 9bf9443404..6bebae3273 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -34,18 +34,18 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+      <div class="tb-entity-table-content tb-outlined-border flex flex-col">
+        <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+            <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
               <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
               <tb-anchor #entityTableHeader></tb-anchor>
               <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
                               (ngModelChange)="onTimewindowChange()"
                               asButton strokedButton historyOnly [forAllTimeEnabled]="entitiesTableConfig.forAllTimeEnabled"></tb-timewindow>
             </div>
-            <span fxFlex></span>
-            <div [fxShow]="addEnabled()">
+            <span class="flex-1"></span>
+            <div [class.!hidden]="!addEnabled()">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                       (click)="addEntity($event)"
@@ -56,7 +56,7 @@
               <ng-template #addActions>
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
-                        [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
+                        [class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
                         matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
                         matTooltipPosition="above">
@@ -72,7 +72,7 @@
                   <mat-menu #addActionsMenu="matMenu" xPosition="before">
                     <button mat-menu-item *ngFor="let actionDescriptor of entitiesTableConfig.addActionDescriptors"
                             [disabled]="isLoading$ | async"
-                            [fxShow]="actionDescriptor.isEnabled()"
+                            [class.!hidden]="!actionDescriptor.isEnabled()"
                             (click)="actionDescriptor.onAction($event)">
                       <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                       <span>{{ actionDescriptor.name }}</span>
@@ -82,7 +82,7 @@
               </ng-template>
             </div>
             <button mat-icon-button [disabled]="isLoading$ | async"
-                    [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
+                    [class.!hidden]="!actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
@@ -101,14 +101,14 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+        <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <button mat-icon-button
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
             </button>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-label>&nbsp;</mat-label>
               <input #searchInput matInput
                      [formControl]="textSearch"
@@ -121,14 +121,14 @@
             </button>
           </div>
         </mat-toolbar>
-        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
+        <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <span class="tb-entity-table-info">
               {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
             </span>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button mat-icon-button [disabled]="isLoading$ | async"
-                    [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
+                    [class.!hidden]="!actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
@@ -136,7 +136,7 @@
             </button>
           </div>
         </mat-toolbar>
-        <div fxFlex class="table-container">
+        <div class="table-container flex-1">
           <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
                      matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
@@ -148,23 +148,23 @@
               </mat-header-cell>
               <mat-cell *matCellDef="let entity">
                 <mat-checkbox (click)="$event.stopPropagation()"
-                              [fxShow]="entitiesTableConfig.entitySelectionEnabled(entity)"
+                              [class.!hidden]="!entitiesTableConfig.entitySelectionEnabled(entity)"
                               (change)="$event ? dataSource.selection.toggle(entity) : null"
                               [checked]="dataSource.selection.isSelected(entity)">
                 </mat-checkbox>
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                               [fxHide.lt-lg]="column.mobileHide"
-                               *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
+              <mat-header-cell [class.mat-number-cell]="column.isNumberColumn"
+                               [class.lt-lg:!hidden]="column.mobileHide"
+                               *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
                 {{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
-              <mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                        [fxHide.lt-lg]="column.mobileHide"
+              <mat-cell [class.mat-number-cell]="column.isNumberColumn"
+                        [class.lt-lg:!hidden]="column.mobileHide"
                         *matCellDef="let entity; let row = index"
                         [matTooltip]="cellTooltip(entity, column, row)"
                         matTooltipPosition="above"
-                        [ngStyle]="cellStyle(entity, column, row)">
+                        [style]="cellStyle(entity, column, row)">
                 <ng-container [ngSwitch]="column.type">
                   <ng-template [ngSwitchCase]="'link'">
                     <a *ngIf="column.entityURL(entity) as detailsPageURL; else defaultContent"
@@ -183,7 +183,7 @@
                     <ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
                       <tb-copy-button
                         [disabled]="isLoading$ | async"
-                        [fxShow]="column.actionCell.isEnabled(entity)"
+                        [class.!hidden]="!column.actionCell.isEnabled(entity)"
                         [copyText]="column.actionCell.onAction(null, entity)"
                         tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                         tooltipPosition="above"
@@ -193,11 +193,11 @@
                     </ng-template>
                     <ng-template ngSwitchDefault>
                       <button mat-icon-button [disabled]="isLoading$ | async"
-                              [fxShow]="column.actionCell.isEnabled(entity)"
+                              [class.!hidden]="!column.actionCell.isEnabled(entity)"
                               matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                               matTooltipPosition="above"
                               (click)="column.actionCell.onAction($event, entity)">
-                        <tb-icon [ngStyle]="column.actionCell.style">
+                        <tb-icon [style]="column.actionCell.style">
                           {{column.actionCell.icon}}
                         </tb-icon>
                       </button>
@@ -207,74 +207,79 @@
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">
-              <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
+              <mat-header-cell *matHeaderCellDef [style]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
               <mat-cell *matCellDef="let entity; let row = index"
-                        [ngStyle]="cellStyle(entity, column, row)">
+                        [style]="cellStyle(entity, column, row)">
                 <button mat-icon-button [disabled]="isLoading$ | async"
-                        [fxShow]="column.actionDescriptor.isEnabled(entity)"
+                        [class.!hidden]="!column.actionDescriptor.isEnabled(entity)"
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"
                         (click)="column.actionDescriptor.onAction($event, entity)">
-                  <tb-icon [ngStyle]="column.actionDescriptor.style">
+                  <tb-icon [style]="column.actionDescriptor.style">
                     {{column.actionDescriptor.iconFunction ? column.actionDescriptor.iconFunction(entity) : column.actionDescriptor.icon}}
                   </tb-icon>
                 </button>
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="actions" stickyEnd>
-              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+              <mat-header-cell *matHeaderCellDef>
+                <ng-container *ngIf="cellActionDescriptors.length">
+                  <div class="gt-md:!hidden" style="min-width: 48px;">
+                    {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+                  </div>
+                  <div class="lt-lg:!hidden"
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
+                    {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
+                  </div>
+                </ng-container>
               </mat-header-cell>
-              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    maxWidth: (cellActionDescriptors.length * 48) + 'px',
-                                                                    width: (cellActionDescriptors.length * 48) + 'px' }">
-                <div [fxHide]="cellActionDescriptors.length !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
-                          *ngFor="let actionDescriptor of cellActionDescriptors"
-                          matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
-                          matTooltipPosition="above"
-                          (click)="actionDescriptor.onAction($event, entity)">
-                    <tb-icon [ngStyle]="actionDescriptor.style">
-                      {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
-                    </tb-icon>
-                  </button>
-                </div>
-                <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
-                  <button mat-icon-button
-                          (click)="$event.stopPropagation()"
-                          [matMenuTriggerFor]="cellActionsMenu">
-                    <mat-icon class="material-icons">more_vert</mat-icon>
-                  </button>
-                  <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                    <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
-                            [disabled]="isLoading$ | async"
-                            [fxShow]="actionDescriptor.isEnabled(entity)"
+              <mat-cell *matCellDef="let entity">
+                <ng-container *ngIf="cellActionDescriptors.length">
+                  <div [class.lt-lg:!hidden]="cellActionDescriptors.length !== 1" class="flex flex-row items-stretch justify-end"
+                       [style.min-width]="(cellActionDescriptors.length * 48) + 'px'">
+                    <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
+                            *ngFor="let actionDescriptor of cellActionDescriptors"
+                            matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
+                            matTooltipPosition="above"
                             (click)="actionDescriptor.onAction($event, entity)">
-                      <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
+                      <tb-icon [style]="actionDescriptor.style">
                         {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
                       </tb-icon>
-                      <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
                     </button>
-                  </mat-menu>
-                </div>
+                  </div>
+                  <div [class.!hidden]="cellActionDescriptors.length === 1" class="gt-md:!hidden">
+                    <button mat-icon-button
+                            (click)="$event.stopPropagation()"
+                            [matMenuTriggerFor]="cellActionsMenu">
+                      <mat-icon class="material-icons">more_vert</mat-icon>
+                    </button>
+                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                      <button mat-menu-item *ngFor="let actionDescriptor of cellActionDescriptors"
+                              [disabled]="isLoading$ | async"
+                              [class.!hidden]="!actionDescriptor.isEnabled(entity)"
+                              (click)="actionDescriptor.onAction($event, entity)">
+                        <tb-icon matMenuItemIcon [style]="actionDescriptor.style">
+                          {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                        </tb-icon>
+                        <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
+                      </button>
+                    </mat-menu>
+                  </div>
+                </ng-container>
               </mat-cell>
             </ng-container>
-            <mat-header-row [ngClass]="{'mat-row-select': selectionEnabled}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-            <mat-row [fxShow]="!dataSource.dataLoading"
-                     [ngClass]="{'mat-row-select': selectionEnabled,
-                                 'mat-selected': dataSource.selection.isSelected(entity),
-                                 'tb-current-entity': dataSource.isCurrentEntity(entity),
-                                 'tb-pointer': entitiesTableConfig.rowPointer}"
+            <mat-header-row [class.mat-row-select]="selectionEnabled" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+            <mat-row [class.!hidden]="dataSource.dataLoading"
+                     [class.mat-row-select]="selectionEnabled"
+                     [class.mat-selected]="dataSource.selection.isSelected(entity)"
+                     [class.tb-current-entity]="dataSource.isCurrentEntity(entity)"
+                     [class.tb-pointer]="entitiesTableConfig.rowPointer"
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
           </table>
-          <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
-                fxLayoutAlign="center center"
-                class="no-data-found">{{ translations.noEntities | translate }}</span>
-          <span [fxShow]="dataSource.dataLoading"
-                fxLayoutAlign="center center"
-                class="no-data-found">{{ 'common.loading' | translate }}</span>
+          <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
+                class="no-data-found flex items-center justify-center">{{ translations.noEntities | translate }}</span>
+          <span [class.!hidden]="!dataSource.dataLoading"
+                class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
         </div>
         <mat-divider *ngIf="displayPagination"></mat-divider>
         <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
index 96b272f2d2..9bb5fe4d8a 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
@@ -19,7 +19,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentFactoryResolver,
   ElementRef,
   EventEmitter,
   Input, NgZone,
@@ -140,7 +139,6 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
               private domSanitizer: DomSanitizer,
               private cd: ChangeDetectorRef,
               private router: Router,
-              private componentFactoryResolver: ComponentFactoryResolver,
               private elementRef: ElementRef,
               private fb: FormBuilder,
               private zone: NgZone) {
@@ -193,10 +191,9 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     this.entitiesTableConfig = entitiesTableConfig;
     this.pageMode = this.entitiesTableConfig.pageMode;
     if (this.entitiesTableConfig.headerComponent) {
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.headerComponent);
       const viewContainerRef = this.entityTableHeaderAnchor.viewContainerRef;
       viewContainerRef.clear();
-      const componentRef = viewContainerRef.createComponent(componentFactory);
+      const componentRef = viewContainerRef.createComponent(this.entitiesTableConfig.headerComponent);
       const headerComponent = componentRef.instance;
       headerComponent.entitiesTableConfig = this.entitiesTableConfig;
     }
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
index 221a63e38c..49a868a7e7 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@@ -17,26 +17,26 @@
 -->
 <mat-card appearance="outlined" class="settings-card">
   <mat-toolbar class="details-toolbar">
-    <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="mat-toolbar-tools flex flex-row items-center justify-start gap-2">
       <button mat-icon-button
               matTooltip="{{ 'action.back' | translate }}"
               matTooltipPosition="above"
               (click)="goBack()">
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <div class="tb-details-title-header" fxLayout="column" fxLayoutAlign="center start">
+      <div class="tb-details-title-header flex flex-col items-start justify-center">
         <div class="tb-details-title tb-ellipsis">{{ headerTitle }}</div>
         <div class="tb-details-subtitle tb-ellipsis">{{ headerSubtitle }}</div>
       </div>
       <div class="tb-help" [tb-help]="helpLinkId()"></div>
-      <span fxFlex></span>
-      <section *ngIf="!isReadOnly" fxLayout="row" class="tb-header-button" fxLayoutGap="8px">
+      <span class="flex-1"></span>
+      <section *ngIf="!isReadOnly" class="tb-header-button flex flex-row gap-2">
         <button [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty"
                 mat-fab
                 matTooltip="{{ 'action.apply-changes' | translate }}"
                 matTooltipPosition="above"
                 color="accent" class="tb-btn-header"
-                [ngClass]="{'tb-hide': !isEdit}"
+                [class.tb-hide]="!isEdit"
                 (click)="onApplyDetails()">
           <mat-icon class="material-icons">done</mat-icon>
         </button>
@@ -51,8 +51,8 @@
       </section>
     </div>
   </mat-toolbar>
-  <mat-card-content fxFlex="100">
-    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" [(selectedIndex)]="selectedTab" fxFill>
+  <mat-card-content class="flex-full">
+    <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill size-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
       <mat-tab label="{{ 'details.details' | translate }}">
         <tb-anchor #entityDetailsForm></tb-anchor>
       </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts
index 6cce657cbb..baa46b135d 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.ts
@@ -18,7 +18,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentFactoryResolver,
   HostBinding,
   Injector,
   OnDestroy,
@@ -30,7 +29,6 @@ import { EntityTableConfig } from '@home/models/entity/entities-table-config.mod
 import { BaseData, HasId } from '@shared/models/base-data';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UntypedFormGroup } from '@angular/forms';
-import { AssetId } from '@shared/models/id/asset-id';
 import { TranslateService } from '@ngx-translate/core';
 import { deepClone } from '@core/utils';
 import { BroadcastService } from '@core/services/broadcast.service';
@@ -74,12 +72,11 @@ export class EntityDetailsPageComponent extends EntityDetailsPanelComponent impl
               private router: Router,
               protected injector: Injector,
               protected cd: ChangeDetectorRef,
-              protected componentFactoryResolver: ComponentFactoryResolver,
               private broadcast: BroadcastService,
               private translate: TranslateService,
               private dialogService: DialogService,
               protected store: Store<AppState>) {
-    super(store, injector, cd, componentFactoryResolver);
+    super(store, injector, cd);
     this.entitiesTableConfig = this.route.snapshot.data.entitiesTableConfig;
     this.backNavigationCommands = this.route.snapshot.data.backNavigationCommands;
   }
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
index 407f41c0c1..391c4bb0d0 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<tb-details-panel fxFlex
+<tb-details-panel class="flex-1"
                    [headerTitle]="entitiesTableConfig.entityTitle(entity)"
                    headerSubtitle="{{ translations.details | translate }}"
                    [isReadOnly]="entitiesTableConfig.detailsReadonly(entity)"
@@ -27,7 +27,7 @@
   <div class="details-buttons">
     <div [tb-help]="helpLinkId()"></div>
   </div>
-  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
+  <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill flex-1" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
     <mat-tab label="{{ 'details.details' | translate }}">
       <tb-anchor #entityDetailsForm></tb-anchor>
     </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
index 1ec56028af..3c47058cfe 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
@@ -19,7 +19,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentFactoryResolver,
   ComponentRef,
   EventEmitter,
   Injector,
@@ -97,8 +96,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements AfterV
 
   constructor(protected store: Store<AppState>,
               protected injector: Injector,
-              protected cd: ChangeDetectorRef,
-              protected componentFactoryResolver: ComponentFactoryResolver) {
+              protected cd: ChangeDetectorRef) {
     super(store);
   }
 
@@ -167,7 +165,6 @@ export class EntityDetailsPanelComponent extends PageComponent implements AfterV
       this.entityComponentRef.destroy();
       this.entityComponentRef = null;
     }
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.entityComponent);
     const viewContainerRef = this.entityDetailsFormAnchor.viewContainerRef;
     viewContainerRef.clear();
     const injector: Injector = Injector.create(
@@ -185,7 +182,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements AfterV
         parent: this.injector
       }
     );
-    this.entityComponentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
+    this.entityComponentRef = viewContainerRef.createComponent(this.entitiesTableConfig.entityComponent, {index: 0, injector});
     this.entityComponent = this.entityComponentRef.instance;
     this.entityComponent.isEdit = this.isEdit;
     this.detailsForm = this.entityComponent.entityForm;
@@ -207,8 +204,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements AfterV
     viewContainerRef.clear();
     this.entityTabsComponent = null;
     if (this.entitiesTableConfig.entityTabsComponent) {
-      const componentTabsFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.entityTabsComponent);
-      this.entityTabsComponentRef = viewContainerRef.createComponent(componentTabsFactory);
+      this.entityTabsComponentRef = viewContainerRef.createComponent(this.entitiesTableConfig.entityTabsComponent);
       this.entityTabsComponent = this.entityTabsComponentRef.instance;
       this.entityTabsComponent.isEdit = this.isEdit;
       this.entityTabsComponent.entitiesTableConfig = this.entitiesTableConfig;
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
index 5c0321c1e2..c262ef1dc3 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter-view.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="tb-entity-filter-view">
+<div class="tb-entity-filter-view flex flex-col">
   <div *ngIf="!filter || !filter.type; else filterView" class="entity-filter-empty" translate>alias.no-entity-filter-specified</div>
   <ng-template #filterView>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="entity-filter-value">{{ filterDisplayValue }}</div>
     </div>
   </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
index d1b39a8748..6b7f358310 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
+<div [formGroup]="entityFilterFormGroup" class="tb-entity-filter flex flex-col">
   <mat-form-field class="mat-block">
     <mat-label translate>alias.filter-type</mat-label>
     <mat-select required formControlName="type">
@@ -27,7 +27,7 @@
       {{ 'alias.filter-type-required' | translate }}
     </mat-error>
   </mat-form-field>
-  <section fxLayout="column" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
+  <section class="flex flex-col" [formGroup]="filterFormGroup" [ngSwitch]="entityFilterFormGroup.get('type').value">
     <ng-template [ngSwitchCase]="aliasFilterType.singleEntity">
       <tb-entity-select required
                         useAliasEntityTypes="true"
@@ -78,9 +78,9 @@
         <input matInput formControlName="stateEntityParamName"
                placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
       </mat-form-field>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           useAliasEntityTypes="true"
                           formControlName="defaultStateEntity">
         </tb-entity-select>
@@ -192,42 +192,42 @@
                                  entityFilterFormGroup.get('type').value === aliasFilterType.entityViewSearchQuery ?
                                  entityFilterFormGroup.get('type').value : ''">
       <label class="tb-small">{{ 'alias.root-entity' | translate }}</label>
-      <section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
+      <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
         <mat-slide-toggle class="root-state-entity-switch"
                           formControlName="rootStateEntity">
         </mat-slide-toggle>
         <label class="tb-small root-state-entity-label" translate>alias.root-state-entity</label>
       </section>
-      <div fxFlex fxLayout="row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
-        <tb-entity-select fxFlex
+      <div class="flex flex-1 flex-row" *ngIf="!filterFormGroup.get('rootStateEntity').value">
+        <tb-entity-select class="flex-1"
                           required
                           useAliasEntityTypes="true"
                           formControlName="rootEntity">
         </tb-entity-select>
       </div>
-      <div fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="filterFormGroup.get('rootStateEntity').value">
+      <div class="flex flex-1 flex-col gt-sm:flex-row" *ngIf="filterFormGroup.get('rootStateEntity').value">
         <mat-form-field floatLabel="always" class="mat-block" style="margin-top: 24px; padding-right: 8px;">
           <mat-label translate>alias.state-entity-parameter-name</mat-label>
           <input matInput formControlName="stateEntityParamName"
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}">
         </mat-form-field>
-        <div fxFlex fxLayout="column">
+        <div class="flex flex-1 flex-col">
           <label class="tb-small">{{ 'alias.default-state-entity' | translate }}</label>
-          <tb-entity-select fxFlex
+          <tb-entity-select class="flex-1"
                             useAliasEntityTypes="true"
                             formControlName="defaultStateEntity">
           </tb-entity-select>
         </div>
       </div>
-      <div fxFlex fxLayout="row">
-        <section class="tb-root-state-entity-switch" fxLayout="row" fxLayoutAlign="start center" style="padding-left: 0;">
+      <div class="flex flex-1 flex-row">
+        <section class="tb-root-state-entity-switch flex flex-row items-center justify-start" style="padding-left: 0;">
           <mat-slide-toggle class="root-state-entity-switch"
                             formControlName="fetchLastLevelOnly">
           </mat-slide-toggle>
           <label class="tb-small root-state-entity-label" translate>alias.last-level-relation</label>
         </section>
       </div>
-      <div fxFlex fxLayoutGap="8px" fxLayout="row" fxLayout.xs="column">
+      <div class="flex flex-1 flex-row gap-2 xs:flex-col">
         <mat-form-field class="mat-block" style="min-width: 100px;">
           <mat-label translate>relation.direction</mat-label>
           <mat-select required formControlName="direction">
@@ -236,7 +236,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex floatLabel="always" class="mat-block">
+        <mat-form-field floatLabel="always" class="mat-block flex-1">
           <mat-label translate>alias.max-relation-level</mat-label>
           <input matInput
                  type="number"
@@ -248,7 +248,7 @@
       </div>
       <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>
       <tb-relation-type-autocomplete
-        fxFlex
+        class="flex-1"
         formControlName="relationType">
       </tb-relation-type-autocomplete>
     </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
index 4f0b916545..87cd22b7d8 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>{{ title }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           [mat-dialog-close]="false"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content fxLayout="column">
+<div mat-dialog-content class="flex flex-col">
   <div #eventContentEditor class="tb-event-content">
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
-  <span fxFlex></span>
+<div mat-dialog-actions class="flex flex-row">
+  <span class="flex-1"></span>
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index 51e7269550..31eac384d5 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="tb-filter" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
-  <div fxLayout="column" class="tb-filter-container mat-padding">
+<form class="tb-filter flex flex-col" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
+  <div class="tb-filter-container mat-padding flex flex-col">
     <ng-container *ngFor="let column of showColumns">
       <ng-container [ngSwitch]="column.key">
         <ng-template [ngSwitchCase]="isSelector(column.key)">
@@ -46,7 +46,7 @@
           </tb-checkbox>
         </ng-template>
         <ng-template [ngSwitchCase]="'errorStr'">
-          <mat-form-field fxHide [fxShow]="showErrorMsgFields()">
+          <mat-form-field [class.!hidden]="!showErrorMsgFields()">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" name="errorSearchText" formControlName="errorStr">
           </mat-form-field>
@@ -60,7 +60,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div fxLayout="row" class="tb-panel-actions mat-padding" fxLayoutAlign="end center">
+  <div class="tb-panel-actions mat-padding flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
index a499300dea..d3d9121032 100644
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
         {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="max-w-70% flex-full"
                              [valueType]="valueTypeEnum.BOOLEAN"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index 2d9ae17eb9..62f3521543 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2 translate>filter.complex-filter</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,7 +26,7 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async"  class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>filter.operation.operation</mat-label>
         <mat-select required formControlName="operation">
@@ -46,7 +46,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
index 57224e434f..78f4a7badf 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div class="flex flex-1 flex-row items-center justify-start gap-2">
   <mat-label translate>filter.complex-filter</mat-label>
   <button mat-icon-button color="primary"
           class="tb-mat-32"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index f71ee78e5e..9d3c120ddb 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'filter.add' : 'filter.edit') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,9 +29,9 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <div fxLayout="row">
-          <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-1 flex-col">
+        <div class="flex flex-row">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>filter.name</mat-label>
             <input matInput formControlName="filter" required>
             <mat-error *ngIf="filterFormGroup.get('filter').hasError('required')">
@@ -41,7 +41,7 @@
               {{ 'filter.duplicate-filter' | translate }}
             </mat-error>
           </mat-form-field>
-          <section class="tb-editable-switch" fxLayout="column" fxLayoutAlign="start center">
+          <section class="tb-editable-switch flex flex-col items-center justify-start">
             <label class="tb-small editable-label" translate>filter.editable</label>
             <mat-slide-toggle class="editable-switch"
                               formControlName="editable">
@@ -54,7 +54,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions  class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
index c664967b3e..2e9f12da2b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@@ -15,41 +15,41 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" [formGroup]="filterListFormGroup">
+<section class="flex flex-col" [formGroup]="filterListFormGroup">
   <mat-expansion-panel [expanded]="true">
     <mat-expansion-panel-header>
       <mat-panel-title>
         <div translate>filter.filters</div>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div fxLayout="row">
-      <span fxFlex="8"></span>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="92">
-        <div fxFlex fxLayout="row" fxLayoutGap="8px">
-          <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <label fxFlex translate class="tb-title no-padding">filter.operation.operation</label>
+    <div class="flex flex-row">
+      <span class="max-w-8% flex-full"></span>
+      <div class="flex max-w-92% flex-full flex-row items-center justify-start gap-2">
+        <div class="flex flex-1 flex-row gap-2">
+          <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
+            <label translate class="tb-title no-padding flex-1">filter.operation.operation</label>
             <label *ngIf="valueType === valueTypeEnum.STRING"
                    translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
           </div>
-          <label fxFlex="70" translate class="tb-title no-padding">filter.value</label>
+          <label translate class="tb-title no-padding max-w-70% flex-full">filter.value</label>
         </div>
         <label *ngIf="displayUserParameters"
                translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
-        <span [fxShow]="!disabled" style="min-width: 40px;">&nbsp;</span>
+        <span [class.!hidden]="disabled" style="min-width: 40px;">&nbsp;</span>
       </div>
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div fxLayout="row" fxLayoutAlign="start" style="height: 76px;"
+      <div class="flex flex-row items-stretch justify-start" style="height: 76px;"
            formArrayName="predicates"
            *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
-        <div fxFlex="8" fxLayout="row" fxLayoutAlign="center" class="filters-operation">
+        <div class="filters-operation flex max-w-8% flex-full flex-row items-stretch justify-center">
           <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
         </div>
-        <div fxLayout="column" fxFlex="92">
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex>
+        <div class="flex max-w-92% flex-full flex-col">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <tb-filter-predicate
-              fxFlex
+              class="flex-1"
               [valueType]="valueType"
               [displayUserParameters]="displayUserParameters"
               [allowUserDynamicSource]="allowUserDynamicSource"
@@ -58,7 +58,7 @@
               [formControl]="predicateControl">
             </tb-filter-predicate>
             <button mat-icon-button color="primary"
-                    [fxShow]="!disabled"
+                    [class.!hidden]="disabled"
                     type="button"
                     (click)="removePredicate($index)"
                     matTooltip="{{ 'filter.remove-filter' | translate }}"
@@ -68,13 +68,13 @@
           </div>
         </div>
       </div>
-      <span [fxShow]="!predicatesFormArray.length"
-            fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-            class="no-data-found" translate>filter.no-filters</span>
+      <span [class.!hidden]="!!predicatesFormArray.length"
+            [class.disabled]="disabled"
+            class="no-data-found flex items-center justify-center" translate>filter.no-filters</span>
     </div>
-    <div style="margin-top: 16px;" fxLayout="row" fxLayoutGap="8px">
+    <div style="margin-top: 16px;" class="flex flex-row gap-2">
       <button mat-button mat-raised-button color="primary"
-              [fxShow]="!disabled"
+              [class.!hidden]="disabled"
               (click)="addPredicate(false)"
               type="button"
               matTooltip="{{ 'filter.add-filter' | translate }}"
@@ -82,7 +82,7 @@
         {{ 'action.add' | translate }}
       </button>
       <button mat-button mat-raised-button color="primary"
-              [fxShow]="!disabled"
+              [class.!hidden]="disabled"
               (click)="addPredicate(true)"
               type="button"
               matTooltip="{{ 'filter.add-complex-filter' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index c6ae39f295..6784a63e2a 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateValueFormGroup">
-  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode && !onlyUserDynamicSource">
-    <div fxLayout="column" [ngSwitch]="valueType">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateValueFormGroup">
+  <div class="flex flex-1 flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
+    <div class="flex flex-col" [ngSwitch]="valueType">
       <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
@@ -43,9 +43,9 @@
     </div>
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
-  <div fxFlex fxLayout="column" [fxShow]="dynamicMode || onlyUserDynamicSource">
-    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <div fxFlex="35" fxLayout="column">
+  <div class="flex flex-col" [class.!hidden]="!dynamicMode && !onlyUserDynamicSource">
+    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+      <div class="flex max-w-35% flex-full flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -58,14 +58,14 @@
         </mat-form-field>
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
       </div>
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
         <div class="tb-hint" translate>filter.source-attribute</div>
       </div>
       <div *ngIf="!allow && inheritMode"
-           fxLayout="column"
+           class="flex flex-col"
            style="padding-top: 6px">
         <mat-checkbox formControlName="inherit">
           {{ 'filter.inherit-owner' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
index 0faced041e..372702a20d 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateFormGroup">
-  <div fxFlex fxLayout="column" [ngSwitch]="type">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="filterPredicateFormGroup">
+  <div class="flex flex-1 flex-col" [ngSwitch]="type">
     <ng-template [ngSwitchCase]="filterPredicateType.STRING">
       <tb-string-filter-predicate
         [allowUserDynamicSource]="allowUserDynamicSource"
@@ -52,7 +52,7 @@
   </div>
   <tb-filter-user-info *ngIf="type !== filterPredicateType.COMPLEX && displayUserParameters"
                        style="width: 60px;"
-                       fxLayout="row" fxLayoutAlign="center"
+                       class="flex flex-row items-stretch justify-center"
                        [valueType]="valueType"
                        [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
                        [key]="key"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
index 43001b3a62..6858a96435 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-text.component.html
@@ -15,5 +15,5 @@
     limitations under the License.
 
 -->
-<div class="tb-filter-text" [ngClass]="{disabled: disabled, required: requiredClass, nowrap: nowrap}"
+<div class="tb-filter-text" [class.disabled]="disabled" [class.required]="requiredClass" [class.nowrap]="nowrap"
      [innerHTML]="filterText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 9c037a5195..d44e8fb12f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filterUserInfoFormGroup" (ngSubmit)="save()" style="width: 500px;">
   <mat-toolbar color="primary">
     <h2>{{(data.readonly ? 'filter.filter-user-params' : 'filter.edit-filter-user-params') | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,12 +26,12 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-checkbox formControlName="editable" style="margin-bottom: 16px;">
         {{ 'filter.editable' | translate }}
       </mat-checkbox>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>filter.display-label</mat-label>
           <input matInput formControlName="label">
         </mat-form-field>
@@ -45,7 +45,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index dafcd7900c..109ebafe7f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filtersFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -27,30 +27,27 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-filters-header" fxLayout="row" fxLayoutAlign="start center">
-      <span fxFlex="5"></span>
-      <div fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-        <div class="tb-header-label" translate fxFlex>filter.filter</div>
-        <div class="tb-header-label" translate fxFlex="80px"
-             fxLayout="column" fxLayoutAlign="center center"
+    <div class="tb-filters-header flex flex-row items-center justify-start">
+      <span class="max-w-5% flex-full"></span>
+      <div class="flex max-w-95% flex-full flex-row items-center justify-start">
+        <div class="tb-header-label flex-1" translate>filter.filter</div>
+        <div class="tb-header-label flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center" translate
              style="padding-left: 5px;">filter.editable</div>
         <div style="min-width: 132px;"></div>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center"
+      <div class="flex flex-1 flex-row items-center justify-start"
            formArrayName="filters"
            *ngFor="let filterControl of filtersFormArray().controls; let $index = index">
-        <span fxFlex="5">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-filter" fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-          <mat-label fxFlex>{{filterControl.get('filter').value}}</mat-label>
-          <section fxFlex="80px" style="padding-left: 10px;"
-                   class="tb-editable-switch"
-                   fxLayout="column"
-                   fxLayoutAlign="center center">
+        <span class="max-w-5% flex-full">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-filter flex max-w-95% flex-full flex-row items-center justify-start">
+          <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
+          <section style="padding-left: 10px;"
+                   class="tb-editable-switch flex min-w-20 max-w-20 flex-1 basis-20 flex-col items-center justify-center">
             <mat-slide-toggle class="editable-switch"
                               [formControl]="filterControl.get('editable')">
             </mat-slide-toggle>
@@ -90,13 +87,13 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addFilter()"
-            [fxShow]="!disableAdd"
+            [class.!hidden]="disableAdd"
             [disabled]="isLoading$ | async"
             matTooltip="{{ 'filter.add' | translate }}"
             matTooltipPosition="above">
       {{ 'filter.add' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
index 0264381e82..9710b7bf3f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <mat-label fxFlex>{{filter.value.filter}}</mat-label>
+    <div class="flex flex-row items-center justify-start">
+      <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
       <button mat-icon-button color="primary"
               style="min-width: 40px;"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
index 4f475bdf7a..fc661d1cac 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-filters-edit" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasEditableFilters">
+<section class="tb-filters-edit flex flex-row items-center justify-start" *ngIf="hasEditableFilters">
   <button mat-icon-button
           cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
@@ -23,7 +23,7 @@
           [matTooltipPosition]="tooltipPosition">
     <mat-icon>filter_list</mat-icon>
   </button>
-  <span fxHide.lt-lg
+  <span class="lt-lg:!hidden"
         (click)="openEditMode()"
         matTooltip="{{ 'filter.filters' | translate }}"
         [matTooltipPosition]="tooltipPosition">
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index 6692189704..2b4ed91214 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,10 +26,15 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
-      <section fxLayout="row" fxLayoutGap="8px" class="entity-key">
-        <section [fxFlex]="isConstantKeyType ? 45 : 70" fxLayout="row" formGroupName="key" fxLayoutGap="8px">
-          <mat-form-field fxFlex="40" class="mat-block">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
+      <section class="entity-key flex flex-row gap-2">
+        <section class="flex flex-full flex-row gap-2"
+                 [class]="{
+                    'max-w-45%': isConstantKeyType,
+                    'max-w-70%': !isConstantKeyType
+                 }"
+                 formGroupName="key">
+          <mat-form-field class="mat-block max-w-40% flex-full">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of entityKeyTypes" [value]="type">
@@ -37,7 +42,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex="60" class="mat-block">
+          <mat-form-field class="mat-block max-w-60% flex-full">
             <mat-label translate>filter.key-name</mat-label>
             <input matInput required formControlName="key"
                    #keyNameInput
@@ -60,7 +65,11 @@
             </mat-error>
           </mat-form-field>
         </section>
-        <mat-form-field [fxFlex]="isConstantKeyType ? 20 : 30" class="mat-block tb-value-type">
+        <mat-form-field class="mat-block tb-value-type flex-full"
+                        [class]="{
+                          'max-w-20%': isConstantKeyType,
+                          'max-w-30%': !isConstantKeyType
+                        }">
           <mat-label translate>filter.value-type.value-type</mat-label>
           <mat-select formControlName="valueType">
             <mat-select-trigger>
@@ -76,8 +85,8 @@
             {{ 'filter.value-type-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <div fxFlex *ngIf="isConstantKeyType">
-          <div fxLayout="column" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
+        <div class="flex-1" *ngIf="isConstantKeyType">
+          <div class="flex flex-col" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
             <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.STRING">
               <mat-form-field class="mat-block">
                 <mat-label translate>filter.value</mat-label>
@@ -114,7 +123,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
index df14546754..96936acbae 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" [formGroup]="keyFilterListFormGroup">
+<section class="flex flex-col" [formGroup]="keyFilterListFormGroup">
   <mat-accordion [multi]="true">
     <mat-expansion-panel [expanded]="true">
       <mat-expansion-panel-header>
@@ -23,27 +23,27 @@
           <div translate>filter.key-filters</div>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <div fxLayout="row">
-        <span fxFlex="8"></span>
-        <div fxLayout="row" fxLayoutAlign="start center" fxFlex="92">
-          <label fxFlex translate class="tb-title no-padding">filter.key-name</label>
-          <label fxFlex translate class="tb-title no-padding">filter.key-type.key-type</label>
-          <span [fxShow]="!disabled" style="min-width: 80px;">&nbsp;</span>
-          <span [fxShow]="disabled" style="min-width: 40px;">&nbsp;</span>
+      <div class="flex flex-row">
+        <span class="max-w-8% flex-full"></span>
+        <div class="flex max-w-92% flex-full flex-row items-center justify-start">
+          <label translate class="tb-title no-padding flex-1">filter.key-name</label>
+          <label translate class="tb-title no-padding flex-1">filter.key-type.key-type</label>
+          <span [class.!hidden]="disabled" style="min-width: 80px;">&nbsp;</span>
+          <span [class.!hidden]="!disabled" style="min-width: 40px;">&nbsp;</span>
         </div>
       </div>
       <mat-divider></mat-divider>
       <div class="key-filter-list">
-        <div fxLayout="row" fxLayoutAlign="start" style="max-height: 76px;"
+        <div class="flex flex-row items-stretch justify-start" style="max-height: 76px;"
              formArrayName="keyFilters"
              *ngFor="let keyFilterControl of keyFiltersFormArray.controls; let $index = index">
-          <div fxFlex="8" class="filters-operation">
+          <div class="filters-operation max-w-8% flex-full">
             <span *ngIf="$index > 0" translate>filter.operation.and</span>
           </div>
-          <div fxLayout="column" fxFlex="92">
-            <div fxLayout="row" fxLayoutAlign="start center">
-              <div fxFlex>{{ keyFilterControl.value.key.key }}</div>
-              <div fxFlex>{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
+          <div class="flex max-w-92% flex-full flex-col">
+            <div class="flex flex-row items-center justify-start">
+              <div class="flex-1">{{ keyFilterControl.value.key.key }}</div>
+              <div class="flex-1">{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
               <button mat-icon-button color="primary"
                       type="button"
                       (click)="editKeyFilter($index)"
@@ -52,7 +52,7 @@
                 <mat-icon>{{disabled ? 'more_vert' : 'edit'}}</mat-icon>
               </button>
               <button mat-icon-button color="primary"
-                      [fxShow]="!disabled"
+                      [class.!hidden]="disabled"
                       type="button"
                       (click)="removeKeyFilter($index)"
                       matTooltip="{{ 'filter.remove-key-filter' | translate }}"
@@ -63,13 +63,13 @@
             <mat-divider></mat-divider>
           </div>
         </div>
-        <span [fxShow]="!keyFiltersFormArray.length"
-              fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-              class="no-data-found" translate>filter.no-key-filters</span>
+        <span [class.!hidden]="!!keyFiltersFormArray.length"
+              [class.disabled]="disabled"
+              class="no-data-found flex items-center justify-center" translate>filter.no-key-filters</span>
       </div>
       <div style="margin-top: 16px;">
         <button mat-button mat-raised-button color="primary"
-                [fxShow]="!disabled"
+                [class.!hidden]="disabled"
                 (click)="addKeyFilter()"
                 type="button"
                 matTooltip="{{ 'filter.add-key-filter' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
index e2bec1a194..ef8fc5b181 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block max-w-30% flex-full">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of numericOperations" [value]="operation">
         {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="max-w-70% flex-full"
                              [valueType]="valueType"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
index c2888fa06f..8ed736f79c 100644
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="stringFilterPredicateFormGroup">
-  <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-    <mat-form-field hideRequiredMarker fxFlex class="mat-block">
+<div class="flex flex-1 flex-row items-start justify-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
+  <div class="flex max-w-30% flex-full flex-row items-center justify-start gap-2">
+    <mat-form-field hideRequiredMarker class="mat-block flex-1">
       <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
         <mat-option *ngFor="let operation of stringOperations" [value]="operation">
           {{stringOperationTranslations.get(stringOperationEnum[operation]) | translate}}
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-checkbox fxLayout="row" fxLayoutAlign="center" formControlName="ignoreCase" style="min-width: 70px;">
+    <mat-checkbox class="flex flex-row items-stretch justify-center" formControlName="ignoreCase" style="min-width: 70px;">
     </mat-checkbox>
   </div>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="max-w-70% flex-full"
                              [valueType]="valueTypeEnum.STRING"
                              [operation]="stringFilterPredicateFormGroup.get('operation').value"
                              formControlName="value">
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index 03c42e788d..c5b19aac1f 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="userFilterFormGroup" (ngSubmit)="save()" style="width: 400px;">
   <mat-toolbar color="primary">
     <h2>{{ filter.filter }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -60,7 +60,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts
index a562002ac1..32e509e842 100644
--- a/ui-ngx/src/app/modules/home/components/home-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts
@@ -182,6 +182,7 @@ import {
   SelectDashboardBreakpointComponent
 } from '@home/components/dashboard-page/layout/select-dashboard-breakpoint.component';
 import { EntityChipsComponent } from '@home/components/entity/entity-chips.component';
+import { DashboardViewComponent } from '@home/components/dashboard-view/dashboard-view.component';
 
 @NgModule({
   declarations:
@@ -324,7 +325,8 @@ import { EntityChipsComponent } from '@home/components/entity/entity-chips.compo
       RateLimitsTextComponent,
       RateLimitsDetailsDialogComponent,
       SendNotificationButtonComponent,
-      EntityChipsComponent
+      EntityChipsComponent,
+      DashboardViewComponent
     ],
   imports: [
     CommonModule,
@@ -460,7 +462,8 @@ import { EntityChipsComponent } from '@home/components/entity/entity-chips.compo
     RateLimitsTextComponent,
     RateLimitsDetailsDialogComponent,
     SendNotificationButtonComponent,
-    EntityChipsComponent
+    EntityChipsComponent,
+    DashboardViewComponent
   ],
   providers: [
     WidgetComponentService,
diff --git a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html
index d5b76e7be5..ae35b1eef2 100644
--- a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html
@@ -16,5 +16,5 @@
 
 -->
 <button mat-icon-button #showNotificationButton (click)="showNotification($event, showNotificationButton)">
-  <mat-icon class="material-icons" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications</mat-icon>
+  <mat-icon class="material-icons" aria-hidden="false" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications</mat-icon>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
index 6ad39f1a91..dbce8894c1 100644
--- a/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/send-notification-button.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div *ngIf="show()" fxLayout="row" fxLayoutAlign="end end" style="height: 100%; padding: 0 16px;">
-  <button fxHide.lt-md mat-flat-button color="primary" (click)="sendNotification($event)">
+<div *ngIf="show()" class="flex flex-row items-end justify-end" style="height: 100%; padding: 0 16px;">
+  <button class="lt-md:!hidden" mat-flat-button color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
     <span translate>notification.send-notification</span>
   </button>
-  <button class="mat-elevation-z0" fxHide.gt-sm mat-mini-fab color="primary" (click)="sendNotification($event)">
+  <button class="mat-elevation-z0 gt-sm:!hidden" mat-mini-fab color="primary" (click)="sendNotification($event)">
     <mat-icon>send</mat-icon>
   </button>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
index d96739a5cf..0e40d8e6a5 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between center" style="margin: 0 10px 4px; min-height: 36px">
+<section class="flex flex-row items-center justify-between" style="margin: 0 10px 4px; min-height: 36px">
   <div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
   <button mat-button color="primary"
           *ngIf="(notifications$ | async).length"
@@ -37,8 +37,8 @@
     </section>
   </div>
   <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
-  <section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
-    <button fxFlex mat-button color="primary" (click)="viewAll($event)">
+  <section class="flex items-center justify-center" *ngIf="(notifications$ | async).length">
+    <button class="flex-1" mat-button color="primary" (click)="viewAll($event)">
       {{ 'notification.view-all' | translate }}
     </button>
   </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index 3b45e4dcfb..e5519990e8 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>device-profile.add</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div [tb-help]="'deviceProfiles'"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -27,7 +27,7 @@
 </mat-toolbar>
 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
 </mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
 <div mat-dialog-content>
   <mat-horizontal-stepper [linear]="true"
                           #addDeviceProfileStepper
@@ -67,7 +67,7 @@
             [ruleChainType]="edgeRuleChainType">
             <span tb-hint>{{'device-profile.default-edge-rule-chain-hint' | translate}}</span>
           </tb-rule-chain-autocomplete>
-          <mat-form-field fxHide class="mat-block">
+          <mat-form-field class="mat-block !hidden">
             <mat-label translate>device-profile.type</mat-label>
             <mat-select formControlName="type" required>
               <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@@ -78,7 +78,7 @@
               {{ 'device-profile.type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <tb-gallery-image-input fxFlex
+          <tb-gallery-image-input class="flex-1"
                           label="{{'device-profile.image' | translate}}"
                           formControlName="image">
           </tb-gallery-image-input>
@@ -134,11 +134,11 @@
   </mat-horizontal-stepper>
 </div>
 <div mat-dialog-actions style="padding: 0">
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end">
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-stroked-button
             color="primary"
             *ngIf="showNext"
@@ -146,7 +146,7 @@
             (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
   </div>
   <mat-divider style="width: 100%"></mat-divider>
-  <div class="dialog-actions-row" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end center">
+  <div class="dialog-actions-row flex flex-1 flex-row items-center justify-end gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts
index e6a2a1c7fd..cee7426e26 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts
@@ -14,16 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
-  AfterViewInit,
-  Component,
-  ComponentFactoryResolver,
-  Inject,
-  Injector,
-  SkipSelf,
-  ViewChild
-} from '@angular/core';
-import { ErrorStateMatcher } from '@angular/material/core';
+import { Component, Inject, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -68,7 +59,7 @@ export interface AddDeviceProfileDialogData {
   styleUrls: ['./add-device-profile-dialog.component.scss']
 })
 export class AddDeviceProfileDialogComponent extends
-  DialogComponent<AddDeviceProfileDialogComponent, DeviceProfile> implements AfterViewInit {
+  DialogComponent<AddDeviceProfileDialogComponent, DeviceProfile> {
 
   @ViewChild('addDeviceProfileStepper', {static: true}) addDeviceProfileStepper: MatStepper;
   stepperOrientation: Observable<StepperOrientation>;
@@ -105,10 +96,7 @@ export class AddDeviceProfileDialogComponent extends
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: AddDeviceProfileDialogData,
               public dialogRef: MatDialogRef<AddDeviceProfileDialogComponent, DeviceProfile>,
-              private componentFactoryResolver: ComponentFactoryResolver,
-              private injector: Injector,
               private breakpointObserver: BreakpointObserver,
-              @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private deviceProfileService: DeviceProfileService,
               private fb: UntypedFormBuilder) {
     super(store, router, dialogRef);
@@ -162,9 +150,6 @@ export class AddDeviceProfileDialogComponent extends
       {transportConfiguration: createDeviceProfileTransportConfiguration(deviceTransportType)});
   }
 
-  ngAfterViewInit(): void {
-  }
-
   cancel(): void {
     this.dialogRef.close(null);
   }
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
index 4de4aa5764..20e543c4a4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="alarmDurationPredicateValueFormGroup">
-  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode">
+<div class="flex flex-1 flex-row items-center justify-start gap-2" [formGroup]="alarmDurationPredicateValueFormGroup">
+  <div class="flex flex-1 flex-col" [class.!hidden]="dynamicMode">
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
       <input required type="number" matInput
              step="1" min="1" max="2147483647"
@@ -36,9 +36,9 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div fxFlex fxLayout="column" [fxShow]="dynamicMode">
-    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <div fxFlex="40" fxLayout="column">
+  <div class="flex flex-1 flex-col" [class.!hidden]="!dynamicMode">
+    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+      <div class="flex max-w-40% flex-full flex-col">
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -50,13 +50,13 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <mat-form-field class="mat-block source-attribute" subscriptSizing="dynamic">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
       </div>
       <div *ngIf="inheritMode"
-           fxLayout="column"
+           class="flex flex-col"
            style="padding-top: 6px">
         <mat-checkbox formControlName="inherit">
           {{ 'filter.inherit-owner' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
index 066398877f..e32766f3a4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-dynamic-value.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex>
+<mat-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm flex-1" style = "margin-bottom: 26px;">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{'filter.dynamic-value' | translate}}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxFlex fxLayout="column">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div fxFlex="40" fxLayout="column">
+    <div class="flex flex-1 flex-col">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <div class="flex max-w-40% flex-full flex-col">
           <mat-form-field class="mat-block">
             <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
               <mat-option [value]="null">
@@ -41,7 +41,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="column">
+        <div class="flex flex-1 flex-col">
           <mat-form-field class="mat-block source-attribute">
             <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
index a159202485..1179c3037d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <tb-key-filter-list
           [displayUserParameters]="false"
           [allowUserDynamicSource]="false"
@@ -49,13 +49,14 @@
               {{ 'device-profile.condition-type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4" *ngIf="conditionFormGroup.get('spec.type').value != AlarmConditionType.SIMPLE">
             <tb-alarm-duration-predicate-value
-              fxLayout="row" fxFlex formControlName="predicate"
+              class="flex flex-1 flex-row"
+              formControlName="predicate"
               [alarmConditionType]="conditionFormGroup.get('spec.type').value"
             >
             </tb-alarm-duration-predicate-value>
-            <div fxFlex="23" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
+            <div class="max-w-23% flex-full" *ngIf="conditionFormGroup.get('spec.type').value == AlarmConditionType.DURATION">
               <mat-form-field class="mat-block" subscriptSizing="dynamic">
                 <mat-select formControlName="unit" required
                             placeholder="{{ 'device-profile.condition-duration-time-unit' | translate }}">
@@ -73,7 +74,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
index ae94002037..74b1a01f93 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
+<div class="flex flex-row items-center justify-start" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
   <span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
-  <div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center">
+  <div class="tb-alarm-rule-condition flex flex-1 flex-col items-stretch justify-center">
     <tb-filter-text formControlName="condition"
                     [nowrap]="true"
                     required
                     addFilterPrompt="{{'device-profile.enter-alarm-rule-condition-prompt' | translate}}">
     </tb-filter-text>
-    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [ngClass]="{disabled: this.disabled}" [innerHTML]="specText">
+    <span *ngIf="specText" class="tb-alarm-rule-condition-spec" [class.disabled]="disabled" [innerHTML]="specText">
     </span>
   </div>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
index 1282821ca7..9e296cdea7 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" [formGroup]="alarmRuleFormGroup">
+<div class="flex flex-col" [formGroup]="alarmRuleFormGroup">
   <tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId">
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" fxLayout="row" fxLayoutAlign="start center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('alarmDetails').value" class="flex flex-row items-center justify-start">
     <span class="tb-alarm-rule-details title" (click)="openEditDetailsDialog($event)">
       {{ ('device-profile.alarm-rule-additional-info' | translate) + ': ' }}
     </span>
@@ -35,8 +35,7 @@
       <mat-icon>{{ disabled ? 'visibility' : (alarmRuleFormGroup.get('alarmDetails').value ? 'edit' : 'add') }}</mat-icon>
     </button>
   </div>
-  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" fxLayout="column" fxLayoutAlign="start start"
-       fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center">
+  <div *ngIf="!disabled || alarmRuleFormGroup.get('dashboardId').value" class="flex flex-col items-start justify-start gt-sm:flex-row gt-sm:items-center">
     <span class="tb-alarm-rule-dashboard title">
       {{ ('device-profile.alarm-rule-mobile-dashboard' | translate) + ': ' }}
     </span>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
index 99807094cb..24be59e26e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -32,7 +32,7 @@
       formControlName="alarmSchedule">
     </tb-alarm-schedule>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
index 4255a4c90b..a2a3c96e03 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-info.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" style="min-width: 0;">
+<div class="flex flex-row items-center justify-start" style="min-width: 0;">
   <span class="tb-alarm-rule-schedule title" (click)="openScheduleDialog($event)">{{('device-profile.schedule' | translate) + ': '}}</span>
   <span class="tb-alarm-rule-schedule" (click)="openScheduleDialog($event)"
        [innerHTML]="scheduleText">
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
index e9f46a8f90..a58cdc72db 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="alarmScheduleForm" fxLayout="column">
+<section [formGroup]="alarmScheduleForm" class="flex flex-col">
   <mat-form-field class="mat-block">
     <mat-select formControlName="type" required placeholder="{{ 'device-profile.schedule-type' | translate }}">
       <mat-option *ngFor="let alarmScheduleType of alarmScheduleTypes" [value]="alarmScheduleType">
@@ -35,13 +35,13 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.SPECIFIC_TIME">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_specific_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div fxLayout="column" fxLayout.gt-md="row" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayoutGap="8px">
+      <div class="flex flex-col gap-2 gt-md:flex-row">
+        <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of firstRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
         </div>
-        <div fxLayout="row" fxLayoutGap="8px">
+        <div class="flex flex-row gap-2">
           <mat-checkbox *ngFor="let day of secondRowDays" [formControl]="weeklyRepeatControl(day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
@@ -50,22 +50,22 @@
       <tb-error style="display: block;" [error]="alarmScheduleForm.get('daysOfWeek').hasError('dayOfWeeks')
                   ? ('device-profile.schedule-days-of-week-required' | translate) : ''"></tb-error>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-time</div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-        <div fxLayout="row" fxLayoutGap="8px" fxFlex.gt-md>
-          <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <div class="flex flex-row gap-2 gt-md:flex-1">
+          <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
             <mat-label translate>device-profile.schedule-time-from</mat-label>
             <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
           </mat-form-field>
-          <mat-form-field fxFlex.xs fxFlex.sm="150px" fxFlex.md="150px" fxFlex.gt-md>
+          <mat-form-field class="flex-1 sm:min-w-37.5 sm:max-w-37.5 sm:basis-37.5 md:min-w-37.5 md:max-w-37.5 md:basis-37.5">
             <mat-label translate>device-profile.schedule-time-to</mat-label>
             <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
             <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
             <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
           </mat-form-field>
         </div>
-        <div fxFlex fxLayoutAlign="center center" style="margin: auto">
+        <div class="flex flex-1 items-center justify-center" style="margin: auto">
           <div style="text-align: center"
                [innerHTML]="getSchedulerRangeText(alarmScheduleForm)">
           </div>
@@ -75,26 +75,26 @@
     <section *ngIf="alarmScheduleForm.get('type').value === alarmScheduleType.CUSTOM">
       <tb-alarm-dynamic-value formControlName = 'dynamicValue' helpId = 'device-profile/alarm_custom_schedule_format'></tb-alarm-dynamic-value>
       <div class="tb-small" style="margin-bottom: 0.5em" translate>device-profile.schedule-days</div>
-      <div *ngFor="let day of allDays" fxLayout="column" formArrayName="items" fxLayoutGap="1em">
-        <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px" [formGroupName]="''+day" fxLayoutAlign="start center" fxLayoutAlign.xs="center start">
-          <mat-checkbox formControlName="enabled" fxFlex="17" (change)="changeCustomScheduler($event, day)">
+      <div *ngFor="let day of allDays" class="flex flex-col gap-4" formArrayName="items">
+        <div class="flex flex-row items-center justify-start gap-2 xs:flex-col xs:items-start xs:justify-center" [formGroupName]="''+day">
+          <mat-checkbox formControlName="enabled" class="max-w-17% flex-full" (change)="changeCustomScheduler($event, day)">
             {{ dayOfWeekTranslationsArray[day] | translate }}
           </mat-checkbox>
-          <div fxLayout="row" fxLayoutGap="8px" fxFlex>
-            <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
+          <div class="flex flex-1 flex-row gap-2">
+            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
               <mat-label translate>device-profile.schedule-time-from</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="startsOn" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
-            <mat-form-field fxFlex.xs fxFlex.sm="100px" fxFlex.md="100px">
+            <mat-form-field class="xs:flex-1 sm:min-w-25 sm:max-w-25 sm:flex-1 sm:basis-25 md:min-w-25 md:max-w-25 md:flex-1 md:basis-25">
               <mat-label translate>device-profile.schedule-time-to</mat-label>
               <mat-datetimepicker-toggle [for]="endTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #endTimePicker type="time" openOnFocus="true"></mat-datetimepicker>
               <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
             </mat-form-field>
           </div>
-          <div fxFlex fxLayoutAlign="center center"
+          <div class="flex flex-1 items-center justify-center"
                style="text-align: center"
                [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
           </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
index ec3d40e09e..36e1e97678 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
+<div class="flex flex-1 flex-col">
   <div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-               fxLayoutGap="8px" style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
-    <div class="create-alarm-rule" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
+               last as isLast;" class="flex flex-row items-center justify-start gap-2"
+               style="padding-bottom: 8px;" [formGroup]="createAlarmRuleControl">
+    <div class="create-alarm-rule flex flex-1 flex-row items-stretch justify-start gap-2">
       <mat-form-field class="severity mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>alarm.severity</mat-label>
         <mat-select formControlName="severity"
@@ -35,7 +35,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required fxFlex>
+      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required class="flex-1">
       </tb-alarm-rule>
     </div>
     <button *ngIf="!disabled"
@@ -48,7 +48,7 @@
     </button>
   </div>
   <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
-      <span translate fxLayoutAlign="center center" style="margin: 16px 0"
+      <span translate class="flex items-center justify-center" style="margin: 16px 0"
             class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
   </div>
   <div *ngIf="!disabled">
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index 502d80fb31..eb3f06d85b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="device-profile-alarm" fxFlex [formGroup]="alarmFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="device-profile-alarm flex-1" [formGroup]="alarmFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ alarmTypeTitle }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeAlarm.emit()"
@@ -34,9 +34,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <mat-form-field fxFlex floatLabel="always">
+      <mat-form-field class="flex-1" floatLabel="always">
         <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
         <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
         <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
@@ -53,7 +53,7 @@
     <mat-expansion-panel class="advanced-settings" [expanded]="false">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+          <div class="flex flex-1 flex-row items-center justify-end">
             <div class="tb-small" translate>device-profile.advanced-settings</div>
           </div>
         </mat-panel-title>
@@ -89,18 +89,18 @@
         </mat-checkbox>
       </ng-template>
     </mat-expansion-panel>
-    <div fxFlex fxLayout="column">
+    <div class="flex flex-1 flex-col">
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
       <tb-create-alarm-rules formControlName="createRules"
                              style="padding-bottom: 16px;"
                              [deviceProfileId]="deviceProfileId">
       </tb-create-alarm-rules>
       <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
-      <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
-           [fxShow]="alarmFormGroup.get('clearRule').value"
+      <div class="flex flex-row items-center justify-start gap-2"
+           [class.!hidden]="!alarmFormGroup.get('clearRule').value"
            style="padding-bottom: 8px;">
-        <div class="clear-alarm-rule" fxFlex fxLayout="row">
-          <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
+        <div class="clear-alarm-rule flex flex-1 flex-row">
+          <tb-alarm-rule formControlName="clearRule" class="flex-1" [deviceProfileId]="deviceProfileId">
           </tb-alarm-rule>
         </div>
         <button *ngIf="!disabled"
@@ -113,10 +113,10 @@
         </button>
       </div>
       <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
-        <span translate fxLayoutAlign="center center" style="margin: 16px 0"
-              class="tb-prompt">device-profile.no-clear-alarm-rule</span>
+        <span translate style="margin: 16px 0"
+              class="tb-prompt flex items-center justify-center">device-profile.no-clear-alarm-rule</span>
       </div>
-      <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
+      <div *ngIf="!disabled" [class.!hidden]="alarmFormGroup.get('clearRule').value">
         <button mat-stroked-button color="primary"
                 type="button"
                 (click)="addClearAlarmRule()"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
index db3433da8a..2f1bf140ea 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div class="tb-device-profile-alarms">
     <div *ngFor="let alarmControl of alarmsFormArray.controls; trackBy: trackByAlarm;
                  let $index = index; last as isLast;"
-         fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+         class="flex flex-col" [class.pb-2]="!isLast">
       <tb-device-profile-alarm [formControl]="alarmControl"
                                [expanded]="$index === 0"
                                [deviceProfileId]="deviceProfileId"
@@ -28,8 +28,8 @@
     </div>
   </div>
   <div *ngIf="!alarmsFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">device-profile.no-alarm-rules</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">device-profile.no-alarm-rules</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
index 50e7c5cb69..1fe91175b1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
   <mat-toolbar color="primary">
     <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <mat-form-field class="mat-block">
           <textarea matInput formControlName="alarmDetails" rows="5"
             placeholder="{{ 'device-profile.alarm-rule-additional-info-placeholder' | translate }}"></textarea>
@@ -38,7 +38,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
index 50cca1710e..f55fbfb001 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
@@ -25,7 +25,7 @@
          (keydown)="assetProfileEnter($event)"
          (keypress)="assetProfileEnter($event)"
          [matAutocomplete]="assetProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !useAssetProfileLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value">
+         [class.!hidden]="showDetailsPageLink && useAssetProfileLink && disabled && selectAssetProfileFormGroup.get('assetProfile').value">
   <a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
      aria-label="Open asset profile" [routerLink]=assetProfileURL>
     {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
index 4c3893732e..4ac7ec4eda 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-asset-profile>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.ts
index 0c726bf3d6..e69b1cf2ce 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.ts
@@ -14,20 +14,12 @@
 /// limitations under the License.
 ///
 
-import {
-  AfterViewInit,
-  Component,
-  ComponentFactoryResolver,
-  Inject,
-  Injector,
-  SkipSelf,
-  ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, Inject, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { AssetProfile } from '@shared/models/asset.models';
@@ -59,8 +51,6 @@ export class AssetProfileDialogComponent extends
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogData,
               public dialogRef: MatDialogRef<AssetProfileDialogComponent, AssetProfile>,
-              private componentFactoryResolver: ComponentFactoryResolver,
-              private injector: Injector,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private assetProfileService: AssetProfileService) {
     super(store, router, dialogRef);
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
index 67f3bcdf13..ae90421cb0 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile.component.html
@@ -15,43 +15,43 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'asset-profile.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'asset-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'asset-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>asset-profile.copyId</span>
     </button>
   </div>
 </div>
-<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
+<div [class.mat-padding]="!standalone" class="flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
@@ -83,7 +83,7 @@
         [ruleChainType]="edgeRuleChainType">
         <span tb-hint>{{'asset-profile.default-edge-rule-chain-hint' | translate}}</span>
       </tb-rule-chain-autocomplete>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'asset-profile.image' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
index cae46d2864..fc24273b78 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
@@ -25,7 +25,7 @@
          (keydown)="deviceProfileEnter($event)"
          (keypress)="deviceProfileEnter($event)"
          [matAutocomplete]="deviceProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !useDeviceProfileLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value">
+         [class.!hidden]="showDetailsPageLink && useDeviceProfileLink && disabled && selectDeviceProfileFormGroup.get('deviceProfile').value">
   <a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
      aria-label="Open device profile" [routerLink]=deviceProfileURL>
     {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
index ed1704e47d..d9066a7fd6 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 1000px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-device-profile>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.ts
index 4622bc2d3a..27e4ff95f1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.ts
@@ -14,20 +14,12 @@
 /// limitations under the License.
 ///
 
-import {
-  AfterViewInit,
-  Component,
-  ComponentFactoryResolver,
-  Inject,
-  Injector,
-  SkipSelf,
-  ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, Inject, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { DeviceProfile } from '@shared/models/device.models';
@@ -59,8 +51,6 @@ export class DeviceProfileDialogComponent extends
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: DeviceProfileDialogData,
               public dialogRef: MatDialogRef<DeviceProfileDialogComponent, DeviceProfile>,
-              private componentFactoryResolver: ComponentFactoryResolver,
-              private injector: Injector,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private deviceProfileService: DeviceProfileService) {
     super(store, router, dialogRef);
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index dd184a36e6..9793146eb5 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -35,7 +35,7 @@
       <ng-container *ngTemplateOutlet="default"></ng-container>
     </ng-template>
     <ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
-      <div fxFlex fxLayoutAlign="start center" class="tb-hint">
+      <div class="tb-hint flex flex-1 items-center justify-start">
         <span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
         <span tb-help-popup="device-profile/x509-chain-hint"
              tb-help-popup-placement="top"
@@ -69,8 +69,8 @@
       </mat-form-field>
     </ng-template>
     <ng-template #default>
-      <section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">
-        <mat-form-field fxFlex class="mat-block">
+      <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>device-profile.provision-device-key</mat-label>
           <input matInput formControlName="provisionDeviceKey" required/>
           <button matSuffix mat-icon-button
@@ -85,7 +85,7 @@
             {{ 'device-profile.provision-device-key-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>device-profile.provision-device-secret</mat-label>
           <input matInput formControlName="provisionDeviceSecret" required/>
           <button matSuffix mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
index 10c1349b40..ef5f4809ae 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html
@@ -15,43 +15,43 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'device-profile.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'device-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'device-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>device-profile.copyId</span>
     </button>
   </div>
 </div>
-<div [ngClass]="{'mat-padding': !standalone}" fxLayout="column">
+<div [class.mat-padding]="!standalone" class="flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
@@ -97,7 +97,7 @@
         [deviceProfileId]="deviceProfileId?.id"
         formControlName="softwareId">
       </tb-ota-package-autocomplete>
-      <mat-form-field fxHide class="mat-block">
+      <mat-form-field class="mat-block !hidden">
         <mat-label translate>device-profile.type</mat-label>
         <mat-select formControlName="type" required>
           <mat-option *ngFor="let type of deviceProfileTypes" [value]="type">
@@ -108,7 +108,7 @@
           {{ 'device-profile.type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'device-profile.image' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
index 89cc3d8be9..b3ef45c672 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.html
@@ -19,7 +19,7 @@
   <section formGroupName="coapDeviceTypeConfiguration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.coap-device-type</legend>
-      <div fxLayoutGap="8px" fxLayout="column">
+      <div class="flex flex-col gap-2">
         <mat-form-field class="mat-block">
           <mat-select formControlName="coapDeviceType" required>
             <mat-option *ngFor="let type of coapTransportDeviceTypes" [value]="type">
@@ -35,7 +35,7 @@
     <div *ngIf="coapDeviceTypeDefault" formGroupName="transportPayloadTypeConfiguration">
       <fieldset class="fields-group">
         <legend class="group-title" translate>device-profile.coap-device-payload-type</legend>
-        <div fxLayoutGap="8px" fxLayout="column">
+        <div class="flex flex-col gap-2">
           <mat-form-field class="mat-block">
             <mat-select formControlName="transportPayloadType" required>
               <mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@@ -46,10 +46,10 @@
               {{ 'device-profile.mqtt-payload-type-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <div *ngIf="protoPayloadType" fxLayout="column">
+          <div *ngIf="protoPayloadType" class="flex flex-col">
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceTelemetryProtoSchema"
                 label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -60,7 +60,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceAttributesProtoSchema"
                 label="{{ 'device-profile.attributes-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -71,7 +71,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceRpcRequestProtoSchema"
                 label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
                 [fillHeight]="true">
@@ -82,7 +82,7 @@
             </ng-container>
             <ng-container>
               <tb-protobuf-content
-                fxFlex
+                class="flex-1"
                 formControlName="deviceRpcResponseProtoSchema"
                 label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
                 [fillHeight]="true">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html b/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
index 2b8dc0023c..237aad2d1a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/common/power-mode-setting.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="parentForm">
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode" | translate }}</mat-label>
     <mat-select formControlName="powerMode">
       <mat-option [value]="null" *ngIf="isDeviceSetting">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
@@ -25,7 +25,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <section class="mat-block" fxFlex *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
+  <section class="mat-block flex-1" *ngIf="parentForm.get('powerMode').value === 'E_DRX'">
     <tb-time-unit-select [labelText]="'device-profile.edrx-cycle'"
                          [requiredText]="'device-profile.edrx-cycle-required'"
                          [patternText]="'device-profile.edrx-cycle-pattern'"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html b/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
index e21d7b67a0..b69af5fa30 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/common/time-unit-select.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section [formGroup]="timeUnitSelectFormGroup" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-  <mat-form-field class="mat-block" fxFlex>
+<section [formGroup]="timeUnitSelectFormGroup" class="flex flex-row xs:flex-col gt-xs:gap-2">
+  <mat-form-field class="mat-block flex-1">
     <mat-label>{{ labelText | translate }}</mat-label>
     <input matInput type="number" min="0" formControlName="time" required>
     <mat-error *ngIf="timeUnitSelectFormGroup.get('time').hasError('required')">
@@ -29,7 +29,7 @@
       {{ (minText || patternText) | translate : {min: minTime/1000} }}
     </mat-error>
   </mat-form-field>
-  <mat-form-field class="mat-block" fxFlex>
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>device-profile.condition-duration-time-unit</mat-label>
     <mat-select formControlName="unit">
       <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
index 1dd9d4ccfd..cf2848648a 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
@@ -20,7 +20,7 @@
     <h2>
       {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
     </h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -35,7 +35,7 @@
       formControlName="attributes">
     </tb-lwm2m-attributes-key-list>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
index 107ea8e15f..e06289305f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" class="name-value-map" [formGroup]="attributesValueFormGroup">
-  <div fxLayout="row" fxLayoutGap="8px" style="max-height: 40px; margin-top: 8px;">
-    <label fxFlex="40" class="tb-title no-padding" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
-    <label fxFlex="60" class="tb-title no-padding" translate>device-profile.lwm2m.attribute-value</label>
-    <span [fxShow]="!disabled" style="width: 40px;"></span>
+<section class="name-value-map flex flex-col" [formGroup]="attributesValueFormGroup">
+  <div class="flex flex-row gap-2" style="max-height: 40px; margin-top: 8px;">
+    <label class="tb-title no-padding max-w-40% flex-full" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
+    <label class="tb-title no-padding max-w-60% flex-full" translate>device-profile.lwm2m.attribute-value</label>
+    <span [class.!hidden]="disabled" style="width: 40px;"></span>
   </div>
-  <div fxLayout="column" class="map-list"
+  <div class="map-list flex flex-col"
        *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
         [formGroup]="nameValueControl">
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field fxFlex="40">
+    <div class="flex flex-row items-center justify-start gap-2">
+      <mat-form-field class="max-w-40% flex-full">
         <mat-select formControlName="name" required>
           <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
                       [disabled]="isDisabledAttributeName(attributeName, $index)">
@@ -36,13 +36,13 @@
           {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="60">
+      <mat-form-field class="max-w-60% flex-full">
         <input formControlName="value" matInput required type="number"
                placeholder="{{ 'key-val.value' | translate }}">
-        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('required')">
+        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('required')">
           {{ 'device-profile.lwm2m.attribute-value-required' | translate }}
         </mat-error>
-        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('min') ||
+        <mat-error class="flex flex-row" *ngIf="nameValueControl.get('value').hasError('min') ||
                                           nameValueControl.get('value').hasError('pattern')">
           {{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
         </mat-error>
@@ -57,9 +57,8 @@
       </button>
     </div>
   </div>
-  <div [fxShow]="!attributesValueFormArray().length"
-        fxLayoutAlign="center center"
-        class="map-list" translate>device-profile.lwm2m.no-attributes-set</div>
+  <div [class.!hidden]="attributesValueFormArray().length"
+        class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
   <div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
index c2337b53f6..e8c7175b85 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [fxHide]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
+<div [class.!hidden]="disabled && isEmpty()" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
   <button type="button"
           [disabled]="isDisableBtn()"
           mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
index de728f7c6b..4bf371bd86 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
@@ -16,17 +16,17 @@
 
 -->
 <form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>device-profile.lwm2m.add-new-server-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+  <div mat-dialog-content class="flex flex-col">
     <mat-form-field>
       <mat-label>{{ 'device-profile.lwm2m.server-type' | translate }}</mat-label>
       <mat-select formControlName="serverType">
@@ -37,8 +37,8 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
index ce07156e2c..21953a1350 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-config-servers.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <mat-accordion multi="true">
     <div *ngFor="let serverConfig of serverConfigsFromArray.controls; trackBy: trackByParams; let $index = index;">
       <tb-profile-lwm2m-device-config-server
@@ -27,8 +27,8 @@
     </div>
   </mat-accordion>
   <div *ngIf="!serverConfigsFromArray.controls.length" style="margin:32px 0">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">device-profile.lwm2m.no-config-servers</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">device-profile.lwm2m.no-config-servers</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
index 43ff1078af..e760a17518 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-config-server.component.html
@@ -17,12 +17,12 @@
 -->
 <mat-expansion-panel [formGroup]="serverFormGroup" #serverPanel>
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div style="min-width:150px">{{ (serverFormGroup.get('bootstrapServerIs').value ?
             'device-profile.lwm2m.bootstrap-server' : 'device-profile.lwm2m.lwm2m-server') | translate }}</div>
-          <div *ngIf="!serverPanel.expanded" fxLayout="row" style="font-size:14px" class="no-wrap">
+          <div *ngIf="!serverPanel.expanded" style="font-size:14px" class="no-wrap flex flex-row">
             <div style="margin-left:32px">{{ ('device-profile.lwm2m.short-id' | translate) + ': ' }}
               <span style="font-style: italic">{{ serverFormGroup.get('shortServerId').value }}</span>
             </div>
@@ -32,7 +32,7 @@
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex="100"></span>
+      <span class="flex-full"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeServer.emit($event)"
@@ -44,8 +44,8 @@
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
     <section>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
           <mat-select formControlName="securityMode">
             <mat-option *ngFor="let securityMode of securityConfigLwM2MTypes"
@@ -54,7 +54,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{ (isBootstrap ? 'device-profile.lwm2m.short-id-tooltip-bootstrap': 'device-profile.lwm2m.short-id-tooltip') | translate }}">help</mat-icon>
@@ -71,15 +71,15 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
           <input matInput type="text" formControlName="host" required>
           <mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
             {{ 'device-profile.lwm2m.server-host-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
           <input matInput type="number" formControlName="port" required min="0" max="65535" readonly>
           <mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
@@ -94,8 +94,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tooltip' | translate }}">help</mat-icon>
@@ -108,7 +108,7 @@
             {{ 'device-profile.lwm2m.client-hold-off-time-pattern' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.account-after-timeout' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.account-after-timeout-tooltip' | translate }}">help</mat-icon>
@@ -140,8 +140,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
           <input matInput type="number" min="0" formControlName="lifetime" required>
           <mat-error *ngIf="serverFormGroup.get('lifetime').hasError('required')">
@@ -152,7 +152,7 @@
             {{ 'device-profile.lwm2m.lifetime-pattern' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
           <mat-icon *ngIf="!disabled" class="mat-primary" aria-hidden="false" aria-label="help-icon" matSuffix style="cursor:pointer;"
                     matTooltip="{{'device-profile.lwm2m.default-min-period-tooltip' | translate }}">help</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
index 22920a609c..75a9725f0b 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.html
@@ -33,7 +33,7 @@
     </mat-tab>
     <mat-tab label="{{ 'device-profile.lwm2m.bootstrap-tab' | translate }}">
       <section [formGroup]="lwm2mDeviceProfileFormGroup">
-        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" fxLayout="row" fxLayoutAlign="start end">
+        <div *ngIf="!isTransportWasRunWithBootstrap" style="padding:16px 0 0 8px;" class="flex flex-row items-end justify-start">
           <mat-icon color="warn" class="material-icons" style="margin-right:8px;">warning</mat-icon>
           <span style="font-weight:500">LwM2M transport was run without bootstrap server</span>
         </div>
@@ -53,7 +53,7 @@
         <section formGroupName="clientLwM2mSettings">
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.fw-update</legend>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label>{{ 'device-profile.lwm2m.fw-update-strategy' | translate }}</mat-label>
               <mat-select formControlName="fwUpdateStrategy">
                 <mat-option [value]=1>{{ 'device-profile.lwm2m.fw-update-strategy-package' | translate }}</mat-option>
@@ -61,7 +61,7 @@
                 <mat-option [value]=3>{{ 'device-profile.lwm2m.fw-update-strategy-data' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
+            <mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateStrategy').value === 2">
               <mat-label>{{ 'device-profile.lwm2m.fw-update-resource' | translate }}</mat-label>
               <input matInput formControlName="fwUpdateResource" required>
               <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.fwUpdateResource').hasError('required')">
@@ -71,14 +71,14 @@
           </fieldset>
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.sw-update</legend>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label>{{ 'device-profile.lwm2m.sw-update-strategy' | translate }}</mat-label>
               <mat-select formControlName="swUpdateStrategy">
                 <mat-option [value]=1>{{ 'device-profile.lwm2m.sw-update-strategy-package' | translate }}</mat-option>
                 <mat-option [value]=2>{{ 'device-profile.lwm2m.sw-update-strategy-package-uri' | translate }}</mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
+            <mat-form-field class="mat-block flex-1" *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateStrategy').value === 2">
               <mat-label>{{ 'device-profile.lwm2m.sw-update-resource' | translate }}</mat-label>
               <input matInput formControlName="swUpdateResource" required>
               <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('clientLwM2mSettings.swUpdateResource').hasError('required')">
@@ -93,7 +93,7 @@
           </fieldset>
           <fieldset class="fields-group">
             <legend class="group-title" translate>device-profile.lwm2m.default-object-id</legend>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-select formControlName="defaultObjectIDVer">
                 <mat-option *ngFor="let objectIDVer of objectIDVers" [value]="objectIDVer">
                   {{ objectIDVerTranslationMap.get(objectIDVer) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
index db65feed15..0071858983 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       </tb-profile-lwm2m-object-add-instances-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
index ef973c37ee..2f53ebaaec 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-instances.component.html
@@ -24,11 +24,11 @@
       [expanded]="isExpend"
       [disabled]="isExpend">
       <mat-expansion-panel-header>
-        <mat-panel-title class="tb-panel" fxLayout="row">
-          <div fxFlex="30" fxLayoutAlign="start center">
+        <mat-panel-title class="tb-panel flex flex-row">
+          <div class="flex max-w-30% flex-full items-center justify-start">
             <span class="tb-panel-title">{{ 'device-profile.lwm2m.instance' | translate }}</span>&nbsp;#{{instances.get('id').value}}
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="warn"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'attribute')"
@@ -37,7 +37,7 @@
                           [indeterminate]="getIndeterminate(instances, 'attribute')">
             </mat-checkbox>
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="primary"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'telemetry')"
@@ -46,7 +46,7 @@
                           [indeterminate]="getIndeterminate(instances, 'telemetry')">
             </mat-checkbox>
           </div>
-          <div fxLayoutAlign="center center" fxFlex="10">
+          <div class="flex max-w-10% flex-full items-center justify-center">
             <mat-checkbox color="primary"
                           [disabled]="disableObserve(instances)"
                           [checked]="getChecked(instances, 'observe')"
@@ -55,7 +55,7 @@
                           [indeterminate]="getIndeterminate(instances, 'observe')">
             </mat-checkbox>
           </div>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             [isAttributeTelemetry]="disableObserveInstance(instances)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
index e4a6f0877f..7d7be1a104 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry-resources.component.html
@@ -16,53 +16,53 @@
 
 -->
 <section [formGroup]="resourcesFormGroup">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div fxFlex="30">
+  <div class="flex flex-row items-center justify-start">
+    <div class="max-w-30% flex-full">
       <mat-label translate>device-profile.lwm2m.resource-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title max-w-10% flex-full">
       <mat-label translate>device-profile.lwm2m.attribute-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title max-w-10% flex-full">
       <mat-label translate>device-profile.lwm2m.telemetry-label</mat-label>
     </div>
-    <div fxFlex="10" class="checkbox-column-title">
+    <div class="checkbox-column-title max-w-10% flex-full">
       <mat-label translate>device-profile.lwm2m.observe-label</mat-label>
     </div>
-    <div fxFlex>
+    <div class="flex-1">
       <mat-label translate>device-profile.lwm2m.key-name</mat-label>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div formArrayName="resources"
     *ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams">
-    <div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list">
-      <div class="resource-name" fxFlex="30">
+    <div [formGroupName]="$index" class="resource-list flex flex-row items-center justify-start">
+      <div class="resource-name max-w-30% flex-full">
         #{{resourceLwM2M.get('id').value}} <span class="name">{{resourceLwM2M.get('name').value}}</span>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex max-w-10% flex-full items-center justify-center">
         <mat-checkbox formControlName="attribute" color="warn">
         </mat-checkbox>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
+      <div class="flex max-w-10% flex-full items-center justify-center">
         <mat-checkbox formControlName="telemetry" color="primary">
         </mat-checkbox>
       </div>
-      <div fxFlex="10" fxLayoutAlign="center center">
-        <mat-checkbox fxFlex="10" formControlName="observe" color="primary"
+      <div class="flex max-w-10% flex-full items-center justify-center">
+        <mat-checkbox class="max-w-10% flex-full" formControlName="observe" color="primary"
                       matTooltip="{{ 'device-profile.lwm2m.edit-observe-select'  | translate }}"
                       [matTooltipDisabled]="disabled || !isDisabledObserve($index)"
                       matTooltipPosition="above">
         </mat-checkbox>
       </div>
-      <mat-form-field fxFlex="33">
+      <mat-form-field class="max-w-33% flex-full">
         <input matInput type="text" formControlName="keyName" required>
         <mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required') ||
                             resourceLwM2M.get('keyName').hasError('pattern')">
           {{ 'device-profile.lwm2m.key-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <tb-profile-lwm2m-attributes
         formControlName="attributes"
         [isAttributeTelemetry]="isDisabledObserve($index)"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
index 90a574271e..a4564ea26e 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-observe-attr-telemetry.component.html
@@ -21,9 +21,9 @@
       *ngFor="let objectLwM2M of modelsFormArray.controls; let $index = index; trackBy: trackByParams"
       [formGroupName]="$index">
       <mat-expansion-panel-header >
-        <mat-panel-title fxLayoutAlign="start center" >
+        <mat-panel-title class="flex items-center justify-start">
           <span class="tb-panel-title">{{ objectLwM2M.get('name').value}}</span>&nbsp;#{{ objectLwM2M.get('keyId').value}}
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <tb-profile-lwm2m-attributes
             formControlName="attributes"
             [modelName]="getNameObject(objectLwM2M.value)">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index 433a4f8d0d..2c11e6e9d1 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -34,9 +34,9 @@
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">
     <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
-    <div fxLayoutGap="8px" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-        <mat-form-field fxFlex>
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-row gap-2 xs:flex-col">
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceTelemetryTopic"
@@ -51,7 +51,7 @@
             {{ 'device-profile.not-valid-multi-character' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.attributes-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceAttributesTopic"
@@ -66,7 +66,7 @@
             {{ 'device-profile.not-valid-multi-character' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label translate>device-profile.attributes-subscribe-topic-filter</mat-label>
           <input matInput required
                  formControlName="deviceAttributesSubscribeTopic"
@@ -93,7 +93,7 @@
   <section formGroupName="transportPayloadTypeConfiguration">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.mqtt-device-payload-type</legend>
-      <div fxLayoutGap="8px" fxLayout="column">
+      <div class="flex flex-col gap-2">
         <mat-form-field class="mat-block">
           <mat-select formControlName="transportPayloadType" required>
             <mat-option *ngFor="let type of transportPayloadTypes" [value]="type">
@@ -116,10 +116,10 @@
             <div class="tb-hint" innerHTML="{{ 'device-profile.mqtt-use-json-format-for-default-downlink-topics-hint' | translate }}"></div>
           </div>
         </div>
-        <div *ngIf="protoPayloadType" fxLayout="column">
+        <div *ngIf="protoPayloadType" class="flex flex-col">
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceTelemetryProtoSchema"
               label="{{ 'device-profile.telemetry-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -130,7 +130,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceAttributesProtoSchema"
               label="{{ 'device-profile.attributes-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -141,7 +141,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceRpcRequestProtoSchema"
               label="{{ 'device-profile.rpc-request-proto-schema' | translate }}"
               [fillHeight]="true">
@@ -152,7 +152,7 @@
           </ng-container>
           <ng-container>
             <tb-protobuf-content
-              fxFlex
+              class="flex-1"
               formControlName="deviceRpcResponseProtoSchema"
               label="{{ 'device-profile.rpc-response-proto-schema' | translate }}"
               [fillHeight]="true">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
index de80b9f238..4d9208cfa3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-       fxLayoutGap="8px" class="scope-row" [formGroup]="deviceProfileCommunication">
+               last as isLast;"
+       class="scope-row flex flex-row items-center justify-start gap-2" [formGroup]="deviceProfileCommunication">
     <div class="communication-config">
       <mat-form-field class="spec mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.scope</mat-label>
@@ -33,7 +33,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <section fxFlex fxLayout="column">
+      <section class="flex flex-1 flex-col">
         <mat-form-field *ngIf="isShowFrequency(deviceProfileCommunication.get('spec').value)">
           <mat-label translate>device-profile.snmp.querying-frequency</mat-label>
           <input matInput formControlName="queryingFrequencyMs" type="number" min="0" required/>
@@ -59,7 +59,7 @@
     </button>
   </div>
   <div *ngIf="!communicationConfigFormArray.controls.length && !disabled">
-      <span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-communication-config</span>
+      <span class="tb-prompt required required-text flex items-center justify-center" translate>device-profile.snmp.please-add-communication-config</span>
   </div>
   <div *ngIf="!disabled && isAddEnabled">
     <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
index 8b4b656c02..89b66c4036 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" class="mapping-config">
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="100">
-    <div fxFlex fxLayout="row" fxLayoutGap="8px">
-      <label fxFlex="26" class="tb-title no-padding" translate>device-profile.snmp.data-type</label>
-      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.data-key</label>
-      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.oid</label>
-      <span style="min-width: 40px" [fxShow]="!disabled"></span>
+<div class="mapping-config flex flex-1 flex-col">
+  <div class="flex flex-full flex-row items-center justify-start gap-2">
+    <div class="flex flex-1 flex-row gap-2">
+      <label class="tb-title no-padding max-w-26% flex-full" translate>device-profile.snmp.data-type</label>
+      <label class="tb-title tb-required no-padding max-w-37% flex-full" translate>device-profile.snmp.data-key</label>
+      <label class="tb-title tb-required no-padding max-w-37% flex-full" translate>device-profile.snmp.oid</label>
+      <span style="min-width: 40px" [class.!hidden]="disabled"></span>
     </div>
   </div>
   <mat-divider></mat-divider>
   <div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
-               last as isLast;" fxLayout="row" fxLayoutAlign="start center"
-       fxLayoutGap="8px" [formGroup]="mappingConfig" class="mapping-list">
-    <div class="tb-layout-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
-      <mat-form-field fxFlex="26">
+               last as isLast;"
+       [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
+    <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
+      <mat-form-field class="max-w-26% flex-full">
         <mat-select formControlName="dataType" required>
           <mat-option *ngFor="let dataType of dataTypes" [value]="dataType">
             {{ dataTypesTranslationMap.get(dataType) | translate }}
@@ -39,13 +39,13 @@
           {{ 'device-profile.snmp.data-type-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="37">
+      <mat-form-field class="max-w-37% flex-full">
         <input matInput formControlName="key" required/>
         <mat-error *ngIf="mappingConfig.get('key').hasError('required')">
           {{ 'device-profile.snmp.data-key-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex="37">
+      <mat-form-field class="max-w-37% flex-full">
         <input matInput formControlName="oid" required/>
         <mat-error *ngIf="mappingConfig.get('oid').hasError('required')">
           {{ 'device-profile.snmp.oid-required' | translate }}
@@ -65,7 +65,7 @@
     </div>
   </div>
   <div *ngIf="!mappingsConfigFormArray.controls.length && !disabled">
-      <span fxLayoutAlign="center center" class="tb-prompt required required-text" translate>device-profile.snmp.please-add-mapping-config</span>
+      <span class="tb-prompt required required-text flex items-center justify-center" translate>device-profile.snmp.please-add-mapping-config</span>
   </div>
   <div *ngIf="!disabled">
     <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
index be9d8e0973..4f84e7438c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.html
@@ -16,8 +16,8 @@
 
 -->
 <form [formGroup]="snmpDeviceProfileTransportConfigurationFormGroup" style="padding: 8px 0 16px;">
-  <section fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-    <mat-form-field fxFlex>
+  <section class="flex flex-row gap-2 xs:flex-col">
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.timeout-ms</mat-label>
       <input matInput formControlName="timeoutMs" type="number" min="0" required/>
       <mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('timeoutMs').hasError('required')">
@@ -28,7 +28,7 @@
         {{ 'device-profile.snmp.timeout-ms-invalid-format' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.retries</mat-label>
       <input matInput formControlName="retries" type="number" min="0" required/>
       <mat-error *ngIf="snmpDeviceProfileTransportConfigurationFormGroup.get('retries').hasError('required')">
diff --git a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
index 89e1e91c3c..c343edaa35 100644
--- a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
+<div class="flex flex-col">
   <div class="tb-tenant-profile-queues"
        *ngFor="let queuesControl of queuesFormArray.controls; trackBy: trackByQueue;
        let $index = index; last as isLast;"
-       [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-    <mat-expansion-panel fxFlex [expanded]="true">
+       [class.pb-2]="!isLast">
+    <mat-expansion-panel class="flex-1" [expanded]="true">
       <mat-expansion-panel-header>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <mat-panel-title>
             {{ getTitle(queuesControl.value.name) }}
           </mat-panel-title>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;"
                   type="button"
                   (click)="removeQueue($index)"
@@ -42,8 +42,8 @@
     </mat-expansion-panel>
   </div>
   <div *ngIf="!queuesFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">tenant-profile.no-queue</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">tenant-profile.no-queue</span>
   </div>
   <div *ngIf="!disabled" style="padding-top: 16px;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
index 75ea30c884..b49fe5fbfe 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-autocomplete.component.html
@@ -25,7 +25,7 @@
          (keydown)="tenantProfileEnter($event)"
          (keypress)="tenantProfileEnter($event)"
          [matAutocomplete]="tenantProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !disabled || !selectTenantProfileFormGroup.get('tenantProfile').value">
+         [class.!hidden]="showDetailsPageLink && disabled && selectTenantProfileFormGroup.get('tenantProfile').value">
   <a *ngIf="showDetailsPageLink && selectTenantProfileFormGroup.get('tenantProfile').value && disabled" aria-label="Open tenant profile" [routerLink]=tenantProfileURL>
     {{ displayTenantProfileFn(selectTenantProfileFormGroup.get('tenantProfile').value) }}
   </a>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
index 1d8c0ce26d..a140987f5d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 650px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [isEdit]="true">
     </tb-tenant-profile>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.ts
index 9face5403b..7a5453912d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.ts
@@ -14,20 +14,12 @@
 /// limitations under the License.
 ///
 
-import {
-  AfterViewInit,
-  Component,
-  ComponentFactoryResolver,
-  Inject,
-  Injector,
-  SkipSelf,
-  ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, Inject, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import { TenantProfile } from '@shared/models/tenant.model';
@@ -59,8 +51,6 @@ export class TenantProfileDialogComponent extends
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: TenantProfileDialogData,
               public dialogRef: MatDialogRef<TenantProfileDialogComponent, TenantProfile>,
-              private componentFactoryResolver: ComponentFactoryResolver,
-              private injector: Injector,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               private tenantProfileService: TenantProfileService) {
     super(store, router, dialogRef);
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
index 8c18506680..267b56c4db 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setDefault')"
-          [fxShow]="!isEdit && !entity?.default">
+          [class.!hidden]="isEdit || entity?.default">
     {{'tenant-profile.set-default' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'tenant-profile.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantProfileIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>tenant-profile.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block" appearance="fill">
@@ -58,7 +58,7 @@
           {{ 'tenant-profile.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <mat-checkbox class="hinted-checkbox" formControlName="isolatedTbRuleEngine">
           <div>{{ 'tenant.isolated-tb-rule-engine' | translate }}</div>
           <div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 31724191cf..d511125eec 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -15,13 +15,13 @@
     limitations under the License.
 
 -->
-<section [formGroup]="defaultTenantProfileConfigurationFormGroup" fxLayout="column">
+<section [formGroup]="defaultTenantProfileConfigurationFormGroup" class="flex flex-col">
   <fieldset class="fields-group">
     <legend class="group-title">
       {{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-devices</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDevices"
@@ -34,7 +34,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-dashboards</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDashboards"
@@ -48,8 +48,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-assets</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxAssets"
@@ -62,7 +62,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-users</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxUsers"
@@ -78,13 +78,13 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-customers</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxCustomers"
@@ -97,7 +97,7 @@
             </mat-error>
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-rule-chains</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleChains"
@@ -119,8 +119,8 @@
     <legend class="group-title">
       {{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-r-e-executions</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxREExecutions"
@@ -133,7 +133,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-transport-messages</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxTransportMessages"
@@ -149,13 +149,13 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-j-s-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxJSExecutions"
@@ -168,7 +168,7 @@
             </mat-error>
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-tbel-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTbelExecutions"
@@ -182,8 +182,8 @@
             <mat-hint></mat-hint>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleNodeExecutionsPerMessage"
@@ -196,7 +196,7 @@
             </mat-error>
             <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-transport-data-points</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTransportDataPoints"
@@ -218,8 +218,8 @@
     <legend class="group-title">
       {{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDPStorageDays"
@@ -232,7 +232,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.alarms-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="alarmsTtlDays"
@@ -246,8 +246,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="defaultStorageTtlDays"
@@ -260,7 +260,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rpc-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="rpcTtlDays"
@@ -274,8 +274,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.queue-stats-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="queueStatsTtlDays"
@@ -288,7 +288,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rule-engine-exceptions-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="ruleEngineExceptionsTtlDays"
@@ -308,10 +308,10 @@
     <legend class="group-title">
       {{ 'tenant-profile.alarms-and-notifications' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <mat-slide-toggle class="slide-toggle-element" fxFlex formControlName="smsEnabled">
+    <mat-slide-toggle class="slide-toggle-element flex-1" formControlName="smsEnabled">
       {{ 'tenant-profile.sms-enabled' | translate }}
     </mat-slide-toggle>
-    <mat-form-field *ngIf="defaultTenantProfileConfigurationFormGroup.get('smsEnabled').value" fxFlex class="mat-block"
+    <mat-form-field *ngIf="defaultTenantProfileConfigurationFormGroup.get('smsEnabled').value" class="mat-block flex-1"
                     appearance="fill" subscriptSizing="dynamic">
       <mat-label translate>tenant-profile.max-sms</mat-label>
       <input matInput required min="0" step="1"
@@ -324,8 +324,8 @@
         {{ 'tenant-profile.max-sms-range' | translate}}
       </mat-error>
     </mat-form-field>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxEmails"
@@ -338,7 +338,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-created-alarms</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxCreatedAlarms"
@@ -358,8 +358,8 @@
     <legend class="group-title">
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourcesInBytes"
@@ -372,7 +372,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-ota-packages-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxOtaPackagesInBytes"
@@ -386,8 +386,8 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.maximum-resource-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourceSize"
@@ -400,7 +400,7 @@
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
-      <div fxFlex></div>
+      <div class="flex-1"></div>
     </div>
   </fieldset>
 
@@ -408,15 +408,15 @@
     <legend class="group-title">
       {{ 'tenant-profile.ws-title' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
-    <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerTenant">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerTenant').hasError('min')">
           {{ 'tenant-profile.too-small-value-zero' | translate}}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-tenant</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerTenant">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerTenant').hasError('min')">
@@ -424,15 +424,15 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSessionsPerCustomer">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerCustomer').hasError('min')">
           {{ 'tenant-profile.too-small-value-zero' | translate}}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field class="mat-block flex-1" appearance="fill">
         <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-customer</mat-label>
         <input matInput type="number" formControlName="maxWsSubscriptionsPerCustomer">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerCustomer').hasError('min')">
@@ -442,20 +442,20 @@
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerPublicUser').hasError('min')">
               {{ 'tenant-profile.too-small-value-zero' | translate}}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-public-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerPublicUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerPublicUser').hasError('min')">
@@ -463,15 +463,15 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerRegularUser').hasError('min')">
               {{ 'tenant-profile.too-small-value-zero' | translate}}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-regular-user</mat-label>
             <input matInput type="number" formControlName="maxWsSubscriptionsPerRegularUser">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerRegularUser').hasError('min')">
@@ -479,8 +479,8 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <mat-form-field class="mat-block flex-1" appearance="fill">
             <mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
             <input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('wsMsgQueueLimitPerSession').hasError('min')">
@@ -490,7 +490,7 @@
               {{ 'tenant-profile.queue-size-is-limited-by-system-configuration' | translate}}
             </mat-hint>
           </mat-form-field>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </ng-template>
     </mat-expansion-panel>
@@ -500,106 +500,106 @@
     <legend class="group-title">
       {{ 'tenant-profile.rate-limits.rate-limits' | translate }}
     </legend>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportTenantMsgRateLimit"
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportTenantMsgRateLimit"
                       [type]="rateLimitsType.TENANT_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportDeviceMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportDeviceMsgRateLimit"
                       [type]="rateLimitsType.DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportTenantTelemetryMsgRateLimit"
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryMsgRateLimit"
                       [type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportDeviceTelemetryMsgRateLimit"
                       [type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportGatewayMsgRateLimit"
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportGatewayDeviceMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
-    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex formControlName="transportGatewayTelemetryMsgRateLimit"
+    <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_TELEMETRY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex formControlName="transportGatewayDeviceTelemetryMsgRateLimit"
+      <tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceTelemetryMsgRateLimit"
                       [type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           tenant-profile.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="transportTenantTelemetryDataPointsRateLimit"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryDataPointsRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="transportDeviceTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row"  fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="transportGatewayTelemetryDataPointsRateLimit"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.GATEWAY_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="transportGatewayDeviceTelemetryDataPointsRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="tenantServerRestLimitsConfiguration"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="tenantServerRestLimitsConfiguration"
                           [type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="customerServerRestLimitsConfiguration"
+          <tb-rate-limits class="flex-1" formControlName="customerServerRestLimitsConfiguration"
                           [type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="tenantEntityExportRateLimit"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="tenantEntityExportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="tenantEntityImportRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="tenantEntityImportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex formControlName="wsUpdatesPerSessionRateLimit"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="wsUpdatesPerSessionRateLimit"
                           [type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex formControlName="cassandraQueryTenantRateLimitsConfiguration"
+          <tb-rate-limits class="flex-1" formControlName="cassandraQueryTenantRateLimitsConfiguration"
                           [type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="tenantNotificationRequestsRateLimit"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsRateLimit"
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUEST_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="tenantNotificationRequestsPerRuleRateLimit"
+          <tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsPerRuleRateLimit"
                           [type]="rateLimitsType.TENANT_NOTIFICATION_REQUESTS_PER_RULE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="edgeEventRateLimits"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="edgeEventRateLimits"
                           [type]="rateLimitsType.EDGE_EVENTS_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="edgeEventRateLimitsPerEdge"
+          <tb-rate-limits class="flex-1" formControlName="edgeEventRateLimitsPerEdge"
                           [type]="rateLimitsType.EDGE_EVENTS_PER_EDGE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="edgeUplinkMessagesRateLimits"
+        <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+          <tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimits"
                           [type]="rateLimitsType.EDGE_UPLINK_MESSAGES_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="edgeUplinkMessagesRateLimitsPerEdge"
+          <tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimitsPerEdge"
                           [type]="rateLimitsType.EDGE_UPLINK_MESSAGES_PER_EDGE_RATE_LIMIT">
           </tb-rate-limits>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
index 8c8c261a14..d7636e2c41 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="editDetailsFormGroup">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             [matDialogClose]="undefined"
             type="button">
@@ -28,7 +28,7 @@
   <div mat-dialog-content>
     <tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [matDialogClose]="undefined"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
index 75c8ef07a7..a53854cc66 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
@@ -16,12 +16,12 @@
 
 -->
 <section class="tb-rate-limits-form" [formGroup]="rateLimitsListFormGroup">
-  <div fxFlex [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
+  <div class="flex-1" [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
     <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
       tenant-profile.rate-limits.but-less-than
     </div>
-    <div fxFlex fxLayout="row" fxLayoutGap="8px">
-      <mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block">
+    <div class="flex flex-1 flex-row gap-2">
+      <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
         <mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
         <input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
                type="number" min="1" step="1" formControlName="value" required>
@@ -32,7 +32,7 @@
           {{ 'tenant-profile.rate-limits.number-of-messages-min' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block">
+      <mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
         <mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label>
         <input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}"
                type="number" min="1" step="1" formControlName="time" required>
@@ -59,7 +59,7 @@
           [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
     <span translate>tenant-profile.rate-limits.add-limit</span>
   </button>
-  <div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
+  <div class="tb-rate-limits-preview flex flex-1 flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
     <span translate>tenant-profile.rate-limits.preview</span>
     <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
index 39fc900b5e..b0884fc840 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}" [innerHTML]="rateLimitsText"></div>
+<div class="tb-rate-limits-text" [class.disabled]="disabled" [innerHTML]="rateLimitsText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
index 9f4d514f60..4f6b791c7c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutGap="8px">
+<div class="flex flex-1 flex-row gap-2">
   <fieldset class="fieldset-element">
     <legend class="legend-element">{{ label | translate }}</legend>
-    <div [formGroup]="rateLimitsFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px"
+    <div [formGroup]="rateLimitsFormGroup" class="flex flex-1 flex-row gap-2"
          (click)="onClick($event)"
          [matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
       <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 38e2860cd5..0165f75ccc 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="queueFormGroup" fxLayout="column">
+<form [formGroup]="queueFormGroup" class="flex flex-col">
   <mat-form-field class="mat-block" appearance="fill">
     <mat-label translate>admin.queue-name</mat-label>
     <input matInput formControlName="name" required>
@@ -37,10 +37,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="submitStrategy">
-          <div fxFlex>
+        <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="submitStrategy">
+          <div class="flex-1">
             <label class="group-label" translate>queue.submit-strategy</label>
-            <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
+            <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
               <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
                 {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
                 <mat-icon
@@ -51,7 +51,7 @@
               </mat-radio-button>
             </mat-radio-group>
           </div>
-          <div fxFlex *ngIf="hideBatchSize">
+          <div class="flex-1" *ngIf="hideBatchSize">
             <label class="group-label" translate>queue.grouping-parameter</label>
             <mat-form-field class="mat-block">
               <mat-label translate>queue.batch-size</mat-label>
@@ -75,10 +75,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="processingStrategy">
-          <div fxFlex>
+        <div class="flex flex-1 flex-row gap-4 lt-md:flex-col" formGroupName="processingStrategy">
+          <div class="flex-1">
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
+              <mat-radio-group class="flex flex-1 flex-col" formControlName="type" required>
                 <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon
@@ -89,7 +89,7 @@
                 </mat-radio-button>
               </mat-radio-group>
           </div>
-          <div fxFlex>
+          <div class="flex-1">
             <label class="group-label" translate>queue.retries-settings</label>
             <mat-form-field class="mat-block" subscriptSizing="dynamic">
               <mat-label translate>queue.retries</mat-label>
@@ -156,11 +156,11 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="column" fxLayoutGap="10px">
-          <div fxFlex>
+        <div class="flex flex-1 flex-col gap-2.5">
+          <div class="flex-1">
             <label class="group-label" translate>queue.batch-processing</label>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.poll-interval</mat-label>
                 <input type="number" matInput formControlName="pollInterval" required>
                 <mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
@@ -171,7 +171,7 @@
                   {{ 'queue.poll-interval-min-value' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.partitions</mat-label>
                 <input type="number" matInput formControlName="partitions" required>
                 <mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
@@ -184,13 +184,13 @@
               </mat-form-field>
             </div>
           </div>
-          <div fxFlex>
+          <div class="flex-1">
             <label class="group-label" translate>queue.immediate-processing</label>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
-              <mat-checkbox fxFlex fxFlexAlign.gt-xs="center" formControlName="consumerPerPartition">
+            <div class="flex flex-1 flex-row gap-2.5 xs:flex-col">
+              <mat-checkbox class="flex-1 gt-xs:flex gt-xs:items-stretch gt-xs:justify-center" formControlName="consumerPerPartition">
                 {{ 'queue.consumer-per-partition' | translate }}
               </mat-checkbox>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>queue.processing-timeout</mat-label>
                 <input type="number" matInput formControlName="packProcessingTimeout" required>
                 <mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
@@ -208,7 +208,7 @@
     </mat-expansion-panel>
   </mat-accordion>
   <div formGroupName="additionalInfo">
-    <mat-checkbox fxFlex formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
+    <mat-checkbox class="flex-1" formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
       {{ 'queue.duplicate-msg-to-all-partitions' | translate }}
     </mat-checkbox>
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index 435f5a42ee..b6bb288b9f 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -51,8 +51,8 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 6973a6a32d..f7d2908c8e 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -52,8 +52,8 @@
           </button>
         </div>
       </div>
-      <div [fxShow]="!relationFiltersFormArray.length">
-        <span fxLayoutAlign="center center" class="tb-prompt" translate>relation.any-relation</span>
+      <div [class.!hidden]="relationFiltersFormArray.length">
+        <span class="tb-prompt flex items-center justify-center" translate>relation.any-relation</span>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index 5be9f4932c..fb49f299e9 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
+  <div class="tb-entity-table-content tb-outlined-border flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">
             {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
           </span>
@@ -33,7 +33,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 (click)="addRelation($event)"
                 matTooltip="{{ 'action.add' | translate }}"
@@ -52,14 +52,14 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -72,8 +72,8 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools" fxLayoutAlign="space-between center">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
+      <div class="mat-toolbar-tools flex items-center justify-between">
         <span class="tb-entity-table-info">
           {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
         </span>
@@ -85,7 +85,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -140,7 +140,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
@@ -156,14 +156,13 @@
             </div>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                             'mat-selected': dataSource.selection.isSelected(relation)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select"
+                 [class.mat-selected]="dataSource.selection.isSelected(relation)"
                  *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{ 'relation.no-relations-text' }}</span>
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex items-center justify-center" translate>{{ 'relation.no-relations-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.html b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
index 82026236e9..ed9edeb3f6 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column" style="width: 100%;">
-  <div fxLayout="row" style="width: 100%;">
-    <nav fxFlex *ngIf="!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1" mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs" [tabPanel]="tabPanel">
+<div class="flex flex-1 flex-col" style="width: 100%;">
+  <div class="flex flex-row" style="width: 100%;">
+    <nav *ngIf="!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1" mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs flex-1" [tabPanel]="tabPanel">
       <a *ngFor="let tab of tabs$ | async"
          routerLink="{{tab.path}}"
          replaceUrl="{{ replaceUrl }}"
@@ -31,7 +31,7 @@
     </nav>
     <tb-anchor #tabsHeaderComponent></tb-anchor>
   </div>
-  <mat-tab-nav-panel #tabPanel fxFlex fxLayout="column" class="tb-router-tabs-content">
+  <mat-tab-nav-panel #tabPanel class="tb-router-tabs-content flex flex-1 flex-col">
     <router-outlet #routerOutlet="outlet" (activate)="activeComponentChanged($event)"></router-outlet>
   </mat-tab-nav-panel>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/router-tabs.component.ts b/ui-ngx/src/app/modules/home/components/router-tabs.component.ts
index 681558deb0..3a416073c5 100644
--- a/ui-ngx/src/app/modules/home/components/router-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/router-tabs.component.ts
@@ -25,6 +25,7 @@ import { merge, Observable } from 'rxjs';
 import { MenuSection } from '@core/services/menu.models';
 import { ActiveComponentService } from '@core/services/active-component.service';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 
 @Component({
   selector: 'tb-router-tabs',
@@ -115,9 +116,20 @@ export class RouterTabsComponent extends PageComponent implements OnInit {
 
   private buildTabsForRoutes(activatedRoute: ActivatedRoute): Array<MenuSection> {
     const sectionPath = this.getSectionPath(activatedRoute);
-    if (activatedRoute.routeConfig.children.length) {
-      const activeRouterChildren = activatedRoute.routeConfig.children.filter(page => page.path !== '');
-      return activeRouterChildren.map(tab => ({
+    const authority = getCurrentAuthUser(this.store).authority;
+    const children = activatedRoute.routeConfig.children.filter(page => {
+      if (page.path !== '') {
+        if (page.data?.auth) {
+          return page.data?.auth.includes(authority);
+        } else {
+          return true;
+        }
+      } else {
+        return false;
+      }
+    });
+    if (children.length) {
+      return children.map(tab => ({
         id: tab.component.name,
         type: 'link',
         name: tab.data?.breadcrumb?.label ?? '',
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
index c74e324c26..255ad06c48 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@@ -23,7 +23,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="ruleChainAutocomplete"
-         [fxShow]="!disabled || !selectRuleChainFormGroup.get('ruleChainId').value">
+         [class.!hidden]="disabled && selectRuleChainFormGroup.get('ruleChainId').value">
   <a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL>
     {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
   </a>
diff --git a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
index 5392ce8ce8..449a6f5642 100644
--- a/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
@@ -16,8 +16,8 @@
 
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
-  <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
+  <div class="flex flex-row flex-wrap gap-1.5">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@@ -25,14 +25,14 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
       <input required matInput formControlName="host">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
         {{'admin.smpp-provider.smpp-host-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
+    <mat-form-field class="mat-block lt-sm:flex-full gt-xs:max-w-25% gt-xs:flex-full">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
@@ -40,15 +40,15 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex class="mat-block">
+  <div class="flex flex-row flex-wrap gap-1.5">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.system-id</mat-label>
       <input required matInput formControlName="systemId">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
         {{'admin.smpp-provider.system-id-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>admin.smpp-provider.password</mat-label>
       <input required matInput type="password" autocomplete="new-password" formControlName="password">
       <tb-toggle-password matSuffix></tb-toggle-password>
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index 22ab888e80..6c85983ebc 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.auto-commit-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="autoCommitSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -31,19 +31,19 @@
       <form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
-                 fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-              <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+                 class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
+              <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
                 <mat-expansion-panel-header>
-                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                  <div class="flex flex-1 flex-row items-center justify-start">
                     <mat-panel-title>
-                      <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                      <div class="flex flex-1 flex-row items-center justify-start">
                         <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
                       </div>
                     </mat-panel-title>
-                    <span fxFlex></span>
+                    <span class="flex-1"></span>
                     <button mat-icon-button style="min-width: 40px;"
                             type="button"
                             (click)="removeEntityType($index)"
@@ -54,10 +54,10 @@
                   </div>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+                  <div class="entity-type-config-content flex flex-col gap-2">
                     <mat-divider></mat-divider>
-                    <div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
-                      <div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px">
+                    <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
+                      <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
                         <tb-entity-type-select
                           showLabel
                           formControlName="entityType"
@@ -73,8 +73,8 @@
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"
-                           fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px"  formGroupName="config">
+                      <div class="flex flex-1 flex-row items-center justify-start gap-4 xs:flex-col xs:items-start xs:justify-start xs:gap-0"
+                           formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}
                         </mat-checkbox>
@@ -91,17 +91,17 @@
               </mat-expansion-panel>
             </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
-              <span translate fxLayoutAlign="center center"
-                    class="tb-prompt">admin.no-auto-commit-entities-prompt</span>
+              <span translate
+                    class="tb-prompt flex items-center justify-center">admin.no-auto-commit-entities-prompt</span>
             </div>
-            <div style="padding-top: 16px;" fxLayout="row">
+            <div style="padding-top: 16px;"  class="flex flex-row">
               <button mat-raised-button color="primary"
                       type="button"
                       [disabled]="!addEnabled()"
                       (click)="addEntityType()">
                 <span translate>version-control.add-entity-type</span>
               </button>
-              <span fxFlex></span>
+              <span class="flex-1"></span>
               <button mat-raised-button color="primary"
                       type="button"
                       [disabled]="!entityTypesFormGroupArray().length"
@@ -112,12 +112,12 @@
           </div>
         </fieldset>
         <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-          <button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
+        <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
+          <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
             {{'action.delete' | translate}}
           </button>
-          <span fxFlex></span>
+          <span class="flex-1"></span>
           <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || (isReadOnly | async) || autoCommitSettingsForm.invalid || !autoCommitSettingsForm.dirty"
                   type="submit">{{'action.save' | translate}}
           </button>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index 163b13a393..e1c6c6cf88 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;">
+<section *ngIf="!versionCreateResult$" class="flex flex-col" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
-    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
+  <form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
+    <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
       <tb-branch-autocomplete
-        fxFlex
+        class="flex-1"
         required
         formControlName="branch">
       </tb-branch-autocomplete>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>version-control.version-name</mat-label>
         <input required matInput formControlName="versionName">
         <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@@ -52,7 +52,7 @@
       formControlName="entityTypes">
     </tb-entity-types-version-create>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
+  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -71,7 +71,7 @@
   <section *ngIf="resultMessage">
     <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
   </section>
-  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index ccab83b9aa..60b2b50fb5 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;">
+<section *ngIf="!versionLoadResult$" class="flex flex-col" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="loadVersionFormGroup" fxLayout="column" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
+  <form [formGroup]="loadVersionFormGroup" class="flex flex-col" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
     <tb-entity-types-version-load
       formControlName="entityTypes">
     </tb-entity-types-version-load>
@@ -33,7 +33,7 @@
       {{ 'version-control.rollback-on-error' | translate }}
     </mat-slide-toggle>
   </div>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
+  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -54,7 +54,7 @@
   </div>
   <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
   <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress"  fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -63,7 +63,7 @@
     </button>
   </div>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entities-from-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index c237d2291a..f4d5502a69 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group" fxLayout="column">
+<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group flex flex-col">
   <legend class="group-title" translate>version-control.entities-to-export</legend>
-  <div fxLayout="column" style="flex: 1; overflow: auto;">
+  <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
+      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+              <div class="flex flex-1 flex-row items-center justify-start">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
                     type="button"
                     (click)="removeEntityType($index)"
@@ -40,9 +40,9 @@
             </button>
           </div>
         </mat-expansion-panel-header>
-        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+        <div class="entity-type-config-content flex flex-col gap-2">
           <mat-divider></mat-divider>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-4">
             <tb-entity-type-select
               showLabel
               formControlName="entityType"
@@ -50,8 +50,8 @@
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>version-control.sync-strategy</mat-label>
                 <mat-select formControlName="syncStrategy">
                   <mat-option [value]="'default'">
@@ -62,7 +62,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div fxFlex fxLayout="column">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                   {{ 'version-control.export-credentials' | translate }}
                 </mat-checkbox>
@@ -75,14 +75,14 @@
               </div>
             </div>
           </div>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
-               formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
+          <div class="flex flex-row xs:flex-col gt-xs:min-h-19 gt-xs:items-center gt-xs:justify-start gt-xs:gap-4"
+               formGroupName="config">
             <mat-slide-toggle formControlName="allEntities">
               {{ 'version-control.all-entities' | translate }}
             </mat-slide-toggle>
             <tb-entity-list
-              fxFlex
-              [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
+              class="flex-1"
+              [class.!hidden]="entityTypeFormGroup.get('config').get('allEntities').value"
               [entityType]="entityTypeFormGroup.get('entityType').value"
               required
               formControlName="entityIds">
@@ -92,18 +92,18 @@
       </mat-expansion-panel>
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate fxLayoutAlign="center center"
-                class="tb-prompt">version-control.no-entities-to-export-prompt</span>
+          <span translate
+                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-export-prompt</span>
     </div>
   </div>
-  <div style="padding-top: 16px;" fxLayout="row">
+  <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!addEnabled()"
             (click)="addEntityType()">
       <span translate>version-control.add-entity-type</span>
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!entityTypesFormGroupArray().length"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index 620d406132..468f640b23 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<fieldset class="fields-group" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column">
+<fieldset class="fields-group flex flex-col" [formGroup]="entityTypesVersionLoadFormGroup">
   <legend class="group-title" translate>version-control.entities-to-restore</legend>
-  <div fxLayout="column" style="flex: 1; overflow: auto;">
+  <div class="flex flex-col" style="flex: 1; overflow: auto;">
     <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
              let $index = index; last as isLast;"
-         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
+      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
                            [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
         <mat-expansion-panel-header>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <mat-panel-title>
-              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+              <div class="flex flex-1 flex-row items-center justify-start">
                 <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
               </div>
             </mat-panel-title>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
                     type="button"
                     (click)="removeEntityType($index)"
@@ -40,19 +40,19 @@
             </button>
           </div>
         </mat-expansion-panel-header>
-        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+        <div class="entity-type-config-content flex flex-col gap-2">
           <mat-divider></mat-divider>
-          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
+          <div class="flex flex-row xs:flex-col gt-xs:gap-8">
             <tb-entity-type-select
-              fxFlex
+              class="flex-1"
               showLabel
               formControlName="entityType"
               required
               [filterAllowedEntityTypes]="false"
               [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
             </tb-entity-type-select>
-            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
-              <div fxFlex fxLayout="column">
+            <div class="flex flex-1 flex-row xs:flex-col xs:gap-2 gt-xs:gap-4" formGroupName="config">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox #removeOtherEntitiesCheckbox
                               formControlName="removeOtherEntities"
                               (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@@ -62,7 +62,7 @@
                   {{ 'version-control.find-existing-entity-by-name' | translate }}
                 </mat-checkbox>
               </div>
-              <div fxFlex fxLayout="column">
+              <div class="flex flex-1 flex-col">
                 <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
                   {{ 'version-control.load-credentials' | translate }}
                 </mat-checkbox>
@@ -79,18 +79,18 @@
       </mat-expansion-panel>
     </div>
     <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate fxLayoutAlign="center center"
-                class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
+          <span translate
+                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-restore-prompt</span>
     </div>
   </div>
-  <div style="padding-top: 16px;" fxLayout="row">
+  <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!addEnabled()"
             (click)="addEntityType()">
       <span translate>version-control.add-entity-type</span>
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-raised-button color="primary"
             type="button"
             [disabled]="!entityTypesFormGroupArray().length"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index f4717c2fb3..67ef5908e5 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -18,19 +18,19 @@
 <section *ngIf="!versionCreateResult$">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <tb-branch-autocomplete
           required
           formControlName="branch">
         </tb-branch-autocomplete>
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>version-control.version-name</mat-label>
           <input required matInput formControlName="versionName">
           <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@@ -50,7 +50,7 @@
       </div>
     </fieldset>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
   <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
     <section *ngIf="resultMessage">
       <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
-      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -80,7 +80,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
index 1c4f72e623..04a4fe4c33 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<section class="entity-version-diff-view" [ngClass]="{'content-ready': contentReady}"
+<section class="entity-version-diff-view flex flex-col" [class.content-ready]="contentReady"
          tb-fullscreen [fullscreen]="isFullscreen" (fullscreenChanged)="onFullscreenChanged($event)"
-         [ngStyle]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}"
-         fxLayout="column">
+         [style]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}">
   <mat-toolbar *ngIf="contentReady">
     <h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             matTooltip="{{'version-control.previous-difference' | translate}}"
             matTooltipPosition="below"
@@ -54,14 +53,14 @@
       <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </mat-toolbar>
-  <div fxLayout="row" *ngIf="contentReady">
-    <div class="version-title" fxFlex>{{ 'version-control.current' | translate }}</div>
+  <div class="flex flex-row" *ngIf="contentReady">
+    <div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
     <div style="width: 58px;"></div>
-    <div class="version-title" fxFlex>{{ versionIdContent() }}</div>
+    <div class="version-title flex-1">{{ versionIdContent() }}</div>
   </div>
   <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
-  <div fxFlex [fxShow]="contentReady" class="diff-viewer" #diffViewer></div>
-  <div class="bottom-panel" *ngIf="contentReady" fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
+  <div class="bottom-panel flex items-center justify-end gap-2" *ngIf="contentReady">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts
index 9bb0a37066..2e09e54251 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts
@@ -121,7 +121,7 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit,
           this.popoverComponent.updatePosition();
         }
         setTimeout(() => {
-          this.differ = new aceDiff.default(
+          this.differ = new aceDiff(
             {
               element: this.diffViewerElmRef.nativeElement,
               mode: 'ace/mode/json',
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index 14b1ac6b59..67f5b4a419 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -18,7 +18,7 @@
 <section *ngIf="!versionLoadResult$">
   <mat-toolbar *ngIf="entityDataInfo">
     <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="entityDataInfo && (isLoading$ | async)">
@@ -26,7 +26,7 @@
   <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
   <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
           {{ 'version-control.load-credentials' | translate }}
         </mat-checkbox>
@@ -39,7 +39,7 @@
       </div>
     </fieldset>
   </form>
-  <div *ngIf="entityDataInfo"  fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div *ngIf="entityDataInfo"  class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -58,7 +58,7 @@
   <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
     <section *ngIf="errorMessage">
       <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
-      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
                 type="button"
                 [disabled]="(isLoading$ | async)"
@@ -69,7 +69,7 @@
     </section>
   </section>
   <ng-template #progress>
-    <section fxLayout="column" fxLayoutAlign="center center">
+    <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entity-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
index 948fdb5190..b8a31ce399 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="mat-padding tb-entity-table tb-absolute-fill" [ngClass]="{'tb-popover-mode': popoverComponent}">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'tb-outlined-border': !popoverComponent}">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+<div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
+  <div class="tb-entity-table-content flex flex-1 flex-col" [class.tb-outlined-border]="!popoverComponent">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+        <div class="title-container flex flex-row items-center justify-start xs:flex-col xs:items-start xs:justify-center">
           <span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span>
           <tb-branch-autocomplete
             #branchAutocompleteComponent
@@ -31,8 +31,8 @@
             (ngModelChange)="branchChanged($event)">
           </tb-branch-autocomplete>
         </div>
-        <span fxFlex></span>
-        <div fxLayout="row" fxLayoutAlign="center center" fxLayout.xs="column" fxLayoutAlign.xs="center end">
+        <span class="flex-1"></span>
+        <div class="flex flex-row items-center justify-center xs:flex-col xs:items-end xs:justify-center">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@@ -47,7 +47,7 @@
             <mat-icon>update</mat-icon>
             {{'version-control.create-entities-version' | translate }}
           </button>
-          <div fxLayout="row">
+          <div class="flex flex-row">
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
@@ -64,14 +64,14 @@
         </div>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -84,7 +84,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="timestamp">
@@ -124,11 +124,11 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle]="singleEntityMode ? {minWidth: '80px', maxWidth: '80px', width: '80px'} :
-                                                                           {minWidth: '40px', maxWidth: '40px', width: '40px'}">
+          <mat-header-cell *matHeaderCellDef [class.min-w-20]="singleEntityMode" [class.max-w-20]="singleEntityMode" [class.w-20]="singleEntityMode"
+                                             [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
           </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'version-control.compare-with-current' | translate }}"
                       matTooltipPosition="above"
@@ -154,18 +154,16 @@
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [fxShow]="!dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
+        <mat-row [class.!hidden]="dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
       </table>
-      <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{
+      <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
+            class="no-data-found flex items-center justify-center" translate>{{
         singleEntityMode
           ? 'version-control.no-entity-versions-text'
           : 'version-control.no-versions-text'
         }}</span>
-      <span [fxShow]="dataSource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="!dataSource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
index ce414bdb48..0d37d5b3f1 100644
--- a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
@@ -24,7 +24,7 @@
       </mat-form-field>
     </fieldset>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div class="flex items-center justify-end gap-2">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
index 2fda773889..3bc21b2409 100644
--- a/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
@@ -17,18 +17,18 @@
 -->
 <div style="height: min-content; max-height: 80vh;">
   <mat-card appearance="outlined" class="repository-settings"
-            [ngClass]="{'settings-card': !detailsMode}"
-            [ngStyle]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
+            [class.settings-card]="!detailsMode"
+            [style]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
     <mat-card-header>
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.repository-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="repositorySettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
     </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="hideLoadingBar || !(isLoading$ | async)"></div>
+    <div style="height: 4px;" *ngIf="hideLoadingBar || (isLoading$ | async) === false"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
@@ -43,7 +43,7 @@
             <mat-label translate>admin.default-branch</mat-label>
             <input matInput formControlName="defaultBranch">
           </mat-form-field>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <mat-checkbox formControlName="readOnly">
               {{ 'admin.repository-read-only' | translate }}
             </mat-checkbox>
@@ -53,7 +53,7 @@
           </div>
           <fieldset [disabled]="isLoading$ | async" class="fields-group">
             <legend class="group-title" translate>admin.authentication-settings</legend>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>admin.auth-method</mat-label>
               <mat-select required formControlName="authMethod">
                 <mat-option *ngFor="let method of repositoryAuthMethods" [value]="method">
@@ -61,8 +61,8 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.USERNAME_PASSWORD" fxLayout="column">
-              <mat-form-field fxFlex class="mat-block">
+            <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.USERNAME_PASSWORD" class="flex flex-col">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>common.username</mat-label>
                 <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                        autocomplete="new-username"/>
@@ -79,7 +79,7 @@
                 <mat-hint [innerHTML] = "'admin.auth-method-username-password-hint' | translate"></mat-hint>
               </mat-form-field>
             </section>
-            <section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.PRIVATE_KEY" fxLayout="column">
+            <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.PRIVATE_KEY" class="flex flex-col">
               <tb-file-input [existingFileName]="repositorySettingsForm.get('privateKeyFileName').value"
                              required
                              formControlName="privateKey"
@@ -99,12 +99,12 @@
               </mat-form-field>
             </section>
           </fieldset>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
-            <button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
+          <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch xs:justify-end">
+            <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
                     [disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
               {{'action.delete' | translate}}
             </button>
-            <span fxFlex></span>
+            <span class="flex-1"></span>
             <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || repositorySettingsForm.invalid" (click)="checkAccess()">
               {{'admin.check-access' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index ba37ff19f4..95163a1f49 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="actionsSettings" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ data.widgetTitle }}: {{ 'widget-config.actions' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       formControlName="actions">
     </tb-manage-widget-actions>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index 708cf396b0..02d386f118 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -16,11 +16,11 @@
 
 -->
 <div class="tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
+  <div class="tb-entity-table-content flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
       <div class="mat-toolbar-tools">
         <span class="tb-entity-table-title" translate>widget-config.actions</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 type="button"
                 (click)="addAction($event)"
@@ -36,7 +36,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 type="button"
@@ -44,7 +44,7 @@
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [(ngModel)]="pageLink.textSearch"
@@ -58,7 +58,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table
              [dataSource]="dataSource"
              matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear
@@ -109,7 +109,7 @@
           <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
           <mat-cell *matCellDef="let action">
-            <div fxFlex fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-1 flex-row items-stretch justify-end">
               <button mat-icon-button [disabled]="isLoading$ | async"
                       type="button"
                       matTooltip="{{ 'widget-config.edit-action' | translate }}"
@@ -132,9 +132,8 @@
                  *matRowDef="let action; columns: displayedColumns;"
                  cdkDrag [cdkDragData]="action"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
-            fxLayoutAlign="center center"
-            class="no-data-found" translate>{{ 'widget-config.no-actions-text' }}</span>
+      <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+            class="no-data-found flex items-center justify-center" translate>{{ 'widget-config.no-actions-text' }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 0330ad5621..d06493594e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -33,7 +33,7 @@
       <div class="tb-form-panel no-padding no-border">
         <div class="tb-form-row">
           <div class="fixed-title-width">{{'widget-config.action-source' | translate}}*</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="actionSourceId" placeholder="{{ 'widget-config.select-action-source' | translate }}">
               <mat-option *ngFor="let actionSourceItem of data.actionsData.actionSources | keyvalue" [value]="actionSourceItem.key">
                 {{ actionSourceName(actionSourceItem.value) }}
@@ -52,7 +52,7 @@
         </div>
         <div class="tb-form-row" *ngIf="widgetActionFormGroup.get('actionSourceId').value === 'cellClick'">
           <div class="fixed-title-width">{{'widget-config.column-index' | translate}}*</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select #columnIndexSelect formControlName="columnIndex" placeholder="{{ columnIndexPlaceholderText }}">
               <mat-option *ngFor="let column of configuredColumns; let $index = index"
                           [value]="$index"
@@ -73,7 +73,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width">{{'widget-config.action-name' | translate}}*</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
                       matTooltipPosition="above"
@@ -97,10 +97,9 @@
         <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="displayShowWidgetActionForm()">
           <mat-expansion-panel class="tb-settings" [expanded]="widgetActionFormGroup.get('useShowWidgetActionFunction').value"
                                [disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle class="mat-slide" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
                   {{ 'widget-config.show-hide-action-using-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
@@ -126,7 +125,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
index 334bdc6966..b2a81420e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarm-count-basic-config.component.html
@@ -17,7 +17,7 @@
 -->
 <ng-container [formGroup]="alarmCountWidgetConfigForm">
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>alarm.filter</div>
       <button mat-button color="primary"
               (click)="alarmFilterConfig.reset()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
index dd4ab68895..5e0fbdcc22 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
@@ -24,7 +24,7 @@
     formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>alarm.filter</div>
       <button mat-button color="primary"
         (click)="alarmFilterConfig.reset()">
@@ -55,8 +55,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -74,7 +74,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="alarmsTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
index 49a50afc30..39e690b8bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
@@ -28,7 +28,7 @@
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.on-click-hint' | translate}}" translate>widgets.action-button.on-click</div>
-      <tb-widget-action-settings fxFlex
+      <tb-widget-action-settings class="flex-1"
                                  panelTitle="{{ 'widgets.action-button.on-click' | translate }}"
                                  [callbacks]="callbacks"
                                  [widgetType]="widgetType"
@@ -37,7 +37,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.activated' | translate }}"
@@ -48,7 +48,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
index b49cf84512..84ca3592d5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -30,7 +30,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index b16bcfef67..75fcf791b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -43,7 +43,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -100,11 +100,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="powerButtonWidgetConfigForm.get('iconColor').value"
@@ -118,15 +118,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOn">
@@ -136,15 +136,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOff">
@@ -154,15 +154,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index fae01253bb..ea055f6ae8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -43,7 +43,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -66,10 +66,9 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-panel stroked tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetConfigForm.get('autoScale').value" disabled>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="autoScale" (click)="$event.stopPropagation()">
               {{ 'widgets.toggle-button.auto-scale' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -92,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -111,11 +110,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="toggleButtonWidgetConfigForm.get('iconColor').value"
@@ -129,7 +128,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div>
       <tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}">
         <tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option>
@@ -137,14 +136,14 @@
       </tb-toggle-select>
     </div>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'checked'"
+        [class.!hidden]="buttonAppearanceType !== 'checked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetConfigForm.get('autoScale').value"
         formControlName="checkedAppearance">
     </tb-widget-button-appearance>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'unchecked'"
+      [class.!hidden]="buttonAppearanceType !== 'unchecked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetConfigForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
index 40d16b6034..7a038410c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
@@ -26,7 +26,7 @@
   <mat-form-field class="tb-inline-field tb-aggregation-field" subscriptSizing="dynamic">
     <mat-chip-grid #chipList>
       <mat-chip-row class="tb-datakey-chip">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip">
+        <div class="tb-attribute-chip flex flex-row items-center justify-start gap-1">
           <div class="tb-chip-labels">
             <div class="tb-chip-label tb-chip-text">
               <ng-container *ngTemplateOutlet="keyName"></ng-container>
@@ -41,7 +41,7 @@
     </mat-chip-grid>
     <input matInput
            type="text"
-           fxHide
+           class="!hidden"
            readonly
            [matChipInputFor]="chipList"
     />
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
index d648f07155..361e7a654f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
@@ -30,7 +30,7 @@
     </div>
     <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
       <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-        <tb-aggregated-data-key-row fxFlex
+        <tb-aggregated-data-key-row class="flex-1"
                          [formControl]="keyControl"
                          [index]="$index"
                          [datasourceType]="datasourceType"
@@ -47,6 +47,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.aggregated-value-card.no-values' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 8044dcfc79..8c40126d69 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -38,7 +38,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -57,11 +57,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="aggregatedValueCardWidgetConfigForm.get('iconColor').value"
@@ -77,7 +77,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -95,8 +95,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -110,11 +110,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChart">
         {{ 'widgets.aggregated-value-card.chart' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="chartUnits"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="chartDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-color-input asBoxInput
                         colorClearButton
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
index 271865728f..95e9c86654 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-card-basic-config.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-card.label</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelCardWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
index e0d301344e..4be767ef0b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
@@ -40,7 +40,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -55,11 +55,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelValueCardWidgetConfigForm.get('iconColor').value?.color"
@@ -71,11 +71,11 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-value-card.value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
index f4b5290777..4cb4c1dcfb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html
@@ -68,10 +68,10 @@
           {{ 'widgets.liquid-level-card.icon' | translate }}
         </mat-slide-toggle>
         <div class="tb-flex row flex-end align-center">
-          <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
             <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
-          <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+          <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
           <tb-material-icon-select asBoxInput
                                    iconClearButton
                                    [color]="mobileAppQrCodeWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index c9821f1a88..327a2acdbe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -51,7 +51,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -70,11 +70,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.progress-bar.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="progressBarWidgetConfigForm.get('iconColor').value"
@@ -90,11 +90,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -108,7 +108,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.progress-bar.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.progress-bar.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -123,7 +123,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.progress-bar.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
index 2ffa954531..9597cb93f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/simple-card-basic-config.component.html
@@ -32,7 +32,7 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.simple-card.label</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
index f5607ae0be..82aa43dbff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
@@ -43,8 +43,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="timeseriesTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
index d09121ed13..3ff7ab6c98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/unread-notification-basic-config.component.html
@@ -23,7 +23,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.notification.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="unreadNotificationWidgetConfigForm.get('iconColor').value"
@@ -74,7 +74,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.notification.counter-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
                           [previewText]="countPreviewFn"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index c1f0d7e635..f70b0515eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -63,15 +63,15 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="iconEnabled" class="tb-form-row">
+    <div [class.!hidden]="!iconEnabled" class="tb-form-row">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueCardWidgetConfigForm.get('iconColor').value?.color"
@@ -83,11 +83,11 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.value-card.value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -96,12 +96,12 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
+    <div [class.!hidden]="!dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index e8b173fde1..abd3e450eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -50,7 +50,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -69,11 +69,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-chart-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueChartCardWidgetConfigForm.get('iconColor').value"
@@ -89,11 +89,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [autoScale]="valueChartCardWidgetConfigForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index 76b458e4e4..966e6fb9f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -48,7 +48,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -67,11 +67,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="barChartWidgetConfigForm.get('iconColor').value"
@@ -113,7 +113,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
         {{ 'widgets.bar-chart.label-on-bar' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="barLabelFont"
                           disabledLineHeight
                           forceSizeUnit="px"
@@ -129,7 +129,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
         {{ 'widgets.bar-chart.value-on-bar' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="barValueFont"
                           disabledLineHeight
                           forceSizeUnit="px"
@@ -194,10 +194,9 @@
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showLegend').value" [disabled]="!barChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -215,7 +214,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Humidity">
             </tb-font-settings>
@@ -230,10 +229,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetConfigForm.get('showTooltip').value" [disabled]="!barChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -241,7 +239,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -254,7 +252,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -269,8 +267,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: barChartWidgetConfigForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
index a202a81cf6..4fe4c0dc07 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/comparison-keys-table.component.html
@@ -25,7 +25,7 @@
   <div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body">
     <div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
       <tb-comparison-key-row
-          fxFlex
+          class="flex-1"
           [datasourceType]="datasourceType"
           [formControl]="keyControl">
       </tb-comparison-key-row>
@@ -33,6 +33,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.chart.no-series' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.chart.no-series' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
index 0c6dc11bda..cf3bfbb2dc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/flot-basic-config.component.html
@@ -43,8 +43,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="flotWidgetConfigForm.get('iconColor').value"
@@ -109,10 +109,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="flotWidgetConfigForm.get('showLegend').value" [disabled]="!flotWidgetConfigForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index 520ad98e75..b6869437d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -49,8 +49,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -68,7 +68,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="latestChartWidgetConfigForm.get('iconColor').value"
@@ -101,10 +101,9 @@
   <ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showLegend').value" [disabled]="!latestChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -122,7 +121,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Wind">
             </tb-font-settings>
@@ -134,7 +133,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [previewText]="valuePreviewFn">
             </tb-font-settings>
@@ -149,10 +148,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetConfigForm.get('showTooltip').value" [disabled]="!latestChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -160,7 +158,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
                 <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
@@ -170,7 +168,7 @@
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -240,8 +238,8 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
           {{ 'widgets.pie-chart.label' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
                 {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
@@ -261,7 +259,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.border' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>px</div>
@@ -274,7 +272,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.radius' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>%</div>
@@ -316,9 +314,9 @@
           {{ 'widgets.latest-chart.clockwise-layout' | translate }}
         </mat-slide-toggle>
       </div>
-      <div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between">
+      <div [class.!hidden]="!doughnutTotalEnabled" class="tb-form-row space-between">
         <div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="totalValueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -343,7 +341,7 @@
       <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div>
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="axisMin"
@@ -383,7 +381,7 @@
       <div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div>
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="axisMin"
@@ -440,8 +438,8 @@
         <mat-slide-toggle class="mat-slide" formControlName="showLine">
           {{ 'widgets.radar-chart.line' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-row items-center justify-start gap-2">
+          <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="lineType">
               <mat-option *ngFor="let type of chartLineTypes" [value]="type">
                 {{ chartLineTypeTranslations.get(type) | translate }}
@@ -458,8 +456,8 @@
         <mat-slide-toggle class="mat-slide" formControlName="showPoints">
           {{ 'widgets.radar-chart.points' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-row items-center justify-start gap-2">
+          <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointShape">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
@@ -476,8 +474,8 @@
         <mat-slide-toggle class="mat-slide" formControlName="showLabel">
           {{ 'widgets.radar-chart.points-label' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                 {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -517,7 +515,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
           {{ 'widgets.radar-chart.ticks-label' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="axisTickLabelFont"
                             clearButton
                             disabledLineHeight
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index eb1b2298a7..5388f7c16b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -32,7 +32,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -51,11 +51,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="rangeChartWidgetConfigForm.get('iconColor').value"
@@ -183,8 +183,8 @@
             {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
           </div>
         </mat-slide-toggle>
-        <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="pointLabelPosition">
               <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                 {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -256,10 +256,9 @@
   </tb-time-series-chart-thresholds-panel>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showLegend').value" [disabled]="!rangeChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -277,7 +276,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="20 - 30">
             </tb-font-settings>
@@ -292,10 +291,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showTooltip').value" [disabled]="!rangeChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -303,7 +301,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -316,7 +314,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -330,8 +328,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: rangeChartWidgetConfigForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
index 51ef353a10..7e8d78c15c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
@@ -26,7 +26,7 @@
       formControlName="datasources">
   </tb-datasources>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ seriesMode === 'comparison' ? ('widgets.time-series-chart.comparison.comparison-hint' | translate) : null }}">
         {{ 'widgets.chart.series' | translate }}
       </div>
@@ -58,7 +58,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
         {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="timeForComparison">
             <mat-option [value]="'previousInterval'">
@@ -81,7 +81,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [fxShow]="timeSeriesChartWidgetConfigForm.get('timeForComparison').value === 'customInterval'"
+        <mat-form-field [class.!hidden]="timeSeriesChartWidgetConfigForm.get('timeForComparison').value !== 'customInterval'"
                         appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
           <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -120,7 +120,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -139,11 +139,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="timeSeriesChartWidgetConfigForm.get('iconColor').value"
@@ -188,10 +188,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showLegend').value"
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -199,7 +198,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendLabelColor').value}"
                               previewText="Temperature">
@@ -212,7 +211,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendValueColor').value}"
                               previewText="22 °C">
@@ -225,7 +224,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.column-title' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendColumnTitleFont"
                               [initialPreviewStyle]="{color: timeSeriesChartWidgetConfigForm.get('legendColumnTitleColor').value}"
                               previewText="{{ 'legend.Avg' | translate }}">
@@ -245,10 +244,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showTooltip').value"
                          [disabled]="!timeSeriesChartWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -265,7 +263,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipLabelFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipLabelColor').value }"
                               previewText="Temperature">
@@ -278,7 +276,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipValueColor').value }"
                               [previewText]="tooltipValuePreviewFn">
@@ -293,8 +291,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                    formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [initialPreviewStyle]="{ color: timeSeriesChartWidgetConfigForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
index 0c8be80bf6..ceb75487c6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
@@ -75,11 +75,11 @@
   <div *ngIf="!hideDecimals && !hideDataKeyDecimals && (!singleRow || displayUnitsOrDigits)" class="tb-decimals-field">
     <mat-form-field *ngIf="displayUnitsOrDigits" appearance="outline" class="tb-inline-field number" subscriptSizing="dynamic">
       <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-      <div *ngIf="singleRow" matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+      <div *ngIf="singleRow" matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
     </mat-form-field>
   </div>
   <div *ngIf="!singleRow" class="tb-form-table-row-cell-buttons">
-    <div fxHide.lt-lg class="tb-settings-button">
+    <div class="tb-settings-button lt-lg:!hidden">
       <button *ngIf="modelValue"
               type="button"
               mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
index 59a3bcb3cb..2526037d00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
@@ -38,7 +38,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            class="tb-draggable-form-table-row"
            *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
-        <tb-data-key-row fxFlex
+        <tb-data-key-row class="flex-1"
                          [formControl]="keyControl"
                          required
                          [datasourceType]="datasourceType"
@@ -60,11 +60,11 @@
                          (keyRemoved)="removeKey($index)">
         </tb-data-key-row>
         <div class="tb-form-table-row-cell-buttons">
-          <button fxHide.lt-lg
-                  mat-icon-button
+          <button mat-icon-button
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  class="lt-lg:!hidden"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -81,6 +81,5 @@
   </div>
 </div>
 <ng-template #noKeys>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ noKeysText }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ noKeysText }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
index d2a2e59cb2..57af5716aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.html
@@ -16,9 +16,9 @@
 
 -->
 <div class="tb-form-panel" (click)="manageWidgetActions()" style="cursor: pointer;">
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+  <div class="flex flex-row items-center justify-start gap-4">
     <div class="tb-form-panel-title" translate style="padding-right: 48px;">widget-config.actions</div>
-    <mat-chip-listbox fxFlex>
+    <mat-chip-listbox class="flex-1">
       <ng-container *ngFor="let actionSourceId of widgetActionSourceIds">
         <mat-chip *ngFor="let widgetAction of widgetActionsByActionSourceId(actionSourceId)">
           <tb-icon matChipAvatar>{{ widgetAction.icon }}</tb-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
index 1c3cd26863..903df04aba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/entity/entities-table-basic-config.component.html
@@ -43,8 +43,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.card-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -62,7 +62,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.card-icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="entitiesTableWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
index 9550bf4fa3..a47366733f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
         {{ 'widgets.gauge.units-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -51,7 +51,7 @@
 
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-unit-input
           formControlName="units">
         </tb-unit-input>
@@ -70,10 +70,10 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="valueBox">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueInt" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           disabledLineHeight
@@ -88,7 +88,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.ticks</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
index 02e47db0f8..46f7553d42 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
@@ -35,8 +35,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width"  formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
         <tb-font-settings formControlName="titleFont"
@@ -54,7 +54,7 @@
       <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
         {{ 'widget-config.icon' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="compassGaugeWidgetConfigForm.get('iconColor').value"
@@ -72,10 +72,10 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.compass-appearance</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.gauge.labels</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-string-items-list
           style="display: flex"
-          fxFlex
+          class="flex-1"
           appearance="outline"
           subscriptSizing="dynamic"
           editable
@@ -85,7 +85,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.label-style</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="majorTickFont"
                           disabledLineHeight>
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
index 11e0d6abc2..1f5d3996f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
@@ -55,7 +55,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
         {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="minMaxFont"
                           disabledLineHeight
                           [previewText]="previewFn">
@@ -68,7 +68,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -92,14 +92,14 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input
           class="flex"
           formControlName="units">
         </tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           disabledLineHeight
@@ -116,7 +116,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.gauge.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index f5a5693a63..7ac93f9d0c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -52,7 +52,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -71,11 +71,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.battery-level.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="batteryLevelWidgetConfigForm.get('iconColor').value"
@@ -91,7 +91,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-chip-listbox formControlName="autoScaleValueSize">
           <mat-chip-option [value]="true">{{ 'widgets.battery-level.auto-scale' | translate }}</mat-chip-option>
         </mat-chip-listbox>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index a3bfce9d5d..9808548bbe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -50,10 +50,10 @@
         {{ 'widgets.liquid-level-card.icon' | translate }}
       </mat-slide-toggle>
       <div class="tb-flex row flex-end align-center">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="levelCardWidgetConfigForm.get('iconColor').value"
@@ -63,7 +63,7 @@
         </tb-color-input>
       </div>
     </div>
-    <div fxFlex fxLayout="column" class="tb-form-row space-between">
+    <div class="tb-form-row space-between flex-1 flex-col">
       <div class="tb-flex row space-between align-center no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
@@ -73,7 +73,7 @@
         </tb-toggle-select>
       </div>
       <tb-image-cards-select #shapesImageCardsSelect
-                             [fxShow]="levelCardWidgetConfigForm.get('tankSelectionType').value === DataSourceType.static"
+                             [class.!hidden]="levelCardWidgetConfigForm.get('tankSelectionType').value !== DataSourceType.static"
                              rowHeight="1:1"
                              [cols]="{columns: 5,
                                     breakpoints: {
@@ -154,7 +154,7 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row column-xs" [fxShow]="volumeInput">
+    <div class="tb-form-row column-xs" [class.!hidden]="!volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
       <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -165,7 +165,7 @@
           </mat-select>
         </mat-form-field>
         <mat-form-field *ngIf="levelCardWidgetConfigForm.get('volumeSource').value === DataSourceType.static; else volumeAttributes"
-                        appearance="outline" class="flex number" subscriptSizing="dynamic">
+                        appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="volumeConstant" type="number"
                  min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <mat-icon matSuffix
@@ -186,7 +186,7 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
+    <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
       <div class="tb-flex row flex-start align-center">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -227,10 +227,10 @@
          *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
       <div class="tb-flex row flex-end align-center">
-        <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field style="max-width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number"
                  min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -254,10 +254,9 @@
     <mat-expansion-panel class="tb-settings"
       [expanded]="levelCardWidgetConfigForm.get('showTooltip').value"
       [disabled]="!levelCardWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -272,10 +271,10 @@
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
             </tb-unit-input>
-            <mat-form-field style="width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
+            <mat-form-field style="width: 40%;" appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                      max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipLevelFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -289,7 +288,7 @@
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
           <div class="tb-flex row flex-start align-center">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index 0e8475aacf..6a147c18db 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -46,7 +46,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -65,12 +65,12 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.signal-strength.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize"
                  placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="signalStrengthWidgetConfigForm.get('iconColor').value"
@@ -86,8 +86,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.signal-strength.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -113,10 +113,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="signalStrengthWidgetConfigForm.get('showTooltip').value"
                          [disabled]="!signalStrengthWidgetConfigForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -126,12 +125,12 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
-            <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+            <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="decimals" type="number" min="0" max="15" step="1"
                      placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -146,8 +145,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index e43dd1665a..4233427e8c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -61,7 +61,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 9fa2d1b1a5..187a1f4a16 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -34,7 +34,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -43,7 +43,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -86,7 +86,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -103,11 +103,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.single-switch.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="singleSwitchWidgetConfigForm.get('iconColor').value?.color"
@@ -121,22 +121,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:items-center lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -146,22 +146,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:items-center lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -173,7 +173,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
         {{ 'widgets.single-switch.on-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -190,7 +190,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
         {{ 'widgets.single-switch.off-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index 5dd62493ec..8c49a4809e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -21,7 +21,7 @@
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -31,7 +31,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -41,7 +41,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -75,7 +75,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -94,11 +94,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.slider.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="sliderWidgetConfigForm.get('iconColor').value"
@@ -114,11 +114,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -131,7 +131,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.slider.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -146,7 +146,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.slider.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
@@ -160,7 +160,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
         {{ 'widgets.slider.tick-marks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMarksCount" type="number" min="2"
                  step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -172,15 +172,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColor">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -190,15 +190,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -211,11 +211,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetConfigForm.get('leftIconColor').value"
                                  formControlName="leftIcon">
@@ -230,11 +230,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetConfigForm.get('rightIconColor').value"
                                  formControlName="rightIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
index e9c6f0967e..d3e31fe189 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
@@ -34,7 +34,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
           {{ 'widget-config.title' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
@@ -53,11 +53,11 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
           {{ 'widget-config.card-icon' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
             <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
-          <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+          <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
           <tb-material-icon-select asBoxInput
                                    iconClearButton
                                    [color]="scadaSymbolWidgetConfigForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 0dd9a2ebd9..5b74a67d38 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -30,8 +30,8 @@
     <div class="tb-form-panel-title" translate>widgets.wind-speed-direction.values</div>
     <div class="tb-form-row">
       <div class="fixed-title-width tb-required" translate>widgets.wind-speed-direction.wind-direction</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-data-key-row fxFlex
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <tb-data-key-row class="flex-1"
                          formControlName="windDirectionKey"
                          required
                          [datasourceType]="datasource?.type"
@@ -55,8 +55,8 @@
     </div>
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.wind-speed-direction.center-value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-data-key-row fxFlex
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <tb-data-key-row class="flex-1"
                          formControlName="centerValueKey"
                          [datasourceType]="datasource?.type"
                          [deviceId]="datasource?.deviceId"
@@ -94,7 +94,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widget-config.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -113,11 +113,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.wind-speed-direction.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="windSpeedDirectionWidgetConfigForm.get('iconColor').value"
@@ -153,8 +153,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.major-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="majorTicksFontEnabled"
+      <div class="flex flex-row items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('majorTicksColor').value }"
                           [autoScale]="true"
@@ -167,8 +167,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.minor-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="minorTicksFontEnabled"
+      <div class="flex flex-row items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetConfigForm.get('minorTicksColor').value }"
                           [autoScale]="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
index a7ada72321..4d5f38d30e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 900px;">
   <mat-toolbar color="primary">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <tb-toggle-select *ngIf="hasAdvanced"
                       appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
                       [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
@@ -53,7 +53,7 @@
       formControlName="dataKey">
     </tb-data-key-config>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
index f4b1272812..1930016656 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-key-config.component.html
@@ -17,7 +17,7 @@
 -->
 <div *ngIf="dataKeyConfigMode === dataKeyConfigModes.general; else advanced"
      [formGroup]="dataKeyFormGroup">
-  <div class="mat-padding" fxLayout="column" style="gap: 16px;">
+  <div class="mat-padding flex flex-col gap-4">
     <div class="tb-form-panel">
       <div class="tb-form-panel-title" translate>datakey.general</div>
       <mat-form-field *ngIf="modelValue.type !== dataKeyTypes.function && !hideDataKeyName" subscriptSizing="dynamic">
@@ -65,7 +65,7 @@
                         formControlName="color">
         </tb-color-input>
       </div>
-      <section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function">
+      <section class="flex flex-col" *ngIf="modelValue.type === dataKeyTypes.function">
         <span translate>datakey.data-generation-func</span>
         <br/>
         <tb-js-func #funcBodyEdit
@@ -103,8 +103,8 @@
       <div class="tb-form-panel-title" translate>datakey.delta-calculation</div>
       <div class="tb-form-panel stroked tb-slide-toggle">
         <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
-          <mat-panel-title fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="8px">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
+          <mat-panel-title class="flex flex-col items-start justify-center gap-2">
             <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
               {{ 'datakey.enable-delta-calculation' | translate }}
             </mat-slide-toggle>
@@ -162,10 +162,9 @@
     <div class="tb-form-panel tb-slide-toggle"
          *ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing">
       <mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="usePostProcessing" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="usePostProcessing" (click)="$event.stopPropagation()">
               {{ 'datakey.use-data-post-processing-func' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -192,7 +191,7 @@
   </div>
 </div>
 <ng-template #advanced>
-  <div class="mat-padding" fxLayout="column" [formGroup]="dataKeySettingsFormGroup">
+  <div class="mat-padding flex flex-col" [formGroup]="dataKeySettingsFormGroup">
     <tb-widget-settings
       [dashboard]="dashboard"
       [aliasController]="aliasController"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
index b5ae7b9dd9..524037f2af 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.html
@@ -40,8 +40,8 @@
                     dndDraggingSourceClass="tb-chip-dragging"
                     [removable]="!disabled && !isCountDatasource"
                     (removed)="remove(key)">
-        <div dndDragImageRef fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip"
-             [ngClass]="{'tb-dragging-chip-image': $index === dragIndex}">
+        <div dndDragImageRef class="tb-attribute-chip flex flex-row items-center justify-start gap-1"
+             [class.tb-dragging-chip-image]="$index === dragIndex">
           <div class="tb-absolute-fill tb-dragging-chip-image-fill"></div>
           <div dndHandle *ngIf="!disabled && !dragDisabled" class="tb-chip-drag-handle">
             <mat-icon class="tb-mat-18">drag_indicator</mat-icon>
@@ -71,7 +71,7 @@
               </strong>
             </div>
           </div>
-          <div *ngIf="!hideDataKeyColor" fxHide.xs style="padding: 3px;">
+          <div *ngIf="!hideDataKeyColor" class="xs:!hidden" style="padding: 3px;">
             <div #keyColorButton class="tb-color-preview small box" (click)="openColorPickerPopup(key, $event, keyColorButton)">
               <div class="tb-color-result" [style]="{background: key.color}"></div>
             </div>
@@ -89,7 +89,7 @@
         </div>
       </mat-chip-row>
       <input matInput type="text" placeholder="{{ !disabled && (!maxDataKeysSet || keys.length < maxDataKeys) ? secondaryPlaceholder : '' }}"
-             [ngClass]="{'tb-dragging': dragIndex > -1}"
+             [class.tb-dragging]="dragIndex > -1"
              style="max-width: 200px;"
              #keyInput
              formControlName="key"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
index e01d7e808a..d52a460f54 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
@@ -310,7 +310,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, OnChange
           }
         }),
         filter((value) => typeof value === 'string'),
-        map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+        map((value) => value ? value : ''),
         mergeMap(name => this.fetchKeys(name) ),
         share()
       );
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
index a5fb98a1ab..18eb6f7a23 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
@@ -24,9 +24,9 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <section fxLayout="column" [ngSwitch]="datasourceFormGroup.get('type').value">
+  <section class="flex flex-col" [ngSwitch]="datasourceFormGroup.get('type').value">
     <ng-template [ngSwitchCase]="datasourceType.function">
-      <mat-form-field *ngIf="!hideDatasourceLabel" fxFlex>
+      <mat-form-field *ngIf="!hideDatasourceLabel" class="flex-1">
         <mat-label translate>datasource.label</mat-label>
         <input matInput
                formControlName="name">
@@ -55,15 +55,15 @@
         [callbacks]="entityAliasSelectCallbacks">
       </tb-entity-alias-select>
       <mat-form-field *ngIf="!hideDatasourceLabel && [datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceFormGroup.get('type').value)"
-                      fxFlex>
+                      class="flex-1">
         <input matInput
                placeholder="{{ 'datasource.label' | translate }}"
                formControlName="name">
       </mat-form-field>
     </ng-template>
   </section>
-  <section *ngIf="!hideDataKeys" fxLayout="column" fxLayoutAlign="stretch" fxFlex>
-    <tb-data-keys class="tb-data-keys" fxFlex
+  <section *ngIf="!hideDataKeys" class="flex flex-1 flex-col items-stretch justify-start">
+    <tb-data-keys class="tb-data-keys flex-1"
                   [widgetType]="widgetType"
                   [datasourceType]="datasourceFormGroup.get('type').value"
                   [maxDataKeys]="maxDataKeys"
@@ -80,7 +80,7 @@
                   [deviceId]="datasourceFormGroup.get('deviceId').value"
                   formControlName="dataKeys">
     </tb-data-keys>
-    <tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys" fxFlex
+    <tb-data-keys *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys flex-1"
                   [widgetType]="widgetTypes.latest"
                   [datasourceType]="datasourceFormGroup.get('type').value"
                   latestDataKeys
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
index a97997cebb..c5342ab804 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div [formGroup]="datasourcesFormGroup" class="tb-form-panel tb-datasources" [ngClass]="{'no-padding-bottom': !showAddDatasource}">
-  <div fxLayout="column">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+<div [formGroup]="datasourcesFormGroup" class="tb-form-panel tb-datasources" [class.no-padding-bottom]="!showAddDatasource">
+  <div class="flex flex-col">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title">{{ (singleDatasource ? (isAlarmSource ? 'widget-config.alarm-source' : 'widget-config.datasource') : 'widget-config.datasources') | translate }}</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="center center" *ngIf="timeseriesKeyError">
+      <div class="flex flex-1 flex-row items-center justify-center" *ngIf="timeseriesKeyError">
         <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
       </div>
       <tb-toggle-select *ngIf="basicMode && !hideDatasourcesMode" [ngModel]="datasourcesMode" (ngModelChange)="datasourcesModeChange($event)"
@@ -32,8 +32,8 @@
          class="tb-form-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: maxDatasources} }}</div>
   </div>
   <div *ngIf="datasourcesFormArray.length === 0; else datasourcesTemplate">
-                <span translate fxLayoutAlign="center center"
-                      class="tb-prompt">datasource.add-datasource-prompt</span>
+                <span translate
+                      class="tb-prompt flex items-center justify-center">datasource.add-datasource-prompt</span>
   </div>
   <ng-template #datasourcesTemplate>
     <div style="overflow: auto;">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
index 7adea38000..0f20ac2e29 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="targetDeviceFormGroup" class="tb-form-panel">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
+  <div class="flex flex-row items-center justify-between">
     <div class="tb-form-panel-title" translate>widget-config.target-device</div>
     <tb-toggle-select formControlName="type">
       <tb-toggle-option [value]="targetDeviceType.device">{{ 'device.device' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
index 9a8676e72e..803c8e42ed 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-config-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="timewindowConfig" class="tb-form-panel">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
+  <div class="flex flex-row items-center justify-between">
     <div class="tb-form-panel-title" translate>timewindow.timewindow</div>
     <tb-toggle-select formControlName="useDashboardTimewindow" selectMediaBreakpoint="xs">
       <tb-toggle-option [value]="true">{{ 'widget-config.use-dashboard-timewindow' | translate }}</tb-toggle-option>
@@ -27,7 +27,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="displayTimewindow">
       {{ 'widget-config.display-timewindow' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-1 flex-row items-center justify-between">
       <tb-timewindow asButton="true"
                      strokedButton
                      noMargin
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
index 5d5773b061..0450949e3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/timewindow-style-panel.component.html
@@ -21,7 +21,7 @@
     <mat-slide-toggle class="mat-slide" formControlName="showIcon">
       {{ 'timewindow.icon' | translate }}
     </mat-slide-toggle>
-    <div fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex items-center justify-start gap-2">
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="iconSize">
       </mat-form-field>
@@ -33,7 +33,7 @@
   </div>
   <div class="tb-form-row">
     <div class="fixed-title-width" translate>timewindow.icon-position</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="iconPosition" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="'left'">
           {{ 'timewindow.icon-position-left' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts
index e1ff910ab2..d8060d7d0e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts
@@ -15,15 +15,12 @@
 ///
 
 import {
-  AfterViewInit,
   Component,
-  ComponentFactoryResolver,
   ComponentRef,
   forwardRef,
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
   SimpleChanges,
   ViewChild,
   ViewContainerRef
@@ -49,7 +46,6 @@ import { Dashboard } from '@shared/models/dashboard.models';
 import { WidgetService } from '@core/http/widget.service';
 import { IAliasController } from '@core/api/widget-api.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
 import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models';
 
 @Component({
@@ -67,7 +63,7 @@ import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-con
     multi: true
   }]
 })
-export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit, OnChanges, Validator {
+export class WidgetSettingsComponent implements ControlValueAccessor, OnDestroy, OnChanges, Validator {
 
   @ViewChild('definedSettingsContent', {read: ViewContainerRef, static: true}) definedSettingsContainer: ViewContainerRef;
 
@@ -106,7 +102,6 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
   private propagateChange = (_v: any) => { };
 
   constructor(private translate: TranslateService,
-              private cfr: ComponentFactoryResolver,
               private widgetService: WidgetService,
               private fb: UntypedFormBuilder) {
     this.widgetSettingsFormGroup = this.fb.group({
@@ -121,9 +116,6 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
   registerOnTouched(fn: any): void {
   }
 
-  ngOnInit(): void {
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     for (const propName of Object.keys(changes)) {
       const change = changes[propName];
@@ -164,9 +156,6 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
     }
   }
 
-  ngAfterViewInit(): void {
-  }
-
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
@@ -232,8 +221,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
           this.changeSubscription = null;
         }
         this.definedSettingsContainer.clear();
-        const factory = this.cfr.resolveComponentFactory(componentType);
-        this.definedSettingsComponentRef = this.definedSettingsContainer.createComponent(factory);
+        this.definedSettingsComponentRef = this.definedSettingsContainer.createComponent(componentType);
         this.definedSettingsComponent = this.definedSettingsComponentRef.instance;
         this.definedSettingsComponent.aliasController = this.aliasController;
         this.definedSettingsComponent.callbacks = this.callbacks;
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts
index 6ac4ff8bd8..87c0696352 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.component.ts
@@ -15,16 +15,13 @@
 ///
 
 import { MatDialogRef } from '@angular/material/dialog';
-import { Directive, InjectionToken } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
+import { Directive, inject, InjectionToken } from '@angular/core';
 import { Router } from '@angular/router';
 import { PageComponent } from '@shared/components/page.component';
 import { CustomDialogContainerComponent } from './custom-dialog-container.component';
 import { UntypedFormBuilder, Validators } from '@angular/forms';
-import { TbInject } from '@shared/decorators/tb-inject';
 
-export const CUSTOM_DIALOG_DATA = new InjectionToken<any>('ConfigDialogData');
+export const CUSTOM_DIALOG_DATA = new InjectionToken<CustomDialogData>('ConfigDialogData');
 
 export interface CustomDialogData {
   controller: (instance: CustomDialogComponent) => void;
@@ -37,12 +34,13 @@ export class CustomDialogComponent extends PageComponent {
 
   [key: string]: any;
 
-  constructor(@TbInject(Store) protected store: Store<AppState>,
-              @TbInject(Router) protected router: Router,
-              @TbInject(MatDialogRef) public dialogRef: MatDialogRef<CustomDialogContainerComponent>,
-              @TbInject(UntypedFormBuilder) public fb: UntypedFormBuilder,
-              @TbInject(CUSTOM_DIALOG_DATA) public data: CustomDialogData) {
-    super(store);
+  protected router = inject(Router);
+  public dialogRef = inject(MatDialogRef<CustomDialogContainerComponent>);
+  public data = inject(CUSTOM_DIALOG_DATA);
+  public fb = inject(UntypedFormBuilder);
+
+  constructor() {
+    super();
     // @ts-ignore
     this.validators = Validators;
     this.data.controller(this);
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
index 2705a8902c..3dac11f7b6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
@@ -35,7 +35,7 @@ import {
 @Injectable()
 export class CustomDialogService {
 
-  private customModules: Array<Type<any>>;
+  private customImports: Array<Type<any>>;
 
   constructor(
     private dynamicComponentFactoryService: DynamicComponentFactoryService,
@@ -47,19 +47,19 @@ export class CustomDialogService {
   ) {
   }
 
-  setAdditionalModules(modules: Array<Type<any>>) {
-    this.customModules = modules;
+  setAdditionalImports(imports: Array<Type<any>>) {
+    this.customImports = imports;
   }
 
   customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any,
                config?: MatDialogConfig): Observable<any> {
-    const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule,
+    const imports = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule,
       this.widgetComponentsModule];
-    if (Array.isArray(this.customModules)) {
-      modules.push(...this.customModules);
+    if (Array.isArray(this.customImports)) {
+      imports.push(...this.customImports);
     }
     return this.dynamicComponentFactoryService.createDynamicComponent(
-      class CustomDialogComponentInstance extends CustomDialogComponent {}, template, modules).pipe(
+      class CustomDialogComponentInstance extends CustomDialogComponent {}, template, imports).pipe(
       mergeMap((componentType) => {
           const dialogData: CustomDialogContainerData = {
             controller,
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index 4e1a2ba038..d2b1e9a6a2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div class="dashboard-state-dialog" [ngStyle]="dialogStyle" fxLayout="column">
+<div class="dashboard-state-dialog flex flex-col" [style]="dialogStyle">
   <mat-toolbar color="primary">
     <h2>{{title}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -26,11 +26,11 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div class="dashboard-state-dialog-content" mat-dialog-content fxFlex fxLayout="column" style="padding: 8px;">
+  <div class="dashboard-state-dialog-content flex flex-1 flex-col" mat-dialog-content style="padding: 8px;">
     <tb-dashboard-page [embedded]="true" [syncStateWithQueryParam]="false" [hideToolbar]="hideToolbar"
                        [currentState]="state" [dashboard]="dashboard" [parentDashboard]="parentDashboard" style="width: 100%; height: 100%;"></tb-dashboard-page>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts
index a14fbe37a8..362764fd18 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.ts
@@ -14,15 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
-  Component,
-  ComponentFactoryResolver,
-  Inject,
-  Injector,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
+import { Component, Inject, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
diff --git a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
index d047abdec5..44008d3e0f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
@@ -15,10 +15,13 @@
 ///
 
 import { PageComponent } from '@shared/components/page.component';
-import { Directive, Injector, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { IDynamicWidgetComponent, WidgetContext } from '@home/models/widget-component.models';
+import { Directive, inject, Injector, OnDestroy, OnInit } from '@angular/core';
+import {
+  IDynamicWidgetComponent,
+  widgetContextToken,
+  widgetErrorMessagesToken,
+  widgetTitlePanelToken
+} from '@home/models/widget-component.models';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { RafService } from '@core/services/raf.service';
 import {
@@ -45,7 +48,6 @@ import { DatePipe } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { TbInject } from '@shared/decorators/tb-inject';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
 import { UserSettingsService } from '@core/http/user-settings.service';
 import { ImagePipe } from '@shared/pipe/image.pipe';
@@ -64,38 +66,39 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid
 
   validators = Validators;
 
-  constructor(@TbInject(RafService) public raf: RafService,
-              @TbInject(Store) protected store: Store<AppState>,
-              @TbInject(UntypedFormBuilder) public fb: UntypedFormBuilder,
-              @TbInject(Injector) public readonly $injector: Injector,
-              @TbInject('widgetContext') public readonly ctx: WidgetContext,
-              @TbInject('errorMessages') public readonly errorMessages: string[],
-              @TbInject('widgetTitlePanel') public readonly widgetTitlePanel: TemplateRef<any>) {
-    super(store);
-    this.ctx.$injector = $injector;
-    this.ctx.deviceService = $injector.get(DeviceService);
-    this.ctx.assetService = $injector.get(AssetService);
-    this.ctx.entityViewService = $injector.get(EntityViewService);
-    this.ctx.customerService = $injector.get(CustomerService);
-    this.ctx.dashboardService = $injector.get(DashboardService);
-    this.ctx.userService = $injector.get(UserService);
-    this.ctx.attributeService = $injector.get(AttributeService);
-    this.ctx.entityRelationService = $injector.get(EntityRelationService);
-    this.ctx.entityService = $injector.get(EntityService);
-    this.ctx.authService = $injector.get(AuthService);
-    this.ctx.dialogs = $injector.get(DialogService);
-    this.ctx.customDialog = $injector.get(CustomDialogService);
-    this.ctx.resourceService = $injector.get(ResourceService);
-    this.ctx.userSettingsService = $injector.get(UserSettingsService);
-    this.ctx.utilsService = $injector.get(UtilsService);
-    this.ctx.telemetryWsService = $injector.get(TelemetryWebsocketService);
-    this.ctx.date = $injector.get(DatePipe);
-    this.ctx.imagePipe = $injector.get(ImagePipe);
-    this.ctx.milliSecondsToTimeString = $injector.get(MillisecondsToTimeStringPipe);
-    this.ctx.translate = $injector.get(TranslateService);
-    this.ctx.http = $injector.get(HttpClient);
-    this.ctx.sanitizer = $injector.get(DomSanitizer);
-    this.ctx.router = $injector.get(Router);
+  public raf = inject(RafService);
+  public fb = inject(UntypedFormBuilder);
+  public readonly $injector = inject(Injector);
+  public readonly ctx = inject(widgetContextToken);
+  public readonly errorMessages = inject(widgetErrorMessagesToken);
+  public readonly widgetTitlePanel = inject(widgetTitlePanelToken);
+
+  constructor() {
+    super();
+    this.ctx.$injector = this.$injector;
+    this.ctx.deviceService = this.$injector.get(DeviceService);
+    this.ctx.assetService = this.$injector.get(AssetService);
+    this.ctx.entityViewService = this.$injector.get(EntityViewService);
+    this.ctx.customerService = this.$injector.get(CustomerService);
+    this.ctx.dashboardService = this.$injector.get(DashboardService);
+    this.ctx.userService = this.$injector.get(UserService);
+    this.ctx.attributeService = this.$injector.get(AttributeService);
+    this.ctx.entityRelationService = this.$injector.get(EntityRelationService);
+    this.ctx.entityService = this.$injector.get(EntityService);
+    this.ctx.authService = this.$injector.get(AuthService);
+    this.ctx.dialogs = this.$injector.get(DialogService);
+    this.ctx.customDialog = this.$injector.get(CustomDialogService);
+    this.ctx.resourceService = this.$injector.get(ResourceService);
+    this.ctx.userSettingsService = this.$injector.get(UserSettingsService);
+    this.ctx.utilsService = this.$injector.get(UtilsService);
+    this.ctx.telemetryWsService = this.$injector.get(TelemetryWebsocketService);
+    this.ctx.date = this.$injector.get(DatePipe);
+    this.ctx.imagePipe = this.$injector.get(ImagePipe);
+    this.ctx.milliSecondsToTimeString = this.$injector.get(MillisecondsToTimeStringPipe);
+    this.ctx.translate = this.$injector.get(TranslateService);
+    this.ctx.http = this.$injector.get(HttpClient);
+    this.ctx.sanitizer = this.$injector.get(DomSanitizer);
+    this.ctx.router = this.$injector.get(Router);
 
     this.ctx.$scope = this;
     if (this.ctx.defaultSubscription) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
index b1eb79f2bb..20613b3d4f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
@@ -17,8 +17,7 @@
 import {
   AttributeData,
   AttributeScope,
-  LatestTelemetry,
-  TelemetrySubscriber,
+  LatestTelemetry, SharedTelemetrySubscriber,
   TelemetryType,
   telemetryTypeTranslationsShort
 } from '@shared/models/telemetry/telemetry.models';
@@ -436,7 +435,7 @@ export class ExecuteRpcValueGetter<V> extends ValueGetter<V> {
 export abstract class TelemetryValueGetter<V, S extends TelemetryValueSettings> extends ValueGetter<V> {
 
   protected targetEntityId: EntityId;
-  private telemetrySubscriber: TelemetrySubscriber;
+  private telemetrySubscriber: SharedTelemetrySubscriber;
 
   protected constructor(protected ctx: WidgetContext,
                         protected settings: GetValueSettings<V>,
@@ -470,10 +469,10 @@ export abstract class TelemetryValueGetter<V, S extends TelemetryValueSettings>
 
   private subscribeForTelemetryValue(): Observable<V> {
     this.telemetrySubscriber =
-      TelemetrySubscriber.createEntityAttributesSubscription(this.ctx.telemetryWsService, this.targetEntityId,
+      SharedTelemetrySubscriber.createEntityAttributesSubscription(this.ctx.telemetryWsService, this.targetEntityId,
         this.scope(), this.ctx.ngZone, [this.getTelemetryValueSettings().key]);
     this.telemetrySubscriber.subscribe();
-    return this.telemetrySubscriber.attributeData$().pipe(
+    return this.telemetrySubscriber.attributeData$.pipe(
       map((data) => {
         let value: V = null;
         const entry = data.find(attr => attr.key === this.getTelemetryValueSettings().key);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
index b8fc11aed5..7db8a28556 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,13 +37,13 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!alarmsDatasource.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
                 <span>
                   {{ translate.get('alarm.selected-alarms',
                   {count: alarmsDatasource.selection.selected.length}) | async }}
                 </span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button *ngIf="allowAcknowledgment"
                 mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'alarm.acknowledge' | translate }}"
@@ -60,7 +60,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="alarmsDatasource" [trackBy]="trackByAlarmId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
@@ -78,16 +78,16 @@
           </mat-cell>
         </ng-container>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)">
+          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="isSorting(column)">
             {{ column.title }}
           </mat-header-cell>
           <mat-cell *matCellDef="let alarm; let row = index"
-                    [ngStyle]="cellStyle(alarm, column, row)"
+                    [style]="cellStyle(alarm, column, row)"
                     (click)="onCellClick($event, alarm, column, $index)"
                     [class.tb-pointer]="columnHasCellClick($index)">
             <span [innerHTML]="cellContent(alarm, column, row)"></span>
             <ng-container *ngIf="column.entityKey.key === 'assignee'">
-              <span class="assignee-cell" fxLayout="row" fxLayoutAlign="start center">
+              <span class="assignee-cell flex flex-row items-center justify-start">
                 <span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned"
                       class="assigned-container">
                   <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
@@ -120,60 +120,64 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction  * 48) + 'px',
-                                                                maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
+          <mat-header-cell *matHeaderCellDef>
+            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+              <div class="gt-md:!hidden" style="min-width: 48px;">
+              </div>
+              <div class="lt-lg:!hidden"
+                   [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
+              </div>
+            </ng-container>
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)" [ngStyle.gt-md]="{ minWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                               maxWidth: (alarmsDatasource.countCellButtonAction * 48) + 'px',
-                                                               width: (alarmsDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="showCellActionsMenu" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
-                        *ngIf="actionDescriptor.icon"
-                        matTooltip="{{ actionDescriptor.displayName }}"
-                        matTooltipPosition="above"
-                        (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                  <mat-icon>{{actionDescriptor.icon}}</mat-icon>
-                </button>
-              </ng-container>
-            </div>
-            <div fxHide [fxShow.lt-lg]="showCellActionsMenu" *ngIf="alarm.hasActions">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+          <mat-cell *matCellDef="let alarm; let row = index" [style]="rowStyle(alarm, row)">
+            <ng-container *ngIf="alarmsDatasource.countCellButtonAction">
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && alarmsDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
+                   [style.min-width]="(alarmsDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
+                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                          *ngIf="actionDescriptor.icon"
+                          matTooltip="{{ actionDescriptor.displayName }}"
+                          matTooltipPosition="above"
                           (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
+                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
                   </button>
                 </ng-container>
-              </mat-menu>
-            </div>
+              </div>
+              <div [class.!hidden]="!showCellActionsMenu || alarmsDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="alarm.hasActions">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <mat-icon class="material-icons">more_vert</mat-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  <ng-container *ngFor="let actionDescriptor of alarm.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                            [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
+                            (click)="onActionButtonClick($event, alarm, actionDescriptor)">
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                      <span>{{ actionDescriptor.displayName }}</span>
+                    </button>
+                  </ng-container>
+                </mat-menu>
+              </div>
+            </ng-container>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': enableSelection}" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': enableSelection,
-                             'mat-selected': alarmsDatasource.isSelected(alarm),
-                             'tb-current-entity': alarmsDatasource.isCurrentAlarm(alarm),
-                             'invisible': alarmsDatasource.dataLoading,
-                             'tb-pointer': hasRowAction}"
+        <mat-header-row [class.mat-row-select]="enableSelection" *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
+        <mat-row [class.mat-row-select]="enableSelection"
+                 [class.mat-selected]="alarmsDatasource.isSelected(alarm)"
+                 [class.tb-current-entity]="alarmsDatasource.isCurrentAlarm(alarm)"
+                 [class.invisible]="alarmsDatasource.dataLoading"
+                 [class.tb-pointer]="hasRowAction"
                  *matRowDef="let alarm; columns: displayedColumns; let row = index"
-                 [ngStyle]="rowStyle(alarm, row)"
+                 [style]="rowStyle(alarm, row)"
                  (click)="onRowClick($event, alarm)"></mat-row>
       </table>
-      <span [fxShow]="(alarmsDatasource.isEmpty() | async) && !alarmsDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="alarmsDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(alarmsDatasource.isEmpty() | async) === false || alarmsDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!alarmsDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center" >{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
index 00ec196552..6d7234f235 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" fxFlex class="mat-content mat-padding" (ngSubmit)="update()">
+<form class="mat-content mat-padding flex flex-1 flex-col" (ngSubmit)="update()">
   <div class="tb-form-panel no-padding">
     <div class="tb-form-row column-xs">
-      <div class="fixed-title-width" ngClass.xs="filters-title-mobile" translate>widgets.notification.notification-types</div>
-      <mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="flex fb-chips">
+      <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
+      <mat-form-field floatLabel="auto" appearance="outline" subscriptSizing="dynamic" class="fb-chips flex">
         <mat-chip-grid #chipList>
           <mat-chip-row
             *ngFor="let type of selectedNotificationTypes"
@@ -54,14 +54,14 @@
     </div>
   </div>
 
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <div class="tb-panel-actions flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="reset()"
             color="primary">
       {{ 'action.reset' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button type="button"
             (click)="cancel()"
             mat-button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 814f9f08d8..c97984c352 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -46,7 +46,7 @@
       <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
                                    layout === valueCardLayout.horizontal_reversed ? layout : ''">
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-        <div fxFlex></div>
+        <div class="flex-1"></div>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
       </ng-template>
     </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts
index 22d2a26473..c648dceb2a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts
@@ -107,9 +107,9 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
   }
   let lowerLeft: number[];
   if (offset !== 0 && isNumeric(value)) {
-    lowerLeft = api.coord([startTime, value >= 0 ? Number(value) + offset : offset]);
+    lowerLeft = api.coord([startTime, Number(value) >= 0 ? Number(value) + offset : offset]);
   } else {
-    lowerLeft = api.coord([startTime, value >= 0 ? value : 0]);
+    lowerLeft = api.coord([startTime, value]);
   }
   const size = api.size([delta, value]);
   const width = size[0];
@@ -140,7 +140,7 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
 
   if (renderCtx.labelOption.show) {
     let position = renderCtx.labelOption.position;
-    if (value < 0) {
+    if (Number(value) < 0) {
       if (position === 'top') {
         position = 'bottom';
       } else if (position === 'bottom') {
@@ -164,7 +164,7 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
   }
 
   let borderRadius: number[];
-  if (value < 0) {
+  if (Number(value) < 0) {
     borderRadius = [0, 0, renderCtx.visualSettings.borderRadius, renderCtx.visualSettings.borderRadius];
   } else {
     borderRadius = [renderCtx.visualSettings.borderRadius, renderCtx.visualSettings.borderRadius, 0, 0];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
index d90f7c9b10..1eb3c3bfc5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
@@ -1012,7 +1012,6 @@ export const createTimeSeriesXAxis = (id: string,
       mainType: 'xAxis',
       show: settings.show,
       type: 'time',
-      scale: true,
       position: settings.position,
       id,
       name: utils.customTranslation(settings.label, settings.label),
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
index b559f8de6c..045165f0a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-form-field *ngIf="settings.showTemplate" class="mat-block">
     <input readonly [ngModel]="model.chosenLabel" matInput type="text">
   </mat-form-field>
@@ -25,8 +25,8 @@
                                 [singleDatePicker]="settings.onePanel"
                                 [autoApply]="true" (choosedDate)="choosedDate($event)">
   </ngx-daterangepicker-material>
-  <div class="tb-panel-actions" fxLayout="row" *ngIf="!settings.autoConfirm">
-    <span fxFlex></span>
+  <div class="tb-panel-actions flex flex-row" *ngIf="!settings.autoConfirm">
+    <span class="flex-1"></span>
     <button mat-button mat-raised-button color="primary"
             type="button" (click)="apply()">
       {{ 'action.ok' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
index 0decaaf7ee..1dc4a46216 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
@@ -16,8 +16,10 @@
 
 -->
 <div class="date-range-navigator"
-     [ngClass]="{'short-mode':ctx.width < 400, 'labels-hidden': settings.hideLabels, 'long-mode': ctx.width >= 400}">
-  <mat-form-field class="mat-block" [fxHide]="settings.hidePicker" (click)="openNavigatorPanel($event)">
+     [class.short-mode]="ctx.width < 400"
+     [class.labels-hidden]="settings.hideLabels"
+     [class.long-mode]="ctx.width >= 400">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
     <mat-label *ngIf="!settings.hideLabels" translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
     <mat-select #datePicker [ngModel]="advancedModel.chosenLabel">
       <mat-option [value]="advancedModel.chosenLabel">
@@ -25,7 +27,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="mat-block" [fxHide]="settings.hideInterval">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
     <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Interval</mat-label>
     <mat-select [(ngModel)]="selectedDateInterval" (ngModelChange)="changeInterval()">
       <mat-option *ngIf="customInterval" [value]="customInterval.ts">
@@ -37,11 +39,11 @@
     </mat-select>
   </mat-form-field>
 
-  <div class="drn__element step" [fxHide]="settings.hideStepSize">
+  <div class="drn__element step" [class.!hidden]="settings.hideStepSize">
     <button mat-icon-button (click)="goBack()">
       <mat-icon>keyboard_arrow_left</mat-icon>
     </button>
-    <mat-form-field class="mat-block" fxFlex.gt-sm>
+    <mat-form-field class="mat-block gt-sm:flex-1">
       <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Step size</mat-label>
       <mat-select [(ngModel)]="selectedStepSize">
         <mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts
index 73f227c9ad..9db4f8308c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts
@@ -41,7 +41,7 @@ import {
   getFormattedDate
 } from '@home/components/widget/lib/date-range-navigator/date-range-navigator.models';
 import { KeyValue } from '@angular/common';
-import * as _moment from 'moment';
+import _moment from 'moment';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { MatSelect } from '@angular/material/select';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.models.ts
index c25b04c9c9..b613d855e0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.models.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import * as _moment from 'moment';
+import _moment from 'moment';
 
 export type DateRangeInterval = 'hour' | 'day' | 'week' | 'twoWeeks' | 'month' | 'threeMonths' | 'sixMonths';
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
index c0902af28e..8096a4d864 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <label class="tb-title" translate>entity.columns-to-display</label>
   <mat-checkbox [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
                 (ngModelChange)="update()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
index abbf62f973..c94e1cf83a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="tb-edges-overview tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <span class="mat-subheader" *ngIf="customerTitle" fxLayout="row">{{ customerTitle }}</span>
-    <span class="mat-subheader" *ngIf="!edgeIsDatasource" fxLayout="row" translate>edge.widget-datasource-error</span>
-    <div fxFlex class="tb-entities-nav-tree-panel">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <span class="mat-subheader flex flex-row" *ngIf="customerTitle">{{ customerTitle }}</span>
+    <span class="mat-subheader flex flex-row" *ngIf="!edgeIsDatasource" translate>edge.widget-datasource-error</span>
+    <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
       ></tb-nav-tree>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
index 7f30329e07..599010d76c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,7 +37,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="tb-entities-nav-tree-panel">
+    <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
         [onNodeSelected]="onNodeSelected"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
index 36d58742a6..1a72f6ecdb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,71 +37,75 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
+          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
             <mat-cell *matCellDef="let entity; let row = index"
                       [innerHTML]="cellContent(entity, column, row)"
-                      [ngStyle]="cellStyle(entity, column, row)"
+                      [style]="cellStyle(entity, column, row)"
                       (click)="onCellClick($event, entity, column, $index)"
                       [class.tb-pointer]="columnHasCellClick($index)">
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
+          <mat-header-cell *matHeaderCellDef>
+            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+              <div class="gt-md:!hidden" style="min-width: 48px;">
+              </div>
+              <div class="lt-lg:!hidden"
+                   [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
+              </div>
+            </ng-container>
           </mat-header-cell>
-          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        *ngIf="actionDescriptor.icon"
-                        matTooltip="{{ actionDescriptor.displayName }}"
-                        matTooltipPosition="above"
-                        (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                  <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                </button>
-              </ng-container>
-            </div>
-            <div fxHide [fxShow.lt-lg]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)">
+            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
+                   [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="isLoading$ | async"
+                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          *ngIf="actionDescriptor.icon"
+                          matTooltip="{{ actionDescriptor.displayName }}"
+                          matTooltipPosition="above"
                           (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
+                    <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                   </button>
                 </ng-container>
-              </mat-menu>
-            </div>
+              </div>
+              <div [class.!hidden]="!showCellActionsMenu || entityDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="entity.hasActions">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <mat-icon class="material-icons">more_vert</mat-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                            [disabled]="isLoading$ | async"
+                            (click)="onActionButtonClick($event, entity, actionDescriptor)">
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                      <span>{{ actionDescriptor.displayName }}</span>
+                    </button>
+                  </ng-container>
+                </mat-menu>
+              </div>
+            </ng-container>
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
-                             'invisible': entityDatasource.dataLoading,
-                             'tb-pointer': hasRowAction}"
+        <mat-row [class.tb-current-entity]="entityDatasource.isCurrentEntity(entity)"
+                 [class.invisible]="entityDatasource.dataLoading"
+                 [class.tb-pointer]="hasRowAction"
                  *matRowDef="let entity; columns: displayedColumns; let row = index"
-                 [ngStyle]="rowStyle(entity, row)"
+                 [style]="rowStyle(entity, row)"
                  (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
       </table>
-      <span [fxShow]="(entityDatasource.isEmpty() | async) && !entityDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="entityDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(entityDatasource.isEmpty() | async) === false || entityDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!entityDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
index 82ca0430cb..ebb7c6b5e1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-absolute-fill" [fxLayout]="legendContainerLayoutType">
+<div class="tb-absolute-fill flex" [class]="legendContainerLayoutType">
   <tb-legend *ngIf="displayLegend && isLegendFirst"
-             [ngStyle]="legendStyle"
+             [style]="legendStyle"
              [legendConfig]="legendConfig"
              [legendData]="legendData"
              (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
   </tb-legend>
-  <div fxFlex #flotElement></div>
+  <div class="flex-1" #flotElement></div>
   <tb-legend *ngIf="displayLegend && !isLegendFirst"
-             [ngStyle]="legendStyle"
+             [style]="legendStyle"
              [legendConfig]="legendConfig"
              [legendData]="legendData"
              (legendKeyHiddenChange)="onLegendKeyHiddenChange($event)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
index 389deee749..ec40f4b069 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
@@ -46,7 +46,7 @@ export class FlotWidgetComponent implements OnInit {
   legendConfig: LegendConfig;
   legendData: LegendData;
   isLegendFirst: boolean;
-  legendContainerLayoutType: string;
+  legendContainerLayoutType: 'flex-row' | 'flex-col';
   legendStyle: {[klass: string]: any};
 
   public settings: TbFlotSettings;
@@ -70,7 +70,7 @@ export class FlotWidgetComponent implements OnInit {
     this.displayLegend = isDefinedAndNotNull(this.settings.showLegend) ? this.settings.showLegend
       : false;
 
-    this.legendContainerLayoutType = 'column';
+    this.legendContainerLayoutType = 'flex-col';
 
     if (this.displayLegend) {
       this.legendConfig = this.settings.legendConfig || defaultLegendConfig(widgetType.timeseries);
@@ -84,10 +84,10 @@ export class FlotWidgetComponent implements OnInit {
       }
       if (this.legendConfig.position === LegendPosition.top ||
         this.legendConfig.position === LegendPosition.bottom) {
-        this.legendContainerLayoutType = 'column';
+        this.legendContainerLayoutType = 'flex-col';
         this.isLegendFirst = this.legendConfig.position === LegendPosition.top;
       } else {
-        this.legendContainerLayoutType = 'row';
+        this.legendContainerLayoutType = 'flex-row';
         this.isLegendFirst = this.legendConfig.position === LegendPosition.left;
       }
       switch (this.legendConfig.position) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
index 2c46864388..6bf4d21b24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
@@ -54,7 +54,7 @@ import {
   TbFlotTicksFormatterFunction,
   TooltipValueFormatFunction
 } from './flot-widget.models';
-import * as moment_ from 'moment';
+import moment_ from 'moment';
 import tinycolor from 'tinycolor2';
 import { AggregationType, IntervalMath } from '@shared/models/time/time.models';
 import { CancelAnimationFrame } from '@core/services/raf.service';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract.ts
deleted file mode 100644
index 4c90eeb01c..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { AfterViewInit, Directive, EventEmitter, inject, Input, OnDestroy, Output, TemplateRef } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, FormGroup, ValidationErrors, Validator } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-@Directive()
-export abstract class GatewayConnectorBasicConfigDirective<InputBasicConfig, OutputBasicConfig>
-  implements AfterViewInit, ControlValueAccessor, Validator, OnDestroy {
-
-  @Input() generalTabContent: TemplateRef<any>;
-  @Output() initialized = new EventEmitter<void>();
-
-  basicFormGroup: FormGroup;
-
-  protected fb = inject(FormBuilder);
-  protected onChange!: (value: OutputBasicConfig) => void;
-  protected onTouched!: () => void;
-  protected destroy$ = new Subject<void>();
-
-  constructor() {
-    this.basicFormGroup = this.initBasicFormGroup();
-
-    this.basicFormGroup.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((value) => this.onBasicFormGroupChange(value));
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  ngAfterViewInit(): void {
-    this.initialized.emit();
-  }
-
-  validate(): ValidationErrors | null {
-    return this.basicFormGroup.valid ? null : { basicFormGroup: { valid: false } };
-  }
-
-  registerOnChange(fn: (value: OutputBasicConfig) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(config: OutputBasicConfig): void {
-    this.basicFormGroup.setValue(this.mapConfigToFormValue(config), { emitEvent: false });
-  }
-
-  protected onBasicFormGroupChange(value: InputBasicConfig): void {
-    this.onChange(this.getMappedValue(value));
-    this.onTouched();
-  }
-
-  protected abstract mapConfigToFormValue(config: OutputBasicConfig): InputBasicConfig;
-  protected abstract getMappedValue(config: InputBasicConfig): OutputBasicConfig;
-  protected abstract initBasicFormGroup(): FormGroup;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/gateway-connector-version-processor.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/gateway-connector-version-processor.abstract.ts
deleted file mode 100644
index a781c52c71..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/gateway-connector-version-processor.abstract.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { GatewayConnector, GatewayVersion } from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { isNumber, isString } from '@core/utils';
-
-export abstract class GatewayConnectorVersionProcessor<BasicConfig> {
-  gatewayVersion: number;
-  configVersion: number;
-
-  protected constructor(protected gatewayVersionIn: string | number, protected connector: GatewayConnector<BasicConfig>) {
-    this.gatewayVersion = this.parseVersion(this.gatewayVersionIn);
-    this.configVersion = this.parseVersion(this.connector.configVersion);
-  }
-
-  getProcessedByVersion(): GatewayConnector<BasicConfig> {
-    if (!this.isVersionUpdateNeeded()) {
-      return this.connector;
-    }
-
-    return this.processVersionUpdate();
-  }
-
-  private processVersionUpdate(): GatewayConnector<BasicConfig> {
-    if (this.isVersionUpgradeNeeded()) {
-      return this.getUpgradedVersion();
-    } else if (this.isVersionDowngradeNeeded()) {
-      return this.getDowngradedVersion();
-    }
-
-    return this.connector;
-  }
-
-  private isVersionUpdateNeeded(): boolean {
-    if (!this.gatewayVersion) {
-      return false;
-    }
-
-    return this.configVersion !== this.gatewayVersion;
-  }
-
-  private isVersionUpgradeNeeded(): boolean {
-    return this.gatewayVersionIn === GatewayVersion.Current && (!this.configVersion || this.configVersion < this.gatewayVersion);
-  }
-
-  private isVersionDowngradeNeeded(): boolean {
-    return this.configVersion && this.connector.configVersion === GatewayVersion.Current && (this.configVersion > this.gatewayVersion);
-  }
-
-  private parseVersion(version: string | number): number {
-    if (isNumber(version)) {
-      return version as number;
-    }
-
-    return isString(version) ? parseFloat((version as string).replace(/\./g, '').slice(0, 3)) / 100 : 0;
-  }
-
-  protected abstract getDowngradedVersion(): GatewayConnector<BasicConfig>;
-  protected abstract getUpgradedVersion(): GatewayConnector<BasicConfig>;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/modbus-version-processor.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/modbus-version-processor.abstract.ts
deleted file mode 100644
index 8b05572659..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/modbus-version-processor.abstract.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  GatewayConnector,
-  LegacySlaveConfig,
-  ModbusBasicConfig,
-  ModbusBasicConfig_v3_5_2,
-  ModbusLegacyBasicConfig,
-  ModbusLegacySlave,
-  ModbusMasterConfig,
-  ModbusSlave,
-} from '../gateway-widget.models';
-import { GatewayConnectorVersionProcessor } from './gateway-connector-version-processor.abstract';
-import { ModbusVersionMappingUtil } from '@home/components/widget/lib/gateway/utils/modbus-version-mapping.util';
-
-export class ModbusVersionProcessor extends GatewayConnectorVersionProcessor<any> {
-
-  constructor(
-    protected gatewayVersionIn: string,
-    protected connector: GatewayConnector<ModbusBasicConfig>
-  ) {
-    super(gatewayVersionIn, connector);
-  }
-
-  getUpgradedVersion(): GatewayConnector<ModbusBasicConfig_v3_5_2> {
-    const configurationJson = this.connector.configurationJson;
-    return {
-      ...this.connector,
-      configurationJson: {
-        master: configurationJson.master?.slaves
-          ? ModbusVersionMappingUtil.mapMasterToUpgradedVersion(configurationJson.master as ModbusMasterConfig<LegacySlaveConfig>)
-          : { slaves: [] },
-        slave: configurationJson.slave
-          ? ModbusVersionMappingUtil.mapSlaveToUpgradedVersion(configurationJson.slave as ModbusLegacySlave)
-          : {} as ModbusSlave,
-      },
-      configVersion: this.gatewayVersionIn
-    } as GatewayConnector<ModbusBasicConfig_v3_5_2>;
-  }
-
-  getDowngradedVersion(): GatewayConnector<ModbusLegacyBasicConfig> {
-    const configurationJson = this.connector.configurationJson;
-    return {
-      ...this.connector,
-      configurationJson: {
-        ...configurationJson,
-        slave: configurationJson.slave
-          ? ModbusVersionMappingUtil.mapSlaveToDowngradedVersion(configurationJson.slave as ModbusSlave)
-          : {} as ModbusLegacySlave,
-        master: configurationJson.master?.slaves
-          ? ModbusVersionMappingUtil.mapMasterToDowngradedVersion(configurationJson.master as ModbusMasterConfig)
-          : { slaves: [] },
-      },
-      configVersion: this.gatewayVersionIn
-    } as GatewayConnector<ModbusLegacyBasicConfig>;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/mqtt-version-processor.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/mqtt-version-processor.abstract.ts
deleted file mode 100644
index 00fff92493..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/mqtt-version-processor.abstract.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { isEqual } from '@core/utils';
-import {
-  GatewayConnector,
-  MQTTBasicConfig,
-  MQTTBasicConfig_v3_5_2,
-  MQTTLegacyBasicConfig,
-  RequestMappingData,
-  RequestType,
-} from '../gateway-widget.models';
-import { MqttVersionMappingUtil } from '../utils/mqtt-version-mapping.util';
-import { GatewayConnectorVersionProcessor } from './gateway-connector-version-processor.abstract';
-
-export class MqttVersionProcessor extends GatewayConnectorVersionProcessor<MQTTBasicConfig> {
-
-  private readonly mqttRequestTypeKeys = Object.values(RequestType);
-
-  constructor(
-    protected gatewayVersionIn: string,
-    protected connector: GatewayConnector<MQTTBasicConfig>
-  ) {
-    super(gatewayVersionIn, connector);
-  }
-
-  getUpgradedVersion(): GatewayConnector<MQTTBasicConfig_v3_5_2> {
-    const {
-      connectRequests,
-      disconnectRequests,
-      attributeRequests,
-      attributeUpdates,
-      serverSideRpc
-    } = this.connector.configurationJson as MQTTLegacyBasicConfig;
-    let configurationJson = {
-      ...this.connector.configurationJson,
-      requestsMapping: MqttVersionMappingUtil.mapRequestsToUpgradedVersion({
-        connectRequests,
-        disconnectRequests,
-        attributeRequests,
-        attributeUpdates,
-        serverSideRpc
-      }),
-      mapping: MqttVersionMappingUtil.mapMappingToUpgradedVersion((this.connector.configurationJson as MQTTLegacyBasicConfig).mapping),
-    };
-
-    this.mqttRequestTypeKeys.forEach((key: RequestType) => {
-      const { [key]: removedValue, ...rest } = configurationJson as MQTTLegacyBasicConfig;
-      configurationJson = { ...rest } as any;
-    });
-
-    this.cleanUpConfigJson(configurationJson as MQTTBasicConfig_v3_5_2);
-
-    return {
-      ...this.connector,
-      configurationJson,
-      configVersion: this.gatewayVersionIn
-    } as GatewayConnector<MQTTBasicConfig_v3_5_2>;
-  }
-
-  getDowngradedVersion(): GatewayConnector<MQTTLegacyBasicConfig> {
-    const { requestsMapping, mapping, ...restConfig } = this.connector.configurationJson as MQTTBasicConfig_v3_5_2;
-
-    const updatedRequestsMapping = requestsMapping
-      ? MqttVersionMappingUtil.mapRequestsToDowngradedVersion(requestsMapping as Record<RequestType, RequestMappingData[]>) : {};
-    const updatedMapping = MqttVersionMappingUtil.mapMappingToDowngradedVersion(mapping);
-
-    return {
-      ...this.connector,
-      configurationJson: {
-        ...restConfig,
-        ...updatedRequestsMapping,
-        mapping: updatedMapping,
-      },
-      configVersion: this.gatewayVersionIn
-    } as GatewayConnector<MQTTLegacyBasicConfig>;
-  }
-
-  private cleanUpConfigJson(configurationJson: MQTTBasicConfig_v3_5_2): void {
-    if (isEqual(configurationJson.requestsMapping, {})) {
-      delete configurationJson.requestsMapping;
-    }
-
-    if (isEqual(configurationJson.mapping, [])) {
-      delete configurationJson.mapping;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/opc-version-processor.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/opc-version-processor.abstract.ts
deleted file mode 100644
index 541e26001f..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/abstract/opc-version-processor.abstract.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  GatewayConnector, LegacyServerConfig,
-  OPCBasicConfig,
-  OPCBasicConfig_v3_5_2,
-  OPCLegacyBasicConfig,
-} from '../gateway-widget.models';
-import { GatewayConnectorVersionProcessor } from './gateway-connector-version-processor.abstract';
-import { OpcVersionMappingUtil } from '@home/components/widget/lib/gateway/utils/opc-version-mapping.util';
-
-export class OpcVersionProcessor extends GatewayConnectorVersionProcessor<OPCBasicConfig> {
-
-  constructor(
-    protected gatewayVersionIn: string,
-    protected connector: GatewayConnector<OPCBasicConfig>
-  ) {
-    super(gatewayVersionIn, connector);
-  }
-
-  getUpgradedVersion(): GatewayConnector<OPCBasicConfig_v3_5_2> {
-    const server = this.connector.configurationJson.server as LegacyServerConfig;
-    return {
-      ...this.connector,
-      configurationJson: {
-        server: server ? OpcVersionMappingUtil.mapServerToUpgradedVersion(server) : {},
-        mapping: server?.mapping ? OpcVersionMappingUtil.mapMappingToUpgradedVersion(server.mapping) : [],
-      },
-      configVersion: this.gatewayVersionIn
-    } as GatewayConnector<OPCBasicConfig_v3_5_2>;
-  }
-
-  getDowngradedVersion(): GatewayConnector<OPCLegacyBasicConfig> {
-    return {
-      ...this.connector,
-      configurationJson: {
-        server: OpcVersionMappingUtil.mapServerToDowngradedVersion(this.connector.configurationJson as OPCBasicConfig_v3_5_2)
-      },
-      configVersion: this.gatewayVersionIn
-    } as GatewayConnector<OPCLegacyBasicConfig>;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
deleted file mode 100644
index 843e67b0fe..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<tb-json-object-edit
-  fillHeight="true"
-  class="tb-flex config-container"
-  fxLayout="column"
-  jsonRequired
-  label="{{ 'gateway.configuration' | translate }}"
-  [formControl]="advancedFormControl"
-/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.scss
deleted file mode 100644
index 4825ff0a64..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  .config-container {
-    height: calc(100% - 60px);
-    padding: 8px;
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.ts
deleted file mode 100644
index 16a0274049..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, forwardRef, OnDestroy } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  ValidationErrors,
-  Validators
-} from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { GatewayConfigValue } from '@home/components/widget/lib/gateway/configuration/models/gateway-configuration.models';
-
-@Component({
-  selector: 'tb-gateway-advanced-configuration',
-  templateUrl: './gateway-advanced-configuration.component.html',
-  styleUrls: ['./gateway-advanced-configuration.component.scss'],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => GatewayAdvancedConfigurationComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => GatewayAdvancedConfigurationComponent),
-      multi: true
-    }
-  ],
-})
-export class GatewayAdvancedConfigurationComponent implements OnDestroy, ControlValueAccessor, Validators {
-
-  advancedFormControl: FormControl;
-
-  private onChange: (value: unknown) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.advancedFormControl = this.fb.control('');
-    this.advancedFormControl.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(value => {
-        this.onChange(value);
-        this.onTouched();
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: unknown) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(advancedConfig: GatewayConfigValue): void {
-    this.advancedFormControl.reset(advancedConfig, {emitEvent: false});
-  }
-
-  validate(): ValidationErrors | null {
-    return this.advancedFormControl.valid ? null : {
-      advancedFormControl: {valid: false}
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
deleted file mode 100644
index af8dc3119c..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.html
+++ /dev/null
@@ -1,814 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-tab-group class="tab-group-block" [formGroup]="basicFormGroup" [class.dialog-mode]="dialogMode">
-  <mat-tab label="{{ 'gateway.general' | translate }}">
-    <ng-template matTabContent>
-      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
-        <div class="tb-form-panel no-padding-bottom">
-          <div tb-hint-tooltip-icon="{{ 'gateway.hints.remote-configuration' | translate }}"
-               class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteConfiguration">
-              {{ 'gateway.remote-configuration'  | translate }}
-            </mat-slide-toggle>
-          </div>
-          <div tb-hint-tooltip-icon="{{ 'gateway.hints.remote-shell' | translate }}"
-               class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteShell">
-              {{ 'gateway.remote-shell' | translate }}
-            </mat-slide-toggle>
-          </div>
-          <div class="tb-form-row no-border no-padding tb-standard-fields">
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.thingsboard-host</mat-label>
-              <input matInput formControlName="host"/>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.host' | translate }}">info_outlined
-              </mat-icon>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.host').hasError('required')">
-                {{ 'gateway.thingsboard-host-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.thingsboard-port</mat-label>
-              <input matInput formControlName="port" type="number" min="0"/>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.port').hasError('required')">
-                {{ 'gateway.thingsboard-port-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.port').hasError('min')">
-                {{ 'gateway.thingsboard-port-min' | translate }}
-              </mat-error>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.port').hasError('max')">
-                {{ 'gateway.thingsboard-port-max' | translate }}
-              </mat-error>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.port').hasError('pattern')">
-                {{ 'gateway.thingsboard-port-pattern' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.port' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-        <div class="tb-form-panel">
-          <div translate class="tb-form-panel-title">security.security</div>
-          <ng-container formGroupName="security">
-            <tb-toggle-select class="toggle-group" formControlName="type">
-              <tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"
-                                [value]="securityType.key">{{ securityType.value | translate }}
-              </tb-toggle-option>
-            </tb-toggle-select>
-            <mat-form-field appearance="outline"
-                            *ngIf="basicFormGroup.get('thingsboard.security.type').value.toLowerCase().includes('accesstoken')">
-              <mat-label translate>security.access-token</mat-label>
-              <input matInput formControlName="accessToken"/>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.security.accessToken').hasError('required')">
-                {{ 'security.access-token-required' | translate }}
-              </mat-error>
-              <tb-copy-button
-                matSuffix
-                miniButton="false"
-                *ngIf="basicFormGroup.get('thingsboard.security.accessToken').value"
-                [copyText]="basicFormGroup.get('thingsboard.security.accessToken').value"
-                tooltipText="{{ 'device.copy-access-token' | translate }}"
-                tooltipPosition="above"
-                icon="content_copy">
-              </tb-copy-button>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.token' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-            <section>
-              <div class="tb-form-row no-border no-padding tb-standard-fields"
-                   *ngIf="basicFormGroup.get('thingsboard.security.type').value === 'usernamePassword'">
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>security.clientId</mat-label>
-                  <input matInput formControlName="clientId"/>
-                  <mat-error *ngIf="basicFormGroup.get('thingsboard.security.clientId').hasError('required')">
-                    {{ 'security.clientId-required' | translate }}
-                  </mat-error>
-                  <tb-copy-button
-                    matSuffix
-                    miniButton="false"
-                    *ngIf="basicFormGroup.get('thingsboard.security.clientId').value"
-                    [copyText]="basicFormGroup.get('thingsboard.security.clientId').value"
-                    tooltipText="{{ 'gateway.copy-client-id' | translate }}"
-                    tooltipPosition="above"
-                    icon="content_copy">
-                  </tb-copy-button>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.client-id' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>security.username</mat-label>
-                  <input matInput formControlName="username"/>
-                  <mat-error *ngIf="basicFormGroup.get('thingsboard.security.username').hasError('required')">
-                    {{ 'security.username-required' | translate }}
-                  </mat-error>
-                  <tb-copy-button
-                    matSuffix
-                    miniButton="false"
-                    *ngIf="basicFormGroup.get('thingsboard.security.username').value"
-                    [copyText]="basicFormGroup.get('thingsboard.security.username').value"
-                    tooltipText="{{ 'gateway.copy-username' | translate }}"
-                    tooltipPosition="above"
-                    icon="content_copy">
-                  </tb-copy-button>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.username' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-              <mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 100%"
-                              *ngIf="basicFormGroup.get('thingsboard.security.type').value === 'usernamePassword'">
-                <mat-label translate>gateway.password</mat-label>
-                <input matInput formControlName="password"/>
-                <tb-copy-button
-                  matSuffix
-                  miniButton="false"
-                  *ngIf="basicFormGroup.get('thingsboard.security.password').value"
-                  [copyText]="basicFormGroup.get('thingsboard.security.password').value"
-                  tooltipText="{{ 'gateway.copy-password' | translate }}"
-                  tooltipPosition="above"
-                  icon="content_copy">
-                </tb-copy-button>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.password' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-            </section>
-            <tb-error style="margin-top: -12px; display: block;" fxFlex="100"
-                      *ngIf="basicFormGroup.get('thingsboard.security.type').value === 'usernamePassword'"
-                      [error]="basicFormGroup.get('thingsboard.security').hasError('atLeastOne') ?
-          ('device.client-id-or-user-name-necessary' | translate) : ''"></tb-error>
-            <tb-file-input
-              fxFlex="100"
-              hint="{{ 'gateway.hints.ca-cert' | translate }}"
-              *ngIf="basicFormGroup.get('thingsboard.security.type').value.toLowerCase().includes('tls')"
-              formControlName="caCert"
-              label="{{ 'security.ca-cert' | translate }}"
-              [allowedExtensions]="'pem, cert, key'"
-              [accept]="'.pem, application/pem,.cert, application/cert, .key,application/key'"
-              dropLabel="{{ 'gateway.drop-file' | translate }}">
-            </tb-file-input>
-          </ng-container>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.logs.logs' | translate }}">
-    <ng-template matTabContent>
-      <div formGroupName="logs" class="mat-content mat-padding configuration-block">
-        <div class="tb-form-panel no-padding-bottom">
-          <div fxLayout="column">
-            <mat-form-field appearance="outline">
-              <mat-label translate>gateway.logs.date-format</mat-label>
-              <input matInput formControlName="dateFormat"/>
-              <mat-error *ngIf="basicFormGroup.get('logs.dateFormat').hasError('required')">
-                {{ 'gateway.logs.date-format-required' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.date-form' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label translate>gateway.logs.log-format</mat-label>
-              <textarea matInput formControlName="logFormat" rows="2"></textarea>
-              <mat-error *ngIf="basicFormGroup.get('logs.logFormat').hasError('required')">
-                {{ 'gateway.logs.log-format-required' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.log-format' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-        <div class="tb-form-panel no-padding-bottom" formGroupName="remote">
-          <div translate class="tb-form-panel-title">gateway.logs.remote</div>
-          <div tb-hint-tooltip-icon="{{ 'gateway.hints.remote-log' | translate }}"
-               class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">
-              {{ 'gateway.logs.remote-logs'  | translate }}
-            </mat-slide-toggle>
-          </div>
-          <mat-form-field appearance="outline">
-            <mat-label translate>gateway.logs.level</mat-label>
-            <mat-select formControlName="logLevel">
-              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-panel no-padding-bottom" formGroupName="local">
-          <div translate class="tb-form-panel-title">gateway.logs.local</div>
-          <tb-toggle-select class="toggle-group" [formControl]="logSelector">
-            <tb-toggle-option *ngFor="let logConfig of localLogsConfigs" [value]="logConfig"
-                              class="first-capital">{{ localLogsConfigTranslateMap.get(logConfig) }}</tb-toggle-option>
-          </tb-toggle-select>
-          <ng-container [formGroup]="getLogFormGroup(logSelector.value)">
-            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.logs.level</mat-label>
-                <mat-select formControlName="logLevel">
-                  <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.logs.file-path</mat-label>
-                <input matInput formControlName="filePath"/>
-                <mat-error *ngIf="basicFormGroup.get('logs.local.' + logSelector.value + '.filePath').hasError('required')">
-                  {{ 'gateway.logs.file-path-required' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </div>
-            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-              <div class="tb-form-row no-border no-padding tb-standard-fields saving-period">
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.logs.saving-period</mat-label>
-                  <input matInput formControlName="savingTime" type="number" min="0"/>
-                  <mat-error
-                    *ngIf="basicFormGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('required')">
-                    {{ 'gateway.logs.saving-period-required' | translate }}
-                  </mat-error>
-                  <mat-error
-                    *ngIf="basicFormGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('min')">
-                    {{ 'gateway.logs.saving-period-min' | translate }}
-                  </mat-error>
-                </mat-form-field>
-                <mat-form-field appearance="outline" hideRequiredMarker style="min-width: 110px; width: 30%">
-                  <mat-select formControlName="savingPeriod">
-                    <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
-                      {{ period.value | translate }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.logs.backup-count</mat-label>
-                <input matInput formControlName="backupCount" type="number" min="0"/>
-                <mat-error
-                  *ngIf="basicFormGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('required')">
-                  {{ 'gateway.logs.backup-count-required' | translate }}
-                </mat-error>
-                <mat-error
-                  *ngIf="basicFormGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')">
-                  {{ 'gateway.logs.backup-count-min' | translate }}
-                </mat-error>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.backup-count' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-            </div>
-          </ng-container>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.storage' | translate }}">
-    <ng-template matTabContent>
-      <div formGroupName="storage" class="mat-content mat-padding configuration-block">
-        <div class="tb-form-panel no-padding-bottom">
-          <div translate class="tb-form-panel-title">gateway.storage</div>
-          <div translate class="tb-form-panel-hint">gateway.hints.storage</div>
-          <tb-toggle-select class="toggle-group" formControlName="type">
-            <tb-toggle-option *ngFor="let storageType of storageTypes" [value]="storageType">
-              {{ storageTypesTranslationMap.get(storageType) | translate }}
-            </tb-toggle-option>
-          </tb-toggle-select>
-          <div class="tb-form-panel-hint">{{ 'gateway.hints.' + basicFormGroup.get('storage.type').value | translate }}</div>
-          <ng-container [ngSwitch]="basicFormGroup.get('storage.type').value">
-            <section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.storage-read-record-count</mat-label>
-                <input type="number" matInput formControlName="read_records_count"/>
-                <mat-error *ngIf="basicFormGroup.get('storage.read_records_count').hasError('required')">
-                  {{ 'gateway.storage-read-record-count-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('storage.read_records_count').hasError('min')">
-                  {{ 'gateway.storage-read-record-count-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('storage.read_records_count').hasError('pattern')">
-                  {{ 'gateway.storage-read-record-count-pattern' | translate }}
-                </mat-error>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.read-record-count' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.storage-max-records</mat-label>
-                <input type="number" matInput formControlName="max_records_count"/>
-                <mat-error *ngIf="basicFormGroup.get('storage.max_records_count').hasError('required')">
-                  {{ 'gateway.storage-max-records-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('storage.max_records_count').hasError('min')">
-                  {{ 'gateway.storage-max-records-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('storage.max_records_count').hasError('pattern')">
-                  {{ 'gateway.storage-max-records-pattern' | translate }}
-                </mat-error>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.max-records-count' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-            </section>
-            <section *ngSwitchCase="StorageTypes.FILE">
-              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.storage-data-folder-path</mat-label>
-                  <input matInput formControlName="data_folder_path"/>
-                  <mat-error *ngIf="basicFormGroup.get('storage.data_folder_path').hasError('required')">
-                    {{ 'gateway.storage-data-folder-path-required' | translate }}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.data-folder' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.storage-max-files</mat-label>
-                  <input matInput type="number" formControlName="max_file_count"/>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_file_count').hasError('required')">
-                    {{ 'gateway.storage-max-files-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_file_count').hasError('min')">
-                    {{ 'gateway.storage-max-files-min' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_file_count').hasError('pattern')">
-                    {{ 'gateway.storage-max-files-pattern' | translate }}
-                  </mat-error>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.max-file-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.storage-max-read-record-count</mat-label>
-                  <input matInput type="number" formControlName="max_read_records_count"/>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_read_records_count').hasError('required')">
-                    {{ 'gateway.storage-max-read-record-count-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_read_records_count').hasError('min')">
-                    {{ 'gateway.storage-max-read-record-count-min' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_read_records_count').hasError('pattern')">
-                    {{ 'gateway.storage-max-read-record-count-pattern' | translate }}
-                  </mat-error>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.max-read-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.storage-max-file-records</mat-label>
-                  <input matInput type="number" formControlName="max_records_per_file"/>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_records_per_file').hasError('required')">
-                    {{ 'gateway.storage-max-records-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_records_per_file').hasError('min')">
-                    {{ 'gateway.storage-max-records-min' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.max_records_per_file').hasError('pattern')">
-                    {{ 'gateway.storage-max-records-pattern' | translate }}
-                  </mat-error>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.max-records' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-            </section>
-            <section *ngSwitchCase="StorageTypes.SQLITE">
-              <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.storage-path</mat-label>
-                  <input matInput formControlName="data_file_path"/>
-                  <mat-error *ngIf="basicFormGroup.get('storage.data_file_path').hasError('required')">
-                    {{ 'gateway.storage-path-required' | translate }}
-                  </mat-error>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.data-folder' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" class="flex">
-                  <mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>
-                  <input matInput type="number" formControlName="messages_ttl_check_in_hours"/>
-                  <mat-error *ngIf="basicFormGroup.get('storage.messages_ttl_check_in_hours').hasError('required')">
-                    {{ 'gateway.messages-ttl-check-in-hours-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.messages_ttl_check_in_hours').hasError('min')">
-                    {{ 'gateway.messages-ttl-check-in-hours-min' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="basicFormGroup.get('storage.messages_ttl_check_in_hours').hasError('pattern')">
-                    {{ 'gateway.messages-ttl-check-in-hours-pattern' | translate }}
-                  </mat-error>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.ttl-check-hour' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-              <mat-form-field appearance="outline" class="mat-block">
-                <mat-label translate>gateway.messages-ttl-in-days</mat-label>
-                <input matInput type="number" formControlName="messages_ttl_in_days"/>
-                <mat-error *ngIf="basicFormGroup.get('storage.messages_ttl_in_days').hasError('required')">
-                  {{ 'gateway.messages-ttl-in-days-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('storage.messages_ttl_in_days').hasError('min')">
-                  {{ 'gateway.messages-ttl-in-days-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('storage.messages_ttl_in_days').hasError('pattern')">
-                  {{ 'gateway.messages-ttl-in-days-pattern' | translate }}
-                </mat-error>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.ttl-messages-day' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-            </section>
-          </ng-container>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.grpc' | translate }}">
-    <ng-template matTabContent>
-      <div formGroupName="grpc" class="mat-content mat-padding configuration-block">
-        <div class="tb-form-panel no-padding-bottom">
-          <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">
-            {{ 'gateway.grpc'  | translate }}
-          </mat-slide-toggle>
-          <div tb-hint-tooltip-icon="{{ 'gateway.hints.permit-without-calls' | translate }}"
-               class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" color="primary" formControlName="keepalivePermitWithoutCalls">
-              {{ 'gateway.permit-without-calls'  | translate }}
-            </mat-slide-toggle>
-          </div>
-          <section>
-            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.server-port</mat-label>
-                <input matInput formControlName="serverPort" type="number" min="0"/>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.server-port' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="basicFormGroup.get('grpc.serverPort').hasError('required')">
-                  {{ 'gateway.thingsboard-port-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.serverPort').hasError('min')">
-                  {{ 'gateway.thingsboard-port-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.serverPort').hasError('max')">
-                  {{ 'gateway.thingsboard-port-max' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.serverPort').hasError('pattern')">
-                  {{ 'gateway.thingsboard-port-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>
-                <input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.grpc-keep-alive-timeout' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="basicFormGroup.get('grpc.keepAliveTimeoutMs').hasError('required')">
-                  {{ 'gateway.grpc-keep-alive-timeout-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.keepAliveTimeoutMs').hasError('min')">
-                  {{ 'gateway.grpc-keep-alive-timeout-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.keepAliveTimeoutMs').hasError('pattern')">
-                  {{ 'gateway.grpc-keep-alive-timeout-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </section>
-            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.grpc-keep-alive</mat-label>
-                <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.grpc-keep-alive' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="basicFormGroup.get('grpc.keepAliveTimeMs').hasError('required')">
-                  {{ 'gateway.grpc-keep-alive-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.keepAliveTimeMs').hasError('min')">
-                  {{ 'gateway.grpc-keep-alive-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.keepAliveTimeMs').hasError('pattern')">
-                  {{ 'gateway.grpc-keep-alive-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.grpc-min-time-between-pings</mat-label>
-                <input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.grpc-min-time-between-pings' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="basicFormGroup.get('grpc.minTimeBetweenPingsMs').hasError('required')">
-                  {{ 'gateway.grpc-min-time-between-pings-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.minTimeBetweenPingsMs').hasError('min')">
-                  {{ 'gateway.grpc-min-time-between-pings-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.minTimeBetweenPingsMs').hasError('pattern')">
-                  {{ 'gateway.grpc-min-time-between-pings-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </section>
-            <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
-                <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.grpc-max-pings-without-data' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="basicFormGroup.get('grpc.maxPingsWithoutData').hasError('required')">
-                  {{ 'gateway.grpc-max-pings-without-data-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.maxPingsWithoutData').hasError('min')">
-                  {{ 'gateway.grpc-max-pings-without-data-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.maxPingsWithoutData').hasError('pattern')">
-                  {{ 'gateway.grpc-max-pings-without-data-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" class="flex">
-                <mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>
-                <input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>
-                <mat-icon matIconSuffix style="cursor:pointer;"
-                          matTooltip="{{ 'gateway.hints.grpc-min-ping-interval-without-data' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="basicFormGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('required')">
-                  {{ 'gateway.grpc-min-ping-interval-without-data-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('min')">
-                  {{ 'gateway.grpc-min-ping-interval-without-data-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="basicFormGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('pattern')">
-                  {{ 'gateway.grpc-min-ping-interval-without-data-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </section>
-          </section>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.statistics.statistics' | translate }}">
-    <ng-template matTabContent>
-      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
-        <div class="tb-form-panel no-padding-bottom" formGroupName="statistics">
-          <mat-slide-toggle color="primary" class="mat-slide" formControlName="enable">
-            {{ 'gateway.statistics.statistics'  | translate }}
-          </mat-slide-toggle>
-          <mat-form-field appearance="outline">
-            <mat-label translate>gateway.statistics.send-period</mat-label>
-            <input matInput formControlName="statsSendPeriodInSeconds" type="number" min="60"/>
-            <mat-error
-              *ngIf="basicFormGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('required')">
-              {{ 'gateway.statistics.send-period-required' | translate }}
-            </mat-error>
-            <mat-error
-              *ngIf="basicFormGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('min')">
-              {{ 'gateway.statistics.send-period-min' | translate }}
-            </mat-error>
-            <mat-error
-              *ngIf="basicFormGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('pattern')">
-              {{ 'gateway.statistics.send-period-pattern' | translate }}
-            </mat-error>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-panel">
-          <div class="tb-form-panel-title" translate>gateway.statistics.commands</div>
-          <div class="tb-form-panel-hint" translate>gateway.hints.commands</div>
-          <ng-container formGroupName="statistics">
-            <div fxLayout="row" formArrayName="commands" class="statistics-container"
-                 *ngFor="let commandControl of commandFormArray().controls; let $index = index">
-              <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">
-                <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-                  <mat-form-field appearance="outline" class="flex">
-                    <mat-label translate>gateway.statistics.attribute-name</mat-label>
-                    <input matInput formControlName="attributeOnGateway"/>
-                    <mat-error *ngIf="commandControl.get('attributeOnGateway').hasError('required')">
-                      {{ 'gateway.statistics.attribute-name-required' | translate }}
-                    </mat-error>
-                    <mat-icon matIconSuffix style="cursor:pointer;"
-                              matTooltip="{{ 'gateway.hints.attribute' | translate }}">info_outlined
-                    </mat-icon>
-                  </mat-form-field>
-                  <mat-form-field appearance="outline" class="flex">
-                    <mat-label translate>gateway.statistics.timeout</mat-label>
-                    <input matInput formControlName="timeout" type="number" min="0"/>
-                    <mat-error *ngIf="commandControl.get('timeout').hasError('required')">
-                      {{ 'gateway.statistics.timeout-required' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="commandControl.get('timeout').hasError('min')">
-                      {{ 'gateway.statistics.timeout-min' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="commandControl.get('timeout').hasError('pattern')">
-                      {{ 'gateway.statistics.timeout-pattern' | translate }}
-                    </mat-error>
-                    <mat-icon matIconSuffix style="cursor:pointer;"
-                              matTooltip="{{ 'gateway.hints.timeout' | translate }}">info_outlined
-                    </mat-icon>
-                  </mat-form-field>
-                </section>
-                <mat-form-field appearance="outline" class="mat-block">
-                  <mat-label translate>gateway.statistics.command</mat-label>
-                  <input matInput formControlName="command"/>
-                  <mat-error *ngIf="commandControl.get('command').hasError('required')">
-                    {{ 'gateway.statistics.command-required' | translate }}
-                  </mat-error>
-                  <mat-error *ngIf="commandControl.get('command').hasError('pattern')">
-                    {{ 'gateway.statistics.command-pattern' | translate }}
-                  </mat-error>
-                  <mat-icon matIconSuffix style="cursor:pointer;"
-                            matTooltip="{{ 'gateway.hints.command' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </section>
-              <button mat-icon-button (click)="removeCommandControl($index, $event)"
-                      class="tb-box-button"
-                      [disabled]="!basicFormGroup.get('thingsboard.remoteConfiguration').value"
-                      matTooltip="{{ 'gateway.statistics.remove' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>delete</mat-icon>
-              </button>
-            </div>
-            <button mat-stroked-button color="primary"
-                    style="width: fit-content;"
-                    type="button"
-                    [disabled]="!basicFormGroup.get('thingsboard.remoteConfiguration').value"
-                    (click)="addCommand()">
-              {{ 'gateway.statistics.add' | translate }}
-            </button>
-          </ng-container>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.other' | translate }}">
-    <ng-template matTabContent>
-      <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
-        <div class="tb-form-panel" formGroupName="checkingDeviceActivity"
-             [class.no-padding-bottom]="basicFormGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value">
-          <div tb-hint-tooltip-icon="{{ 'gateway.hints.check-device-activity' | translate }}"
-               class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" color="primary" formControlName="checkDeviceInactivity">
-              {{ 'gateway.checking-device-activity'  | translate }}
-            </mat-slide-toggle>
-          </div>
-          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs"
-                   *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value">
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
-              <input matInput formControlName="inactivityTimeoutSeconds" type="number" min="0"/>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('required')">
-                {{ 'gateway.inactivity-timeout-seconds-required' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')">
-                {{ 'gateway.inactivity-timeout-seconds-min' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('pattern')">
-                {{ 'gateway.inactivity-timeout-seconds-pattern' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.inactivity-timeout' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.inactivity-check-period-seconds</mat-label>
-              <input matInput type="number" min="0" formControlName="inactivityCheckPeriodSeconds"/>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('required')">
-                {{ 'gateway.inactivity-check-period-seconds-required' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')">
-                {{ 'gateway.inactivity-check-period-seconds-min' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('pattern')">
-                {{ 'gateway.inactivity-check-period-seconds-pattern' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.inactivity-period' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-          </section>
-        </div>
-        <div class="tb-form-panel no-padding-bottom">
-          <div class="tb-form-panel-title" translate>gateway.advanced</div>
-          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.min-pack-send-delay</mat-label>
-              <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.minPackSendDelayMS').hasError('required')">
-                {{ 'gateway.min-pack-send-delay-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.minPackSendDelayMS').hasError('min')">
-                {{ 'gateway.min-pack-send-delay-min' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.minPackSendDelayMS').hasError('pattern')">
-                {{ 'gateway.min-pack-send-delay-pattern' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.minimal-pack-delay' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.mqtt-qos</mat-label>
-              <input matInput formControlName="qos" type="number" min="0" max="1"/>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.qos').hasError('required')">
-                {{ 'gateway.mqtt-qos-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.qos').hasError('min')">
-                {{ 'gateway.mqtt-qos-range' | translate }}
-              </mat-error>
-              <mat-error *ngIf="basicFormGroup.get('thingsboard.qos').hasError('max')">
-                {{ 'gateway.mqtt-qos-range' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.qos' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-          </section>
-          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>
-              <input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('required')">
-                {{ 'gateway.statistics.check-connectors-configuration-required' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('min')">
-                {{ 'gateway.statistics.check-connectors-configuration-min' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('pattern')">
-                {{ 'gateway.statistics.check-connectors-configuration-pattern' | translate }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.statistics.max-payload-size-bytes</mat-label>
-              <input matInput formControlName="maxPayloadSizeBytes" type="number" min="0"/>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.maxPayloadSizeBytes').hasError('required')">
-                {{ 'gateway.statistics.max-payload-size-bytes-required' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.maxPayloadSizeBytes').hasError('min')">
-                {{ 'gateway.statistics.max-payload-size-bytes-min' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.maxPayloadSizeBytes').hasError('pattern')">
-                {{ 'gateway.statistics.max-payload-size-bytes-pattern' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.max-payload-size-bytes' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-          </section>
-          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
-            <mat-form-field appearance="outline" class="flex">
-              <mat-label translate>gateway.statistics.min-pack-size-to-send</mat-label>
-              <input matInput formControlName="minPackSizeToSend" type="number" min="0"/>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.minPackSizeToSend').hasError('required')">
-                {{ 'gateway.statistics.min-pack-size-to-send-required' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.minPackSizeToSend').hasError('min')">
-                {{ 'gateway.statistics.min-pack-size-to-send-min' | translate }}
-              </mat-error>
-              <mat-error
-                *ngIf="basicFormGroup.get('thingsboard.minPackSizeToSend').hasError('pattern')">
-                {{ 'gateway.statistics.min-pack-size-to-send-pattern' | translate }}
-              </mat-error>
-              <mat-icon matIconSuffix style="cursor:pointer;"
-                        matTooltip="{{ 'gateway.hints.min-pack-size-to-send' | translate }}">info_outlined
-              </mat-icon>
-            </mat-form-field>
-          </section>
-        </div>
-      </div>
-    </ng-template>
-  </mat-tab>
-</mat-tab-group>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.scss
deleted file mode 100644
index 9807fb71c4..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-rows: min-content minmax(auto, 1fr) min-content;
-
-  .configuration-block {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    max-height: 70vh;
-  }
-
-  .dialog-mode {
-    .configuration-block {
-      max-height: 60vh;
-    }
-  }
-
-  .mat-toolbar {
-    grid-row: 1;
-    background: transparent;
-    color: rgba(0, 0, 0, .87) !important;
-  }
-
-  .tab-group-block {
-    min-width: 0;
-    height: 100%;
-    min-height: 0;
-    grid-row: 2;
-  }
-
-  .toggle-group {
-    margin-right: auto;
-  }
-
-  .first-capital {
-    text-transform: capitalize;
-  }
-
-  textarea {
-    resize: none;
-  }
-
-  .saving-period {
-    flex: 1;
-  }
-
-  .statistics-container {
-    width: 100%;
-
-    .command-container {
-      width: 100%;
-    }
-  }
-
-  mat-form-field {
-    mat-error {
-      display: none !important;
-    }
-
-    mat-error:first-child {
-      display: block !important;
-    }
-  }
-}
-
-:host ::ng-deep {
-  .pointer-event {
-    pointer-events: all;
-  }
-
-  .toggle-group span {
-    padding: 0 25px;
-  }
-
-  .mat-mdc-form-field-icon-suffix {
-    color: #E0E0E0;
-    &:hover {
-      color: #9E9E9E;
-    }
-  }
-
-  .mat-mdc-form-field-icon-suffix {
-    display: flex;
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.ts
deleted file mode 100644
index 1cff165f8a..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component.ts
+++ /dev/null
@@ -1,568 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnDestroy,
-  Output
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  ValidationErrors,
-  ValidatorFn,
-  Validators
-} from '@angular/forms';
-import { EntityId } from '@shared/models/id/entity-id';
-import { MatDialog } from '@angular/material/dialog';
-import {
-  GatewayRemoteConfigurationDialogComponent,
-  GatewayRemoteConfigurationDialogData
-} from '@home/components/widget/lib/gateway/gateway-remote-configuration-dialog';
-import { DeviceService } from '@core/http/device.service';
-import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
-import { DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
-import {
-  GatewayLogLevel,
-  GecurityTypesTranslationsMap,
-  LocalLogsConfigTranslateMap,
-  LocalLogsConfigs,
-  LogSavingPeriod,
-  LogSavingPeriodTranslations,
-  SecurityTypes,
-  StorageTypes,
-  StorageTypesTranslationMap,
-} from '../../gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { coerceBoolean } from '@shared/decorators/coercion';
-import {
-  GatewayConfigCommand,
-  GatewayConfigSecurity,
-  GatewayConfigValue,
-  LogConfig
-} from '@home/components/widget/lib/gateway/configuration/models/gateway-configuration.models';
-
-@Component({
-  selector: 'tb-gateway-basic-configuration',
-  templateUrl: './gateway-basic-configuration.component.html',
-  styleUrls: ['./gateway-basic-configuration.component.scss'],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => GatewayBasicConfigurationComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => GatewayBasicConfigurationComponent),
-      multi: true
-    }
-  ],
-})
-export class GatewayBasicConfigurationComponent implements OnDestroy, ControlValueAccessor, Validators {
-
-  @Input()
-  device: EntityId;
-
-  @coerceBoolean()
-  @Input()
-  dialogMode = false;
-
-  @Output()
-  initialCredentialsUpdated = new EventEmitter<DeviceCredentials>();
-
-  StorageTypes = StorageTypes;
-  storageTypes = Object.values(StorageTypes);
-  storageTypesTranslationMap = StorageTypesTranslationMap;
-  logSavingPeriods = LogSavingPeriodTranslations;
-  localLogsConfigs = Object.keys(LocalLogsConfigs) as LocalLogsConfigs[];
-  localLogsConfigTranslateMap = LocalLogsConfigTranslateMap;
-  securityTypes = GecurityTypesTranslationsMap;
-  gatewayLogLevel = Object.values(GatewayLogLevel);
-
-  logSelector: FormControl;
-  basicFormGroup: FormGroup;
-
-  private onChange: (value: GatewayConfigValue) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder,
-              private deviceService: DeviceService,
-              private cd: ChangeDetectorRef,
-              private dialog: MatDialog) {
-    this.initBasicFormGroup();
-    this.observeFormChanges();
-    this.basicFormGroup.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(value => {
-        this.onChange(value);
-        this.onTouched();
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: GatewayConfigValue) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(basicConfig: GatewayConfigValue): void {
-    this.basicFormGroup.patchValue(basicConfig, {emitEvent: false});
-    this.checkAndFetchCredentials(basicConfig?.thingsboard?.security ?? {} as GatewayConfigSecurity);
-    if (basicConfig?.grpc) {
-      this.toggleRpcFields(basicConfig.grpc.enabled);
-    }
-    const commands = basicConfig?.thingsboard?.statistics?.commands ?? [];
-    commands.forEach((command: GatewayConfigCommand) => this.addCommand(command, false));
-  }
-
-  validate(): ValidationErrors | null {
-    return this.basicFormGroup.valid ? null : {
-      basicFormGroup: {valid: false}
-    };
-  }
-
-  private atLeastOneRequired(validator: ValidatorFn, controls: string[] = null) {
-    return (group: FormGroup): ValidationErrors | null => {
-      if (!controls) {
-        controls = Object.keys(group.controls);
-      }
-      const hasAtLeastOne = group?.controls && controls.some(k => !validator(group.controls[k]));
-
-      return hasAtLeastOne ? null : {atLeastOne: true};
-    };
-  }
-
-  private toggleRpcFields(enable: boolean): void {
-    const grpcGroup = this.basicFormGroup.get('grpc') as FormGroup;
-    if (enable) {
-      grpcGroup.get('serverPort').enable({emitEvent: false});
-      grpcGroup.get('keepAliveTimeMs').enable({emitEvent: false});
-      grpcGroup.get('keepAliveTimeoutMs').enable({emitEvent: false});
-      grpcGroup.get('keepalivePermitWithoutCalls').enable({emitEvent: false});
-      grpcGroup.get('maxPingsWithoutData').enable({emitEvent: false});
-      grpcGroup.get('minTimeBetweenPingsMs').enable({emitEvent: false});
-      grpcGroup.get('minPingIntervalWithoutDataMs').enable({emitEvent: false});
-    } else {
-      grpcGroup.get('serverPort').disable({emitEvent: false});
-      grpcGroup.get('keepAliveTimeMs').disable({emitEvent: false});
-      grpcGroup.get('keepAliveTimeoutMs').disable({emitEvent: false});
-      grpcGroup.get('keepalivePermitWithoutCalls').disable({emitEvent: false});
-      grpcGroup.get('maxPingsWithoutData').disable({emitEvent: false});
-      grpcGroup.get('minTimeBetweenPingsMs').disable({emitEvent: false});
-      grpcGroup.get('minPingIntervalWithoutDataMs').disable({emitEvent: false});
-    }
-  }
-
-  private addLocalLogConfig(name: string, config: LogConfig): void {
-    const localLogsFormGroup = this.basicFormGroup.get('logs.local') as FormGroup;
-    const configGroup = this.fb.group({
-      logLevel: [config.logLevel || GatewayLogLevel.INFO, [Validators.required]],
-      filePath: [config.filePath || './logs', [Validators.required]],
-      backupCount: [config.backupCount || 7, [Validators.required, Validators.min(0)]],
-      savingTime: [config.savingTime || 3, [Validators.required, Validators.min(0)]],
-      savingPeriod: [config.savingPeriod || LogSavingPeriod.days, [Validators.required]]
-    });
-    localLogsFormGroup.addControl(name, configGroup);
-  }
-
-  getLogFormGroup(value: string): FormGroup {
-    return this.basicFormGroup.get(`logs.local.${value}`) as FormGroup;
-  }
-
-  commandFormArray(): FormArray {
-    return this.basicFormGroup.get('thingsboard.statistics.commands') as FormArray;
-  }
-
-  removeCommandControl(index: number, event: PointerEvent): void {
-    if (event.pointerType === '') {
-      return;
-    }
-    this.commandFormArray().removeAt(index);
-    this.basicFormGroup.markAsDirty();
-  }
-
-  private removeAllSecurityValidators(): void {
-    const securityGroup = this.basicFormGroup.get('thingsboard.security') as FormGroup;
-    securityGroup.clearValidators();
-    for (const controlsKey in securityGroup.controls) {
-      if (controlsKey !== 'type') {
-        securityGroup.controls[controlsKey].clearValidators();
-        securityGroup.controls[controlsKey].setErrors(null);
-        securityGroup.controls[controlsKey].updateValueAndValidity();
-      }
-    }
-  }
-
-  private removeAllStorageValidators(): void {
-    const storageGroup = this.basicFormGroup.get('storage') as FormGroup;
-    for (const storageKey in storageGroup.controls) {
-      if (storageKey !== 'type') {
-        storageGroup.controls[storageKey].clearValidators();
-        storageGroup.controls[storageKey].setErrors(null);
-        storageGroup.controls[storageKey].updateValueAndValidity();
-      }
-    }
-  }
-
-
-  private openConfigurationConfirmDialog(): void {
-    this.deviceService.getDevice(this.device.id).pipe(takeUntil(this.destroy$)).subscribe(gateway => {
-      this.dialog.open<GatewayRemoteConfigurationDialogComponent, GatewayRemoteConfigurationDialogData>
-      (GatewayRemoteConfigurationDialogComponent, {
-        disableClose: true,
-        panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-        data: {
-          gatewayName: gateway.name
-        }
-      }).afterClosed().pipe(take(1)).subscribe(
-        (res) => {
-          if (!res) {
-            this.basicFormGroup.get('thingsboard.remoteConfiguration').setValue(true, {emitEvent: false});
-          }
-        }
-      );
-    });
-  }
-
-  addCommand(command?: GatewayConfigCommand, emitEvent: boolean = true): void {
-    const { attributeOnGateway = null, command: cmd = null, timeout = null } = command || {};
-
-    const commandFormGroup = this.fb.group({
-      attributeOnGateway: [attributeOnGateway, [Validators.required, Validators.pattern(/^[^.\s]+$/)]],
-      command: [cmd, [Validators.required, Validators.pattern(/^(?=\S).*\S$/)]],
-      timeout: [timeout, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/), Validators.pattern(/^[^.\s]+$/)]]
-    });
-
-    this.commandFormArray().push(commandFormGroup, { emitEvent });
-  }
-
-  private initBasicFormGroup(): void {
-    this.basicFormGroup = this.fb.group({
-      thingsboard: this.initThingsboardFormGroup(),
-      storage: this.initStorageFormGroup(),
-      grpc: this.initGrpcFormGroup(),
-      connectors: this.fb.array([]),
-      logs: this.initLogsFormGroup(),
-    });
-  }
-
-  private initThingsboardFormGroup(): FormGroup {
-    return this.fb.group({
-      host: [window.location.hostname, [Validators.required, Validators.pattern(/^[^\s]+$/)]],
-      port: [1883, [Validators.required, Validators.min(1), Validators.max(65535), Validators.pattern(/^-?[0-9]+$/)]],
-      remoteShell: [false],
-      remoteConfiguration: [true],
-      checkConnectorsConfigurationInSeconds: [60, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      statistics: this.fb.group({
-        enable: [true],
-        statsSendPeriodInSeconds: [3600, [Validators.required, Validators.min(60), Validators.pattern(/^-?[0-9]+$/)]],
-        commands: this.fb.array([])
-      }),
-      maxPayloadSizeBytes: [8196, [Validators.required, Validators.min(100), Validators.pattern(/^-?[0-9]+$/)]],
-      minPackSendDelayMS: [50, [Validators.required, Validators.min(10), Validators.pattern(/^-?[0-9]+$/)]],
-      minPackSizeToSend: [500, [Validators.required, Validators.min(100), Validators.pattern(/^-?[0-9]+$/)]],
-      handleDeviceRenaming: [true],
-      checkingDeviceActivity: this.initCheckingDeviceActivityFormGroup(),
-      security: this.initSecurityFormGroup(),
-      qos: [1, [Validators.required, Validators.min(0), Validators.max(1), Validators.pattern(/^[^.\s]+$/)]]
-    });
-  }
-
-  private initStorageFormGroup(): FormGroup {
-    return this.fb.group({
-      type: [StorageTypes.MEMORY, [Validators.required]],
-      read_records_count: [100, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      max_records_count: [100000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      data_folder_path: ['./data/', [Validators.required]],
-      max_file_count: [10, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      max_read_records_count: [10, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      max_records_per_file: [10000, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      data_file_path: ['./data/data.db', [Validators.required]],
-      messages_ttl_check_in_hours: [1, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      messages_ttl_in_days: [7, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]]
-    });
-  }
-
-  private initGrpcFormGroup(): FormGroup {
-    return this.fb.group({
-      enabled: [false],
-      serverPort: [9595, [Validators.required, Validators.min(1), Validators.max(65535), Validators.pattern(/^-?[0-9]+$/)]],
-      keepAliveTimeMs: [10000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      keepAliveTimeoutMs: [5000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      keepalivePermitWithoutCalls: [true],
-      maxPingsWithoutData: [0, [Validators.required, Validators.min(0), Validators.pattern(/^-?[0-9]+$/)]],
-      minTimeBetweenPingsMs: [10000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      minPingIntervalWithoutDataMs: [5000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]]
-    });
-  }
-
-  private initLogsFormGroup(): FormGroup {
-    return this.fb.group({
-      dateFormat: ['%Y-%m-%d %H:%M:%S', [Validators.required, Validators.pattern(/^[^\s].*[^\s]$/)]],
-      logFormat: [
-        '%(asctime)s - |%(levelname)s| - [%(filename)s] - %(module)s - %(funcName)s - %(lineno)d - %(message)s',
-        [Validators.required, Validators.pattern(/^[^\s].*[^\s]$/)]
-      ],
-      type: ['remote', [Validators.required]],
-      remote: this.fb.group({
-        enabled: [false],
-        logLevel: [GatewayLogLevel.INFO, [Validators.required]]
-      }),
-      local: this.fb.group({})
-    });
-  }
-
-  private initCheckingDeviceActivityFormGroup(): FormGroup {
-    return this.fb.group({
-      checkDeviceInactivity: [false],
-      inactivityTimeoutSeconds: [200, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      inactivityCheckPeriodSeconds: [500, [Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]]
-    });
-  }
-
-  private initSecurityFormGroup(): FormGroup {
-    return this.fb.group({
-      type: [SecurityTypes.ACCESS_TOKEN, [Validators.required]],
-      accessToken: [null, [Validators.required, Validators.pattern(/^[^.\s]+$/)]],
-      clientId: [null, [Validators.pattern(/^[^.\s]+$/)]],
-      username: [null, [Validators.pattern(/^[^.\s]+$/)]],
-      password: [null, [Validators.pattern(/^[^.\s]+$/)]],
-      caCert: [null],
-      cert: [null],
-      privateKey: [null]
-    });
-  }
-
-  private observeFormChanges(): void {
-    this.observeSecurityPasswordChanges();
-    this.observeRemoteConfigurationChanges();
-    this.observeDeviceActivityChanges();
-    this.observeSecurityTypeChanges();
-    this.observeStorageTypeChanges();
-  }
-
-  private observeSecurityPasswordChanges(): void {
-    const securityUsername = this.basicFormGroup.get('thingsboard.security.username');
-    this.basicFormGroup.get('thingsboard.security.password').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(password => {
-      if (password && password !== '') {
-        securityUsername.setValidators([Validators.required]);
-      } else {
-        securityUsername.clearValidators();
-      }
-      securityUsername.updateValueAndValidity({ emitEvent: false });
-    });
-  }
-
-  private observeRemoteConfigurationChanges(): void {
-    this.basicFormGroup.get('thingsboard.remoteConfiguration').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(enabled => {
-      if (!enabled) {
-        this.openConfigurationConfirmDialog();
-      }
-    });
-
-    this.logSelector = this.fb.control(LocalLogsConfigs.service);
-    for (const key of Object.keys(LocalLogsConfigs)) {
-      this.addLocalLogConfig(key, {} as LogConfig);
-    }
-  }
-
-  private observeDeviceActivityChanges(): void {
-    const checkingDeviceActivityGroup = this.basicFormGroup.get('thingsboard.checkingDeviceActivity') as FormGroup;
-    checkingDeviceActivityGroup.get('checkDeviceInactivity').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(enabled => {
-      checkingDeviceActivityGroup.updateValueAndValidity();
-      const validators = [Validators.min(1), Validators.required, Validators.pattern(/^-?[0-9]+$/)];
-
-      if (enabled) {
-        checkingDeviceActivityGroup.get('inactivityTimeoutSeconds').setValidators(validators);
-        checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').setValidators(validators);
-      } else {
-        checkingDeviceActivityGroup.get('inactivityTimeoutSeconds').clearValidators();
-        checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').clearValidators();
-      }
-      checkingDeviceActivityGroup.get('inactivityTimeoutSeconds').updateValueAndValidity({ emitEvent: false });
-      checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').updateValueAndValidity({ emitEvent: false });
-    });
-
-    this.basicFormGroup.get('grpc.enabled').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-      this.toggleRpcFields(value);
-    });
-  }
-
-  private observeSecurityTypeChanges(): void {
-    const securityGroup = this.basicFormGroup.get('thingsboard.security') as FormGroup;
-
-    securityGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(type => {
-      this.removeAllSecurityValidators();
-
-      switch (type) {
-        case SecurityTypes.ACCESS_TOKEN:
-          this.addAccessTokenValidators(securityGroup);
-          break;
-        case SecurityTypes.TLS_PRIVATE_KEY:
-          this.addTlsPrivateKeyValidators(securityGroup);
-          break;
-        case SecurityTypes.TLS_ACCESS_TOKEN:
-          this.addTlsAccessTokenValidators(securityGroup);
-          break;
-        case SecurityTypes.USERNAME_PASSWORD:
-          securityGroup.addValidators([this.atLeastOneRequired(Validators.required, ['clientId', 'username'])]);
-          break;
-      }
-
-      securityGroup.updateValueAndValidity();
-    });
-
-    ['caCert', 'privateKey', 'cert'].forEach(field => {
-      securityGroup.get(field).valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => this.cd.detectChanges());
-    });
-  }
-
-  private observeStorageTypeChanges(): void {
-    const storageGroup = this.basicFormGroup.get('storage') as FormGroup;
-
-    storageGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(type => {
-      this.removeAllStorageValidators();
-
-      switch (type) {
-        case StorageTypes.MEMORY:
-          this.addMemoryStorageValidators(storageGroup);
-          break;
-        case StorageTypes.FILE:
-          this.addFileStorageValidators(storageGroup);
-          break;
-        case StorageTypes.SQLITE:
-          this.addSqliteStorageValidators(storageGroup);
-          break;
-      }
-    });
-  }
-
-  private addAccessTokenValidators(group: FormGroup): void {
-    group.get('accessToken').addValidators([Validators.required, Validators.pattern(/^[^.\s]+$/)]);
-    group.get('accessToken').updateValueAndValidity();
-  }
-
-  private addTlsPrivateKeyValidators(group: FormGroup): void {
-    ['caCert', 'privateKey', 'cert'].forEach(field => {
-      group.get(field).addValidators([Validators.required]);
-      group.get(field).updateValueAndValidity();
-    });
-  }
-
-  private addTlsAccessTokenValidators(group: FormGroup): void {
-    this.addAccessTokenValidators(group);
-    group.get('caCert').addValidators([Validators.required]);
-    group.get('caCert').updateValueAndValidity();
-  }
-
-  private addMemoryStorageValidators(group: FormGroup): void {
-    group.get('read_records_count').addValidators([Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]);
-    group.get('max_records_count').addValidators([Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]);
-    group.get('read_records_count').updateValueAndValidity({ emitEvent: false });
-    group.get('max_records_count').updateValueAndValidity({ emitEvent: false });
-  }
-
-  private addFileStorageValidators(group: FormGroup): void {
-    ['max_file_count', 'max_read_records_count', 'max_records_per_file'].forEach(field => {
-      group.get(field).addValidators([Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]);
-      group.get(field).updateValueAndValidity({ emitEvent: false });
-    });
-  }
-
-  private addSqliteStorageValidators(group: FormGroup): void {
-    ['messages_ttl_check_in_hours', 'messages_ttl_in_days'].forEach(field => {
-      group.get(field).addValidators([Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]);
-      group.get(field).updateValueAndValidity({ emitEvent: false });
-    });
-  }
-
-  private checkAndFetchCredentials(security: GatewayConfigSecurity): void {
-    if (security.type === SecurityTypes.TLS_PRIVATE_KEY) {
-      return;
-    }
-
-    this.deviceService.getDeviceCredentials(this.device.id).pipe(takeUntil(this.destroy$)).subscribe(credentials => {
-      this.initialCredentialsUpdated.emit(credentials);
-      this.updateSecurityType(security, credentials);
-      this.updateCredentials(credentials, security);
-    });
-  }
-
-  private updateSecurityType(security, credentials: DeviceCredentials): void {
-    const isAccessToken = credentials.credentialsType === DeviceCredentialsType.ACCESS_TOKEN
-      || security.type === SecurityTypes.TLS_ACCESS_TOKEN;
-    const securityType = isAccessToken
-      ? (security.type === SecurityTypes.TLS_ACCESS_TOKEN ? SecurityTypes.TLS_ACCESS_TOKEN : SecurityTypes.ACCESS_TOKEN)
-      : (credentials.credentialsType === DeviceCredentialsType.MQTT_BASIC ? SecurityTypes.USERNAME_PASSWORD : null);
-
-    if (securityType) {
-      this.basicFormGroup.get('thingsboard.security.type').setValue(securityType, { emitEvent: false });
-    }
-  }
-
-  private updateCredentials(credentials: DeviceCredentials, security: GatewayConfigSecurity): void {
-    switch (credentials.credentialsType) {
-      case DeviceCredentialsType.ACCESS_TOKEN:
-        this.updateAccessTokenCredentials(credentials, security);
-        break;
-      case DeviceCredentialsType.MQTT_BASIC:
-        this.updateMqttBasicCredentials(credentials);
-        break;
-      case DeviceCredentialsType.X509_CERTIFICATE:
-        break;
-    }
-  }
-
-  private updateAccessTokenCredentials(credentials: DeviceCredentials, security: GatewayConfigSecurity): void {
-    this.basicFormGroup.get('thingsboard.security.accessToken').setValue(credentials.credentialsId, { emitEvent: false });
-    if (security.type === SecurityTypes.TLS_ACCESS_TOKEN) {
-      this.basicFormGroup.get('thingsboard.security.caCert').setValue(security.caCert, { emitEvent: false });
-    }
-  }
-
-  private updateMqttBasicCredentials(credentials: DeviceCredentials): void {
-    const parsedValue = JSON.parse(credentials.credentialsValue);
-    this.basicFormGroup.get('thingsboard.security.clientId').setValue(parsedValue.clientId, { emitEvent: false });
-    this.basicFormGroup.get('thingsboard.security.username').setValue(parsedValue.userName, { emitEvent: false });
-    this.basicFormGroup.get('thingsboard.security.password').setValue(parsedValue.password, { emitEvent: false });
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.html
deleted file mode 100644
index 01fc12f167..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div [formGroup]="gatewayConfigGroup" class="gateway-config-container">
-  <div class="content-wrapper">
-    <mat-toolbar color="primary" [class.page-header]="!dialogRef">
-      <div class="tb-flex space-between">
-        <h2 translate>gateway.gateway-configuration</h2>
-        <div class="toolbar-actions">
-          <tb-toggle-select [class.dialog-toggle]="!!dialogRef" formControlName="mode" appearance="{{dialogRef ? 'stroked' : 'fill'}}">
-            <tb-toggle-option [value]="ConfigurationModes.BASIC">
-              {{ 'gateway.basic' | translate }}
-            </tb-toggle-option>
-            <tb-toggle-option [value]="ConfigurationModes.ADVANCED">
-              {{ 'gateway.advanced' | translate }}
-            </tb-toggle-option>
-          </tb-toggle-select>
-          <button *ngIf="dialogRef" mat-icon-button (click)="cancel()" type="button">
-            <mat-icon class="material-icons">close</mat-icon>
-          </button>
-        </div>
-      </div>
-    </mat-toolbar>
-    <tb-gateway-basic-configuration
-      *ngIf="gatewayConfigGroup.get('mode').value === ConfigurationModes.BASIC"
-      formControlName="basicConfig"
-      [device]="device"
-      [dialogMode]="!!dialogRef"
-      (initialCredentialsUpdated)="initialCredentials = $event"
-    />
-    <tb-gateway-advanced-configuration
-      *ngIf="gatewayConfigGroup.get('mode').value === ConfigurationModes.ADVANCED"
-      formControlName="advancedConfig"
-    />
-  </div>
-  <div class="actions">
-    <button mat-button color="primary"
-            type="button"
-            *ngIf="dialogRef"
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            [disabled]="gatewayConfigGroup.invalid || !gatewayConfigGroup.dirty"
-            (click)="saveConfig()">
-      {{ 'action.save' | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.scss
deleted file mode 100644
index 4d1d62ddad..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .page-header.mat-toolbar {
-    background: transparent;
-    color: rgba(0, 0, 0, .87) !important;
-  }
-
-  .actions {
-    grid-row: 3;
-    padding: 8px 16px 8px 8px;
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    z-index: 1;
-    background: white;
-    width: 100%;
-  }
-
-  .gateway-config-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .content-wrapper {
-    flex: 1;
-  }
-
-  .toolbar-actions {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.dialog-toggle {
-  ::ng-deep.mat-button-toggle-button {
-    color: rgba(255, 255, 255, .75);
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.ts
deleted file mode 100644
index 670fd57bd4..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/gateway-configuration.component.ts
+++ /dev/null
@@ -1,396 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectorRef, Component, Input, AfterViewInit, OnDestroy } from '@angular/core';
-import {
-  FormBuilder,
-  FormGroup,
-} from '@angular/forms';
-import { EntityId } from '@shared/models/id/entity-id';
-import { MatDialogRef } from '@angular/material/dialog';
-import { AttributeService } from '@core/http/attribute.service';
-import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { DeviceService } from '@core/http/device.service';
-import { Observable, of, Subject } from 'rxjs';
-import { mergeMap, switchMap, takeUntil } from 'rxjs/operators';
-import { DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
-import { NULL_UUID } from '@shared/models/id/has-uuid';
-import {
-  GatewayLogLevel,
-  SecurityTypes,
-  ConfigurationModes,
-  LocalLogsConfigs,
-  LogSavingPeriod, Attribute
-} from '../gateway-widget.models';
-import { deepTrim, isEqual } from '@core/utils';
-import {
-  GatewayConfigSecurity,
-  GatewayConfigValue,
-  GatewayGeneralConfig,
-  GatewayGRPCConfig,
-  GatewayLogsConfig,
-  GatewayStorageConfig,
-  LocalLogs,
-  LogAttribute,
-  LogConfig,
-} from './models/gateway-configuration.models';
-import { DeviceId } from '@shared/models/id/device-id';
-
-@Component({
-  selector: 'tb-gateway-configuration',
-  templateUrl: './gateway-configuration.component.html',
-  styleUrls: ['./gateway-configuration.component.scss']
-})
-export class GatewayConfigurationComponent implements AfterViewInit, OnDestroy {
-
-  @Input() device: EntityId;
-
-  @Input() dialogRef: MatDialogRef<GatewayConfigurationComponent>;
-
-  initialCredentials: DeviceCredentials;
-  gatewayConfigGroup: FormGroup;
-  ConfigurationModes = ConfigurationModes;
-
-  private destroy$ = new Subject<void>();
-  private readonly gatewayConfigAttributeKeys =
-    ['general_configuration', 'grpc_configuration', 'logs_configuration', 'storage_configuration', 'RemoteLoggingLevel', 'mode'];
-
-  constructor(private fb: FormBuilder,
-              private attributeService: AttributeService,
-              private deviceService: DeviceService,
-              private cd: ChangeDetectorRef
-  ) {
-
-    this.gatewayConfigGroup = this.fb.group({
-      basicConfig: [],
-      advancedConfig: [],
-      mode: [ConfigurationModes.BASIC],
-    });
-
-    this.observeAlignConfigs();
-  }
-
-  ngAfterViewInit(): void {
-    this.fetchConfigAttribute(this.device);
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  saveConfig(): void {
-    const { mode, advancedConfig } = deepTrim(this.removeEmpty(this.gatewayConfigGroup.value));
-    const value = { mode, ...advancedConfig as GatewayConfigValue };
-    value.thingsboard.statistics.commands = Object.values(value.thingsboard.statistics.commands ?? []);
-    const attributes = this.generateAttributes(value);
-
-    this.attributeService.saveEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, attributes).pipe(
-      switchMap(_ => this.updateCredentials(value.thingsboard.security)),
-      takeUntil(this.destroy$),
-    ).subscribe(() => {
-      if (this.dialogRef) {
-        this.dialogRef.close();
-      } else {
-        this.gatewayConfigGroup.markAsPristine();
-        this.cd.detectChanges();
-      }
-    });
-  }
-
-  private observeAlignConfigs(): void {
-    this.gatewayConfigGroup.get('basicConfig').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-      const advancedControl = this.gatewayConfigGroup.get('advancedConfig');
-
-      if (!isEqual(advancedControl.value, value) && this.gatewayConfigGroup.get('mode').value === ConfigurationModes.BASIC) {
-        advancedControl.patchValue(value, {emitEvent: false});
-      }
-    });
-
-    this.gatewayConfigGroup.get('advancedConfig').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-      const basicControl = this.gatewayConfigGroup.get('basicConfig');
-
-      if (!isEqual(basicControl.value, value) && this.gatewayConfigGroup.get('mode').value === ConfigurationModes.ADVANCED) {
-        basicControl.patchValue(value, {emitEvent: false});
-      }
-    });
-  }
-
-  private generateAttributes(value: GatewayConfigValue): Attribute[] {
-    const attributes = [];
-
-    const addAttribute = (key: string, val: unknown) => {
-      attributes.push({ key, value: val });
-    };
-
-    const addTimestampedAttribute = (key: string, val: unknown) => {
-      val = {...val as Record<string, unknown>, ts: new Date().getTime()};
-      addAttribute(key, val);
-    };
-
-    addAttribute('RemoteLoggingLevel', value.logs?.remote?.enabled ? value.logs.remote.logLevel : GatewayLogLevel.NONE);
-
-    delete value.connectors;
-    addAttribute('logs_configuration', this.generateLogsFile(value.logs));
-
-    addTimestampedAttribute('grpc_configuration', value.grpc);
-    addTimestampedAttribute('storage_configuration', value.storage);
-    addTimestampedAttribute('general_configuration', value.thingsboard);
-
-    addAttribute('mode', value.mode);
-
-    return attributes;
-  }
-
-  private updateCredentials(securityConfig: GatewayConfigSecurity): Observable<DeviceCredentials> {
-    let newCredentials: Partial<DeviceCredentials> = {};
-
-    switch (securityConfig.type) {
-      case SecurityTypes.USERNAME_PASSWORD:
-        if (this.shouldUpdateCredentials(securityConfig)) {
-          newCredentials = this.generateMqttCredentials(securityConfig);
-        }
-        break;
-
-      case SecurityTypes.ACCESS_TOKEN:
-      case SecurityTypes.TLS_ACCESS_TOKEN:
-        if (this.shouldUpdateAccessToken(securityConfig)) {
-          newCredentials = {
-            credentialsType: DeviceCredentialsType.ACCESS_TOKEN,
-            credentialsId: securityConfig.accessToken
-          };
-        }
-        break;
-    }
-
-    return Object.keys(newCredentials).length
-      ? this.deviceService.saveDeviceCredentials({ ...this.initialCredentials, ...newCredentials })
-      : of(null);
-  }
-
-  private shouldUpdateCredentials(securityConfig: GatewayConfigSecurity): boolean {
-    if (this.initialCredentials.credentialsType !== DeviceCredentialsType.MQTT_BASIC) {
-      return true;
-    }
-    const parsedCredentials = JSON.parse(this.initialCredentials.credentialsValue);
-    return !(
-      parsedCredentials.clientId === securityConfig.clientId &&
-      parsedCredentials.userName === securityConfig.username &&
-      parsedCredentials.password === securityConfig.password
-    );
-  }
-
-  private generateMqttCredentials(securityConfig: GatewayConfigSecurity): Partial<DeviceCredentials> {
-    const { clientId, username, password } = securityConfig;
-
-    const credentialsValue = {
-      ...(clientId && { clientId }),
-      ...(username && { userName: username }),
-      ...(password && { password }),
-    };
-
-    return {
-      credentialsType: DeviceCredentialsType.MQTT_BASIC,
-      credentialsValue: JSON.stringify(credentialsValue)
-    };
-  }
-
-  private shouldUpdateAccessToken(securityConfig: GatewayConfigSecurity): boolean {
-    return this.initialCredentials.credentialsType !== DeviceCredentialsType.ACCESS_TOKEN ||
-      this.initialCredentials.credentialsId !== securityConfig.accessToken;
-  }
-
-  cancel(): void {
-    if (this.dialogRef) {
-      this.dialogRef.close();
-    }
-  }
-
-  private removeEmpty(obj: Record<string, unknown>): Record<string, unknown> {
-    return Object.fromEntries(
-      Object.entries(obj)
-        .filter(([_, v]) => v != null)
-        .map(([k, v]) => [k, v === Object(v) ? this.removeEmpty(v as Record<string, unknown>) : v])
-    );
-  }
-
-  private generateLogsFile(logsObj: GatewayLogsConfig): LogAttribute {
-    const logAttrObj = {
-      version: 1,
-      disable_existing_loggers: false,
-      formatters: {
-        LogFormatter: {
-          class: 'logging.Formatter',
-          format: logsObj.logFormat,
-          datefmt: logsObj.dateFormat,
-        }
-      },
-      handlers: {
-        consoleHandler: {
-          class: 'logging.StreamHandler',
-          formatter: 'LogFormatter',
-          level: 0,
-          stream: 'ext://sys.stdout'
-        },
-        databaseHandler: {
-          class: 'thingsboard_gateway.tb_utility.tb_handler.TimedRotatingFileHandler',
-          formatter: 'LogFormatter',
-          filename: './logs/database.log',
-          backupCount: 1,
-          encoding: 'utf-8'
-        }
-      },
-      loggers: {
-        database: {
-          handlers: ['databaseHandler', 'consoleHandler'],
-          level: 'DEBUG',
-          propagate: false
-        }
-      },
-      root: {
-        level: 'ERROR',
-        handlers: [
-          'consoleHandler'
-        ]
-      },
-      ts: new Date().getTime()
-    };
-
-    this.addLocalLoggers(logAttrObj, logsObj.local);
-
-    return logAttrObj;
-  }
-
-  private addLocalLoggers(logAttrObj: LogAttribute, localLogs: LocalLogs): void {
-    for (const key of Object.keys(localLogs)) {
-      logAttrObj.handlers[key + 'Handler'] = this.createHandlerObj(localLogs[key], key);
-      logAttrObj.loggers[key] = this.createLoggerObj(localLogs[key], key);
-    }
-  }
-
-  private createHandlerObj(logObj: LogConfig, key: string) {
-    return {
-      class: 'thingsboard_gateway.tb_utility.tb_handler.TimedRotatingFileHandler',
-      formatter: 'LogFormatter',
-      filename: `${logObj.filePath}/${key}.log`,
-      backupCount: logObj.backupCount,
-      interval: logObj.savingTime,
-      when: logObj.savingPeriod,
-      encoding: 'utf-8'
-    };
-  }
-
-  private createLoggerObj(logObj: LogConfig, key: string) {
-    return {
-      handlers: [`${key}Handler`, 'consoleHandler'],
-      level: logObj.logLevel,
-      propagate: false
-    };
-  }
-
-  private fetchConfigAttribute(entityId: EntityId): void {
-    if (entityId.id === NULL_UUID) {
-      return;
-    }
-
-    this.attributeService.getEntityAttributes(entityId, AttributeScope.CLIENT_SCOPE,
-      )
-      .pipe(
-        mergeMap(attributes => attributes.length ? of(attributes) : this.attributeService.getEntityAttributes(
-          entityId, AttributeScope.SHARED_SCOPE, this.gatewayConfigAttributeKeys)
-        ),
-        takeUntil(this.destroy$)
-      )
-      .subscribe(attributes => {
-        this.updateConfigs(attributes);
-        this.cd.detectChanges();
-      });
-  }
-
-  private updateConfigs(attributes: AttributeData[]): void {
-    const formValue: GatewayConfigValue = {
-      thingsboard: {} as GatewayGeneralConfig,
-      grpc: {} as GatewayGRPCConfig,
-      logs: {} as GatewayLogsConfig,
-      storage: {} as GatewayStorageConfig,
-      mode: ConfigurationModes.BASIC
-    };
-
-    attributes.forEach(attr => {
-      switch (attr.key) {
-        case 'general_configuration':
-          formValue.thingsboard = attr.value;
-          this.updateFormControls(attr.value);
-          break;
-        case 'grpc_configuration':
-          formValue.grpc = attr.value;
-          break;
-        case 'logs_configuration':
-          formValue.logs = this.logsToObj(attr.value);
-          break;
-        case 'storage_configuration':
-          formValue.storage = attr.value;
-          break;
-        case 'mode':
-          formValue.mode = attr.value;
-          break;
-        case 'RemoteLoggingLevel':
-          formValue.logs = {
-            ...formValue.logs,
-            remote: {
-              enabled: attr.value !== GatewayLogLevel.NONE,
-              logLevel: attr.value
-            }
-          };
-      }
-    });
-
-    this.gatewayConfigGroup.get('basicConfig').setValue(formValue, { emitEvent: false });
-    this.gatewayConfigGroup.get('advancedConfig').setValue(formValue, { emitEvent: false });
-  }
-
-  private updateFormControls(thingsboard: GatewayGeneralConfig): void {
-    const { type, accessToken, ...securityConfig } = thingsboard.security ?? {};
-
-    this.initialCredentials = {
-      deviceId: this.device as DeviceId,
-      credentialsType: type as unknown as DeviceCredentialsType,
-      credentialsId: accessToken,
-      credentialsValue: JSON.stringify(securityConfig)
-    };
-  }
-
-  private logsToObj(logsConfig: LogAttribute): GatewayLogsConfig {
-    const { format: logFormat, datefmt: dateFormat } = logsConfig.formatters.LogFormatter;
-
-    const localLogs = Object.keys(LocalLogsConfigs).reduce((acc, key) => {
-      const handler = logsConfig.handlers[`${key}Handler`] || {};
-      const logger = logsConfig.loggers[key] || {};
-
-      acc[key] = {
-        logLevel: logger.level || GatewayLogLevel.INFO,
-        filePath: handler.filename?.split(`/${key}`)[0] || './logs',
-        backupCount: handler.backupCount || 7,
-        savingTime: handler.interval || 3,
-        savingPeriod: handler.when || LogSavingPeriod.days
-      };
-
-      return acc;
-    }, {}) as LocalLogs;
-
-    return { local: localLogs, logFormat, dateFormat };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/models/gateway-configuration.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/models/gateway-configuration.models.ts
deleted file mode 100644
index 4115c6c024..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/configuration/models/gateway-configuration.models.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ConfigurationModes,
-  GatewayConnector,
-  LocalLogsConfigs,
-  LogSavingPeriod,
-  SecurityTypes,
-  StorageTypes
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { GatewayLogLevel } from '@home/components/widget/lib/gateway/gateway-form.models';
-
-export interface GatewayConfigValue {
-  mode: ConfigurationModes;
-  thingsboard: GatewayGeneralConfig;
-  storage: GatewayStorageConfig;
-  grpc: GatewayGRPCConfig;
-  connectors?: GatewayConnector[];
-  logs: GatewayLogsConfig;
-}
-
-export interface GatewayGRPCConfig {
-  enabled: boolean;
-  serverPort: number;
-  keepAliveTimeMs: number;
-  keepAliveTimeoutMs: number;
-  keepalivePermitWithoutCalls: boolean;
-  maxPingsWithoutData: number;
-  minTimeBetweenPingsMs: number;
-  minPingIntervalWithoutDataMs: number;
-}
-
-export interface GatewayStorageConfig {
-  type: StorageTypes;
-  read_records_count?: number;
-  max_records_count?: number;
-  data_folder_path?: string;
-  max_file_count?: number;
-  max_read_records_count?: number;
-  max_records_per_file?: number;
-  data_file_path?: string;
-  messages_ttl_check_in_hours?: number;
-  messages_ttl_in_days?: number;
-}
-
-export interface GatewayGeneralConfig {
-  host: string;
-  port: number;
-  remoteShell: boolean;
-  remoteConfiguration: boolean;
-  checkConnectorsConfigurationInSeconds: number;
-  statistics: {
-    enable: boolean;
-    statsSendPeriodInSeconds: number;
-    commands: GatewayConfigCommand[];
-  };
-  maxPayloadSizeBytes: number;
-  minPackSendDelayMS: number;
-  minPackSizeToSend: number;
-  handleDeviceRenaming: boolean;
-  checkingDeviceActivity: {
-    checkDeviceInactivity: boolean;
-    inactivityTimeoutSeconds?: number;
-    inactivityCheckPeriodSeconds?: number;
-  };
-  security: GatewayConfigSecurity;
-  qos: number;
-}
-
-export interface GatewayLogsConfig {
-  dateFormat: string;
-  logFormat: string;
-  type?: string;
-  remote?: {
-    enabled: boolean;
-    logLevel: GatewayLogLevel;
-  };
-  local: LocalLogs;
-}
-
-export interface GatewayConfigSecurity {
-  type: SecurityTypes;
-  accessToken?: string;
-  clientId?: string;
-  username?: string;
-  password?: string;
-  caCert?: string;
-  cert?: string;
-  privateKey?: string;
-}
-
-export interface GatewayConfigCommand {
-  attributeOnGateway: string;
-  command: string;
-  timeout: number;
-}
-
-export interface LogConfig {
-  logLevel: GatewayLogLevel;
-  filePath: string;
-  backupCount: number;
-  savingTime: number;
-  savingPeriod: LogSavingPeriod;
-}
-
-export type LocalLogs = Record<LocalLogsConfigs, LogConfig>;
-
-interface LogFormatterConfig {
-  class: string;
-  format: string;
-  datefmt: string;
-}
-
-interface StreamHandlerConfig {
-  class: string;
-  formatter: string;
-  level: string | number;
-  stream: string;
-}
-
-interface FileHandlerConfig {
-  class: string;
-  formatter: string;
-  filename: string;
-  backupCount: number;
-  encoding: string;
-}
-
-interface LoggerConfig {
-  handlers: string[];
-  level: string;
-  propagate: boolean;
-}
-
-interface RootConfig {
-  level: string;
-  handlers: string[];
-}
-
-export interface LogAttribute {
-  version: number;
-  disable_existing_loggers: boolean;
-  formatters: {
-    LogFormatter: LogFormatterConfig;
-  };
-  handlers: {
-    consoleHandler: StreamHandlerConfig;
-    databaseHandler: FileHandlerConfig;
-  };
-  loggers: {
-    database: LoggerConfig;
-  };
-  root: RootConfig;
-  ts: number;
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.html
deleted file mode 100644
index bbaf616471..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-panel stroked" [formGroup]="mappingFormGroup">
-  <div class="tb-form-panel-title" [class.tb-required]="required" translate>device.device</div>
-  <div class="tb-form-table no-padding no-gap">
-    <div class="tb-form-table-header">
-      <div class="tb-form-table-header-cell table-name-column" translate>gateway.device-info.entity-field</div>
-      <div *ngIf="useSource" class="tb-form-table-header-cell table-column" translate>gateway.device-info.source</div>
-      <div class="tb-form-table-header-cell table-column" translate>
-        gateway.device-info.expression
-      </div>
-    </div>
-    <div class="tb-form-table-body no-gap">
-      <div class="tb-form-table-row tb-form-row no-border same-padding top-same-padding"
-           [class.bottom-same-padding]="deviceInfoType !== DeviceInfoType.FULL">
-        <div class="fixed-title-width tb-required" translate>gateway.device-info.name</div>
-        <div class="tb-flex no-gap raw-value-option" *ngIf="useSource">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="deviceNameExpressionSource">
-              <mat-option *ngFor="let type of sourceTypes" [value]="type">
-                {{ SourceTypeTranslationsMap.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-table-row-cell tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="('gateway.device-info.device-name-expression-required') | translate"
-                      *ngIf="mappingFormGroup.get('deviceNameExpression').hasError('required') &&
-                             mappingFormGroup.get('deviceNameExpression').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
-            <div *ngIf="'name-field' | getGatewayHelpLink : mappingFormGroup.get('deviceNameExpressionSource').value : sourceTypes"
-                 matSuffix
-                 class="see-example"
-                 [tb-help-popup]="'name-field' | getGatewayHelpLink : mappingFormGroup.get('deviceNameExpressionSource').value : sourceTypes"
-                 tb-help-popup-placement="left"
-                 [tb-help-popup-style]="{maxWidth: '970px'}">
-            </div>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-table-row tb-form-row no-border same-padding bottom-same-padding"
-           *ngIf="deviceInfoType === DeviceInfoType.FULL">
-        <div class="fixed-title-width tb-required" translate>gateway.device-info.profile-name</div>
-        <div class="tb-flex no-gap raw-value-option" *ngIf="useSource">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="deviceProfileExpressionSource">
-              <mat-option *ngFor="let type of sourceTypes" [value]="type">
-                {{ SourceTypeTranslationsMap.get(type) | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div class="tb-form-table-row-cell tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="deviceProfileExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="('gateway.device-info.device-profile-expression-required') | translate"
-                      *ngIf="mappingFormGroup.get('deviceProfileExpression').hasError('required') &&
-                             mappingFormGroup.get('deviceProfileExpression').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
-            <div *ngIf="'profile-name' | getGatewayHelpLink: mappingFormGroup.get('deviceProfileExpressionSource').value : sourceTypes"
-                 matSuffix
-                 class="see-example"
-                 [tb-help-popup]="'profile-name' | getGatewayHelpLink: mappingFormGroup.get('deviceProfileExpressionSource').value : sourceTypes"
-                 tb-help-popup-placement="left"
-                 [tb-help-popup-style]="{maxWidth: '970px'}">
-            </div>
-          </mat-form-field>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.ts
deleted file mode 100644
index 91432b7353..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { PageComponent } from '@shared/components/page.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import {
-  DeviceInfoType,
-  noLeadTrailSpacesRegex,
-  OPCUaSourceType,
-  SourceType,
-  SourceTypeTranslationsMap
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { coerceBoolean } from '@shared/decorators/coercion';
-
-@Component({
-  selector: 'tb-device-info-table',
-  templateUrl: './device-info-table.component.html',
-  styleUrls: ['./device-info-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DeviceInfoTableComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => DeviceInfoTableComponent),
-      multi: true
-    }
-  ]
-})
-export class DeviceInfoTableComponent extends PageComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
-
-  SourceTypeTranslationsMap = SourceTypeTranslationsMap;
-
-  DeviceInfoType = DeviceInfoType;
-
-  @coerceBoolean()
-  @Input()
-  useSource = true;
-
-  @coerceBoolean()
-  @Input()
-  required = false;
-
-  @Input()
-  sourceTypes: Array<SourceType | OPCUaSourceType> = Object.values(SourceType);
-
-  deviceInfoTypeValue: any;
-
-  get deviceInfoType(): any {
-    return this.deviceInfoTypeValue;
-  }
-
-  @Input()
-  set deviceInfoType(value: any) {
-    if (this.deviceInfoTypeValue !== value) {
-      this.deviceInfoTypeValue = value;
-    }
-  }
-
-  mappingFormGroup: UntypedFormGroup;
-
-  private destroy$ = new Subject<void>();
-  private propagateChange = (v: any) => {};
-
-  constructor(protected store: Store<AppState>,
-              public translate: TranslateService,
-              public dialog: MatDialog,
-              private fb: FormBuilder) {
-    super(store);
-  }
-
-  ngOnInit() {
-    this.mappingFormGroup = this.fb.group({
-      deviceNameExpression: ['', this.required ?
-        [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)] : [Validators.pattern(noLeadTrailSpacesRegex)]]
-    });
-
-    if (this.useSource) {
-      this.mappingFormGroup.addControl('deviceNameExpressionSource',
-        this.fb.control(this.sourceTypes[0], []));
-    }
-
-    if (this.deviceInfoType === DeviceInfoType.FULL) {
-      if (this.useSource) {
-        this.mappingFormGroup.addControl('deviceProfileExpressionSource',
-          this.fb.control(this.sourceTypes[0], []));
-      }
-      this.mappingFormGroup.addControl('deviceProfileExpression',
-        this.fb.control('', this.required ?
-          [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)] : [Validators.pattern(noLeadTrailSpacesRegex)]));
-    }
-
-    this.mappingFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.updateView(value);
-    });
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-    super.ngOnDestroy();
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {}
-
-  writeValue(deviceInfo: any) {
-    this.mappingFormGroup.patchValue(deviceInfo, {emitEvent: false});
-  }
-
-  validate(): ValidationErrors | null {
-    return this.mappingFormGroup.valid ? null : {
-      mappingForm: { valid: false }
-    };
-  }
-
-  updateView(value: any) {
-    this.propagateChange(value);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
deleted file mode 100644
index 736d9c83c6..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-mapping-keys-panel">
-  <div class="tb-form-panel no-border no-padding">
-    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{' (' + keysListFormArray.controls.length + ')'}}</div>
-    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">
-      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"
-           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">
-        <div class="tb-form-panel stroked tb-flex">
-          <ng-container [formGroup]="keyControl">
-            <mat-expansion-panel class="tb-settings" [expanded]="last">
-              <mat-expansion-panel-header fxLayout="row wrap">
-                <mat-panel-title>
-                  <ng-container *ngIf="keysType !== MappingKeysType.RPC_METHODS">
-                    <div tbTruncateWithTooltip class="title-container">
-                      {{ keyControl.get('key').value }}
-                    </div>
-                    {{ '-' }}
-                  </ng-container>
-                  <div tbTruncateWithTooltip class="title-container">{{ valueTitle(keyControl) }}</div>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
-                <div class="tb-form-panel no-border no-padding"
-                     *ngIf="keysType !== MappingKeysType.CUSTOM && keysType !== MappingKeysType.RPC_METHODS">
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title" translate>gateway.platform-side</div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required"
-                           tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}">
-                        {{ 'gateway.key' | translate }}
-                      </div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.key-required') | translate"
-                                    *ngIf="keyControl.get('key').hasError('required') &&
-                                           keyControl.get('key').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title" translate>gateway.connector-side</div>
-                    <div class="tb-form-row">
-                      <div class="fixed-title-width tb-required" translate>gateway.type</div>
-                      <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select name="valueType" formControlName="type">
-                          <mat-select-trigger *ngIf="!rawData">
-                            <div class="tb-flex align-center">
-                              <mat-icon *ngIf="valueTypes.get(keyControl.get('type').value)?.icon" class="tb-mat-18"
-                                        [svgIcon]="valueTypes.get(keyControl.get('type').value)?.icon">
-                              </mat-icon>
-                              <span *ngIf="!rawData; else rawText">
-                                {{ (valueTypes.get(keyControl.get('type').value)?.name || valueTypes.get(keyControl.get('type').value)) | translate }}
-                              </span>
-                              <ng-template #rawText>
-                                <span>{{ 'gateway.raw' | translate }}</span>
-                              </ng-template>
-                            </div>
-                          </mat-select-trigger>
-                          <ng-container *ngIf="!rawData; else rawOption">
-                            <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">
-                              <mat-icon *ngIf="valueTypes.get(valueType).icon" class="tb-mat-20"
-                                        svgIcon="{{ valueTypes.get(valueType).icon }}">
-                              </mat-icon>
-                              <span>
-                                {{ valueTypes.get(valueType).name || valueTypes.get(valueType) | translate }}
-                              </span>
-                            </mat-option>
-                          </ng-container>
-                          <ng-template #rawOption>
-                            <mat-option [value]="'raw'">
-                              <span>{{ 'gateway.raw' | translate }}</span>
-                            </mat-option>
-                          </ng-template>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required"
-                           tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}">
-                        {{ 'gateway.value' | translate }}
-                      </div>
-                      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-flex no-gap">
-                        <input matInput required formControlName="value"
-                               placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.value-required') | translate"
-                                  *ngIf="keyControl.get('value').hasError('required') &&
-                                         keyControl.get('value').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                        <div matSuffix
-                             class="see-example"
-                             *ngIf="this.keysType | getGatewayHelpLink : keyControl.get('type').value : valueTypeKeys"
-                             [tb-help-popup]="this.keysType | getGatewayHelpLink : keyControl.get('type').value : valueTypeKeys"
-                             tb-help-popup-placement="left"
-                             [tb-help-popup-style]="{maxWidth: '970px'}">
-                        </div>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                </div>
-                <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.CUSTOM">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.key</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.key-required') | translate"
-                                  *ngIf="keyControl.get('key').hasError('required') && keyControl.get('key').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
-                      <input matInput required formControlName="value"
-                             placeholder="{{ 'gateway.set' | translate }}"/>
-                      <mat-icon matSuffix
-                                matTooltipPosition="above"
-                                matTooltipClass="tb-error-tooltip"
-                                [matTooltip]="('gateway.value-required') | translate"
-                                *ngIf="keyControl.get('value').hasError('required') && keyControl.get('value').touched"
-                                class="tb-error">
-                        warning
-                      </mat-icon>
-                    </mat-form-field>
-                  </div>
-                </div>
-                <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.RPC_METHODS">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.method-name' | translate }}">
-                      {{ 'gateway.method-name' | translate }}
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="method" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.method-required') | translate"
-                                  *ngIf="keyControl.get('method').hasError('required') && keyControl.get('method').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-panel stroked tb-flex">
-                    <mat-expansion-panel class="tb-settings">
-                      <mat-expansion-panel-header fxLayout="row wrap">
-                        <mat-panel-title>
-                          <div class="title-container" tb-hint-tooltip-icon="{{ 'gateway.hints.arguments' | translate }}">
-                            {{ 'gateway.arguments' | translate }}{{' (' + keyControl.get('arguments').value?.length + ')'}}
-                          </div>
-                        </mat-panel-title>
-                      </mat-expansion-panel-header>
-                      <ng-template matExpansionPanelContent>
-                        <tb-type-value-panel formControlName="arguments"></tb-type-value-panel>
-                      </ng-template>
-                    </mat-expansion-panel>
-                  </div>
-                </div>
-              </ng-template>
-            </mat-expansion-panel>
-          </ng-container>
-        </div>
-        <button type="button"
-                mat-icon-button
-                (click)="deleteKey($event, $index)"
-                [matTooltip]="deleteKeyTitle | translate"
-                matTooltipPosition="above">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    </div>
-    <div>
-      <button type="button" mat-stroked-button color="primary" (click)="addKey()">
-        {{ addKeyTitle | translate }}
-      </button>
-    </div>
-  </div>
-  <ng-template #noKeys>
-    <div class="tb-flex no-flex center align-center key-panel">
-      <span class="tb-prompt" translate>{{ noKeysText }}</span>
-    </div>
-  </ng-template>
-  <div class="tb-flex flex-end">
-    <button mat-button
-            color="primary"
-            type="button"
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="applyKeysData()"
-            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">
-      {{ 'action.apply' | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.scss
deleted file mode 100644
index 24498863c9..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  .tb-mapping-keys-panel {
-    width: 77vw;
-    max-width: 700px;
-
-    .title-container {
-      max-width: 11vw;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap
-    }
-
-    .key-panel {
-      height: 500px;
-      overflow: auto;
-    }
-
-    tb-value-input {
-      width: 100%;
-    }
-
-    .tb-form-panel {
-      .mat-mdc-icon-button {
-        width: 56px;
-        height: 56px;
-        padding: 16px;
-        color: rgba(0, 0, 0, 0.54);
-      }
-    }
-
-    .see-example {
-      width: 32px;
-      height: 32px;
-      margin: 4px;
-    }
-  }
-}
-
-:host ::ng-deep {
-  .mat-mdc-form-field-icon-suffix {
-    display: flex;
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.ts
deleted file mode 100644
index de289dde2e..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output
-} from '@angular/core';
-import {
-  AbstractControl,
-  FormControl,
-  FormGroup,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  Validators
-} from '@angular/forms';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { coerceBoolean } from '@shared/decorators/coercion';
-import { TbPopoverComponent } from '@shared/components/popover.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { PageComponent } from '@shared/components/page.component';
-import { isDefinedAndNotNull } from '@core/utils';
-import {
-  MappingDataKey,
-  MappingKeysType,
-  MappingValueType,
-  mappingValueTypesMap,
-  noLeadTrailSpacesRegex,
-  OPCUaSourceType,
-  RpcMethodsMapping,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-@Component({
-  selector: 'tb-mapping-data-keys-panel',
-  templateUrl: './mapping-data-keys-panel.component.html',
-  styleUrls: ['./mapping-data-keys-panel.component.scss'],
-  providers: []
-})
-export class MappingDataKeysPanelComponent extends PageComponent implements OnInit {
-
-  @Input()
-  panelTitle: string;
-
-  @Input()
-  addKeyTitle: string;
-
-  @Input()
-  deleteKeyTitle: string;
-
-  @Input()
-  noKeysText: string;
-
-  @Input()
-  keys: Array<MappingDataKey> | {[key: string]: any};
-
-  @Input()
-  keysType: MappingKeysType;
-
-  @Input()
-  valueTypeKeys: Array<MappingValueType | OPCUaSourceType> = Object.values(MappingValueType);
-
-  @Input()
-  valueTypeEnum = MappingValueType;
-
-  @Input()
-  valueTypes: Map<string, any> = mappingValueTypesMap;
-
-  @Input()
-  @coerceBoolean()
-  rawData = false;
-
-  @Input()
-  popover: TbPopoverComponent<MappingDataKeysPanelComponent>;
-
-  @Output()
-  keysDataApplied = new EventEmitter<Array<MappingDataKey> | {[key: string]: unknown}>();
-
-  MappingKeysType = MappingKeysType;
-
-  dataKeyType: DataKeyType;
-
-  keysListFormArray: UntypedFormArray;
-
-  errorText = '';
-
-  constructor(private fb: UntypedFormBuilder,
-              protected store: Store<AppState>) {
-    super(store);
-  }
-
-  ngOnInit(): void {
-    this.keysListFormArray = this.prepareKeysFormArray(this.keys);
-  }
-
-  trackByKey(index: number, keyControl: AbstractControl): any {
-    return keyControl;
-  }
-
-  addKey(): void {
-    let dataKeyFormGroup: FormGroup;
-    if (this.keysType === MappingKeysType.RPC_METHODS) {
-      dataKeyFormGroup = this.fb.group({
-        method: ['', [Validators.required]],
-        arguments: [[], []]
-      });
-    } else {
-      dataKeyFormGroup = this.fb.group({
-        key: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        value: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]]
-      });
-    }
-    if (this.keysType !== MappingKeysType.CUSTOM && this.keysType !== MappingKeysType.RPC_METHODS) {
-      const controlValue = this.rawData ? 'raw' : this.valueTypeKeys[0];
-      dataKeyFormGroup.addControl('type', this.fb.control(controlValue));
-    }
-    this.keysListFormArray.push(dataKeyFormGroup);
-  }
-
-  deleteKey($event: Event, index: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    this.keysListFormArray.removeAt(index);
-    this.keysListFormArray.markAsDirty();
-  }
-
-  cancel(): void {
-    this.popover?.hide();
-  }
-
-  applyKeysData(): void {
-    let keys = this.keysListFormArray.value;
-    if (this.keysType === MappingKeysType.CUSTOM) {
-      keys = {};
-      for (let key of this.keysListFormArray.value) {
-        keys[key.key] = key.value;
-      }
-    }
-    this.keysDataApplied.emit(keys);
-  }
-
-  private prepareKeysFormArray(keys: Array<MappingDataKey | RpcMethodsMapping> | {[key: string]: any}): UntypedFormArray {
-    const keysControlGroups: Array<AbstractControl> = [];
-    if (keys) {
-      if (this.keysType === MappingKeysType.CUSTOM) {
-        keys = Object.keys(keys).map(key => {
-          return {key, value: keys[key], type: ''};
-        });
-      }
-      keys.forEach((keyData) => {
-        let dataKeyFormGroup: FormGroup;
-        if (this.keysType === MappingKeysType.RPC_METHODS) {
-          dataKeyFormGroup = this.fb.group({
-            method: [keyData.method, [Validators.required]],
-            arguments: [[...keyData.arguments], []]
-          });
-        } else {
-          const { key, value, type } = keyData;
-          dataKeyFormGroup = this.fb.group({
-            key: [key, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-            value: [value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-            type: [type, []]
-          });
-        }
-        keysControlGroups.push(dataKeyFormGroup);
-      });
-    }
-    return this.fb.array(keysControlGroups);
-  }
-
-  valueTitle(keyControl: FormControl): string {
-    const value = keyControl.get(this.keysType === MappingKeysType.RPC_METHODS ? 'method' : 'value').value;
-    if (isDefinedAndNotNull(value)) {
-      if (typeof value === 'object') {
-        return JSON.stringify(value);
-      }
-      return value;
-    }
-    return '';
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
deleted file mode 100644
index 7e1ab2bb62..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-mapping-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-mapping-table-content">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
-      <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
-          <span class="tb-mapping-table-title">{{mappingTypeTranslationsMap.get(mappingType) | translate}}</span>
-        </div>
-        <span fxFlex></span>
-        <button mat-icon-button
-                (click)="manageMapping($event)"
-                matTooltip="{{ 'action.add' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>add</mat-icon>
-        </button>
-        <button mat-icon-button
-                (click)="enterFilterMode()"
-                matTooltip="{{ 'action.search' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>search</mat-icon>
-        </button>
-      </div>
-    </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
-      <div class="mat-toolbar-tools">
-        <button mat-icon-button
-                matTooltip="{{ 'action.search' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>search</mat-icon>
-        </button>
-        <mat-form-field fxFlex>
-          <mat-label>&nbsp;</mat-label>
-          <input #searchInput matInput
-                 [formControl]="textSearch"
-                 placeholder="{{ 'common.enter-search' | translate }}"/>
-        </mat-form-field>
-        <button mat-icon-button (click)="exitFilterMode()"
-                matTooltip="{{ 'action.close' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-    </mat-toolbar>
-    <div class="table-container">
-      <table mat-table [dataSource]="dataSource">
-        <ng-container [matColumnDef]="column.def" *ngFor="let column of mappingColumns; let i = index">
-          <mat-header-cell *matHeaderCellDef class="table-value-column"
-                           [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">
-            {{ column.title | translate }}
-          </mat-header-cell>
-          <mat-cell tbTruncateWithTooltip *matCellDef="let mapping" class="table-value-column"
-                    [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">
-            {{ mapping[column.def] }}
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px', textAlign: 'center'}">
-          </mat-header-cell>
-          <mat-cell *matCellDef="let mapping; let i = index"
-                    [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
-            <ng-template #rowActions>
-              <button mat-icon-button
-                      matTooltip="{{ 'action.edit' | translate }}"
-                      matTooltipPosition="above"
-                      (click)="manageMapping($event, i)">
-                <tb-icon>edit</tb-icon>
-              </button>
-              <button mat-icon-button
-                      matTooltip="{{ 'action.delete' | translate }}"
-                      matTooltipPosition="above"
-                      (click)="deleteMapping($event, i)">
-                <tb-icon>delete</tb-icon>
-              </button>
-            </ng-template>
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
-            </div>
-            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation()"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
-              </mat-menu>
-            </div>
-          </mat-cell>
-        </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row *matRowDef="let mapping; columns: displayedColumns;"></mat-row>
-      </table>
-      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
-               class="mat-headline-5 tb-absolute-fill tb-add-new">
-        <button mat-button class="connector"
-                (click)="manageMapping($event)">
-          <mat-icon class="tb-mat-96">add</mat-icon>
-          <span>{{ 'gateway.add-mapping' | translate }}</span>
-        </button>
-      </section>
-    </div>
-    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"
-          fxLayoutAlign="center center"
-          class="no-data-found" translate>
-      widget.no-data-found
-    </span>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.scss
deleted file mode 100644
index 707b5fa056..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../scss/constants';
-
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-  .tb-mapping-table {
-    .tb-mapping-table-content {
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      overflow: hidden;
-
-      &.tb-outlined-border {
-        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
-        border: solid 1px #e0e0e0;
-        border-radius: 4px;
-      }
-
-      .mat-toolbar-tools{
-        min-height: auto;
-      }
-
-      .title-container{
-        overflow: hidden;
-      }
-
-      .tb-mapping-table-title {
-        padding-right: 20px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .table-container {
-        overflow: auto;
-        .mat-mdc-table {
-          table-layout: fixed;
-          min-width: 450px;
-
-          .table-value-column {
-            padding: 0 12px;
-            width: 23%;
-
-            &.request-column {
-              width: 38%;
-            }
-          }
-        }
-      }
-
-      .ellipsis {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .no-data-found {
-    height: calc(100% - 120px);
-  }
-
-  @media #{$mat-xs} {
-    .mat-toolbar {
-      height: auto;
-      min-height: 100px;
-
-      .tb-mapping-table-title{
-        padding-bottom: 5px;
-        width: 100%;
-      }
-    }
-  }
-}
-
-:host ::ng-deep {
-  mat-cell.tb-value-cell {
-    cursor: pointer;
-    .mat-icon {
-      height: 24px;
-      width: 24px;
-      font-size: 24px;
-      color: #757575
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
deleted file mode 100644
index bdf52beb99..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { MatDialog } from '@angular/material/dialog';
-import { DialogService } from '@core/services/dialog.service';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormArray,
-  ValidationErrors,
-  Validator,
-} from '@angular/forms';
-import {
-  AttributeUpdate,
-  ConnectorMapping,
-  ConnectRequest,
-  ConverterConnectorMapping,
-  ConvertorTypeTranslationsMap,
-  DeviceConnectorMapping,
-  DisconnectRequest,
-  MappingInfo,
-  MappingType,
-  MappingTypeTranslationsMap,
-  MappingValue,
-  RequestMappingValue,
-  RequestType,
-  RequestTypesTranslationsMap,
-  ServerSideRpc
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { MappingDialogComponent } from '@home/components/widget/lib/gateway/dialog/mapping-dialog.component';
-import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils';
-import { coerceBoolean } from '@shared/decorators/coercion';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract';
-
-@Component({
-  selector: 'tb-mapping-table',
-  templateUrl: './mapping-table.component.html',
-  styleUrls: ['./mapping-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MappingTableComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => MappingTableComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [CommonModule, SharedModule]
-})
-export class MappingTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy {
-
-  @Input()
-  @coerceBoolean()
-  required = false;
-
-  @Input()
-  set mappingType(value: MappingType) {
-    if (this.mappingTypeValue !== value) {
-      this.mappingTypeValue = value;
-    }
-  }
-
-  get mappingType(): MappingType {
-    return this.mappingTypeValue;
-  }
-
-  @ViewChild('searchInput') searchInputField: ElementRef;
-
-  mappingTypeTranslationsMap = MappingTypeTranslationsMap;
-  mappingTypeEnum = MappingType;
-  displayedColumns = [];
-  mappingColumns = [];
-  textSearchMode = false;
-  dataSource: MappingDatasource;
-  hidePageSize = false;
-  activeValue = false;
-  dirtyValue = false;
-  mappingTypeValue: MappingType;
-  mappingFormGroup: UntypedFormArray;
-  textSearch = this.fb.control('', {nonNullable: true});
-
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void  = () => {};
-
-  private destroy$ = new Subject<void>();
-
-  constructor(public translate: TranslateService,
-              public dialog: MatDialog,
-              private dialogService: DialogService,
-              private fb: FormBuilder) {
-    this.mappingFormGroup = this.fb.array([]);
-    this.dirtyValue = !this.activeValue;
-    this.dataSource = new MappingDatasource();
-  }
-
-  ngOnInit(): void {
-    this.setMappingColumns();
-    this.displayedColumns.push(...this.mappingColumns.map(column => column.def), 'actions');
-    this.mappingFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.updateTableData(value);
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  ngAfterViewInit(): void {
-    this.textSearch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged((prev, current) => (prev ?? '') === current.trim()),
-      takeUntil(this.destroy$)
-    ).subscribe((text) => {
-      const searchText = text.trim();
-      this.updateTableData(this.mappingFormGroup.value, searchText.trim());
-    });
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(connectorMappings: ConnectorMapping[]): void {
-    this.mappingFormGroup.clear();
-    this.pushDataAsFormArrays(connectorMappings);
-  }
-
-  validate(): ValidationErrors | null {
-    return !this.required || this.mappingFormGroup.controls.length ? null : {
-      mappingFormGroup: {valid: false}
-    };
-  }
-
-  enterFilterMode(): void {
-    this.textSearchMode = true;
-    setTimeout(() => {
-      this.searchInputField.nativeElement.focus();
-      this.searchInputField.nativeElement.setSelectionRange(0, 0);
-    }, 10);
-  }
-
-  exitFilterMode(): void {
-    this.updateTableData(this.mappingFormGroup.value);
-    this.textSearchMode = false;
-    this.textSearch.reset();
-  }
-
-  manageMapping($event: Event, index?: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    const value = isDefinedAndNotNull(index) ? this.mappingFormGroup.at(index).value : {};
-    this.dialog.open<MappingDialogComponent, MappingInfo, ConnectorMapping>(MappingDialogComponent, {
-      disableClose: true,
-      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {
-        mappingType: this.mappingType,
-        value,
-        buttonTitle: isUndefinedOrNull(index) ?  'action.add' : 'action.apply'
-      }
-    }).afterClosed()
-      .pipe(take(1), takeUntil(this.destroy$))
-      .subscribe(res => {
-        if (res) {
-          if (isDefinedAndNotNull(index)) {
-            this.mappingFormGroup.at(index).patchValue(res);
-          } else {
-            this.pushDataAsFormArrays([res]);
-          }
-          this.mappingFormGroup.markAsDirty();
-        }
-    });
-  }
-
-  private updateTableData(value: ConnectorMapping[], textSearch?: string): void {
-    let tableValue = value.map(mappingValue => this.getMappingValue(mappingValue));
-    if (textSearch) {
-      tableValue = tableValue.filter(mappingValue =>
-        Object.values(mappingValue).some(val =>
-          val.toString().toLowerCase().includes(textSearch.toLowerCase())
-        )
-      );
-    }
-    this.dataSource.loadData(tableValue);
-  }
-
-  deleteMapping($event: Event, index: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    this.dialogService.confirm(
-      this.translate.instant('gateway.delete-mapping-title'),
-      '',
-      this.translate.instant('action.no'),
-      this.translate.instant('action.yes'),
-      true
-    ).subscribe((result) => {
-      if (result) {
-        this.mappingFormGroup.removeAt(index);
-        this.mappingFormGroup.markAsDirty();
-      }
-    });
-  }
-
-  private pushDataAsFormArrays(data: ConnectorMapping[]): void {
-    if (data?.length) {
-      data.forEach((mapping: ConnectorMapping) => this.mappingFormGroup.push(this.fb.control(mapping)));
-    }
-  }
-
-  private getMappingValue(value: ConnectorMapping): MappingValue {
-    switch (this.mappingType) {
-      case MappingType.DATA:
-        const converterType = ConvertorTypeTranslationsMap.get((value as ConverterConnectorMapping).converter?.type);
-        return {
-          topicFilter: (value as ConverterConnectorMapping).topicFilter,
-          QoS: (value as ConverterConnectorMapping).subscriptionQos,
-          converter: converterType ? this.translate.instant(converterType) : ''
-        };
-      case MappingType.REQUESTS:
-        let details: string;
-        const requestValue = value as RequestMappingValue;
-        if (requestValue.requestType === RequestType.ATTRIBUTE_UPDATE) {
-          details = (requestValue.requestValue as AttributeUpdate).attributeFilter;
-        } else if (requestValue.requestType === RequestType.SERVER_SIDE_RPC) {
-          details = (requestValue.requestValue as ServerSideRpc).methodFilter;
-        } else {
-          details = (requestValue.requestValue as ConnectRequest | DisconnectRequest).topicFilter;
-        }
-        return {
-          requestType: (value as RequestMappingValue).requestType,
-          type: this.translate.instant(RequestTypesTranslationsMap.get((value as RequestMappingValue).requestType)),
-          details
-        };
-      case MappingType.OPCUA:
-        const deviceNamePattern = (value as DeviceConnectorMapping).deviceInfo?.deviceNameExpression;
-        const deviceProfileExpression = (value as DeviceConnectorMapping).deviceInfo?.deviceProfileExpression;
-        const { deviceNodePattern } = value as DeviceConnectorMapping;
-        return {
-          deviceNodePattern,
-          deviceNamePattern,
-          deviceProfileExpression
-        };
-      default:
-        return {} as MappingValue;
-    }
-  }
-
-  private setMappingColumns(): void {
-    switch (this.mappingType) {
-      case MappingType.DATA:
-        this.mappingColumns.push(
-          { def: 'topicFilter', title: 'gateway.topic-filter' },
-          { def: 'QoS', title: 'gateway.mqtt-qos' },
-          { def: 'converter', title: 'gateway.payload-type' }
-        );
-        break;
-      case MappingType.REQUESTS:
-        this.mappingColumns.push(
-          { def: 'type', title: 'gateway.type' },
-          { def: 'details', title: 'gateway.details' }
-        );
-        break;
-      case MappingType.OPCUA:
-        this.mappingColumns.push(
-          { def: 'deviceNodePattern', title: 'gateway.device-node' },
-          { def: 'deviceNamePattern', title: 'gateway.device-name' },
-          { def: 'deviceProfileExpression', title: 'gateway.device-profile' }
-        );
-    }
-  }
-}
-
-export class MappingDatasource extends TbTableDatasource<MappingValue> {
-  constructor() {
-    super();
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.abstract.ts
deleted file mode 100644
index 66024c6a8c..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.abstract.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Directive } from '@angular/core';
-import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
-import { takeUntil } from 'rxjs/operators';
-import { isEqual } from '@core/utils';
-import { GatewayConnectorBasicConfigDirective } from '@home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract';
-import {
-  ModbusBasicConfig,
-  ModbusBasicConfig_v3_5_2,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-@Directive()
-export abstract class ModbusBasicConfigDirective<InputBasicConfig, OutputBasicConfig>
-  extends GatewayConnectorBasicConfigDirective<InputBasicConfig, OutputBasicConfig> {
-
-  enableSlaveControl: FormControl<boolean> = new FormControl(false);
-
-  constructor() {
-    super();
-
-    this.enableSlaveControl.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(enable => {
-        this.updateSlaveEnabling(enable);
-        this.basicFormGroup.get('slave').updateValueAndValidity({ emitEvent: !!this.onChange });
-      });
-  }
-
-  override writeValue(basicConfig: OutputBasicConfig & ModbusBasicConfig): void {
-    super.writeValue(basicConfig);
-    this.onEnableSlaveControl(basicConfig);
-  }
-
-  override validate(): ValidationErrors | null {
-    const { master, slave } = this.basicFormGroup.value;
-    const isEmpty = !master?.slaves?.length && (isEqual(slave, {}) || !slave);
-    if (!this.basicFormGroup.valid || isEmpty) {
-      return { basicFormGroup: { valid: false } };
-    }
-    return null;
-  }
-
-  protected override initBasicFormGroup(): FormGroup {
-    return this.fb.group({
-      master: [],
-      slave: [],
-    });
-  }
-
-  private updateSlaveEnabling(isEnabled: boolean): void {
-    if (isEnabled) {
-      this.basicFormGroup.get('slave').enable({ emitEvent: false });
-    } else {
-      this.basicFormGroup.get('slave').disable({ emitEvent: false });
-    }
-  }
-
-  private onEnableSlaveControl(basicConfig: ModbusBasicConfig): void {
-    this.enableSlaveControl.setValue(!!basicConfig.slave && !isEqual(basicConfig.slave, {}));
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
deleted file mode 100644
index 76098288b8..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-tab-group [formGroup]="basicFormGroup">
-  <mat-tab label="{{ 'gateway.general' | translate }}">
-    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.master-connections' | translate }}">
-    <tb-modbus-master-table [isLegacy]="isLegacy" formControlName="master"></tb-modbus-master-table>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.server-config' | translate }}">
-    <div class="tb-form-panel no-border no-padding padding-top">
-      <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-server' | translate }}</div>
-      <div class="tb-form-row" fxLayoutAlign="space-between center">
-        <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">
-          <mat-label>
-            {{ 'gateway.enable' | translate }}
-          </mat-label>
-        </mat-slide-toggle>
-      </div>
-    </div>
-    <tb-modbus-slave-config formControlName="slave"></tb-modbus-slave-config>
-  </mat-tab>
-</mat-tab-group>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss
deleted file mode 100644
index 3b7e7288c8..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  height: 100%;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts
deleted file mode 100644
index dceffd3f7d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  ModbusBasicConfig_v3_5_2,
-  ModbusMasterConfig,
-  ModbusSlave
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { ModbusSlaveConfigComponent } from '../modbus-slave-config/modbus-slave-config.component';
-import { ModbusMasterTableComponent } from '../modbus-master-table/modbus-master-table.component';
-import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
-import {
-  ModbusBasicConfigDirective
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.abstract';
-
-@Component({
-  selector: 'tb-modbus-basic-config',
-  templateUrl: './modbus-basic-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusBasicConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusBasicConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    ModbusSlaveConfigComponent,
-    ModbusMasterTableComponent,
-    EllipsisChipListDirective,
-  ],
-  styleUrls: ['./modbus-basic-config.component.scss'],
-})
-export class ModbusBasicConfigComponent extends ModbusBasicConfigDirective<ModbusBasicConfig_v3_5_2, ModbusBasicConfig_v3_5_2> {
-
-  isLegacy = false;
-
-  protected override mapConfigToFormValue({ master, slave }: ModbusBasicConfig_v3_5_2): ModbusBasicConfig_v3_5_2 {
-    return {
-      master: master?.slaves ? master : { slaves: [] } as ModbusMasterConfig,
-      slave: slave ?? {} as ModbusSlave,
-    };
-  }
-
-  protected override getMappedValue(value: ModbusBasicConfig_v3_5_2): ModbusBasicConfig_v3_5_2 {
-    return {
-      master: value.master,
-      slave: value.slave,
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-legacy-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-legacy-basic-config.component.ts
deleted file mode 100644
index c10214d57b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-legacy-basic-config.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  LegacySlaveConfig,
-  ModbusBasicConfig,
-  ModbusLegacyBasicConfig,
-  ModbusLegacySlave,
-  ModbusMasterConfig,
-  ModbusSlave
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { ModbusSlaveConfigComponent } from '../modbus-slave-config/modbus-slave-config.component';
-import { ModbusMasterTableComponent } from '../modbus-master-table/modbus-master-table.component';
-import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
-import { ModbusVersionMappingUtil } from '@home/components/widget/lib/gateway/utils/modbus-version-mapping.util';
-import {
-  ModbusBasicConfigDirective
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.abstract';
-
-@Component({
-  selector: 'tb-modbus-legacy-basic-config',
-  templateUrl: './modbus-basic-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusLegacyBasicConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusLegacyBasicConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    ModbusSlaveConfigComponent,
-    ModbusMasterTableComponent,
-    EllipsisChipListDirective,
-  ],
-  styleUrls: ['./modbus-basic-config.component.scss'],
-})
-export class ModbusLegacyBasicConfigComponent extends ModbusBasicConfigDirective<ModbusBasicConfig, ModbusLegacyBasicConfig> {
-
-  isLegacy = true;
-
-  protected override mapConfigToFormValue(config: ModbusLegacyBasicConfig): ModbusBasicConfig {
-    return {
-      master: config.master?.slaves ? config.master : { slaves: [] } as ModbusMasterConfig<LegacySlaveConfig>,
-      slave: config.slave ? ModbusVersionMappingUtil.mapSlaveToUpgradedVersion(config.slave as ModbusLegacySlave) : {},
-    } as ModbusBasicConfig;
-  }
-
-  protected override getMappedValue(value: ModbusBasicConfig): ModbusLegacyBasicConfig {
-    return {
-      master: value.master as ModbusMasterConfig<LegacySlaveConfig>,
-      slave: value.slave ? ModbusVersionMappingUtil.mapSlaveToDowngradedVersion(value.slave as ModbusSlave) : {} as ModbusLegacySlave,
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
deleted file mode 100644
index ee0f8d944b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
+++ /dev/null
@@ -1,269 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-modbus-keys-panel">
-  <div class="tb-form-panel no-border no-padding">
-    <div class="tb-form-panel-title">{{ panelTitle  | translate }}{{' (' + keysListFormArray.controls.length + ')'}}</div>
-    <div class="tb-form-panel no-border no-padding key-panel" *ngIf="keysListFormArray.controls.length; else noKeys">
-      <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"
-           *ngFor="let keyControl of keysListFormArray.controls; trackBy: trackByControlId; let $index = index; let last = last;">
-        <div class="tb-form-panel stroked tb-flex">
-          <ng-container [formGroup]="keyControl">
-            <mat-expansion-panel class="tb-settings" [expanded]="last">
-              <mat-expansion-panel-header fxLayout="row wrap">
-                <mat-panel-title>
-                  <div *ngIf="isMaster else tagName" class="title-container" tbTruncateWithTooltip>
-                    {{ keyControl.get('tag').value }}{{ '-' }}{{ keyControl.get('value').value }}
-                  </div>
-                  <ng-template #tagName>
-                    <div class="tb-flex">
-                      <div class="title-container tb-flex">{{ 'gateway.key' | translate }}:
-                        <span class="key-label" tbTruncateWithTooltip>{{ keyControl.get('tag').value }}</span>
-                      </div>
-                      <div class="title-container">{{ 'gateway.address' | translate }}:
-                        <span class="key-label">{{ keyControl.get('address').value }}</span>
-                      </div>
-                      <div class="title-container">{{ 'gateway.type' | translate }}:
-                        <span class="key-label">{{ keyControl.get('type').value }}</span>
-                      </div>
-                    </div>
-                  </ng-template>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
-                <div class="tb-form-hint tb-primary-fill tb-flex center align-center">
-                  {{ 'gateway.hints.modbus.data-keys' | translate }}
-                  <div matSuffix
-                       class="see-example"
-                       [tb-help-popup]="'widget/lib/gateway/modbus-functions-data-types_fn'"
-                       tb-help-popup-placement="left"
-                       [tb-help-popup-style]="{maxWidth: '970px'}">
-                  </div>
-                </div>
-                <div class="tb-form-panel stroked">
-                  <div class="tb-form-panel-title" translate>gateway.platform-side</div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.key' | translate }}" translate>
-                      gateway.key
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="tag" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.key-required') | translate"
-                                  *ngIf="keyControl.get('tag').hasError('required') &&
-                                           keyControl.get('tag').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                </div>
-                <div class="tb-form-panel stroked">
-                  <div class="tb-form-panel-title" translate>gateway.connector-side</div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width" translate>
-                      gateway.type
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select formControlName="type">
-                          <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div *ngIf="withFunctionCode" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width" translate>gateway.function-code</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select formControlName="functionCode">
-                          <mat-option
-                            *ngFor="let code of functionCodesMap.get(keyControl.get('id').value) || defaultFunctionCodes"
-                            [value]="code"
-                          >
-                            {{ ModbusFunctionCodeTranslationsMap.get(code) | translate }}
-                          </mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.objects-count' | translate }}" translate>gateway.objects-count</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input
-                          matInput
-                          type="number"
-                          min="1"
-                          max="50000"
-                          name="value"
-                          formControlName="objectsCount"
-                          placeholder="{{ 'gateway.set' | translate }}"
-                          [readonly]="!ModbusEditableDataTypes.includes(keyControl.get('type').value)"
-                        />
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.objects-count-required') | translate"
-                                  *ngIf="keyControl.get('objectsCount').hasError('required') &&
-                                           keyControl.get('objectsCount').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.address' | translate }}" translate>gateway.address</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.address-required') | translate"
-                                  *ngIf="keyControl.get('address').hasError('required') &&
-                                           keyControl.get('address').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div *ngIf="showModifiersMap.get(keyControl.get('id').value)" class="tb-form-panel stroked tb-slide-toggle">
-                    <mat-expansion-panel class="tb-settings" [expanded]="enableModifiersControlMap.get(keyControl.get('id').value).value">
-                      <mat-expansion-panel-header fxLayout="row wrap">
-                        <mat-panel-title>
-                          <mat-slide-toggle
-                            fxLayoutAlign="center"
-                            [formControl]="enableModifiersControlMap.get(keyControl.get('id').value)"
-                            class="mat-slide"
-                            (click)="$event.stopPropagation()"
-                          >
-                            <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.modifier' | translate }}">
-                              {{ 'gateway.modifier' | translate }}
-                            </mat-label>
-                          </mat-slide-toggle>
-                        </mat-panel-title>
-                      </mat-expansion-panel-header>
-                      <div class="tb-flex no-gap">
-                        <div class="tb-form-row column-xs tb-flex full-width" fxLayoutAlign="space-between center">
-                          <div class="fixed-title-width" translate>gateway.type</div>
-                          <div class="tb-flex no-gap">
-                            <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-                              <mat-select formControlName="modifierType">
-                                <mat-select-trigger>
-                                  <div class="tb-flex align-center">
-                                    <mat-icon class="tb-mat-18" [svgIcon]="ModifierTypesMap.get(keyControl.get('modifierType').value)?.icon"></mat-icon>
-                                    <span>{{ ModifierTypesMap.get(keyControl.get('modifierType').value)?.name | translate}}</span>
-                                  </div>
-                                </mat-select-trigger>
-                                <mat-option *ngFor="let modifierType of modifierTypes" [value]="modifierType">
-                                  <mat-icon class="tb-mat-20" svgIcon="{{ ModifierTypesMap.get(modifierType).icon }}">
-                                  </mat-icon>
-                                  <span>{{ ModifierTypesMap.get(modifierType).name | translate }}</span>
-                                </mat-option>
-                              </mat-select>
-                            </mat-form-field>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                        <div class="fixed-title-width" translate>gateway.value</div>
-                        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
-                          <input matInput required formControlName="modifierValue" step="0.1" type="number"
-                                 placeholder="{{ 'gateway.set' | translate }}" />
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.modifier-invalid') | translate"
-                                    *ngIf="keyControl.get('modifierValue').hasError('pattern') &&
-                                           keyControl.get('modifierValue').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                        </mat-form-field>
-                      </div>
-                    </mat-expansion-panel>
-                  </div>
-                  <div *ngIf="isMaster" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.value-required') | translate"
-                                  *ngIf="keyControl.get('value').hasError('required') &&
-                                           keyControl.get('value').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <tb-report-strategy
-                    *ngIf="withReportStrategy"
-                    formControlName="reportStrategy"
-                    [isExpansionMode]="true"
-                  />
-                </div>
-              </ng-template>
-            </mat-expansion-panel>
-          </ng-container>
-        </div>
-        <button type="button"
-                mat-icon-button
-                (click)="deleteKey($event, $index)"
-                [matTooltip]="deleteKeyTitle | translate"
-                matTooltipPosition="above">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    </div>
-    <div>
-      <button type="button" mat-stroked-button color="primary" (click)="addKey()">
-        {{ addKeyTitle | translate }}
-      </button>
-    </div>
-  </div>
-  <ng-template #noKeys>
-    <div class="tb-flex no-flex center align-center key-panel">
-      <span class="tb-prompt" translate>{{ noKeysText }}</span>
-    </div>
-  </ng-template>
-  <div class="tb-flex flex-end">
-    <button mat-button
-            color="primary"
-            type="button"
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="applyKeysData()"
-            [disabled]="keysListFormArray.invalid || !keysListFormArray.dirty">
-      {{ 'action.apply' | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts
deleted file mode 100644
index f361ae70e7..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts
+++ /dev/null
@@ -1,303 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import {
-  AbstractControl,
-  FormArray,
-  FormControl,
-  FormGroup,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  Validators
-} from '@angular/forms';
-import { TbPopoverComponent } from '@shared/components/popover.component';
-import {
-  ModbusDataType,
-  ModbusEditableDataTypes, ModbusFormValue,
-  ModbusFunctionCodeTranslationsMap,
-  ModbusObjectCountByDataType,
-  ModbusValue,
-  ModbusValueKey,
-  ModifierType,
-  ModifierTypesMap,
-  noLeadTrailSpacesRegex,
-  nonZeroFloat,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe';
-import { generateSecret } from '@core/utils';
-import { coerceBoolean } from '@shared/decorators/coercion';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-import {
-  ReportStrategyComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component';
-
-@Component({
-  selector: 'tb-modbus-data-keys-panel',
-  templateUrl: './modbus-data-keys-panel.component.html',
-  styleUrls: ['./modbus-data-keys-panel.component.scss'],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    GatewayHelpLinkPipe,
-    ReportStrategyComponent,
-  ]
-})
-export class ModbusDataKeysPanelComponent implements OnInit, OnDestroy {
-
-  @coerceBoolean()
-  @Input() isMaster = false;
-  @coerceBoolean()
-  @Input() hideNewFields = false;
-  @Input() panelTitle: string;
-  @Input() addKeyTitle: string;
-  @Input() deleteKeyTitle: string;
-  @Input() noKeysText: string;
-  @Input() keysType: ModbusValueKey;
-  @Input() values: ModbusValue[];
-  @Input() popover: TbPopoverComponent<ModbusDataKeysPanelComponent>;
-
-  @Output() keysDataApplied = new EventEmitter<Array<ModbusValue>>();
-
-  keysListFormArray: FormArray<UntypedFormGroup>;
-  modbusDataTypes = Object.values(ModbusDataType);
-  modifierTypes: ModifierType[] = Object.values(ModifierType);
-  withFunctionCode = true;
-  withReportStrategy = true;
-
-  enableModifiersControlMap = new Map<string, FormControl<boolean>>();
-  showModifiersMap = new Map<string, boolean>();
-  functionCodesMap = new Map();
-  defaultFunctionCodes = [];
-
-  readonly ModbusEditableDataTypes = ModbusEditableDataTypes;
-  readonly ModbusFunctionCodeTranslationsMap = ModbusFunctionCodeTranslationsMap;
-  readonly ModifierTypesMap = ModifierTypesMap;
-
-  private destroy$ = new Subject<void>();
-
-  private readonly defaultReadFunctionCodes = [3, 4];
-  private readonly bitsReadFunctionCodes = [1, 2];
-  private readonly defaultWriteFunctionCodes = [6, 16];
-  private readonly bitsWriteFunctionCodes = [5, 15];
-
-  constructor(private fb: UntypedFormBuilder) {}
-
-  ngOnInit(): void {
-    this.withFunctionCode = !this.isMaster || (this.keysType !== ModbusValueKey.ATTRIBUTES && this.keysType !== ModbusValueKey.TIMESERIES);
-    this.withReportStrategy = !this.isMaster
-      && (this.keysType === ModbusValueKey.ATTRIBUTES || this.keysType === ModbusValueKey.TIMESERIES)
-      && !this.hideNewFields;
-    this.keysListFormArray = this.prepareKeysFormArray(this.values);
-    this.defaultFunctionCodes = this.getDefaultFunctionCodes();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  trackByControlId(_: number, keyControl: AbstractControl): string {
-    return keyControl.value.id;
-  }
-
-  addKey(): void {
-    const id = generateSecret(5);
-    const dataKeyFormGroup = this.fb.group({
-      tag: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      value: [{value: '', disabled: !this.isMaster}, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      type: [ModbusDataType.BYTES, [Validators.required]],
-      address: [null, [Validators.required]],
-      objectsCount: [1, [Validators.required]],
-      functionCode: [{ value: this.getDefaultFunctionCodes()[0], disabled: !this.withFunctionCode }, [Validators.required]],
-      reportStrategy: [{ value: null, disabled: !this.withReportStrategy }],
-      modifierType: [{ value: ModifierType.MULTIPLIER, disabled: true }],
-      modifierValue: [{ value: 1, disabled: true }, [Validators.pattern(nonZeroFloat)]],
-      id: [{value: id, disabled: true}],
-    });
-    this.showModifiersMap.set(id, false);
-    this.enableModifiersControlMap.set(id, this.fb.control(false));
-    this.observeKeyDataType(dataKeyFormGroup);
-    this.observeEnableModifier(dataKeyFormGroup);
-
-    this.keysListFormArray.push(dataKeyFormGroup);
-  }
-
-  deleteKey($event: Event, index: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    this.keysListFormArray.removeAt(index);
-    this.keysListFormArray.markAsDirty();
-  }
-
-  cancel(): void {
-    this.popover.hide();
-  }
-
-  applyKeysData(): void {
-    this.keysDataApplied.emit(this.getFormValue());
-  }
-
-  private getFormValue(): ModbusValue[] {
-    return this.mapKeysWithModifier(
-      this.withReportStrategy
-      ? this.cleanUpEmptyStrategies(this.keysListFormArray.value)
-      : this.keysListFormArray.value
-    );
-  }
-
-  private cleanUpEmptyStrategies(values: ModbusValue[]): ModbusValue[] {
-    return values.map((key) => {
-      const { reportStrategy, ...updatedKey } = key;
-      return !reportStrategy ? updatedKey : key;
-    });
-  }
-
-  private mapKeysWithModifier(values: Array<ModbusFormValue>): Array<ModbusValue> {
-    return values.map((keyData, i) => {
-      if (this.showModifiersMap.get(this.keysListFormArray.controls[i].get('id').value)) {
-        const { modifierType, modifierValue, ...value } = keyData;
-        return modifierType ? { ...value, [modifierType]: modifierValue } : value;
-      }
-      return keyData;
-    });
-  }
-
-  private prepareKeysFormArray(values: ModbusValue[]): UntypedFormArray {
-    const keysControlGroups: Array<AbstractControl> = [];
-
-    if (values) {
-      values.forEach(value => {
-        const dataKeyFormGroup = this.createDataKeyFormGroup(value);
-        this.observeKeyDataType(dataKeyFormGroup);
-        this.observeEnableModifier(dataKeyFormGroup);
-        this.functionCodesMap.set(dataKeyFormGroup.get('id').value, this.getFunctionCodes(value.type));
-
-        keysControlGroups.push(dataKeyFormGroup);
-      });
-    }
-
-    return this.fb.array(keysControlGroups);
-  }
-
-  private createDataKeyFormGroup(modbusValue: ModbusValue): FormGroup {
-    const { tag, value, type, address, objectsCount, functionCode, multiplier, divider, reportStrategy } = modbusValue;
-    const id = generateSecret(5);
-
-    const showModifier = this.shouldShowModifier(type);
-    this.showModifiersMap.set(id, showModifier);
-    this.enableModifiersControlMap.set(id, this.fb.control((multiplier || divider) && showModifier));
-
-    return this.fb.group({
-      tag: [tag, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      value: [{ value, disabled: !this.isMaster }, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      type: [type, [Validators.required]],
-      address: [address, [Validators.required]],
-      objectsCount: [objectsCount, [Validators.required]],
-      functionCode: [{ value: functionCode, disabled: !this.withFunctionCode }, [Validators.required]],
-      modifierType: [{
-        value: divider ? ModifierType.DIVIDER : ModifierType.MULTIPLIER,
-        disabled: !this.enableModifiersControlMap.get(id).value
-      }],
-      modifierValue: [
-        { value: multiplier ?? divider ?? 1, disabled: !this.enableModifiersControlMap.get(id).value },
-        [Validators.pattern(nonZeroFloat)]
-      ],
-      id: [{ value: id, disabled: true }],
-      reportStrategy: [{ value: reportStrategy, disabled: !this.withReportStrategy }],
-    });
-  }
-
-  private shouldShowModifier(type: ModbusDataType): boolean {
-    return !this.isMaster
-      && (this.keysType === ModbusValueKey.ATTRIBUTES || this.keysType === ModbusValueKey.TIMESERIES)
-      && (!this.ModbusEditableDataTypes.includes(type));
-  }
-
-  private observeKeyDataType(keyFormGroup: FormGroup): void {
-    keyFormGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(dataType => {
-      if (!this.ModbusEditableDataTypes.includes(dataType)) {
-        keyFormGroup.get('objectsCount').patchValue(ModbusObjectCountByDataType[dataType], {emitEvent: false});
-      }
-      const withModifier = this.shouldShowModifier(dataType);
-      this.showModifiersMap.set(keyFormGroup.get('id').value, withModifier);
-      this.updateFunctionCodes(keyFormGroup, dataType);
-    });
-  }
-
-  private observeEnableModifier(keyFormGroup: FormGroup): void {
-    this.enableModifiersControlMap.get(keyFormGroup.get('id').value).valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(showModifier => this.toggleModifierControls(keyFormGroup, showModifier));
-  }
-
-  private toggleModifierControls(keyFormGroup: FormGroup, enable: boolean): void {
-    const modifierTypeControl = keyFormGroup.get('modifierType');
-    const modifierValueControl = keyFormGroup.get('modifierValue');
-
-    if (enable) {
-      modifierTypeControl.enable();
-      modifierValueControl.enable();
-    } else {
-      modifierTypeControl.disable();
-      modifierValueControl.disable();
-    }
-  }
-
-  private updateFunctionCodes(keyFormGroup: FormGroup, dataType: ModbusDataType): void {
-    const functionCodes = this.getFunctionCodes(dataType);
-    this.functionCodesMap.set(keyFormGroup.get('id').value, functionCodes);
-    if (!functionCodes.includes(keyFormGroup.get('functionCode').value)) {
-      keyFormGroup.get('functionCode').patchValue(functionCodes[0], {emitEvent: false});
-    }
-  }
-
-  private getFunctionCodes(dataType: ModbusDataType): number[] {
-    const writeFunctionCodes = [
-      ...(dataType === ModbusDataType.BITS ? this.bitsWriteFunctionCodes : []), ...this.defaultWriteFunctionCodes
-    ];
-
-    if (this.keysType === ModbusValueKey.ATTRIBUTES_UPDATES) {
-      return writeFunctionCodes.sort((a, b) => a - b);
-    }
-
-    const functionCodes = [...this.defaultReadFunctionCodes];
-    if (dataType === ModbusDataType.BITS) {
-      functionCodes.push(...this.bitsReadFunctionCodes);
-    }
-    if (this.keysType === ModbusValueKey.RPC_REQUESTS) {
-      functionCodes.push(...writeFunctionCodes);
-    }
-
-    return functionCodes.sort((a, b) => a - b);
-  }
-
-  private getDefaultFunctionCodes(): number[] {
-    if (this.keysType === ModbusValueKey.ATTRIBUTES_UPDATES) {
-      return this.defaultWriteFunctionCodes;
-    }
-    if (this.keysType === ModbusValueKey.RPC_REQUESTS) {
-      return [...this.defaultReadFunctionCodes, ...this.defaultWriteFunctionCodes];
-    }
-    return this.defaultReadFunctionCodes;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
deleted file mode 100644
index eb3fb8e3f5..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-master-table tb-absolute-fill">
-  <div class="tb-form-panel no-border no-padding padding-top">
-    <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-master' | translate }}</div>
-  </div>
-  <div fxFlex fxLayout="column" class="tb-master-table-content">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
-      <div class="mat-toolbar-tools" *ngIf="(dataSource.isEmpty() | async) === false">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
-          <span class="tb-master-table-title">{{ 'gateway.servers-slaves' | translate}}</span>
-        </div>
-        <span fxFlex></span>
-        <button mat-icon-button
-                (click)="manageSlave($event)"
-                matTooltip="{{ 'action.add' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>add</mat-icon>
-        </button>
-        <button mat-icon-button
-                (click)="enterFilterMode()"
-                matTooltip="{{ 'action.search' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>search</mat-icon>
-        </button>
-      </div>
-    </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
-      <div class="mat-toolbar-tools">
-        <button mat-icon-button
-                matTooltip="{{ 'action.search' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>search</mat-icon>
-        </button>
-        <mat-form-field fxFlex>
-          <mat-label>&nbsp;</mat-label>
-          <input #searchInput matInput
-                 [formControl]="textSearch"
-                 placeholder="{{ 'common.enter-search' | translate }}"/>
-        </mat-form-field>
-        <button mat-icon-button (click)="exitFilterMode()"
-                matTooltip="{{ 'action.close' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>close</mat-icon>
-        </button>
-      </div>
-    </mat-toolbar>
-    <div class="table-container">
-      <table mat-table [dataSource]="dataSource">
-        <ng-container [matColumnDef]="'info'">
-          <mat-header-cell *matHeaderCellDef class="table-value-column">
-            {{ 'gateway.info' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let slave" class="table-value-column">
-            <div tbTruncateWithTooltip>{{ slave['host'] ?? slave['port'] }}</div>
-          </mat-cell>
-        </ng-container>
-        <ng-container [matColumnDef]="'unitId'">
-          <mat-header-cell *matHeaderCellDef class="table-value-column">
-            {{ 'gateway.unit-id' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let slave" class="table-value-column">
-            <div tbTruncateWithTooltip>{{ slave['unitId'] }}</div>
-          </mat-cell>
-        </ng-container>
-        <ng-container [matColumnDef]="'type'">
-          <mat-header-cell *matHeaderCellDef class="table-value-column">
-            <div tbTruncateWithTooltip>{{ 'gateway.client-communication-type' | translate }}</div>
-          </mat-header-cell>
-          <mat-cell *matCellDef="let slave" class="table-value-column">
-            {{ ModbusProtocolLabelsMap.get(slave['type']) }}
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px', textAlign: 'center'}">
-          </mat-header-cell>
-          <mat-cell *matCellDef="let slave; let i = index"
-                    [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
-            <ng-template #rowActions>
-              <button mat-icon-button
-                      matTooltip="{{ 'action.edit' | translate }}"
-                      matTooltipPosition="above"
-                      (click)="manageSlave($event, i)">
-                <tb-icon>edit</tb-icon>
-              </button>
-              <button mat-icon-button
-                      matTooltip="{{ 'action.delete' | translate }}"
-                      matTooltipPosition="above"
-                      (click)="deleteSlave($event, i)">
-                <tb-icon>delete</tb-icon>
-              </button>
-            </ng-template>
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
-            </div>
-            <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation()"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
-              </mat-menu>
-            </div>
-          </mat-cell>
-        </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['info', 'unitId', 'type', 'actions']; sticky: true"></mat-header-row>
-        <mat-row *matRowDef="let slave; columns: ['info', 'unitId', 'type', 'actions']"></mat-row>
-      </table>
-      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
-               class="mat-headline-5 tb-absolute-fill tb-add-new">
-        <button mat-button class="connector"
-                (click)="manageSlave($event)">
-          <mat-icon class="tb-mat-96">add</mat-icon>
-          <span>{{ 'gateway.add-slave' | translate }}</span>
-        </button>
-      </section>
-    </div>
-    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"
-          fxLayoutAlign="center center"
-          class="no-data-found" translate>
-      widget.no-data-found
-    </span>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.scss
deleted file mode 100644
index e9a5d3ebcd..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../scss/constants';
-
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-
-  .tb-master-table {
-
-    .tb-master-table-content {
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      overflow: hidden;
-
-      .mat-toolbar-tools{
-        min-height: auto;
-      }
-
-      .title-container{
-        overflow: hidden;
-      }
-
-      .tb-master-table-title {
-        padding-right: 20px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .table-container {
-        overflow: auto;
-
-        .mat-mdc-table {
-          table-layout: fixed;
-          min-width: 450px;
-
-          .table-value-column {
-            padding: 0 12px;
-            width: 38%;
-          }
-        }
-      }
-    }
-  }
-
-  .no-data-found {
-    height: calc(100% - 120px);
-  }
-
-  @media #{$mat-xs} {
-    .mat-toolbar {
-      height: auto;
-      min-height: 100px;
-
-      .tb-master-table-title{
-        padding-bottom: 5px;
-        width: 100%;
-      }
-    }
-  }
-}
-
-:host ::ng-deep {
-  mat-cell.tb-value-cell {
-    cursor: pointer;
-
-    .mat-icon {
-      height: 24px;
-      width: 24px;
-      font-size: 24px;
-      color: #757575
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
deleted file mode 100644
index 71bbc76c75..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { DialogService } from '@core/services/dialog.service';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
-import {
-  ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-} from '@angular/forms';
-import {
-  LegacySlaveConfig,
-  ModbusMasterConfig,
-  ModbusProtocolLabelsMap,
-  ModbusSlaveInfo,
-  ModbusValues,
-  SlaveConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { isDefinedAndNotNull } from '@core/utils';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { ModbusSlaveDialogComponent } from '../modbus-slave-dialog/modbus-slave-dialog.component';
-import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract';
-import { coerceBoolean } from '@shared/decorators/coercion';
-import {
-  ModbusLegacySlaveDialogComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-legacy-slave-dialog.component';
-
-@Component({
-  selector: 'tb-modbus-master-table',
-  templateUrl: './modbus-master-table.component.html',
-  styleUrls: ['./modbus-master-table.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusMasterTableComponent),
-      multi: true
-    },
-  ],
-  standalone: true,
-  imports: [CommonModule, SharedModule]
-})
-export class ModbusMasterTableComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy {
-
-  @ViewChild('searchInput') searchInputField: ElementRef;
-
-  @coerceBoolean()
-  @Input() isLegacy = false;
-
-  textSearchMode = false;
-  dataSource: SlavesDatasource;
-  masterFormGroup: UntypedFormGroup;
-  textSearch = this.fb.control('', {nonNullable: true});
-
-  readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
-
-  private onChange: (value: ModbusMasterConfig) => void = () => {};
-  private onTouched: () => void  = () => {};
-
-  private destroy$ = new Subject<void>();
-
-  constructor(
-    public translate: TranslateService,
-    public dialog: MatDialog,
-    private dialogService: DialogService,
-    private fb: FormBuilder,
-    private cdr: ChangeDetectorRef,
-  ) {
-    this.masterFormGroup =  this.fb.group({ slaves: this.fb.array([]) });
-    this.dataSource = new SlavesDatasource();
-  }
-
-  get slaves(): FormArray {
-    return this.masterFormGroup.get('slaves') as FormArray;
-  }
-
-  ngOnInit(): void {
-    this.masterFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.updateTableData(value.slaves);
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  ngAfterViewInit(): void {
-    this.textSearch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged((prev, current) => (prev ?? '') === current.trim()),
-      takeUntil(this.destroy$)
-    ).subscribe(text => this.updateTableData(this.slaves.value, text.trim()));
-  }
-
-  registerOnChange(fn: (value: ModbusMasterConfig) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(master: ModbusMasterConfig): void {
-    this.slaves.clear();
-    this.pushDataAsFormArrays(master.slaves);
-  }
-
-  enterFilterMode(): void {
-    this.textSearchMode = true;
-    this.cdr.detectChanges();
-    const searchInput = this.searchInputField.nativeElement;
-    searchInput.focus();
-    searchInput.setSelectionRange(0, 0);
-  }
-
-  exitFilterMode(): void {
-    this.updateTableData(this.slaves.value);
-    this.textSearchMode = false;
-    this.textSearch.reset();
-  }
-
-  manageSlave($event: Event, index?: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    const withIndex = isDefinedAndNotNull(index);
-    const value = withIndex ? this.slaves.at(index).value : {};
-    this.getSlaveDialog(value, withIndex ? 'action.apply' : 'action.add').afterClosed()
-      .pipe(take(1), takeUntil(this.destroy$))
-      .subscribe(res => {
-        if (res) {
-          if (withIndex) {
-            this.slaves.at(index).patchValue(res);
-          } else {
-            this.slaves.push(this.fb.control(res));
-          }
-          this.masterFormGroup.markAsDirty();
-        }
-    });
-  }
-
-  private getSlaveDialog(
-    value: LegacySlaveConfig | SlaveConfig,
-    buttonTitle: string
-  ): MatDialogRef<ModbusLegacySlaveDialogComponent | ModbusSlaveDialogComponent> {
-    if (this.isLegacy) {
-      return this.dialog.open<ModbusLegacySlaveDialogComponent, ModbusSlaveInfo<LegacySlaveConfig>, ModbusValues>
-      (ModbusLegacySlaveDialogComponent, {
-        disableClose: true,
-        panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-        data: {
-          value: value as LegacySlaveConfig,
-          hideNewFields: true,
-          buttonTitle
-        }
-      });
-    }
-    return this.dialog.open<ModbusSlaveDialogComponent, ModbusSlaveInfo, ModbusValues>(ModbusSlaveDialogComponent, {
-      disableClose: true,
-      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {
-        value: value as SlaveConfig,
-        buttonTitle,
-        hideNewFields: false,
-      }
-    });
-  }
-
-  deleteSlave($event: Event, index: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    this.dialogService.confirm(
-      this.translate.instant('gateway.delete-slave-title'),
-      '',
-      this.translate.instant('action.no'),
-      this.translate.instant('action.yes'),
-      true
-    ).pipe(take(1), takeUntil(this.destroy$)).subscribe((result) => {
-      if (result) {
-        this.slaves.removeAt(index);
-        this.masterFormGroup.markAsDirty();
-      }
-    });
-  }
-
-  private updateTableData(data: SlaveConfig[], textSearch?: string): void {
-    if (textSearch) {
-      data = data.filter(item =>
-        Object.values(item).some(value =>
-          value.toString().toLowerCase().includes(textSearch.toLowerCase())
-        )
-      );
-    }
-    this.dataSource.loadData(data);
-  }
-
-  private pushDataAsFormArrays(slaves: SlaveConfig[]): void {
-    if (slaves?.length) {
-      slaves.forEach((slave: SlaveConfig) => this.slaves.push(this.fb.control(slave)));
-    }
-  }
-}
-
-export class SlavesDatasource extends TbTableDatasource<SlaveConfig> {
-  constructor() {
-    super();
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
deleted file mode 100644
index 3fc3e33ad0..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-panel no-border no-padding" [formGroup]="securityConfigFormGroup">
-  <div class="tb-form-hint tb-primary-fill">{{ 'gateway.hints.path-in-os' | translate }}</div>
-  <div class="tb-form-row space-between tb-flex fill-width">
-    <div class="fixed-title-width" tbTruncateWithTooltip tb-hint-tooltip-icon="{{ 'gateway.hints.ca-cert' | translate }}">
-      <span tbTruncateWithTooltip translate>gateway.client-cert-path</span>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="certfile" placeholder="{{ 'gateway.set' | translate }}"/>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row space-between tb-flex fill-width">
-    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.private-key-path' | translate }}">
-      <span tbTruncateWithTooltip translate>gateway.private-key-path</span>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="keyfile" placeholder="{{ 'gateway.set' | translate }}"/>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row space-between tb-flex fill-width">
-    <div class="fixed-title-width" translate>gateway.password</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="password" name="value" formControlName="password" placeholder="{{ 'gateway.set' | translate }}"/>
-        <div class="tb-flex no-gap align-center fill-height" matSuffix>
-          <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>
-        </div>
-      </mat-form-field>
-    </div>
-  </div>
-  <div *ngIf="!isMaster" class="tb-form-row space-between tb-flex fill-width">
-    <div class="fixed-title-width" translate>gateway.server-hostname</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="server_hostname" placeholder="{{ 'gateway.set' | translate }}"/>
-      </mat-form-field>
-    </div>
-  </div>
-  <div *ngIf="isMaster" class="tb-form-row" fxLayoutAlign="space-between center">
-    <mat-slide-toggle class="mat-slide" formControlName="reqclicert">
-      <mat-label>
-        {{ 'gateway.request-client-certificate' | translate }}
-      </mat-label>
-    </mat-slide-toggle>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
deleted file mode 100644
index bc40727b55..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Input,
-  OnChanges,
-  OnDestroy
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import {
-  ModbusSecurity,
-  noLeadTrailSpacesRegex,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { coerceBoolean } from '@shared/decorators/coercion';
-
-@Component({
-  selector: 'tb-modbus-security-config',
-  templateUrl: './modbus-security-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusSecurityConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusSecurityConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ]
-})
-export class ModbusSecurityConfigComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
-
-  @coerceBoolean()
-  @Input() isMaster = false;
-
-  securityConfigFormGroup: UntypedFormGroup;
-
-  private disabled = false;
-
-  private onChange: (value: ModbusSecurity) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {
-    this.securityConfigFormGroup = this.fb.group({
-      certfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      keyfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      server_hostname: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      reqclicert: [{value: false, disabled: true}],
-    });
-
-    this.observeValueChanges();
-  }
-
-  ngOnChanges(): void {
-    this.updateMasterEnabling();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: ModbusSecurity) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    if (this.disabled) {
-      this.securityConfigFormGroup.disable({emitEvent: false});
-    } else {
-      this.securityConfigFormGroup.enable({emitEvent: false});
-    }
-    this.updateMasterEnabling();
-    this.cdr.markForCheck();
-  }
-
-  validate(): ValidationErrors | null {
-    return this.securityConfigFormGroup.valid ? null : {
-      securityConfigFormGroup: { valid: false }
-    };
-  }
-
-  writeValue(securityConfig: ModbusSecurity): void {
-    const { certfile, password, keyfile, server_hostname } = securityConfig;
-    const securityState = {
-      certfile: certfile ?? '',
-      password: password ?? '',
-      keyfile: keyfile ?? '',
-      server_hostname: server_hostname ?? '',
-      reqclicert: !!securityConfig.reqclicert,
-    };
-
-    this.securityConfigFormGroup.reset(securityState, {emitEvent: false});
-  }
-
-  private updateMasterEnabling(): void {
-    if (this.isMaster) {
-      if (!this.disabled) {
-        this.securityConfigFormGroup.get('reqclicert').enable({emitEvent: false});
-      }
-      this.securityConfigFormGroup.get('server_hostname').disable({emitEvent: false});
-    } else {
-      if (!this.disabled) {
-        this.securityConfigFormGroup.get('server_hostname').enable({emitEvent: false});
-      }
-      this.securityConfigFormGroup.get('reqclicert').disable({emitEvent: false});
-    }
-  }
-
-  private observeValueChanges(): void {
-    this.securityConfigFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value: ModbusSecurity) => {
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
deleted file mode 100644
index 134a9baf0a..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
+++ /dev/null
@@ -1,274 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div [formGroup]="slaveConfigFormGroup" class="slave-container">
-  <div class="slave-content tb-form-panel no-border no-padding padding-top" >
-    <div class="tb-flex row space-between align-center no-gap fill-width">
-      <div class="fixed-title-width" translate>gateway.server-slave-config</div>
-      <tb-toggle-select formControlName="type" appearance="fill">
-        <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>
-      </tb-toggle-select>
-    </div>
-    <div class="tb-form-panel no-border no-padding padding-top">
-      <div *ngIf="protocolType !== ModbusProtocolType.Serial"
-           class="tb-form-row column-xs"
-           fxLayoutAlign="space-between center"
-      >
-        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.host' | translate }}" translate>gateway.host</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="('gateway.host-required') | translate"
-                      *ngIf="slaveConfigFormGroup.get('host').hasError('required')
-                                             && slaveConfigFormGroup.get('host').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
-          </mat-form-field>
-        </div>
-      </div>
-      <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"
-           class="tb-form-row column-xs"
-           fxLayoutAlign="space-between center"
-      >
-        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.port' | translate }}" translate>gateway.port</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
-                   name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="slaveConfigFormGroup.get('port') | getGatewayPortTooltip"
-                      *ngIf="(slaveConfigFormGroup.get('port').hasError('required') ||
-                                              slaveConfigFormGroup.get('port').hasError('min') ||
-                                              slaveConfigFormGroup.get('port').hasError('max')) &&
-                                              slaveConfigFormGroup.get('port').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
-          </mat-form-field>
-        </div>
-      </div>
-      <ng-template #serialPort>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.serial-port' | translate }}" translate>gateway.port</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="'gateway.port-required' | translate"
-                        *ngIf="slaveConfigFormGroup.get('port').hasError('required') && slaveConfigFormGroup.get('port').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-      </ng-template>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.framer-type' | translate }}" translate>
-          gateway.method
-        </div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="method">
-              <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"
-                          [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </div>
-    </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.unit-id' | translate }}" translate>gateway.unit-id</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="('gateway.unit-id-required') | translate"
-                    *ngIf="slaveConfigFormGroup.get('unitId').hasError('required') &&
-                                             slaveConfigFormGroup.get('unitId').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" translate>gateway.device-name</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput name="value" formControlName="deviceName" placeholder="{{ 'gateway.set' | translate }}"/>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="('gateway.device-name-required') | translate"
-                    *ngIf="slaveConfigFormGroup.get('deviceName').hasError('required') &&
-                                             slaveConfigFormGroup.get('deviceName').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput name="value" formControlName="deviceType" placeholder="{{ 'gateway.set' | translate }}"/>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="('gateway.device-profile-required') | translate"
-                    *ngIf="slaveConfigFormGroup.get('deviceType').hasError('required') &&
-                                             slaveConfigFormGroup.get('deviceType').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
-        <span tbTruncateWithTooltip translate>
-          gateway.poll-period
-        </span>
-      </div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
-        </mat-form-field>
-      </div>
-    </div>
-    <div *ngIf="protocolType === ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.baudrate' | translate }}" translate>gateway.baudrate</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <mat-select formControlName="baudrate">
-            <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="tb-form-row" fxLayoutAlign="space-between center">
-      <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">
-        <mat-label>
-          {{ 'gateway.send-data-TB' | translate }}
-        </mat-label>
-      </mat-slide-toggle>
-    </div>
-    <div class="tb-form-panel stroked">
-      <mat-expansion-panel class="tb-settings">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
-          </mat-panel-title>
-        </mat-expansion-panel-header>
-        <div class="tb-form-panel no-border no-padding padding-top">
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.byte-order' | translate }}" translate>gateway.byte-order</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="byteOrder">
-                  <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.word-order' | translate }}" translate>gateway.word-order</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="wordOrder">
-                  <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-          <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">
-            <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">
-              <mat-expansion-panel-header fxLayout="row wrap">
-                <mat-panel-title>
-                  <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
-                    <mat-label>
-                      {{ 'gateway.tls-connection' | translate }}
-                    </mat-label>
-                  </mat-slide-toggle>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>
-            </mat-expansion-panel>
-          </div>
-          <ng-container [formGroup]="slaveConfigFormGroup.get('identity')">
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.vendor-name</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="vendorName" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
-              </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.product-code</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="productCode" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
-              </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.vendor-url</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="vendorUrl" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
-              </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.product-name</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="productName" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
-              </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.model-name</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="modelName" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
-              </div>
-            </div>
-          </ng-container>
-        </div>
-      </mat-expansion-panel>
-    </div>
-    <div class="tb-form-panel stroked">
-      <div class="tb-form-panel-title" translate>gateway.values</div>
-      <tb-modbus-values formControlName="values"></tb-modbus-values>
-    </div>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
deleted file mode 100644
index f4dfa57f96..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
+++ /dev/null
@@ -1,283 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, forwardRef, OnDestroy } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators,
-} from '@angular/forms';
-import {
-  ModbusBaudrates,
-  ModbusMethodLabelsMap,
-  ModbusMethodType,
-  ModbusOrderType,
-  ModbusProtocolLabelsMap,
-  ModbusProtocolType,
-  ModbusRegisterValues,
-  ModbusSerialMethodType,
-  ModbusSlave,
-  noLeadTrailSpacesRegex,
-  PortLimits,
-  SlaveConfig,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
-import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
-import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component';
-import { isEqual } from '@core/utils';
-
-@Component({
-  selector: 'tb-modbus-slave-config',
-  templateUrl: './modbus-slave-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusSlaveConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusSlaveConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    ModbusValuesComponent,
-    ModbusSecurityConfigComponent,
-    GatewayPortTooltipPipe,
-  ],
-})
-export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
-
-  slaveConfigFormGroup: UntypedFormGroup;
-  showSecurityControl: FormControl<boolean>;
-  ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
-  ModbusMethodLabelsMap = ModbusMethodLabelsMap;
-  portLimits = PortLimits;
-
-  readonly modbusProtocolTypes = Object.values(ModbusProtocolType);
-  readonly modbusMethodTypes = Object.values(ModbusMethodType);
-  readonly modbusSerialMethodTypes = Object.values(ModbusSerialMethodType);
-  readonly modbusOrderType = Object.values(ModbusOrderType);
-  readonly ModbusProtocolType = ModbusProtocolType;
-  readonly modbusBaudrates = ModbusBaudrates;
-
-  private isSlaveEnabled = false;
-  private readonly serialSpecificControlKeys = ['serialPort', 'baudrate'];
-  private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host'];
-
-  private onChange: (value: SlaveConfig) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.showSecurityControl = this.fb.control(false);
-    this.slaveConfigFormGroup = this.fb.group({
-      type: [ModbusProtocolType.TCP],
-      host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      port: [null, [Validators.required, Validators.min(PortLimits.MIN), Validators.max(PortLimits.MAX)]],
-      serialPort: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      method: [ModbusMethodType.SOCKET],
-      unitId: [null, [Validators.required]],
-      baudrate: [this.modbusBaudrates[0]],
-      deviceName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      deviceType: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      pollPeriod: [5000, [Validators.required]],
-      sendDataToThingsBoard: [false],
-      byteOrder:[ModbusOrderType.BIG],
-      wordOrder: [ModbusOrderType.BIG],
-      security: [],
-      identity: this.fb.group({
-        vendorName: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        productCode: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        vendorUrl: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        productName: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        modelName: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      }),
-      values: [],
-    });
-
-    this.observeValueChanges();
-    this.observeTypeChange();
-    this.observeShowSecurity();
-  }
-
-  get protocolType(): ModbusProtocolType {
-    return this.slaveConfigFormGroup.get('type').value;
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: SlaveConfig) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  validate(): ValidationErrors | null {
-    return this.slaveConfigFormGroup.valid ? null : {
-      slaveConfigFormGroup: { valid: false }
-    };
-  }
-
-  writeValue(slaveConfig: ModbusSlave): void {
-    this.showSecurityControl.patchValue(!!slaveConfig.security && !isEqual(slaveConfig.security, {}));
-    this.updateSlaveConfig(slaveConfig);
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.isSlaveEnabled = !isDisabled;
-    this.updateFormEnableState();
-  }
-
-  private observeValueChanges(): void {
-    this.slaveConfigFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value: SlaveConfig) => {
-      if (value.type === ModbusProtocolType.Serial) {
-        value.port = value.serialPort;
-        delete value.serialPort;
-      }
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  private observeTypeChange(): void {
-    this.slaveConfigFormGroup.get('type').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(type => {
-        this.updateFormEnableState();
-        this.updateMethodType(type);
-      });
-  }
-
-  private updateMethodType(type: ModbusProtocolType): void {
-    if (this.slaveConfigFormGroup.get('method').value !== ModbusMethodType.RTU) {
-      this.slaveConfigFormGroup.get('method').patchValue(
-        type === ModbusProtocolType.Serial
-          ? ModbusSerialMethodType.ASCII
-          : ModbusMethodType.SOCKET,
-        {emitEvent: false}
-      );
-    }
-  }
-
-  private updateFormEnableState(): void {
-    if (this.isSlaveEnabled) {
-      this.slaveConfigFormGroup.enable({emitEvent: false});
-      this.showSecurityControl.enable({emitEvent: false});
-    } else {
-      this.slaveConfigFormGroup.disable({emitEvent: false});
-      this.showSecurityControl.disable({emitEvent: false});
-    }
-    this.updateEnablingByProtocol();
-    this.updateSecurityEnable(this.showSecurityControl.value);
-  }
-
-  private observeShowSecurity(): void {
-    this.showSecurityControl.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(value => this.updateSecurityEnable(value));
-  }
-
-  private updateSecurityEnable(securityEnabled: boolean): void {
-    if (securityEnabled && this.isSlaveEnabled && this.protocolType !== ModbusProtocolType.Serial) {
-      this.slaveConfigFormGroup.get('security').enable({emitEvent: false});
-    } else {
-      this.slaveConfigFormGroup.get('security').disable({emitEvent: false});
-    }
-  }
-
-  private updateEnablingByProtocol(): void {
-    const isSerial = this.protocolType === ModbusProtocolType.Serial;
-    const enableKeys = isSerial ? this.serialSpecificControlKeys : this.tcpUdpSpecificControlKeys;
-    const disableKeys = isSerial ? this.tcpUdpSpecificControlKeys : this.serialSpecificControlKeys;
-
-    if (this.isSlaveEnabled) {
-      enableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({ emitEvent: false }));
-    }
-
-    disableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({ emitEvent: false }));
-  }
-
-  private updateSlaveConfig(slaveConfig: ModbusSlave): void {
-    const {
-      type = ModbusProtocolType.TCP,
-      method = ModbusMethodType.RTU,
-      unitId = 0,
-      deviceName = '',
-      deviceType = '',
-      pollPeriod = 5000,
-      sendDataToThingsBoard = false,
-      byteOrder = ModbusOrderType.BIG,
-      wordOrder = ModbusOrderType.BIG,
-      security = {},
-      identity = {
-        vendorName: '',
-        productCode: '',
-        vendorUrl: '',
-        productName: '',
-        modelName: '',
-      },
-      values = {} as ModbusRegisterValues,
-      baudrate = this.modbusBaudrates[0],
-      host = '',
-      port = null,
-    } = slaveConfig;
-
-    const slaveState: ModbusSlave = {
-      type,
-      method,
-      unitId,
-      deviceName,
-      deviceType,
-      pollPeriod,
-      sendDataToThingsBoard: !!sendDataToThingsBoard,
-      byteOrder,
-      wordOrder,
-      security,
-      identity,
-      values,
-      baudrate,
-      host: type === ModbusProtocolType.Serial ? '' : host,
-      port: type === ModbusProtocolType.Serial ? null : port,
-      serialPort: (type === ModbusProtocolType.Serial ? port : '') as string,
-    };
-
-    this.slaveConfigFormGroup.setValue(slaveState, { emitEvent: false });
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-legacy-slave-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-legacy-slave-dialog.component.ts
deleted file mode 100644
index 137ef385ab..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-legacy-slave-dialog.component.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
-  FormBuilder,
-} from '@angular/forms';
-import {
-  LegacySlaveConfig,
-  ModbusProtocolType,
-  ModbusSlaveInfo,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { ModbusValuesComponent } from '../modbus-values/modbus-values.component';
-import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
-import {
-  ReportStrategyComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component';
-import {
-  ModbusSlaveDialogAbstract
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.abstract';
-
-@Component({
-  selector: 'tb-modbus-legacy-slave-dialog',
-  templateUrl: './modbus-slave-dialog.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    ModbusValuesComponent,
-    ModbusSecurityConfigComponent,
-    GatewayPortTooltipPipe,
-    ReportStrategyComponent,
-  ],
-  styleUrls: ['./modbus-slave-dialog.component.scss'],
-})
-export class ModbusLegacySlaveDialogComponent extends ModbusSlaveDialogAbstract<ModbusLegacySlaveDialogComponent, LegacySlaveConfig> {
-
-  constructor(
-    protected fb: FormBuilder,
-    protected store: Store<AppState>,
-    protected router: Router,
-    @Inject(MAT_DIALOG_DATA) public data: ModbusSlaveInfo,
-    public dialogRef: MatDialogRef<ModbusLegacySlaveDialogComponent, LegacySlaveConfig>,
-  ) {
-    super(fb, store, router, data, dialogRef);
-  }
-
-  protected override getSlaveResultData(): LegacySlaveConfig {
-    const { values, type, serialPort, ...rest } = this.slaveConfigFormGroup.value;
-    const slaveResult = { ...rest, type, ...values };
-
-    if (type === ModbusProtocolType.Serial) {
-      slaveResult.port = serialPort;
-    }
-
-    return slaveResult;
-  }
-
-
-  protected override addFieldsToFormGroup(): void {
-    this.slaveConfigFormGroup.addControl('sendDataOnlyOnChange', this.fb.control(false));
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.abstract.ts
deleted file mode 100644
index ff2b642621..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.abstract.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Directive, Inject, OnDestroy } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  UntypedFormGroup,
-  Validators,
-} from '@angular/forms';
-import {
-  ModbusBaudrates,
-  ModbusByteSizes,
-  ModbusMethodLabelsMap,
-  ModbusMethodType,
-  ModbusOrderType,
-  ModbusParity,
-  ModbusParityLabelsMap,
-  ModbusProtocolLabelsMap,
-  ModbusProtocolType,
-  ModbusSerialMethodType,
-  ModbusSlaveInfo,
-  noLeadTrailSpacesRegex,
-  PortLimits,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { Subject } from 'rxjs';
-import { DialogComponent } from '@shared/components/dialog.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { takeUntil } from 'rxjs/operators';
-import { isEqual } from '@core/utils';
-import { helpBaseUrl } from '@shared/models/constants';
-
-@Directive()
-export abstract class ModbusSlaveDialogAbstract<Component, Config> extends DialogComponent<Component, Config> implements OnDestroy {
-
-  slaveConfigFormGroup: UntypedFormGroup;
-  showSecurityControl: FormControl<boolean>;
-  portLimits = PortLimits;
-
-  readonly modbusProtocolTypes = Object.values(ModbusProtocolType);
-  readonly modbusMethodTypes = Object.values(ModbusMethodType);
-  readonly modbusSerialMethodTypes = Object.values(ModbusSerialMethodType);
-  readonly modbusParities = Object.values(ModbusParity);
-  readonly modbusByteSizes = ModbusByteSizes;
-  readonly modbusBaudrates = ModbusBaudrates;
-  readonly modbusOrderType = Object.values(ModbusOrderType);
-  readonly ModbusProtocolType = ModbusProtocolType;
-  readonly ModbusParityLabelsMap = ModbusParityLabelsMap;
-  readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
-  readonly ModbusMethodLabelsMap = ModbusMethodLabelsMap;
-  readonly modbusHelpLink =
-    helpBaseUrl + '/docs/iot-gateway/config/modbus/#section-master-description-and-configuration-parameters';
-
-  private readonly serialSpecificControlKeys = ['serialPort', 'baudrate', 'stopbits', 'bytesize', 'parity', 'strict'];
-  private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host'];
-
-  private destroy$ = new Subject<void>();
-
-  constructor(
-    protected fb: FormBuilder,
-    protected store: Store<AppState>,
-    protected router: Router,
-    @Inject(MAT_DIALOG_DATA) public data: ModbusSlaveInfo,
-    public dialogRef: MatDialogRef<Component, Config>,
-  ) {
-    super(store, router, dialogRef);
-
-    this.showSecurityControl = this.fb.control(false);
-    this.initializeSlaveFormGroup();
-    this.updateSlaveFormGroup();
-    this.updateControlsEnabling(this.data.value.type);
-    this.observeTypeChange();
-    this.observeShowSecurity();
-    this.showSecurityControl.patchValue(!!this.data.value.security && !isEqual(this.data.value.security, {}));
-  }
-
-  get protocolType(): ModbusProtocolType {
-    return this.slaveConfigFormGroup.get('type').value;
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  cancel(): void {
-    this.dialogRef.close(null);
-  }
-
-  add(): void {
-    if (!this.slaveConfigFormGroup.valid) {
-      return;
-    }
-
-    this.dialogRef.close(this.getSlaveResultData());
-  }
-
-  private initializeSlaveFormGroup(): void {
-    this.slaveConfigFormGroup = this.fb.group({
-      type: [ModbusProtocolType.TCP],
-      host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      port: [null, [Validators.required, Validators.min(PortLimits.MIN), Validators.max(PortLimits.MAX)]],
-      serialPort: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      method: [ModbusMethodType.SOCKET, [Validators.required]],
-      baudrate: [this.modbusBaudrates[0]],
-      stopbits: [1],
-      bytesize: [ModbusByteSizes[0]],
-      parity: [ModbusParity.None],
-      strict: [true],
-      unitId: [null, [Validators.required]],
-      deviceName: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      deviceType: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      timeout: [35],
-      byteOrder: [ModbusOrderType.BIG],
-      wordOrder: [ModbusOrderType.BIG],
-      retries: [true],
-      retryOnEmpty: [true],
-      retryOnInvalid: [true],
-      pollPeriod: [5000, [Validators.required]],
-      connectAttemptTimeMs: [5000, [Validators.required]],
-      connectAttemptCount: [5, [Validators.required]],
-      waitAfterFailedAttemptsMs: [300000, [Validators.required]],
-      values: [{}],
-      security: [{}],
-    });
-    this.addFieldsToFormGroup();
-  }
-
-  private updateSlaveFormGroup(): void {
-    this.slaveConfigFormGroup.patchValue({
-      ...this.data.value,
-      port: this.data.value.type === ModbusProtocolType.Serial ? null : this.data.value.port,
-      serialPort: this.data.value.type === ModbusProtocolType.Serial ? this.data.value.port : '',
-      values: {
-        attributes: this.data.value.attributes ?? [],
-        timeseries: this.data.value.timeseries ?? [],
-        attributeUpdates: this.data.value.attributeUpdates ?? [],
-        rpc: this.data.value.rpc ?? [],
-      }
-    });
-  }
-
-  private observeTypeChange(): void {
-    this.slaveConfigFormGroup.get('type').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(type => {
-        this.updateControlsEnabling(type);
-        this.updateMethodType(type);
-      });
-  }
-
-  private updateMethodType(type: ModbusProtocolType): void {
-    if (this.slaveConfigFormGroup.get('method').value !== ModbusMethodType.RTU) {
-      this.slaveConfigFormGroup.get('method').patchValue(
-        type === ModbusProtocolType.Serial
-          ? ModbusSerialMethodType.ASCII
-          : ModbusMethodType.SOCKET,
-        {emitEvent: false}
-      );
-    }
-  }
-
-  private updateControlsEnabling(type: ModbusProtocolType): void {
-    const [enableKeys, disableKeys] = type === ModbusProtocolType.Serial
-      ? [this.serialSpecificControlKeys, this.tcpUdpSpecificControlKeys]
-      : [this.tcpUdpSpecificControlKeys, this.serialSpecificControlKeys];
-
-    enableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({ emitEvent: false }));
-    disableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.disable({ emitEvent: false }));
-
-    this.updateSecurityEnabling(this.showSecurityControl.value);
-  }
-
-  private observeShowSecurity(): void {
-    this.showSecurityControl.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(value => this.updateSecurityEnabling(value));
-  }
-
-  private updateSecurityEnabling(isEnabled: boolean): void {
-    if (isEnabled && this.protocolType !== ModbusProtocolType.Serial) {
-      this.slaveConfigFormGroup.get('security').enable({emitEvent: false});
-    } else {
-      this.slaveConfigFormGroup.get('security').disable({emitEvent: false});
-    }
-  }
-
-  protected abstract addFieldsToFormGroup(): void;
-  protected abstract getSlaveResultData(): Config;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
deleted file mode 100644
index bb7e90f280..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
+++ /dev/null
@@ -1,352 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="slaves-config-container">
-  <mat-toolbar color="primary">
-    <h2>{{ 'gateway.server-slave' | translate }}</h2>
-    <span fxFlex></span>
-    <div [tb-help]="modbusHelpLink"></div>
-    <button mat-icon-button
-            (click)="cancel()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">
-    <div class="stroked tb-form-panel">
-      <div class="tb-form-panel no-border no-padding padding-top">
-        <div class="tb-flex row space-between align-center no-gap fill-width">
-          <div class="fixed-title-width" translate>gateway.server-connection</div>
-          <tb-toggle-select formControlName="type" appearance="fill">
-            <tb-toggle-option *ngFor="let type of modbusProtocolTypes" [value]="type">{{ ModbusProtocolLabelsMap.get(type) }}</tb-toggle-option>
-          </tb-toggle-select>
-        </div>
-        <div class="tb-form-panel no-border no-padding padding-top">
-          <div *ngIf="protocolType !== ModbusProtocolType.Serial"
-               class="tb-form-row column-xs"
-               fxLayoutAlign="space-between center"
-          >
-            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.host' | translate }}" translate>gateway.host</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="('gateway.host-required') | translate"
-                          *ngIf="slaveConfigFormGroup.get('host').hasError('required')
-                                           && slaveConfigFormGroup.get('host').touched"
-                          class="tb-error">
-                  warning
-                </mat-icon>
-              </mat-form-field>
-            </div>
-          </div>
-          <div *ngIf="protocolType !== ModbusProtocolType.Serial else serialPort"
-               class="tb-form-row column-xs"
-               fxLayoutAlign="space-between center"
-          >
-            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.port' | translate }}" translate>gateway.port</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
-                       name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="slaveConfigFormGroup.get('port') | getGatewayPortTooltip"
-                          *ngIf="(slaveConfigFormGroup.get('port').hasError('required') ||
-                                            slaveConfigFormGroup.get('port').hasError('min') ||
-                                            slaveConfigFormGroup.get('port').hasError('max')) &&
-                                            slaveConfigFormGroup.get('port').touched"
-                          class="tb-error">
-                  warning
-                </mat-icon>
-              </mat-form-field>
-            </div>
-          </div>
-          <ng-template #serialPort>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.serial-port' | translate }}" translate>gateway.port</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
-                  <mat-icon matSuffix
-                            matTooltipPosition="above"
-                            matTooltipClass="tb-error-tooltip"
-                            [matTooltip]="'gateway.port-required' | translate"
-                            *ngIf="slaveConfigFormGroup.get('serialPort').hasError('required') &&
-                                            slaveConfigFormGroup.get('serialPort').touched"
-                            class="tb-error">
-                    warning
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-            </div>
-          </ng-template>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.framer-type' | translate }}" translate>
-              gateway.method
-            </div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="method">
-                  <mat-option *ngFor="let method of protocolType === ModbusProtocolType.Serial ? modbusSerialMethodTypes : modbusMethodTypes"
-                              [value]="method">{{ ModbusMethodLabelsMap.get(method) }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-        </div>
-        <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.baudrate' | translate }}" translate>gateway.baudrate</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="baudrate">
-                  <mat-option *ngFor="let rate of modbusBaudrates" [value]="rate">{{ rate }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.bytesize' | translate }}" translate>gateway.bytesize</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="bytesize">
-                  <mat-option *ngFor="let size of modbusByteSizes" [value]="size">{{ size }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.stopbits' | translate }}"  translate>gateway.stopbits</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ 'gateway.set' | translate }}"/>
-              </mat-form-field>
-            </div>
-          </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.parity' | translate }}" translate>gateway.parity</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="parity">
-                  <mat-option *ngFor="let parity of modbusParities" [value]="parity">{{ ModbusParityLabelsMap.get(parity) }}</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-          <div class="tb-form-row" fxLayoutAlign="space-between center">
-            <mat-slide-toggle class="mat-slide" formControlName="strict">
-              <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.strict' | translate }}">
-                {{ 'gateway.strict' | translate }}
-              </mat-label>
-            </mat-slide-toggle>
-          </div>
-        </ng-container>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.unit-id' | translate }}" translate>gateway.unit-id</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="('gateway.unit-id-required') | translate"
-                        *ngIf="slaveConfigFormGroup.get('unitId').hasError('required') &&
-                                           slaveConfigFormGroup.get('unitId').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-          <div class="fixed-title-width tb-required" translate>gateway.device-name</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput name="value" formControlName="deviceName" placeholder="{{ 'gateway.set' | translate }}"/>
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="('gateway.device-name-required') | translate"
-                        *ngIf="slaveConfigFormGroup.get('deviceName').hasError('required') &&
-                                           slaveConfigFormGroup.get('deviceName').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-        <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-          <div class="fixed-title-width tb-required" translate>gateway.device-profile</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput name="value" formControlName="deviceType" placeholder="{{ 'gateway.set' | translate }}"/>
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="('gateway.device-profile-required') | translate"
-                        *ngIf="slaveConfigFormGroup.get('deviceType').hasError('required') &&
-                                           slaveConfigFormGroup.get('deviceType').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-        <div *ngIf="data.hideNewFields else reportStrategy" class="tb-form-row" fxLayoutAlign="space-between center">
-          <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">
-            <mat-label>
-              {{ 'gateway.send-data-on-change' | translate }}
-            </mat-label>
-          </mat-slide-toggle>
-        </div>
-        <ng-template #reportStrategy>
-          <tb-report-strategy formControlName="reportStrategy" [isExpansionMode]="true"/>
-        </ng-template>
-        <div class="tb-form-panel stroked">
-          <mat-expansion-panel class="tb-settings">
-            <mat-expansion-panel-header>
-              <mat-panel-title>
-                <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <div class="tb-form-panel no-border no-padding padding-top">
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connection-timeout' | translate }}" translate>gateway.connection-timeout</div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ 'gateway.set' | translate }}"/>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.byte-order' | translate }}" translate>gateway.byte-order</div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <mat-select formControlName="byteOrder">
-                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.word-order' | translate }}" translate>gateway.word-order</div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <mat-select formControlName="wordOrder">
-                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">
-                <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">
-                  <mat-expansion-panel-header fxLayout="row wrap">
-                    <mat-panel-title>
-                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
-                        <mat-label>
-                          {{ 'gateway.tls-connection' | translate }}
-                        </mat-label>
-                      </mat-slide-toggle>
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-                  <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>
-                </mat-expansion-panel>
-              </div>
-              <div class="tb-form-row" fxLayoutAlign="space-between center">
-                <mat-slide-toggle class="mat-slide" formControlName="retries">
-                  <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries' | translate }}">
-                    {{ 'gateway.retries' | translate }}
-                  </mat-label>
-                </mat-slide-toggle>
-              </div>
-              <div class="tb-form-row" fxLayoutAlign="space-between center">
-                <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">
-                  <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries-on-empty' | translate }}">
-                    {{ 'gateway.retries-on-empty' | translate }}
-                  </mat-label>
-                </mat-slide-toggle>
-              </div>
-              <div class="tb-form-row" fxLayoutAlign="space-between center">
-                <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">
-                  <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries-on-invalid' | translate }}">
-                    {{ 'gateway.retries-on-invalid' | translate }}
-                  </mat-label>
-                </mat-slide-toggle>
-              </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
-                  <span tbTruncateWithTooltip translate>
-                    gateway.poll-period
-                  </span>
-                </div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-time' | translate }}" translate>gateway.connect-attempt-time</div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-count' | translate }}" translate>gateway.connect-attempt-count</div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.wait-after-failed-attempts' | translate }}" translate>gateway.wait-after-failed-attempts</div>
-                <div class="tb-flex no-gap">
-                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                    <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
-                  </mat-form-field>
-                </div>
-              </div>
-            </div>
-          </mat-expansion-panel>
-        </div>
-        <div class="tb-form-panel stroked">
-          <tb-modbus-values [singleMode]="true" [hideNewFields]="data.hideNewFields" formControlName="values"></tb-modbus-values>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-button color="primary"
-            type="button"
-            cdkFocusInitial
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            (click)="add()"
-            [disabled]="slaveConfigFormGroup.invalid || !slaveConfigFormGroup.dirty">
-      {{ data.buttonTitle | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss
deleted file mode 100644
index 0c68b6af9e..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  .slaves-config-container {
-    width: 80vw;
-    max-width: 900px;
-  }
-
-  .slave-name-label {
-    margin-right: 16px;
-    color: rgba(0, 0, 0, 0.87);
-  }
-
-  .fixed-title-width-260 {
-    min-width: 260px;
-  }
-
-  ::ng-deep.security-config {
-    .fixed-title-width {
-      min-width: 230px;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
deleted file mode 100644
index d9a9c426c2..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
-  FormBuilder,
-} from '@angular/forms';
-import {
-  ModbusProtocolType,
-  ModbusSlaveInfo,
-  SlaveConfig,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { ModbusValuesComponent } from '../modbus-values/modbus-values.component';
-import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
-import {
-  ReportStrategyComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component';
-import {
-  ModbusSlaveDialogAbstract
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.abstract';
-
-@Component({
-  selector: 'tb-modbus-slave-dialog',
-  templateUrl: './modbus-slave-dialog.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    ModbusValuesComponent,
-    ModbusSecurityConfigComponent,
-    GatewayPortTooltipPipe,
-    ReportStrategyComponent,
-  ],
-  styleUrls: ['./modbus-slave-dialog.component.scss'],
-})
-export class ModbusSlaveDialogComponent extends ModbusSlaveDialogAbstract<ModbusSlaveDialogComponent, SlaveConfig> {
-
-  constructor(
-    protected fb: FormBuilder,
-    protected store: Store<AppState>,
-    protected router: Router,
-    @Inject(MAT_DIALOG_DATA) public data: ModbusSlaveInfo,
-    public dialogRef: MatDialogRef<ModbusSlaveDialogComponent, SlaveConfig>,
-  ) {
-    super(fb, store, router, data, dialogRef);
-  }
-
-  protected override getSlaveResultData(): SlaveConfig {
-    const { values, type, serialPort, ...rest } = this.slaveConfigFormGroup.value;
-    const slaveResult = { ...rest, type, ...values };
-
-    if (type === ModbusProtocolType.Serial) {
-      slaveResult.port = serialPort;
-    }
-
-    if (!slaveResult.reportStrategy) {
-      delete slaveResult.reportStrategy;
-    }
-
-    return slaveResult;
-  }
-
-  protected override addFieldsToFormGroup(): void {
-    this.slaveConfigFormGroup.addControl('reportStrategy', this.fb.control(null));
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
deleted file mode 100644
index 8d1048e3cb..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-
-<ng-container *ngIf="singleMode else multipleView">
-  <div [formGroup]="valuesFormGroup" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">
-    <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: null}"></ng-container>
-  </div>
-</ng-container>
-
-<ng-template #multipleView>
-  <mat-tab-group [formGroup]="valuesFormGroup">
-    <mat-tab *ngFor="let register of modbusRegisterTypes" label="{{ ModbusValuesTranslationsMap.get(register) | translate }}">
-      <div [formGroup]="valuesFormGroup.get(register)" class="tb-form-panel no-border no-padding padding-top" fxLayout="column">
-        <ng-container [ngTemplateOutlet]="singleView" [ngTemplateOutletContext]="{$implicit: register}"></ng-container>
-      </div>
-    </mat-tab>
-  </mat-tab-group>
-</ng-template>
-
-<ng-template #singleView let-register>
-  <div class="tb-form-row space-between tb-flex">
-    <div class="fixed-title-width" translate>gateway.attributes</div>
-    <div class="tb-flex ellipsis-chips-container">
-      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES, register).value" class="tb-flex">
-        <mat-chip *ngFor="let attribute of getValueGroup(ModbusValueKey.ATTRIBUTES, register).value">
-          {{ attribute.tag }}
-        </mat-chip>
-        <mat-chip class="mat-mdc-chip ellipsis-chip">
-          <label class="ellipsis-text"></label>
-        </mat-chip>
-      </mat-chip-listbox>
-      <button type="button"
-              mat-icon-button
-              color="primary"
-              [disabled]="disabled"
-              matTooltip="{{ 'action.edit' | translate }}"
-              matTooltipPosition="above"
-              #attributesButton
-              (click)="manageKeys($event, attributesButton, ModbusValueKey.ATTRIBUTES, register)">
-        <tb-icon matButtonIcon>edit</tb-icon>
-      </button>
-    </div>
-  </div>
-  <div class="tb-form-row space-between tb-flex">
-    <div class="fixed-title-width" translate>gateway.timeseries</div>
-    <div class="tb-flex ellipsis-chips-container">
-      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.TIMESERIES, register).value">
-        <mat-chip *ngFor="let telemetry of getValueGroup(ModbusValueKey.TIMESERIES, register).value">
-          {{ telemetry.tag }}
-        </mat-chip>
-        <mat-chip class="mat-mdc-chip ellipsis-chip">
-          <label class="ellipsis-text"></label>
-        </mat-chip>
-      </mat-chip-listbox>
-      <button type="button"
-              mat-icon-button
-              color="primary"
-              [disabled]="disabled"
-              matTooltip="{{ 'action.edit' | translate }}"
-              matTooltipPosition="above"
-              #telemetryButton
-              (click)="manageKeys($event, telemetryButton, ModbusValueKey.TIMESERIES, register)">
-        <tb-icon matButtonIcon>edit</tb-icon>
-      </button>
-    </div>
-  </div>
-  <div class="tb-form-row space-between tb-flex">
-    <div class="fixed-title-width" translate>gateway.attribute-updates</div>
-    <div class="tb-flex ellipsis-chips-container">
-      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register).value" class="tb-flex">
-        <mat-chip *ngFor="let attributeUpdate of getValueGroup(ModbusValueKey.ATTRIBUTES_UPDATES, register).value">
-          {{ attributeUpdate.tag }}
-        </mat-chip>
-        <mat-chip class="mat-mdc-chip ellipsis-chip">
-          <label class="ellipsis-text"></label>
-        </mat-chip>
-      </mat-chip-listbox>
-      <button type="button"
-              mat-icon-button
-              [disabled]="disabled"
-              color="primary"
-              matTooltip="{{ 'action.edit' | translate }}"
-              matTooltipPosition="above"
-              #attributesUpdatesButton
-              (click)="manageKeys($event, attributesUpdatesButton, ModbusValueKey.ATTRIBUTES_UPDATES, register)">
-        <tb-icon matButtonIcon>edit</tb-icon>
-      </button>
-    </div>
-  </div>
-  <div class="tb-form-row space-between tb-flex">
-    <div class="fixed-title-width" translate>gateway.rpc-requests</div>
-    <div class="tb-flex ellipsis-chips-container">
-      <mat-chip-listbox [tb-ellipsis-chip-list]="getValueGroup(ModbusValueKey.RPC_REQUESTS, register).value" class="tb-flex">
-        <mat-chip *ngFor="let rpcRequest of getValueGroup(ModbusValueKey.RPC_REQUESTS, register).value">
-          {{ rpcRequest.tag }}
-        </mat-chip>
-        <mat-chip class="mat-mdc-chip ellipsis-chip">
-          <label class="ellipsis-text"></label>
-        </mat-chip>
-      </mat-chip-listbox>
-      <button type="button"
-              mat-icon-button
-              color="primary"
-              [disabled]="disabled"
-              matTooltip="{{ 'action.edit' | translate }}"
-              matTooltipPosition="above"
-              #rpcRequestsButton
-              (click)="manageKeys($event, rpcRequestsButton, ModbusValueKey.RPC_REQUESTS, register)">
-        <tb-icon matButtonIcon>edit</tb-icon>
-      </button>
-    </div>
-  </div>
-</ng-template>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss
deleted file mode 100644
index e80998b88a..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host ::ng-deep .mat-mdc-tab-body-wrapper {
-  min-height: 320px;
-}
-
-::ng-deep .mdc-evolution-chip-set__chips {
-  align-items: center;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts
deleted file mode 100644
index c0824869e3..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  Renderer2,
-  ViewContainerRef
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  FormGroup,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  ValidationErrors,
-  Validator,
-} from '@angular/forms';
-import {
-  ModbusKeysAddKeyTranslationsMap,
-  ModbusKeysDeleteKeyTranslationsMap,
-  ModbusKeysNoKeysTextTranslationsMap,
-  ModbusKeysPanelTitleTranslationsMap,
-  ModbusRegisterTranslationsMap,
-  ModbusRegisterType,
-  ModbusRegisterValues,
-  ModbusValue,
-  ModbusValueKey,
-  ModbusValues,
-  ModbusValuesState,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
-import { MatButton } from '@angular/material/button';
-import { TbPopoverService } from '@shared/components/popover.service';
-import { ModbusDataKeysPanelComponent } from '../modbus-data-keys-panel/modbus-data-keys-panel.component';
-import { coerceBoolean } from '@shared/decorators/coercion';
-
-@Component({
-  selector: 'tb-modbus-values',
-  templateUrl: './modbus-values.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusValuesComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusValuesComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    EllipsisChipListDirective,
-  ],
-  styleUrls: ['./modbus-values.component.scss']
-})
-
-export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
-
-  @coerceBoolean()
-  @Input() singleMode = false;
-
-  @coerceBoolean()
-  @Input() hideNewFields = false;
-
-  disabled = false;
-  modbusRegisterTypes: ModbusRegisterType[] = Object.values(ModbusRegisterType);
-  modbusValueKeys = Object.values(ModbusValueKey);
-  ModbusValuesTranslationsMap = ModbusRegisterTranslationsMap;
-  ModbusValueKey = ModbusValueKey;
-  valuesFormGroup: FormGroup;
-
-  private onChange: (value: ModbusValuesState) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder,
-              private popoverService: TbPopoverService,
-              private renderer: Renderer2,
-              private viewContainerRef: ViewContainerRef,
-              private cdr: ChangeDetectorRef,
-  ) {}
-
-  ngOnInit() {
-    this.initializeValuesFormGroup();
-    this.observeValuesChanges();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: ModbusValuesState) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(values: ModbusValuesState): void {
-    if (this.singleMode) {
-      this.valuesFormGroup.setValue(this.getSingleRegisterState(values as ModbusValues), { emitEvent: false });
-    } else {
-      const { holding_registers, coils_initializer, input_registers, discrete_inputs } = values as ModbusRegisterValues;
-      this.valuesFormGroup.setValue({
-        holding_registers: this.getSingleRegisterState(holding_registers),
-        coils_initializer: this.getSingleRegisterState(coils_initializer),
-        input_registers: this.getSingleRegisterState(input_registers),
-        discrete_inputs: this.getSingleRegisterState(discrete_inputs),
-      }, { emitEvent: false });
-    }
-    this.cdr.markForCheck();
-  }
-
-  validate(): ValidationErrors | null {
-    return this.valuesFormGroup.valid ? null : {
-      valuesFormGroup: {valid: false}
-    };
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-
-  getValueGroup(valueKey: ModbusValueKey, register?: ModbusRegisterType): FormGroup {
-    return register
-      ? this.valuesFormGroup.get(register).get(valueKey) as FormGroup
-      : this.valuesFormGroup.get(valueKey) as FormGroup;
-  }
-
-  manageKeys($event: Event, matButton: MatButton, keysType: ModbusValueKey, register?: ModbusRegisterType): void {
-    $event.stopPropagation();
-    const trigger = matButton._elementRef.nativeElement;
-    if (this.popoverService.hasPopover(trigger)) {
-      this.popoverService.hidePopover(trigger);
-      return;
-    }
-
-    const keysControl = this.getValueGroup(keysType, register);
-    const ctx = {
-      values: keysControl.value,
-      isMaster: !this.singleMode,
-      keysType,
-      panelTitle: ModbusKeysPanelTitleTranslationsMap.get(keysType),
-      addKeyTitle: ModbusKeysAddKeyTranslationsMap.get(keysType),
-      deleteKeyTitle: ModbusKeysDeleteKeyTranslationsMap.get(keysType),
-      noKeysText: ModbusKeysNoKeysTextTranslationsMap.get(keysType),
-      hideNewFields: this.hideNewFields,
-    };
-    const dataKeysPanelPopover = this.popoverService.displayPopover(
-      trigger,
-      this.renderer,
-      this.viewContainerRef,
-      ModbusDataKeysPanelComponent,
-      'leftBottom',
-      false,
-      null,
-      ctx,
-      {},
-      {},
-      {},
-      true
-    );
-    dataKeysPanelPopover.tbComponentRef.instance.popover = dataKeysPanelPopover;
-    dataKeysPanelPopover.tbComponentRef.instance.keysDataApplied.pipe(takeUntil(this.destroy$)).subscribe((keysData: ModbusValue[]) => {
-      dataKeysPanelPopover.hide();
-      keysControl.patchValue(keysData);
-      keysControl.markAsDirty();
-      this.cdr.markForCheck();
-    });
-  }
-
-  private initializeValuesFormGroup(): void {
-    const getValuesFormGroup = () => this.fb.group(this.modbusValueKeys.reduce((acc, key) => {
-      acc[key] = this.fb.control([[], []]);
-      return acc;
-    }, {}));
-
-    if (this.singleMode) {
-      this.valuesFormGroup = getValuesFormGroup();
-    } else {
-      this.valuesFormGroup = this.fb.group(
-        this.modbusRegisterTypes.reduce((registersAcc, register) => {
-          registersAcc[register] = getValuesFormGroup();
-          return registersAcc;
-        }, {})
-      );
-    }
-  }
-
-
-  private observeValuesChanges(): void {
-    this.valuesFormGroup.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(value => {
-        this.onChange(value);
-        this.onTouched();
-      });
-  }
-
-  private getSingleRegisterState(values: ModbusValues): ModbusValues {
-    return {
-      attributes: values?.attributes ?? [],
-      timeseries: values?.timeseries ?? [],
-      attributeUpdates: values?.attributeUpdates ?? [],
-      rpc: values?.rpc ?? [],
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.abstract.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.abstract.ts
deleted file mode 100644
index 16f5036770..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.abstract.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Directive } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import {
-  BrokerConfig,
-  MappingType,
-  MQTTBasicConfig,
-  MQTTBasicConfig_v3_5_2,
-  RequestMappingData,
-  RequestMappingValue,
-  RequestType,
-  WorkersConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { isObject } from '@core/utils';
-import {
-  GatewayConnectorBasicConfigDirective
-} from '@home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract';
-
-@Directive()
-export abstract class MqttBasicConfigDirective<BasicConfig>
-  extends GatewayConnectorBasicConfigDirective<MQTTBasicConfig_v3_5_2, BasicConfig> {
-
-  MappingType = MappingType;
-
-  protected override initBasicFormGroup(): FormGroup {
-    return this.fb.group({
-      mapping: [],
-      requestsMapping: [],
-      broker: [],
-      workers: [],
-    });
-  }
-
-  protected getRequestDataArray(value: Record<RequestType, RequestMappingData[]>): RequestMappingData[] {
-    const mappingConfigs = [];
-
-    if (isObject(value)) {
-      Object.keys(value).forEach((configKey: string) => {
-        for (const mapping of value[configKey]) {
-          mappingConfigs.push({
-            requestType: configKey,
-            requestValue: mapping
-          });
-        }
-      });
-    }
-
-    return mappingConfigs;
-  }
-
-  protected getRequestDataObject(array: RequestMappingValue[]): Record<RequestType, RequestMappingValue[]> {
-    return array.reduce((result, { requestType, requestValue }) => {
-      result[requestType].push(requestValue);
-      return result;
-    }, {
-      connectRequests: [],
-      disconnectRequests: [],
-      attributeRequests: [],
-      attributeUpdates: [],
-      serverSideRpc: [],
-    });
-  }
-
-  protected getBrokerMappedValue(broker: BrokerConfig, workers: WorkersConfig): BrokerConfig {
-    return {
-      ...broker,
-      maxNumberOfWorkers: workers.maxNumberOfWorkers ?? 100,
-      maxMessageNumberPerWorker: workers.maxMessageNumberPerWorker ?? 10,
-    };
-  }
-
-  writeValue(basicConfig: BasicConfig): void {
-    this.basicFormGroup.setValue(this.mapConfigToFormValue(basicConfig), { emitEvent: false });
-  }
-
-  protected abstract override mapConfigToFormValue(config: BasicConfig): MQTTBasicConfig_v3_5_2;
-  protected abstract override getMappedValue(config: MQTTBasicConfig): BasicConfig;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.html
deleted file mode 100644
index b602ba20d4..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-tab-group [formGroup]="basicFormGroup">
-  <mat-tab label="{{ 'gateway.general' | translate }}">
-    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.broker.connection' | translate }}*">
-    <tb-broker-config-control formControlName="broker"></tb-broker-config-control>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.data-mapping' | translate }}*">
-    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">
-      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="MappingType.DATA"></tb-mapping-table>
-    </div>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.requests-mapping' | translate }}">
-    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">
-      <tb-mapping-table formControlName="requestsMapping" [mappingType]="MappingType.REQUESTS"></tb-mapping-table>
-    </div>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.workers-settings' | translate }}">
-    <div class="tb-form-panel no-border no-padding">
-      <tb-workers-config-control formControlName="workers"></tb-workers-config-control>
-    </div>
-  </mat-tab>
-</mat-tab-group>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.scss
deleted file mode 100644
index fd799d8aa4..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  height: 100%;
-}
-:host ::ng-deep {
-  .mat-mdc-tab-group, .mat-mdc-tab-body-wrapper {
-    height: 100%;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.ts
deleted file mode 100644
index 155b91efb6..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, forwardRef, ChangeDetectionStrategy } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import {
-  BrokerConfig,
-  MQTTBasicConfig_v3_5_2,
-  RequestMappingData,
-  RequestMappingValue,
-  RequestType, WorkersConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import {
-  MqttBasicConfigDirective
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.abstract';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
-import {
-  WorkersConfigControlComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component';
-import {
-  BrokerConfigControlComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component';
-import {
-  MappingTableComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component';
-
-@Component({
-  selector: 'tb-mqtt-basic-config',
-  templateUrl: './mqtt-basic-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MqttBasicConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => MqttBasicConfigComponent),
-      multi: true
-    }
-  ],
-  styleUrls: ['./mqtt-basic-config.component.scss'],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    SecurityConfigComponent,
-    WorkersConfigControlComponent,
-    BrokerConfigControlComponent,
-    MappingTableComponent,
-  ],
-})
-export class MqttBasicConfigComponent extends MqttBasicConfigDirective<MQTTBasicConfig_v3_5_2> {
-
-  protected override mapConfigToFormValue(basicConfig: MQTTBasicConfig_v3_5_2): MQTTBasicConfig_v3_5_2 {
-    const { broker, mapping = [], requestsMapping } = basicConfig;
-    return{
-      workers: broker && (broker.maxNumberOfWorkers || broker.maxMessageNumberPerWorker) ? {
-        maxNumberOfWorkers: broker.maxNumberOfWorkers,
-        maxMessageNumberPerWorker: broker.maxMessageNumberPerWorker,
-      } : {} as WorkersConfig,
-      mapping: mapping ?? [],
-      broker: broker ?? {} as BrokerConfig,
-      requestsMapping: this.getRequestDataArray(requestsMapping as Record<RequestType, RequestMappingData[]>),
-    };
-  }
-
-  protected override getMappedValue(basicConfig: MQTTBasicConfig_v3_5_2): MQTTBasicConfig_v3_5_2 {
-    const { broker, workers, mapping, requestsMapping  } = basicConfig || {};
-
-    return {
-      broker: this.getBrokerMappedValue(broker, workers),
-      mapping,
-      requestsMapping: (requestsMapping as RequestMappingData[])?.length
-        ? this.getRequestDataObject(requestsMapping as RequestMappingValue[])
-        : {} as Record<RequestType, RequestMappingValue[]>
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-legacy-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-legacy-basic-config.component.ts
deleted file mode 100644
index 6209cef677..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-legacy-basic-config.component.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, forwardRef, ChangeDetectionStrategy } from '@angular/core';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import {
-  BrokerConfig,
-  MQTTBasicConfig_v3_5_2,
-  MQTTLegacyBasicConfig,
-  RequestMappingData,
-  RequestMappingValue,
-  RequestType, WorkersConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { MqttVersionMappingUtil } from '@home/components/widget/lib/gateway/utils/mqtt-version-mapping.util';
-import {
-  MqttBasicConfigDirective
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.abstract';
-import { isDefinedAndNotNull } from '@core/utils';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
-import {
-  WorkersConfigControlComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component';
-import {
-  BrokerConfigControlComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component';
-import {
-  MappingTableComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component';
-
-@Component({
-  selector: 'tb-mqtt-legacy-basic-config',
-  templateUrl: './mqtt-basic-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MqttLegacyBasicConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => MqttLegacyBasicConfigComponent),
-      multi: true
-    }
-  ],
-  styleUrls: ['./mqtt-basic-config.component.scss'],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    SecurityConfigComponent,
-    WorkersConfigControlComponent,
-    BrokerConfigControlComponent,
-    MappingTableComponent,
-  ],
-})
-export class MqttLegacyBasicConfigComponent extends MqttBasicConfigDirective<MQTTLegacyBasicConfig> {
-
-  protected override mapConfigToFormValue(config: MQTTLegacyBasicConfig): MQTTBasicConfig_v3_5_2 {
-    const {
-      broker,
-      mapping = [],
-      connectRequests = [],
-      disconnectRequests = [],
-      attributeRequests = [],
-      attributeUpdates = [],
-      serverSideRpc = []
-    } = config as MQTTLegacyBasicConfig;
-    const updatedRequestMapping = MqttVersionMappingUtil.mapRequestsToUpgradedVersion({
-      connectRequests,
-      disconnectRequests,
-      attributeRequests,
-      attributeUpdates,
-      serverSideRpc
-    });
-    return {
-      workers: broker && (broker.maxNumberOfWorkers || broker.maxMessageNumberPerWorker) ? {
-        maxNumberOfWorkers: broker.maxNumberOfWorkers,
-        maxMessageNumberPerWorker: broker.maxMessageNumberPerWorker,
-      } : {} as WorkersConfig,
-      mapping: MqttVersionMappingUtil.mapMappingToUpgradedVersion(mapping) || [],
-      broker: broker || {} as BrokerConfig,
-      requestsMapping: this.getRequestDataArray(updatedRequestMapping),
-    };
-  }
-
-  protected override getMappedValue(basicConfig: MQTTBasicConfig_v3_5_2): MQTTLegacyBasicConfig {
-    const { broker, workers, mapping, requestsMapping  } = basicConfig || {};
-
-    const updatedRequestMapping = (requestsMapping as RequestMappingData[])?.length
-      ? this.getRequestDataObject(requestsMapping as RequestMappingValue[])
-      : {} as Record<RequestType, RequestMappingData[]>;
-
-    return {
-      broker: this.getBrokerMappedValue(broker, workers),
-      mapping: MqttVersionMappingUtil.mapMappingToDowngradedVersion(mapping),
-      ...(MqttVersionMappingUtil.mapRequestsToDowngradedVersion(updatedRequestMapping as Record<RequestType, RequestMappingData[]>))
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html
deleted file mode 100644
index b5ef346300..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="brokerConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width tb-required" translate>gateway.host</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.host-required') | translate"
-                  *ngIf="brokerConfigFormGroup.get('host').hasError('required')
-                                           && brokerConfigFormGroup.get('host').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width tb-required" translate>gateway.port</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
-               name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="brokerConfigFormGroup.get('port') | getGatewayPortTooltip"
-                  *ngIf="(brokerConfigFormGroup.get('port').hasError('required') ||
-                                            brokerConfigFormGroup.get('port').hasError('min') ||
-                                            brokerConfigFormGroup.get('port').hasError('max')) &&
-                                            brokerConfigFormGroup.get('port').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" translate>gateway.mqtt-version</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="version">
-          <mat-option *ngFor="let version of mqttVersions" [value]="version.value">{{ version.name }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" translate>gateway.client-id</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="clientId" placeholder="{{ 'gateway.set' | translate }}"/>
-        <button type="button"
-                matSuffix
-                mat-icon-button
-                aria-label="Generate"
-                matTooltip="{{ 'gateway.generate-client-id' | translate }}"
-                matTooltipPosition="above"
-                (click)="generate('clientId')"
-                *ngIf="!brokerConfigFormGroup.get('clientId').value">
-          <mat-icon>autorenew</mat-icon>
-        </button>
-      </mat-form-field>
-    </div>
-  </div>
-  <tb-security-config formControlName="security">
-  </tb-security-config>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.ts
deleted file mode 100644
index 61c62a49e1..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, OnDestroy } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import {
-  BrokerConfig,
-  MqttVersions,
-  noLeadTrailSpacesRegex,
-  PortLimits,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { generateSecret } from '@core/utils';
-import { Subject } from 'rxjs';
-import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
-import { SecurityConfigComponent } from '../../security-config/security-config.component';
-
-@Component({
-  selector: 'tb-broker-config-control',
-  templateUrl: './broker-config-control.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    SecurityConfigComponent,
-    GatewayPortTooltipPipe,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => BrokerConfigControlComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => BrokerConfigControlComponent),
-      multi: true
-    }
-  ]
-})
-export class BrokerConfigControlComponent implements ControlValueAccessor, Validator, OnDestroy {
-  brokerConfigFormGroup: UntypedFormGroup;
-  mqttVersions = MqttVersions;
-  portLimits = PortLimits;
-
-  private onChange: (value: string) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder,
-              private cdr: ChangeDetectorRef) {
-    this.brokerConfigFormGroup = this.fb.group({
-      host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      port: [null, [Validators.required, Validators.min(PortLimits.MIN), Validators.max(PortLimits.MAX)]],
-      version: [5, []],
-      clientId: ['tb_gw_' + generateSecret(5), [Validators.pattern(noLeadTrailSpacesRegex)]],
-      security: []
-    });
-
-    this.brokerConfigFormGroup.valueChanges.subscribe(value => {
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  generate(formControlName: string): void {
-    this.brokerConfigFormGroup.get(formControlName)?.patchValue('tb_gw_' + generateSecret(5));
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(brokerConfig: BrokerConfig): void {
-    const {
-      version = 5,
-      clientId = `tb_gw_${generateSecret(5)}`,
-      security = {},
-    } = brokerConfig;
-
-    this.brokerConfigFormGroup.reset({ ...brokerConfig, version, clientId, security }, { emitEvent: false });
-    this.cdr.markForCheck();
-  }
-
-  validate(): ValidationErrors | null {
-    return this.brokerConfigFormGroup.valid ? null : {
-      brokerConfigFormGroup: {valid: false}
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html
deleted file mode 100644
index 0a3bd4e6f3..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="workersConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width tb-required" [style.width.%]="50"
-         tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.max-number-of-workers' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers"
-               placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.max-number-of-workers-required') | translate"
-                  *ngIf="workersConfigFormGroup.get('maxNumberOfWorkers').hasError('min') ||
-                                           (workersConfigFormGroup.get('maxNumberOfWorkers').hasError('required') &&
-                                           workersConfigFormGroup.get('maxNumberOfWorkers').touched)"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width tb-required" [style.width.%]="50"
-         tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.max-messages-queue-for-worker' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker"
-               placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.max-messages-queue-for-worker-required') | translate"
-                  *ngIf="workersConfigFormGroup.get('maxMessageNumberPerWorker').hasError('min') ||
-                                           (workersConfigFormGroup.get('maxMessageNumberPerWorker').hasError('required') &&
-                                           workersConfigFormGroup.get('maxMessageNumberPerWorker').touched)"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.ts
deleted file mode 100644
index 8abc3cb416..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  OnDestroy,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { WorkersConfig } from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-@Component({
-  selector: 'tb-workers-config-control',
-  templateUrl: './workers-config-control.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => WorkersConfigControlComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => WorkersConfigControlComponent),
-      multi: true
-    }
-  ]
-})
-export class WorkersConfigControlComponent implements OnDestroy, ControlValueAccessor, Validator {
-
-  workersConfigFormGroup: UntypedFormGroup;
-
-  private onChange: (value: string) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.workersConfigFormGroup = this.fb.group({
-      maxNumberOfWorkers: [100, [Validators.required, Validators.min(1)]],
-      maxMessageNumberPerWorker: [10, [Validators.required, Validators.min(1)]],
-    });
-
-    this.workersConfigFormGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  writeValue(workersConfig: WorkersConfig): void {
-    const { maxNumberOfWorkers, maxMessageNumberPerWorker } = workersConfig;
-    this.workersConfigFormGroup.reset({
-      maxNumberOfWorkers: maxNumberOfWorkers || 100,
-      maxMessageNumberPerWorker: maxMessageNumberPerWorker || 10,
-    }, {emitEvent: false});
-  }
-
-  validate(): ValidationErrors | null {
-    return this.workersConfigFormGroup.valid ? null : {
-      workersConfigFormGroup: {valid: false}
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html
deleted file mode 100644
index 4a0e76ee19..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.html
+++ /dev/null
@@ -1,148 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tbTruncateWithTooltip translate>gateway.server-url</div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.server-url-required') | translate"
-                  *ngIf="serverConfigFormGroup.get('url').hasError('required') &&
-                         serverConfigFormGroup.get('url').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opc-timeout' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.timeout' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="1000" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
-                  *ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('timeoutInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.security-policy' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.security-policy' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="security">
-          <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.scan-period' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="1000" name="value"
-               formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
-                  *ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('scanPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div *ngIf="!hideNewFields" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.poll-period' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.poll-period' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="50" name="value"
-               formControlName="pollPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.poll-period-error' | translate: {min: 50}"
-                  *ngIf="(serverConfigFormGroup.get('pollPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('pollPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('pollPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}">
-      <div tbTruncateWithTooltip>{{ 'gateway.sub-check-period' | translate }}</div>
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="100" name="value"
-               formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.sub-check-period-error' | translate: {min: 100}"
-                  *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </div>
-  </div>
-  <div class="tb-form-row" fxLayoutAlign="space-between center">
-    <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">
-      <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.enable-subscription' | translate }}">
-        <div tbTruncateWithTooltip>{{ 'gateway.enable-subscription' | translate }}</div>
-      </mat-label>
-    </mat-slide-toggle>
-  </div>
-  <div class="tb-form-row" fxLayoutAlign="space-between center">
-    <mat-slide-toggle class="mat-slide" formControlName="showMap">
-      <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.show-map' | translate }}">
-        {{ 'gateway.show-map' | translate }}
-      </mat-label>
-    </mat-slide-toggle>
-  </div>
-  <tb-security-config formControlName="identity"
-                      [extendCertificatesModel]="true">
-  </tb-security-config>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.scss
deleted file mode 100644
index 416f368279..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.ts
deleted file mode 100644
index c000139ded..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import {
-  noLeadTrailSpacesRegex,
-  SecurityPolicy,
-  SecurityPolicyTypes,
-  ServerConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
-import { HOUR } from '@shared/models/time/time.models';
-import { coerceBoolean } from '@shared/decorators/coercion';
-
-@Component({
-  selector: 'tb-opc-server-config',
-  templateUrl: './opc-server-config.component.html',
-  styleUrls: ['./opc-server-config.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => OpcServerConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => OpcServerConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    SecurityConfigComponent,
-  ]
-})
-export class OpcServerConfigComponent implements ControlValueAccessor, Validator, AfterViewInit, OnDestroy {
-
-  @Input()
-  @coerceBoolean()
-  hideNewFields: boolean = false;
-
-  securityPolicyTypes = SecurityPolicyTypes;
-  serverConfigFormGroup: UntypedFormGroup;
-
-  onChange!: (value: string) => void;
-  onTouched!: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.serverConfigFormGroup = this.fb.group({
-      url: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      timeoutInMillis: [1000, [Validators.required, Validators.min(1000)]],
-      scanPeriodInMillis: [HOUR, [Validators.required, Validators.min(1000)]],
-      pollPeriodInMillis: [5000, [Validators.required, Validators.min(50)]],
-      enableSubscriptions: [true, []],
-      subCheckPeriodInMillis: [100, [Validators.required, Validators.min(100)]],
-      showMap: [false, []],
-      security: [SecurityPolicy.BASIC128, []],
-      identity: []
-    });
-
-    this.serverConfigFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  ngAfterViewInit(): void {
-    if (this.hideNewFields) {
-      this.serverConfigFormGroup.get('pollPeriodInMillis').disable({emitEvent: false});
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  validate(): ValidationErrors | null {
-    return this.serverConfigFormGroup.valid ? null : {
-      serverConfigFormGroup: { valid: false }
-    };
-  }
-
-  writeValue(serverConfig: ServerConfig): void {
-    const {
-      timeoutInMillis = 1000,
-      scanPeriodInMillis = HOUR,
-      pollPeriodInMillis = 5000,
-      enableSubscriptions = true,
-      subCheckPeriodInMillis = 100,
-      showMap = false,
-      security = SecurityPolicy.BASIC128,
-      identity = {},
-    } = serverConfig;
-
-    this.serverConfigFormGroup.reset({
-      ...serverConfig,
-      timeoutInMillis,
-      scanPeriodInMillis,
-      pollPeriodInMillis,
-      enableSubscriptions,
-      subCheckPeriodInMillis,
-      showMap,
-      security,
-      identity,
-    }, { emitEvent: false });
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.html
deleted file mode 100644
index 2296a472a4..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-tab-group [formGroup]="basicFormGroup">
-  <mat-tab label="{{ 'gateway.general' | translate }}">
-    <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.server' | translate }}*">
-    <tb-opc-server-config formControlName="server" [hideNewFields]="isLegacy"></tb-opc-server-config>
-  </mat-tab>
-  <mat-tab label="{{ 'gateway.data-mapping' | translate }}*">
-    <div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height">
-      <tb-mapping-table formControlName="mapping" [required]="true" [mappingType]="mappingTypes.OPCUA"></tb-mapping-table>
-    </div>
-  </mat-tab>
-</mat-tab-group>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.scss
deleted file mode 100644
index fd799d8aa4..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  height: 100%;
-}
-:host ::ng-deep {
-  .mat-mdc-tab-group, .mat-mdc-tab-body-wrapper {
-    height: 100%;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.ts
deleted file mode 100644
index c45eafcc67..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
-import { FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  MappingType,
-  OPCBasicConfig_v3_5_2,
-  ServerConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { MappingTableComponent } from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
-import {
-  OpcServerConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component';
-import {
-  GatewayConnectorBasicConfigDirective
-} from '@home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract';
-
-@Component({
-  selector: 'tb-opc-ua-basic-config',
-  templateUrl: './opc-ua-basic-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => OpcUaBasicConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => OpcUaBasicConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    SecurityConfigComponent,
-    MappingTableComponent,
-    OpcServerConfigComponent,
-  ],
-  styleUrls: ['./opc-ua-basic-config.component.scss']
-})
-export class OpcUaBasicConfigComponent extends GatewayConnectorBasicConfigDirective<OPCBasicConfig_v3_5_2, OPCBasicConfig_v3_5_2> {
-
-  mappingTypes = MappingType;
-  isLegacy = false;
-
-  protected override initBasicFormGroup(): FormGroup {
-    return this.fb.group({
-      mapping: [],
-      server: [],
-    });
-  }
-
-  protected override mapConfigToFormValue(config: OPCBasicConfig_v3_5_2): OPCBasicConfig_v3_5_2 {
-    return {
-      server: config.server ?? {} as ServerConfig,
-      mapping: config.mapping ?? [],
-    };
-  }
-
-  protected override getMappedValue(value: OPCBasicConfig_v3_5_2): OPCBasicConfig_v3_5_2 {
-    return {
-      server: value.server,
-      mapping: value.mapping,
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-legacy-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-legacy-basic-config.component.ts
deleted file mode 100644
index 9458858cbf..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-legacy-basic-config.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
-import { FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  MappingType,
-  OPCBasicConfig_v3_5_2,
-  OPCLegacyBasicConfig, ServerConfig,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { MappingTableComponent } from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
-import {
-  OpcServerConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component';
-import {
-  GatewayConnectorBasicConfigDirective
-} from '@home/components/widget/lib/gateway/abstract/gateway-connector-basic-config.abstract';
-import { OpcVersionMappingUtil } from '@home/components/widget/lib/gateway/utils/opc-version-mapping.util';
-
-@Component({
-  selector: 'tb-opc-ua-legacy-basic-config',
-  templateUrl: './opc-ua-basic-config.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => OpcUaLegacyBasicConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => OpcUaLegacyBasicConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    SecurityConfigComponent,
-    MappingTableComponent,
-    OpcServerConfigComponent,
-  ],
-  styleUrls: ['./opc-ua-basic-config.component.scss']
-})
-export class OpcUaLegacyBasicConfigComponent extends GatewayConnectorBasicConfigDirective<OPCBasicConfig_v3_5_2, OPCLegacyBasicConfig> {
-
-  mappingTypes = MappingType;
-  isLegacy = true;
-
-  protected override initBasicFormGroup(): FormGroup {
-    return this.fb.group({
-      mapping: [],
-      server: [],
-    });
-  }
-
-  protected override mapConfigToFormValue(config: OPCLegacyBasicConfig): OPCBasicConfig_v3_5_2 {
-    return {
-      server: config.server ? OpcVersionMappingUtil.mapServerToUpgradedVersion(config.server) : {} as ServerConfig,
-      mapping: config.server?.mapping ? OpcVersionMappingUtil.mapMappingToUpgradedVersion(config.server.mapping) : [],
-    };
-  }
-
-  protected override getMappedValue(value: OPCBasicConfig_v3_5_2): OPCLegacyBasicConfig {
-    return {
-      server: OpcVersionMappingUtil.mapServerToDowngradedVersion(value),
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html
deleted file mode 100644
index dec8292720..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div [formGroup]="reportStrategyFormGroup" class="tb-form-panel stroked">
-  <mat-expansion-panel *ngIf="isExpansionMode else defaultMode" class="tb-settings" [expanded]="showStrategyControl.value">
-    <mat-expansion-panel-header fxLayout="row wrap">
-      <mat-panel-title>
-        <mat-slide-toggle fxLayoutAlign="center" [formControl]="showStrategyControl" class="mat-slide" (click)="$event.stopPropagation()">
-          <mat-label>
-            {{ 'gateway.report-strategy.label' | translate }}
-          </mat-label>
-        </mat-slide-toggle>
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>
-  </mat-expansion-panel>
-  <ng-template #defaultMode>
-    <div class="tb-form-panel-title" translate>gateway.report-strategy.label</div>
-    <ng-container [ngTemplateOutlet]="strategyFields"></ng-container>
-  </ng-template>
-  <ng-template #strategyFields>
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width">{{ 'gateway.type' | translate }}</div>
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <mat-select formControlName="type">
-          <mat-option *ngFor="let type of reportStrategyTypes" [value]="type">{{ ReportTypeTranslateMap.get(type) | translate }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <div *ngIf="reportStrategyFormGroup.get('type').value !== ReportStrategyType.OnChange" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required">
-        <span tbTruncateWithTooltip translate>
-          gateway.report-strategy.report-period
-        </span>
-      </div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput type="number" min="0" name="value" formControlName="reportPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
-        </mat-form-field>
-      </div>
-    </div>
-  </ng-template>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.ts
deleted file mode 100644
index fb0819d119..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  Input,
-  OnDestroy,
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validators
-} from '@angular/forms';
-import {
-  ReportStrategyConfig,
-  ReportStrategyType,
-  ReportStrategyTypeTranslationsMap
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { filter, takeUntil } from 'rxjs/operators';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import {
-  ModbusSecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component';
-import { coerceBoolean } from '@shared/decorators/coercion';
-
-@Component({
-  selector: 'tb-report-strategy',
-  templateUrl: './report-strategy.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ReportStrategyComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ReportStrategyComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-    ModbusSecurityConfigComponent,
-  ]
-})
-export class ReportStrategyComponent implements ControlValueAccessor, OnDestroy {
-
-  @coerceBoolean()
-  @Input() isExpansionMode = false;
-
-  reportStrategyFormGroup: UntypedFormGroup;
-  showStrategyControl: FormControl<boolean>;
-
-  readonly reportStrategyTypes = Object.values(ReportStrategyType);
-  readonly ReportTypeTranslateMap = ReportStrategyTypeTranslationsMap;
-  readonly ReportStrategyType = ReportStrategyType;
-
-  private onChange: (value: ReportStrategyConfig) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.showStrategyControl = this.fb.control(false);
-
-    this.reportStrategyFormGroup = this.fb.group({
-      type: [{ value: ReportStrategyType.OnReportPeriod, disabled: true }, []],
-      reportPeriod: [{ value: 5000, disabled: true }, [Validators.required]],
-    });
-
-    this.observeStrategyFormChange();
-    this.observeStrategyToggle();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  writeValue(reportStrategyConfig: ReportStrategyConfig): void {
-    if (this.isExpansionMode) {
-      this.showStrategyControl.setValue(!!reportStrategyConfig, {emitEvent: false});
-    }
-    if (reportStrategyConfig) {
-      this.reportStrategyFormGroup.enable({emitEvent: false});
-    }
-    const { type = ReportStrategyType.OnReportPeriod, reportPeriod = 5000 } = reportStrategyConfig ?? {};
-    this.reportStrategyFormGroup.setValue({ type, reportPeriod }, {emitEvent: false});
-    this.onTypeChange(type);
-  }
-
-  validate(): ValidationErrors | null {
-    return this.reportStrategyFormGroup.valid || this.reportStrategyFormGroup.disabled ? null : {
-      reportStrategyForm: { valid: false }
-    };
-  }
-
-  registerOnChange(fn: (value: ReportStrategyConfig) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  private observeStrategyFormChange(): void {
-    this.reportStrategyFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.onChange(value);
-      this.onTouched();
-    });
-
-    this.reportStrategyFormGroup.get('type').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(type => this.onTypeChange(type));
-  }
-
-  private observeStrategyToggle(): void {
-    this.showStrategyControl.valueChanges
-      .pipe(takeUntil(this.destroy$), filter(() => this.isExpansionMode))
-      .subscribe(enable => {
-        if (enable) {
-          this.reportStrategyFormGroup.enable({emitEvent: false});
-          this.reportStrategyFormGroup.get('reportPeriod').addValidators(Validators.required);
-          this.onChange(this.reportStrategyFormGroup.value);
-        } else {
-          this.reportStrategyFormGroup.disable({emitEvent: false});
-          this.reportStrategyFormGroup.get('reportPeriod').removeValidators(Validators.required);
-          this.onChange(null);
-        }
-        this.reportStrategyFormGroup.updateValueAndValidity({emitEvent: false});
-      });
-  }
-
-  private onTypeChange(type: ReportStrategyType): void {
-    const reportPeriodControl = this.reportStrategyFormGroup.get('reportPeriod');
-
-    if (type === ReportStrategyType.OnChange) {
-      reportPeriodControl.disable({emitEvent: false});
-    } else if (!this.isExpansionMode || this.showStrategyControl.value) {
-      reportPeriodControl.enable({emitEvent: false});
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.html
deleted file mode 100644
index afabe53499..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-row space-between same-padding tb-flex column" [formGroup]="securityFormGroup">
-  <div class="tb-flex row space-between align-center no-gap fill-width">
-    <div class="fields-label" translate>gateway.security</div>
-    <tb-toggle-select formControlName="type" appearance="fill">
-      <tb-toggle-option *ngFor="let type of securityTypes" [value]="type">
-        {{ SecurityTypeTranslationsMap.get(type) | translate }}
-      </tb-toggle-option>
-    </tb-toggle-select>
-  </div>
-  <ng-container *ngIf="securityFormGroup.get('type').value === BrokerSecurityType.BASIC">
-    <div class="tb-form-row space-between tb-flex fill-width">
-      <div class="fixed-title-width" translate>gateway.username</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput name="value" formControlName="username" placeholder="{{ 'gateway.set' | translate }}"/>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="('gateway.username-required') | translate"
-                    *ngIf="securityFormGroup.get('username').hasError('required') && securityFormGroup.get('username').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="tb-form-row space-between tb-flex fill-width">
-      <div class="fixed-title-width" translate>gateway.password</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput type="password" name="value" formControlName="password" placeholder="{{ 'gateway.set' | translate }}"/>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="('gateway.password-required') | translate"
-                    *ngIf="securityFormGroup.get('password').hasError('required')
-                                 && securityFormGroup.get('password').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-          <div [class.hide-toggle]="securityFormGroup.get('password').hasError('required')" class="tb-flex no-gap align-center fill-height" matSuffix>
-            <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>
-          </div>
-        </mat-form-field>
-      </div>
-    </div>
-  </ng-container>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.scss
deleted file mode 100644
index f014f56588..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin-bottom: 10px;
-
-  .fields-label {
-    font-weight: 500;
-  }
-
-  .hide-toggle {
-    display: none;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.ts
deleted file mode 100644
index d00813bfd6..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  OnDestroy,
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import { takeUntil } from 'rxjs/operators';
-import {
-  noLeadTrailSpacesRegex,
-  RestSecurityType,
-  RestSecurityTypeTranslationsMap
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'tb-rest-connector-security',
-  templateUrl: './rest-connector-security.component.html',
-  styleUrls: ['./rest-connector-security.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RestConnectorSecurityComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => RestConnectorSecurityComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    SharedModule,
-    CommonModule,
-  ]
-})
-export class RestConnectorSecurityComponent implements ControlValueAccessor, Validator, OnDestroy {
-  BrokerSecurityType = RestSecurityType;
-  securityTypes: RestSecurityType[] = Object.values(RestSecurityType);
-  SecurityTypeTranslationsMap = RestSecurityTypeTranslationsMap;
-  securityFormGroup: UntypedFormGroup;
-
-  private destroy$ = new Subject<void>();
-  private propagateChange = (_: any) => {};
-
-  constructor(private fb: FormBuilder) {
-    this.securityFormGroup = this.fb.group({
-      type: [RestSecurityType.ANONYMOUS, []],
-      username: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      password: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-    });
-    this.observeSecurityForm();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {}
-
-  writeValue(deviceInfo: any): void {
-    if (!deviceInfo.type) {
-      deviceInfo.type = RestSecurityType.ANONYMOUS;
-    }
-    this.securityFormGroup.reset(deviceInfo);
-    this.updateView(deviceInfo);
-  }
-
-  validate(): ValidationErrors | null {
-    return this.securityFormGroup.valid ? null : {
-      securityForm: { valid: false }
-    };
-  }
-
-  private updateView(value: any): void {
-    this.propagateChange(value);
-  }
-
-  private updateValidators(type: RestSecurityType): void {
-    if (type === RestSecurityType.BASIC) {
-      this.securityFormGroup.get('username').enable({emitEvent: false});
-      this.securityFormGroup.get('password').enable({emitEvent: false});
-    } else {
-      this.securityFormGroup.get('username').disable({emitEvent: false});
-      this.securityFormGroup.get('password').disable({emitEvent: false});
-    }
-  }
-
-  private observeSecurityForm(): void {
-    this.securityFormGroup.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(value => this.updateView(value));
-
-    this.securityFormGroup.get('type').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(type => this.updateValidators(type));
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
deleted file mode 100644
index 7122bcd52d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<ng-container [formGroup]="rpcParametersFormGroup">
-  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">
-    {{ 'gateway.rpc.hint.modbus-response-reading' | translate }}<br>
-    {{ 'gateway.rpc.hint.modbus-writing-functions' | translate }}
-  </div>
-  <div fxFlex fxLayout="row" fxLayoutGap="10px">
-    <mat-form-field fxFlex="50" class="mat-block">
-      <mat-label>{{ 'gateway.rpc.type' | translate }}</mat-label>
-      <mat-select formControlName="type">
-        <mat-option *ngFor="let type of modbusDataTypes" [value]="type">{{ type }}</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field fxFlex="50" class="mat-block">
-      <mat-label>{{ 'gateway.rpc.functionCode' | translate }}</mat-label>
-      <mat-select formControlName="functionCode">
-        <mat-option *ngFor="let code of functionCodes" [value]="code">{{ ModbusFunctionCodeTranslationsMap.get(code) | translate}}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  </div>
-  <div fxFlex fxLayout="row" fxLayoutGap="10px">
-    <mat-form-field fxFlex="50">
-      <mat-label>{{ 'gateway.rpc.address' | translate }}</mat-label>
-      <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="('gateway.address-required') | translate"
-                *ngIf="rpcParametersFormGroup.get('address').hasError('required') &&
-                                           rpcParametersFormGroup.get('address').touched"
-                class="tb-error">
-        warning
-      </mat-icon>
-    </mat-form-field>
-    <mat-form-field fxFlex="50">
-      <mat-label>{{ 'gateway.rpc.objectsCount' | translate }}</mat-label>
-      <input
-        matInput
-        type="number"
-        min="1"
-        max="50000"
-        name="value"
-        formControlName="objectsCount"
-        placeholder="{{ 'gateway.set' | translate }}"
-        [readonly]="!ModbusEditableDataTypes.includes(rpcParametersFormGroup.get('type').value)"
-      />
-    </mat-form-field>
-  </div>
-  <div *ngIf="writeFunctionCodes.includes(rpcParametersFormGroup.get('functionCode').value)" fxFlex fxLayout="row">
-    <mat-form-field fxFlex="100">
-      <mat-label>{{ 'gateway.rpc.value' | translate }}</mat-label>
-      <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
-      <mat-icon matSuffix
-                matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="('gateway.value-required') | translate"
-                *ngIf="rpcParametersFormGroup.get('value').hasError('required') && rpcParametersFormGroup.get('value').touched"
-                class="tb-error"
-      >
-        warning
-      </mat-icon>
-    </mat-form-field>
-  </div>
-</ng-container>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.scss
deleted file mode 100644
index 62eaca664f..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  .hint-container {
-    margin-bottom: 12px;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.ts
deleted file mode 100644
index ae110b9418..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  OnDestroy,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import {
-  ModbusDataType,
-  ModbusEditableDataTypes,
-  ModbusFunctionCodeTranslationsMap,
-  ModbusObjectCountByDataType,
-  noLeadTrailSpacesRegex,
-  RPCTemplateConfigModbus,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-@Component({
-  selector: 'tb-modbus-rpc-parameters',
-  templateUrl: './modbus-rpc-parameters.component.html',
-  styleUrls: ['./modbus-rpc-parameters.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ModbusRpcParametersComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusRpcParametersComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ],
-})
-export class ModbusRpcParametersComponent implements ControlValueAccessor, Validator, OnDestroy {
-
-  rpcParametersFormGroup: UntypedFormGroup;
-  functionCodes: Array<number>;
-
-  readonly ModbusEditableDataTypes = ModbusEditableDataTypes;
-  readonly ModbusFunctionCodeTranslationsMap = ModbusFunctionCodeTranslationsMap;
-
-  readonly modbusDataTypes = Object.values(ModbusDataType) as ModbusDataType[];
-  readonly writeFunctionCodes = [5, 6, 15, 16];
-
-  private readonly defaultFunctionCodes = [3, 4, 6, 16];
-  private readonly readFunctionCodes = [1, 2, 3, 4];
-  private readonly bitsFunctionCodes = [...this.readFunctionCodes, ...this.writeFunctionCodes];
-
-  private onChange: (value: RPCTemplateConfigModbus) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.rpcParametersFormGroup = this.fb.group({
-      type: [ModbusDataType.BYTES, [Validators.required]],
-      functionCode: [this.defaultFunctionCodes[0], [Validators.required]],
-      value: [{value: '', disabled: true}, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      address: [null, [Validators.required]],
-      objectsCount: [1, [Validators.required]],
-    });
-
-    this.updateFunctionCodes(this.rpcParametersFormGroup.get('type').value);
-    this.observeValueChanges();
-    this.observeKeyDataType();
-    this.observeFunctionCode();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: RPCTemplateConfigModbus) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  validate(): ValidationErrors | null {
-    return this.rpcParametersFormGroup.valid ? null : {
-      rpcParametersFormGroup: { valid: false }
-    };
-  }
-
-  writeValue(value: RPCTemplateConfigModbus): void {
-    this.rpcParametersFormGroup.patchValue(value, {emitEvent: false});
-  }
-
-  private observeValueChanges(): void {
-    this.rpcParametersFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  private observeKeyDataType(): void {
-    this.rpcParametersFormGroup.get('type').valueChanges.pipe(takeUntil(this.destroy$)).subscribe(dataType => {
-      if (!this.ModbusEditableDataTypes.includes(dataType)) {
-        this.rpcParametersFormGroup.get('objectsCount').patchValue(ModbusObjectCountByDataType[dataType], {emitEvent: false});
-      }
-      this.updateFunctionCodes(dataType);
-    });
-  }
-
-  private observeFunctionCode(): void {
-    this.rpcParametersFormGroup.get('functionCode').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(code => this.updateValueEnabling(code));
-  }
-
-  private updateValueEnabling(code: number): void {
-    if (this.writeFunctionCodes.includes(code)) {
-      this.rpcParametersFormGroup.get('value').enable({emitEvent: false});
-    } else {
-      this.rpcParametersFormGroup.get('value').setValue(null);
-      this.rpcParametersFormGroup.get('value').disable({emitEvent: false});
-    }
-  }
-
-  private updateFunctionCodes(dataType: ModbusDataType): void {
-    this.functionCodes = dataType === ModbusDataType.BITS ? this.bitsFunctionCodes : this.defaultFunctionCodes;
-    if (!this.functionCodes.includes(this.rpcParametersFormGroup.get('functionCode').value)) {
-      this.rpcParametersFormGroup.get('functionCode').patchValue(this.functionCodes[0], {emitEvent: false});
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.html
deleted file mode 100644
index eb66a6df8c..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<ng-container [formGroup]="rpcParametersFormGroup">
-  <mat-form-field>
-    <mat-label>{{ 'gateway.rpc.method-name' | translate }}</mat-label>
-    <input matInput formControlName="methodFilter"
-           placeholder="echo"/>
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>{{ 'gateway.rpc.requestTopicExpression' | translate }}</mat-label>
-    <input matInput formControlName="requestTopicExpression"
-           placeholder="sensor/${deviceName}/request/${methodName}/${requestId}"/>
-  </mat-form-field>
-  <mat-slide-toggle class="margin" (click)="$event.stopPropagation()" formControlName="withResponse">
-    {{ 'gateway.rpc.withResponse' | translate }}
-  </mat-slide-toggle>
-  <mat-form-field *ngIf="rpcParametersFormGroup.get('withResponse')?.value">
-    <mat-label>{{ 'gateway.rpc.responseTopicExpression' | translate }}</mat-label>
-    <input matInput formControlName="responseTopicExpression"
-           placeholder="sensor/${deviceName}/response/${methodName}/${requestId}"/>
-  </mat-form-field>
-  <mat-form-field *ngIf="rpcParametersFormGroup.get('withResponse')?.value">
-    <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
-    <input matInput formControlName="responseTimeout" type="number"
-           placeholder="10000" min="10" step="1"/>
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
-    <input matInput formControlName="valueExpression"
-           placeholder="${params}"/>
-  </mat-form-field>
-</ng-container>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.scss
deleted file mode 100644
index a2dddebc47..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  display: flex;
-  flex-direction: column;
-
-  .mat-mdc-slide-toggle.margin {
-    margin-bottom: 10px;
-    margin-left: 10px;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.ts
deleted file mode 100644
index 56d9510e7d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  forwardRef,
-  OnDestroy,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator, Validators,
-} from '@angular/forms';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
-import { takeUntil, tap } from 'rxjs/operators';
-import {
-  integerRegex,
-  noLeadTrailSpacesRegex,
-  RPCTemplateConfigMQTT
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-@Component({
-  selector: 'tb-mqtt-rpc-parameters',
-  templateUrl: './mqtt-rpc-parameters.component.html',
-  styleUrls: ['./mqtt-rpc-parameters.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MqttRpcParametersComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => MqttRpcParametersComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ],
-})
-export class MqttRpcParametersComponent implements ControlValueAccessor, Validator, OnDestroy {
-
-  rpcParametersFormGroup: UntypedFormGroup;
-
-  private onChange: (value: RPCTemplateConfigMQTT) => void = (_) => {};
-  private onTouched: () => void = () => {};
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder) {
-    this.rpcParametersFormGroup = this.fb.group({
-      methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      requestTopicExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      responseTopicExpression: [{ value: null, disabled: true }, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      responseTimeout: [{ value: null, disabled: true }, [Validators.min(10), Validators.pattern(integerRegex)]],
-      valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      withResponse: [false, []],
-    });
-
-    this.observeValueChanges();
-    this.observeWithResponse();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: RPCTemplateConfigMQTT) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  validate(): ValidationErrors | null {
-    return this.rpcParametersFormGroup.valid ? null : {
-      rpcParametersFormGroup: { valid: false }
-    };
-  }
-
-  writeValue(value: RPCTemplateConfigMQTT): void {
-    this.rpcParametersFormGroup.patchValue(value, {emitEvent: false});
-    this.toggleResponseFields(value.withResponse);
-  }
-
-  private observeValueChanges(): void {
-    this.rpcParametersFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.onChange(value);
-      this.onTouched();
-    });
-  }
-
-  private observeWithResponse(): void {
-    this.rpcParametersFormGroup.get('withResponse').valueChanges.pipe(
-      tap((isActive: boolean) => this.toggleResponseFields(isActive)),
-      takeUntil(this.destroy$),
-    ).subscribe();
-  }
-
-  private toggleResponseFields(enabled: boolean): void {
-    const responseTopicControl = this.rpcParametersFormGroup.get('responseTopicExpression');
-    const responseTimeoutControl = this.rpcParametersFormGroup.get('responseTimeout');
-    if (enabled) {
-      responseTopicControl.enable();
-      responseTimeoutControl.enable();
-    } else {
-      responseTopicControl.disable();
-      responseTimeoutControl.disable();
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
deleted file mode 100644
index ec5c20cfb1..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<ng-container [formGroup]="rpcParametersFormGroup">
-  <div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container">
-    {{ 'gateway.rpc.hint.opc-method' | translate }}
-  </div>
-  <mat-form-field class="tb-flex">
-    <mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label>
-    <input matInput formControlName="method" placeholder="multiply"/>
-  </mat-form-field>
-  <fieldset class="tb-form-panel stroked arguments-container" fxLayout="column" formArrayName="arguments">
-    <strong>
-      <span class="fields-label">{{ 'gateway.rpc.arguments' | translate }}</span>
-    </strong>
-    <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
-         *ngFor="let argumentFormGroup of rpcParametersFormGroup.get('arguments')['controls']; let i = index" [formGroup]="argumentFormGroup">
-      <div class="tb-form-row column-xs type-container" fxLayoutAlign="space-between center">
-        <div class="tb-required" translate>gateway.type</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="type">
-              <mat-select-trigger>
-                <div class="tb-flex align-center">
-                  <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(argumentFormGroup.get('type').value)?.icon">
-                  </mat-icon>
-                  <span>{{ valueTypes.get(argumentFormGroup.get('type').value)?.name | translate }}</span>
-                </div>
-              </mat-select-trigger>
-              <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">
-                <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">
-                </mat-icon>
-                <span>{{ valueTypes.get(valueType).name | translate }}</span>
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-row column-xs value-container" fxLayoutAlign="space-between center">
-        <div class="tb-required" translate>gateway.value</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
-          <ng-container [ngSwitch]="argumentFormGroup.get('type').value">
-            <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
-                   placeholder="{{ 'gateway.set' | translate }}" />
-            <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"
-                   placeholder="{{ 'gateway.set' | translate }}" />
-            <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"
-                   placeholder="{{ 'gateway.set' | translate }}" />
-            <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">
-              <mat-option [value]="true">true</mat-option>
-              <mat-option [value]="false">false</mat-option>
-            </mat-select>
-          </ng-container>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="('gateway.value-required') | translate"
-                    *ngIf="argumentFormGroup.get(argumentFormGroup.get('type').value).hasError('required')
-                              && argumentFormGroup.get(argumentFormGroup.get('type').value).touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-      <button mat-icon-button (click)="removeArgument(i)"
-              class="tb-box-button"
-              matTooltip="{{ 'gateway.rpc.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
-    </div>
-    <button mat-raised-button
-            fxFlexAlign="start"
-            (click)="addArgument()">
-      {{ 'gateway.rpc.add-argument' | translate }}
-    </button>
-  </fieldset>
-</ng-container>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.scss
deleted file mode 100644
index 5108cc70b1..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  .arguments-container {
-    margin-bottom: 10px;
-  }
-
-  .type-container {
-    width: 40%;
-  }
-
-  .value-container {
-    width: 50%;
-  }
-
-  .hint-container {
-    margin-bottom: 12px;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.ts
deleted file mode 100644
index 0c0dbea3bd..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  OnDestroy,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormGroup,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validator, Validators,
-} from '@angular/forms';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import {
-  integerRegex,
-  MappingValueType,
-  mappingValueTypesMap,
-  noLeadTrailSpacesRegex,
-  OPCTypeValue,
-  RPCTemplateConfigOPC
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { isDefinedAndNotNull, isEqual } from '@core/utils';
-
-@Component({
-  selector: 'tb-opc-rpc-parameters',
-  templateUrl: './opc-rpc-parameters.component.html',
-  styleUrls: ['./opc-rpc-parameters.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => OpcRpcParametersComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => OpcRpcParametersComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    SharedModule,
-  ],
-})
-export class OpcRpcParametersComponent implements ControlValueAccessor, Validator, OnDestroy {
-
-  rpcParametersFormGroup: UntypedFormGroup;
-
-  readonly valueTypeKeys: MappingValueType[] = Object.values(MappingValueType);
-  readonly MappingValueType = MappingValueType;
-  readonly valueTypes = mappingValueTypesMap;
-
-  private onChange: (value: RPCTemplateConfigOPC) => void = (_) => {} ;
-  private onTouched: () => void = () => {};
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {
-    this.rpcParametersFormGroup = this.fb.group({
-      method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      arguments: this.fb.array([]),
-    });
-
-    this.observeValueChanges();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  registerOnChange(fn: (value: RPCTemplateConfigOPC) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  validate(): ValidationErrors | null {
-    return this.rpcParametersFormGroup.valid ? null : {
-      rpcParametersFormGroup: { valid: false }
-    };
-  }
-
-  writeValue(params: RPCTemplateConfigOPC): void {
-    this.clearArguments();
-    params.arguments?.map(({type, value}) => ({type, [type]: value }))
-      .forEach(argument => this.addArgument(argument as OPCTypeValue));
-    this.cdr.markForCheck();
-    this.rpcParametersFormGroup.get('method').patchValue(params.method);
-  }
-
-  private observeValueChanges(): void {
-    this.rpcParametersFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(params => {
-      const updatedArguments = params.arguments.map(({type, ...config}) => ({type, value: config[type]}));
-      this.onChange({method: params.method, arguments: updatedArguments});
-      this.onTouched();
-    });
-  }
-
-  removeArgument(index: number): void {
-    (this.rpcParametersFormGroup.get('arguments') as FormArray).removeAt(index);
-  }
-
-  addArgument(value: OPCTypeValue = {} as OPCTypeValue): void {
-    const fromGroup = this.fb.group({
-      type: [value.type ?? MappingValueType.STRING],
-      string: [
-        value.string ?? { value: '', disabled: !(isEqual(value, {}) || value.string)},
-        [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]
-      ],
-      integer: [
-        {value: value.integer ?? 0, disabled: !isDefinedAndNotNull(value.integer)},
-        [Validators.required, Validators.pattern(integerRegex)]
-      ],
-      double: [{value: value.double ?? 0, disabled: !isDefinedAndNotNull(value.double)}, [Validators.required]],
-      boolean: [{value: value.boolean ?? false, disabled: !isDefinedAndNotNull(value.boolean)}, [Validators.required]],
-    });
-    this.observeTypeChange(fromGroup);
-    (this.rpcParametersFormGroup.get('arguments') as FormArray).push(fromGroup, {emitEvent: false});
-  }
-
-  clearArguments(): void {
-    const formArray = this.rpcParametersFormGroup.get('arguments') as FormArray;
-    while (formArray.length !== 0) {
-      formArray.removeAt(0);
-    }
-  }
-
-  private observeTypeChange(dataKeyFormGroup: FormGroup): void {
-    dataKeyFormGroup.get('type').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(type => {
-        dataKeyFormGroup.disable({emitEvent: false});
-        dataKeyFormGroup.get('type').enable({emitEvent: false});
-        dataKeyFormGroup.get(type).enable({emitEvent: false});
-      });
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.html
deleted file mode 100644
index 87976abf08..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-row space-between same-padding tb-flex column" [formGroup]="securityFormGroup">
-  <div class="tb-flex row space-between align-center no-gap fill-width">
-    <div class="fixed-title-width tb-required">{{ title | translate }}</div>
-    <tb-toggle-select formControlName="type" appearance="fill">
-      <tb-toggle-option *ngFor="let type of securityTypes" [value]="type">
-        {{ SecurityTypeTranslationsMap.get(type) | translate }}
-      </tb-toggle-option>
-    </tb-toggle-select>
-  </div>
-  <ng-container [ngSwitch]="securityFormGroup.get('type').value">
-    <ng-template [ngSwitchCase]="BrokerSecurityType.BASIC">
-      <div class="tb-form-row space-between tb-flex fill-width">
-        <div class="fixed-title-width" translate>gateway.username</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="username" placeholder="{{ 'gateway.set' | translate }}"/>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="('gateway.username-required') | translate"
-                      *ngIf="securityFormGroup.get('username').hasError('required')
-                                             && securityFormGroup.get('username').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-row space-between tb-flex fill-width">
-        <div class="fixed-title-width" translate>gateway.password</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput type="password" name="value" formControlName="password" placeholder="{{ 'gateway.set' | translate }}"/>
-              <div class="tb-flex no-gap align-center fill-height" matSuffix>
-                <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>
-              </div>
-          </mat-form-field>
-        </div>
-      </div>
-    </ng-template>
-    <ng-template [ngSwitchCase]="BrokerSecurityType.CERTIFICATES">
-      <div class="tb-form-hint tb-primary-fill">{{ 'gateway.path-hint' | translate }}</div>
-      <div class="tb-form-row space-between tb-flex fill-width">
-        <div class="fixed-title-width" translate>gateway.CA-certificate-path</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="pathToCACert" placeholder="{{ 'gateway.set' | translate }}"/>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-row space-between tb-flex fill-width">
-        <div class="fixed-title-width" translate>gateway.private-key-path</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="pathToPrivateKey" placeholder="{{ 'gateway.set' | translate }}"/>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-row space-between tb-flex fill-width">
-        <div class="fixed-title-width" translate>gateway.client-cert-path</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="pathToClientCert" placeholder="{{ 'gateway.set' | translate }}"/>
-          </mat-form-field>
-        </div>
-      </div>
-      <ng-container *ngIf="extendCertificatesModel">
-        <div class="tb-form-row space-between tb-flex fill-width">
-          <div class="fixed-title-width" translate>gateway.mode</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <mat-select formControlName="mode">
-                <mat-option *ngFor="let type of modeTypes" [value]="type">
-                  {{ type }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </div>
-        <div class="tb-form-row space-between tb-flex fill-width">
-          <div class="fixed-title-width" translate>gateway.username</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput name="value" formControlName="username" placeholder="{{ 'gateway.set' | translate }}"/>
-              <mat-icon matSuffix
-                        matTooltipPosition="above"
-                        matTooltipClass="tb-error-tooltip"
-                        [matTooltip]="('gateway.username-required') | translate"
-                        *ngIf="securityFormGroup.get('username').hasError('required')
-                                               && securityFormGroup.get('username').touched"
-                        class="tb-error">
-                warning
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </div>
-        <div class="tb-form-row space-between tb-flex fill-width">
-          <div class="fixed-title-width" translate>gateway.password</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput type="password" name="value" formControlName="password" placeholder="{{ 'gateway.set' | translate }}"/>
-              <div class="tb-flex no-gap align-center fill-height" matSuffix>
-                <tb-toggle-password class="tb-flex align-center fill-height"></tb-toggle-password>
-              </div>
-            </mat-form-field>
-          </div>
-        </div>
-      </ng-container>
-    </ng-template>
-  </ng-container>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.scss
deleted file mode 100644
index 416f368279..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts
deleted file mode 100644
index 18d1a96e38..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validators
-} from '@angular/forms';
-import {
-  SecurityType,
-  SecurityTypeTranslationsMap,
-  ModeType,
-  noLeadTrailSpacesRegex,
-  ConnectorSecurity
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { takeUntil } from 'rxjs/operators';
-import { coerceBoolean } from '@shared/decorators/coercion';
-import { SharedModule } from '@shared/shared.module';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'tb-security-config',
-  templateUrl: './security-config.component.html',
-  styleUrls: ['./security-config.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SecurityConfigComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => SecurityConfigComponent),
-      multi: true
-    }
-  ],
-  standalone: true,
-  imports:[
-    CommonModule,
-    SharedModule,
-  ]
-})
-export class SecurityConfigComponent implements ControlValueAccessor, OnInit, OnDestroy {
-
-  @Input()
-  title = 'gateway.security';
-
-  @Input()
-  @coerceBoolean()
-  extendCertificatesModel = false;
-
-  BrokerSecurityType = SecurityType;
-  securityTypes = Object.values(SecurityType) as SecurityType[];
-  modeTypes = Object.values(ModeType);
-  SecurityTypeTranslationsMap = SecurityTypeTranslationsMap;
-  securityFormGroup: UntypedFormGroup;
-
-  private onChange: (value: string) => void;
-  private onTouched: () => void;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    this.securityFormGroup = this.fb.group({
-      type: [SecurityType.ANONYMOUS, []],
-      username: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      pathToCACert: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      pathToPrivateKey: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-      pathToClientCert: ['', [Validators.pattern(noLeadTrailSpacesRegex)]]
-    });
-    if (this.extendCertificatesModel) {
-      this.securityFormGroup.addControl('mode', this.fb.control(ModeType.NONE, []));
-    }
-    this.securityFormGroup.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.onChange(value);
-      this.onTouched();
-    });
-    this.securityFormGroup.get('type').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((type) => this.updateValidators(type));
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  writeValue(securityInfo: ConnectorSecurity): void {
-    if (!securityInfo) {
-      const defaultSecurity = {type: SecurityType.ANONYMOUS};
-      this.securityFormGroup.reset(defaultSecurity, {emitEvent: false});
-    } else {
-      if (!securityInfo.type) {
-        securityInfo.type = SecurityType.ANONYMOUS;
-      }
-      this.securityFormGroup.reset(securityInfo, {emitEvent: false});
-    }
-    this.cdr.markForCheck();
-  }
-
-  validate(): ValidationErrors | null {
-    return this.securityFormGroup.get('type').value !== SecurityType.BASIC || this.securityFormGroup.valid ? null : {
-      securityForm: { valid: false }
-    };
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  private updateValidators(type: SecurityType): void {
-    if (type) {
-      this.securityFormGroup.get('username').disable({emitEvent: false});
-      this.securityFormGroup.get('password').disable({emitEvent: false});
-      this.securityFormGroup.get('pathToCACert').disable({emitEvent: false});
-      this.securityFormGroup.get('pathToPrivateKey').disable({emitEvent: false});
-      this.securityFormGroup.get('pathToClientCert').disable({emitEvent: false});
-      this.securityFormGroup.get('mode')?.disable({emitEvent: false});
-      if (type === SecurityType.BASIC) {
-        this.securityFormGroup.get('username').enable({emitEvent: false});
-        this.securityFormGroup.get('password').enable({emitEvent: false});
-      } else if (type === SecurityType.CERTIFICATES) {
-        this.securityFormGroup.get('pathToCACert').enable({emitEvent: false});
-        this.securityFormGroup.get('pathToPrivateKey').enable({emitEvent: false});
-        this.securityFormGroup.get('pathToClientCert').enable({emitEvent: false});
-        if (this.extendCertificatesModel) {
-          const modeControl = this.securityFormGroup.get('mode');
-          if (modeControl && !modeControl.value) {
-            modeControl.setValue(ModeType.NONE, {emitEvent: false});
-          }
-
-          modeControl?.enable({emitEvent: false});
-          this.securityFormGroup.get('username').enable({emitEvent: false});
-          this.securityFormGroup.get('password').enable({emitEvent: false});
-        }
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
deleted file mode 100644
index f72a2c18af..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="tb-form-panel no-border no-padding">
-  <div class="tb-form-panel no-border no-padding key-panel" *ngIf="valueListFormArray.controls.length; else noKeys">
-    <div class="tb-form-panel no-border no-padding tb-flex no-flex row center fill-width"
-         *ngFor="let keyControl of valueListFormArray.controls; trackBy: trackByKey; let $index = index; let last = last;">
-      <div class="tb-form-panel stroked tb-flex">
-        <ng-container [formGroup]="keyControl">
-          <mat-expansion-panel class="tb-settings" [expanded]="last">
-            <mat-expansion-panel-header fxLayout="row wrap">
-              <mat-panel-title>
-                <div class="title-container" tbTruncateWithTooltip>{{ valueTitle(keyControl.get(keyControl.get('type').value).value) }}</div>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <ng-template matExpansionPanelContent>
-                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                  <div class="fixed-title-width tb-required" translate>gateway.type</div>
-                  <div class="tb-flex no-gap">
-                    <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-                      <mat-select formControlName="type">
-                        <mat-select-trigger>
-                          <div class="tb-flex align-center">
-                            <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get('type').value)?.icon">
-                            </mat-icon>
-                            <span>
-                              {{ valueTypes.get(keyControl.get('type').value)?.name | translate}}
-                            </span>
-                          </div>
-                        </mat-select-trigger>
-                        <mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType">
-                          <mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}">
-                          </mat-icon>
-                          <span>{{ valueTypes.get(valueType).name | translate }}</span>
-                        </mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                  </div>
-                </div>
-                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                  <div class="fixed-title-width tb-required" translate>gateway.value</div>
-                  <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
-                    <ng-container [ngSwitch]="keyControl.get('type').value">
-                      <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
-                             placeholder="{{ 'gateway.set' | translate }}" />
-                      <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"
-                             placeholder="{{ 'gateway.set' | translate }}" />
-                      <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"
-                             placeholder="{{ 'gateway.set' | translate }}" />
-                      <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">
-                        <mat-option [value]="true">true</mat-option>
-                        <mat-option [value]="false">false</mat-option>
-                      </mat-select>
-                    </ng-container>
-                    <mat-icon matSuffix
-                              matTooltipPosition="above"
-                              matTooltipClass="tb-error-tooltip"
-                              [matTooltip]="('gateway.value-required') | translate"
-                              *ngIf="keyControl.get(keyControl.get('type').value).hasError('required')
-                              && keyControl.get(keyControl.get('type').value).touched"
-                              class="tb-error">
-                      warning
-                    </mat-icon>
-                  </mat-form-field>
-                </div>
-            </ng-template>
-          </mat-expansion-panel>
-        </ng-container>
-      </div>
-      <button type="button"
-              mat-icon-button
-              (click)="deleteKey($event, $index)"
-              [matTooltip]="'gateway.delete-value' | translate"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
-    </div>
-  </div>
-  <div>
-    <button type="button" mat-stroked-button color="primary" (click)="addKey()">
-      {{ 'gateway.add-value' | translate }}
-    </button>
-  </div>
-</div>
-<ng-template #noKeys>
-  <div class="tb-flex no-flex center align-center key-panel">
-    <span class="tb-prompt" translate>{{ 'gateway.no-value' }}</span>
-  </div>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
deleted file mode 100644
index 27096ea25a..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';
-import {
-  AbstractControl,
-  ControlValueAccessor,
-  FormGroup,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  ValidationErrors,
-  Validator,
-  Validators
-} from '@angular/forms';
-import { isDefinedAndNotNull } from '@core/utils';
-import {
-  integerRegex,
-  MappingDataKey,
-  MappingValueType,
-  mappingValueTypesMap,
-  noLeadTrailSpacesRegex
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-
-@Component({
-  selector: 'tb-type-value-panel',
-  templateUrl: './type-value-panel.component.html',
-  styleUrls: ['./type-value-panel.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => TypeValuePanelComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => TypeValuePanelComponent),
-      multi: true
-    }
-  ]
-})
-export class TypeValuePanelComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
-
-  valueTypeKeys: MappingValueType[] = Object.values(MappingValueType);
-  valueTypes = mappingValueTypesMap;
-  valueListFormArray: UntypedFormArray;
-  readonly MappingValueType = MappingValueType;
-
-  private destroy$ = new Subject<void>();
-  private propagateChange = (v: any) => {};
-
-  constructor(private fb: UntypedFormBuilder) {}
-
-  ngOnInit(): void {
-    this.valueListFormArray = this.fb.array([]);
-    this.valueListFormArray.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      this.updateView(value);
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  trackByKey(_: number, keyControl: AbstractControl): any {
-    return keyControl;
-  }
-
-  addKey(): void {
-    const dataKeyFormGroup = this.fb.group({
-      type: [MappingValueType.STRING],
-      string: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      integer: [{value: 0, disabled: true}, [Validators.required, Validators.pattern(integerRegex)]],
-      double: [{value: 0, disabled: true}, [Validators.required]],
-      boolean: [{value: false, disabled: true}, [Validators.required]],
-    });
-    this.observeTypeChange(dataKeyFormGroup);
-    this.valueListFormArray.push(dataKeyFormGroup);
-  }
-
-  private observeTypeChange(dataKeyFormGroup: FormGroup): void {
-    dataKeyFormGroup.get('type').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(type => {
-        dataKeyFormGroup.disable({emitEvent: false});
-        dataKeyFormGroup.get('type').enable({emitEvent: false});
-        dataKeyFormGroup.get(type).enable({emitEvent: false});
-      });
-  }
-
-  deleteKey($event: Event, index: number): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    this.valueListFormArray.removeAt(index);
-    this.valueListFormArray.markAsDirty();
-  }
-
-  valueTitle(value: any): string {
-    if (isDefinedAndNotNull(value)) {
-      if (typeof value === 'object') {
-        return JSON.stringify(value);
-      }
-      return value;
-    }
-    return '';
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {}
-
-  writeValue(deviceInfoArray: Array<MappingDataKey>): void {
-    for (const deviceInfo of deviceInfoArray) {
-      const config = {
-        type: [deviceInfo.type],
-        string: [{value: '', disabled: true}, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        integer: [{value: 0, disabled: true}, [Validators.required, Validators.pattern(integerRegex)]],
-        double: [{value: 0, disabled: true}, [Validators.required]],
-        boolean: [{value: false, disabled: true}, [Validators.required]],
-      };
-      config[deviceInfo.type][0] = {value: deviceInfo.value, disabled: false};
-
-      const dataKeyFormGroup = this.fb.group(config);
-      this.observeTypeChange(dataKeyFormGroup);
-      this.valueListFormArray.push(dataKeyFormGroup);
-    }
-  }
-
-  validate(): ValidationErrors | null {
-    return this.valueListFormArray.valid ? null : {
-      valueListForm: { valid: false }
-    };
-  }
-
-  private updateView(value: any): void {
-    this.propagateChange(value.map(({type, ...config}) => ({type, value: config[type]})));
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
deleted file mode 100644
index 87665b28fa..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div mat-dialog-content style="padding: 16px 16px 8px" class="tb-form-panel no-border">
-  <div class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</div>
-  <div class="tb-form-panel stroked">
-    <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
-    <div class="tb-form-row no-border no-padding space-between">
-      <div class="tb-no-data-text tb-commands-hint" translate>gateway.install-docker-compose</div>
-      <a mat-stroked-button color="primary" href="https://docs.docker.com/compose/install/" target="_blank">
-        <mat-icon>description</mat-icon>
-        {{ 'common.documentation' | translate }}
-      </a>
-    </div>
-  </div>
-
-  <div class="tb-form-panel stroked">
-    <div class="tb-form-panel-title" translate>gateway.download-configuration-file</div>
-    <div class="tb-form-row no-border no-padding space-between">
-      <div class="tb-no-data-text tb-commands-hint" translate>gateway.download-docker-compose</div>
-      <button mat-stroked-button color="primary" (click)="download($event)">
-        <mat-icon>download</mat-icon>
-        {{ 'action.download' | translate }}
-      </button>
-    </div>
-  </div>
-
-  <div class="tb-form-panel stroked">
-    <div class="tb-form-panel-title" translate>gateway.launch-gateway</div>
-    <div class="tb-no-data-text tb-commands-hint" translate>gateway.launch-docker-compose</div>
-    <tb-markdown usePlainMarkdown containerClass="start-code"
-                 data="
-          ```bash
-          docker compose up
-          {:copy-code}
-          ```
-      "></tb-markdown>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss
deleted file mode 100644
index 3f66b67943..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  .tb-commands-hint {
-    color: inherit;
-    font-weight: normal;
-    flex: 1;
-  }
-}
-
-:host ::ng-deep {
-  .tb-markdown-view {
-    .start-code {
-      .code-wrapper {
-        padding: 0;
-
-        pre[class*=language-] {
-          margin: 0;
-          background: #F3F6FA;
-          border-color: #305680;
-          padding-right: 38px;
-          overflow: scroll;
-          padding-bottom: 4px;
-          min-height: 42px;
-          scrollbar-width: thin;
-
-          &::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
-          }
-        }
-      }
-      button.clipboard-btn {
-        right: -2px;
-        p {
-          color: #305680;
-        }
-        p, div {
-          background-color: #F3F6FA;
-        }
-        div {
-          img {
-            display: none;
-          }
-          &:after {
-            content: "";
-            position: initial;
-            display: block;
-            width: 18px;
-            height: 18px;
-            background: #305680;
-            mask-image: url(/assets/copy-code-icon.svg);
-            -webkit-mask-image: url(/assets/copy-code-icon.svg);
-            mask-repeat: no-repeat;
-            -webkit-mask-repeat: no-repeat;
-          }
-        }
-      }
-    }
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts
deleted file mode 100644
index 8465b5879d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, Input } from '@angular/core';
-import { DeviceService } from '@core/http/device.service';
-
-@Component({
-  selector: 'tb-gateway-command',
-  templateUrl: './device-gateway-command.component.html',
-  styleUrls: ['./device-gateway-command.component.scss']
-})
-
-export class DeviceGatewayCommandComponent {
-
-  @Input()
-  deviceId: string;
-
-  constructor(private deviceService: DeviceService) {
-  }
-
-  download($event: Event) {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    if (this.deviceId) {
-      this.deviceService.downloadGatewayDockerComposeFile(this.deviceId).subscribe(() => {});
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html
deleted file mode 100644
index d995136b27..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div [formGroup]="connectorForm" class="add-connector">
-  <mat-toolbar color="primary">
-    <h2>{{ "gateway.add-connector" | translate}}</h2>
-    <span fxFlex></span>
-    <div [tb-help]="helpLinkId()"></div>
-    <button mat-icon-button
-            (click)="cancel()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <div mat-dialog-content>
-    <div class="tb-form-panel no-border no-padding" fxLayout="column">
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" translate>gateway.type</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="type">
-              <mat-option *ngFor="let type of gatewayConnectorDefaultTypesTranslatesMap | keyvalue" [value]="type.key">
-                {{ type.value }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width tb-required" translate>gateway.name</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ 'gateway.set' | translate }}"/>
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="(connectorForm.get('name').hasError('duplicateName') ?
-                                    'gateway.connector-duplicate-name' :'gateway.name-required') | translate"
-                      *ngIf="(connectorForm.get('name').hasError('required') && connectorForm.get('name').touched)
-                            || connectorForm.get('name').hasError('duplicateName')"
-                      class="tb-error">
-              warning
-            </mat-icon>
-          </mat-form-field>
-        </div>
-      </div>
-      <div *ngIf="connectorForm.get('type').value === connectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" translate>gateway.connectors-table-class</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="class" placeholder="{{ 'gateway.set' | translate }}"/>
-          </mat-form-field>
-        </div>
-      </div>
-      <div *ngIf="connectorForm.get('type').value === connectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" translate>gateway.connectors-table-key</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
-          </mat-form-field>
-        </div>
-      </div>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" translate>gateway.remote-logging-level</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="logLevel">
-              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </div>
-      <div *ngIf="connectorForm.get('type').value !== connectorType.GRPC && connectorForm.get('type').value !== connectorType.CUSTOM"
-           class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="useDefaults">
-          <mat-label tb-hint-tooltip-icon="{{ 'gateway.fill-connector-defaults-hint' | translate }}">
-            {{ 'gateway.fill-connector-defaults' | translate }}
-          </mat-label>
-        </mat-slide-toggle>
-      </div>
-      <div *ngIf="connectorForm.get('type').value === connectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="sendDataOnlyOnChange">
-          <mat-label tb-hint-tooltip-icon="{{ 'gateway.send-change-data-hint' | translate }}">
-            {{ 'gateway.send-change-data' | translate }}
-          </mat-label>
-        </mat-slide-toggle>
-      </div>
-    </div>
-  </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-button color="primary"
-            type="button"
-            cdkFocusInitial
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            (click)="add()"
-            [disabled]="connectorForm.invalid || !connectorForm.dirty">
-      {{ 'action.add' | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.scss
deleted file mode 100644
index 56e4bc229c..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  .add-connector {
-    min-width: 400px;
-    width: 500px;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts
deleted file mode 100644
index c8235cb697..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { FormBuilder, UntypedFormControl, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { BaseData, HasId } from '@shared/models/base-data';
-import { DialogComponent } from '@shared/components/dialog.component';
-import { Router } from '@angular/router';
-import {
-  AddConnectorConfigData,
-  ConnectorType,
-  CreatedConnectorConfigData,
-  GatewayConnector,
-  GatewayConnectorDefaultTypesTranslatesMap,
-  GatewayLogLevel,
-  GatewayVersion,
-  GatewayVersionedDefaultConfig,
-  noLeadTrailSpacesRegex
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { Observable, Subject } from 'rxjs';
-import { ResourcesService } from '@core/services/resources.service';
-import { takeUntil, tap } from 'rxjs/operators';
-import { helpBaseUrl } from '@shared/models/constants';
-
-@Component({
-  selector: 'tb-add-connector-dialog',
-  templateUrl: './add-connector-dialog.component.html',
-  styleUrls: ['./add-connector-dialog.component.scss'],
-  providers: [],
-})
-export class AddConnectorDialogComponent
-  extends DialogComponent<AddConnectorDialogComponent, BaseData<HasId>> implements OnInit, OnDestroy {
-
-  connectorForm: UntypedFormGroup;
-
-  connectorType = ConnectorType;
-
-  gatewayConnectorDefaultTypesTranslatesMap = GatewayConnectorDefaultTypesTranslatesMap;
-  gatewayLogLevel = Object.values(GatewayLogLevel);
-
-  submitted = false;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(protected store: Store<AppState>,
-              protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: AddConnectorConfigData,
-              public dialogRef: MatDialogRef<AddConnectorDialogComponent, CreatedConnectorConfigData>,
-              private fb: FormBuilder,
-              private resourcesService: ResourcesService) {
-    super(store, router, dialogRef);
-    this.connectorForm = this.fb.group({
-      type: [ConnectorType.MQTT, []],
-      name: ['', [Validators.required, this.uniqNameRequired(), Validators.pattern(noLeadTrailSpacesRegex)]],
-      logLevel: [GatewayLogLevel.INFO, []],
-      useDefaults: [true, []],
-      sendDataOnlyOnChange: [false, []],
-      class: ['', []],
-      key: ['auto', []],
-    });
-  }
-
-  ngOnInit(): void {
-    this.observeTypeChange();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    super.ngOnDestroy();
-  }
-
-  helpLinkId(): string {
-    return helpBaseUrl + '/docs/iot-gateway/configuration/';
-  }
-
-  cancel(): void {
-    this.dialogRef.close(null);
-  }
-
-  add(): void {
-    this.submitted = true;
-    const value = this.connectorForm.getRawValue();
-    if (value.useDefaults) {
-      this.getDefaultConfig(value.type).subscribe((defaultConfig: GatewayVersionedDefaultConfig) => {
-        const gatewayVersion = this.data.gatewayVersion;
-        if (gatewayVersion) {
-          value.configVersion = gatewayVersion;
-        }
-        value.configurationJson = (gatewayVersion === GatewayVersion.Current
-          ? defaultConfig[this.data.gatewayVersion]
-          : defaultConfig.legacy)
-          ?? defaultConfig;
-        if (this.connectorForm.valid) {
-          this.dialogRef.close(value);
-        }
-      });
-    } else if (this.connectorForm.valid) {
-      this.dialogRef.close(value);
-    }
-  }
-
-  private uniqNameRequired(): ValidatorFn {
-    return (control: UntypedFormControl) => {
-      const newName = control.value.trim().toLowerCase();
-      const isDuplicate = this.data.dataSourceData.some(({ value: { name } }) =>
-        name.toLowerCase() === newName
-      );
-
-      return isDuplicate ? { duplicateName: { valid: false } } : null;
-    };
-  }
-
-  private observeTypeChange(): void {
-    this.connectorForm.get('type').valueChanges.pipe(
-      tap((type: ConnectorType) => {
-        const useDefaultControl = this.connectorForm.get('useDefaults');
-        if (type === ConnectorType.GRPC || type === ConnectorType.CUSTOM) {
-          useDefaultControl.setValue(false);
-        } else if (!useDefaultControl.value) {
-          useDefaultControl.setValue(true);
-        }
-      }),
-      takeUntil(this.destroy$),
-    ).subscribe();
-  }
-
-  private getDefaultConfig(type: string): Observable<GatewayVersionedDefaultConfig | GatewayConnector> {
-    return this.resourcesService.loadJsonResource(`/assets/metadata/connector-default-configs/${type}.json`);
-  };
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
deleted file mode 100644
index b56449892b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
+++ /dev/null
@@ -1,766 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div [formGroup]="mappingForm" class="key-mapping">
-  <mat-toolbar color="primary">
-    <h2>{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}</h2>
-    <span fxFlex></span>
-    <div [tb-help]="HelpLinkByMappingTypeMap.get(this.data.mappingType)"></div>
-    <button mat-icon-button
-            (click)="cancel()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <div mat-dialog-content>
-    <div class="tb-form-panel no-border no-padding" fxLayout="column">
-      <div class="tb-form-hint tb-primary-fill">
-        {{ MappingHintTranslationsMap.get(this.data?.mappingType) | translate }}
-      </div>
-      <ng-container [ngSwitch]="data.mappingType">
-        <ng-template [ngSwitchCase]="MappingType.DATA">
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <input matInput name="value" formControlName="topicFilter" placeholder="{{ 'gateway.set' | translate }}"/>
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="('gateway.topic-required') | translate"
-                          *ngIf="mappingForm.get('topicFilter').hasError('required') &&
-                                 mappingForm.get('topicFilter').touched;"
-                          class="tb-error">
-                  warning
-                </mat-icon>
-                <div matSuffix
-                     class="see-example"
-                     [tb-help-popup]="'widget/lib/gateway/topic-filter_fn'"
-                     tb-help-popup-placement="left"
-                     [tb-help-popup-style]="{maxWidth: '970px'}">
-                </div>
-              </mat-form-field>
-            </div>
-          </div>
-          <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}">
-              {{ 'gateway.mqtt-qos' | translate }}
-            </div>
-            <div class="tb-flex no-gap">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="subscriptionQos">
-                  <mat-option *ngFor="let type of qualityTypes" [value]="type">
-                    {{ QualityTranslationsMap.get(type) | translate }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-          <ng-container formGroupName="converter">
-            <div class="tb-form-row space-between tb-flex">
-              <div class="fixed-title-width" translate>gateway.payload-type</div>
-              <tb-toggle-select formControlName="type" appearance="fill">
-                <tb-toggle-option *ngFor="let type of convertorTypes" [value]="type">
-                  {{ ConvertorTypeTranslationsMap.get(type) | translate }}
-                </tb-toggle-option>
-              </tb-toggle-select>
-            </div>
-            <div class="tb-form-panel stroked">
-              <div class="tb-form-panel-title" translate>gateway.data-conversion</div>
-              <div class="tb-form-hint tb-primary-fill">
-                {{ DataConversionTranslationsMap.get(converterType) | translate }}
-              </div>
-              <ng-container [formGroupName]="converterType" [ngSwitch]="converterType">
-                <ng-template [ngSwitchCase]="ConvertorTypeEnum.JSON">
-                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">
-                  </tb-device-info-table>
-                </ng-template>
-                <ng-template [ngSwitchCase]="ConvertorTypeEnum.BYTES">
-                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL"
-                                        [sourceTypes]="[sourceTypesEnum.MSG, sourceTypesEnum.CONST]" required="true">
-                  </tb-device-info-table>
-                </ng-template>
-                <div class="tb-form-panel no-border no-padding"
-                     *ngIf="converterType === ConvertorTypeEnum.BYTES || converterType === ConvertorTypeEnum.JSON">
-                  <div class="tb-form-row space-between tb-flex">
-                    <div class="fixed-title-width" translate>gateway.attributes</div>
-                    <div class="tb-flex ellipsis-chips-container">
-                      <mat-chip-listbox [tb-ellipsis-chip-list]="converterAttributes" class="tb-flex">
-                          <mat-chip *ngFor="let attribute of converterAttributes">
-                            {{ attribute }}
-                          </mat-chip>
-                          <mat-chip class="mat-mdc-chip ellipsis-chip">
-                            <label class="ellipsis-text"></label>
-                          </mat-chip>
-                      </mat-chip-listbox>
-                      <button type="button"
-                              mat-icon-button
-                              color="primary"
-                              matTooltip="{{ 'action.edit' | translate }}"
-                              matTooltipPosition="above"
-                              #attributesButton
-                              (click)="manageKeys($event, attributesButton, MappingKeysType.ATTRIBUTES)">
-                        <tb-icon matButtonIcon>edit</tb-icon>
-                      </button>
-                    </div>
-                  </div>
-                  <div class="tb-form-row space-between tb-flex">
-                    <div class="fixed-title-width" translate>gateway.timeseries</div>
-                    <div class="tb-flex ellipsis-chips-container">
-                      <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="converterTelemetry">
-                        <mat-chip *ngFor="let telemetry of converterTelemetry">
-                          {{ telemetry }}
-                        </mat-chip>
-                        <mat-chip class="mat-mdc-chip ellipsis-chip">
-                          <label class="ellipsis-text"></label>
-                        </mat-chip>
-                      </mat-chip-listbox>
-                      <button type="button"
-                              mat-icon-button
-                              color="primary"
-                              matTooltip="{{ 'action.edit' | translate }}"
-                              matTooltipPosition="above"
-                              #telemetryButton
-                              (click)="manageKeys($event, telemetryButton, MappingKeysType.TIMESERIES)">
-                        <tb-icon matButtonIcon>edit</tb-icon>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div class="tb-form-panel no-border no-padding" *ngIf="converterType === ConvertorTypeEnum.CUSTOM">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required"
-                         tb-hint-tooltip-icon="{{ 'gateway.extension-hint' | translate }}">
-                      {{ 'gateway.extension' | translate }}
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="extension" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.extension-required') | translate"
-                                  *ngIf="mappingForm.get('converter.custom.extension').hasError('required') &&
-                                         mappingForm.get('converter.custom.extension').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row space-between same-padding tb-flex column">
-                    <div class="tb-form-panel-title" translate>gateway.extension-configuration</div>
-                    <div class="tb-form-hint tb-primary-fill">{{ 'gateway.extension-configuration-hint' | translate }}</div>
-                    <div class="tb-form-row space-between tb-flex">
-                      <div class="fixed-title-width" translate>gateway.keys</div>
-                      <div class="tb-flex ellipsis-chips-container">
-                        <mat-chip-listbox [tb-ellipsis-chip-list]="customKeys" class="tb-flex">
-                          <mat-chip *ngFor="let telemetry of customKeys">
-                            {{ telemetry }}
-                          </mat-chip>
-                          <mat-chip class="mat-mdc-chip ellipsis-chip">
-                            <label class="ellipsis-text"></label>
-                          </mat-chip>
-                        </mat-chip-listbox>
-                        <button type="button"
-                                mat-icon-button
-                                color="primary"
-                                matTooltip="{{ 'action.edit' | translate }}"
-                                matTooltipPosition="above"
-                                #keysButton
-                                (click)="manageKeys($event, keysButton, MappingKeysType.CUSTOM)">
-                          <tb-icon matButtonIcon>edit</tb-icon>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ng-container>
-            </div>
-          </ng-container>
-        </ng-template>
-        <ng-template [ngSwitchCase]="MappingType.REQUESTS">
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.request-type</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <mat-select formControlName="requestType">
-                    <mat-option *ngFor="let type of requestTypes" [value]="type">
-                      {{ RequestTypesTranslationsMap.get(type) | translate }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-            </div>
-            <ng-container formGroupName="requestValue">
-              <ng-container [formGroup]="mappingForm.get('requestValue').get(requestMappingType)" [ngSwitch]="requestMappingType">
-                <div class="tb-form-row column-xs" fxLayoutAlign="space-between center"
-                     *ngIf="requestMappingType === RequestTypeEnum.ATTRIBUTE_REQUEST ||
-                            requestMappingType === RequestTypeEnum.CONNECT_REQUEST ||
-                            requestMappingType === RequestTypeEnum.DISCONNECT_REQUEST">
-                  <div class="fixed-title-width tb-required" translate>gateway.topic-filter</div>
-                  <div class="tb-flex no-gap">
-                    <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                      <input matInput name="value" [formControl]="mappingForm.get('requestValue').get(requestMappingType).get('topicFilter')"
-                             placeholder="{{ 'gateway.set' | translate }}"/>
-                      <mat-icon matSuffix
-                                matTooltipPosition="above"
-                                matTooltipClass="tb-error-tooltip"
-                                [matTooltip]="('gateway.topic-required') | translate"
-                                *ngIf="mappingForm.get('requestValue').get(requestMappingType).get('topicFilter').hasError('required') &&
-                                       mappingForm.get('requestValue').get(requestMappingType).get('topicFilter').touched"
-                                class="tb-error">
-                        warning
-                      </mat-icon>
-                      <div matSuffix
-                           class="see-example"
-                           [tb-help-popup]="'widget/lib/gateway/topic-filter_fn'"
-                           tb-help-popup-placement="left"
-                           [tb-help-popup-style]="{maxWidth: '970px'}">
-                      </div>
-                    </mat-form-field>
-                  </div>
-                </div>
-                <ng-template [ngSwitchCase]="RequestTypeEnum.CONNECT_REQUEST">
-                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.FULL" required="true">
-                  </tb-device-info-table>
-                </ng-template>
-                <ng-template [ngSwitchCase]="RequestTypeEnum.DISCONNECT_REQUEST">
-                  <tb-device-info-table formControlName="deviceInfo" [deviceInfoType]="DeviceInfoType.PARTIAL" required="true">
-                  </tb-device-info-table>
-                </ng-template>
-                <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_REQUEST">
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title tb-required" translate>gateway.from-device-request-settings</div>
-                    <div class="tb-form-hint tb-primary-fill" translate>
-                      gateway.from-device-request-settings-hint
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" formGroupName="deviceInfo">
-                      <div class="fixed-title-width tb-flex no-flex align-center" translate>
-                        <div class="tb-required" translate>gateway.device-info.device-name-expression</div>
-                      </div>
-                      <div class="tb-flex">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <mat-select formControlName="deviceNameExpressionSource">
-                            <mat-option *ngFor="let type of sourceTypes" [value]="type">
-                              {{ SourceTypeTranslationsMap.get(type) | translate }}
-                            </mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="deviceNameExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                            <mat-icon matSuffix
-                                      matTooltipPosition="above"
-                                      matTooltipClass="tb-error-tooltip"
-                                      [matTooltip]="('gateway.device-info.device-name-expression-required') | translate"
-                                      *ngIf="(mappingForm.get('requestValue.attributeRequests.deviceInfo.deviceNameExpression').hasError('required') &&
-                                             mappingForm.get('requestValue.attributeRequests.deviceInfo.deviceNameExpression').touched)"
-                                      class="tb-error">
-                              warning
-                            </mat-icon>
-                            <div matSuffix
-                                 class="see-example"
-                                 [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                                 tb-help-popup-placement="left"
-                                 [tb-help-popup-style]="{maxWidth: '970px'}">
-                            </div>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required" translate>gateway.attribute-name-expression</div>
-                      <div class="tb-flex">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <mat-select formControlName="attributeNameExpressionSource">
-                            <mat-option *ngFor="let type of sourceTypes" [value]="type">
-                              {{ SourceTypeTranslationsMap.get(type) | translate }}
-                            </mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="attributeNameExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.attribute-name-expression-required') | translate"
-                                    *ngIf="mappingForm.get('requestValue.attributeRequests.attributeNameExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.attributeRequests.attributeNameExpression').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                          <div matSuffix
-                               class="see-example"
-                               [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                               tb-help-popup-placement="left"
-                               [tb-help-popup-style]="{maxWidth: '970px'}">
-                          </div>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="tb-form-panel stroked">
-                    <div class="tb-form-panel-title tb-required" translate>gateway.to-device-response-settings</div>
-                    <div class="tb-form-hint tb-primary-fill" translate>
-                      gateway.to-device-response-settings-hint
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="valueExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.response-value-expression-required') | translate"
-                                    *ngIf="mappingForm.get('requestValue.attributeRequests.valueExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.attributeRequests.valueExpression').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                          <div matSuffix
-                               class="see-example"
-                               [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                               tb-help-popup-placement="left"
-                               [tb-help-popup-style]="{maxWidth: '970px'}">
-                          </div>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="topicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.response-topic-expression-required') | translate"
-                                    *ngIf="mappingForm.get('requestValue.attributeRequests.topicExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.attributeRequests.topicExpression').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                          <div matSuffix
-                               class="see-example"
-                               [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                               tb-help-popup-placement="left"
-                               [tb-help-popup-style]="{maxWidth: '970px'}">
-                          </div>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <mat-slide-toggle class="mat-slide" formControlName="retain">
-                        <mat-label tb-hint-tooltip-icon="{{ 'gateway.retain-hint' | translate }}">
-                          {{ 'gateway.retain' | translate }}
-                        </mat-label>
-                      </mat-slide-toggle>
-                    </div>
-                  </div>
-                </ng-template>
-                <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_UPDATE">
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required"
-                         tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}">
-                      {{ 'gateway.device-name-filter' | translate }}
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.device-name-filter-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.attributeUpdates.deviceNameFilter').hasError('required') &&
-                                         mappingForm.get('requestValue.attributeUpdates.deviceNameFilter').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.attribute-filter-hint' | translate }}">
-                      {{ 'gateway.attribute-filter' | translate }}
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="attributeFilter" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.attribute-filter-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.attributeUpdates.attributeFilter').hasError('required') &&
-                                           mappingForm.get('requestValue.attributeUpdates.attributeFilter').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.response-value-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="valueExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.response-value-expression-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.attributeUpdates.valueExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.attributeUpdates.valueExpression').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                        <div matSuffix
-                             class="see-example"
-                             [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                             tb-help-popup-placement="left"
-                             [tb-help-popup-style]="{maxWidth: '970px'}">
-                        </div>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="topicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.response-topic-expression-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.attributeUpdates.topicExpression').hasError('required') &&
-                                         mappingForm.get('requestValue.attributeUpdates.topicExpression').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                        <div matSuffix
-                             class="see-example"
-                             [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                             tb-help-popup-placement="left"
-                             [tb-help-popup-style]="{maxWidth: '970px'}">
-                        </div>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="retain">
-                      <mat-label tb-hint-tooltip-icon="{{ 'gateway.retain-hint' | translate }}">
-                        {{ 'gateway.retain' | translate }}
-                      </mat-label>
-                    </mat-slide-toggle>
-                  </div>
-                </ng-template>
-                <ng-template [ngSwitchCase]="RequestTypeEnum.SERVER_SIDE_RPC">
-                  <div class="tb-flex row center align-center no-gap fill-width">
-                    <tb-toggle-select formControlName="type" appearance="fill">
-                      <tb-toggle-option [value]="ServerSideRPCType.TWO_WAY">
-                        {{ 'gateway.with-response' | translate }}
-                      </tb-toggle-option>
-                      <tb-toggle-option [value]="ServerSideRPCType.ONE_WAY">
-                        {{ 'gateway.without-response' | translate }}
-                      </tb-toggle-option>
-                    </tb-toggle-select>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}">
-                      {{ 'gateway.device-name-filter' | translate }}
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="deviceNameFilter" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.device-name-filter-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.serverSideRpc.deviceNameFilter').hasError('required') &&
-                                           mappingForm.get('requestValue.serverSideRpc.deviceNameFilter').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.method-filter-hint' | translate }}">
-                      {{ 'gateway.method-filter' | translate }}
-                    </div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="methodFilter" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.method-filter-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.serverSideRpc.methodFilter').hasError('required') &&
-                                           mappingForm.get('requestValue.serverSideRpc.methodFilter').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.request-topic-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="requestTopicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.request-topic-expression-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.serverSideRpc.requestTopicExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.serverSideRpc.requestTopicExpression').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                        <div matSuffix
-                             class="see-example"
-                             [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                             tb-help-popup-placement="left"
-                             [tb-help-popup-style]="{maxWidth: '970px'}">
-                        </div>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.value-expression</div>
-                    <div class="tb-flex no-gap">
-                      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                        <input matInput name="value" formControlName="valueExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                        <mat-icon matSuffix
-                                  matTooltipPosition="above"
-                                  matTooltipClass="tb-error-tooltip"
-                                  [matTooltip]="('gateway.value-expression-required') | translate"
-                                  *ngIf="mappingForm.get('requestValue.serverSideRpc.valueExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.serverSideRpc.valueExpression').touched"
-                                  class="tb-error">
-                          warning
-                        </mat-icon>
-                        <div matSuffix
-                             class="see-example"
-                             [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                             tb-help-popup-placement="left"
-                             [tb-help-popup-style]="{maxWidth: '970px'}">
-                        </div>
-                      </mat-form-field>
-                    </div>
-                  </div>
-                  <ng-container *ngIf="mappingForm.get('requestValue.serverSideRpc.type').value === ServerSideRPCType.TWO_WAY">
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required" translate>gateway.response-topic-expression</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" formControlName="responseTopicExpression" placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.response-topic-expression-required') | translate"
-                                    *ngIf="mappingForm.get('requestValue.serverSideRpc.responseTopicExpression').hasError('required') &&
-                                           mappingForm.get('requestValue.serverSideRpc.responseTopicExpression').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                          <div matSuffix
-                               class="see-example"
-                               [tb-help-popup]="'widget/lib/gateway/expressions_fn'"
-                               tb-help-popup-placement="left"
-                               [tb-help-popup-style]="{maxWidth: '970px'}">
-                          </div>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}">
-                        {{ 'gateway.response-topic-Qos' | translate }}
-                      </div>
-                      <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
-                        <mat-select formControlName="responseTopicQoS">
-                          <mat-option *ngFor="let type of qualityTypes" [value]="type">
-                            {{ QualityTranslationsMap.get(type) | translate }}
-                          </mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
-                    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width tb-required" translate>gateway.response-timeout</div>
-                      <div class="tb-flex no-gap">
-                        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" type="number" min="1" formControlName="responseTimeout"
-                                 placeholder="{{ 'gateway.set' | translate }}"/>
-                          <mat-icon matSuffix
-                                    matTooltipPosition="above"
-                                    matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="responseTimeoutErrorTooltip"
-                                    *ngIf="(mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('required') ||
-                                            mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('min')) &&
-                                            mappingForm.get('requestValue.serverSideRpc.responseTimeout').touched"
-                                    class="tb-error">
-                            warning
-                          </mat-icon>
-                        </mat-form-field>
-                      </div>
-                    </div>
-                  </ng-container>
-                </ng-template>
-              </ng-container>
-            </ng-container>
-        </ng-template>
-        <ng-template [ngSwitchCase]="MappingType.OPCUA">
-          <div class="tb-form-row column-xs" fxLayoutAlign="center">
-            <div class="tb-flex no-flex align-center" translate>
-              <div class="tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-node-hint' | translate }}">
-                {{ 'gateway.device-node' | translate }}
-              </div>
-            </div>
-            <div class="tb-flex device-config">
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                <mat-select formControlName="deviceNodeSource">
-                  <mat-option *ngFor="let type of [OPCUaSourceTypesEnum.PATH, OPCUaSourceTypesEnum.IDENTIFIER]" [value]="type">
-                    {{ SourceTypeTranslationsMap.get(type) | translate }}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-              <mat-form-field class="tb-flex no-gap device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">
-                <input matInput name="value" formControlName="deviceNodePattern" placeholder="{{ 'gateway.set' | translate }}"/>
-                <mat-icon matSuffix
-                          matTooltipPosition="above"
-                          matTooltipClass="tb-error-tooltip"
-                          [matTooltip]="('gateway.device-node-required') | translate"
-                          *ngIf="(mappingForm.get('deviceNodePattern').hasError('required') &&
-                                  mappingForm.get('deviceNodePattern').touched)"
-                          class="tb-error">
-                  warning
-                </mat-icon>
-                <div matSuffix
-                     class="see-example"
-                     [tb-help-popup]="'device-node' | getGatewayHelpLink: mappingForm.get('deviceNodeSource').value"
-                     tb-help-popup-placement="left"
-                     [tb-help-popup-style]="{maxWidth: '970px'}">
-                </div>
-              </mat-form-field>
-            </div>
-          </div>
-          <tb-device-info-table formControlName="deviceInfo" [sourceTypes]="OPCUaSourceTypes" [deviceInfoType]="DeviceInfoType.FULL" required="true">
-          </tb-device-info-table>
-          <div class="tb-form-row space-between tb-flex">
-            <div class="fixed-title-width" translate>gateway.attributes</div>
-            <div class="tb-flex ellipsis-chips-container">
-              <mat-chip-listbox [tb-ellipsis-chip-list]="opcAttributes" class="tb-flex">
-                <mat-chip *ngFor="let attribute of opcAttributes">
-                  {{ attribute }}
-                </mat-chip>
-                <mat-chip class="mat-mdc-chip ellipsis-chip">
-                  <label class="ellipsis-text"></label>
-                </mat-chip>
-              </mat-chip-listbox>
-              <button type="button"
-                      mat-icon-button
-                      color="primary"
-                      matTooltip="{{ 'action.edit' | translate }}"
-                      matTooltipPosition="above"
-                      #opcAttributesButton
-                      (click)="manageKeys($event, opcAttributesButton, MappingKeysType.ATTRIBUTES)">
-                <tb-icon matButtonIcon>edit</tb-icon>
-              </button>
-            </div>
-          </div>
-          <div class="tb-form-row space-between tb-flex">
-            <div class="fixed-title-width" translate>gateway.timeseries</div>
-            <div class="tb-flex ellipsis-chips-container">
-              <mat-chip-listbox class="tb-flex" [tb-ellipsis-chip-list]="opcTelemetry">
-                <mat-chip *ngFor="let telemetry of opcTelemetry">
-                  {{ telemetry }}
-                </mat-chip>
-                <mat-chip class="mat-mdc-chip ellipsis-chip">
-                  <label class="ellipsis-text"></label>
-                </mat-chip>
-              </mat-chip-listbox>
-              <button type="button"
-                      mat-icon-button
-                      color="primary"
-                      matTooltip="{{ 'action.edit' | translate }}"
-                      matTooltipPosition="above"
-                      #opcTelemetryButton
-                      (click)="manageKeys($event, opcTelemetryButton, MappingKeysType.TIMESERIES)">
-                <tb-icon matButtonIcon>edit</tb-icon>
-              </button>
-            </div>
-          </div>
-          <div class="tb-form-row space-between tb-flex">
-            <div class="fixed-title-width" translate>gateway.attribute-updates</div>
-            <div class="tb-flex ellipsis-chips-container">
-              <mat-chip-listbox [tb-ellipsis-chip-list]="opcAttributesUpdates" class="tb-flex">
-                <mat-chip *ngFor="let attribute of opcAttributesUpdates">
-                  {{ attribute }}
-                </mat-chip>
-                <mat-chip class="mat-mdc-chip ellipsis-chip">
-                  <label class="ellipsis-text"></label>
-                </mat-chip>
-              </mat-chip-listbox>
-              <button type="button"
-                      mat-icon-button
-                      color="primary"
-                      matTooltip="{{ 'action.edit' | translate }}"
-                      matTooltipPosition="above"
-                      #attributesUpdatesButton
-                      (click)="manageKeys($event, attributesUpdatesButton, MappingKeysType.ATTRIBUTES_UPDATES)">
-                <tb-icon matButtonIcon>edit</tb-icon>
-              </button>
-            </div>
-          </div>
-          <div class="tb-form-row space-between tb-flex">
-            <div class="fixed-title-width" translate>gateway.rpc-methods</div>
-            <div class="tb-flex ellipsis-chips-container">
-              <mat-chip-listbox [tb-ellipsis-chip-list]="opcRpcMethods" class="tb-flex">
-                <mat-chip *ngFor="let attribute of opcRpcMethods">
-                  {{ attribute }}
-                </mat-chip>
-                <mat-chip class="mat-mdc-chip ellipsis-chip">
-                  <label class="ellipsis-text"></label>
-                </mat-chip>
-              </mat-chip-listbox>
-              <button type="button"
-                      mat-icon-button
-                      color="primary"
-                      matTooltip="{{ 'action.edit' | translate }}"
-                      matTooltipPosition="above"
-                      #rpcMethodsButton
-                      (click)="manageKeys($event, rpcMethodsButton, MappingKeysType.RPC_METHODS)">
-                <tb-icon matButtonIcon>edit</tb-icon>
-              </button>
-            </div>
-          </div>
-        </ng-template>
-      </ng-container>
-    </div>
-  </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-button color="primary"
-            type="button"
-            cdkFocusInitial
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            (click)="add()"
-            [disabled]="mappingForm.invalid || !mappingForm.dirty || !keysPopupClosed">
-      {{ this.data.buttonTitle | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
deleted file mode 100644
index 4212e8f834..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  display: grid;
-  height: 100%;
-
-  .key-mapping {
-    max-width: 900px;
-    display: flex;
-    flex-direction: column;
-
-    .mat-toolbar {
-      min-height: 64px;
-    }
-
-    tb-toggle-select {
-      padding: 4px 0;
-    }
-  }
-
-  .mat-mdc-dialog-content {
-    height: 670px;
-  }
-
-  .ellipsis-chips-container {
-    max-width: 70%;
-  }
-}
-
-:host ::ng-deep {
-  .key-mapping {
-    .mat-mdc-chip-listbox {
-      .mdc-evolution-chip-set__chips {
-        justify-content: flex-end;
-        align-items: center;
-        flex-wrap: nowrap;
-      }
-    }
-  }
-  .tb-form-row {
-    .fixed-title-width {
-      min-width: 40px;
-      width: 35%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .mat-mdc-form-field {
-      width: 0;
-    }
-  }
-
-  .see-example {
-    width: 32px;
-    height: 32px;
-    margin: 4px;
-  }
-
-  .mat-mdc-form-field-icon-suffix {
-    display: flex;
-  }
-
-  .device-config {
-    gap: 12px;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  .device-node-pattern-field {
-    flex-basis: 3%;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
deleted file mode 100644
index ef8d7ed7ce..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
+++ /dev/null
@@ -1,421 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, Inject, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { DialogComponent } from '@shared/components/dialog.component';
-import { Router } from '@angular/router';
-import {
-  Attribute,
-  AttributesUpdate,
-  ConnectorMapping,
-  ConnectorMappingFormValue,
-  ConverterMappingFormValue,
-  ConvertorType,
-  ConvertorTypeTranslationsMap,
-  DataConversionTranslationsMap,
-  DeviceConnectorMapping,
-  DeviceInfoType,
-  HelpLinkByMappingTypeMap,
-  MappingHintTranslationsMap,
-  MappingInfo,
-  MappingKeysAddKeyTranslationsMap,
-  MappingKeysDeleteKeyTranslationsMap,
-  MappingKeysNoKeysTextTranslationsMap,
-  MappingKeysPanelTitleTranslationsMap,
-  MappingKeysType,
-  MappingType,
-  MappingTypeTranslationsMap,
-  noLeadTrailSpacesRegex,
-  OPCUaSourceType,
-  QualityTypes,
-  QualityTypeTranslationsMap,
-  RequestMappingData,
-  RequestMappingFormValue,
-  RequestType,
-  RequestTypesTranslationsMap,
-  RpcMethod,
-  ServerSideRPCType,
-  SourceType,
-  SourceTypeTranslationsMap,
-  Timeseries
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { Subject } from 'rxjs';
-import { startWith, takeUntil } from 'rxjs/operators';
-import { MatButton } from '@angular/material/button';
-import { TbPopoverService } from '@shared/components/popover.service';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  MappingDataKeysPanelComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component';
-
-@Component({
-  selector: 'tb-mapping-dialog',
-  templateUrl: './mapping-dialog.component.html',
-  styleUrls: ['./mapping-dialog.component.scss']
-})
-export class MappingDialogComponent extends DialogComponent<MappingDialogComponent, ConnectorMapping> implements OnDestroy {
-
-  mappingForm: UntypedFormGroup;
-
-  MappingType = MappingType;
-
-  qualityTypes = QualityTypes;
-  QualityTranslationsMap = QualityTypeTranslationsMap;
-
-  convertorTypes: ConvertorType[] = Object.values(ConvertorType);
-  ConvertorTypeEnum = ConvertorType;
-  ConvertorTypeTranslationsMap = ConvertorTypeTranslationsMap;
-
-  sourceTypes: SourceType[] = Object.values(SourceType);
-  OPCUaSourceTypes = Object.values(OPCUaSourceType) as Array<OPCUaSourceType>;
-  OPCUaSourceTypesEnum = OPCUaSourceType;
-  sourceTypesEnum = SourceType;
-  SourceTypeTranslationsMap = SourceTypeTranslationsMap;
-
-  requestTypes: RequestType[] = Object.values(RequestType);
-  RequestTypeEnum = RequestType;
-  RequestTypesTranslationsMap = RequestTypesTranslationsMap;
-
-  DeviceInfoType = DeviceInfoType;
-
-  ServerSideRPCType = ServerSideRPCType;
-
-  MappingKeysType = MappingKeysType;
-
-  MappingHintTranslationsMap = MappingHintTranslationsMap;
-
-  MappingTypeTranslationsMap = MappingTypeTranslationsMap;
-
-  DataConversionTranslationsMap = DataConversionTranslationsMap;
-
-  HelpLinkByMappingTypeMap = HelpLinkByMappingTypeMap;
-
-  keysPopupClosed = true;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(protected store: Store<AppState>,
-              protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: MappingInfo,
-              public dialogRef: MatDialogRef<MappingDialogComponent, ConnectorMapping>,
-              private fb: FormBuilder,
-              private popoverService: TbPopoverService,
-              private renderer: Renderer2,
-              private viewContainerRef: ViewContainerRef,
-              private translate: TranslateService) {
-    super(store, router, dialogRef);
-
-    this.createMappingForm();
-  }
-
-  get converterAttributes(): Array<string> {
-    if (this.converterType) {
-      return this.mappingForm.get('converter').get(this.converterType).value.attributes.map((value: Attribute) => value.key);
-    }
-  }
-
-  get converterTelemetry(): Array<string> {
-    if (this.converterType) {
-      return this.mappingForm.get('converter').get(this.converterType).value.timeseries.map((value: Timeseries) => value.key);
-    }
-  }
-
-  get opcAttributes(): Array<string> {
-    return this.mappingForm.get('attributes').value?.map((value: Attribute) => value.key) || [];
-  }
-
-  get opcTelemetry(): Array<string> {
-    return this.mappingForm.get('timeseries').value?.map((value: Timeseries) => value.key) || [];
-  }
-
-  get opcRpcMethods(): Array<string> {
-    return this.mappingForm.get('rpc_methods').value?.map((value: RpcMethod) => value.method) || [];
-  }
-
-  get opcAttributesUpdates(): Array<string> {
-    return this.mappingForm.get('attributes_updates')?.value?.map((value: AttributesUpdate) => value.key) || [];
-  }
-
-  get converterType(): ConvertorType {
-    return this.mappingForm.get('converter').get('type').value;
-  }
-
-  get customKeys(): Array<string> {
-    return Object.keys(this.mappingForm.get('converter').get('custom').value.extensionConfig);
-  }
-
-  get requestMappingType(): RequestType {
-    return this.mappingForm.get('requestType').value;
-  }
-
-  get responseTimeoutErrorTooltip(): string {
-    const control = this.mappingForm.get('requestValue.serverSideRpc.responseTimeout');
-    if (control.hasError('required')) {
-      return this.translate.instant('gateway.response-timeout-required');
-    } else if (control.hasError('min')) {
-      return this.translate.instant('gateway.response-timeout-limits-error', {min: 1});
-    }
-    return '';
-  }
-
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    super.ngOnDestroy();
-  }
-
-  private createMappingForm(): void {
-    switch (this.data.mappingType) {
-      case MappingType.DATA:
-        this.mappingForm = this.fb.group({});
-        this.createDataMappingForm();
-        break;
-      case MappingType.REQUESTS:
-        this.mappingForm = this.fb.group({});
-        this.createRequestMappingForm();
-        break;
-      case MappingType.OPCUA:
-        this.createOPCUAMappingForm();
-    }
-  }
-
-  cancel(): void {
-    if (this.keysPopupClosed) {
-      this.dialogRef.close(null);
-    }
-  }
-
-  add(): void {
-    if (this.mappingForm.valid) {
-      this.dialogRef.close(this.prepareMappingData());
-    }
-  }
-
-  manageKeys($event: Event, matButton: MatButton, keysType: MappingKeysType): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    const trigger = matButton._elementRef.nativeElement;
-    if (this.popoverService.hasPopover(trigger)) {
-      this.popoverService.hidePopover(trigger);
-    } else {
-      const group = this.data.mappingType !== MappingType.OPCUA ? this.mappingForm.get('converter').get(this.converterType)
-        : this.mappingForm;
-
-      const keysControl = group.get(keysType);
-      const ctx: { [key: string]: any } = {
-        keys: keysControl.value,
-        keysType,
-        rawData: this.mappingForm.get('converter.type')?.value === ConvertorType.BYTES,
-        panelTitle: MappingKeysPanelTitleTranslationsMap.get(keysType),
-        addKeyTitle: MappingKeysAddKeyTranslationsMap.get(keysType),
-        deleteKeyTitle: MappingKeysDeleteKeyTranslationsMap.get(keysType),
-        noKeysText: MappingKeysNoKeysTextTranslationsMap.get(keysType)
-      };
-      if (this.data.mappingType === MappingType.OPCUA) {
-        ctx.valueTypeKeys = Object.values(OPCUaSourceType);
-        ctx.valueTypeEnum = OPCUaSourceType;
-        ctx.valueTypes = SourceTypeTranslationsMap;
-      }
-      this.keysPopupClosed = false;
-      const dataKeysPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, MappingDataKeysPanelComponent, 'leftBottom', false, null,
-        ctx,
-        {},
-        {}, {}, true);
-      dataKeysPanelPopover.tbComponentRef.instance.popover = dataKeysPanelPopover;
-      dataKeysPanelPopover.tbComponentRef.instance.keysDataApplied.pipe(takeUntil(this.destroy$)).subscribe((keysData) => {
-        dataKeysPanelPopover.hide();
-        keysControl.patchValue(keysData);
-        keysControl.markAsDirty();
-      });
-      dataKeysPanelPopover.tbHideStart.pipe(takeUntil(this.destroy$)).subscribe(() => {
-        this.keysPopupClosed = true;
-      });
-    }
-  }
-
-  private prepareMappingData(): ConnectorMapping {
-    const formValue = this.mappingForm.value;
-    switch (this.data.mappingType) {
-      case MappingType.DATA:
-        const {converter, topicFilter, subscriptionQos} = formValue;
-        return {
-          topicFilter,
-          subscriptionQos,
-          converter: {
-            type: converter.type,
-            ...converter[converter.type]
-          }
-        };
-      case MappingType.REQUESTS:
-        return {
-          requestType: formValue.requestType,
-          requestValue: formValue.requestValue[formValue.requestType]
-        };
-      default:
-        return formValue;
-    }
-  }
-
-  private getFormValueData(): ConnectorMappingFormValue {
-    if (this.data.value && Object.keys(this.data.value).length) {
-      switch (this.data.mappingType) {
-        case MappingType.DATA:
-          const {converter, topicFilter, subscriptionQos} = this.data.value;
-          return {
-            topicFilter,
-            subscriptionQos,
-            converter: {
-              type: converter.type,
-              [converter.type]: {...converter}
-            }
-          } as ConverterMappingFormValue;
-        case MappingType.REQUESTS:
-          return {
-            requestType: this.data.value.requestType,
-            requestValue: {
-              [this.data.value.requestType]: this.data.value.requestValue
-            } as Record<RequestType, RequestMappingData>
-          };
-        default:
-          return this.data.value as DeviceConnectorMapping;
-      }
-    }
-  }
-
-  private createDataMappingForm(): void {
-    this.mappingForm.addControl('topicFilter',
-      this.fb.control('', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]));
-    this.mappingForm.addControl('subscriptionQos', this.fb.control(0));
-    this.mappingForm.addControl('converter', this.fb.group({
-      type: [ConvertorType.JSON, []],
-      json: this.fb.group({
-        deviceInfo: [{}, []],
-        attributes: [[], []],
-        timeseries: [[], []]
-      }),
-      bytes: this.fb.group({
-        deviceInfo: [{}, []],
-        attributes: [[], []],
-        timeseries: [[], []]
-      }),
-      custom: this.fb.group({
-        extension: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        extensionConfig: [{}, []]
-      }),
-    }));
-    this.mappingForm.patchValue(this.getFormValueData());
-    this.mappingForm.get('converter.type').valueChanges.pipe(
-      startWith(this.mappingForm.get('converter.type').value),
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      const converterGroup = this.mappingForm.get('converter');
-      converterGroup.get('json').disable({emitEvent: false});
-      converterGroup.get('bytes').disable({emitEvent: false});
-      converterGroup.get('custom').disable({emitEvent: false});
-      converterGroup.get(value).enable({emitEvent: false});
-    });
-  }
-
-  private createRequestMappingForm(): void {
-    this.mappingForm.addControl('requestType', this.fb.control(RequestType.CONNECT_REQUEST, []));
-    this.mappingForm.addControl('requestValue', this.fb.group({
-      connectRequests: this.fb.group({
-        topicFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        deviceInfo: [{}, []]
-      }),
-      disconnectRequests: this.fb.group({
-        topicFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        deviceInfo: [{}, []]
-      }),
-      attributeRequests: this.fb.group({
-        topicFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        deviceInfo: this.fb.group({
-          deviceNameExpressionSource: [SourceType.MSG, []],
-          deviceNameExpression: ['', [Validators.required]],
-        }),
-        attributeNameExpressionSource: [SourceType.MSG, []],
-        attributeNameExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        topicExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        valueExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        retain: [false, []]
-      }),
-      attributeUpdates: this.fb.group({
-        deviceNameFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        attributeFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        topicExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        valueExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        retain: [true, []]
-      }),
-      serverSideRpc: this.fb.group({
-        type: [ServerSideRPCType.TWO_WAY, []],
-        deviceNameFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        methodFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        requestTopicExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        responseTopicExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        valueExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        responseTopicQoS: [0, []],
-        responseTimeout: [10000, [Validators.required, Validators.min(1)]],
-      })
-    }));
-    this.mappingForm.get('requestType').valueChanges.pipe(
-      startWith(this.mappingForm.get('requestType').value),
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      const requestValueGroup = this.mappingForm.get('requestValue');
-      requestValueGroup.get('connectRequests').disable({emitEvent: false});
-      requestValueGroup.get('disconnectRequests').disable({emitEvent: false});
-      requestValueGroup.get('attributeRequests').disable({emitEvent: false});
-      requestValueGroup.get('attributeUpdates').disable({emitEvent: false});
-      requestValueGroup.get('serverSideRpc').disable({emitEvent: false});
-      requestValueGroup.get(value).enable();
-    });
-    this.mappingForm.get('requestValue.serverSideRpc.type').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      const requestValueGroup = this.mappingForm.get('requestValue.serverSideRpc');
-      if (value === ServerSideRPCType.ONE_WAY) {
-        requestValueGroup.get('responseTopicExpression').disable({emitEvent: false});
-        requestValueGroup.get('responseTopicQoS').disable({emitEvent: false});
-        requestValueGroup.get('responseTimeout').disable({emitEvent: false});
-      } else {
-        requestValueGroup.get('responseTopicExpression').enable({emitEvent: false});
-        requestValueGroup.get('responseTopicQoS').enable({emitEvent: false});
-        requestValueGroup.get('responseTimeout').enable({emitEvent: false});
-      }
-    });
-    this.mappingForm.patchValue(this.getFormValueData());
-  }
-
-  private createOPCUAMappingForm(): void {
-    this.mappingForm = this.fb.group({
-      deviceNodeSource: [OPCUaSourceType.PATH, []],
-      deviceNodePattern: ['', [Validators.required]],
-      deviceInfo: [{}, []],
-      attributes: [[], []],
-      timeseries: [[], []],
-      rpc_methods: [[], []],
-      attributes_updates: [[], []]
-    });
-    this.mappingForm.patchValue(this.getFormValueData());
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
deleted file mode 100644
index cec81ab637..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ /dev/null
@@ -1,322 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="connector-container tb-form-panel no-border">
-  <section class="table-section tb-form-panel no-padding flex section-container">
-    <mat-toolbar class="mat-mdc-table-toolbar">
-      <h2>{{ 'gateway.connectors' | translate }}</h2>
-      <span fxFlex></span>
-      <button *ngIf="dataSource?.data?.length"
-              mat-icon-button
-              [disabled]="isLoading$ | async"
-              (click)="addConnector($event)"
-              matTooltip="{{ 'action.add' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>add</mat-icon>
-      </button>
-    </mat-toolbar>
-    <div class="table-container">
-      <section *ngIf="!dataSource?.data?.length" fxLayoutAlign="center center"
-               class="mat-headline-5 tb-absolute-fill tb-add-new">
-        <button mat-button class="connector"
-        (click)="addConnector($event)">
-          <mat-icon class="tb-mat-96">add</mat-icon>
-          <span>{{ 'gateway.add-connector' | translate }}</span>
-        </button>
-      </section>
-      <table mat-table [dataSource]="dataSource"
-             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
-             matSortDisableClear>
-        <ng-container matColumnDef="enabled" sticky>
-          <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">
-            {{ 'gateway.connectors-table-enabled' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute">
-            <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
-                              (click)="$event.stopPropagation(); onEnableConnector(attribute)"></mat-slide-toggle>
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="key">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
-            {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
-          <mat-cell *matCellDef="let attribute">
-            {{ attribute.key }}
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="type">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-            {{ 'gateway.connectors-table-type' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-            {{ returnType(attribute) }}
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="syncStatus">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-            {{ 'gateway.configuration' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-              <div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'">
-                {{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }}
-              </div>
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="errors">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-            {{ 'gateway.connectors-table-status' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-            <span class="dot"
-                  matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}"
-                  matTooltipPosition="above"
-                  (click)="connectorLogs(attribute, $event)"
-                  [class]="{'hasErrors': +getErrorsCount(attribute) > 0,
-                            'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span>
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px', textAlign: 'center'}">
-            {{ 'gateway.connectors-table-actions' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute"
-                    [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <button mat-icon-button
-                      matTooltip="RPC"
-                      matTooltipPosition="above"
-                      (click)="connectorRpc(attribute, $event)">
-                <mat-icon>private_connectivity</mat-icon>
-              </button>
-              <button mat-icon-button
-                      matTooltip="Logs"
-                      matTooltipPosition="above"
-                      (click)="connectorLogs(attribute, $event)">
-                <mat-icon>list</mat-icon>
-              </button>
-              <button mat-icon-button
-                      matTooltip="Delete connector"
-                      matTooltipPosition="above"
-                      (click)="deleteConnector(attribute, $event)">
-                <mat-icon>delete</mat-icon>
-              </button>
-            </div>
-            <div fxHide fxShow.lt-lg>
-              <button mat-icon-button
-                      (click)="$event.stopPropagation()"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <button mat-icon-button
-                        matTooltip="RPC"
-                        matTooltipPosition="above"
-                        (click)="connectorRpc(attribute, $event)">
-                  <mat-icon>private_connectivity</mat-icon>
-                </button>
-                <button mat-icon-button
-                        matTooltip="Logs"
-                        matTooltipPosition="above"
-                        (click)="connectorLogs(attribute, $event)">
-                  <mat-icon>list</mat-icon>
-                </button>
-                <button mat-icon-button
-                        matTooltip="Delete connector"
-                        matTooltipPosition="above"
-                        (click)="deleteConnector(attribute, $event)">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </mat-menu>
-            </div>
-          </mat-cell>
-        </ng-container>
-        <mat-header-row class="mat-row-select"
-                        *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}"
-                 *matRowDef="let attribute; let i = index; columns: displayedColumns;" (click)="selectConnector($event, attribute)"></mat-row>
-      </table>
-    </div>
-  </section>
-  <section [formGroup]="connectorForm" class="tb-form-panel section-container flex">
-    <div class="tb-form-panel-title tb-flex no-flex space-between align-center">
-      <div class="tb-form-panel-title">
-        {{ initialConnector?.type ? GatewayConnectorTypesTranslatesMap.get(initialConnector.type) : '' }}
-        {{ 'gateway.configuration' | translate }}
-        <span class="version-placeholder" *ngIf="connectorForm.get('configVersion').value">v{{connectorForm.get('configVersion').value}}</span>
-      </div>
-      <tb-toggle-select *ngIf="initialConnector && allowBasicConfig.has(initialConnector.type)"
-                        formControlName="mode" appearance="fill">
-        <tb-toggle-option [value]="ConnectorConfigurationModes.BASIC">
-          {{ 'gateway.basic' | translate }}
-        </tb-toggle-option>
-        <tb-toggle-option [value]="ConnectorConfigurationModes.ADVANCED">
-          {{ 'gateway.advanced' | translate }}
-        </tb-toggle-option>
-      </tb-toggle-select>
-    </div>
-    <span [fxShow]="!initialConnector"
-          fxLayoutAlign="center center"
-          class="no-data-found" translate>
-      gateway.select-connector
-    </span>
-    <section class="tb-form-panel section-container no-border no-padding tb-flex space-between" *ngIf="initialConnector">
-      <ng-container *ngIf="connectorForm.get('mode')?.value === ConnectorConfigurationModes.BASIC else defaultConfig">
-        <ng-container [ngSwitch]="initialConnector.type">
-          <ng-container *ngSwitchCase="ConnectorType.MQTT">
-            <tb-mqtt-basic-config
-              *ngIf="connectorForm.get('configVersion').value === GatewayVersion.Current else legacy"
-              formControlName="basicConfig"
-              [generalTabContent]="generalTabContent"
-              (initialized)="basicConfigInitSubject.next()"
-            />
-            <ng-template #legacy>
-              <tb-mqtt-legacy-basic-config
-                (initialized)="basicConfigInitSubject.next()"
-                formControlName="basicConfig"
-                [generalTabContent]="generalTabContent"
-              />
-            </ng-template>
-          </ng-container>
-          <ng-container *ngSwitchCase="ConnectorType.OPCUA">
-            <tb-opc-ua-basic-config
-              *ngIf="connectorForm.get('configVersion').value === GatewayVersion.Current else legacy"
-              formControlName="basicConfig"
-              [generalTabContent]="generalTabContent"
-              (initialized)="basicConfigInitSubject.next()"
-            />
-            <ng-template #legacy>
-              <tb-opc-ua-legacy-basic-config
-                (initialized)="basicConfigInitSubject.next()"
-                formControlName="basicConfig"
-                [generalTabContent]="generalTabContent"
-              />
-            </ng-template>
-          </ng-container>
-          <ng-container *ngSwitchCase="ConnectorType.MODBUS">
-            <tb-modbus-basic-config
-              *ngIf="connectorForm.get('configVersion').value === GatewayVersion.Current else legacy"
-              formControlName="basicConfig"
-              [generalTabContent]="generalTabContent"
-              (initialized)="basicConfigInitSubject.next()"
-            />
-            <ng-template #legacy>
-              <tb-modbus-legacy-basic-config
-                formControlName="basicConfig"
-                (initialized)="basicConfigInitSubject.next()"
-                [generalTabContent]="generalTabContent"
-              />
-            </ng-template>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-      <ng-template #defaultConfig>
-        <mat-tab-group>
-          <mat-tab label="{{ 'gateway.general' | translate }}">
-            <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
-          </mat-tab>
-          <mat-tab label="{{ 'gateway.configuration' | translate }}*">
-            <tb-json-object-edit
-              fillHeight="true"
-              class="tb-flex fill-height"
-              fxLayout="column"
-              jsonRequired
-              label="{{ 'gateway.configuration' | translate }}"
-              formControlName="configurationJson">
-            </tb-json-object-edit>
-          </mat-tab>
-        </mat-tab-group>
-      </ng-template>
-      <div fxLayoutAlign="end center">
-        <button mat-raised-button color="primary"
-                type="button"
-                [disabled]="!connectorForm.dirty || connectorForm.invalid"
-                (click)="saveConnector(false)">
-          {{ 'action.save' | translate }}
-        </button>
-      </div>
-    </section>
-  </section>
-</div>
-<ng-template #generalTabContent>
-  <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding padding-top section-container flex">
-    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center" >
-      <div class="fixed-title-width tb-required" translate>gateway.name</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput autocomplete="off" name="value" formControlName="name" placeholder="{{ 'gateway.set' | translate }}"/>
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="(connectorForm.get('name').hasError('duplicateName') ?
-                                    'gateway.connector-duplicate-name' : 'gateway.name-required') | translate"
-                    *ngIf="(connectorForm.get('name').hasError('required') && connectorForm.get('name').touched) ||
-                                    connectorForm.get('name').hasError('duplicateName')"
-                    class="tb-error">
-            warning
-          </mat-icon>
-        </mat-form-field>
-      </div>
-    </div>
-    <div *ngIf="connectorForm.get('type').value === ConnectorType.CUSTOM" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.connectors-table-class</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput name="value" formControlName="class" placeholder="{{ 'gateway.set' | translate }}"/>
-        </mat-form-field>
-      </div>
-    </div>
-    <div *ngIf="connectorForm.get('type').value === ConnectorType.GRPC" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.connectors-table-key</div>
-      <div class="tb-flex no-gap">
-        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-          <input matInput name="value" formControlName="key" placeholder="{{ 'gateway.set' | translate }}"/>
-        </mat-form-field>
-      </div>
-    </div>
-    <div class="tb-form-panel stroked">
-      <div class="tb-form-panel-title" translate>gateway.logs-configuration</div>
-      <div class="tb-form-row" fxLayoutAlign="space-between center">
-        <mat-slide-toggle class="mat-slide" formControlName="enableRemoteLogging">
-          <mat-label>
-            {{ 'gateway.enable-remote-logging' | translate }}
-          </mat-label>
-        </mat-slide-toggle>
-      </div>
-      <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" translate>gateway.remote-logging-level</div>
-        <div class="tb-flex no-gap">
-          <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-            <mat-select formControlName="logLevel">
-              <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-      </div>
-    </div>
-    <div *ngIf="connectorForm.get('type').value === ConnectorType.MQTT" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <mat-slide-toggle class="mat-slide" formControlName="sendDataOnlyOnChange">
-        <mat-label tb-hint-tooltip-icon="{{ 'gateway.send-change-data-hint' | translate }}">
-          {{ 'gateway.send-change-data' | translate }}
-        </mat-label>
-      </mat-slide-toggle>
-    </div>
-    <tb-report-strategy
-      *ngIf="connectorForm.get('type').value === ConnectorType.MODBUS && connectorForm.get('configVersion').value === GatewayVersion.Current"
-      formControlName="reportStrategy"
-    />
-  </section>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
deleted file mode 100644
index 5d8c6aad5b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@import '../../../../../../../scss/constants';
-
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-  overflow-x: auto;
-  padding: 0;
-
-  .version-placeholder {
-    color: gray;
-    font-size: 12px
-  }
-
-  .connector-container {
-    height: 100%;
-    width: 100%;
-    flex-direction: row;
-    @media #{$mat-lt-lg} {
-      flex-direction: column;
-    }
-
-    & > section:not(.table-section) {
-      max-width: unset;
-      @media #{$mat-gt-md} {
-        max-width: 50%;
-      }
-    }
-
-    .table-section {
-      min-height: 35vh;
-      overflow: hidden;
-
-      .table-container {
-        overflow: auto;
-      }
-    }
-
-    .flex {
-      flex: 1;
-    }
-
-    .input-container {
-      height: auto;
-    }
-
-    .section-container {
-      background-color: #fff;
-    }
-  }
-
-  .mat-toolbar {
-    background: transparent;
-    color: rgba(0, 0, 0, .87) !important;
-  }
-
-  .mat-mdc-slide-toggle {
-    margin: 0 8px;
-  }
-
-  .status {
-    text-align: center;
-    border-radius: 16px;
-    font-weight: 500;
-    width: fit-content;
-    padding: 5px 15px;
-    &-sync {
-      background: rgba(25, 128, 56, .06);
-      color: rgb(25, 128, 56);
-    }
-    &-unsync {
-      background: rgba(203, 37, 48, .06);
-      color: rgb(203, 37, 48);
-    }
-  }
-
-  mat-row {
-    cursor: pointer;
-  }
-
-  .dot {
-    height: 12px;
-    width: 12px;
-    background-color: #bbb;
-    border-radius: 50%;
-    display: inline-block;
-  }
-
-  .hasErrors {
-    background-color: rgb(203, 37, 48);
-  }
-
-  .noErrors {
-    background-color: rgb(25, 128, 56);
-  }
-}
-
-:host ::ng-deep {
-  .connector-container {
-
-    .mat-mdc-tab-group, .mat-mdc-tab-body-wrapper {
-      height: 100%;
-    }
-
-    .mat-mdc-tab-body.mat-mdc-tab-body-active {
-      position: absolute;
-    }
-
-    .tb-form-row {
-      .fixed-title-width {
-        min-width: 120px;
-        width: 30%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .tb-add-new {
-      display: flex;
-      z-index: 999;
-      pointer-events: none;
-      background-color: #fff;
-
-      button.connector {
-        height: auto;
-        padding-right: 12px;
-        font-size: 20px;
-        border-style: dashed;
-        border-width: 2px;
-        border-radius: 8px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        color: rgba(0, 0, 0, 0.38);
-      }
-    }
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
deleted file mode 100644
index a4c1985595..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
+++ /dev/null
@@ -1,861 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  NgZone,
-  OnDestroy,
-  ViewChild
-} from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, UntypedFormControl, ValidatorFn, Validators } from '@angular/forms';
-import { EntityId } from '@shared/models/id/entity-id';
-import { AttributeService } from '@core/http/attribute.service';
-import { TranslateService } from '@ngx-translate/core';
-import { forkJoin, Observable, of, Subject, Subscription } from 'rxjs';
-import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { PageComponent } from '@shared/components/page.component';
-import { PageLink } from '@shared/models/page/page-link';
-import { AttributeDatasource } from '@home/models/datasource/attribute-datasource';
-import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { MatSort } from '@angular/material/sort';
-import { TelemetryWebsocketService } from '@core/ws/telemetry-websocket.service';
-import { MatTableDataSource } from '@angular/material/table';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { DialogService } from '@core/services/dialog.service';
-import { WidgetContext } from '@home/models/widget-component.models';
-import { camelCase, deepClone, generateSecret, isEqual, isString } from '@core/utils';
-import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
-import { DatasourceType, widgetType } from '@shared/models/widget.models';
-import { UtilsService } from '@core/services/utils.service';
-import { EntityType } from '@shared/models/entity-type.models';
-import {
-  AddConnectorConfigData,
-  ConnectorBaseConfig,
-  ConnectorBaseInfo,
-  ConfigurationModes,
-  ConnectorType,
-  GatewayAttributeData,
-  GatewayConnector,
-  GatewayConnectorDefaultTypesTranslatesMap,
-  GatewayLogLevel,
-  noLeadTrailSpacesRegex,
-  GatewayVersion,
-} from './gateway-widget.models';
-import { MatDialog } from '@angular/material/dialog';
-import { AddConnectorDialogComponent } from '@home/components/widget/lib/gateway/dialog/add-connector-dialog.component';
-import { debounceTime, filter, switchMap, take, takeUntil, tap } from 'rxjs/operators';
-import { ErrorStateMatcher } from '@angular/material/core';
-import { PageData } from '@shared/models/page/page-data';
-import {
-  GatewayConnectorVersionMappingUtil
-} from '@home/components/widget/lib/gateway/utils/gateway-connector-version-mapping.util';
-
-export class ForceErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: FormControl | null): boolean {
-    return (control && control.invalid);
-  }
-}
-
-@Component({
-  selector: 'tb-gateway-connector',
-  templateUrl: './gateway-connectors.component.html',
-  providers: [{ provide: ErrorStateMatcher, useClass: ForceErrorStateMatcher }],
-  styleUrls: ['./gateway-connectors.component.scss']
-})
-export class GatewayConnectorComponent extends PageComponent implements AfterViewInit, OnDestroy {
-
-  @Input()
-  ctx: WidgetContext;
-  @Input()
-  device: EntityId;
-
-  @ViewChild('nameInput') nameInput: ElementRef;
-  @ViewChild(MatSort, {static: false}) sort: MatSort;
-
-  readonly ConnectorType = ConnectorType;
-  readonly allowBasicConfig = new Set<ConnectorType>([
-    ConnectorType.MQTT,
-    ConnectorType.OPCUA,
-    ConnectorType.MODBUS,
-  ]);
-  readonly gatewayLogLevel = Object.values(GatewayLogLevel);
-  readonly displayedColumns = ['enabled', 'key', 'type', 'syncStatus', 'errors', 'actions'];
-  readonly GatewayConnectorTypesTranslatesMap = GatewayConnectorDefaultTypesTranslatesMap;
-  readonly ConnectorConfigurationModes = ConfigurationModes;
-  readonly GatewayVersion = GatewayVersion;
-
-  pageLink: PageLink;
-  dataSource: MatTableDataSource<GatewayAttributeData>;
-  connectorForm: FormGroup;
-  activeConnectors: Array<string>;
-  mode: ConfigurationModes = this.ConnectorConfigurationModes.BASIC;
-  initialConnector: GatewayConnector;
-  basicConfigInitSubject = new Subject<void>();
-
-  private gatewayVersion: string;
-  private isGatewayActive: boolean;
-  private inactiveConnectors: Array<string>;
-  private attributeDataSource: AttributeDatasource;
-  private inactiveConnectorsDataSource: AttributeDatasource;
-  private serverDataSource: AttributeDatasource;
-  private activeData: Array<any> = [];
-  private inactiveData: Array<any> = [];
-  private sharedAttributeData: Array<GatewayAttributeData> = [];
-  private basicConfigSub: Subscription;
-  private jsonConfigSub: Subscription;
-  private subscriptionOptions: WidgetSubscriptionOptions = {
-    callbacks: {
-      onDataUpdated: () => this.ctx.ngZone.run(() => {
-        this.onErrorsUpdated();
-      }),
-      onDataUpdateError: (_, e) => this.ctx.ngZone.run(() => {
-        this.onDataUpdateError(e);
-      })
-    }
-  };
-  private destroy$ = new Subject<void>();
-  private subscription: IWidgetSubscription;
-  private attributeUpdateSubject = new Subject<GatewayAttributeData>();
-
-  constructor(protected store: Store<AppState>,
-              private fb: FormBuilder,
-              private translate: TranslateService,
-              private attributeService: AttributeService,
-              private dialogService: DialogService,
-              private dialog: MatDialog,
-              private telemetryWsService: TelemetryWebsocketService,
-              private zone: NgZone,
-              private utils: UtilsService,
-              private cd: ChangeDetectorRef) {
-    super(store);
-
-    this.initDataSources();
-    this.initConnectorForm();
-    this.observeAttributeChange();
-  }
-
-  ngAfterViewInit(): void {
-    this.dataSource.sort = this.sort;
-    this.dataSource.sortingDataAccessor = this.getSortingDataAccessor();
-    this.ctx.$scope.gatewayConnectors = this;
-
-    this.loadConnectors();
-    this.loadGatewayState();
-    this.observeModeChange();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    super.ngOnDestroy();
-  }
-
-  saveConnector(isNew = true): void {
-    const value = this.getConnectorData();
-    const scope = (isNew || this.activeConnectors.includes(this.initialConnector.name))
-      ? AttributeScope.SHARED_SCOPE
-      : AttributeScope.SERVER_SCOPE;
-
-    forkJoin(this.getEntityAttributeTasks(value, scope)).pipe(take(1)).subscribe(_ => {
-      this.showToast(!this.initialConnector
-                      ? this.translate.instant('gateway.connector-created')
-                      : this.translate.instant('gateway.connector-updated')
-      );
-      this.initialConnector = value;
-      this.updateData(true);
-      this.connectorForm.markAsPristine();
-    });
-  }
-
-  private getEntityAttributeTasks(value: GatewayConnector, scope: AttributeScope): Observable<any>[] {
-    const tasks = [];
-    const attributesToSave = [{ key: value.name, value }];
-    const attributesToDelete = [];
-    const shouldAddToConnectorsList = !this.activeConnectors.includes(value.name) && scope === AttributeScope.SHARED_SCOPE
-      || !this.inactiveConnectors.includes(value.name) && scope === AttributeScope.SERVER_SCOPE;
-    const isNewConnector = this.initialConnector && this.initialConnector.name !== value.name;
-
-    if (isNewConnector) {
-      attributesToDelete.push({ key: this.initialConnector.name });
-      this.removeConnectorFromList(this.initialConnector.name, true);
-      this.removeConnectorFromList(this.initialConnector.name, false);
-    }
-
-    if (shouldAddToConnectorsList) {
-      if (scope === AttributeScope.SHARED_SCOPE) {
-        this.activeConnectors.push(value.name);
-      } else {
-        this.inactiveConnectors.push(value.name);
-      }
-    }
-
-    if (isNewConnector || shouldAddToConnectorsList) {
-      tasks.push(this.getSaveEntityAttributesTask(scope));
-    }
-
-    tasks.push(this.attributeService.saveEntityAttributes(this.device, scope, attributesToSave));
-
-    if (attributesToDelete.length) {
-      tasks.push(this.attributeService.deleteEntityAttributes(this.device, scope, attributesToDelete));
-    }
-
-    return tasks;
-  }
-
-  private getSaveEntityAttributesTask(scope: AttributeScope): Observable<any> {
-    const key = scope === AttributeScope.SHARED_SCOPE ? 'active_connectors' : 'inactive_connectors';
-    const value = scope === AttributeScope.SHARED_SCOPE ? this.activeConnectors : this.inactiveConnectors;
-
-    return this.attributeService.saveEntityAttributes(this.device, scope, [{ key, value }]);
-  }
-
-  private removeConnectorFromList(connectorName: string, isActive: boolean): void {
-    const list = isActive? this.activeConnectors : this.inactiveConnectors;
-    const index = list.indexOf(connectorName);
-    if (index !== -1) {
-      list.splice(index, 1);
-    }
-  }
-
-  private getConnectorData(): GatewayConnector {
-    const value = { ...this.connectorForm.value };
-    value.configuration = `${camelCase(value.name)}.json`;
-    delete value.basicConfig;
-
-    if (value.type !== ConnectorType.GRPC) {
-      delete value.key;
-    }
-    if (value.type !== ConnectorType.CUSTOM) {
-      delete value.class;
-    }
-
-    if (this.gatewayVersion && !value.configVersion) {
-      value.configVersion = this.gatewayVersion;
-    }
-
-    value.ts = Date.now();
-
-    return value;
-  }
-
-  private updateData(reload: boolean = false): void {
-    this.pageLink.sortOrder.property = this.sort.active;
-    this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()];
-    this.attributeDataSource.loadAttributes(this.device, AttributeScope.CLIENT_SCOPE, this.pageLink, reload).subscribe(data => {
-      this.activeData = data.data.filter(value => this.activeConnectors.includes(value.key));
-      this.combineData();
-      this.generateSubscription();
-      this.setClientData(data);
-    });
-    this.inactiveConnectorsDataSource.loadAttributes(this.device, AttributeScope.SHARED_SCOPE, this.pageLink, reload).subscribe(data => {
-      this.sharedAttributeData = data.data.filter(value => this.activeConnectors.includes(value.key));
-      this.combineData();
-    });
-    this.serverDataSource.loadAttributes(this.device, AttributeScope.SERVER_SCOPE, this.pageLink, reload).subscribe(data => {
-      this.inactiveData = data.data.filter(value => this.inactiveConnectors.includes(value.key));
-      this.combineData();
-    });
-  }
-
-  isConnectorSynced(attribute: GatewayAttributeData): boolean {
-    const connectorData = attribute.value;
-    if (!connectorData.ts || attribute.skipSync || !this.isGatewayActive) {
-      return false;
-    }
-    const clientIndex = this.activeData.findIndex(data => {
-      const sharedData = typeof data.value === 'string' ? JSON.parse(data.value) : data.value;
-      return sharedData.name === connectorData.name;
-    });
-    if (clientIndex === -1) {
-      return false;
-    }
-    const sharedIndex = this.sharedAttributeData.findIndex(data => {
-      const sharedData = data.value;
-      const hasSameName = sharedData.name === connectorData.name;
-      const hasEmptyConfig = isEqual(sharedData.configurationJson, {}) && hasSameName;
-      const hasSameConfig = this.hasSameConfig(sharedData.configurationJson, connectorData.configurationJson);
-      const isRecentlyCreated = sharedData.ts && sharedData.ts <= connectorData.ts;
-      return hasSameName && isRecentlyCreated && (hasSameConfig || hasEmptyConfig);
-    });
-    return sharedIndex !== -1;
-  }
-
-  private hasSameConfig(sharedDataConfigJson: ConnectorBaseInfo, connectorDataConfigJson: ConnectorBaseInfo): boolean {
-    const { name, id, enableRemoteLogging, logLevel, reportStrategy, configVersion, ...sharedDataConfig } = sharedDataConfigJson;
-    const {
-      name: connectorName,
-      id: connectorId,
-      enableRemoteLogging: connectorEnableRemoteLogging,
-      logLevel: connectorLogLevel,
-      reportStrategy: connectorReportStrategy,
-      configVersion: connectorConfigVersion,
-      ...connectorConfig
-    } = connectorDataConfigJson;
-
-    return isEqual(sharedDataConfig, connectorConfig);
-  }
-
-  private combineData(): void {
-    const combinedData = [
-      ...this.activeData,
-      ...this.inactiveData,
-      ...this.sharedAttributeData
-    ];
-
-    const latestData = combinedData.reduce((acc, attribute) => {
-      const existingItemIndex = acc.findIndex(item => item.key === attribute.key);
-
-      if (existingItemIndex === -1) {
-        acc.push(attribute);
-      } else if (
-        attribute.lastUpdateTs > acc[existingItemIndex].lastUpdateTs &&
-        !this.isConnectorSynced(acc[existingItemIndex])
-      ) {
-        acc[existingItemIndex] = { ...attribute, skipSync: true };
-      }
-
-      return acc;
-    }, []);
-
-    this.dataSource.data = latestData.map(attribute => ({
-      ...attribute,
-      value: typeof attribute.value === 'string' ? JSON.parse(attribute.value) : attribute.value
-    }));
-  }
-
-  private clearOutConnectorForm(): void {
-    this.initialConnector = null;
-    this.connectorForm.setValue({
-      mode: ConfigurationModes.BASIC,
-      name: '',
-      type: ConnectorType.MQTT,
-      sendDataOnlyOnChange: false,
-      enableRemoteLogging: false,
-      logLevel: GatewayLogLevel.INFO,
-      key: 'auto',
-      class: '',
-      configuration: '',
-      configurationJson: {},
-      basicConfig: {},
-      configVersion: '',
-      reportStrategy: [{ value: {}, disabled: true }],
-    }, {emitEvent: false});
-    this.connectorForm.markAsPristine();
-  }
-
-  selectConnector($event: Event, attribute: GatewayAttributeData): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    const connector = attribute.value;
-    if (connector?.name !== this.initialConnector?.name) {
-      this.confirmConnectorChange().subscribe((result) => {
-        if (result) {
-          this.setFormValue(connector);
-        }
-      });
-    }
-  }
-
-  isSameConnector(attribute: GatewayAttributeData): boolean {
-    if (!this.initialConnector) {
-      return false;
-    }
-    const connector = attribute.value;
-    return this.initialConnector.name === connector.name;
-  }
-
-  showToast(message: string): void {
-    this.store.dispatch(new ActionNotificationShow(
-      {
-        message,
-        type: 'success',
-        duration: 1000,
-        verticalPosition: 'top',
-        horizontalPosition: 'left',
-        target: 'dashboardRoot',
-        forceDismiss: true
-      }));
-  }
-
-  returnType(attribute: GatewayAttributeData): string {
-    const value = attribute.value;
-    return this.GatewayConnectorTypesTranslatesMap.get(value.type);
-  }
-
-  deleteConnector(attribute: GatewayAttributeData, $event: Event): void {
-    $event?.stopPropagation();
-
-    const title = `Delete connector \"${attribute.key}\"?`;
-    const content = `All connector data will be deleted.`;
-
-    this.dialogService.confirm(title, content, 'Cancel', 'Delete').pipe(
-      take(1),
-      switchMap((result) => {
-        if (!result) {
-          return;
-        }
-        const tasks: Array<Observable<any>> = [];
-        const scope = this.activeConnectors.includes(attribute.value?.name) ?
-          AttributeScope.SHARED_SCOPE :
-          AttributeScope.SERVER_SCOPE;
-        tasks.push(this.attributeService.deleteEntityAttributes(this.device, scope, [attribute]));
-        this.removeConnectorFromList(attribute.key, true);
-        this.removeConnectorFromList(attribute.key, false);
-        tasks.push(this.getSaveEntityAttributesTask(scope));
-
-        return forkJoin(tasks);
-      })
-    ).subscribe(() => {
-      if (this.initialConnector ? this.initialConnector.name === attribute.key : true) {
-        this.clearOutConnectorForm();
-        this.cd.detectChanges();
-        this.connectorForm.disable();
-      }
-      this.updateData(true);
-    });
-  }
-
-  connectorLogs(attribute: GatewayAttributeData, $event: Event): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    const params = deepClone(this.ctx.stateController.getStateParams());
-    params.connector_logs = attribute;
-    params.targetEntityParamName = 'connector_logs';
-    this.ctx.stateController.openState('connector_logs', params);
-  }
-
-  connectorRpc(attribute: GatewayAttributeData, $event: Event): void {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    const params = deepClone(this.ctx.stateController.getStateParams());
-    params.connector_rpc = attribute;
-    params.targetEntityParamName = 'connector_rpc';
-    this.ctx.stateController.openState('connector_rpc', params);
-  }
-
-
-  onEnableConnector(attribute: GatewayAttributeData): void {
-    attribute.value.ts = new Date().getTime();
-
-    this.updateActiveConnectorKeys(attribute.key);
-
-    this.attributeUpdateSubject.next(attribute);
-  }
-
-  getErrorsCount(attribute: GatewayAttributeData): string {
-    const connectorName = attribute.key;
-    const connector = this.subscription && this.subscription.data
-      .find(data => data && data.dataKey.name === `${connectorName}_ERRORS_COUNT`);
-    return (connector && this.activeConnectors.includes(connectorName)) ? (connector.data[0][1] || 0) : 'Inactive';
-  }
-
-  addConnector(event?: Event): void {
-    event?.stopPropagation();
-
-    this.confirmConnectorChange()
-      .pipe(
-        take(1),
-        filter(Boolean),
-        switchMap(() => this.openAddConnectorDialog()),
-        filter(Boolean),
-      )
-      .subscribe(value => {
-        if (this.connectorForm.disabled) {
-          this.connectorForm.enable();
-        }
-        if (!value.configurationJson) {
-          value.configurationJson = {} as ConnectorBaseConfig;
-        }
-        value.basicConfig = value.configurationJson;
-        this.initialConnector = value;
-        this.connectorForm.patchValue(value, {emitEvent: false});
-        this.generate('basicConfig.broker.clientId');
-        if (this.connectorForm.get('type').value === value.type || !this.allowBasicConfig.has(value.type)) {
-          this.saveConnector();
-        } else {
-          this.basicConfigInitSubject.pipe(take(1)).subscribe(() => {
-            this.saveConnector();
-          });
-        }
-    });
-  }
-
-  private openAddConnectorDialog(): Observable<GatewayConnector> {
-    return this.dialog.open<AddConnectorDialogComponent, AddConnectorConfigData>(AddConnectorDialogComponent, {
-      disableClose: true,
-      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {
-        dataSourceData: this.dataSource.data,
-        gatewayVersion: this.gatewayVersion,
-      }
-    }).afterClosed();
-  }
-
-  generate(formControlName: string): void {
-    this.connectorForm.get(formControlName)?.patchValue('tb_gw_' + generateSecret(5));
-  }
-
-  uniqNameRequired(): ValidatorFn {
-    return (control: UntypedFormControl) => {
-      const newName = control.value?.trim().toLowerCase();
-      const isDuplicate = this.dataSource.data.some(connectorAttr => connectorAttr.value.name.toLowerCase() === newName);
-      const isSameAsInitial = this.initialConnector?.name.toLowerCase() === newName;
-
-      if (isDuplicate && !isSameAsInitial) {
-        return { duplicateName: { valid: false } };
-      }
-
-      return null;
-    };
-  }
-
-  private initDataSources(): void {
-    const sortOrder: SortOrder = {property: 'key', direction: Direction.ASC};
-    this.pageLink = new PageLink(1000, 0, null, sortOrder);
-    this.attributeDataSource = new AttributeDatasource(this.attributeService, this.telemetryWsService, this.zone, this.translate);
-    this.inactiveConnectorsDataSource = new AttributeDatasource(this.attributeService, this.telemetryWsService, this.zone, this.translate);
-    this.serverDataSource = new AttributeDatasource(this.attributeService, this.telemetryWsService, this.zone, this.translate);
-    this.dataSource = new MatTableDataSource<GatewayAttributeData>([]);
-  }
-
-  private initConnectorForm(): void {
-    this.connectorForm = this.fb.group({
-      mode: [ConfigurationModes.BASIC],
-      name: ['', [Validators.required, this.uniqNameRequired(), Validators.pattern(noLeadTrailSpacesRegex)]],
-      type: ['', [Validators.required]],
-      enableRemoteLogging: [false],
-      logLevel: ['', [Validators.required]],
-      sendDataOnlyOnChange: [false],
-      key: ['auto'],
-      class: [''],
-      configuration: [''],
-      configurationJson: [{}, [Validators.required]],
-      basicConfig: [{}],
-      configVersion: [''],
-      reportStrategy: [{ value: {}, disabled: true }],
-    });
-    this.connectorForm.disable();
-  }
-
-  private getSortingDataAccessor(): (data: GatewayAttributeData, sortHeaderId: string) => string | number {
-    return (data: GatewayAttributeData, sortHeaderId: string) => {
-      switch (sortHeaderId) {
-        case 'syncStatus':
-          return this.isConnectorSynced(data) ? 1 : 0;
-
-        case 'enabled':
-          return this.activeConnectors.includes(data.key) ? 1 : 0;
-
-        case 'errors':
-          const errors = this.getErrorsCount(data);
-          if (typeof errors === 'string') {
-            return this.sort.direction.toUpperCase() === Direction.DESC ? -1 : Infinity;
-          }
-          return errors;
-
-        default:
-          return data[sortHeaderId] || data.value[sortHeaderId];
-      }
-    };
-  }
-
-  private loadConnectors(): void {
-    if (!this.device || this.device.id === NULL_UUID) {
-      return;
-    }
-
-    forkJoin([
-      this.attributeService.getEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, ['active_connectors']),
-      this.attributeService.getEntityAttributes(this.device, AttributeScope.SERVER_SCOPE, ['inactive_connectors']),
-      this.attributeService.getEntityAttributes(this.device, AttributeScope.CLIENT_SCOPE, ['Version'])
-    ]).pipe(takeUntil(this.destroy$)).subscribe(attributes => {
-      this.activeConnectors = this.parseConnectors(attributes[0]);
-      this.inactiveConnectors = this.parseConnectors(attributes[1]);
-      this.gatewayVersion = attributes[2][0]?.value;
-
-      this.updateData(true);
-    });
-  }
-
-  private loadGatewayState(): void {
-    this.attributeService.getEntityAttributes(this.device, AttributeScope.SERVER_SCOPE)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((attributes: AttributeData[]) => {
-
-        const active = attributes.find(data => data.key === 'active').value;
-        const lastDisconnectedTime = attributes.find(data => data.key === 'lastDisconnectTime')?.value;
-        const lastConnectedTime = attributes.find(data => data.key === 'lastConnectTime').value;
-
-        this.isGatewayActive = this.getGatewayStatus(active, lastConnectedTime, lastDisconnectedTime);
-      });
-  }
-
-  private parseConnectors(attribute: GatewayAttributeData[]): string[] {
-    const connectors = attribute?.[0]?.value || [];
-    return isString(connectors) ? JSON.parse(connectors) : connectors;
-  }
-
-  private observeModeChange(): void {
-    this.connectorForm.get('mode').valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((mode) => {
-        this.connectorForm.get('mode').markAsPristine();
-        if (mode === ConfigurationModes.BASIC) {
-          this.basicConfigInitSubject.pipe(take(1)).subscribe(() => {
-            this.patchBasicConfigConnector({...this.initialConnector, mode: ConfigurationModes.BASIC});
-          });
-        }
-      });
-  }
-
-  private observeAttributeChange(): void {
-    this.attributeUpdateSubject.pipe(
-      debounceTime(300),
-      tap((attribute: GatewayAttributeData) => this.executeAttributeUpdates(attribute)),
-      takeUntil(this.destroy$),
-    ).subscribe();
-  }
-
-  private updateActiveConnectorKeys(key: string): void {
-    const wasEnabled = this.activeConnectors.includes(key);
-    if (wasEnabled) {
-      const index = this.activeConnectors.indexOf(key);
-      if (index !== -1) {
-        this.activeConnectors.splice(index, 1);
-      }
-      this.inactiveConnectors.push(key);
-    } else {
-      const index = this.inactiveConnectors.indexOf(key);
-      if (index !== -1) {
-        this.inactiveConnectors.splice(index, 1);
-      }
-      this.activeConnectors.push(key);
-    }
-  }
-
-  private executeAttributeUpdates(attribute: GatewayAttributeData): void {
-    forkJoin(this.getAttributeExecutionTasks(attribute))
-      .pipe(
-        take(1),
-        tap(() => this.updateData(true)),
-        takeUntil(this.destroy$),
-      )
-      .subscribe();
-  }
-
-  private getAttributeExecutionTasks(attribute: GatewayAttributeData): Observable<any>[] {
-    const isActive = this.activeConnectors.includes(attribute.key);
-    const scopeOld =  isActive ? AttributeScope.SERVER_SCOPE : AttributeScope.SHARED_SCOPE;
-    const scopeNew = isActive ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE;
-
-    return [
-      this.attributeService.saveEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, [{
-        key: 'active_connectors',
-        value: this.activeConnectors
-      }]),
-      this.attributeService.saveEntityAttributes(this.device, AttributeScope.SERVER_SCOPE, [{
-        key: 'inactive_connectors',
-        value: this.inactiveConnectors
-      }]),
-      this.attributeService.deleteEntityAttributes(this.device, scopeOld, [attribute]),
-      this.attributeService.saveEntityAttributes(this.device, scopeNew, [attribute])
-    ];
-  }
-
-  private onDataUpdateError(e: any): void {
-    const exceptionData = this.utils.parseException(e);
-    let errorText = exceptionData.name;
-    if (exceptionData.message) {
-      errorText += ': ' + exceptionData.message;
-    }
-    console.error(errorText);
-  }
-
-  private onErrorsUpdated(): void {
-    this.cd.detectChanges();
-  }
-
-  private onDataUpdated(): void {
-    const dataSources = this.ctx.defaultSubscription.data;
-
-    const active = dataSources.find(data => data.dataKey.name === 'active').data[0][1];
-    const lastDisconnectedTime = dataSources.find(data => data.dataKey.name === 'lastDisconnectTime').data[0][1];
-    const lastConnectedTime = dataSources.find(data => data.dataKey.name === 'lastConnectTime').data[0][1];
-
-    this.isGatewayActive = this.getGatewayStatus(active, lastConnectedTime, lastDisconnectedTime);
-
-    this.cd.detectChanges();
-  }
-
-  private getGatewayStatus(active: boolean, lastConnectedTime: number, lastDisconnectedTime: number): boolean {
-    if (!active) {
-      return false;
-    }
-    return !lastDisconnectedTime || lastConnectedTime > lastDisconnectedTime;
-  }
-
-  private generateSubscription(): void {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-    if (this.device) {
-      const subscriptionInfo = [{
-        type: DatasourceType.entity,
-        entityType: EntityType.DEVICE,
-        entityId: this.device.id,
-        entityName: 'Gateway',
-        timeseries: []
-      }];
-      this.dataSource.data.forEach(value => {
-        subscriptionInfo[0].timeseries.push({name: `${value.key}_ERRORS_COUNT`, label: `${value.key}_ERRORS_COUNT`});
-      });
-      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.latest, subscriptionInfo, this.subscriptionOptions,
-        false, true).subscribe(subscription => {
-        this.subscription = subscription;
-      });
-    }
-  }
-
-  private createBasicConfigWatcher(): void {
-    if (this.basicConfigSub) {
-      this.basicConfigSub.unsubscribe();
-    }
-    this.basicConfigSub = this.connectorForm.get('basicConfig').valueChanges.pipe(
-      filter(() => !!this.initialConnector),
-      takeUntil(this.destroy$)
-    ).subscribe((config) => {
-      const configJson = this.connectorForm.get('configurationJson');
-      const type = this.connectorForm.get('type').value;
-      const mode = this.connectorForm.get('mode').value;
-      if (!isEqual(config, configJson?.value) && this.allowBasicConfig.has(type) && mode === ConfigurationModes.BASIC) {
-        const newConfig = {...configJson.value, ...config};
-        this.connectorForm.get('configurationJson').patchValue(newConfig, {emitEvent: false});
-      }
-    });
-  }
-
-  private createJsonConfigWatcher(): void {
-    if (this.jsonConfigSub) {
-      this.jsonConfigSub.unsubscribe();
-    }
-    this.jsonConfigSub = this.connectorForm.get('configurationJson').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((config) => {
-      const basicConfig = this.connectorForm.get('basicConfig');
-      const type = this.connectorForm.get('type').value;
-      const mode = this.connectorForm.get('mode').value;
-      if (!isEqual(config, basicConfig?.value) && this.allowBasicConfig.has(type) && mode === ConfigurationModes.ADVANCED) {
-        this.connectorForm.get('basicConfig').patchValue(config, {emitEvent: false});
-      }
-    });
-  }
-
-  private confirmConnectorChange(): Observable<boolean> {
-    if (this.initialConnector && this.connectorForm.dirty) {
-      return this.dialogService.confirm(
-        this.translate.instant('gateway.change-connector-title'),
-        this.translate.instant('gateway.change-connector-text'),
-        this.translate.instant('action.no'),
-        this.translate.instant('action.yes'),
-        true
-      );
-    }
-    return of(true);
-  }
-
-  private setFormValue(connector: GatewayConnector): void {
-    if (this.connectorForm.disabled) {
-      this.connectorForm.enable();
-    }
-
-    const connectorState = GatewayConnectorVersionMappingUtil.getConfig({
-      configuration: '',
-      key: 'auto',
-      configurationJson: {} as ConnectorBaseConfig,
-      ...connector,
-    }, this.gatewayVersion);
-
-    connectorState.basicConfig = connectorState.configurationJson;
-    this.initialConnector = connectorState;
-    this.updateConnector(connectorState);
-  }
-
-  private updateConnector(connector: GatewayConnector): void {
-    this.toggleReportStrategy(connector.type);
-    switch (connector.type) {
-      case ConnectorType.MQTT:
-      case ConnectorType.OPCUA:
-      case ConnectorType.MODBUS:
-        this.updateBasicConfigConnector(connector);
-        break;
-      default:
-        this.connectorForm.patchValue({...connector, mode: null});
-        this.connectorForm.markAsPristine();
-    }
-    this.createJsonConfigWatcher();
-  }
-
-  private updateBasicConfigConnector(connector: GatewayConnector): void {
-    this.connectorForm.get('mode').setValue(connector.mode || ConfigurationModes.BASIC, {emitEvent: false});
-    this.connectorForm.get('configVersion').setValue(connector.configVersion, {emitEvent: false});
-    if ((!connector.mode || connector.mode === ConfigurationModes.BASIC) && this.connectorForm.get('type').value !== connector.type) {
-      this.basicConfigInitSubject.asObservable().pipe(take(1)).subscribe(() => {
-        this.patchBasicConfigConnector(connector);
-      });
-    } else {
-      this.patchBasicConfigConnector(connector);
-    }
-  }
-
-  private patchBasicConfigConnector(connector: GatewayConnector): void {
-    this.connectorForm.patchValue(connector, {emitEvent: false});
-    this.connectorForm.markAsPristine();
-    this.createBasicConfigWatcher();
-  }
-
-  private toggleReportStrategy(type: ConnectorType): void {
-    const reportStrategyControl = this.connectorForm.get('reportStrategy');
-    if (type === ConnectorType.MODBUS) {
-      reportStrategyControl.enable({emitEvent: false});
-    } else {
-      reportStrategyControl.disable({emitEvent: false});
-    }
-  }
-
-  private setClientData(data: PageData<GatewayAttributeData>): void {
-    if (this.initialConnector) {
-      const clientConnectorData = data.data.find(attr => attr.key === this.initialConnector.name);
-      if (clientConnectorData) {
-        clientConnectorData.value = typeof clientConnectorData.value === 'string' ?
-          JSON.parse(clientConnectorData.value) : clientConnectorData.value;
-
-        if (this.isConnectorSynced(clientConnectorData) && clientConnectorData.value.configurationJson) {
-          this.setFormValue({...clientConnectorData.value, mode: this.connectorForm.get('mode').value ?? clientConnectorData.value.mode});
-        }
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
deleted file mode 100644
index 7daa490f01..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
+++ /dev/null
@@ -1,266 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<form #formContainer class="gateway-form"
-      [formGroup]="gatewayConfigurationGroup"
-      tb-toast toastTarget="{{ toastTargetId }}"
-      (ngSubmit)="save()">
-  <mat-accordion multi="true" class="mat-body-2">
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          <div class="tb-panel-title">{{ 'gateway.thingsboard' | translate | uppercase }}</div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-        <tb-entity-gateway-select
-          formControlName="gateway"
-          [deviceName]="deviceNameForm"
-          [isStateForm]="isStateForm"
-          [newGatewayType]="gatewayType"
-          (gatewayNameExist)="gatewayExist()"
-          required
-        >
-      </tb-entity-gateway-select>
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
-          <mat-label>{{'gateway.security-type' | translate }}</mat-label>
-          <mat-select formControlName="securityType" >
-            <mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">
-              {{ securityType.value.toString() | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'gateway.thingsboard-host' | translate }}</mat-label>
-          <input matInput type="text" formControlName="host">
-          <mat-error *ngIf="gatewayConfigurationGroup.get('host').hasError('required')" translate>
-            gateway.thingsboard-host-required
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'gateway.thingsboard-port' | translate }}</mat-label>
-          <input matInput type="number" formControlName="port">
-          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('required')" translate>
-            gateway.thingsboard-port-required
-          </mat-error>
-          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('min')" translate>
-            gateway.thingsboard-port-min
-          </mat-error>
-          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('max')" translate>
-            gateway.thingsboard-port-max
-          </mat-error>
-          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('pattern')" translate>
-            gateway.thingsboard-port-pattern
-          </mat-error>
-        </mat-form-field>
-      </div>
-
-      <div *ngIf="gatewayConfigurationGroup.get('securityType').value == 'tls'" fxLayout="column">
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'gateway.tls-path-ca-certificate' | translate }}</mat-label>
-          <input matInput type="text" formControlName="caCertPath">
-        </mat-form-field>
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'gateway.tls-path-private-key' | translate }}</mat-label>
-          <input matInput type="text" formControlName="privateKeyPath">
-        </mat-form-field>
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'gateway.tls-path-client-certificate' | translate }}</mat-label>
-          <input matInput type="text" formControlName="certPath">
-        </mat-form-field>
-      </div>
-
-      <mat-checkbox formControlName="remoteConfiguration">{{ 'gateway.remote' | translate }}</mat-checkbox>
-
-      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
-        <mat-form-field fxFlex>
-          <mat-label>{{'gateway.remote-logging-level' | translate }}</mat-label>
-          <mat-select formControlName="remoteLoggingLevel">
-            <mat-option *ngFor="let logLevel of gatewayLogLevels" [value]="logLevel">
-              {{ logLevel }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'gateway.path-logs' | translate }}</mat-label>
-          <input matInput type="text" formControlName="remoteLoggingPathToLogs">
-          <mat-error *ngIf="gatewayConfigurationGroup.get('remoteLoggingPathToLogs').hasError('required')" translate>
-            gateway.path-logs-required
-          </mat-error>
-        </mat-form-field>
-      </div>
-
-    </mat-expansion-panel>
-
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          <div class="tb-panel-title">{{ 'gateway.storage' | translate | uppercase }}</div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
-          <mat-label>{{'gateway.storage-type' | translate }}</mat-label>
-          <mat-select formControlName="storageType">
-            <mat-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
-              {{ storageType.value.toString() | translate}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.storage-pack-size' | translate }}</mat-label>
-            <input matInput type="number" formControlName="readRecordsCount">
-            <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('required')" translate>
-              gateway.storage-pack-size-required
-            </mat-error>
-            <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('min')" translate>
-              gateway.storage-pack-size-min
-            </mat-error>
-            <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('pattern')" translate>
-              gateway.storage-pack-size-pattern
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field fxFlex>
-            <mat-label >
-              {{ (gatewayConfigurationGroup.get('storageType').value !== 'file' ? 'gateway.storage-max-records' : 'gateway.storage-max-file-records') | translate}}
-            </mat-label>
-            <input matInput type="number" formControlName="maxRecordsCount">
-            <mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('required')" translate>
-              gateway.storage-max-records-required
-            </mat-error>
-            <mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('min')" translate>
-              gateway.storage-max-records-min
-            </mat-error>
-            <mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('pattern')" translate>
-              gateway.storage-max-records-pattern
-            </mat-error>
-          </mat-form-field>
-        </div>
-
-        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" *ngIf="gatewayConfigurationGroup.get('storageType').value == 'file'">
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.storage-max-files' | translate }}</mat-label>
-            <input matInput type="number" formControlName="maxFilesCount">
-            <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('required')" translate>
-              gateway.storage-max-files-required
-            </mat-error>
-            <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('min')" translate>
-              gateway.storage-max-files-min
-            </mat-error>
-            <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('pattern')" translate>
-              gateway.storage-max-files-pattern
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.storage-path' | translate }}</mat-label>
-            <input matInput type="text" formControlName="dataFolderPath">
-            <mat-error *ngIf="gatewayConfigurationGroup.get('dataFolderPath').hasError('required')" translate>
-              gateway.storage-path-required
-            </mat-error>
-          </mat-form-field>
-        </div>
-      </div>
-    </mat-expansion-panel>
-
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          <div class="tb-panel-title">{{ 'gateway.connectors-config' | translate | uppercase }}</div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-
-      <div fxLayout="column" class="gateway-config">
-        <section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;">
-          <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="8px">
-            <div fxLayout="column" fxLayoutAlign="center start">
-              <mat-slide-toggle formControlName="enabled"></mat-slide-toggle>
-            </div>
-            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" fxFlex>
-              <mat-form-field fxFlex>
-                <mat-label>{{'gateway.connector-type' | translate }}</mat-label>
-                <mat-select formControlName="configType" (selectionChange)="changeConnectorType(connector)">
-                  <mat-option *ngFor="let connectorType of connectorTypes" [value]="connectorType">
-                    {{ connectorType }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="connector.get('configType').hasError('required')" translate>
-                  gateway.connector-type-required
-                </mat-error>
-              </mat-form-field>
-
-              <mat-form-field fxFlex>
-                <mat-label>{{ 'gateway.connector-name' | translate }}</mat-label>
-                <input matInput type="text" formControlName="name" (blur)="changeConnectorName(connector, i)">
-                <mat-error *ngIf="connector.get('name').hasError('required')" translate>
-                  gateway.connector-name-required
-                </mat-error>
-              </mat-form-field>
-            </div>
-            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"
-                 fxLayoutAlign="{{alignment == 'row' ? 'end center' : 'space-evenly center'}}" class="action-buttons">
-              <button [disabled]="isReadOnlyForm" mat-icon-button (click)="openConfigDialog($event, i, connector.get('config').value, connector.get('name').value)"
-                         matTooltip="{{ 'gateway.update-config' | translate }}"
-                         matTooltipPosition="above"
-                         [ngClass]="{'mat-warn': connector.get('config').invalid}">
-                <mat-icon>more_horiz</mat-icon>
-              </button>
-              <button [disabled]="isReadOnlyForm"
-                      mat-icon-button (click)="removeConnector(i)"
-                      matTooltip="{{ 'gateway.delete' | translate }}"
-                      matTooltipPosition="above">
-                <mat-icon>close</mat-icon>
-              </button>
-            </div>
-          </div>
-        </section>
-        <span [fxShow]="!connectors.length" fxLayoutAlign="center center" class="no-data-found">{{'gateway.no-connectors' | translate}}</span>
-        <div>
-          <button [fxShow]="!isReadOnlyForm" mat-raised-button type="button" (click)="addNewConnector()"
-                  matTooltip="{{ 'gateway.connector-add' | translate }}"
-                  matTooltipPosition="above">
-            {{ 'action.add' | translate }}
-          </button>
-        </div>
-      </div >
-    </mat-expansion-panel>
-  </mat-accordion>
-  <section [fxShow]="!isReadOnlyForm"
-           fxLayout="row" fxLayoutAlign="end center" class="form-action-buttons">
-    <button mat-raised-button color="primary" type="button"
-            (click)="exportConfig()"
-            *ngIf="!gatewayConfigurationGroup.get('remoteConfiguration').value"
-            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"
-            matTooltip="{{'gateway.download-tip' | translate }}">
-      {{'action.download' | translate }}
-    </button>
-
-    <button mat-raised-button color="primary" type="submit"
-            *ngIf="gatewayConfigurationGroup.get('remoteConfiguration').value"
-            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"
-            matTooltip="{{'gateway.save-tip' | translate }}">
-      {{'action.save' | translate }}
-    </button>
-  </section>
-</form>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss
deleted file mode 100644
index 3d28120fa3..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host{
-  .gateway-form {
-    height: 100%;
-    padding: 5px;
-    background-color: transparent;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    .form-action-buttons{
-      padding-top: 8px;
-    }
-
-    .gateway-config {
-      .no-data-found {
-        position: relative;
-        display: flex;
-        height: 40px;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
deleted file mode 100644
index 4f8b1ee34b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
+++ /dev/null
@@ -1,426 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { PageComponent } from '@shared/components/page.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
-import { WidgetContext } from '@home/models/widget-component.models';
-import { UtilsService } from '@core/services/utils.service';
-import {
-  CONFIGURATION_ATTRIBUTE,
-  CONFIGURATION_DRAFT_ATTRIBUTE,
-  ConnectorType,
-  createFormConfig,
-  CURRENT_CONFIGURATION_ATTRIBUTE,
-  DEFAULT_CONNECTOR,
-  gatewayConfigJSON,
-  GatewayFormConnectorModel,
-  GatewayFormModels,
-  GatewayLogLevel,
-  generateConnectorConfigFiles,
-  generateLogConfigFile,
-  generateYAMLConfigFile,
-  getDraftConnectorsJSON,
-  getEntityId,
-  REMOTE_LOGGING_LEVEL_ATTRIBUTE,
-  SecurityType,
-  SecurityTypeTranslationMap,
-  StorageType,
-  StorageTypeTranslationMap,
-  ValidateJSON,
-  WidgetSetting
-} from './gateway-form.models';
-import { WINDOW } from '@core/services/window.service';
-import { MatDialog } from '@angular/material/dialog';
-import {
-  JsonObjectEditDialogComponent,
-  JsonObjectEditDialogData
-} from '@shared/components/dialog/json-object-edit-dialog.component';
-import { TranslateService } from '@ngx-translate/core';
-import { DeviceService } from '@core/http/device.service';
-import { AttributeService } from '@core/http/attribute.service';
-import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { forkJoin, Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { ImportExportService } from '@shared/import-export/import-export.service';
-
-// @dynamic
-@Component({
-  selector: 'tb-gateway-form',
-  templateUrl: './gateway-form.component.html',
-  styleUrls: ['./gateway-form.component.scss']
-})
-
-export class GatewayFormComponent extends PageComponent implements OnInit, OnDestroy {
-  constructor(
-    protected store: Store<AppState>,
-    private elementRef: ElementRef,
-    private utils: UtilsService,
-    private ngZone: NgZone,
-    private fb: UntypedFormBuilder,
-    @Inject(WINDOW) private window: Window,
-    private dialog: MatDialog,
-    private translate: TranslateService,
-    private deviceService: DeviceService,
-    private attributeService: AttributeService,
-    private importExport: ImportExportService
-  ) {
-    super(store);
-  }
-
-  get connectors(): UntypedFormArray {
-    return this.gatewayConfigurationGroup.get('connectors') as UntypedFormArray;
-  }
-
-  @ViewChild('formContainer', {static: true}) formContainerRef: ElementRef<HTMLElement>;
-  @ViewChild('gatewayConfigurationForm', {static: true}) multipleInputForm: NgForm;
-
-  private successfulSaved: string;
-  private gatewayNameExists: string;
-  private archiveFileName: string;
-  private formResize$: ResizeObserver;
-  private subscribeStorageType$: any;
-  private subscribeGateway$: any;
-
-  alignment = 'row';
-  layoutGap = '5px';
-  gatewayType: string;
-  gatewayConfigurationGroup: UntypedFormGroup;
-  securityTypes = SecurityTypeTranslationMap;
-  gatewayLogLevels = Object.keys(GatewayLogLevel).map(itm => GatewayLogLevel[itm]);
-  connectorTypes = Object.keys(ConnectorType);
-  storageTypes = StorageTypeTranslationMap;
-
-  toastTargetId = 'gateway-configuration-widget' + this.utils.guid();
-
-  @Input()
-  ctx: WidgetContext;
-
-  @Input()
-  isStateForm: boolean;
-
-  isReadOnlyForm = false;
-  deviceNameForm: string;
-
-  ngOnInit(): void {
-    this.initWidgetSettings(this.ctx.settings);
-    if (this.ctx.datasources && this.ctx.datasources.length) {
-      this.deviceNameForm = this.ctx.datasources[0].name;
-    }
-
-    this.buildForm();
-    this.ctx.updateWidgetParams();
-    this.formResize$ = new ResizeObserver(() => {
-      this.resize();
-    });
-    this.formResize$.observe(this.formContainerRef.nativeElement);
-  }
-
-  ngOnDestroy(): void {
-    if (this.formResize$) {
-      this.formResize$.disconnect();
-    }
-    this.subscribeGateway$.unsubscribe();
-    this.subscribeStorageType$.unsubscribe();
-  }
-
-  private initWidgetSettings(settings: WidgetSetting): void {
-    let widgetTitle;
-    if (settings.gatewayTitle && settings.gatewayTitle.length) {
-      widgetTitle = this.utils.customTranslation(settings.gatewayTitle, settings.gatewayTitle);
-    } else {
-      widgetTitle = this.translate.instant('gateway.gateway');
-    }
-    this.ctx.widgetTitle = widgetTitle;
-    this.isReadOnlyForm = (settings.readOnly) ? settings.readOnly : false;
-
-    this.archiveFileName = settings.archiveFileName?.length ? settings.archiveFileName : 'gatewayConfiguration';
-    this.gatewayType = settings.gatewayType?.length ? settings.gatewayType : 'Gateway';
-    this.gatewayNameExists = this.utils.customTranslation(settings.gatewayNameExists, settings.gatewayNameExists) || this.translate.instant('gateway.gateway-exists');
-    this.successfulSaved = this.utils.customTranslation(settings.successfulSave, settings.successfulSave) || this.translate.instant('gateway.gateway-saved');
-
-    this.updateWidgetDisplaying();
-  }
-
-  private resize(): void {
-    this.ngZone.run(() => {
-      this.updateWidgetDisplaying();
-      this.ctx.detectChanges();
-    });
-  }
-
-  private updateWidgetDisplaying(): void {
-    if(this.ctx.$container && this.ctx.$container[0].offsetWidth <= 425){
-      this.layoutGap = '0';
-      this.alignment = 'column';
-    } else {
-      this.layoutGap = '5px';
-      this.alignment = 'row';
-    }
-  }
-
-  private saveAttribute(attributeName: string, attributeValue: string, attributeScope: AttributeScope): Observable<any> {
-    const gatewayId = this.gatewayConfigurationGroup.get('gateway').value;
-    const attributes: AttributeData = {
-      key: attributeName,
-      value: attributeValue
-    };
-    return this.attributeService.saveEntityAttributes(getEntityId(gatewayId), attributeScope, [attributes]);
-  }
-
-  private createConnector(setting: GatewayFormConnectorModel = DEFAULT_CONNECTOR): void {
-    this.connectors.push(this.fb.group({
-      enabled: [setting.enabled],
-      configType: [setting.configType, [Validators.required]],
-      name: [setting.name, [Validators.required]],
-      config: [setting.config, [Validators.nullValidator, ValidateJSON]]
-    }));
-  }
-
-  private getFormField(name: string): AbstractControl {
-    return this.gatewayConfigurationGroup.get(name);
-  }
-
-  private buildForm(): void {
-    this.gatewayConfigurationGroup = this.fb.group({
-      gateway: [null, []],
-      accessToken: [null, [Validators.required]],
-      securityType: [SecurityType.accessToken],
-      host: [this.window.location.hostname, [Validators.required]],
-      port: [1883, [Validators.required, Validators.min(1), Validators.max(65535), Validators.pattern(/^-?[0-9]+$/)]],
-      remoteConfiguration: [true],
-      caCertPath: ['/etc/thingsboard-gateway/ca.pem'],
-      privateKeyPath: ['/etc/thingsboard-gateway/privateKey.pem'],
-      certPath: ['/etc/thingsboard-gateway/certificate.pem'],
-      remoteLoggingLevel: [GatewayLogLevel.debug],
-      remoteLoggingPathToLogs: ['./logs/', [Validators.required]],
-      storageType: [StorageType.memory],
-      readRecordsCount: [100, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      maxRecordsCount: [10000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      maxFilesCount: [5, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
-      dataFolderPath: ['./data/', [Validators.required]],
-      connectors: this.fb.array([])
-    });
-
-    if (this.isReadOnlyForm) {
-      this.gatewayConfigurationGroup.disable({emitEvent: false});
-    }
-
-    this.subscribeStorageType$ = this.getFormField('storageType').valueChanges.subscribe((value: StorageType) => {
-      if (value === StorageType.memory) {
-        this.getFormField('maxFilesCount').disable();
-        this.getFormField('dataFolderPath').disable();
-      } else {
-        this.getFormField('maxFilesCount').enable();
-        this.getFormField('dataFolderPath').enable();
-      }
-    });
-
-    this.subscribeGateway$ = this.getFormField('gateway').valueChanges.subscribe((gatewayId: string) => {
-      if (gatewayId !== null) {
-        forkJoin([
-          this.deviceService.getDeviceCredentials(gatewayId).pipe(tap(deviceCredential => {
-            this.getFormField('accessToken').patchValue(deviceCredential.credentialsId);
-          })),
-          ...this.getAttributes(gatewayId)]).subscribe(() => {
-          this.gatewayConfigurationGroup.markAsPristine();
-          this.ctx.detectChanges();
-        });
-      } else {
-        this.getFormField('accessToken').patchValue('');
-      }
-    })
-  }
-
-  gatewayExist(): void {
-    this.ctx.showErrorToast(this.gatewayNameExists, 'top', 'left', this.toastTargetId);
-  }
-
-  exportConfig(): void {
-    const gatewayConfiguration: GatewayFormModels = this.gatewayConfigurationGroup.value;
-    const filesZip: any = {};
-    filesZip['tb_gateway.yaml'] = generateYAMLConfigFile(gatewayConfiguration);
-    generateConnectorConfigFiles(filesZip, gatewayConfiguration.connectors);
-    generateLogConfigFile(filesZip, gatewayConfiguration.remoteLoggingLevel, gatewayConfiguration.remoteLoggingPathToLogs);
-    this.importExport.exportJSZip(filesZip, this.archiveFileName);
-    this.saveAttribute(
-      REMOTE_LOGGING_LEVEL_ATTRIBUTE,
-      this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(),
-      AttributeScope.SHARED_SCOPE);
-  }
-
-  addNewConnector(): void {
-    this.createConnector();
-  }
-
-  removeConnector(index: number): void {
-    if (index > -1) {
-      this.connectors.removeAt(index);
-      this.connectors.markAsDirty();
-    }
-  }
-
-  openConfigDialog($event: Event, index: number, config: object, type: string): void {
-    if ($event) {
-      $event.stopPropagation();
-      $event.preventDefault();
-    }
-    this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, {
-      disableClose: true,
-      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {
-        jsonValue: config,
-        required: true,
-        title: this.translate.instant('gateway.title-connectors-json', {typeName: type})
-      }
-    }).afterClosed().subscribe(
-      (res) => {
-        if (res) {
-          this.connectors.at(index).get('config').patchValue(res);
-          this.ctx.detectChanges();
-        }
-      }
-    );
-  }
-
-  private createConnectorName(connectors: GatewayFormConnectorModel[], name: string, index: number = 0): string {
-    const newKeyName = index ? name + index : name;
-    const indexRes = connectors.findIndex((element) => element.name === newKeyName);
-    return indexRes === -1 ? newKeyName : this.createConnectorName(connectors, name, ++index);
-  }
-
-  private validateConnectorName(connectors: GatewayFormConnectorModel[], name: string, connectorIndex: number, index = 0): string {
-    for (let i = 0; i < connectors.length; i++) {
-      const nameEq = (index === 0) ? name : name + index;
-      if (i !== connectorIndex && connectors[i].name === nameEq) {
-        this.validateConnectorName(connectors, name, connectorIndex, ++index);
-      }
-    }
-    return (index === 0) ? name : name + index;
-  }
-
-  changeConnectorType(connector: AbstractControl): void {
-    if (!connector.get('name').value) {
-      const typeConnector = connector.get('configType').value;
-      const connectors = this.gatewayConfigurationGroup.value.connectors;
-      connector.get('name').patchValue(this.createConnectorName(connectors, ConnectorType[typeConnector]));
-    }
-  }
-
-  changeConnectorName(connector: AbstractControl, index: number): void {
-    const connectors = this.gatewayConfigurationGroup.value.connectors;
-    connector.get('name').patchValue(this.validateConnectorName(connectors, connector.get('name').value, index));
-  }
-
-  save(): void {
-    const gatewayConfiguration: GatewayFormModels = this.gatewayConfigurationGroup.value;
-    forkJoin([
-      this.saveAttribute(
-        CONFIGURATION_ATTRIBUTE,
-        window.btoa(JSON.stringify(gatewayConfigJSON(gatewayConfiguration))),
-        AttributeScope.SHARED_SCOPE),
-      this.saveAttribute(
-        CONFIGURATION_DRAFT_ATTRIBUTE,
-        window.btoa(JSON.stringify(getDraftConnectorsJSON(gatewayConfiguration.connectors))),
-        AttributeScope.SERVER_SCOPE),
-      this.saveAttribute(
-        REMOTE_LOGGING_LEVEL_ATTRIBUTE,
-        this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(),
-        AttributeScope.SHARED_SCOPE)
-    ]).subscribe(() =>{
-      this.ctx.showSuccessToast(this.successfulSaved,
-        2000, 'top', 'left', this.toastTargetId);
-      this.gatewayConfigurationGroup.markAsPristine();
-    })
-  }
-
-  private getAttributes(gatewayId: string): Array<Observable<Array<AttributeData>>> {
-    const tasks = [];
-    tasks.push(forkJoin([this.getAttribute(CURRENT_CONFIGURATION_ATTRIBUTE, AttributeScope.CLIENT_SCOPE, gatewayId),
-      this.getAttribute(CONFIGURATION_DRAFT_ATTRIBUTE, AttributeScope.SERVER_SCOPE, gatewayId)]).pipe(
-        tap(([currentConfig, draftConfig]) => {
-          this.setFormGatewaySettings(currentConfig);
-          this.setFormConnectorsDraft(draftConfig);
-          if (this.isReadOnlyForm) {
-            this.gatewayConfigurationGroup.disable({emitEvent: false});
-          }
-        })
-      )
-    );
-    tasks.push(this.getAttribute(REMOTE_LOGGING_LEVEL_ATTRIBUTE, AttributeScope.SHARED_SCOPE, gatewayId).pipe(
-      tap(logsLevel => this.processLoggingLevel(logsLevel))
-    ));
-    return tasks;
-  }
-
-  private getAttribute(attributeName: string, attributeScope: AttributeScope, gatewayId: string): Observable<Array<AttributeData>> {
-    return this.attributeService.getEntityAttributes(getEntityId(gatewayId), attributeScope, [attributeName]);
-  }
-
-  private setFormGatewaySettings(response: Array<AttributeData>): void {
-    this.connectors.clear();
-    if (response.length > 0) {
-      const attribute = JSON.parse(window.atob(response[0].value));
-      for (const attributeKey of Object.keys(attribute)) {
-        const keyValue = attribute[attributeKey];
-        if (attributeKey === 'thingsboard') {
-          if (keyValue !== null && Object.keys(keyValue).length > 0) {
-            this.gatewayConfigurationGroup.patchValue(createFormConfig(keyValue));
-          }
-        } else {
-          for (const connector of Object.keys(keyValue)) {
-            let name = 'No name';
-            if (Object.prototype.hasOwnProperty.call(keyValue[connector], 'name')) {
-              name = keyValue[connector].name;
-            }
-            const newConnector: GatewayFormConnectorModel = {
-              enabled: true,
-              configType: (attributeKey as ConnectorType),
-              config: keyValue[connector].config,
-              name
-            };
-            this.createConnector(newConnector);
-          }
-        }
-      }
-    }
-  }
-
-  private setFormConnectorsDraft(response: Array<AttributeData>): void {
-    if (response.length > 0) {
-      const attribute = JSON.parse(window.atob(response[0].value));
-      for (const connectorName of Object.keys(attribute)) {
-        const newConnector: GatewayFormConnectorModel = {
-          enabled: false,
-          configType: (attribute[connectorName].connector as ConnectorType),
-          config: attribute[connectorName].config,
-          name: connectorName
-        };
-        this.createConnector(newConnector);
-      }
-    }
-  }
-
-  private processLoggingLevel(value: Array<AttributeData>): void {
-    let logsLevel = GatewayLogLevel.debug;
-    if (value.length > 0 && GatewayLogLevel[value[0].value.toLowerCase()]) {
-      logsLevel = GatewayLogLevel[value[0].value.toLowerCase()];
-    }
-    this.getFormField('remoteLoggingLevel').patchValue(logsLevel);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.models.ts
deleted file mode 100644
index 4bdb4e966b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.models.ts
+++ /dev/null
@@ -1,380 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { AbstractControl, ValidationErrors } from '@angular/forms';
-import { EntityId } from '@shared/models/id/entity-id';
-import { EntityType } from '@shared/models/entity-type.models';
-
-export enum SecurityType {
-  tls = 'tls',
-  accessToken = 'accessToken'
-}
-
-export interface WidgetSetting {
-  widgetTitle: string;
-  gatewayTitle?: string;
-  readOnly?: boolean;
-  archiveFileName: string;
-  gatewayType: string;
-  successfulSave: string;
-  gatewayNameExists: string;
-}
-
-export const CURRENT_CONFIGURATION_ATTRIBUTE = 'current_configuration';
-export const CONFIGURATION_DRAFT_ATTRIBUTE = 'configuration_drafts';
-export const CONFIGURATION_ATTRIBUTE = 'configuration';
-export const REMOTE_LOGGING_LEVEL_ATTRIBUTE = 'RemoteLoggingLevel';
-
-export const SecurityTypeTranslationMap = new Map<SecurityType, string>(
-  [
-    [SecurityType.tls, 'gateway.security-types.tls'],
-    [SecurityType.accessToken, 'gateway.security-types.access-token']
-  ]
-);
-
-export enum GatewayLogLevel {
-  none = 'NONE',
-  critical = 'CRITICAL',
-  error = 'ERROR',
-  warning = 'WARNING',
-  info = 'INFO',
-  debug = 'DEBUG'
-}
-
-export enum StorageType {
-  memory = 'memory',
-  file = 'file'
-}
-
-export const StorageTypeTranslationMap = new Map<StorageType, string>(
-  [
-    [StorageType.memory, 'gateway.storage-types.memory-storage'],
-    [StorageType.file, 'gateway.storage-types.file-storage']
-  ]
-);
-
-export enum ConnectorType {
-  mqtt= 'MQTT',
-  modbus = 'Modbus',
-  opcua = 'OPC-UA',
-  ble = 'BLE',
-  request = 'Request',
-  can = 'CAN',
-  bacnet = 'BACnet',
-  custom = 'Custom'
-}
-
-export interface GatewayFormModels {
-  gateway?: string;
-  accessToken?: string;
-  securityType?: SecurityType;
-  host?: string;
-  port?: number;
-  remoteConfiguration?: boolean;
-  caCertPath?: string;
-  privateKeyPath?: string;
-  certPath?: string;
-  remoteLoggingLevel?: GatewayLogLevel;
-  remoteLoggingPathToLogs?:string;
-  storageType?: StorageType;
-  readRecordsCount?: number;
-  maxRecordsCount?: number;
-  maxFilesCount?: number;
-  dataFolderPath?: number;
-  connectors?: Array<GatewayFormConnectorModel>;
-}
-
-export interface GatewayFormConnectorModel {
-  config: object;
-  name: string;
-  configType: ConnectorType;
-  enabled: boolean;
-}
-
-export const DEFAULT_CONNECTOR: GatewayFormConnectorModel = {
-  config: {},
-  name: '',
-  configType: null,
-  enabled: false
-};
-
-type Connector = {
-  [key in ConnectorType]?: Array<ConnectorConfig>;
-}
-
-interface GatewaySetting extends Connector{
-  thingsboard: GatewayMainSetting;
-}
-
-interface ConnectorConfig {
-  name: string;
-  config: object;
-}
-
-interface GatewayMainSetting {
-  thingsboard: GatewayMainThingsboardSetting;
-  connectors: Array<GatewayMainConnector>,
-  logs: string,
-  storage: GatewayStorage
-}
-
-interface GatewayMainThingsboardSetting {
-  host: string,
-  remoteConfiguration: boolean,
-  port: number,
-  security: GatewaySecurity
-}
-
-type GatewaySecurity = SecurityToken | SecurityCertificate;
-
-interface SecurityToken {
-  accessToken: string;
-}
-
-interface SecurityCertificate {
-  caCert: string;
-  privateKey: string;
-  cert: string;
-}
-
-type GatewayStorage = GatewayStorageMemory | GatewayStorageFile;
-
-interface GatewayStorageMemory {
-  type: string;
-  max_records_count: number;
-  read_records_count: number;
-}
-
-interface GatewayStorageFile {
-  type: string;
-  data_folder_path: number;
-  max_file_count: number;
-  max_read_records_count: number;
-  max_records_per_file: number;
-}
-
-interface GatewayMainConnector {
-  configuration: string;
-  name: string;
-  type: ConnectorType;
-}
-
-export function ValidateJSON(control: AbstractControl): ValidationErrors | null {
-  if (JSON.stringify(control.value) === JSON.stringify({})) {
-    return { validJSON: true };
-  }
-  return null;
-}
-
-const TEMPLATE_LOGS_CONFIG = '[loggers]}}keys=root, service, connector, converter, tb_connection, storage, extension}}[handlers]}}keys=consoleHandler, serviceHandler, connectorHandler, converterHandler, tb_connectionHandler, storageHandler, extensionHandler}}[formatters]}}keys=LogFormatter}}[logger_root]}}level=ERROR}}handlers=consoleHandler}}[logger_connector]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=connector}}[logger_storage]}}level={ERROR}}}handlers=storageHandler}}formatter=LogFormatter}}qualname=storage}}[logger_tb_connection]}}level={ERROR}}}handlers=tb_connectionHandler}}formatter=LogFormatter}}qualname=tb_connection}}[logger_service]}}level={ERROR}}}handlers=serviceHandler}}formatter=LogFormatter}}qualname=service}}[logger_converter]}}level={ERROR}}}handlers=converterHandler}}formatter=LogFormatter}}qualname=converter}}[logger_extension]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=extension}}[handler_consoleHandler]}}class=StreamHandler}}level={ERROR}}}formatter=LogFormatter}}args=(sys.stdout,)}}[handler_connectorHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}connector.log", "d", 1, 7,)}}[handler_storageHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}storage.log", "d", 1, 7,)}}[handler_serviceHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}service.log", "d", 1, 7,)}}[handler_converterHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}converter.log", "d", 1, 3,)}}[handler_extensionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}extension.log", "d", 1, 3,)}}[handler_tb_connectionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}tb_connection.log", "d", 1, 3,)}}[formatter_LogFormatter]}}format="%(asctime)s - %(levelname)s - [%(filename)s] - %(module)s - %(lineno)d - %(message)s" }}datefmt="%Y-%m-%d %H:%M:%S"';
-
-export function generateYAMLConfigFile(gatewaySetting: GatewayFormModels): string {
-  let config;
-  config = 'thingsboard:\n';
-  config += '  host: ' + gatewaySetting.host + '\n';
-  config += '  remoteConfiguration: ' + gatewaySetting.remoteConfiguration + '\n';
-  config += '  port: ' + gatewaySetting.port + '\n';
-  config += '  security:\n';
-  if (gatewaySetting.securityType === SecurityType.accessToken) {
-    config += '    access-token: ' + gatewaySetting.accessToken + '\n';
-  } else {
-    config += '    ca_cert: ' + gatewaySetting.caCertPath + '\n';
-    config += '    privateKey: ' + gatewaySetting.privateKeyPath + '\n';
-    config += '    cert: ' + gatewaySetting.certPath + '\n';
-  }
-  config += 'storage:\n';
-  if (gatewaySetting.storageType === StorageType.memory) {
-    config += '  type: memory\n';
-    config += '  read_records_count: ' + gatewaySetting.readRecordsCount + '\n';
-    config += '  max_records_count: ' + gatewaySetting.maxRecordsCount + '\n';
-  } else {
-    config += '  type: file\n';
-    config += '  data_folder_path: ' + gatewaySetting.dataFolderPath + '\n';
-    config += '  max_file_count: ' + gatewaySetting.maxFilesCount + '\n';
-    config += '  max_read_records_count: ' + gatewaySetting.readRecordsCount + '\n';
-    config += '  max_records_per_file: ' + gatewaySetting.maxRecordsCount + '\n';
-  }
-  config += 'connectors:\n';
-  for(const connector of gatewaySetting.connectors){
-    if (connector.enabled) {
-      config += '  -\n';
-      config += '    name: ' + connector.name + '\n';
-      config += '    type: ' + connector.configType + '\n';
-      config += '    configuration: ' + generateFileName(connector.name) + '\n';
-    }
-  }
-  return config;
-}
-
-export function generateConnectorConfigFiles(fileZipAdd: object, connectors: Array<GatewayFormConnectorModel>): void {
-  for(const connector of connectors) {
-    if (connector.enabled) {
-      fileZipAdd[generateFileName(connector.name)] = JSON.stringify(connector.config);
-    }
-  }
-}
-
-function generateFileName(fileName): string {
-  return fileName.replace('_', '')
-    .replace('-', '')
-    .replace(/^\s+|\s+/g, '')
-    .toLowerCase() + '.json';
-}
-
-export function generateLogConfigFile(fileZipAdd: object, logsLevel: string, logsPath: string): void {
-  fileZipAdd['logs.conf'] = getLogsConfig(logsLevel, logsPath);
-}
-
-function getLogsConfig(logsLevel: string, logsPath: string): string {
-  return TEMPLATE_LOGS_CONFIG
-    .replace(/{ERROR}/g, logsLevel)
-    .replace(/{.\/logs\/}/g, logsPath);
-}
-
-export function getEntityId(gatewayId: string): EntityId {
-  return {
-    id: gatewayId,
-    entityType: EntityType.DEVICE
-  }
-}
-
-export function createFormConfig(keyValue: GatewayMainSetting): GatewayFormModels {
-  const formSetting: GatewayFormModels = {};
-  if (Object.prototype.hasOwnProperty.call(keyValue, 'thingsboard')) {
-    formSetting.host = keyValue.thingsboard.host;
-    formSetting.port = keyValue.thingsboard.port;
-    formSetting.remoteConfiguration = keyValue.thingsboard.remoteConfiguration;
-    if (Object.prototype.hasOwnProperty.call(keyValue.thingsboard.security, SecurityType.accessToken)) {
-      formSetting.securityType = SecurityType.accessToken;
-      formSetting.accessToken = (keyValue.thingsboard.security as SecurityToken).accessToken;
-    } else {
-      formSetting.securityType = SecurityType.tls;
-      formSetting.caCertPath = (keyValue.thingsboard.security as SecurityCertificate).caCert;
-      formSetting.privateKeyPath = (keyValue.thingsboard.security as SecurityCertificate).privateKey;
-      formSetting.certPath = (keyValue.thingsboard.security as SecurityCertificate).cert;
-    }
-  }
-
-  if (Object.prototype.hasOwnProperty.call(keyValue, 'storage') && Object.prototype.hasOwnProperty.call(keyValue.storage, 'type')) {
-    if (keyValue.storage.type === StorageType.memory) {
-      formSetting.storageType = StorageType.memory;
-      formSetting.readRecordsCount = (keyValue.storage as GatewayStorageMemory).read_records_count;
-      formSetting.maxRecordsCount = (keyValue.storage as GatewayStorageMemory).max_records_count;
-    } else if (keyValue.storage.type === StorageType.file) {
-      formSetting.storageType = StorageType.file;
-      formSetting.dataFolderPath = (keyValue.storage as GatewayStorageFile).data_folder_path;
-      formSetting.maxFilesCount = (keyValue.storage as GatewayStorageFile).max_file_count;
-      formSetting.readRecordsCount = (keyValue.storage as GatewayStorageMemory).read_records_count;
-      formSetting.maxRecordsCount = (keyValue.storage as GatewayStorageMemory).max_records_count;
-    }
-  }
-  return formSetting;
-}
-
-export function getDraftConnectorsJSON(currentConnectors: Array<GatewayFormConnectorModel>) {
-  const draftConnectors = {};
-  for(const connector of currentConnectors){
-    if (!connector.enabled) {
-      draftConnectors[connector.name] = {
-        connector: connector.configType,
-        config: connector.config
-      };
-    }
-  }
-  return draftConnectors;
-}
-
-export function gatewayConfigJSON(gatewayConfiguration: GatewayFormModels): GatewaySetting {
-  const gatewayConfig = {
-    thingsboard: gatewayMainConfigJSON(gatewayConfiguration)
-  };
-  gatewayConnectorJSON(gatewayConfig, gatewayConfiguration.connectors);
-  return gatewayConfig;
-}
-
-function gatewayMainConfigJSON(gatewayConfiguration: GatewayFormModels): GatewayMainSetting {
-  let security: GatewaySecurity;
-  if (gatewayConfiguration.securityType === SecurityType.accessToken) {
-    security = {
-      accessToken: gatewayConfiguration.accessToken
-    }
-  } else {
-    security = {
-      caCert: gatewayConfiguration.caCertPath,
-      privateKey: gatewayConfiguration.privateKeyPath,
-      cert: gatewayConfiguration.certPath
-    }
-  }
-  const thingsboard: GatewayMainThingsboardSetting = {
-    host: gatewayConfiguration.host,
-    remoteConfiguration: gatewayConfiguration.remoteConfiguration,
-    port: gatewayConfiguration.port,
-    security
-  };
-
-  let storage: GatewayStorage;
-  if (gatewayConfiguration.storageType === StorageType.memory) {
-    storage = {
-      type: StorageType.memory,
-      read_records_count: gatewayConfiguration.readRecordsCount,
-      max_records_count: gatewayConfiguration.maxRecordsCount
-    };
-  } else {
-    storage = {
-      type: StorageType.file,
-      data_folder_path: gatewayConfiguration.dataFolderPath,
-      max_file_count: gatewayConfiguration.maxFilesCount,
-      max_read_records_count: gatewayConfiguration.readRecordsCount,
-      max_records_per_file: gatewayConfiguration.maxRecordsCount
-    };
-  }
-
-  const connectors: Array<GatewayMainConnector> = [];
-  for (const connector of gatewayConfiguration.connectors) {
-    if (connector.enabled) {
-      const connectorConfig: GatewayMainConnector = {
-        configuration: generateFileName(connector.name),
-        name: connector.name,
-        type: connector.configType
-      };
-      connectors.push(connectorConfig);
-    }
-  }
-
-  return {
-    thingsboard,
-    connectors,
-    storage,
-    logs: window.btoa(getLogsConfig(gatewayConfiguration.remoteLoggingLevel, gatewayConfiguration.remoteLoggingPathToLogs))
-  }
-}
-
-function gatewayConnectorJSON(gatewayConfiguration, currentConnectors: Array<GatewayFormConnectorModel>): void {
-  for (const connector of currentConnectors) {
-    if (connector.enabled) {
-      const typeConnector = connector.configType;
-      if (!Array.isArray(gatewayConfiguration[typeConnector])) {
-        gatewayConfiguration[typeConnector] = [];
-      }
-
-      const connectorConfig: ConnectorConfig = {
-        name: connector.name,
-        config: connector.config
-      };
-      gatewayConfiguration[typeConnector].push(connectorConfig);
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
deleted file mode 100644
index 098a8ce5e5..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<nav mat-tab-nav-bar [tabPanel]="tabPanel">
-  <a mat-tab-link *ngFor="let link of logLinks"
-     (click)="onTabChanged(link)"
-     [active]="activeLink.name === link.name"> {{ link.name }} </a>
-</nav>
-<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
-<table mat-table [dataSource]="dataSource" [trackBy]="trackByLogTs"
-       matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
-       matSortDisableClear>
-  <ng-container matColumnDef="ts">
-    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%">{{ 'widgets.gateway.created-time' | translate }}</mat-header-cell>
-    <mat-cell *matCellDef="let attribute">
-      {{ attribute.ts | date:'yyyy-MM-dd HH:mm:ss' }}
-    </mat-cell>
-  </ng-container>
-  <ng-container matColumnDef="status">
-    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 10%">{{ 'widgets.gateway.level' | translate }}</mat-header-cell>
-    <mat-cell *matCellDef="let attribute">
-      <span [class]="statusClass(attribute.status)">{{ attribute.status }}</span>
-    </mat-cell>
-  </ng-container>
-  <ng-container matColumnDef="message">
-    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{ 'widgets.gateway.message' | translate }}</mat-header-cell>
-    <mat-cell *matCellDef="let attribute" [class]="statusClassMsg(attribute.status)">
-      {{ attribute.message }}
-    </mat-cell>
-  </ng-container>
-  <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-  <mat-row class="mat-row-select" *matRowDef="let attribute; columns: displayedColumns;"></mat-row>
-</table>
-<span [fxShow]="dataSource.data.length === 0"
-      fxFlex fxLayoutAlign="center center"
-      class="no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
-<span fxFlex [fxShow]="dataSource.data.length !== 0"></span>
-<mat-divider></mat-divider>
-<mat-paginator [length]="dataSource.data.length"
-               [pageIndex]="pageLink.page"
-               [pageSize]="pageLink.pageSize"
-               [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.scss
deleted file mode 100644
index abddccb51d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-x: auto;
-  padding: 0;
-
-
-  .status {
-    border-radius: 20px;
-    font-weight: 500;
-    padding: 5px 15px;
-  }
-
-  .status-debug {
-    color: green;
-    background: rgba(0, 128, 0, 0.1);
-  }
-
-  .status-warning {
-    color: orange;
-    background: rgba(255, 165, 0, 0.1);
-  }
-
-  .status-error {
-    color: red;
-    background: rgba(255, 0, 0, 0.1);
-  }
-
-  .status-info {
-    color: blue;
-    background: rgba(0, 0, 128, 0.1);
-  }
-
-  .msg-status-exception {
-    color: red;
-  }
-
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts
deleted file mode 100644
index 5fba27f86c..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { PageLink } from '@shared/models/page/page-link';
-import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { WidgetContext } from '@home/models/widget-component.models';
-import { MatPaginator } from '@angular/material/paginator';
-import { GatewayLogData, GatewayStatus, LogLink } from './gateway-widget.models';
-
-@Component({
-  selector: 'tb-gateway-logs',
-  templateUrl: './gateway-logs.component.html',
-  styleUrls: ['./gateway-logs.component.scss']
-})
-export class GatewayLogsComponent implements OnInit, AfterViewInit {
-
-  pageLink: PageLink;
-
-  dataSource: MatTableDataSource<GatewayLogData>;
-
-  displayedColumns = ['ts', 'status', 'message'];
-
-  @Input()
-  ctx: WidgetContext;
-
-  @Input()
-  dialogRef: MatDialogRef<any>;
-
-  @ViewChild('searchInput') searchInputField: ElementRef;
-  @ViewChild(MatSort) sort: MatSort;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-
-  textSearchMode: boolean;
-
-  logLinks: Array<LogLink>;
-
-  activeLink: LogLink;
-
-  gatewayLogLinks: Array<LogLink> = [
-    {
-      name: 'General',
-      key: 'LOGS'
-    }, {
-      name: 'Service',
-      key: 'SERVICE_LOGS'
-    },
-    {
-      name: 'Connection',
-      key: 'CONNECTION_LOGS'
-    }, {
-      name: 'Storage',
-      key: 'STORAGE_LOGS'
-    },
-    {
-      key: 'EXTENSIONS_LOGS',
-      name: 'Extension'
-    }];
-
-
-  constructor() {
-    const sortOrder: SortOrder = {property: 'ts', direction: Direction.DESC};
-    this.pageLink = new PageLink(10, 0, null, sortOrder);
-    this.dataSource = new MatTableDataSource<GatewayLogData>([]);
-  }
-
-  ngOnInit(): void {
-    this.updateWidgetTitle();
-  }
-
-  ngAfterViewInit() {
-    this.dataSource.sort = this.sort;
-    this.dataSource.paginator = this.paginator;
-    this.ctx.defaultSubscription.onTimewindowChangeFunction = timewindow => {
-      this.ctx.defaultSubscription.options.timeWindowConfig = timewindow;
-      this.ctx.defaultSubscription.updateDataSubscriptions();
-      return timewindow;
-    };
-    if (this.ctx.settings.isConnectorLog && this.ctx.settings.connectorLogState) {
-      const connector = this.ctx.stateController.getStateParams()[this.ctx.settings.connectorLogState];
-      this.logLinks = [{
-        key: `${connector.key}_LOGS`,
-        name: 'Connector',
-        filterFn: (attrData) => !attrData.message.includes(`_converter.py`)
-      }, {
-        key: `${connector.key}_LOGS`,
-        name: 'Converter',
-        filterFn: (attrData) => attrData.message.includes(`_converter.py`)
-      }];
-    } else {
-      this.logLinks = this.gatewayLogLinks;
-    }
-    this.activeLink = this.logLinks[0];
-    this.changeSubscription();
-  }
-
-  private updateWidgetTitle(): void {
-    if (this.ctx.settings.isConnectorLog && this.ctx.settings.connectorLogState) {
-      const widgetTitle = this.ctx.widgetConfig.title;
-      const titlePlaceholder = '${connectorName}';
-      if (widgetTitle.includes(titlePlaceholder)) {
-        const connector = this.ctx.stateController.getStateParams()[this.ctx.settings.connectorLogState];
-        this.ctx.widgetTitle = widgetTitle.replace(titlePlaceholder, connector.key);
-      }
-    }
-  }
-
-
-  private updateData() {
-    if (this.ctx.defaultSubscription.data.length && this.ctx.defaultSubscription.data[0]) {
-      let attrData = this.ctx.defaultSubscription.data[0].data.map(data => {
-        const result = {
-          ts: data[0],
-          key: this.activeLink.key,
-          message: data[1],
-          status: 'INVALID LOG FORMAT' as GatewayStatus
-        };
-
-        try {
-          result.message = /\[(.*)/.exec(data[1])[0];
-        } catch (e) {
-          result.message = data[1];
-        }
-
-        try {
-          result.status = data[1].match(/\|(\w+)\|/)[1];
-        } catch (e) {
-          result.status = 'INVALID LOG FORMAT' as GatewayStatus;
-        }
-
-        return result;
-      });
-      if (this.activeLink.filterFn) {
-        attrData = attrData.filter(data => this.activeLink.filterFn(data));
-      }
-      this.dataSource.data = attrData;
-    }
-  }
-
-  onTabChanged(link: LogLink) {
-    this.activeLink = link;
-    this.changeSubscription();
-  }
-
-  statusClass(status: GatewayStatus): string {
-    switch (status) {
-      case GatewayStatus.DEBUG:
-        return 'status status-debug';
-      case GatewayStatus.WARNING:
-        return 'status status-warning';
-      case GatewayStatus.ERROR:
-      case GatewayStatus.EXCEPTION:
-        return 'status status-error';
-      default:
-        return 'status status-info';
-    }
-  }
-
-  statusClassMsg(status?: GatewayStatus): string {
-    if (status === GatewayStatus.EXCEPTION) {
-      return 'msg-status-exception';
-    }
-  }
-
-  trackByLogTs(_: number, log: GatewayLogData): number {
-    return log.ts;
-  }
-
-  private changeSubscription() {
-    if (this.ctx.datasources && this.ctx.datasources[0].entity && this.ctx.defaultSubscription.options.datasources) {
-      this.ctx.defaultSubscription.options.datasources[0].dataKeys = [{
-        name: this.activeLink.key,
-        type: DataKeyType.timeseries,
-        settings: {}
-      }];
-      this.ctx.defaultSubscription.unsubscribe();
-      this.ctx.defaultSubscription.updateDataSubscriptions();
-      this.ctx.defaultSubscription.callbacks.onDataUpdated = () => {
-        this.updateData();
-      };
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
deleted file mode 100644
index 0d5d96e45b..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-toolbar color="warn">
-  <mat-icon>warning</mat-icon>
-  <h2 translate>gateway.configuration-delete-dialog-header</h2>
-  <span fxFlex></span>
-  <button mat-icon-button
-          (click)="close()"
-          type="button">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-</mat-toolbar>
-<div mat-dialog-content style="max-width: 600px" class="mat-content" fxLayout="column">
-  <span innerHTML="{{ 'gateway.configuration-delete-dialog-body' | translate }} <b>{{ gatewayName }}</b>" ></span>
-  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">
-    <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>
-    <input matInput [formControl]="gatewayControl" required/>
-    <mat-error
-      *ngIf="gatewayControl.hasError('required')">
-      {{ 'gateway.configuration-delete-dialog-input-required' | translate }}
-    </mat-error>
-  </mat-form-field>
-</div>
-<div mat-dialog-actions fxLayoutAlign="end center">
-  <button mat-button color="warn"
-          type="button"
-          cdkFocusInitial
-          (click)="close()">
-    {{ 'action.cancel' | translate }}
-  </button>
-  <button mat-button color="warn"
-          type="button"
-          [disabled]="gatewayControl.value !== gatewayName"
-          (click)="turnOff()">
-    {{ 'gateway.configuration-delete-dialog-confirm' | translate }}
-  </button>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts
deleted file mode 100644
index b4725016ba..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { DialogComponent } from '@shared/components/dialog.component';
-import { Router } from '@angular/router';
-import { FormBuilder, FormControl } from '@angular/forms';
-
-export interface GatewayRemoteConfigurationDialogData {
-  gatewayName: string;
-}
-
-@Component({
-  selector: 'gateway-remote-configuration-dialog',
-  templateUrl: './gateway-remote-configuration-dialog.html'
-})
-
-export class GatewayRemoteConfigurationDialogComponent extends
-  DialogComponent<GatewayRemoteConfigurationDialogComponent, boolean>{
-
-  gatewayName: string;
-  gatewayControl: FormControl;
-
-  constructor(protected store: Store<AppState>,
-              protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: GatewayRemoteConfigurationDialogData,
-              public dialogRef: MatDialogRef<GatewayRemoteConfigurationDialogComponent, boolean>,
-              private fb: FormBuilder) {
-    super(store, router, dialogRef);
-    this.gatewayName = this.data.gatewayName;
-    this.gatewayControl = this.fb.control('');
-  }
-
-  close(): void {
-    this.dialogRef.close();
-  }
-
-  turnOff(): void {
-    this.dialogRef.close(true);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html
deleted file mode 100644
index d8b028361d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-toolbar color="primary">
-  <h2 translate>gateway.rpc.save-template</h2>
-  <span fxFlex></span>
-  <button mat-icon-button
-          (click)="close()"
-          type="button">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-</mat-toolbar>
-<div mat-dialog-content style="width: 600px" class="mat-content" fxLayout="column">
-  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">
-    <mat-label translate>gateway.rpc.template-name</mat-label>
-    <input matInput [formControl]="templateNameCtrl" required/>
-    <mat-error
-      *ngIf="templateNameCtrl.hasError('required')">
-      {{ 'gateway.rpc.template-name-required' | translate }}
-    </mat-error>
-  </mat-form-field>
-  <div class="mat-mdc-form-field-error"
-       style="margin-top: -15px; padding-left: 10px; font-size: 14px;"
-       *ngIf="validateDuplicateName(templateNameCtrl)">
-    {{ 'gateway.rpc.template-name-duplicate' | translate }}
-  </div>
-</div>
-<div mat-dialog-actions fxLayoutAlign="end center">
-  <button mat-button
-          type="button"
-          (click)="close()">
-    {{ 'action.cancel' | translate }}
-  </button>
-  <button mat-raised-button  color="primary"
-          type="button"
-          [disabled]="!templateNameCtrl.valid"
-          (click)="save()">
-    {{ 'action.save' | translate }}
-  </button>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.ts
deleted file mode 100644
index 5c70e1f233..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { DialogComponent } from '@shared/components/dialog.component';
-import { Router } from '@angular/router';
-import { FormBuilder, FormControl, UntypedFormControl, Validators } from '@angular/forms';
-import { RPCTemplate, SaveRPCTemplateData } from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-@Component({
-  selector: 'gateway-service-rpc-connector-template-dialog',
-  templateUrl: './gateway-service-rpc-connector-template-dialog.html'
-})
-
-export class GatewayServiceRPCConnectorTemplateDialogComponent extends DialogComponent<GatewayServiceRPCConnectorTemplateDialogComponent, boolean> {
-
-  config: {
-    [key: string]: any;
-  };
-  templates: Array<RPCTemplate>;
-  templateNameCtrl: FormControl;
-
-  constructor(protected store: Store<AppState>,
-              protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: SaveRPCTemplateData,
-              public dialogRef: MatDialogRef<GatewayServiceRPCConnectorTemplateDialogComponent, boolean>,
-              public fb: FormBuilder) {
-    super(store, router, dialogRef);
-    this.config = this.data.config;
-    this.templates = this.data.templates;
-    this.templateNameCtrl = this.fb.control('', [Validators.required]);
-  }
-
-  validateDuplicateName(c: UntypedFormControl) {
-    const name = c.value.trim();
-    return !!this.templates.find((template) => template.name === name);
-  };
-
-  close(): void {
-    this.dialogRef.close();
-  }
-
-  save(): void {
-    this.templateNameCtrl.setValue(this.templateNameCtrl.value.trim());
-    if (this.templateNameCtrl.valid) this.dialogRef.close(this.templateNameCtrl.value);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
deleted file mode 100644
index 0d01a1c1d7..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="mat-subtitle-1 title">{{ 'gateway.rpc.templates-title' | translate }}</div>
-<mat-expansion-panel hideToggle *ngFor="let template of rpcTemplates">
-  <mat-expansion-panel-header>
-    <mat-panel-title class="template-name">
-      <span matTooltip="{{template.name}}" matTooltipPosition="above">{{template.name}}</span>
-    </mat-panel-title>
-    <mat-panel-description>
-      <button mat-icon-button matTooltip="Delete" (click)="deleteTemplate($event, template)">
-        <mat-icon class="material-icons">delete</mat-icon>
-      </button>
-      <button mat-icon-button matTooltip="Use" (click)="applyTemplate($event, template)">
-        <mat-icon class="material-icons">play_arrow</mat-icon>
-      </button>
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-
-  <ng-container
-    *ngFor="let config of template.config | keyValueIsNotEmpty"
-    [ngTemplateOutlet]="RPCTemplateRef"
-    [ngTemplateOutletContext]="{ $implicit: config, innerValue: false }">
-  </ng-container>
-  <ng-template #RPCTemplateRef let-config let-innerValue='innerValue'>
-    <div [fxLayout]="isObject(config.value) ? 'column': 'row'"
-         [fxLayoutAlign]="!isObject(config.value) ? 'space-between center' : ''"
-         [ngStyle]="{'padding-left': innerValue ? '16px': '0'}"
-         class="rpc-params-row">
-      <div class="template-key">
-        {{!innerValue ? ('gateway.rpc.' + config.key | translate) : config.key}}
-      </div>
-      <div *ngIf="isArray(config.value)" tbTruncateWithTooltip class="array-value">
-        {{ config.value | getRpcTemplateArrayView }}
-      </div>
-      <ng-container *ngIf="isObject(config.value)" [ngTemplateOutlet]="RPCObjectRow"></ng-container>
-      <div *ngIf="!isObject(config.value) && !isArray(config.value)"
-           [ngClass]="{'boolean-true': config.value === true,
-                   'boolean-false': config.value === false  }">
-        <ng-container *ngIf="config.key === 'method' else value" [ngTemplateOutlet]="SNMPMethod"></ng-container>
-      </div>
-      <ng-template #value>{{ config.value }}</ng-template>
-      <ng-template #SNMPMethod>{{ SNMPMethodsTranslations.get(config.value) | translate }}</ng-template>
-      <ng-template #RPCObjectRow>
-        <ng-container
-          *ngFor="let subConfig of config.value | keyvalue : originalOrder"
-          [ngTemplateOutlet]="RPCTemplateRef"
-          [ngTemplateOutletContext]="{ $implicit: subConfig, innerValue: true }">
-        </ng-container>
-      </ng-template>
-    </div>
-  </ng-template>
-</mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.scss
deleted file mode 100644
index bf037a7249..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-
-  .title {
-    font-weight: 500;
-  }
-
-  .template-key {
-    color: rgba(0, 0, 0, 0.38);
-    height: 32px;
-    line-height: 32px;
-  }
-
-  .boolean-true, .boolean-false {
-    border-radius: 3px;
-    height: 32px;
-    line-height: 32px;
-    padding: 0 12px;
-    width: fit-content;
-    font-size: 14px;
-    text-transform: capitalize;
-  }
-
-  .boolean-false {
-    color: #d12730;
-    background-color: rgba(209, 39, 48, 0.08);
-  }
-
-  .boolean-true {
-    color: #198038;
-    background-color: rgba(25, 128, 56, 0.08);
-  }
-
-  mat-expansion-panel {
-    margin-top: 10px;
-    overflow: visible;
-  }
-
-  .mat-expansion-panel-header-description {
-    flex-direction: row-reverse;
-    align-items: center;
-    margin-right: 0;
-    flex: 0;
-
-    & > mat-icon {
-      margin-left: 15px;
-      color: rgba(0, 0, 0, 0.38);
-    }
-  }
-
-  .mat-expansion-panel-header {
-    padding: 0 0 0 12px;
-
-    &.mat-expansion-panel-header.mat-expanded {
-      height: 48px;
-    }
-
-    .mat-content.mat-content-hide-toggle {
-      margin-right: 0;
-    }
-  }
-
-  .rpc-params-row {
-    overflow: hidden;
-    white-space: nowrap;
-
-    & :not(:first-child) {
-      white-space: pre;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .template-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-  }
-
-  ::ng-deep .mat-content {
-    align-items: center;
-  }
-
-  .mat-expansion-panel-header-title {
-    flex: 1;
-    margin: 0;
-  }
-
-  .array-value {
-    margin-left: 10px;
-  }
-}
-
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.ts
deleted file mode 100644
index 9c2e551a22..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import {
-  ConnectorType,
-  RPCTemplate,
-  SNMPMethodsTranslations
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { EntityType } from '@shared/models/entity-type.models';
-import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { AttributeService } from '@core/http/attribute.service';
-import { WidgetContext } from '@home/models/widget-component.models';
-import { isLiteralObject } from '@app/core/utils';
-
-@Component({
-  selector: 'tb-gateway-service-rpc-connector-templates',
-  templateUrl: './gateway-service-rpc-connector-templates.component.html',
-  styleUrls: ['./gateway-service-rpc-connector-templates.component.scss']
-})
-export class GatewayServiceRPCConnectorTemplatesComponent implements OnInit {
-
-  @Input()
-  connectorType: ConnectorType;
-
-  @Input()
-  ctx: WidgetContext;
-
-  @Output()
-  saveTemplate: EventEmitter<any> = new EventEmitter();
-
-  @Output()
-  useTemplate: EventEmitter<any> = new EventEmitter();
-
-  @Input()
-  rpcTemplates: Array<RPCTemplate>;
-
-  public readonly originalOrder = (): number => 0;
-  public readonly isObject = (value: unknown) => isLiteralObject(value);
-  public readonly isArray = (value: unknown) => Array.isArray(value);
-  public readonly SNMPMethodsTranslations = SNMPMethodsTranslations;
-
-  constructor(private attributeService: AttributeService) {
-  }
-
-  ngOnInit() {
-  }
-
-  public applyTemplate($event: Event, template: RPCTemplate): void {
-    $event.stopPropagation();
-    this.useTemplate.emit(template);
-  }
-
-  public deleteTemplate($event: Event, template: RPCTemplate): void {
-    $event.stopPropagation();
-    const index = this.rpcTemplates.findIndex(data => {
-      return data.name == template.name;
-    })
-    this.rpcTemplates.splice(index, 1);
-    const key = `${this.connectorType}_template`;
-    this.attributeService.saveEntityAttributes(
-      {
-        id: this.ctx.defaultSubscription.targetDeviceId,
-        entityType: EntityType.DEVICE
-      }
-      , AttributeScope.SERVER_SCOPE, [{
-        key,
-        value: this.rpcTemplates
-      }]).subscribe(() => {
-    })
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
deleted file mode 100644
index fde4ab28ac..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.html
+++ /dev/null
@@ -1,413 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div fxLayout="column" class="command-form" [formGroup]="commandForm">
-  <div
-    class="mat-subtitle-1 title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>
-  <ng-template [ngIf]="connectorType">
-    <ng-container [ngSwitch]="connectorType">
-      <ng-template [ngSwitchCase]="ConnectorType.BACNET">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
-          <input matInput formControlName="method" placeholder="set_state"/>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ 'gateway.rpc.requestType' | translate }}</mat-label>
-          <mat-select formControlName="requestType">
-            <mat-option *ngFor="let type of bACnetRequestTypes" [value]="type">
-              {{bACnetRequestTypesTranslates.get(type) | translate}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.requestTimeout' | translate }}</mat-label>
-          <input matInput formControlName="requestTimeout" type="number"
-                 min="10" step="1" placeholder="1000"/>
-        </mat-form-field>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="50" class="mat-block">
-            <mat-label>{{ 'gateway.rpc.objectType' | translate }}</mat-label>
-            <mat-select formControlName="objectType">
-              <mat-option *ngFor="let type of bACnetObjectTypes" [value]="type">
-                {{bACnetObjectTypesTranslates.get(type) | translate}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field fxFlex="50">
-            <mat-label>{{ 'gateway.rpc.identifier' | translate }}</mat-label>
-            <input matInput formControlName="identifier" type="number"
-                   min="1" step="1" placeholder="1"/>
-          </mat-form-field>
-        </div>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ 'gateway.rpc.propertyId' | translate }}</mat-label>
-          <input matInput formControlName="propertyId" placeholder="presentValue"/>
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.BLE">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
-          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.characteristicUUID' | translate }}</mat-label>
-          <input matInput formControlName="characteristicUUID" placeholder="00002A00-0000-1000-8000-00805F9B34FB"/>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ 'gateway.rpc.methodProcessing' | translate }}</mat-label>
-          <mat-select formControlName="methodProcessing">
-            <mat-option *ngFor="let type of bLEMethods" [value]="type">
-              {{bLEMethodsTranslates.get(type) | translate}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-slide-toggle class="mat-slide" formControlName="withResponse">
-          {{ 'gateway.rpc.withResponse' | translate }}
-        </mat-slide-toggle>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.CAN">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
-          <input matInput formControlName="method" placeholder="sendSameData"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.nodeID' | translate }}</mat-label>
-          <input matInput formControlName="nodeID" type="number" placeholder="4" min="0" step="1"/>
-        </mat-form-field>
-        <mat-slide-toggle class="mat-slide margin" formControlName="isExtendedID">
-          {{ 'gateway.rpc.isExtendedID' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide margin" formControlName="isFD">
-          {{ 'gateway.rpc.isFD' | translate }}
-        </mat-slide-toggle>
-        <mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch">
-          {{ 'gateway.rpc.bitrateSwitch' | translate }}
-        </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="50">
-            <mat-label>{{ 'gateway.rpc.dataLength' | translate }}</mat-label>
-            <input matInput formControlName="dataLength" type="number" placeholder="2" min="1" step="1"/>
-          </mat-form-field>
-          <mat-form-field class="mat-block" fxFlex="50">
-            <mat-label>{{ 'gateway.rpc.dataByteorder' | translate }}</mat-label>
-            <mat-select formControlName="dataByteorder">
-              <mat-option *ngFor="let order of cANByteOrders" [value]="order">
-                {{ order | translate }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="50">
-            <mat-label>{{ 'gateway.rpc.dataBefore' | translate }}</mat-label>
-            <input matInput formControlName="dataBefore" placeholder="00AA"/>
-          </mat-form-field>
-          <mat-form-field fxFlex="50">
-            <mat-label>{{ 'gateway.rpc.dataAfter' | translate }}</mat-label>
-            <input matInput formControlName="dataAfter" placeholder="0102"/>
-          </mat-form-field>
-        </div>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.dataInHEX' | translate }}</mat-label>
-          <input matInput formControlName="dataInHEX"
-                 placeholder="aa bb cc dd ee ff   aa bb aa bb cc d ee ff"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.dataExpression' | translate }}</mat-label>
-          <input matInput formControlName="dataExpression"
-                 placeholder="userSpeed if maxAllowedSpeed > userSpeed else maxAllowedSpeed"/>
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.FTP">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
-          <input matInput formControlName="methodFilter" placeholder="read"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
-          <input matInput formControlName="valueExpression" placeholder="${params}"/>
-        </mat-form-field>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.OCPP">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
-          <input matInput formControlName="methodRPC" placeholder="rpc1"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
-          <input matInput formControlName="valueExpression" placeholder="${params}"/>
-        </mat-form-field>
-        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
-          {{ 'gateway.rpc.withResponse' | translate }}
-        </mat-slide-toggle>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.SOCKET">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
-          <input matInput formControlName="methodRPC" placeholder="rpcMethod1"/>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ 'gateway.rpc.methodProcessing' | translate }}</mat-label>
-          <mat-select formControlName="methodProcessing">
-            <mat-option *ngFor="let method of socketMethodProcessings" [value]="method">
-              {{ SocketMethodProcessingsTranslates.get(method) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ 'gateway.rpc.encoding' | translate }}</mat-label>
-          <input matInput formControlName="encoding" placeholder="{{socketEncodings[0]}}"/>
-        </mat-form-field>
-        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
-          {{ 'gateway.rpc.withResponse' | translate }}
-        </mat-slide-toggle>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.XMPP">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label>
-          <input matInput formControlName="methodRPC" placeholder="rpc1"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
-          <input matInput formControlName="valueExpression" placeholder="${params}"/>
-        </mat-form-field>
-        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
-          {{ 'gateway.rpc.withResponse' | translate }}
-        </mat-slide-toggle>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.SNMP">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.requestFilter' | translate }}</mat-label>
-          <input matInput formControlName="requestFilter" placeholder="setData"/>
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label>
-          <mat-select formControlName="method">
-            <mat-option *ngFor="let method of sNMPMethods" [value]="method">
-              {{ SNMPMethodsTranslations.get(method) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-slide-toggle class="mat-slide margin" formControlName="withResponse">
-          {{ 'gateway.rpc.withResponse' | translate }}
-        </mat-slide-toggle>
-        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="oid">
-          <span class="fields-label">{{ 'gateway.rpc.oids' | translate }}*</span>
-          <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
-               *ngFor="let control of getFormArrayControls('oid'); let i = index">
-            <mat-form-field class="tb-inline-field" appearance="outline" fxFlex subscriptSizing="dynamic">
-              <input matInput [formControl]="control" required/>
-            </mat-form-field>
-            <mat-icon style="cursor:pointer;"
-                      fxFlex="30px"
-                      (click)="removeSNMPoid(i)"
-                      matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
-            </mat-icon>
-          </div>
-          <button mat-raised-button
-                  fxFlexAlign="start"
-                  (click)="addSNMPoid()">
-            {{ 'gateway.rpc.add-oid' | translate }}
-          </button>
-        </fieldset>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.REST">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
-          <input matInput formControlName="methodFilter" placeholder="post_attributes"/>
-        </mat-form-field>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field class="mat-block" fxFlex="33">
-            <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
-            <mat-select formControlName="httpMethod">
-              <mat-option *ngFor="let method of hTTPMethods" [value]="method">
-                {{ method }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label>
-            <input matInput formControlName="requestUrlExpression"
-                   placeholder="http://127.0.0.1:5000/my_devices"/>
-          </mat-form-field>
-        </div>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="33">
-            <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
-            <input matInput formControlName="responseTimeout" type="number"
-                   step="1" min="10" placeholder="10"/>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label>
-            <input matInput formControlName="timeout" type="number"
-                   step="1" min="10" placeholder="1000"/>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label>
-            <input matInput formControlName="tries" type="number"
-                   step="1" min="1" placeholder="3"/>
-          </mat-form-field>
-        </div>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label>
-          <input matInput formControlName="valueExpression" placeholder="${params}"/>
-        </mat-form-field>
-        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">
-          <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
-          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length">
-            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-              <span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span>
-              <span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span>
-              <span fxFlex="30px"></span>
-            </div>
-            <mat-divider></mat-divider>
-            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
-                 *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
-              <ng-container [formGroupName]="i">
-                <mat-form-field appearance="outline" fxFlex>
-                  <input matInput formControlName="headerName"/>
-                </mat-form-field>
-                <mat-form-field appearance="outline" fxFlex>
-                  <input matInput formControlName="value" placeholder="application/json"/>
-                </mat-form-field>
-                <mat-icon style="cursor:pointer;"
-                          fxFlex="30px"
-                          (click)="removeHTTPHeader(i)"
-                          matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
-                </mat-icon>
-              </ng-container>
-            </div>
-          </div>
-          <button mat-raised-button
-                  fxFlexAlign="start"
-                  (click)="addHTTPHeader()">
-            {{ 'gateway.rpc.add-header' | translate }}
-          </button>
-        </fieldset>
-        <tb-rest-connector-security [formControl]="commandForm.get('security')"></tb-rest-connector-security>
-      </ng-template>
-      <ng-template [ngSwitchCase]="ConnectorType.REQUEST">
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label>
-          <input matInput formControlName="methodFilter" placeholder="echo"/>
-        </mat-form-field>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field class="mat-block" fxFlex="33">
-            <mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label>
-            <mat-select formControlName="httpMethod">
-              <mat-option *ngFor="let method of hTTPMethods" [value]="method">
-                {{ method }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label>
-            <input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/>
-          </mat-form-field>
-        </div>
-        <div fxFlex fxLayout="row" fxLayoutGap="10px">
-          <mat-form-field fxFlex="33">
-            <mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label>
-            <input matInput formControlName="responseTimeout" type="number"
-                   step="1" min="10" placeholder="10"/>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label>
-            <input matInput formControlName="timeout" type="number"
-                   step="1" min="10" placeholder="10"/>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label>
-            <input matInput formControlName="tries" type="number"
-                   step="1" min="1" placeholder="1"/>
-          </mat-form-field>
-        </div>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.requestValueExpression' | translate }}</mat-label>
-          <input matInput formControlName="requestValueExpression" placeholder="${params}"/>
-        </mat-form-field>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.rpc.responseValueExpression' | translate }}</mat-label>
-          <input matInput formControlName="responseValueExpression" placeholder="${temp}"/>
-        </mat-form-field>
-        <fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders">
-          <span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span>
-          <div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length">
-            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-              <span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span>
-              <span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span>
-              <span fxFlex="30px"></span>
-            </div>
-            <mat-divider></mat-divider>
-            <div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"
-                 *ngFor="let control of getFormArrayControls('httpHeaders'); let i = index">
-              <ng-container [formGroupName]="i">
-                <mat-form-field appearance="outline" fxFlex>
-                  <input matInput formControlName="headerName" placeholder="{{ 'gateway.rpc.set' | translate }}"/>
-                </mat-form-field>
-                <mat-form-field appearance="outline" fxFlex>
-                  <input matInput formControlName="value"/>
-                </mat-form-field>
-                <mat-icon style="cursor:pointer;"
-                          fxFlex="30px"
-                          (click)="removeHTTPHeader(i)"
-                          matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete
-                </mat-icon>
-              </ng-container>
-            </div>
-          </div>
-          <button mat-raised-button
-                  fxFlexAlign="start"
-                  (click)="addHTTPHeader()">
-            {{ 'gateway.rpc.add-header' | translate }}
-          </button>
-        </fieldset>
-      </ng-template>
-      <ng-template ngSwitchDefault>
-        <mat-form-field>
-          <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
-          <input matInput formControlName="command"/>
-        </mat-form-field>
-        <mat-form-field fxFlex>
-          <mat-label>{{ 'widget-config.datasource-parameters' | translate }}</mat-label>
-          <input matInput formControlName="params" type="JSON" tb-json-to-string/>
-          <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"
-                    matIconSuffix style="cursor:pointer;"
-                    (click)="openEditJSONDialog($event)"
-                    matTooltip="{{ 'gateway.rpc-command-edit-params' | translate }}">edit
-          </mat-icon>
-          <mat-error *ngIf="commandForm.get('params').hasError('invalidJSON')">
-            {{ 'gateway.rpc.json-value-invalid' | translate }}
-          </mat-error>
-        </mat-form-field>
-      </ng-template>
-    </ng-container>
-  </ng-template>
-  <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
-    <button mat-raised-button
-            (click)="save()"
-            [disabled]="commandForm.invalid">
-      {{ 'gateway.rpc-command-save-template' | translate }}
-    </button>
-    <button mat-raised-button
-            color="primary"
-            (click)="sendCommand.emit()"
-            [disabled]="commandForm.invalid">
-      {{ 'gateway.rpc-command-send' | translate }}
-    </button>
-  </div>
-</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.scss
deleted file mode 100644
index a0af50aee8..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-
-  .title {
-    font-weight: 500;
-  }
-
-  .command-form {
-    flex-wrap: nowrap;
-
-    & > button {
-      margin-top: 10px;
-    }
-  }
-
-  .mat-mdc-slide-toggle.margin {
-    margin-bottom: 10px;
-    margin-left: 10px;
-  }
-
-  .fields{
-    .fields-label {
-      font-weight: 500;
-    }
-  }
-
-  .border {
-    padding: 16px;
-    margin-bottom: 10px;
-    box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
-    border: solid 1px #e0e0e0;
-    border-radius: 4px;
-
-    .title {
-      color: rgba(0, 0, 0, .54);
-    }
-
-    .mat-icon {
-      color: rgba(0, 0, 0, .38);
-    }
-
-    .mat-divider {
-      margin-left: -16px;
-      margin-right: -16px;
-      margin-bottom: 16px;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.ts
deleted file mode 100644
index f77e877aea..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector.component.ts
+++ /dev/null
@@ -1,345 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormArray,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  NG_VALUE_ACCESSOR,
-  Validators
-} from '@angular/forms';
-import {
-  BACnetObjectTypes,
-  BACnetObjectTypesTranslates,
-  BACnetRequestTypes,
-  BACnetRequestTypesTranslates,
-  BLEMethods,
-  BLEMethodsTranslates,
-  CANByteOrders,
-  ConnectorType,
-  GatewayConnectorDefaultTypesTranslatesMap,
-  HTTPMethods,
-  noLeadTrailSpacesRegex,
-  RPCCommand,
-  RPCTemplateConfig,
-  SNMPMethods,
-  SNMPMethodsTranslations,
-  SocketEncodings,
-  SocketMethodProcessings,
-  SocketMethodProcessingsTranslates
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { MatDialog } from '@angular/material/dialog';
-import {
-  JsonObjectEditDialogComponent,
-  JsonObjectEditDialogData
-} from '@shared/components/dialog/json-object-edit-dialog.component';
-import { jsonRequired } from '@shared/components/json-object-edit.component';
-import { deepClone } from '@core/utils';
-import { Subject } from "rxjs";
-
-@Component({
-  selector: 'tb-gateway-service-rpc-connector',
-  templateUrl: './gateway-service-rpc-connector.component.html',
-  styleUrls: ['./gateway-service-rpc-connector.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => GatewayServiceRPCConnectorComponent),
-      multi: true
-    }
-  ]
-})
-export class GatewayServiceRPCConnectorComponent implements OnInit, OnDestroy, ControlValueAccessor {
-
-  @Input()
-  connectorType: ConnectorType;
-
-  @Output()
-  sendCommand: EventEmitter<RPCCommand> = new EventEmitter();
-
-  @Output()
-  saveTemplate: EventEmitter<RPCTemplateConfig> = new EventEmitter();
-
-  commandForm: FormGroup;
-  ConnectorType = ConnectorType;
-  bACnetRequestTypes = Object.values(BACnetRequestTypes) as BACnetRequestTypes[];
-  bACnetObjectTypes = Object.values(BACnetObjectTypes) as BACnetObjectTypes[];
-  bLEMethods = Object.values(BLEMethods) as BLEMethods[];
-  cANByteOrders = Object.values(CANByteOrders) as CANByteOrders[];
-  socketMethodProcessings = Object.values(SocketMethodProcessings) as SocketMethodProcessings[];
-  socketEncodings = Object.values(SocketEncodings) as SocketEncodings[];
-  sNMPMethods = Object.values(SNMPMethods) as SNMPMethods[];
-  hTTPMethods = Object.values(HTTPMethods) as HTTPMethods[];
-
-  bACnetRequestTypesTranslates = BACnetRequestTypesTranslates;
-  bACnetObjectTypesTranslates = BACnetObjectTypesTranslates;
-  bLEMethodsTranslates = BLEMethodsTranslates;
-  SocketMethodProcessingsTranslates = SocketMethodProcessingsTranslates;
-  SNMPMethodsTranslations = SNMPMethodsTranslations;
-  gatewayConnectorDefaultTypesTranslates = GatewayConnectorDefaultTypesTranslatesMap;
-
-  urlPattern = /^[-a-zA-Zd_$:{}?~+=\/.0-9-]*$/;
-  numbersOnlyPattern = /^[0-9]*$/;
-  hexOnlyPattern = /^[0-9A-Fa-f ]+$/;
-
-  private propagateChange = (v: any) => {
-  }
-  private destroy$ = new Subject<void>();
-
-  constructor(private fb: FormBuilder,
-              private dialog: MatDialog,) {
-  }
-
-  ngOnInit() {
-    this.commandForm = this.connectorParamsFormGroupByType(this.connectorType);
-    this.commandForm.valueChanges.subscribe(value => {
-      const httpHeaders = {};
-      switch (this.connectorType) {
-        case ConnectorType.REST:
-          value.httpHeaders.forEach(data => {
-            httpHeaders[data.headerName] = data.value;
-          })
-          value.httpHeaders = httpHeaders;
-          break;
-        case ConnectorType.REQUEST:
-          value.httpHeaders.forEach(data => {
-            httpHeaders[data.headerName] = data.value;
-          })
-          value.httpHeaders = httpHeaders;
-          break;
-      }
-      if (this.commandForm.valid) {
-        this.propagateChange({...this.commandForm.value, ...value});
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  connectorParamsFormGroupByType(type: ConnectorType): FormGroup {
-    let formGroup: FormGroup;
-
-    switch (type) {
-      case ConnectorType.BACNET:
-        formGroup = this.fb.group({
-          method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          requestType: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          requestTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]],
-          objectType: [null, []],
-          identifier: [null, [Validators.required, Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]],
-          propertyId: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]]
-        })
-        break;
-      case ConnectorType.BLE:
-        formGroup = this.fb.group({
-          methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          characteristicUUID: ["00002A00-0000-1000-8000-00805F9B34FB", [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          methodProcessing: [null, [Validators.required]],
-          withResponse: [false, []]
-        })
-        break;
-      case ConnectorType.CAN:
-        formGroup = this.fb.group({
-          method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          nodeID: [null, [Validators.required, Validators.min(0), Validators.pattern(this.numbersOnlyPattern)]],
-          isExtendedID: [false, []],
-          isFD: [false, []],
-          bitrateSwitch: [false, []],
-          dataLength: [null, [Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]],
-          dataByteorder: [null, []],
-          dataBefore: [null, [Validators.pattern(noLeadTrailSpacesRegex), Validators.pattern(this.hexOnlyPattern)]],
-          dataAfter: [null, [Validators.pattern(noLeadTrailSpacesRegex), Validators.pattern(this.hexOnlyPattern)]],
-          dataInHEX: [null, [Validators.pattern(noLeadTrailSpacesRegex), Validators.pattern(this.hexOnlyPattern)]],
-          dataExpression: [null, [Validators.pattern(noLeadTrailSpacesRegex)]]
-        })
-        break;
-      case ConnectorType.FTP:
-        formGroup = this.fb.group({
-          methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]]
-        })
-        break;
-      case ConnectorType.OCPP:
-        formGroup = this.fb.group({
-          methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          withResponse: [false, []]
-        })
-        break;
-      case ConnectorType.SOCKET:
-        formGroup = this.fb.group({
-          methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          methodProcessing: [null, [Validators.required]],
-          encoding: [SocketEncodings.UTF_8, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          withResponse: [false, []]
-        })
-        break;
-      case ConnectorType.XMPP:
-        formGroup = this.fb.group({
-          methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          withResponse: [false, []]
-        })
-        break;
-      case ConnectorType.SNMP:
-        formGroup = this.fb.group({
-          requestFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          method: [null, [Validators.required]],
-          withResponse: [false, []],
-          oid: this.fb.array([], [Validators.required])
-        })
-        break;
-      case ConnectorType.REST:
-        formGroup = this.fb.group({
-          methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          httpMethod: [null, [Validators.required]],
-          requestUrlExpression: [null, [Validators.required, Validators.pattern(this.urlPattern)]],
-          responseTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]],
-          timeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]],
-          tries: [null, [Validators.required, Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]],
-          valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          httpHeaders: this.fb.array([]),
-          security: [{}, [Validators.required]]
-        })
-        break;
-      case ConnectorType.REQUEST:
-        formGroup = this.fb.group({
-          methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          httpMethod: [null, [Validators.required]],
-          requestUrlExpression: [null, [Validators.required, Validators.pattern(this.urlPattern)]],
-          responseTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]],
-          timeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]],
-          tries: [null, [Validators.required, Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]],
-          requestValueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          responseValueExpression: [null, [Validators.pattern(noLeadTrailSpacesRegex)]],
-          httpHeaders: this.fb.array([]),
-        })
-        break;
-      default:
-        formGroup = this.fb.group({
-          command: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-          params: [{}, [jsonRequired]],
-        })
-    }
-    return formGroup;
-  }
-
-  addSNMPoid(value: string = null) {
-    const oidsFA = this.commandForm.get('oid') as FormArray;
-    if (oidsFA) {
-      oidsFA.push(this.fb.control(value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]), {emitEvent: false});
-    }
-  }
-
-  removeSNMPoid(index: number) {
-    const oidsFA = this.commandForm.get('oid') as FormArray;
-    oidsFA.removeAt(index);
-  }
-
-  addHTTPHeader(value: { headerName: string, value: string } = {headerName: null, value: null}) {
-    const headerFA = this.commandForm.get('httpHeaders') as FormArray;
-    const formGroup = this.fb.group({
-      headerName: [value.headerName, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-      value: [value.value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]]
-    })
-    if (headerFA) {
-      headerFA.push(formGroup, {emitEvent: false});
-    }
-  }
-
-  removeHTTPHeader(index: number) {
-    const oidsFA = this.commandForm.get('httpHeaders') as FormArray;
-    oidsFA.removeAt(index);
-  }
-
-  getFormArrayControls(path: string) {
-    return (this.commandForm.get(path) as FormArray).controls as FormControl[];
-  }
-
-  openEditJSONDialog($event: Event) {
-    if ($event) {
-      $event.stopPropagation();
-    }
-    this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, {
-      disableClose: true,
-      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {
-        jsonValue: this.commandForm.get('params').value,
-        required: true
-      }
-    }).afterClosed().subscribe(
-      (res) => {
-        if (res) {
-          this.commandForm.get('params').setValue(res);
-        }
-      }
-    );
-  }
-
-  save() {
-    this.saveTemplate.emit();
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-  }
-
-  clearFromArrayByName(name: string) {
-    const formArray = this.commandForm.get(name) as FormArray;
-    while (formArray.length !== 0) {
-      formArray.removeAt(0)
-    }
-  }
-
-  writeValue(value: RPCTemplateConfig): void {
-    if (typeof value == "object") {
-      value = deepClone(value);
-      switch (this.connectorType) {
-        case ConnectorType.SNMP:
-          this.clearFromArrayByName("oid");
-          value.oid.forEach(value => {
-            this.addSNMPoid(value)
-          })
-          delete value.oid;
-          break;
-        case ConnectorType.REQUEST:
-          this.clearFromArrayByName("httpHeaders");
-          value.httpHeaders && Object.entries(value.httpHeaders).forEach(httpHeader => {
-            this.addHTTPHeader({headerName: httpHeader[0], value: httpHeader[1] as string})
-          })
-          delete value.httpHeaders;
-          break;
-        case ConnectorType.REST:
-          this.clearFromArrayByName("httpHeaders");
-          value.httpHeaders && Object.entries(value.httpHeaders).forEach(httpHeader => {
-            this.addHTTPHeader({headerName: httpHeader[0], value: httpHeader[1] as string})
-          })
-          delete value.httpHeaders;
-          break;
-      }
-      this.commandForm.patchValue(value, {onlySelf: false});
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
deleted file mode 100644
index 41a655d93e..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div fxLayout="column" fxFlex [ngClass]="{'border': isConnector}">
-  <div fxLayout="row" fxLayout.lt-sm="column" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">
-    <ng-container *ngIf="!isConnector; else connectorForm">
-      <mat-form-field>
-        <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
-        <mat-select formControlName="command">
-          <mat-option *ngFor="let command of RPCCommands" [value]="command">
-            {{ command }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field fxFlex>
-        <mat-label>{{ 'gateway.statistics.timeout-ms' | translate }}</mat-label>
-        <input matInput formControlName="time" type="number" min="1"/>
-        <mat-error *ngIf="commandForm.get('time').hasError('min')">
-          {{ 'gateway.statistics.timeout-min' | translate }}
-        </mat-error>
-      </mat-form-field>
-      <button mat-raised-button
-              color="primary"
-              (click)="sendCommand()"
-              [disabled]="commandForm.invalid">
-        {{ 'gateway.rpc-command-send' | translate }}
-      </button>
-    </ng-container>
-    <ng-template #connectorForm>
-      <tb-gateway-service-rpc-connector
-        *ngIf="!typesWithUpdatedParams.has(connectorType) else updatedParameters"
-        formControlName="params"
-        [connectorType]="connectorType"
-        (sendCommand)="sendCommand()"
-        (saveTemplate)="saveTemplate()"
-      />
-      <ng-template #updatedParameters>
-        <div fxLayout="column" class="rpc-parameters">
-          <div class="mat-subtitle-1 tb-form-panel-title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div>
-          <ng-container [ngSwitch]="connectorType">
-            <tb-modbus-rpc-parameters *ngSwitchCase="ConnectorType.MODBUS" formControlName="params"/>
-            <tb-mqtt-rpc-parameters *ngSwitchCase="ConnectorType.MQTT" formControlName="params"/>
-            <tb-opc-rpc-parameters *ngSwitchCase="ConnectorType.OPCUA" formControlName="params"/>
-          </ng-container>
-          <div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
-            <button mat-raised-button
-                    (click)="saveTemplate()"
-                    [disabled]="commandForm.get('params').invalid">
-              {{ 'gateway.rpc-command-save-template' | translate }}
-            </button>
-            <button mat-raised-button
-                    color="primary"
-                    (click)="sendCommand()"
-                    [disabled]="commandForm.get('params').invalid">
-              {{ 'gateway.rpc-command-send' | translate }}
-            </button>
-          </div>
-        </div>
-      </ng-template>
-    </ng-template>
-  </div>
-  <section class="result-block" [formGroup]="commandForm">
-    <span>{{ 'gateway.rpc-command-result' | translate }}
-      <div *ngIf="resultTime" class="result-time" fxFlex fxLayout="row" fxLayoutAlign="center center">
-        <mat-icon class="material-icons">schedule</mat-icon>
-        <span>{{ resultTime | date: 'yyyy/MM/dd HH:mm:ss' }}</span>
-      </div>
-    </span>
-    <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>
-  </section>
-</div>
-<tb-gateway-service-rpc-connector-templates fxFlex="30" *ngIf="isConnector" class="border" [rpcTemplates]="templates"
-                                            [ctx]="ctx" [connectorType]="connectorType" (useTemplate)="useTemplate($event)">
-</tb-gateway-service-rpc-connector-templates>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
deleted file mode 100644
index b8424dc068..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: row;
-  padding: 0 5px;
-
-  & > * {
-    height: 100%;
-    overflow: auto;
-  }
-
-  & > tb-gateway-service-rpc-connector-templates:last-child {
-    margin-left: 10px;
-  }
-
-
-  .command-form {
-    flex-wrap: nowrap;
-    padding: 0 5px 5px;
-
-    & > button {
-      margin-top: 10px;
-    }
-  }
-
-  .rpc-parameters {
-    width: 100%;
-  }
-
-  .result-block {
-    padding: 0 5px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    & > span {
-      font-weight: 600;
-      position: relative;
-      font-size: 14px;
-      margin-bottom: 10px;
-
-
-      .result-time {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 32px;
-        position: absolute;
-        left: 0;
-        top: 25px;
-        z-index: 5;
-        color: rgba(0, 0, 0, 0.54);
-
-        span {
-          padding-left: 10px;
-        }
-      }
-    }
-
-    tb-json-content {
-      flex: 1;
-    }
-  }
-
-  .border {
-    padding: 16px;
-    box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
-    border: solid 1px #e0e0e0;
-    border-radius: 4px;
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
deleted file mode 100644
index 43050ca5f7..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { WidgetContext } from '@home/models/widget-component.models';
-import { ContentType } from '@shared/models/constants';
-import { jsonRequired } from '@shared/components/json-object-edit.component';
-import {
-  ConnectorType,
-  GatewayConnectorDefaultTypesTranslatesMap,
-  RPCCommand,
-  RPCTemplate,
-  RPCTemplateConfig,
-  SaveRPCTemplateData
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import {
-  GatewayServiceRPCConnectorTemplateDialogComponent
-} from '@home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog';
-import { AttributeService } from '@core/http/attribute.service';
-import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { EntityType } from '@shared/models/entity-type.models';
-import { DatasourceType, widgetType } from '@shared/models/widget.models';
-import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
-import { UtilsService } from '@core/services/utils.service';
-
-@Component({
-  selector: 'tb-gateway-service-rpc',
-  templateUrl: './gateway-service-rpc.component.html',
-  styleUrls: ['./gateway-service-rpc.component.scss']
-})
-export class GatewayServiceRPCComponent implements OnInit {
-
-  @Input()
-  ctx: WidgetContext;
-
-  contentTypes = ContentType;
-
-  resultTime: number | null;
-
-  @Input()
-  dialogRef: MatDialogRef<any>;
-
-  commandForm: FormGroup;
-
-  isConnector: boolean;
-
-  RPCCommands: Array<string> = [
-    'Ping',
-    'Stats',
-    'Devices',
-    'Update',
-    'Version',
-    'Restart',
-    'Reboot'
-  ];
-
-  public connectorType: ConnectorType;
-  public templates: Array<RPCTemplate> = [];
-
-  readonly ConnectorType = ConnectorType;
-  readonly gatewayConnectorDefaultTypesTranslates = GatewayConnectorDefaultTypesTranslatesMap;
-  readonly typesWithUpdatedParams = new Set<ConnectorType>([
-    ConnectorType.MQTT,
-    ConnectorType.OPCUA,
-    ConnectorType.MODBUS,
-  ]);
-
-  private subscription: IWidgetSubscription;
-  private subscriptionOptions: WidgetSubscriptionOptions = {
-    callbacks: {
-      onDataUpdated: () => this.ctx.ngZone.run(() => {
-        this.updateTemplates()
-      }),
-      onDataUpdateError: (subscription, e) => this.ctx.ngZone.run(() => {
-        this.onDataUpdateError(e);
-      }),
-      dataLoading: () => {
-      }
-    }
-  };
-
-  constructor(private fb: FormBuilder,
-              private dialog: MatDialog,
-              private utils: UtilsService,
-              private cd: ChangeDetectorRef,
-              private attributeService: AttributeService) {
-    this.commandForm = this.fb.group({
-      command: [null, [Validators.required]],
-      time: [60, [Validators.required, Validators.min(1)]],
-      params: ['{}', [jsonRequired]],
-      result: [null]
-    });
-  }
-
-  ngOnInit() {
-    this.isConnector = this.ctx.settings.isConnector;
-    if (!this.isConnector) {
-      this.commandForm.get('command').setValue(this.RPCCommands[0]);
-    } else {
-      this.connectorType = this.ctx.stateController.getStateParams().connector_rpc.value.type;
-      const subscriptionInfo = [{
-        type: DatasourceType.entity,
-        entityType: EntityType.DEVICE,
-        entityId: this.ctx.defaultSubscription.targetDeviceId,
-        entityName: 'Connector',
-        attributes: [{name: `${this.connectorType}_template`}]
-      }];
-      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.latest, subscriptionInfo,
-        this.subscriptionOptions, false, true).subscribe(subscription => {
-        this.subscription = subscription;
-      })
-    }
-  }
-
-  sendCommand(value?: RPCCommand) {
-    this.resultTime = null;
-    const formValues = value || this.commandForm.value;
-    const commandPrefix = this.isConnector ? `${this.connectorType}_` : 'gateway_';
-    const command = !this.isConnector ? formValues.command.toLowerCase() : this.getCommandFromParamsByType(formValues.params);
-    const params = formValues.params;
-    this.ctx.controlApi.sendTwoWayCommand(commandPrefix + command, params, formValues.time).subscribe({
-      next: resp => {
-        this.resultTime = new Date().getTime();
-        this.commandForm.get('result').setValue(JSON.stringify(resp))
-      },
-      error: error => {
-        this.resultTime = new Date().getTime();
-        console.error(error);
-        this.commandForm.get('result').setValue(JSON.stringify(error.error));
-      }
-    });
-  }
-
-  getCommandFromParamsByType(params: RPCTemplateConfig) {
-    switch (this.connectorType) {
-      case ConnectorType.MQTT:
-      case ConnectorType.FTP:
-      case ConnectorType.SNMP:
-      case ConnectorType.REST:
-      case ConnectorType.REQUEST:
-        return params.methodFilter;
-      case ConnectorType.MODBUS:
-        return params.tag;
-      case ConnectorType.BACNET:
-      case ConnectorType.CAN:
-      case ConnectorType.OPCUA:
-        return params.method;
-      case ConnectorType.BLE:
-      case ConnectorType.OCPP:
-      case ConnectorType.SOCKET:
-      case ConnectorType.XMPP:
-        return params.methodRPC;
-      default:
-        return params.command;
-    }
-  }
-
-  saveTemplate() {
-    this.dialog.open<GatewayServiceRPCConnectorTemplateDialogComponent, SaveRPCTemplateData>
-    (GatewayServiceRPCConnectorTemplateDialogComponent, {
-      disableClose: true,
-      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {config: this.commandForm.value.params, templates: this.templates}
-    }).afterClosed().subscribe(
-      (res) => {
-        if (res) {
-          const templateAttribute: RPCTemplate = {
-            name: res,
-            config: this.commandForm.value.params
-          }
-          const templatesArray = this.templates;
-          const existingIndex = templatesArray.findIndex(template => {
-            return template.name == templateAttribute.name;
-          })
-          if (existingIndex > -1) {
-            templatesArray.splice(existingIndex, 1)
-          }
-          templatesArray.push(templateAttribute)
-          const key = `${this.connectorType}_template`;
-          this.attributeService.saveEntityAttributes(
-            {
-              id: this.ctx.defaultSubscription.targetDeviceId,
-              entityType: EntityType.DEVICE
-            }
-            , AttributeScope.SERVER_SCOPE, [{
-              key,
-              value: templatesArray
-            }]).subscribe(() => {
-              this.cd.detectChanges();
-          })
-        }
-      }
-    );
-  }
-
-  useTemplate($event) {
-    this.commandForm.get('params').patchValue($event.config);
-  }
-
-  private updateTemplates() {
-    this.templates = this.subscription.data[0].data[0][1].length ?
-      JSON.parse(this.subscription.data[0].data[0][1]) : [];
-    this.cd.detectChanges();
-  }
-
-  private onDataUpdateError(e: any) {
-    const exceptionData = this.utils.parseException(e);
-    let errorText = exceptionData.name;
-    if (exceptionData.message) {
-      errorText += ': ' + exceptionData.message;
-    }
-    console.error(errorText);
-  }
-
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
deleted file mode 100644
index 5dbc0aee00..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="statistics-container" fxLayout="row" fxLayout.lt-md="column">
-  <mat-card [formGroup]="statisticForm" *ngIf="!general">
-    <mat-form-field class="mat-block" subscriptSizing="dynamic">
-      <mat-label>{{ 'gateway.statistics.statistic' | translate }}</mat-label>
-      <mat-select formControlName="statisticKey">
-        <mat-option *ngFor="let key of statisticsKeys" [value]="key">
-          {{ key }}
-        </mat-option>
-        <mat-option *ngFor="let command of commands" [value]="command.attributeOnGateway">
-          {{ command.attributeOnGateway }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <mat-error
-      *ngIf="!statisticsKeys.length && !commands.length">
-      {{ 'gateway.statistics.statistic-commands-empty' | translate }}
-    </mat-error>
-    <div>
-      <button mat-flat-button color="primary" (click)="navigateToStatistics()">
-        {{ 'gateway.statistics.statistics-button' | translate }}
-      </button>
-    </div>
-    <mat-form-field class="mat-block" *ngIf="commandObj">
-      <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
-      <input matInput [value]="commandObj.command" disabled>
-    </mat-form-field>
-  </mat-card>
-  <div class="chart-box" fxLayout="column">
-    <div class="chart-container" #statisticChart [fxShow]="isNumericData"></div>
-    <table [fxShow]="!isNumericData" mat-table [dataSource]="dataSource"
-           matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
-           matSortDisableClear>
-      <ng-container matColumnDef="0">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'widgets.gateway.created-time' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let row; let rowIndex = index">
-          {{ row[0]| date:'yyyy-MM-dd HH:mm:ss' }}
-        </mat-cell>
-      </ng-container>
-      <ng-container matColumnDef="1">
-        <mat-header-cell *matHeaderCellDef mat-sort-header
-                         style="width: 70%">{{ 'widgets.gateway.message' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          {{ row[1] }}
-        </mat-cell>
-      </ng-container>
-      <mat-header-row class="mat-row-select"
-                      *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-      <mat-row class="mat-row-select"
-               *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    </table>
-    <span [fxShow]="dataSource.data.length === 0 && !isNumericData"
-          fxLayoutAlign="center center"
-          class="no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
-    <div fxFlex class="legend" fxLayout="row" fxLayoutAlign="center center" [fxShow]="isNumericData">
-      <div class="legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row"
-           fxLayoutAlign="center center">
-        <span class="legend-line" [style.background-color]="legendKey.dataKey.color"></span>
-        <div class="legend-label"
-             (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"
-             [class]="{ 'hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden }"
-             [innerHTML]="legendKey.dataKey.label">
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss
deleted file mode 100644
index 9f719807ca..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-
-
-  .statistics-container {
-    height: 100%;
-    overflow-y: auto;
-
-    mat-card {
-      width: 40%;
-      height: 100%;
-      margin-right: 35px;
-      padding: 15px;
-      gap: 22px;
-    }
-
-    @media only screen and (max-width: 750px) {
-      mat-card {
-        width: 100%;
-      }
-    }
-
-    .chart-box, .chart-container {
-      height: 100%;
-      flex-grow: 1;
-    }
-
-    .chart-box {
-      overflow: auto;
-    }
-
-    & > * {
-      height: 100%;
-    }
-  }
-
-  .legend {
-    flex-wrap: wrap;
-    width: 100%;
-    padding-top: 8px;
-    padding-bottom: 4px;
-    margin-top: 15px;
-
-    .legend-keys {
-      .legend-label {
-        padding: 2px 20px 2px 10px;
-        white-space: nowrap;
-
-        &.hidden-label {
-          text-decoration: line-through;
-          opacity: .6;
-        }
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      .legend-line {
-        display: inline-block;
-        width: 15px;
-        height: 3px;
-        text-align: left;
-        vertical-align: middle;
-        outline: none;
-      }
-    }
-  }
-}
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts
deleted file mode 100644
index 2537f415da..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { AttributeService } from '@core/http/attribute.service';
-import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { WidgetContext } from '@home/models/widget-component.models';
-import { TbFlot } from '@home/components/widget/lib/flot-widget';
-import { IWidgetSubscription, SubscriptionInfo, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
-import { UtilsService } from '@core/services/utils.service';
-import { DatasourceType, LegendConfig, LegendData, LegendPosition, widgetType } from '@shared/models/widget.models';
-import { EntityType } from '@shared/models/entity-type.models';
-import { EntityId } from '@shared/models/id/entity-id';
-import { BaseData } from '@shared/models/base-data';
-import { PageLink } from '@shared/models/page/page-link';
-import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { MatTableDataSource } from '@angular/material/table';
-import { MatSort } from '@angular/material/sort';
-import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { deepClone } from '@core/utils';
-
-@Component({
-  selector: 'tb-gateway-statistics',
-  templateUrl: './gateway-statistics.component.html',
-  styleUrls: ['./gateway-statistics.component.scss']
-})
-export class GatewayStatisticsComponent implements AfterViewInit {
-
-  @ViewChild(MatSort) sort: MatSort;
-  @ViewChild('statisticChart') statisticChart: ElementRef;
-
-  @Input()
-  ctx: WidgetContext;
-
-  @Input()
-  public general: boolean;
-
-  public isNumericData = false;
-  public dataTypeDefined: boolean = false;
-  public chartInited: boolean;
-  private flot: TbFlot;
-  private flotCtx: WidgetContext;
-  public statisticForm: FormGroup;
-  public statisticsKeys = [];
-  public commands = [];
-  public commandObj: any;
-  public dataSource: MatTableDataSource<any>;
-  public pageLink: PageLink;
-  private resize$: ResizeObserver;
-  private subscription: IWidgetSubscription;
-  private subscriptionInfo: SubscriptionInfo [];
-  public legendData: LegendData;
-  public displayedColumns: Array<string>;
-  private subscriptionOptions: WidgetSubscriptionOptions = {
-    callbacks: {
-      onDataUpdated: () => this.ctx.ngZone.run(() => {
-        this.onDataUpdated();
-      }),
-      onDataUpdateError: (subscription, e) => this.ctx.ngZone.run(() => {
-        this.onDataUpdateError(e);
-      })
-    },
-    useDashboardTimewindow: false,
-    legendConfig: {
-      position: LegendPosition.bottom
-    } as LegendConfig
-  };
-
-
-  constructor(private fb: FormBuilder,
-              private attributeService: AttributeService,
-              private utils: UtilsService) {
-    const sortOrder: SortOrder = {property: '0', direction: Direction.DESC};
-    this.pageLink = new PageLink(Number.POSITIVE_INFINITY, 0, null, sortOrder);
-    this.displayedColumns = ['0', '1'];
-    this.dataSource = new MatTableDataSource<any>([]);
-    this.statisticForm = this.fb.group({
-      statisticKey: [null, []]
-    });
-
-    this.statisticForm.get('statisticKey').valueChanges.subscribe(value => {
-      this.commandObj = null;
-      if (this.commands.length) {
-        this.commandObj = this.commands.find(command => command.attributeOnGateway === value);
-      }
-      if (this.subscriptionInfo) {
-        this.createChartsSubscription(this.ctx.defaultSubscription.datasources[0].entity, value);
-      }
-    });
-  }
-
-
-  ngAfterViewInit() {
-    this.dataSource.sort = this.sort;
-    this.sort.sortChange.subscribe(() => this.sortData());
-    this.init();
-    if (this.ctx.defaultSubscription.datasources.length) {
-      const gateway = this.ctx.defaultSubscription.datasources[0].entity;
-      if (gateway.id.id === NULL_UUID) {
-        return;
-      }
-      if (!this.general) {
-        this.attributeService.getEntityAttributes(gateway.id, AttributeScope.SHARED_SCOPE, ['general_configuration'])
-          .subscribe((resp: AttributeData[]) => {
-            if (resp && resp.length) {
-              this.commands = resp[0].value.statistics.commands;
-              if (!this.statisticForm.get('statisticKey').value && this.commands && this.commands.length) {
-                this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway);
-                this.createChartsSubscription(gateway, this.commands[0].attributeOnGateway);
-              }
-            }
-          });
-      } else {
-        this.attributeService.getEntityTimeseriesLatest(gateway.id).subscribe(
-          data => {
-            const connectorsTs = Object.keys(data)
-              .filter(el => el.includes('ConnectorEventsProduced') || el.includes('ConnectorEventsSent'));
-            this.createGeneralChartsSubscription(gateway, connectorsTs);
-          });
-      }
-    }
-  }
-
-  public navigateToStatistics() {
-    const params = deepClone(this.ctx.stateController.getStateParams());
-    this.ctx.stateController.openState('configuration', params);
-  }
-
-  public sortData() {
-    this.dataSource.sortData(this.dataSource.data, this.sort);
-  }
-
-  public onLegendKeyHiddenChange(index: number) {
-    this.legendData.keys[index].dataKey.hidden = !this.legendData.keys[index].dataKey.hidden;
-    this.subscription.updateDataVisibility(index);
-  }
-
-  private createChartsSubscription(gateway: BaseData<EntityId>, attr: string) {
-    const subscriptionInfo = [{
-      type: DatasourceType.entity,
-      entityType: EntityType.DEVICE,
-      entityId: gateway.id.id,
-      entityName: gateway.name,
-      timeseries: []
-    }];
-
-    subscriptionInfo[0].timeseries = [{name: attr, label: attr}];
-    this.subscriptionInfo = subscriptionInfo;
-    this.changeSubscription(subscriptionInfo);
-    this.ctx.defaultSubscription.unsubscribe();
-  }
-
-  private createGeneralChartsSubscription(gateway: BaseData<EntityId>, attrData: string[]) {
-    const subscriptionInfo = [{
-      type: DatasourceType.entity,
-      entityType: EntityType.DEVICE,
-      entityId: gateway.id.id,
-      entityName: gateway.name,
-      timeseries: []
-    }];
-    subscriptionInfo[0].timeseries = [];
-    if (attrData?.length) {
-      attrData.forEach(attr => {
-        subscriptionInfo[0].timeseries.push({name: attr, label: attr});
-      });
-    }
-    this.ctx.defaultSubscription.datasources[0].dataKeys.forEach(dataKey => {
-      subscriptionInfo[0].timeseries.push({name: dataKey.name, label: dataKey.label});
-    });
-
-    this.changeSubscription(subscriptionInfo);
-    this.ctx.defaultSubscription.unsubscribe();
-  }
-
-  private init = () => {
-    this.flotCtx = {
-      $scope: this.ctx.$scope,
-      $injector: this.ctx.$injector,
-      utils: this.ctx.utils,
-      isMobile: this.ctx.isMobile,
-      isEdit: this.ctx.isEdit,
-      subscriptionApi: this.ctx.subscriptionApi,
-      detectChanges: this.ctx.detectChanges,
-      settings: this.ctx.settings
-    } as WidgetContext;
-  };
-
-  private updateChart = () => {
-    if (this.flot && this.ctx.defaultSubscription.data.length) {
-      this.flot.update();
-    }
-  };
-
-  private resize = () => {
-    if (this.flot) {
-      this.flot.resize();
-    }
-  };
-
-  private reset() {
-    if (this.resize$) {
-      this.resize$.disconnect();
-    }
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-    if (this.flot) {
-      this.flot.destroy();
-    }
-  }
-
-  private onDataUpdateError(e: any) {
-    const exceptionData = this.utils.parseException(e);
-    let errorText = exceptionData.name;
-    if (exceptionData.message) {
-      errorText += ': ' + exceptionData.message;
-    }
-    console.error(errorText);
-  }
-
-  private onDataUpdated() {
-    this.isDataOnlyNumbers();
-    if (this.isNumericData) {
-      if (this.chartInited) {
-        if (this.flot) {
-          this.flot.update();
-        }
-      } else {
-        this.initChart();
-      }
-    }
-  }
-
-  private initChart() {
-    this.chartInited = true;
-    this.flotCtx.$container = $(this.statisticChart.nativeElement);
-    this.resize$.observe(this.statisticChart.nativeElement);
-    this.flot = new TbFlot(this.flotCtx as WidgetContext, 'line');
-    this.flot.update();
-  }
-
-  private isDataOnlyNumbers() {
-    if (this.general) {
-      this.isNumericData = true;
-      return;
-    }
-    this.dataSource.data = this.subscription.data.length ? this.subscription.data[0].data : [];
-    if (this.dataSource.data.length && !this.dataTypeDefined) {
-      this.dataTypeDefined = true;
-      this.isNumericData = this.dataSource.data.every(data => !isNaN(+data[1]));
-    }
-  }
-
-
-  private changeSubscription(subscriptionInfo: SubscriptionInfo[]) {
-    if (this.subscription) {
-      this.reset();
-    }
-    if (this.ctx.datasources[0].entity) {
-      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.timeseries, subscriptionInfo, this.subscriptionOptions,
-        false, true).subscribe(subscription => {
-        this.dataTypeDefined = false;
-        this.subscription = subscription;
-        this.isDataOnlyNumbers();
-        this.legendData = this.subscription.legendData;
-        this.flotCtx.defaultSubscription = subscription;
-        this.resize$ = new ResizeObserver(() => {
-          this.resize();
-        });
-        this.ctx.detectChanges();
-        if (this.isNumericData) {
-          this.initChart();
-        }
-      });
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
deleted file mode 100644
index f1fbd4d0f5..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
+++ /dev/null
@@ -1,1298 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { helpBaseUrl, ValueTypeData } from '@shared/models/constants';
-import { AttributeData } from '@shared/models/telemetry/telemetry.models';
-
-export const noLeadTrailSpacesRegex = /^\S+(?: \S+)*$/;
-export const integerRegex = /^[-+]?\d+$/;
-export const nonZeroFloat = /^-?(?!0(\.0+)?$)\d+(\.\d+)?$/;
-
-export enum StorageTypes {
-  MEMORY = 'memory',
-  FILE = 'file',
-  SQLITE = 'sqlite'
-}
-
-export enum DeviceGatewayStatus {
-  EXCEPTION = 'EXCEPTION'
-}
-
-export enum GatewayLogLevel {
-  NONE = 'NONE',
-  CRITICAL = 'CRITICAL',
-  ERROR = 'ERROR',
-  WARNING = 'WARNING',
-  INFO = 'INFO',
-  DEBUG = 'DEBUG',
-  TRACE = 'TRACE'
-}
-
-export enum PortLimits {
-  MIN = 1,
-  MAX = 65535
-}
-
-export const GatewayStatus = {
-  ...GatewayLogLevel,
-  ...DeviceGatewayStatus
-};
-
-export type GatewayStatus = DeviceGatewayStatus | GatewayLogLevel;
-
-export enum LogSavingPeriod {
-  days = 'D',
-  hours = 'H',
-  minutes = 'M',
-  seconds = 'S'
-}
-
-export enum LocalLogsConfigs {
-  service = 'service',
-  connector = 'connector',
-  converter = 'converter',
-  tb_connection = 'tb_connection',
-  storage = 'storage',
-  extension = 'extension'
-}
-
-export const LocalLogsConfigTranslateMap = new Map<LocalLogsConfigs, string>([
-  [LocalLogsConfigs.service, 'Service'],
-  [LocalLogsConfigs.connector, 'Connector'],
-  [LocalLogsConfigs.converter, 'Converter'],
-  [LocalLogsConfigs.tb_connection, 'TB Connection'],
-  [LocalLogsConfigs.storage, 'Storage'],
-  [LocalLogsConfigs.extension, 'Extension']
-]);
-
-export const LogSavingPeriodTranslations = new Map<LogSavingPeriod, string>(
-  [
-    [LogSavingPeriod.days, 'gateway.logs.days'],
-    [LogSavingPeriod.hours, 'gateway.logs.hours'],
-    [LogSavingPeriod.minutes, 'gateway.logs.minutes'],
-    [LogSavingPeriod.seconds, 'gateway.logs.seconds']
-  ]
-);
-
-export const StorageTypesTranslationMap = new Map<StorageTypes, string>(
-  [
-    [StorageTypes.MEMORY, 'gateway.storage-types.memory-storage'],
-    [StorageTypes.FILE, 'gateway.storage-types.file-storage'],
-    [StorageTypes.SQLITE, 'gateway.storage-types.sqlite']
-  ]
-);
-
-export enum SecurityTypes {
-  ACCESS_TOKEN = 'accessToken',
-  USERNAME_PASSWORD = 'usernamePassword',
-  TLS_ACCESS_TOKEN = 'tlsAccessToken',
-  TLS_PRIVATE_KEY = 'tlsPrivateKey'
-}
-
-export const GecurityTypesTranslationsMap = new Map<SecurityTypes, string>(
-  [
-    [SecurityTypes.ACCESS_TOKEN, 'gateway.security-types.access-token'],
-    [SecurityTypes.USERNAME_PASSWORD, 'gateway.security-types.username-password'],
-    [SecurityTypes.TLS_ACCESS_TOKEN, 'gateway.security-types.tls-access-token']
-  ]
-);
-
-export interface GatewayAttributeData extends AttributeData {
-  skipSync?: boolean;
-}
-
-export interface GatewayConnectorBase {
-  name: string;
-  type: ConnectorType;
-  configuration?: string;
-  logLevel: string;
-  key?: string;
-  class?: string;
-  mode?: ConfigurationModes;
-  configVersion?: string;
-}
-
-export interface GatewayConnector<BaseConfig = ConnectorBaseConfig> extends GatewayConnectorBase {
-  configurationJson: BaseConfig;
-  basicConfig?: BaseConfig;
-}
-
-export interface GatewayVersionedDefaultConfig {
-  legacy: GatewayConnector<ConnectorLegacyConfig>;
-  '3.5.2': GatewayConnector<ConnectorBaseConfig_v3_5_2>;
-}
-
-export interface DataMapping {
-  topicFilter: string;
-  QoS: string | number;
-  converter: Converter;
-}
-
-export interface RequestsMapping {
-  requestType: RequestType;
-  type: string;
-  details: string;
-}
-
-export interface OpcUaMapping {
-  deviceNodePattern?: string;
-  deviceNamePattern?: string;
-  deviceProfileExpression?: string;
-}
-
-export type MappingValue = DataMapping | RequestsMapping | OpcUaMapping;
-
-export interface ServerConfig {
-  name: string;
-  url: string;
-  timeoutInMillis: number;
-  scanPeriodInMillis: number;
-  pollPeriodInMillis: number;
-  enableSubscriptions: boolean;
-  subCheckPeriodInMillis: number;
-  showMap: boolean;
-  security: string;
-  identity: ConnectorSecurity;
-}
-
-export interface BrokerConfig {
-  name: string;
-  host: string;
-  port: number;
-  version: number;
-  clientId: string;
-  maxNumberOfWorkers: number;
-  maxMessageNumberPerWorker: number;
-  security: ConnectorSecurity;
-}
-
-export interface ConnectorSecurity {
-  type: SecurityType;
-  username?: string;
-  password?: string;
-  pathToCACert?: string;
-  pathToPrivateKey?: string;
-  pathToClientCert?: string;
-  mode?: ModeType;
-}
-
-export enum GatewayVersion {
-  Current = '3.5.2',
-  Legacy = 'legacy'
-}
-
-export type ConnectorMapping = DeviceConnectorMapping | RequestMappingValue | ConverterConnectorMapping;
-
-export type ConnectorMappingFormValue = DeviceConnectorMapping | RequestMappingFormValue | ConverterMappingFormValue;
-
-export type ConnectorBaseConfig = ConnectorBaseConfig_v3_5_2 | ConnectorLegacyConfig;
-
-export type ConnectorLegacyConfig = ConnectorBaseInfo | MQTTLegacyBasicConfig | OPCLegacyBasicConfig | ModbusBasicConfig;
-
-export type ConnectorBaseConfig_v3_5_2 = ConnectorBaseInfo | MQTTBasicConfig_v3_5_2 | OPCBasicConfig_v3_5_2;
-
-export interface ConnectorBaseInfo {
-  name: string;
-  id: string;
-  enableRemoteLogging: boolean;
-  logLevel: GatewayLogLevel;
-  configVersion: string | number;
-  reportStrategy?: ReportStrategyConfig;
-}
-
-export type MQTTBasicConfig = MQTTBasicConfig_v3_5_2 | MQTTLegacyBasicConfig;
-
-export interface MQTTBasicConfig_v3_5_2 {
-  mapping: ConverterConnectorMapping[];
-  requestsMapping: Record<RequestType, RequestMappingData[] | RequestMappingValue[]> | RequestMappingData[] | RequestMappingValue[];
-  broker: BrokerConfig;
-  workers?: WorkersConfig;
-}
-
-export interface MQTTLegacyBasicConfig {
-  mapping: LegacyConverterConnectorMapping[];
-  broker: BrokerConfig;
-  workers?: WorkersConfig;
-  connectRequests: LegacyRequestMappingData[];
-  disconnectRequests: LegacyRequestMappingData[];
-  attributeRequests: LegacyRequestMappingData[];
-  attributeUpdates: LegacyRequestMappingData[];
-  serverSideRpc: LegacyRequestMappingData[];
-}
-
-export type OPCBasicConfig = OPCBasicConfig_v3_5_2 | OPCLegacyBasicConfig;
-
-export interface OPCBasicConfig_v3_5_2 {
-  mapping: DeviceConnectorMapping[];
-  server: ServerConfig;
-}
-
-export interface OPCLegacyBasicConfig {
-  server: LegacyServerConfig;
-}
-
-export interface LegacyServerConfig extends Omit<ServerConfig, 'enableSubscriptions'> {
-  mapping: LegacyDeviceConnectorMapping[];
-  disableSubscriptions: boolean;
-}
-
-export type ModbusBasicConfig = ModbusBasicConfig_v3_5_2 | ModbusLegacyBasicConfig;
-
-export interface ModbusBasicConfig_v3_5_2 {
-  master: ModbusMasterConfig;
-  slave: ModbusSlave;
-}
-
-export interface ModbusLegacyBasicConfig {
-  master: ModbusMasterConfig<LegacySlaveConfig>;
-  slave: ModbusLegacySlave;
-}
-
-export interface WorkersConfig {
-  maxNumberOfWorkers: number;
-  maxMessageNumberPerWorker: number;
-}
-
-export interface ConnectorDeviceInfo {
-  deviceNameExpression: string;
-  deviceNameExpressionSource: SourceType | OPCUaSourceType;
-  deviceProfileExpression: string;
-  deviceProfileExpressionSource: SourceType | OPCUaSourceType;
-}
-
-export interface Attribute {
-  key: string;
-  type: string;
-  value: string;
-}
-
-export interface LegacyAttribute {
-  key: string;
-  path: string;
-}
-
-export interface Timeseries {
-  key: string;
-  type: string;
-  value: string;
-}
-
-export interface LegacyTimeseries {
-  key: string;
-  path: string;
-}
-
-export interface RpcArgument {
-  type: string;
-  value: number | string | boolean;
-}
-
-export interface RpcMethod {
-  method: string;
-  arguments: RpcArgument[];
-}
-
-export interface LegacyRpcMethod {
-  method: string;
-  arguments: unknown[];
-}
-
-export interface AttributesUpdate {
-  key: string;
-  type: string;
-  value: string;
-}
-
-export interface LegacyDeviceAttributeUpdate {
-  attributeOnThingsBoard: string;
-  attributeOnDevice: string;
-}
-
-export interface Converter {
-  type: ConvertorType;
-  deviceInfo?: ConnectorDeviceInfo;
-  sendDataOnlyOnChange: boolean;
-  timeout: number;
-  attributes?: Attribute[];
-  timeseries?: Timeseries[];
-  extension?: string;
-  cached?: boolean;
-  extensionConfig?: Record<string, number>;
-}
-
-export interface LegacyConverter extends Converter {
-  deviceNameJsonExpression?: string;
-  deviceTypeJsonExpression?: string;
-  deviceNameTopicExpression?: string;
-  deviceTypeTopicExpression?: string;
-  deviceNameExpression?: string;
-  deviceNameExpressionSource?: string;
-  deviceTypeExpression?: string;
-  deviceProfileExpression?: string;
-  deviceProfileExpressionSource?: string;
-  ['extension-config']?: Record<string, unknown>;
-}
-
-export interface ConverterConnectorMapping {
-  topicFilter: string;
-  subscriptionQos?: string | number;
-  converter: Converter;
-}
-
-export interface LegacyConverterConnectorMapping {
-  topicFilter: string;
-  subscriptionQos?: string | number;
-  converter: LegacyConverter;
-}
-
-export type ConverterMappingFormValue = Omit<ConverterConnectorMapping, 'converter'> & {
-  converter: {
-    type: ConvertorType;
-  } & Record<ConvertorType, Converter>;
-};
-
-export interface DeviceConnectorMapping {
-  deviceNodePattern: string;
-  deviceNodeSource: OPCUaSourceType;
-  deviceInfo: ConnectorDeviceInfo;
-  attributes?: Attribute[];
-  timeseries?: Timeseries[];
-  rpc_methods?: RpcMethod[];
-  attributes_updates?: AttributesUpdate[];
-}
-
-export interface LegacyDeviceConnectorMapping {
-  deviceNamePattern: string;
-  deviceNodePattern: string;
-  deviceTypePattern: string;
-  attributes?: LegacyAttribute[];
-  timeseries?: LegacyTimeseries[];
-  rpc_methods?: LegacyRpcMethod[];
-  attributes_updates?: LegacyDeviceAttributeUpdate[];
-}
-
-export enum ConnectorType {
-  MQTT = 'mqtt',
-  MODBUS = 'modbus',
-  GRPC = 'grpc',
-  OPCUA = 'opcua',
-  BLE = 'ble',
-  REQUEST = 'request',
-  CAN = 'can',
-  BACNET = 'bacnet',
-  ODBC = 'odbc',
-  REST = 'rest',
-  SNMP = 'snmp',
-  FTP = 'ftp',
-  SOCKET = 'socket',
-  XMPP = 'xmpp',
-  OCPP = 'ocpp',
-  CUSTOM = 'custom'
-}
-
-export const GatewayConnectorDefaultTypesTranslatesMap = new Map<ConnectorType, string>([
-  [ConnectorType.MQTT, 'MQTT'],
-  [ConnectorType.MODBUS, 'MODBUS'],
-  [ConnectorType.GRPC, 'GRPC'],
-  [ConnectorType.OPCUA, 'OPCUA'],
-  [ConnectorType.BLE, 'BLE'],
-  [ConnectorType.REQUEST, 'REQUEST'],
-  [ConnectorType.CAN, 'CAN'],
-  [ConnectorType.BACNET, 'BACNET'],
-  [ConnectorType.ODBC, 'ODBC'],
-  [ConnectorType.REST, 'REST'],
-  [ConnectorType.SNMP, 'SNMP'],
-  [ConnectorType.FTP, 'FTP'],
-  [ConnectorType.SOCKET, 'SOCKET'],
-  [ConnectorType.XMPP, 'XMPP'],
-  [ConnectorType.OCPP, 'OCPP'],
-  [ConnectorType.CUSTOM, 'CUSTOM']
-]);
-
-export interface RPCCommand {
-  command: string;
-  params: any;
-  time: number;
-}
-
-export const ModbusFunctionCodeTranslationsMap = new Map<number, string>([
-  [1, 'gateway.function-codes.read-coils'],
-  [2, 'gateway.function-codes.read-discrete-inputs'],
-  [3, 'gateway.function-codes.read-multiple-holding-registers'],
-  [4, 'gateway.function-codes.read-input-registers'],
-  [5, 'gateway.function-codes.write-single-coil'],
-  [6, 'gateway.function-codes.write-single-holding-register'],
-  [15, 'gateway.function-codes.write-multiple-coils'],
-  [16, 'gateway.function-codes.write-multiple-holding-registers']
-]);
-
-export enum BACnetRequestTypes {
-  WriteProperty = 'writeProperty',
-  ReadProperty = 'readProperty'
-}
-
-export const BACnetRequestTypesTranslates = new Map<BACnetRequestTypes, string>([
-  [BACnetRequestTypes.WriteProperty, 'gateway.rpc.write-property'],
-  [BACnetRequestTypes.ReadProperty, 'gateway.rpc.read-property']
-]);
-
-export enum BACnetObjectTypes {
-  BinaryInput = 'binaryInput',
-  BinaryOutput = 'binaryOutput',
-  AnalogInput = 'analogInput',
-  AnalogOutput = 'analogOutput',
-  BinaryValue = 'binaryValue',
-  AnalogValue = 'analogValue'
-}
-
-export const BACnetObjectTypesTranslates = new Map<BACnetObjectTypes, string>([
-  [BACnetObjectTypes.AnalogOutput, 'gateway.rpc.analog-output'],
-  [BACnetObjectTypes.AnalogInput, 'gateway.rpc.analog-input'],
-  [BACnetObjectTypes.BinaryOutput, 'gateway.rpc.binary-output'],
-  [BACnetObjectTypes.BinaryInput, 'gateway.rpc.binary-input'],
-  [BACnetObjectTypes.BinaryValue, 'gateway.rpc.binary-value'],
-  [BACnetObjectTypes.AnalogValue, 'gateway.rpc.analog-value']
-]);
-
-export enum BLEMethods {
-  WRITE = 'write',
-  READ = 'read',
-  SCAN = 'scan'
-}
-
-export const BLEMethodsTranslates = new Map<BLEMethods, string>([
-  [BLEMethods.WRITE, 'gateway.rpc.write'],
-  [BLEMethods.READ, 'gateway.rpc.read'],
-  [BLEMethods.SCAN, 'gateway.rpc.scan'],
-]);
-
-export enum CANByteOrders {
-  LITTLE = 'LITTLE',
-  BIG = 'BIG'
-}
-
-export enum SocketMethodProcessings {
-  WRITE = 'write'
-}
-
-export const SocketMethodProcessingsTranslates = new Map<SocketMethodProcessings, string>([
-  [SocketMethodProcessings.WRITE, 'gateway.rpc.write']
-]);
-
-export enum SNMPMethods {
-  SET = 'set',
-  MULTISET = 'multiset',
-  GET = 'get',
-  BULKWALK = 'bulkwalk',
-  TABLE = 'table',
-  MULTIGET = 'multiget',
-  GETNEXT = 'getnext',
-  BULKGET = 'bulkget',
-  WALKS = 'walk'
-}
-
-export const SNMPMethodsTranslations = new Map<SNMPMethods, string>([
-  [SNMPMethods.SET, 'gateway.rpc.set'],
-  [SNMPMethods.MULTISET, 'gateway.rpc.multiset'],
-  [SNMPMethods.GET, 'gateway.rpc.get'],
-  [SNMPMethods.BULKWALK, 'gateway.rpc.bulk-walk'],
-  [SNMPMethods.TABLE, 'gateway.rpc.table'],
-  [SNMPMethods.MULTIGET, 'gateway.rpc.multi-get'],
-  [SNMPMethods.GETNEXT, 'gateway.rpc.get-next'],
-  [SNMPMethods.BULKGET, 'gateway.rpc.bulk-get'],
-  [SNMPMethods.WALKS, 'gateway.rpc.walk']
-]);
-
-export enum HTTPMethods {
-  CONNECT = 'CONNECT',
-  DELETE = 'DELETE',
-  GET = 'GET',
-  HEAD = 'HEAD',
-  OPTIONS = 'OPTIONS',
-  PATCH = 'PATCH',
-  POST = 'POST',
-  PUT = 'PUT',
-  TRACE = 'TRACE'
-
-}
-
-export enum SocketEncodings {
-  UTF_8 = 'utf-8'
-}
-
-export interface RPCTemplate {
-  name?: string;
-  config: RPCTemplateConfig;
-}
-
-export interface RPCTemplateConfig {
-  [key: string]: any;
-}
-
-export interface RPCTemplateConfigMQTT {
-  methodFilter: string;
-  requestTopicExpression: string;
-  responseTopicExpression?: string;
-  responseTimeout?: number;
-  valueExpression: string;
-  withResponse: boolean;
-}
-
-export interface RPCTemplateConfigModbus {
-  tag: string;
-  type: ModbusDataType;
-  functionCode?: number;
-  objectsCount: number;
-  address: number;
-  value?: string;
-}
-
-export interface RPCTemplateConfigOPC {
-  method: string;
-  arguments: RpcArgument[];
-}
-
-export interface OPCTypeValue {
-  type: MappingValueType;
-  boolean?: boolean;
-  double?: number;
-  integer?: number;
-  string?: string;
-}
-
-export interface SaveRPCTemplateData {
-  config: RPCTemplateConfig;
-  templates: Array<RPCTemplate>;
-}
-
-export interface LogLink {
-  name: string;
-  key: string;
-  filterFn?: (arg: any) => boolean;
-}
-
-export interface GatewayLogData {
-  ts: number;
-  key: string;
-  message: string;
-  status: GatewayStatus;
-}
-
-export interface AddConnectorConfigData {
-  dataSourceData: Array<any>;
-  gatewayVersion: string;
-}
-
-export interface CreatedConnectorConfigData {
-  type: ConnectorType;
-  name: string;
-  logLevel: GatewayLogLevel;
-  useDefaults: boolean;
-  sendDataOnlyOnChange: boolean;
-  configurationJson?: {[key: string]: any};
-}
-
-export interface MappingDataKey {
-  key: string;
-  value: any;
-  type: MappingValueType;
-}
-
-export interface RpcMethodsMapping {
-  method: string;
-  arguments: Array<MappingDataKey>;
-}
-
-export interface MappingInfo {
-  mappingType: MappingType;
-  value: {[key: string]: any};
-  buttonTitle: string;
-}
-
-export interface ModbusSlaveInfo<Slave = SlaveConfig> {
-  value: Slave;
-  buttonTitle: string;
-  hideNewFields: boolean;
-}
-
-export enum ConfigurationModes {
-  BASIC = 'basic',
-  ADVANCED = 'advanced'
-}
-
-export enum SecurityType {
-  ANONYMOUS = 'anonymous',
-  BASIC = 'basic',
-  CERTIFICATES = 'certificates'
-}
-
-export enum ReportStrategyType {
-  OnChange = 'ON_CHANGE',
-  OnReportPeriod = 'ON_REPORT_PERIOD',
-  OnChangeOrReportPeriod = 'ON_CHANGE_OR_REPORT_PERIOD'
-}
-
-export const ReportStrategyTypeTranslationsMap = new Map<ReportStrategyType, string>(
-  [
-    [ReportStrategyType.OnChange, 'gateway.report-strategy.on-change'],
-    [ReportStrategyType.OnReportPeriod, 'gateway.report-strategy.on-report-period'],
-    [ReportStrategyType.OnChangeOrReportPeriod, 'gateway.report-strategy.on-change-or-report-period']
-  ]
-);
-
-export enum ModeType {
-  NONE = 'None',
-  SIGN = 'Sign',
-  SIGNANDENCRYPT = 'SignAndEncrypt'
-}
-
-export const SecurityTypeTranslationsMap = new Map<SecurityType, string>(
-  [
-    [SecurityType.ANONYMOUS, 'gateway.broker.security-types.anonymous'],
-    [SecurityType.BASIC, 'gateway.broker.security-types.basic'],
-    [SecurityType.CERTIFICATES, 'gateway.broker.security-types.certificates']
-  ]
-);
-
-export enum RestSecurityType {
-  ANONYMOUS = 'anonymous',
-  BASIC = 'basic',
-}
-
-export const RestSecurityTypeTranslationsMap = new Map<RestSecurityType, string>(
-  [
-    [RestSecurityType.ANONYMOUS, 'gateway.broker.security-types.anonymous'],
-    [RestSecurityType.BASIC, 'gateway.broker.security-types.basic'],
-  ]
-);
-
-export const MqttVersions = [
-  { name: 3.1, value: 3 },
-  { name: 3.11, value: 4 },
-  { name: 5, value: 5 }
-];
-
-export enum MappingType {
-  DATA = 'data',
-  REQUESTS = 'requests',
-  OPCUA = 'OPCua'
-}
-
-export const MappingTypeTranslationsMap = new Map<MappingType, string>(
-  [
-    [MappingType.DATA, 'gateway.data-mapping'],
-    [MappingType.REQUESTS, 'gateway.requests-mapping'],
-    [MappingType.OPCUA, 'gateway.data-mapping']
-  ]
-);
-
-export const MappingHintTranslationsMap = new Map<MappingType, string>(
-  [
-    [MappingType.DATA, 'gateway.data-mapping-hint'],
-    [MappingType.OPCUA, 'gateway.opcua-data-mapping-hint'],
-    [MappingType.REQUESTS, 'gateway.requests-mapping-hint']
-  ]
-);
-
-export const HelpLinkByMappingTypeMap = new Map<MappingType, string>(
-  [
-    [MappingType.DATA, helpBaseUrl + '/docs/iot-gateway/config/mqtt/#section-mapping'],
-    [MappingType.OPCUA, helpBaseUrl + '/docs/iot-gateway/config/opc-ua/#section-mapping'],
-    [MappingType.REQUESTS, helpBaseUrl + '/docs/iot-gateway/config/mqtt/#requests-mapping']
-  ]
-);
-
-export const QualityTypes = [0, 1 ,2];
-
-export const QualityTypeTranslationsMap = new Map<number, string>(
-  [
-    [0, 'gateway.qos.at-most-once'],
-    [1, 'gateway.qos.at-least-once'],
-    [2, 'gateway.qos.exactly-once']
-  ]
-);
-
-export enum ConvertorType {
-  JSON = 'json',
-  BYTES = 'bytes',
-  CUSTOM = 'custom'
-}
-
-export const ConvertorTypeTranslationsMap = new Map<ConvertorType, string>(
-  [
-    [ConvertorType.JSON, 'gateway.JSON'],
-    [ConvertorType.BYTES, 'gateway.bytes'],
-    [ConvertorType.CUSTOM, 'gateway.custom']
-  ]
-);
-
-export enum SourceType {
-  MSG = 'message',
-  TOPIC = 'topic',
-  CONST = 'constant'
-}
-
-export enum OPCUaSourceType {
-  PATH = 'path',
-  IDENTIFIER = 'identifier',
-  CONST = 'constant'
-}
-
-export enum DeviceInfoType {
-  FULL = 'full',
-  PARTIAL = 'partial'
-}
-
-export const SourceTypeTranslationsMap = new Map<SourceType | OPCUaSourceType, string>(
-  [
-    [SourceType.MSG, 'gateway.source-type.msg'],
-    [SourceType.TOPIC, 'gateway.source-type.topic'],
-    [SourceType.CONST, 'gateway.source-type.const'],
-    [OPCUaSourceType.PATH, 'gateway.source-type.path'],
-    [OPCUaSourceType.IDENTIFIER, 'gateway.source-type.identifier'],
-    [OPCUaSourceType.CONST, 'gateway.source-type.const']
-  ]
-);
-
-export interface RequestMappingValue {
-  requestType: RequestType;
-  requestValue: RequestMappingData;
-}
-
-export interface RequestMappingFormValue {
-  requestType: RequestType;
-  requestValue: Record<RequestType, RequestMappingData>;
-}
-
-export type RequestMappingData = ConnectRequest | DisconnectRequest | AttributeRequest | AttributeUpdate | ServerSideRpc;
-
-export type LegacyRequestMappingData =
-  LegacyConnectRequest
-  | LegacyDisconnectRequest
-  | LegacyAttributeRequest
-  | LegacyAttributeUpdate
-  | LegacyServerSideRpc;
-
-export interface ConnectRequest {
-  topicFilter: string;
-  deviceInfo: ConnectorDeviceInfo;
-}
-
-export interface DisconnectRequest {
-  topicFilter: string;
-  deviceInfo: ConnectorDeviceInfo;
-}
-
-export interface AttributeRequest {
-  retain: boolean;
-  topicFilter: string;
-  deviceInfo: ConnectorDeviceInfo;
-  attributeNameExpressionSource: SourceType;
-  attributeNameExpression: string;
-  topicExpression: string;
-  valueExpression: string;
-}
-
-export interface AttributeUpdate {
-  retain: boolean;
-  deviceNameFilter: string;
-  attributeFilter: string;
-  topicExpression: string;
-  valueExpression: string;
-}
-
-export interface ServerSideRpc {
-  type: ServerSideRpcType;
-  deviceNameFilter: string;
-  methodFilter: string;
-  requestTopicExpression: string;
-  responseTopicExpression?: string;
-  responseTopicQoS?: number;
-  responseTimeout?: number;
-  valueExpression: string;
-}
-
-export enum ServerSideRpcType {
-  WithResponse = 'twoWay',
-  WithoutResponse = 'oneWay'
-}
-
-export interface LegacyConnectRequest {
-  topicFilter: string;
-  deviceNameJsonExpression?: string;
-  deviceNameTopicExpression?: string;
-}
-
-interface LegacyDisconnectRequest {
-  topicFilter: string;
-  deviceNameJsonExpression?: string;
-  deviceNameTopicExpression?: string;
-}
-
-interface LegacyAttributeRequest {
-  retain: boolean;
-  topicFilter: string;
-  deviceNameJsonExpression: string;
-  attributeNameJsonExpression: string;
-  topicExpression: string;
-  valueExpression: string;
-}
-
-interface LegacyAttributeUpdate {
-  retain: boolean;
-  deviceNameFilter: string;
-  attributeFilter: string;
-  topicExpression: string;
-  valueExpression: string;
-}
-
-interface LegacyServerSideRpc {
-  deviceNameFilter: string;
-  methodFilter: string;
-  requestTopicExpression: string;
-  responseTopicExpression?: string;
-  responseTimeout?: number;
-  valueExpression: string;
-}
-
-export enum RequestType {
-  CONNECT_REQUEST = 'connectRequests',
-  DISCONNECT_REQUEST = 'disconnectRequests',
-  ATTRIBUTE_REQUEST = 'attributeRequests',
-  ATTRIBUTE_UPDATE = 'attributeUpdates',
-  SERVER_SIDE_RPC = 'serverSideRpc'
-}
-
-export const RequestTypesTranslationsMap = new Map<RequestType, string>(
-  [
-    [RequestType.CONNECT_REQUEST, 'gateway.request.connect-request'],
-    [RequestType.DISCONNECT_REQUEST, 'gateway.request.disconnect-request'],
-    [RequestType.ATTRIBUTE_REQUEST, 'gateway.request.attribute-request'],
-    [RequestType.ATTRIBUTE_UPDATE, 'gateway.request.attribute-update'],
-    [RequestType.SERVER_SIDE_RPC, 'gateway.request.rpc-connection'],
-  ]
-);
-
-export enum MappingKeysType {
-  ATTRIBUTES = 'attributes',
-  TIMESERIES = 'timeseries',
-  CUSTOM = 'extensionConfig',
-  RPC_METHODS = 'rpc_methods',
-  ATTRIBUTES_UPDATES = 'attributes_updates'
-}
-
-export const MappingKeysPanelTitleTranslationsMap = new Map<MappingKeysType, string>(
-  [
-    [MappingKeysType.ATTRIBUTES, 'gateway.attributes'],
-    [MappingKeysType.TIMESERIES, 'gateway.timeseries'],
-    [MappingKeysType.CUSTOM, 'gateway.keys'],
-    [MappingKeysType.ATTRIBUTES_UPDATES, 'gateway.attribute-updates'],
-    [MappingKeysType.RPC_METHODS, 'gateway.rpc-methods']
-  ]
-);
-
-export const MappingKeysAddKeyTranslationsMap = new Map<MappingKeysType, string>(
-  [
-    [MappingKeysType.ATTRIBUTES, 'gateway.add-attribute'],
-    [MappingKeysType.TIMESERIES, 'gateway.add-timeseries'],
-    [MappingKeysType.CUSTOM, 'gateway.add-key'],
-    [MappingKeysType.ATTRIBUTES_UPDATES, 'gateway.add-attribute-update'],
-    [MappingKeysType.RPC_METHODS, 'gateway.add-rpc-method']
-  ]
-);
-
-export const MappingKeysDeleteKeyTranslationsMap = new Map<MappingKeysType, string>(
-  [
-    [MappingKeysType.ATTRIBUTES, 'gateway.delete-attribute'],
-    [MappingKeysType.TIMESERIES, 'gateway.delete-timeseries'],
-    [MappingKeysType.CUSTOM, 'gateway.delete-key'],
-    [MappingKeysType.ATTRIBUTES_UPDATES, 'gateway.delete-attribute-update'],
-    [MappingKeysType.RPC_METHODS, 'gateway.delete-rpc-method']
-  ]
-);
-
-export const MappingKeysNoKeysTextTranslationsMap = new Map<MappingKeysType, string>(
-  [
-    [MappingKeysType.ATTRIBUTES, 'gateway.no-attributes'],
-    [MappingKeysType.TIMESERIES, 'gateway.no-timeseries'],
-    [MappingKeysType.CUSTOM, 'gateway.no-keys'],
-    [MappingKeysType.ATTRIBUTES_UPDATES, 'gateway.no-attribute-updates'],
-    [MappingKeysType.RPC_METHODS, 'gateway.no-rpc-methods']
-  ]
-);
-
-export enum ServerSideRPCType {
-  ONE_WAY = 'oneWay',
-  TWO_WAY = 'twoWay'
-}
-
-export enum MappingValueType {
-  STRING = 'string',
-  INTEGER = 'integer',
-  DOUBLE = 'double',
-  BOOLEAN = 'boolean'
-}
-
-export enum ModifierType {
-  DIVIDER = 'divider',
-  MULTIPLIER = 'multiplier',
-}
-
-export const ModifierTypesMap = new Map<ModifierType, ValueTypeData>(
-  [
-    [
-      ModifierType.DIVIDER,
-      {
-        name: 'gateway.divider',
-        icon: 'mdi:division'
-      }
-    ],
-    [
-      ModifierType.MULTIPLIER,
-      {
-        name: 'gateway.multiplier',
-        icon: 'mdi:multiplication'
-      }
-    ],
-  ]
-);
-
-export const mappingValueTypesMap = new Map<MappingValueType, ValueTypeData>(
-  [
-    [
-      MappingValueType.STRING,
-      {
-        name: 'value.string',
-        icon: 'mdi:format-text'
-      }
-    ],
-    [
-      MappingValueType.INTEGER,
-      {
-        name: 'value.integer',
-        icon: 'mdi:numeric'
-      }
-    ],
-    [
-      MappingValueType.DOUBLE,
-      {
-        name: 'value.double',
-        icon: 'mdi:numeric'
-      }
-    ],
-    [
-      MappingValueType.BOOLEAN,
-      {
-        name: 'value.boolean',
-        icon: 'mdi:checkbox-marked-outline'
-      }
-    ]
-  ]
-);
-
-export const DataConversionTranslationsMap = new Map<ConvertorType, string>(
-  [
-    [ConvertorType.JSON, 'gateway.JSON-hint'],
-    [ConvertorType.BYTES, 'gateway.bytes-hint'],
-    [ConvertorType.CUSTOM, 'gateway.custom-hint']
-  ]
-);
-
-export enum SecurityPolicy {
-  BASIC128 = 'Basic128Rsa15',
-  BASIC256 = 'Basic256',
-  BASIC256SHA = 'Basic256Sha256'
-}
-
-export const SecurityPolicyTypes = [
-  { value: SecurityPolicy.BASIC128, name: 'Basic128RSA15' },
-  { value: SecurityPolicy.BASIC256, name: 'Basic256' },
-  { value: SecurityPolicy.BASIC256SHA, name: 'Basic256SHA256' }
-];
-
-export enum ModbusProtocolType {
-  TCP = 'tcp',
-  UDP = 'udp',
-  Serial = 'serial',
-}
-
-export const ModbusProtocolLabelsMap = new Map<ModbusProtocolType, string>(
-  [
-    [ModbusProtocolType.TCP, 'TCP'],
-    [ModbusProtocolType.UDP, 'UDP'],
-    [ModbusProtocolType.Serial, 'Serial'],
-  ]
-);
-
-export enum ModbusMethodType {
-  SOCKET = 'socket',
-  RTU = 'rtu',
-}
-
-export enum ModbusSerialMethodType {
-  RTU = 'rtu',
-  ASCII = 'ascii',
-}
-
-export const ModbusMethodLabelsMap = new Map<ModbusMethodType | ModbusSerialMethodType, string>(
-  [
-    [ModbusMethodType.SOCKET, 'Socket'],
-    [ModbusMethodType.RTU, 'RTU'],
-    [ModbusSerialMethodType.ASCII, 'ASCII'],
-  ]
-);
-
-export const ModbusByteSizes = [5, 6, 7 ,8];
-
-export enum ModbusParity {
-  Even = 'E',
-  Odd = 'O',
-  None = 'N'
-}
-
-export const ModbusParityLabelsMap = new Map<ModbusParity, string>(
-  [
-    [ModbusParity.Even, 'Even'],
-    [ModbusParity.Odd, 'Odd'],
-    [ModbusParity.None, 'None'],
-  ]
-);
-
-export enum ModbusOrderType {
-  BIG = 'BIG',
-  LITTLE = 'LITTLE',
-}
-
-export enum ModbusRegisterType {
-  HoldingRegisters = 'holding_registers',
-  CoilsInitializer = 'coils_initializer',
-  InputRegisters = 'input_registers',
-  DiscreteInputs = 'discrete_inputs'
-}
-
-export const ModbusRegisterTranslationsMap = new Map<ModbusRegisterType, string>(
-  [
-    [ModbusRegisterType.HoldingRegisters, 'gateway.holding_registers'],
-    [ModbusRegisterType.CoilsInitializer, 'gateway.coils_initializer'],
-    [ModbusRegisterType.InputRegisters, 'gateway.input_registers'],
-    [ModbusRegisterType.DiscreteInputs, 'gateway.discrete_inputs']
-  ]
-);
-
-export enum ModbusDataType {
-  STRING = 'string',
-  BYTES = 'bytes',
-  BITS = 'bits',
-  INT8 = '8int',
-  UINT8 = '8uint',
-  FLOAT8 = '8float',
-  INT16 = '16int',
-  UINT16 = '16uint',
-  FLOAT16 = '16float',
-  INT32 = '32int',
-  UINT32 = '32uint',
-  FLOAT32 = '32float',
-  INT64 = '64int',
-  UINT64 = '64uint',
-  FLOAT64 = '64float'
-}
-
-export const ModbusEditableDataTypes = [ModbusDataType.BYTES, ModbusDataType.BITS, ModbusDataType.STRING];
-
-export enum ModbusObjectCountByDataType {
-  '8int' = 1,
-  '8uint' = 1,
-  '8float' = 1,
-  '16int' = 1,
-  '16uint' = 1,
-  '16float' = 1,
-  '32int' = 2,
-  '32uint' = 2,
-  '32float' = 2,
-  '64int' = 4,
-  '64uint' = 4,
-  '64float' = 4,
-}
-
-export enum ModbusValueKey {
-  ATTRIBUTES = 'attributes',
-  TIMESERIES = 'timeseries',
-  ATTRIBUTES_UPDATES = 'attributeUpdates',
-  RPC_REQUESTS = 'rpc',
-}
-
-export const ModbusKeysPanelTitleTranslationsMap = new Map<ModbusValueKey, string>(
-  [
-    [ModbusValueKey.ATTRIBUTES, 'gateway.attributes'],
-    [ModbusValueKey.TIMESERIES, 'gateway.timeseries'],
-    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.attribute-updates'],
-    [ModbusValueKey.RPC_REQUESTS, 'gateway.rpc-requests']
-  ]
-);
-
-export const ModbusKeysAddKeyTranslationsMap = new Map<ModbusValueKey, string>(
-  [
-    [ModbusValueKey.ATTRIBUTES, 'gateway.add-attribute'],
-    [ModbusValueKey.TIMESERIES, 'gateway.add-timeseries'],
-    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.add-attribute-update'],
-    [ModbusValueKey.RPC_REQUESTS, 'gateway.add-rpc-request']
-  ]
-);
-
-export const ModbusKeysDeleteKeyTranslationsMap = new Map<ModbusValueKey, string>(
-  [
-    [ModbusValueKey.ATTRIBUTES, 'gateway.delete-attribute'],
-    [ModbusValueKey.TIMESERIES, 'gateway.delete-timeseries'],
-    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.delete-attribute-update'],
-    [ModbusValueKey.RPC_REQUESTS, 'gateway.delete-rpc-request']
-  ]
-);
-
-export const ModbusKeysNoKeysTextTranslationsMap = new Map<ModbusValueKey, string>(
-  [
-    [ModbusValueKey.ATTRIBUTES, 'gateway.no-attributes'],
-    [ModbusValueKey.TIMESERIES, 'gateway.no-timeseries'],
-    [ModbusValueKey.ATTRIBUTES_UPDATES, 'gateway.no-attribute-updates'],
-    [ModbusValueKey.RPC_REQUESTS, 'gateway.no-rpc-requests']
-  ]
-);
-
-export interface ModbusMasterConfig<Slave = SlaveConfig> {
-  slaves: Slave[];
-}
-
-export interface LegacySlaveConfig extends Omit<SlaveConfig, 'reportStrategy'> {
-  sendDataOnlyOnChange: boolean;
-}
-
-export interface SlaveConfig {
-  name: string;
-  host?: string;
-  port: string | number;
-  serialPort?: string;
-  type: ModbusProtocolType;
-  method: ModbusMethodType;
-  timeout: number;
-  byteOrder: ModbusOrderType;
-  wordOrder: ModbusOrderType;
-  retries: boolean;
-  retryOnEmpty: boolean;
-  retryOnInvalid: boolean;
-  pollPeriod: number;
-  unitId: number;
-  deviceName: string;
-  deviceType?: string;
-  reportStrategy: ReportStrategyConfig;
-  connectAttemptTimeMs: number;
-  connectAttemptCount: number;
-  waitAfterFailedAttemptsMs: number;
-  attributes: ModbusValue[];
-  timeseries: ModbusValue[];
-  attributeUpdates: ModbusValue[];
-  rpc: ModbusValue[];
-  security?: ModbusSecurity;
-  baudrate?: number;
-  stopbits?: number;
-  bytesize?: number;
-  parity?: ModbusParity;
-  strict?: boolean;
-}
-
-export interface ModbusValue {
-  tag: string;
-  type: ModbusDataType;
-  functionCode?: number;
-  objectsCount: number;
-  address: number;
-  value?: string;
-  reportStrategy?: ReportStrategyConfig;
-  multiplier?: number;
-  divider?: number;
-}
-
-export interface ModbusFormValue extends ModbusValue {
-  modifierType?: ModifierType;
-  modifierValue?: string;
-}
-
-export interface ModbusSecurity {
-  certfile?: string;
-  keyfile?: string;
-  password?: string;
-  server_hostname?: string;
-  reqclicert?: boolean;
-}
-
-export interface ModbusSlave {
-  host?: string;
-  type: ModbusProtocolType;
-  method: ModbusMethodType;
-  unitId: number;
-  serialPort?: string;
-  baudrate?: number;
-  deviceName: string;
-  deviceType: string;
-  pollPeriod: number;
-  sendDataToThingsBoard: boolean;
-  byteOrder: ModbusOrderType;
-  wordOrder: ModbusOrderType;
-  identity: ModbusIdentity;
-  values?: ModbusValuesState;
-  port: string | number;
-  security: ModbusSecurity;
-}
-
-export interface ModbusLegacySlave extends Omit<ModbusSlave, 'values'> {
-  values?: ModbusLegacyRegisterValues;
-}
-
-export type ModbusValuesState = ModbusRegisterValues | ModbusValues;
-
-export interface ModbusLegacyRegisterValues {
-  holding_registers: ModbusValues[];
-  coils_initializer: ModbusValues[];
-  input_registers: ModbusValues[];
-  discrete_inputs: ModbusValues[];
-}
-
-export interface ModbusRegisterValues {
-  holding_registers: ModbusValues;
-  coils_initializer: ModbusValues;
-  input_registers: ModbusValues;
-  discrete_inputs: ModbusValues;
-}
-
-export interface ModbusValues {
-  attributes: ModbusValue[];
-  timeseries: ModbusValue[];
-  attributeUpdates: ModbusValue[];
-  rpc: ModbusValue[];
-}
-
-export interface ModbusIdentity {
-  vendorName?: string;
-  productCode?: string;
-  vendorUrl?: string;
-  productName?: string;
-  modelName?: string;
-}
-
-export interface ReportStrategyConfig {
-  type: ReportStrategyType;
-  reportPeriod?: number;
-}
-
-export const ModbusBaudrates = [4800, 9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts
deleted file mode 100644
index 06526ce08e..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Pipe, PipeTransform } from '@angular/core';
-import {
-  MappingValueType,
-  OPCUaSourceType,
-  SourceType
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-@Pipe({
-  name: 'getGatewayHelpLink',
-  standalone: true,
-})
-export class GatewayHelpLinkPipe implements PipeTransform {
-  transform(field: string, sourceType: SourceType | OPCUaSourceType, sourceTypes?: Array<SourceType | OPCUaSourceType | MappingValueType> ): string {
-    if (!sourceTypes || sourceTypes?.includes(OPCUaSourceType.PATH)) {
-      if (sourceType !== OPCUaSourceType.CONST) {
-        return `widget/lib/gateway/${field}-${sourceType}_fn`;
-      } else {
-        return;
-      }
-    }
-    return 'widget/lib/gateway/expressions_fn';
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts
deleted file mode 100644
index fcf5766c05..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { PortLimits } from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { AbstractControl } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-
-@Pipe({
-  name: 'getGatewayPortTooltip',
-  standalone: true,
-})
-export class GatewayPortTooltipPipe implements PipeTransform {
-
-  constructor(private translate: TranslateService) {}
-
-  transform(portControl: AbstractControl): string {
-    if (portControl.hasError('required')) {
-      return this.translate.instant('gateway.port-required');
-    }
-    if (portControl.hasError('min') || portControl.hasError('max')) {
-      return this.translate.instant('gateway.port-limits-error', {
-        min: PortLimits.MIN,
-        max: PortLimits.MAX,
-      });
-    }
-    return '';
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/gateway-connector-version-mapping.util.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/gateway-connector-version-mapping.util.ts
deleted file mode 100644
index 90c89ea316..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/gateway-connector-version-mapping.util.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  ConnectorType,
-  GatewayConnector,
-  ModbusBasicConfig,
-  MQTTBasicConfig,
-  OPCBasicConfig,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { MqttVersionProcessor } from '@home/components/widget/lib/gateway/abstract/mqtt-version-processor.abstract';
-import { OpcVersionProcessor } from '@home/components/widget/lib/gateway/abstract/opc-version-processor.abstract';
-import { ModbusVersionProcessor } from '@home/components/widget/lib/gateway/abstract/modbus-version-processor.abstract';
-
-export abstract class GatewayConnectorVersionMappingUtil {
-
-  static getConfig(connector: GatewayConnector, gatewayVersion: string): GatewayConnector {
-    switch(connector.type) {
-      case ConnectorType.MQTT:
-        return new MqttVersionProcessor(gatewayVersion, connector as GatewayConnector<MQTTBasicConfig>).getProcessedByVersion();
-      case ConnectorType.OPCUA:
-        return new OpcVersionProcessor(gatewayVersion, connector as GatewayConnector<OPCBasicConfig>).getProcessedByVersion();
-      case ConnectorType.MODBUS:
-        return new ModbusVersionProcessor(gatewayVersion, connector as GatewayConnector<ModbusBasicConfig>).getProcessedByVersion();
-      default:
-        return connector;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/modbus-version-mapping.util.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/modbus-version-mapping.util.ts
deleted file mode 100644
index eb1ba9033f..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/modbus-version-mapping.util.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  LegacySlaveConfig,
-  ModbusDataType,
-  ModbusLegacyRegisterValues,
-  ModbusLegacySlave,
-  ModbusMasterConfig,
-  ModbusRegisterValues,
-  ModbusSlave,
-  ModbusValue,
-  ModbusValues,
-  ReportStrategyType,
-  SlaveConfig
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-export class ModbusVersionMappingUtil {
-
-  static mapMasterToUpgradedVersion(master: ModbusMasterConfig<LegacySlaveConfig>): ModbusMasterConfig {
-    return {
-      slaves: master.slaves.map((slave: LegacySlaveConfig) => {
-        const { sendDataOnlyOnChange, ...restSlave } = slave;
-        return {
-          ...restSlave,
-          deviceType: slave.deviceType ?? 'default',
-          reportStrategy: sendDataOnlyOnChange
-            ? { type: ReportStrategyType.OnChange }
-            : { type: ReportStrategyType.OnReportPeriod, reportPeriod: slave.pollPeriod }
-        };
-      })
-    };
-  }
-
-  static mapMasterToDowngradedVersion(master: ModbusMasterConfig): ModbusMasterConfig<LegacySlaveConfig> {
-    return {
-      slaves: master.slaves.map((slave: SlaveConfig) => {
-        const { reportStrategy, ...restSlave } = slave;
-        return {
-          ...restSlave,
-          sendDataOnlyOnChange: reportStrategy?.type !== ReportStrategyType.OnReportPeriod
-        };
-      })
-    };
-  }
-
-  static mapSlaveToDowngradedVersion(slave: ModbusSlave): ModbusLegacySlave {
-    if (!slave?.values) {
-      return slave as Omit<ModbusLegacySlave, 'values'>;
-    }
-    const values = Object.keys(slave.values).reduce((acc, valueKey) => {
-      acc = {
-        ...acc,
-        [valueKey]: [
-          slave.values[valueKey]
-        ]
-      };
-      return acc;
-    }, {} as ModbusLegacyRegisterValues);
-    return {
-      ...slave,
-      values
-    };
-  }
-
-  static mapSlaveToUpgradedVersion(slave: ModbusLegacySlave): ModbusSlave {
-    if (!slave?.values) {
-      return slave as Omit<ModbusSlave, 'values'>;
-    }
-    const values = Object.keys(slave.values).reduce((acc, valueKey) => {
-      acc = {
-        ...acc,
-        [valueKey]: this.mapValuesToUpgradedVersion(slave.values[valueKey][0])
-      };
-      return acc;
-    }, {} as ModbusRegisterValues);
-    return {
-      ...slave,
-      values
-    };
-  }
-
-  private static mapValuesToUpgradedVersion(registerValues: ModbusValues): ModbusValues {
-    return Object.keys(registerValues).reduce((acc, valueKey) => {
-      acc = {
-       ...acc,
-        [valueKey]: registerValues[valueKey].map((value: ModbusValue) =>
-          ({ ...value, type: (value.type as string) === 'int' ? ModbusDataType.INT16 : value.type }))
-      };
-      return acc;
-    }, {} as ModbusValues);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/mqtt-version-mapping.util.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/mqtt-version-mapping.util.ts
deleted file mode 100644
index 23cc03dc4e..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/mqtt-version-mapping.util.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { deleteNullProperties } from '@core/utils';
-import {
-  AttributeRequest,
-  ConnectorDeviceInfo,
-  Converter,
-  ConverterConnectorMapping,
-  ConvertorType,
-  LegacyConverter,
-  LegacyConverterConnectorMapping,
-  LegacyRequestMappingData,
-  RequestMappingData,
-  RequestType,
-  ServerSideRpc,
-  ServerSideRpcType,
-  SourceType
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-export class MqttVersionMappingUtil {
-
-  static readonly mqttRequestTypeKeys = Object.values(RequestType);
-  static readonly mqttRequestMappingOldFields =
-    ['attributeNameJsonExpression', 'deviceNameJsonExpression', 'deviceNameTopicExpression', 'extension-config'];
-  static readonly mqttRequestMappingNewFields =
-    ['attributeNameExpressionSource', 'responseTopicQoS', 'extensionConfig'];
-
-  static mapMappingToUpgradedVersion(
-    mapping: LegacyConverterConnectorMapping[]
-  ): ConverterConnectorMapping[] {
-    return mapping?.map(({ converter, topicFilter, subscriptionQos = 1 }) => {
-      const deviceInfo = converter.deviceInfo ?? this.extractConverterDeviceInfo(converter);
-
-      const newConverter = {
-        ...converter,
-        deviceInfo,
-        extensionConfig: converter.extensionConfig || converter['extension-config'] || null
-      };
-
-      this.cleanUpOldFields(newConverter);
-
-      return { converter: newConverter, topicFilter, subscriptionQos };
-    }) as ConverterConnectorMapping[];
-  }
-
-  static mapRequestsToUpgradedVersion(
-    requestMapping: Record<RequestType,
-      LegacyRequestMappingData[]>
-  ): Record<RequestType, RequestMappingData[]> {
-    return this.mqttRequestTypeKeys.reduce((acc, key: RequestType) => {
-      if (!requestMapping[key]) {
-        return acc;
-      }
-
-      acc[key] = requestMapping[key].map(value => {
-        const newValue = this.mapRequestToUpgradedVersion(value as LegacyRequestMappingData, key);
-
-        this.cleanUpOldFields(newValue as {});
-
-        return newValue;
-      });
-
-      return acc;
-    }, {}) as Record<RequestType, RequestMappingData[]>;
-  }
-
-  static mapRequestsToDowngradedVersion(
-    requestsMapping: Record<RequestType, RequestMappingData[]>
-  ): Record<RequestType, LegacyRequestMappingData[]> {
-    return this.mqttRequestTypeKeys.reduce((acc, key) => {
-      if (!requestsMapping[key]) {
-        return acc;
-      }
-
-      acc[key] = requestsMapping[key].map((value: RequestMappingData) => {
-        if (key === RequestType.SERVER_SIDE_RPC) {
-          delete (value as ServerSideRpc).type;
-        }
-
-        const { attributeNameExpression, deviceInfo, ...rest } = value as AttributeRequest;
-
-        const newValue = {
-          ...rest,
-          attributeNameJsonExpression: attributeNameExpression || null,
-          deviceNameJsonExpression: deviceInfo?.deviceNameExpressionSource !== SourceType.TOPIC ? deviceInfo?.deviceNameExpression : null,
-          deviceNameTopicExpression: deviceInfo?.deviceNameExpressionSource === SourceType.TOPIC ? deviceInfo?.deviceNameExpression : null,
-        };
-
-        this.cleanUpNewFields(newValue);
-
-        return newValue;
-      });
-
-      return acc;
-    }, {}) as Record<RequestType, LegacyRequestMappingData[]>;
-  }
-
-  static mapMappingToDowngradedVersion(
-    mapping: ConverterConnectorMapping[]
-  ): LegacyConverterConnectorMapping[] {
-    return mapping?.map((converterMapping: ConverterConnectorMapping) => {
-      const converter = this.mapConverterToDowngradedVersion(converterMapping.converter);
-
-      this.cleanUpNewFields(converter as {});
-
-      return { converter, topicFilter: converterMapping.topicFilter };
-    });
-  }
-
-  private static mapConverterToDowngradedVersion(converter: Converter): LegacyConverter {
-    const { deviceInfo, ...restConverter } = converter;
-
-    return converter.type !== ConvertorType.BYTES ? {
-      ...restConverter,
-      deviceNameJsonExpression: deviceInfo?.deviceNameExpressionSource === SourceType.MSG ? deviceInfo.deviceNameExpression : null,
-      deviceTypeJsonExpression:
-        deviceInfo?.deviceProfileExpressionSource === SourceType.MSG ? deviceInfo.deviceProfileExpression : null,
-      deviceNameTopicExpression:
-        deviceInfo?.deviceNameExpressionSource !== SourceType.MSG
-          ? deviceInfo?.deviceNameExpression
-          : null,
-      deviceTypeTopicExpression: deviceInfo?.deviceProfileExpressionSource !== SourceType.MSG
-        ? deviceInfo?.deviceProfileExpression
-        : null,
-    } : {
-      ...restConverter,
-      deviceNameExpression: deviceInfo.deviceNameExpression,
-      deviceTypeExpression: deviceInfo.deviceProfileExpression,
-      ['extension-config']: converter.extensionConfig,
-    };
-  }
-
-  private static cleanUpOldFields(obj: Record<string, unknown>): void {
-    this.mqttRequestMappingOldFields.forEach(field => delete obj[field]);
-    deleteNullProperties(obj);
-  }
-
-  private static cleanUpNewFields(obj: Record<string, unknown>): void {
-    this.mqttRequestMappingNewFields.forEach(field => delete obj[field]);
-    deleteNullProperties(obj);
-  }
-
-  private static getTypeSourceByValue(value: string): SourceType {
-    if (value.includes('${')) {
-      return SourceType.MSG;
-    }
-    if (value.includes(`/`)) {
-      return SourceType.TOPIC;
-    }
-    return SourceType.CONST;
-  }
-
-  private static extractConverterDeviceInfo(converter: LegacyConverter): ConnectorDeviceInfo {
-    const deviceNameExpression = converter.deviceNameExpression
-      || converter.deviceNameJsonExpression
-      || converter.deviceNameTopicExpression
-      || null;
-    const deviceNameExpressionSource = converter.deviceNameExpressionSource
-      ? converter.deviceNameExpressionSource as SourceType
-      : deviceNameExpression ? this.getTypeSourceByValue(deviceNameExpression) : null;
-    const deviceProfileExpression = converter.deviceProfileExpression
-      || converter.deviceTypeTopicExpression
-      || converter.deviceTypeJsonExpression
-      || 'default';
-    const deviceProfileExpressionSource = converter.deviceProfileExpressionSource
-      ? converter.deviceProfileExpressionSource as SourceType
-      : deviceProfileExpression ? this.getTypeSourceByValue(deviceProfileExpression) : null;
-
-    return deviceNameExpression || deviceProfileExpression ? {
-      deviceNameExpression,
-      deviceNameExpressionSource,
-      deviceProfileExpression,
-      deviceProfileExpressionSource
-    } : null;
-  }
-
-  private static mapRequestToUpgradedVersion(value, key: RequestType): RequestMappingData {
-    const deviceNameExpression = value.deviceNameJsonExpression || value.deviceNameTopicExpression || null;
-    const deviceProfileExpression = value.deviceTypeTopicExpression || value.deviceTypeJsonExpression || 'default';
-    const deviceProfileExpressionSource = deviceProfileExpression ? this.getTypeSourceByValue(deviceProfileExpression) : null;
-    const attributeNameExpression = value.attributeNameExpressionSource || value.attributeNameJsonExpression || null;
-    const responseTopicQoS = key === RequestType.SERVER_SIDE_RPC ? 1 : null;
-    const type = key === RequestType.SERVER_SIDE_RPC
-      ? (value as ServerSideRpc).responseTopicExpression
-        ? ServerSideRpcType.WithResponse
-        : ServerSideRpcType.WithoutResponse
-      : null;
-
-    return {
-      ...value,
-      attributeNameExpression,
-      attributeNameExpressionSource: attributeNameExpression ? this.getTypeSourceByValue(attributeNameExpression) : null,
-      deviceInfo: value.deviceInfo ? value.deviceInfo : deviceNameExpression ? {
-        deviceNameExpression,
-        deviceNameExpressionSource: this.getTypeSourceByValue(deviceNameExpression),
-        deviceProfileExpression,
-        deviceProfileExpressionSource
-      } : null,
-      responseTopicQoS,
-      type
-    };
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/opc-version-mapping.util.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/opc-version-mapping.util.ts
deleted file mode 100644
index 9837f2f15d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/utils/opc-version-mapping.util.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import {
-  Attribute,
-  AttributesUpdate,
-  DeviceConnectorMapping,
-  LegacyAttribute,
-  LegacyDeviceAttributeUpdate,
-  LegacyDeviceConnectorMapping,
-  LegacyRpcMethod,
-  LegacyServerConfig,
-  LegacyTimeseries,
-  OPCBasicConfig_v3_5_2,
-  OPCUaSourceType,
-  RpcArgument,
-  RpcMethod,
-  ServerConfig,
-  Timeseries
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
-
-export class OpcVersionMappingUtil {
-
-  static mapServerToUpgradedVersion(server: LegacyServerConfig): ServerConfig {
-    const { mapping, disableSubscriptions, pollPeriodInMillis, ...restServer } = server;
-    return {
-      ...restServer,
-      pollPeriodInMillis: pollPeriodInMillis ?? 5000,
-      enableSubscriptions: !disableSubscriptions,
-    };
-  }
-
-  static mapServerToDowngradedVersion(config: OPCBasicConfig_v3_5_2): LegacyServerConfig {
-    const { mapping, server } = config;
-    const { enableSubscriptions, ...restServer } = server ?? {} as ServerConfig;
-    return {
-      ...restServer,
-      mapping: mapping ? this.mapMappingToDowngradedVersion(mapping) : [],
-      disableSubscriptions: !enableSubscriptions,
-    };
-  }
-
-  static mapMappingToUpgradedVersion(mapping: LegacyDeviceConnectorMapping[]): DeviceConnectorMapping[] {
-    return mapping.map((legacyMapping: LegacyDeviceConnectorMapping) => ({
-      ...legacyMapping,
-      deviceNodeSource: this.getTypeSourceByValue(legacyMapping.deviceNodePattern),
-      deviceInfo: {
-        deviceNameExpression: legacyMapping.deviceNamePattern,
-        deviceNameExpressionSource: this.getTypeSourceByValue(legacyMapping.deviceNamePattern),
-        deviceProfileExpression: legacyMapping.deviceTypePattern ?? 'default',
-        deviceProfileExpressionSource: this.getTypeSourceByValue(legacyMapping.deviceTypePattern ?? 'default'),
-      },
-      attributes: legacyMapping.attributes.map((attribute: LegacyAttribute) => ({
-        key: attribute.key,
-        type: this.getTypeSourceByValue(attribute.path),
-        value: attribute.path,
-      })),
-      attributes_updates: legacyMapping.attributes_updates.map((attributeUpdate: LegacyDeviceAttributeUpdate) => ({
-        key: attributeUpdate.attributeOnThingsBoard,
-        type: this.getTypeSourceByValue(attributeUpdate.attributeOnDevice),
-        value: attributeUpdate.attributeOnDevice,
-      })),
-      timeseries: legacyMapping.timeseries.map((timeseries: LegacyTimeseries) => ({
-        key: timeseries.key,
-        type: this.getTypeSourceByValue(timeseries.path),
-        value: timeseries.path,
-      })),
-      rpc_methods: legacyMapping.rpc_methods.map((rpcMethod: LegacyRpcMethod) => ({
-        method: rpcMethod.method,
-        arguments: rpcMethod.arguments.map(arg => ({
-          value: arg,
-          type: this.getArgumentType(arg),
-        } as RpcArgument))
-      }))
-    }));
-  }
-
-  static mapMappingToDowngradedVersion(mapping: DeviceConnectorMapping[]): LegacyDeviceConnectorMapping[] {
-    return mapping.map((upgradedMapping: DeviceConnectorMapping) => ({
-      ...upgradedMapping,
-      deviceNamePattern: upgradedMapping.deviceInfo.deviceNameExpression,
-      deviceTypePattern: upgradedMapping.deviceInfo.deviceProfileExpression,
-      attributes: upgradedMapping.attributes.map((attribute: Attribute) => ({
-        key: attribute.key,
-        path: attribute.value,
-      })),
-      attributes_updates: upgradedMapping.attributes_updates.map((attributeUpdate: AttributesUpdate) => ({
-        attributeOnThingsBoard: attributeUpdate.key,
-        attributeOnDevice: attributeUpdate.value,
-      })),
-      timeseries: upgradedMapping.timeseries.map((timeseries: Timeseries) => ({
-        key: timeseries.key,
-        path: timeseries.value,
-      })),
-      rpc_methods: upgradedMapping.rpc_methods.map((rpcMethod: RpcMethod) => ({
-        method: rpcMethod.method,
-        arguments: rpcMethod.arguments.map((arg: RpcArgument) => arg.value)
-      }))
-    }));
-  }
-
-  private static getTypeSourceByValue(value: string): OPCUaSourceType {
-    if (value.includes('${')) {
-      return OPCUaSourceType.IDENTIFIER;
-    }
-    if (value.includes(`/`) || value.includes('\\')) {
-      return OPCUaSourceType.PATH;
-    }
-    return OPCUaSourceType.CONST;
-  }
-
-  private static getArgumentType(arg: unknown): string {
-    switch (typeof arg) {
-      case 'boolean':
-        return 'boolean';
-      case 'number':
-        return Number.isInteger(arg) ? 'integer' : 'float';
-      default:
-        return 'string';
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
index 7f86897f7e..fb950f6579 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-doc-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-add-doc-link-dialog" [formGroup]="addDocLinkFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2 translate>widgets.documentation.add-link-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
index c76f32405c..cb56e2da3a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-add-quick-link-dialog" [formGroup]="addQuickLinkFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2 translate>widgets.quick-links.add-link-title</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
index f62d1ea61d..457d1bf316 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/cluster-info-table.component.html
@@ -41,7 +41,7 @@
               [matTooltip]="infoTooltip(serviceData, 'cpu')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.cpuUsage)">
+              [class]="statusClass(serviceData.cpuUsage)">
       {{ serviceData.cpuUsage }}%
     </mat-cell>
   </ng-container>
@@ -53,7 +53,7 @@
               [matTooltip]="infoTooltip(serviceData, 'ram')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.memoryUsage)">
+              [class]="statusClass(serviceData.memoryUsage)">
       {{ serviceData.memoryUsage }}%
     </mat-cell>
   </ng-container>
@@ -65,13 +65,12 @@
               [matTooltip]="infoTooltip(serviceData, 'disc')"
               matTooltipPosition="above"
               class="tb-resource-usage"
-              [ngClass]="statusClass(serviceData.discUsage)">
+              [class]="statusClass(serviceData.discUsage)">
       {{ serviceData.discUsage }}%
     </mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
   <mat-row *matRowDef="let serviceData; columns: displayedColumns;"></mat-row>
 </table>
-<span [fxShow]="dataSource.isEmpty() | async"
-      fxLayoutAlign="center center"
-      class="no-data-found" translate>widgets.cluster-info.no-data</span>
+<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
+      class="no-data-found flex items-center justify-center" translate>widgets.cluster-info.no-data</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
index ec26e67111..cef21e9a01 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
@@ -15,55 +15,55 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-title">{{ 'widgets.configured-features.title' | translate }}
     <mat-icon
       matTooltip="{{ 'widgets.configured-features.info' | translate }}"
       matTooltipPosition="above"
       class="tb-info-icon">info</mat-icon>
   </div>
-  <mat-grid-list class="tb-features-list" fxFlex cols="6" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-features-list flex-1" cols="6" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-feature-tile" colspan="3">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.emailEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.emailEnabled}"
+         [class.configured]="featuresInfo?.emailEnabled"
          routerLink="/settings/outgoing-mail">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.emailEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.email-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" colspan="3">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.smsEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.smsEnabled}"
+         [class.configured]="featuresInfo?.smsEnabled"
          routerLink="/settings/notifications">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.smsEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.sms-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.notificationEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.notificationEnabled}"
+         [class.configured]="featuresInfo?.notificationEnabled"
          routerLink="/settings/notifications">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.slack-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.oauthEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.oauthEnabled}"
+         [class.configured]="featuresInfo?.oauthEnabled"
          routerLink="/security-settings/oauth2">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.oauth2-feature' | translate}}</div>
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-feature-tile" [colspan]="lastColspan">
-      <a class="tb-feature-button" fxFlex
+      <a class="tb-feature-button flex-1"
          [matTooltip]="featureTooltip(featuresInfo?.twoFaEnabled)"
          matTooltipPosition="above"
-         [ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
+         [class.configured]="featuresInfo?.twoFaEnabled"
          routerLink="/security-settings/2fa">
         <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.twoFaEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.2fa-feature' | translate}}</div>
       </a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
index d4c171ab15..4db770a919 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
@@ -15,36 +15,36 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" *ngIf="addMode || editMode; else docLinkTemplate">
-  <div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editDocLinkFormGroup" fxLayout="column">
+<div class="flex flex-row" *ngIf="addMode || editMode; else docLinkTemplate">
+  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
     <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.documentation.name</mat-label>
       <input required matInput formControlName="name">
       <mat-error *ngIf="editDocLinkFormGroup.get('name').hasError('required')">
         {{ 'widgets.documentation.name-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.documentation.link</mat-label>
       <input required matInput formControlName="link">
       <mat-error *ngIf="editDocLinkFormGroup.get('link').hasError('required')">
         {{ 'widgets.documentation.link-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
       <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
       <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
     </div>
   </div>
-  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
     <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
     <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
   </div>
 </div>
 <ng-template #docLinkTemplate>
-  <div fxLayout="row">
-    <div fxFlex class="tb-link">
+  <div class="flex flex-row">
+    <div class="tb-link flex-1">
       <div class="tb-link-container">
         <div class="tb-link-icon-container">
           <tb-icon color="primary">{{ docLink.icon }}</tb-icon>
@@ -52,7 +52,7 @@
         <div class="tb-link-text">{{ docLink.name }}</div>
       </div>
     </div>
-    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+    <div class="tb-edit-buttons flex flex-row items-center justify-start">
       <button mat-icon-button
               matTooltip="{{ 'action.edit' | translate }}"
               matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
index 75d46f1865..474824cb12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-card-header">
     <a class="tb-title-link" href="https://thingsboard.io/docs/" target="_blank">{{ 'widgets.documentation.title' | translate }}</a>
     <button class="tb-title-icon"
@@ -26,9 +26,9 @@
       <tb-icon>edit</tb-icon>
     </button>
   </div>
-  <mat-grid-list class="tb-links-list" fxFlex [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-links-tile" *ngFor="let docLink of documentationLinks?.links">
-      <a fxFlex class="tb-link-button"
+      <a class="tb-link-button flex-1"
          [href]="docLink.link" target="_blank">
         <div class="tb-link-container">
           <div class="tb-link-icon-container">
@@ -39,7 +39,7 @@
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-links-tile">
-      <div fxFlex class="tb-add-link-button"
+      <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.documentation.add-link' | translate }}"
            matTooltipPosition="above"
            (click)="addLink()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
index 03a60f2714..d148c8baf9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-edit-links-dialog" [formGroup]="editLinksFormGroup">
   <mat-toolbar style="background: transparent;">
     <h2>{{ (mode === 'docs' ? 'widgets.documentation.title' : 'widgets.quick-links.title') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -28,12 +28,12 @@
   <div mat-dialog-content>
     <div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
          (cdkDropListDropped)="linkDrop($event)" [cdkDropListDisabled]="editMode || addMode">
-      <div cdkDrag class="tb-draggable" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
+      <div cdkDrag class="tb-draggable flex flex-row items-center justify-start" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink;
                let $index = index; last as isLast;"
-           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+           [class.pb-2]="!isLast">
         <ng-container [ngSwitch]="mode">
           <ng-template [ngSwitchCase]="'docs'">
-            <tb-doc-link fxFlex #docLink [formControl]="linkControl"
+            <tb-doc-link class="flex-1" #docLink [formControl]="linkControl"
                          [disableEdit]="editMode || addMode"
                          (editModeChanged)="editMode = $event"
                          (docLinkUpdated)="update()"
@@ -44,7 +44,7 @@
             </ng-container>
           </ng-template>
           <ng-template [ngSwitchCase]="'quickLinks'">
-            <tb-quick-link fxFlex #quickLink [formControl]="linkControl"
+            <tb-quick-link class="flex-1" #quickLink [formControl]="linkControl"
                            [disableEdit]="editMode || addMode"
                            (editModeChanged)="editMode = $event"
                            (quickLinkUpdated)="update()"
@@ -67,7 +67,7 @@
     </div>
   </div>
   <div mat-dialog-actions>
-    <div *ngIf="!editMode && !addMode" fxFlex class="tb-add-link-button"
+    <div *ngIf="!editMode && !addMode" class="tb-add-link-button flex-1"
          matTooltip="{{ (mode === 'docs' ? 'widgets.documentation.add-link' : 'widgets.quick-links.add-link') | translate }}"
          matTooltipPosition="above"
          (click)="addLink()">
@@ -76,14 +76,14 @@
     <ng-container *ngIf="addMode">
       <ng-container [ngSwitch]="mode">
         <ng-template [ngSwitchCase]="'docs'">
-          <tb-doc-link fxFlex [(ngModel)]="addingLink"
+          <tb-doc-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (docLinkAdded)="linkAdded($event)"
                        (docLinkAddCanceled)="addMode = false">
           </tb-doc-link>
         </ng-template>
         <ng-template [ngSwitchCase]="'quickLinks'">
-          <tb-quick-link fxFlex [(ngModel)]="addingLink"
+          <tb-quick-link class="flex-1" [(ngModel)]="addingLink"
                        [ngModelOptions]="{standalone: true}"
                        (quickLinkAdded)="linkAdded($event)"
                        (quickLinkAddCanceled)="addMode = false">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
index 41082e520c..0269fc3bd4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-completed-dialog.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<div class="tb-getting-started-completed-dialog-container" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 64px; padding: 8px;">
-    <span fxFlex></span>
+<div class="tb-getting-started-completed-dialog-container flex flex-col">
+  <div class="flex flex-row items-center justify-start" style="height: 64px; padding: 8px;">
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center center" style="height: 70px;">
-    <div class="tb-done-container" fxLayout="row" fxLayoutAlign="center center">
+  <div class="flex flex-row items-center justify-center" style="height: 70px;">
+    <div class="tb-done-container flex flex-row items-center justify-center">
       <mat-icon class="tb-done-icon" color="primary">done</mat-icon>
     </div>
   </div>
-  <div fxLayout="column" fxLayoutAlign="start center" style="padding-top: 30px;">
+  <div class="flex flex-col items-center justify-start" style="padding-top: 30px;">
     <div class="tb-done-welcome-title" translate>widgets.getting-started.done-welcome-title</div>
     <div class="tb-done-welcome-text" translate>widgets.getting-started.done-welcome-text</div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
index 0be1ab675b..004d9807b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
@@ -26,7 +26,7 @@
       <ng-template [ngSwitchCase]="authority.SYS_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a>
             </div>
@@ -37,7 +37,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step2.title</div>
               <a *ngIf="matStepper.selectedIndex === 1" mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -48,7 +48,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -59,7 +59,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -70,7 +70,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step5.title</div>
               <a *ngIf="matStepper.selectedIndex === 4" mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -81,7 +81,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -94,7 +94,7 @@
       <ng-template [ngSwitchCase]="authority.TENANT_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/entities/devices">{{ 'device.devices' | translate }}</a>
             </div>
@@ -105,7 +105,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step2.title</div>
             </div>
           </ng-template>
@@ -153,7 +153,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/dashboards">{{ 'dashboard.dashboards' | translate }}</a>
             </div>
@@ -164,7 +164,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/profiles/deviceProfiles">{{ 'widgets.getting-started.tenant-admin.step4.alarm-rules' | translate }}</a>
             </div>
@@ -175,7 +175,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step5.title</div>
             </div>
           </ng-template>
@@ -193,7 +193,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center">
+            <div style="width: 100%;" class="flex flex-row items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/customers">{{ 'customer.customers' | translate }}</a>
             </div>
@@ -205,7 +205,7 @@
       </ng-template>
     </ng-container>
   </mat-stepper>
-  <div *ngIf="allCompleted" fxLayout="column" fxLayoutAlign="center center" style="padding-top: 24px;">
+  <div *ngIf="allCompleted" class="flex flex-col items-center justify-center" style="padding-top: 24px;">
     <button (click)="gettingStartedCompleted()" mat-flat-button color="primary">
       <mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
index 36ce77c813..9038805e73 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" *ngIf="addMode || editMode; else quickLinkTemplate">
-  <div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editQuickLinkFormGroup" fxLayout="column">
-    <mat-form-field fxFlex class="mat-block">
+<div class="flex flex-row" *ngIf="addMode || editMode; else quickLinkTemplate">
+  <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.quick-links.quick-link</mat-label>
       <input matInput type="text"
              #linkInput
@@ -50,19 +50,19 @@
         {{ 'widgets.quick-links.quick-link-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px">
+    <div *ngIf="addMode" class="flex flex-row items-stretch justify-end gap-2">
       <button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button>
       <button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button>
     </div>
   </div>
-  <div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons">
+  <div *ngIf="editMode" class="tb-edit-buttons flex flex-row">
     <button mat-icon-button (click)="apply()"><tb-icon>check</tb-icon></button>
     <button mat-icon-button (click)="cancelEdit()"><tb-icon>close</tb-icon></button>
   </div>
 </div>
 <ng-template #quickLinkTemplate>
-  <div fxLayout="row">
-    <div fxFlex class="tb-link">
+  <div class="flex flex-row">
+    <div class="tb-link flex-1">
       <div class="tb-link-container">
         <div class="tb-link-icon-container">
           <tb-icon color="primary">{{ quickLink?.icon }}</tb-icon>
@@ -70,7 +70,7 @@
         <div class="tb-link-text">{{ displayLinkFn(quickLink) }}</div>
       </div>
     </div>
-    <div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons">
+    <div class="tb-edit-buttons flex flex-row items-center justify-start">
       <button mat-icon-button
               matTooltip="{{ 'action.edit' | translate }}"
               matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
index 1de9975c53..6380e116c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <div class="tb-card-header">
     <div class="tb-title">{{ 'widgets.quick-links.title' | translate }}</div>
     <button class="tb-title-icon"
@@ -26,9 +26,9 @@
       <tb-icon>edit</tb-icon>
     </button>
   </div>
-  <mat-grid-list class="tb-links-list" fxFlex [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
+  <mat-grid-list class="tb-links-list flex-1" [cols]="columns" [rowHeight]="rowHeight" [gutterSize]="gutterSize">
     <mat-grid-tile class="tb-links-tile" *ngFor="let quickLink of menuLinks$() | async">
-      <a fxFlex class="tb-link-button"
+      <a class="tb-link-button flex-1"
          [routerLink]="quickLink.path">
         <div class="tb-link-container">
           <div class="tb-link-icon-container">
@@ -39,7 +39,7 @@
       </a>
     </mat-grid-tile>
     <mat-grid-tile class="tb-links-tile">
-      <div fxFlex class="tb-add-link-button"
+      <div class="tb-add-link-button flex-1"
            matTooltip="{{ 'widgets.quick-links.add-link' | translate }}"
            matTooltipPosition="above"
            (click)="addLink()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
index 6c73e47574..01ebe25c10 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/recent-dashboards-widget.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <ng-container *ngIf="hasDashboardsAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/dashboards">{{ 'widgets.recent-dashboards.title' | translate }}</a>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-md="space-between center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2 lt-md:items-center lt-md:justify-between">
         <tb-toggle-header #dashboardsToggle [value]="toggleValue" name="usageToggle" (valueChange)="toggleValueChange($event)">
           <tb-toggle-option value="last">{{ 'widgets.recent-dashboards.last' | translate }}</tb-toggle-option>
           <tb-toggle-option value="starred">{{ 'widgets.recent-dashboards.starred' | translate }}</tb-toggle-option>
         </tb-toggle-header>
-        <a *ngIf="authUser.authority === authority.TENANT_ADMIN" fxHide.md
+        <a *ngIf="authUser.authority === authority.TENANT_ADMIN" class="md:!hidden"
            mat-flat-button color="primary" routerLink="/dashboards" [queryParams]="{action: 'add'}">{{ 'dashboard.add' | translate }}</a>
       </div>
     </div>
@@ -40,7 +40,7 @@
               </mat-header-cell>
               <mat-cell class="star-cell" *matCellDef="let lastVisitedDashboard">
                 <mat-icon (click)="toggleDashboardStar(lastVisitedDashboard)"
-                          class="star" [ngClass]="{'starred': lastVisitedDashboard.starred}">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                          class="star" [class.starred]="lastVisitedDashboard.starred">{{ lastVisitedDashboard.starred ? 'star' : 'star_border' }}</mat-icon>
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="title">
@@ -75,7 +75,7 @@
           <div class="tb-starred-dashboard-row" *ngFor="let dashboard of userDashboardsInfo?.starred">
             <div class="tb-cell star-cell">
               <mat-icon (click)="toggleDashboardStar(dashboard)"
-                        class="star" [ngClass]="{'starred': dashboard.starred}">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
+                        class="star" [class.starred]="dashboard.starred">{{ dashboard.starred ? 'star' : 'star_border' }}</mat-icon>
             </div>
             <div class="tb-cell title">
               <a [routerLink]="createDashboardUrl(dashboard.id)">{{ dashboard.title | customTranslate }}</a>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
index ebb07140f8..ede61a2618 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px">
+<div class="tb-card-content flex flex-col gap-2">
   <ng-container *ngIf="hasUsageInfoAccess; else noDataAvailable">
     <div class="tb-card-header">
       <a class="tb-title-link" routerLink="/usage">{{ 'widgets.usage-info.title' | translate }}</a>
@@ -26,55 +26,55 @@
     </div>
     <ng-container [ngSwitch]="usageToggle.value">
       <ng-template [ngSwitchCase]="'entities'">
-        <div fxFlex class="tb-usage-list">
+        <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.devices}" translate>device.devices</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.assets}" translate>asset.assets</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.users}" translate>user.users</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.dashboards}" translate>dashboard.dashboards</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': entityItemCritical.customers}"  translate>customer.customers</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.devices" translate>device.devices</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.assets" translate>asset.assets</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.users" translate>user.users</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.dashboards" translate>dashboard.dashboards</div>
+            <div class="tb-usage-item" [class.critical]="entityItemCritical.customers" translate>customer.customers</div>
           </div>
           <div class="tb-usage-items-values">
             <div class="tb-usage-items-counts">
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.devices}">{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.assets}">{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.users}">{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.dashboards}">{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': entityItemCritical.customers}">{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.devices">{{ usageInfo?.devices | shortNumber }} / {{ maxValue(usageInfo?.maxDevices) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.assets">{{ usageInfo?.assets | shortNumber }} / {{ maxValue(usageInfo?.maxAssets) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.users">{{ usageInfo?.users | shortNumber }} / {{ maxValue(usageInfo?.maxUsers) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.dashboards">{{ usageInfo?.dashboards | shortNumber }} / {{ maxValue(usageInfo?.maxDashboards) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="entityItemCritical.customers">{{ usageInfo?.customers | shortNumber }} / {{ maxValue(usageInfo?.maxCustomers) }}</div>
             </div>
             <div class="tb-usage-items-progress">
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.devices}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.devices, usageInfo?.maxDevices)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.assets}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.assets, usageInfo?.maxAssets)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.users}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.users, usageInfo?.maxUsers)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.dashboards}"color="primary" mode="determinate" [value]="progressValue(usageInfo?.dashboards, usageInfo?.maxDashboards)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': entityItemCritical.customers}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.customers, usageInfo?.maxCustomers)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.devices" color="primary" mode="determinate" [value]="progressValue(usageInfo?.devices, usageInfo?.maxDevices)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.assets" color="primary" mode="determinate" [value]="progressValue(usageInfo?.assets, usageInfo?.maxAssets)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.users" color="primary" mode="determinate" [value]="progressValue(usageInfo?.users, usageInfo?.maxUsers)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.dashboards" color="primary" mode="determinate" [value]="progressValue(usageInfo?.dashboards, usageInfo?.maxDashboards)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="entityItemCritical.customers" color="primary" mode="determinate" [value]="progressValue(usageInfo?.customers, usageInfo?.maxCustomers)"></mat-progress-bar>
             </div>
           </div>
         </div>
       </ng-template>
       <ng-template [ngSwitchCase]="'apiCalls'">
-        <div fxFlex class="tb-usage-list">
+        <div class="tb-usage-list flex-1">
           <div class="tb-usage-items">
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.transportMessages}" translate>api-usage.transport-messages</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.jsExecutions}" translate>api-usage.javascript</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.alarms}" translate>api-usage.alarms-created</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.emails}" translate>api-usage.email</div>
-            <div class="tb-usage-item" [ngClass]="{'critical': apiCallItemCritical.sms}"  translate>api-usage.sms</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.transportMessages" translate>api-usage.transport-messages</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.jsExecutions" translate>api-usage.javascript</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.alarms" translate>api-usage.alarms-created</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.emails" translate>api-usage.email</div>
+            <div class="tb-usage-item" [class.critical]="apiCallItemCritical.sms" translate>api-usage.sms</div>
           </div>
           <div class="tb-usage-items-values">
             <div class="tb-usage-items-counts">
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.transportMessages}">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.jsExecutions}">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.alarms}">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.emails}">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
-              <div class="tb-usage-item-counts" [ngClass]="{'critical': apiCallItemCritical.sms}">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.transportMessages">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.jsExecutions">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.alarms">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.emails">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
+              <div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.sms">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
             </div>
             <div class="tb-usage-items-progress">
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.transportMessages}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.jsExecutions}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.jsExecutions, usageInfo?.maxJsExecutions)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.alarms}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.alarms, usageInfo?.maxAlarms)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.emails}"color="primary" mode="determinate" [value]="progressValue(usageInfo?.emails, usageInfo?.maxEmails)"></mat-progress-bar>
-              <mat-progress-bar [ngClass]="{'critical': apiCallItemCritical.sms}" color="primary" mode="determinate" [value]="progressValue(usageInfo?.sms, usageInfo?.maxSms)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.transportMessages" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.jsExecutions" color="primary" mode="determinate" [value]="progressValue(usageInfo?.jsExecutions, usageInfo?.maxJsExecutions)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.alarms" color="primary" mode="determinate" [value]="progressValue(usageInfo?.alarms, usageInfo?.maxAlarms)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.emails" color="primary" mode="determinate" [value]="progressValue(usageInfo?.emails, usageInfo?.maxEmails)"></mat-progress-bar>
+              <mat-progress-bar [class.critical]="apiCallItemCritical.sms" color="primary" mode="determinate" [value]="progressValue(usageInfo?.sms, usageInfo?.maxSms)"></mat-progress-bar>
             </div>
           </div>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
index 94d6111b7c..be7d226a9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
@@ -15,48 +15,48 @@
     limitations under the License.
 
 -->
-<div class="tb-card-content" fxLayout="column">
+<div class="tb-card-content flex flex-col">
   <div class="tb-card-header">
     <div class="tb-card-title">
       <div class="tb-title" translate>widgets.version-info.title</div>
     </div>
     <a mat-button color="primary" class="tb-contact-us" href="https://thingsboard.io/docs/contact-us/" target="_blank">{{ 'widgets.version-info.contact-us' | translate }}</a>
   </div>
-  <div fxLayout="row" fxLayoutGap="8px" fxLayout.gt-md-lg="column" fxFlex>
-    <div class="tb-version-info-container" fxLayout="row" fxFlex>
-      <div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
+  <div class="flex flex-1 flex-row gap-2 gt-md-lg:flex-col">
+    <div class="tb-version-info-container flex flex-1 flex-row">
+      <div class="flex flex-1 flex-col items-stretch justify-evenly">
         <div class="tb-card-header">
           <a class="tb-version-link" [href]="updateMessage?.currentVersionReleaseNotesUrl" target="_blank">
-            <span fxHide.md-lg translate>widgets.version-info.current-version</span>
-            <span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.current</span>
+            <span class="md-lg:!hidden" translate>widgets.version-info.current-version</span>
+            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.current</span>
           </a>
         </div>
         <div class="tb-version">{{ updateMessage?.currentVersion }}</div>
-        <div fxHide.gt-md-lg style="height: 24px;">
+        <div class="gt-md-lg:!hidden" style="height: 24px;">
         </div>
       </div>
     </div>
-    <div class="tb-version-info-container" fxLayout="row" fxFlex *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
-      <div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
+    <div class="tb-version-info-container flex flex-1 flex-row" *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
+      <div class="flex flex-1 flex-col items-stretch justify-evenly">
         <div class="tb-card-header">
           <a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">
-            <span fxHide.md-lg translate>widgets.version-info.available-version</span>
-            <span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.available</span>
+            <span class="md-lg:!hidden" translate>widgets.version-info.available-version</span>
+            <span class="lt-md:!hidden gt-md-lg:!hidden" translate>widgets.version-info.available</span>
           </a>
         </div>
         <div class="tb-version">{{ updateMessage?.latestVersion }}</div>
-        <div fxHide.gt-md-lg fxLayout="row" fxLayoutAlign="end end">
+        <div class="flex flex-row items-end justify-end gt-md-lg:!hidden">
           <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
         </div>
       </div>
-      <div fxHide.lt-md fxHide.md-lg fxLayout="column" fxLayoutAlign="center">
+      <div class="flex flex-col items-stretch justify-center md-lg:!hidden lt-md:!hidden">
         <a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
       </div>
     </div>
   </div>
 </div>
 <ng-template #versionUpToDate>
-  <div class="tb-version-info-container up-to-date" fxFlex fxLayout="column" fxLayoutAlign="space-evenly center">
+  <div class="tb-version-info-container up-to-date flex flex-1 flex-col items-center justify-evenly">
     <div class="material-icons-round check-icon">check</div>
     <div class="up-to-date-text" translate>widgets.version-info.version-is-up-to-date</div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
index b24ad37ede..d858e83a47 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
@@ -17,12 +17,11 @@
 -->
 <div class="tb-json-input" tb-toast toastTarget="{{ toastTargetId }}">
   <form *ngIf="attributeUpdateFormGroup"
-        fxLayout="column"
-        class="tb-json-input__form"
+        class="tb-json-input__form flex flex-col"
         [formGroup]="attributeUpdateFormGroup"
         (ngSubmit)="save()">
-      <div fxLayout="column" fxLayoutGap="10px" fxFlex *ngIf="datasourceDetected && !errorMessage; else errorContainer">
-        <fieldset fxFlex>
+      <div class="flex flex-1 flex-col gap-2.5" *ngIf="datasourceDetected && !errorMessage; else errorContainer">
+        <fieldset class="flex-1">
           <tb-json-object-edit
             [editorStyle]="{minHeight: '100px'}"
             fillHeight="true"
@@ -33,7 +32,7 @@
             (focusout)="isFocused = false;"
           ></tb-json-object-edit>
         </fieldset>
-        <div class="tb-json-input__actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="tb-json-input__actions flex flex-row items-center justify-end gap-5">
           <button mat-button color="primary"
                   type="button"
                   [disabled]="!attributeUpdateFormGroup.dirty"
@@ -51,7 +50,7 @@
       </div>
 
     <ng-template #errorContainer>
-      <div class="tb-json-input__error" fxLayout="column" fxLayoutAlign="center center" fxFlex>
+      <div class="tb-json-input__error flex flex-1 flex-col items-center justify-center">
         {{ errorMessage | translate }}
       </div>
     </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
index 2e7e4b786c..a824b0c45d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/legend.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<table class="tb-legend" [ngClass]="isRowDirection ? 'tb-legend-row' : 'tb-legend-column'">
+<table class="tb-legend" [class.tb-legend-row]="isRowDirection" [class.tb-legend-column]="!isRowDirection">
   <thead>
   <tr class="tb-legend-header" *ngIf="!isRowDirection">
     <th colspan="2"></th>
@@ -29,11 +29,12 @@
   <tbody>
     <ng-container *ngIf="!isRowDirection">
       <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()">
-        <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
+        <td><span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span></td>
         <td class="tb-legend-label"
             (click)="toggleHideData(legendKey.dataIndex)"
             [innerHTML]="legendKey.dataKey.label | safe: 'html'"
-            [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
+            [class.tb-hidden-label]="legendKey.dataKey.hidden"
+            [class.tb-horizontal]="isHorizontal">
         </td>
         <td class="tb-legend-value" *ngIf="legendConfig.showMin === true"
             [innerHTML]="legendData.data[legendKey.dataIndex].min | safe: 'html'"></td>
@@ -47,14 +48,14 @@
             [innerHTML]="legendData.data[legendKey.dataIndex].latest | safe: 'html'"></td>
       </tr>
     </ng-container>
-    <tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
+    <tr *ngIf="isRowDirection" class="tb-legend-keys" [class.tb-row-direction]="!displayHeader">
       <td></td>
       <td *ngFor="let legendKey of legendKeys()">
-        <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
+        <span class="tb-legend-line" [style.background-color]="legendKey.dataKey.color"></span>
         <span class="tb-legend-label"
               [innerHTML]="legendKey.dataKey.label | safe: 'html'"
               (click)="toggleHideData(legendKey.dataIndex)"
-              [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
+              [class.tb-hidden-label]="legendKey.dataKey.hidden">
         </span>
       </td>
     </tr>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
index 01797502c7..25f7b1ceec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
@@ -14,7 +14,6 @@
 /// limitations under the License.
 ///
 
-import { MapProviders } from '@home/components/widget/lib/maps/map-models';
 import {
   createLabelFromDatasource,
   hashCode,
@@ -58,7 +57,7 @@ export function findAngle(startPoint: FormattedData, endPoint: FormattedData, la
 }
 
 
-export function getDefCenterPosition(position): [number, number] {
+export function getDefCenterPosition(position: string | [number, number]): [number, number] {
   if (typeof (position) === 'string') {
     const parts = position.split(',');
     if (parts.length === 2) {
@@ -258,8 +257,8 @@ export const parseWithTranslation = {
   }
 };
 
-export function functionValueCalculator(useFunction: boolean, func: (...args: any[]) => any, params = [], defaultValue: any) {
-  let res;
+export function functionValueCalculator<T>(useFunction: boolean, func: (...args: any[]) => any, params = [], defaultValue: T): T {
+  let res: T;
   if (useFunction && isDefined(func) && isFunction(func)) {
     try {
       res = func(...params);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
index 2b9e63cfeb..05b581e39c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form #addEntityForm="ngForm" [formGroup]="selectEntityFormGroup" (ngSubmit)="save()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>widgets.maps.select-entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button [matDialogClose]="null" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -37,7 +37,7 @@
     </mat-form-field>
     <div class="tb-hint" translate>widgets.maps.select-entity-hint</div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 5540c1351a..29b2768e58 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -14,10 +14,10 @@
 /// limitations under the License.
 ///
 
-import L, { FeatureGroup, LatLngBounds, LatLngTuple, Projection } from 'leaflet';
+import L, { FeatureGroup, LatLngBounds, LatLngTuple, PointExpression, Projection } from 'leaflet';
 import tinycolor from 'tinycolor2';
 import 'leaflet-providers';
-import { MarkerClusterGroup, MarkerClusterGroupOptions } from 'leaflet.markercluster/dist/leaflet.markercluster';
+import 'leaflet.markercluster';
 import '@geoman-io/leaflet-geoman-free';
 
 import {
@@ -41,7 +41,8 @@ import {
   entitiesParseName,
   isCutPolygon,
   isJSON,
-  isValidLatLng
+  isValidLatLng,
+  LabelSettings
 } from '@home/components/widget/lib/maps/maps-utils';
 import { checkLngLat, createLoadingDiv } from '@home/components/widget/lib/maps/common-maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
@@ -76,7 +77,7 @@ export default abstract class LeafletMap {
     options: WidgetUnitedMapSettings;
     bounds: L.LatLngBounds;
     datasources: FormattedData[];
-    markersCluster: MarkerClusterGroup;
+    markersCluster: L.MarkerClusterGroup;
     points: FeatureGroup;
     markersData: FormattedData[] = [];
     polygonsData: FormattedData[] = [];
@@ -99,9 +100,7 @@ export default abstract class LeafletMap {
     selectedEntity: FormattedData;
     ignoreUpdateBounds = false;
     initDragModeIgnoreUpdateBoundsSet = false;
-  // eslint-disable-next-line @typescript-eslint/dot-notation
     southWest = new L.LatLng(-Projection.SphericalMercator['MAX_LATITUDE'], -180);
-  // eslint-disable-next-line @typescript-eslint/dot-notation
     northEast = new L.LatLng(Projection.SphericalMercator['MAX_LATITUDE'], 180);
     saveLocation: (e: FormattedData, values: {[key: string]: any}) => Observable<any>;
     saveMarkerLocation: (e: FormattedData, lat?: number, lng?: number) => Observable<any>;
@@ -109,7 +108,7 @@ export default abstract class LeafletMap {
     translateService: TranslateService;
     tooltipInstances: ITooltipsterInstance[] = [];
 
-    clusteringSettings: MarkerClusterGroupOptions;
+    clusteringSettings: L.MarkerClusterGroupOptions;
 
     protected constructor(public ctx: WidgetContext,
                           public $container: HTMLElement,
@@ -185,13 +184,13 @@ export default abstract class LeafletMap {
         if (markerClusteringSettings.maxZoom && markerClusteringSettings.maxZoom >= 0 && markerClusteringSettings.maxZoom < 19) {
             this.clusteringSettings.disableClusteringAtZoom = Math.floor(markerClusteringSettings.maxZoom);
         }
-        this.markersCluster = new MarkerClusterGroup(this.clusteringSettings);
+        this.markersCluster = new L.MarkerClusterGroup(this.clusteringSettings);
       }
     }
 
     private selectEntityWithoutLocationDialog(shapes: L.PM.SUPPORTED_SHAPES): Observable<FormattedData> {
-      let entities;
-      let labelSettings;
+      let entities: FormattedData[];
+      let labelSettings: LabelSettings;
       switch (shapes) {
         case 'Polygon':
         case 'Rectangle':
@@ -244,8 +243,8 @@ export default abstract class LeafletMap {
         if (data !== null) {
           this.selectedEntity = data;
           this.toggleDrawMode(type);
-          let tooltipText;
-          let customTranslation;
+          let tooltipText: string;
+          let customTranslation: L.PM.Translations;
           switch (type) {
             case 'tbMarker':
               tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityParseName});
@@ -310,7 +309,7 @@ export default abstract class LeafletMap {
         this.map.pm.Toolbar.copyDrawControl('Marker', {
           name: 'tbMarker',
           afterClick: () => this.selectEntityWithoutLocation('tbMarker'),
-          disabled: true,
+          disabled: false,
           actions
         });
       }
@@ -336,14 +335,14 @@ export default abstract class LeafletMap {
         this.map.pm.Toolbar.copyDrawControl('Rectangle', {
           name: 'tbRectangle',
           afterClick: () => this.selectEntityWithoutLocation('tbRectangle'),
-          disabled: true,
+          disabled: false,
           actions: rectangleActions
         });
 
         this.map.pm.Toolbar.copyDrawControl('Polygon', {
           name: 'tbPolygon',
           afterClick: () => this.selectEntityWithoutLocation('tbPolygon'),
-          disabled: true,
+          disabled: false,
           actions: polygonActions
         });
       }
@@ -426,7 +425,7 @@ export default abstract class LeafletMap {
         switch (e.shape) {
           case 'tbMarker':
             // @ts-ignore
-            this.saveLocation(this.selectedEntity, this.convertToCustomFormat(e.layer.getLatLng())).subscribe(() => {});
+            this.saveLocation(this.selectedEntity, this.convertToCustomFormat(e.marker.getLatLng())).subscribe(() => {});
             break;
           case 'tbRectangle':
           case 'tbPolygon':
@@ -567,8 +566,8 @@ export default abstract class LeafletMap {
         }
         $(this.ctx.$container)
           .find('a[role="button"]:not(.leaflet-pm-action)')
-          .each((index, element) => {
-            let title;
+          .each((_index, element) => {
+            let title: string;
             if (element.title) {
               title = element.title;
               $(element).removeAttr('title');
@@ -589,7 +588,12 @@ export default abstract class LeafletMap {
                 },
                 side: 'right',
                 distance: 2,
-                trackOrigin: true
+                trackOrigin: true,
+                functionBefore: (instance, helper) => {
+                  if (helper.origin.ariaDisabled === 'true' || helper.origin.parentElement.classList.contains('active')) {
+                    return false;
+                  }
+                },
               }
             );
             this.tooltipInstances.push(tooltip.tooltipster('instance'));
@@ -623,7 +627,7 @@ export default abstract class LeafletMap {
         return this.map.getCenter();
     }
 
-    fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) {
+    fitBounds(bounds: LatLngBounds, padding?: PointExpression) {
         if (bounds.isValid()) {
             this.bounds = !!this.bounds ? this.bounds.extend(bounds) : bounds;
             if (!this.options.fitMapBounds && this.options.defaultZoomLevel) {
@@ -669,7 +673,7 @@ export default abstract class LeafletMap {
       return L.latLng(position.x, position.y) as L.LatLng;
     }
 
-    convertPosition(data: FormattedData, dsData: FormattedData[]): L.LatLng {
+    convertPosition(data: FormattedData, _dsData: FormattedData[]): L.LatLng {
       const position = this.extractPosition(data);
       if (position) {
         return this.positionToLatLng(position);
@@ -1075,7 +1079,7 @@ export default abstract class LeafletMap {
             }
         });
         const toDelete: string[] = [];
-        this.polylines.forEach((v, mKey) => {
+        this.polylines.forEach((_v, mKey) => {
           if (!keys.includes(mKey)) {
             toDelete.push(mKey);
           }
@@ -1145,7 +1149,7 @@ export default abstract class LeafletMap {
       }
     });
     const toDelete: string[] = [];
-    this.polygons.forEach((v, mKey) => {
+    this.polygons.forEach((_v, mKey) => {
       if (!keys.includes(mKey)) {
         toDelete.push(mKey);
       }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index afe07ea1ed..af8f51ffdd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
@@ -51,7 +51,7 @@ export interface CircleData {
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type MarkerImageFunction = (data: FormattedData, markerImages: string[],
                                    dsData: FormattedData[], dsIndex: number) => MarkerImageInfo;
-export type PosFunction = (origXPos, origYPos, data: FormattedData,
+export type PosFunction = (origXPos: number, origYPos: number, data: FormattedData,
                            dsData: FormattedData[], dsIndex: number, aspect: number) => { x: number, y: number };
 export type MarkerIconReadyFunction = (icon: MarkerIconInfo) => void;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
index 44ea3cef7c..761584c98f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
@@ -18,9 +18,9 @@ import LeafletMap from '@home/components/widget/lib/maps/leaflet-map';
 
 export interface MapWidgetInterface {
     map?: LeafletMap;
-    resize();
-    update();
-    destroy();
+    resize(): void;
+    update(): void;
+    destroy(): void;
 }
 
 export interface MapWidgetStaticInterface {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index c9e4d872b6..58702653e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -150,7 +150,7 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     setMarkerLocation(e: FormattedData, lat?: number, lng?: number) {
-      let markerValue;
+      let markerValue: {[p: string]: any};
       if (isDefined(lat) && isDefined(lng)) {
         const point = lat != null && lng !== null ? L.latLng(lat, lng) : null;
         markerValue = this.map.convertToCustomFormat(point);
@@ -169,7 +169,7 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     savePolygonLocation(e: FormattedData, coordinates?: Array<any>) {
-      let polygonValue;
+      let polygonValue: {[p: string]: any};
       if (isDefined(coordinates)) {
         polygonValue = this.map.convertToPolygonFormat(coordinates);
       } else {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index aa1a6e3223..125bf4b5c4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -87,14 +87,14 @@ export function isJSON(data: string): boolean {
   }
 }
 
-interface labelSettings {
+export interface LabelSettings {
   showLabel: boolean;
   useLabelFunction: boolean;
   parsedLabelFunction: GenericFunction;
   label: string;
 }
 
-export function entitiesParseName(entities: FormattedData[], labelSettings: labelSettings):  FormattedData[] {
+export function entitiesParseName(entities: FormattedData[], labelSettings: LabelSettings):  FormattedData[] {
   const div = document.createElement('div');
   for (const entity of entities) {
     if (labelSettings?.showLabel) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
index 582faf6ebd..e41928d9e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
@@ -30,7 +30,7 @@ export class Marker {
     private editing = false;
 
     leafletMarker: L.Marker;
-    labelOffset: L.LatLngTuple;
+    labelOffset: L.PointTuple;
     tooltipOffset: L.LatLngTuple;
     markerOffset: L.LatLngTuple;
     tooltip: L.Popup;
@@ -40,10 +40,10 @@ export class Marker {
               private location: L.LatLng,
               private settings: Partial<WidgetMarkersSettings>,
               private data?: FormattedData,
-              private dataSources?,
+              private dataSources?: FormattedData[],
               private onDragendListener?,
               snappable = false) {
-        this.leafletMarker = L.marker(location, {
+        this.leafletMarker = L.marker(this.location, {
           pmIgnore: !settings.draggableMarker,
           snapIgnore: !snappable,
           tbMarkerData: this.data
@@ -78,7 +78,7 @@ export class Marker {
         }
 
         if (settings.draggableMarker && onDragendListener) {
-          this.leafletMarker.on('pm:dragstart', (e) => {
+          this.leafletMarker.on('pm:dragstart', () => {
             (this.leafletMarker.dragging as any)._draggable = { _moved: true };
             (this.leafletMarker.dragging as any)._enabled = true;
             this.editing = true;
@@ -134,7 +134,7 @@ export class Marker {
         }
     }
 
-    updateMarkerColor(color) {
+    updateMarkerColor(color: tinycolor.Instance) {
         this.createDefaultMarkerIcon(color, (iconInfo) => {
             this.leafletMarker.setIcon(iconInfo.icon);
         });
@@ -179,8 +179,8 @@ export class Marker {
           loadImageWithAspect(this.map.ctx.$injector.get(ImagePipe), currentImage.url).subscribe(
                 (aspectImage) => {
                     if (aspectImage?.aspect) {
-                        let width;
-                        let height;
+                        let width: number;
+                        let height: number;
                         if (aspectImage.aspect > 1) {
                             width = currentImage.size;
                             height = currentImage.size / aspectImage.aspect;
@@ -263,7 +263,7 @@ export class Marker {
                  this.leafletMarker.addTo(map))*/
     }
 
-    extendBoundsWithMarker(bounds) {
+    extendBoundsWithMarker(bounds: L.LatLngBounds) {
         bounds.extend(this.leafletMarker.getLatLng());
     }
 
@@ -271,7 +271,7 @@ export class Marker {
         return this.leafletMarker.getLatLng();
     }
 
-    setMarkerPosition(latLng) {
+    setMarkerPosition(latLng: L.LatLngExpression) {
         this.leafletMarker.setLatLng(latLng);
     }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
index d19074ddf1..adf68b1dba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
@@ -31,7 +31,7 @@ interface GmGlobal {
 export class GoogleMap extends LeafletMap {
   private resource: ResourcesService;
 
-  constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) {
+  constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
     super(ctx, $container, options);
     this.resource = ctx.$injector.get(ResourcesService);
     this.loadGoogle(() => {
@@ -47,20 +47,20 @@ export class GoogleMap extends LeafletMap {
     }, options.gmApiKey);
   }
 
-  private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
+  private loadGoogle(callback: () => void, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
     if (gmGlobals[apiKey]) {
       callback();
     } else {
-      this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe(
-        () => {
+      this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe({
+        next: () => {
           gmGlobals[apiKey] = true;
           callback();
         },
-        (error) => {
+        error: (error) => {
           gmGlobals[apiKey] = false;
           console.error(`Google map api load failed!`, error);
         }
-      );
+      });
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
index 217796464f..8023a1b54f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts
@@ -21,7 +21,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { isDefinedAndNotNull } from '@core/utils';
 
 export class HEREMap extends LeafletMap {
-    constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) {
+    constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
         super(ctx, $container, options);
         const map = L.map($container, {
           doubleClickZoom: !this.options.disableDoubleClickZooming,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
index 1fb33352e7..8cf1822ad5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import L, { LatLngBounds, LatLngLiteral, LatLngTuple } from 'leaflet';
+import L, { LatLngBounds, LatLngLiteral, LatLngTuple, PointExpression } from 'leaflet';
 import LeafletMap from '../leaflet-map';
 import {
   CircleData,
@@ -24,10 +24,8 @@ import {
   WidgetUnitedMapSettings
 } from '../map-models';
 import { Observable, of, ReplaySubject, switchMap } from 'rxjs';
-import { catchError, map, mergeMap } from 'rxjs/operators';
-import {
-  calculateNewPointCoordinate, loadImageWithAspect
-} from '@home/components/widget/lib/maps/common-maps-utils';
+import { catchError } from 'rxjs/operators';
+import { calculateNewPointCoordinate, loadImageWithAspect } from '@home/components/widget/lib/maps/common-maps-utils';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { DataSet, DatasourceType, FormattedData, widgetType } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -135,7 +133,7 @@ export class ImageMap extends LeafletMap {
             }
           }
         ),
-        catchError((e) => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl))
+        catchError(() => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl))
       );
     }
 
@@ -158,13 +156,13 @@ export class ImageMap extends LeafletMap {
                   return this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl);
                 }
               }),
-            catchError((e) => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl))
+            catchError(() => this.imageFromUrl(defaultImageMapProviderSettings.mapImageUrl))
           );
         })
       );
     }
 
-    updateBounds(updateImage?: boolean, lastCenterPos?) {
+    updateBounds(updateImage?: boolean, lastCenterPos?: L.Point) {
         const w = this.width;
         const h = this.height;
         this.southWest = this.pointToLatLng(0, h);
@@ -233,7 +231,7 @@ export class ImageMap extends LeafletMap {
       }
     }
 
-    fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { }
+    fitBounds(_bounds: LatLngBounds, _padding?: PointExpression) { }
 
     initMap(updateImage?: boolean) {
       if (!this.map && this.aspect > 0) {
@@ -271,7 +269,7 @@ export class ImageMap extends LeafletMap {
         position.y * this.height);
     }
 
-    convertPosition(data, dsData: FormattedData[]): L.LatLng {
+    convertPosition(data: FormattedData, dsData: FormattedData[]): L.LatLng {
       const position = this.extractPosition(data);
       if (position) {
         const converted = this.posFunction(position.x, position.y, data, dsData, data.dsIndex, this.aspect) || {x: 0, y: 0};
@@ -296,7 +294,7 @@ export class ImageMap extends LeafletMap {
       }).filter(el => !!el);
     }
 
-    pointToLatLng(x, y): L.LatLng {
+    pointToLatLng(x: number, y: number): L.LatLng {
         return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);
     }
 
@@ -304,7 +302,7 @@ export class ImageMap extends LeafletMap {
         return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1);
     }
 
-    convertToCustomFormat(position: L.LatLng, offset = 0, width = this.width, height = this.height): {[key: string]: any} {
+    convertToCustomFormat(position: L.LatLng, _offset = 0, width = this.width, height = this.height): {[key: string]: any} {
       if (!position) {
         return {
           [this.options.xPosKeyName]: null,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
index 9c2a85e7c7..5df624f5ea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
@@ -20,17 +20,17 @@ import { DEFAULT_ZOOM_LEVEL, WidgetUnitedMapSettings } from '../map-models';
 import { WidgetContext } from '@home/models/widget-component.models';
 
 export class OpenStreetMap extends LeafletMap {
-    constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) {
+    constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
         super(ctx, $container, options);
         const map =  L.map($container, {
           doubleClickZoom: !this.options.disableDoubleClickZooming,
           zoomControl: !this.options.disableZoomControl
         }).setView(options?.parsedDefaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
-        let tileLayer;
+        let tileLayer: L.TileLayer;
         if (options.useCustomProvider) {
           tileLayer = L.tileLayer(options.customProviderTileUrl);
         } else {
-          tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'OpenStreetMap.Mapnik');
+          tileLayer = L.tileLayer.provider(options.mapProvider || 'OpenStreetMap.Mapnik');
         }
         tileLayer.addTo(map);
         super.setMap(map);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
index 12d5c99557..6ff7f9012b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts
@@ -21,9 +21,9 @@ import { DEFAULT_ZOOM_LEVEL, WidgetUnitedMapSettings } from '../map-models';
 import { WidgetContext } from '@home/models/widget-component.models';
 
 export class TencentMap extends LeafletMap {
-  constructor(ctx: WidgetContext, $container, options: WidgetUnitedMapSettings) {
+  constructor(ctx: WidgetContext, $container: HTMLElement, options: WidgetUnitedMapSettings) {
     super(ctx, $container, options);
-    const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
+    const txUrl = 'https://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0';
     const map = L.map($container, {
       doubleClickZoom: !this.options.disableDoubleClickZooming,
       zoomControl: !this.options.disableZoomControl
@@ -31,7 +31,7 @@ export class TencentMap extends LeafletMap {
     const txLayer = L.tileLayer(txUrl, {
       subdomains: '0123',
       tms: true,
-      attribution: '&copy;2021 Tencent - GS(2020)2236号- Data&copy; NavInfo'
+      attribution: '&copy;2024 Tencent - GS(2023)1171号'
     }).addTo(map);
     txLayer.addTo(map);
     super.setMap(map);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts
index 39270125b6..848b727e61 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts
@@ -24,7 +24,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Observable, Subject } from 'rxjs';
 import { MINUTE } from '@shared/models/time/time.models';
-import { isDefinedAndNotNull, mergeDeep } from '@core/utils';
+import { isDefinedAndNotNull, mergeDeep, unwrapModule } from '@core/utils';
 import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -157,7 +157,7 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
 
   private updateQRCode(link: string) {
     import('qrcode').then((QRCode) => {
-      QRCode.toString(link, (err, string) => {
+      unwrapModule(QRCode).toString(link, (err, string) => {
         this.qrCodeSVG = string;
         this.cd.markForCheck();
       })
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 7f10c4d211..51d4ec22b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -20,7 +20,7 @@
       tb-toast toastTarget="{{ toastTargetId }}"
       (ngSubmit)="saveForm()" novalidate autocomplete="off">
   <div class="tb-multiple-input-container" *ngIf="entityDetected && isAllParametersValid">
-    <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
+    <fieldset *ngFor="let source of sources" [class.fields-group]="settings.showGroupTitle">
       <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
       </legend>
       <div class="tb-multiple-input-layout"
@@ -198,10 +198,10 @@
     </button>
   </div>
   <div class="tb-multiple-input--errors-container" *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
-    <div class="tb-multiple-input--errors-container__error" [fxHide]="entityDetected">
+    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="entityDetected">
       {{ 'widgets.input-widgets.no-entity-selected' | translate }}
     </div>
-    <div class="tb-multiple-input--errors-container__error" [fxShow]="entityDetected && !isAllParametersValid">
+    <div class="tb-multiple-input--errors-container__error" [class.!hidden]="!entityDetected || isAllParametersValid">
       {{ 'widgets.input-widgets.not-allowed-entity' | translate }}
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index 02f79f0f3f..7a80f4904a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -33,7 +33,7 @@ import {
   isUndefined
 } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';
-import * as _moment from 'moment';
+import _moment from 'moment';
 import { UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { RequestConfig } from '@core/http/http-utils';
 import { AttributeService } from '@core/http/attribute.service';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
index fb90c12bd5..5a64bdaf62 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/photo-camera-input.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxLayoutAlign="center center" class="tb-web-camera" tb-fullscreen [fullscreen]="isShowCamera">
+<div class="tb-web-camera flex flex-col items-center justify-center" tb-fullscreen [fullscreen]="isShowCamera">
   <div *ngIf="isEntityDetected && dataKeyDetected && isCameraSupport && isProtocolHttps" class="image-container">
-    <div [fxShow]="!isShowCamera" fxLayout="column" fxLayoutAlign="space-between center" fxFlexFill>
-      <div class="tb-web-camera__last-photo" fxFlex>
-        <span [fxShow]="!lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
-        <img [fxShow]="lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
+    <div [class.!hidden]="isShowCamera" class="flex size-full flex-col items-center justify-between">
+      <div class="tb-web-camera__last-photo flex-1">
+        <span [class.!hidden]="lastPhoto" class="tb-web-camera__last-photo_text" translate>widgets.input-widgets.no-image</span>
+        <img [class.!hidden]="!lastPhoto" class="tb-web-camera__last-photo_img" [src]="lastPhoto" alt="last photo"/>
       </div>
       <button mat-raised-button color="primary" (click)="takePhoto()" *ngIf="!textMessage">
         {{ "widgets.input-widgets.take-photo" | translate }}
       </button>
     </div>
-    <div [fxShow]="isShowCamera" fxLayout="column" fxLayoutAlign="center center" class="camera-container">
-      <div class="camera" [fxShow]="!isPreviewPhoto">
+    <div [class.!hidden]="!isShowCamera" class="camera-container flex flex-col items-center justify-center">
+      <div class="camera" [class.!hidden]="isPreviewPhoto">
         <video autoplay muted playsinline class="camera-stream" #videoStream></video>
-        <div class="camera-controls" fxLayout="row wrap" fxLayoutAlign="space-between end">
-          <div fxFlex></div>
+        <div class="camera-controls flex flex-row flex-wrap items-end justify-between">
+          <div class="flex-1"></div>
           <button mat-mini-fab color="primary" (click)="switchWebCamera()" [disabled]="singleDevice">
             <mat-icon>switch_camera</mat-icon>
           </button>
@@ -40,21 +40,21 @@
           <button mat-mini-fab color="primary" (click)="closeCamera()">
             <mat-icon>close</mat-icon>
           </button>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </div>
-      <div class="camera" [fxShow]="isPreviewPhoto">
+      <div class="camera" [class.!hidden]="!isPreviewPhoto">
         <img alt="preview photo" class="camera-stream" [src]="previewPhoto">
         <canvas #canvas style="display:none;"></canvas>
-        <div class="camera-controls" fxLayout="row" fxLayoutAlign="space-between end">
-          <div fxFlex></div>
+        <div class="camera-controls flex flex-row items-end justify-between">
+          <div class="flex-1"></div>
           <button mat-fab color="primary" [disabled]="updatePhoto" (click)="cancelPhoto()">
             <mat-icon>close</mat-icon>
           </button>
           <button mat-fab color="accent" [disabled]="updatePhoto" (click)="savePhoto()">
             <mat-icon>check</mat-icon>
           </button>
-          <div fxFlex></div>
+          <div class="flex-1"></div>
         </div>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
index d60b36a5dc..520b160265 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" fxLayoutAlign="center center" style="width: 100%; height: 100%;">
-  <canvas fxFlex #canvas [ngStyle]="{display: qrCodeText && !invalidQrCodeText ? 'block' : 'none'}"></canvas>
+<div class="flex size-full flex-col items-center justify-center">
+  <canvas class="flex-1" #canvas [class.!hidden]="!qrCodeText || invalidQrCodeText"></canvas>
   <div *ngIf="!qrCodeText && !invalidQrCodeText" style="text-align: center" translate>entity.no-data</div>
   <div *ngIf="invalidQrCodeText" style="text-align: center" translate>widgets.invalid-qr-code-text</div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts
index d8d245eee8..bec9ea32aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts
@@ -28,7 +28,7 @@ import {
   isNumber,
   isObject,
   parseFunction,
-  safeExecute
+  safeExecute, unwrapModule
 } from '@core/utils';
 
 interface QrCodeWidgetSettings {
@@ -124,7 +124,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
   private updateCanvas() {
     if (this.viewInited) {
       import('qrcode').then((QRCode) => {
-        QRCode.toCanvas(this.canvasRef.nativeElement, this.qrCodeText);
+        unwrapModule(QRCode).toCanvas(this.canvasRef.nativeElement, this.qrCodeText);
         this.canvasRef.nativeElement.style.width = 'auto';
         this.canvasRef.nativeElement.style.height = 'auto';
       });
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
index 1276e7d5e6..976b2ebc76 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div #knobContainer class="tb-knob" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}">
-  <div fxFlex fxLayout="column" fxLayoutAlign="center center">
+<div #knobContainer class="tb-knob flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+  <div class="flex flex-1 flex-col items-center justify-center">
     <div #knob class="knob">
-      <div #knobValueContainer class="value-container" fxLayout="row" fxLayoutAlign="center center">
+      <div #knobValueContainer class="value-container flex flex-row items-center justify-center">
         <span #knobValue class="knob-value">{{ value }}</span>
       </div>
       <div class="canvas-background"></div>
@@ -27,16 +27,15 @@
         <div #knobTopPointer class="top-pointer"></div>
       </div>
       <div class="top"></div>
-      <div #knobErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-           fxLayout="row" fxLayoutAlign="center center">
+      <div #knobErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
         <span #knobError class="knob-error" [innerHTML]="error"></span>
       </div>
-      <div #knobTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center">
+      <div #knobTitleContainer class="title-container flex flex-row items-center justify-center">
         <span #knobTitle class="knob-title">{{ title }}</span>
       </div>
-      <div #knobMinmaxContainer class="minmax-container" fxLayout="row" fxLayoutAlign="start center">
+      <div #knobMinmaxContainer class="minmax-container flex flex-row items-center justify-start">
         <span class="minmax-label">min</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <span class="minmax-label">max</span>
       </div>
       <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
index ec5c8a6942..b14bda6244 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/led-indicator.component.html
@@ -15,17 +15,20 @@
     limitations under the License.
 
 -->
-<div class="tb-led-indicator" fxLayout="column">
-  <div fxFlex="20" #ledTitleContainer class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+<div class="tb-led-indicator flex flex-col">
+  <div #ledTitleContainer class="title-container flex max-h-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #ledTitle class="led-title">{{title}}</span>
   </div>
-  <div fxFlex="{{showTitle ? 80 : 100}}"
-       [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" #ledContainer id="led-container" fxLayout="column" fxLayoutAlign="center center">
+  <div class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-h-80%': showTitle,
+          'max-h-100%': !showTitle
+       }"
+       [style.padding-top]="showTitle ? '5px': '10px'" #ledContainer id="led-container">
     <div #led class="led">
     </div>
   </div>
-  <div #ledErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+  <div #ledErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #ledError class="led-error">{{ error }}</span>
   </div>
   <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index 716513df1a..90496180d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -30,13 +30,13 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content class="add-dialog">
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayoutGap="6px">
-        <mat-slide-toggle fxFlex class="mat-block" formControlName="oneWayElseTwoWay">
+      <div class="flex flex-row gap-1.5">
+        <mat-slide-toggle class="mat-block flex-1" formControlName="oneWayElseTwoWay">
           {{ rpcMessageTypeText }}
         </mat-slide-toggle>
       </div>
-      <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
           <mat-error *ngIf="this.persistentFormGroup.get('method').hasError('required')">
@@ -46,7 +46,7 @@
             {{'widgets.persistent-table.white-space-error' | translate}}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput type="number" formControlName="retries">
         </mat-form-field>
@@ -72,15 +72,15 @@
     </fieldset>
   </div>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()">
       {{ 'action.close' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button mat-raised-button
               color="primary"
               type="submit"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index ffe1560c76..6f32ec4cb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="persistentFormGroup" style="min-width: 480px;">
   <mat-toolbar color="primary">
     <h2>{{ persistentFormGroup.get('rpcId').value }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -30,31 +30,32 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.created-time</mat-label>
           <input matInput formControlName="createdTime" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.expiration-time</mat-label>
           <input matInput formControlName="expirationTime" readonly>
         </mat-form-field>
       </div>
-      <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="6px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.message-type</mat-label>
           <input matInput formControlName="messageType" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.status</mat-label>
           <input matInput formControlName="status" readonly
-                 [ngStyle]="{ fontWeight: 'bold', color: rpcStatusColorsMap.get(data.persistentRequest.status) }">
+                 style="font-weight: bold;"
+                 [style.color]="rpcStatusColorsMap.get(data.persistentRequest.status)">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" readonly>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block"
+        <mat-form-field class="mat-block flex-1"
                         *ngIf="persistentFormGroup.get('retries').value">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput formControlName="retries" readonly>
@@ -96,7 +97,7 @@
       </mat-accordion>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-raised-button
             *ngIf="allowDelete"
             color="primary"
@@ -105,8 +106,8 @@
             [disabled]="(isLoading$ | async)">
       {{ 'widgets.persistent-table.delete' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayout="row" fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button mat-button color="primary"
               type="button"
               [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
index 1a8f576b3c..c1e853c555 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="mat-content mat-padding" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
-  <mat-form-field fxFlex class="mat-block" floatLabel="always">
+<form class="mat-content mat-padding flex flex-col" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
+  <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.persistent-table.rpc-status-list</mat-label>
     <mat-select formControlName="rpcStatus"
                 placeholder="{{ rpcSearchPlaceholder }}">
@@ -28,7 +28,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <div class="tb-panel-actions flex flex-row items-center justify-end">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
index a4e7588d96..18aca6ac20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <div fxFlex class="table-container">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="persistentDatasource"
              matSort [matSortActive]="pageLink.sortOrder.property"
              [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
@@ -50,7 +50,8 @@
             {{ 'widgets.persistent-table.status' | translate }}
           </mat-header-cell>
           <mat-cell *matCellDef="let column"
-                    [ngStyle]="{fontWeight: 'bold', color: rpcStatusColor.get((column.status))}">
+                    style="font-weight: bold;"
+                    [style.color]="rpcStatusColor.get(column.status)">
             {{ rpcStatusTranslation.get(column.status) | translate }}
           </mat-cell>
         </ng-container>
@@ -74,7 +75,7 @@
           <mat-header-cell *matHeaderCellDef>
           </mat-header-cell>
           <mat-cell *matCellDef="let column">
-            <div fxHide fxShow.gt-md fxLayout="row" fxLayoutAlign="end">
+            <div class="flex flex-row items-stretch justify-end lt-lg:!hidden">
               <ng-container *ngFor="let actionDescriptor of actionCellButtonAction">
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ actionDescriptor.displayName }}"
@@ -84,7 +85,7 @@
                 </button>
               </ng-container>
             </div>
-            <div fxHide fxShow.lt-lg *ngIf="actionCellButtonAction.length">
+            <div class="gt-md:!hidden" *ngIf="actionCellButtonAction.length">
               <button mat-icon-button
                       (click)="$event.stopPropagation(); ctx.detectChanges();"
                       [matMenuTriggerFor]="cellActionsMenu">
@@ -105,14 +106,12 @@
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
         <mat-row *matRowDef="let column; columns: displayedColumns"
-                 [fxShow]="!persistentDatasource.dataLoading"></mat-row>
+                 [class.!hidden]="persistentDatasource.dataLoading"></mat-row>
       </table>
-      <span [fxShow]="(persistentDatasource.isEmpty() | async) && !persistentDatasource.dataLoading && hasData"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="persistentDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(persistentDatasource.isEmpty() | async) === false || persistentDatasource.dataLoading || !hasData"
+            class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!persistentDatasource.dataLoading"
+            class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
   </div>
   <mat-divider *ngIf="displayPagination"></mat-divider>
   <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
index 9890db321a..ba12957779 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts
@@ -443,6 +443,8 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
     });
     this.ctx.detectChanges();
   }
+
+  protected readonly rpcStatusColorsMap = rpcStatusColors;
 }
 
 class PersistentDatasource implements DataSource<PersistentRpcData> {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
index 4f618177a7..f03ad1d4f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/round-switch.component.html
@@ -15,11 +15,16 @@
     limitations under the License.
 
 -->
-<div class="tb-round-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}">
-  <div #switchTitleContainer fxFlex="20" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+<div class="tb-round-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
+  <div #switchTitleContainer class="title-container flex max-h-20% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
-  <div #switchContainer fxFlex="{{showTitle ? 80 : 100}}" [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}" id="switch-container" fxLayout="column" fxLayoutAlign="center center">
+  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-h-80%': showTitle,
+          'max-h-100%': !showTitle
+       }"
+       [style.padding-top]="showTitle ? '5px': '10px'" id="switch-container">
     <div #switch class="switch">
       <input #onoff type="checkbox" id="{{checkboxId}}" name="onoff" />
       <div class="back">
@@ -30,8 +35,7 @@
       </div>
     </div>
   </div>
-  <div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
   <div #textMeasure id="text-measure"></div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
index f9de708700..db09786aa9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.html
@@ -15,30 +15,34 @@
     limitations under the License.
 
 -->
-<div class="tb-switch" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}" *ngIf="switchType === 'switch'; else slideToggle">
-  <div #switchErrorContainer class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
-       fxLayout="row" fxLayoutAlign="center center">
+<div class="tb-switch flex flex-col" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" *ngIf="switchType === 'switch'; else slideToggle">
+  <div #switchErrorContainer class="error-container flex flex-row items-center justify-center" [style.background]="error?.length ? 'rgba(255,255,255,0.25)' : 'none'">
     <span #switchError class="switch-error">{{ error }}</span>
   </div>
-  <div #switchTitleContainer fxFlex="30" class="title-container" fxLayout="row" fxLayoutAlign="center center" [fxShow]="showTitle">
+  <div #switchTitleContainer class="title-container flex max-h-30% flex-full flex-row items-center justify-center" [class.!hidden]="!showTitle">
     <span #switchTitle class="switch-title">{{title}}</span>
   </div>
-  <div #switchContainer fxFlex="{{showTitle ? 70 : 100}}" id="switch-container" fxLayout="column" fxLayoutAlign="center center">
+  <div #switchContainer class="flex flex-full flex-col items-center justify-center"
+       [class]="{
+          'max-h-70%': showTitle,
+          'max-h-100%': !showTitle
+       }"
+       id="switch-container">
     <div #switch class="switch">
       <mat-slide-toggle #matSlideToggle [(ngModel)]="value" (change)="onValue()">
       </mat-slide-toggle>
     </div>
-    <div #onoffContainer class="onoff-container" fxLayout="row" fxLayoutAlign="center start" [fxShow]="showOnOffLabels">
-      <span #offLabel fxFlex class="off-label" [fxShow]="!value" style="text-align: center;">OFF</span>
-      <span fxFlex [fxShow]="value"></span>
-      <span #onLabel fxFlex class="on-label" [fxShow]="value" style="text-align: center;">ON</span>
-      <span fxFlex [fxShow]="!value"></span>
+    <div #onoffContainer class="onoff-container flex flex-row items-start justify-center" [class.!hidden]="!showOnOffLabels">
+      <span #offLabel class="off-label flex-1" [class.!hidden]="value" style="text-align: center;">OFF</span>
+      <span class="flex-1" [class.!hidden]="!value"></span>
+      <span #onLabel class="on-label flex-1" [class.!hidden]="!value" style="text-align: center;">ON</span>
+      <span class="flex-1" [class.!hidden]="value"></span>
     </div>
   </div>
   <div #textMeasure id="text-measure"></div>
 </div>
 <ng-template #slideToggle>
-  <div class="tb-absolute-fill" fxLayout="column" [ngStyle]="{'pointerEvents': ctx.isEdit ? 'none' : 'all'}" fxLayoutAlign="center center">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'">
     <div>
       <mat-slide-toggle [disabled]="executingUpdateValue" [labelPosition]="labelPosition" [color]="sliderColor" [(ngModel)]="value" (change)="onValue()">{{title}}</mat-slide-toggle>
       <mat-progress-bar style="height: 2px;" [color]="sliderColor" mode="indeterminate" *ngIf="executingUpdateValue"></mat-progress-bar>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
index 007eb37929..7b054eae80 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/switch.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { UtilsService } from '@core/services/utils.service';
@@ -55,11 +55,11 @@ interface SwitchSettings {
   templateUrl: './switch.component.html',
   styleUrls: ['./switch.component.scss']
 })
-export class SwitchComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy {
+export class SwitchComponent extends PageComponent implements AfterViewInit, OnDestroy {
 
   @ViewChild('switch', {static: false}) switchElementRef: ElementRef<HTMLElement>;
   @ViewChild('switchContainer', {static: false}) switchContainerRef: ElementRef<HTMLElement>;
-  @ViewChild('matSlideToggle', {static: false}) matSlideToggleRef: MatSlideToggle;
+  @ViewChild('matSlideToggle', {static: false, read: ElementRef}) matSlideToggleRef: ElementRef<HTMLElement>;
   @ViewChild('onoffContainer', {static: false}) onoffContainerRef: ElementRef<HTMLElement>;
   @ViewChild('onLabel', {static: false}) onLabelRef: ElementRef<HTMLElement>;
   @ViewChild('offLabel', {static: false}) offLabelRef: ElementRef<HTMLElement>;
@@ -119,14 +119,11 @@ export class SwitchComponent extends PageComponent implements OnInit, AfterViewI
     super(store);
   }
 
-  ngOnInit(): void {
-  }
-
   ngAfterViewInit() {
     if (this.switchType === 'switch') {
       this.switchElement = $(this.switchElementRef.nativeElement);
       this.switchContainer = $(this.switchContainerRef.nativeElement);
-      this.matSlideToggle = $(this.matSlideToggleRef._elementRef.nativeElement);
+      this.matSlideToggle = $(this.matSlideToggleRef.nativeElement);
       this.onoffContainer = $(this.onoffContainerRef.nativeElement);
       this.onLabel = $(this.onLabelRef.nativeElement);
       this.offLabel = $(this.offLabelRef.nativeElement);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
index f15e7a30c7..6d3e9fde82 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
@@ -220,8 +220,8 @@ export interface ScadaSymbolMetadata {
 
 export const emptyMetadata = (width?: number, height?: number): ScadaSymbolMetadata => ({
   title: '',
-  widgetSizeX: width ? width/100 : 3,
-  widgetSizeY: height ? height/100 : 3,
+  widgetSizeX: width ? Math.max(Math.round(width/100), 1) : 3,
+  widgetSizeY: height ? Math.max(Math.round(height/100), 1) : 3,
   tags: [],
   behavior: [],
   properties: []
@@ -1168,6 +1168,22 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation {
               private element: Element,
               duration = 1000)  {
     this._duration = duration;
+    this.fixPatternAnimationForChrome();
+  }
+
+  private fixPatternAnimationForChrome(): void {
+    try {
+      const userAgent = window.navigator.userAgent;
+      if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) > 0) {
+        if (this.svgShape.defs().findOne('pattern')  && !this.svgShape.defs().findOne('pattern.empty-animation')) {
+          this.svgShape.defs().add(SVG('<pattern class="empty-animation"></pattern>'));
+          this.svgShape.style()
+            .rule('.' + 'empty-animation',
+              {'animation-name': 'empty-animation', 'animation-duration': '1000ms', 'animation-iteration-count': 'infinite'})
+            .addText('@keyframes empty-animation {0% {<!--opacity:1;-->}100% {<!--opacity:1;-->}}');
+        }
+      }
+    } catch (e) {}
   }
 
   public running(): boolean {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
index 45c2b5f2ee..5b5dc4fa49 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.column-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.custom-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="customTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -62,14 +62,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -86,14 +85,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index 9ec4212aa1..ef51468feb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.alarms-table-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="alarmsTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -73,7 +73,7 @@
         {{ 'widgets.table.allow-alarms-clear' | translate }}
       </mat-slide-toggle>
     </div>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -84,7 +84,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.default-sort-order</mat-label>
       <input matInput formControlName="defaultSortOrder">
     </mat-form-field>
@@ -104,14 +104,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
index b5c7c63650..5d268e4d2f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.activated' | translate }}"
@@ -31,7 +31,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
index 086a29e9c1..4cc7839799 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -29,7 +29,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
index 8f111ea5d8..45f4f32c43 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -92,15 +92,15 @@
     <div class="tb-form-panel-title" translate>widgets.power-button.button</div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-on-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOn">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOn">
@@ -110,15 +110,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.power-off-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorOff">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorOff">
@@ -128,15 +128,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.power-button.disabled-colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.power-button.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
index d96ea2d9c8..4a5ebee7da 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -65,10 +65,9 @@
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div class="tb-form-panel stroked tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetSettingsForm.get('autoScale').value" disabled>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="autoScale" (click)="$event.stopPropagation()">
               {{ 'widgets.toggle-button.auto-scale' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -100,7 +99,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div>
       <tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}">
         <tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option>
@@ -108,14 +107,14 @@
       </tb-toggle-select>
     </div>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'checked'"
+        [class.!hidden]="buttonAppearanceType !== 'checked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value"
         formControlName="checkedAppearance">
     </tb-widget-button-appearance>
     <tb-widget-button-appearance
-        [fxShow]="buttonAppearanceType === 'unchecked'"
+        [class.!hidden]="buttonAppearanceType !== 'unchecked'"
         withBorderRadius
         [withAutoScale]="false"
         [autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
index 8c8c3e9793..7848fcc48c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-widget-settings.component.html
@@ -27,7 +27,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showSubtitle">
         {{ 'widgets.aggregated-value-card.subtitle' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="subtitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -45,8 +45,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
index 4374534bae..1389b4d9fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="dashboardStateWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="dashboardStateWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.dashboard-state.dashboard-state-settings</legend>
     <mat-form-field class="mat-block">
@@ -39,7 +39,7 @@
     </mat-form-field>
     <mat-expansion-panel class="tb-settings">
       <mat-expansion-panel-header>
-        <mat-panel-description fxLayoutAlign="end" translate>
+        <mat-panel-description class="flex items-stretch justify-end" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -47,7 +47,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="defaultAutofillLayout">
           {{ 'widgets.dashboard-state.autofill-state-layout' | translate }}
         </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.dashboard-state.default-margin</mat-label>
           <input matInput type="number" min="0" step="1" formControlName="defaultMargin">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
index 84efa19554..19dd86b288 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="edgeQuickOverviewWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="edgeQuickOverviewWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="enableDefaultTitle">
     {{ 'widgets.edge.display-default-title' | translate }}
   </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
index bc4d6bac86..7e8cfab732 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="htmlCardWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="htmlCardWidgetSettingsForm" class="flex flex-col">
   <tb-html formControlName="cardHtml" required
           label="{{ 'widgets.html-card.html' | translate }}">
   </tb-html>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
index 5f7e4e6359..333f9a0ec9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-card-widget-settings.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-card.label</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelCardWidgetSettingsForm.get('iconColor').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
index b10d497f6c..4ce3d3f705 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.html
@@ -27,7 +27,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.label-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -42,11 +42,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.label-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="labelValueCardWidgetSettingsForm.get('iconColor').value?.color"
@@ -58,7 +58,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.label-value-card.value</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index 0654e01c84..cb91304d4f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="label-widget-label" fxFlex [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="label-widget-label flex-1" [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ labelWidgetLabelFormGroup.get('pattern').value }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeLabel.emit()"
@@ -34,9 +34,9 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
+      <section class="tb-widget-settings flex flex-col">
         <mat-form-field style="padding-bottom: 16px;">
           <mat-label translate>widgets.label-widget.label-pattern</mat-label>
           <input required matInput formControlName="pattern">
@@ -47,12 +47,12 @@
         </mat-form-field>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.label-widget.label-position</legend>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <mat-form-field fxFlex>
+          <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.label-widget.x-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="x">
             </mat-form-field>
-            <mat-form-field fxFlex>
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.label-widget.y-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="y">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
index 732cadab39..5efef3f877 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="labelWidgetSettingsForm">
   <tb-gallery-image-input required
                   label="{{ 'widgets.label-widget.background-image' | translate }}"
                   formControlName="backgroundImageUrl">
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.label-widget.labels</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="labelDrop($event)">
-        <div cdkDrag class="tb-draggable" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
+        <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl;
                  let $index = index; last as isLast;"
-             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             [class.pb-2]="!isLast">
           <tb-label-widget-label [formControl]="labelControl"
                                  [expanded]="labelControl.new"
                                  (removeLabel)="removeLabel($index)">
@@ -35,8 +35,8 @@
         </div>
       </div>
       <div *ngIf="!labelsFormArray().controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">widgets.label-widget.no-labels</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">widgets.label-widget.no-labels</span>
       </div>
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
index e33529a179..d35462a629 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="markdownWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="markdownWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="useMarkdownTextFunction">
     {{ 'widgets.markdown.use-markdown-text-function' | translate }}
   </mat-slide-toggle>
-  <tb-js-func [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
+  <tb-js-func [class.!hidden]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
               formControlName="markdownTextFunction"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['data', 'ctx']"
               functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
               helpId="widget/lib/markdown/markdown_text_fn">
   </tb-js-func>
-  <tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
+  <tb-markdown-editor [class.!hidden]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
                       formControlName="markdownTextPattern"
                       label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}"
                       helpId="widget/editor/widget_js_markdown_pattern">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
index f9543b11cf..43e2747197 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showValue">
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
@@ -52,7 +52,7 @@
     </div>
     <div class="tb-form-row space-between  column-xs">
       <div>{{ 'widgets.progress-bar.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.progress-bar.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -67,7 +67,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.progress-bar.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
index 407ad5fffe..65164d564b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="qrCodeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="qrCodeWidgetSettingsForm">
   <mat-slide-toggle class="mat-slide" formControlName="useQrCodeTextFunction">
     {{ 'widgets.qr-code.use-qr-code-text-function' | translate }}
   </mat-slide-toggle>
-  <mat-form-field [fxShow]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
+  <mat-form-field [class.!hidden]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
     <mat-label translate>widgets.qr-code.qr-code-text-pattern</mat-label>
     <input required matInput formControlName="qrCodeTextPattern">
     <mat-hint>{{ 'widgets.qr-code.qr-code-text-pattern-hint' | translate }}</mat-hint>
@@ -28,7 +28,7 @@
     </mat-error>
   </mat-form-field>
   <tb-js-func required
-              [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
+              [class.!hidden]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
               formControlName="qrCodeTextFunction"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['data']"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
index d4eb5b3abc..c77e8bd8d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
@@ -50,14 +50,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -74,14 +73,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
index aaa42a90ff..330bffbc86 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
@@ -21,13 +21,13 @@
     <mat-slide-toggle class="mat-slide" formControlName="show">
       {{ 'widgets.table.show-latest-data-column' | translate }}
     </mat-slide-toggle>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div translate>widgets.table.latest-data-column-order</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
         <input matInput formControlName="order" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div>{{ 'widgets.table.default-column-visibility' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="defaultColumnVisibility">
@@ -43,7 +43,7 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
+    <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-row space-between">
       <div>{{ 'widgets.table.column-selection-to-display' | translate }}</div>
       <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="columnSelectionToDisplay">
@@ -57,16 +57,15 @@
       </mat-form-field>
     </div>
   </div>
-  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
+  <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -81,16 +80,15 @@
       </ng-template>
     </mat-expansion-panel>
   </div>
-  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
+  <div [class.!hidden]="!timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
index c9affa9b5c..b75a2bf40e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@@ -35,7 +35,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
         {{ 'widgets.table.display-timestamp' | translate }}
       </mat-slide-toggle>
-      <tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
+      <tb-date-format-select class="flex-1" excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
     </div>
 
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
@@ -44,7 +44,7 @@
     <mat-slide-toggle class="mat-slide"  formControlName="showCellActionsMenu">
       {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
     </mat-slide-toggle>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -80,14 +80,13 @@
       {{ 'widgets.table.hide-empty-lines' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
index f59c85b3ca..e5e726ca5f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/unread-notification-widget-settings.component.html
@@ -48,7 +48,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.notification.counter-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="counterValueFont"
                           clearButton
                           [previewText]="countPreviewFn"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index 5077c93d8e..518007a852 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.value-card.label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="labelFont"
                           [previewText]="label">
         </tb-font-settings>
@@ -47,15 +47,15 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="iconEnabled" class="tb-form-row">
+    <div [class.!hidden]="!iconEnabled" class="tb-form-row">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.value-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="valueCardWidgetSettingsForm.get('iconColor').value?.color"
@@ -67,7 +67,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.value-card.value</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
         </tb-font-settings>
@@ -75,12 +75,12 @@
         </tb-color-settings>
       </div>
     </div>
-    <div [fxShow]="dateEnabled" class="tb-form-row column-xs">
+    <div [class.!hidden]="!dateEnabled" class="tb-form-row column-xs">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.value-card.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
index 661761fb3b..52d4f1ea8a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.html
@@ -39,7 +39,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showValue">
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           [autoScale]="valueChartCardWidgetSettingsForm.get('autoScale').value"
                           [previewText]="valuePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
index e7ca744685..1322f29f53 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.html
@@ -32,7 +32,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarLabel">
           {{ 'widgets.bar-chart.label-on-bar' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="barLabelFont"
                             disabledLineHeight
                             forceSizeUnit="px"
@@ -48,7 +48,7 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBarValue">
           {{ 'widgets.bar-chart.value-on-bar' | translate }}
         </mat-slide-toggle>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="barValueFont"
                             disabledLineHeight
                             forceSizeUnit="px"
@@ -115,10 +115,9 @@
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showLegend').value" [disabled]="!barChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -136,7 +135,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 previewText="20 - 30">
               </tb-font-settings>
@@ -151,10 +150,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="barChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!barChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -162,7 +160,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -175,7 +173,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -190,8 +188,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: barChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
index 3922858711..88a8508887 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="chartWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="chartWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-slide-toggle formControlName="showTooltip" class="slide-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
index f8c10fad3d..2f943e67dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="doughnutChartWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="doughnutChartWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-slide-toggle formControlName="showTooltip" class="slide-block">
@@ -24,12 +24,12 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.border-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.border-width</mat-label>
         <input matInput type="number" min="0" formControlName="borderWidth">
       </mat-form-field>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
                       formControlName="borderColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.chart.border-color' | translate }}" openOnInput colorClearButton>
@@ -39,20 +39,20 @@
   <fieldset class="fields-group fields-group-slider" formGroupName="legend">
     <legend class="group-title" translate>widgets.chart.legend-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="doughnutChartWidgetSettingsForm.get('legend.display').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="display" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.chart.display-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <tb-color-input fxFlex
+        <section class="flex flex-col">
+          <tb-color-input class="flex-1"
                           formControlName="labelsFontColor"
                           icon="format_color_fill"
                           label="{{ 'widgets.chart.labels-font-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
index 34476180f4..44a0471001 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotBarKeySettingsForm" fxLayout="column">
+<section [formGroup]="flotBarKeySettingsForm" class="flex flex-col">
   <tb-flot-key-settings formControlName="flotKeySettings"
                         [aliasController]="aliasController"
                         [chartType]="'bar'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
index 0abca2f000..501e30a404 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotBarWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="flotBarWidgetSettingsForm" class="flex flex-col">
   <tb-flot-widget-settings formControlName="flotSettings"
                            [chartType]="'bar'">
   </tb-flot-widget-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
index 4767f393a8..a92c276534 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@@ -32,14 +32,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showLines').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLines" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLines" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-line' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -54,7 +53,7 @@
         <mat-slide-toggle class="mat-slide" formControlName="fillLines">
           {{ 'widgets.chart.fill-line' | translate }}
         </mat-slide-toggle>
-        <div [fxShow]="flotKeySettingsFormGroup.get('fillLines').value" class="tb-form-row space-between">
+        <div [class.!hidden]="!flotKeySettingsFormGroup.get('fillLines').value" class="tb-form-row space-between">
           <div>{{ 'widgets.chart.fill-line-opacity' | translate }}</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="fillLinesOpacity" type="number" min="0" max="1" step="0.1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -65,14 +64,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showPoints" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showPoints" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-points' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -116,7 +114,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <tb-js-func [fxShow]="flotKeySettingsFormGroup.get('showPointShape').value === 'custom'"
+        <tb-js-func [class.!hidden]="flotKeySettingsFormGroup.get('showPointShape').value !== 'custom'"
                     formControlName="pointShapeFormatter"
                     [globalVariables]="functionScopeVariables"
                     [functionArgs]="['ctx', 'x', 'y', 'radius', 'shadow']"
@@ -143,7 +141,7 @@
     </mat-slide-toggle>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="axisTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -196,7 +194,7 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div class="tb-form-panel-title" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="tb-form-panel-title flex flex-row items-center justify-between">
       <div translate>widgets.chart.thresholds</div>
       <button mat-stroked-button
               color="primary"
@@ -204,8 +202,8 @@
         <span translate>widgets.chart.add-threshold</span>
       </button>
     </div>
-    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
-         (cdkDropListDropped)="thresholdDrop($event)" fxLayout="column" fxLayoutGap="12px">
+    <div *ngIf="thresholdsFormArray().length" class="tb-control-list tb-drop-list flex flex-col gap-3" cdkDropList cdkDropListOrientation="vertical"
+         (cdkDropListDropped)="thresholdDrop($event)">
       <div cdkDrag class="tb-draggable" *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold;
                  let $index = index;">
         <tb-flot-threshold [formControl]="thresholdControl"
@@ -219,10 +217,9 @@
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value"
                          [disabled]="!flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -230,7 +227,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.chart.comparison-values-label</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
index ac25ef7a59..107d1d1b9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
@@ -20,10 +20,9 @@
     <div class="tb-form-panel-title" translate>widgets.chart.threshold-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotLatestKeySettingsForm.get('useAsThreshold').value"
                          [disabled]="!flotLatestKeySettingsForm.get('useAsThreshold').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useAsThreshold" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useAsThreshold" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.use-as-threshold' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
index 649c5a722c..6c11feed20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotLineKeySettingsForm" fxLayout="column">
+<section [formGroup]="flotLineKeySettingsForm" class="flex flex-col">
   <tb-flot-key-settings formControlName="flotKeySettings"
                         [aliasController]="aliasController"
                         [chartType]="'graph'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
index 9e9317a247..cd6d6f8b12 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [formGroup]="flotLineWidgetSettingsForm" fxLayout="column">
+<section [formGroup]="flotLineWidgetSettingsForm" class="flex flex-col">
   <tb-flot-widget-settings formControlName="flotSettings"
                            [chartType]="'graph'">
   </tb-flot-widget-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
index 0ce2a8ce71..8c530f7971 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotPieKeySettingsForm" fxLayout="column">
-  <fieldset class="fields-group" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="flotPieKeySettingsForm">
+  <fieldset class="fields-group flex flex-col">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <mat-checkbox formControlName="hideDataByDefault">
       {{ 'widgets.chart.data-is-hidden-by-default' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index 11dcbbeb84..8d2ee44d5d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -15,25 +15,25 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="flotPieWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="radius">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('radius').hasError('max')">
           {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.inner-radius</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="innerRadius">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('innerRadius').hasError('min') || flotPieWidgetSettingsForm.get('innerRadius').hasError('max')">
           {{ 'widgets.chart.common-pie-settings-range-error' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.tilt</mat-label>
         <input matInput type="number" step="0.1" min="0" max="1" formControlName="tilt">
         <mat-error *ngIf="flotPieWidgetSettingsForm.get('tilt').hasError('min') || flotPieWidgetSettingsForm.get('tilt').hasError('max')">
@@ -50,12 +50,12 @@
   </fieldset>
   <fieldset class="fields-group" formGroupName="stroke">
     <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.chart.width-pixels</mat-label>
         <input matInput type="number" min="0" formControlName="width">
       </mat-form-field>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
         formControlName="color"
         icon="format_color_fill"
         label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
index ef7ad17878..5ab501b830 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-row no-border no-padding column-lt-md" style="gap: 10px;" [formGroup]="thresholdFormGroup">
   <tb-value-source style="flex: 1" [aliasController]="aliasController" formControlName="valueSource"></tb-value-source>
   <div class="tb-form-row no-border no-padding" style="gap: 10px;">
-      <mat-form-field fxFlex.lt-md appearance="outline" class="number" subscriptSizing="dynamic">
+      <mat-form-field appearance="outline" class="number lt-md:flex-1" subscriptSizing="dynamic">
         <input matInput formControlName="lineWidth" type="number" min="0" placeholder="{{ 'widgets.chart.line-width' | translate }}">
       </mat-form-field>
       <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
index 001f606719..cea091fda6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@@ -63,7 +63,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.default-font' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="fontSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
           <span matSuffix>px</span>
@@ -77,14 +77,13 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widget-config.legend</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -100,7 +99,7 @@
       <div class="tb-form-panel-title" translate>widgets.chart.vertical-axis</div>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
@@ -119,14 +118,13 @@
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('yaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLabels" (click)="$event.stopPropagation()">
                 {{ 'widgets.chart.ticks' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -164,21 +162,20 @@
       <div class="tb-form-panel-title" translate>widgets.chart.horizontal-axis</div>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
       <div class="tb-form-panel stroked tb-slide-toggle">
         <div class="tb-form-panel-title" translate>widgets.chart.ticks</div>
         <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('xaxis.showLabels').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle class="mat-slide" formControlName="showLabels" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLabels" (click)="$event.stopPropagation()">
                 {{ 'widgets.chart.ticks' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -214,7 +211,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.chart.border' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="outlineWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
           <span matSuffix>px</span>
@@ -234,14 +231,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.tooltip</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -274,14 +270,13 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.comparison-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="comparisonEnabled" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.enable-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -311,7 +306,7 @@
             </mat-select>
           </mat-form-field>
         </div>
-        <div [fxShow]="flotSettingsFormGroup.get('timeForComparison').value === 'customInterval'" class="tb-form-row space-between">
+        <div [class.!hidden]="flotSettingsFormGroup.get('timeForComparison').value !== 'customInterval'" class="tb-form-row space-between">
           <div translate>widgets.chart.custom-interval-value</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
@@ -321,7 +316,7 @@
           <div class="tb-form-panel-title" translate>widgets.chart.comparison-x-axis-settings</div>
           <div class="tb-form-row">
             <div class="fixed-title-width" translate>widgets.chart.axis-title</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
           </div>
@@ -350,26 +345,25 @@
   <div *ngIf="chartType === 'graph' || chartType === 'bar'" class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.chart.custom-legend-settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="customLegendEnabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="customLegendEnabled" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.enable-custom-legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-panel stroked">
           <div class="tb-form-panel-title" translate>widgets.chart.label-keys-list</div>
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                  (cdkDropListDropped)="labelDataKeyDrop($event)">
-              <div cdkDrag class="tb-draggable" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
+              <div cdkDrag class="tb-draggable flex flex-col" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey;
                  let $index = index; last as isLast;"
-                   fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+                   [class.pb-2]="!isLast">
                 <tb-label-data-key [formControl]="labelDataKeyControl"
                                    [expanded]="labelDataKeyControl.new"
                                    (removeLabelDataKey)="removeLabelDataKey($index)">
@@ -377,8 +371,8 @@
               </div>
             </div>
             <div *ngIf="!dataKeysListForLabelsFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.chart.no-label-keys</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.chart.no-label-keys</span>
             </div>
             <div style="padding-top: 16px;">
               <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
index 2c93302a59..a2de509c44 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="label-data-key" fxFlex [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="label-data-key flex=1" [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           {{ labelDataKeyText() }}
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeLabelDataKey.emit()"
@@ -34,18 +34,18 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-name</mat-label>
             <input required matInput formControlName="name">
             <mat-error *ngIf="labelDataKeyFormGroup.get('name').hasError('required')">
               {{ 'widgets.chart.key-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.chart.key-type</mat-label>
             <mat-select formControlName="type">
               <mat-option [value]="'attribute'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
index bf00900f47..42416e54b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.html
@@ -19,10 +19,9 @@
   <ng-container *ngTemplateOutlet="latestChartConfigTemplate()"></ng-container>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showLegend').value" [disabled]="!latestChartWidgetSettingsForm.get('showLegend').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
             {{ 'widget-config.legend' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -40,7 +39,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.label' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendLabelFont"
                               previewText="Wind power">
             </tb-font-settings>
@@ -52,7 +51,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'legend.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="legendValueFont"
                               [previewText]="valuePreviewFn">
             </tb-font-settings>
@@ -67,10 +66,9 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="latestChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!latestChartWidgetSettingsForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -78,7 +76,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div>{{ 'tooltip.value' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="tooltipValueType">
                 <mat-option *ngFor="let type of latestChartTooltipValueTypes" [value]="type">
@@ -88,7 +86,7 @@
             </mat-form-field>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="tooltipValueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-              <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+              <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
             </mat-form-field>
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
@@ -143,8 +141,8 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
           {{ 'widgets.pie-chart.label' | translate }}
         </mat-slide-toggle>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <div class="flex flex-1 flex-row items-center justify-start gap-2">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="labelPosition">
               <mat-option *ngFor="let position of pieChartLabelPositions" [value]="position">
                 {{ pieChartLabelPositionTranslationMap.get(position) | translate }}
@@ -164,7 +162,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.border' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>px</div>
@@ -177,7 +175,7 @@
       </div>
       <div class="tb-form-row space-between">
         <div>{{ 'widgets.pie-chart.radius' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="radius" type="number" min="0" max="100" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <div matSuffix>%</div>
@@ -228,9 +226,9 @@
           {{ 'widgets.latest-chart.sort-series' | translate }}
         </mat-slide-toggle>
       </div>
-      <div [fxShow]="doughnutTotalEnabled" class="tb-form-row space-between">
+      <div [class.!hidden]="!doughnutTotalEnabled" class="tb-form-row space-between">
         <div>{{ 'widgets.doughnut.central-total-value' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="totalValueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -261,7 +259,7 @@
         <div class="tb-form-panel-title" translate>widgets.bar-chart.bar-axis</div>
         <div class="tb-form-row space-between column-xs">
           <div translate>widgets.chart.chart-axis.scale</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="axisMin"
@@ -309,7 +307,7 @@
         <div class="tb-form-panel-title" translate>widgets.polar-area-chart.polar-axis</div>
         <div class="tb-form-row space-between column-xs">
           <div translate>widgets.chart.chart-axis.scale</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="axisMin"
@@ -374,8 +372,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showLine">
             {{ 'widgets.radar-chart.line' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2">
+            <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="lineType">
                 <mat-option *ngFor="let type of chartLineTypes" [value]="type">
                   {{ chartLineTypeTranslations.get(type) | translate }}
@@ -392,8 +390,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showPoints">
             {{ 'widgets.radar-chart.points' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2">
+            <mat-form-field class="medium-width xs:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointShape">
                 <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                   {{ chartShapeTranslations.get(shape) | translate }}
@@ -410,8 +408,8 @@
           <mat-slide-toggle class="mat-slide" formControlName="showLabel">
             {{ 'widgets.radar-chart.points-label' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+            <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="labelPosition">
                 <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                   {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -451,7 +449,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="axisShowTickLabels">
             {{ 'widgets.radar-chart.ticks-label' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="axisTickLabelFont"
                               clearButton
                               disabledLineHeight
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
index a7ced000bf..c435aa0444 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.html
@@ -118,8 +118,8 @@
               {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
             </div>
           </mat-slide-toggle>
-          <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+            <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="pointLabelPosition">
                 <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
                   {{ chartLabelPositionTranslations.get(position) | translate }}
@@ -191,10 +191,9 @@
     </tb-time-series-chart-thresholds-panel>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showLegend').value" [disabled]="!rangeChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -212,7 +211,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 previewText="20 - 30">
               </tb-font-settings>
@@ -227,10 +226,9 @@
     </div>
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetSettingsForm.get('showTooltip').value" [disabled]="!rangeChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -238,7 +236,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -251,7 +249,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -266,8 +264,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: rangeChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
index 1299f0574a..0e7c618c5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-key-settings.component.html
@@ -42,17 +42,17 @@
     </div>
   </div>
   <div class="tb-form-panel">
-    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" fxLayout="row" fxLayoutAlign="space-between center">
+    <div *ngIf="chartType === TimeSeriesChartType.default; else chartTypeTitle" class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widgets.time-series-chart.series.series-type</div>
       <tb-toggle-select formControlName="type">
         <tb-toggle-option *ngFor="let type of timeSeriesChartSeriesTypes" [value]="type">{{ timeSeriesChartSeriesTypeTranslations.get(type) | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
-    <tb-time-series-chart-line-settings [fxShow]="timeSeriesChartKeySettingsForm.get('type').value === TimeSeriesChartSeriesType.line"
+    <tb-time-series-chart-line-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.line"
                                         [chartType]="chartType"
                                         formControlName="lineSettings">
     </tb-time-series-chart-line-settings>
-    <tb-chart-bar-settings [fxShow]="timeSeriesChartKeySettingsForm.get('type').value === TimeSeriesChartSeriesType.bar"
+    <tb-chart-bar-settings [class.!hidden]="timeSeriesChartKeySettingsForm.get('type').value !== TimeSeriesChartSeriesType.bar"
                                      formControlName="barSettings">
     </tb-chart-bar-settings>
   </div>
@@ -70,10 +70,9 @@
     <div class="tb-form-panel-title" translate>widgets.time-series-chart.comparison.settings</div>
     <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value"
                          [disabled]="!timeSeriesChartKeySettingsForm.get('comparisonSettings.showValuesForComparison').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showValuesForComparison" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showValuesForComparison" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.comparison.show-values-for-comparison' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -81,7 +80,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.time-series-chart.comparison.comparison-values-label</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="comparisonValuesLabel" placeholder="{{ 'widgets.time-series-chart.comparison.comparison-values-label-auto' | translate }}">
           </mat-form-field>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
index e71113cdbf..f0c347f478 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.html
@@ -77,8 +77,8 @@
         {{ 'widgets.time-series-chart.series.point.point-label' | translate }}
       </div>
     </mat-slide-toggle>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex flex-row items-center justify-start gap-2 lt-md:flex-1">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="pointLabelPosition">
           <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
             {{ chartLabelPositionTranslations.get(position) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
index 79a517a7d8..5b6d0a258b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
@@ -21,7 +21,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="comparisonEnabled">
         {{ 'widgets.time-series-chart.comparison.comparison' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="timeForComparison">
             <mat-option [value]="'previousInterval'">
@@ -44,7 +44,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [fxShow]="timeSeriesChartWidgetSettingsForm.get('timeForComparison').value === 'customInterval'"
+        <mat-form-field [class.!hidden]="timeSeriesChartWidgetSettingsForm.get('timeForComparison').value !== 'customInterval'"
                         appearance="outline" class="number flex-lt-md" subscriptSizing="dynamic">
           <input matInput formControlName="comparisonCustomIntervalValue" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -105,10 +105,9 @@
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showLegend').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showLegend').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showLegend" (click)="$event.stopPropagation()">
               {{ 'widget-config.legend' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -116,7 +115,7 @@
         <ng-template matExpansionPanelContent>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendLabelFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendLabelColor').value}"
                                 previewText="Temperature">
@@ -129,7 +128,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendValueFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendValueColor').value}"
                                 previewText="22 °C">
@@ -142,7 +141,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'legend.column-title' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="legendColumnTitleFont"
                                 [initialPreviewStyle]="{color: timeSeriesChartWidgetSettingsForm.get('legendColumnTitleColor').value}"
                                 previewText="{{ 'legend.Avg' | translate }}">
@@ -162,10 +161,9 @@
     <div class="tb-form-panel tb-slide-toggle">
       <mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetSettingsForm.get('showTooltip').value"
                            [disabled]="!timeSeriesChartWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -182,7 +180,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.label' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipLabelFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipLabelColor').value }"
                                 previewText="Temperature">
@@ -195,7 +193,7 @@
           </div>
           <div class="tb-form-row space-between">
             <div>{{ 'tooltip.value' | translate }}</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="tooltipValueFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').value }"
                                 [previewText]="tooltipValuePreviewFn">
@@ -217,8 +215,8 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate">
               {{ 'tooltip.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <tb-date-format-select fxFlex excludeLastUpdateAgo includeAuto
+            <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+              <tb-date-format-select class="flex-1" excludeLastUpdateAgo includeAuto
                                      formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [initialPreviewStyle]="{ color: timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').value }"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
index bc8d53ae12..d3ed0298ab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-editor.component.html
@@ -16,9 +16,10 @@
 
 -->
 <div class="tb-custom-action-pretty" tb-fullscreen [fullscreen]="fullscreen">
-  <div fxLayout="row" fxLayoutAlign="end center" class="tb-action-expand-button" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
+  <div class="tb-action-expand-button flex flex-row items-center justify-end" [class.tb-fullscreen-editor]="fullscreen">
     <button *ngIf="!fullscreen"
-            mat-icon-button fxHide.lt-md
+            class="lt-md:!hidden"
+            mat-icon-button
             matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
             matTooltipPosition="above"
             (click)="fullscreen = true">
@@ -33,14 +34,14 @@
       <span translate>widget.toggle-fullscreen</span>
     </button>
   </div>
-  <div class="tb-custom-action-editor" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
+  <div class="tb-custom-action-editor" [class.tb-fullscreen-editor]="fullscreen">
     <div *ngIf="!fullscreen; else fullscreenEditor">
       <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="true"
                                               [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
       </tb-custom-action-pretty-resources-tabs>
     </div>
     <ng-template #fullscreenEditor>
-      <div class="tb-fullscreen-panel tb-layout-fill" fxLayout="row">
+      <div class="tb-fullscreen-panel tb-layout-fill flex flex-row">
         <div #leftPanel class="tb-split tb-content">
           <tb-custom-action-pretty-resources-tabs [hasCustomFunction]="false"
                                                   [action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
index f9610ecbee..eb2e0b5808 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action-pretty-resources-tabs.component.html
@@ -19,10 +19,9 @@
   <mat-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
     <div class="tb-custom-action-editor-container" style="background-color: #fff;">
       <div class="mat-padding">
-        <div fxFlex fxLayout="row"
-             fxLayoutAlign="start center"
+        <div class="flex flex-1 flex-row items-center justify-start"
              *ngFor="let resource of action.customResources; let i = index" style="padding-top: 10px;">
-          <tb-resource-autocomplete fxFlex class="mat-block"
+          <tb-resource-autocomplete class="mat-block flex-1"
                                     subscriptSizing="dynamic"
                                     hideRequiredMarker required
                                     [allowAutocomplete]="resource.isModule"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action.models.ts
index f1c3b98c74..593b11080c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-action.models.ts
@@ -19,9 +19,9 @@ import { widgetContextCompletions } from '@shared/models/ace/widget-completion.m
 import { entityIdHref, entityTypeHref, serviceCompletions } from '@shared/models/ace/service-completion.models';
 import { CustomActionDescriptor, WidgetAction } from '@shared/models/widget.models';
 import { deepClone, isDefined, isUndefined } from '@core/utils';
-import customSampleJs from '!raw-loader!./custom-sample-js.raw';
-import customSampleCss from '!raw-loader!./custom-sample-css.raw';
-import customSampleHtml from '!raw-loader!./custom-sample-html.raw';
+import customSampleJs from './custom-sample-js.raw';
+import customSampleCss from './custom-sample-css.raw';
+import customSampleHtml from './custom-sample-html.raw';
 
 const customActionCompletions: TbEditorCompletions = {
   ...{
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
index 95e11ccef6..734773eb87 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/custom-sample-html.raw
@@ -6,9 +6,9 @@
 <!-- -->
 <!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
 <!--      (ngSubmit)="save()"  class="edit-entity-form">-->
-<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--    <mat-toolbar class="flex flex-row" color="primary">-->
 <!--        <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
-<!--        <span fxFlex></span>-->
+<!--        <span class="flex-1"></span>-->
 <!--        <button mat-icon-button (click)="cancel()" type="button">-->
 <!--            <mat-icon class="material-icons">close</mat-icon>-->
 <!--        </button>-->
@@ -16,57 +16,57 @@
 <!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
 <!--    </mat-progress-bar>-->
 <!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--    <div mat-dialog-content fxLayout="column">-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--    <div mat-dialog-content class="flex flex-col">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Name</mat-label>-->
 <!--                <input matInput formControlName="entityName" required readonly="">-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Label</mat-label>-->
 <!--                <input matInput formControlName="entityLabel">-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Type</mat-label>-->
 <!--                <input matInput formControlName="entityType" readonly>-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Type</mat-label>-->
 <!--                <input matInput formControlName="type" readonly>-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div formGroupName="attributes" fxLayout="column">-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--        <div formGroupName="attributes" class="flex flex-col">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Latitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="latitude">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Longitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="longitude">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Address</mat-label>-->
 <!--                    <input matInput formControlName="address">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Owner</mat-label>-->
 <!--                    <input matInput formControlName="owner">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Integer Value</mat-label>-->
 <!--                    <input type="number" step="1" matInput formControlName="number">-->
 <!--                    <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">-->
 <!--                        Invalid integer value.-->
 <!--                    </mat-error>-->
 <!--                </mat-form-field>-->
-<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">-->
 <!--                    <label class="checkbox-label">Boolean Value</label>-->
 <!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
 <!--                        {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
@@ -76,12 +76,12 @@
 <!--        </div>-->
 <!--        <div class="relations-list old-relations">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--            <div class="body" [fxShow]="oldRelations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
+<!--            <div class="body" [class.!hidden]="!oldRelations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations" -->
 <!--                     *ngFor="let relation of oldRelations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -94,20 +94,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        required="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        required="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -123,11 +123,11 @@
 <!--        </div>-->
 <!--        <div class="relations-list">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
-<!--            <div class="body" [fxShow]="relations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <div class="body" [class.!hidden]="!relations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -140,20 +140,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        [required]="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        [required]="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -177,7 +177,7 @@
 <!--            </div>-->
 <!--        </div>-->
 <!--    </div>-->
-<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--    <div mat-dialog-actions class="flex flex-row items-center justify-end">-->
 <!--        <button mat-button color="primary"-->
 <!--                type="button"-->
 <!--                [disabled]="(isLoading$ | async)"-->
@@ -198,9 +198,9 @@
 <!---->
 <!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
 <!--      (ngSubmit)="save()" class="add-entity-form">-->
-<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--    <mat-toolbar class="flex flex-row" color="primary">-->
 <!--        <h2>Add entity</h2>-->
-<!--        <span fxFlex></span>-->
+<!--        <span class="flex-1"></span>-->
 <!--        <button mat-icon-button (click)="cancel()" type="button">-->
 <!--            <mat-icon class="material-icons">close</mat-icon>-->
 <!--        </button>-->
@@ -208,21 +208,21 @@
 <!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
 <!--    </mat-progress-bar>-->
 <!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--    <div mat-dialog-content fxLayout="column">-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--    <div mat-dialog-content class="flex flex-col">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Name</mat-label>-->
 <!--                <input matInput formControlName="entityName" required>-->
 <!--                <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
 <!--                    Entity name is required.-->
 <!--                </mat-error>-->
 <!--            </mat-form-field>-->
-<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--            <mat-form-field class="mat-block flex-1">-->
 <!--                <mat-label>Entity Label</mat-label>-->
 <!--                <input matInput formControlName="entityLabel" >-->
 <!--            </mat-form-field>-->
 <!--        </div>-->
-<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--        <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--            <tb-entity-type-select-->
 <!--                    class="mat-block"-->
 <!--                    formControlName="entityType"-->
@@ -230,50 +230,50 @@
 <!--                    [allowedEntityTypes]="allowedEntityTypes"-->
 <!--            ></tb-entity-type-select>-->
 <!--            <tb-entity-subtype-autocomplete-->
-<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
-<!--                    class="mat-block"-->
+<!--                    *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
+<!--                    class="mat-block flex-1"-->
 <!--                    formControlName="type"-->
 <!--                    [required]="true"-->
 <!--                    [entityType]="'ASSET'"-->
 <!--            ></tb-entity-subtype-autocomplete>-->
 <!--            <tb-entity-subtype-autocomplete-->
-<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
-<!--                    class="mat-block"-->
+<!--                    *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
+<!--                    class="mat-block flex-1"-->
 <!--                    formControlName="type"-->
 <!--                    [required]="true"-->
 <!--                    [entityType]="'DEVICE'"-->
 <!--            ></tb-entity-subtype-autocomplete>-->
 <!--        </div>-->
-<!--        <div formGroupName="attributes" fxLayout="column">-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--        <div formGroupName="attributes" class="flex flex-col">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Latitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="latitude">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Longitude</mat-label>-->
 <!--                    <input type="number" step="any" matInput formControlName="longitude">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Address</mat-label>-->
 <!--                    <input matInput formControlName="address">-->
 <!--                </mat-form-field>-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Owner</mat-label>-->
 <!--                    <input matInput formControlName="owner">-->
 <!--                </mat-form-field>-->
 <!--            </div>-->
-<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
-<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
+<!--                <mat-form-field class="mat-block flex-1">-->
 <!--                    <mat-label>Integer Value</mat-label>-->
 <!--                    <input type="number" step="1" matInput formControlName="number">-->
 <!--                    <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">-->
 <!--                        Invalid integer value.-->
 <!--                    </mat-error>-->
 <!--                </mat-form-field>-->
-<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">-->
 <!--                    <label class="checkbox-label">Boolean Value</label>-->
 <!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
 <!--                        {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
@@ -283,11 +283,11 @@
 <!--        </div>-->
 <!--        <div class="relations-list">-->
 <!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--            <div class="body" [fxShow]="relations().length">-->
-<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
-<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
-<!--                        <div fxFlex fxLayout="column">-->
-<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <div class="body" [class.!hidden]="!relations().length">-->
+<!--                <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div class="flex flex-1 flex-col">-->
+<!--                            <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
 <!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
 <!--                                    <mat-label>Direction</mat-label>-->
 <!--                                    <mat-select formControlName="direction" name="direction">-->
@@ -300,20 +300,20 @@
 <!--                                    </mat-error>-->
 <!--                                </mat-form-field>-->
 <!--                                <tb-relation-type-autocomplete-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        formControlName="relationType"-->
 <!--                                        [required]="true">-->
 <!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
-<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                            <div class="flex flex-row xs:flex-col">-->
 <!--                                <tb-entity-select-->
-<!--                                        fxFlex class="mat-block"-->
+<!--                                        class="mat-block flex-1"-->
 <!--                                        [required]="true"-->
 <!--                                        formControlName="relatedEntity">-->
 <!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
-<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                        <div class="flex flex-col items-center justify-center">-->
 <!--                            <button mat-icon-button color="primary"-->
 <!--                                    aria-label="Remove"-->
 <!--                                    type="button"-->
@@ -337,7 +337,7 @@
 <!--            </div>-->
 <!--        </div>-->
 <!--    </div>-->
-<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--    <div mat-dialog-actions class="flex flex-row items-center justify-end">-->
 <!--        <button mat-button color="primary"-->
 <!--                type="button"-->
 <!--                [disabled]="(isLoading$ | async)"-->
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
index 53e6fb3e8a..4e5e6709a6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
@@ -41,7 +41,7 @@
       <ng-template [ngSwitchCase]="getValueAction.EXECUTE_RPC">
         <div class="tb-form-row" formGroupName="executeRpc">
           <div class="fixed-title-width" >{{ 'widgets.value-action.method' | translate }}*</div>
-          <mat-form-field class="flex tb-suffix-absolute" appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="method" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
                       matTooltipPosition="above"
@@ -73,7 +73,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.attribute-key-required"
@@ -91,7 +91,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.time-series-key-required"
@@ -108,7 +108,7 @@
           class="tb-form-panel stroked" formGroupName="dataToValue">
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width" translate>widgets.value-action.action-result-converter</div>
-        <tb-toggle-select fxFlex formControlName="type">
+        <tb-toggle-select class="flex-1" formControlName="type">
           <tb-toggle-option [value]="dataToValueType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
           <tb-toggle-option [value]="dataToValueType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
         </tb-toggle-select>
@@ -124,7 +124,7 @@
       <div *ngIf="valueType === ValueType.BOOLEAN" class="tb-form-row align-start no-gap column-xs">
         <div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
         <tb-value-input
-          fxFlex
+          class="flex-1"
           [valueType]="(getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE &&
                         getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.NONE) ? ValueType.STRING : null"
           layout="column"
@@ -135,10 +135,10 @@
     <div *ngIf="getValueSettingsFormGroup.get('action').value === getValueAction.EXECUTE_RPC"
          class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
       <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -163,10 +163,9 @@
             <mat-expansion-panel class="tb-settings"
                                  [expanded]="getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
                                  [disabled]="!getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
                 <mat-panel-title>
-                  <mat-slide-toggle class="mat-slide" formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                                    fxLayoutAlign="center">
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
                     {{ 'widgets.value-action.request-persistent' | translate }}
                   </mat-slide-toggle>
                 </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
index 458e619185..a3d343e720 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-padding no-border" [formGroup]="mobileActionFormGroup">
   <div class="tb-form-row">
     <div class="fixed-title-width">{{ 'widget-action.mobile.action-type' | translate }}*</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-action.mobile.select-action-type' | translate }}">
         <mat-option *ngFor="let actionType of mobileActionTypes" [value]="actionType">
           {{ mobileActionTypeTranslations.get(mobileActionType[actionType]) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
index 5abf69c523..4700620035 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/mobile-action-editor.models.ts
@@ -49,24 +49,24 @@ const processImageFunctionTemplate =
   '  imageDialogTemplate =\n' +
   '    \'<div aria-label="Image">\' +\n' +
   '    \'<form #theForm="ngForm">\' +\n' +
-  '    \'<mat-toolbar fxLayout="row" color="primary">\' +\n' +
+  '    \'<mat-toolbar class="flex flex-row" color="primary">\' +\n' +
   '    \'<h2>{{title}}</h2>\' +\n' +
-  '    \'<span fxFlex></span>\' +\n' +
+  '    \'<span class="flex-1"></span>\' +\n' +
   '    \'<button mat-icon-button (click)="close()">\' +\n' +
   '    \'<mat-icon>close</mat-icon>\' +\n' +
   '    \'</button>\' +\n' +
   '    \'</mat-toolbar>\' +\n' +
   '    \'<div mat-dialog-content>\' +\n' +
   '    \'<div class="mat-content mat-padding">\' +\n' +
-  '    \'<div fxLayout="column" fxFlex>\' +\n' +
+  '    \'<div class="flex flex-1 flex-col">\' +\n' +
   '    \'<div style="padding-top: 20px;">\' +\n' +
   '    \'<img [src]="imageUrl" style="height: 300px;"/>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</div>\' +\n' +
-  '    \'<div mat-dialog-actions fxLayout="row">\' +\n' +
-  '    \'<span fxFlex></span>\' +\n' +
+  '    \'<div mat-dialog-actions class="flex flex-row">\' +\n' +
+  '    \'<span class="flex-1"></span>\' +\n' +
   '    \'<button mat-button (click)="close()" style="margin-right:20px;">Close</button>\' +\n' +
   '    \'</div>\' +\n' +
   '    \'</form>\' +\n' +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
index 59e9d0413b..65b6354814 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
@@ -32,7 +32,7 @@
       <ng-template [ngSwitchCase]="setValueAction.EXECUTE_RPC">
         <div class="tb-form-row" formGroupName="executeRpc">
           <div class="fixed-title-width" >{{ 'widgets.value-action.method' | translate }}*</div>
-          <mat-form-field class="flex tb-suffix-absolute" appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="method" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
                       matTooltipPosition="above"
@@ -61,7 +61,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.attribute-key-required"
@@ -79,7 +79,7 @@
           <div class="tb-form-row">
             <div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
             <tb-device-key-autocomplete
-              fxFlex
+              class="flex-1"
               formControlName="key"
               required
               requiredText="widgets.value-action.time-series-key-required"
@@ -96,7 +96,7 @@
       <div class="tb-form-row no-padding no-border column-xs">
         <div class="fixed-title-width">{{ (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC ?
           'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
-        <tb-toggle-select fxFlex formControlName="type">
+        <tb-toggle-select class="flex-1" formControlName="type">
           <tb-toggle-option *ngIf="valueType !== ValueType.BOOLEAN" [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
           <tb-toggle-option *ngIf="valueType === ValueType.BOOLEAN" [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
           <tb-toggle-option [value]="valueToDataType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
@@ -105,7 +105,7 @@
         </tb-toggle-select>
       </div>
       <tb-value-input *ngIf="setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.CONSTANT"
-                      fxFlex
+                      class="flex-1"
                       [layout]="{
                               layout: 'row',
                               breakpoints: {xs: 'column'}
@@ -124,10 +124,10 @@
     <div *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
          class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
       <mat-expansion-panel class="tb-settings no-padding">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" translate>
+          <mat-panel-description class="flex items-center justify-end" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -152,10 +152,9 @@
             <mat-expansion-panel class="tb-settings"
                                  [expanded]="setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
                                  [disabled]="!setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
-              <mat-expansion-panel-header fxLayout="row wrap">
+              <mat-expansion-panel-header class="flex flex-row flex-wrap">
                 <mat-panel-title>
-                  <mat-slide-toggle class="mat-slide" formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                                    fxLayoutAlign="center">
+                  <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
                     {{ 'widgets.value-action.request-persistent' | translate }}
                   </mat-slide-toggle>
                 </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
index be9b067d17..1b3213b251 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-padding no-border" [formGroup]="widgetActionFormGroup">
   <div class="tb-form-row">
     <div translate>widget-config.action</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select required formControlName="type" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option *ngFor="let actionType of widgetActionTypes" [value]="actionType">
           {{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
@@ -30,7 +30,7 @@
     <ng-template [ngSwitchCase]="widgetActionType.openDashboard">
       <div class="tb-form-row">
         <div class="fixed-title-width">{{ 'widget-action.target-dashboard' | translate }}*</div>
-        <tb-dashboard-autocomplete fxFlex
+        <tb-dashboard-autocomplete class="flex-1"
             formControlName="targetDashboardId"
             required
             requiredText="widget-action.target-dashboard-required"
@@ -49,7 +49,7 @@
           <span>{{ 'widget-action.target-dashboard-state' | translate }}</span>
           <span *ngIf="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState">*</span>
         </div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"
                         [class.tb-suffix-absolute]="!actionTypeFormGroup.get('targetDashboardStateId').value">
           <input matInput type="text" placeholder="{{ 'widget-action.target-dashboard-state' | translate }}"
                  #dashboardStateInput
@@ -85,7 +85,7 @@
     <ng-template [ngSwitchCase]="widgetActionType.openURL">
       <div class="tb-form-row">
         <div class="tb-required">{{ 'widget-action.URL' | translate }}</div>
-        <mat-form-field fxFlex style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
           <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="url">
           <mat-icon matSuffix
                     matTooltipPosition="above"
@@ -127,7 +127,7 @@
       </div>
       <div class="tb-form-row" *ngIf="actionTypeFormGroup.get('setEntityId').value">
         <div class="fixed-title-width">{{ 'alias.state-entity-parameter-name' | translate }}</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput
                  placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
                  formControlName="stateEntityParamName">
@@ -138,7 +138,7 @@
                                  widgetActionFormGroup.get('type').value : ''">
       <div class="tb-form-row">
         <div class="fixed-title-width">{{ 'widget-action.state-display-type' | translate }}</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="stateDisplayType">
             <mat-option *ngFor="let displayType of allStateDisplayTypes" [value]="displayType">
               {{ stateDisplayTypeName(displayType) }}
@@ -150,7 +150,7 @@
         <ng-template [ngSwitchCase]="'separateDialog'">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widget-action.dialog-title' | translate }}</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="dialogTitle">
             </mat-form-field>
           </div>
@@ -191,7 +191,7 @@
         <ng-template [ngSwitchCase]="'popover'">
           <div class="tb-form-row">
             <div class="fixed-title-width">{{ 'widget-action.popover-preferred-placement' | translate }}</div>
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <mat-select formControlName="popoverPreferredPlacement">
                 <mat-option *ngFor="let placement of allPopoverPlacements" [value]="placement">
                   {{ popoverPlacementName(placement) }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
index 4bd50a81c6..f76dc1a94a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/advanced-range.component.html
@@ -18,18 +18,18 @@
 <div class="tb-form-row no-padding no-border" style="gap: 0; width: 100%;" [formGroup]="advancedRangeLevelFormGroup">
   <div class="range-container">
     <div class="range-input range-input-fields">
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="range-text" translate>widgets.color.from</div>
-        <tb-value-source-data-key fxFlex
+        <tb-value-source-data-key class="flex-1"
                                   formControlName="from"
                                   [aliasController]="aliasController"
                                   [dataKeyCallbacks]="dataKeyCallbacks"
                                   [datasource]="datasource">
         </tb-value-source-data-key>
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="range-text" translate>widgets.color.to</div>
-        <tb-value-source-data-key fxFlex
+        <tb-value-source-data-key class="flex-1"
                                   formControlName="to"
                                   [aliasController]="aliasController"
                                   [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
index a88ea77488..54da20f8a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/auto-date-format-settings-panel.component.html
@@ -20,14 +20,13 @@
   <div class="tb-auto-date-format-settings-panel-content">
     <div class="tb-form-row" *ngFor="let unit of formatTimeUnits">
       <div class="fixed-title-width">{{ formatTimeUnitTranslations.get(unit) | translate }}</div>
-      <div fxFlex fxLayout="column" fxLayoutGap="8px"
-                  fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutGap.gt-xs="16px">
+      <div class="flex flex-1 flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-4">
         <mat-form-field class="tb-date-format-input flex" appearance="outline" subscriptSizing="dynamic">
           <input required matInput [formControlName]="unit" placeholder="{{ 'widget-config.set' | translate }}">
           <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
         </mat-form-field>
-        <mat-divider fxHide fxShow.gt-xs vertical></mat-divider>
-        <div class="preview-text" fxFlex>{{ previewText[unit] }}</div>
+        <mat-divider class="lt-sm:!hidden" vertical></mat-divider>
+        <div class="preview-text flex-1">{{ previewText[unit] }}</div>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
index 9038f2a22f..bce7eec5c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -19,18 +19,18 @@
   <div class="tb-background-settings-title" translate>widgets.background.background-settings</div>
   <div class="tb-background-settings-panel-content">
     <div class="tb-form-panel tb-background-form-panel">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+      <div class="flex flex-row items-center justify-start gap-4">
         <div class="tb-form-panel-title" translate>widgets.background.background</div>
-        <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
+        <tb-toggle-select formControlName="type" class="flex-1" selectMediaBreakpoint="xs">
           <tb-toggle-option *ngFor="let type of backgroundTypes"
                             [value]="type">
             {{ backgroundTypeTranslationsMap.get(type) | translate }}
           </tb-toggle-option>
         </tb-toggle-select>
       </div>
-      <tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image"
+      <tb-gallery-image-input [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.image"
                               formControlName="imageUrl"></tb-gallery-image-input>
-      <div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color"
+      <div [class.!hidden]="backgroundSettingsFormGroup.get('type').value !== backgroundType.color"
            class="tb-form-row space-between tb-background-color-field">
         <div translate>widgets.color.color</div>
         <tb-color-input asBoxInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
index ea685bd85f..dcce754a93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
@@ -21,7 +21,7 @@
         [disabled]="disabled"
         #matButton
         (click)="openBackgroundSettingsPopup($event, matButton)">
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="backgroundStyle$ | async">
       <div class="tb-color-overlay" [style]="overlayStyle">
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
index 8acbdb1de0..634bc11605 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-appearance.component.html
@@ -45,11 +45,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
       {{ 'widgets.button.icon' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                iconClearButton
                                formControlName="icon">
@@ -62,15 +62,15 @@
   </div>
   <div class="tb-form-row space-between column-xs">
     <div>{{ 'widgets.button.color-palette' | translate }}</div>
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row items-center justify-start gap-3">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.button.main</div>
         <tb-color-input asBoxInput
                         formControlName="mainColor">
         </tb-color-input>
       </div>
       <mat-divider vertical></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.button.background</div>
         <tb-color-input asBoxInput
                         formControlName="backgroundColor">
@@ -80,7 +80,7 @@
   </div>
   <div class="tb-form-panel stroked" formGroupName="customStyle">
     <mat-expansion-panel class="tb-settings">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <div class="tb-form-panel-title" translate>widgets.button.custom-styles</div>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
index 86b5acde6e..e480dfe7c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.html
@@ -77,7 +77,7 @@
         </div>
       </ng-template>
     </mat-menu>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
index b0a091a5bc..cf96b7236b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-animation-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
                          [disabled]="!animationSettingsFormGroup.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.chart.animation.animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
index 7d3992008a..b863ffdac1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.html
@@ -46,8 +46,8 @@
         {{ 'widgets.chart.bar.label' | translate }}
       </div>
     </mat-slide-toggle>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="labelPosition">
           <mat-option *ngFor="let position of chartLabelPositions" [value]="position">
             {{ chartLabelPositionTranslations.get(position) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
index e56fc1ec00..bcd93ef9a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-fill-settings.component.html
@@ -35,7 +35,7 @@
     <ng-container *ngIf="fillSettingsFormGroup.get('type').value === ChartFillType.gradient" formGroupName="gradient">
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.gradient-stops</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.gradient-start</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="start" min="0" max="100" step="1"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
index 7ee338bf21..f7453b6b7e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
@@ -17,12 +17,11 @@
 -->
 <ng-container [formGroup]="axisSettingsFormGroup">
   <div class="tb-form-panel stroked tb-slide-toggle">
-    <mat-expansion-panel class="tb-settings" [(expanded)]="alwaysExpanded || settingsExpanded"
+    <mat-expansion-panel class="tb-settings" [expanded]="alwaysExpanded || settingsExpanded"
                          [disabled]="alwaysExpanded || !axisSettingsFormGroup.get('show').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="show" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.axis.show' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -30,7 +29,7 @@
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row column-xs">
           <div class="fixed-title-width" translate>widgets.time-series-chart.axis.label</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -69,7 +68,7 @@
           </mat-form-field>
         </div>
         <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row">
-          <tb-js-func fxFlex
+          <tb-js-func class="flex-1"
                       formControlName="ticksGenerator"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['extent']"
@@ -82,7 +81,7 @@
             <mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
               <div translate>widgets.time-series-chart.axis.tick-labels</div>
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-auto-date-format-settings *ngIf="axisType === 'xAxis'"
                                             formControlName="ticksFormat"
                                             [defaultValues]="defaultXAxisTicksFormat">
@@ -100,7 +99,7 @@
             </div>
           </div>
           <div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row no-border">
-            <tb-js-func fxFlex
+            <tb-js-func class="flex-1"
               formControlName="ticksFormatter"
               [globalVariables]="functionScopeVariables"
               [functionArgs]="['value']"
@@ -162,7 +161,7 @@
     <div *ngIf="axisType === 'yAxis'" class="tb-form-panel no-border no-padding-top">
       <div class="tb-form-row space-between column-xs">
         <div translate>widgets.chart.chart-axis.scale</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
           <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
             <input matInput formControlName="min"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
index 1b439e5bea..c7d63e2214 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-grid-settings.component.html
@@ -19,10 +19,9 @@
   <div class="tb-form-panel stroked tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
                          [disabled]="!gridSettingsFormGroup.get('show').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="show" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
             {{ 'widgets.time-series-chart.grid.grid' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -37,7 +36,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div>{{ 'widgets.time-series-chart.grid.border' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput formControlName="borderWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
               <span matSuffix>px</span>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
index a2e11c3a8e..11e93d734f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-state-row.component.html
@@ -33,7 +33,7 @@
     <tb-value-input
         *ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.constant"
         formControlName="sourceValue"
-        fxFlex
+        class="flex-1"
         [layout]="{
                     layout: 'column',
                     breakpoints: {'gt-sm': 'row'}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
index 5db76d1493..6c3e4c481c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-states-panel.component.html
@@ -27,7 +27,7 @@
     </div>
     <div *ngIf="statesFormArray().controls.length; else noStates" class="tb-form-table-body">
       <div *ngFor="let stateControl of statesFormArray().controls; trackBy: trackByState; let $index = index; let $last = last">
-        <tb-time-series-chart-state-row fxFlex
+        <tb-time-series-chart-state-row class="flex-1"
                                         [formControl]="stateControl"
                                         (stateRemoved)="removeState($index)">
         </tb-time-series-chart-state-row>
@@ -42,6 +42,5 @@
   </div>
 </div>
 <ng-template #noStates>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
index 8d8e4a007f..0b95869c2d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
@@ -44,8 +44,8 @@
       <mat-slide-toggle class="mat-slide" formControlName="showLabel">
         {{ 'widgets.time-series-chart.threshold.label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+      <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="labelPosition">
             <mat-option *ngFor="let position of timeSeriesThresholdLabelPositions" [value]="position">
               {{ timeSeriesThresholdLabelPositionTranslations.get(position) | translate }}
@@ -101,7 +101,7 @@
       <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.start-symbol</div>
         <div class="tb-flex row flex-end">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="startSymbol">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
@@ -118,7 +118,7 @@
       <div class="tb-form-row column-xs">
         <div translate>widgets.time-series-chart.threshold.end-symbol</div>
         <div class="tb-flex row flex-end">
-          <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="endSymbol">
               <mat-option *ngFor="let shape of chartShapes" [value]="shape">
                 {{ chartShapeTranslations.get(shape) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
index ba0325da93..eca14627de 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-thresholds-panel.component.html
@@ -29,7 +29,7 @@
     </div>
     <div *ngIf="thresholdsFormArray().controls.length; else noThresholds" class="tb-form-table-body">
       <div *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; let $index = index; let $last = last">
-        <tb-time-series-chart-threshold-row fxFlex
+        <tb-time-series-chart-threshold-row class="flex-1"
                                     [formControl]="thresholdControl"
                                     [hideYAxis]="hideYAxis"
                                     [yAxisIds]="yAxisIds"
@@ -46,6 +46,5 @@
   </div>
 </div>
 <ng-template #noThresholds>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
index d018b638d0..a12e1b3a7f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.html
@@ -36,17 +36,17 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            class="tb-draggable-form-table-row"
            *ngFor="let axisControl of axesFormArray().controls; trackBy: trackByAxis; let $index = index;">
-        <tb-time-series-chart-y-axis-row fxFlex
+        <tb-time-series-chart-y-axis-row class="flex-1"
                                             [formControl]="axisControl"
                                             [advanced]="advanced"
                                             (axisRemoved)="removeAxis($index)">
         </tb-time-series-chart-y-axis-row>
         <div class="tb-form-table-row-cell-buttons">
-          <button fxHide.lt-lg
+          <button class="lt-lg:!hidden"
+                  [class.tb-hidden]="!dragEnabled"
                   mat-icon-button
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
index 28c79a1310..3e4eae3125 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-no-aggregation-bar-width-settings.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div class="tb-form-panel" [class.stroked]="stroked" [formGroup]="barWidthSettingsFormGroup">
-  <div fxLayout="row" fxLayoutAlign="space-between center">
-    <div fxFlex translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
+  <div class="flex flex-row items-center justify-between">
+    <div class="flex-1" translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
     <tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs">
       <tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
         {{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
@@ -46,8 +46,8 @@
 <ng-template #barWidth let-label="label" let-formGroup="formGroup">
   <div class="tb-form-row space-between column-lt-md" [formGroup]="formGroup">
     <div translate>{{ label }}</div>
-    <div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
+    <div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="relative">
           <mat-select-trigger>
             {{ (formGroup.get('relative').value ?
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
index 3bd47d9921..2dccd63a27 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html
@@ -16,9 +16,9 @@
 
 -->
 <ng-container  [formGroup]="colorRangeListFormGroup">
-  <div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode; else basicMode">
-    <div fxFlex class="tb-form-panel-title" translate>widgets.color.settings-type</div>
-    <tb-toggle-select formControlName="advancedMode" fxFlex>
+  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode; else basicMode">
+    <div class="tb-form-panel-title flex-1" translate>widgets.color.settings-type</div>
+    <tb-toggle-select formControlName="advancedMode" class="flex-1">
       <tb-toggle-option [value]="false">
         {{ 'widgets.color.basic-mode' | translate }}
       </tb-toggle-option>
@@ -29,8 +29,8 @@
   </div>
 
   <ng-template #basicMode>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <div fxFlex *ngIf="panelTitle" class="tb-form-panel-title">{{ panelTitle }}</div>
+    <div class="flex flex-row items-center justify-start">
+      <div *ngIf="panelTitle" class="tb-form-panel-title flex-1">{{ panelTitle }}</div>
     </div>
   </ng-template>
 
@@ -41,16 +41,16 @@
         <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              [formGroup]="rangeFormGroup"
              *ngFor="let rangeFormGroup of rangeListFormGroups; trackBy: trackByRange; let $index = index; last as isLast;"
-             [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+             [class.pb-2]="!isLast">
+          <div class="flex flex-1 flex-row items-center justify-start">
             <div class="tb-form-row range-container">
               <div class="tb-value-range-text" translate>widgets.color.from</div>
-              <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="from" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
 
               <div class="tb-value-range-text tb-value-range-text-to" translate>widgets.color.to</div>
-              <mat-form-field fxFlex appearance="outline" class="center number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="center number flex-1" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="to" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
 
@@ -84,7 +84,7 @@
            (cdkDropListDropped)="rangeDrop($event, 'rangeAdvanced')">
         <div cdkDrag class="tb-draggable tb-advanced-range-drag"
              *ngFor="let advancedRangeControl of advancedRangeControls; trackBy: trackByAdvancedRange;let $index = index; last as isLast;"
-             [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             [class.pb-2]="!isLast">
           <tb-advanced-range [formControl]="advancedRangeControl"
                              [aliasController]="aliasController"
                              [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
index 347db57baa..41d847ab1b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.html
@@ -39,7 +39,7 @@
           </div>
         </ng-template>
       </mat-menu>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button mat-button
               color="primary"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
index 7bf97390f4..17195b2d15 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.html
@@ -21,7 +21,7 @@
         [disabled]="disabled"
         #matButton
         (click)="openColorRangeSettingsPopup($event, matButton)">
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="colorStyle"></div>
   </div>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
index f7df367657..5787d6af24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
@@ -17,8 +17,8 @@
 -->
 <div class="tb-color-settings-panel" [formGroup]="colorSettingsFormGroup">
   <div class="tb-color-settings-title" translate>widgets.color.color-settings</div>
-  <div fxLayout="row">
-    <tb-toggle-select formControlName="type" fxFlex.xs fxFlex="70%">
+  <div class="flex flex-row">
+    <tb-toggle-select formControlName="type" class="max-w-70% flex-full xs:flex-1">
       <tb-toggle-option *ngFor="let type of colorTypes"
                         [value]="type">
         {{ colorTypeTranslationsMap.get(type) | translate }}
@@ -31,9 +31,9 @@
                     formControlName="color">
     </tb-color-input>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.constant">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.constant">
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.gradient">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.gradient">
     <tb-gradient class="tb-gradient-panel"
                  formControlName="gradient"
                  [minValue]="minValue"
@@ -45,7 +45,7 @@
                  [popover]="popover">
     </tb-gradient>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.range">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.range">
     <tb-color-range-list class="tb-color-ranges-panel"
                          formControlName="rangeList"
                          panelTitle="{{ 'widgets.color.value-range' | translate }}"
@@ -56,7 +56,7 @@
                          [popover]="popover">
     </tb-color-range-list>
   </div>
-  <div class="tb-color-settings-panel-body" [fxShow]="colorSettingsFormGroup.get('type').value === colorType.function">
+  <div class="tb-color-settings-panel-body" [class.!hidden]="colorSettingsFormGroup.get('type').value !== colorType.function">
     <ng-container *ngTemplateOutlet="function"></ng-container>
   </div>
   <div class="tb-color-settings-panel-buttons">
@@ -66,8 +66,8 @@
             color="primary"
             type="button"
             [matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
-      <span fxHide.xs>{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
-      <span fxHide.gt-xs>{{ 'widgets.color.copy-from' | translate }}</span>
+      <span class="xs:!hidden">{{ 'widgets.color.copy-color-settings-from' | translate }}</span>
+      <span class="gt-xs:!hidden">{{ 'widgets.color.copy-from' | translate }}</span>
     </button>
     <mat-menu #settingsSourcesMenu="matMenu">
       <ng-template matMenuContent let-menuWidth="menuWidth">
@@ -76,7 +76,7 @@
         </div>
       </ng-template>
     </mat-menu>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
index fdfab0173c..487f23774c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.html
@@ -24,7 +24,7 @@
   <tb-icon matButtonIcon *ngIf="modelValue?.type === colorType.function; else colorPreview">mdi:function-variant</tb-icon>
 </button>
 <ng-template #colorPreview>
-  <div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
+  <div class="tb-color-preview box" [class.disabled]="disabled">
     <div class="tb-color-result" [style]="colorStyle"></div>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index 5fb473a821..e5ffbaf972 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -37,7 +37,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.count.label' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -52,11 +52,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
       {{ 'widgets.count.icon' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                iconClearButton
                                [color]="countWidgetConfigForm.get('iconColor').value?.color"
@@ -73,18 +73,18 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIconBackground">
       {{ 'widgets.count.icon-background' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
       <tb-color-settings formControlName="iconBackgroundColor" settingsKey="{{'widgets.count.icon-background' | translate }}">
       </tb-color-settings>
     </div>
   </div>
   <div class="tb-form-row space-between">
     <div translate>widgets.count.value</div>
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row items-center justify-start gap-2">
       <tb-font-settings formControlName="valueFont"
                         previewText="10">
       </tb-font-settings>
@@ -96,11 +96,11 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showChevron">
       {{ 'widgets.count.chevron' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="chevronSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="chevronSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="chevronSizeUnit"></tb-css-unit-select>
       <tb-color-input asBoxInput
                       colorClearButton
                       formControlName="chevronColor">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
index 62c3332fec..b4afb11926 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/css-size-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="cssSizeFormGroup" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div [formGroup]="cssSizeFormGroup" class="flex flex-row items-center justify-start gap-2">
   <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number" [class.flex]="flex">
     <input matInput [required]="required"
            type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
index d5cc9a183e..71dadb99fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.html
@@ -21,7 +21,7 @@
     <mat-chip-row class="tb-datakey-chip" *ngIf="modelValue?.type"
                   [removable]="removable"
                   (removed)="removeKey()">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip">
+      <div class="tb-attribute-chip flex flex-row items-center justify-start gap-1">
         <div class="tb-chip-labels">
           <div class="tb-chip-label tb-chip-text tb-chip-icon">
             <ng-container *ngIf="isEntityDatasource">
@@ -65,7 +65,7 @@
            [required]="required"
            [formControl]="keyFormControl"
            matAutocompleteOrigin
-           [fxHide]="!!modelValue?.type"
+           [class.!hidden]="!!modelValue?.type"
            [readonly]="!!modelValue?.type"
            #origin="matAutocompleteOrigin"
            [matAutocompleteConnectedTo]="origin"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.ts
index 47d093be54..e08ec36d8d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/data-key-input.component.ts
@@ -194,7 +194,7 @@ export class DataKeyInputComponent implements ControlValueAccessor, OnInit, OnCh
         }
       }),
       filter((value) => typeof value === 'string'),
-      map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+      map((value) => value ? value : ''),
       mergeMap(name => this.fetchKeys(name) ),
       share()
     );
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
index 2c7801f149..55cf5482d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
@@ -19,7 +19,7 @@
   <div class="tb-date-format-settings-title" translate>date.custom-date</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>date.format</div>
-    <mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="tb-date-format-input flex-1" required appearance="outline" subscriptSizing="dynamic">
       <input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}">
       <div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
     </mat-form-field>
@@ -27,7 +27,7 @@
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding date-format-preview">
     <div class="fixed-title-width" translate>date.preview</div>
-    <div class="preview-text" fxFlex>{{ previewText }}</div>
+    <div class="preview-text flex-1">{{ previewText }}</div>
   </div>
   <div class="tb-date-format-settings-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
index e897a9de8b..ab18cead4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html
@@ -19,17 +19,17 @@
   <div class="tb-font-settings-title" translate>widgets.widget-font.font-settings</div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.size</div>
-    <div *ngIf="!autoScale" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-      <mat-form-field fxFlex appearance="outline" class="number" subscriptSizing="dynamic">
+    <div *ngIf="!autoScale" class="flex flex-1 flex-row items-center justify-start gap-3">
+      <mat-form-field appearance="outline" class="number flex-1" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="size" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="sizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="sizeUnit"></tb-css-unit-select>
     </div>
     <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-family</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput #familyInput
              formControlName="family" placeholder="{{ 'widget-config.set' | translate }}"
              [matAutocomplete]="familyAutocomplete">
@@ -51,7 +51,7 @@
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-weight</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="weight" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
@@ -63,7 +63,7 @@
   </div>
   <div class="tb-form-row no-border no-padding">
     <div class="fixed-title-width" translate>widgets.widget-font.font-style</div>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <mat-select formControlName="style" placeholder="{{ 'widget-config.set' | translate }}">
         <mat-option [value]="null">
         </mat-option>
@@ -75,7 +75,7 @@
   </div>
   <div class="tb-form-row no-border no-padding" *ngIf="!disabledLineHeight">
     <div class="fixed-title-width" translate>widgets.widget-font.line-height</div>
-    <mat-form-field *ngIf="!autoScale" fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="!autoScale" class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput formControlName="lineHeight" placeholder="{{ 'widget-config.set' | translate }}">
     </mat-form-field>
     <div *ngIf="autoScale" class="tb-font-settings-auto" translate>widgets.widget-font.auto</div>
@@ -83,7 +83,7 @@
   <mat-divider></mat-divider>
   <div class="tb-form-row no-border no-padding font-preview">
     <div class="fixed-title-width" translate>widgets.widget-font.preview</div>
-    <div class="preview-text" fxFlex [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
+    <div class="preview-text flex-1" [style]="previewStyle" [innerHTML]="previewText | safe:'html'"></div>
   </div>
   <div class="tb-font-settings-panel-buttons">
     <button *ngIf="clearButton"
@@ -93,7 +93,7 @@
             [disabled]="clearDisabled()">
       {{ 'action.clear' | translate }}
     </button>
-    <span *ngIf="clearButton" fxFlex></span>
+    <span *ngIf="clearButton" class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
index 1b71225a47..fa71a5deff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.html
@@ -17,9 +17,9 @@
 -->
 <ng-container [formGroup]="gradientFormGroup">
 
-  <div fxLayout="row" fxLayoutAlign="start center" *ngIf="advancedMode">
-    <div fxFlex class="tb-form-panel-title" fxHide.xs translate>widgets.color.gradient-type</div>
-    <tb-toggle-select formControlName="advancedMode" fxFlex>
+  <div class="flex flex-row items-center justify-start" *ngIf="advancedMode">
+    <div class="tb-form-panel-title flex-1 xs:!hidden" translate>widgets.color.gradient-type</div>
+    <tb-toggle-select formControlName="advancedMode" class="flex-1">
       <tb-toggle-option [value]="false">
         {{ 'widgets.color.basic-mode' | translate }}
       </tb-toggle-option>
@@ -41,7 +41,7 @@
           <div translate>widgets.color.gradient-start</div>
           <div class="start-gradient-container">
             <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text" fxHide.xs translate>widgets.color.start-value</div>
+              <div class="gradient-text xs:!hidden" translate>widgets.color.start-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="minValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
@@ -61,7 +61,7 @@
           <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                [formGroup]="gradientFormGroup"
                *ngFor="let gradientFormGroup of gradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               [class.pb-2]="!isLast">
             <div class="gradient">
               <div class="gradient-container">
                 <div translate>widgets.color.gradient-color</div>
@@ -77,8 +77,7 @@
                       matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
               </button>
-              <button class="tb-box-button"
-                      fxHide.lt-lg
+              <button class="tb-box-button lt-lg:!hidden"
                       mat-icon-button
                       type="button"
                       cdkDragHandle
@@ -101,7 +100,7 @@
           <div translate>widgets.color.gradient-end</div>
           <div class="end-gradient-container">
             <div class="tb-form-row no-border no-padding">
-              <div class="gradient-text" fxHide.xs translate>widgets.color.end-value</div>
+              <div class="gradient-text xs:!hidden" translate>widgets.color.end-value</div>
               <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
                 <input matInput type="number" formControlName="maxValue" placeholder="{{ 'widget-config.set' | translate }}">
               </mat-form-field>
@@ -119,11 +118,11 @@
       <div class="gradient" formGroupName="gradientAdvanced">
         <div class="gradient-container gradient-container-start" formGroupName="start">
           <div class="tb-gradient-text">
-            <span fxHide.xs translate>widgets.color.gradient-start</span>
-            <span fxHide fxShow.xs translate>widgets.color.gradient-start-min</span>
+            <span class="xs:!hidden" translate>widgets.color.gradient-start</span>
+            <span class="gt-xs:!hidden" translate>widgets.color.gradient-start-min</span>
           </div>
           <div class="tb-form-row no-border no-padding start-gradient-container start-gradient-container-advanced">
-            <tb-value-source-data-key fxFlex
+            <tb-value-source-data-key class="flex-1"
                                       formControlName="source"
                                       [aliasController]="aliasController"
                                       [dataKeyCallbacks]="dataKeyCallbacks"
@@ -142,15 +141,15 @@
           <div cdkDrag class="tb-form-row no-padding no-border tb-draggable"
                [formGroup]="gradientFormGroup"
                *ngFor="let gradientFormGroup of advancedGradientListFormGroups; trackBy: trackByGradient; let $index = index; last as isLast;"
-               [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               [class.pb-2]="!isLast">
             <div class="gradient">
               <div class="gradient-container">
                 <div class="tb-gradient-text">
-                  <span fxHide.xs translate>widgets.color.gradient-color</span>
-                  <span fxHide fxShow.xs translate>widgets.color.gradient-color-min</span>
+                  <span class="xs:!hidden" translate>widgets.color.gradient-color</span>
+                  <span class="gt-xs:!hidden" translate>widgets.color.gradient-color-min</span>
                 </div>
                 <div class="list-gradient-container list-gradient-container-advanced">
-                  <tb-value-source-data-key fxFlex
+                  <tb-value-source-data-key class="flex-1"
                                             formControlName="source"
                                             [aliasController]="aliasController"
                                             [dataKeyCallbacks]="dataKeyCallbacks"
@@ -169,8 +168,7 @@
                       matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
               </button>
-              <button class="tb-box-button"
-                      fxHide.lt-lg
+              <button class="tb-box-button lt-lg:!hidden"
                       mat-icon-button
                       type="button"
                       cdkDragHandle
@@ -191,11 +189,11 @@
       <div class="gradient" formGroupName="gradientAdvanced">
         <div class="gradient-container gradient-container-end" formGroupName="end">
           <div class="tb-gradient-text">
-            <span fxHide.xs translate>widgets.color.gradient-end</span>
-            <span fxHide fxShow.xs translate>widgets.color.gradient-end-min</span>
+            <span class="xs:!hidden" translate>widgets.color.gradient-end</span>
+            <span class="gt-xs:!hidden" translate>widgets.color.gradient-end-min</span>
           </div>
           <div class="tb-form-row no-border no-padding end-gradient-container end-gradient-container-advanced">
-            <tb-value-source-data-key fxFlex
+            <tb-value-source-data-key class="flex-1"
                                       formControlName="source"
                                       [aliasController]="aliasController"
                                       [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
index 16d88debcf..81ab02442b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/image-cards-select.component.html
@@ -17,10 +17,10 @@
 -->
 <div class="tb-image-cards-select tb-form-panel stroked no-padding">
   <mat-expansion-panel class="tb-settings" [expanded]="expanded" disabled>
-    <mat-expansion-panel-header fxLayout="row wrap">
-      <div fxFlex class="tb-form-row no-border"  [class.expanded]="expanded">
+    <mat-expansion-panel-header class="flex flex-row flex-wrap">
+      <div class="tb-form-row no-border flex-1"  [class.expanded]="expanded">
         <div class="fixed-title-width">{{ label }}</div>
-        <mat-form-field class="tb-image-cards-value-field" fxFlex appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
+        <mat-form-field class="tb-image-cards-value-field flex-1" appearance="outline" subscriptSizing="dynamic" (click)="toggleSelectPanel($event)">
           <input readonly matInput [formControl]="valueFormControl" placeholder="{{ 'widget-config.set' | translate }}">
           <mat-icon matSuffix>{{ expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index 40f26c6e9c..c3dbe49abf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -20,7 +20,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
       {{ 'widgets.status-widget.label' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -33,7 +33,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showStatus">
       {{ 'widgets.status-widget.status' | translate }}
     </mat-slide-toggle>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
       <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="status" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
@@ -46,11 +46,11 @@
     <div class="fixed-title-width">
       {{ 'widgets.status-widget.icon' | translate }}
     </div>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+    <div class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
         <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
-      <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+      <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
       <tb-material-icon-select asBoxInput
                                formControlName="icon">
       </tb-material-icon-select>
@@ -58,24 +58,24 @@
   </div>
   <div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
     <div>{{ 'widgets.status-widget.color-palette' | translate }}</div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
-         [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
-         style="gap: 12px;">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
+         [class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
+         [class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColor">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
+      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColor">
         </tb-color-input>
       </div>
-      <mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
         <tb-background-settings formControlName="background">
         </tb-background-settings>
@@ -84,24 +84,24 @@
   </div>
   <div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
     <div>{{ 'widgets.status-widget.disabled-color-palette' | translate }}</div>
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
-         [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
-         style="gap: 12px;">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
+         [class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
+         [class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
-      <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
+      <div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
         <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColorDisabled">
         </tb-color-input>
       </div>
-      <mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
+      <div class="flex flex-row items-center justify-start gap-2">
         <div translate>widgets.status-widget.background</div>
         <tb-background-settings formControlName="backgroundDisabled">
         </tb-background-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
index eb056bd056..c8a0c5cb2a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
@@ -21,7 +21,7 @@
     <ng-container *ngFor="let behaviorGroup of behaviorGroups">
       <div *ngIf="behaviorGroup.title" class="tb-form-panel stroked">
         <mat-expansion-panel class="tb-settings" expanded>
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex flex-row flex-wrap">
             <mat-panel-title>
               <div class="tb-form-panel-title">{{ behaviorGroup.title | customTranslate }}</div>
             </mat-panel-title>
@@ -36,7 +36,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div [fxShow]="propertyRows?.length || appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
+  <div [class.!hidden]="!propertyRows?.length && !appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div #appearanceProperties><ng-content select=".tb-scada-symbol-appearance-properties"></ng-content></div>
     <div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass">
@@ -49,7 +49,7 @@
           <div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
           <mat-form-field  *ngIf="property.type === ScadaSymbolPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="{{ property.id }}" [required]="property.required" placeholder="{{ 'widget-config.set' | translate }}">
-            <div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
+            <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
           </mat-form-field>
           <tb-color-input *ngIf="property.type === ScadaSymbolPropertyType.color"
                           [required]="property.required"
@@ -67,7 +67,7 @@
             <input matInput formControlName="{{ property.id }}" [required]="property.required"
                    [min]="property.min" [max]="property.max" [step]="property.step"
                    type="number" placeholder="{{ 'widget-config.set' | translate }}">
-            <div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
+            <div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
           </mat-form-field>
           <tb-font-settings *ngIf="property.type === ScadaSymbolPropertyType.font"
                             [class]="property.fieldClass"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
index 24c8564ffb..369be37bba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html
@@ -17,7 +17,7 @@
 -->
 
 <div class="tb-form-row no-border no-padding column-xs" style="gap: 10px;" [formGroup]="valueSourceFormGroup">
-  <mat-form-field fxFlex="33" fxFlex.xs appearance="outline" subscriptSizing="dynamic">
+  <mat-form-field class="gt-xs:max-w-33% gt-xs:flex-full xs:flex-1" appearance="outline" subscriptSizing="dynamic">
     <mat-select formControlName="valueSource">
       <mat-option [value]="'predefinedValue'">
         {{ 'widgets.value-source.predefined-value' | translate }}
@@ -27,13 +27,13 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'predefinedValue'"
+  <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'predefinedValue'"
                   appearance="outline"
                   class="number flex"
                   subscriptSizing="dynamic">
     <input matInput formControlName="value" type="number" placeholder="{{ 'widgets.value-source.value' | translate }}">
   </mat-form-field>
-  <mat-form-field [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'"
+  <mat-form-field [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'"
                   appearance="outline"
                   class="flex"
                   subscriptSizing="dynamic">
@@ -53,7 +53,7 @@
       </mat-option>
     </mat-autocomplete>
   </mat-form-field>
-  <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [fxShow]="valueSourceFormGroup.get('valueSource').value === 'entityAttribute'">
+  <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" [class.!hidden]="valueSourceFormGroup.get('valueSource').value !== 'entityAttribute'">
     <input matInput type="text" placeholder="{{ entityAttributePlaceholder | translate }}"
            #keyInput
            formControlName="attribute"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 38b71bf638..f192352d83 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section [formGroup]="widgetFontFormGroup" fxLayout="column">
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-    <mat-form-field fxFlex class="mat-block">
+<section [formGroup]="widgetFontFormGroup" class="flex flex-col">
+  <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-family</mat-label>
       <input matInput formControlName="family">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>{{ sizeTitle }}</mat-label>
       <input matInput type="number" min="1" step="1" formControlName="size">
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-    <mat-form-field fxFlex class="mat-block">
+  <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-style</mat-label>
       <mat-select formControlName="style">
         <mat-option [value]="'normal'">
@@ -41,7 +41,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.widget-font.font-weight</mat-label>
       <mat-select formControlName="weight">
         <mat-option [value]="'normal'">
@@ -68,16 +68,16 @@
       </mat-select>
     </mat-form-field>
   </section>
-  <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+  <section class="flex flex-row xs:flex-col gt-xs:gap-2">
     <tb-color-input
-      fxFlex
+      class="flex-1"
       formControlName="color"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <tb-color-input
       *ngIf="hasShadowColor"
-      fxFlex
+      class="flex-1"
       formControlName="shadowColor"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
index 977a493c5f..668613012e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex [appearance]="inlineField ? 'outline': 'fill'"
+<mat-form-field class="flex-1" [appearance]="inlineField ? 'outline': 'fill'"
                 [subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
                 [class]="{'tb-inline-field': inlineField, 'flex': inlineField,
                           'tb-suffix-absolute': (inlineField && !deviceKeyFormGroup.get('key').value)}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
index 43e70f8810..c8178c1c68 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/knob-control-widget-settings.component.html
@@ -15,61 +15,61 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="knobControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="knobControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.knob-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.initial-value</mat-label>
       <input matInput type="number" formControlName="initialValue">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.min-value</mat-label>
         <input required matInput type="number" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.max-value</mat-label>
         <input required matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.get-value-method</mat-label>
       <input required matInput formControlName="getValueMethod">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.set-value-method</mat-label>
       <input required matInput formControlName="setValueMethod">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="knobControlWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
index fa66dd6be1..1810813d89 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="ledIndicatorWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="ledIndicatorWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.led-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <tb-color-input fxFlex
+    <tb-color-input class="flex-1"
                     formControlName="ledColor"
                     icon="format_color_fill"
                     label="{{ 'widgets.rpc.led-color' | translate }}" openOnInput colorClearButton>
@@ -38,7 +38,7 @@
       <mat-slide-toggle formControlName="performCheckStatus" class="slide-block">
         {{ 'widgets.rpc.perform-rpc-status-check' | translate }}
       </mat-slide-toggle>
-      <mat-form-field [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="mat-block flex-1">
         <mat-label translate>widgets.rpc.retrieve-led-status-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'attribute'">
@@ -49,8 +49,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <tb-device-key-autocomplete fxFlex
-                                  [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
+      <tb-device-key-autocomplete class="flex-1"
+                                  [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
                                   [aliasController]="aliasController"
                                   [targetDevice]="targetDevice"
                                   [keyType]="ledIndicatorWidgetSettingsForm.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
@@ -59,7 +59,7 @@
                                   required
                                   formControlName="valueAttribute">
       </tb-device-key-autocomplete>
-      <mat-form-field [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="flex-1 mat-block">
         <mat-label translate>widgets.rpc.check-status-method</mat-label>
         <input required matInput formControlName="checkStatusMethod">
       </mat-form-field>
@@ -71,28 +71,28 @@
       </tb-js-func>
     </fieldset>
   </fieldset>
-  <fieldset [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
+  <fieldset [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="ledIndicatorWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 6bb7428b7f..229cb21adc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="persistentTableWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="persistentTableWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <section fxLayout="column" fxFlex>
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <section class="flex flex-1 flex-col">
         <mat-checkbox formControlName="enableFilter">
           {{ 'widgets.persistent-table.enable-filter' | translate }}
         </mat-checkbox>
       </section>
-      <section fxLayout="column" fxFlex>
+      <section class="flex flex-1 flex-col">
         <mat-checkbox formControlName="enableStickyHeader">
           {{ 'widgets.persistent-table.enable-sticky-header' | translate }}
         </mat-checkbox>
@@ -33,8 +33,8 @@
         </mat-checkbox>
       </section>
     </section>
-    <section fxLayout="column" fxLayoutGap.gt-xs="8px">
-      <mat-slide-toggle fxFlex formControlName="displayDetails">
+    <section class="flex flex-col gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1" formControlName="displayDetails">
         {{ 'widgets.persistent-table.display-request-details' | translate }}
       </mat-slide-toggle>
       <mat-slide-toggle formControlName="allowSendRequest">
@@ -43,16 +43,16 @@
       <mat-slide-toggle formControlName="allowDelete">
         {{ 'widgets.persistent-table.allow-delete-request' | translate }}
       </mat-slide-toggle>
-      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-        <mat-slide-toggle fxFlex formControlName="displayPagination">
+      <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+        <mat-slide-toggle class="flex-1" formControlName="displayPagination">
           {{ 'widgets.table.display-pagination' | translate }}
         </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.table.default-page-size</mat-label>
           <input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
         </mat-form-field>
       </section>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.table.default-sort-order</mat-label>
         <input matInput formControlName="defaultSortOrder">
       </mat-form-field>
@@ -60,7 +60,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.columns-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.persistent-table.display-columns</mat-label>
       <mat-chip-grid #columnsChipList class="tb-drop-list"
                      required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
index bf5d120732..461020f887 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="roundSwitchWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="roundSwitchWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
index c424886e8f..ed55cd5344 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcButtonStyleFormGroup" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcButtonStyleFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.button-style</legend>
     <mat-slide-toggle formControlName="isRaised" class="slide-block">
@@ -24,13 +24,13 @@
     <mat-slide-toggle formControlName="isPrimary" class="slide-block">
       {{ 'widgets.rpc.button-primary' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-color-input fxFlex
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <tb-color-input class="flex-1"
                       formControlName="textColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-text-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
-      <tb-color-input fxFlex
+      <tb-color-input class="flex-1"
                       formControlName="bgColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-background-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
index 4c7fc9b3d7..352f7fc02c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcShellWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcShellWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
index df613761d2..a2391ad2d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
@@ -15,29 +15,29 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="rpcTerminalWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="rpcTerminalWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="rpcTerminalWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
index 294ff3ae38..f1e77d991e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="sendRpcWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
@@ -32,7 +32,7 @@
     <mat-checkbox formControlName="oneWayElseTwoWay">
       {{ 'widgets.rpc.is-one-way-command' | translate }}
     </mat-checkbox>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.rpc-method</mat-label>
       <input matInput formControlName="methodName">
     </mat-form-field>
@@ -42,7 +42,7 @@
       validateOnChange
       formControlName="methodParams">
     </tb-json-content>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -52,19 +52,19 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="sendRpcWidgetSettingsForm.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index 2709266f2f..3f87cd6734 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -42,7 +42,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
                                     [aliasController]="aliasController"
                                     [targetDevice]="targetDevice"
@@ -51,7 +51,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -85,7 +85,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
         {{ 'widgets.single-switch.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -102,11 +102,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
         {{ 'widgets.single-switch.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  iconClearButton
                                  [color]="singleSwitchWidgetSettingsForm.get('iconColor').value?.color"
@@ -134,22 +134,22 @@
     <div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="switchColorDisabled">
@@ -159,22 +159,22 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.on</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOn">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.off</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorOff">
           </tb-color-input>
         </div>
-        <mat-divider vertical fxHide.lt-sm></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <mat-divider vertical class="lt-sm:!hidden"></mat-divider>
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.single-switch.disabled</div>
           <tb-color-input asBoxInput
                           formControlName="tumblerColorDisabled">
@@ -186,7 +186,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
         {{ 'widgets.single-switch.on-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -203,7 +203,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
         {{ 'widgets.single-switch.off-label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 1bf741eba7..abaaf4c7a4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="slideToggleWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.label-position</mat-label>
         <mat-select formControlName="labelPosition">
           <mat-option [value]="'before'">
@@ -34,7 +34,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.slider-color</mat-label>
         <mat-select formControlName="sliderColor">
           <mat-option [value]="'primary'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index 709741b565..a8dd71168e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -30,7 +30,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
-      <tb-set-value-action-settings fxFlex
+      <tb-set-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
                                     [valueType]="valueType.DOUBLE"
                                     [aliasController]="aliasController"
@@ -40,7 +40,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -88,11 +88,11 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-          <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+          <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
         </mat-form-field>
         <tb-font-settings formControlName="valueFont"
                           [previewText]="valuePreviewFn">
@@ -105,7 +105,7 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.range' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.slider.min</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
@@ -120,7 +120,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTicks">
         {{ 'widgets.slider.range-ticks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="ticksFont"
                           previewText="100">
         </tb-font-settings>
@@ -134,7 +134,7 @@
       <mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
         {{ 'widgets.slider.tick-marks' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="tickMarksCount" type="number" min="2"
                  step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -146,15 +146,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.slider.colors' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColor">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColor">
@@ -164,15 +164,15 @@
     </div>
     <div class="tb-form-row space-between column-xs">
       <div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-3">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.main</div>
           <tb-color-input asBoxInput
                           formControlName="mainColorDisabled">
           </tb-color-input>
         </div>
         <mat-divider vertical></mat-divider>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div translate>widgets.slider.background</div>
           <tb-color-input asBoxInput
                           formControlName="backgroundColorDisabled">
@@ -185,11 +185,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.left-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetSettingsForm.get('leftIconColor').value"
                                  formControlName="leftIcon">
@@ -204,11 +204,11 @@
       <div class="fixed-title-width">
         {{ 'widgets.slider.right-icon' | translate }}
       </div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
+        <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
-        <tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
+        <tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
         <tb-material-icon-select asBoxInput
                                  [color]="sliderWidgetSettingsForm.get('rightIconColor').value"
                                  formControlName="rightIcon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
index f50ec5c903..70bbe2a3d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="switchControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="switchControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
index 12a722c77a..23a4a62d93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="switchRpcSettingsFormGroup" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="switchRpcSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.value-settings</legend>
     <mat-checkbox formControlName="initialValue">
@@ -23,7 +23,7 @@
     </mat-checkbox>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.retrieve-value-settings</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.retrieve-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'none'">
@@ -40,20 +40,20 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <tb-device-key-autocomplete fxFlex
-        [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ||
-                  switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'timeseries'"
+      <tb-device-key-autocomplete class="flex-1"
+        [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'attribute' &&
+                         switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'timeseries'"
         [aliasController]="aliasController"
         [targetDevice]="targetDevice"
         [keyType]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
         required
         formControlName="valueKey">
       </tb-device-key-autocomplete>
-      <mat-form-field [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'rpc'" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'rpc'" class="mat-block flex-1">
         <mat-label translate>widgets.rpc.get-value-method</mat-label>
         <input required matInput formControlName="getValueMethod">
       </mat-form-field>
-      <tb-js-func [fxHide]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
+      <tb-js-func [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
         formControlName="parseValueFunction"
         [globalVariables]="functionScopeVariables"
         [functionArgs]="['data']"
@@ -63,7 +63,7 @@
     </fieldset>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.update-value-settings</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.rpc.set-value-method</mat-label>
         <input required matInput formControlName="setValueMethod">
       </mat-form-field>
@@ -78,26 +78,26 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="switchRpcSettingsFormGroup.get('requestPersistent').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.rpc.request-persistent' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
index 4ff423c352..401bccc469 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDeviceAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.device-attribute-scope</mat-label>
       <mat-select formControlName="entityAttributeType">
         <mat-option [value]="'SERVER_SCOPE'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
index 3f9e23c81a..f373fffba0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
@@ -15,23 +15,23 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="dateRangeNavigatorWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="dateRangeNavigatorWidgetSettingsForm">
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.date-range-navigator.date-range-picker-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hidePicker').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="hidePicker" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.date-range-navigator.hide-date-range-picker' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxFlex>
+        <section class="flex flex-1 flex-col">
           <mat-checkbox formControlName="onePanel">
             {{ 'widgets.date-range-navigator.picker-one-panel' | translate }}
           </mat-checkbox>
@@ -41,7 +41,7 @@
           <mat-checkbox formControlName="showTemplate">
             {{ 'widgets.date-range-navigator.picker-show-template' | translate }}
           </mat-checkbox>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.date-range-navigator.first-day-of-week</mat-label>
             <input matInput type="number" min="1" max="7" step="1" formControlName="firstDayOfWeek">
           </mat-form-field>
@@ -52,19 +52,19 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.date-range-navigator.interval-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hideInterval').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="hideInterval" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.date-range-navigator.hide-interval' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.date-range-navigator.initial-interval</mat-label>
           <mat-select formControlName="initialInterval">
             <mat-option [value]="'hour'">
@@ -96,19 +96,19 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.date-range-navigator.step-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hideStepSize').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="hideStepSize" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.date-range-navigator.hide-step-size' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.date-range-navigator.initial-step-size</mat-label>
           <mat-select formControlName="stepSize">
             <mat-option [value]="'hour'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html
index ebd05b1bc3..ce54e09f1d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-hierarchy-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="entitiesHierarchyWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="entitiesHierarchyWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.entities-hierarchy.hierarchy-data-settings</legend>
     <tb-js-func formControlName="nodeRelationQueryFunction"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html
index 3f5fb7c698..369b675977 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-key-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.column-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.custom-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="customTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -62,14 +62,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -86,14 +85,13 @@
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useCellContentFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-cell-content-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
index 64fa8d8b8f..c5f69691cc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.table.table-header</div>
     <div class="tb-form-row">
       <div class="fixed-title-width">{{ 'widgets.table.entities-table-title' | translate }}</div>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="entitiesTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -45,7 +45,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="displayEntityName">
         {{ 'widgets.table.display-entity-name' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="entityNameColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -53,7 +53,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="displayEntityLabel">
         {{ 'widgets.table.display-entity-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
         <input matInput formControlName="entityLabelColumnTitle" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
@@ -70,7 +70,7 @@
         {{ 'widgets.table.show-cell-actions-menu-mobile' | translate }}
       </mat-slide-toggle>
     </div>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
       <mat-select formControlName="reserveSpaceForHiddenAction">
         <mat-option [value]="'true'">
@@ -81,7 +81,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field fxFlex subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
       <mat-label translate>widgets.table.default-sort-order</mat-label>
       <input matInput formControlName="defaultSortOrder">
     </mat-form-field>
@@ -101,14 +101,13 @@
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>
     <mat-expansion-panel class="tb-settings" [expanded]="entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.table.use-row-style-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
index eb538bfc30..a4ce3ea8f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gatewayConfigSingleDeviceWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigSingleDeviceWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.gateway.gateway-title</mat-label>
     <input matInput formControlName="gatewayTitle">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
index 7a52be1a5a..76883cb037 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
@@ -15,29 +15,29 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gatewayConfigWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.default-archive-file-name</mat-label>
       <input matInput formControlName="archiveFileName">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.device-type-for-new-gateway</mat-label>
       <input matInput formControlName="gatewayType">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.messages-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.save-config-success-message</mat-label>
       <input matInput formControlName="successfulSave">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.gateway.device-name-exists-message</mat-label>
       <input matInput formControlName="gatewayNameExists">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
index 7b2056ed5c..9a11918e00 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gatewayEventsWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gatewayEventsWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.gateway.events-title</mat-label>
     <input matInput formControlName="eventsTitle">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block" floatLabel="always">
+  <mat-form-field class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.gateway.events-filter</mat-label>
     <mat-chip-grid #chipList formControlName="eventsReg">
       <mat-chip-row
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
index 4fc4ff9fd6..ed80d1e479 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
@@ -20,7 +20,7 @@
     <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="isConnectorLog">
       {{ "widgets.gateway.show-connector" | translate }}
     </mat-slide-toggle>
-    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
       <input matInput formControlName="connectorLogState" placeholder="{{ 'widgets.gateway.connector-state-param-key' | translate }}">
     </mat-form-field>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
index b5c16ccd15..8ebcceb459 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
@@ -20,10 +20,10 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.gauge.labels</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-string-items-list
           style="display: flex"
-          fxFlex
+          class="flex-1"
           appearance="outline"
           subscriptSizing="dynamic"
           editable
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.label-style</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="majorTickFont"
                           disabledLineHeight>
         </tb-font-settings>
@@ -53,7 +53,7 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.minor-ticks</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="minorTicks">
         </mat-form-field>
@@ -84,7 +84,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder">
         {{ 'widgets.gauge.show-plate-border' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="borderOuterWidth" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -100,7 +100,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.needle-circle</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="needleCircleSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -121,21 +121,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueCompassWidgetSettingsForm.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widgets.gauge.animation-target</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select formControlName="animationTarget">
               <mat-option [value]="'needle'">
                 {{ 'widgets.gauge.animation-target-needle' | translate }}
@@ -148,7 +147,7 @@
         </div>
         <div class="tb-form-row space-between">
           <div translate>widgets.gauge.animation-duration-rule</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index 61612be854..64859bfaac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -29,7 +29,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.ticks</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -50,7 +50,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.major-ticks-count</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="majorTicksCount" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -63,7 +63,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div translate>widgets.gauge.minor-ticks-count</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minorTicks" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
         {{ 'widgets.gauge.units-title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -98,7 +98,7 @@
 
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="unitsFont"
                           disabledLineHeight>
         </tb-font-settings>
@@ -112,14 +112,13 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('valueBox').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="valueBox" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="valueBox" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.value-box' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -134,7 +133,7 @@
           <div class="tb-form-panel-title" translate>widgets.gauge.value-text</div>
           <div class="tb-form-row space-between">
             <div translate>widgets.gauge.value-text</div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-font-settings formControlName="valueFont"
                                 disabledLineHeight>
               </tb-font-settings>
@@ -245,7 +244,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.scale-settings</div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.scale</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="highlightsWidth">
         </mat-form-field>
@@ -257,21 +256,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div translate>widgets.gauge.animation-duration-rule</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -350,7 +348,7 @@
     <div class="tb-form-panel-title" translate>widgets.gauge.linear-gauge-settings</div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.bar-stroke</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="barStrokeWidth" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index 173d2102d6..b5735cc017 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -43,7 +43,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showMinMax">
         {{ 'widgets.gauge.min-and-max-label' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="minMaxFont"
                           disabledLineHeight
                           [previewText]="previewFn">
@@ -57,7 +57,7 @@
 
     <div class="tb-form-row space-between column-xs">
       <div class="fixed-title-width">{{ 'widgets.gauge.min-and-max-value' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -81,7 +81,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.gauge.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="valueFont"
                           disabledLineHeight
                           [previewText]="valuePreviewFn">
@@ -97,7 +97,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.gauge.label' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -126,12 +126,12 @@
         <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
           {{ 'widgets.gauge.show-timestamp' | translate }}
         </mat-slide-toggle>
-        <tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="timestampFormat"></tb-date-format-select>
+        <tb-date-format-select class="flex-1" excludeLastUpdateAgo formControlName="timestampFormat"></tb-date-format-select>
       </div>
 
       <div class="tb-form-row space-between column-xs">
         <div class="fixed-title-width">{{ 'widgets.gauge.font' | translate }}</div>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="flex flex-row items-center justify-start gap-2">
           <tb-font-settings formControlName="labelFont"
                             disabledLineHeight
                             [previewText]="valuePreviewFn">
@@ -200,21 +200,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="digitalGaugeWidgetSettingsForm.get('showTicks').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTicks" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTicks" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.ticks' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between column-xs">
           <div class="fixed-title-width">{{ 'widgets.gauge.tick-width-and-color' | translate }}</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="tickWidth" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
@@ -228,17 +227,16 @@
           <div class="tb-form-panel-title" translate>widgets.gauge.tick-values</div>
           <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
                (cdkDropListDropped)="tickValueDrop($event)">
-            <div cdkDrag class="tb-draggable" *ngFor="let tickValueControl of tickValuesFormArray().controls; trackBy: trackByTickValue;
-              let $index = index; last as isLast;" fxLayout="row" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-                <tb-tick-value fxFlex
+            <div cdkDrag class="tb-draggable flex flex-row" *ngFor="let tickValueControl of tickValuesFormArray().controls; trackBy: trackByTickValue;
+              let $index = index; last as isLast;" [class.pb-2]="!isLast">
+                <tb-tick-value class="flex-1"
                                [formControl]="tickValueControl"
                                [aliasController]="aliasController"
                                [dataKeyCallbacks]="dataKeyCallbacks"
                                [datasource]="datasource"
                                (removeTickValue)="removeTickValue($index)">
                 </tb-tick-value>
-                <button class="tb-box-button"
-                        fxHide.lt-lg
+                <button class="tb-box-button lt-lg:!hidden"
                         mat-icon-button
                         type="button"
                         cdkDragHandle
@@ -249,7 +247,7 @@
             </div>
           </div>
           <div *ngIf="!tickValuesFormArray().controls.length">
-            <span translate fxLayoutAlign="center center" class="tb-prompt">widgets.gauge.no-tick-values</span>
+            <span translate class="tb-prompt flex items-center justify-center">widgets.gauge.no-tick-values</span>
           </div>
           <div style="padding-top: 16px;">
             <button mat-stroked-button color="primary"
@@ -266,21 +264,20 @@
 
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="digitalGaugeWidgetSettingsForm.get('animation').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
             {{ 'widgets.gauge.enable-animation' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex max-w-40% flex-full items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div class="tb-form-row space-between">
           <div translate>widgets.gauge.animation-duration-rule</div>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
               <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
index 7155ad8d5e..a36f744bcd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html
@@ -16,8 +16,8 @@
 
 -->
 
-<div fxLayout="row" [formGroup]="tickValueFormGroup">
-  <tb-value-source-data-key fxFlex
+<div class="flex flex-row" [formGroup]="tickValueFormGroup">
+  <tb-value-source-data-key class="flex-1"
                             formControlName="tickValue"
                             [aliasController]="aliasController"
                             [dataKeyCallbacks]="dataKeyCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
index 559854c50c..377fcd6ddd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gpioControlWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gpioControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gpio.panel-settings</legend>
     <tb-color-input
@@ -26,11 +26,11 @@
     </tb-color-input>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.gpio.gpio-switches</legend>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <div class="tb-control-list">
           <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
                  let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               class="flex flex-col" [class.pb-2]="!isLast">
             <tb-gpio-item [formControl]="gpioItemControl"
                           [expanded]="gpioItemControl.new"
                           (removeGpioItem)="removeGpioItem($index)">
@@ -38,8 +38,8 @@
           </div>
         </div>
         <div *ngIf="!gpioListFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.gpio.no-gpio-switches</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-switches</span>
         </div>
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
@@ -53,13 +53,13 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group" formGroupName="gpioStatusRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-request</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
@@ -73,7 +73,7 @@
     </fieldset>
     <fieldset class="fields-group" formGroupName="gpioStatusChangeRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-change-request</legend>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
index 53dcb0ad9a..e3ef6af85a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="gpio-item" fxFlex [formGroup]="gpioItemFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="gpio-item flex-1" [formGroup]="gpioItemFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ gpioItemFormGroup.value.label || 'Undefined' }} (</span><small>pin:</small>
             <span>{{ numberText(gpioItemFormGroup.value.pin, 0) }}) - [</span><small>row:</small>
@@ -27,11 +27,11 @@
             <span>{{ numberText(gpioItemFormGroup.value.col, -1) }}]</span>
           </div>
           <div *ngIf="hasColor" class="tb-color-preview" style="margin-left: 6px;">
-            <div class="tb-color-result" [ngStyle]="{background: gpioItemFormGroup.get('color').value}"></div>
+            <div class="tb-color-result" [style.background]="gpioItemFormGroup.get('color').value"></div>
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeGpioItem.emit()"
@@ -42,25 +42,25 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
+          <mat-form-field class="mat-block flex=1">
             <mat-label translate>widgets.gpio.pin</mat-label>
             <input required matInput type="number" min="1" step="1" formControlName="pin">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.label</mat-label>
             <input required matInput formControlName="label">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.row</mat-label>
             <input required matInput type="number" min="0" step="1" formControlName="row">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.gpio.column</mat-label>
             <input required matInput type="number" min="0" max="1" step="1" formControlName="col">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
index 7a0c15467a..fe1d8ce226 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-panel-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="gpioPanelWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="gpioPanelWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gpio.panel-settings</legend>
     <tb-color-input
@@ -26,11 +26,11 @@
     </tb-color-input>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.gpio.gpio-leds</legend>
-      <div fxLayout="column">
+      <div class="flex flex-col">
         <div class="tb-control-list">
           <div *ngFor="let gpioItemControl of gpioListFormArray().controls; trackBy: trackByGpioItem;
                  let $index = index; last as isLast;"
-               fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+               class="flex flex-col" [class.pb-2]="!isLast">
             <tb-gpio-item [formControl]="gpioItemControl"
                           [hasColor]="true"
                           [expanded]="gpioItemControl.new"
@@ -39,8 +39,8 @@
           </div>
         </div>
         <div *ngIf="!gpioListFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.gpio.no-gpio-leds</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.gpio.no-gpio-leds</span>
         </div>
         <div style="padding-top: 16px;">
           <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
index d001b2c23a..6b4ab4ae75 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="docLinksWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="docLinksWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.documentation.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
index 91a3bb3bfa..896983690c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="quickLinksWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="quickLinksWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.quick-links.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
index 572c50c392..79e7db6f6b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
@@ -40,7 +40,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
         {{ 'widgets.battery-level.value' | translate }}
       </mat-slide-toggle>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <mat-chip-listbox formControlName="autoScaleValueSize">
           <mat-chip-option [value]="true">{{ 'widgets.battery-level.auto-scale' | translate }}</mat-chip-option>
         </mat-chip-listbox>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index f4a1c9c6cb..a1aae64747 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -18,7 +18,7 @@
 <ng-container *ngIf="levelCardWidgetSettingsForm"  [formGroup]="levelCardWidgetSettingsForm">
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
-      <div fxFlex fxLayout="column" class="tb-form-row space-between">
+      <div class="tb-form-row space-between flex flex-1 flex-col">
         <div class="tb-flex row space-between align-center no-gap fill-width">
           <div class="fixed-title-width" translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
@@ -28,7 +28,7 @@
           </tb-toggle-select>
         </div>
         <tb-image-cards-select #shapesImageCardsSelect
-                               [fxShow]="levelCardWidgetSettingsForm.get('tankSelectionType').value === DataSourceType.static"
+                               [class.!hidden]="levelCardWidgetSettingsForm.get('tankSelectionType').value !== DataSourceType.static"
                                rowHeight="1:1"
                                [cols]="{columns: 5,
                                     breakpoints: {
@@ -122,7 +122,7 @@
             </mat-select>
           </mat-form-field>
           <mat-form-field *ngIf="levelCardWidgetSettingsForm.get('volumeSource').value ===  DataSourceType.static; else volumeAttributes"
-                          appearance="outline" class="flex number" subscriptSizing="dynamic">
+                          appearance="outline" class="number flex" subscriptSizing="dynamic">
             <input matInput formControlName="volumeConstant" type="number"
                    min="0.1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-icon matSuffix
@@ -143,7 +143,7 @@
           </ng-template>
         </div>
       </div>
-      <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
+      <div class="tb-form-row space-between column-xs" [class.!hidden]="!volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
         <div class="tb-flex row flex-start align-center">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
@@ -225,10 +225,9 @@
       <mat-expansion-panel class="tb-settings"
                            [expanded]="levelCardWidgetSettingsForm.get('showTooltip').value"
                            [disabled]="!levelCardWidgetSettingsForm.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widget-config.tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
@@ -242,10 +241,10 @@
               <tb-unit-input [tagFilter]="unitsType.capacity"
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
-              <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
                 <input matInput formControlName="tooltipLevelDecimals" type="number" min="0"
                        max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-                <div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
+                <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
               </mat-form-field>
               <tb-font-settings formControlName="tooltipLevelFont"
                                 [previewText]="tooltipValuePreviewFn">
@@ -259,7 +258,7 @@
               {{ 'widgets.value-card.date' | translate }}
             </mat-slide-toggle>
             <div class="tb-flex row flex-start align-center">
-              <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+              <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
               </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
index 7124ee0f02..2cc8624bea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.html
@@ -34,8 +34,8 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showDate">
         {{ 'widgets.signal-strength.date' | translate }}
       </mat-slide-toggle>
-      <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-date-format-select fxFlex formControlName="dateFormat"></tb-date-format-select>
+      <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+        <tb-date-format-select class="flex-1" formControlName="dateFormat"></tb-date-format-select>
         <tb-font-settings formControlName="dateFont"
                           [previewText]="datePreviewFn">
         </tb-font-settings>
@@ -79,10 +79,9 @@
   <div class="tb-form-panel tb-slide-toggle">
     <mat-expansion-panel class="tb-settings" [expanded]="signalStrengthWidgetSettingsForm.get('showTooltip').value"
                          [disabled]="!signalStrengthWidgetSettingsForm.get('showTooltip').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showTooltip" (click)="$event.stopPropagation()">
             {{ 'widget-config.tooltip' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
@@ -92,7 +91,7 @@
           <mat-slide-toggle class="mat-slide" formControlName="showTooltipValue">
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-font-settings formControlName="tooltipValueFont"
                               [previewText]="tooltipValuePreviewFn">
             </tb-font-settings>
@@ -106,8 +105,8 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'tooltip.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
+          <div class="flex flex-row items-center justify-start gap-2 gt-xs:flex-1">
+            <tb-date-format-select class="flex-1" formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="tooltipDatePreviewFn">
             </tb-font-settings>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 892311733c..7102c01200 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -20,7 +20,7 @@
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
@@ -33,7 +33,7 @@
     </div>
     <div class="tb-form-row">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
-      <tb-get-value-action-settings fxFlex
+      <tb-get-value-action-settings class="flex-1"
                                     panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
                                     [valueType]="valueType.BOOLEAN"
                                     stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
@@ -60,7 +60,7 @@
     </tb-image-cards-select>
   </div>
   <div class="tb-form-panel">
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="tb-form-panel-title" translate>widget-config.card-style</div>
       <tb-toggle-select [(ngModel)]="cardStyleMode"
                         [ngModelOptions]="{ standalone: true }">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
index a92f7744e0..a5995b7a65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<mat-expansion-panel class="datakey-select-option" fxFlex [formGroup]="selectOptionFormGroup" [(expanded)]="expanded">
+<mat-expansion-panel class="datakey-select-option flex-1" [formGroup]="selectOptionFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row items-center justify-start">
       <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+        <div class="flex flex-1 flex-row items-center justify-start">
           <div>
             <span>{{ selectOptionFormGroup.value.value || 'Undefined' }} </span>
             <span *ngIf="selectOptionFormGroup.value.label">(<small>{{ selectOptionFormGroup.value.label }}</small>)</span>
           </div>
         </div>
       </mat-panel-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
               (click)="removeSelectOption.emit()"
@@ -37,15 +37,15 @@
     </div>
   </mat-expansion-panel-header>
   <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
+    <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex class="mat-block">
+      <section class="tb-widget-settings flex flex-col">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.option-value</mat-label>
             <input required matInput formControlName="value">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.option-label</mat-label>
             <input matInput formControlName="label">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
index f233851bd3..b6aa490c98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
@@ -15,14 +15,14 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="deviceClaimingWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="deviceClaimingWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-button-label</mat-label>
       <input matInput formControlName="labelClaimButon">
     </mat-form-field>
@@ -33,24 +33,24 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.input-widgets.labels-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="deviceClaimingWidgetSettingsForm.get('showLabel').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.input-widgets.show-labels' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.device-name-label</mat-label>
             <input matInput formControlName="deviceLabel">
           </mat-form-field>
-          <mat-form-field [fxShow]="deviceClaimingWidgetSettingsForm.get('deviceSecret').value" fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
             <mat-label translate>widgets.input-widgets.secret-key-label</mat-label>
             <input matInput formControlName="secretKeyLabel">
           </mat-form-field>
@@ -60,23 +60,23 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.messages-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-success-message</mat-label>
       <input matInput formControlName="successfulClaimDevice">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-not-found-message</mat-label>
       <input matInput formControlName="deviceNotFound">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-failed-message</mat-label>
       <input matInput formControlName="failedClaimDevice">
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-name-required-message</mat-label>
       <input matInput formControlName="requiredErrorDevice">
     </mat-form-field>
-    <mat-form-field [fxShow]="deviceClaimingWidgetSettingsForm.get('deviceSecret').value" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.claim-device-secret-key-required-message</mat-label>
       <input matInput formControlName="requiredErrorSecretKey">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
index 12d3eb6b42..7941ed9169 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/photo-camera-input-widget-settings.component.html
@@ -18,15 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="photoCameraInputWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.image-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.image-format</mat-label>
         <mat-select formControlName="imageFormat">
           <mat-option [value]="'image/jpeg'">
@@ -40,17 +40,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.image-quality</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="imageQuality">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-image-width</mat-label>
         <input matInput type="number" min="1" formControlName="maxWidth">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-image-height</mat-label>
         <input matInput type="number" min="1" formControlName="maxHeight">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
index 3a112819c7..4ab4f5beb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-attribute-general-settings.component.html
@@ -18,24 +18,24 @@
 <section class="tb-widget-settings" [formGroup]="updateAttributeGeneralSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field *ngIf="hasLabelValue" fxFlex class="mat-block">
+      <mat-form-field *ngIf="hasLabelValue" class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.label</mat-label>
         <input matInput formControlName="labelValue">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="isRequired">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="isRequired">
         {{ 'widgets.input-widgets.required' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
         <input matInput formControlName="requiredErrorMessage">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
index 445607c7ac..bd5d44612e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-boolean-attribute-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateBooleanAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -28,12 +28,12 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.checkbox-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.true-label</mat-label>
         <input matInput formControlName="trueValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.false-label</mat-label>
         <input matInput formControlName="falseValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
index d6ed59294f..cf1c83e00c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-date-attribute-widget-settings.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDateAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDateAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     [hasLabelValue]="false"
     formControlName="updateAttributeGeneralSettings">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
index 208d64d9f4..4401f0f67b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-double-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateDoubleAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateDoubleAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.double-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="any" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" step="any" formControlName="maxValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
index dd42a1e9b4..c100e4358c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateImageAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -28,7 +28,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.image-input-settings</legend>
-    <section fxLayout="column">
+    <section class="flex flex-col">
       <mat-slide-toggle formControlName="displayPreview" class="slide-block">
         {{ 'widgets.input-widgets.display-preview' | translate }}
       </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
index 531aeaa520..5ae015dcb5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-integer-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateIntegerAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateIntegerAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.integer-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" step="1" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" step="1" formControlName="maxValue">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
index ad0ff01440..58033b1d4e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-json-attribute-widget-settings.component.html
@@ -18,15 +18,15 @@
 <section class="tb-widget-settings" [formGroup]="updateJsonAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex fxFlex.gt-xs="25" formControlName="showLabel">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-slide-toggle class="flex-1 gt-xs:max-w-25% gt-xs:flex-full" formControlName="showLabel">
         {{ 'widgets.input-widgets.show-label' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.label</mat-label>
         <input matInput formControlName="labelValue">
       </mat-form-field>
@@ -37,8 +37,8 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.attribute-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.widget-mode</mat-label>
         <mat-select formControlName="widgetMode">
           <mat-option [value]="'ATTRIBUTE'">
@@ -49,7 +49,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [fxShow]="updateJsonAttributeWidgetSettingsForm.get('widgetMode').value === 'ATTRIBUTE'" fxFlex class="mat-block">
+      <mat-form-field [class.!hidden]="updateJsonAttributeWidgetSettingsForm.get('widgetMode').value !== 'ATTRIBUTE'" class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.attribute-scope</mat-label>
         <mat-select formControlName="attributeScope">
           <mat-option [value]="'SERVER_SCOPE'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
index 93367001b2..c4bdfeadff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
@@ -18,19 +18,19 @@
 <section class="tb-widget-settings" [formGroup]="updateLocationAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
     <mat-slide-toggle formControlName="showResultMessage" class="slide-block">
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
         <input matInput formControlName="latKeyName">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.longitude-key-name</mat-label>
         <input matInput formControlName="lngKeyName">
       </mat-form-field>
@@ -47,17 +47,17 @@
     <mat-slide-toggle formControlName="showLabel" class="slide-block">
       {{ 'widgets.input-widgets.show-label' | translate }}
     </mat-slide-toggle>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
         <input matInput formControlName="latLabel">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.longitude-label</mat-label>
         <input matInput formControlName="lngLabel">
       </mat-form-field>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.input-fields-alignment</mat-label>
       <mat-select formControlName="inputFieldsAlignment">
         <mat-option [value]="'column'">
@@ -68,15 +68,15 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLatRequired">
+    <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+      <mat-slide-toggle class="slide-block flex-1" formControlName="isLatRequired">
         {{ 'widgets.input-widgets.latitude-field-required' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle class="slide-block" fxFlex formControlName="isLngRequired">
+      <mat-slide-toggle class="slide-block flex-1" formControlName="isLngRequired">
         {{ 'widgets.input-widgets.longitude-field-required' | translate }}
       </mat-slide-toggle>
     </section>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 0e12c926f8..93c53c27ec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -19,10 +19,10 @@
   <mat-slide-toggle formControlName="dataKeyHidden" class="slide-block">
     {{ 'widgets.input-widgets.hide-input-field' | translate }}
   </mat-slide-toggle>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.datakey-type</mat-label>
         <mat-select formControlName="dataKeyType">
           <mat-option [value]="'server'">
@@ -36,7 +36,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" class="mat-block">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.datakey-value-type</mat-label>
         <mat-select formControlName="dataKeyValueType">
           <mat-option [value]="'string'">
@@ -78,8 +78,8 @@
     <mat-checkbox formControlName="required" style="margin-bottom: 8px;">
       {{ 'widgets.input-widgets.value-is-required' | translate }}
     </mat-checkbox>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
         <mat-select formControlName="isEditable">
           <mat-option [value]="'editable'">
@@ -93,14 +93,14 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('isEditable').value === 'editable'" fxFlex="50" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
         <input matInput formControlName="disabledOnDataKey">
       </mat-form-field>
     </section>
     <section *ngIf="!['booleanSwitch', 'booleanCheckbox'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
-             fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+             class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
         <mat-select formControlName="appearance">
           <mat-option [value]="'fill'">
@@ -111,7 +111,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" class="mat-block">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
         <mat-select formControlName="subscriptSizing">
           <mat-option [value]="'fixed'">
@@ -124,10 +124,10 @@
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'booleanSwitch'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'booleanSwitch'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.slide-toggle-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.slide-toggle-label-position</mat-label>
       <mat-select formControlName="slideToggleLabelPosition">
         <mat-option [value]="'after'">
@@ -139,15 +139,15 @@
       </mat-select>
     </mat-form-field>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'select'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'select'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.select-options</legend>
-    <div fxLayout="column">
+    <div class="flex flex-col">
       <div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical"
            (cdkDropListDropped)="selectOptionDrop($event)">
         <div cdkDrag class="tb-draggable" *ngFor="let selectOptionControl of selectOptionsFormArray().controls; trackBy: trackBySelectOption;
                  let $index = index; last as isLast;"
-             fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+             class="flex flex-col" [class.pb-2]="!isLast">
           <tb-datakey-select-option [formControl]="selectOptionControl"
                                     [expanded]="selectOptionControl.new"
                                     (removeSelectOption)="removeSelectOption($index)">
@@ -155,8 +155,8 @@
         </div>
       </div>
       <div *ngIf="!selectOptionsFormArray().controls.length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">widgets.input-widgets.no-select-options</span>
+            <span translate
+                  class="tb-prompt flex items-center justify-center">widgets.input-widgets.no-select-options</span>
       </div>
       <div style="padding-top: 16px;">
         <button mat-raised-button color="primary"
@@ -167,102 +167,102 @@
       </div>
     </div>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                       (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                        updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double')" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             (updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double')" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.numeric-field-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.step-interval</mat-label>
         <input matInput type="number" min="0" formControlName="step">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" formControlName="maxValue">
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="displayErrorMessagesSection()" class="fields-group">
+  <fieldset [class.!hidden]="!displayErrorMessagesSection()" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.error-messages</legend>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('required').value" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('required').value" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
-    <section [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'integer' ||
-                       updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'double'"
-             fxLayout="row" fxLayoutGap="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
+                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double'"
+             class="flex flex-row gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
         <input matInput formControlName="minValueErrorMessage">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-value-error-message</mat-label>
         <input matInput formControlName="maxValueErrorMessage">
       </mat-form-field>
     </section>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'dateTime' ||
-                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'date' ||
-                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'time'" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'dateTime' &&
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'date' &&
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'time'" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.invalid-date-error-message</mat-label>
       <input matInput formControlName="invalidDateErrorMessage">
     </mat-form-field>
-    <mat-form-field [fxShow]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'JSON'" fxFlex class="mat-block">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'" class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.invalid-JSON-error-message</mat-label>
       <input matInput formControlName="invalidJsonErrorMessage">
     </mat-form-field>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                      updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value === 'JSON'" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'"class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.dialog-editor-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.title</mat-label>
       <input matInput formControlName="dialogTitle">
     </mat-form-field>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
         <input matInput formControlName="saveButtonLabel">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.cancel-button-label</mat-label>
         <input matInput formControlName="cancelButtonLabel">
       </mat-form-field>
     </section>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value &&
-                      !['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
+                             ['date', 'dateTime', 'time'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)"
             class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.icon-settings</legend>
     <mat-slide-toggle formControlName="useCustomIcon" class="slide-block">
       {{ 'widgets.input-widgets.use-custom-icon' | translate }}
     </mat-slide-toggle>
-    <tb-material-icon-select [fxShow]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-material-icon-select [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                              label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                              iconClearButton
                              formControlName="icon">
     </tb-material-icon-select>
-    <tb-gallery-image-input [fxShow]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
+    <tb-gallery-image-input [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                     label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                     formControlName="customIcon">
     </tb-gallery-image-input>
   </fieldset>
-  <fieldset [fxShow]="!updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
+  <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.value-conversion-settings</legend>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.input-widgets.get-value-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesKeySettingsForm.get('useGetValueFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="useGetValueFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.input-widgets.use-get-value-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -278,14 +278,14 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.input-widgets.set-value-settings</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesKeySettingsForm.get('useSetValueFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             <mat-slide-toggle formControlName="useSetValueFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+                              class="flex items-stretch justify-center">
               {{ 'widgets.input-widgets.use-set-value-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
index c9a6987c47..8b501c9d75 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="updateMultipleAttributesWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
@@ -29,28 +29,28 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.input-widgets.action-buttons</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="updateMultipleAttributesWidgetSettingsForm.get('showActionButtons').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <mat-slide-toggle formControlName="showActionButtons" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+                            class="flex items-stretch justify-center">
             {{ 'widgets.input-widgets.show-action-buttons' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column">
+        <section class="flex flex-col">
           <mat-checkbox formControlName="updateAllValues" style="margin-bottom: 8px;">
             {{ 'widgets.input-widgets.update-all-values' | translate }}
           </mat-checkbox>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
               <input matInput formControlName="saveButtonLabel">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>widgets.input-widgets.reset-button-label</mat-label>
               <input matInput formControlName="resetButtonLabel">
             </mat-form-field>
@@ -61,11 +61,11 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.group-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-slide-toggle fxFlex="30" formControlName="showGroupTitle" class="slide-block">
+    <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+      <mat-slide-toggle formControlName="showGroupTitle" class="slide-block flex-full xs:max-h-30% gt-xs:max-w-30%">
         {{ 'widgets.input-widgets.show-group-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field fxFlex="70" class="mat-block">
+      <mat-form-field class="mat-block flex-full xs:max-h-70% gt-xs:max-w-70%">
         <mat-label translate>widgets.input-widgets.group-title</mat-label>
         <input matInput formControlName="groupTitle">
       </mat-form-field>
@@ -73,8 +73,8 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.layout</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
         <mat-select formControlName="fieldsAlignment">
           <mat-option [value]="'row'">
@@ -85,17 +85,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.fields-in-row</mat-label>
         <input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
       </mat-form-field>
     </section>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex="50" class="mat-block">
+    <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.row-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="rowGap">
       </mat-form-field>
-      <mat-form-field fxFlex="50" [fxShow]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value === 'row'" class="mat-block">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
         <mat-label translate>widgets.input-widgets.column-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="columnGap">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
index 0adaf95e82..9d14b90ec9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-string-attribute-widget-settings.component.html
@@ -15,18 +15,18 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="updateStringAttributeWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="updateStringAttributeWidgetSettingsForm">
   <tb-update-attribute-general-settings
     formControlName="updateAttributeGeneralSettings">
   </tb-update-attribute-general-settings>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.text-field-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.min-length</mat-label>
         <input matInput type="number" step="1" min="0" formControlName="minLength">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.input-widgets.max-length</mat-label>
         <input matInput type="number" step="1" min="1" formControlName="maxLength">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
index c159ec4684..d719c84e9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/circle-settings.component.html
@@ -19,20 +19,18 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.circle-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircle').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showCircle" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-circle' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-datasources-key-autocomplete fxFlex
-                                         required
+        <tb-datasources-key-autocomplete required
                                          [datasources]="widget?.config?.datasources"
                                          label="widgets.maps.circle-key-name"
                                          formControlName="circleKeyName">
@@ -43,14 +41,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.circle-label</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleLabel').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showCircleLabel" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-circle-label' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -58,12 +55,12 @@
               <mat-slide-toggle formControlName="useCircleLabelFunction" class="slide-block">
                 {{ 'widgets.maps.use-circle-label-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
+              <tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
                        formControlName="circleLabel"
                        minHeight="100px"
                        label="{{ 'widgets.maps.circle-label-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleLabelFunction').value"
+              <tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleLabelFunction').value"
                           formControlName="circleLabelFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -76,19 +73,18 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.circle-tooltip</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('showCircleTooltip').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showCircleTooltip" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-circle-tooltip' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="flex-1">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showCircleTooltipAction">
                   <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -102,12 +98,12 @@
               <mat-slide-toggle formControlName="useCircleTooltipFunction" class="slide-block">
                 {{ 'widgets.maps.use-circle-tooltip-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
+              <tb-html [class.!hidden]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
                        formControlName="circleTooltipPattern"
                        minHeight="100px"
                        label="{{ 'widgets.maps.circle-tooltip-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="circleSettingsFormGroup.get('useCircleTooltipFunction').value"
+              <tb-js-func [class.!hidden]="!circleSettingsFormGroup.get('useCircleTooltipFunction').value"
                           formControlName="circleTooltipFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -119,27 +115,26 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-fill-color</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="circleFillColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.circle-fill-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.circle-fill-color-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="circleFillColorOpacity">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleFillColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useCircleFillColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-circle-fill-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -155,31 +150,30 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.circle-stroke</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="circleStrokeColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="circleStrokeOpacity">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-weight</mat-label>
               <input matInput type="number" min="0" formControlName="circleStrokeWeight">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="circleSettingsFormGroup.get('useCircleStrokeColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useCircleStrokeColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-circle-stroke-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
index baca5a60c7..1f72897a55 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/common-map-settings.component.html
@@ -18,30 +18,30 @@
 <section class="tb-widget-settings" [formGroup]="commonMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.common-map-settings</legend>
-    <section  fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider === mapProvider.image"
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider !== mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.x-pos-key-name"
                                        formControlName="xPosKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider === mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider !== mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.y-pos-key-name"
                                        formControlName="yPosKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider !== mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider === mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.latitude-key-name"
                                        formControlName="latKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
-                                       [fxShow]="provider !== mapProvider.image"
+      <tb-datasources-key-autocomplete class="flex-1"
+                                       [class.!hidden]="provider === mapProvider.image"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.longitude-key-name"
@@ -49,24 +49,24 @@
       </tb-datasources-key-autocomplete>
     </section>
     <mat-expansion-panel class="tb-settings">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-description fxLayoutAlign="end center" translate>
+      <mat-expansion-panel-header class="flex-wrap">
+        <mat-panel-description class="justify-end" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section [fxShow]="provider !== mapProvider.image" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <section [class.!hidden]="provider === mapProvider.image" class="flex flex-row xs:flex-col gt-xs:gap-2">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.default-map-zoom-level</mat-label>
             <input matInput type="number" min="0" max="20" step="1" formControlName="defaultZoomLevel">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.default-map-center-position</mat-label>
             <input matInput formControlName="defaultCenterPosition">
           </mat-form-field>
         </section>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-bottom: 15px;">
-          <section fxFlex fxLayout="column">
+        <section class="mb-3.5 flex flex-row xs:flex-col gt-xs:gap-2">
+          <section class="flex flex-1 flex-col">
             <mat-slide-toggle formControlName="disableScrollZooming" class="slide-block">
               {{ 'widgets.maps.disable-scroll-zooming' | translate }}
             </mat-slide-toggle>
@@ -76,17 +76,17 @@
             <mat-slide-toggle formControlName="disableZoomControl" class="slide-block">
               {{ 'widgets.maps.disable-zoom-control-buttons' | translate }}
             </mat-slide-toggle>
-            <mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="fitMapBounds" class="slide-block">
+            <mat-slide-toggle [class.!hidden]="provider === mapProvider.image" formControlName="fitMapBounds" class="slide-block">
               {{ 'widgets.maps.fit-map-bounds' | translate }}
             </mat-slide-toggle>
           </section>
-          <section fxFlex fxLayout="column">
-            <mat-slide-toggle [fxShow]="provider !== mapProvider.image" formControlName="useDefaultCenterPosition" class="slide-block">
+          <section class="flex-1" [class.!hidden]="provider === mapProvider.image">
+            <mat-slide-toggle formControlName="useDefaultCenterPosition" class="slide-block">
               {{ 'widgets.maps.use-default-map-center-position' | translate }}
             </mat-slide-toggle>
           </section>
         </section>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block">
           <mat-label translate>widgets.maps.entities-limit</mat-label>
           <input matInput type="number" min="1" step="1" formControlName="mapPageSize">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
index eb1720c93c..610729d3fc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/datasources-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex class="mat-block" [formGroup]="keyFormGroup">
+<mat-form-field class="mat-block" [formGroup]="keyFormGroup">
   <mat-label>{{ label | translate }}</mat-label>
   <input [required]="required" matInput
          type="text" placeholder="{{ 'entity.key-name' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
index c100862f6e..b97d84e9ad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/google-map-provider-settings.component.html
@@ -16,11 +16,11 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.google-maps-api-key</mat-label>
     <input required matInput formControlName="gmApiKey">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="gmDefaultMapType">
       <mat-option *ngFor="let type of googleMapTypes" [value]="type">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
index a0e17883ce..4b7376c8b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/here-map-provider-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.map-layer</mat-label>
     <mat-select required formControlName="mapProviderHere">
       <mat-option *ngFor="let provider of hereMapProviders" [value]="provider">
@@ -30,19 +30,18 @@
       <mat-slide-toggle formControlName="useV3" style="margin-bottom: 16px;">
         {{ 'widgets.maps.here-use-new-version-api-3' | translate }}
       </mat-slide-toggle>
-      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" fxLayout="row" fxLayoutGap="8px"
-        fxLayout.xs="column" fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div *ngIf="!providerSettingsFormGroup.get('credentials.useV3').value; else apiKey" class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>widgets.maps.here-app-id</mat-label>
           <input required matInput formControlName="app_id">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="flex-1">
           <mat-label translate>widgets.maps.here-app-code</mat-label>
           <input required matInput formControlName="app_code">
         </mat-form-field>
       </div>
       <ng-template #apiKey>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field>
           <mat-label translate>widgets.maps.here-api-key</mat-label>
           <input required matInput formControlName="apiKey">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
index 98d97f3414..0f3f9b9b01 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/image-map-provider-settings.component.html
@@ -21,8 +21,8 @@
   </tb-gallery-image-input>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.image-map-background-from-entity-attribute</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.image-url-source-entity-alias</mat-label>
         <input matInput type="text"
                placeholder="{{ 'entity.entity-alias' | translate }}"
@@ -44,7 +44,7 @@
           </mat-option>
         </mat-autocomplete>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.image-url-source-entity-attribute</mat-label>
         <input matInput type="text"
                placeholder="{{ 'entity.key-name' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
index edea61f456..656e6c5d2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-editor-settings.component.html
@@ -25,14 +25,13 @@
       {{ 'widgets.maps.init-draggable-mode' | translate }}
     </mat-slide-toggle>
     <mat-expansion-panel class="tb-settings" [expanded]="!mapEditorSettingsFormGroup.get('hideAllControlButton').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="hideAllControlButton" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.hide-all-edit-buttons' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
index 1fd1a5f249..4940d55205 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.map-provider-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field>
       <mat-label translate>widgets.maps.map-provider</mat-label>
       <mat-select required formControlName="provider">
         <mat-option *ngFor="let provider of mapProviders" [value]="provider">
@@ -27,24 +27,24 @@
       </mat-select>
     </mat-form-field>
     <tb-google-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.google"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.google"
       formControlName="googleProviderSettings">
     </tb-google-map-provider-settings>
     <tb-openstreet-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.openstreet"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.openstreet"
       formControlName="openstreetProviderSettings">
     </tb-openstreet-map-provider-settings>
     <tb-here-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.here"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.here"
       formControlName="hereProviderSettings">
     </tb-here-map-provider-settings>
     <tb-image-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.image"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.image"
       [aliasController]="aliasController"
       formControlName="imageMapProviderSettings">
     </tb-image-map-provider-settings>
     <tb-tencent-map-provider-settings
-      [fxShow]="providerSettingsFormGroup.get('provider').value === mapProvider.tencent"
+      [class.!hidden]="providerSettingsFormGroup.get('provider').value !== mapProvider.tencent"
       formControlName="tencentMapProviderSettings">
     </tb-tencent-map-provider-settings>
   </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.ts
index 59513c978c..0f0fe7cc76 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-provider-settings.component.ts
@@ -29,6 +29,10 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import {
+  defaultGoogleMapProviderSettings,
+  defaultHereMapProviderSettings,
+  defaultImageMapProviderSettings,
+  defaultOpenStreetMapProviderSettings, defaultTencentMapProviderSettings,
   GoogleMapProviderSettings,
   HereMapProviderSettings,
   ImageMapProviderSettings,
@@ -39,7 +43,6 @@ import {
   TencentMapProviderSettings
 } from '@home/components/widget/lib/maps/map-models';
 import { extractType } from '@core/utils';
-import { keys } from 'ts-transformer-keys';
 import { IAliasController } from '@core/api/widget-api.models';
 
 @Component({
@@ -128,11 +131,11 @@ export class MapProviderSettingsComponent extends PageComponent implements OnIni
   writeValue(value: MapProviderSettings): void {
     this.modelValue = value;
     const provider = value?.provider;
-    const googleProviderSettings = extractType<GoogleMapProviderSettings>(value, keys<GoogleMapProviderSettings>());
-    const openstreetProviderSettings = extractType<OpenStreetMapProviderSettings>(value, keys<OpenStreetMapProviderSettings>());
-    const hereProviderSettings = extractType<HereMapProviderSettings>(value, keys<HereMapProviderSettings>());
-    const imageMapProviderSettings = extractType<ImageMapProviderSettings>(value, keys<ImageMapProviderSettings>());
-    const tencentMapProviderSettings = extractType<TencentMapProviderSettings>(value, keys<TencentMapProviderSettings>());
+    const googleProviderSettings = extractType<GoogleMapProviderSettings>(value, Object.keys(defaultGoogleMapProviderSettings) as (keyof GoogleMapProviderSettings)[]);
+    const openstreetProviderSettings = extractType<OpenStreetMapProviderSettings>(value, Object.keys(defaultOpenStreetMapProviderSettings) as (keyof OpenStreetMapProviderSettings)[]);
+    const hereProviderSettings = extractType<HereMapProviderSettings>(value, Object.keys(defaultHereMapProviderSettings) as (keyof HereMapProviderSettings)[]);
+    const imageMapProviderSettings = extractType<ImageMapProviderSettings>(value, Object.keys(defaultImageMapProviderSettings) as (keyof ImageMapProviderSettings)[]);
+    const tencentMapProviderSettings = extractType<TencentMapProviderSettings>(value, Object.keys(defaultTencentMapProviderSettings) as (keyof TencentMapProviderSettings)[]);
     this.providerSettingsFormGroup.patchValue(
       {
         provider,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
index 1296bbf690..9f32a11d99 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.html
@@ -39,7 +39,7 @@
   </tb-circle-settings>
   <tb-marker-clustering-settings
     *ngIf="!routeMap"
-    [fxShow]="mapSettingsFormGroup.get('mapProviderSettings').value.provider !== mapProvider.image"
+    [class.!hidden]="mapSettingsFormGroup.get('mapProviderSettings').value.provider === mapProvider.image"
     formControlName="markerClusteringSettings">
   </tb-marker-clustering-settings>
   <tb-route-map-settings
@@ -47,7 +47,7 @@
     formControlName="routeMapSettings">
   </tb-route-map-settings>
   <tb-map-editor-settings
-    [fxShow]="displayEditorSettings()"
+    [class.!hidden]="!displayEditorSettings()"
     formControlName="mapEditorSettings">
   </tb-map-editor-settings>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.ts
index 3c6c4040af..2bd3a78560 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/map-settings.component.ts
@@ -17,11 +17,11 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import {
   ControlValueAccessor,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
   UntypedFormBuilder,
   UntypedFormControl,
   UntypedFormGroup,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
   Validator
 } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
@@ -31,6 +31,13 @@ import { TranslateService } from '@ngx-translate/core';
 import {
   CircleSettings,
   CommonMapSettings,
+  defaultCircleSettings,
+  defaultCommonMapSettings,
+  defaultMapEditorSettings,
+  defaultMapProviderSettings,
+  defaultMarkerClusteringSettings,
+  defaultMarkersSettings,
+  defaultPolygonSettings,
   MapEditorSettings,
   MapProviders,
   MapProviderSettings,
@@ -41,7 +48,6 @@ import {
   UnitedMapSettings
 } from '@home/components/widget/lib/maps/map-models';
 import { extractType } from '@core/utils';
-import { keys } from 'ts-transformer-keys';
 import { IAliasController } from '@core/api/widget-api.models';
 import { Widget } from '@shared/models/widget.models';
 
@@ -140,12 +146,12 @@ export class MapSettingsComponent extends PageComponent implements OnInit, Contr
 
   writeValue(value: UnitedMapSettings): void {
     this.modelValue = value;
-    const mapProviderSettings = extractType<MapProviderSettings>(value, keys<MapProviderSettings>());
-    const commonMapSettings = extractType<CommonMapSettings>(value, keys<CommonMapSettings>());
-    const markersSettings = extractType<MarkersSettings>(value, keys<MarkersSettings>());
-    const polygonSettings = extractType<PolygonSettings>(value, keys<PolygonSettings>());
-    const circleSettings = extractType<CircleSettings>(value, keys<CircleSettings>());
-    const mapEditorSettings = extractType<MapEditorSettings>(value, keys<MapEditorSettings>());
+    const mapProviderSettings = extractType<MapProviderSettings>(value, Object.keys(defaultMapProviderSettings) as (keyof MapProviderSettings)[]);
+    const commonMapSettings = extractType<CommonMapSettings>(value, Object.keys(defaultCommonMapSettings) as (keyof CommonMapSettings)[]);
+    const markersSettings = extractType<MarkersSettings>(value, Object.keys(defaultMarkersSettings) as (keyof MarkersSettings)[]);
+    const polygonSettings = extractType<PolygonSettings>(value, Object.keys(defaultPolygonSettings) as (keyof PolygonSettings)[]);
+    const circleSettings = extractType<CircleSettings>(value, Object.keys(defaultCircleSettings) as (keyof CircleSettings)[]);
+    const mapEditorSettings = extractType<MapEditorSettings>(value, Object.keys(defaultMapEditorSettings) as (keyof MapEditorSettings)[]);
     const formValue = {
       mapProviderSettings,
       commonMapSettings,
@@ -157,7 +163,7 @@ export class MapSettingsComponent extends PageComponent implements OnInit, Contr
     if (this.routeMap) {
       formValue.routeMapSettings = extractType<PolylineSettings>(value, ['strokeWeight', 'strokeOpacity']);
     } else {
-      formValue.markerClusteringSettings = extractType<MarkerClusteringSettings>(value, keys<MarkerClusteringSettings>());
+      formValue.markerClusteringSettings = extractType<MarkerClusteringSettings>(value, Object.keys(defaultMarkerClusteringSettings) as (keyof MarkerClusteringSettings)[]);
     }
     this.mapSettingsFormGroup.patchValue( formValue, {emitEvent: false} );
     this.updateValidators(false);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
index fa641582b9..302637180e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/marker-clustering-settings.component.html
@@ -19,14 +19,13 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.markers-clustering-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useClusterMarkers').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="useClusterMarkers" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.use-map-markers-clustering' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -34,21 +33,21 @@
         <mat-slide-toggle formControlName="zoomOnClick" class="slide-block">
           {{ 'widgets.maps.zoom-on-cluster-click' | translate }}
         </mat-slide-toggle>
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.max-cluster-zoom</mat-label>
             <input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom">
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.max-cluster-radius-pixels</mat-label>
             <input matInput type="number" min="0" formControlName="maxClusterRadius">
           </mat-form-field>
         </section>
-        <section class="flex-gap-xs" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutGap.xs="16px">
-          <mat-slide-toggle fxFlex formControlName="animate" class="slide-block">
+        <section class="flex-gap-xs flex flex-col gap-2 xs:gap-4 gt-xs:flex-row">
+          <mat-slide-toggle formControlName="animate" class="slide-block flex-1">
             {{ 'widgets.maps.cluster-zoom-animation' | translate }}
           </mat-slide-toggle>
-          <mat-slide-toggle fxFlex formControlName="showCoverageOnHover" class="slide-block">
+          <mat-slide-toggle formControlName="showCoverageOnHover" class="slide-block flex-1">
             {{ 'widgets.maps.show-markers-bounds-on-cluster-mouse-over' | translate }}
           </mat-slide-toggle>
         </section>
@@ -67,14 +66,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.clustering-markers</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="markerClusteringSettingsFormGroup.get('useIconCreateFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="useIconCreateFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-icon-create-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
index aed5dfc531..bd7eca8d02 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/markers-settings.component.html
@@ -18,17 +18,17 @@
 <section class="tb-widget-settings" [formGroup]="markersSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="!flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.marker-offset-x</mat-label>
         <input matInput type="number" formControlName="markerOffsetX">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.marker-offset-y</mat-label>
         <input matInput type="number" formControlName="markerOffsetY">
       </mat-form-field>
     </section>
-    <tb-js-func [fxShow]="provider === mapProvider.image"
+    <tb-js-func [class.!hidden]="provider !== mapProvider.image"
                 formControlName="posFunction"
                 minHeight="100px"
                 [globalVariables]="functionScopeVariables"
@@ -42,14 +42,13 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.label</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showLabel').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-label' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -57,12 +56,12 @@
           <mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
             {{ 'widgets.maps.use-label-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!markersSettingsFormGroup.get('useLabelFunction').value"
+          <tb-html [class.!hidden]="markersSettingsFormGroup.get('useLabelFunction').value"
                    formControlName="label"
                    minHeight="100px"
                    label="{{ 'widgets.maps.label-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useLabelFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useLabelFunction').value"
                       formControlName="labelFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -75,19 +74,18 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.tooltip</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block">
             <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
             <mat-select required formControlName="showTooltipAction">
               <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -101,24 +99,24 @@
           <mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
             {{ 'widgets.maps.use-tooltip-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!markersSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-html [class.!hidden]="markersSettingsFormGroup.get('useTooltipFunction').value"
                    formControlName="tooltipPattern"
                    minHeight="100px"
                    label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useTooltipFunction').value"
                       formControlName="tooltipFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.tooltip-function' | translate }}"
                       helpId="widget/lib/map/tooltip_fn">
           </tb-js-func>
-          <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-offset-x</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetX">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-offset-y</mat-label>
               <input matInput type="number" formControlName="tooltipOffsetY">
             </mat-form-field>
@@ -134,14 +132,13 @@
         label="{{ 'widgets.maps.color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <mat-expansion-panel class="tb-settings" [expanded]="markersSettingsFormGroup.get('useColorFunction').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-color-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -158,35 +155,34 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.marker-image</legend>
       <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-marker-image-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-gallery-image-input [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-gallery-image-input [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
                           label="{{ 'widgets.maps.custom-marker-image' | translate }}"
                           formControlName="markerImage">
           </tb-gallery-image-input>
-          <mat-form-field [fxShow]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
-                          fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+                          class="mat-block">
             <mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
             <input matInput type="number" min="1" formControlName="markerImageSize">
           </mat-form-field>
-          <tb-js-func [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-js-func [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
                       formControlName="markerImageFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
                       helpId="widget/lib/map/marker_image_fn">
           </tb-js-func>
-          <tb-multiple-gallery-image-input [fxShow]="markersSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-multiple-gallery-image-input [class.!hidden]="!markersSettingsFormGroup.get('useMarkerImageFunction').value"
                                            label="{{ 'widgets.maps.marker-images' | translate }}"
                                            formControlName="markerImages">
           </tb-multiple-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
index 9951c12bac..6633039e7d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/openstreet-map-provider-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.openstreet-provider</mat-label>
     <mat-select required formControlName="mapProvider">
       <mat-option *ngFor="let provider of mapProviders" [value]="provider">
@@ -25,19 +25,18 @@
     </mat-select>
   </mat-form-field>
   <mat-expansion-panel class="tb-settings" [expanded]="providerSettingsFormGroup.get('useCustomProvider').value">
-    <mat-expansion-panel-header fxLayout="row wrap">
+    <mat-expansion-panel-header class="flex-wrap">
       <mat-panel-title>
-        <mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()"
-                          fxLayoutAlign="center">
+        <mat-slide-toggle formControlName="useCustomProvider" (click)="$event.stopPropagation()">
           {{ 'widgets.maps.use-custom-provider' | translate }}
         </mat-slide-toggle>
       </mat-panel-title>
-      <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+      <mat-panel-description class="justify-end xs:!hidden" translate>
         widget-config.advanced-settings
       </mat-panel-description>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block">
         <mat-label translate>widgets.maps.custom-provider-tile-url</mat-label>
         <input required matInput formControlName="customProviderTileUrl">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
index 91984ca955..136c380d1a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/polygon-settings.component.html
@@ -19,20 +19,18 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.polygon-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygon').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showPolygon" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-polygon' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-datasources-key-autocomplete fxFlex
-                                         required
+        <tb-datasources-key-autocomplete required
                                          [datasources]="widget?.config?.datasources"
                                          label="widgets.maps.polygon-key-name"
                                          formControlName="polygonKeyName">
@@ -43,14 +41,13 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.polygon-label</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonLabel').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showPolygonLabel" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-polygon-label' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -58,12 +55,12 @@
               <mat-slide-toggle formControlName="usePolygonLabelFunction" class="slide-block">
                 {{ 'widgets.maps.use-polygon-label-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
+              <tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
                        formControlName="polygonLabel"
                        minHeight="100px"
                        label="{{ 'widgets.maps.polygon-label-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
+              <tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonLabelFunction').value"
                           formControlName="polygonLabelFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -76,19 +73,18 @@
         <fieldset class="fields-group fields-group-slider">
           <legend class="group-title" translate>widgets.maps.polygon-tooltip</legend>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('showPolygonTooltip').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="showPolygonTooltip" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.show-polygon-tooltip' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block">
                 <mat-label translate>widgets.maps.show-tooltip-action</mat-label>
                 <mat-select required formControlName="showPolygonTooltipAction">
                   <mat-option *ngFor="let action of showTooltipActions" [value]="action">
@@ -102,12 +98,12 @@
               <mat-slide-toggle formControlName="usePolygonTooltipFunction" class="slide-block">
                 {{ 'widgets.maps.use-polygon-tooltip-function' | translate }}
               </mat-slide-toggle>
-              <tb-html [fxShow]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
+              <tb-html [class.!hidden]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
                        formControlName="polygonTooltipPattern"
                        minHeight="100px"
                        label="{{ 'widgets.maps.polygon-tooltip-pattern' | translate }}">
               </tb-html>
-              <tb-js-func [fxShow]="polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
+              <tb-js-func [class.!hidden]="!polygonSettingsFormGroup.get('usePolygonTooltipFunction').value"
                           formControlName="polygonTooltipFunction"
                           [globalVariables]="functionScopeVariables"
                           [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -119,27 +115,26 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-color</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="polygonColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.polygon-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.polygon-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="polygonOpacity">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="usePolygonColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-polygon-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -155,31 +150,30 @@
         </fieldset>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.maps.polygon-stroke</legend>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
+          <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="polygonStrokeColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="polygonStrokeOpacity">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.stroke-weight</mat-label>
               <input matInput type="number" min="0" formControlName="polygonStrokeWeight">
             </mat-form-field>
           </section>
           <mat-expansion-panel class="tb-settings" [expanded]="polygonSettingsFormGroup.get('usePolygonStrokeColorFunction').value">
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex-wrap">
               <mat-panel-title>
-                <mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()"
-                                  fxLayoutAlign="center">
+                <mat-slide-toggle formControlName="usePolygonStrokeColorFunction" (click)="$event.stopPropagation()">
                   {{ 'widgets.maps.use-polygon-stroke-color-function' | translate }}
                 </mat-slide-toggle>
               </mat-panel-title>
-              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+              <mat-panel-description class="justify-end xs:!hidden" translate>
                 widget-config.advanced-settings
               </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
index 27f9b1dad7..4d4cec8cf4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/route-map-settings.component.html
@@ -18,12 +18,12 @@
 <section class="tb-widget-settings" [formGroup]="routeMapSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.route-map-settings</legend>
-    <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-      <mat-form-field fxFlex class="mat-block">
+    <section class="!flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-opacity</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
index eeeb7ae7d4..cd8f10d242 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/tencent-map-provider-settings.component.html
@@ -16,11 +16,11 @@
 
 -->
 <section class="tb-widget-settings" [formGroup]="providerSettingsFormGroup">
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.tencent-maps-api-key</mat-label>
     <input required matInput formControlName="tmApiKey">
   </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block">
     <mat-label translate>widgets.maps.default-map-type</mat-label>
     <mat-select required formControlName="tmDefaultMapType">
       <mat-option *ngFor="let type of tencentMapTypes" [value]="type">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
index f3146aa7fd..d34fde33aa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-common-settings.component.html
@@ -18,18 +18,18 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationCommonSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.trip-animation-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block">
       <mat-label translate>widgets.maps.normalization-step</mat-label>
       <input matInput type="number" min="1" formControlName="normalizationStep">
     </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-      <tb-datasources-key-autocomplete fxFlex
+    <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+      <tb-datasources-key-autocomplete class="flex-1"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.latitude-key-name"
                                        formControlName="latKeyName">
       </tb-datasources-key-autocomplete>
-      <tb-datasources-key-autocomplete fxFlex
+      <tb-datasources-key-autocomplete class="flex-1"
                                        required
                                        [datasources]="widget?.config?.datasources"
                                        label="widgets.maps.longitude-key-name"
@@ -39,32 +39,31 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.tooltip</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationCommonSettingsFormGroup.get('showTooltip').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-tooltip' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="tooltipColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.tooltip-background-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="tooltipFontColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.tooltip-font-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.tooltip-opacity</mat-label>
               <input matInput type="number" min="0" max="1" formControlName="tooltipOpacity">
             </mat-form-field>
@@ -75,12 +74,12 @@
           <mat-slide-toggle formControlName="useTooltipFunction" class="slide-block">
             {{ 'widgets.maps.use-tooltip-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-html [class.!hidden]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
                    formControlName="tooltipPattern"
                    minHeight="100px"
                    label="{{ 'widgets.maps.tooltip-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationCommonSettingsFormGroup.get('useTooltipFunction').value"
                       formControlName="tooltipFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
index 60557ee9e6..b9495b8a6a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-marker-settings.component.html
@@ -18,21 +18,20 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationMarkerSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.markers-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block">
       <mat-label translate>widgets.maps.rotation-angle</mat-label>
       <input matInput type="number" min="0" max="360" formControlName="rotationAngle">
     </mat-form-field>
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.label</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationMarkerSettingsFormGroup.get('showLabel').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="showLabel" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.show-label' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
@@ -40,12 +39,12 @@
           <mat-slide-toggle formControlName="useLabelFunction" class="slide-block">
             {{ 'widgets.maps.use-label-function' | translate }}
           </mat-slide-toggle>
-          <tb-html [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
+          <tb-html [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
                    formControlName="label"
                    minHeight="100px"
                    label="{{ 'widgets.maps.label-pattern' | translate }}">
           </tb-html>
-          <tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useLabelFunction').value"
                       formControlName="labelFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'dsData', 'dsIndex']"
@@ -58,35 +57,34 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.marker-image</legend>
       <mat-expansion-panel class="tb-settings" expanded>
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="useMarkerImageFunction" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-marker-image-function' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <tb-gallery-image-input [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-gallery-image-input [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                           label="{{ 'widgets.maps.custom-marker-image' | translate }}"
                           formControlName="markerImage">
           </tb-gallery-image-input>
-          <mat-form-field [fxShow]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
-                          fxFlex class="mat-block">
+          <mat-form-field [class.!hidden]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+                          class="mat-block">
             <mat-label translate>widgets.maps.custom-marker-image-size</mat-label>
             <input matInput type="number" min="1" formControlName="markerImageSize">
           </mat-form-field>
-          <tb-js-func [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-js-func [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                       formControlName="markerImageFunction"
                       [globalVariables]="functionScopeVariables"
                       [functionArgs]="['data', 'images', 'dsData', 'dsIndex']"
                       functionTitle="{{ 'widgets.maps.marker-image-function' | translate }}"
                       helpId="widget/lib/map/marker_image_fn">
           </tb-js-func>
-          <tb-multiple-gallery-image-input [fxShow]="tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
+          <tb-multiple-gallery-image-input [class.!hidden]="!tripAnimationMarkerSettingsFormGroup.get('useMarkerImageFunction').value"
                                            label="{{ 'widgets.maps.marker-images' | translate }}"
                                            formControlName="markerImages">
           </tb-multiple-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
index e7b0443208..f921677041 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-path-settings.component.html
@@ -18,31 +18,30 @@
 <section class="tb-widget-settings" [formGroup]="tripAnimationPathSettingsFormGroup">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.maps.path-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+    <section class="!flex flex-col gt-xs:flex-row gt-xs:gap-2">
       <tb-color-input
-        fxFlex
+        class="flex-1"
         formControlName="color"
         icon="format_color_fill"
         label="{{ 'widgets.maps.path-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-weight</mat-label>
         <input matInput type="number" min="0" formControlName="strokeWeight">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="flex-1">
         <mat-label translate>widgets.maps.stroke-opacity</mat-label>
         <input matInput type="number" min="0" max="1" formControlName="strokeOpacity">
       </mat-form-field>
     </section>
     <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('useColorFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="useColorFunction" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.use-path-color-function' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
@@ -58,20 +57,19 @@
     <fieldset class="fields-group fields-group-slider">
       <legend class="group-title" translate>widgets.maps.path-decorator</legend>
       <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPathSettingsFormGroup.get('usePolylineDecorator').value">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex-wrap">
           <mat-panel-title>
-            <mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle formControlName="usePolylineDecorator" (click)="$event.stopPropagation()">
               {{ 'widgets.maps.use-path-decorator' | translate }}
             </mat-slide-toggle>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description class="justify-end xs:!hidden" translate>
             widget-config.advanced-settings
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol</mat-label>
               <mat-select required formControlName="decoratorSymbol">
                 <mat-option *ngFor="let symbol of polylineDecoratorSymbols" [value]="symbol">
@@ -79,32 +77,32 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-symbol-size</mat-label>
               <input matInput type="number" min="1" formControlName="decoratorSymbolSize">
             </mat-form-field>
           </section>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-            <mat-slide-toggle fxFlex formControlName="useDecoratorCustomColor">
+          <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center">
+            <mat-slide-toggle class="flex-1" formControlName="useDecoratorCustomColor">
               {{ 'widgets.maps.use-path-decorator-custom-color' | translate }}
             </mat-slide-toggle>
             <tb-color-input
-              fxFlex
+              class="flex-1"
               formControlName="decoratorCustomColor"
               icon="format_color_fill"
               label="{{ 'widgets.maps.decorator-custom-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
-          <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
-            <mat-form-field fxFlex class="mat-block">
+          <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-offset</mat-label>
               <input matInput formControlName="decoratorOffset">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.end-decorator-offset</mat-label>
               <input matInput formControlName="endDecoratorOffset">
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
+            <mat-form-field class="flex-1">
               <mat-label translate>widgets.maps.decorator-repeat</mat-label>
               <input matInput formControlName="decoratorRepeat">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
index 2beba0639f..9e42753e34 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-point-settings.component.html
@@ -19,39 +19,37 @@
   <fieldset class="fields-group fields-group-slider">
     <legend class="group-title" translate>widgets.maps.points-settings</legend>
     <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('showPoints').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex-wrap">
         <mat-panel-title>
-          <mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()">
             {{ 'widgets.maps.show-points' | translate }}
           </mat-slide-toggle>
         </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description class="justify-end xs:!hidden" translate>
           widget-config.advanced-settings
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px">
+        <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
           <tb-color-input
-            fxFlex
+            class="flex-1"
             formControlName="pointColor"
             icon="format_color_fill"
             label="{{ 'widgets.maps.point-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="flex-1">
             <mat-label translate>widgets.maps.point-size</mat-label>
             <input matInput type="number" min="1" formControlName="pointSize">
           </mat-form-field>
         </section>
         <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('useColorPointFunction').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle formControlName="useColorPointFunction" (click)="$event.stopPropagation()">
                 {{ 'widgets.maps.use-point-color-function' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -65,14 +63,13 @@
           </ng-template>
         </mat-expansion-panel>
         <mat-expansion-panel class="tb-settings" [expanded]="tripAnimationPointSettingsFormGroup.get('usePointAsAnchor').value">
-          <mat-expansion-panel-header fxLayout="row wrap">
+          <mat-expansion-panel-header class="flex-wrap">
             <mat-panel-title>
-              <mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()"
-                                fxLayoutAlign="center">
+              <mat-slide-toggle formControlName="usePointAsAnchor" (click)="$event.stopPropagation()">
                 {{ 'widgets.maps.use-point-as-anchor' | translate }}
               </mat-slide-toggle>
             </mat-panel-title>
-            <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+            <mat-panel-description class="justify-end xs:!hidden" translate>
               widget-config.advanced-settings
             </mat-panel-description>
           </mat-expansion-panel-header>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-widget-settings.component.ts
index 216530ffdc..ab4ab92e17 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/map/trip-animation-widget-settings.component.ts
@@ -21,16 +21,22 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
   CircleSettings,
+  CommonMapSettings,
+  defaultCircleSettings,
+  defaultCommonMapSettings,
+  defaultMapProviderSettings,
+  defaultMarkersSettings,
+  defaultPolygonSettings,
+  defaultTripAnimationPathSettings,
+  defaultTripAnimationPointSettings,
   defaultTripAnimationSettings,
   MapProviderSettings,
+  MarkersSettings,
   PointsSettings,
   PolygonSettings,
-  PolylineSettings,
-  TripAnimationCommonSettings,
-  TripAnimationMarkerSettings
+  PolylineSettings
 } from 'src/app/modules/home/components/widget/lib/maps/map-models';
 import { extractType } from '@core/utils';
-import { keys } from 'ts-transformer-keys';
 
 @Component({
   selector: 'tb-trip-animation-widget-settings',
@@ -69,13 +75,13 @@ export class TripAnimationWidgetSettingsComponent extends WidgetSettingsComponen
   }
 
   protected prepareInputSettings(settings: WidgetSettings): WidgetSettings {
-    const mapProviderSettings = extractType<MapProviderSettings>(settings, keys<MapProviderSettings>());
-    const commonMapSettings = extractType<TripAnimationCommonSettings>(settings, keys<TripAnimationCommonSettings>());
-    const markersSettings = extractType<TripAnimationMarkerSettings>(settings, keys<TripAnimationMarkerSettings>());
-    const pathSettings = extractType<PolylineSettings>(settings, keys<PolylineSettings>());
-    const pointSettings = extractType<PointsSettings>(settings, keys<PointsSettings>());
-    const polygonSettings = extractType<PolygonSettings>(settings, keys<PolygonSettings>());
-    const circleSettings = extractType<CircleSettings>(settings, keys<CircleSettings>());
+    const mapProviderSettings = extractType<MapProviderSettings>(settings, Object.keys(defaultMapProviderSettings) as (keyof MapProviderSettings)[]);
+    const commonMapSettings = extractType<CommonMapSettings>(settings, Object.keys(defaultCommonMapSettings) as (keyof CommonMapSettings)[]);
+    const markersSettings = extractType<MarkersSettings>(settings, Object.keys(defaultMarkersSettings) as (keyof MarkersSettings)[]);
+    const pathSettings = extractType<PolylineSettings>(settings, Object.keys(defaultTripAnimationPathSettings) as (keyof PolylineSettings)[]);
+    const pointSettings = extractType<PointsSettings>(settings, Object.keys(defaultTripAnimationPointSettings) as (keyof PointsSettings)[]);
+    const polygonSettings = extractType<PolygonSettings>(settings, Object.keys(defaultPolygonSettings) as (keyof PolygonSettings)[]);
+    const circleSettings = extractType<CircleSettings>(settings, Object.keys(defaultCircleSettings) as (keyof CircleSettings)[]);
     return {
       mapProviderSettings,
       commonMapSettings,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
index c9f813843d..c29b89d1a0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="navigationCardWidgetSettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
+<section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardWidgetSettingsForm">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.navigation.title</mat-label>
     <input required matInput formControlName="name">
   </mat-form-field>
-  <tb-material-icon-select fxFlex
+  <tb-material-icon-select class="flex-1"
                            iconClearButton
                            required
                            formControlName="icon">
   </tb-material-icon-select>
-  <mat-form-field fxFlex class="mat-block">
+  <mat-form-field class="mat-block flex-1">
     <mat-label translate>widgets.navigation.navigation-path</mat-label>
     <input required matInput formControlName="path">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
index 8769614bdf..9dc90bdfda 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
@@ -15,16 +15,16 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="navigationCardsWidgetSettingsForm" fxLayout="column">
+<section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardsWidgetSettingsForm">
   <section style="margin-bottom: 16px;">
     <div class="mat-caption" style="margin: -8px 0 8px;" translate>widgets.navigation.filter-type</div>
-    <mat-radio-group formControlName="filterType" fxLayoutGap="16px">
+    <mat-radio-group formControlName="filterType" class="gap-4">
       <mat-radio-button [value]="'all'">{{ 'widgets.navigation.filter-type-all' | translate }}</mat-radio-button>
       <mat-radio-button [value]="'include'">{{ 'widgets.navigation.filter-type-include' | translate }}</mat-radio-button>
       <mat-radio-button [value]="'exclude'">{{ 'widgets.navigation.filter-type-exclude' | translate }}</mat-radio-button>
     </mat-radio-group>
   </section>
-  <mat-form-field [fxShow]="navigationCardsWidgetSettingsForm.get('filterType').value !== 'all'" fxFlex class="mat-block" floatLabel="always">
+  <mat-form-field [class.!hidden]="navigationCardsWidgetSettingsForm.get('filterType').value === 'all'" class="mat-block flex-1" floatLabel="always">
     <mat-label translate>widgets.navigation.items</mat-label>
     <mat-chip-grid #filterItemsChipList>
       <mat-chip-row *ngFor="let filterItem of navigationCardsWidgetSettingsForm.get('filter').value"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index 5271825ccf..c3528e8a2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -32,7 +32,7 @@
     </tb-image-cards-select>
     <div class="tb-form-row space-between">
       <div>{{ (hasCenterValue ? 'widgets.wind-speed-direction.center-value' : 'widgets.wind-speed-direction.wind-direction') | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="flex flex-row items-center justify-start gap-2">
         <tb-font-settings formControlName="centerValueFont"
                           [autoScale]="true"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('centerValueColor').value?.color }"
@@ -63,8 +63,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.major-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="majorTicksFontEnabled"
+      <div class="flex flex-row items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!majorTicksFontEnabled"
                           formControlName="majorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('majorTicksColor').value }"
                           [autoScale]="true"
@@ -77,8 +77,8 @@
     </div>
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.wind-speed-direction.minor-ticks' | translate }}</div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <tb-font-settings [fxShow]="minorTicksFontEnabled"
+      <div class="flex flex-row items-center justify-start gap-2">
+        <tb-font-settings [class.!hidden]="!minorTicksFontEnabled"
                           formControlName="minorTicksFont"
                           [initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('minorTicksColor').value }"
                           [autoScale]="true"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 98d1090f4d..9c45801f29 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex flex-1 flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,78 +37,84 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-tab-group [ngClass]="{'tb-headless': sources.length === 1}" fxFlex
+    <mat-tab-group [class.tb-headless]="sources.length === 1"
+                   class="flex-1"
                    mat-stretch-tabs="false"
                    [(selectedIndex)]="sourceIndex" (selectedIndexChange)="onSourceIndexChanged()">
       <mat-tab *ngFor="let source of sources; trackBy: trackBySourcesIndex; let index = index;" [label]="getTabLabel(source)">
         <ng-template [ngIf]="isActiveTab(index)">
-          <div fxFlex class="table-container">
+          <div class="table-container flex-1">
             <table mat-table [dataSource]="source.timeseriesDatasource" [trackBy]="trackByRowTimestamp"
                        matSort [matSortActive]="source.pageLink.sortOrder.property" [matSortDirection]="source.pageLink.sortDirection()" matSortDisableClear>
               <ng-container *ngIf="showTimestamp" [matColumnDef]="'0'">
                 <mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index"
                           [innerHTML]="cellContent(source, null, 0, row, row[0], rowIndex)"
-                          [ngStyle]="cellStyle(source, null, 0, row, row[0], rowIndex)">
+                          [style]="cellStyle(source, null, 0, row, row[0], rowIndex)">
                 </mat-cell>
               </ng-container>
               <ng-container [matColumnDef]="h.index + ''" *ngFor="let h of source.header; trackBy: trackByColumnIndex;">
                 <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!h.sortable"> {{ h.dataKey.label }} </mat-header-cell>
                 <mat-cell *matCellDef="let row; let rowIndex = index"
                           [innerHTML]="cellContent(source, h, h.index, row, row[h.index], rowIndex)"
-                          [ngStyle]="cellStyle(source, h, h.index, row, row[h.index], rowIndex)">
+                          [style]="cellStyle(source, h, h.index, row, row[h.index], rowIndex)">
                 </mat-cell>
               </ng-container>
               <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-                <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                      maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                      width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
+                <mat-header-cell *matHeaderCellDef>
+                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
+                    <div class="gt-md:!hidden" style="min-width: 40px;">
+                    </div>
+                    <div class="lt-lg:!hidden"
+                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
+                    </div>
+                  </ng-container>
                 </mat-header-cell>
-                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)" [ngStyle.gt-md]="{ minWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                   maxWidth: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px',
-                                                                   width: (source.timeseriesDatasource.countCellButtonAction * 40) + 'px' }">
-                  <div [fxHide]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                    <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                      <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
-                      <button *ngIf="actionDescriptor.icon"
-                              class="tb-mat-40"
-                              mat-icon-button [disabled]="isLoading$ | async"
-                              matTooltip="{{ actionDescriptor.displayName }}"
-                              matTooltipPosition="above"
-                              (click)="onActionButtonClick($event, row, actionDescriptor)">
-                        <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                      </button>
-                    </ng-container>
-                  </div>
-                  <div fxHide [fxShow.lt-lg]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" *ngIf="row.hasActions">
-                    <button mat-icon-button
-                            class="tb-mat-40"
-                            (click)="$event.stopPropagation(); ctx.detectChanges();"
-                            [matMenuTriggerFor]="cellActionsMenu">
-                      <mat-icon class="material-icons">more_vert</mat-icon>
-                    </button>
-                    <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                <mat-cell *matCellDef="let row; let rowIndex = index" [style]="rowStyle(source, row, rowIndex)">
+                  <ng-container *ngIf="source.timeseriesDatasource.countCellButtonAction">
+                    <div [class.lt-lg:!hidden]="showCellActionsMenu && source.timeseriesDatasource.countCellButtonAction !== 1" class="flex flex-row items-stretch justify-end"
+                         [style.min-width]="(source.timeseriesDatasource.countCellButtonAction * 40) + 'px'">
                       <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                        <button mat-menu-item *ngIf="actionDescriptor.icon"
-                                [disabled]="isLoading$ | async"
+                        <span *ngIf="!actionDescriptor.icon" style="width: 40px;"></span>
+                        <button *ngIf="actionDescriptor.icon"
+                                class="tb-mat-40"
+                                mat-icon-button [disabled]="isLoading$ | async"
+                                matTooltip="{{ actionDescriptor.displayName }}"
+                                matTooltipPosition="above"
                                 (click)="onActionButtonClick($event, row, actionDescriptor)">
-                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                          <span>{{ actionDescriptor.displayName }}</span>
+                          <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                         </button>
                       </ng-container>
-                    </mat-menu>
-                  </div>
+                    </div>
+                    <div [class.!hidden]="!showCellActionsMenu || source.timeseriesDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="row.hasActions">
+                      <button mat-icon-button
+                              class="tb-mat-40"
+                              (click)="$event.stopPropagation(); ctx.detectChanges();"
+                              [matMenuTriggerFor]="cellActionsMenu">
+                        <mat-icon class="material-icons">more_vert</mat-icon>
+                      </button>
+                      <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                        <ng-container *ngFor="let actionDescriptor of row.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                          <button mat-menu-item *ngIf="actionDescriptor.icon"
+                                  [disabled]="isLoading$ | async"
+                                  (click)="onActionButtonClick($event, row, actionDescriptor)">
+                            <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                            <span>{{ actionDescriptor.displayName }}</span>
+                          </button>
+                        </ng-container>
+                      </mat-menu>
+                    </div>
+                  </ng-container>
                 </mat-cell>
               </ng-container>
               <mat-header-row *matHeaderRowDef="source.displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-              <mat-row [ngClass]="{'tb-pointer': hasRowAction}"
+              <mat-row [class.tb-pointer]="hasRowAction"
                        *matRowDef="let row; columns: source.displayedColumns; let rowIndex = index"
-                       [ngStyle]="rowStyle(source, row, rowIndex)"
+                       [style]="rowStyle(source, row, rowIndex)"
                        (click)="onRowClick($event, row)"></mat-row>
             </table>
-            <span [fxShow]="source.timeseriesDatasource.isEmpty() | async"
-                  fxLayoutAlign="center center"
-                  class="no-data-found">{{ noDataDisplayMessageText }}</span>
+            <span [class.!hidden]="(source.timeseriesDatasource.isEmpty() | async) === false"
+                  class="no-data-found flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
           </div>
           <mat-divider *ngIf="displayPagination"></mat-divider>
           <mat-paginator *ngIf="displayPagination"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
index e0ad8ad69f..aea48ffcca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.html
@@ -17,17 +17,19 @@
 -->
 <div class="trip-animation-widget">
     <div class="trip-animation-label-container" *ngIf="settings.showLabel" [innerHTML]="label"></div>
-    <div class="trip-animation-container" fxLayout="column">
+    <div class="trip-animation-container flex flex-col">
         <div class="map" #map></div>
-        <div class="trip-animation-info-panel" fxLayout="row">
+        <div class="trip-animation-info-panel flex flex-row">
             <button class="tooltip-button" mat-mini-fab color="primary" aria-label="tooltip"
                 *ngIf="settings.showTooltip" (click)="visibleTooltip = !visibleTooltip">
                 <mat-icon>info_outline</mat-icon>
             </button>
         </div>
-        <div class="trip-animation-tooltip md-whiteframe-z4" fxLayout="column"
-             [ngClass]="{'trip-animation-tooltip-hidden':!visibleTooltip}"
-             [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">
+        <div class="trip-animation-tooltip md-whiteframe-z4 flex flex-col"
+             [class.trip-animation-tooltip-hidden]="!visibleTooltip"
+             [style.background-color]="settings.tooltipColor"
+             [style.opacity]="settings.tooltipOpacity"
+             [style.color]="settings.tooltipFontColor">
           <div *ngFor="let mainTooltip of mainTooltips"
                [innerHTML]="mainTooltip"
                style="padding: 10px 0">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
index 8e1e6f1b3a..ae3cc237ce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ComponentFactory, Inject, Injectable, Optional, Type } from '@angular/core';
+import { Inject, Injectable, Optional, Type } from '@angular/core';
 import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';
 import { WidgetService } from '@core/http/widget.service';
 import { forkJoin, from, Observable, of, ReplaySubject, Subject, throwError } from 'rxjs';
@@ -28,7 +28,13 @@ import {
 } from '@home/models/widget-component.models';
 import cssjs from '@core/css/css';
 import { UtilsService } from '@core/services/utils.service';
-import { ModulesWithFactories, ResourcesService } from '@core/services/resources.service';
+import {
+  componentTypeBySelector,
+  flatModulesWithComponents,
+  ModulesWithComponents,
+  modulesWithComponentsToTypes,
+  ResourcesService
+} from '@core/services/resources.service';
 import {
   IWidgetSettingsComponent,
   Widget,
@@ -55,7 +61,6 @@ import { HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
 import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module';
 import { basicWidgetConfigComponentsMap } from '@home/components/widget/config/basic/basic-widget-config.module';
 import { IBasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
-import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
 
 @Injectable()
 export class WidgetComponentService {
@@ -124,11 +129,13 @@ export class WidgetComponentService {
       w.tinycolor = tinycolor;
       w.cssjs = cssjs;
       w.moment = moment;
-      w.$ = $;
-      w.jQuery = $;
 
       const widgetModulesTasks: Observable<any>[] = [];
-      widgetModulesTasks.push(from(import('jquery.terminal')));
+      widgetModulesTasks.push(from(import('jquery.terminal')).pipe(
+        tap((mod) => {
+          mod.default(window, $);
+        })
+      ));
 
       widgetModulesTasks.push(from(import('flot/src/jquery.flot.js')).pipe(
         mergeMap(() => {
@@ -323,12 +330,12 @@ export class WidgetComponentService {
     this.cssParser.cssPreviewNamespace = widgetNamespace;
     this.cssParser.createStyleElement(widgetNamespace, widgetInfo.templateCss);
     const resourceTasks: Observable<string>[] = [];
-    const modulesTasks: Observable<ModulesWithFactories | string>[] = [];
+    const modulesTasks: Observable<ModulesWithComponents | string>[] = [];
     if (widgetInfo.resources.length > 0) {
       widgetInfo.resources.filter(r => r.isModule).forEach(
         (resource) => {
           modulesTasks.push(
-            this.resources.loadFactories(resource.url, this.modulesMap).pipe(
+            this.resources.loadModulesWithComponents(resource.url, this.modulesMap).pipe(
               catchError((e: Error) => of(e?.message ? e.message : `Failed to load widget resource module: '${resource.url}'`))
             )
           );
@@ -345,7 +352,7 @@ export class WidgetComponentService {
       }
     );
 
-    let modulesObservable: Observable<string | ModulesWithFactories>;
+    let modulesObservable: Observable<string | ModulesWithComponents>;
     if (modulesTasks.length) {
       modulesObservable = forkJoin(modulesTasks).pipe(
         map(res => {
@@ -353,20 +360,13 @@ export class WidgetComponentService {
           if (msg) {
             return msg as string;
           } else {
-            const modulesWithFactoriesList = res as ModulesWithFactories[];
-            const resModulesWithFactories: ModulesWithFactories = {
-              modules: modulesWithFactoriesList.map(mf => mf.modules).flat(),
-              factories: modulesWithFactoriesList.map(mf => mf.factories).flat()
-            };
-            if (modules && modules.length) {
-              resModulesWithFactories.modules = resModulesWithFactories.modules.concat(modules);
-            }
-            return resModulesWithFactories;
+            const modulesWithComponentsList = res as ModulesWithComponents[];
+            return flatModulesWithComponents(modulesWithComponentsList);
           }
         })
       );
     } else {
-      modulesObservable = modules && modules.length ? of({modules, factories: []}) : of({modules: [], factories: []});
+      modulesObservable = of({modules: [], standaloneComponents: []});
     }
 
     resourceTasks.push(
@@ -375,11 +375,15 @@ export class WidgetComponentService {
           if (typeof resolvedModules === 'string') {
             return of(resolvedModules);
           } else {
-            this.registerWidgetSettingsForms(widgetInfo, resolvedModules.factories);
+            this.registerWidgetSettingsForms(widgetInfo, resolvedModules);
+            let imports = modulesWithComponentsToTypes(resolvedModules);
+            if (modules && modules.length) {
+              imports = imports.concat(modules);
+            }
             return this.dynamicComponentFactoryService.createDynamicComponent(
               class DynamicWidgetComponentInstance extends DynamicWidgetComponent {},
               widgetInfo.templateHtml,
-              resolvedModules.modules
+              imports
             ).pipe(
               map((componentType) => {
                 widgetInfo.componentType = componentType;
@@ -401,7 +405,7 @@ export class WidgetComponentService {
             errors = msgs.filter(msg => msg && msg.length > 0);
           }
           if (errors && errors.length) {
-            return throwError(errors);
+            return throwError(() => errors);
           } else {
             return of(null);
           }
@@ -409,7 +413,7 @@ export class WidgetComponentService {
     ));
   }
 
-  private registerWidgetSettingsForms(widgetInfo: WidgetInfo, factories: ComponentFactory<any>[]) {
+  private registerWidgetSettingsForms(widgetInfo: WidgetInfo, modulesWithComponents: ModulesWithComponents) {
     const directives: string[] = [];
     const basicDirectives: string[] = [];
     if (widgetInfo.settingsDirective && widgetInfo.settingsDirective.length) {
@@ -425,17 +429,19 @@ export class WidgetComponentService {
       basicDirectives.push(widgetInfo.basicModeDirective);
     }
 
-    this.expandSettingComponentMap(widgetSettingsComponentsMap, directives, factories);
-    this.expandSettingComponentMap(basicWidgetConfigComponentsMap, basicDirectives, factories);
+    this.expandSettingComponentMap(widgetSettingsComponentsMap, directives, modulesWithComponents);
+    this.expandSettingComponentMap(basicWidgetConfigComponentsMap, basicDirectives, modulesWithComponents);
   }
 
   private expandSettingComponentMap(settingsComponentsMap: {[key: string]: Type<IWidgetSettingsComponent | IBasicWidgetConfigComponent>},
-                                    directives: string[], factories: ComponentFactory<any>[]): void {
+                                    directives: string[], modulesWithComponents: ModulesWithComponents): void {
     if (directives.length) {
-      factories.filter((factory) => directives.includes(factory.selector))
-        .forEach((foundFactory) => {
-          settingsComponentsMap[foundFactory.selector] = foundFactory.componentType;
-        });
+      directives.forEach(selector => {
+        const compType = componentTypeBySelector(modulesWithComponents, selector);
+        if (compType) {
+          settingsComponentsMap[selector] = compType;
+        }
+      });
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
index 9d08ee0324..349d891669 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@@ -33,7 +33,6 @@ import {
 import { MultipleInputWidgetComponent } from '@home/components/widget/lib/multiple-input-widget.component';
 import { TripAnimationComponent } from '@home/components/widget/lib/trip-animation/trip-animation.component';
 import { PhotoCameraInputWidgetComponent } from '@home/components/widget/lib/photo-camera-input.component';
-import { GatewayFormComponent } from '@home/components/widget/lib/gateway/gateway-form.component';
 import { NavigationCardsWidgetComponent } from '@home/components/widget/lib/navigation-cards-widget.component';
 import { NavigationCardWidgetComponent } from '@home/components/widget/lib/navigation-card-widget.component';
 import { EdgesOverviewWidgetComponent } from '@home/components/widget/lib/edges-overview-widget.component';
@@ -45,21 +44,6 @@ import { HomePageWidgetsModule } from '@home/components/widget/lib/home-page/hom
 import { WIDGET_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
 import { FlotWidgetComponent } from '@home/components/widget/lib/flot-widget.component';
 import { LegendComponent } from '@home/components/widget/lib/legend.component';
-import { GatewayConnectorComponent } from '@home/components/widget/lib/gateway/gateway-connectors.component';
-import { GatewayLogsComponent } from '@home/components/widget/lib/gateway/gateway-logs.component';
-import { GatewayStatisticsComponent } from '@home/components/widget/lib/gateway/gateway-statistics.component';
-import { GatewayServiceRPCComponent } from '@home/components/widget/lib/gateway/gateway-service-rpc.component';
-import {
-  GatewayServiceRPCConnectorComponent
-} from '@home/components/widget/lib/gateway/gateway-service-rpc-connector.component';
-import {
-  GatewayServiceRPCConnectorTemplatesComponent
-} from '@home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component';
-import { DeviceGatewayCommandComponent } from '@home/components/widget/lib/gateway/device-gateway-command.component';
-import { GatewayConfigurationComponent } from '@home/components/widget/lib/gateway/configuration/gateway-configuration.component';
-import {
-  GatewayRemoteConfigurationDialogComponent
-} from '@home/components/widget/lib/gateway/gateway-remote-configuration-dialog';
 import { ValueCardWidgetComponent } from '@home/components/widget/lib/cards/value-card-widget.component';
 import {
   AggregatedValueCardWidgetComponent
@@ -78,9 +62,6 @@ import { RangeChartWidgetComponent } from '@home/components/widget/lib/chart/ran
 import {
   BarChartWithLabelsWidgetComponent
 } from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.component';
-import {
-  GatewayServiceRPCConnectorTemplateDialogComponent
-} from '@home/components/widget/lib/gateway/gateway-service-rpc-connector-template-dialog';
 import { SingleSwitchWidgetComponent } from '@home/components/widget/lib/rpc/single-switch-widget.component';
 import { ActionButtonWidgetComponent } from '@home/components/widget/lib/button/action-button-widget.component';
 import { CommandButtonWidgetComponent } from '@home/components/widget/lib/button/command-button-widget.component';
@@ -88,8 +69,6 @@ import { PowerButtonWidgetComponent } from '@home/components/widget/lib/rpc/powe
 import { SliderWidgetComponent } from '@home/components/widget/lib/rpc/slider-widget.component';
 import { ToggleButtonWidgetComponent } from '@home/components/widget/lib/button/toggle-button-widget.component';
 import { TimeSeriesChartWidgetComponent } from '@home/components/widget/lib/chart/time-series-chart-widget.component';
-import { AddConnectorDialogComponent } from '@home/components/widget/lib/gateway/dialog/add-connector-dialog.component';
-import { MappingDialogComponent } from '@home/components/widget/lib/gateway/dialog/mapping-dialog.component';
 import { StatusWidgetComponent } from '@home/components/widget/lib/indicator/status-widget.component';
 import { LatestChartComponent } from '@home/components/widget/lib/chart/latest-chart.component';
 import { PieChartWidgetComponent } from '@home/components/widget/lib/chart/pie-chart-widget.component';
@@ -100,76 +79,14 @@ import { MobileAppQrcodeWidgetComponent } from '@home/components/widget/lib/mobi
 import { KeyValueIsNotEmptyPipe } from '@shared/pipe/key-value-not-empty.pipe';
 import { LabelCardWidgetComponent } from '@home/components/widget/lib/cards/label-card-widget.component';
 import { LabelValueCardWidgetComponent } from '@home/components/widget/lib/cards/label-value-card-widget.component';
-import {
-  RestConnectorSecurityComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/rest-connector-secuirity/rest-connector-security.component';
 import {
   UnreadNotificationWidgetComponent
 } from '@home/components/widget/lib/cards/unread-notification-widget.component';
 import {
   NotificationTypeFilterPanelComponent
 } from '@home/components/widget/lib/cards/notification-type-filter-panel.component';
-import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe';
 import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
-import {
-  BrokerConfigControlComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/broker-config-control/broker-config-control.component';
-import {
-  WorkersConfigControlComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/workers-config-control/workers-config-control.component';
-import {
-  OpcServerConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/opc/opc-server-config/opc-server-config.component';
-import {
-  MqttBasicConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-basic-config.component';
-import {
-  MappingTableComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component';
-import {
-  OpcUaBasicConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-basic-config.component';
-import {
-  ModbusBasicConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component';
-import {
-  DeviceInfoTableComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/device-info-table/device-info-table.component';
-import {
-  MappingDataKeysPanelComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component';
-import {
-  TypeValuePanelComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component';
 import { ScadaSymbolWidgetComponent } from '@home/components/widget/lib/scada/scada-symbol-widget.component';
-import {
-  MqttLegacyBasicConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/mqtt/basic-config/mqtt-legacy-basic-config.component';
-import {
-  GatewayBasicConfigurationComponent
-} from '@home/components/widget/lib/gateway/configuration/basic/gateway-basic-configuration.component';
-import {
-    GatewayAdvancedConfigurationComponent
-} from '@home/components/widget/lib/gateway/configuration/advanced/gateway-advanced-configuration.component';
-import {
-    OpcUaLegacyBasicConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/opc/opc-ua-basic-config/opc-ua-legacy-basic-config.component';
-import {
-  ModbusLegacyBasicConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-legacy-basic-config.component';
-import {
-  MqttRpcParametersComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/mqtt-rpc-parameters/mqtt-rpc-parameters.component';
-import {
-  OpcRpcParametersComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/opc-rpc-parameters/opc-rpc-parameters.component';
-import {
-  ModbusRpcParametersComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component';
-import { RpcTemplateArrayViewPipe } from '@home/components/widget/lib/gateway/pipes/rpc-template-array-view.pipe';
-import { 
-  ReportStrategyComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/report-strategy/report-strategy.component';
 
 @NgModule({
   declarations: [
@@ -185,7 +102,6 @@ import {
     MultipleInputWidgetComponent,
     TripAnimationComponent,
     PhotoCameraInputWidgetComponent,
-    GatewayFormComponent,
     NavigationCardsWidgetComponent,
     NavigationCardWidgetComponent,
     QrCodeWidgetComponent,
@@ -194,21 +110,6 @@ import {
     SelectEntityDialogComponent,
     LegendComponent,
     FlotWidgetComponent,
-    GatewayConnectorComponent,
-    AddConnectorDialogComponent,
-    MappingDialogComponent,
-    DeviceInfoTableComponent,
-    MappingDataKeysPanelComponent,
-    TypeValuePanelComponent,
-    GatewayLogsComponent,
-    GatewayStatisticsComponent,
-    GatewayServiceRPCComponent,
-    GatewayServiceRPCConnectorComponent,
-    GatewayServiceRPCConnectorTemplatesComponent,
-    DeviceGatewayCommandComponent,
-    GatewayConfigurationComponent,
-    GatewayRemoteConfigurationDialogComponent,
-    GatewayServiceRPCConnectorTemplateDialogComponent,
     ValueCardWidgetComponent,
     AggregatedValueCardWidgetComponent,
     CountWidgetComponent,
@@ -246,28 +147,8 @@ import {
     RpcWidgetsModule,
     HomePageWidgetsModule,
     SharedHomeComponentsModule,
-    RestConnectorSecurityComponent,
-    GatewayHelpLinkPipe,
-    BrokerConfigControlComponent,
-    WorkersConfigControlComponent,
-    OpcServerConfigComponent,
-    MqttBasicConfigComponent,
-    MappingTableComponent,
-    OpcUaBasicConfigComponent,
     KeyValueIsNotEmptyPipe,
-    ModbusBasicConfigComponent,
     EllipsisChipListDirective,
-    ModbusRpcParametersComponent,
-    MqttLegacyBasicConfigComponent,
-    GatewayBasicConfigurationComponent,
-    GatewayAdvancedConfigurationComponent,
-    OpcUaLegacyBasicConfigComponent,
-    ModbusLegacyBasicConfigComponent,
-    MqttRpcParametersComponent,
-    OpcRpcParametersComponent,
-    ModbusRpcParametersComponent,
-    RpcTemplateArrayViewPipe,
-    ReportStrategyComponent,
   ],
   exports: [
     EntitiesTableWidgetComponent,
@@ -282,7 +163,6 @@ import {
     MultipleInputWidgetComponent,
     TripAnimationComponent,
     PhotoCameraInputWidgetComponent,
-    GatewayFormComponent,
     NavigationCardsWidgetComponent,
     NavigationCardWidgetComponent,
     QrCodeWidgetComponent,
@@ -290,22 +170,7 @@ import {
     MarkdownWidgetComponent,
     LegendComponent,
     FlotWidgetComponent,
-    GatewayConnectorComponent,
-    AddConnectorDialogComponent,
-    MappingDialogComponent,
-    DeviceInfoTableComponent,
-    MappingDataKeysPanelComponent,
-    TypeValuePanelComponent,
-    GatewayLogsComponent,
-    GatewayServiceRPCConnectorComponent,
-    GatewayServiceRPCConnectorTemplatesComponent,
     EllipsisChipListDirective,
-    GatewayStatisticsComponent,
-    GatewayServiceRPCComponent,
-    DeviceGatewayCommandComponent,
-    GatewayConfigurationComponent,
-    GatewayRemoteConfigurationDialogComponent,
-    GatewayServiceRPCConnectorTemplateDialogComponent,
     ValueCardWidgetComponent,
     AggregatedValueCardWidgetComponent,
     CountWidgetComponent,
@@ -337,7 +202,7 @@ import {
     ScadaSymbolWidgetComponent
   ],
   providers: [
-    {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule}
+    {provide: WIDGET_COMPONENTS_MODULE_TOKEN, useValue: WidgetComponentsModule},
   ]
 })
 export class WidgetComponentsModule {
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 3babbfe13f..b2d1d68ed0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -26,13 +26,13 @@
     </div>
   </div>
   <div *ngIf="widgetConfigMode === widgetConfigModes.advanced; else basicMode" class="tb-widget-config-content">
-    <div *ngIf="widgetType !== widgetTypes.static" [fxShow]="selectedOption === 'data'" class="mat-content">
+    <div *ngIf="widgetType !== widgetTypes.static" [class.!hidden]="selectedOption !== 'data'" class="mat-content">
       <ng-container *ngTemplateOutlet="data"></ng-container>
     </div>
-    <div [fxShow]="selectedOption === 'appearance'" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'appearance'" class="mat-content">
       <ng-container *ngTemplateOutlet="appearance"></ng-container>
     </div>
-    <div [fxShow]="selectedOption === 'card'" [formGroup]="widgetSettings" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'card'" [formGroup]="widgetSettings" class="mat-content">
       <div class="tb-form-panel">
         <div class="tb-form-panel-title" translate>widget-config.card-title</div>
         <mat-slide-toggle class="mat-slide" formControlName="showTitle">
@@ -40,8 +40,8 @@
         </mat-slide-toggle>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <div class="flex flex-1 flex-row items-center justify-start gap-2">
+            <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
             </mat-form-field>
             <tb-font-settings formControlName="titleFont"
@@ -57,7 +57,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>widget-config.title-tooltip</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="titleTooltip" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
@@ -65,7 +65,7 @@
           <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
             {{ 'widget-config.display-icon' | translate }}
           </mat-slide-toggle>
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-start gap-2">
             <mat-form-field appearance="outline" subscriptSizing="dynamic">
               <input matInput formControlName="iconSize">
             </mat-form-field>
@@ -82,7 +82,7 @@
         </div>
         <mat-expansion-panel class="tb-settings">
           <mat-expansion-panel-header>
-            <mat-panel-description fxLayoutAlign="start" translate>
+            <mat-panel-description class="flex items-stretch justify-start" translate>
               widget-config.advanced-title-style
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -134,7 +134,7 @@
         </mat-slide-toggle>
         <mat-expansion-panel class="tb-settings">
           <mat-expansion-panel-header>
-            <mat-panel-description fxLayoutAlign="start" translate>
+            <mat-panel-description class="flex items-stretch justify-start" translate>
               widget-config.advanced-widget-style
             </mat-panel-description>
           </mat-expansion-panel-header>
@@ -158,7 +158,7 @@
         </mat-slide-toggle>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
+    <div [class.!hidden]="selectedOption !== 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
       <div class="tb-form-panel" style="height: 100%;">
         <tb-manage-widget-actions
           [callbacks]="widgetConfigCallbacks"
@@ -168,7 +168,7 @@
         </tb-manage-widget-actions>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'layout'" [formGroup]="layoutSettings" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'layout'" [formGroup]="layoutSettings" class="mat-content">
       <div class="tb-form-panel" *ngIf="!showLayoutConfig || isDefaultBreakpoint">
         <div class="tb-form-panel-title" translate>widget-config.resize-options</div>
         <div class="tb-form-row">
@@ -236,7 +236,7 @@
       </tb-timewindow-config-panel>
     </ng-container>
     <div *ngIf="widgetType === widgetTypes.alarm" [formGroup]="dataSettings" class="tb-form-panel">
-      <div fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="flex flex-row items-center justify-between">
         <div class="tb-form-panel-title" translate>alarm.filter</div>
         <button mat-button color="primary"
                 (click)="alarmFilterConfig.reset()">
@@ -294,7 +294,7 @@
       </div>
       <div *ngIf="displayNoDataDisplayMessageConfig" class="tb-form-row column-xs">
         <div class="fixed-title-width" translate>widget-config.no-data-display-message</div>
-        <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="noDataDisplayMessage" placeholder="{{ 'widget-config.set-message' | translate }}">
         </mat-form-field>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
index 735212c2b3..6be327290d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
@@ -17,7 +17,6 @@
 import {
   ChangeDetectorRef,
   Component,
-  ComponentFactoryResolver,
   ComponentRef,
   forwardRef,
   Input,
@@ -212,7 +211,6 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
               private entityService: EntityService,
               private dialog: MatDialog,
               public translate: TranslateService,
-              private cfr: ComponentFactoryResolver,
               private fb: UntypedFormBuilder,
               private cd: ChangeDetectorRef) {
     super(store);
@@ -444,10 +442,9 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
       this.basicModeDirectiveError = this.translate.instant('widget-config.settings-component-not-found',
         {selector: this.modelValue.basicModeDirective});
     } else {
-      const factory = this.cfr.resolveComponentFactory(componentType);
       this.createBasicModeComponentTimeout = setTimeout(() => {
         this.createBasicModeComponentTimeout = null;
-        this.basicModeComponentRef = this.basicModeContainer.createComponent(factory);
+        this.basicModeComponentRef = this.basicModeContainer.createComponent(componentType);
         this.basicModeComponent = this.basicModeComponentRef.instance;
         this.basicModeComponent.isAdd = isAdd;
         this.basicModeComponent.widgetConfig = this.modelValue;
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 43223de4b6..ed1f089454 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -20,16 +20,14 @@
      [fullscreenBackgroundImage]="backgroundImage"
      (fullscreenChanged)="onFullscreenChanged($event)"
      class="tb-widget"
-     [ngClass]="{
-                'tb-highlighted': isHighlighted(widget),
-                'tb-not-highlighted': isNotHighlighted(widget),
-                'mat-elevation-z4': widget.dropShadow,
-                'tb-overflow-visible': widgetComponent.widgetContext?.overflowVisible,
-                'tb-has-timewindow': widget.hasTimewindow,
-                'tb-edit': isEdit || isEditingWidget,
-                'tb-hover': hovered
-             }"
-     [ngStyle]="widget.style">
+     [class.tb-highlighted]="isHighlighted(widget)"
+     [class.tb-not-highlighted]="isNotHighlighted(widget)"
+     [class.mat-elevation-z4]="widget.dropShadow"
+     [class.tb-overflow-visible]="widgetComponent.widgetContext?.overflowVisible"
+     [class.tb-has-timewindow]="widget.hasTimewindow"
+     [class.tb-edit]="isEdit || isEditingWidget"
+     [class.tb-hover]="hovered"
+     [style]="widget.style">
   <div *ngIf="!!widgetComponent.widgetContext?.inited"
        class="tb-widget-header">
     <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
@@ -40,21 +38,21 @@
          [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
          (mousedown)="$event.stopPropagation()">
       <button mat-icon-button *ngFor="let action of widget.customHeaderActions"
-              [fxShow]="!isEdit"
+              [class.!hidden]="isEdit"
               (click)="action.onAction($event)"
               matTooltip="{{ action.displayName }}"
               matTooltipPosition="above">
         <tb-icon>{{ action.icon }}</tb-icon>
       </button>
       <button mat-icon-button *ngFor="let action of widget.widgetActions"
-              [fxShow]="!isEdit && action.show"
+              [class.!hidden]="isEdit || !action.show"
               (click)="action.onAction($event)"
               matTooltip="{{ action.name | translate }}"
               matTooltipPosition="above">
         <tb-icon>{{ action.icon }}</tb-icon>
       </button>
       <button mat-icon-button
-              [fxShow]="!isEdit && widget.enableFullscreen"
+              [class.!hidden]="isEdit || !widget.enableFullscreen"
               (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()"
               matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
               matTooltipPosition="above">
@@ -62,7 +60,7 @@
       </button>
     </div>
   </div>
-  <div class="tb-widget-content" [ngClass]="{'tb-no-interaction': disableWidgetInteraction}">
+  <div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction">
     <tb-widget #widgetComponent
                [dashboardWidget]="widget"
                [isEdit]="isEdit"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 2480597218..13a1815fe1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -385,7 +385,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
         {{ 'widget.reference' | translate }}
         <button mat-icon-button class="tb-mat-16"
                 color="primary"
-                [fxShow]="container.isEditActionEnabled"
+                [class.!hidden]="!container.isEditActionEnabled"
                 (click)="container.onReplaceReferenceWithWidgetCopy($event)"
                 matTooltip="{{ 'widget.replace-reference-with-widget-copy' | translate }}"
                 matTooltipPosition="above">
@@ -394,21 +394,21 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
       </div>
       <div class="tb-widget-actions-panel">
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isEditActionEnabled"
+                [class.!hidden]="!container.isEditActionEnabled"
                 (click)="container.onEdit($event)"
                 matTooltip="{{ 'widget.edit' | translate }}"
                 matTooltipPosition="above">
           <tb-icon>edit</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isExportActionEnabled"
+                [class.!hidden]="!container.isExportActionEnabled"
                 (click)="container.onExport($event)"
                 matTooltip="{{ 'widget.export' | translate }}"
                 matTooltipPosition="above">
           <tb-icon>file_download</tb-icon>
         </button>
         <button mat-icon-button class="tb-mat-20"
-                [fxShow]="container.isRemoveActionEnabled"
+                [class.!hidden]="!container.isRemoveActionEnabled"
                 (click)="container.onRemove($event);"
                 matTooltip="{{ 'widget.remove' | translate }}"
                 matTooltipPosition="above">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.html b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
index dd4faf837f..2207109eb1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="tb-absolute-fill" fxLayout="column" tb-toast
+<div class="tb-absolute-fill flex flex-col" tb-toast
      toastTarget="{{ toastTargetId }}">
-  <div fxFlex id="widget-container">
+  <div class="flex-1" id="widget-container">
     <ng-container #widgetContent></ng-container>
   </div>
 </div>
@@ -25,10 +25,9 @@
   <span [innerHtml]="('Widget Error:<br/><br/>' + widgetErrorData.message) | safe:'html'"></span>
 </div>
 <div class="tb-absolute-fill tb-widget-no-data" *ngIf="displayNoData">
-  <span fxLayoutAlign="center center"
-        style="display: flex;"
-        class="tb-absolute-fill">{{ noDataDisplayMessageText }}</span>
+  <span style="display: flex;"
+        class="tb-absolute-fill flex items-center justify-center">{{ noDataDisplayMessageText }}</span>
 </div>
-<div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">
+<div class="tb-absolute-fill tb-widget-loading flex flex-col items-center justify-center" [class.!hidden]="!loadingData">
   <mat-spinner color="accent" mode="indeterminate" diameter="40"></mat-spinner>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index b58e9fe85b..7329eb1eaf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -15,7 +15,6 @@
 ///
 
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -39,7 +38,8 @@ import {
 } from '@angular/core';
 import { DashboardWidget } from '@home/models/dashboard-component.models';
 import {
-  Widget, WidgetAction,
+  Widget,
+  WidgetAction,
   WidgetActionDescriptor,
   widgetActionSources,
   WidgetActionType,
@@ -57,7 +57,8 @@ import { WidgetService } from '@core/http/widget.service';
 import { UtilsService } from '@core/services/utils.service';
 import { forkJoin, Observable, of, ReplaySubject, Subscription, throwError } from 'rxjs';
 import {
-  deepClone, guid,
+  deepClone,
+  guid,
   insertVariable,
   isDefined,
   isNotEmptyStr,
@@ -69,9 +70,9 @@ import {
   IDynamicWidgetComponent,
   ShowWidgetHeaderActionFunction,
   updateEntityParams,
-  WidgetContext,
+  WidgetContext, widgetContextToken, widgetErrorMessagesToken,
   WidgetHeaderAction,
-  WidgetInfo,
+  WidgetInfo, widgetTitlePanelToken,
   WidgetTypeInstance
 } from '@home/models/widget-component.models';
 import {
@@ -87,7 +88,12 @@ import {
 import { EntityId } from '@shared/models/id/entity-id';
 import { ActivatedRoute, Router } from '@angular/router';
 import cssjs from '@core/css/css';
-import { ModulesWithFactories, ResourcesService } from '@core/services/resources.service';
+import {
+  flatModulesWithComponents,
+  ModulesWithComponents,
+  modulesWithComponentsToTypes,
+  ResourcesService
+} from '@core/services/resources.service';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TimeService } from '@core/services/time.service';
@@ -122,7 +128,7 @@ import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class WidgetComponent extends PageComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+export class WidgetComponent extends PageComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input()
   widgetTitlePanel: TemplateRef<any>;
@@ -326,9 +332,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     }
   }
 
-  ngAfterViewInit(): void {
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     for (const propName of Object.keys(changes)) {
       const change = changes[propName];
@@ -740,15 +743,15 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         {
           providers: [
             {
-              provide: 'widgetContext',
+              provide: widgetContextToken,
               useValue: this.widgetContext
             },
             {
-              provide: 'errorMessages',
+              provide: widgetErrorMessagesToken,
               useValue: this.errorMessages
             },
             {
-              provide: 'widgetTitlePanel',
+              provide: widgetTitlePanelToken,
               useValue: this.widgetTitlePanel
             }
           ],
@@ -956,11 +959,15 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
           this.widgetContext.hiddenData = subscription.hiddenData;
           this.widgetContext.timeWindow = subscription.timeWindow;
           this.widgetContext.defaultSubscription = subscription;
-          createSubscriptionSubject.next();
-          createSubscriptionSubject.complete();
+          this.ngZone.run(() => {
+            createSubscriptionSubject.next();
+            createSubscriptionSubject.complete();
+          });
         },
         (err) => {
-          createSubscriptionSubject.error(err);
+          this.ngZone.run(() => {
+            createSubscriptionSubject.error(err);
+          });
         }
       );
     } else if (this.widget.type === widgetType.rpc) {
@@ -1013,11 +1020,15 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       this.createSubscription(options).subscribe(
         (subscription) => {
           this.widgetContext.defaultSubscription = subscription;
-          createSubscriptionSubject.next();
-          createSubscriptionSubject.complete();
+          this.ngZone.run(() => {
+            createSubscriptionSubject.next();
+            createSubscriptionSubject.complete();
+          });
         },
         (err) => {
-          createSubscriptionSubject.error(err);
+          this.ngZone.run(() => {
+            createSubscriptionSubject.error(err);
+          });
         }
       );
       this.detectChanges();
@@ -1129,7 +1140,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
                 }
                 const customActionPrettyFunction = new Function('$event', 'widgetContext', 'entityId',
                   'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', customPrettyFunction);
-                this.widgetContext.customDialog.setAdditionalModules(descriptor.customModules);
+                this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports);
                 customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
               } catch (e) {
                 console.error(e);
@@ -1459,7 +1470,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>,
                                     actionDescriptor: WidgetAction): Observable<any> {
     const resourceTasks: Observable<string>[] = [];
-    const modulesTasks: Observable<ModulesWithFactories | string>[] = [];
+    const modulesTasks: Observable<ModulesWithComponents | string>[] = [];
 
     if (isDefined(customCss) && customCss.length > 0) {
       this.cssParser.cssPreviewNamespace = actionNamespace;
@@ -1470,7 +1481,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       customResources.forEach(resource => {
         if (resource.isModule) {
           modulesTasks.push(
-            this.resources.loadFactories(resource.url, this.modulesMap).pipe(
+            this.resources.loadModulesWithComponents(resource.url, this.modulesMap).pipe(
               catchError((e: Error) => of(e?.message ? e.message : `Failed to load custom action resource module: '${resource.url}'`))
             )
           );
@@ -1484,28 +1495,24 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       });
 
       if (modulesTasks.length) {
-        const modulesObservable: Observable<string | Type<any>[]> = forkJoin(modulesTasks).pipe(
+        const importsObservable: Observable<string | Type<any>[]> = forkJoin(modulesTasks).pipe(
           map(res => {
             const msg = res.find(r => typeof r === 'string');
             if (msg) {
               return msg as string;
             } else {
-              const modulesWithFactoriesList = res as ModulesWithFactories[];
-              const resModulesWithFactories: ModulesWithFactories = {
-                modules: modulesWithFactoriesList.map(mf => mf.modules).flat(),
-                factories: modulesWithFactoriesList.map(mf => mf.factories).flat()
-              };
-              return resModulesWithFactories.modules;
+              const modulesWithComponents = flatModulesWithComponents(res as ModulesWithComponents[]);
+              return modulesWithComponentsToTypes(modulesWithComponents);
             }
           })
         );
 
-        resourceTasks.push(modulesObservable.pipe(
-          map((resolvedModules) => {
-            if (typeof resolvedModules === 'string') {
-              return resolvedModules;
+        resourceTasks.push(importsObservable.pipe(
+          map((resolvedImports) => {
+            if (typeof resolvedImports === 'string') {
+              return resolvedImports;
             } else {
-              actionDescriptor.customModules = resolvedModules;
+              actionDescriptor.customImports = resolvedImports;
               return null;
             }
           })));
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 6806fb4a37..d0178b8c64 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>device.add-device-text</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div [tb-help]="'devices'"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -103,7 +103,7 @@
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-stroked-button
             color="primary"
             *ngIf="showNext"
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index 96d8d62bc3..ec959a956f 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,7 +39,7 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index fb8bb008e8..fc0d394b80 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ assignToEdgeTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,7 +39,7 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             style="margin-right: 20px;"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index c740994ea5..fa46d6d950 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -38,7 +38,7 @@
       </tb-entity-autocomplete>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 4c52919d34..dfe4d6b04c 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -23,50 +23,53 @@
                [opened]="sidenavOpened && !forceFullscreen">
     <header class="tb-nav-header">
       <mat-toolbar color="primary" class="tb-nav-header-toolbar">
-        <div fxFlex="auto" fxLayout="row">
+        <div class="flex flex-auto">
           <img [src]="logo"
                aria-label="logo" class="tb-logo-title"/>
         </div>
       </mat-toolbar>
     </header>
-    <mat-toolbar color="primary" fxFlex="0%" class="tb-side-menu-toolbar" fxLayout="column" role="navigation">
+    <mat-toolbar color="primary" class="tb-side-menu-toolbar flex flex-1 flex-col" role="navigation">
       <tb-side-menu></tb-side-menu>
     </mat-toolbar>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div fxLayout="column" role="main" style="height: 100%;">
-      <mat-toolbar fxLayout="row" color="primary" class="tb-primary-toolbar">
-        <button [fxShow]="!forceFullscreen" mat-icon-button id="main"
-                [ngClass]="{'tb-invisible': displaySearchMode()}"
-                fxHide.gt-sm (click)="sidenav.toggle()">
+    <div class="flex flex-col" role="main" style="height: 100%;">
+      <mat-toolbar color="primary" class="tb-primary-toolbar flex flex-row">
+        <button mat-icon-button id="main"
+                [class.!hidden]="forceFullscreen || displaySearchMode()"
+                class="gt-sm:!hidden" (click)="sidenav.toggle()">
           <mat-icon class="material-icons">menu</mat-icon>
         </button>
-        <button [fxShow]="forceFullscreen" mat-icon-button
-                [ngClass]="{'tb-invisible': displaySearchMode()}"
+        <button mat-icon-button
+                [class.!hidden]="!forceFullscreen || displaySearchMode"
                 (click)="goBack()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
         <button mat-icon-button
-                [ngClass]="{'tb-invisible': !displaySearchMode()}"
+                [class.!hidden]="!displaySearchMode()"
                 (click)="closeSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
-        <tb-breadcrumb [fxShow]="!displaySearchMode()"
-             fxFlex class="mat-toolbar-tools">
+        <tb-breadcrumb
+            [class.!hidden]="displaySearchMode()"
+            class="mat-toolbar-tools flex-1">
         </tb-breadcrumb>
-        <div [fxShow]="displaySearchMode()" fxFlex fxLayout="row" class="tb-dark">
-          <mat-form-field fxFlex class="tb-appearance-transparent">
+        <div [class.!hidden]="!displaySearchMode()" class="tb-dark flex flex-1 flex-row">
+          <mat-form-field class="tb-appearance-transparent flex-1">
             <input #searchInput matInput
                    [formControl]="textSearch"
                    placeholder="{{ 'common.enter-search' | translate }}"/>
           </mat-form-field>
         </div>
-        <button [fxShow]="searchEnabled"
+        <button [class.!hidden]="!searchEnabled"
                 mat-icon-button (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>
         </button>
-        <button *ngIf="fullscreenEnabled" [fxShow]="!displaySearchMode()"
-                mat-icon-button fxHide.lt-md (click)="toggleFullscreen()">
+        <button *ngIf="fullscreenEnabled"
+                [class.!hidden]="displaySearchMode()"
+                class="lt-md:!hidden"
+                mat-icon-button (click)="toggleFullscreen()">
           <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         </button>
         <tb-notification-bell></tb-notification-bell>
@@ -75,7 +78,7 @@
       <mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
                         *ngIf="!hideLoadingBar && (isLoading$ | async)">
       </mat-progress-bar>
-      <div fxFlex fxLayout="column" tb-toast class="tb-main-content">
+      <div tb-toast class="tb-main-content flex flex-1 flex-col">
         <router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
       </div>
     </div>
diff --git a/ui-ngx/src/app/modules/home/home.component.scss b/ui-ngx/src/app/modules/home/home.component.scss
index 52a41ff9e3..7b49782090 100644
--- a/ui-ngx/src/app/modules/home/home.component.scss
+++ b/ui-ngx/src/app/modules/home/home.component.scss
@@ -18,10 +18,6 @@
   width: 100%;
   height: 100%;
 
-  .tb-invisible {
-    display: none !important;
-  }
-
   mat-sidenav-container {
     flex: 1;
   }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 3d488e9229..3a43f97bad 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -18,10 +18,10 @@
 <a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
-  <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
-        [ngClass]="{'tb-toggled' : section.opened}"></span>
+  <span class="pull-right fa fa-chevron-down tb-toggle-icon"
+        [class.tb-toggled]="section.opened"></span>
 </a>
-<ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
+<ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [style.height]="sectionHeight()">
   <li *ngFor="let page of section.pages; trackBy: trackBySectionPages">
     <tb-menu-link [section]="page"></tb-menu-link>
   </li>
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index bbbc323502..519dd64fae 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<ul fxFlex fxLayout="column" fxLayoutAlign="start stretch" class="tb-side-menu">
+<ul class="tb-side-menu flex flex-col items-stretch justify-start">
   <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
     <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
     <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
diff --git a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
index 65c6c23004..b4132bf882 100644
--- a/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
@@ -42,6 +42,7 @@ import { enumerable } from '@shared/decorators/enumerable';
 import { UtilsService } from '@core/services/utils.service';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { ComponentStyle, iconStyle, textStyle } from '@shared/models/widget-settings.models';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 
 export interface WidgetsData {
   widgets: Array<Widget>;
@@ -56,11 +57,11 @@ export interface ContextMenuItem {
 }
 
 export interface DashboardContextMenuItem extends ContextMenuItem {
-  action: (contextMenuEvent: MouseEvent) => void;
+  action: (contextMenuEvent: TbContextMenuEvent) => void;
 }
 
 export interface WidgetContextMenuItem extends ContextMenuItem {
-  action: (contextMenuEvent: MouseEvent, widget: Widget) => void;
+  action: (contextMenuEvent: TbContextMenuEvent, widget: Widget) => void;
 }
 
 export interface DashboardCallbacks {
@@ -94,7 +95,7 @@ export interface IDashboardComponent {
   highlightWidget(widgetId: string, delay?: number);
   selectWidget(widgetId: string, delay?: number);
   getSelectedWidget(): Widget;
-  getEventGridPosition(event: Event): WidgetPosition;
+  getEventGridPosition(event: TbContextMenuEvent | KeyboardEvent): WidgetPosition;
   notifyGridsterOptionsChanged();
   pauseChangeNotifications();
   resumeChangeNotifications();
diff --git a/ui-ngx/src/app/modules/home/models/datasource/attribute-datasource.ts b/ui-ngx/src/app/modules/home/models/datasource/attribute-datasource.ts
index 00853d868e..30756a8677 100644
--- a/ui-ngx/src/app/modules/home/models/datasource/attribute-datasource.ts
+++ b/ui-ngx/src/app/modules/home/models/datasource/attribute-datasource.ts
@@ -25,7 +25,7 @@ import {
   AttributeData,
   AttributeScope,
   isClientSideTelemetryType,
-  TelemetrySubscriber,
+  SharedTelemetrySubscriber,
   TelemetryType
 } from '@shared/models/telemetry/telemetry.models';
 import { AttributeService } from '@core/http/attribute.service';
@@ -42,7 +42,7 @@ export class AttributeDatasource implements DataSource<AttributeData> {
   public selection = new SelectionModel<AttributeData>(true, []);
 
   private allAttributes: Observable<Array<AttributeData>>;
-  private telemetrySubscriber: TelemetrySubscriber;
+  private telemetrySubscriber: SharedTelemetrySubscriber;
 
   constructor(private attributeService: AttributeService,
               private telemetryWsService: TelemetryWebsocketService,
@@ -99,10 +99,10 @@ export class AttributeDatasource implements DataSource<AttributeData> {
     if (!this.allAttributes) {
       let attributesObservable: Observable<Array<AttributeData>>;
       if (isClientSideTelemetryType.get(attributesScope)) {
-        this.telemetrySubscriber = TelemetrySubscriber.createEntityAttributesSubscription(
+        this.telemetrySubscriber = SharedTelemetrySubscriber.createEntityAttributesSubscription(
           this.telemetryWsService, entityId, attributesScope, this.zone);
         this.telemetrySubscriber.subscribe();
-        attributesObservable = this.telemetrySubscriber.attributeData$();
+        attributesObservable = this.telemetrySubscriber.attributeData$;
       } else {
         attributesObservable = this.attributeService.getEntityAttributes(entityId, attributesScope as AttributeScope);
       }
diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
index 673bc21edb..971c7db6f7 100644
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
@@ -47,7 +47,7 @@ import {
   WidgetActionsApi,
   WidgetSubscriptionApi
 } from '@core/api/widget-api.models';
-import { ChangeDetectorRef, Injector, NgZone, Type } from '@angular/core';
+import { ChangeDetectorRef, InjectionToken, Injector, NgZone, TemplateRef, Type } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { RafService } from '@core/services/raf.service';
 import { WidgetTypeId } from '@shared/models/id/widget-type-id';
@@ -98,7 +98,9 @@ import * as RxJSOperators from 'rxjs/operators';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { EntityId } from '@shared/models/id/entity-id';
 import { AlarmQuery, AlarmSearchStatus, AlarmStatus } from '@app/shared/models/alarm.models';
-import { ImagePipe, MillisecondsToTimeStringPipe, TelemetrySubscriber } from '@app/shared/public-api';
+import { ImagePipe } from '@shared/pipe/image.pipe';
+import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
+import { SharedTelemetrySubscriber, TelemetrySubscriber } from '@shared/models/telemetry/telemetry.models';
 import { UserId } from '@shared/models/id/user-id';
 import { UserSettingsService } from '@core/http/user-settings.service';
 import { DataKeySettingsFunction } from '@home/components/widget/config/data-keys.component.models';
@@ -204,7 +206,7 @@ export class WidgetContext {
   userSettingsService: UserSettingsService;
   utilsService: UtilsService;
   telemetryWsService: TelemetryWebsocketService;
-  telemetrySubscribers?: TelemetrySubscriber[];
+  telemetrySubscribers?: Array<TelemetrySubscriber | SharedTelemetrySubscriber>;
   date: DatePipe;
   imagePipe: ImagePipe;
   milliSecondsToTimeString: MillisecondsToTimeStringPipe;
@@ -415,7 +417,13 @@ export class WidgetContext {
         this.dashboardWidget.updateWidgetParams();
       }
       try {
-        this.changeDetectorValue.detectChanges();
+        if (this.ngZone) {
+          this.ngZone.run(() => {
+            this.changeDetectorValue?.detectChanges();
+          });
+        } else {
+          this.changeDetectorValue?.detectChanges();
+        }
       } catch (e) {
         // console.log(e);
       }
@@ -425,7 +433,13 @@ export class WidgetContext {
   detectContainerChanges() {
     if (!this.destroyed) {
       try {
-        this.containerChangeDetectorValue.detectChanges();
+        if (this.ngZone) {
+          this.ngZone.run(() => {
+            this.containerChangeDetectorValue?.detectChanges();
+          });
+        } else {
+          this.containerChangeDetectorValue?.detectChanges();
+        }
       } catch (e) {
         // console.log(e);
       }
@@ -524,6 +538,10 @@ export class LabelVariablePattern {
   }
 }
 
+export const widgetContextToken = new InjectionToken<WidgetContext>('widgetContext');
+export const widgetErrorMessagesToken = new InjectionToken<string[]>('errorMessages');
+export const widgetTitlePanelToken = new InjectionToken<TemplateRef<any>>('widgetTitlePanel');
+
 export interface IDynamicWidgetComponent {
   readonly ctx: WidgetContext;
   readonly errorMessages: string[];
diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
index 7127d98723..43a2c588c2 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
@@ -15,15 +15,7 @@
 ///
 
 import { inject, NgModule } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-  ResolveFn,
-  Router,
-  RouterModule,
-  RouterStateSnapshot,
-  Routes
-} from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveFn, Router, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 
 import { MailServerComponent } from '@modules/home/pages/admin/mail-server.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
index 870058bda3..027c605d48 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
@@ -18,7 +18,7 @@
 <mat-card appearance="outlined" class="settings-card">
   <mat-card-header>
     <mat-card-title>
-      <div fxLayout="row">
+      <div class="flex flex-row">
         <span class="mat-headline-5" translate>admin.general-settings</span>
       </div>
     </mat-card-title>
@@ -44,7 +44,7 @@
           </div>
         </div>
       </fieldset>
-      <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+      <div class="flex flex-row flex-wrap items-center justify-end gap-2">
         <button mat-button color="primary"
                 [disabled]="generalSettings.pristine"
                 (click)="discardGeneralSettings()"
@@ -96,11 +96,11 @@
               {{ 'admin.device-connectivity.' + protocol | translate }}
             </mat-slide-toggle>
             <div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.host</mat-label>
                 <input matInput formControlName="host"/>
               </mat-form-field>
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.port</mat-label>
                 <input matInput type="number" min="0" max="65535" formControlName="port"/>
                 <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
@@ -114,7 +114,7 @@
             </div>
           </div>
         </ng-template>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2">
           <button mat-button color="primary"
                   [disabled]="deviceConnectivitySettingsForm.pristine"
                   (click)="discardDeviceConnectivitySettings()"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
index d928712547..9df874863b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
@@ -24,25 +24,25 @@
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
-    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+    <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="homeSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
-          <section class="tb-default-dashboard" fxFlex fxLayout="column">
-            <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="tb-default-dashboard flex flex-1 flex-col">
+            <section class="flex flex-1 flex-col gt-sm:flex-row">
               <tb-dashboard-autocomplete
-                fxFlex
+                class="flex-1"
                 label="{{ 'dashboard.home-dashboard' | translate }}"
                 formControlName="dashboardId"
                 [dashboardsScope]="'tenant'"
                 [selectFirstDashboard]="false"
               ></tb-dashboard-autocomplete>
-              <mat-checkbox fxFlex formControlName="hideDashboardToolbar">
+              <mat-checkbox class="flex-1" formControlName="hideDashboardToolbar">
                 {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
               </mat-checkbox>
             </section>
           </section>
-          <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
+          <div class="flex w-full flex-row flex-wrap items-center justify-end">
             <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || homeSettings.invalid || !homeSettings.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index c613234714..14a6358efb 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.outgoing-mail-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="outgoingMailSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -49,7 +49,7 @@
 
           <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
             <mat-expansion-panel-header>
-              <mat-panel-title fxLayoutAlign="start center" translate>
+              <mat-panel-title class="flex items-center justify-start" translate>
                 admin.connection-settings
               </mat-panel-title>
             </mat-expansion-panel-header>
@@ -62,15 +62,15 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="10px">
-                <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+              <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2.5">
+                <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                   <mat-label translate>admin.smtp-host</mat-label>
                   <input matInput formControlName="smtpHost" placeholder="localhost" required/>
                   <mat-error *ngIf="mailSettings.get('smtpHost').hasError('required')">
                     {{ 'admin.smtp-host-required' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                   <mat-label translate>admin.smtp-port</mat-label>
                   <input matInput #smtpPortInput formControlName="smtpPort" placeholder="25" maxlength="5" required/>
                   <mat-hint align="end">{{smtpPortInput.value?.length || 0}}/5</mat-hint>
@@ -93,10 +93,10 @@
                   {{ 'admin.timeout-invalid' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-slide-toggle fxFlex formControlName="enableTls" style="display: block; padding-bottom: 22px;">
+              <mat-slide-toggle class="flex-1" formControlName="enableTls" style="display: block; padding-bottom: 22px;">
                 {{ 'admin.enable-tls' | translate }}
               </mat-slide-toggle>
-              <mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('enableTls').value">
+              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('enableTls').value">
                 <mat-label translate>admin.tls-version</mat-label>
                 <mat-select formControlName="tlsVersion">
                   <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
@@ -108,15 +108,15 @@
                 {{ 'admin.enable-proxy' | translate }}
               </mat-slide-toggle>
               <div *ngIf="mailSettings.get('enableProxy').value">
-                <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
-                  <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+                <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
+                  <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                     <mat-label translate>admin.proxy-host</mat-label>
                     <input matInput required formControlName="proxyHost">
                     <mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
                       {{ 'admin.proxy-host-required' | translate }}
                     </mat-error>
                   </mat-form-field>
-                  <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                  <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                     <mat-label translate>admin.proxy-port</mat-label>
                     <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
                     <mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
@@ -129,12 +129,12 @@
                     </mat-error>
                   </mat-form-field>
                 </div>
-                <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                  <mat-form-field fxFlex class="mat-block">
+                <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.proxy-user</mat-label>
                     <input matInput formControlName="proxyUser">
                   </mat-form-field>
-                  <mat-form-field fxFlex class="mat-block">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.proxy-password</mat-label>
                     <input matInput type="password" formControlName="proxyPassword" autocomplete="new-proxy-password">
                     <tb-toggle-password matSuffix></tb-toggle-password>
@@ -144,19 +144,19 @@
             </ng-template>
           </mat-expansion-panel>
 
-          <fieldset class="fields-group" fxLayout="column">
+          <fieldset class="fields-group flex flex-col">
             <legend class="group-title" translate>admin.oauth2.authentication</legend>
             <mat-form-field class="mat-block">
               <mat-label translate>common.username</mat-label>
               <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                      autocomplete="new-username"/>
             </mat-form-field>
-            <div fxLayoutAlign="space-between center" style="height: 50px; padding-bottom: 20px" [fxHide]="mailSettings.get('providerId').value === 'SENDGRID'">
+            <div class="flex items-center justify-between" style="height: 50px; padding-bottom: 20px" [class.!hidden]="mailSettings.get('providerId').value === 'SENDGRID'">
               <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                        style="width: 250px;"
                                        formControlName="enableOauth2">
-                <mat-button-toggle fxFlex [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
-                <mat-button-toggle fxFlex [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
+                <mat-button-toggle class="flex-1" [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
+                <mat-button-toggle class="flex-1" [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
               </mat-button-toggle-group>
               <div class="details-buttons" *ngIf="helpLink && mailSettings.get('enableOauth2').value">
                 <div [tb-help]="helpLink"></div>
@@ -174,8 +174,8 @@
               </mat-form-field>
             </section>
             <section *ngIf="mailSettings.get('enableOauth2').value">
-              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                <mat-form-field fxFlex class="mat-block">
+              <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.oauth2.client-id</mat-label>
                   <input matInput formControlName="clientId" required>
                   <mat-error *ngIf="mailSettings.get('clientId').hasError('required')">
@@ -186,7 +186,7 @@
                   </mat-error>
                 </mat-form-field>
 
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.oauth2.client-secret</mat-label>
                   <input matInput formControlName="clientSecret" required>
                   <mat-error *ngIf="mailSettings.get('clientSecret').hasError('required')">
@@ -198,7 +198,7 @@
                 </mat-form-field>
               </div>
 
-              <mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
+              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
                 <mat-label translate>admin.oauth2.microsoft-tenant-id</mat-label>
                 <input matInput formControlName="providerTenantId" required>
                 <mat-error *ngIf="mailSettings.get('providerTenantId').hasError('required')">
@@ -207,13 +207,13 @@
               </mat-form-field>
               <mat-expansion-panel class="mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
                 <mat-expansion-panel-header>
-                  <mat-panel-description fxLayoutAlign="end" translate>
+                  <mat-panel-description class="flex items-stretch justify-end" translate>
                     tenant-profile.advanced-settings
                   </mat-panel-description>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.authorization-uri</mat-label>
                       <input matInput formControlName="authUri" required>
                       <button mat-icon-button matSuffix
@@ -229,7 +229,7 @@
                       </mat-error>
                     </mat-form-field>
 
-                    <mat-form-field fxFlex class="mat-block">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.token-uri</mat-label>
                       <input matInput formControlName="tokenUri" required>
                       <button mat-icon-button matSuffix
@@ -245,7 +245,7 @@
                       </mat-error>
                     </mat-form-field>
                   </div>
-                  <mat-form-field fxFlex class="mat-block">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.oauth2.scope</mat-label>
                     <mat-chip-grid #scopeList>
                       <mat-chip-row *ngFor="let scope of mailSettings.get('scope').value; let k = index; trackBy: trackByParams"
@@ -265,12 +265,12 @@
                 </ng-template>
               </mat-expansion-panel>
 
-              <fieldset class="fields-group" fxLayout="column">
+              <fieldset class="fields-group flex flex-col">
                 <legend class="group-title" translate>admin.oauth2.redirect-uri</legend>
-                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-                  <div fxLayout="column" fxFlex.sm="60" fxFlex.gt-sm="50" [formGroup]="domainForm">
-                    <div fxLayout="row" fxLayout.xs="column" fxLayout.md="column" fxLayoutGap="8px" fxLayoutGap.md="0px">
-                      <mat-form-field fxFlex="30" fxFlex.md fxFlex.xs class="mat-block">
+                <div class="flex flex-1 flex-row gap-2 xs:flex-col">
+                  <div class="flex flex-col sm:max-w-60% sm:flex-full gt-sm:max-w-50% gt-sm:flex-full" [formGroup]="domainForm">
+                    <div class="flex flex-row gap-2 xs:flex-col md:flex-col md:gap-0">
+                      <mat-form-field class="mat-block max-w-30% flex-full xs:max-w-full xs:flex-1 md:max-w-full md:flex-1">
                         <mat-label translate>admin.oauth2.protocol</mat-label>
                         <mat-select formControlName="scheme">
                           <mat-option *ngFor="let protocol of protocols" [value]="protocol">
@@ -278,7 +278,7 @@
                           </mat-option>
                         </mat-select>
                       </mat-form-field>
-                      <mat-form-field fxFlex class="mat-block">
+                      <mat-form-field class="mat-block flex-1">
                         <mat-label translate>admin.domain-name</mat-label>
                         <input matInput formControlName="name" required>
                         <mat-error *ngIf="domainForm.get('name').hasError('pattern')">
@@ -294,8 +294,8 @@
                     </mat-error>
                   </div>
 
-                  <div fxFlex fxLayout="column">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-1 flex-col">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
                       <input matInput formControlName="redirectUri" readonly>
                       <tb-copy-button
@@ -311,10 +311,7 @@
                 </div>
               </fieldset>
             </section>
-            <section fxLayout="row"
-                     fxLayout.xs="column"
-                     fxLayoutAlign.gt-xs="space-between center"
-                     style="padding-bottom: 12px"
+            <section class="flex flex-row pb-3 xs:flex-col gt-xs:items-center gt-xs:justify-between"
                      *ngIf="mailSettings.get('enableOauth2').value">
               <div>
                 <span class="token-status" translate>admin.oauth2.access-token-status</span>
@@ -329,7 +326,7 @@
               </button>
             </section>
           </fieldset>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+          <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
             <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || mailSettings.get('enableOauth2').value ? mailSettings.invalid || domainForm.invalid || (mailSettings.dirty || domainForm.dirty) : mailSettings.invalid"
                     (click)="sendTestMail()">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
index 45e438e878..b87c58bc48 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss
@@ -97,6 +97,9 @@
         line-height: 24px;
         font-size: 16px;
         font-weight: 500;
+        .mat-pseudo-checkbox {
+          display: none;
+        }
       }
 
       .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
index dcce273be2..6fa0f29556 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
   <mat-toolbar color="primary">
     <h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,7 +32,7 @@
   <div mat-dialog-content style="padding: 0">
     <tb-client createNewDialog #clientComponent></tb-client>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
index df43a595fe..a5404d0933 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
@@ -72,7 +72,7 @@
   </div>
   <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
     <mat-expansion-panel-header>
-      <mat-panel-title fxLayoutAlign="start center" translate>
+      <mat-panel-title class="flex items-center justify-start" translate>
         admin.oauth2.advanced-settings
       </mat-panel-title>
     </mat-expansion-panel-header>
@@ -162,28 +162,12 @@
               </mat-slide-toggle>
             </div>
           </section>
-          <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.scope</mat-label>
-              <mat-chip-grid #scopeList required [disabled]="!this.createNewDialog && !(this.isEdit || this.isAdd)">
-                <mat-chip-row *ngFor="let scope of entityForm.get('scope').value; let k = index; trackBy: trackByParams"
-                              removable (removed)="removeScope(k, entityForm)">
-                  {{scope}}
-                  <mat-icon matChipRemove>cancel</mat-icon>
-                </mat-chip-row>
-                <input [matChipInputFor]="scopeList"
-                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                       matChipInputAddOnBlur
-                       (matChipInputTokenEnd)="addScope($event, entityForm)">
-              </mat-chip-grid>
-              <mat-error *ngIf="entityForm.get('scope').hasError('required')">
-                {{ 'admin.oauth2.scope-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </div>
-          <tb-error style="display: block; margin-top: -24px;"
-                    [error]="entityForm.get('scope').hasError('required') ? ('admin.oauth2.scope-required' | translate) : ''">
-          </tb-error>
+          <tb-string-items-list
+            formControlName="scope"
+            label="{{ 'admin.oauth2.scope' | translate }}"
+            requiredText="{{ 'admin.oauth2.scope-required' | translate }}"
+            required>
+          </tb-string-items-list>
         </section>
         <section class="tb-form-panel no-border no-padding no-gap" *ngIf="!generalSettingsMode">
           <div class="tb-form-row tb-standard-fields no-border no-padding">
@@ -251,7 +235,7 @@
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field class="flex"
-                                [fxShow]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
+                                [class.!hidden]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value !== 'CUSTOM'">
                   <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
                   <input matInput formControlName="tenantNamePattern"
                          [required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
index a66d1592d9..44a5993485 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
@@ -33,18 +33,10 @@ import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngrx/store';
-import {
-  AbstractControl,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validators
-} from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { isDefinedAndNotNull } from '@core/utils';
 import { OAuth2Service } from '@core/http/oauth2.service';
 import { Subscription } from 'rxjs';
-import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { PageLink } from '@shared/models/page/page-link';
 import { coerceBoolean } from '@app/shared/decorators/coercion';
@@ -84,16 +76,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
 
   private subscriptions: Array<Subscription> = [];
 
-  public static validateScope(control: AbstractControl): ValidationErrors | null {
-    const scope: string[] = control.value;
-    if (!scope || !scope.length) {
-      return {
-        required: true
-      };
-    }
-    return null;
-  }
-
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
   clientAuthenticationMethods = Object.keys(ClientAuthenticationMethod);
@@ -146,7 +128,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
       loginButtonLabel: [entity?.loginButtonLabel ? entity.loginButtonLabel : null, Validators.required],
       loginButtonIcon: [entity?.loginButtonIcon ? entity.loginButtonIcon : null],
       userNameAttributeName: [entity?.userNameAttributeName ? entity.userNameAttributeName : 'email', Validators.required],
-      scope: this.fb.array(entity?.scope ? entity.scope : [], ClientComponent.validateScope),
+      scope: [entity?.scope ? entity.scope : [], Validators.required],
       mapperConfig: this.fb.group({
         allowUserCreation: [isDefinedAndNotNull(entity?.mapperConfig?.allowUserCreation) ?
           entity.mapperConfig.allowUserCreation : true],
@@ -166,6 +148,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
       clientId: entity.clientId,
       clientSecret: entity.clientSecret,
       accessTokenUri: entity.accessTokenUri,
+      scope: entity.scope,
       authorizationUri: entity.authorizationUri,
       jwkSetUri: entity.jwkSetUri,
       userInfoUri: entity.userInfoUri,
@@ -181,19 +164,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     }, {emitEvent: false});
 
     this.changeMapperConfigType(this.entityForm, this.entityValue.mapperConfig.type, this.entityValue.mapperConfig);
-
-    const scopeControls = this.entityForm.get('scope') as UntypedFormArray;
-    if (entity.scope.length === scopeControls.length) {
-      scopeControls.patchValue(entity.scope, {emitEvent: false});
-    } else {
-      const newScopeControls: Array<AbstractControl> = [];
-      if (entity.scope) {
-        for (const scope of entity.scope) {
-          newScopeControls.push(this.fb.control(scope, [Validators.required]));
-        }
-      }
-      this.entityForm.setControl('scope', this.fb.array(newScopeControls));
-    }
   }
 
   getProviderName(): string {
@@ -204,35 +174,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     return this.getProviderName() === 'Custom';
   }
 
-  trackByParams(index: number): number {
-    return index;
-  }
-
-  trackByItem(i, item) {
-    return item;
-  }
-
-  addScope(event: MatChipInputEvent, control: AbstractControl): void {
-    const input = event.chipInput.inputElement;
-    const value = event.value;
-    const controller = control.get('scope') as UntypedFormArray;
-    if ((value.trim() !== '')) {
-      controller.push(this.fb.control(value.trim()));
-      controller.markAsDirty();
-    }
-
-    if (input) {
-      input.value = '';
-    }
-  }
-
-  removeScope(i: number, control: AbstractControl): void {
-    const controller = control.get('scope') as UntypedFormArray;
-    controller.removeAt(i);
-    controller.markAsTouched();
-    controller.markAsDirty();
-  }
-
   private initTemplates(templates: OAuth2ClientRegistrationTemplate[]): void {
     templates.map(provider => {
       delete provider.additionalInfo;
@@ -264,7 +205,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     }));
 
     this.subscriptions.push(this.entityForm.get('additionalInfo.providerName').valueChanges.subscribe((provider) => {
-      (this.entityForm.get('scope') as UntypedFormArray).clear();
+      this.entityForm.get('scope').setValue([]);
       this.setProviderDefaultValue(provider, this.entityForm);
     }));
   }
@@ -355,9 +296,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
       const template = this.templates.get(provider);
       template.clientId = '';
       template.clientSecret = '';
-      template.scope.forEach(() => {
-        (clientRegistration.get('scope') as UntypedFormArray).push(this.fb.control(''));
-      });
       clientRegistration.patchValue(template);
     }
   }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/clients-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/clients-table-config.resolver.ts
index a5993bc773..9f009bc54b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/clients-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/clients-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
+
 import {
   DateEntityTableColumn,
   EntityTableColumn,
@@ -37,7 +37,7 @@ import { Direction } from '@shared/models/page/sort-order';
 import { PageLink } from '@shared/models/page/page-link';
 
 @Injectable()
-export class ClientsTableConfigResolver implements Resolve<EntityTableConfig<OAuth2Client, PageLink, OAuth2ClientInfo>> {
+export class ClientsTableConfigResolver  {
 
   private readonly config: EntityTableConfig<OAuth2Client, PageLink, OAuth2ClientInfo> =
     new EntityTableConfig<OAuth2Client, PageLink, OAuth2ClientInfo>();
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts
index 5e2cb5f9ad..1359f24893 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import {
   DateEntityTableColumn,
   EntityActionTableColumn,
@@ -36,7 +36,7 @@ import { Direction } from '@app/shared/models/page/sort-order';
 import { map, Observable, of, mergeMap } from 'rxjs';
 
 @Injectable()
-export class DomainTableConfigResolver implements Resolve<EntityTableConfig<DomainInfo>> {
+export class DomainTableConfigResolver  {
 
   private readonly config: EntityTableConfig<DomainInfo> = new EntityTableConfig<DomainInfo>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app-table-config.resolver.ts
index 072fac02c4..1f81196d11 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import {
   CellActionDescriptorType,
   DateEntityTableColumn,
@@ -36,7 +36,7 @@ import { MobileAppTableHeaderComponent } from '@home/pages/admin/oauth2/mobile-a
 import { map, Observable, of, mergeMap } from 'rxjs';
 
 @Injectable()
-export class MobileAppTableConfigResolver implements Resolve<EntityTableConfig<MobileAppInfo>> {
+export class MobileAppTableConfigResolver  {
 
   private readonly config: EntityTableConfig<MobileAppInfo> = new EntityTableConfig<MobileAppInfo>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/oauth2-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/oauth2-routing.module.ts
index 22c172ca14..cba52e977c 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/oauth2-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/oauth2-routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { RouterTabsComponent } from '@home/components/router-tabs.component';
 import { Authority } from '@shared/models/authority.enum';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
@@ -30,7 +30,7 @@ import { MobileAppTableConfigResolver } from '@home/pages/admin/oauth2/mobile-ap
 import { MenuId } from '@core/services/menu.models';
 
 @Injectable()
-export class OAuth2LoginProcessingUrlResolver implements Resolve<string> {
+export class OAuth2LoginProcessingUrlResolver  {
 
   constructor(private oauth2Service: OAuth2Service) {
   }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
index ff5a07dbb6..f25cd1c857 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
@@ -15,31 +15,31 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'queue.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onQueueIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>queue.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column" [formGroup]="entityForm">
+<div class="mat-padding flex flex-col" [formGroup]="entityForm">
   <tb-queue-form
     [newQueue]="isAdd"
     [systemQueue]="true"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/queue/queues-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/admin/queue/queues-table-config.resolver.ts
index 3bd63e1945..1a3fa0f8d7 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/queue/queues-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/queue/queues-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { EntityTableColumn, EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import {
   QueueInfo,
@@ -39,7 +39,7 @@ import { selectAuthUser } from '@core/auth/auth.selectors';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 
 @Injectable()
-export class QueuesTableConfigResolver implements Resolve<EntityTableConfig<QueueInfo>> {
+export class QueuesTableConfigResolver  {
 
   readonly queueType = ServiceType.TB_RULE_ENGINE;
 
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
index 66a704996b..82a599b0a8 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
@@ -21,7 +21,7 @@ import {
   EntityTableColumn,
   EntityTableConfig
 } from '@home/models/entity/entities-table-config.models';
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { Resource, ResourceInfo, ResourceType, ResourceTypeTranslationMap } from '@shared/models/resource.models';
 import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
@@ -39,7 +39,7 @@ import { map } from 'rxjs/operators';
 import { ResourcesTableHeaderComponent } from '@home/pages/admin/resource/resources-table-header.component';
 
 @Injectable()
-export class ResourcesLibraryTableConfigResolver implements Resolve<EntityTableConfig<Resource, PageLink, ResourceInfo>> {
+export class ResourcesLibraryTableConfigResolver  {
 
   private readonly config: EntityTableConfig<Resource, PageLink, ResourceInfo> = new EntityTableConfig<Resource, PageLink, ResourceInfo>();
   private readonly resourceTypesTranslationMap = ResourceTypeTranslationMap;
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
index 441a311021..0389d32aab 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'downloadResource')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'resource.download' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'resource.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onResourceIdCopied()"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>resource.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -80,8 +80,8 @@
         [existingFileName]="entityForm.get('fileName')?.value"
         (fileNameChanged)="entityForm?.get('fileName').patchValue($event)">
       </tb-file-input>
-      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
-        <mat-form-field fxFlex>
+      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>resource.file-name</mat-label>
           <input matInput formControlName="fileName" type="text">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts
index de6a62e15c..e9b602e7d3 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.ts
@@ -92,7 +92,7 @@ export class ResourcesLibraryComponent extends EntityComponent<Resource> impleme
 
   override updateFormState(): void {
     super.updateFormState();
-    if (this.isEdit && this.entityForm) {
+    if (this.isEdit && this.entityForm && !this.isAdd) {
       this.entityForm.get('resourceType').disable({ emitEvent: false });
       if (this.entityForm.get('resourceType').value !== ResourceType.JS_MODULE) {
         this.entityForm.get('fileName').disable({ emitEvent: false });
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
index 0b9df7c5ae..bdb422f856 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
@@ -20,7 +20,7 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.security-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="securitySettings"></div>
   </mat-card-header>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -89,8 +89,8 @@
         <fieldset class="fields-group">
           <legend class="group-title" translate>admin.password-policy</legend>
           <section formGroupName="passwordPolicy">
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-password-length</mat-label>
                 <input matInput type="number"
                        formControlName="minimumLength"
@@ -108,7 +108,7 @@
                   {{ 'admin.minimum-password-length-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+              <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
                 <mat-label translate>admin.maximum-password-length</mat-label>
                 <input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
                 <mat-hint></mat-hint>
@@ -120,8 +120,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-uppercase-letters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumUppercaseLetters"
@@ -132,7 +132,7 @@
                   {{ 'admin.minimum-uppercase-letters-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-lowercase-letters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumLowercaseLetters"
@@ -144,8 +144,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-digits</mat-label>
                 <input matInput type="number"
                        formControlName="minimumDigits"
@@ -155,7 +155,7 @@
                   {{ 'admin.minimum-digits-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-special-characters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumSpecialCharacters"
@@ -167,8 +167,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-expiration-period-days</mat-label>
                 <input matInput type="number"
                        formControlName="passwordExpirationPeriodDays"
@@ -179,7 +179,7 @@
                   {{ 'admin.password-expiration-period-days-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-reuse-frequency-days</mat-label>
                 <input matInput type="number"
                        formControlName="passwordReuseFrequencyDays"
@@ -191,11 +191,11 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-checkbox fxFlex formControlName="allowWhitespaces" style="margin-bottom: 16px">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-checkbox class="flex-1" formControlName="allowWhitespaces" style="margin-bottom: 16px">
                 <mat-label translate>admin.allow-whitespace</mat-label>
               </mat-checkbox>
-              <mat-checkbox fxFlex formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
+              <mat-checkbox class="flex-1" formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
                 <mat-label tb-hint-tooltip-icon="{{'admin.force-reset-password-if-no-valid-hint' | translate}}">
                   {{'admin.force-reset-password-if-no-valid' | translate}}
                 </mat-label>
@@ -203,7 +203,7 @@
             </div>
           </section>
         </fieldset>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap" style="margin-top: 16px">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2" style="margin-top: 16px">
           <button mat-button color="primary"
                   [disabled]="securitySettingsFormGroup.pristine"
                   (click)="discardSetting()"
@@ -222,21 +222,21 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.jwt.security-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="jwtSecuritySettings"></div>
   </mat-card-header>
   <mat-card-content style="padding-top: 16px;">
     <form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
-      <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block">
+      <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2 xs:flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.issuer-name</mat-label>
             <input matInput required formControlName="tokenIssuer"/>
             <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
               {{ 'admin.jwt.issuer-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.signings-key</mat-label>
             <input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/>
             <button type="button"
@@ -259,8 +259,8 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <div class="flex flex-row gap-2 xs:flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.expiration-time</mat-label>
             <input matInput type="number" required
                    formControlName="tokenExpirationTime"
@@ -276,7 +276,7 @@
               {{ 'admin.jwt.expiration-time-min' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
             <input matInput type="number" required
                    formControlName="refreshTokenExpTime"
@@ -296,7 +296,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2">
           <button mat-button color="primary"
                   [disabled]="jwtSecuritySettingsFormGroup.pristine"
                   (click)="discardJwtSetting()"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 891f84d08d..26b3ad6a67 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>admin.send-test-sms</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -47,7 +47,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
index ba8e24c302..b69bc5a377 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@@ -20,7 +20,7 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.sms-provider-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="smsProviderSettings"></div>
   </mat-card-header>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -32,7 +32,7 @@
         required
         formControlName="configuration">
       </tb-sms-provider-configuration>
-      <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+      <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
         <button mat-raised-button type="button"
                 [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
           {{'admin.send-test-sms' | translate}}
@@ -50,7 +50,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.slack-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="slackSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -66,7 +66,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.mobile-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <!--    <div tb-help="mobileSettings"></div>-->
     </mat-card-header>
     <mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
@@ -79,7 +79,7 @@
                      (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
       </tb-file-input>
     </mat-card-content>
-    <mat-card-actions fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
+    <mat-card-actions  class="flex items-center justify-end xs:flex-col xs:items-stretch">
       <button mat-button mat-raised-button color="primary"
               [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
               type="submit">{{'action.save' | translate}}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index d2e6419479..d62ad94428 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.2fa.2fa</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="twoFactorAuthentication"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -36,7 +36,7 @@
               <ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
                 <mat-expansion-panel class="provider" [formGroupName]="i">
                   <mat-expansion-panel-header>
-                    <mat-panel-title fxLayoutAlign="start center">
+                    <mat-panel-title class="flex items-center justify-start">
                       <mat-slide-toggle
                         (mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)"
                         formControlName="enable">
@@ -48,7 +48,7 @@
                   <ng-template matExpansionPanelContent>
                     <ng-container [ngSwitch]="provider.get('providerType').value">
                       <ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.issuer-name</mat-label>
                           <input matInput formControlName="issuerName" required>
                           <mat-error *ngIf="provider.get('issuerName').hasError('required') ||
@@ -58,8 +58,8 @@
                         </mat-form-field>
                       </ng-container>
                       <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
-                           fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                        <mat-form-field fxFlex class="mat-block">
+                           class="flex flex-row xs:flex-col gt-xs:gap-2">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-message-template</mat-label>
                           <input matInput formControlName="smsVerificationMessageTemplate" required>
                           <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
@@ -70,7 +70,7 @@
                           </mat-error>
                         </mat-form-field>
 
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
                           <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@@ -83,7 +83,7 @@
                         </mat-form-field>
                       </div>
                       <div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
                           <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@@ -96,7 +96,7 @@
                         </mat-form-field>
                       </div>
                       <div *ngSwitchCase="twoFactorAuthProviderType.BACKUP_CODE">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.number-of-codes</mat-label>
                           <input matInput formControlName="codesQuantity" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('codesQuantity').hasError('required')">
@@ -116,8 +116,8 @@
             </fieldset>
             <fieldset class="fields-group">
               <legend class="group-title" translate>admin.2fa.verification-limitations</legend>
-              <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                <mat-form-field fxFlex class="mat-block">
+              <div class="input-row flex flex-row xs:flex-col gt-xs:gap-2">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
                   <input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="60">
                   <mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')">
@@ -128,7 +128,7 @@
                     {{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.retry-verification-code-period</mat-label>
                   <input matInput required formControlName="minVerificationCodeSendPeriod" type="number" step="1" min="5">
                   <mat-error *ngIf="twoFaFormGroup.get('minVerificationCodeSendPeriod').hasError('required')">
@@ -139,7 +139,7 @@
                     {{ 'admin.2fa.retry-verification-code-period-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.max-verification-failures-before-user-lockout</mat-label>
                   <input matInput formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535">
                   <mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
@@ -152,7 +152,7 @@
 
               <mat-expansion-panel class="provider">
                 <mat-expansion-panel-header>
-                  <mat-panel-title fxLayoutAlign="start center">
+                  <mat-panel-title class="flex items-center justify-start">
                     <mat-slide-toggle (mousedown)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
                                       formControlName="verificationCodeCheckRateLimitEnable">
                     </mat-slide-toggle>
@@ -160,8 +160,8 @@
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
                       <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
                       <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
@@ -172,7 +172,7 @@
                         {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
                       </mat-error>
                     </mat-form-field>
-                    <mat-form-field fxFlex class="mat-block">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.2fa.within-time</mat-label>
                       <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
                       <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
@@ -188,7 +188,7 @@
               </mat-expansion-panel>
             </fieldset>
           </div>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-end gap-2">
             <button mat-button mat-raised-button color="primary"
                     [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
                     type="submit">
diff --git a/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts b/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts
index 3ada68643f..e9ca831fb9 100644
--- a/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 import { Observable } from 'rxjs';
 import { OAuth2Service } from '@core/http/oauth2.service';
@@ -24,7 +24,7 @@ import { AlarmsMode } from '@shared/models/alarm.models';
 import { MenuId } from '@core/services/menu.models';
 
 @Injectable()
-export class OAuth2LoginProcessingUrlResolver implements Resolve<string> {
+export class OAuth2LoginProcessingUrlResolver  {
 
   constructor(private oauth2Service: OAuth2Service) {
   }
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts
index f76ceb86bc..43b46575dd 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage-routing.module.ts
@@ -17,11 +17,11 @@
 import { inject, NgModule } from '@angular/core';
 import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
-import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { ResourcesService } from '@core/services/resources.service';
 import { Observable } from 'rxjs';
 import { MenuId } from '@core/services/menu.models';
+import { DashboardViewComponent } from '@home/components/dashboard-view/dashboard-view.component';
 
 const apiUsageDashboardJson = '/assets/dashboard/api_usage.json';
 
@@ -34,7 +34,7 @@ export const apiUsageDashboardResolver: ResolveFn<Dashboard> = (
 const routes: Routes = [
   {
     path: 'usage',
-    component: ApiUsageComponent,
+    component: DashboardViewComponent,
     data: {
       auth: [Authority.TENANT_ADMIN],
       title: 'api-usage.api-usage',
@@ -43,7 +43,7 @@ const routes: Routes = [
       }
     },
     resolve: {
-      apiUsageDashboard: apiUsageDashboardResolver
+      dashboard: apiUsageDashboardResolver
     }
   }
 ];
diff --git a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts
index 11666f28ad..0bd4e35ea8 100644
--- a/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/api-usage/api-usage.module.ts
@@ -18,14 +18,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@app/shared/shared.module';
 import { HomeComponentsModule } from '@modules/home/components/home-components.module';
-import { ApiUsageComponent } from '@home/pages/api-usage/api-usage.component';
 import { ApiUsageRoutingModule } from '@home/pages/api-usage/api-usage-routing.module';
 
 @NgModule({
-  declarations:
-    [
-      ApiUsageComponent
-    ],
   imports: [
     CommonModule,
     SharedModule,
diff --git a/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profiles-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profiles-table-config.resolver.ts
index d9eb000e0f..75463ed871 100644
--- a/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profiles-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset-profile/asset-profiles-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
@@ -37,7 +37,7 @@ import { AssetProfileComponent } from '@home/components/profile/asset-profile.co
 import { AssetProfileTabsComponent } from './asset-profile-tabs.component';
 
 @Injectable()
-export class AssetProfilesTableConfigResolver implements Resolve<EntityTableConfig<AssetProfile>> {
+export class AssetProfilesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<AssetProfile> = new EntityTableConfig<AssetProfile>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
index b8bfd20362..6dd373c714 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && assetScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'asset.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && assetScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || assetScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'asset.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (assetScope === 'customer' || assetScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (assetScope !== 'customer' && assetScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'asset.make-private' : 'asset.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && assetScope === 'edge'">
+          [class.!hidden]="isEdit || assetScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'asset.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>asset.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && assetScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || assetScope !== 'tenant'">
     <mat-label translate>asset.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (assetScope === 'customer' || assetScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (assetScope !== 'customer' && assetScope !== 'tenant')">
     {{ 'asset.asset-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
diff --git a/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts
index 1c23eeb130..3ce73455c4 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -65,7 +65,7 @@ import {
 } from '@home/dialogs/add-entities-to-edge-dialog.component';
 
 @Injectable()
-export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<AssetInfo>> {
+export class AssetsTableConfigResolver  {
 
   private readonly config: EntityTableConfig<AssetInfo> = new EntityTableConfig<AssetInfo>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
index ec10e208d1..5c4fe2393f 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@@ -15,64 +15,64 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
-          [fxShow]="!isEdit && !isPublic">
+          [class.!hidden]="isEdit || isPublic">
     {{'customer.manage-users' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssets')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-assets' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDevices')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-devices' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageDashboards')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'customer.manage-dashboards' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageEdges')"
-          [fxShow]="!isEdit"
+          [class.!hidden]="isEdit">
           *ngIf="edgesSupportEnabled()">
     {{'customer.manage-edges' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit && !isPublic">
+          [class.!hidden]="hideDelete() || isEdit || isPublic">
     {{'customer.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>customer.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
-    <fieldset [fxShow]="!isPublic" [disabled]="(isLoading$ | async) || !isEdit">
+    <fieldset [class.!hidden]="isPublic" [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>customer.title</mat-label>
         <input matInput formControlName="title" required/>
@@ -83,22 +83,22 @@
           {{ 'customer.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>customer.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="'customer'"
               [customerId]="entity?.id.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
index ee925e54a0..df37a7204f 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import {
   DateEntityTableColumn,
@@ -37,7 +37,7 @@ import { AppState } from '@core/core.state';
 import { HomeDialogsService } from '@home/dialogs/home-dialogs.service';
 
 @Injectable()
-export class CustomersTableConfigResolver implements Resolve<EntityTableConfig<Customer>> {
+export class CustomersTableConfigResolver  {
 
   private readonly config: EntityTableConfig<Customer> = new EntityTableConfig<Customer>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 7c3ab5d61d..61ebedf310 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -15,75 +15,75 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'dashboard.open-dashboard' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant'">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant' && !isPublic(entity)">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant' || isPublic(entity)">
     {{'dashboard.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePrivate')"
-          [fxShow]="!isEdit && (dashboardScope === 'tenant' && isPublic(entity)
+          [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     {{'dashboard.make-private' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageAssignedCustomers')"
-          [fxShow]="!isEdit && dashboardScope === 'tenant'">
+          [class.!hidden]="isEdit || dashboardScope !== 'tenant'">
     {{'dashboard.manage-assigned-customers' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && dashboardScope === 'customer' && !isCurrentPublicCustomer(entity)">
+          [class.!hidden]="isEdit || dashboardScope !== 'customer' || isCurrentPublicCustomer(entity)">
     {{ 'dashboard.unassign-from-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && dashboardScope === 'edge'">
+          [class.!hidden]="isEdit || dashboardScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'dashboard.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div class="flex flex-row">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDashboardIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>dashboard.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && assignedCustomersText?.length
-                              && dashboardScope === 'tenant'">
+                  [class.!hidden]="isEdit || !assignedCustomersText?.length
+                              || dashboardScope !== 'tenant'">
     <mat-label translate>dashboard.assignedToCustomers</mat-label>
     <input matInput disabled [ngModel]="assignedCustomersText">
   </mat-form-field>
-  <div fxLayout="column" [fxShow]="!isEdit && (dashboardScope === 'tenant' && isPublic(entity)
+  <div class="flex flex-col" [class.!hidden]="isEdit || !(dashboardScope === 'tenant' && isPublic(entity)
                                 || dashboardScope === 'customer' && isCurrentPublicCustomer(entity))">
     <tb-social-share-panel style="padding-bottom: 1.25em;"
                            shareTitle="{{ 'dashboard.socialshare-title' | translate:{dashboardTitle: entity?.title} }}"
@@ -91,8 +91,8 @@
                            shareLink="{{ publicLink }}"
                            shareHashTags="thingsboard, iot">
     </tb-social-share-panel>
-    <div fxLayout="row">
-      <mat-form-field class="mat-block" fxFlex>
+    <div class="flex flex-row">
+      <mat-form-field class="mat-block flex-1">
         <mat-label translate>dashboard.public-link</mat-label>
         <input matInput disabled [ngModel]="publicLink">
       </mat-form-field>
@@ -118,7 +118,7 @@
           {{ 'dashboard.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="configuration" fxLayout="column">
+      <div formGroupName="configuration" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>dashboard.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
@@ -139,7 +139,7 @@
           <mat-label translate>dashboard.mobile-order</mat-label>
           <input matInput formControlName="mobileOrder" type="number" step="1">
         </mat-form-field>
-        <tb-gallery-image-input fxFlex
+        <tb-gallery-image-input class="flex-1"
                                 label="{{'dashboard.image' | translate}}"
                                 formControlName="image">
         </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
index 28fc9d4e12..392f550cbe 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgModule } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
+import { ActivatedRouteSnapshot, RouterModule, Routes } from '@angular/router';
 
 import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
 import { Authority } from '@shared/models/authority.enum';
@@ -36,7 +36,7 @@ import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { MenuId } from '@core/services/menu.models';
 
 @Injectable()
-export class DashboardResolver implements Resolve<Dashboard> {
+export class DashboardResolver  {
 
   constructor(private store: Store<AppState>,
               private dashboardService: DashboardService,
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index 2ee7df8835..ac280f2374 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -79,7 +79,7 @@ import {
 } from '@home/components/alias/entity-aliases-dialog.component';
 
 @Injectable()
-export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<DashboardInfo | Dashboard>> {
+export class DashboardsTableConfigResolver  {
 
   private readonly config: EntityTableConfig<DashboardInfo | Dashboard> = new EntityTableConfig<DashboardInfo | Dashboard>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
index 49e98cdc1d..0842210366 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <div style="min-width: 400px; position: relative;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -32,8 +32,8 @@
     <span
        innerHTML="{{ translate.get('dashboard.public-dashboard-text', {dashboardTitle: dashboard.title, publicLink: publicLink}) | async }}">
     </span>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <pre class="tb-highlight" fxFlex><code>{{ publicLink }}</code></pre>
+    <div class="flex flex-row items-center justify-start">
+      <pre class="tb-highlight flex-1"><code>{{ publicLink }}</code></pre>
       <button mat-icon-button
               ngxClipboard
               (cbOnSuccess)="onPublicLinkCopied($event)"
@@ -51,8 +51,8 @@
                            shareHashTags="thingsboard, iot">
     </tb-social-share-panel>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index 67bdb41d7e..756f9a405f 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -17,9 +17,9 @@
 -->
 <form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ titleText | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,8 +39,8 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts
index 5fa1afe984..2746dbd5f3 100644
--- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
@@ -45,7 +45,7 @@ import { ImportExportService } from '@shared/import-export/import-export.service
 import { HomeDialogsService } from '@home/dialogs/home-dialogs.service';
 
 @Injectable()
-export class DeviceProfilesTableConfigResolver implements Resolve<EntityTableConfig<DeviceProfile>> {
+export class DeviceProfilesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<DeviceProfile> = new EntityTableConfig<DeviceProfile>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
index b670b392c6..6db2285969 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<form [formGroup]="snmpDeviceTransportConfigurationFormGroup" style="padding-bottom: 16px;"  fxLayoutGap="8px" fxLayout="column">
-  <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-    <mat-form-field fxFlex>
+<form [formGroup]="snmpDeviceTransportConfigurationFormGroup" class="flex flex-col gap-2 pb-4">
+  <div class="flex flex-row gap-2 xs:flex-col">
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.host</mat-label>
       <input matInput formControlName="host" required>
       <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('host').hasError('required') ||
@@ -25,7 +25,7 @@
         {{ 'device-profile.snmp.host-required' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-1">
       <mat-label translate>device-profile.snmp.port</mat-label>
       <input matInput formControlName="port" type="number" min="0" required>
       <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('port').hasError('required')">
@@ -59,8 +59,8 @@
     </mat-form-field>
   </section>
   <section *ngIf="isV3protocolVersion()">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.user-name</mat-label>
         <input matInput formControlName="username" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('username').hasError('required') ||
@@ -68,7 +68,7 @@
           {{ 'device-profile.snmp.user-name-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.security-name</mat-label>
         <input matInput formControlName="securityName" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('required') ||
@@ -77,8 +77,8 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.authentication-protocol</mat-label>
         <mat-select formControlName="authenticationProtocol" required>
           <mat-option *ngFor="let snmpAuthenticationProtocol of snmpAuthenticationProtocols" [value]="snmpAuthenticationProtocol">
@@ -89,7 +89,7 @@
           {{ 'device-profile.snmp.authentication-protocol-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.authentication-passphrase</mat-label>
         <input matInput formControlName="authenticationPassphrase" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('required') ||
@@ -98,8 +98,8 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.privacy-protocol</mat-label>
         <mat-select formControlName="privacyProtocol" required>
           <mat-option *ngFor="let snmpPrivacyProtocol of snmpPrivacyProtocols" [value]="snmpPrivacyProtocol">
@@ -110,7 +110,7 @@
           {{ 'device-profile.snmp.privacy-protocol-required' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.privacy-passphrase</mat-label>
         <input matInput formControlName="privacyPassphrase" required>
         <mat-error *ngIf="snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('required') ||
@@ -119,12 +119,12 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
-      <mat-form-field fxFlex>
+    <div class="flex flex-row gap-2 xs:flex-col">
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.context-name</mat-label>
         <input matInput formControlName="contextName">
       </mat-form-field>
-      <mat-form-field fxFlex>
+      <mat-form-field class="flex-1">
         <mat-label translate>device-profile.snmp.engine-id</mat-label>
         <input matInput formControlName="engineId">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index b74e18f3ed..2cc3c17227 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
 <!--  <div [tb-help]="'check-connectivity'"></div>-->
   <button mat-icon-button
           (click)="close()"
@@ -32,7 +32,7 @@
                       name="TransportProtocol"
                       useSelectOnMdLg="false"
                       appearance="fill"
-                      [fxHide]="allowTransportType.size < 2">
+                      [class.!hidden]="allowTransportType.size < 2">
       <tb-toggle-option
         *ngIf="allowTransportType.has(BasicTransportType.HTTP)"
         [value]="BasicTransportType.HTTP">
@@ -59,7 +59,7 @@
         {{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }}
       </tb-toggle-option>
     </tb-toggle-header>
-    <div class="tb-form-panel no-padding no-border" [fxHide]="!allowTransportType.size">
+    <div class="tb-form-panel no-padding no-border" [class.!hidden]="!allowTransportType.size">
       <ng-container [ngSwitch]="transportProtocol.value">
         <ng-template [ngSwitchCase]="BasicTransportType.HTTP">
           <div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
@@ -288,24 +288,24 @@
       </ng-container>
     </div>
     <div class="tb-form-panel stroked">
-      <div fxFlex fxLayout="row">
+      <div class="flex flex-1 flex-row">
         <div class="tb-form-panel-title" translate>device.state</div>
-        <div class="status" [ngClass]="{'inactive': !status, 'hide': status === undefined}">
+        <div class="status" [class.inactive]="!status" [class.hide]="status === undefined">
           {{ (status ? 'device.active' : 'device.inactive') | translate }}
         </div>
       </div>
       <div class="tb-form-panel-hint tb-font-14" translate>attribute.latest-telemetry</div>
       <div class="tb-form-table">
         <div class="tb-form-table-header">
-          <div class="tb-form-table-header-cell" fxFlex translate>device.time</div>
-          <div class="tb-form-table-header-cell" fxFlex translate>attribute.key</div>
-          <div class="tb-form-table-header-cell" fxFlex translate>attribute.value</div>
+          <div class="tb-form-table-header-cell flex-1" translate>device.time</div>
+          <div class="tb-form-table-header-cell flex-1" translate>attribute.key</div>
+          <div class="tb-form-table-header-cell flex-1" translate>attribute.value</div>
         </div>
         <div *ngIf="latestTelemetry.length; else noData" class="tb-form-table-body">
           <div class="tb-form-table-row" *ngFor="let telemetry of latestTelemetry">
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.key }}</div>
-            <div class="tb-form-table-row-cell" fxFlex>{{ telemetry.value }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.key }}</div>
+            <div class="tb-form-table-row-cell flex-1">{{ telemetry.value }}</div>
           </div>
         </div>
       </div>
@@ -313,8 +313,8 @@
   </section>
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
-  <mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
-  <span fxFlex></span>
+  <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
+  <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
           (click)="close()">{{ 'action.close' | translate }}</button>
@@ -336,10 +336,10 @@
 
 <ng-template #executeCommand let-cmd="cmd">
   <div class="tb-form-panel stroked">
-    <div fxLayout="row" fxLayoutAlign="space-between center" [fxHide]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
+    <div class="flex flex-row items-center justify-between" [class.!hidden]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
       <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
       <tb-toggle-header #protocolType value="{{ cmd.noSec ? 'noSec' : 'sec'}}" name="protocolType" useSelectOnMdLg="false"
-                        [fxShow]="cmd.noSec && cmd.sec">
+                        [class.!hidden]="!cmd.noSec || !cmd.sec">
         <tb-toggle-option value="noSec">{{ cmd.noSecLabel }}</tb-toggle-option>
         <tb-toggle-option value="sec">{{ cmd.secLabel }}</tb-toggle-option>
       </tb-toggle-header>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index 27d68b5b9e..3b202adfb2 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ 'device.device-credentials' | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -36,7 +36,7 @@
     </form>
   </section>
   <ng-template #loadCredentials>
-    <div fxLayout="column" fxLayoutAlign="center center">
+    <div class="flex flex-col items-center justify-center">
       <mat-spinner color="accent" diameter="65" strokeWidth="4" style="margin-bottom: 18px"></mat-spinner>
       <span class="mat-subtitle-1" style="margin-bottom: 0">
         {{ 'device.loading-device-credentials' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts b/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts
index 01b4370e55..4f1a5d0d2b 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts
@@ -24,8 +24,6 @@ import { EntityDetailsPageComponent } from '@home/components/entity/entity-detai
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { entityDetailsPageBreadcrumbLabelFunction } from '@home/pages/home-pages.models';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
-import { assetRoutes } from '@home/pages/asset/asset-routing.module';
-import { entityViewRoutes } from '@home/pages/entity-view/entity-view-routing.module';
 import { MenuId } from '@core/services/menu.models';
 
 export const deviceRoutes: Routes = [
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.html b/ui-ngx/src/app/modules/home/pages/device/device.component.html
index a210cbbb41..6d43d180e6 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.html
@@ -15,82 +15,82 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'device.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || deviceScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'device.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (deviceScope === 'customer' || deviceScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (deviceScope !== 'customer' && deviceScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'device.make-private' : 'device.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageCredentials')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ ((deviceScope === 'customer_user' || deviceScope === 'edge_customer_user') ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'checkConnectivity')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'device.connectivity.check-connectivity' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && deviceScope === 'edge'">
+          [class.!hidden]="isEdit || deviceScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'device.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>device.copyId</span>
     </button>
     <tb-copy-device-credentials
-      [fxShow]="!isEdit"
+      [class.!hidden]="isEdit"
       [disabled]="(isLoading$ | async)"
       [credentials$]="deviceCredentials$"
       [deviceId]="entity?.id">
     </tb-copy-device-credentials>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && deviceScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || deviceScope !== 'tenant'">
     <mat-label translate>device.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (deviceScope === 'customer' || deviceScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (deviceScope !== 'customer' && deviceScope !== 'tenant')">
     {{ 'device.device-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -138,7 +138,7 @@
         formControlName="deviceData"
         required>
       </tb-device-data>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <div class="toggle-group">
           <mat-slide-toggle formControlName="gateway" style="min-width: 165px">
             {{ 'device.is-gateway' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
index 645b2a6d53..d12e710541 100644
--- a/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -91,7 +91,7 @@ interface DevicePageQueryParams extends PageQueryParam {
 }
 
 @Injectable()
-export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<DeviceInfo>> {
+export class DevicesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<DeviceInfo> = new EntityTableConfig<DeviceInfo>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
index 1156bb7969..cfb236fd5f 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>{{ dialogTitle }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="close()"
           type="button">
@@ -72,8 +72,8 @@
   </section>
 </div>
 <div mat-dialog-actions class="tb-dialog-actions">
-  <mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
-  <span fxFlex></span>
+  <mat-slide-toggle [class.!hidden]="!showDontShowAgain" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
+  <span class="flex-1"></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
           (click)="close()">{{ 'action.close' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
index 9ac7049ce2..ccc75421ba 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
@@ -15,74 +15,74 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && edgeScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'edge.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && edgeScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'edge.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (edgeScope === 'customer' || edgeScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (edgeScope !== 'customer' && edgeScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'edge.make-private' : 'edge.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeAssets')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-assets' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDevices')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-devices' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeEntityViews')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-entity-views' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeDashboards')"
-          [fxShow]="!isEdit && edgeScope !== 'customer'">
+          [class.!hidden]="isEdit || edgeScope === 'customer'">
     {{'edge.manage-dashboards' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openEdgeRuleChains')"
-          [fxShow]="!isEdit && edgeScope === 'tenant'">
+          [class.!hidden]="isEdit || edgeScope !== 'tenant'">
     {{'edge.manage-rulechains' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'edge.delete' | translate }}
   </button>
-  <div fxLayout="row wrap" fxLayout.xs="column">
+  <div class="flex flex-row flex-wrap xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEdgeIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-id</span>
     </button>
@@ -91,7 +91,7 @@
             (cbOnSuccess)="onEdgeInfoCopied('key')"
             [cbContent]="entity?.routingKey"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-key</span>
     </button>
@@ -100,7 +100,7 @@
             (cbOnSuccess)="onEdgeInfoCopied('secret')"
             [cbContent]="entity?.secret"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-secret</span>
     </button>
@@ -108,18 +108,18 @@
             ngxClipboard
             [disabled]="(isLoading$ | async)"
             (click)="onEntityAction($event, 'syncEdge')"
-            [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+            [class.!hidden]="isEdit || edgeScope === 'customer_user'">
       <mat-icon svgIcon="mdi:sync"></mat-icon>
       <span translate>edge.sync</span>
     </button>
   </div>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <div [ngSwitch]="upgradeAvailable">
       <ng-container *ngSwitchCase="false">
         <button mat-raised-button color="primary"
                 [disabled]="(isLoading$ | async)"
                 (click)="onEntityAction($event, 'openInstallInstructions')"
-                [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+                [class.!hidden]="isEdit || edgeScope === 'customer_user'">
           <mat-icon>info_outline</mat-icon>
           <span>{{ 'edge.install-connect-instructions' | translate }}</span>
         </button>
@@ -128,7 +128,7 @@
         <button mat-raised-button color="primary"
                 [disabled]="(isLoading$ | async)"
                 (click)="onEntityAction($event, 'openUpgradeInstructions')"
-                [fxShow]="!isEdit && edgeScope !== 'customer_user'">
+                [class.!hidden]="isEdit || edgeScope === 'customer_user'">
           <mat-icon>info_outline</mat-icon>
           <span>{{ 'edge.upgrade-instructions' | translate }}</span>
         </button>
@@ -136,15 +136,15 @@
     </div>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && edgeScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || edgeScope !== 'tenant'">
     <mat-label translate>edge.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && edgeScope === 'tenant'">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || edgeScope !== 'tenant'">
     {{ 'edge.edge-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -165,8 +165,8 @@
         [entityType]="entityType.EDGE">
       </tb-entity-subtype-autocomplete>
     </fieldset>
-    <div fxLayout="row" [fxShow]="edgeScope !== 'customer_user'">
-        <mat-form-field class="mat-block" fxFlex>
+    <div class="flex flex-row" [class.!hidden]="edgeScope === 'customer_user'">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>edge.edge-key</mat-label>
           <input matInput formControlName="routingKey">
         </mat-form-field>
@@ -176,8 +176,8 @@
         <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       </button>
     </div>
-    <div fxLayout="row" [fxShow]="edgeScope !== 'customer_user'">
-        <mat-form-field class="mat-block" fxFlex>
+    <div class="flex flex-row" [class.!hidden]="edgeScope === 'customer_user'">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>edge.edge-secret</mat-label>
           <input matInput formControlName="secret">
         </mat-form-field>
@@ -195,7 +195,7 @@
           {{ 'edge.label-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>edge.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
index fe54614c9a..efdc8c715c 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -65,7 +65,7 @@ import {
 import { AddEntityDialogComponent } from '@home/components/entity/add-entity-dialog.component';
 
 @Injectable()
-export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeInfo>> {
+export class EdgesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<EdgeInfo> = new EntityTableConfig<EdgeInfo>();
   private customerId: string;
diff --git a/ui-ngx/src/app/modules/home/pages/entities/entities-routing.module.ts b/ui-ngx/src/app/modules/home/pages/entities/entities-routing.module.ts
index 6589af9f10..77e711c504 100644
--- a/ui-ngx/src/app/modules/home/pages/entities/entities-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/entities/entities-routing.module.ts
@@ -20,6 +20,7 @@ import { NgModule } from '@angular/core';
 import { deviceRoutes } from '@home/pages/device/device-routing.module';
 import { assetRoutes } from '@home/pages/asset/asset-routing.module';
 import { entityViewRoutes } from '@home/pages/entity-view/entity-view-routing.module';
+import { gatewaysRoutes } from '@home/pages/gateways/gateways-routing.module';
 
 const routes: Routes = [
   {
@@ -41,7 +42,8 @@ const routes: Routes = [
       },
       ...deviceRoutes,
       ...assetRoutes,
-      ...entityViewRoutes
+      ...entityViewRoutes,
+      ...gatewaysRoutes
     ]
   }
 ];
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 62b19151bb..c0ee9b61b7 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
-          [fxShow]="!isEdit && entityViewScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
+          [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity) || entity?.customerIsPublic">
     {{'entity-view.make-public' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'assignToCustomer')"
-          [fxShow]="!isEdit && entityViewScope === 'tenant' && !isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || entityViewScope !== 'tenant' || isAssignedToCustomer(entity)">
     {{'entity-view.assign-to-customer' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromCustomer')"
-          [fxShow]="!isEdit && (entityViewScope === 'customer' || entityViewScope === 'tenant') && isAssignedToCustomer(entity)">
+          [class.!hidden]="isEdit || (entityViewScope !== 'customer' && entityViewScope !== 'tenant') || !isAssignedToCustomer(entity)">
     {{ (entity?.customerIsPublic ? 'entity-view.make-private' : 'entity-view.unassign-from-customer') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && entityViewScope === 'edge'">
+          [class.!hidden]="isEdit || entityViewScope !== 'edge'">
     {{ 'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'entity-view.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>entity-view.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <mat-form-field class="mat-block"
-                  [fxShow]="!isEdit && isAssignedToCustomer(entity)
-                              && !entity?.customerIsPublic && entityViewScope === 'tenant'">
+                  [class.!hidden]="isEdit || !isAssignedToCustomer(entity)
+                              || entity?.customerIsPublic || entityViewScope !== 'tenant'">
     <mat-label translate>entity-view.assignedToCustomer</mat-label>
     <input matInput disabled [ngModel]="entity?.customerTitle">
   </mat-form-field>
   <div class="tb-small" style="padding-bottom: 10px; padding-left: 2px;"
-       [fxShow]="!isEdit && entity?.customerIsPublic && (entityViewScope === 'customer' || entityViewScope === 'tenant')">
+       [class.!hidden]="isEdit || !entity?.customerIsPublic || (entityViewScope !== 'customer' && entityViewScope !== 'tenant')">
     {{ 'entity-view.entity-view-public' | translate }}
   </div>
   <form [formGroup]="entityForm">
@@ -92,9 +92,9 @@
         [entityType]="entityType.ENTITY_VIEW"
       >
       </tb-entity-subtype-autocomplete>
-      <section fxLayout="column">
+      <section class="flex flex-col">
         <label translate class="tb-title no-padding">entity-view.target-entity</label>
-        <tb-entity-select fxFlex
+        <tb-entity-select class="flex-1"
                           [required]="true"
                           [allowedEntityTypes]="allowedEntityTypes"
                           formControlName="entityId">
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts
index fc225cad69..3757189a13 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -63,7 +63,7 @@ import {
 } from '@home/dialogs/add-entities-to-edge-dialog.component';
 
 @Injectable()
-export class EntityViewsTableConfigResolver implements Resolve<EntityTableConfig<EntityViewInfo>> {
+export class EntityViewsTableConfigResolver  {
 
   private readonly config: EntityTableConfig<EntityViewInfo> = new EntityTableConfig<EntityViewInfo>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/gateways/gateways-routing.module.ts b/ui-ngx/src/app/modules/home/pages/gateways/gateways-routing.module.ts
new file mode 100644
index 0000000000..7f2bbe4ca0
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/gateways/gateways-routing.module.ts
@@ -0,0 +1,63 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { inject, NgModule } from '@angular/core';
+import { ActivatedRouteSnapshot, ResolveFn, RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
+import { Authority } from '@shared/models/authority.enum';
+import { Dashboard } from '@shared/models/dashboard.models';
+import { ResourcesService } from '@core/services/resources.service';
+import { Observable } from 'rxjs';
+import { MenuId } from '@core/services/menu.models';
+import { DashboardViewComponent } from '@home/components/dashboard-view/dashboard-view.component';
+
+const gatewaysDashboardJson = '/api/resource/dashboard/system/gateways_dashboard.json';
+
+export const gatewaysDashboardResolver: ResolveFn<Dashboard> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  resourcesService = inject(ResourcesService)
+): Observable<Dashboard> => resourcesService.loadJsonResource(gatewaysDashboardJson);
+
+export const gatewaysRoutes: Routes = [
+  {
+    path: 'gateways',
+    component: DashboardViewComponent,
+    data: {
+      auth: [Authority.TENANT_ADMIN],
+      title: 'gateway.gateways',
+      breadcrumb: {
+        menuId: MenuId.gateways
+      }
+    },
+    resolve: {
+      dashboard: gatewaysDashboardResolver
+    }
+  }
+];
+
+const routes: Routes = [
+  {
+    path: 'gateways',
+    pathMatch: 'full',
+    redirectTo: '/entities/gateways'
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GatewaysRoutingModule { }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/rpc-template-array-view.pipe.ts b/ui-ngx/src/app/modules/home/pages/gateways/gateways.module.ts
similarity index 57%
rename from ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/rpc-template-array-view.pipe.ts
rename to ui-ngx/src/app/modules/home/pages/gateways/gateways.module.ts
index f565195b76..6dd8688338 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/rpc-template-array-view.pipe.ts
+++ b/ui-ngx/src/app/modules/home/pages/gateways/gateways.module.ts
@@ -14,15 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@app/shared/shared.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
+import { GatewaysRoutingModule } from '@home/pages/gateways/gateways-routing.module';
 
-@Pipe({
-  name: 'getRpcTemplateArrayView',
-  standalone: true,
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    HomeComponentsModule,
+    GatewaysRoutingModule
+  ]
 })
-export class RpcTemplateArrayViewPipe implements PipeTransform {
-
-  transform(values: {value: string | boolean | number}[]): string {
-    return values.map(({value}) => value.toString()).join(', ');
-  }
-}
+export class GatewaysModule { }
diff --git a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
index 0b1a70996e..a2253f28e7 100644
--- a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
@@ -44,6 +44,7 @@ import { FeaturesModule } from '@home/pages/features/features.module';
 import { NotificationModule } from '@home/pages/notification/notification.module';
 import { AccountModule } from '@home/pages/account/account.module';
 import { ScadaSymbolModule } from '@home/pages/scada-symbol/scada-symbol.module';
+import { GatewaysModule } from '@home/pages/gateways/gateways.module';
 
 @NgModule({
   exports: [
@@ -70,6 +71,7 @@ import { ScadaSymbolModule } from '@home/pages/scada-symbol/scada-symbol.module'
     DashboardModule,
     AuditLogModule,
     ApiUsageModule,
+    GatewaysModule,
     OtaUpdateModule,
     UserModule,
     VcModule,
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-config.resolver.ts
index aa383a3bf8..824529cf15 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-config.resolver.ts
@@ -38,11 +38,11 @@ import {
   InboxNotificationDialogData
 } from '@home/pages/notification/inbox/inbox-notification-dialog.component';
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { UtilsService } from '@core/services/utils.service';
 
 @Injectable()
-export class InboxTableConfigResolver implements Resolve<EntityTableConfig<Notification>> {
+export class InboxTableConfigResolver  {
 
   private readonly config: EntityTableConfig<Notification> = new EntityTableConfig<Notification>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
index f9ed7e24db..7338a32fc2 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.html
@@ -15,13 +15,13 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
+<div class="flex flex-full flex-row items-center justify-start">
   <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                            style="width: 180px;"
                            [ngModel]="entitiesTableConfig.componentsData.unreadOnly"
                            (ngModelChange)="changeUnreadOnly($event)">
-    <mat-button-toggle fxFlex [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
-    <mat-button-toggle fxFlex [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" [value]=true>{{ 'notification.unread' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" [value]=false>{{ 'notification.all' | translate }}</mat-button-toggle>
   </mat-button-toggle-group>
 
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
index 1ca0f9a72f..af69f47306 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss
@@ -63,6 +63,9 @@
       font-size: 14px;
       font-weight: 500;
       letter-spacing: .25px;
+      .mat-pseudo-checkbox {
+        display: none;
+      }
     }
 
     .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
index 311dbee6d9..e3959fa6e0 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="targetNotificationForm" class="tb-dialog-container">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'notification.add-notification-recipients-group' : 'notification.edit-notification-recipients-group') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="recipientNotifications"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -28,7 +28,7 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <mat-form-field class="mat-block">
       <mat-label translate>notification.name</mat-label>
@@ -41,7 +41,7 @@
       <label class="tb-title">{{ 'notification.type' | translate }}</label>
       <mat-radio-group formControlName="type">
         <mat-radio-button *ngFor="let notificationTargetType of notificationTargetTypes" [value]="notificationTargetType">
-          <div fxLayout="column">
+          <div class="flex flex-col">
             <div>{{ notificationTargetTypeTranslationMap.get(notificationTargetType) | translate }}</div>
           </div>
         </mat-radio-button>
@@ -60,7 +60,7 @@
         <ng-container [ngSwitch]="targetNotificationForm.get('configuration.usersFilter.type').value">
           <ng-container *ngSwitchCase="notificationTargetConfigType.TENANT_ADMINISTRATORS">
             <section *ngIf="isSysAdmin()">
-              <div fxFlex fxLayoutAlign="center center">
+              <div class="flex flex-1 items-center justify-center">
                 <tb-toggle-select class="tb-notification-tenant-group" appearance="fill"
                                   formControlName="filterByTenants">
                   <tb-toggle-option [value]="true">{{ 'tenant.tenant' | translate }}</tb-toggle-option>
@@ -135,10 +135,11 @@
           </a>
         </section>
         <mat-form-field class="mat-block">
-          <mat-label translate>notification.webhook-url</mat-label>
+          <mat-label>{{ (targetNotificationForm.get('configuration.useOldApi').value ?
+            'notification.webhook-url' : 'notification.workflow-url') | translate }}</mat-label>
           <input matInput formControlName="webhookUrl">
           <mat-error *ngIf="targetNotificationForm.get('configuration.webhookUrl').hasError('required')">
-            {{ 'notification.webhook-url-required' | translate }}
+            {{ (targetNotificationForm.get('configuration.useOldApi').value ? 'notification.webhook-url-required' : 'notification.workflow-url-required') | translate }}
           </mat-error>
         </mat-form-field>
         <mat-form-field class="mat-block">
@@ -156,7 +157,7 @@
     </section>
   </div>
   <mat-divider></mat-divider>
-  <div mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end">
+  <div mat-dialog-actions class="flex flex-row items-stretch justify-end gap-2">
     <button mat-button
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">{{ 'action.cancel' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts
index 82e7c954fd..23368b4584 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts
@@ -32,12 +32,12 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 import { RecipientTableHeaderComponent } from '@home/pages/notification/recipient/recipient-table-header.component';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { DatePipe } from '@angular/common';
 
 @Injectable()
-export class RecipientTableConfigResolver implements Resolve<EntityTableConfig<NotificationTarget>> {
+export class RecipientTableConfigResolver  {
 
   private readonly config: EntityTableConfig<NotificationTarget> = new EntityTableConfig<NotificationTarget>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
index 7771b32a58..e6a4d1efaf 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-recipients' | translate }}
     </div>
   </button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
index 6b5eab6c09..1f699c184b 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/escalation-form.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form [formGroup]="escalationFormGroup" fxLayout="column">
-  <div class="escalation" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
-    <div fxFlex *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
+<form [formGroup]="escalationFormGroup" class="flex flex-col">
+  <div class="escalation flex flex-row items-center justify-center xs:flex-col xs:items-stretch xs:justify-start">
+    <div class="flex-1" *ngIf="systemEscalation; else selectTime" translate>notification.first-recipient</div>
     <ng-template #selectTime>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
+      <div class="flex flex-1 flex-row items-center justify-center xs:flex-col">
         <span translate>notification.after</span>
         <tb-timeinterval
           subscriptSizing="dynamic"
@@ -27,19 +27,19 @@
           min="60000"
           max="604800000"
           disabledAdvanced></tb-timeinterval>
-        <span fxFlex class="escalation-notify" translate>notification.notify</span>
+        <span class="escalation-notify flex-1" translate>notification.notify</span>
       </div>
     </ng-template>
     <tb-entity-list
       required
-      fxFlex="60"
+      class="flex-full xs:max-h-60% gt-xs:max-w-60%"
       formControlName="targets"
       subscriptSizing="dynamic"
       entityType="{{ entityType.NOTIFICATION_TARGET }}"
       subType="{{ notificationType.ALARM }}"
       [placeholderText]="escalationFormGroup.get('targets').value ? '' : ('notification.add-recipient' | translate)">
       <button #createTargetButton
-              mat-button [fxHide]="disabled" matSuffix
+              mat-button [class.!hidden]="disabled" matSuffix
               (click)="createTarget($event, createTargetButton)">
         <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
       </button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html
index 619586cd56..5777909536 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/escalations.component.html
@@ -15,13 +15,12 @@
     limitations under the License.
 
 -->
-<div fxLayout="column">
-  <div class="tb-tenant-profile-queues"
-       fxLayout="row" style="align-items: center"
+<div class="flex flex-col">
+  <div class="tb-tenant-profile-queues flex flex-row items-center"
        *ngFor="let escalationControl of escalationsFormArray.controls;
        let $index = index; last as isLast;"
-       [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-    <tb-escalation-form fxFlex
+       [class.pb-2]="!isLast">
+    <tb-escalation-form class="flex-1"
                         [formControl]="escalationControl"
                         [systemEscalation]="$index === 0">
     </tb-escalation-form>
@@ -35,8 +34,8 @@
     </button>
   </div>
   <div *ngIf="!escalationsFormArray.controls.length">
-      <span translate fxLayoutAlign="center center"
-            class="tb-prompt">notification.no-rule</span>
+      <span translate
+            class="tb-prompt flex items-center justify-center">notification.no-rule</span>
   </div>
   <div *ngIf="!disabled" style="padding: 16px 0;">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index f5a2ddba17..23d76e90a3 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -27,8 +27,8 @@
 </mat-toolbar>
 <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
 </mat-progress-bar>
-<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-<div mat-dialog-content ngStyle.xs="padding: 0;">
+<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
+<div mat-dialog-content class="xs:p-0">
   <mat-horizontal-stepper [linear]="true" labelPosition="end" #addNotificationRule [orientation]="(stepperOrientation | async)"
                           (selectionChange)="changeStep($event)">
     <ng-template matStepperIcon="edit">
@@ -94,7 +94,7 @@
           <section formGroupName="triggerConfig">
             <section formGroupName="clearRule">
               <div class="mat-body-2" translate>notification.stop-escalation-alarm-status-become</div>
-              <mat-form-field fxFlex class="mat-block" floatLabel="always" style="margin-right: 48px">
+              <mat-form-field class="mat-block flex-1" floatLabel="always" style="margin-right: 48px">
                 <mat-label translate>alarm.alarm-status-list</mat-label>
                 <mat-select formControlName="alarmStatuses" multiple
                             placeholder="{{ !alarmTemplateForm.get('triggerConfig.clearRule.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -123,7 +123,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -133,7 +133,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let alarmAction of alarmActions" [value]="alarmAction">
@@ -161,12 +161,12 @@
       <ng-template matStepLabel>{{ 'notification.device-activity-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="deviceInactivityTemplateForm">
         <section formGroupName="triggerConfig">
-          <div fxFlex fxLayoutAlign="center center">
+          <div class="flex flex-1 items-center justify-center">
             <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                      style="width: 250px;"
                                      formControlName="filterByDevice">
-              <mat-button-toggle fxFlex [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
-              <mat-button-toggle fxFlex [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
+              <mat-button-toggle class="flex-1" [value]=true>{{ 'device.device' | translate }}</mat-button-toggle>
+              <mat-button-toggle class="flex-1" [value]=false>{{ 'device-profile.device-profile' | translate }}</mat-button-toggle>
             </mat-button-toggle-group>
           </div>
           <ng-container *ngIf="deviceInactivityTemplateForm.get('triggerConfig.filterByDevice').value; else deviceProfile">
@@ -189,7 +189,7 @@
               [entityType]="entityType.DEVICE_PROFILE">
             </tb-entity-list>
           </ng-template>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let deviceEvent of deviceEvents" [value]="deviceEvent">
@@ -223,8 +223,8 @@
                                [allowedEntityTypes]="allowEntityTypeForEntityAction"
                                formControlName="entityTypes">
           </tb-entity-type-list>
-          <section fxLayout="column" fxLayoutGap="8px">
-            <span fxFlex translate>notification.status</span>
+          <section class="flex flex-col gap-2">
+            <span class="flex-1" translate>notification.status</span>
             <mat-slide-toggle formControlName="created">{{ 'notification.created' | translate }}</mat-slide-toggle>
             <mat-slide-toggle formControlName="updated">{{ 'notification.updated' | translate }}</mat-slide-toggle>
             <mat-slide-toggle formControlName="deleted">{{ 'notification.deleted' | translate }}</mat-slide-toggle>
@@ -256,7 +256,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -265,7 +265,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
               <mat-select formControlName="alarmStatuses" multiple
                           placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -275,7 +275,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <section fxLayout="column">
+          <section class="flex flex-col">
             <mat-slide-toggle formControlName="onlyUserComments" style="margin-bottom: 12px;">
               {{ 'notification.notify-only-user-comments' | translate }}
             </mat-slide-toggle>
@@ -309,7 +309,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -318,7 +318,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>alarm.alarm-status-list</mat-label>
               <mat-select formControlName="alarmStatuses" multiple
                           placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
@@ -328,7 +328,7 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let alarmAssignmentAction of alarmAssignmentActions" [value]="alarmAssignmentAction">
@@ -365,7 +365,7 @@
               hint="{{ 'notification.rule-chain-list-rule-hint' | translate }}"
               [entityType]="entityType.RULE_CHAIN">
             </tb-entity-list>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>rulechain.rulechain-events</mat-label>
               <mat-select formControlName="ruleChainEvents" multiple
                           placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleChainEvents').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -384,7 +384,7 @@
               {{ 'notification.track-rule-node-events' | translate }}
             </mat-slide-toggle>
             <section *ngIf="ruleEngineEventsTemplateForm.get('triggerConfig.trackRuleNodeEvents').value">
-              <mat-form-field fxFlex class="mat-block" floatLabel="always">
+              <mat-form-field class="mat-block flex-1" floatLabel="always">
                 <mat-label translate>rulenode.rule-node-events</mat-label>
                 <mat-select formControlName="ruleNodeEvents" multiple
                             placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleNodeEvents').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -425,7 +425,7 @@
               hint="{{ 'notification.edge-list-rule-hint' | translate }}"
               [entityType]="entityType.EDGE">
             </tb-entity-list>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field class="mat-block flex-1" floatLabel="always">
               <mat-label translate>notification.notify-on</mat-label>
               <mat-select formControlName="notifyOn" multiple
                           placeholder="{{ !edgeConnectionTemplateForm.get('triggerConfig.notifyOn').value?.length ? ('event.all-events' | translate) : '' }}">
@@ -482,11 +482,10 @@
                                ignoreAuthorityFilter
                                [allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
           </tb-entity-type-list>
-          <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
-               fxLayout.xs="column"  fxLayoutAlign.xs="stretch">
+          <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
             <label translate>notification.threshold</label>
-            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-              <mat-slider fxFlex min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+            <div class="flex flex-1 flex-row items-center justify-start">
+              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="threshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
@@ -514,7 +513,7 @@
       <ng-template matStepLabel>{{ 'notification.api-usage-trigger-settings' | translate }}</ng-template>
       <form [formGroup]="apiUsageLimitTemplateForm">
         <section formGroupName="triggerConfig">
-          <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+          <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
             <mat-label translate>api-usage.api-features</mat-label>
             <mat-select formControlName="apiFeatures" multiple>
               <mat-option *ngFor="let apiFeature of apiFeatures" [value]="apiFeature">
@@ -523,7 +522,7 @@
             </mat-select>
             <mat-hint>{{ 'notification.api-feature-hint' | translate }}</mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>notification.notify-on</mat-label>
             <mat-select formControlName="notifyOn" multiple>
               <mat-option *ngFor="let apiUsageStateValue of apiUsageStateValues" [value]="apiUsageStateValue">
@@ -597,10 +596,10 @@
   </mat-horizontal-stepper>
 </div>
 <mat-divider></mat-divider>
-<div mat-dialog-actions fxLayout="row">
+<div mat-dialog-actions class="flex flex-row">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
index cc68cb5411..1a0ec93953 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
@@ -32,12 +32,12 @@ import {
   RuleNotificationDialogComponent,
   RuleNotificationDialogData
 } from '@home/pages/notification/rule/rule-notification-dialog.component';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { DatePipe } from '@angular/common';
 
 @Injectable()
-export class RuleTableConfigResolver implements Resolve<EntityTableConfig<NotificationRule>> {
+export class RuleTableConfigResolver  {
 
   private readonly config: EntityTableConfig<NotificationRule> = new EntityTableConfig<NotificationRule>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
index a4bbf1cf4a..046f32a657 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-rule' | translate }}
     </div>
   </button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
index 75042166d3..cc10aa6f84 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>notification.failed-send</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index e9e34c24bc..8e9682b3fd 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="sentNotification"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -38,7 +38,7 @@
     <mat-step [stepControl]="notificationRequestForm">
       <ng-template matStepLabel>{{ 'notification.setup' | translate }}</ng-template>
       <form [formGroup]="notificationRequestForm">
-        <div fxLayoutAlign="center">
+        <div class="flex items-stretch justify-center">
           <tb-toggle-select formControlName="useTemplate" appearance="fill">
             <tb-toggle-option  [value]="false">{{ 'notification.start-from-scratch' | translate }}</tb-toggle-option>
             <tb-toggle-option  [value]="true">{{ 'notification.use-template' | translate }}</tb-toggle-option>
@@ -58,7 +58,7 @@
             <section formGroupName="configuration">
               <div class="delivery-title">
                 <div>
-                  <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+                  <label [class.tb-error]="notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
                          class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
                   <div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
                 </div>
@@ -123,7 +123,7 @@
           <mat-slide-toggle formControlName="enabled" class="toggle">
             {{ 'notification.scheduler-later' | translate }}
           </mat-slide-toggle>
-          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" fxLayout="column">
+          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" class="flex flex-col">
             <tb-timezone-select userTimezoneByDefault
                                 required
                                 formControlName="timezone">
@@ -132,7 +132,7 @@
               <mat-label translate>notification.time</mat-label>
               <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
               <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-              <input required matInput fxFlex formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
+              <input required matInput class="flex-1" formControlName="time" [min]="minDate()" [max]="maxDate()" [matDatetimepicker]="startTimePicker">
             </mat-form-field>
           </div>
         </section>
@@ -161,7 +161,7 @@
       </div>
       <div *ngIf="preview" class="tb-form-panel no-padding no-border">
         <section class="preview-group tb-form-panel stroked no-gap">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">supervisor_account</tb-icon>
             <div class="tb-form-panel-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
           </div>
@@ -178,7 +178,7 @@
           </mat-chip-listbox>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.WEB?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:bell-badge</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.web-preview</div>
           </div>
@@ -187,7 +187,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MOBILE_APP?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:cellphone-text</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.mobile-app-preview</div>
           </div>
@@ -197,7 +197,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SMS?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:message-processing</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.sms-preview</div>
           </div>
@@ -206,7 +206,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.EMAIL?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:email</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.email-preview</div>
           </div>
@@ -217,7 +217,7 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:slack</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.slack-preview</div>
           </div>
@@ -226,13 +226,14 @@
           </div>
         </section>
         <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <div class="flex flex-row items-center justify-start gap-2">
             <tb-icon class="tb-mat-18">mdi:microsoft-teams</tb-icon>
             <div class="tb-form-panel-title" translate>notification.delivery-method.microsoft-teams-preview</div>
           </div>
-          <div class="notification-content mini">
+          <div class="notification-content mini" [style.background-color]="preview.processedTemplates.MICROSOFT_TEAMS?.themeColor">
             <div class="subject">{{ preview.processedTemplates.MICROSOFT_TEAMS.subject }}</div>
             {{ preview.processedTemplates.MICROSOFT_TEAMS.body }}
+            <button mat-raised-button>{{ preview.processedTemplates.MICROSOFT_TEAMS.button.text }}</button>
           </div>
         </section>
       </div>
@@ -243,7 +244,7 @@
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index a6e8def974..e91221d760 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -190,6 +190,8 @@
       &.mini {
         font-size: 12px;
         line-height: 1.25;
+        justify-content: start;
+        gap: 5px;
 
         .subject {
           font-size: 14px;
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
index baee27ff73..174e30caa9 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
@@ -45,11 +45,11 @@ import {
   NotificationRequestErrorDialogData,
   SentErrorDialogComponent
 } from '@home/pages/notification/sent/sent-error-dialog.component';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
 
 @Injectable()
-export class SentTableConfigResolver implements Resolve<EntityTableConfig<NotificationRequest, PageLink, NotificationRequestInfo>> {
+export class SentTableConfigResolver  {
 
   private readonly config: EntityTableConfig<NotificationRequest, PageLink, NotificationRequestInfo> =
     new EntityTableConfig<NotificationRequest, PageLink, NotificationRequestInfo>();
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
index 470f2dde20..303db35231 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html
@@ -15,22 +15,22 @@
     limitations under the License.
 
 -->
-<form [formGroup]="notificationSettingsFormGroup" fxLayout="column">
-  <div fxLayout="row" style="height: 48px;">
-    <div fxFlex="50" fxLayoutAlign="start center">
+<form [formGroup]="notificationSettingsFormGroup" class="flex flex-col">
+  <div class="flex flex-row" style="height: 48px;">
+    <div class="flex max-w-50% flex-full items-center justify-start">
       <mat-checkbox color="primary"
                     (click)="$event.stopPropagation()"
                     (change)="changeInstanceTypeCheckBox($event.checked)"
                     [checked]="getChecked()"
                     [indeterminate]="getIndeterminate()">
         <span class="notification-type"
-              [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
+              [class.notification-type-disabled]="!notificationSettingsFormGroup.get('enabled').value">
           {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
         </span>
       </mat-checkbox>
     </div>
-    <div fxFlex fxLayout="row" *ngFor="let deliveryMethod of deliveryMethods">
-      <div fxFlex fxLayoutAlign="start center">
+    <div class="flex flex-1 flex-row" *ngFor="let deliveryMethod of deliveryMethods">
+      <div class="flex flex-1 items-center justify-start">
         <mat-checkbox color="primary"
                       [checked]="getChecked(deliveryMethod)"
                       (click)="toggleDeliviryMethod(deliveryMethod)"
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
index 90482be72f..ca75275beb 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html
@@ -18,12 +18,11 @@
 <div>
   <mat-card appearance="outlined" class="settings-card tb-absolute-fill">
     <mat-card-header>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
-           fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
-        <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-row items-start justify-between xs:flex-col xs:justify-start xs:gap-2">
+        <div class="flex flex-1 flex-col">
           <span class="mat-headline-5" translate>notification.settings.notification-settings</span>
         </div>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <button mat-button color="primary"
                   [disabled]="(isLoading$ | async)"
                   (click)="resetSettings()">{{ 'notification.settings.reset-all' | translate }}</button>
@@ -37,8 +36,8 @@
       <form [formGroup]="notificationSettings" class="notification-form">
         <section class="notification-section">
           <div  class="notification-section-block">
-            <div fxLayout="row" fxLayoutAlign="start center" style="height: 44px;">
-              <div fxFlex="50">
+            <div class="flex flex-row items-center justify-start" style="height: 44px;">
+              <div class="max-w-50% flex-full">
                 <mat-checkbox color="warn"
                               (click)="$event.stopPropagation()"
                               [indeterminate]="getIndeterminate()"
@@ -47,8 +46,8 @@
                   <mat-label translate>notification.settings.type</mat-label>
                 </mat-checkbox>
               </div>
-              <div fxFlex *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                <div fxFlex fxLayoutAlign="start center">
+              <div class="flex-1" *ngFor="let deliveryMethods of notificationDeliveryMethods">
+                <div class="flex flex-1 items-center justify-start">
                   <mat-checkbox color="warn"
                                 [checked]="getChecked(deliveryMethods)"
                                 (change)="changeInstanceTypeCheckBox($event.checked, deliveryMethods)"
@@ -70,7 +69,7 @@
         </section>
       </form>
     </mat-card-content>
-    <div fxLayout="row" fxLayoutAlign="end start" style="padding: 16px;">
+    <div class="flex flex-row items-start justify-end" style="padding: 16px;">
       <button mat-button mat-raised-button color="primary"
               type="button"
               (click)="save()"
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
index 6ce736ead1..a45e6e6aa7 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-action-button-configuration.component.html
@@ -18,19 +18,18 @@
 <div class="tb-form-panel tb-slide-toggle stroked" [formGroup]="actionButtonConfigForm">
   <mat-expansion-panel class="tb-settings"
                        [expanded]="actionButtonConfigForm.get('enabled').value">
-    <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-      <mat-panel-title fxFlex="60">
+    <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
+      <mat-panel-title class="max-w-60% flex-full">
         <div tb-hint-tooltip-icon="{{ sliderHint }}" class="tb-form-row no-border no-padding">
-          <mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()"
-                            fxLayoutAlign="center">
+          <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="enabled" (click)="$event.stopPropagation()">
             {{ actionTitle }}
           </mat-slide-toggle>
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>
     <ng-template matExpansionPanelContent class="tb-extension-panel">
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-        <mat-form-field class="mat-block" fxFlex *ngIf="!hideButtonText">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block flex-1" *ngIf="!hideButtonText">
           <mat-label translate>notification.button-text</mat-label>
           <input matInput formControlName="text" required>
           <mat-error
@@ -45,8 +44,8 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-        <mat-form-field fxFlex="30" fxFlex.xs="100">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="max-w-30% flex-full xs:max-w-full">
           <mat-label translate>notification.action-type</mat-label>
           <mat-select formControlName="linkType">
             <mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes"
@@ -55,7 +54,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex
+        <mat-form-field class="flex-1"
                         *ngIf="actionButtonConfigForm.get('linkType').value === actionButtonLinkType.LINK; else dashboardSelector">
           <mat-label translate>notification.link</mat-label>
           <input matInput formControlName="link" required>
@@ -66,11 +65,11 @@
         </mat-form-field>
         <ng-template #dashboardSelector>
           <tb-dashboard-autocomplete
-            fxFlex="35" fxFlex.xs="100"
+            class="max-w-35% flex-full xs:max-w-full"
             required
             formControlName="dashboardId">
           </tb-dashboard-autocomplete>
-          <tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100"
+          <tb-dashboard-state-autocomplete class="max-w-35% flex-full xs:max-w-full"
                                            [dashboardId]="actionButtonConfigForm.get('dashboardId').value"
                                            formControlName="dashboardState">
           </tb-dashboard-state-autocomplete>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
index 88d31996ca..ed8d0b7885 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
@@ -31,7 +31,7 @@
            [formGroupName]="NotificationDeliveryMethod.WEB"
            *ngIf="templateConfigurationForm.get('WEB.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.WEB) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).name | translate }}
@@ -62,7 +62,7 @@
             <mat-slide-toggle formControlName="enabled" class="mat-slide">
               {{ 'icon.icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-material-icon-select asBoxInput
                                        [color]="templateConfigurationForm.get('WEB.additionalConfig.icon.color').value"
                                        formControlName="icon">
@@ -84,7 +84,7 @@
            [formGroupName]="NotificationDeliveryMethod.MOBILE_APP"
            *ngIf="templateConfigurationForm.get('MOBILE_APP.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MOBILE_APP) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).name | translate }}
@@ -125,7 +125,7 @@
             <mat-slide-toggle formControlName="enabled" class="mat-slide">
               {{ 'icon.icon' | translate }}
             </mat-slide-toggle>
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="flex flex-row items-center justify-start gap-2">
               <tb-material-icon-select asBoxInput
                                        [color]="templateConfigurationForm.get('MOBILE_APP.additionalConfig.icon.color').value"
                                        formControlName="icon">
@@ -149,7 +149,7 @@
            [formGroupName]="NotificationDeliveryMethod.SMS"
            *ngIf="templateConfigurationForm.get('SMS.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SMS) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).name | translate }}
@@ -181,7 +181,7 @@
            [formGroupName]="NotificationDeliveryMethod.EMAIL"
            *ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.EMAIL) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
@@ -211,7 +211,7 @@
            [formGroupName]="NotificationDeliveryMethod.SLACK"
            *ngIf="templateConfigurationForm.get('SLACK.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SLACK) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
@@ -237,7 +237,7 @@
            [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
            *ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
     <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MICROSOFT_TEAMS) }}">
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+      <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon>
           {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).name | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
index 06dd8d030e..76cc84d905 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts
@@ -84,15 +84,16 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
   tinyMceOptions: Record<string, any> = {
     base_url: '/assets/tinymce',
     suffix: '.min',
-    plugins: ['link table image imagetools code fullscreen'],
+    plugins: ['link', 'table', 'image', 'lists', 'code', 'fullscreen'],
     menubar: 'edit insert tools view format table',
-    toolbar: 'fontselect fontsizeselect | formatselect | bold italic  strikethrough  forecolor backcolor ' +
-      '| link | table | image | alignleft aligncenter alignright alignjustify  ' +
-      '| numlist bullist outdent indent  | removeformat | code | fullscreen',
+    toolbar: 'undo redo | fontfamily fontsize blocks | bold italic  strikethrough | forecolor backcolor ' +
+      '| link table image | alignleft aligncenter alignright alignjustify  ' +
+      '| numlist bullist | outdent indent  | removeformat | code | fullscreen',
     toolbar_mode: 'sliding',
     height: 400,
     autofocus: false,
-    branding: false
+    branding: false,
+    promotion: false
   };
 
   private propagateChange = null;
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 2d3e642dd2..82bc730eb8 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ dialogTitle | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div tb-help="templateNotifications"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -45,7 +45,7 @@
             {{ 'notification.name-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block" *ngIf="!hideSelectType">
+        <mat-form-field class="mat-block flex-1" *ngIf="!hideSelectType">
           <mat-label translate>notification.type</mat-label>
           <mat-select formControlName="notificationType">
             <mat-option *ngFor="let notificationType of notificationTypes" [value]="notificationType">
@@ -54,7 +54,7 @@
           </mat-select>
         </mat-form-field>
         <section formGroupName="configuration">
-          <label [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+          <label [class.tb-error]="templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')"
             class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
           <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
           <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
@@ -88,7 +88,7 @@
 <div mat-dialog-actions class="tb-dialog-actions">
   <button mat-stroked-button *ngIf="selectedIndex > 0"
           (click)="backStep()">{{ 'action.back' | translate }}</button>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-raised-button
           color="primary"
           (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts
index 0f8f05649f..734688f30b 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts
@@ -33,11 +33,11 @@ import {
 import { TranslateService } from '@ngx-translate/core';
 import { TemplateTableHeaderComponent } from '@home/pages/notification/template/template-table-header.component';
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { DatePipe } from '@angular/common';
 
 @Injectable()
-export class TemplateTableConfigResolver implements Resolve<EntityTableConfig<NotificationTemplate>> {
+export class TemplateTableConfigResolver  {
 
   private readonly config: EntityTableConfig<NotificationTemplate> = new EntityTableConfig<NotificationTemplate>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
index 6538f11ae3..bc809ba8b1 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+<div class="flex flex-full flex-row items-center justify-end">
   <button mat-stroked-button color="primary" (click)="createTemplate($event)">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="flex flex-row items-center justify-start">
       <mat-icon>add</mat-icon>{{ 'notification.add-template' | translate }}
     </div>
   </button>
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
index 8e4428fec9..2993b5cad1 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import {
   CellActionDescriptorType,
   DateEntityTableColumn,
@@ -40,7 +40,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 
 @Injectable()
-export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<OtaPackage, PageLink, OtaPackageInfo>> {
+export class OtaUpdateTableConfigResolve  {
 
   private readonly config: EntityTableConfig<OtaPackage, PageLink, OtaPackageInfo> =
     new EntityTableConfig<OtaPackage, PageLink, OtaPackageInfo>();
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
index c1430be527..ff975cd74f 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
@@ -15,31 +15,31 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
-  <button mat-raised-button color="primary" fxFlex.xs
+<div class="tb-details-buttons xs:flex xs:flex-col">
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async) || !(entity?.hasData && !entity?.url)"
           (click)="onEntityAction($event, 'uploadPackage')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'ota-update.download' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'ota-update.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onPackageIdCopied()"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copyId</span>
     </button>
@@ -47,7 +47,7 @@
             ngxClipboard
             (cbOnSuccess)="onPackageChecksumCopied()"
             [cbContent]="entity?.checksum"
-            [fxShow]="!isEdit && entity?.checksum">
+            [class.!hidden]="isEdit || !entity?.checksum">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-checksum</span>
     </button>
@@ -55,17 +55,17 @@
             ngxClipboard
             (cbOnSuccess)="onPackageDirectUrlCopied()"
             [cbContent]="entity?.url"
-            [fxShow]="!isEdit && entity?.url">
+            [class.!hidden]="isEdit || !entity?.url">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-direct-url</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column" fxLayoutGap="8px">
+<div class="mat-padding flex flex-col gap-2">
   <form [formGroup]="entityForm">
-    <fieldset [disabled]="(isLoading$ | async) || !isEdit" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
-        <mat-form-field class="mat-block" fxFlex="45">
+    <fieldset [disabled]="(isLoading$ | async) || !isEdit" class="flex flex-col">
+      <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+        <mat-form-field class="mat-block flex-full gt-xs:max-w-45%">
           <mat-label translate>ota-update.title</mat-label>
           <input matInput formControlName="title" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('title').hasError('required')">
@@ -75,7 +75,7 @@
             {{ 'ota-update.title-max-length' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field class="mat-block" fxFlex>
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>ota-update.version</mat-label>
           <input matInput formControlName="version" type="text" required [readonly]="!isAdd">
           <mat-error *ngIf="entityForm.get('version').hasError('required')">
@@ -86,7 +86,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <mat-form-field class="mat-block" fxFlex style="margin-bottom: 8px">
+      <mat-form-field class="mat-block flex-1" style="margin-bottom: 8px">
         <mat-label translate>ota-update.version-tag</mat-label>
         <input matInput formControlName="tag" type="text" [readonly]="!isAdd">
         <mat-hint *ngIf="isAdd" translate>ota-update.version-tag-hint</mat-hint>
@@ -94,7 +94,8 @@
       <tb-device-profile-autocomplete
         formControlName="deviceProfileId"
         required
-        [ngStyle]="{'padding-bottom': isAdd ? '16px': 0}"
+        [class.pb-4]="isAdd"
+        [class.pb-0]="!isAdd"
         [hint]="'ota-update.chose-compatible-device-profile'"
         [editProfileEnabled]="false"
         [addNewProfile]="false"
@@ -110,7 +111,7 @@
       </mat-form-field>
       <section *ngIf="isAdd">
         <div class="mat-caption" style="margin: -8px 0 8px;" translate>ota-update.warning-after-save-no-edit</div>
-        <mat-radio-group formControlName="isURL" fxLayoutGap="16px">
+        <mat-radio-group formControlName="isURL" class="gap-4">
           <mat-radio-button [value]="false">{{ "ota-update.upload-binary-file" | translate }}</mat-radio-button>
           <mat-radio-button [value]="true">{{ "ota-update.use-external-url" | translate }}</mat-radio-button>
         </mat-radio-group>
@@ -128,10 +129,9 @@
             {{ 'ota-update.auto-generate-checksum' | translate }}
           </mat-checkbox>
         </section>
-        <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayoutGap.sm="8px"
-             fxLayout.xs="column" fxLayout.md="column"
+        <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-xs:gap-2"
              *ngIf="!(isAdd && this.entityForm.get('generateChecksum').value)">
-          <mat-form-field class="mat-block" fxFlex="33">
+          <mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
             <mat-label translate>ota-update.checksum-algorithm</mat-label>
             <mat-select formControlName="checksumAlgorithm">
               <mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
@@ -139,23 +139,23 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field class="mat-block" fxFlex>
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>ota-update.checksum</mat-label>
             <input matInput formControlName="checksum" type="text">
             <mat-hint *ngIf="isAdd" translate>ota-update.checksum-hint</mat-hint>
           </mat-form-field>
         </div>
         <section *ngIf="!isAdd">
-          <div fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
-            <mat-form-field class="mat-block" fxFlex="33">
+          <div class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
+            <mat-form-field class="mat-block flex-full gt-xs:max-w-33%">
               <mat-label translate>ota-update.file-name</mat-label>
               <input matInput formControlName="fileName" type="text">
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>ota-update.file-size-bytes</mat-label>
               <input matInput formControlName="dataSize" type="text">
             </mat-form-field>
-            <mat-form-field class="mat-block" fxFlex>
+            <mat-form-field class="mat-block flex-1">
               <mat-label translate>ota-update.content-type</mat-label>
               <input matInput formControlName="contentType" type="text">
             </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts b/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts
index 43b5ea7d09..2d594d9447 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { ProfileComponent } from './profile.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
@@ -28,7 +28,7 @@ import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { Observable } from 'rxjs';
 
 @Injectable()
-export class UserProfileResolver implements Resolve<User> {
+export class UserProfileResolver  {
 
   constructor(private store: Store<AppState>,
               private userService: UserService) {
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index 2de393dc95..d59847cf37 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
@@ -18,13 +18,12 @@
 <div>
   <mat-card appearance="outlined" class="profile-card">
     <mat-card-header>
-      <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
-           fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
-        <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-row items-start justify-between xs:flex-col xs:justify-start xs:gap-2">
+        <div class="flex flex-1 flex-col">
           <span class="mat-headline-5" translate>profile.profile</span>
           <span class="profile-email" style='opacity: 0.7;'>{{ profile ? profile.get('email').value : '' }}</span>
         </div>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <span class="mat-mdc-subheader" translate>profile.last-login-time</span>
           <span class="profile-last-login-ts" style='opacity: 0.7;'>{{ user?.additionalInfo?.lastLoginTs | date:'yyyy-MM-dd HH:mm:ss'  }}</span>
         </div>
@@ -67,9 +66,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <section class="tb-home-dashboard" fxFlex fxLayout="column" fxLayout.gt-sm="row" *ngIf="!isSysAdmin()">
+          <section class="tb-home-dashboard flex flex-1 flex-col gt-sm:flex-row" *ngIf="!isSysAdmin()">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="user?.authority === authorities.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -77,11 +76,11 @@
               [customerId]="user?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
-          <div fxLayout="row" fxLayoutAlign="end start">
+          <div class="flex flex-row items-start justify-end">
             <button mat-button mat-raised-button color="primary"
                     type="submit"
                     [disabled]="(isLoading$ | async) || profile.invalid || !profile.dirty">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index b1b25590ea..37e3ddd609 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" class="dialog-container">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add</h2>
-    <span fxFlex>: {{ruleNode.component.name}}</span>
+    <span class="flex-1">: {{ruleNode.component.name}}</span>
     <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -36,7 +36,7 @@
                   isAdd>
     </tb-rule-node>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
index ed9a7ca5ea..01150bef01 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 480px;">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.add-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'ruleEngine'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -39,7 +39,7 @@
       </tb-rule-node-link>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
index 3ee27c7674..0525f7b44c 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" style="min-width: 650px;">
   <mat-toolbar color="primary">
     <h2 translate>rulenode.create-nested-rulechain</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div mat-dialog-content>
     <form [formGroup]="createNestedRuleChainFormGroup" class="mat-padding">
       <fieldset [disabled]="isLoading$ | async">
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>rulechain.name</mat-label>
           <input matInput formControlName="name" required>
           <mat-error *ngIf="createNestedRuleChainFormGroup.get('name').hasError('required')">
@@ -49,7 +49,7 @@
       </fieldset>
     </form>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
index 6109bc40ab..fc73cc9d56 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
@@ -15,14 +15,12 @@
 ///
 
 import {
-  AfterViewInit,
   Component,
   ComponentRef,
   EventEmitter,
   forwardRef,
   Input,
   OnDestroy,
-  OnInit,
   Output,
   ViewChild,
   ViewContainerRef
@@ -42,7 +40,6 @@ import {
 import { Subscription } from 'rxjs';
 import { RuleChainService } from '@core/http/rule-chain.service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { TranslateService } from '@ngx-translate/core';
 import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component';
 import { deepClone } from '@core/utils';
 import { RuleChainType } from '@shared/models/rule-chain.models';
@@ -57,7 +54,7 @@ import { RuleChainType } from '@shared/models/rule-chain.models';
     multi: true
   }]
 })
-export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
+export class RuleNodeConfigComponent implements ControlValueAccessor, OnDestroy {
 
   @ViewChild('definedConfigContent', {read: ViewContainerRef, static: true}) definedConfigContainer: ViewContainerRef;
 
@@ -121,10 +118,9 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, On
 
   private configuration: RuleNodeConfiguration;
 
-  private propagateChange = (v: any) => { };
+  private propagateChange = (_v: any) => { };
 
-  constructor(private translate: TranslateService,
-              private ruleChainService: RuleChainService,
+  constructor(private ruleChainService: RuleChainService,
               private fb: UntypedFormBuilder) {
     this.ruleNodeConfigFormGroup = this.fb.group({
       configuration: [null, Validators.required]
@@ -135,10 +131,7 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, On
     this.propagateChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
-  }
-
-  ngOnInit(): void {
+  registerOnTouched(_fn: any): void {
   }
 
   ngOnDestroy(): void {
@@ -155,9 +148,6 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, On
     }
   }
 
-  ngAfterViewInit(): void {
-  }
-
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
@@ -218,8 +208,8 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, On
         this.changeSubscription = null;
       }
       this.definedConfigContainer.clear();
-      const factory = this.ruleChainService.getRuleNodeConfigFactory(this.nodeDefinition.configDirective);
-      this.definedConfigComponentRef = this.definedConfigContainer.createComponent(factory);
+      const component = this.ruleChainService.getRuleNodeConfigComponent(this.nodeDefinition.configDirective);
+      this.definedConfigComponentRef = this.definedConfigContainer.createComponent(component);
       this.definedConfigComponent = this.definedConfigComponentRef.instance;
       this.definedConfigComponent.ruleNodeId = this.ruleNodeId;
       this.definedConfigComponent.ruleChainId = this.ruleChainId;
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 95c7343e7f..014a73973c 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
   <section class="title-row">
-    <mat-form-field fxFlex class="mat-block">
+    <mat-form-field class="mat-block flex-1">
       <mat-label translate>rulenode.name</mat-label>
       <input matInput formControlName="name" required>
       <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
index 1e8c297734..b74d9f0be2 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-link.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="ruleNodeLinkFormGroup">
     <tb-link-labels
       required
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 39f6f7b870..5e955dc4b4 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -15,22 +15,21 @@
     limitations under the License.
 
 -->
-<div class="mat-content tb-rulechain" fxFlex tb-fullscreen [fullscreen]="isFullscreen" [tb-hotkeys]="hotKeys"
-     [cheatSheet]="cheatSheetComponent" fxLayout="column">
+<div class="mat-content tb-rulechain flex flex-1 flex-col" tb-fullscreen [fullscreen]="isFullscreen" [tb-hotkeys]="hotKeys"
+     [cheatSheet]="cheatSheetComponent">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-  <section class="tb-rulechain-container" fxFlex fxLayout="column">
-    <div class="tb-rulechain-layout" fxFlex fxLayout="row">
-      <mat-drawer-container style="width: 100%; height: 100%;">
-        <mat-drawer class="tb-rulechain-library mat-elevation-z4"
+  <section class="tb-rulechain-container flex flex-1 flex-col">
+    <div class="tb-rulechain-layout flex flex-1 flex-row">
+      <mat-drawer-container class="size-full">
+        <mat-drawer class="tb-rulechain-library mat-elevation-z4 flex flex-col"
                     disableClose="true"
                     mode="side"
                     #drawer
                     opened
-                    position="start"
-                    fxLayout="column">
+                    position="start">
           <mat-toolbar color="primary" class="tb-dark">
             <tb-rule-chain-select
-              fxFlex
+              class="flex-1"
               *ngIf="!isImport"
               [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"
@@ -40,7 +39,7 @@
           </mat-toolbar>
           <mat-toolbar>
             <div class="mat-toolbar-tools">
-              <mat-form-field fxFlex class="tb-appearance-transparent">
+              <mat-form-field class="tb-appearance-transparent flex-1">
                 <button mat-icon-button matPrefix class="tb-small"
                         matTooltip="{{'rulenode.search' | translate}}"
                         matTooltipPosition="above">
@@ -50,7 +49,7 @@
                        [formControl]="ruleNodeTypeSearch"
                        placeholder="{{'rulenode.search' | translate}}"/>
                 <button mat-icon-button matSuffix class="tb-small"
-                        [fxShow]="ruleNodeTypeSearch.value !== ''"
+                        [class.!hidden]="ruleNodeTypeSearch.value === ''"
                         (click)="ruleNodeTypeSearch.reset()"
                         matTooltip="{{'action.clear-search' | translate}}"
                         matTooltipPosition="above">
@@ -89,7 +88,7 @@
                     (closed)="onDetailsDrawerClosed()"
                     mode="over"
                     position="end">
-          <tb-details-panel *ngIf="editingRuleNode" fxFlex
+          <tb-details-panel *ngIf="editingRuleNode" class="flex-1"
                             headerTitle="{{editingRuleNode.name}}"
                             headerSubtitle="{{
                               (ruleNodeTypeDescriptorsMap.get(editingRuleNode.component.type).name | translate)
@@ -104,7 +103,7 @@
             <div class="details-buttons">
               <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
             </div>
-            <mat-tab-group fxFlex mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details" [(selectedIndex)]="selectedRuleNodeTabIndex">
+            <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details flex-1" [(selectedIndex)]="selectedRuleNodeTabIndex">
               <mat-tab label="{{ 'rulenode.details' | translate }}">
                 <tb-rule-node #tbRuleNode
                               [ruleNode]="editingRuleNode"
@@ -126,7 +125,7 @@
               </mat-tab>
               <mat-tab label="{{ 'rulenode.help' | translate }}">
                 <div class="tb-rule-node-help">
-                  <div id="tb-node-content" class="mat-padding" fxLayout="column">
+                  <div id="tb-node-content" class="mat-padding flex flex-col">
                     <div class="tb-node-title">{{editingRuleNode.component.name}}</div>
                     <div>&nbsp;</div>
                     <div class="tb-node-description" [innerHtml]="editingRuleNode.component.configurationDescriptor.nodeDefinition.description | safe: 'html'"></div>
@@ -137,7 +136,7 @@
               </mat-tab>
             </mat-tab-group>
           </tb-details-panel>
-          <tb-details-panel *ngIf="editingRuleNodeLink" fxFlex
+          <tb-details-panel *ngIf="editingRuleNodeLink" class="flex-1"
                             headerTitle="{{editingRuleNodeLink.label}}"
                             headerSubtitle="{{'rulenode.link-details' | translate}}"
                             [isReadOnly]="false"
@@ -150,7 +149,7 @@
               <div [tb-help]="'ruleEngine'"></div>
             </div>
             <tb-rule-node-link
-              fxFlex
+              class="flex-1"
               #tbRuleNodeLink
               [(ngModel)]="editingRuleNodeLink"
               [allowedLabels]="editingRuleNodeLinkLabels"
@@ -166,7 +165,7 @@
                   (click)="drawer.toggle();"
                   matTooltip="{{ (drawer.opened ? 'rulenode.close-node-library' : 'rulenode.open-node-library') | translate }}"
                   matTooltipPosition="above">
-            <mat-icon class="tb-library-node-btn-icon" [ngClass]="{'tb-library-node-btn-icon-toggled' : drawer.opened}">chevron_right</mat-icon>
+            <mat-icon class="tb-library-node-btn-icon" [class.tb-library-node-btn-icon-toggled]="drawer.opened">chevron_right</mat-icon>
           </button>
           <button #versionControlButton
                   *ngIf="!isImport"
@@ -198,7 +197,7 @@
                   <div class="tb-context-menu-header {{contextInfo.headerClass}}">
                     <mat-icon *ngIf="!contextInfo.iconUrl">{{contextInfo.icon}}</mat-icon>
                     <img *ngIf="contextInfo.iconUrl" [src]="contextInfo.iconUrl"/>
-                    <div fxFlex>
+                    <div class="flex-1">
                       <div class="tb-context-menu-title">{{contextInfo.title}}</div>
                       <div class="tb-context-menu-subtitle">{{contextInfo.subtitle}}</div>
                     </div>
@@ -231,10 +230,10 @@
                        [userCallbacks]="editCallbacks">
             </fc-canvas>
           </div>
-          <section fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
+          <section class="tb-footer-buttons flex flex-row flex-wrap items-end justify-start">
             <button [disabled]="isLoading$ | async"
                     mat-fab color="accent" class="tb-btn-footer"
-                    [ngClass]="{'tb-hide': !objectsSelected()}"
+                    [class.tb-hide]="!objectsSelected()"
                     (click)="deleteSelected()"
                     matTooltip="{{ 'rulenode.delete-selected-objects' | translate }}"
                     matTooltipPosition="above">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
index fc79a63ecf..d5bd4062bc 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
@@ -345,7 +345,7 @@
   }
 }
 
-.tb-rule-chain-context-menu.mat-mdc-menu-panel.mdc-menu-surface {
+.tb-rule-chain-context-menu.mat-mdc-menu-panel {
   min-width: 320px;
   max-height: 404px;
   border-radius: 8px;
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
index c341ae6848..0162e43655 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
@@ -15,16 +15,7 @@
 ///
 
 import { Inject, Injectable, NgModule, Optional } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  CanActivate,
-  Resolve,
-  Router,
-  RouterModule,
-  RouterStateSnapshot,
-  Routes,
-  UrlTree
-} from '@angular/router';
+import { ActivatedRouteSnapshot, Router, RouterModule, RouterStateSnapshot, Routes, UrlTree } from '@angular/router';
 
 import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
 import { Authority } from '@shared/models/authority.enum';
@@ -44,7 +35,7 @@ import { MODULES_MAP } from '@shared/public-api';
 import { IModulesMap } from '@modules/common/modules-map.models';
 
 @Injectable()
-export class RuleChainResolver implements Resolve<RuleChain> {
+export class RuleChainResolver  {
 
   constructor(private ruleChainService: RuleChainService) {
   }
@@ -56,7 +47,7 @@ export class RuleChainResolver implements Resolve<RuleChain> {
 }
 
 @Injectable()
-export class RuleChainMetaDataResolver implements Resolve<RuleChainMetaData> {
+export class RuleChainMetaDataResolver  {
 
   constructor(private ruleChainService: RuleChainService) {
   }
@@ -68,7 +59,7 @@ export class RuleChainMetaDataResolver implements Resolve<RuleChainMetaData> {
 }
 
 @Injectable()
-export class RuleNodeComponentsResolver implements Resolve<Array<RuleNodeComponentDescriptor>> {
+export class RuleNodeComponentsResolver  {
 
   constructor(private ruleChainService: RuleChainService,
               @Optional() @Inject(MODULES_MAP) private modulesMap: IModulesMap) {
@@ -80,7 +71,7 @@ export class RuleNodeComponentsResolver implements Resolve<Array<RuleNodeCompone
 }
 
 @Injectable()
-export class TooltipsterResolver implements Resolve<any> {
+export class TooltipsterResolver  {
 
   constructor() {
   }
@@ -91,7 +82,7 @@ export class TooltipsterResolver implements Resolve<any> {
 }
 
 @Injectable()
-export class RuleChainImportGuard implements CanActivate {
+export class RuleChainImportGuard  {
 
   constructor(private itembuffer: ItemBufferService,
               private router: Router) {
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
index 4dcfd8967a..167374ed11 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.html
@@ -19,63 +19,63 @@
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'rulechain.open-rulechain' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'rulechain.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setRoot')"
-          [fxShow]="!isEdit && ((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
+          [class.!hidden]="isEdit || !((!entity?.root && ruleChainScope === 'tenant') || (!isEdgeRootRuleChain() && ruleChainScope === 'edge'))">
     {{'rulechain.set-root' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setEdgeTemplateRoot')"
-          [fxShow]="!isEdit && !entity?.root && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || entity?.root || ruleChainScope !== 'edges'">
     {{'rulechain.set-edge-template-root-rulechain' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'setAutoAssignToEdge')"
-          [fxShow]="!isEdit && isNotAutoAssignToEdgeRuleChain() && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || !isNotAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.set-auto-assign-to-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unsetAutoAssignToEdge')"
-          [fxShow]="!isEdit && isAutoAssignToEdgeRuleChain() && ruleChainScope === 'edges'">
+          [class.!hidden]="isEdit || !isAutoAssignToEdgeRuleChain() || ruleChainScope !== 'edges'">
     {{'rulechain.unset-auto-assign-to-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'unassignFromEdge')"
-          [fxShow]="!isEdit && !isEdgeRootRuleChain() && ruleChainScope === 'edge'">
+          [class.!hidden]="isEdit || isEdgeRootRuleChain() || ruleChainScope !== 'edges'">
     {{'edge.unassign-from-edge' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit && ruleChainScope !== 'edge'">
+          [class.!hidden]="hideDelete() || isEdit || ruleChainScope === 'edge'">
     {{'rulechain.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div class="flex flex-row">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onRuleChainIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>rulechain.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -88,7 +88,7 @@
           {{ 'rulechain.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <mat-checkbox fxFlex formControlName="debugMode" style="padding-bottom: 16px;">
+      <mat-checkbox class="flex-1" formControlName="debugMode" style="padding-bottom: 16px;">
         {{ 'rulechain.debug-mode' | translate }}
       </mat-checkbox>
       <div formGroupName="additionalInfo">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
index be05b32ac5..c2065472ba 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -53,7 +53,7 @@ import { PageData } from '@shared/models/page/page-data';
 import { HomeDialogsService } from '@home/dialogs/home-dialogs.service';
 
 @Injectable()
-export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<RuleChain>> {
+export class RuleChainsTableConfigResolver  {
 
   private readonly config: EntityTableConfig<RuleChain> = new EntityTableConfig<RuleChain>();
   private edge: Edge;
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
index e03c5469dd..8ca8f4eece 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.html
@@ -22,11 +22,11 @@
    (mouseleave)="userNodeCallbacks.mouseLeave($event, node)">
   <div class="fc-node-overlay"></div>
   <div class="tb-rule-node {{node.nodeClass}}"
-       [ngClass]="{'tb-rule-node-highlighted' : node.highlighted,
-                   'tb-rule-node-invalid': node.error }">
-    <mat-icon *ngIf="!iconUrl" fxFlex="15">{{node.icon}}</mat-icon>
-    <img *ngIf="iconUrl" fxFlex="15" [src]="iconUrl"/>
-    <div fxLayout="column" fxFlex="85" fxLayoutAlign="center">
+       [class.tb-rule-node-highlighted]="node.highlighted"
+       [class.tb-rule-node-invalid]="node.error">
+    <mat-icon *ngIf="!iconUrl" class="max-w-15% flex-full">{{node.icon}}</mat-icon>
+    <img *ngIf="iconUrl" class="max-w-15% flex-full" [src]="iconUrl"/>
+    <div class="flex max-w-85% flex-full flex-col items-stretch justify-center">
       <span class="tb-node-type">{{ node.component.name }}</span>
       <span class="tb-node-title" *ngIf="node.name">{{ node.name }}</span>
     </div>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
index 96d8788a38..9494fb8092 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behavior-panel.component.html
@@ -54,7 +54,7 @@
     </div>
     <div *ngIf="[ScadaSymbolBehaviorType.value, ScadaSymbolBehaviorType.action].includes(behaviorFormGroup.get('type').value)" class="tb-form-row">
       <div class="fixed-title-width" translate>scada.behavior.value-type</div>
-      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex tb-value-type">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-value-type flex">
         <mat-select formControlName="valueType">
           <mat-select-trigger *ngIf="behaviorFormGroup.get('valueType').value">
             <div class="tb-value-type-row">
@@ -92,7 +92,7 @@
       </ng-container>
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-get-value-action-settings fxFlex
+        <tb-get-value-action-settings class="flex-1"
                                       panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                       [valueType]="behaviorFormGroup.get('valueType').value"
                                       [trueLabel]="behaviorFormGroup.get('trueLabel').value | customTranslate"
@@ -107,7 +107,7 @@
     <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.action">
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-set-value-action-settings fxFlex
+        <tb-set-value-action-settings class="flex-1"
                                       panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                       [valueType]="behaviorFormGroup.get('valueType').value"
                                       [aliasController]="aliasController"
@@ -119,7 +119,7 @@
     <ng-container *ngIf="behaviorFormGroup.get('type').value === ScadaSymbolBehaviorType.widgetAction">
       <div class="tb-form-row">
         <div class="fixed-title-width" translate>scada.behavior.default-settings</div>
-        <tb-widget-action-settings fxFlex
+        <tb-widget-action-settings class="flex-1"
                                    panelTitle="{{ behaviorFormGroup.get('name').value | customTranslate }}"
                                    [callbacks]="callbacks"
                                    [widgetType]="widgetType.rpc"
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
index 7cefc6af63..d566336057 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-behaviors.component.html
@@ -30,7 +30,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            [class.tb-draggable-form-table-row]="!disabled"
            *ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;">
-        <tb-scada-symbol-metadata-behavior-row fxFlex
+        <tb-scada-symbol-metadata-behavior-row class="flex-1"
           [index]="$index"
           [formControl]="behaviorControl"
           [aliasController]="aliasController"
@@ -42,7 +42,7 @@
                   *ngIf="!disabled"
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -60,6 +60,5 @@
 </div>
 
 <ng-template #noBehaviors>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.behavior.no-behaviors' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.behavior.no-behaviors' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
index 32bb345ecf..c8f900ce54 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.html
@@ -24,7 +24,7 @@
     </div>
     <div *ngIf="tagsFormArray().controls.length; else noTags" class="tb-form-table-body">
       <div *ngFor="let tagControl of tagsFormArray().controls; trackBy: trackByTag; let $index = index; let $last = last">
-        <tb-scada-symbol-metadata-tag fxFlex
+        <tb-scada-symbol-metadata-tag class="flex-1"
                                       [elementStateRenderFunctionCompleter]="elementStateRenderFunctionCompleter"
                                       [clickActionFunctionCompleter]="clickActionFunctionCompleter"
                                       [formControl]="tagControl">
@@ -35,6 +35,5 @@
   </div>
 </div>
 <ng-template #noTags>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.tag.no-tags' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.tag.no-tags' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
index 67c77f7f2a..c505546286 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
@@ -25,17 +25,17 @@
     </div>
   </div>
   <div [formGroup]="metadataFormGroup" class="tb-scada-symbol-metadata-content">
-    <div [fxShow]="selectedOption === 'general'" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'general'" class="mat-content">
       <div class="tb-form-panel">
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.title</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <input matInput required formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
           </mat-form-field>
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.description</div>
-          <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+          <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <textarea matInput
                       formControlName="description"
                       rows="2"></textarea>
@@ -43,8 +43,8 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.search-tags</div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <tb-string-items-list fxFlex
+          <div class="flex flex-1 flex-row items-center justify-start">
+            <tb-string-items-list class="flex-1"
                                   style="display: flex;"
                                   formControlName="searchTags"
                                   appearance="outline"
@@ -54,7 +54,7 @@
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width" translate>scada.widget-size</div>
-          <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="flex flex-1 flex-row items-center justify-end gap-2">
             <div class="tb-small-label">{{ 'scada.cols' | translate }}</div>
             <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="widgetSizeX" required
@@ -71,7 +71,7 @@
         </div>
         <div class="tb-form-panel stroked">
           <mat-expansion-panel class="tb-settings" expanded>
-            <mat-expansion-panel-header fxLayout="row wrap">
+            <mat-expansion-panel-header class="flex flex-row flex-wrap">
               <mat-panel-title>
                 {{ 'scada.state-render-function' | translate }}
               </mat-panel-title>
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-    <div [fxShow]="selectedOption === 'tags'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'tags'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-tags
         #symbolMetadataTags
         [tags]="tags"
@@ -98,14 +98,14 @@
         formControlName="tags">
       </tb-scada-symbol-metadata-tags>
     </div>
-    <div [fxShow]="selectedOption === 'behavior'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'behavior'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-behaviors
         formControlName="behavior"
         [aliasController]="aliasController"
         [callbacks]="callbacks">
       </tb-scada-symbol-metadata-behaviors>
     </div>
-    <div [fxShow]="selectedOption === 'properties'" class="mat-content overflow-hidden">
+    <div [class.!hidden]="selectedOption !== 'properties'" class="mat-content overflow-hidden">
       <tb-scada-symbol-metadata-properties
         formControlName="properties">
       </tb-scada-symbol-metadata-properties>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
index 1b553a5130..684609937e 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-properties.component.html
@@ -30,7 +30,7 @@
       <div cdkDrag [cdkDragDisabled]="!dragEnabled"
            [class.tb-draggable-form-table-row]="!disabled"
            *ngFor="let propertyControl of propertiesFormArray().controls; trackBy: trackByProperty; let $index = index;">
-        <tb-scada-symbol-metadata-property-row fxFlex
+        <tb-scada-symbol-metadata-property-row class="flex-1"
                                                [index]="$index"
                                                [booleanPropertyIds]="booleanPropertyIds"
                                                [formControl]="propertyControl"
@@ -41,7 +41,7 @@
                   *ngIf="!disabled"
                   type="button"
                   cdkDragHandle
-                  [ngClass]="{'tb-hidden': !dragEnabled}"
+                  [class.tb-hidden]="!dragEnabled"
                   matTooltip="{{ 'action.drag' | translate }}"
                   matTooltipPosition="above">
             <mat-icon>drag_indicator</mat-icon>
@@ -59,6 +59,5 @@
 </div>
 
 <ng-template #noProperties>
-  <span fxLayoutAlign="center center"
-        class="tb-prompt">{{ 'scada.property.no-properties' | translate }}</span>
+  <span class="tb-prompt flex items-center justify-center">{{ 'scada.property.no-properties' | translate }}</span>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
index 6090a9504e..94efffca85 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-property-panel.component.html
@@ -83,7 +83,7 @@
     </div>
     <div *ngIf="propertyFormGroup.get('type').value === ScadaSymbolPropertyType.number" class="tb-form-row space-between">
       <div translate>scada.property.number-settings</div>
-      <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="flex flex-1 flex-row items-center justify-end gap-2">
         <div class="tb-small-label" translate>scada.property.min</div>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="min"
@@ -110,7 +110,7 @@
     </div>
     <div class="tb-form-panel stroked">
       <mat-expansion-panel class="tb-settings">
-        <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-expansion-panel-header class="flex flex-row flex-wrap">
           <mat-panel-title>
             {{ 'scada.property.advanced-ui-settings' | translate }}
           </mat-panel-title>
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
index 96bd1d7a8a..8f75949a47 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-scada-symbol-editor-shape" [fxShow]="editorMode === 'svg'" #scadaSymbolShape></div>
-<div class="tb-scada-symbol-editor-tooltips" [fxShow]="editorMode === 'svg'" #tooltipsContainer>
+<div class="tb-scada-symbol-editor-shape" [class.!hidden]="editorMode !== 'svg'" #scadaSymbolShape></div>
+<div class="tb-scada-symbol-editor-tooltips" [class.!hidden]="editorMode !== 'svg'" #tooltipsContainer>
   <tb-anchor #tooltipsContainerComponent></tb-anchor>
 </div>
-<div class="tb-scada-symbol-editor-svg-xml" [fxShow]="editorMode === 'xml'">
+<div class="tb-scada-symbol-editor-svg-xml" [class.!hidden]="editorMode !== 'xml'">
   <tb-svg-xml [formControl]="svgContentFormControl"
               fillHeight
               noLabel>
@@ -27,7 +27,7 @@
 </div>
 <div class="tb-scada-symbol-editor-buttons">
   <div class="tb-scada-symbol-editor-view-buttons">
-    <div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [fxShow]="editorMode === 'svg'">
+    <div class="tb-scada-symbol-editor-zoom-buttons tb-primary-fill" [class.!hidden]="editorMode !== 'svg'">
       <button mat-icon-button
               [disabled]="zoomInDisabled"
               (click)="zoomIn()"
@@ -43,7 +43,7 @@
         <mat-icon>remove</mat-icon>
       </button>
     </div>
-    <div *ngIf="displayShowHidden" [fxShow]="editorMode === 'svg'" class="tb-primary-fill">
+    <div *ngIf="displayShowHidden" [class.!hidden]="editorMode !== 'svg'" class="tb-primary-fill">
       <button mat-icon-button
               (click)="toggleShowHidden()"
               matTooltip="{{ (showHiddenElements ? 'scada.hide-hidden-elements' : 'scada.show-hidden-elements') | translate }}"
@@ -70,7 +70,7 @@
       </button>
     </div>
     <tb-toggle-select appearance="fill"
-                      [disabled]="!svgContentFormControl.valid"
+                      [disabled]="!readonly && !svgContentFormControl.valid"
                       fillHeight
                       extraPadding
                       primaryBackground
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
index 8d0e3c86bd..e13cc953df 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
@@ -110,6 +110,11 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI
   }
 
   ngOnInit(): void {
+    if (this.readonly) {
+      this.svgContentFormControl.disable({emitEvent: false});
+    } else {
+      this.svgContentFormControl.enable({emitEvent: false});
+    }
     this.svgContentFormControl.valueChanges.subscribe((svgContent) => {
       if (this.svgContent !== svgContent) {
         this.svgContent = svgContent;
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
index 6110f4afc0..809b85206f 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div class="tb-scada-symbol-editor mat-content" fxLayout="column">
-  <section class="tb-scada-symbol-editor-container" fxFlex fxLayout="column">
-    <div class="tb-scada-symbol-editor-layout" fxFlex fxLayout="row">
-      <mat-drawer-container style="width: 100%; height: 100%;">
+<div class="tb-scada-symbol-editor mat-content flex flex-col">
+  <section class="tb-scada-symbol-editor-container flex flex-1 flex-col">
+    <div class="tb-scada-symbol-editor-layout flex flex-1 flex-row">
+      <mat-drawer-container class="size-full">
         <mat-drawer class="tb-scada-symbol-editor-details-drawer mat-elevation-z4"
                     disableClose="true"
                     mode="side"
                     opened
                     position="end">
-          <tb-details-panel fxFlex
+          <tb-details-panel class="flex-1"
                             [isReadOnly]="true"
                             [showCloseDetails]="false"
                             headerHeightPx="64"
                             headerTitle="{{symbolData?.imageResource?.title}}">
-            <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+            <div class="details-buttons flex flex-row items-center justify-start gap-4">
               <div tb-help="scadaSymbolDev"></div>
               <button mat-stroked-button
                       [disabled]="scadaSymbolFormGroup.invalid"
@@ -77,7 +77,7 @@
                 </div>
               </div>
             </div>
-            <div [fxShow]="!previewMode" [formGroup]="scadaSymbolFormGroup">
+            <div [class.!hidden]="previewMode" [formGroup]="scadaSymbolFormGroup">
               <tb-scada-symbol-metadata
                 #symbolMetadata
                 [tags]="tags"
@@ -85,7 +85,7 @@
                 [callbacks]="widgetActionCallbacks"
                 formControlName="metadata">
                 <div class="tb-scada-symbol-metadata-header-prefix">
-                  <button fxHide.gt-sm
+                  <button class="gt-sm:!hidden"
                           [disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
                           mat-button color="primary"
                           (click)="enterPreviewMode()">
@@ -93,15 +93,15 @@
                     {{ 'scada.preview' | translate }}
                   </button>
                 </div>
-                <div fxFlex.lt-md class="tb-scada-symbol-metadata-header-suffix" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="12px">
-                  <button fxHide.lt-md
+                <div class="tb-scada-symbol-metadata-header-suffix flex flex-row items-center justify-end gap-3 lt-md:flex-1">
+                  <button class="lt-md:!hidden"
                           [disabled]="scadaSymbolFormGroup.invalid || !symbolEditorValid"
                           mat-button color="primary"
                           (click)="enterPreviewMode()">
                     <mat-icon>visibility</mat-icon>
                     {{ 'scada.preview' | translate }}
                   </button>
-                  <div *ngIf="!readonly" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+                  <div *ngIf="!readonly" class="flex flex-row items-center justify-start gap-3">
                     <button [disabled]="!(scadaSymbolFormGroup.dirty || symbolEditorDirty)"
                             mat-stroked-button color="primary"
                             (click)="onRevertScadaSymbolConfig()">
diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts
index 755bc99bbc..d72d95f367 100644
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts
@@ -78,7 +78,6 @@ import {
   SaveWidgetTypeAsDialogResult
 } from '@home/pages/widget/save-widget-type-as-dialog.component';
 import { WidgetService } from '@core/http/widget.service';
-import { de } from 'date-fns/locale';
 
 @Component({
   selector: 'tb-scada-symbol',
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index 8578dba02b..0a28ba7ae7 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.get-backup-code-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -29,12 +29,12 @@
 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
 <div mat-dialog-content tb-toast class="backup-code">
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-description</p>
-  <div class="container" fxLayout="row wrap">
-    <div *ngFor="let code of backupCode?.codes; even as $even" fxFlex="50" class="code" [ngClass]="{'even': $even}">
+  <div class="container flex flex-row flex-wrap">
+    <div *ngFor="let code of backupCode?.codes; even as $even" class="code max-w-50% flex-full" [class.even]="$even">
       {{ code }}
     </div>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center start"  fxLayoutGap="16px" class="action-buttons">
+  <div class="action-buttons flex flex-row items-center justify-start gap-4">
     <button type="button" mat-stroked-button color="primary" (click)="downloadFile()">
       {{ 'security.2fa.dialog.download-txt' | translate }}
     </button>
@@ -43,7 +43,7 @@
     </button>
   </div>
   <p class="mat-body-2 description" translate>security.2fa.dialog.backup-code-warn</p>
-  <div fxLayout="row" fxLayoutAlign="end start">
+  <div class="flex flex-row items-start justify-end">
     <button type="button" mat-raised-button color="primary" (click)="closeDialog()">
       {{ 'action.done' | translate }}
     </button>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
index 761ba9ce22..ba85e75e0c 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
@@ -31,7 +31,7 @@ import { mergeMap, tap } from 'rxjs/operators';
 import { ImportExportService } from '@shared/import-export/import-export.service';
 import { deepClone } from '@core/utils';
 
-import printTemplate from '!raw-loader!./backup-code-print-template.raw';
+import printTemplate from './backup-code-print-template.raw';
 
 @Component({
   selector: 'tb-backup-code-auth-dialog',
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index a660a7fb86..dbcc11a74a 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-email-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -36,8 +36,8 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.email-step-label' | translate }}</ng-template>
       <form [formGroup]="emailConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.email-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block input-container">
+        <div class="flex flex-row items-center justify-between gap-2">
+          <mat-form-field class="mat-block input-container flex-1">
             <input matInput formControlName="email"
                    type="email" required
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
@@ -63,8 +63,8 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: emailConfigForm.get('email').value} }}
         </p>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start end">
-          <mat-form-field fxFlex class="mat-block code-container full-width-xs">
+        <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
@@ -74,7 +74,7 @@
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayoutGap="8px">
+          <div class="flex gap-2">
             <button mat-button
                     matStepperPrevious
                     [disabled]="(isLoading$ | async)">
@@ -95,7 +95,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-email</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index a9429f8cb8..0b32ebc947 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-sms-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -36,8 +36,8 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template>
       <form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="15px">
-          <tb-phone-input fxFlex
+        <div class="flex flex-row items-center justify-between gap-3.75">
+          <tb-phone-input class="flex-1"
                           formControlName="phone"
                           [floatLabel]="'never'"
                           placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}">
@@ -57,8 +57,8 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}
         </p>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start end">
-          <mat-form-field fxFlex class="mat-block code-container full-width-xs">
+        <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
@@ -68,7 +68,7 @@
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
             </mat-error>
           </mat-form-field>
-          <div fxLayoutGap="8px">
+          <div class="flex gap-2">
             <button mat-button
                     matStepperPrevious
                     [disabled]="(isLoading$ | async)">
@@ -89,7 +89,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-sms</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 7818674a25..98273f4720 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>security.2fa.dialog.enable-totp-title</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="closeDialog()"
           type="button">
@@ -37,7 +37,7 @@
       <div>
         <p class="mat-body-2" translate>security.2fa.dialog.totp-step-description-open</p>
         <p class="mat-body-2" translate>security.2fa.dialog.totp-step-description-install</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
@@ -49,11 +49,11 @@
     </mat-step>
     <mat-step [stepControl]="totpConfigForm">
       <ng-template matStepLabel>{{ 'security.2fa.dialog.verification-step-label' | translate }}</ng-template>
-      <form [formGroup]="totpConfigForm" fxLayoutAlign="start center" fxLayout="column" (ngSubmit)="onSaveConfig()">
+      <form [formGroup]="totpConfigForm" class="flex flex-col items-center justify-start" (ngSubmit)="onSaveConfig()">
         <p class="mat-body qr-code-description" translate>security.2fa.dialog.scan-qr-code</p>
-        <canvas fxFlex #canvas [ngStyle]="{display: totpAuthURL ? 'block' : 'none'}"></canvas>
+        <canvas class="flex-1" #canvas [style.display]="totpAuthURL ? 'block' : 'none'"></canvas>
         <p class="mat-body qr-code-description" style="margin-top: 30px;" translate>security.2fa.dialog.enter-verification-code</p>
-        <mat-form-field fxFlex class="mat-block code-container">
+        <mat-form-field class="mat-block code-container flex-1">
           <input matInput formControlName="verificationCode"
                  maxlength="6" type="text" required
                  inputmode="numeric" pattern="[0-9]*"
@@ -64,7 +64,7 @@
           </mat-error>
         </mat-form-field>
       </form>
-      <div fxLayout="row" fxLayoutAlign="end center">
+      <div class="flex flex-row items-center justify-end">
         <button mat-raised-button
                 type="button"
                 color="primary"
@@ -79,7 +79,7 @@
       <div>
         <h3 class="result-title" translate>security.2fa.dialog.success</h3>
         <p class="mat-body result-description" translate>security.2fa.dialog.activation-step-description-totp</p>
-        <div fxLayout="row" fxLayoutAlign="end center">
+        <div class="flex flex-row items-center justify-end">
           <button mat-raised-button
                   type="button"
                   color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.ts
index f88d799f31..255c960dc8 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.ts
@@ -28,6 +28,7 @@ import {
   TwoFactorAuthProviderType
 } from '@shared/models/two-factor-auth.models';
 import { MatStepper } from '@angular/material/stepper';
+import { unwrapModule } from '@core/utils';
 
 @Component({
   selector: 'tb-totp-auth-dialog',
@@ -56,7 +57,7 @@ export class TotpAuthDialogComponent extends DialogComponent<TotpAuthDialogCompo
       this.totpAuthURL = this.authAccountConfig.authUrl;
       this.authAccountConfig.useByDefault = true;
       import('qrcode').then((QRCode) => {
-        QRCode.toCanvas(this.canvasRef.nativeElement, this.totpAuthURL);
+        unwrapModule(QRCode).toCanvas(this.canvasRef.nativeElement, this.totpAuthURL);
         this.canvasRef.nativeElement.style.width = 'auto';
         this.canvasRef.nativeElement.style.height = 'auto';
       });
diff --git a/ui-ngx/src/app/modules/home/pages/security/security-routing.module.ts b/ui-ngx/src/app/modules/home/pages/security/security-routing.module.ts
index 60971a4990..da0a04b2e9 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/security/security-routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SecurityComponent } from './security.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
@@ -30,7 +30,7 @@ import { TwoFactorAuthProviderType } from '@shared/models/two-factor-auth.models
 import { TwoFactorAuthenticationService } from '@core/http/two-factor-authentication.service';
 
 @Injectable()
-export class UserProfileResolver implements Resolve<User> {
+export class UserProfileResolver  {
 
   constructor(private store: Store<AppState>,
               private userService: UserService) {
@@ -43,7 +43,7 @@ export class UserProfileResolver implements Resolve<User> {
 }
 
 @Injectable()
-export class UserTwoFAProvidersResolver implements Resolve<Array<TwoFactorAuthProviderType>> {
+export class UserTwoFAProvidersResolver  {
 
   constructor(private twoFactorAuthService: TwoFactorAuthenticationService) {
   }
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index d512090617..35dc557552 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="profile-container" fxLayout="column" fxLayoutGap="8px">
-  <mat-card appearance="outlined" class="profile-card" fxLayout="column">
+<div class="profile-container flex flex-col gap-2">
+  <mat-card appearance="outlined" class="profile-card flex flex-col">
     <mat-card-title style="margin-bottom: 8px;">
       <span class="mat-headline-5 card-title" translate>profile.jwt-token</span>
     </mat-card-title>
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="flex flex-row items-center justify-between">
       <div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div>
       <button mat-raised-button
               color="primary"
@@ -30,16 +30,16 @@
       </button>
     </div>
   </mat-card>
-  <mat-card appearance="outlined" class="profile-card" fxLayout="column">
+  <mat-card appearance="outlined" class="profile-card flex flex-col">
     <div class="change-password" tb-toast toastTarget="changePassword">
       <form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)">
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px" fxLayoutGap.xs="0">
-          <div fxFlex="290px" fxFlex.sm="250px"  fxFlex.xs="100">
+        <div class="flex flex-row gap-6.25 xs:flex-col xs:gap-0">
+          <div class="min-w-72.5 max-w-72.5 flex-1 basis-72.5 xs:min-w-0 xs:max-w-full xs:basis-full sm:min-w-62.5 sm:max-w-62.5 sm:basis-62.5">
             <h3 class="card-title" translate>profile.change-password</h3>
             <mat-form-field class="mat-block same-color" appearance="fill" color="primary">
               <mat-label translate>profile.current-password</mat-label>
               <input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/>
-              <tb-toggle-password [fxShow]="changePassword.get('currentPassword').dirty || changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('currentPassword').dirty && !changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password>
               <mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')">
                 {{ 'security.password-requirement.incorrect-password-try-again' | translate }}
               </mat-error>
@@ -47,7 +47,7 @@
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic">
               <mat-label translate>login.new-password</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/>
-              <tb-toggle-password [fxShow]="changePassword.get('newPassword').dirty || changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword').dirty && !changePassword.get('newPassword').touched" matSuffix></tb-toggle-password>
               <mat-hint></mat-hint>
               <mat-error *ngIf="changePassword.get('newPassword').errors
                               && !changePassword.get('newPassword').hasError('alreadyUsed')
@@ -65,20 +65,20 @@
                 {{ 'security.password-requirement.password-should-not-contain-spaces' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxFlex fxHide fxShow.xs fxLayoutAlign="start center">
+            <div class="flex flex-1 items-center justify-start gt-xs:!hidden">
               <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
             </div>
             <mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary">
               <mat-label translate>login.new-password-again</mat-label>
               <input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/>
-              <tb-toggle-password [fxShow]="changePassword.get('newPassword2').dirty || changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
+              <tb-toggle-password [class.!hidden]="!changePassword.get('newPassword2').dirty && !changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password>
               <mat-error *ngIf="changePassword.get('newPassword2').hasError('differencePassword')">
                 {{ 'security.password-requirement.new-passwords-not-match' | translate }}
               </mat-error>
             </mat-form-field>
           </div>
           <mat-divider [vertical]="true"></mat-divider>
-          <div fxFlex fxHide.xs fxLayoutAlign="start start">
+          <div class="flex flex-1 items-start justify-start xs:!hidden">
             <ng-container *ngTemplateOutlet="passwordRequirements"></ng-container>
           </div>
         </div>
@@ -125,7 +125,7 @@
             </div>
           </div>
         </ng-template>
-        <div fxLayout="row" fxLayoutGap="8px" style="margin-top: 18px;" [fxShow]="changePassword.dirty || changePassword.touched">
+        <div class="flex flex-row gap-2" style="margin-top: 18px;" [class.!hidden]="!changePassword.dirty && !changePassword.touched">
           <button mat-button color="primary"
                   type="button"
                   (click)="discardChanges(changePasswordForm, $event)"
@@ -153,7 +153,7 @@
       <ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider">
         <div class="provider">
           <h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4>
-          <div fxLayout="row" fxLayoutAlign="space-between start">
+          <div class="flex flex-row items-start justify-between">
             <div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo">
               {{ providersData.get(provider).description | translate }}
             </div>
diff --git a/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts
index 48a0d8719a..bd296fbe18 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { TenantProfile } from '@shared/models/tenant.model';
 import {
   checkBoxCell,
@@ -35,7 +35,7 @@ import { DialogService } from '@core/services/dialog.service';
 import { ImportExportService } from '@shared/import-export/import-export.service';
 
 @Injectable()
-export class TenantProfilesTableConfigResolver implements Resolve<EntityTableConfig<TenantProfile>> {
+export class TenantProfilesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<TenantProfile> = new EntityTableConfig<TenantProfile>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
index b2d26a7129..32533e98da 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageTenantAdmins')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'tenant.manage-tenant-admins' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'tenant.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onTenantIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>tenant.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -65,22 +65,22 @@
         formControlName="tenantProfileId"
         (tenantProfileUpdated)="onTenantProfileUpdated()">
       </tb-tenant-profile-autocomplete>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>tenant.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="'tenant'"
               [tenantId]="entity?.id.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
index 15fd900d5e..1fe5bf7dbd 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { TenantInfo } from '@shared/models/tenant.model';
 import {
@@ -34,7 +34,7 @@ import { TenantTabsComponent } from '@home/pages/tenant/tenant-tabs.component';
 import { mergeMap } from 'rxjs/operators';
 
 @Injectable()
-export class TenantsTableConfigResolver implements Resolve<EntityTableConfig<TenantInfo>> {
+export class TenantsTableConfigResolver  {
 
   private readonly config: EntityTableConfig<TenantInfo> = new EntityTableConfig<TenantInfo>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index d03b50418d..2b41eff575 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -18,7 +18,7 @@
 <form style="min-width: 400px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -29,10 +29,10 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
+    <div class="mat-content flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink, activationLinkTtl: activationLinkTtl}"></span>
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
+      <div class="flex flex-row items-center justify-start">
+        <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
         <button mat-icon-button
                 color="primary"
                 ngxClipboard
@@ -45,7 +45,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 6a4283bc44..4012b13c82 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="add()" style="min-width: 450px;">
   <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'users'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -40,7 +40,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index bbb999d3d7..933e244290 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -15,63 +15,63 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"
-          [fxShow]="!isEdit && isUserCredentialPresent() && isUserCredentialsEnabled()">
+          [class.!hidden]="isEdit || !isUserCredentialPresent() || !isUserCredentialsEnabled()">
     {{'user.disable-account' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'enableAccount')"
-          [fxShow]="!isEdit && isUserCredentialPresent() && !isUserCredentialsEnabled()">
+          [class.!hidden]="isEdit || !isUserCredentialPresent() || isUserCredentialsEnabled()">
     {{'user.enable-account' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'displayActivationLink')"
-          [fxShow]="!isEdit && !isUserCredentialPresent()">
+          [class.!hidden]="isEdit || isUserCredentialPresent()">
     {{'user.display-activation-link' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'resendActivation')"
-          [fxShow]="!isEdit && !isUserCredentialPresent()">
+          [class.!hidden]="isEdit || isUserCredentialPresent()">
     {{'user.resend-activation' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'loginAsUser')"
           *ngIf="loginAsUserEnabled$ | async"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ (entity?.authority === authority.TENANT_ADMIN ? 'user.login-as-tenant-admin' : 'user.login-as-customer-user') | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'user.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onUserIdCopied($event)"
             [cbContent]="entity?.id?.id"
             [disabled]="(isLoading$ | async)"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>user.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -97,15 +97,15 @@
                       [enableFlagsSelect]="true"
                       formControlName="phone">
       </tb-phone-input>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" class="flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label translate>user.description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
-        <section class="tb-default-dashboard" fxFlex fxLayout="column" *ngIf="entity?.id">
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+        <section class="tb-default-dashboard flex flex-1 flex-col" *ngIf="entity?.id">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'user.default-dashboard' | translate }}"
               formControlName="defaultDashboardId"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -113,13 +113,13 @@
               [customerId]="entity?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="defaultDashboardFullscreen">
+            <mat-checkbox class="flex-1" formControlName="defaultDashboardFullscreen">
               {{ 'user.always-fullscreen' | translate }}
             </mat-checkbox>
           </section>
-          <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="flex flex-1 flex-col gt-sm:flex-row">
             <tb-dashboard-autocomplete
-              fxFlex
+              class="flex-1"
               label="{{ 'dashboard.home-dashboard' | translate }}"
               formControlName="homeDashboardId"
               [dashboardsScope]="entity?.authority === authority.TENANT_ADMIN ? 'tenant' : 'customer'"
@@ -127,7 +127,7 @@
               [customerId]="entity?.customerId?.id"
               [selectFirstDashboard]="false"
             ></tb-dashboard-autocomplete>
-            <mat-checkbox fxFlex formControlName="homeDashboardHideToolbar">
+            <mat-checkbox class="flex-1" formControlName="homeDashboardHideToolbar">
               {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
             </mat-checkbox>
           </section>
diff --git a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
index a8f7df963f..24d5eea8f7 100644
--- a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import {
   DateEntityTableColumn,
   EntityTableColumn,
@@ -57,7 +57,7 @@ export interface UsersTableRouteData {
 }
 
 @Injectable()
-export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>> {
+export class UsersTableConfigResolver  {
 
   private readonly config: EntityTableConfig<User> = new EntityTableConfig<User>();
 
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index 804730dbfe..35260628ea 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="min-width: 360px">
   <mat-toolbar color="primary">
     <h2 translate>{{ dialogTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -43,7 +43,7 @@
       bundlesScope="{{bundlesScope}}">
     </tb-widgets-bundle-select>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
index 116829cffd..039b5acdf4 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
@@ -18,7 +18,7 @@
 <form style="width: 800px;">
   <mat-toolbar color="primary">
     <h2 translate>widget.select-widget-type</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -30,7 +30,7 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="(isLoading$ | async)">
-      <div fxLayout="column" fxLayoutGap="16px" fxLayout.gt-sm="row" fxLayoutAlign="center center">
+      <div class="flex flex-col items-center justify-center gap-4 gt-sm:flex-row">
         <button *ngFor="let type of allWidgetTypes;" class="tb-card-button" mat-raised-button color="primary"
                 type="button"
                 (click)="typeSelected(widgetTypes[type])">
@@ -42,7 +42,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
index 19f306fad8..a4c8e4a193 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="column">
-  <div fxFlex fxLayout="column" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
+<div class="flex flex-1 flex-col">
+  <div class="flex flex-1 flex-col" tb-fullscreen [fullscreen]="fullscreen" [tb-hotkeys]="hotKeys" [cheatSheet]="cheatSheetComponent">
     <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
-    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3" fxLayoutGap="16px" fxLayoutGap.lt-xl="8px">
+    <mat-toolbar class="mat-elevation-z1 tb-edit-toolbar mat-hue-3 gap-4 lt-xl:gap-2">
       <mat-form-field class="tb-widget-title tb-appearance-transparent">
         <input [disabled]="isReadOnly" matInput required maxlength="255"
                [(ngModel)]="widget.widgetName" (ngModelChange)="isDirty = true"
@@ -32,8 +32,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <span fxFlex></span>
-      <button mat-button fxHide.lt-md [disabled]="!iframeWidgetEditModeInited"
+      <span class="flex-1"></span>
+      <button mat-button class="lt-md:!hidden" [disabled]="!iframeWidgetEditModeInited"
               (click)="applyWidgetScript()"
               matTooltip="{{ 'widget.run' | translate }} (CTRL + Return)"
               matTooltipPosition="below">
@@ -41,7 +41,7 @@
         <span translate>action.run</span>
       </button>
       <button mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || undoDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || undoDisabled()"
               (click)="undoWidget()"
               matTooltip="{{ 'widget.undo' | translate }} (CTRL + Q)"
               matTooltipPosition="below">
@@ -49,7 +49,7 @@
         <span translate>action.undo</span>
       </button>
       <button *ngIf="!isReadOnly" mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || saveDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveDisabled()"
               (click)="saveWidget()"
               [tb-circular-progress]="saveWidgetPending"
               matTooltip="{{ 'widget.save' | translate }} (CTRL + S)"
@@ -58,7 +58,7 @@
         <span translate>action.save</span>
       </button>
       <button mat-raised-button
-              fxHide.lt-md [disabled]="(isLoading$ | async) || saveAsDisabled()"
+              class="lt-md:!hidden" [disabled]="(isLoading$ | async) || saveAsDisabled()"
               (click)="saveWidgetAs()"
               [tb-circular-progress]="saveWidgetAsPending"
               matTooltip="{{ 'widget.saveAs' | translate }} (Shift + CTRL + S)"
@@ -67,20 +67,20 @@
         <span translate>action.saveAs</span>
       </button>
       <button mat-button
-              fxHide.lt-lg
+              class="lt-lg:!hidden"
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         <span translate>widget.toggle-fullscreen</span>
       </button>
-      <button mat-icon-button fxHide fxShow.md
+      <button mat-icon-button class="lt-md:!hidden gt-md:!hidden"
               (click)="fullscreen = !fullscreen"
               matTooltip="{{ 'widget.toggle-fullscreen' | translate }} (Shift + CTRL + F)"
               matTooltipPosition="below">
         <mat-icon>{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
       </button>
-      <button mat-icon-button fxHide.gt-sm
+      <button mat-icon-button class="gt-md:!hidden"
               [matMenuTriggerFor]="widgetEditMenu">
         <mat-icon>more_vert</mat-icon>
       </button>
@@ -111,7 +111,7 @@
         </button>
       </mat-menu>
     </mat-toolbar>
-    <div fxFlex style="position: relative;">
+    <div class="flex-1" style="position: relative;">
       <div class="tb-editor tb-absolute-fill">
         <div #topPanel class="tb-split tb-split-vertical">
           <div #topLeftPanel class="tb-split tb-content">
@@ -119,10 +119,9 @@
               <mat-tab label="{{ 'widget.resources' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <div fxFlex fxLayout="row" style="max-height: 40px;"
-                         fxLayoutAlign="start center"
+                    <div class="flex flex-1 flex-row items-center justify-start" style="max-height: 40px;"
                          *ngFor="let resource of widget.resources; let i = index" >
-                      <tb-resource-autocomplete fxFlex class="mat-block resource-field"
+                      <tb-resource-autocomplete class="mat-block resource-field flex-1"
                                                 hideRequiredMarker required
                                                 subscriptSizing="dynamic"
                                                 [allowAutocomplete]="resource.isModule"
@@ -240,7 +239,7 @@
               <mat-tab label="{{ 'widget.widget-settings' | translate }}">
                 <div class="tb-resize-container" style="background-color: #fff;">
                   <div class="mat-padding">
-                    <tb-gallery-image-input fxFlex label="{{'widget.image-preview' | translate}}"
+                    <tb-gallery-image-input class="flex-1" label="{{'widget.image-preview' | translate}}"
                                     [(ngModel)]="widget.image"
                                     (ngModelChange)="isDirty = true" >
                     </tb-gallery-image-input>
@@ -257,7 +256,7 @@
                       [(ngModel)]="widget.tags"
                       (ngModelChange)="isDirty = true">
                     </tb-string-items-list>
-                    <div fxLayout="column" fxLayoutGap="16px" style="padding-bottom: 16px;">
+                    <div class="flex flex-col gap-4" style="padding-bottom: 16px;">
                       <mat-slide-toggle class="mat-block"
                                         [(ngModel)]="widget.scada"
                                         (ngModelChange)="isDirty = true">
@@ -324,7 +323,7 @@
             </div>
           </div>
           <div #framePanel class="tb-split tb-content" style="overflow-y: hidden; position: relative;">
-            <div class="mat-content tb-progress-cover" fxFlex fxLayout="column" fxLayoutAlign="center center"
+            <div class="mat-content tb-progress-cover flex flex-1 flex-col items-center justify-center"
                  *ngIf="!iframeWidgetEditModeInited">
               <mat-spinner diameter="100" mode="indeterminate" color="warn"></mat-spinner>
             </div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
index f5f6f5268f..11b3a58d07 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-type.component.html
@@ -15,33 +15,33 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'edit')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'widget.edit' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'widget.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'widget.delete-widget' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -54,7 +54,7 @@
           {{ 'widget.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                       label="{{'widget.image-preview' | translate}}"
                       formControlName="image">
       </tb-gallery-image-input>
@@ -67,7 +67,7 @@
         label="{{ 'widget.tags' | translate }}"
         formControlName="tags">
       </tb-string-items-list>
-      <div fxLayout="column" fxLayoutGap="16px">
+      <div class="flex flex-col gap-4">
         <mat-slide-toggle formControlName="scada">
           {{ 'widget.scada' | translate }}
         </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
index 0ec7635c9d..eac0817875 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
@@ -48,7 +48,7 @@ import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widge
 import { MatDialog } from '@angular/material/dialog';
 
 @Injectable()
-export class WidgetTypesTableConfigResolver implements Resolve<EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails>> {
+export class WidgetTypesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails> =
     new EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails>();
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
index 592be51486..355c08ce5a 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 650px;">
   <mat-toolbar color="primary">
     <h2 translate>widgets-bundle.add</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -36,7 +36,7 @@
       [standalone]="true">
     </tb-widgets-bundle>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
index 821eebfe92..3667f8962e 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
@@ -26,7 +26,7 @@
           <mat-icon>arrow_back</mat-icon>
         </button>
         <span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 *ngIf="!isReadOnly"
                 matTooltip="{{ 'widget.add-new-widget' | translate }}"
@@ -90,7 +90,7 @@
           <mat-icon>delete</mat-icon>
         </button>
         <button cdkDragHandle *ngIf="editMode"
-                [fxShow]="widgets?.length > 1"
+                [class.!hidden]="!widgets || widgets.length <= 1"
                 mat-icon-button
                 matTooltip="{{ 'action.drag' | translate }}"
                 matTooltipPosition="above"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index df66eee579..ce83ff9f4d 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -15,33 +15,33 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column" *ngIf="!standalone">
+<div class="tb-details-buttons xs:flex xs:flex-col" *ngIf="!standalone">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'widgets-bundle.open-widgets-bundle' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'openDetails')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{'widgets-bundle.export' | translate }}
   </button>
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{'widgets-bundle.delete' | translate }}
   </button>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -54,7 +54,7 @@
           {{ 'widgets-bundle.title-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-gallery-image-input fxFlex
+      <tb-gallery-image-input class="flex-1"
                               label="{{'widgets-bundle.image-preview' | translate}}"
                               formControlName="image">
       </tb-gallery-image-input>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
index 32e1c6fb1a..294c0b9629 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { Resolve, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
@@ -41,7 +41,7 @@ import { Direction } from '@shared/models/page/sort-order';
 import { WidgetsBundleTabsComponent } from '@home/pages/widget/widgets-bundle-tabs.component';
 
 @Injectable()
-export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableConfig<WidgetsBundle>> {
+export class WidgetsBundlesTableConfigResolver  {
 
   private readonly config: EntityTableConfig<WidgetsBundle> = new EntityTableConfig<WidgetsBundle>();
 
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index 37781ac83a..275a66d0dc 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-create-password-card">
+<div class="tb-create-password-content mat-app-background tb-dark flex flex-row items-center justify-center" style="width: 100%;">
+  <mat-card appearance="raised" class="tb-create-password-card flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding">
         <span translate class="mat-headline-5">login.create-password</span>
@@ -28,7 +28,7 @@
     <mat-card-content>
       <form [formGroup]="createPassword" (ngSubmit)="onCreatePassword()">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>common.password</mat-label>
@@ -42,8 +42,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-xs="center start">
+            <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.create-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
index a1d52f0735..796509569a 100644
--- a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-expired-link-content mat-app-background tb-dark tb-flex row center align-center"
+<div class="tb-expired-link-content mat-app-background tb-dark flex flex-row items-center justify-center"
      style="width: 100%;">
   <mat-card appearance="raised" class="tb-expired-link-card">
     <mat-card-header style="justify-content: center">
@@ -29,7 +29,7 @@
     <mat-card-content style="padding: 24px 16px">
       <div>{{ message | translate }}</div>
     </mat-card-content>
-    <mat-card-actions class="tb-flex row center">
+    <mat-card-actions class="flex flex-row justify-center">
       <button mat-raised-button color="accent"
               [disabled]="(isLoading$ | async)"
               (click)="navigateToLoginPage()">
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index 8a9b9959c3..224cfd4884 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.html
@@ -15,20 +15,20 @@
     limitations under the License.
 
 -->
-<div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
+<div class="tb-login-content mat-app-background tb-dark flex flex-1 items-center justify-center">
   <mat-card appearance="raised" style="max-height: 80vh; overflow-y: auto;">
     <mat-card-content>
       <form class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
-        <fieldset fxLayout="column">
-          <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
+        <fieldset class="flex flex-col">
+          <div class="flex flex-col items-center justify-start" style="padding: 15px 0;">
             <tb-logo class="login-logo"></tb-logo>
           </div>
           <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
           </mat-progress-bar>
           <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
-            <div class="oauth-container tb-default" fxLayout="column" fxLayoutGap="16px" *ngIf="oauth2Clients?.length">
+            <div class="oauth-container tb-default flex flex-col gap-4" *ngIf="oauth2Clients?.length">
               <ng-container *ngFor="let oauth2Client of oauth2Clients">
                 <a mat-raised-button class="login-with-button" href="{{ getOAuth2Uri(oauth2Client) }}">
                   <mat-icon class="icon" svgIcon="{{ oauth2Client.icon }}"></mat-icon>
@@ -55,12 +55,12 @@
               <tb-toggle-password matSuffix></tb-toggle-password>
               <mat-icon matPrefix>lock</mat-icon>
             </mat-form-field>
-            <div fxLayoutAlign="end center" class="forgot-password">
+            <div class="forgot-password flex items-center justify-end">
               <button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">
                 {{ (passwordViolation ? 'login.reset-password' : 'login.forgot-password') | translate }}
               </button>
             </div>
-            <div fxLayout="column" class="tb-action-button">
+            <div class="tb-action-button flex flex-col">
               <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
                       type="submit">{{ 'login.login' | translate }}</button>
             </div>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index d397a92a5a..8c156c9e16 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center"
+<div class="tb-request-password-reset-content mat-app-background tb-dark flex flex-row items-center justify-center"
      style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-request-password-reset-card">
+  <mat-card appearance="raised" class="tb-request-password-reset-card flex flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding">
         <span translate class="mat-headline-5">login.request-password-reset</span>
@@ -29,7 +29,7 @@
     <mat-card-content>
       <form [formGroup]="requestPasswordRequest" (ngSubmit)="sendResetPasswordLink()">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent" hideRequiredMarker>
               <mat-label translate>login.email</mat-label>
@@ -39,8 +39,7 @@
                 {{ 'user.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-xs="center start">
+            <div class="flex flex-col items-center justify-start gap-4 gt-xs:flex-row gt-xs:items-start gt-xs:justify-center">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async) || this.clicked">
                 {{ 'login.request-password-reset' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index f7e3da26ab..1629180238 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-reset-password-card">
+<div class="tb-reset-password-content mat-app-background tb-dark flex flex-row items-center justify-center" style="width: 100%;">
+  <mat-card appearance="raised" class="tb-reset-password-card flex-initial">
     <mat-card-header>
       <mat-card-title class="layout-padding tb-card-title">
         <span translate class="mat-headline-5 tb-card-title">login.password-reset</span>
@@ -31,7 +31,7 @@
     <mat-card-content>
       <form [formGroup]="resetPassword" (ngSubmit)="onResetPassword()">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column" class="layout-padding">
+          <div tb-toast class="layout-padding flex flex-col">
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent">
               <mat-label translate>login.new-password</mat-label>
@@ -45,8 +45,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
               <tb-toggle-password matSuffix></tb-toggle-password>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start">
+            <div class="flex flex-col items-center justify-start gap-4 gt-sm:flex-row gt-sm:items-start gt-sm:justify-center">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.reset-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
index d1e1e10edc..27d97824b7 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div class="tb-two-factor-auth-login-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center"
+<div class="tb-two-factor-auth-login-content mat-app-background tb-dark flex flex-row items-center justify-center"
      style="width: 100%;">
-  <mat-card appearance="raised" fxFlex="initial" class="tb-two-factor-auth-login-card" >
+  <mat-card appearance="raised" class="tb-two-factor-auth-login-card flex-initial">
     <mat-card-header>
-      <mat-card-title class="mat-headline-5" fxLayout="row" fxLayoutAlign="start center">
+      <mat-card-title class="mat-headline-5 flex flex-row items-center justify-start">
         <button mat-icon-button type="button" (click)="cancelLogin()">
           <mat-icon>chevron_left</mat-icon>
         </button>
@@ -27,7 +27,7 @@
       </mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <div class="providers-container tb-default" fxLayout="column" fxLayoutGap="8px" *ngIf="!selectedProvider">
+      <div class="providers-container tb-default flex flex-col gap-2" *ngIf="!selectedProvider">
         <p class="mat-body" translate>login.select-way-to-verify</p>
         <ng-container *ngFor="let provider of allowProviders">
           <button type="button" mat-stroked-button class="provider" (click)="selectProvider(provider)">
@@ -38,10 +38,10 @@
       </div>
       <form [formGroup]="verificationForm" (ngSubmit)="sendVerificationCode()" *ngIf="selectedProvider">
         <fieldset [disabled]="isLoading$ | async">
-          <div tb-toast fxLayout="column">
+          <div tb-toast class="flex flex-col">
             <p class="mat-body">{{ providerDescription }}</p>
-            <div fxLayout="row" class="code-block" fxLayoutGap="8px">
-              <mat-form-field class="mat-block tb-appearance-transparent" fxFlex>
+            <div class="code-block flex flex-row gap-2">
+              <mat-form-field class="mat-block tb-appearance-transparent flex-1">
                 <input matInput formControlName="verificationCode"
                        required [maxlength]="maxLengthInput" type="text"
                        [attr.inputmode]="inputMode" [pattern]="pattern"
@@ -69,19 +69,19 @@
               {{ 'action.continue' | translate }}
             </button>
             <span style="height: 16px;"></span>
-            <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px" class="action-row">
-              <div *ngIf="showResendAction" fxFlex fxLayoutAlign="center center" class="action-resend">
+            <div class="action-row flex flex-row items-center justify-between gap-2">
+              <div *ngIf="showResendAction" class="action-resend flex flex-1 items-center justify-center">
                 <div *ngIf="countDownTime" class="timer">
                   {{ 'login.resend-code-wait' | translate : {time: countDownTime} }}
                 </div>
-                <button [fxShow]="!hideResendButton"
-                        mat-button fxFlex
+                <button mat-button class="flex-1"
+                        [class.!hidden]="hideResendButton"
                         (click)="sendCode($event)"
                         type="button">
                   {{ 'login.resend-code' | translate }}
                 </button>
               </div>
-              <button mat-button fxFlex
+              <button mat-button class="flex-1"
                       type="button"
                       *ngIf="allowProviders.length > 1"
                       (click)="selectProvider(null)">
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index a80d3b375d..d76c7b0986 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<div fxFlex class="tb-breadcrumb" fxLayout="row">
-  <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
+<div class="tb-breadcrumb flex flex-1 flex-row">
+  <h1 class="flex-1 gt-sm:!hidden" *ngIf="lastBreadcrumb$ | async; let breadcrumb">
     {{ breadcrumb.labelFunction ? breadcrumb.labelFunction() : (breadcrumb.customTranslate ? (breadcrumb.label | customTranslate) : (breadcrumb.label | translate)) }}
   </h1>
-  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
+  <span class="flex flex-row lt-md:!hidden" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
         <ng-container
           *ngTemplateOutlet="breadcrumbWithIcon;context:{breadcrumb: breadcrumb}">
@@ -30,7 +30,7 @@
           *ngTemplateOutlet="breadcrumbWithIcon;context:{breadcrumb: breadcrumb}">
         </ng-container>
       </span>
-	    <span class="divider" [fxHide]="isLast"> > </span>
+	    <span class="divider" [class.!hidden]="isLast"> > </span>
 	</span>
 </div>
 <ng-template #breadcrumbWithIcon let-breadcrumb="breadcrumb">
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 2bdc9cc79d..751cc04e9e 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -17,16 +17,16 @@
 -->
 <button mat-icon-button
         type="button"
-        [ngClass]="{'mini-button': miniButton}"
+        [class.mini-button]="miniButton"
         [color]="color"
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
         [matTooltipPosition]="matTooltipPosition"
         (click)="copy($event)">
-  <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
+  <tb-icon [style]="style" *ngIf="!copied; else copiedTemplate">
     {{  icon || mdiIcon }}
   </tb-icon>
   <ng-template #copiedTemplate>
-    <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
+    <mat-icon [style]="style" class="copied">done</mat-icon>
   </ng-template>
 </button>
diff --git a/ui-ngx/src/app/shared/components/cheatsheet.component.ts b/ui-ngx/src/app/shared/components/cheatsheet.component.ts
index 958f4186a3..d9ed4c6c8d 100644
--- a/ui-ngx/src/app/shared/components/cheatsheet.component.ts
+++ b/ui-ngx/src/app/shared/components/cheatsheet.component.ts
@@ -17,7 +17,7 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { MousetrapInstance } from 'mousetrap';
-import * as Mousetrap from 'mousetrap';
+import Mousetrap from 'mousetrap';
 
 @Component({
   selector : 'tb-hotkeys-cheatsheet',
@@ -114,7 +114,7 @@ import * as Mousetrap from 'mousetrap';
     font-size: 1.2em;
   }
 }  `],
-  template : `<div tabindex="-1" class="tb-hotkeys-container fade" [ngClass]="{'in': helpVisible}" style="display:none"><div class="tb-hotkeys">
+  template : `<div tabindex="-1" class="tb-hotkeys-container fade" [class.in]="helpVisible" style="display:none"><div class="tb-hotkeys">
   <h4 class="tb-hotkeys-title">{{ title }}</h4>
   <table *ngIf="helpVisible"><tbody>
     <tr *ngFor="let hotkey of hotkeysList">
diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html
index d57824b443..bf53875b4c 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-input.component.html
@@ -21,7 +21,7 @@
     <span *ngIf="label">{{label}}</span>
   </mat-label>
   <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker($event)">
-    <div class="tb-color-result" [ngStyle]="{background: colorFormGroup.get('color').value}"></div>
+    <div class="tb-color-result" [style.background]="colorFormGroup.get('color').value"></div>
   </div>
   <input matInput formControlName="color" (keydown)="$event.preventDefault();" (click)="openOnInput && showColorPicker($event)" [required]="required">
   <button *ngIf="colorClearButton && !disabled"
@@ -38,11 +38,11 @@
   <button type="button"
           mat-stroked-button
           class="tb-box-button"
-          [ngClass]="{'button-no-border': noBorder}"
+          [class.button-no-border]="noBorder"
           [disabled]="disabled"
           #matButton
           (click)="openColorPickerPopup($event, matButton._elementRef)">
-    <div class="tb-color-preview no-margin box" [ngClass]="{'disabled': disabled}">
+    <div class="tb-color-preview no-margin box" [class.disabled]="disabled">
       <div class="tb-color-result" [style]="!disabled ? {background: colorFormGroup.get('color').value} : {}"></div>
     </div>
   </button>
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
index 6ddae212e1..4d885a12a8 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.html
@@ -26,8 +26,8 @@
             [disabled]="!colorPickerControl.value">
       {{ 'action.clear' | translate }}
     </button>
-    <span fxFlex></span>
-    <div fxLayoutGap="8px">
+    <span class="flex-1"></span>
+    <div class="flex flex-row gap-2">
       <button *ngIf="colorCancelButton"
               mat-button
               type="button"
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
index 888c5b0b0b..b7fd99efd1 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="color-input-container">
-  <saturation-component class="saturation-component" [hue]="control.hue" [(color)]="control.value"></saturation-component>
+  <saturation-component class="saturation-component" [(color)]="control.value"></saturation-component>
 
   <div class="control-input-container">
     <div class="control-component">
@@ -25,7 +25,7 @@
                            [color]="control.value">
       </indicator-component>
       <div class="hue-alpha-range">
-        <hue-component [(hue)]="control.hue" [(color)]="control.value"></hue-component>
+        <hue-component [(color)]="control.value"></hue-component>
         <alpha-component [(color)]="control.value"></alpha-component>
       </div>
     </div>
@@ -38,9 +38,9 @@
       </mat-select>
       <div class="color-input" [ngSwitch]="presentations[presentationControl.value]">
         <rgba-input-component *ngSwitchCase="'rgba'" label
-                              [(color)]="control.value" [(hue)]="control.hue"></rgba-input-component>
+                              [(color)]="control.value"></rgba-input-component>
         <hsla-input-component *ngSwitchCase="'hsla'" label
-                              [(color)]="control.value" [(hue)]="control.hue"></hsla-input-component>
+                              [(color)]="control.value"></hsla-input-component>
         <tb-hex-input *ngSwitchCase="'hex'" [(color)]="control.value"></tb-hex-input>
       </div>
     </div>
@@ -48,5 +48,5 @@
 </div>
 
 <div class="color-presets-block">
-  <color-presets-component class="color-presets-component" [columns]="6" [colorPresets]="colorPresets" [(color)]="control.value" [(hue)]="control.hue"></color-presets-component>
+  <color-presets-component class="color-presets-component" [columns]="6" [colorPresets]="colorPresets" [(color)]="control.value"></color-presets-component>
 </div>
diff --git a/ui-ngx/src/app/shared/components/css.component.html b/ui-ngx/src/app/shared/components/css.component.html
index c6cd4d568a..cc6ac9ba18 100644
--- a/ui-ngx/src/app/shared/components/css.component.html
+++ b/ui-ngx/src/app/shared/components/css.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-css" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
+<div class="tb-css flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-css-toolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen">
+  <div style="height: 40px;" class="tb-css-toolbar flex flex-row items-center justify-start">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyCss()">
       {{'js-func.tidy' | translate }}
     </button>
@@ -35,7 +35,7 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-css-panel" class="tb-css-content-panel" fxLayout="column">
-    <div #cssEditor id="tb-css-input" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-css-panel" class="tb-css-content-panel flex flex-col">
+    <div #cssEditor id="tb-css-input" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
index 13cf1bd664..bfdf4dce2b 100644
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
@@ -30,7 +30,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="dashboardAutocomplete"
-         [fxShow]="!useDashboardLink || !disabled || !selectDashboardFormGroup.get('dashboard').value">
+         [class.!hidden]="useDashboardLink && disabled && selectDashboardFormGroup.get('dashboard').value">
   <a *ngIf="useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled" aria-label="Open device profile" [routerLink]=dashboardURL>
     {{ displayDashboardFn(selectDashboardFormGroup.get('dashboard').value) | customTranslate }}
   </a>
diff --git a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html b/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
index a564568379..aaaf2c2c3a 100644
--- a/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-select-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-form-field>
     <mat-label>{{'dashboard.select-dashboard' | translate}}</mat-label>
     <mat-select matInput [(ngModel)]="dashboardId"
diff --git a/ui-ngx/src/app/shared/components/dashboard-select.component.html b/ui-ngx/src/app/shared/components/dashboard-select.component.html
index 307d165d49..16d9838e31 100644
--- a/ui-ngx/src/app/shared/components/dashboard-select.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-select fxHide.lt-lg
+<mat-select class="lt-lg:!hidden"
             [required]="required"
             [disabled]="disabled"
             [(ngModel)]="dashboardId"
@@ -24,7 +24,7 @@
     {{dashboard.title}}
   </mat-option>
 </mat-select>
-<section fxHide.gt-md class="tb-dashboard-select">
+<section class="tb-dashboard-select gt-md:!hidden">
   <button mat-icon-button
           cdkOverlayOrigin #dashboardSelectPanelOrigin="cdkOverlayOrigin"
           (click)="openDashboardSelectPanel()"
diff --git a/ui-ngx/src/app/shared/components/dialog.component.ts b/ui-ngx/src/app/shared/components/dialog.component.ts
index e0cd2e2ad4..283194bc0b 100644
--- a/ui-ngx/src/app/shared/components/dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog.component.ts
@@ -19,7 +19,7 @@ import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { MatDialogRef } from '@angular/material/dialog';
-import { NavigationStart, Router, RouterEvent } from '@angular/router';
+import { NavigationStart, Router, Event } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
@@ -34,7 +34,7 @@ export abstract class DialogComponent<T, R = any> extends PageComponent implemen
     super(store);
     this.routerSubscription = this.router.events
       .pipe(
-        filter((event: RouterEvent) => event instanceof NavigationStart),
+        filter((event: Event) => event instanceof NavigationStart),
         filter(() => !!this.dialogRef)
       )
       .subscribe(() => {
diff --git a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
index febca6d3c7..1073cb7c95 100644
--- a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
@@ -22,6 +22,6 @@
 <ng-template #htmlMode>
   <div mat-dialog-content [innerHTML]="data.message | safe:'html'"></div>
 </ng-template>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
index 3422e983e2..c9bca14480 100644
--- a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<h2 mat-dialog-title>{{data.title}}</h2>
+<h2 mat-dialog-title tbTruncateWithTooltip>{{data.title}}</h2>
 <div mat-dialog-content [innerHTML]="data.message | safe: 'html'"></div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
index c1530bf1d8..7eaf782398 100644
--- a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
@@ -19,7 +19,7 @@
   <h2 class="main-label">
     {{ data.message }}
   </h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="onCancel()"
           type="button">
@@ -36,7 +36,7 @@
     <span>{{ 'entity.version-conflict.message' | translate }}</span>
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex flex-row items-center justify-end">
   <button mat-button color="primary"
           type="button"
           (click)="onDiscard()"
diff --git a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
index d9f77f1a09..34512afe3c 100644
--- a/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/error-alert-dialog.component.html
@@ -25,6 +25,6 @@
     <small class="error-details-content" [innerHTML]="errorDetails"></small>
   </mat-expansion-panel>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index 07f228bfc6..9cce511a6b 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ title }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -38,8 +38,8 @@
       </tb-json-object-edit>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <span fxFlex></span>
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 06fb510d1b..0cd5247719 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -17,16 +17,16 @@
 -->
 <form class="tb-node-script-test-dialog"
       [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ 'rulenode.test-script-function' | translate }} ({{ (scriptLang === scriptLanguage.JS ? 'rulenode.script-lang-java-script' : 'rulenode.script-lang-tbel') | translate }})</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content fxFlex style="position: relative;">
+  <div mat-dialog-content class="flex-1" style="position: relative;">
     <div class="tb-absolute-fill">
       <div #topPanel class="tb-split tb-split-vertical">
         <div #topLeftPanel class="tb-split tb-content">
@@ -34,8 +34,8 @@
             <div class="tb-editor-area-title-panel">
               <label translate>rulenode.message</label>
             </div>
-            <div formGroupName="payload" fxLayout="column" style="height: 100%;">
-              <div fxLayout="row">
+            <div formGroupName="payload" class="flex flex-col" style="height: 100%;">
+              <div class="flex flex-row">
                 <tb-message-type-autocomplete
                   style="margin-bottom: 0; min-width: 300px;"
                   formControlName="msgType"
@@ -44,7 +44,7 @@
               </div>
               <tb-json-content
                 #payloadContent
-                fxFlex
+                class="flex-1"
                 formControlName="msg"
                 label="{{ 'rulenode.message' | translate }}"
                 [contentType]="contentTypes.JSON"
@@ -70,7 +70,7 @@
       <div #bottomPanel class="tb-split tb-split-vertical">
         <div #bottomLeftPanel class="tb-split tb-content">
           <div class="tb-resize-container">
-            <div class="tb-editor-area-title-panel tb-js-function" [ngClass]="{'tb-js-function-help': data.helpId}">
+            <div class="tb-editor-area-title-panel tb-js-function" [class.tb-js-function-help]="data.helpId">
               <label>{{ functionTitle }}</label>
             </div>
             <tb-js-func
@@ -92,7 +92,7 @@
               <label translate>rulenode.output</label>
             </div>
             <tb-json-content
-              fxFlex
+              class="flex-1"
               formControlName="output"
               label="{{ 'rulenode.output' | translate }}"
               [contentType]="contentTypes.JSON"
@@ -105,14 +105,14 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions class="flex flex-row">
     <button mat-button mat-raised-button color="primary"
             type="button"
             (click)="test()"
             [disabled]="(isLoading$ | async) || nodeScriptTestFormGroup.invalid">
       {{ 'rulenode.test' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
index a030131227..460dcb1b6e 100644
--- a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.html
@@ -19,6 +19,6 @@
 <div mat-dialog-content>
   <h1>COMING SOON!</h1>
 </div>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex flex-row items-center justify-end">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/directives/component-outlet.directive.ts b/ui-ngx/src/app/shared/components/directives/component-outlet.directive.ts
index 71100527a5..008e5fbc37 100644
--- a/ui-ngx/src/app/shared/components/directives/component-outlet.directive.ts
+++ b/ui-ngx/src/app/shared/components/directives/component-outlet.directive.ts
@@ -15,13 +15,13 @@
 ///
 
 import {
-  ComponentFactory, ComponentRef,
+  ComponentRef,
   Directive, EventEmitter, Injector,
   Input,
   OnChanges, Output, Renderer2,
   SimpleChange,
   SimpleChanges,
-  TemplateRef,
+  Type,
   ViewContainerRef
 } from '@angular/core';
 
@@ -36,13 +36,11 @@ export class TbComponentOutletDirective<_T = unknown> implements OnChanges {
   @Input() tbComponentOutletContext: any | null = null;
   @Input() tbComponentStyle: { [klass: string]: any } | null = null;
   @Input() tbComponentInjector: Injector | null = null;
-  @Input() tbComponentOutlet: ComponentFactory<any> = null;
+  @Input() tbComponentOutlet: Type<any> = null;
   @Output() componentChange = new EventEmitter<ComponentRef<any>>();
 
   static ngTemplateContextGuard<T>(
-    // eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle,id-blacklist,id-match
     _dir: TbComponentOutletDirective<T>,
-    // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
     _ctx: any
   ): _ctx is TbComponentOutletContext {
     return true;
@@ -50,7 +48,7 @@ export class TbComponentOutletDirective<_T = unknown> implements OnChanges {
 
   private recreateComponent(): void {
     this.viewContainer.clear();
-    this.componentRef = this.viewContainer.createComponent(this.tbComponentOutlet, 0, this.tbComponentInjector);
+    this.componentRef = this.viewContainer.createComponent(this.tbComponentOutlet, {index: 0, injector: this.tbComponentInjector});
     this.componentChange.next(this.componentRef);
     if (this.tbComponentOutletContext) {
       for (const propName of Object.keys(this.tbComponentOutletContext)) {
@@ -85,8 +83,8 @@ export class TbComponentOutletDirective<_T = unknown> implements OnChanges {
         if (tbComponentOutlet.firstChange) {
           shouldOutletRecreate = true;
         } else {
-          const isPreviousOutletTemplate = tbComponentOutlet.previousValue instanceof ComponentFactory;
-          const isCurrentOutletTemplate = tbComponentOutlet.currentValue instanceof ComponentFactory;
+          const isPreviousOutletTemplate = tbComponentOutlet.previousValue instanceof Type;
+          const isCurrentOutletTemplate = tbComponentOutlet.currentValue instanceof Type;
           shouldOutletRecreate = isPreviousOutletTemplate || isCurrentOutletTemplate;
         }
       }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
index 2ca193468c..8986ed12e9 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
@@ -23,7 +23,7 @@
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="entityAutocomplete"
-         [fxShow]="!disabled || !selectEntityFormGroup.get('entity').value">
+         [class.!hidden]="disabled && selectEntityFormGroup.get('entity').value">
   <a *ngIf="selectEntityFormGroup.get('entity').value && disabled" aria-label="Open device profile" [routerLink]=entityURL>
     {{ displayEntityFn(selectEntityFormGroup.get('entity').value) }}
   </a>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
index 5be5f613e8..49e1c003f7 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" class="tb-entity-list-select" [formGroup]="entityListSelectFormGroup">
+<div class="tb-entity-list-select flex flex-row" [formGroup]="entityListSelectFormGroup">
   <tb-entity-type-select
     style="min-width: 100px; padding-right: 8px;"
     *ngIf="displayEntityTypeSelect"
@@ -26,8 +26,8 @@
     formControlName="entityType">
   </tb-entity-type-select>
   <tb-entity-list
-    [ngClass]="{'tb-not-empty': this.modelValue.ids?.length > 0}"
-    fxFlex
+    class="flex-1"
+    [class.tb-not-empty]="modelValue.ids?.length > 0"
     *ngIf="modelValue.entityType"
     [required]="required"
     [entityType]="modelValue.entityType"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
index bd539911c8..ce55412ad7 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entityListFormGroup" class="mat-block" [ngClass]="{'tb-chip-list': !labelText}" [subscriptSizing]="subscriptSizing">
+<mat-form-field [formGroup]="entityListFormGroup" class="mat-block" [class.tb-chip-list]="!labelText" [subscriptSizing]="subscriptSizing">
   <mat-label *ngIf="labelText">{{ labelText }}</mat-label>
   <mat-chip-grid #chipList formControlName="entities">
     <mat-chip-row
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list.component.ts b/ui-ngx/src/app/shared/components/entity/entity-list.component.ts
index cfb0f19b1b..44a8a5be82 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.ts
@@ -158,7 +158,7 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV
         }
       }),
       filter((value) => typeof value === 'string'),
-      map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+      map((value) => value ? value : ''),
       mergeMap(name => this.fetchEntities(name) ),
       share()
     );
diff --git a/ui-ngx/src/app/shared/components/entity/entity-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-select.component.ts
index 5671e9de3b..8d32cc7c17 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-select.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-select.component.ts
@@ -139,7 +139,7 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
       };
     }
     this.entitySelectFormGroup.get('entityType').patchValue(this.modelValue.entityType, {emitEvent: false});
-    this.entitySelectFormGroup.get('entityId').patchValue(this.modelValue.id, {emitEvent: false});
+    this.entitySelectFormGroup.get('entityId').patchValue(this.modelValue, {emitEvent: false});
   }
 
   updateView(entityType: EntityType | AliasEntityType | null, entityId: string | null) {
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
index e05d3245f6..35dfcd2cd3 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-form-field [formGroup]="subTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
   <mat-label *ngIf="showLabel">{{ entitySubtypeTitle | translate }}</mat-label>
-  <mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
+  <mat-select [class.!hidden]="!subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
     <mat-option *ngFor="let subType of subTypesOptions | async" [value]="subType">
       {{ displaySubTypeFn(subType) }}
     </mat-option>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts
index 76cfb69e5e..fd27e00ac4 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts
@@ -177,7 +177,7 @@ export class EntityTypeListComponent implements ControlValueAccessor, OnInit, Af
           }
         }),
         filter((value) => typeof value === 'string'),
-        map((value) => value ? (typeof value === 'string' ? value : value.name) : ''),
+        map((value) => value ? value : ''),
         mergeMap(name => this.fetchEntityTypes(name) ),
         share()
       );
diff --git a/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html b/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
index 7d9c0c33d5..fe03de8006 100644
--- a/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
+++ b/ui-ngx/src/app/shared/components/footer-fab-buttons.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" class="layout-wrap tb-footer-fab-buttons" [ngClass]="{'relative-buttons': relative}">
+<section class="tb-footer-fab-buttons flex flex-row flex-wrap" [class.relative-buttons]="relative">
   <div class="fab-container">
     <button [disabled]="isLoading$ | async"
             mat-fab class="fab-toggler tb-btn-footer"
diff --git a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
index 7e4f705ede..421bd9fd09 100644
--- a/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
+++ b/ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
@@ -42,13 +42,12 @@
   <ng-container *ngTemplateOutlet="noData"></ng-container>
 </ng-template>
 <ng-template #defaultLoadingCell>
-  <div fxLayout="column" fxLayoutAlign="center center" [style]="{minHeight: itemSize + 'px'}">
+  <div class="flex flex-col items-center justify-center" [style]="{minHeight: itemSize + 'px'}">
     <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
   </div>
 </ng-template>
 <ng-template #defaultDataLoading>
-  <div fxLayout="column"
-       fxLayoutAlign="center center" class="tb-absolute-fill">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center">
     <mat-spinner color="accent" strokeWidth="5"></mat-spinner>
   </div>
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/help-popup.component.html b/ui-ngx/src/app/shared/components/help-popup.component.html
index b2e4a81be3..8f2d15e69b 100644
--- a/ui-ngx/src/app/shared/components/help-popup.component.html
+++ b/ui-ngx/src/app/shared/components/help-popup.component.html
@@ -44,7 +44,7 @@
           <span [style]="triggerStyle" [innerHTML]="triggerSafeHtml"></span>
         </ng-container>
         <mat-icon *ngIf="(!popoverVisible || popoverReady)"
-                  [ngClass]="hintMode ? 'tb-mat-12' : 'tb-mat-16'">open_in_new</mat-icon>
+                  [class]="hintMode ? 'tb-mat-12' : 'tb-mat-16'">open_in_new</mat-icon>
         <mat-spinner *ngIf="popoverVisible && !popoverReady" mode="indeterminate" [diameter]="hintMode ? 12 : 16" strokeWidth="2"></mat-spinner>
       </span>
     </button>
diff --git a/ui-ngx/src/app/shared/components/html.component.html b/ui-ngx/src/app/shared/components/html.component.html
index 25868a78d9..c69766e566 100644
--- a/ui-ngx/src/app/shared/components/html.component.html
+++ b/ui-ngx/src/app/shared/components/html.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-html" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
+<div class="tb-html flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-html-toolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen">
+  <div style="min-height: 40px;" class="tb-html-toolbar flex flex-row items-center justify-start">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyHtml()">
       {{'js-func.tidy' | translate }}
     </button>
@@ -35,7 +35,7 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-html-panel" class="tb-html-content-panel" fxLayout="column">
-    <div #htmlEditor id="tb-html-input" [ngStyle]="fillHeight ? {} : {minHeight: minHeight}" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-html-panel" class="tb-html-content-panel flex flex-col">
+    <div #htmlEditor id="tb-html-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/html.component.ts b/ui-ngx/src/app/shared/components/html.component.ts
index da7e1fde9b..68270f7ac4 100644
--- a/ui-ngx/src/app/shared/components/html.component.ts
+++ b/ui-ngx/src/app/shared/components/html.component.ts
@@ -126,7 +126,17 @@ export class HtmlComponent implements OnInit, OnDestroy, ControlValueAccessor, V
         });
         // @ts-ignore
         this.htmlEditor.session.on('changeAnnotation', () => {
-          const annotations = this.htmlEditor.session.getAnnotations();
+          const annotations = this.htmlEditor.session.getAnnotations() || [];
+          const length = annotations.length;
+          let i = length;
+          while (i--) {
+            if(annotations[i].text.includes('Named entity expected')) {
+              annotations.splice(i, 1);
+            }
+          }
+          if (length > annotations.length) {
+            this.htmlEditor.session.setAnnotations(annotations);
+          }
           const hasErrors = annotations.filter(annotation => annotation.type === 'error').length > 0;
           if (this.hasErrors !== hasErrors) {
             this.hasErrors = hasErrors;
diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html
index 3b7130b634..f2ab8a9f7b 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image-input.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
+  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
   <ng-container #flow="flow"
                 [flowConfig]="{singleFile: true, allowDuplicateUploads: true}">
     <div class="tb-image-select-container">
diff --git a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
index 1a29d9837a..a5411fbe21 100644
--- a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2>{{ 'image.embed-image' | translate }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -30,12 +30,11 @@
 <div mat-dialog-content>
   <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="!readonly || image.public">
     <mat-expansion-panel class="tb-settings" [expanded]="image.public" disabled>
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <div *ngIf="!readonly" tb-hint-tooltip-icon="{{ 'image.embed-to-html-hint' | translate }}"
                class="tb-form-row no-border no-padding">
-            <mat-slide-toggle class="mat-slide" [formControl]="publicStatusControl" (click)="$event.stopPropagation()"
-                              fxLayoutAlign="center">
+            <mat-slide-toggle class="mat-slide flex items-stretch justify-center" [formControl]="publicStatusControl" (click)="$event.stopPropagation()">
               <div class="tb-form-panel-title">{{ 'image.embed-to-html' | translate }}</div>
             </mat-slide-toggle>
           </div>
diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.html b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
index dc2043097a..684f5bbd77 100644
--- a/ui-ngx/src/app/shared/components/image/image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-image-dialog" [formGroup]="imageFormGroup">
   <mat-toolbar color="primary">
     <h2>{{ (readonly ? 'image.image-details' : 'image.edit-image') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.html b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
index 9fffb9ded5..685c53416c 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
@@ -15,21 +15,19 @@
     limitations under the License.
 
 -->
-<div class="tb-images tb-absolute-fill" [ngClass]="{'tb-dialog-mode': dialogMode, 'mat-padding': !dialogMode}">
-  <div fxFlex fxLayout="column" class="tb-images-content" [ngClass]="{'tb-outlined-border': pageMode}">
-    <mat-toolbar class="mat-mdc-table-toolbar"
-                 fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="start stretch"
-                 [fxShow]="!textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())" [ngClass.lt-lg]="{'multi-row': !isSysAdmin}">
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+<div class="tb-images tb-absolute-fill" [class.tb-dialog-mode]="dialogMode" [class.mat-padding]="!dialogMode">
+  <div class="tb-images-content flex flex-1 flex-col" [class.tb-outlined-border]="pageMode">
+    <mat-toolbar class="mat-mdc-table-toolbar lt-lg:flex lt-lg:flex-col lt-lg:items-stretch lt-lg:justify-start"
+                 [class.!hidden]="textSearchMode || !(mode === 'grid' || dataSource?.selection.isEmpty())"
+                 [class.multi-row]="!isSysAdmin">
+      <div class="flex flex-1 flex-row items-center justify-start">
         <div class="mat-toolbar-tools">
-          <div fxHide fxShow.gt-sm class="tb-images-title">
+          <div class="tb-images-title lt-md:!hidden">
             <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
             <div *ngIf="isScada" tb-help="scada"></div>
           </div>
-          <div class="tb-images-view-type-toolbar"
-               fxLayout="row"
-               fxLayoutAlign="start center">
-            <div class="tb-toolbar-button" [ngClass]="{'tb-selected' : mode === 'list'}">
+          <div class="tb-images-view-type-toolbar flex flex-row items-center justify-start">
+            <div class="tb-toolbar-button" [class.tb-selected]="mode === 'list'">
               <button mat-icon-button
                       (click)="setMode('list')"
                       matTooltip="{{'image.list-mode' | translate }}"
@@ -37,7 +35,7 @@
                 <mat-icon>view_list</mat-icon>
               </button>
             </div>
-            <div class="tb-toolbar-button" [ngClass]="{'tb-selected' : mode === 'grid'}">
+            <div class="tb-toolbar-button" [class.tb-selected]="mode === 'grid'">
               <button mat-icon-button
                       (click)="setMode('grid');"
                       matTooltip="{{'image.grid-mode' | translate }}"
@@ -47,13 +45,13 @@
             </div>
           </div>
           <mat-slide-toggle *ngIf="!isSysAdmin"
-                            fxHide fxShow.gt-md
+                            class="lt-lg:!hidden"
                             [ngModel]="includeSystemImages"
                             (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
         </div>
-        <section fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap.gt-md="16px">
-          <span fxFlex></span>
-          <section fxLayout="row" fxLayoutAlign="start center">
+        <section class="flex flex-1 flex-row items-center justify-start gt-md:gap-4">
+          <span class="flex-1"></span>
+          <section class="flex flex-row items-center justify-start">
             <button [disabled]="isLoading$ | async"
                     mat-icon-button
                     (click)="enterFilterMode()"
@@ -75,7 +73,8 @@
                     matTooltipPosition="above">
               <tb-icon>mdi:file-import</tb-icon>
             </button>
-            <button [fxHide]="!(dialogMode && isScada)" fxShow.lt-lg
+            <button [class.!hidden]="dialogMode && isScada"
+                    class="gt-md:!hidden"
                     [disabled]="isLoading$ | async"
                     mat-icon-button
                     color="primary"
@@ -85,7 +84,8 @@
               <mat-icon>add</mat-icon>
             </button>
           </section>
-          <button fxHide [fxShow.gt-md]="!(dialogMode && isScada)"
+          <button [class.!hidden]="dialogMode && isScada"
+                  class="lt-lg:!hidden"
                   [disabled]="isLoading$ | async"
                   mat-flat-button
                   color="primary"
@@ -94,18 +94,18 @@
           </button>
         </section>
       </div>
-      <mat-slide-toggle *ngIf="!isSysAdmin" fxHide fxShow.lt-lg
+      <mat-slide-toggle *ngIf="!isSysAdmin" class="gt-md:!hidden"
                         [ngModel]="includeSystemImages"
                         (ngModelChange)="includeSystemImagesChanged($event)">{{ (isScada ? 'scada.include-system-symbols' : 'image.include-system-images') | translate }}</mat-slide-toggle>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !(mode === 'grid' || dataSource?.selection.isEmpty())">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ (isScada ? 'scada.search' : 'image.search' ) | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -118,12 +118,12 @@
         </button>
       </div>
     </mat-toolbar>
-    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="mode === 'list' && !dataSource?.selection.isEmpty()">
+    <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="mode !== 'list' || dataSource?.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <span>
           {{ translate.get((isScada ? 'scada.selected-symbols' : 'image.selected-images' ), {count: dataSource?.selection.selected.length}) | async }}
         </span>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
@@ -132,8 +132,8 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex *ngIf="mode === 'list'" fxLayout="column">
-      <div fxFlex class="table-container">
+    <div *ngIf="mode === 'list'" class="flex flex-1 flex-col">
+      <div class="table-container flex-1">
         <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntity"
                matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
           <ng-container matColumnDef="select" sticky>
@@ -145,7 +145,7 @@
             </mat-header-cell>
             <mat-cell *matCellDef="let image">
               <mat-checkbox (click)="$event.stopPropagation()"
-                            [fxShow]="deleteEnabled(image)"
+                            [class.!hidden]="!deleteEnabled(image)"
                             (change)="$event ? dataSource.selection.toggle(image) : null"
                             [checked]="dataSource.selection.isSelected(image)">
               </mat-checkbox>
@@ -190,10 +190,22 @@
             </mat-cell>
           </ng-container>
           <ng-container matColumnDef="actions" stickyEnd>
-            <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: actionColumnWidth, maxWidth: actionColumnWidth, width: actionColumnWidth }">
+            <mat-header-cell *matHeaderCellDef
+                             [class.gt-md:min-w-60]="!isScada"
+                             [class.gt-md:max-w-60]="!isScada"
+                             [class.gt-md:w-60]="!isScada"
+                             [class.gt-md:min-w-48]="isScada"
+                             [class.gt-md:max-w-48]="isScada"
+                             [class.gt-md:w-48]="isScada">
             </mat-header-cell>
-            <mat-cell *matCellDef="let image" [ngStyle.gt-md]="{ minWidth: actionColumnWidth, maxWidth: actionColumnWidth, width: actionColumnWidth }">
-              <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <mat-cell *matCellDef="let image"
+                      [class.gt-md:min-w-60]="!isScada"
+                      [class.gt-md:max-w-60]="!isScada"
+                      [class.gt-md:w-60]="!isScada"
+                      [class.gt-md:min-w-48]="isScada"
+                      [class.gt-md:max-w-48]="isScada"
+                      [class.gt-md:w-48]="isScada">
+              <div class="flex flex-1 flex-row items-stretch justify-end lt-lg:!hidden">
                 <button mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ (isScada ? 'scada.download-symbol' : 'image.download-image' ) | translate }}"
                         matTooltipPosition="above"
@@ -225,7 +237,7 @@
                   <mat-icon>delete</mat-icon>
                 </button>
               </div>
-              <div fxHide fxShow.lt-lg>
+              <div class="gt-md:!hidden">
                 <button mat-icon-button
                         (click)="$event.stopPropagation()"
                         [matMenuTriggerFor]="cellActionsMenu">
@@ -258,7 +270,7 @@
                   </button>
                   <button mat-menu-item
                           [disabled]="isLoading$ | async"
-                          [fxShow]="deleteEnabled(image)"
+                          [class.!hidden]="!deleteEnabled(image)"
                           (click)="deleteImage($event, image)">
                     <mat-icon>delete</mat-icon>
                     <span>{{ (isScada ? 'scada.delete-symbol' : 'image.delete-image' ) | translate }}</span>
@@ -275,18 +287,17 @@
                       (click)="selectImage($event, image)">{{ 'action.select' | translate }}</button>
             </mat-cell>
           </ng-container>
-          <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-          <mat-row [fxShow]="!dataSource.dataLoading"
-                   [ngClass]="{'mat-row-select': true,
-                               'mat-selected': dataSource.selection.isSelected(image)}"
+          <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+          <mat-row class="mat-row-select"
+                   [class.!hidden]="dataSource.dataLoading"
+                   [class.mat-selected]="dataSource.selection.isSelected(image)"
                    *matRowDef="let image; columns: displayedColumns;" (click)="rowClick($event, image)"></mat-row>
         </table>
         <ng-container *ngIf="(dataSource.isEmpty() | async) && !dataSource.dataLoading">
           <ng-container *ngTemplateOutlet="noImages"></ng-container>
         </ng-container>
-        <span [fxShow]="dataSource.dataLoading"
-              fxLayoutAlign="center center"
-              class="no-data-found">{{ 'common.loading' | translate }}</span>
+        <span [class.!hidden]="!dataSource.dataLoading"
+              class="no-data-found flex items-center justify-center">{{ 'common.loading' | translate }}</span>
       </div>
       <mat-divider></mat-divider>
       <mat-paginator [length]="dataSource.total() | async"
@@ -296,8 +307,8 @@
                      [hidePageSize]="hidePageSize"
                      showFirstLastButtons></mat-paginator>
     </div>
-    <div *ngIf="mode === 'grid'" fxFlex [ngClass]="{'mat-padding': !dialogMode}" fxLayout="column">
-      <tb-scroll-grid fxFlex
+    <div *ngIf="mode === 'grid'" class="flex flex-1 flex-col" [class.mat-padding]="!dialogMode">
+      <tb-scroll-grid class="flex-1"
         [columns]="gridColumns"
         [itemSize]="gridImagesItemSizeStrategy"
         [fetchFunction]="gridImagesFetchFunction"
@@ -311,8 +322,7 @@
   </div>
 </div>
 <ng-template #loadingImages>
-  <div fxLayout="column"
-       fxLayoutAlign="center center" class="tb-absolute-fill">
+  <div class="tb-absolute-fill flex flex-col items-center justify-center">
         <span>
           {{ 'common.loading' | translate }}
         </span>
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.scss b/ui-ngx/src/app/shared/components/image/image-gallery.component.scss
index 065edce62c..e895283d58 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.scss
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.scss
@@ -42,12 +42,14 @@ $tb-button-selected-color: rgb(255, 110, 64) !default;
 
     .mat-mdc-table-toolbar {
       &.multi-row {
-        &.mat-toolbar-single-row {
-          height: 112px;
-        }
-        .mat-mdc-slide-toggle {
-          display: flex;
-          min-height: 48px;
+        @media #{$mat-lt-lg} {
+          &.mat-toolbar-single-row {
+            height: 112px;
+          }
+          .mat-mdc-slide-toggle {
+            display: flex;
+            min-height: 48px;
+          }
         }
       }
     }
diff --git a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts
index 566fc699ae..93d77bd622 100644
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.ts
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.ts
@@ -174,8 +174,6 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
 
   authUser = getCurrentAuthUser(this.store);
 
-  actionColumnWidth = '240px';
-
   get isScada() {
     return this.imageSubType === ResourceSubType.SCADA_SYMBOL;
   }
@@ -245,9 +243,6 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
       this.dataSource = new ImagesDatasource(this.imageService, null,
           entity => this.deleteEnabled(entity));
     }
-    if (this.isScada) {
-      this.actionColumnWidth = '192px';
-    }
   }
 
   ngOnDestroy(): void {
diff --git a/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html b/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
index 6bbc62ade2..91ecb97da1 100644
--- a/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
@@ -63,15 +63,15 @@
                     (click)="toggleShowReferences($event, image, showReferencesButton)">{{ 'image.references' | translate }}</button>
           </mat-cell>
         </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['select', 'preview', 'title', 'references']; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                                 'mat-selected': dataSource.selection.isSelected(image)}"
+        <mat-header-row class="mat-row-select" *matHeaderRowDef="['select', 'preview', 'title', 'references']; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select"
+                 [class.mat-selected]="dataSource.selection.isSelected(image)"
                  *matRowDef="let image; columns: ['select', 'preview', 'title', 'references'];"></mat-row>
       </table>
     </div>
   </ng-container>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" (click)="cancel()">{{'action.cancel' | translate}}</button>
   <button mat-raised-button color="accent" (click)="delete()" [disabled]="data.multiple && dataSource.selection.isEmpty()"
           cdkFocusInitial>{{ (data.multiple ? 'action.delete-selected' : 'action.delete-anyway') | translate}}</button>
diff --git a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
index ea6a4cc603..6707e0e05c 100644
--- a/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
@@ -16,10 +16,10 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !imageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
-  <div class="images-container" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
-       [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)"
-       fxLayout="row" fxLayoutGap="8px" [ngClass]="{'no-images': !imageUrls.length}">
+  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !imageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  <div class="images-container flex flex-row gap-2" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
+       [class.no-images]="!imageUrls.length"
+       [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)">
     <div dndPlaceholderRef class="image-card image-dnd-placeholder"></div>
     <div *ngFor="let imageUrl of imageUrls; let $index = index;"
          (dndStart)="imageDragStart($index)"
@@ -27,10 +27,10 @@
          [dndDraggable]="imageUrl"
          [dndDisableIf]="disabled"
          dndEffectAllowed="move"
-         [ngClass]="{'image-dragging': dragIndex === $index}"
-         class="image-card" fxLayout="column">
+         [class.image-dragging]="dragIndex === $index"
+         class="image-card flex flex-col">
       <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
-      <div class="image-content-container" fxLayout="row">
+      <div class="image-content-container flex flex-row">
         <div dndHandle *ngIf="!disabled" class="tb-image-action-container tb-drag-handle">
           <mat-icon color="primary">drag_indicator</mat-icon>
         </div>
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index 6f928639db..4c3d15f4f6 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;">
   <mat-toolbar color="primary">
     <h2>{{ ( uploadImage ? (isScada ? 'scada.upload-symbol' : 'image.upload-image') : (isScada ? 'scada.update-symbol' : 'image.update-image') ) | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -50,7 +50,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index 082a92b2c1..5a0e358b7a 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div class="tb-js-func" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-hide-brackets': hideBrackets}"
+<div class="tb-js-func flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'tb-hide-brackets': hideBrackets}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-js-func-toolbar">
+     [fullscreen]="fullscreen">
+  <div style="min-height: 40px;" class="tb-js-func-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding"
-           [ngClass]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
+           [class]="{'tb-error': !disabled && (hasErrors || !functionValid || required && !modelValue), 'tb-required': !disabled && required}">
       {{ functionLabel }}
     </label>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <ng-content select="[toolbarPrefixButton]"></ng-content>
     <button type='button' *ngIf="!disabled" mat-button class="tidy" (click)="beautifyJs()">
       {{'js-func.tidy' | translate }}
@@ -41,10 +41,10 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-javascript-panel" class="tb-js-func-panel" fxLayout="column" tb-toast toastTarget="{{toastTargetId}}">
-    <div #javascriptEditor id="tb-javascript-input" [ngStyle]="fillHeight ? {} : {minHeight: minHeight}" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-javascript-panel" class="tb-js-func-panel flex flex-col" tb-toast toastTarget="{{toastTargetId}}">
+    <div #javascriptEditor id="tb-javascript-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
-  <div *ngIf="!hideBrackets" fxLayout="row" fxLayoutAlign="start center" style="height: 40px;">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">}</label>
+  <div *ngIf="!hideBrackets" class="flex flex-row items-center justify-start" style="height: 40px;">
+    <label class="tb-title no-padding" [class]="{'tb-error': hasErrors || !functionValid || required && !modelValue}">&#125;</label>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index 67727591a4..33534dec9a 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-json-content" style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
+<div class="tb-json-content flex flex-col" style="background: #fff;" [class]="{'fill-height': fillHeight}"
      tb-fullscreen
-     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-json-content-toolbar" *ngIf="!hideToolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
+  <div style="height: 40px;" class="tb-json-content-toolbar flex flex-row items-center justify-start" *ngIf="!hideToolbar">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && (!contentValid || required && !contentBody), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
@@ -41,7 +41,7 @@
     </fieldset>
   </div>
   <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
-       class="tb-json-content-panel" fxLayout="column">
-    <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
+       class="tb-json-content-panel flex flex-col">
+    <div #jsonEditor id="tb-json-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-form/json-form.component.ts b/ui-ngx/src/app/shared/components/json-form/json-form.component.ts
index 8311616b26..682a88ba98 100644
--- a/ui-ngx/src/app/shared/components/json-form/json-form.component.ts
+++ b/ui-ngx/src/app/shared/components/json-form/json-form.component.ts
@@ -18,11 +18,11 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  forwardRef, Injector,
+  forwardRef,
   Input,
   OnChanges,
   OnDestroy,
-  OnInit, Renderer2,
+  Renderer2,
   SimpleChanges,
   ViewChild, ViewContainerRef,
   ViewEncapsulation
@@ -31,21 +31,16 @@ import { ControlValueAccessor, UntypedFormControl, NG_VALIDATORS, NG_VALUE_ACCES
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { deepClone, isString } from '@app/core/utils';
-import { TranslateService } from '@ngx-translate/core';
+import { deepClone, isString, unwrapModule } from '@app/core/utils';
 import { JsonFormProps } from './react/json-form.models';
 import inspector from 'schema-inspector';
 import tinycolor from 'tinycolor2';
 import { DialogService } from '@app/core/services/dialog.service';
-// import * as React from 'react';
-// import * as ReactDOM from 'react-dom';
-// import ReactSchemaForm from './react/json-form-react';
 import JsonFormUtils from './react/json-form-utils';
 import { JsonFormComponentData } from './json-form-component.models';
 import { GroupInfo } from '@shared/models/widget.models';
 import { Observable } from 'rxjs/internal/Observable';
 import { forkJoin, from } from 'rxjs';
-import { MouseEvent } from 'react';
 import { TbPopoverService } from '@shared/components/popover.service';
 
 @Component({
@@ -66,7 +61,7 @@ import { TbPopoverService } from '@shared/components/popover.service';
   ],
   encapsulation: ViewEncapsulation.None
 })
-export class JsonFormComponent implements OnInit, ControlValueAccessor, Validator, OnChanges, OnDestroy {
+export class JsonFormComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
 
   @ViewChild('reactRoot', {static: true})
   reactRootElmRef: ElementRef<HTMLElement>;
@@ -109,13 +104,14 @@ export class JsonFormComponent implements OnInit, ControlValueAccessor, Validato
   isFullscreen = false;
   fullscreenFinishFn: (el: Element) => void;
 
+  private reactRoot: any;
+
   private propagateChange = null;
   private propagateChangePending = false;
   private writingValue = false;
   private updateViewPending = false;
 
   constructor(public elementRef: ElementRef,
-              private translate: TranslateService,
               private dialogs: DialogService,
               private popoverService: TbPopoverService,
               private renderer: Renderer2,
@@ -124,9 +120,6 @@ export class JsonFormComponent implements OnInit, ControlValueAccessor, Validato
               private cd: ChangeDetectorRef) {
   }
 
-  ngOnInit(): void {
-  }
-
   ngOnDestroy(): void {
     this.destroyReactSchemaForm();
   }
@@ -269,33 +262,25 @@ export class JsonFormComponent implements OnInit, ControlValueAccessor, Validato
     }
 
     // import ReactSchemaForm from './react/json-form-react';
-    const reactSchemaFormObservables: Observable<any>[] = [];
-    reactSchemaFormObservables.push(from(import('react')));
-    reactSchemaFormObservables.push(from(import('react-dom')));
-    reactSchemaFormObservables.push(from(import('./react/json-form-react')));
+    const reactSchemaFormObservables: Observable<any>[] = [
+      from(import('react')),
+      from(import('react-dom')),
+      from(import('react-dom/client')),
+      from(import('./react/json-form-react'))
+    ];
     forkJoin(reactSchemaFormObservables).subscribe(
       (modules) => {
-        const react =  modules[0];
-        const reactDom =  modules[1];
-        const jsonFormReact = modules[2].default;
-        reactDom.render(react.createElement(jsonFormReact, this.formProps), this.reactRootElmRef.nativeElement);
+        const react = unwrapModule(modules[0]);
+        const reactDomClient =  unwrapModule(modules[2]);
+        const jsonFormReact = unwrapModule(modules[3]);
+        this.reactRoot = reactDomClient.createRoot(this.reactRootElmRef.nativeElement);
+        this.reactRoot.render(react.createElement(jsonFormReact, this.formProps));
       }
     );
-    /* import('./react/json-form-react').then(
-      (mod) => {
-        ReactDOM.render(React.createElement(mod.default, this.formProps), this.reactRootElmRef.nativeElement);
-      }
-    );*/
-    // ReactDOM.render(React.createElement(ReactSchemaForm, this.formProps), this.reactRootElmRef.nativeElement);
   }
 
   private destroyReactSchemaForm() {
-    import('react-dom').then(
-      (reactDom) => {
-        reactDom.unmountComponentAtNode(this.reactRootElmRef.nativeElement);
-      }
-    );
-    // ReactDOM.unmountComponentAtNode(this.reactRootElmRef.nativeElement);
+    this.reactRoot?.unmount();
   }
 
   private validateModel(): boolean {
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
index 8d5a0d1038..649ee16c95 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
@@ -17,23 +17,26 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ThingsboardBaseComponent from './json-form-base-component';
 import reactCSS from 'reactcss';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 import { IEditorProps } from 'react-ace/src/types';
-import { mergeMap } from 'rxjs/operators';
+import { map, mergeMap } from 'rxjs/operators';
 import { getAce } from '@shared/models/ace/ace.models';
-import { from } from 'rxjs';
+import { from, lastValueFrom } from 'rxjs';
 import { Observable } from 'rxjs/internal/Observable';
-import { CircularProgress, IconButton } from '@material-ui/core';
+import { CircularProgress, IconButton } from '@mui/material';
 import { MouseEvent } from 'react';
-import { Help, HelpOutline } from '@material-ui/icons';
+import { Help, HelpOutline } from '@mui/icons-material';
+import { unwrapModule } from '@core/utils';
 
 const ReactAce = React.lazy(() => {
-  return getAce().pipe(
+  return lastValueFrom(getAce().pipe(
     mergeMap(() => {
-      return from(import('react-ace'));
+      return from(import('react-ace')).pipe(
+        map((module) => unwrapModule(module)
+      ));
     })
-  ).toPromise();
+  ));
 });
 
 interface ThingsboardAceEditorProps extends JsonFormFieldProps {
@@ -53,7 +56,7 @@ class ThingsboardAceEditor extends React.Component<ThingsboardAceEditorProps, Th
 
     private aceEditor: IEditorProps;
 
-    constructor(props) {
+    constructor(props: ThingsboardAceEditorProps) {
         super(props);
         this.onValueChanged = this.onValueChanged.bind(this);
         this.onBlur = this.onBlur.bind(this);
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx
index 2cd9f08034..681fe69aab 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx
@@ -16,12 +16,12 @@
 import * as React from 'react';
 import JsonFormUtils from './json-form-utils';
 import ThingsboardBaseComponent from './json-form-base-component';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import _ from 'lodash';
-import IconButton from '@material-ui/core/IconButton';
-import Clear from '@material-ui/icons/Clear';
-import Add from '@material-ui/icons/Add';
-import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Clear from '@mui/icons-material/Clear';
+import Add from '@mui/icons-material/Add';
+import Tooltip from '@mui/material/Tooltip';
 import {
   JsonFormData,
   JsonFormFieldProps,
@@ -35,7 +35,7 @@ interface ThingsboardArrayState extends JsonFormFieldState {
 
 class ThingsboardArray extends React.Component<JsonFormFieldProps, ThingsboardArrayState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onAppend = this.onAppend.bind(this);
         this.onDelete = this.onDelete.bind(this);
@@ -130,12 +130,10 @@ class ThingsboardArray extends React.Component<JsonFormFieldProps, ThingsboardAr
 
     render() {
         const arrays = [];
-        const fields = [];
         const model = this.state.model;
         const keys = this.state.keys;
-        const items = this.props.form.items;
         for (let i = 0; i < model.length; i++ ) {
-            let removeButton: JSX.Element = null;
+            let removeButton: React.JSX.Element = null;
             if (!this.props.form.readonly) {
                 const boundOnDelete = this.onDelete.bind(this, i);
                 removeButton = <Tooltip title='Remove'><IconButton onClick={boundOnDelete}><Clear/></IconButton></Tooltip>;
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
index 1288861217..4e9687ce3a 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-base-component.tsx
@@ -21,7 +21,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 export default ThingsboardBaseComponent => class<P extends JsonFormFieldProps>
   extends React.Component<P, JsonFormFieldState> {
 
-    constructor(props) {
+    constructor(props: P) {
         super(props);
         this.onChangeValidate = this.onChangeValidate.bind(this);
         const value = this.defaultValue();
@@ -42,8 +42,10 @@ export default ThingsboardBaseComponent => class<P extends JsonFormFieldProps>
     onChangeValidate(e, forceUpdate?: boolean) {
         let value = null;
         if (this.props.form.schema.type === 'integer' || this.props.form.schema.type === 'number') {
-            if (e.target.value === null || e.target.value === '') {
+            if (!e || e.target?.value === null || e.target?.value === '') {
                 value = undefined;
+            } else if (typeof e === 'number') {
+                value = Number(e);
             } else if (e.target.value.indexOf('.') === -1) {
                 value = parseInt(e.target.value, 10);
             } else {
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx
index a74a7b8f9c..fd3bac8f2c 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-checkbox.tsx
@@ -15,9 +15,9 @@
  */
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
-import Checkbox from '@material-ui/core/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
 import { JsonFormFieldProps, JsonFormFieldState } from './json-form.models.js';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 class ThingsboardCheckbox extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
     render() {
@@ -26,11 +26,12 @@ class ThingsboardCheckbox extends React.Component<JsonFormFieldProps, JsonFormFi
           <FormControlLabel
             control={
               <Checkbox
+                color={'secondary'}
                 name={this.props.form.key.slice(-1)[0] + ''}
                 value={this.props.form.key.slice(-1)[0]}
                 checked={this.props.value || false}
                 disabled={this.props.form.readonly}
-                onChange={(e, checked) => {
+                onChange={(e) => {
                   this.props.onChangeValidate(e);
                 }}
               />
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx
index 6800d7593a..bf3a245663 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx
@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import ThingsboardBaseComponent from './json-form-base-component';
 import reactCSS from 'reactcss';
 import tinycolor from 'tinycolor2';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import IconButton from '@material-ui/core/IconButton';
-import Clear from '@material-ui/icons/Clear';
-import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Clear from '@mui/icons-material/Clear';
+import Tooltip from '@mui/material/Tooltip';
 
 interface ThingsboardColorState extends JsonFormFieldState {
   color: tinycolor.ColorFormats.RGBA | null;
@@ -31,7 +30,9 @@ interface ThingsboardColorState extends JsonFormFieldState {
 
 class ThingsboardColor extends React.Component<JsonFormFieldProps, ThingsboardColorState> {
 
-    constructor(props) {
+    containerRef = React.createRef<HTMLDivElement>();
+
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onBlur = this.onBlur.bind(this);
         this.onFocus = this.onFocus.bind(this);
@@ -55,17 +56,17 @@ class ThingsboardColor extends React.Component<JsonFormFieldProps, ThingsboardCo
     }
 
     componentDidMount() {
-        const node = ReactDOM.findDOMNode(this);
+        const node = this.containerRef.current;
         const colContainer = $(node).children('#color-container');
-        colContainer.click((event) => {
+        colContainer.click(() => {
             if (!this.props.form.readonly) {
-              this.onSwatchClick(event);
+              this.onSwatchClick();
             }
         });
     }
 
     componentWillUnmount() {
-        const node = ReactDOM.findDOMNode(this);
+        const node = this.containerRef.current;
         const colContainer = $(node).children('#color-container');
         colContainer.off( 'click' );
     }
@@ -91,7 +92,7 @@ class ThingsboardColor extends React.Component<JsonFormFieldProps, ThingsboardCo
         });
     }
 
-    onSwatchClick(event) {
+    onSwatchClick() {
         this.props.onColorClick(this.props.form.key, this.state.color,
           (color) => {
             this.onValueChanged(color);
@@ -99,7 +100,7 @@ class ThingsboardColor extends React.Component<JsonFormFieldProps, ThingsboardCo
         );
     }
 
-    onClear(event) {
+    onClear(event: React.MouseEvent) {
         if (event) {
             event.stopPropagation();
         }
@@ -159,12 +160,13 @@ class ThingsboardColor extends React.Component<JsonFormFieldProps, ThingsboardCo
         }
 
         return (
-            <div style={ styles.container }>
+            <div ref={this.containerRef} style={ styles.container }>
                  <div id='color-container' style={ styles.colorContainer }>
                     <div className='tb-color-preview' style={ styles.swatch }>
                         <div className='tb-color-result' style={ styles.color }/>
                     </div>
                    <TextField
+                     variant={'standard'}
                      className={fieldClass}
                      label={this.props.form.title}
                      error={!this.props.valid}
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx
index bcc0f46111..600ae8c12b 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx
@@ -21,7 +21,7 @@ import { beautifyCss } from '@shared/models/beautify.models';
 
 class ThingsboardCss extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onTidyCss = this.onTidyCss.bind(this);
     }
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx
index 9a0671aa20..3b253cfa8e 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-date.tsx
@@ -15,9 +15,10 @@
  */
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
-import DateFnsUtils from '@date-io/date-fns';
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
+import moment from 'moment';
 
 interface ThingsboardDateState extends JsonFormFieldState {
   currentValue: Date | null;
@@ -25,7 +26,7 @@ interface ThingsboardDateState extends JsonFormFieldState {
 
 class ThingsboardDate extends React.Component<JsonFormFieldProps, ThingsboardDateState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onDatePicked = this.onDatePicked.bind(this);
         let value: Date | null = null;
@@ -38,11 +39,11 @@ class ThingsboardDate extends React.Component<JsonFormFieldProps, ThingsboardDat
     }
 
 
-    onDatePicked(date: Date | null) {
+    onDatePicked(date: moment.Moment | null) {
         this.setState({
-          currentValue: date
+          currentValue: date?.toDate()
         });
-        this.props.onChangeValidate(date ? date.getTime() : null);
+        this.props.onChangeValidate(date ? date.valueOf() : null);
     }
 
     render() {
@@ -56,22 +57,25 @@ class ThingsboardDate extends React.Component<JsonFormFieldProps, ThingsboardDat
         }
 
         return (
-          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+          <LocalizationProvider dateAdapter={AdapterMoment}>
             <div style={{width: '100%', display: 'block'}}>
-                <KeyboardDatePicker
-                    disableToolbar
-                    variant='inline'
-                    format='MM/dd/yyyy'
-                    margin='normal'
+                <DatePicker
+                    slotProps={{
+                      textField: {
+                        variant: 'standard'
+                      }
+                    }}
+                    format='MM/DD/YYYY'
                     className={fieldClass}
                     label={this.props.form.title}
-                    value={this.state.currentValue}
+                    value={moment(this.state.currentValue?.valueOf())}
                     onChange={this.onDatePicked}
                     disabled={this.props.form.readonly}
-                    style={this.props.form.style || {width: '100%'}}/>
+                    sx={this.props.form.style || {width: '100%'}}
+                />
 
             </div>
-          </MuiPickersUtilsProvider>
+          </LocalizationProvider>
         );
     }
 }
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx
index 07f9d119cf..f267154182 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx
@@ -21,7 +21,7 @@ import { beautifyHtml } from '@shared/models/beautify.models';
 
 class ThingsboardHtml extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onTidyHtml = this.onTidyHtml.bind(this);
     }
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx
index f898aa8714..00366b86e8 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { MouseEvent } from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
 import reactCSS from 'reactcss';
-import TextField from '@material-ui/core/TextField';
-import IconButton from '@material-ui/core/IconButton';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import Clear from '@material-ui/icons/Clear';
-import Icon from '@material-ui/core/Icon';
-import Tooltip from '@material-ui/core/Tooltip';
+import Clear from '@mui/icons-material/Clear';
+import Icon from '@mui/material/Icon';
+import Tooltip from '@mui/material/Tooltip';
 
 interface ThingsboardIconState extends JsonFormFieldState {
   icon: string | null;
@@ -31,7 +31,9 @@ interface ThingsboardIconState extends JsonFormFieldState {
 
 class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIconState> {
 
-    constructor(props) {
+    containerRef = React.createRef<HTMLDivElement>();
+
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onBlur = this.onBlur.bind(this);
         this.onFocus = this.onFocus.bind(this);
@@ -54,9 +56,9 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
     }
 
     componentDidMount() {
-        const node = ReactDOM.findDOMNode(this);
+        const node = this.containerRef.current;
         const iconContainer = $(node).children('#icon-container');
-        iconContainer.click((event) => {
+        iconContainer.on('click', (event) => {
           if (!this.props.form.readonly) {
             this.onIconClick(event);
           }
@@ -64,20 +66,19 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
     }
 
     componentWillUnmount() {
-        const node = ReactDOM.findDOMNode(this);
+        const node = this.containerRef.current;
         const iconContainer = $(node).children('#icon-container');
         iconContainer.off( 'click' );
     }
 
     onValueChanged(value: string | null) {
-        const icon = value;
         this.setState({
             icon: value
         });
         this.props.onChange(this.props.form.key, value);
     }
 
-    onIconClick(event) {
+    onIconClick(_event) {
       this.props.onIconClick(this.props.form.key, this.state.icon,
         (color) => {
           this.onValueChanged(color);
@@ -85,7 +86,7 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
       );
     }
 
-    onClear(event) {
+    onClear(event: MouseEvent) {
         if (event) {
             event.stopPropagation();
         }
@@ -102,6 +103,7 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
                     alignItems: 'center'
                 },
                 icon: {
+                    padding: '12px',
                     marginRight: '10px',
                     marginBottom: 'auto',
                     cursor: 'pointer',
@@ -134,12 +136,13 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
         }
 
         return (
-            <div style={ styles.container }>
+            <div ref={this.containerRef} style={ styles.container }>
                  <div id='icon-container' style={ styles.iconContainer }>
                     <IconButton style={ styles.icon }>
                       <Icon>{pickedIcon}</Icon>
                     </IconButton>
                     <TextField
+                        variant={'standard'}
                         className={fieldClass}
                         label={this.props.form.title}
                         error={!this.props.valid}
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx
index d13d86e451..2a03d95669 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx
@@ -13,13 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import Dropzone from 'react-dropzone';
 import ThingsboardBaseComponent from './json-form-base-component';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import IconButton from '@material-ui/core/IconButton';
-import Clear from '@material-ui/icons/Clear';
-import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Clear from '@mui/icons-material/Clear';
+import Tooltip from '@mui/material/Tooltip';
 
 interface ThingsboardImageState extends JsonFormFieldState {
   imageUrl: string;
@@ -27,7 +27,7 @@ interface ThingsboardImageState extends JsonFormFieldState {
 
 class ThingsboardImage extends React.Component<JsonFormFieldProps, ThingsboardImageState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onDrop = this.onDrop.bind(this);
         this.onClear = this.onClear.bind(this);
@@ -40,12 +40,12 @@ class ThingsboardImage extends React.Component<JsonFormFieldProps, ThingsboardIm
     onDrop(acceptedFiles: File[]) {
       const reader = new FileReader();
       reader.onload = () => {
-        this.onValueChanged(reader.result);
+        this.onValueChanged(reader.result as string);
       };
       reader.readAsDataURL(acceptedFiles[0]);
     }
 
-    onValueChanged(value) {
+    onValueChanged(value: string) {
         this.setState({
             imageUrl: value
         });
@@ -56,7 +56,7 @@ class ThingsboardImage extends React.Component<JsonFormFieldProps, ThingsboardIm
         });
     }
 
-    onClear(event) {
+    onClear(event: MouseEvent) {
         if (event) {
             event.stopPropagation();
         }
@@ -73,7 +73,7 @@ class ThingsboardImage extends React.Component<JsonFormFieldProps, ThingsboardIm
             labelClass += ' tb-readonly';
         }
 
-        let previewComponent;
+        let previewComponent: React.JSX.Element;
         if (this.state.imageUrl) {
             previewComponent = <img className='tb-image-preview' src={this.state.imageUrl} />;
         } else {
@@ -91,7 +91,7 @@ class ThingsboardImage extends React.Component<JsonFormFieldProps, ThingsboardIm
                         </Tooltip>
                     </div>
                     <Dropzone onDrop={this.onDrop}
-                              accept='image/*' multiple={false}>
+                              accept={ {'image/*': []} }  multiple={false}>
                       {({getRootProps, getInputProps}) => (
                           <div className='tb-dropzone' {...getRootProps()}>
                             <div>Drop an image or click to select a file to upload.</div>
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx
index 9567062584..74d01137a8 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-javascript.tsx
@@ -21,7 +21,7 @@ import { beautifyJs } from '@shared/models/beautify.models';
 
 class ThingsboardJavaScript extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onTidyJavascript = this.onTidyJavascript.bind(this);
     }
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx
index a17074eff6..9ab839616b 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-json.tsx
@@ -21,7 +21,7 @@ import { beautifyJs } from '@shared/models/beautify.models';
 
 class ThingsboardJson extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onTidyJson = this.onTidyJson.bind(this);
     }
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-markdown.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-markdown.tsx
index 838bf39151..57fb97ae23 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-markdown.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-markdown.tsx
@@ -19,7 +19,7 @@ import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-
 
 class ThingsboardMarkdown extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
 
-  constructor(props) {
+  constructor(props: JsonFormFieldProps) {
     super(props);
   }
 
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx
index e440f4b824..4616324de2 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-number.tsx
@@ -16,7 +16,8 @@
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
+import { ChangeEvent } from 'react';
 
 interface ThingsboardNumberState extends JsonFormFieldState {
   focused: boolean;
@@ -25,7 +26,7 @@ interface ThingsboardNumberState extends JsonFormFieldState {
 
 class ThingsboardNumber extends React.Component<JsonFormFieldProps, ThingsboardNumberState> {
 
-  constructor(props) {
+  constructor(props: JsonFormFieldProps) {
     super(props);
     this.preValidationCheck = this.preValidationCheck.bind(this);
     this.onBlur = this.onBlur.bind(this);
@@ -36,7 +37,7 @@ class ThingsboardNumber extends React.Component<JsonFormFieldProps, ThingsboardN
     };
   }
 
-  isNumeric(n) {
+  isNumeric(n: any) {
     return n === null || n === '' || !isNaN(n) && isFinite(n);
   }
 
@@ -48,10 +49,10 @@ class ThingsboardNumber extends React.Component<JsonFormFieldProps, ThingsboardN
     this.setState({focused: true});
   }
 
-  preValidationCheck(e) {
+  preValidationCheck(e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
     if (this.isNumeric(e.target.value)) {
       this.setState({
-        lastSuccessfulValue: e.target.value
+        lastSuccessfulValue: Number(e.target.value)
       });
       this.props.onChangeValidate(e);
     }
@@ -78,6 +79,7 @@ class ThingsboardNumber extends React.Component<JsonFormFieldProps, ThingsboardN
     return (
       <div>
         <TextField
+          variant={'standard'}
           className={fieldClass}
           label={this.props.form.title}
           type='number'
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx
index 6b7bb5034c..99031ff480 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-radios.tsx
@@ -15,16 +15,16 @@
  */
 import * as React from 'react';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { FormLabel, Radio, RadioGroup } from '@material-ui/core';
-import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { FormLabel, Radio, RadioGroup } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
 import ThingsboardBaseComponent from '@shared/components/json-form/react/json-form-base-component';
 
 class ThingsboardRadios extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
   render() {
     const items = this.props.form.titleMap.map((item, index) => {
       return (
-          <FormControlLabel value={item.value} control={<Radio />} label={item.name} key={index} />
+          <FormControlLabel value={item.value} control={<Radio color={'secondary'} />} label={item.name} key={index} />
       );
     });
 
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx
index 4af321087d..ee21674b94 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-rc-select.tsx
@@ -32,7 +32,7 @@ interface ThingsboardRcSelectState extends JsonFormFieldState {
 
 class ThingsboardRcSelect extends React.Component<JsonFormFieldProps, ThingsboardRcSelectState> {
 
-    constructor(props) {
+    constructor(props: JsonFormFieldProps) {
         super(props);
         this.onSelect = this.onSelect.bind(this);
         this.onDeselect = this.onDeselect.bind(this);
@@ -96,7 +96,7 @@ class ThingsboardRcSelect extends React.Component<JsonFormFieldProps, Thingsboar
         return index;
     }
 
-    onSelect(value: KeyLabelItem, option) {
+    onSelect(value: KeyLabelItem) {
         if (this.props.form.schema.type === 'array') {
             const v = this.state.currentValue as KeyLabelItem[];
             v.push(this.keyToCurrentValue(value.key, false) as KeyLabelItem);
@@ -110,7 +110,7 @@ class ThingsboardRcSelect extends React.Component<JsonFormFieldProps, Thingsboar
         }
     }
 
-    onDeselect(value: KeyLabelItem, option) {
+    onDeselect(value: KeyLabelItem) {
         if (this.props.form.schema.type === 'array') {
             const v = this.state.currentValue as KeyLabelItem[];
             const index = this.keyIndex(v, value.key);
@@ -134,10 +134,10 @@ class ThingsboardRcSelect extends React.Component<JsonFormFieldProps, Thingsboar
 
     render() {
 
-        let options: JSX.Element[] = [];
+        let options: React.JSX.Element[] = [];
         if (this.state.items && this.state.items.length > 0) {
-            options = this.state.items.map((item, idx) => (
-              <Option key={idx} value={item.value}>{item.label}</Option>
+            options = this.state.items.map((item) => (
+              <Option key={item.value} value={item.value}>{item.label}</Option>
             ));
         }
 
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx
index 57fb235212..a56054a614 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-react.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import * as React from 'react';
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import thingsboardTheme from './styles/thingsboardTheme';
 import ThingsboardSchemaForm from './json-form-schema-form';
 import { JsonFormProps } from './json-form.models';
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx
index 1e641493b0..5ce35ae96f 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-schema-form.tsx
@@ -46,14 +46,15 @@ import _ from 'lodash';
 import tinycolor from 'tinycolor2';
 import { GroupInfo } from '@shared/models/widget.models';
 import ThingsboardMarkdown from '@shared/components/json-form/react/json-form-markdown';
-import { MouseEvent } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 
 class ThingsboardSchemaForm extends React.Component<JsonFormProps, any> {
 
   private hasConditions: boolean;
+  private conditionFunction: Function;
   private readonly mapper: {[type: string]: any};
 
-  constructor(props) {
+  constructor(props: JsonFormProps) {
     super(props);
 
     this.mapper = {
@@ -121,7 +122,7 @@ class ThingsboardSchemaForm extends React.Component<JsonFormProps, any> {
           onIconClick: OnIconClickFn,
           onToggleFullscreen: onToggleFullscreenFn,
           onHelpClick: onHelpClickFn,
-          mapper: {[type: string]: any}): JSX.Element {
+          mapper: {[type: string]: any}): React.JSX.Element {
     const type = form.type;
     const Field = this.mapper[type];
     if (!Field) {
@@ -130,8 +131,10 @@ class ThingsboardSchemaForm extends React.Component<JsonFormProps, any> {
     }
     if (form.condition) {
       this.hasConditions = true;
-      // tslint:disable-next-line:no-eval
-      if (eval(form.condition) === false) {
+      if (!this.conditionFunction) {
+        this.conditionFunction = new Function('form', 'model', 'index', `return ${form.condition};`);
+      }
+      if (this.conditionFunction(form, model, index) === false) {
         return null;
       }
     }
@@ -143,13 +146,13 @@ class ThingsboardSchemaForm extends React.Component<JsonFormProps, any> {
                   mapper={mapper} builder={this.builder}/>;
   }
 
-  createSchema(theForm: any[]): JSX.Element {
+  createSchema(theForm: any[]): React.JSX.Element {
     const merged = JsonFormUtils.merge(this.props.schema, theForm, this.props.ignore, this.props.option);
     let mapper = this.mapper;
     if (this.props.mapper) {
       mapper = _.merge(this.mapper, this.props.mapper);
     }
-    const forms = merged.map(function(form, index) {
+    const forms: ReactNode[] = merged.map(function(form: JsonFormData, index: number) {
       return this.builder(form, this.props.model, index, this.onChange, this.onColorClick,
         this.onIconClick, this.onToggleFullscreen, this.onHelpClick, mapper);
     }.bind(this));
@@ -166,7 +169,7 @@ class ThingsboardSchemaForm extends React.Component<JsonFormProps, any> {
 
   render() {
     if (this.props.groupInfoes && this.props.groupInfoes.length > 0) {
-      const content: JSX.Element[] = [];
+      const content: React.JSX.Element[] = [];
       for (const info of this.props.groupInfoes) {
         const forms = this.createSchema(this.props.form[info.formIndex]);
         const item = <ThingsboardSchemaGroup key={content.length} forms={forms} info={info}></ThingsboardSchemaGroup>;
@@ -182,7 +185,7 @@ export default ThingsboardSchemaForm;
 
 interface ThingsboardSchemaGroupProps {
   info: GroupInfo;
-  forms: JSX.Element;
+  forms: React.JSX.Element;
 }
 
 interface ThingsboardSchemaGroupState {
@@ -190,14 +193,14 @@ interface ThingsboardSchemaGroupState {
 }
 
 class ThingsboardSchemaGroup extends React.Component<ThingsboardSchemaGroupProps, ThingsboardSchemaGroupState> {
-  constructor(props) {
+  constructor(props: ThingsboardSchemaGroupProps) {
     super(props);
     this.state = {
       showGroup: true
     };
   }
 
-  toogleGroup(index) {
+  toogleGroup() {
     this.setState({
       showGroup: !this.state.showGroup
     });
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx
index ea59b73791..46da881e38 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-select.tsx
@@ -15,11 +15,12 @@
  */
 import * as React from 'react';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import ThingsboardBaseComponent from '@shared/components/json-form/react/json-form-base-component';
+import { isObject } from '@core/utils';
 
 interface ThingsboardSelectState extends JsonFormFieldState {
   currentValue: any;
@@ -27,34 +28,39 @@ interface ThingsboardSelectState extends JsonFormFieldState {
 
 class ThingsboardSelect extends React.Component<JsonFormFieldProps, ThingsboardSelectState> {
 
-  constructor(props) {
-    super(props);
-    this.onSelected = this.onSelected.bind(this);
-    const possibleValue = this.getModelKey(this.props.model, this.props.form.key);
-    this.state = {
-      currentValue: this.props.model !== undefined && possibleValue ? possibleValue : this.props.form.titleMap != null ?
-        this.props.form.titleMap[0].value : ''
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.model && nextProps.form.key) {
-      this.setState({
-        currentValue: this.getModelKey(nextProps.model, nextProps.form.key)
-          || (nextProps.form.titleMap != null ? nextProps.form.titleMap[0].value : '')
-      });
+  static getDerivedStateFromProps(props: JsonFormFieldProps) {
+    if (props.model && props.form.key) {
+      return {
+        currentValue: ThingsboardSelect.getModelKey(props.model, props.form.key)
+          || (props.form.titleMap != null ? props.form.titleMap[0].value : '')
+      }
     }
   }
 
-  getModelKey(model, key) {
+  static getModelKey(model: any, key: (string | number)[]) {
     if (Array.isArray(key)) {
-      return key.reduce((cur, nxt) => (cur[nxt] || {}), model);
+      const res = key.reduce((cur, nxt) => (cur[nxt] || {}), model);
+      if (res && isObject(res)) {
+        return undefined;
+      } else {
+        return res;
+      }
     } else {
       return model[key];
     }
   }
 
-  onSelected(event: React.ChangeEvent<{ name?: string; value: any }>) {
+  constructor(props: JsonFormFieldProps) {
+    super(props);
+    this.onSelected = this.onSelected.bind(this);
+    const possibleValue = ThingsboardSelect.getModelKey(this.props.model, this.props.form.key);
+    this.state = {
+      currentValue: this.props.model !== undefined && possibleValue ? possibleValue : this.props.form.titleMap != null ?
+        this.props.form.titleMap[0].value : ''
+    };
+  }
+
+  onSelected(event: SelectChangeEvent<any>) {
 
     this.setState({
       currentValue: event.target.value
@@ -72,8 +78,9 @@ class ThingsboardSelect extends React.Component<JsonFormFieldProps, ThingsboardS
       <FormControl className={this.props.form.htmlClass}
                    disabled={this.props.form.readonly}
                    fullWidth={true}>
-        <InputLabel htmlFor='select-field'>{this.props.form.title}</InputLabel>
+        <InputLabel variant={'standard'} htmlFor='select-field'>{this.props.form.title}</InputLabel>
         <Select
+          variant={'standard'}
           value={this.state.currentValue}
           onChange={this.onSelected}>
           {menuItems}
diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx
index cd5856d4c8..6fad3f3480 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx
+++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-text.tsx
@@ -15,7 +15,7 @@
  */
 import * as React from 'react';
 import ThingsboardBaseComponent from './json-form-base-component';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 
 interface ThingsboardTextState extends JsonFormFieldState {
@@ -24,7 +24,7 @@ interface ThingsboardTextState extends JsonFormFieldState {
 
 class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTextState> {
 
-  constructor(props) {
+  constructor(props: JsonFormFieldProps) {
     super(props);
     this.onBlur = this.onBlur.bind(this);
     this.onFocus = this.onFocus.bind(this);
@@ -67,6 +67,7 @@ class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTex
     return (
       <div>
         <TextField
+          variant={'standard'}
           className={fieldClass}
           type={this.props.form.type}
           label={this.props.form.title}
@@ -79,7 +80,7 @@ class ThingsboardText extends React.Component<JsonFormFieldProps, ThingsboardTex
           defaultValue={this.props.value}
           disabled={this.props.form.readonly}
           rows={rows}
-          rowsMax={rowsMax}
+          maxRows={rowsMax}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           style={this.props.form.style || {width: '100%', minHeight: minHeight + 'px'}}/>
diff --git a/ui-ngx/src/app/shared/components/json-form/react/styles/thingsboardTheme.ts b/ui-ngx/src/app/shared/components/json-form/react/styles/thingsboardTheme.ts
index 09bac35f86..ab3497fd53 100644
--- a/ui-ngx/src/app/shared/components/json-form/react/styles/thingsboardTheme.ts
+++ b/ui-ngx/src/app/shared/components/json-form/react/styles/thingsboardTheme.ts
@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import { indigo, deepOrange } from '@material-ui/core/colors';
-import { ThemeOptions } from '@material-ui/core/styles';
-import { PaletteOptions } from '@material-ui/core/styles/createPalette';
+import { indigo, deepOrange } from '@mui/material/colors';
+import { ThemeOptions } from '@mui/material/styles';
+import { PaletteOptions } from '@mui/material/styles/createPalette';
 import { mergeDeep } from '@core/utils';
 
 const PRIMARY_COLOR = '#305680';
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index 81b6d386fd..0aa28474d5 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
+<div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
-     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" class="tb-json-object-toolbar">
+     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
+  <div class="tb-json-object-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding"
-           [ngClass]="{'tb-required': jsonRequired,
-                       'tb-readonly': readonly,
-                       'tb-error': !objectValid}">{{ label }}</label>
-    <span fxFlex></span>
+           [class]="{'tb-required': jsonRequired,
+                     'tb-readonly': readonly,
+                     'tb-error': !objectValid}">{{ label }}</label>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
@@ -39,7 +39,7 @@
     </button>
   </div>
   <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
-       class="tb-json-object-panel" fxLayout="column">
-    <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
+       class="tb-json-object-panel flex flex-col">
+    <div #jsonEditor id="tb-json-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/json-object-view.component.html b/ui-ngx/src/app/shared/components/json-object-view.component.html
index d87b4a9e00..74d76d9b8f 100644
--- a/ui-ngx/src/app/shared/components/json-object-view.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-view.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}">
+<div style="background: #fff;" [class.fill-height]="fillHeight">
   <label class="tb-title no-padding" *ngIf="label">{{ label }}</label>
-  <span fxFlex></span>
-  <div #jsonViewer id="tb-json-view" [ngClass]="{'fill-height': fillHeight}"></div>
+  <span class="flex-1"></span>
+  <div #jsonViewer id="tb-json-view" [class.fill-height]="fillHeight"></div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/kv-map.component.html b/ui-ngx/src/app/shared/components/kv-map.component.html
index e3a22a27d3..36c523d404 100644
--- a/ui-ngx/src/app/shared/components/kv-map.component.html
+++ b/ui-ngx/src/app/shared/components/kv-map.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" class="tb-kv-map" [formGroup]="kvListFormGroup">
+<section class="tb-kv-map flex flex-col" [formGroup]="kvListFormGroup">
   <label translate class="tb-title">{{ titleText }}</label>
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"
+  <div class="flex flex-row items-center justify-start gap-2"
        formArrayName="keyVals"
        *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
-    <mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+    <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
       <input [formControl]="keyValControl.get('key')" matInput required
              placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+    <mat-form-field class="mat-block flex-1" subscriptSizing="{{ subscriptSizing }}">
       <input [formControl]="keyValControl.get('value')" matInput required
              placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
     </mat-form-field>
     <button mat-icon-button color="primary"
-            [fxShow]="!disabled"
+            [class.!hidden]="disabled"
             type="button"
             (click)="removeKeyVal($index)"
             [disabled]="isLoading$ | async"
@@ -38,12 +38,14 @@
       <mat-icon>close</mat-icon>
     </button>
   </div>
-  <span [fxShow]="!keyValsFormArray().length"
-        fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-        class="no-data-found" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
+  <span [class]="{
+          'disabled': disabled,
+          '!hidden': keyValsFormArray().length
+        }"
+        class="no-data-found flex items-center justify-center" translate>{{noDataText ? noDataText : 'key-val.no-data'}}</span>
   <div style="margin-top: 8px;">
     <button mat-button mat-raised-button color="primary"
-            [fxShow]="!disabled"
+            [class.!hidden]="disabled"
             [disabled]="isLoading$ | async"
             (click)="addKeyVal()"
             type="button"
diff --git a/ui-ngx/src/app/shared/components/led-light.component.html b/ui-ngx/src/app/shared/components/led-light.component.html
index 4f197671fb..ca8dc6e86a 100644
--- a/ui-ngx/src/app/shared/components/led-light.component.html
+++ b/ui-ngx/src/app/shared/components/led-light.component.html
@@ -15,4 +15,4 @@
     limitations under the License.
 
 -->
-<div id="canvas_container" [ngStyle]="{width: size + 'px', height: size + 'px'}"></div>
+<div id="canvas_container" [style.width]="size + 'px'" [style.height]="size + 'px'"></div>
diff --git a/ui-ngx/src/app/shared/components/logo.component.html b/ui-ngx/src/app/shared/components/logo.component.html
index a6fd077636..f547f9b44f 100644
--- a/ui-ngx/src/app/shared/components/logo.component.html
+++ b/ui-ngx/src/app/shared/components/logo.component.html
@@ -15,5 +15,5 @@
     limitations under the License.
 
 -->
-<img (click)="gotoThingsboard()" fxFlex [src]="logo"
-         aria-label="logo" class="tb-logo-title"/>
+<img (click)="gotoThingsboard()" [src]="logo"
+         aria-label="logo" class="tb-logo-title flex-1"/>
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html
index 1cc1a46731..5f1005ebb9 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.html
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<div class="markdown-content" [ngClass]="{'tb-edit-mode': !readonly}"
+<div class="markdown-content" [class.tb-edit-mode]="!readonly"
      tb-fullscreen [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="markdown-editor-toolbar">
-    <label class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
-    <button [fxShow]="!editorMode"
+  <div style="min-height: 40px;" class="markdown-editor-toolbar flex flex-row items-center justify-start">
+    <label class="tb-title no-padding" [class]="{'tb-error': !disabled && required && !markdownValue, 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
+    <button [class.!hidden]="editorMode"
             type="button"
             mat-button (click)="toggleEditMode()">{{ 'markdown.edit' | translate }}</button>
-    <button [fxShow]="editorMode"
+    <button [class.!hidden]="!editorMode"
             type="button"
             mat-button (click)="toggleEditMode()">{{ 'markdown.preview' | translate }}</button>
     <div *ngIf = "helpId" [tb-help-popup]="helpId"></div>
@@ -38,9 +38,9 @@
       </div>
     </fieldset>
   </div>
-  <div [fxShow]="!readonly && !disabled" class="markdown-content-editor">
-    <div [fxShow]="editorMode" #markdownEditor class="tb-markdown-editor"></div>
-    <div [fxShow]="!editorMode" class="tb-markdown-view-container">
+  <div [class.!hidden]="readonly || disabled" class="markdown-content-editor">
+    <div [class.!hidden]="!editorMode" #markdownEditor class="tb-markdown-editor"></div>
+    <div [class.!hidden]="editorMode" class="tb-markdown-view-container">
       <tb-markdown [data]="renderValue" lineNumbers fallbackToPlainMarkdown></tb-markdown>
     </div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/markdown.component.html b/ui-ngx/src/app/shared/components/markdown.component.html
index 72ae432335..2f791f495b 100644
--- a/ui-ngx/src/app/shared/components/markdown.component.html
+++ b/ui-ngx/src/app/shared/components/markdown.component.html
@@ -22,5 +22,5 @@
                                                       background: #efefef;">
   {{error}}
 </div>
-<div #fallbackElement [fxShow]="usePlainMarkdown || (error && fallbackToPlainMarkdown)" class="tb-markdown-view" [ngClass]="markdownClass" [ngStyle]="style">
+<div #fallbackElement [class.!hidden]="!usePlainMarkdown && !(error && fallbackToPlainMarkdown)" class="tb-markdown-view" [class]="markdownClass" [style]="style">
 </div>
diff --git a/ui-ngx/src/app/shared/components/markdown.component.ts b/ui-ngx/src/app/shared/components/markdown.component.ts
index d890817d04..667b973d6d 100644
--- a/ui-ngx/src/app/shared/components/markdown.component.ts
+++ b/ui-ngx/src/app/shared/components/markdown.component.ts
@@ -113,7 +113,7 @@ export class TbMarkdownComponent implements OnChanges {
     if (this.markdownClass) {
       markdownClass += ` ${this.markdownClass}`;
     }
-    let template = `<div [ngStyle]="style" class="${markdownClass}">${compiled}</div>`;
+    let template = `<div [style]="style" class="${markdownClass}">${compiled}</div>`;
     if (this.containerClass) {
       template = `<div class="${this.containerClass}" style="width: 100%; height: 100%;">${template}</div>`;
     }
@@ -127,7 +127,7 @@ export class TbMarkdownComponent implements OnChanges {
       const preHtml = preElements.item(i).outerHTML.replace('ngnonbindable=""', 'ngNonBindable');
       template = template.replace(matches[i][0], preHtml);
     }
-    template = this.sanitizeCurlyBraces(template);
+    template = this.sanitize(template);
     this.markdownContainer.clear();
     let styles: string[] = [];
     let readyObservable: Observable<void>;
@@ -259,8 +259,8 @@ export class TbMarkdownComponent implements OnChanges {
     }
   }
 
-  private sanitizeCurlyBraces(template: string): string {
-    return template.replace(/{/g, '&#123;').replace(/}/g, '&#125;');
+  private sanitize(template: string): string {
+    return template.replace(/{/g, '&#123;').replace(/}/g, '&#125;').replace(/@/g, '&#64;');
   }
 
   private destroyMarkdownInstanceResources() {
diff --git a/ui-ngx/src/app/shared/components/marked-options.service.ts b/ui-ngx/src/app/shared/components/marked-options.service.ts
index e2201a4aa7..2b05067758 100644
--- a/ui-ngx/src/app/shared/components/marked-options.service.ts
+++ b/ui-ngx/src/app/shared/components/marked-options.service.ts
@@ -19,7 +19,7 @@ import { Inject, Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DOCUMENT } from '@angular/common';
 import { WINDOW } from '@core/services/window.service';
-import { Tokenizer, marked } from 'marked';
+import { Tokens, marked, TokenizerObject } from 'marked';
 import { Clipboard } from '@angular/cdk/clipboard';
 
 const copyCodeBlock = '{:copy-code}';
@@ -31,7 +31,7 @@ const targetBlankBlock = '{:target=&quot;_blank&quot;}';
 @Injectable({
   providedIn: 'root'
 })
-export class MarkedOptionsService extends MarkedOptions {
+export class MarkedOptionsService implements MarkedOptions {
 
   renderer = new MarkedRenderer();
   headerIds = true;
@@ -50,10 +50,9 @@ export class MarkedOptionsService extends MarkedOptions {
               private clipboardService: Clipboard,
               @Inject(WINDOW) private readonly window: Window,
               @Inject(DOCUMENT) private readonly document: Document) {
-    super();
     // @ts-ignore
-    const tokenizer: Tokenizer = {
-      autolink(src: string, mangle: (cap: string) => string): marked.Tokens.Link {
+    const tokenizer: TokenizerObject = {
+      autolink(src: string): Tokens.Link {
         if (src.endsWith(copyCodeBlock)) {
           return undefined;
         } else {
@@ -61,7 +60,7 @@ export class MarkedOptionsService extends MarkedOptions {
           return false;
         }
       },
-      url(src: string, mangle: (cap: string) => string): marked.Tokens.Link {
+      url(src: string): Tokens.Link {
         if (src.endsWith(copyCodeBlock)) {
           return undefined;
         } else {
diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.html b/ui-ngx/src/app/shared/components/material-icon-select.component.html
index 1f5ace3cac..6f3920c14c 100644
--- a/ui-ngx/src/app/shared/components/material-icon-select.component.html
+++ b/ui-ngx/src/app/shared/components/material-icon-select.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div *ngIf="!asBoxInput; else boxInput"  fxLayout="row" [formGroup]="materialIconFormGroup">
-  <tb-icon class="icon-value" [ngStyle]="color ? { color: color } : {}" (click)="openIconDialog()">{{materialIconFormGroup.get('icon').value}}</tb-icon>
-  <mat-form-field fxFlex>
+<div *ngIf="!asBoxInput; else boxInput"  class="flex flex-row" [formGroup]="materialIconFormGroup">
+  <tb-icon class="icon-value" [style]="color ? { color: color } : {}" (click)="openIconDialog()">{{materialIconFormGroup.get('icon').value}}</tb-icon>
+  <mat-form-field class="flex-1">
     <mat-label>{{ label }}</mat-label>
     <input [required]="required" matInput formControlName="icon" (mousedown)="openIconDialog()">
     <button *ngIf="iconClearButton"
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html
index b732e87a32..98a0268a99 100644
--- a/ui-ngx/src/app/shared/components/material-icons.component.html
+++ b/ui-ngx/src/app/shared/components/material-icons.component.html
@@ -27,8 +27,10 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-form-field>
-  <cdk-virtual-scroll-viewport [fxShow]="!notFound" #iconsPanel
-                               [itemSize]="iconsRowHeight" class="tb-material-icons-viewport" [ngStyle]="{width: iconsPanelWidth, height: iconsPanelHeight}">
+  <cdk-virtual-scroll-viewport [class.!hidden]="notFound" #iconsPanel
+                               [itemSize]="iconsRowHeight" class="tb-material-icons-viewport"
+                               [style.width]="iconsPanelWidth"
+                               [style.height]="iconsPanelHeight">
     <div *cdkVirtualFor="let iconRow of iconRows$ | async" class="tb-material-icons-row">
       <ng-container *ngFor="let icon of iconRow">
         <button *ngIf="icon.name === selectedIcon"
@@ -54,7 +56,7 @@
     </div>
   </cdk-virtual-scroll-viewport>
   <ng-container *ngIf="notFound">
-    <div class="tb-no-data-available" [ngStyle]="{width: iconsPanelWidth}">
+    <div class="tb-no-data-available" [style.width]="iconsPanelWidth">
       <div class="tb-no-data-bg"></div>
       <div class="tb-no-data-text">{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}</div>
     </div>
@@ -68,7 +70,7 @@
             [disabled]="!selectedIcon">
       {{ 'action.clear' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button *ngIf="!showAllSubject.value" class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)">
       {{ 'action.show-more' | translate }}
     </button>
diff --git a/ui-ngx/src/app/shared/components/multiple-image-input.component.html b/ui-ngx/src/app/shared/components/multiple-image-input.component.html
index d76e02f935..635b27aa5c 100644
--- a/ui-ngx/src/app/shared/components/multiple-image-input.component.html
+++ b/ui-ngx/src/app/shared/components/multiple-image-input.component.html
@@ -16,13 +16,13 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !safeImageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
+  <label class="tb-title" *ngIf="label" [class]="{'tb-error': !disabled && (required && !safeImageUrls.length), 'tb-required': !disabled && required}">{{label}}</label>
   <ng-container #flow="flow"
                 [flowConfig]="{allowDuplicateUploads: true}">
     <div class="tb-image-select-container" #flowDrop="flowDrop" flowDrop [flow]="flow.flowJs">
-      <div class="images-container" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
+      <div class="images-container flex flex-row gap-2" dndDropzone [dndHorizontal]="true" dndEffectAllowed="move"
            [dndDisableIf]="disabled" (dndDrop)="imageDrop($event)"
-           fxLayout="row" fxLayoutGap="8px" [ngClass]="{'no-images': !safeImageUrls.length}">
+           [class.no-images]="!safeImageUrls.length">
         <div dndPlaceholderRef class="image-card image-dnd-placeholder"></div>
         <div *ngFor="let safeImageUrl of safeImageUrls; let $index = index;"
              (dndStart)="imageDragStart($index)"
@@ -30,10 +30,10 @@
              [dndDraggable]="safeImageUrl"
              [dndDisableIf]="disabled"
              dndEffectAllowed="move"
-             [ngClass]="{'image-dragging': dragIndex === $index}"
-             class="image-card" fxLayout="column">
+             [class.image-dragging]="dragIndex === $index"
+             class="image-card flex flex-col">
           <span class="image-title">{{ 'image-input.images' | translate }} [{{ $index }}]</span>
-          <div class="image-content-container" fxLayout="row">
+          <div class="image-content-container flex flex-row">
             <div dndHandle *ngIf="!disabled" class="tb-image-action-container tb-drag-handle">
               <mat-icon color="primary">drag_indicator</mat-icon>
             </div>
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html
index 73e549a686..e145c121c7 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.html
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="space-between start" class="notification"
-         [ngStyle]="{borderColor: notificationColor(), backgroundColor: notificationBackgroundColor()}">
+<section class="notification flex flex-row items-start justify-between"
+         [style]="{borderColor: notificationColor(), backgroundColor: notificationBackgroundColor()}">
   <div *ngIf="showIcon; else defaultIcon">
-    <tb-icon class="icon" [ngStyle]="{color: notification.additionalConfig.icon.color}">
+    <tb-icon class="icon" [style.color]="notification.additionalConfig.icon.color">
       {{ notification.additionalConfig.icon.icon }}
     </tb-icon>
   </div>
   <ng-template #defaultIcon>
-    <tb-icon class="icon" *ngIf="notificationTypeIcons.get(notification.type)" [ngStyle]="notificationIconColor()">
+    <tb-icon class="icon" *ngIf="notificationTypeIcons.get(notification.type)" [style]="notificationIconColor()">
       {{ notificationTypeIcons.get(notification.type) }}
     </tb-icon>
   </ng-template>
-  <div class="content" fxFlex>
+  <div class="content flex-1">
     <div class="title" [innerHTML]="(title | safe: 'html' )"></div>
     <div class="message" [innerHTML]="(message  | safe: 'html' )"></div>
     <button *ngIf="showButton" mat-stroked-button class="button" color="primary"
@@ -35,15 +35,15 @@
       {{ buttonLabel }}
     </button>
   </div>
-  <div class="description" fxLayout="column" fxLayoutAlign="start end">
+  <div class="description flex flex-col items-end justify-start">
     <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
     <button mat-icon-button (click)="markRead($event)" *ngIf="!hideMarkAsReadButton"
             matTooltip="{{ 'notification.mark-as-read' | translate }}" matTooltipPosition="above">
       <mat-icon>check_circle_outline</mat-icon>
     </button>
     <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM && !notification.info.cleared"
-         [ngStyle]="{backgroundColor: alarmColorSeverity(0.06)}">
-      <span [ngStyle]="notificationIconColor()" class="severity">
+         [style.background-color]="alarmColorSeverity(0.06)">
+      <span [style]="notificationIconColor()" class="severity">
         {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
       </span>
     </div>
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss
index 044680109d..23f3f99047 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.scss
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.scss
@@ -17,7 +17,6 @@
 
   .notification {
     padding: 10px 0 10px 10px;
-    display: block;
     border: 1px solid;
     border-radius: 4px;
     margin: 4px;
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
index b85a9074c4..1dd065c94d 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
@@ -24,7 +24,7 @@
          [required]="required"
          [matAutocomplete]="packageAutocomplete"
          [matAutocompleteDisabled]="disabled"
-         [fxShow]="!showDetailsPageLink || !usePackageLink || !disabled || !otaPackageFormGroup.get('packageId').value">
+         [class.!hidden]="showDetailsPageLink && usePackageLink && disabled && otaPackageFormGroup.get('packageId').value">
   <a *ngIf="showDetailsPageLink && usePackageLink && otaPackageFormGroup.get('packageId').value && disabled"
      aria-label="Open ota package" [routerLink]=packageURL>
     {{ displayPackageFn(otaPackageFormGroup.get('packageId').value) }}
diff --git a/ui-ngx/src/app/shared/components/page.component.ts b/ui-ngx/src/app/shared/components/page.component.ts
index 4a5ee06cbc..ec6864e227 100644
--- a/ui-ngx/src/app/shared/components/page.component.ts
+++ b/ui-ngx/src/app/shared/components/page.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Directive, OnDestroy } from '@angular/core';
+import { Directive, inject, OnDestroy } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Observable, Subscription } from 'rxjs';
@@ -25,13 +25,15 @@ import { AbstractControl } from '@angular/forms';
 @Directive()
 export abstract class PageComponent implements OnDestroy {
 
+  protected store: Store<AppState> = inject(Store<AppState>);
+
   isLoading$: Observable<boolean>;
   loadingSubscription: Subscription;
   disabledOnLoadFormControls: Array<AbstractControl> = [];
 
   showMainLoadingBar = true;
 
-  protected constructor(protected store: Store<AppState>) {
+  protected constructor(...args: unknown[]) {
     this.isLoading$ = this.store.pipe(delay(0), select(selectIsLoading), share());
   }
 
diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts
index f0aa4981af..32a548ce33 100644
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@@ -19,8 +19,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentFactory,
-  ComponentFactoryResolver,
   ComponentRef,
   Directive,
   ElementRef,
@@ -35,6 +33,7 @@ import {
   Renderer2,
   SimpleChanges,
   TemplateRef,
+  Type,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
@@ -44,7 +43,8 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedOverlayPositionChange,
-  ConnectionPositionPair, NoopScrollStrategy
+  ConnectionPositionPair,
+  NoopScrollStrategy
 } from '@angular/cdk/overlay';
 import { Subject, Subscription } from 'rxjs';
 import {
@@ -94,7 +94,6 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
   // eslint-disable-next-line @angular-eslint/no-output-rename
   @Output('tbPopoverVisibleChange') readonly visibleChange = new EventEmitter<boolean>();
 
-  componentFactory: ComponentFactory<TbPopoverComponent> = this.resolver.resolveComponentFactory(TbPopoverComponent);
   component?: TbPopoverComponent;
 
   private readonly destroy$ = new Subject<void>();
@@ -105,7 +104,6 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
   constructor(
     private elementRef: ElementRef,
     private hostView: ViewContainerRef,
-    private resolver: ComponentFactoryResolver,
     private renderer: Renderer2
   ) {}
 
@@ -150,7 +148,7 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
   }
 
   private createComponent(): void {
-    const componentRef = this.hostView.createComponent(this.componentFactory);
+    const componentRef = this.hostView.createComponent(TbPopoverComponent);
 
     this.component = componentRef.instance;
 
@@ -330,25 +328,25 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
           class="tb-popover"
           [class.strict-position]="strictPosition"
           [class.tb-popover-rtl]="dir === 'rtl'"
-          [ngClass]="classMap"
-          [ngStyle]="tbOverlayStyle"
+          [class]="classMap"
+          [style]="tbOverlayStyle"
         >
           <div class="tb-popover-content">
             <div class="tb-popover-arrow">
               <span class="tb-popover-arrow-content"></span>
             </div>
-            <div class="tb-popover-inner" [ngStyle]="tbPopoverInnerStyle" role="tooltip">
+            <div class="tb-popover-inner" [style]="tbPopoverInnerStyle" role="tooltip">
               <div *ngIf="tbShowCloseButton" class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
               <div style="width: 100%; height: 100%;">
-                <div class="tb-popover-inner-content"  [ngStyle]="tbPopoverInnerContentStyle"
+                <div class="tb-popover-inner-content"  [style]="tbPopoverInnerContentStyle"
                      [class.strict-position]="strictPosition">
                   <ng-container *ngIf="tbContent">
                     <ng-container *tbStringTemplateOutlet="tbContent; context: tbComponentContext">
                       {{ tbContent }}
                     </ng-container>
                   </ng-container>
-                  <ng-container *ngIf="tbComponentFactory"
-                                [tbComponentOutlet]="tbComponentFactory"
+                  <ng-container *ngIf="tbComponent"
+                                [tbComponentOutlet]="tbComponent"
                                 [tbComponentInjector]="tbComponentInjector"
                                 [tbComponentOutletContext]="tbComponentContext"
                                 (componentChange)="onComponentChange($event)"
@@ -370,7 +368,7 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
   @ViewChild('popover', { static: false }) popover!: ElementRef<HTMLElement>;
 
   tbContent: string | TemplateRef<void> | null = null;
-  tbComponentFactory: ComponentFactory<T> | null = null;
+  tbComponent: Type<T> | null = null;
   tbComponentRef: ComponentRef<T> | null = null;
   tbComponentContext: any;
   tbComponentInjector: Injector | null = null;
@@ -678,7 +676,7 @@ export class TbPopoverComponent<T = any> implements OnDestroy, OnInit {
   }
 
   private isEmpty(): boolean {
-    return (this.tbComponentFactory instanceof ComponentFactory || this.tbContent instanceof TemplateRef)
+    return (this.tbComponent instanceof Type || this.tbContent instanceof TemplateRef)
       ? false : !isNotEmptyStr(this.tbContent);
   }
 }
diff --git a/ui-ngx/src/app/shared/components/popover.service.ts b/ui-ngx/src/app/shared/components/popover.service.ts
index 4b7e67a575..9da5944882 100644
--- a/ui-ngx/src/app/shared/components/popover.service.ts
+++ b/ui-ngx/src/app/shared/components/popover.service.ts
@@ -15,8 +15,6 @@
 ///
 
 import {
-  ComponentFactory,
-  ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
   Inject,
@@ -26,12 +24,7 @@ import {
   Type,
   ViewContainerRef
 } from '@angular/core';
-import {
-  PopoverPlacement,
-  PopoverPreferredPlacement,
-  PopoverWithTrigger,
-  StrictPopoverPlacement
-} from '@shared/components/popover.models';
+import { PopoverPreferredPlacement, PopoverWithTrigger } from '@shared/components/popover.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { ComponentType } from '@angular/cdk/portal';
 import { HELP_MARKDOWN_COMPONENT_TOKEN } from '@shared/components/tokens';
@@ -42,10 +35,7 @@ export class TbPopoverService {
 
   private popoverWithTriggers: PopoverWithTrigger[] = [];
 
-  componentFactory: ComponentFactory<TbPopoverComponent> = this.resolver.resolveComponentFactory(TbPopoverComponent);
-
-  constructor(private resolver: ComponentFactoryResolver,
-              @Inject(HELP_MARKDOWN_COMPONENT_TOKEN) private helpMarkdownComponent: ComponentType<any>) {
+  constructor(@Inject(HELP_MARKDOWN_COMPONENT_TOKEN) private helpMarkdownComponent: ComponentType<any>) {
   }
 
   hasPopover(trigger: Element): boolean {
@@ -64,7 +54,7 @@ export class TbPopoverService {
   }
 
   createPopoverRef(hostView: ViewContainerRef): ComponentRef<TbPopoverComponent> {
-    return hostView.createComponent(this.componentFactory);
+    return hostView.createComponent(TbPopoverComponent);
   }
 
   displayPopover<T>(trigger: Element, renderer: Renderer2, hostView: ViewContainerRef,
@@ -96,7 +86,7 @@ export class TbPopoverService {
     const originElementRef = new ElementRef(trigger);
     component.setOverlayOrigin(new CdkOverlayOrigin(originElementRef));
     component.tbPlacement = preferredPlacement;
-    component.tbComponentFactory = this.resolver.resolveComponentFactory(componentType);
+    component.tbComponent = componentType;
     component.tbComponentInjector = injector;
     component.tbComponentContext = context;
     component.tbOverlayStyle = overlayStyle;
@@ -134,7 +124,7 @@ export class TbPopoverService {
       const injector = Injector.create({
         parent: hostView.injector, providers: []
       });
-      const componentRef = hostView.createComponent(this.componentFactory);
+      const componentRef = hostView.createComponent(TbPopoverComponent);
       const component = componentRef.instance;
       this.popoverWithTriggers.push({
         trigger,
@@ -149,7 +139,7 @@ export class TbPopoverService {
       component.tbOverlayStyle = {...overlayStyle, opacity: '0' };
       component.setOverlayOrigin(new CdkOverlayOrigin(originElementRef));
       component.tbPlacement = preferredPlacement;
-      component.tbComponentFactory = this.resolver.resolveComponentFactory(this.helpMarkdownComponent);
+      component.tbComponent = this.helpMarkdownComponent;
       component.tbComponentInjector = injector;
       component.tbComponentContext = {
         helpId,
diff --git a/ui-ngx/src/app/shared/components/protobuf-content.component.html b/ui-ngx/src/app/shared/components/protobuf-content.component.html
index e4ef59437d..ff7871393d 100644
--- a/ui-ngx/src/app/shared/components/protobuf-content.component.html
+++ b/ui-ngx/src/app/shared/components/protobuf-content.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div style="background: #fff;" [ngClass]="{'fill-height': fillHeight}"
+<div class="flex flex-col" style="background: #fff;" [class.fill-height]="fillHeight"
      tb-fullscreen
-     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;" class="tb-protobuf-content-toolbar">
+     [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()">
+  <div style="height: 40px;" class="tb-protobuf-content-toolbar flex flex-row items-center justify-start">
     <label class="tb-title no-padding">{{ label }}</label>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button type="button"
             mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyProtobuf()">
       {{'js-func.tidy' | translate }}
@@ -37,7 +37,7 @@
     </fieldset>
   </div>
   <div id="tb-protobuf-panel" tb-toast toastTarget="{{toastTargetId}}"
-       class="tb-protobuf-content-panel" fxLayout="column">
-    <div #protobufEditor id="tb-protobuf-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
+       class="tb-protobuf-content-panel flex flex-col">
+    <div #protobufEditor id="tb-protobuf-input" [style]="editorStyle" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/public-api.ts b/ui-ngx/src/app/shared/components/public-api.ts
index 8aef3e83f7..8d7f825b5b 100644
--- a/ui-ngx/src/app/shared/components/public-api.ts
+++ b/ui-ngx/src/app/shared/components/public-api.ts
@@ -31,3 +31,4 @@ export * from './icon.component';
 export * from './hint-tooltip-icon.component';
 export * from './grid/scroll-grid-datasource';
 export * from './grid/scroll-grid.component';
+export * from './table/table-datasource.abstract';
diff --git a/ui-ngx/src/app/shared/components/script-lang.component.html b/ui-ngx/src/app/shared/components/script-lang.component.html
index 2afa16e743..a27b23dcc1 100644
--- a/ui-ngx/src/app/shared/components/script-lang.component.html
+++ b/ui-ngx/src/app/shared/components/script-lang.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div [formGroup]="scriptLangFormGroup" fxLayout="row" fxLayoutAlign="center">
+<div [formGroup]="scriptLangFormGroup" class="flex flex-row items-stretch justify-center">
   <mat-button-toggle-group class="tb-script-lang-toggle-group"
                            formControlName="scriptLang"
                            aria-label="Script language">
-    <mat-button-toggle fxFlex value="{{ scriptLanguage.TBEL }}">{{ 'rulenode.script-lang-tbel' | translate }}</mat-button-toggle>
-    <mat-button-toggle fxFlex value="{{ scriptLanguage.JS }}">
+    <mat-button-toggle class="flex-1" value="{{ scriptLanguage.TBEL }}">{{ 'rulenode.script-lang-tbel' | translate }}</mat-button-toggle>
+    <mat-button-toggle class="flex-1" value="{{ scriptLanguage.JS }}">
       {{ 'rulenode.script-lang-java-script' | translate }}
     </mat-button-toggle>
   </mat-button-toggle-group>
diff --git a/ui-ngx/src/app/shared/components/script-lang.component.scss b/ui-ngx/src/app/shared/components/script-lang.component.scss
index 8e47eac4a2..6818f74dd8 100644
--- a/ui-ngx/src/app/shared/components/script-lang.component.scss
+++ b/ui-ngx/src/app/shared/components/script-lang.component.scss
@@ -49,10 +49,15 @@
     margin-left: 2px;
     margin-right: 2px;
   }
-  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-    line-height: 32px;
-    font-size: 16px;
-    font-weight: 500;
+  .mat-button-toggle-appearance-standard {
+    .mat-button-toggle-label-content {
+      line-height: 32px;
+      font-size: 16px;
+      font-weight: 500;
+      .mat-pseudo-checkbox {
+        display: none;
+      }
+    }
   }
   .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
     opacity: .01;
diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.html b/ui-ngx/src/app/shared/components/snack-bar-component.html
index ca70f6b476..f99e0ba2a7 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.html
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.html
@@ -15,28 +15,25 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center"
+<div class="flex flex-row items-center justify-start"
      [@showHideAnimation]="{value: animationState, params: animationParams}"
      (@showHideAnimation.done)="onHideFinished($event)"
-     [ngClass]="{
-        'tb-toast': !notification.modern,
-        'tb-modern-toast': notification.modern,
-        'error-toast': notification.type === 'error',
-        'warn-toast': notification.type === 'warn',
-        'success-toast': notification.type === 'success',
-        'info-toast': notification.type === 'info'
-     }">
+     [class.tb-toast]="!notification.modern"
+     [class.tb-modern-toast]="notification.modern"
+     [class.error-toast]="notification.type === 'error'"
+     [class.warn-toast]="notification.type === 'warn'"
+     [class.success-toast]="notification.type === 'success'"
+     [class.info-toast]="notification.type === 'info'">
   <ng-container *ngIf="!notification.modern; else modern">
     <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
     <button #actionButton type="button" mat-button (click)="action($event)">{{ 'action.close' | translate }}</button>
   </ng-container>
   <ng-template #modern>
-    <div class="tb-modern-toast-panel" [ngClass]="{
-        'error-toast': notification.type === 'error',
-        'warn-toast': notification.type === 'warn',
-        'success-toast': notification.type === 'success',
-        'info-toast': notification.type === 'info'
-     }">
+    <div class="tb-modern-toast-panel"
+         [class.error-toast]="notification.type === 'error'"
+         [class.warn-toast]="notification.type === 'warn'"
+         [class.success-toast]="notification.type === 'success'"
+         [class.info-toast]="notification.type === 'info'">
       <div class="toast-text" [innerHTML]="notification.message | safe: 'html'"></div>
       <button #actionButton class="tb-mat-20" mat-icon-button (click)="action($event)"><mat-icon>close</mat-icon></button>
     </div>
diff --git a/ui-ngx/src/app/shared/components/socialshare-panel.component.html b/ui-ngx/src/app/shared/components/socialshare-panel.component.html
index affe63314c..da9512ec7d 100644
--- a/ui-ngx/src/app/shared/components/socialshare-panel.component.html
+++ b/ui-ngx/src/app/shared/components/socialshare-panel.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutGap="12px" [fxHide]="isShareLinkLocal()">
+<div class="flex flex-row gap-3"
+     [class.!hidden]="isShareLinkLocal()">
   <button mat-mini-fab color="primary"
           shareButton="facebook"
           title="{{ shareTitle }}"
@@ -26,7 +27,7 @@
     <mat-icon svgIcon="mdi:facebook"></mat-icon>
   </button>
   <button mat-mini-fab color="primary"
-          shareButton="twitter"
+          shareButton="x"
           title="{{ shareTitle }}"
           tags="{{ shareHashTags }}"
           url="{{ shareLink }}"
diff --git a/ui-ngx/src/app/shared/components/string-autocomplete.component.html b/ui-ngx/src/app/shared/components/string-autocomplete.component.html
index afd7518d1e..adc571c89a 100644
--- a/ui-ngx/src/app/shared/components/string-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/string-autocomplete.component.html
@@ -45,7 +45,7 @@
     class="tb-autocomplete tb-options-input-autocomplete"
     panelWidth="fit-content">
     <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
-      <span class="tb-option-name" fxFlex [innerHTML]="option | highlight:searchText:true:'ig'"></span>
+      <span class="tb-option-name flex-1" [innerHTML]="option | highlight:searchText:true:'ig'"></span>
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.html b/ui-ngx/src/app/shared/components/string-items-list.component.html
index 1b06cacf63..375f22e02f 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.html
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="stringItemsForm" fxFlex class="mat-block"
+<mat-form-field [formGroup]="stringItemsForm" class="mat-block flex-1"
                 [floatLabel]="floatLabel"
                 [appearance]="appearance"
                 [subscriptSizing]="subscriptSizing">
diff --git a/ui-ngx/src/app/shared/components/svg-xml.component.html b/ui-ngx/src/app/shared/components/svg-xml.component.html
index 9b6101dce7..2939f1e93b 100644
--- a/ui-ngx/src/app/shared/components/svg-xml.component.html
+++ b/ui-ngx/src/app/shared/components/svg-xml.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<div class="tb-svg-xml" style="background: #fff;" [ngClass]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'no-label': noLabel}"
+<div class="tb-svg-xml flex flex-col" style="background: #fff;" [class]="{'tb-disabled': disabled, 'fill-height': fillHeight, 'no-label': noLabel}"
      tb-fullscreen
-     [fullscreen]="fullscreen" fxLayout="column">
-  <div fxLayout="row" fxLayoutAlign="start center" style="min-height: 40px;" class="tb-svg-xml-toolbar">
-    <label *ngIf="!noLabel" class="tb-title no-padding" [ngClass]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
-    <span fxFlex></span>
+     [fullscreen]="fullscreen">
+  <div style="min-height: 40px;" class="tb-svg-xml-toolbar flex flex-row items-center justify-start">
+    <label *ngIf="!noLabel" class="tb-title no-padding" [class]="{'tb-error': !disabled && (hasErrors || required && !modelValue), 'tb-required': !disabled && required}">{{ label }}</label>
+    <span class="flex-1"></span>
     <fieldset style="width: initial">
       <div matTooltip="{{(fullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
            matTooltipPosition="above"
@@ -32,7 +32,7 @@
       </div>
     </fieldset>
   </div>
-  <div id="tb-svg-xml-panel" class="tb-svg-xml-content-panel" fxLayout="column">
-    <div #svgXmlEditor id="tb-svg-xml-input" [ngStyle]="fillHeight ? {} : {minHeight: minHeight}" [ngClass]="{'fill-height': fillHeight}"></div>
+  <div id="tb-svg-xml-panel" class="tb-svg-xml-content-panel flex flex-col">
+    <div #svgXmlEditor id="tb-svg-xml-input" [style]="fillHeight ? {} : {minHeight: minHeight}" [class.fill-height]="fillHeight"></div>
   </div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/tb-error.component.ts b/ui-ngx/src/app/shared/components/tb-error.component.ts
index 3322e978fa..b6c94bf483 100644
--- a/ui-ngx/src/app/shared/components/tb-error.component.ts
+++ b/ui-ngx/src/app/shared/components/tb-error.component.ts
@@ -21,7 +21,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 @Component({
   selector: 'tb-error',
   template: `
-    <div [@animation]="state" [ngStyle]="{marginTop: noMargin ? '0' : '0.5rem', fontSize: '.75rem'}">
+    <div [@animation]="state" [style.margin-top]="noMargin ? '0' : '0.5rem'" style="font-size: .75rem">
       <mat-error>
         {{message}}
       </mat-error>
diff --git a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
index 8e2a5ac459..1e797d827d 100644
--- a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
+++ b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div [formGroup]="datapointsLimitFormGroup" class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center">
-  <mat-slider fxFlex
+<div [formGroup]="datapointsLimitFormGroup" class="limit-slider-container flex flex-row items-center justify-start">
+  <mat-slider class="flex-1"
               min="{{minDatapointsLimit()}}"
               max="{{maxDatapointsLimit()}}">
     <input matSliderThumb formControlName="limit" [value]="datapointsLimitFormGroup.get('limit').value"/>
diff --git a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss
index c2ffa0bb34..c39f4f3e6a 100644
--- a/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss
+++ b/ui-ngx/src/app/shared/components/time/datapoints-limit.component.scss
@@ -25,6 +25,27 @@
   mat-form-field input[type=number] {
     text-align: center;
   }
+
+  .mdc-slider {
+    height: 40px;
+
+    ::ng-deep {
+      .mdc-slider__thumb {
+        left: -20px;
+        height: 40px;
+        width: 40px;
+
+        .mat-ripple-element.mat-mdc-slider-focus-ripple,
+        .mat-ripple-element.mat-mdc-slider-active-ripple,
+        .mat-ripple-element.mat-mdc-slider-hover-ripple {
+          left: 0 !important;
+          top: 0 !important;
+          height: 40px !important;
+          width: 40px !important;
+        }
+      }
+    }
+  }
 }
 
 @media #{$mat-gt-sm} {
diff --git a/ui-ngx/src/app/shared/components/time/datetime.component.html b/ui-ngx/src/app/shared/components/time/datetime.component.html
index 5f59cefd53..edf59702f1 100644
--- a/ui-ngx/src/app/shared/components/time/datetime.component.html
+++ b/ui-ngx/src/app/shared/components/time/datetime.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="16px">
+<section class="flex flex-row items-start justify-start gap-4">
   <mat-form-field>
     <mat-label *ngIf="showLabel">{{ dateText | translate }}</mat-label>
     <mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index 3e34bc1c86..75d586fa7c 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -16,14 +16,14 @@
 
 -->
 <div class="trip-animation-control-panel">
-    <div fxFlex fxLayout="row" fxFlexAlign="center">
+    <div class="flex flex-row">
         <button mat-icon-button class="mat-icon-button" aria-label="Start" (click)="moveStart()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_rewind</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_rewind</mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
         </button>
-        <div fxLayout="column" fxFlex="100">
+        <div class="flex flex-full flex-col">
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
@@ -32,18 +32,18 @@
             </div>
         </div>
         <button mat-icon-button class="mat-icon-button" aria-label="Next" (click)="moveNext()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_next</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_next</mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" aria-label="End" (click)="moveEnd()">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_forward</mat-icon>
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">fast_forward</mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" *ngIf="!playing" (click)="play()" aria-label="Play">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">
                 play_circle_outline
             </mat-icon>
         </button>
         <button mat-icon-button class="mat-icon-button" *ngIf="playing" (click)="pause()" aria-label="Stop">
-            <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">
+            <mat-icon class="material-icons" [style.color]="settings.buttonColor">
                 pause_circle_outline
             </mat-icon>
         </button>
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
index 2a68d672c9..40f39118c8 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<section class="interval-section" fxLayout="row" fxFlex>
-  <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+<section class="interval-section flex flex-1 flex-row">
+  <mat-form-field class="flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-label *ngIf="displayLabel" translate>timewindow.interval</mat-label>
     <mat-select [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onIntervalChange()">
       <mat-option *ngFor="let interval of intervals" [value]="interval">
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.html b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
index ea9fd8adad..57e6ca0808 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.html
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.html
@@ -18,7 +18,7 @@
 <section class="tb-form-panel no-border no-padding" [formGroup]="timeintervalFormGroup">
   <section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
     <ng-content></ng-content>
-    <mat-form-field fxFlex class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+    <mat-form-field class="flex flex-1" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
       <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
       <mat-select formControlName="interval">
         <mat-option *ngFor="let interval of intervals" [value]="interval.value">
@@ -29,7 +29,7 @@
   </section>
   <section class="tb-form-row column-xs no-border no-padding tb-standard-fields advanced-input"
            formGroupName="customInterval"
-           [fxShow]="advanced">
+           [class.!hidden]="!advanced">
     <div class="tb-flex">
       <mat-form-field class="number-input flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
         <mat-label translate>timeinterval.days</mat-label>
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 333c70f24f..e987da97ee 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="timewindowForm" mat-dialog-content  class="tb-timewindow-form">
   <mat-toolbar color="primary">
     <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <!--  <div tb-help="#"></div>-->
     <button mat-icon-button
             (click)="cancel()"
@@ -54,14 +54,16 @@
         <div class="tb-form-row">
           <mat-slide-toggle *ngIf="!quickIntervalOnly"
                             class="mat-slide" formControlName="hideLastInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-timeinterval
             formControlName="timewindowMs"
             subscriptSizing="dynamic"
             appearance="outline"
             [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value"
-            [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                             timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
           </tb-timeinterval>
         </div>
@@ -71,7 +73,9 @@
            class="tb-form-row">
         <mat-slide-toggle *ngIf="!quickIntervalOnly"
                           class="mat-slide" formControlName="hideQuickInterval">
-          {{ 'timewindow.hide' | translate }}
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
+            {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-quick-time-interval
           displayLabel="false"
@@ -79,7 +83,7 @@
           onlyCurrentInterval="true"
           subscriptSizing="dynamic"
           appearance="outline"
-          [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+          [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                           timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
         </tb-quick-time-interval>
       </div>
@@ -105,14 +109,16 @@
         </div>
         <div class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="hideLastInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-last-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-timeinterval
             formControlName="timewindowMs"
             subscriptSizing="dynamic"
             appearance="outline"
             [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                           timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
           </tb-timeinterval>
         </div>
@@ -120,28 +126,32 @@
 
       <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED" class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="hideFixedInterval">
-          {{ 'timewindow.hide' | translate }}
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-fixed-interval' | translate}}">
+            {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-datetime-period
           formControlName="fixedTimewindow"
           subscriptSizing="dynamic"
           appearance="outline"
           class="history-time-input"
-          [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+          [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                         timewindowForm.get('history.historyType').value === historyTypes.FIXED">
         </tb-datetime-period>
       </div>
 
       <div *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" class="tb-form-row">
           <mat-slide-toggle class="mat-slide" formControlName="hideQuickInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-relative-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <tb-quick-time-interval
             displayLabel="false"
             formControlName="quickInterval"
             subscriptSizing="dynamic"
             appearance="outline"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                         timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
           </tb-quick-time-interval>
         </div>
@@ -152,7 +162,9 @@
         <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
         <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide" formControlName="hideAggregation">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-aggregation' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <ng-container formGroupName="aggregation">
             <mat-form-field class="flex" subscriptSizing="dynamic" appearance="outline">
@@ -171,7 +183,9 @@
         <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
         <div class="tb-form-row column-xs">
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-max-values' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
           <ng-container formGroupName="aggregation">
             <tb-datapoints-limit formControlName="limit"
@@ -181,10 +195,10 @@
         </div>
       </section>
 
-      <section class="tb-form-panel" [fxShow]="timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
+      <section class="tb-form-panel" [class.!hidden]="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
         <div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div>
 
-        <ng-container *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
+        <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
           <div class="tb-form-row" formGroupName="realtime">
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
               {{ 'timewindow.disable-custom-interval' | translate }}
@@ -205,7 +219,7 @@
             </ng-container>
           </div>
         </ng-container>
-        <ng-container *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
+        <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
           <div class="tb-form-row" formGroupName="history">
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="disableCustomGroupInterval">
               {{ 'timewindow.disable-custom-interval' | translate }}
@@ -229,7 +243,9 @@
 
         <ng-template #hideAggInterval>
           <mat-slide-toggle class="mat-slide" formControlName="hideAggInterval">
-            {{ 'timewindow.hide' | translate }}
+            <div tb-hint-tooltip-icon="{{'timewindow.hide-group-interval' | translate}}">
+              {{ 'timewindow.hide' | translate }}
+            </div>
           </mat-slide-toggle>
         </ng-template>
       </section>
@@ -239,7 +255,9 @@
       <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
       <div class="tb-form-row column-xs">
         <mat-slide-toggle class="mat-slide" formControlName="hideTimezone">
-          {{ 'timewindow.hide' | translate }}
+          <div tb-hint-tooltip-icon="{{'timewindow.hide-timezone' | translate}}">
+            {{ 'timewindow.hide' | translate }}
+          </div>
         </mat-slide-toggle>
         <tb-timezone-select [localBrowserTimezonePlaceholderOnEmpty]="true"
                             formControlName="timezone"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
index 77297dbe05..41ab6a0787 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts
@@ -56,8 +56,6 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
 
   aggregation = false;
 
-  timewindow: Timewindow;
-
   timewindowForm: FormGroup;
 
   historyTypes = HistoryWindowType;
@@ -109,6 +107,8 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
 
   realtimeTypeSelectionAvailable: boolean;
 
+  private timewindow: Timewindow;
+
   private destroy$ = new Subject<void>();
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: TimewindowConfigDialogData,
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
index e631eff949..60512f1f6b 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="timewindowForm" class="tb-timewindow-form">
-  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom no-gap" *ngIf="!historyOnly">
+  <div class="tb-timewindow-form-header tb-form-panel no-border no-padding-bottom" *ngIf="!historyOnly">
     <tb-toggle-select class="tb-timewindow-form-type-options" appearance="fill"
                       [options]="timewindowTypeOptions" formControlName="selectedTab">
     </tb-toggle-select>
@@ -31,7 +31,8 @@
     <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
       <section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
         <div class="tb-flex space-between"
-             [ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }">
+             [class.align-end]="realtimeTypeSelectionAvailable"
+             [class.align-center]="!realtimeTypeSelectionAvailable">
           <div class="tb-flex-xs column">
             <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
             <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
@@ -51,7 +52,7 @@
             subscriptSizing="dynamic"
             appearance="outline"
             [disabledAdvanced]="timewindow.realtime.disableCustomInterval"
-            [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
           </tb-timeinterval>
 
@@ -62,7 +63,7 @@
             onlyCurrentInterval="true"
             subscriptSizing="dynamic"
             appearance="outline"
-            [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME &&
                               timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
           </tb-quick-time-interval>
         </div>
@@ -72,7 +73,8 @@
     <ng-container *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
       <section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
         <div class="tb-flex space-between"
-             [ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
+             [class.align-end]="historyTypeSelectionAvailable"
+             [class.align-center]="!historyTypeSelectionAvailable">
           <div class="tb-flex-xs column">
             <div class="tb-form-panel-title">{{ 'timewindow.timewindow' | translate }}</div>
             <ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
@@ -94,7 +96,7 @@
             subscriptSizing="dynamic"
             appearance="outline"
             [disabledAdvanced]="timewindow.history.disableCustomInterval"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
           </tb-timeinterval>
 
@@ -104,7 +106,7 @@
             subscriptSizing="dynamic"
             appearance="outline"
             class="history-time-input"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                             timewindowForm.get('history.historyType').value === historyTypes.FIXED">
           </tb-datetime-period>
 
@@ -114,7 +116,7 @@
             formControlName="quickInterval"
             subscriptSizing="dynamic"
             appearance="outline"
-            [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
+            [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY &&
                           timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
           </tb-quick-time-interval>
         </div>
@@ -143,9 +145,9 @@
         </section>
       </ng-container>
 
-      <section class="tb-form-row column-xs same-padding" [fxShow]="(isEdit || !timewindow.hideAggInterval)
-       && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
-        <ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
+      <section class="tb-form-row column-xs same-padding" [class.!hidden]="!(isEdit || !timewindow.hideAggInterval)
+                 || timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
+        <ng-container formGroupName="realtime" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME">
           <tb-timeinterval
             formControlName="interval"
             [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
@@ -156,7 +158,7 @@
             <div class="fixed-title-width-180">{{ 'aggregation.group-interval' | translate }}</div>
           </tb-timeinterval>
         </ng-container>
-        <ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
+        <ng-container formGroupName="history" *ngIf="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY">
           <tb-timeinterval
             formControlName="interval"
             [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html
index 9896d65bc0..24cc238e1d 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@@ -49,8 +49,8 @@
          (click)="toggleTimewindow($event)">
   <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'left'"
            [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
-  <div class="tb-timewindow-label" [fxHide]="hideLabel">
-    {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
+  <div class="tb-timewindow-label" [class.!hidden]="hideLabel">
+    {{innerValue?.displayValue}} <span [class.!hidden]="!(innerValue?.displayTimezoneAbbr !== '')">| <span class="timezone-abbr">{{innerValue?.displayTimezoneAbbr}}</span></span>
   </div>
   <tb-icon *ngIf="computedTimewindowStyle.showIcon && computedTimewindowStyle.iconPosition === 'right'"
            [style]="timewindowIconStyle">{{ computedTimewindowStyle.icon }}</tb-icon>
diff --git a/ui-ngx/src/app/shared/components/time/timezone-select.component.html b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
index 8def5a4ee8..eb7dc113fa 100644
--- a/ui-ngx/src/app/shared/components/time/timezone-select.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="flex mat-block"
+<mat-form-field [formGroup]="selectTimezoneFormGroup" class="mat-block flex flex-1"
                 [subscriptSizing]="subscriptSizing" [appearance]="appearance">
   <mat-label *ngIf="displayLabel" translate>timezone.timezone</mat-label>
   <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"
diff --git a/ui-ngx/src/app/shared/components/time/timezone.component.html b/ui-ngx/src/app/shared/components/time/timezone.component.html
index a2a5b84899..2ad8a04249 100644
--- a/ui-ngx/src/app/shared/components/time/timezone.component.html
+++ b/ui-ngx/src/app/shared/components/time/timezone.component.html
@@ -48,7 +48,7 @@
          [matTooltip]="tooltipValue()"
          [matTooltipPosition]="tooltipPosition"
          (click)="toggleTimezone($event)">
-  <div class="tb-timezone-label" [fxHide]="hideLabel">
+  <div class="tb-timezone-label" [class.!hidden]="hideLabel">
     {{displayValue()}}
   </div>
 </section>
diff --git a/ui-ngx/src/app/shared/components/toast.directive.ts b/ui-ngx/src/app/shared/components/toast.directive.ts
index 582be5a577..1a8f07c3ea 100644
--- a/ui-ngx/src/app/shared/components/toast.directive.ts
+++ b/ui-ngx/src/app/shared/components/toast.directive.ts
@@ -16,7 +16,7 @@
 
 import {
   AfterViewInit, ChangeDetectorRef,
-  Component, ComponentFactoryResolver, ComponentRef,
+  Component, ComponentRef,
   Directive,
   ElementRef, HostBinding,
   Inject,
@@ -57,7 +57,6 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
   constructor(private elementRef: ElementRef,
               private viewContainerRef: ViewContainerRef,
               private notificationService: ToastNotificationService,
-              private componentFactoryResolver: ComponentFactoryResolver,
               private snackBar: MatSnackBar,
               private ngZone: NgZone,
               private breakpointObserver: BreakpointObserver,
@@ -131,7 +130,6 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
         panelClass.push('bottom');
       }
 
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TbSnackBarComponent);
       const data: ToastPanelData = {
         notification: notificationMessage,
         panelClass,
@@ -144,7 +142,7 @@ export class ToastDirective implements AfterViewInit, OnDestroy {
         {provide: MAT_SNACK_BAR_DATA, useValue: data}
       ];
       const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
-      this.toastComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
+      this.toastComponentRef = this.viewContainerRef.createComponent(TbSnackBarComponent, {index: 0, injector});
       this.cd.detectChanges();
 
       if (notificationMessage.duration && notificationMessage.duration > 0) {
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
index 2de4e14209..08adcab38c 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -97,6 +97,9 @@
           font-weight: 400;
           font-size: 14px;
           letter-spacing: 0.2px;
+          .mat-pseudo-checkbox {
+            display: none;
+          }
         }
       }
       &.mat-button-toggle-checked {
diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index 1ab4c1d019..7ad14d608b 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field fxFlex appearance="outline" class="tb-inline-field tb-suffix-show-on-hover" subscriptSizing="dynamic" style="width: 100%;">
+<mat-form-field appearance="outline" class="tb-inline-field tb-suffix-show-on-hover flex-1" subscriptSizing="dynamic" style="width: 100%;">
   <input matInput #unitInput [formControl]="unitsFormControl"
          placeholder="{{ 'widget-config.set' | translate }}"
          (focusin)="onFocus()"
@@ -40,7 +40,7 @@
     panelWidth="fit-content"
     [displayWith]="displayUnitFn">
     <mat-option *ngFor="let unit of filteredUnits | async" [value]="unit">
-      <span class="tb-unit-name" fxFlex [innerHTML]="unit.name | highlight:searchText:true:'ig'"></span>
+      <span class="tb-unit-name flex-1" [innerHTML]="unit.name | highlight:searchText:true:'ig'"></span>
       <span class="tb-unit-symbol" [innerHTML]="unit.symbol | highlight:searchText:true:'ig'"></span>
     </mat-option>
   </mat-autocomplete>
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html
index c8b457ccbe..3c1a3494db 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<section fxLayout="row">
-  <div fxHide.lt-lg *ngIf="displayUserInfo" class="tb-user-info" fxLayout="row">
+<section class="flex flex-row">
+  <div *ngIf="displayUserInfo" class="tb-user-info flex flex-row lt-lg:!hidden">
     <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
-    <div fxLayout="column" fxLayoutAlign="center">
+    <div class="flex flex-col items-stretch justify-center">
       <span *ngIf="userDisplayName$ | async; let userDisplayName" class="tb-user-display-name">{{ userDisplayName }}</span>
       <span *ngIf="authorityName$ | async; let authorityName" class="tb-user-authority">{{ authorityName | translate }}</span>
     </div>
diff --git a/ui-ngx/src/app/shared/components/value-input.component.html b/ui-ngx/src/app/shared/components/value-input.component.html
index e3b3e12b83..e4aa511e83 100644
--- a/ui-ngx/src/app/shared/components/value-input.component.html
+++ b/ui-ngx/src/app/shared/components/value-input.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #inputForm="ngForm">
-  <section [fxLayout]="computedLayout" fxLayoutGap="8px">
+  <section class="flex gap-2" [class]="computedLayout === 'row' ? 'flex-row' : 'flex-col'">
     <mat-form-field *ngIf="showValueType" appearance="outline" subscriptSizing="dynamic" class="tb-value-type tb-inline-field" [class]="computedLayout">
       <mat-select [disabled]="disabled" name="valueType" [(ngModel)]="valueType" (ngModelChange)="onValueTypeChanged()">
         <mat-select-trigger>
@@ -31,7 +31,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.STRING" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
       <input [disabled]="disabled" matInput required name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.string-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -43,7 +43,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
       <input [disabled]="disabled" matInput required name="value" type="number" step="1" pattern="^-?[0-9]+$" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.integer-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -56,7 +56,7 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute number">
+    <mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute number flex flex-1">
       <input [disabled]="disabled" matInput required name="value" type="number" step="any" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"
              placeholder="{{ 'value.double-value' | translate }}*"/>
       <mat-icon matSuffix
@@ -68,13 +68,13 @@
         warning
       </mat-icon>
     </mat-form-field>
-    <mat-chip-listbox *ngIf="valueType === valueTypeEnum.BOOLEAN" fxFlex class="tb-boolean-input center-stretch"
+    <mat-chip-listbox *ngIf="valueType === valueTypeEnum.BOOLEAN" class="tb-boolean-input center-stretch flex-1"
                       [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
       <mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel }}</mat-chip-option>
       <mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel }}</mat-chip-option>
     </mat-chip-listbox>
-    <div *ngIf="valueType === valueTypeEnum.JSON" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
+    <div *ngIf="valueType === valueTypeEnum.JSON" class="flex flex-1 flex-row items-center justify-start gap-2">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="tb-inline-field tb-suffix-absolute flex flex-1">
         <input [disabled]="disabled" matInput tb-json-to-string required name="value" #value="ngModel"
                [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" placeholder="{{ 'value.json-value' | translate }}*"/>
         <mat-icon matSuffix
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
index 92dbea53b8..0c9ec720f8 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="input-wrapper" [ngClass]="{'focus': focus}" fxLayoutAlign="start center" fxLayoutGap="16px">
+<div class="input-wrapper flex items-center justify-start gap-4" [class.focus]="focus">
   <mat-icon>search</mat-icon>
   <input type="text"
          [(ngModel)]="searchText"
diff --git a/ui-ngx/src/app/shared/decorators/public-api.ts b/ui-ngx/src/app/shared/decorators/public-api.ts
index e8dbfc608f..d8a8a397f4 100644
--- a/ui-ngx/src/app/shared/decorators/public-api.ts
+++ b/ui-ngx/src/app/shared/decorators/public-api.ts
@@ -16,4 +16,3 @@
 
 export * from './coercion';
 export * from './enumerable';
-export * from './tb-inject';
diff --git a/ui-ngx/src/app/shared/decorators/tb-inject.ts b/ui-ngx/src/app/shared/decorators/tb-inject.ts
deleted file mode 100644
index 7c421c6514..0000000000
--- a/ui-ngx/src/app/shared/decorators/tb-inject.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Inject, Type } from '@angular/core';
-
-export function TbInject<T>(token: any): (target: Type<T>, key: any, paramIndex: number) => void {
-  return (target: Type<T>, key: any, paramIndex: number) => {
-    Inject(token)(target, key, paramIndex);
-  };
-}
diff --git a/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html b/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
index 27aaeec20b..7f7a273420 100644
--- a/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>widgets-bundle.export</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           (click)="cancel()"
           type="button">
@@ -31,7 +31,7 @@
     <mat-checkbox [formControl]="exportWidgetsFormControl">{{ 'widgets-bundle.export-widgets-bundle-widgets-prompt' | translate }}</mat-checkbox>
   </fieldset>
 </div>
-<div mat-dialog-actions fxLayoutAlign="end center">
+<div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async) && !ignoreLoading"
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index 9a5805a233..843594659b 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form>
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2 translate>{{ importTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="'entitiesImport'"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -44,7 +44,7 @@
             </tb-file-input>
           </fieldset>
         </form>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="flex flex-row items-center justify-end gap-5">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -57,7 +57,7 @@
       <mat-step [stepControl]="importParametersFormGroup">
         <form [formGroup]="importParametersFormGroup">
           <ng-template matStepLabel>{{ 'import.stepper-text.configuration' | translate }}</ng-template>
-          <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+          <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
             <mat-form-field class="mat-block">
               <mat-label translate>import.csv-delimiter</mat-label>
               <mat-select required formControlName="delim">
@@ -66,7 +66,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-            <div fxLayout="column" fxLayoutGap="12px">
+            <div class="flex flex-col gap-3">
               <mat-checkbox formControlName="isHeader">
                 {{ 'import.csv-first-line-header' | translate }}
               </mat-checkbox>
@@ -76,11 +76,11 @@
             </div>
           </fieldset>
         </form>
-        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
+        <div class="flex flex-row flex-wrap items-center justify-between">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <div fxLayout="row wrap" fxLayoutGap="20px">
+          <div class="flex flex-row flex-wrap gap-5">
             <button mat-button
                     [disabled]="(isLoading$ | async)"
                     (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -96,11 +96,11 @@
           <ng-template matStepLabel>{{ 'import.stepper-text.column-type' | translate }}</ng-template>
           <tb-table-columns-assignment #columnsAssignmentComponent formControlName="columnsParam" [entityType]="entityType"></tb-table-columns-assignment>
         </form>
-        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
+        <div class="flex flex-row flex-wrap items-center justify-between">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <div fxLayout="row wrap" fxLayoutGap="20px">
+          <div class="flex flex-row flex-wrap gap-5">
             <button mat-button
                     [disabled]="(isLoading$ | async)"
                     (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@@ -118,7 +118,7 @@
       </mat-step>
       <mat-step>
         <ng-template matStepLabel>{{ 'action.done' | translate }}</ng-template>
-        <div fxLayout="column">
+        <div class="flex flex-col">
           <p class="mat-body-2" *ngIf="this.statistical?.created">
             {{ translate.instant('import.message.create-entities', {count: this.statistical.created}) }}
           </p>
@@ -140,7 +140,7 @@
             <div #failureDetailsEditor class="tb-failure-details"></div>
           </mat-expansion-panel>
         </div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+        <div class="flex flex-row items-center justify-end gap-5">
           <button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog.component.html b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
index c2264760f6..c472fb2526 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="importFormGroup" (ngSubmit)="importFromJson()">
   <mat-toolbar color="primary">
     <h2 translate>{{ importTitle }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
+      <div class="flex flex-1 flex-col">
         <tb-file-input
           [contentConvertFunction]="loadDataFromJsonContent"
           formControlName="jsonContent"
@@ -42,7 +42,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/layout/layout.directives.ts b/ui-ngx/src/app/shared/layout/layout.directives.ts
deleted file mode 100644
index 22b8430662..0000000000
--- a/ui-ngx/src/app/shared/layout/layout.directives.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Directive } from '@angular/core';
-import { BREAKPOINT, LayoutAlignDirective, LayoutDirective, LayoutGapDirective, ShowHideDirective } from '@angular/flex-layout';
-
-const TB_BREAKPOINTS = [
-  {
-    alias: 'md-lg',
-    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1819px)',
-    priority: 750
-  },
-  {
-    alias: 'gt-md-lg',
-    mediaQuery: 'screen and (min-width: 1820px)',
-    priority: -600
-  }
-];
-
-export const TbBreakPointsProvider = {
-  provide: BREAKPOINT,
-  useValue: TB_BREAKPOINTS,
-  multi: true
-};
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayout.md-lg]', inputs: ['fxLayout.md-lg']})
-export class MdLgLayoutDirective extends LayoutDirective {
-  protected inputs = ['fxLayout.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutAlign.md-lg]', inputs: ['fxLayoutAlign.md-lg']})
-export class MdLgLayoutAlignDirective extends LayoutAlignDirective {
-  protected inputs = ['fxLayoutAlign.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutGap.md-lg]', inputs: ['fxLayoutGap.md-lg']})
-export class MdLgLayoutGapDirective extends LayoutGapDirective {
-  protected inputs = ['fxLayoutGap.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxHide.md-lg]', inputs: ['fxHide.md-lg']})
-export class MdLgShowHideDirective extends ShowHideDirective {
-  protected inputs = ['fxHide.md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayout.gt-md-lg]', inputs: ['fxLayout.gt-md-lg']})
-export class GtMdLgLayoutDirective extends LayoutDirective {
-  protected inputs = ['fxLayout.gt-md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutAlign.gt-md-lg]', inputs: ['fxLayoutAlign.gt-md-lg']})
-export class GtMdLgLayoutAlignDirective extends LayoutAlignDirective {
-  protected inputs = ['fxLayoutAlign.gt-md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxLayoutGap.gt-md-lg]', inputs: ['fxLayoutGap.gt-md-lg']})
-export class GtMdLgLayoutGapDirective extends LayoutGapDirective {
-  protected inputs = ['fxLayoutGap.gt-md-lg'];
-}
-
-// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
-@Directive({selector: '[fxHide.gt-md-lg]', inputs: ['fxHide.gt-md-lg']})
-export class GtMdLgShowHideDirective extends ShowHideDirective {
-  protected inputs = ['fxHide.gt-md-lg'];
-}
diff --git a/ui-ngx/src/app/shared/legacy/flex-layout.models.ts b/ui-ngx/src/app/shared/legacy/flex-layout.models.ts
new file mode 100644
index 0000000000..5e00ae1f06
--- /dev/null
+++ b/ui-ngx/src/app/shared/legacy/flex-layout.models.ts
@@ -0,0 +1,41 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Observable } from 'rxjs/internal/Observable';
+import { from, of } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { Type } from '@angular/core';
+
+let flexLayoutModule: any;
+
+export function getFlexLayout(): Observable<any> {
+  if (flexLayoutModule) {
+    return of(flexLayoutModule);
+  } else {
+    return from(import('@angular/flex-layout')).pipe(
+      tap((module) => {
+        module.DEFAULT_CONFIG.addFlexToParent = false;
+        flexLayoutModule = module;
+      })
+    );
+  }
+}
+
+export function getFlexLayoutModule(): Observable<Type<any>> {
+  return getFlexLayout().pipe(
+    map(module => module.FlexLayoutModule)
+  );
+}
diff --git a/ui-ngx/src/app/shared/models/ace/ace.models.ts b/ui-ngx/src/app/shared/models/ace/ace.models.ts
index 381d897066..29c018048e 100644
--- a/ui-ngx/src/app/shared/models/ace/ace.models.ts
+++ b/ui-ngx/src/app/shared/models/ace/ace.models.ts
@@ -18,6 +18,7 @@ import { Ace } from 'ace-builds';
 import { Observable } from 'rxjs/internal/Observable';
 import { forkJoin, from, of } from 'rxjs';
 import { map, mergeMap, tap } from 'rxjs/operators';
+import { unwrapModule } from '@core/utils';
 
 let aceDependenciesLoaded = false;
 let aceModule: any;
@@ -67,10 +68,10 @@ export function getAce(): Observable<any> {
   if (aceModule) {
     return of(aceModule);
   } else {
-    return from(import('ace')).pipe(
+    return from(import('ace-builds/src-noconflict/ace')).pipe(
       mergeMap((module) => {
         return loadAceDependencies().pipe(
-         map(() => module)
+         map(() => unwrapModule(module))
         );
       }),
       tap((module) => {
@@ -86,7 +87,9 @@ export function getAceDiff(): Observable<any> {
   } else {
     return getAce().pipe(
       mergeMap((ace) => {
-        return from(import('ace-diff'));
+        return from(import('ace-diff')).pipe(
+          map((module) => unwrapModule(module))
+        );
       }),
       tap((module) => {
         aceDiffModule = module;
diff --git a/ui-ngx/src/app/shared/models/ace/completion.models.ts b/ui-ngx/src/app/shared/models/ace/completion.models.ts
index bfba8e5616..8bc1a2530d 100644
--- a/ui-ngx/src/app/shared/models/ace/completion.models.ts
+++ b/ui-ngx/src/app/shared/models/ace/completion.models.ts
@@ -15,6 +15,7 @@
 ///
 
 import { Ace } from 'ace-builds';
+import { deepClone } from '@core/utils';
 
 export type tbMetaType = 'object' | 'function' | 'service' | 'property' | 'argument';
 
@@ -41,9 +42,9 @@ export interface TbEditorCompletion {
   children?: TbEditorCompletions;
 }
 
-interface TbEditorAceCompletion extends Ace.Completion {
+interface TbEditorAceCompletion extends Ace.SnippetCompletion {
   isTbEditorAceCompletion: true;
-  snippet: string;
+  title: string;
   description?: string;
   type?: string;
   args?: FunctionArg[];
@@ -124,10 +125,9 @@ export class TbEditorCompleter implements Ace.Completer {
     const aceCompletion: TbEditorAceCompletion = {
       isTbEditorAceCompletion: true,
       snippet: parentPrefix + name,
-      name,
+      title: name,
       caption: parentPrefix + name,
       score: 100000,
-      value: parentPrefix + name,
       meta: completion.meta,
       type: completion.type,
       description: completion.description,
@@ -139,14 +139,14 @@ export class TbEditorCompleter implements Ace.Completer {
 
   getDocTooltip(completion: TbEditorAceCompletion) {
     if (completion && completion.isTbEditorAceCompletion) {
-      return {
-        docHTML: this.createDocHTML(completion)
-      };
+      const aceCompletion = deepClone(completion);
+      aceCompletion.docHTML = this.createDocHTML(completion);
+      return aceCompletion;
     }
   }
 
   private createDocHTML(completion: TbEditorAceCompletion): string {
-    let title = `<b>${completion.name}</b>`;
+    let title = `<b>${completion.title}</b>`;
     if (completion.meta === 'function') {
       title += '(';
       if (completion.args) {
diff --git a/ui-ngx/src/app/shared/models/ace/tbel/worker-tbel.js b/ui-ngx/src/app/shared/models/ace/tbel/worker-tbel.js
index 1ce97362bc..2496a12a2a 100644
--- a/ui-ngx/src/app/shared/models/ace/tbel/worker-tbel.js
+++ b/ui-ngx/src/app/shared/models/ace/tbel/worker-tbel.js
@@ -5029,7 +5029,6 @@ var JSHINT = (function() {
     }, 20);
   }
   function nullSafeProperty(s) {
-    console.log("test " + s);
     symbol(s, 20).exps = true;
     return infix(s, function(context, left, that) {
       if (state.option.bitwise) {
diff --git a/ui-ngx/src/app/shared/models/beautify.models.ts b/ui-ngx/src/app/shared/models/beautify.models.ts
index 8cf54a1536..2975feeee5 100644
--- a/ui-ngx/src/app/shared/models/beautify.models.ts
+++ b/ui-ngx/src/app/shared/models/beautify.models.ts
@@ -17,6 +17,7 @@
 import { Observable } from 'rxjs/internal/Observable';
 import { from, of } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
+import { unwrapModule } from '@core/utils';
 
 let jsBeautifyModule: any;
 let htmlBeautifyModule: any;
@@ -27,6 +28,7 @@ function loadJsBeautify(): Observable<any> {
     return of(jsBeautifyModule);
   } else {
     return from(import('js-beautify/js/lib/beautify.js')).pipe(
+      map((module) => unwrapModule(module)),
       tap((module) => {
         jsBeautifyModule = module;
       })
@@ -39,6 +41,7 @@ function loadHtmlBeautify(): Observable<any> {
     return of(htmlBeautifyModule);
   } else {
     return from(import('js-beautify/js/lib/beautify-html.js')).pipe(
+      map((module) => unwrapModule(module)),
       tap((module) => {
         htmlBeautifyModule = module;
       })
@@ -51,6 +54,7 @@ function loadCssBeautify(): Observable<any> {
     return of(cssBeautifyModule);
   } else {
     return from(import('js-beautify/js/lib/beautify-css.js')).pipe(
+      map((module) => unwrapModule(module)),
       tap((module) => {
         cssBeautifyModule = module;
       })
diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts
index 89a887e76d..bd51913891 100644
--- a/ui-ngx/src/app/shared/models/device.models.ts
+++ b/ui-ngx/src/app/shared/models/device.models.ts
@@ -25,7 +25,7 @@ import { RuleChainId } from '@shared/models/id/rule-chain-id';
 import { EntityInfoData, HasTenantId, HasVersion } from '@shared/models/entity.models';
 import { FilterPredicateValue, KeyFilter } from '@shared/models/query/query.models';
 import { TimeUnit } from '@shared/models/time/time.models';
-import * as _moment from 'moment';
+import _moment from 'moment';
 import { AbstractControl, ValidationErrors } from '@angular/forms';
 import { OtaPackageId } from '@shared/models/id/ota-package-id';
 import { DashboardId } from '@shared/models/id/dashboard-id';
diff --git a/ui-ngx/src/app/shared/models/icon.models.ts b/ui-ngx/src/app/shared/models/icon.models.ts
index 6a0af912a7..e094977362 100644
--- a/ui-ngx/src/app/shared/models/icon.models.ts
+++ b/ui-ngx/src/app/shared/models/icon.models.ts
@@ -53,7 +53,29 @@ export const svgIcons: {[key: string]: string} = {
     '<path fill="#fff" d="M9 4V2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h5v-2H4V4h5z"/>' +
     '<path fill="#fff" d="M7 18V6h2v12H7zM11 6v12h2V6h-2zM15 20v2h5a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-5v2h5v16h-5z"/>' +
     '<path fill="#fff" d="M15 18V6h2v12h-2z"/>' +
-    '</svg>'
+    '</svg>',
+  trendz: '<svg viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="m 17.329936,0 1.999613,2.003952 -2.674056,' +
+    '2.679916 2.661746,2.6765649 2.678508,-2.684351 1.999613,2.0039449 -2.682055,2.6878227 2.661607,2.6763665 -2.641298,2.656033 ' +
+    '2.661746,2.66751 -1.999613,2.004017 -2.658338,-2.664181 -2.661607,2.676508 2.653887,2.659575 -1.999614,2.003804 L 14.679666,' +
+    '21.39152 11.997681,24.088432 9.3156944,21.39152 6.6653477,24.047482 4.6657413,22.043678 7.3194891,19.384103 4.6578333,16.707382 ' +
+    '1.9996133,19.371421 0,17.367405 2.6616488,14.700107 0.02053398,12.044216 2.6820275,9.3678495 1.4263538e-5,6.6800126 1.9996273,' +
+    '4.6760606 4.678212,7.3604329 7.3397982,4.6839955 4.6657413,2.0041717 6.6653477,2.2309572e-4 9.3360035,2.6766286 11.997681,' +
+    '0 14.659287,2.6765011 Z m -5.332255,4.0079963 1.999613,2.003945 -7.99844,8.0158157 -1.9996133,-2.004017 z m 1.676684,4.3522483 ' +
+    '1.999613,2.0039454 -6.6654242,6.679793 -1.9996133,-2.003874 z m 2.988987,7.0033574 -1.999544,-2.003945 -4.6658108,4.675848 ' +
+    '1.9996128,2.004015 z"/></svg>',
+  tb_gateway: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="6 4 42 46" width="18" height="18">
+    <path d="M41.633 47.719c0-.559.453-1.012 1.008-1.012.554 0 1.007.453 1.007 1.012v1.008c0 .558-.453 1.011-1.007 1.011a1.011 1.011 0 0 1-1.008-1.011ZM38.617 47.719c0-.559.45-1.012 1.004-1.012.559 0 1.008.453 1.008 1.012v1.008c0 .558-.45 1.011-1.008 1.011a1.008 1.008 0 0 1-1.004-1.011ZM35.598 47.719c0-.559.449-1.012 1.004-1.012.558 0 1.007.453 1.007 1.012v1.008c0 .558-.449 1.011-1.007 1.011a1.008 1.008 0 0 1-1.004-1.011ZM32.578 47.719c0-.559.453-1.012 1.008-1.012.555 0 1.004.453 1.004 1.012v1.008c0 .558-.45 1.011-1.004 1.011a1.011 1.011 0 0 1-1.008-1.011ZM44.652 44.684a1.01 1.01 0 0 1 1.008-1.008h1.004c.559 0 1.008.453 1.008 1.008 0 .558-.45 1.011-1.008 1.011H45.66a1.011 1.011 0 0 1-1.008-1.011ZM28.555 44.684c0-.555.449-1.008 1.004-1.008h1.007a1.01 1.01 0 0 1 0 2.02H29.56a1.008 1.008 0 0 1-1.004-1.012Z"/>
+    <path d="M15.477 35.59h-3.02v3.031c0 2.234 1.8 4.043 4.023 4.043h2.012a4.035 4.035 0 0 0 4.028-4.043V35.59H19.5v2.023h-4.023ZM7.074 41.309a.75.75 0 0 0-.746.75c0 3.73 3.012 6.754 6.723 6.754a.751.751 0 0 0 0-1.504c-2.887 0-5.227-2.352-5.227-5.25a.75.75 0 0 0-.75-.75Z"/>
+    <path d="M9.977 41.023a.75.75 0 0 0-.747.75 4.118 4.118 0 0 0 4.11 4.125.747.747 0 0 0 .746-.75.747.747 0 0 0-.746-.75 2.622 2.622 0 0 1-2.617-2.625.747.747 0 0 0-.746-.75Z"/>
+    <path d="M44.652 41.66c0-.558.453-1.012 1.008-1.012h1.004c.559 0 1.008.454 1.008 1.012 0 .555-.45 1.008-1.008 1.008H45.66a1.01 1.01 0 0 1-1.008-1.008ZM28.555 41.66c0-.558.449-1.012 1.004-1.012h1.007a1.01 1.01 0 0 1 0 2.02H29.56a1.007 1.007 0 0 1-1.004-1.008ZM44.652 38.621c0-.559.453-1.012 1.008-1.012h1.004c.559 0 1.008.453 1.008 1.012 0 .559-.45 1.012-1.008 1.012H45.66a1.011 1.011 0 0 1-1.008-1.012ZM28.555 38.621c0-.559.449-1.012 1.004-1.012h1.007a1.011 1.011 0 0 1 0 2.024H29.56a1.008 1.008 0 0 1-1.004-1.012ZM44.652 35.594c0-.559.453-1.012 1.008-1.012h1.004c.559 0 1.008.453 1.008 1.012 0 .558-.45 1.011-1.008 1.011H45.66a1.011 1.011 0 0 1-1.008-1.011ZM28.555 35.594c0-.559.449-1.012 1.004-1.012h1.007a1.011 1.011 0 0 1 0 2.023H29.56a1.008 1.008 0 0 1-1.004-1.011Z"/>
+    <path d="M12.457 33.57c0-.558.45-1.011 1.004-1.011h8.05c.555 0 1.009.453 1.009 1.011v1.008H12.457Z"/>
+    <path d="M41.633 31.55c0-.558.453-1.01 1.008-1.01.554 0 1.007.452 1.007 1.01v1.009c0 .558-.453 1.011-1.007 1.011a1.011 1.011 0 0 1-1.008-1.011Z"/>
+    <path d="M27.547 10.184v2.168h2.015v-2.168a3.592 3.592 0 0 1-2.015 0Zm3.02 16.316v-4.043h2.011V26.5h4.027c1.11 0 2.012.906 2.012 2.023v2.02h-2.012v-2.02h-4.027a2.019 2.019 0 0 1-2.012-2.023Zm-4.024-4.043V26.5a2.019 2.019 0 0 1-2.012 2.023h-6.039v2.02H16.48v-2.02c0-1.117.903-2.023 2.012-2.023h6.04v-4.043Z"/>
+    <path d="M32.578 31.55c0-.558.453-1.01 1.008-1.01.555 0 1.004.452 1.004 1.01v1.009c0 .558-.45 1.011-1.004 1.011a1.011 1.011 0 0 1-1.008-1.011Z"/>
+    <path d="M32.578 32.559c-1.11 0-2.012.906-2.012 2.02v11.116c0 1.117.903 2.024 2.012 2.024h11.067a2.02 2.02 0 0 0 2.015-2.024V34.578c0-1.113-.902-2.02-2.015-2.02Zm1.008 2.02c-.559 0-1.008.452-1.008 1.01v9.099c0 .558.45 1.007 1.008 1.007h9.055c.554 0 1.004-.449 1.004-1.008V35.59c0-.559-.45-1.012-1.004-1.012Z"/>
+    <path d="M38.617 40.648h3.016v3.032h-3.016ZM34.59 40.648h3.02v3.032h-3.02ZM38.617 36.602h3.016v3.035h-3.016ZM34.59 36.602h3.02v3.035h-3.02Z"/>
+    <path d="M28.555 9.313a2.518 2.518 0 0 0 2.515-2.524 2.519 2.519 0 0 0-2.515-2.527 2.519 2.519 0 0 0-2.516 2.527 2.518 2.518 0 0 0 2.516 2.524Zm-11.067 4.042a2.02 2.02 0 0 0-2.015 2.024v4.043c0 1.113.902 2.02 2.015 2.02h22.133a2.016 2.016 0 0 0 2.012-2.02v-4.043a2.016 2.016 0 0 0-2.012-2.024Zm1.004 4.043a1.01 1.01 0 0 0 0-2.02c-.555 0-1.004.454-1.004 1.013 0 .554.45 1.007 1.004 1.007Zm4.028-1.007a1.01 1.01 0 0 1-1.008 1.007 1.01 1.01 0 0 1 0-2.02c.554 0 1.008.454 1.008 1.013Z"/>
+  </svg>`,
 };
 
 export const svgIconsUrl: { [key: string]: string } = {
diff --git a/ui-ngx/src/app/shared/models/jquery-event.models.ts b/ui-ngx/src/app/shared/models/jquery-event.models.ts
index b893da758c..a054210672 100644
--- a/ui-ngx/src/app/shared/models/jquery-event.models.ts
+++ b/ui-ngx/src/app/shared/models/jquery-event.models.ts
@@ -19,6 +19,8 @@ import Timeout = NodeJS.Timeout;
 export interface TbContextMenuEvent extends Event {
   clientX: number;
   clientY: number;
+  pageX: number;
+  pageY: number;
   ctrlKey: boolean;
   metaKey: boolean;
 }
@@ -41,6 +43,8 @@ export const initCustomJQueryEvents = () => {
             const event = $.Event('tbcontextmenu', {
               clientX: touch.clientX,
               clientY: touch.clientY,
+              pageX: touch.pageX,
+              pageY: touch.pageY,
               ctrlKey: false,
               metaKey: false,
               originalEvent: e
@@ -59,6 +63,8 @@ export const initCustomJQueryEvents = () => {
           const event = $.Event('tbcontextmenu', {
             clientX: e.originalEvent.clientX,
             clientY: e.originalEvent.clientY,
+            pageX: e.originalEvent.pageX,
+            pageY: e.originalEvent.pageY,
             ctrlKey: e.originalEvent.ctrlKey,
             metaKey: e.originalEvent.metaKey,
             originalEvent: e
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index dd5550e907..365adda774 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/ui-ngx/src/app/shared/models/notification.models.ts
@@ -366,6 +366,7 @@ interface SlackDeliveryMethodNotificationTemplate {
 interface MicrosoftTeamsDeliveryMethodNotificationTemplate {
   subject?: string;
   button: NotificationButtonConfig;
+  themeColor?: string;
 }
 
 interface MobileDeliveryMethodNotificationTemplate {
diff --git a/ui-ngx/src/app/shared/models/query/query.models.ts b/ui-ngx/src/app/shared/models/query/query.models.ts
index 761982cf3c..ce155ef760 100644
--- a/ui-ngx/src/app/shared/models/query/query.models.ts
+++ b/ui-ngx/src/app/shared/models/query/query.models.ts
@@ -33,7 +33,6 @@ import {
 } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { AlarmInfo, AlarmSearchStatus, AlarmSeverity } from '../alarm.models';
-import { Filter } from '@material-ui/icons';
 import { DatePipe } from '@angular/common';
 import { UserId } from '../id/user-id';
 import { Direction } from '@shared/models/page/sort-order';
diff --git a/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts b/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
index 9f0d244e9e..2db1983b0b 100644
--- a/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
+++ b/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
@@ -17,7 +17,7 @@
 
 import { EntityType } from '@shared/models/entity-type.models';
 import { AggregationType } from '../time/time.models';
-import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, connectable, Observable, ReplaySubject, Subscription } from 'rxjs';
 import { EntityId } from '@shared/models/id/entity-id';
 import { map } from 'rxjs/operators';
 import { NgZone } from '@angular/core';
@@ -731,6 +731,91 @@ export class NotificationsUpdate extends CmdUpdate {
   }
 }
 
+interface SharedSubscriptionInfo {
+  key: string;
+  subscriber: TelemetrySubscriber;
+  subscribed: boolean;
+  sharedSubscribers: Set<SharedTelemetrySubscriber>;
+}
+
+export class SharedTelemetrySubscriber {
+
+  private static subscribersCache: {[key: string]: SharedSubscriptionInfo} = {};
+
+  private static createTelemetrySubscriberKey (entityId: EntityId, attributeScope: TelemetryType, keys: string[] = null): string  {
+      let key = entityId.entityType + '_' + entityId.id + '_' + attributeScope;
+      if (keys) {
+        key += '_' + keys.sort().join('_');
+      }
+      return key;
+  }
+
+  private subscribed = false;
+
+  private attributeDataSubject = connectable(this.sharedSubscriptionInfo.subscriber.attributeData$(),
+    { connector: () => new ReplaySubject<Array<AttributeData>>(1)});
+
+  private subscriptions = new Array<Subscription>();
+
+  public attributeData$: Observable<Array<AttributeData>> = this.attributeDataSubject; //this.attributeDataSubject.asObservable();
+
+  public static createEntityAttributesSubscription(telemetryService: TelemetryWebsocketService,
+                                                   entityId: EntityId, attributeScope: TelemetryType,
+                                                   zone: NgZone, keys: string[] = null): SharedTelemetrySubscriber {
+    const key = SharedTelemetrySubscriber.createTelemetrySubscriberKey(entityId, attributeScope, keys);
+    let info = SharedTelemetrySubscriber.subscribersCache[key];
+    if (!info) {
+      const subscriber = TelemetrySubscriber.createEntityAttributesSubscription(
+        telemetryService, entityId, attributeScope, zone, keys
+      );
+      info = {
+        key,
+        subscriber,
+        subscribed: false,
+        sharedSubscribers: new Set<SharedTelemetrySubscriber>()
+      };
+      SharedTelemetrySubscriber.subscribersCache[key] = info;
+    }
+    const sharedSubscriber = new SharedTelemetrySubscriber(info);
+    info.sharedSubscribers.add(sharedSubscriber);
+    return sharedSubscriber;
+  }
+
+  private constructor(private sharedSubscriptionInfo: SharedSubscriptionInfo) {
+  }
+
+  public subscribe() {
+    if (!this.subscribed) {
+      this.subscribed = true;
+      this.subscriptions.push(this.attributeDataSubject.connect());
+      if (!this.sharedSubscriptionInfo.subscribed) {
+        this.sharedSubscriptionInfo.subscriber.subscribe();
+        this.sharedSubscriptionInfo.subscribed = true;
+      }
+    }
+  }
+
+  public unsubscribe() {
+    if (this.subscribed) {
+      this.complete();
+    }
+    this.sharedSubscriptionInfo.sharedSubscribers.delete(this);
+    if (!this.sharedSubscriptionInfo.sharedSubscribers.size) {
+      if (this.sharedSubscriptionInfo.subscribed) {
+        this.sharedSubscriptionInfo.subscriber.unsubscribe();
+        this.sharedSubscriptionInfo.subscribed = false;
+      }
+      delete SharedTelemetrySubscriber.subscribersCache[this.sharedSubscriptionInfo.key];
+    }
+  }
+
+  private complete() {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    this.subscriptions.length = 0;
+  }
+
+}
+
 export class TelemetrySubscriber extends WsSubscriber {
 
   private dataSubject = new ReplaySubject<SubscriptionUpdate>(1);
diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts
index d0d4153b5f..96093675f8 100644
--- a/ui-ngx/src/app/shared/models/time/time.models.ts
+++ b/ui-ngx/src/app/shared/models/time/time.models.ts
@@ -16,7 +16,7 @@
 
 import { TimeService } from '@core/services/time.service';
 import { deepClone, isDefined, isDefinedAndNotNull, isNumeric, isUndefined } from '@app/core/utils';
-import * as moment_ from 'moment';
+import moment_ from 'moment';
 import * as momentTz from 'moment-timezone';
 import { IntervalType } from '@shared/models/telemetry/telemetry.models';
 
diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts
index acb82c6d5d..c8c2ed9a40 100644
--- a/ui-ngx/src/app/shared/models/widget-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts
@@ -329,11 +329,9 @@ export const resolveCssSize = (strSize?: string): [number, cssUnit] => {
   }
   let resolvedUnit: cssUnit;
   let resolvedSize = strSize;
-  for (const unit of cssUnits) {
-    if (strSize.endsWith(unit)) {
-      resolvedUnit = unit;
-      break;
-    }
+  const unitMatch = strSize.match(new RegExp(`(${cssUnits.join('|')})$`));
+  if (unitMatch) {
+    resolvedUnit = unitMatch[0] as cssUnit;
   }
   if (resolvedUnit) {
     resolvedSize = strSize.substring(0, strSize.length - resolvedUnit.length);
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 429bb79e35..e8b00ebab4 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -659,7 +659,7 @@ export interface CustomActionDescriptor {
   customResources?: Array<WidgetResource>;
   customHtml?: string;
   customCss?: string;
-  customModules?: Type<any>[];
+  customImports?: Type<any>[];
 }
 
 export interface WidgetAction extends CustomActionDescriptor {
@@ -836,6 +836,8 @@ export interface WidgetPosition {
 export interface WidgetSize {
   sizeX: number;
   sizeY: number;
+  preserveAspectRatio: boolean;
+  resizable: boolean;
 }
 
 export interface IWidgetSettingsComponent {
diff --git a/ui-ngx/src/app/shared/pipe/public-api.ts b/ui-ngx/src/app/shared/pipe/public-api.ts
index a24add5962..7c477f44c6 100644
--- a/ui-ngx/src/app/shared/pipe/public-api.ts
+++ b/ui-ngx/src/app/shared/pipe/public-api.ts
@@ -24,3 +24,4 @@ export * from './truncate.pipe';
 export * from './file-size.pipe';
 export * from './selectable-columns.pipe';
 export * from './image.pipe';
+export * from './key-value-not-empty.pipe';
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 309a3e2bf3..8bb22b83df 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -58,13 +58,12 @@ import { MatListModule } from '@angular/material/list';
 import { DatetimeAdapter, MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import { GridsterModule } from 'angular-gridster2';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { ShareModule as ShareButtonsModule } from 'ngx-sharebuttons';
+import { ShareButtonDirective } from 'ngx-sharebuttons';
 import { HotkeyModule } from 'angular2-hotkeys';
 import { ColorPickerModule } from '@iplab/ngx-color-picker';
-import { NgxHmCarouselModule } from 'ngx-hm-carousel';
+import { NgxHmCarouselComponent, NgxHmCarouselDynamicDirective, NgxHmCarouselItemDirective } from 'ngx-hm-carousel';
 import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { UserMenuComponent } from '@shared/components/user-menu.component';
 import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
@@ -83,7 +82,7 @@ import { DatetimePeriodComponent } from '@shared/components/time/datetime-period
 import { EnumToArrayPipe } from '@shared/pipe/enum-to-array.pipe';
 import { ClipboardModule } from 'ngx-clipboard';
 import { ValueInputComponent } from '@shared/components/value-input.component';
-import { MarkdownModule, MarkedOptions } from 'ngx-markdown';
+import { MarkdownModule, MARKED_OPTIONS } from 'ngx-markdown';
 import { MarkdownEditorComponent } from '@shared/components/markdown-editor.component';
 import { FullscreenDirective } from '@shared/components/fullscreen.directive';
 import { HighlightPipe } from '@shared/pipe/highlight.pipe';
@@ -179,17 +178,6 @@ import { NotificationComponent } from '@shared/components/notification/notificat
 import { TemplateAutocompleteComponent } from '@shared/components/notification/template-autocomplete.component';
 import { SlackConversationAutocompleteComponent } from '@shared/components/slack-conversation-autocomplete.component';
 import { DateAgoPipe } from '@shared/pipe/date-ago.pipe';
-import {
-  GtMdLgLayoutAlignDirective,
-  GtMdLgLayoutDirective,
-  GtMdLgLayoutGapDirective,
-  GtMdLgShowHideDirective,
-  MdLgLayoutAlignDirective,
-  MdLgLayoutDirective,
-  MdLgLayoutGapDirective,
-  MdLgShowHideDirective,
-  TbBreakPointsProvider
-} from '@shared/layout/layout.directives';
 import { ColorPickerComponent } from '@shared/components/color-picker/color-picker.component';
 import { ResourceAutocompleteComponent } from '@shared/components/resource/resource-autocomplete.component';
 import { ShortNumberPipe } from '@shared/pipe/short-number.pipe';
@@ -286,7 +274,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
         disableTooltipInteractivity: true
       }
     },
-    TbBreakPointsProvider,
     CountryData
   ],
   declarations: [
@@ -404,14 +391,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     NotificationComponent,
     TemplateAutocompleteComponent,
     SlackConversationAutocompleteComponent,
-    MdLgLayoutDirective,
-    MdLgLayoutAlignDirective,
-    MdLgLayoutGapDirective,
-    MdLgShowHideDirective,
-    GtMdLgLayoutDirective,
-    GtMdLgLayoutAlignDirective,
-    GtMdLgLayoutGapDirective,
-    GtMdLgShowHideDirective,
     ColorPickerComponent,
     ColorPickerPanelComponent,
     ResourceAutocompleteComponent,
@@ -484,14 +463,15 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     DragDropModule,
     GridsterModule,
     ClipboardModule,
-    FlexLayoutModule.withConfig({addFlexToParent: false}),
     FormsModule,
     ReactiveFormsModule,
     OverlayModule,
-    ShareButtonsModule,
+    ShareButtonDirective,
     HotkeyModule,
     ColorPickerModule,
-    NgxHmCarouselModule,
+    NgxHmCarouselComponent,
+    NgxHmCarouselDynamicDirective,
+    NgxHmCarouselItemDirective,
     DndModule,
     NgxFlowModule,
     NgxFlowchartModule,
@@ -499,7 +479,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     MarkdownModule.forRoot({
       sanitize: SecurityContext.NONE,
       markedOptions: {
-        provide: MarkedOptions,
+        provide: MARKED_OPTIONS,
         useFactory: MarkedOptionsFactory,
         deps: [MarkedOptionsService]
       }
@@ -604,14 +584,14 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     DragDropModule,
     GridsterModule,
     ClipboardModule,
-    FlexLayoutModule,
     FormsModule,
     ReactiveFormsModule,
     OverlayModule,
-    ShareButtonsModule,
     HotkeyModule,
     ColorPickerModule,
-    NgxHmCarouselModule,
+    NgxHmCarouselComponent,
+    NgxHmCarouselDynamicDirective,
+    NgxHmCarouselItemDirective,
     EditorModule,
     DndModule,
     NgxFlowchartModule,
@@ -668,14 +648,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     NotificationComponent,
     TemplateAutocompleteComponent,
     SlackConversationAutocompleteComponent,
-    MdLgLayoutDirective,
-    MdLgLayoutAlignDirective,
-    MdLgLayoutGapDirective,
-    MdLgShowHideDirective,
-    GtMdLgLayoutDirective,
-    GtMdLgLayoutAlignDirective,
-    GtMdLgLayoutGapDirective,
-    GtMdLgShowHideDirective,
     ColorPickerComponent,
     ColorPickerPanelComponent,
     ResourceAutocompleteComponent,
diff --git a/ui-ngx/src/assets/dashboard/customer_user_home_page.json b/ui-ngx/src/assets/dashboard/customer_user_home_page.json
index aef3367ff3..6e381a9ab2 100644
--- a/ui-ngx/src/assets/dashboard/customer_user_home_page.json
+++ b/ui-ngx/src/assets/dashboard/customer_user_home_page.json
@@ -193,7 +193,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"12px\">\n                <a mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <a mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\na.tb-item-card.tb-inactive {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-active {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n}\n"
           },
@@ -342,7 +342,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\na.tb-item-card.tb-critical {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-assigned {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\na.tb-item-card.tb-critical .tb-count:after {\n    content: \"warning\";\n    display: inline-block;\n    position: relative;\n    font-family: 'Material Icons Round';\n    color: #D12730;\n    vertical-align: bottom;\n    margin-left: 6px;\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n    a.tb-item-card.tb-critical .tb-count:after {\n        margin-left: 2px;\n    }\n}\n"
           },
diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json
index 310dac83ae..739402e72f 100644
--- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json
+++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json
@@ -42,7 +42,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-card-title\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.transport-messages.title' | translate }}\n            <mat-icon\n                matTooltip=\"{{ 'widgets.transport-messages.info' | translate }}\"\n                matTooltipPosition=\"above\"\n                class=\"tb-home-widget-info-icon\">info</mat-icon>\n        </div>\n    </div>\n    <tb-dashboard-state fxFlex stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-card-title\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.transport-messages.title' | translate }}\n            <mat-icon\n                matTooltip=\"{{ 'widgets.transport-messages.info' | translate }}\"\n                matTooltipPosition=\"above\"\n                class=\"tb-home-widget-info-icon\">info</mat-icon>\n        </div>\n    </div>\n    <tb-dashboard-state class=\"flex-1\" stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n"
           },
@@ -194,7 +194,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div style=\"height: 100%;\" fxLayout=\"column\">\n    <div class=\"tb-card-header\">\n        <div class=\"tb-card-title\">\n            <div class=\"tb-home-widget-title\" translate>widgets.functions.title</div>\n        </div>\n        <a mat-stroked-button color=\"primary\" class=\"tb-switch-to-pe\"\n        href=\"https://thingsboard.io/pricing/?product=thingsboard-pe&solution=pe-pay-as-you-go\" target=\"_blank\">{{ 'widgets.functions.switch-to-pe' | translate }}</a>\n    </div>\n    <div fxFlex class=\"tb-card-content\">\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.alarms</div>\n            <div class=\"feature\" translate>widgets.functions.dashboards</div>\n            <div class=\"feature\" translate>widgets.functions.entities-and-relations</div>\n            <div class=\"feature\" translate>widgets.functions.profiles</div>\n            <div class=\"feature\" translate>widgets.functions.advanced-features</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.notification-center</div>\n            <div class=\"feature\" translate>widgets.functions.api-usage</div>\n            <div class=\"feature\" translate>widgets.functions.customers</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.customers-hierarchy</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.roles-and-permissions</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.groups</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.integrations</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.solution-templates</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.scheduler</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.white-labeling</div>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div style=\"height: 100%;\" class=\"flex flex-col\">\n    <div class=\"tb-card-header\">\n        <div class=\"tb-card-title\">\n            <div class=\"tb-home-widget-title\" translate>widgets.functions.title</div>\n        </div>\n        <a mat-stroked-button color=\"primary\" class=\"tb-switch-to-pe\"\n        href=\"https://thingsboard.io/pricing/?product=thingsboard-pe&solution=pe-pay-as-you-go\" target=\"_blank\">{{ 'widgets.functions.switch-to-pe' | translate }}</a>\n    </div>\n    <div class=\"tb-card-content flex-1\">\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.alarms</div>\n            <div class=\"feature\" translate>widgets.functions.dashboards</div>\n            <div class=\"feature\" translate>widgets.functions.entities-and-relations</div>\n            <div class=\"feature\" translate>widgets.functions.profiles</div>\n            <div class=\"feature\" translate>widgets.functions.advanced-features</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div class=\"feature\" translate>widgets.functions.notification-center</div>\n            <div class=\"feature\" translate>widgets.functions.api-usage</div>\n            <div class=\"feature\" translate>widgets.functions.customers</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.customers-hierarchy</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.roles-and-permissions</div>\n        </div>\n        <div class=\"tb-card-column\">\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.groups</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.integrations</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.solution-templates</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.scheduler</div>\n            <div matTooltip=\"{{ 'widgets.functions.pe-feature-tooltip' | translate }}\" matTooltipPosition=\"above\" class=\"feature pe\" translate>widgets.functions.white-labeling</div>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-header {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    margin-top: 4px;\n    overflow: auto;\n}\n\n.tb-card-column {\n    min-width: 0px;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n.feature {\n    position: relative;\n    cursor: default;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 28px;\n    letter-spacing: 0.2px;\n    color: rgba(0, 0, 0, 0.76);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.feature:before {\n    content: \"check\";\n    font-family: 'Material Icons Round';\n    display: inline-block;\n    font-size: 20px;\n    line-height: 20px;\n    color: #198038;\n    font-weight: 600;\n    position: relative;\n    background: #F3F6FA;\n    border-radius: 4px;\n    width: 20px;\n    height: 20px;\n    padding: 2px;\n    vertical-align: sub;\n    margin-right: 8px;\n}\n\n.feature.pe:before {\n    content: \"close\";\n    background: #F4F4F4;\n    color: rgba(0, 0, 0, 0.12);\n}\n\n.feature.pe:after {\n    position: relative;\n    display: inline-block;\n    margin-left: 4px;\n    vertical-align: baseline;\n    top: -0.5em;\n    content: \"PE\";\n    color: #305680;\n    font-weight: 700;\n    font-size: 12px;\n    line-height: 12px;\n    letter-spacing: 0.0015em;\n}\n\n.feature+.feature {\n    margin-top: 4px;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-switch-to-pe {\n        height: 24px;\n        font-size: 12px;\n        padding: 0 4px;\n    }\n    \n    .feature+.feature {\n        margin-top: 2px;\n    }\n    \n    .feature {\n        font-size: 11px;\n        line-height: 18px;\n    }\n\n    .feature:before {\n      font-size: 14px;\n      line-height: 14px;\n      width: 14px;\n      height: 14px;\n      margin-right: 4px;\n    }\n    .feature.pe:after {\n        margin-left: 2px;\n        top: -0.5em;\n        content: \"PE\";\n        font-size: 8px;\n        line-height: 8px;\n    }\n    \n}\n\n"
           },
diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
index 59eb61a935..6e3b698200 100644
--- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
+++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
@@ -42,7 +42,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"12px\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.activity.title' | translate }}</div>\n        <tb-toggle-header #activityStates value=\"devices\" name=\"activityStates\">\n     <tb-toggle-option value=\"devices\">{{ 'device.devices' | translate }}</tb-toggle-option>\n        <tb-toggle-option value=\"transportMessages\">{{ 'widgets.transport-messages.title' | translate }}</tb-toggle-option>\n        </tb-toggle-header>\n    </div>\n    <ng-container [ngSwitch]=\"activityStates.value\">\n        <ng-template [ngSwitchCase]=\"'devices'\">\n            <tb-dashboard-state fxFlex stateId=\"devices_activity\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n        <ng-template [ngSwitchCase]=\"'transportMessages'\">\n            <tb-dashboard-state fxFlex stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n    </ng-container>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"flex flex-row items-start justify-between lt-md:flex-col lt-md:gap-3\">\n        <div class=\"tb-home-widget-title\">{{ 'widgets.activity.title' | translate }}</div>\n        <tb-toggle-header #activityStates value=\"devices\" name=\"activityStates\">\n     <tb-toggle-option value=\"devices\">{{ 'device.devices' | translate }}</tb-toggle-option>\n        <tb-toggle-option value=\"transportMessages\">{{ 'widgets.transport-messages.title' | translate }}</tb-toggle-option>\n        </tb-toggle-header>\n    </div>\n    <ng-container [ngSwitch]=\"activityStates.value\">\n        <ng-template [ngSwitchCase]=\"'devices'\">\n            <tb-dashboard-state class=\"flex-1\" stateId=\"devices_activity\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n        <ng-template [ngSwitchCase]=\"'transportMessages'\">\n            <tb-dashboard-state class=\"flex-1\" stateId=\"transport_messages\" [ctx]=\"ctx\"></tb-dashboard-state>\n        </ng-template>\n    </ng-container>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n"
           },
@@ -281,7 +281,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div fxLayout=\"row\" fxLayoutGap=\"12px\">\n                <a fxHide.md mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n                <a mat-flat-button color=\"primary\" routerLink=\"/entities/devices\" [queryParams]=\"{action: 'add'}\">{{ 'device.add' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\" [queryParams]=\"{active: false}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\" [queryParams]=\"{active: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/entities/devices\">{{ 'device.devices' | translate }}</a>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <a class=\"md:!hidden\" mat-stroked-button color=\"primary\" href=\"https://thingsboard.io/docs\" target=\"_blank\">{{ 'widgets.devices.view-docs' | translate }}</a>\n                <a mat-flat-button color=\"primary\" routerLink=\"/entities/devices\" [queryParams]=\"{action: 'add'}\">{{ 'device.add' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-inactive\" routerLink=\"/entities/devices\" [queryParams]=\"{active: false}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.inactive</div>\n                </div>\n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${inactiveDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-active\" routerLink=\"/entities/devices\" [queryParams]=\"{active: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.active</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${activeDevices:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/entities/devices\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.devices.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalDevices:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    overflow: hidden;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n    overflow: hidden;\n    justify-content: space-evenly;\n}\n\na.tb-item-card.tb-inactive {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-active {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n}\n"
           },
@@ -430,7 +430,7 @@
           "padding": "16px",
           "settings": {
             "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a fxHide.md class=\"tb-item-card tb-total\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
+            "markdownTextPattern": "<div class=\"tb-card-content\">\n    <div class=\"tb-content-container\">\n        <div class=\"tb-card-header\">\n            <div class=\"tb-card-title\">\n                <a class=\"tb-home-widget-title tb-home-widget-link\" routerLink=\"/alarms\">{{ 'alarm.alarms' | translate }}</a>\n            </div>\n        </div>\n        <div class=\"tb-item-cards\">\n            <a class=\"tb-item-card tb-critical\" routerLink=\"/alarms\" [queryParams]=\"{severityList: ['CRITICAL']}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.critical</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${criticalAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-assigned\" routerLink=\"/alarms\" [queryParams]=\"{assignedToMe: true}\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.assigned-to-me</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${assignedToMeAlarms:0}</div>\n                </div>\n            </a>\n            <a class=\"tb-item-card tb-total md:!hidden\" routerLink=\"/alarms\">\n                <div class=\"tb-item-title-container\">\n                    <div class=\"tb-item-title tb-home-widget-link\" translate>widgets.alarms.total</div>\n                </div>    \n                <div class=\"tb-count-container\">\n                    <div class=\"tb-count\">${totalAlarms:0}</div>\n                </div>\n            </a>\n        </div>\n    </div>\n</div>",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ".tb-card-content {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n.tb-content-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: 12px;\n}\n\n.tb-card-header {\n    height: 36px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n\n.tb-item-cards {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    overflow: hidden;\n}\n\na.tb-item-card {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 12px;\n    border: 1px solid;\n    border-radius: 10px;\n    margin-bottom: 12px;\n    overflow: hidden;\n    justify-content: space-evenly;\n}\n\na.tb-item-card.tb-critical {\n    background: rgba(209, 39, 48, 0.04);\n    border-color: rgba(209, 39, 48, 0.06);\n}\n\na.tb-item-card.tb-assigned {\n    background: rgba(48, 86, 128, 0.04);\n    border-color: rgba(48, 86, 128, 0.12);\n}\n\na.tb-item-card.tb-total {\n    background: rgba(0, 0, 0, 0.01);\n    border-color: rgba(0, 0, 0, 0.05);\n}\n\n.tb-item-title-container {\n    display: grid;\n}\n\n.tb-item-title {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;    \n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-item-title.tb-home-widget-link:after {\n    position: absolute;\n    right: 0;\n}\n\na.tb-item-card:hover .tb-item-title.tb-home-widget-link:after { \n    color: rgba(0, 0, 0, 0.38);\n}\n\na.tb-item-card:hover {\n    box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);\n}\n\n.tb-count-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n.tb-count {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    white-space: nowrap;\n    color: rgba(0, 0, 0, 0.87);\n}\n\na.tb-item-card.tb-critical .tb-count:after {\n    content: \"warning\";\n    display: inline-block;\n    position: relative;\n    font-family: 'Material Icons Round';\n    color: #D12730;\n    vertical-align: bottom;\n    margin-left: 6px;\n}\n\n@media screen and (max-width: 959px) {\n    .tb-item-cards {\n        flex-direction: column;\n    }\n    a.tb-item-card {\n        margin-bottom: 0;\n    }\n}\n\n@media screen and (max-width: 1279px) {\n    a.tb-item-card {\n        flex-direction: row;\n        align-items: center;\n    }\n    .tb-item-title.tb-home-widget-link:after {\n        position: relative;\n    }\n    .tb-count-container {\n        align-items: flex-end;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-item-title {\n        font-size: 11px;\n        line-height: 16px;\n    }\n    .tb-count {\n        font-size: 16px;\n        line-height: 24px;\n    }\n    a.tb-item-card {\n        padding: 4px 8px;\n        margin-bottom: 6px;\n    }\n    a.tb-item-card:hover {\n        box-shadow: 0px 2px 5px rgba(23, 33, 90, 0.08);\n    }\n    a.tb-item-card.tb-critical .tb-count:after {\n        margin-left: 2px;\n    }\n}\n"
           },
@@ -1208,7 +1208,7 @@
           "dropShadow": false,
           "enableFullscreen": false,
           "widgetStyle": {},
-          "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n    padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n    padding-bottom: 8px;\n    font-weight: 600;\n    font-size: 20px;\n    line-height: 24px;\n    letter-spacing: 0.1px;\n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n    padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n        padding-bottom: 0;\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0.25px;\n  }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1182px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n        gap: 0;\n    }\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n        min-width: 150px;\n    }\n}\n\n@media screen and (max-width: 960px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n        max-width: 120px;\n    }\n    \n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n        max-width: 160px;\n    }\n}\n\n@media screen and (min-width: 1819px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n        max-width: 125px;\n    }\n    \n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n        max-width: 160px;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-height: 965px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n        display: none;\n    }\n}",
+          "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n    padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n    padding-bottom: 8px;\n    font-weight: 600;\n    font-size: 20px;\n    line-height: 24px;\n    letter-spacing: 0.1px;\n    color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n    padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n        padding-bottom: 0;\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0.25px;\n  }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1182px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n        gap: 0;\n    }\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n        min-width: 150px;\n    }\n}\n\n@media screen and (max-width: 960px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n        max-width: 120px;\n    }\n    \n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n        max-width: 160px;\n    }\n}\n\n@media screen and (min-width: 1819px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n        max-width: 125px;\n    }\n    \n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n        max-width: 160px;\n    }\n}\n\n@media screen and (min-width: 960px) and (max-height: 990px) {\n    .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n        display: none;\n    }\n}",
           "showTitleIcon": false,
           "titleTooltip": "",
           "titleStyle": null,
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
index e9a2a90ef7..db3c17e0b5 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_create_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
       (ngSubmit)="save()" class="add-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,21 +14,21 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required>
         <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
           Entity name is required.
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel" >
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
       <tb-entity-type-select
         class="mat-block"
         formControlName="entityType"
@@ -36,50 +36,50 @@
         [allowedEntityTypes]="allowedEntityTypes"
       ></tb-entity-type-select>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'ASSET'"
       ></tb-entity-subtype-autocomplete>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'DEVICE'"
       ></tb-entity-subtype-autocomplete>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -89,11 +89,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -106,20 +106,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -143,7 +143,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
index e2f4f531bc..76b656385c 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples/custom_pretty_edit_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
       (ngSubmit)="save()"  class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,57 +14,57 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required readonly="">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Type</mat-label>
         <input matInput formControlName="entityType" readonly>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Type</mat-label>
         <input matInput formControlName="type" readonly>
       </mat-form-field>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -74,12 +74,12 @@
     </div>
     <div class="relations-list old-relations">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="oldRelations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
+      <div class="body" [class.!hidden]="!oldRelations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
              *ngFor="let relation of oldRelations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -92,20 +92,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   required="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   required="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -121,11 +121,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -138,20 +138,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -175,7 +175,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
index 7f93d6266b..d012914b00 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_clone_device_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="cloneDeviceFormGroup" (ngSubmit)="save()" style="min-width:320px;">
-    <mat-toolbar fxLayout="row" color="primary">
+    <mat-toolbar class="flex flex-row" color="primary">
         <h2>Clone device: {{ deviceName }}</h2>
-        <span fxFlex></span>
+        <span class="flex-1"></span>
         <button mat-icon-button (click)="cancel()"
                 type="button">
             <mat-icon class="material-icons">close
@@ -16,8 +16,8 @@
                       *ngIf="isLoading$ | async">
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-    <div mat-dialog-content fxLayout="column">
-        <mat-form-field fxFlex class="mat-block">
+    <div mat-dialog-content class="flex flex-col">
+        <mat-form-field class="mat-block flex-1">
             <mat-label>Clone device name</mat-label>
             <input matInput formControlName="cloneName" required>
             <mat-error *ngIf="cloneDeviceFormGroup.get('cloneName').hasError('required')">
@@ -25,8 +25,7 @@
             </mat-error>
         </mat-form-field>
     </div>
-    <div mat-dialog-actions fxLayout="row"
-         fxLayoutAlign="end center">
+    <div mat-dialog-actions class="flex flex-row items-center justify-end">
         <button mat-button color="primary" type="button"
                 [disabled]="(isLoading$ | async)"
                 (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
index e9a2a90ef7..db3c17e0b5 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
       (ngSubmit)="save()" class="add-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add entity</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,21 +14,21 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required>
         <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
           Entity name is required.
         </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel" >
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
       <tb-entity-type-select
         class="mat-block"
         formControlName="entityType"
@@ -36,50 +36,50 @@
         [allowedEntityTypes]="allowedEntityTypes"
       ></tb-entity-type-select>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'ASSET'"
       ></tb-entity-subtype-autocomplete>
       <tb-entity-subtype-autocomplete
-        fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
-        class="mat-block"
+        *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
+        class="mat-block flex-1"
         formControlName="type"
         [required]="true"
         [entityType]="'DEVICE'"
       ></tb-entity-subtype-autocomplete>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -89,11 +89,11 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -106,20 +106,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -143,7 +143,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
index c523258fbc..44343e8d2f 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="addEntityFormGroup" (ngSubmit)="save()" style="min-width:480px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Add new User</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -15,10 +15,9 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)">
   </div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Email</mat-label>
         <input matInput formControlName="email" required
                ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\_\-0-9]+\.)+[a-zA-Z]{2,}))$/'>
@@ -30,25 +29,22 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>First Name</mat-label>
         <input matInput
                formControlName="firstName">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Last Name</mat-label>
         <input matInput
                formControlName="lastName">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px"
-         fxLayout.xs="column" fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>User activation method</mat-label>
         <mat-select matInput formControlName="userActivationMethod">
           <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod.value">
@@ -60,8 +56,7 @@
       </mat-form-field>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row"
-       fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary" type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
index 130426c6cf..c23de01abf 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_create_user_js.md
@@ -93,7 +93,7 @@ function ActivationLinkDialogController(instance) {
 let activationLinkDialogTemplate = `<form style="min-width: 400px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -104,10 +104,10 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
+    <div class="mat-content" class="flex flex-col">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
+      <div class="flex flex-row items-center justify-start">
+        <pre class="tb-highlight flex-1"><code>{{ activationLink }}</code></pre>
         <button mat-icon-button
                 color="primary"
                 ngxClipboard
@@ -120,7 +120,7 @@ let activationLinkDialogTemplate = `<form style="min-width: 400px; position: rel
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
index 05f494666f..76b656385c 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_dialog_html.md
@@ -4,9 +4,9 @@
 {:code-style="max-height: 400px;"}
 <form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
       (ngSubmit)="save()"  class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -14,57 +14,57 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+  <div mat-dialog-content class="flex flex-col">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Name</mat-label>
         <input matInput formControlName="entityName" required readonly="">
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Label</mat-label>
         <input matInput formControlName="entityLabel">
       </mat-form-field>
     </div>
-    <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-      <mat-form-field fxFlex class="mat-block">
+    <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Entity Type</mat-label>
         <input matInput formControlName="entityType" readonly>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block flex-1">
         <mat-label>Type</mat-label>
         <input matInput formControlName="type" readonly>
       </mat-form-field>
     </div>
-    <div formGroupName="attributes" fxLayout="column">
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+    <div formGroupName="attributes" class="flex flex-col">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Latitude</mat-label>
           <input type="number" step="any" matInput formControlName="latitude">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Longitude</mat-label>
           <input type="number" step="any" matInput formControlName="longitude">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Address</mat-label>
           <input matInput formControlName="address">
         </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Owner</mat-label>
           <input matInput formControlName="owner">
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
+        <mat-form-field class="mat-block flex-1">
           <mat-label>Integer Value</mat-label>
           <input type="number" step="1" matInput formControlName="number">
           <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
             Invalid integer value.
           </mat-error>
         </mat-form-field>
-        <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
+        <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">
           <label class="checkbox-label">Boolean Value</label>
           <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
             {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}
@@ -74,12 +74,12 @@
     </div>
     <div class="relations-list old-relations">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
-      <div class="body" [fxShow]="oldRelations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations"
+      <div class="body" [class.!hidden]="!oldRelations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations"
              *ngFor="let relation of oldRelations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
@@ -92,20 +92,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   required="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   required="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -121,16 +121,16 @@
     </div>
     <div class="relations-list">
       <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
-      <div class="body" [fxShow]="relations().length">
-        <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
-          <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
-            <div fxFlex fxLayout="column">
-              <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
+      <div class="body" [class.!hidden]="!relations().length">
+        <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
+          <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">
+            <div class="flex flex-1 flex-col">
+              <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">
                 <mat-form-field class="mat-block" style="min-width: 100px;">
                   <mat-label>Direction</mat-label>
                   <mat-select formControlName="direction" name="direction">
                     <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
-                        {{ ("relation.search-direction." + direction.value) | translate}}
+                      {{ ("relation.search-direction." + direction.value) | translate}}
                     </mat-option>
                   </mat-select>
                   <mat-error *ngIf="relation.get('direction').hasError('required')">
@@ -138,20 +138,20 @@
                   </mat-error>
                 </mat-form-field>
                 <tb-relation-type-autocomplete
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   formControlName="relationType"
                   [required]="true">
                 </tb-relation-type-autocomplete>
               </div>
-              <div fxLayout="row" fxLayout.xs="column">
+              <div class="flex flex-row xs:flex-col">
                 <tb-entity-select
-                  fxFlex class="mat-block"
+                  class="mat-block flex-1"
                   [required]="true"
                   formControlName="relatedEntity">
                 </tb-entity-select>
               </div>
             </div>
-            <div fxLayout="column" fxLayoutAlign="center center">
+            <div class="flex flex-col items-center justify-center">
               <button mat-icon-button color="primary"
                       aria-label="Remove"
                       type="button"
@@ -175,7 +175,7 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
index 3f2eff11c6..4b621239e8 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/examples_custom_pretty/custom_pretty_edit_image_html.md
@@ -3,9 +3,9 @@
 ```html
 {:code-style="max-height: 400px;"}
 <form [formGroup]="editEntity" (ngSubmit)="save()" class="edit-entity-form">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>Edit {{entityName}} image</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
     </button>
@@ -13,15 +13,15 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="(isLoading$ | async) || loading">
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async) && !loading"></div>
-  <div mat-dialog-content fxLayout="column">
-    <div formGroupName="attributes" fxLayout="column">
+  <div mat-dialog-content class="flex flex-col">
+    <div formGroupName="attributes" class="flex flex-col">
       <tb-image-input
         label="Entity image"
         formControlName="image"
       ></tb-image-input>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || editEntity.invalid || !editEntity.dirty">
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
index 5759571fe7..25df3a7e84 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
@@ -56,24 +56,24 @@ function showImageDialog(title, imageUrl) {
 var imageDialogTemplate =
     '<div aria-label="Image">' +
     '<form #theForm="ngForm">' +
-    '<mat-toolbar fxLayout="row" color="primary">' +
+    '<mat-toolbar class="flex flex-row" color="primary">' +
     '<h2>{{title}}</h2>' +
-    '<span fxFlex></span>' +
+    '<span class="flex-1"></span>' +
     '<button mat-icon-button (click)="close()">' +
     '<mat-icon>close</mat-icon>' +
     '</button>' +
     '</mat-toolbar>' +
     '<div mat-dialog-content>' +
     '<div class="mat-content mat-padding">' +
-    '<div fxLayout="column" fxFlex>' +
+    '<div class="flex flex-1 flex-col">' +
     '<div style="padding-top: 20px;">' +
     '<img [src]="imageUrl" style="height: 300px;"/>' +
     '</div>' +
     '</div>' +
     '</div>' +
     '</div>' +
-    '<div mat-dialog-actions fxLayout="row">' +
-    '<span fxFlex></span>' +
+    '<div mat-dialog-actions class="flex flex-row">' +
+    '<span class="flex-1"></span>' +
     '<button mat-button (click)="close()" style="margin-right:20px;">Close</button>' +
     '</div>' +
     '</form>' +
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
index f3ba4c0590..c0126214c7 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
@@ -19,9 +19,9 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;">
+  <div class="flex h-full flex-1 flex-col">
       <div>My first Alarm widget.</div>
-      <table class="my-alarm-table" style="width: 100%;">
+      <table class="my-alarm-table w-full">
           <thead>
               <tr>
                   <th *ngFor="let dataKey of alarmSource?.dataKeys">{{dataKey.label}}</th> 
@@ -30,7 +30,7 @@ The **Widget Editor** will be opened, pre-populated with the content of the defa
           <tbody>
               <tr *ngFor="let alarm of alarms">
                   <td *ngFor="let dataKey of alarmSource?.dataKeys" 
-                      [ngStyle]="getAlarmCellStyle(alarm, dataKey)">
+                      [style]="getAlarmCellStyle(alarm, dataKey)">
                       {{getAlarmValue(alarm, dataKey)}}
                   </td>
               </tr>      
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
index afe4f6a0e1..19f79d0962 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
@@ -11,9 +11,9 @@ The **Widget Editor** will open, pre-populated with the content of the default *
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="center stretch">
+  <div class="flex h-full flex-1 flex-col items-stretch justify-center">
     <div>My first latest values widget.</div>
-    <div fxFlex fxLayout="row" *ngFor="let dataKeyData of data" fxLayoutAlign="space-around center">
+    <div class="flex flex-1 flex-row items-center justify-around" *ngFor="let dataKeyData of data">
         <div>{{dataKeyData.dataKey.label}}:</div>
         <div>{{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}</div>
         <div>{{dataKeyData.data[0] && dataKeyData.data[0][1]}}</div>
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
index 2fa83c2062..44abed8a46 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
@@ -12,7 +12,7 @@ The **Widget Editor** will open, pre-populated with default **Control** template
 
 ```html
     <form #rpcForm="ngForm" (submit)="sendCommand()">
-      <div class="mat-content mat-padding" fxLayout="column">
+      <div class="mat-content mat-padding flex flex-col">
         <mat-form-field class="mat-block">
           <mat-label>RPC method</mat-label>
           <input matInput required name="rpcMethod" #rpcMethodField="ngModel" [(ngModel)]="rpcMethod"/>
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
index 7e73b63307..d7c7901052 100644
--- a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
@@ -10,7 +10,7 @@ The **Widget Editor** will be opened pre-populated with the content of default *
  - Put the following HTML code inside the HTML tab of "Resources" section:
 
 ```html
-  <div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="space-around stretch">
+  <div class="flex h-full flex-1 flex-col items-stretch justify-around">
     <h3 style="text-align: center;">My first static widget.</h3>
     <button mat-raised-button color="primary" (click)="showAlert()">Click me</button>
   </div>
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/gateway/address-filter_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/address-filter_fn.md
new file mode 100644
index 0000000000..9ead0a6afd
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/address-filter_fn.md
@@ -0,0 +1,24 @@
+### Address filter field
+
+It is used to filter the allowed IP addresses to connect to the connector.
+
+### **Examples of IP addresses filtering**
+
+Let’s review more examples of IP addresses filtering:
+
+For example, we have a device that has the following IP address: 192.168.0.120:5001. Now let's look at examples of the configuration of the field to allow the connection of different variants of IP addresses:
+
+1. Only one device with a specified IP address and port can connect:
+
+   **Address filter**: 192.168.0.120:5001
+2. Allow any devices with any IP address and only port 5001:
+
+   **Address filter:** *:5001
+
+3. Allow all devices that have the IP address 192.168.0.120 with any port:
+
+   **Address filter:** 192.168.0.120:*
+
+4. Allow any devices:
+
+   **Address filter:** *:*
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/gateway/attribute-name-expression_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/attribute-name-expression_fn.md
new file mode 100644
index 0000000000..424e51022f
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/attribute-name-expression_fn.md
@@ -0,0 +1,21 @@
+### **Attribute name expression field**
+
+The expression that is used to get the name of the requested attribute from the received data.
+
+### **Examples of data converting**
+
+Let’s review example of data converting:
+
+We have a device that measures temperature and humidity. And for example, you want to send a request for a shared attribute that stores the firmware version of the device. To do this, we need to specify exactly where in the message the attribute name is located, the value of which we want to get.
+
+In our case, let the requested attribute name is “**FirmwareVersion**”.
+
+Accordingly, the field will contain the following value:
+
+`[16:]`
+
+And if the device sends a message with the following payload:
+
+`myShrAttrRequestFirmwareVersion`
+
+The connector, according to the configuration above, will take bytes starting from **16** to the **end** (from **0** to **16** is the “**Request expression**”) and send a request to the platform for the dispersed name of the shared attribute.
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/gateway/attributes_timeseries_expressions_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/attributes_timeseries_expressions_fn.md
new file mode 100644
index 0000000000..91cf23ce26
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/attributes_timeseries_expressions_fn.md
@@ -0,0 +1,65 @@
+### Expressions
+#### JSON Path:
+
+The expression field is used to extract data from the MQTT message. There are various available options for different parts of the messages:
+
+ - The JSONPath format can be used to extract data from the message body.
+
+ - The regular expression format can be used to extract data from the topic where the message will arrive.
+
+ - Slices can only be used in the expression fields of bytes converters.
+
+JSONPath expressions specify the items within a JSON structure (which could be an object, array, or nested combination of both) that you want to access. These expressions can select elements from JSON data on specific criteria. Here's a basic overview of how JSONPath expressions are structured:
+
+- `$`: The root element of the JSON document;
+
+- `.`: Child operator used to select child elements. For example, $.store.book ;
+
+- `[]`: Child operator used to select child elements. $['store']['book'] accesses the book array within a store object;
+
+##### Examples:
+
+For example, if we want to extract the device name from the following message, we can use the expression below:
+
+MQTT message:
+
+```
+{
+  "sensorModelInfo": {
+    "sensorName": "AM-123",
+    "sensorType": "myDeviceType"
+  },
+  "data": {
+    "temp": 12.2,
+    "hum": 56,
+    "status": "ok"
+  }
+}
+{:copy-code}
+```
+
+Expression:
+
+`${sensorModelInfo.sensorName}`
+
+Converted data:
+
+`AM-123`
+
+If we want to extract all data from the message above, we can use the following expression:
+
+`${data}`
+
+Converted data:
+
+`{"temp": 12.2, "hum": 56, "status": "ok"}`
+
+Or if we want to extract specific data (for example “temperature”), you can use the following expression:
+
+`${data.temp}`
+
+And as a converted data we will get:
+
+`12.2`
+
+<br/>
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/gateway/byte_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/byte_fn.md
new file mode 100644
index 0000000000..c52861a592
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/byte_fn.md
@@ -0,0 +1,35 @@
+## Byte field
+
+The byte field is used to slice received data from the specific index.
+
+### Examples of data converting
+
+Let’s review more examples of data converting:
+We have a device that measures temperature and humidity. Device has charasteristic that can be
+read and when we receive data from her, the data combine temperature and humidity. So, data
+from device have the next view:b’\x08<\x08\x00’ and in human readable format:[8, 34](first array
+element is temperature and the second is humidity).
+
+1. We want to read only temperature value
+
+   **“Bytes from”: “0”**
+
+   **“Bytes to”: “1”**
+
+   Data to platform: **8**
+
+2. We want to read only humidity value
+
+   **“Bytes from”: “1”**
+
+   **“Bytes to”: “-1”**
+
+   Data to platform: **34**
+
+3. We want to read all values
+
+   **“Bytes from”: “0”**
+
+   **“Bytes to”: “-1”**
+
+   Data to platform:**834**
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/gateway/request-expression_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/request-expression_fn.md
new file mode 100644
index 0000000000..5f38929c66
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/request-expression_fn.md
@@ -0,0 +1,21 @@
+### **Request expression field**
+
+The expression that is used to know if the request from the device is “**Attribute Request**” or not.
+
+### **Examples of data converting**
+
+Let’s review example of data converting:
+
+We have a device that measures temperature and humidity. And for example, you want to send a request for a shared attribute that stores the firmware version of the device. In order for the connector to understand that the received message refers to "**Attribute request**" and not telemetry type, we must specify in the configuration what the message should begin with.
+
+In our case, let the beginning of the message contain “**myShrAttrRequest**”.
+
+Accordingly, the field will contain the following value:
+
+`${[0:16]==myShrAttrRequest}`
+
+And if the device sends a message with the following payload:
+
+`myShrAttrRequestFirmwareVersion`
+
+The connector will take the specified range from 0 to 16 bytes and see that this message belongs to the “**Attribute request**” type.
diff --git a/ui-ngx/src/assets/locale/locale.constant-ar_AE.json b/ui-ngx/src/assets/locale/locale.constant-ar_AE.json
index 3f148cab2d..0afd671082 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ar_AE.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ar_AE.json
@@ -3163,261 +3163,16 @@
         "function": "الوظيفة"
     },
     "gateway": {
-        "add-entry": "إضافة تكوين",
-        "advanced": "متقدم",
-        "checking-device-activity": "فحص نشاط الجهاز",
-        "command": "أوامر Docker",
-        "command-copied-message": "تم نسخ أمر Docker إلى الحافظة",
-        "configuration": "التكوين",
-        "connector-add": "إضافة موصل جديد",
-        "connector-enabled": "تمكين الموصل",
-        "connector-name": "اسم الموصل",
-        "connector-name-required": "اسم الموصل مطلوب.",
-        "connector-type": "نوع الموصل",
-        "connector-type-required": "نوع الموصل مطلوب.",
-        "connectors": "الموصلات",
-        "connectors-config": "تكوينات الموصلات",
-        "connectors-table-enabled": "ممكّن",
-        "connectors-table-name": "الاسم",
-        "connectors-table-type": "النوع",
-        "connectors-table-status": "الحالة",
-        "connectors-table-actions": "الإجراءات",
-        "connectors-table-key": "المفتاح",
-        "connectors-table-class": "الفئة",
-        "rpc-command-send": "إرسال",
-        "rpc-command-result": "الاستجابة",
-        "rpc-command-edit-params": "تحرير المعلمات",
-        "gateway-configuration": "تكوين عام",
-        "docker-label": "استخدم التعليمات التالية لتشغيل IoT Gateway في Docker compose مع بيانات اعتماد للجهاز المحدد",
-        "install-docker-compose": "استخدم التعليمات لتنزيل وتثبيت وإعداد docker compose",
-        "download-configuration-file": "تنزيل ملف التكوين",
-        "download-docker-compose": "تنزيل docker-compose.yml لبوابتك",
-        "launch-gateway": "تشغيل البوابة",
-        "launch-docker-compose": "بدء تشغيل البوابة باستخدام الأمر التالي في الطرفية من المجلد الذي يحتوي على ملف docker-compose.yml",
-        "create-new-gateway": "إنشاء بوابة جديدة",
-        "create-new-gateway-text": "هل أنت متأكد أنك تريد إنشاء بوابة جديدة باسم: '{{gatewayName}}'؟",
-        "created-time": "وقت الإنشاء",
-        "configuration-delete-dialog-header": "سيتم حذف التكوينات",
-        "configuration-delete-dialog-body": "يمكن تعطيل التكوين عن بُعد فقط إذا كان هناك وصول جسدي إلى البوابة. ستتم حذف جميع التكوينات السابقة.<br><br> \n لتعطيل التكوين، أدخل اسم البوابة أدناه",
-        "configuration-delete-dialog-input": "اسم البوابة",
-        "configuration-delete-dialog-input-required": "اسم البوابة إلزامي",
-        "configuration-delete-dialog-confirm": "إيقاف التشغيل",
-        "delete": "حذف التكوين",
-        "download-tip": "تنزيل ملف التكوين",
-        "drop-file": "أفلق الملف هنا أو",
         "gateway": "البوابة",
         "gateway-exists": "الجهاز بنفس الاسم موجود بالفعل.",
         "gateway-name": "اسم البوابة",
         "gateway-name-required": "اسم البوابة مطلوب.",
         "gateway-saved": "تم حفظ تكوين البوابة بنجاح.",
-        "grpc": "GRPC",
-        "grpc-keep-alive-timeout": "مهلة البقاء على قيد الحياة (بالمللي ثانية)",
-        "grpc-keep-alive-timeout-required": "مهلة البقاء على قيد الحياة مطلوبة",
-        "grpc-keep-alive-timeout-min": "مهلة البقاء على قيد الحياة لا يمكن أن تكون أقل من 1",
-        "grpc-keep-alive-timeout-pattern": "مهلة البقاء على قيد الحياة غير صالحة",
-        "grpc-keep-alive": "البقاء على قيد الحياة (بالمللي ثانية)",
-        "grpc-keep-alive-required": "البقاء على قيد الحياة مطلوب",
-        "grpc-keep-alive-min": "البقاء على قيد الحياة لا يمكن أن يكون أقل من 1",
-        "grpc-keep-alive-pattern": "البقاء على قيد الحياة غير صالح",
-        "grpc-min-time-between-pings": "الحد الأدنى للوقت بين البينغات (بالمللي ثانية)",
-        "grpc-min-time-between-pings-required": "الحد الأدنى للوقت بين البينغات مطلوب",
-        "grpc-min-time-between-pings-min": "الحد الأدنى للوقت بين البينغات لا يمكن أن يكون أقل من 1",
-        "grpc-min-time-between-pings-pattern": "الحد الأدنى للوقت بين البينغات غير صالح",
-        "grpc-min-ping-interval-without-data": "الحد الأدنى لفاصل البينغ بدون بيانات (بالمللي ثانية)",
-        "grpc-min-ping-interval-without-data-required": "الحد الأدنى لفاصل البينغ بدون بيانات مطلوب",
-        "grpc-min-ping-interval-without-data-min": "الحد الأدنى لفاصل البينغ بدون بيانات لا يمكن أن يكون أقل من 1",
-        "grpc-min-ping-interval-without-data-pattern": "الحد الأدنى لفاصل البينغ بدون بيانات غير صالح",
-        "grpc-max-pings-without-data": "الحد الأقصى لعدد البينغات بدون بيانات",
-        "grpc-max-pings-without-data-required": "الحد الأقصى لعدد البينغات بدون بيانات مطلوب",
-        "grpc-max-pings-without-data-min": "الحد الأقصى لعدد البينغات بدون بيانات لا يمكن أن يكون أقل من 1",
-        "grpc-max-pings-without-data-pattern": "الحد الأقصى لعدد البينغات بدون بيانات غير صالح",
-        "inactivity-check-period-seconds": "فترة فحص الخمول (بالثواني)",
-        "inactivity-check-period-seconds-required": "فترة فحص الخمول مطلوبة",
-        "inactivity-check-period-seconds-min": "فترة فحص الخمول لا يمكن أن تكون أقل من 1",
-        "inactivity-check-period-seconds-pattern": "فترة فحص الخمول غير صالحة",
-        "inactivity-timeout-seconds": "فترة الخمول (بالثواني)",
-        "inactivity-timeout-seconds-required": "فترة الخمول مطلوبة",
-        "inactivity-timeout-seconds-min": "فترة الخمول لا يمكن أن تكون أقل من 1",
-        "inactivity-timeout-seconds-pattern": "فترة الخمول غير صالحة",
-        "json-parse": "JSON غير صالح.",
-        "json-required": "الحقل لا يمكن أن يكون فارغًا.",
-        "logs": {
-            "logs": "السجلات",
-            "days": "أيام",
-            "hours": "ساعات",
-            "minutes": "دقائق",
-            "seconds": "ثواني",
-            "date-format": "تنسيق التاريخ",
-            "date-format-required": "تنسيق التاريخ مطلوب",
-            "log-format": "تنسيق السجل",
-            "log-type": "نوع السجل",
-            "log-format-required": "تنسيق السجل مطلوب",
-            "remote": "التسجيل عن بُعد",
-            "remote-logs": "السجلات عن بُعد",
-            "local": "التسجيل المحلي",
-            "level": "مستوى السجل",
-            "file-path": "مسار الملف",
-            "file-path-required": "مسار الملف مطلوب",
-            "saving-period": "فترة حفظ السجل",
-            "saving-period-min": "فترة حفظ السجل لا يمكن أن تكون أقل من 1",
-            "saving-period-required": "فترة حفظ السجل مطلوبة",
-            "backup-count": "عدد النسخ الاحتياطية",
-            "backup-count-min": "عدد النسخ الاحتياطية لا يمكن أن يكون أقل من 1",
-            "backup-count-required": "عدد النسخ الاحتياطية مطلوب"
-        },
-        "min-pack-send-delay": "الحد الأدنى لتأخير إرسال الحزمة (بالمللي ثانية)",
-        "min-pack-send-delay-required": "الحد الأدنى لتأخير إرسال الحزمة مطلوب",
-        "min-pack-send-delay-min": "لا يمكن أن يكون الحد الأدنى لتأخير إرسال الحزمة أقل من 0",
-        "no-connectors": "لا توجد موصلات",
-        "no-data": "لا توجد تكوينات",
+        "launch-gateway": "تشغيل البوابة",
+        "create-new-gateway": "إنشاء بوابة جديدة",
+        "create-new-gateway-text": "هل أنت متأكد أنك تريد إنشاء بوابة جديدة باسم: '{{gatewayName}}'؟",
         "no-gateway-found": "لم يتم العثور على بوابة.",
-        "no-gateway-matching": "'{{item}}' غير موجود.",
-        "path-logs": "مسار إلى ملفات السجل",
-        "path-logs-required": "المسار مطلوب.",
-        "permit-without-calls": "البقاء على الحياة يسمح بدون مكالمات",
-        "remote": "التكوين عن بُعد",
-        "remote-logging-level": "مستوى التسجيل",
-        "remove-entry": "إزالة التكوين",
-        "remote-shell": "قشرة عن بُعد",
-        "remote-configuration": "التكوين عن بُعد",
-        "other": "آخر",
-        "save-tip": "حفظ ملف التكوين",
-        "security-type": "نوع الأمان",
-        "security-types": {
-            "access-token": "رمز الوصول",
-            "username-password": "اسم المستخدم وكلمة المرور",
-            "tls": "TLS",
-            "tls-access-token": "TLS + رمز الوصول",
-            "tls-private-key": "TLS + المفتاح الخاص"
-        },
-        "server-port": "منفذ الخادم",
-        "statistics": {
-            "statistic": "إحصائية",
-            "statistics": "الإحصائيات",
-            "statistic-commands-empty": "لا تتوفر إحصائيات",
-            "commands": "الأوامر",
-            "send-period": "فترة إرسال الإحصائيات (بالثواني)",
-            "send-period-required": "فترة إرسال الإحصائيات مطلوبة",
-            "send-period-min": "لا يمكن أن تكون فترة إرسال الإحصائيات أقل من 60",
-            "send-period-pattern": "فترة إرسال الإحصائيات غير صالحة",
-            "check-connectors-configuration": "فترة فحص تكوين الموصلات (بالثواني)",
-            "check-connectors-configuration-required": "فترة فحص تكوين الموصلات مطلوبة",
-            "check-connectors-configuration-min": "لا يمكن أن تكون فترة فحص تكوين الموصلات أقل من 1",
-            "check-connectors-configuration-pattern": "فترة فحص تكوين الموصلات غير صالحة",
-            "add": "إضافة أمر",
-            "timeout": "المهلة",
-            "timeout-ms": "المهلة (بالمللي ثانية)",
-            "timeout-required": "المهلة مطلوبة",
-            "timeout-min": "لا يمكن أن تكون المهلة أقل من 1",
-            "timeout-pattern": "المهلة غير صالحة",
-            "attribute-name": "اسم السمة",
-            "attribute-name-required": "اسم السمة مطلوب",
-            "command": "الأمر",
-            "command-required": "الأمر مطلوب",
-            "command-pattern": "الأمر غير صالح",
-            "remove": "إزالة الأمر"
-        },
-        "storage": "التخزين",
-        "storage-max-file-records": "السجلات القصوى في الملف",
-        "storage-max-files": "الحد الأقصى لعدد الملفات",
-        "storage-max-files-min": "الحد الأدنى هو 1.",
-        "storage-max-files-pattern": "العدد غير صالح.",
-        "storage-max-files-required": "العدد مطلوب.",
-        "storage-max-records": "السجلات القصوى في التخزين",
-        "storage-max-records-min": "الحد الأدنى لعدد السجلات هو 1.",
-        "storage-max-records-pattern": "العدد غير صالح.",
-        "storage-max-records-required": "السجلات القصوى مطلوبة.",
-        "storage-read-record-count": "عدد قراءة السجلات في التخزين",
-        "storage-read-record-count-min": "الحد الأدنى لعدد السجلات هو 1.",
-        "storage-read-record-count-pattern": "العدد غير صالح.",
-        "storage-read-record-count-required": "عدد قراءة السجلات مطلوب.",
-        "storage-max-read-record-count": "الحد الأقصى لعدد قراءة السجلات في التخزين",
-        "storage-max-read-record-count-min": "الحد الأدنى لعدد السجلات هو 1.",
-        "storage-max-read-record-count-pattern": "العدد غير صالح.",
-        "storage-max-read-record-count-required": "عدد القراءة القصوى مطلوب.",
-        "storage-data-folder-path": "مسار مجلد البيانات",
-        "storage-data-folder-path-required": "مسار مجلد البيانات مطلوب.",
-        "storage-pack-size": "الحد الأقصى لحجم حزمة الحدث",
-        "storage-pack-size-min": "الحد الأدنى هو 1.",
-        "storage-pack-size-pattern": "العدد غير صالح.",
-        "storage-pack-size-required": "الحجم الأقصى لحزمة الحدث مطلوب.",
-        "storage-path": "مسار التخزين",
-        "storage-path-required": "مسار التخزين مطلوب.",
-        "storage-type": "نوع التخزين",
-        "storage-types": {
-            "file-storage": "تخزين الملفات",
-            "memory-storage": "تخزين الذاكرة",
-            "sqlite": "SQLITE"
-        },
-        "thingsboard": "ثينغزبورد",
-        "general": "عام",
-        "thingsboard-host": "مضيف ثينغزبورد",
-        "thingsboard-host-required": "المضيف مطلوب.",
-        "thingsboard-port": "منفذ ثينغزبورد",
-        "thingsboard-port-max": "الحد الأقصى لرقم المنفذ هو 65535.",
-        "thingsboard-port-min": "الحد الأدنى لرقم المنفذ هو 1.",
-        "thingsboard-port-pattern": "المنفذ غير صالح.",
-        "thingsboard-port-required": "المنفذ مطلوب.",
-        "tidy": "ترتيب",
-        "tidy-tip": "ترتيب تكوين JSON",
-        "title-connectors-json": "تكوين موصل {{typeName}}",
-        "tls-path-ca-certificate": "المسار إلى شهادة CA على البوابة",
-        "tls-path-client-certificate": "المسار إلى شهادة العميل على البوابة",
-        "messages-ttl-check-in-hours": "فحص TTL الرسائل بالساعات",
-        "messages-ttl-check-in-hours-required": "يجب تحديد فحص TTL الرسائل بالساعات.",
-        "messages-ttl-check-in-hours-min": "الحد الأدنى هو 1.",
-        "messages-ttl-check-in-hours-pattern": "الرقم غير صالح.",
-        "messages-ttl-in-days": "TTL الرسائل بالأيام",
-        "messages-ttl-in-days-required": "يجب تحديد TTL الرسائل بالأيام.",
-        "messages-ttl-in-days-min": "الحد الأدنى هو 1.",
-        "messages-ttl-in-days-pattern": "الرقم غير صالح.",
-        "mqtt-qos": "جودة الخدمة (QoS)",
-        "mqtt-qos-required": "جودة الخدمة (QoS) مطلوبة",
-        "mqtt-qos-range": "تتراوح قيم جودة الخدمة (QoS) من 0 إلى 1",
-        "tls-path-private-key": "المسار إلى المفتاح الخاص على البوابة",
-        "toggle-fullscreen": "تبديل وضع ملء الشاشة",
-        "transformer-json-config": "تكوين JSON*",
-        "update-config": "إضافة/تحديث تكوين JSON",
-        "hints": {
-            "remote-configuration": "يمكنك تمكين التكوين وإدارة البوابة عن بُعد",
-            "remote-shell": "يمكنك تمكين التحكم البعيد في نظام التشغيل مع البوابة من عنصر واجهة المستخدم قشرة عن بُعد",
-            "host": "اسم المضيف أو عنوان IP لخادم ثينغزبورد",
-            "port": "منفذ خدمة MQTT على خادم ثينغزبورد",
-            "token": "رمز الوصول للبوابة من خادم ثينغزبورد",
-            "client-id": "معرف عميل MQTT للبوابة من خادم ثينغزبورد",
-            "username": "اسم المستخدم MQTT للبوابة من خادم ثينغزبورد",
-            "password": "كلمة المرور MQTT للبوابة من خادم ثينغزبورد",
-            "ca-cert": "المسار إلى ملف شهادة CA",
-            "date-form": "تنسيق التاريخ في رسالة السجل",
-            "data-folder": "المسار إلى المجلد الذي سيحتوي على البيانات (نسبي أو مطلق)",
-            "log-format": "تنسيق رسالة السجل",
-            "remote-log": "يمكنك تمكين التسجيل البعيد وقراءة السجلات من البوابة",
-            "backup-count": "إذا كان عدد النسخ الاحتياطية > 0، عند عملية تدوير، لا يتم الاحتفاظ بأكثر من عدد النسخ الاحتياطية المحددة - يتم حذف الأقدم",
-            "storage": "يوفر تكوينًا لحفظ البيانات الواردة قبل إرسالها إلى المنصة",
-            "max-file-count": "العدد الأقصى لعدد الملفات التي سيتم إنشاؤها",
-            "max-read-count": "عدد الرسائل للحصول عليها من التخزين وإرسالها إلى ثينغزبورد",
-            "max-records": "العدد الأقصى للسجلات التي ستخزن في ملف واحد",
-            "read-record-count": "عدد الرسائل للحصول عليها من التخزين وإرسالها إلى ثينغزبورد",
-            "max-records-count": "العدد الأقصى للبيانات في التخزين قبل إرسالها إلى ثينغزبورد",
-            "ttl-check-hour": "كم مرة سيتحقق البوابة من البيانات القديمة",
-            "ttl-messages-day": "الحد الأقصى لعدد الأيام التي ستحتفظ فيها التخزين بالبيانات",
-            "commands": "الأوامر لجمع الإحصائيات الإضافية",
-            "attribute": "مفتاح تلقي الإحصائيات",
-            "timeout": "مهلة زمنية لتنفيذ الأمر",
-            "command": "سيتم استخدام نتيجة تنفيذ الأمر كقيمة لتلقي الإحصائيات",
-            "check-device-activity": "يمكنك تمكين مراقبة نشاط كل جهاز متصل",
-            "inactivity-timeout": "الوقت بعد الذي ستفصل البوابة الجهاز",
-            "inactivity-period": "تكرار فحص نشاط الجهاز",
-            "minimal-pack-delay": "التأخير بين إرسال حزم الرسائل (يؤدي تقليل هذا الإعداد إلى زيادة استخدام وحدة المعالجة المركزية)",
-            "qos": "جودة الخدمة في رسائل MQTT (0 - على الأكثر مرة واحدة، 1 - على الأقل مرة واحدة)",
-            "server-port": "منفذ الشبكة الذي سيستمع فيه خادم GRPC للاستفسارات الواردة.",
-            "grpc-keep-alive-timeout": "الحد الأقصى للوقت الذي يجب أن ينتظره الخادم لاستجابة رسالة الحفاظ على الاتصال قبل اعتبار الاتصال ميتًا.",
-            "grpc-keep-alive": "المدة بين رسائل حفظ الاتصال المتعاقبة عند عدم وجود استدعاء RPC نشط.",
-            "grpc-min-time-between-pings": "الحد الأدنى للوقت الذي يجب فيه أن ينتظر الخادم بين إرسال رسائل حفظ الاتصال",
-            "grpc-max-pings-without-data": "الحد الأقصى لعدد رسائل حفظ الاتصال التي يمكن للخادم إرسالها دون تلقي أي بيانات قبل اعتبار الاتصال ميتًا.",
-            "grpc-min-ping-interval-without-data": "الحد الأدنى للوقت الذي يجب فيه أن ينتظر الخادم بين إرسال رسائل حفظ الاتصال عند عدم إرسال أو استلام بيانات.",
-            "permit-without-calls": "السماح للخادم بإبقاء اتصال GRPC حيًا حتى عندما لا تكون هناك استدعاءات RPC نشطة."
-        }
+        "no-gateway-matching": "'{{item}}' غير موجود."
     },
     "grid": {
         "delete-item-title": "هل أنت متأكد أنك تريد حذف هذا العنصر؟",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ca_ES.json b/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
index f66f248303..9d92babd82 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
@@ -2690,78 +2690,17 @@
         "function": "Funció"
     },
     "gateway": {
-        "add-entry": "Afegir configuració",
-        "connector-add": "Afegir conector",
-        "connector-enabled": "Activar conector",
-        "connector-name": "Nom conector",
-        "connector-name-required": "Cal nom conector.",
-        "connector-type": "Tipus conector",
-        "connector-type-required": "Cal tipus conector.",
-        "connectors": "Configuració de conectors",
-        "create-new-gateway": "Crear un gateway nou",
-        "create-new-gateway-text": "Crear un nou gateway amb el nom: '{{gatewayName}}'?",
-        "delete": "Esborrar configuració",
-        "download-tip": "Descarregar fitxer de configuració",
-        "gateway": "Gateway",
         "gateway-exists": "Ja existeix un dispositiu amb el mateix nom.",
         "gateway-name": "Nom de Gateway",
         "gateway-name-required": "Cal un nom de gateway.",
         "gateway-saved": "Configuració de gateway gravada satisfactòriament.",
-        "json-parse": "JSON no vàlid.",
-        "json-required": "El camp no pot ser buit.",
-        "no-connectors": "No hi ha conectors",
-        "no-data": "No hi ha configuracions",
+        "gateway": "Gateway",
+        "launch-gateway": "Llançar gateway",
+        "launch-command": "Comanda de llançament",
+        "create-new-gateway": "Crear un gateway nou",
+        "create-new-gateway-text": "Crear un nou gateway amb el nom: '{{gatewayName}}'?",
         "no-gateway-found": "No s'ha trobat cap gateway.",
-        "no-gateway-matching": " '{{item}}' no trobat.",
-        "path-logs": "Ruta als fitxers de log",
-        "path-logs-required": "Cal ruta.",
-        "remote": "Configuració remota",
-        "remote-logging-level": "Nivel de logging",
-        "remove-entry": "Esborrar configuració",
-        "save-tip": "Gravar fitxer de configuració",
-        "security-type": "Tipus de seguretat",
-        "security-types": {
-            "access-token": "Token d'accés",
-            "tls": "TLS"
-        },
-        "storage": "Grabació",
-        "storage-max-file-records": "Número màxim de registres en fitxer",
-        "storage-max-files": "Número màxim de fitxers",
-        "storage-max-files-min": "El número mínim és 1.",
-        "storage-max-files-pattern": "Número no vàlid.",
-        "storage-max-files-required": "Cal número.",
-        "storage-max-records": "Màxim de registres en el magatzem",
-        "storage-max-records-min": "El número mínim és 1.",
-        "storage-max-records-pattern": "Número no vàlid.",
-        "storage-max-records-required": "Cal número.",
-        "storage-pack-size": "Mida màxim de esdeveniments",
-        "storage-pack-size-min": "El número mínim és 1.",
-        "storage-pack-size-pattern": "Número no vàlid.",
-        "storage-pack-size-required": "Cal número.",
-        "storage-path": "Ruta de magatzem",
-        "storage-path-required": "Cal ruta de magatzem.",
-        "storage-type": "Tipus de magatzem",
-        "storage-types": {
-            "file-storage": "Magatzem fitxer",
-            "memory-storage": "Magatzem en memoria"
-        },
-        "thingsboard": "ThingsBoard",
-        "thingsboard-host": "Host ThingsBoard",
-        "thingsboard-host-required": "Cal Host.",
-        "thingsboard-port": "Port ThingsBoard",
-        "thingsboard-port-max": "El port màxim és 65535.",
-        "thingsboard-port-min": "El port mínim és 1.",
-        "thingsboard-port-pattern": "Port no vàlid.",
-        "thingsboard-port-required": "Cal port.",
-        "tidy": "Endreçat",
-        "tidy-tip": "Endreçat JSON",
-        "title-connectors-json": "Configuració conector {{typeName}}",
-        "tls-path-ca-certificate": "Ruta al certificat CA al gateway",
-        "tls-path-client-certificate": "Ruta al certificat client al gateway",
-        "tls-path-private-key": "Ruta a la clau privada al gateway",
-        "toggle-fullscreen": "Pantalla completa fullscreen",
-        "transformer-json-config": "Configuració JSON*",
-        "update-config": "Afegir/actualizar configuració JSON"
+        "no-gateway-matching": " '{{item}}' no trobat."
     },
     "grid": {
         "delete-item-title": "Vols eliminar aquest item?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json b/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
index 3be2bfdd24..169dfc4096 100644
--- a/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
+++ b/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
@@ -2024,78 +2024,14 @@
         "function": "Funkce"
     },
     "gateway": {
-        "add-entry": "Přidat konfiguraci",
-        "connector-add": "Přidat nový konektor",
-        "connector-enabled": "Povolit konektor",
-        "connector-name": "Název konektoru",
-        "connector-name-required": "Název konektoru je povinný.",
-        "connector-type": "Typ konektoru",
-        "connector-type-required": "Typ konektoru je povinný.",
-        "connectors": "Konfigurace konektoru",
         "create-new-gateway": "Vytvořit novou bránu",
         "create-new-gateway-text": "Jste si jisti, že chcete vytvořit novou bránu s názvem: '{{gatewayName}}'?",
-        "delete": "Smazat konfiguraci",
-        "download-tip": "Stáhnout soubor konfigurace",
-        "gateway": "Brána",
         "gateway-exists": "Zařízení se shodným názvem již existuje.",
         "gateway-name": "Název brány",
         "gateway-name-required": "Název brány je povinný.",
         "gateway-saved": "Konfigurace brány byla úspěšně uložena.",
-        "json-parse": "Neplatný JSON.",
-        "json-required": "Pole nemůže být prázdné.",
-        "no-connectors": "Žádné konektory",
-        "no-data": "Žádné konfigurace",
         "no-gateway-found": "Žádné brány nebyly nalezeny.",
-        "no-gateway-matching": " '{{item}}' nenalezena.",
-        "path-logs": "Cesta k souborům logu",
-        "path-logs-required": "Cesta je povinná.",
-        "remote": "Vzdálená konfigurace",
-        "remote-logging-level": "Úroveň logování",
-        "remove-entry": "Odstranit konfiguraci",
-        "save-tip": "Uložit soubor konfigurace",
-        "security-type": "Typ zabezpečení",
-        "security-types": {
-            "access-token": "Přístupový token",
-            "tls": "TLS"
-        },
-        "storage": "Úložiště",
-        "storage-max-file-records": "Maximální počet záznamů v souboru",
-        "storage-max-files": "Maximální počet souborů",
-        "storage-max-files-min": "Minimální počet je 1.",
-        "storage-max-files-pattern": "Počet není platný.",
-        "storage-max-files-required": "Počet je povinný.",
-        "storage-max-records": "Maximální počet záznamů v úložišti",
-        "storage-max-records-min": "Minimální počet záznamů je 1.",
-        "storage-max-records-pattern": "Počet není platný.",
-        "storage-max-records-required": "Maximální počet záznamů je povinný.",
-        "storage-pack-size": "Maximální velikost souboru událostí",
-        "storage-pack-size-min": "Minimální počet je 1.",
-        "storage-pack-size-pattern": "Počet není platný.",
-        "storage-pack-size-required": "Maximální velikost souboru událostí je povinná.",
-        "storage-path": "Cesta k úložišti",
-        "storage-path-required": "Cesta k úložišti je povinná.",
-        "storage-type": "Typ úložiště",
-        "storage-types": {
-            "file-storage": "Soubor",
-            "memory-storage": "Paměť"
-        },
-        "thingsboard": "ThingsBoard",
-        "thingsboard-host": "Host ThingsBoard",
-        "thingsboard-host-required": "Host je povinný.",
-        "thingsboard-port": "Port ThingsBoard",
-        "thingsboard-port-max": "Maximální číslo portu je 65535.",
-        "thingsboard-port-min": "Minimální číslo portu je 1.",
-        "thingsboard-port-pattern": "Port není platný.",
-        "thingsboard-port-required": "Port je povinný.",
-        "tidy": "Uspořádat",
-        "tidy-tip": "Uspořádat JSON konfiguraci",
-        "title-connectors-json": "Konfigurace {{typeName}} konektoru",
-        "tls-path-ca-certificate": "Cesta k certifikátu CA brány",
-        "tls-path-client-certificate": "Cesta k certifikátu klienta brány",
-        "tls-path-private-key": "Cesta k privátnímu klíči brány",
-        "toggle-fullscreen": "Přepnout do režimu celé obrazovky",
-        "transformer-json-config": "JSON* konfigurace",
-        "update-config": "Přidat/editovat JSON konfiguraci"
+        "no-gateway-matching": " '{{item}}' nenalezena."
     },
     "grid": {
         "delete-item-title": "Jste si jisti, že chcete smazat tuto položku?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-da_DK.json b/ui-ngx/src/assets/locale/locale.constant-da_DK.json
index 7a1cea02a3..53695ddfa1 100644
--- a/ui-ngx/src/assets/locale/locale.constant-da_DK.json
+++ b/ui-ngx/src/assets/locale/locale.constant-da_DK.json
@@ -1964,78 +1964,14 @@
     "function": "Funktion"
   },
   "gateway": {
-    "add-entry": "Tilføj konfiguration",
-    "connector-add": "Tilføj ny stikforbindelse",
-    "connector-enabled": "Aktivér stikforbindelse",
-    "connector-name": "Navn på stikforbindelse",
-    "connector-name-required": "Navn på stikforbindelse er påkrævet.",
-    "connector-type": "Stikforbindelsestype",
-    "connector-type-required": "Stikforbindelsestype er påkrævet.",
-    "connectors": "Konfiguration af stikforbindelser",
     "create-new-gateway": "Opret en ny gateway",
     "create-new-gateway-text": "",
-    "delete": "Slet konfiguration",
-    "download-tip": "Download konfigurationsfil",
-    "gateway": "Gateway",
     "gateway-exists": "Enhed med samme navn findes allerede.",
     "gateway-name": "Gateway-navn",
     "gateway-name-required": "Gateway-navn er påkrævet.",
     "gateway-saved": "Gateway-konfigurationen blev gemt.",
-    "json-parse": "Ikke gyldig JSON.",
-    "json-required": "Feltet må ikke være tomt.",
-    "no-connectors": "Ingen stikforbindelser",
-    "no-data": "Ingen konfigurationer",
     "no-gateway-found": "Ingen gateway fundet.",
-    "no-gateway-matching": "",
-    "path-logs": "Sti til logfiler",
-    "path-logs-required": "Sti er påkrævet.",
-    "remote": "Fjernkonfiguration",
-    "remote-logging-level": "Logføringsniveau",
-    "remove-entry": "Fjern konfiguration",
-    "save-tip": "Gem konfigurationsfil",
-    "security-type": "Sikkerhedstype",
-    "security-types": {
-      "access-token": "Adgangstoken",
-      "tls": "TLS"
-    },
-    "storage": "Lagring",
-    "storage-max-file-records": "Maks. antal poster i fil",
-    "storage-max-files": "Maks. antal filer",
-    "storage-max-files-min": "Min. antal er 1.",
-    "storage-max-files-pattern": "Antal er ikke gyldigt.",
-    "storage-max-files-required": "Antal er påkrævet.",
-    "storage-max-records": "Maks. antal poster i lagring",
-    "storage-max-records-min": "Min. antal poster er 1.",
-    "storage-max-records-pattern": "Antal er ikke gyldigt.",
-    "storage-max-records-required": "Maks. antal poster er påkrævet.",
-    "storage-pack-size": "Maks. antal pakkestørrelse for begivenhed",
-    "storage-pack-size-min": "Min. antal er 1.",
-    "storage-pack-size-pattern": "Antal er ikke gyldigt.",
-    "storage-pack-size-required": "Maks. antal pakkestørrelse for begivenhed er påkrævet.",
-    "storage-path": "Lagringssti",
-    "storage-path-required": "Lagringssti er påkrævet.",
-    "storage-type": "Lagringstype",
-    "storage-types": {
-      "file-storage": "Lagring af filter",
-      "memory-storage": "Lagring af hukommelse"
-    },
-    "thingsboard": "ThingsBoard",
-    "thingsboard-host": "ThingsBoard-vært",
-    "thingsboard-host-required": "Vært er påkrævet.",
-    "thingsboard-port": "ThingsBoard-port",
-    "thingsboard-port-max": "Maks. portnummer er 65535.",
-    "thingsboard-port-min": "Min. portnummer er 1.",
-    "thingsboard-port-pattern": "Port er ikke gyldig.",
-    "thingsboard-port-required": "Port er påkrævet.",
-    "tidy": "Tidy",
-    "tidy-tip": "Tidy konfig. JSON",
-    "title-connectors-json": "",
-    "tls-path-ca-certificate": "Sti til CA-certifikat på gateway",
-    "tls-path-client-certificate": "Sti til klientcertifikat på gateway",
-    "tls-path-private-key": "Sti til privat nøgle på gateway",
-    "toggle-fullscreen": "Skift til fuld skærm",
-    "transformer-json-config": "Konfiguration JSON*",
-    "update-config": "Tilføj/opdater konfiguration JSON"
+    "no-gateway-matching": ""
   },
   "grid": {
     "delete-item-title": "Er du sikker på, du ønsker at slette dette element?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index bb4fc57e8a..0fa19cc176 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1251,7 +1251,7 @@
         "display-dashboards-selection": "Display dashboards selection",
         "display-entities-selection": "Display entities selection",
         "display-filters": "Display filters",
-        "display-dashboard-timewindow": "Display timewindow",
+        "display-dashboard-timewindow": "Display time window",
         "display-dashboard-export": "Display export",
         "display-update-dashboard-image": "Display update dashboard image",
         "dashboard-logo-settings": "Dashboard logo settings",
@@ -2837,688 +2837,14 @@
         "function": "Function"
     },
     "gateway": {
-        "address": "Address",
-        "address-required": "Address required",
-        "add-entry": "Add configuration",
-        "add-attribute": "Add attribute",
-        "add-attribute-update": "Add attribute update",
-        "add-key": "Add key",
-        "add-timeseries": "Add time series",
-        "add-mapping": "Add mapping",
-        "add-slave": "Add Slave",
-        "arguments": "Arguments",
-        "add-rpc-method": "Add method",
-        "add-rpc-request": "Add request",
-        "add-value": "Add argument",
-        "baudrate": "Baudrate",
-        "bytesize": "Bytesize",
-        "delete-value": "Delete value",
-        "delete-rpc-method": "Delete method",
-        "delete-rpc-request": "Delete request",
-        "delete-attribute-update": "Delete attribute update",
-        "advanced": "Advanced",
-        "advanced-connection-settings": "Advanced connection settings",
-        "attributes": "Attributes",
-        "attribute-updates": "Attribute updates",
-        "attribute-filter": "Attribute filter",
-        "attribute-filter-hint": "Filter for incoming attribute name from platform, supports regular expression.",
-        "attribute-filter-required": "Attribute filter required.",
-        "attribute-name-expression": "Attribute name expression",
-        "attribute-name-expression-required": "Attribute name expression required.",
-        "attribute-name-expression-hint": "Hint for Attribute name expression",
-        "basic": "Basic",
-        "byte-order": "Byte order",
-        "word-order": "Word order",
-        "broker": {
-            "connection": "Connection to broker",
-            "name": "Broker name",
-            "name-required": "Broker name required.",
-            "security-types": {
-                "anonymous": "Anonymous",
-                "basic": "Basic",
-                "certificates": "Certificates"
-            }
-        },
-        "CA-certificate-path": "Path to CA certificate file",
-        "path-to-CA-cert-required": "Path to CA certificate file is required.",
-        "change-connector-title": "Confirm connector change",
-        "change-connector-text": "Switching connectors will discard any unsaved changes. Continue?",
-        "checking-device-activity": "Checking device activity",
-        "command": "Docker commands",
-        "command-copied-message": "Docker command has been copied to clipboard",
-        "configuration": "Configuration",
-        "add-connector": "Add connector",
-        "connector-add": "Add new connector",
-        "connector-enabled": "Enable connector",
-        "connector-name": "Connector name",
-        "connector-name-required": "Connector name is required.",
-        "connector-type": "Connector type",
-        "connector-type-required": "Connector type is required.",
-        "connectors": "Connectors",
-        "connectors-config": "Connectors configuration",
-        "connectors-table-enabled": "Enabled",
-        "connectors-table-name": "Name",
-        "connectors-table-type": "Type",
-        "connectors-table-status": "Status",
-        "connectors-table-actions": "Actions",
-        "connectors-table-key": "Key",
-        "connectors-table-class": "Class",
-        "connection-timeout": "Connection timeout (s)",
-        "connect-attempt-time": "Connect attempt time (ms)",
-        "connect-attempt-count": "Connect attempt count",
-        "copy-username": "Copy username",
-        "copy-password": "Copy password",
-        "copy-client-id": "Copy client ID",
-        "connector-created": "Connector created",
-        "connector-updated": "Connector updated",
-        "rpc-command-save-template": "Save Template",
-        "rpc-command-send": "Send",
-        "rpc-command-result": "Response",
-        "rpc-command-edit-params": "Edit parameters",
-        "gateway-configuration": "General Configuration",
-        "docker-label": "Use the following instruction to run IoT Gateway in Docker compose with credentials for selected device",
-        "install-docker-compose": "Use the instructions to download, install and setup docker compose",
-        "device-info-settings": "Device info settings",
-        "device-info": {
-            "entity-field": "Entity field",
-            "source": "Source",
-            "expression": "Value / Expression",
-            "expression-hint": "Show help",
-            "name": "Name",
-            "profile-name": "Profile name",
-            "device-name-expression": "Device name expression",
-            "device-name-expression-required": "Device name expression is required.",
-            "device-profile-expression-required": "Device profile expression is required."
-        },
-        "device-name-filter": "Device name filter",
-        "device-name-filter-hint": "This field supports Regular expressions to filter incoming data by device name.",
-        "device-name-filter-required": "Device name filter is required.",
-        "details": "Details",
-        "delete-mapping-title": "Delete mapping?",
-        "delete-slave-title": "Delete slave?",
-        "divider": "Divider",
-        "download-configuration-file": "Download configuration file",
-        "download-docker-compose": "Download docker-compose.yml for your gateway",
-        "enable-remote-logging": "Enable remote logging",
-        "ellipsis-chips-text": "+ {{count}} more",
-        "launch-gateway": "Launch gateway",
-        "launch-command": "Launch command",
-        "launch-docker-compose": "Start the gateway using the following command in the terminal from folder with docker-compose.yml file",
-        "logs-configuration": "Logs configuration",
-        "create-new-gateway": "Create a new gateway",
-        "create-new-gateway-text": "Are you sure you want create a new gateway with name: '{{gatewayName}}'?",
-        "created-time": "Created time",
-        "configuration-delete-dialog-header": "Configurations will be deleted",
-        "configuration-delete-dialog-body": "Turning off Remote Configuration is possible only if there is physical access to the Gateway. All previous configurations will be deleted.<br><br> \nTo turn off configuration, enter gateway name below",
-        "configuration-delete-dialog-input": "Gateway name",
-        "configuration-delete-dialog-input-required": "Gateway name is mandatory",
-        "configuration-delete-dialog-confirm": "Turn Off",
-        "connector-duplicate-name": "Connector with such name already exists.",
-        "connector-side": "Connector side",
-        "client-communication-type": "Client communication type",
-        "payload-type": "Payload type",
-        "platform-side": "Platform side",
-        "JSON": "JSON",
-        "JSON-hint": "Converter for this payload type processes MQTT messages in JSON format. It uses JSON Path expressions to extract vital details such as device names, device profile names, attributes, and time series from the message. And regular expressions to get device details from topics.",
-        "bytes": "Bytes",
-        "bytes-hint": "Converter for this payload type designed for binary MQTT payloads, this converter directly interprets binary data to retrieve device names and device profile names, along with attributes and time series, using specific byte positions for data extraction.",
-        "custom": "Custom",
-        "custom-hint": "This option allows you to use a custom converter for specific data tasks. You need to add your custom converter to the extension folder and enter its class name in the UI settings. Any keys you provide will be sent as configuration to your custom converter.",
-        "client-cert-path": "Path to client certificate file",
-        "path-to-client-cert-required": "Path to client certificate file is required.",
-        "client-id": "Client ID",
-        "data-conversion": "Data conversion",
-        "data-mapping": "Data mapping",
-        "data-mapping-hint": "Data mapping provides the capability to parse and convert the data received from a MQTT client in incoming messages into specific attributes and time series data keys.",
-        "opcua-data-mapping-hint": "Data mapping provides the capability to parse and convert the data received from a OPCUA server into specific data keys.",
-        "delete": "Delete configuration",
-        "delete-attribute": "Delete attribute",
-        "delete-key": "Delete key",
-        "delete-timeseries": "Delete time series",
-        "default": "Default",
-        "device-node": "Device node",
-        "device-node-required": "Device node required.",
-        "device-node-hint": "Path or identifier for device node on OPC UA server. Relative paths from it for attributes and time series can be used.",
-        "device-name": "Device name",
-        "device-profile": "Device profile",
-        "device-name-required": "Device name required",
-        "device-profile-required": "Device profile required",
-        "download-tip": "Download configuration file",
-        "drop-file": "Drop file here or",
-        "enable": "Enable",
-        "enable-subscription": "Enable subscription",
-        "extension": "Extension",
-        "extension-hint": "Put your converter classname in the field. Custom converter with such class should be in extension/mqtt folder.",
-        "extension-required": "Extension is required.",
-        "extension-configuration": "Extension configuration",
-        "extension-configuration-hint": "Configuration for convertor",
-        "fill-connector-defaults": "Fill configuration with default values",
-        "fill-connector-defaults-hint": "This property allows to fill connector configuration with default values on it's creation.",
-        "from-device-request-settings": "Input request parsing",
-        "from-device-request-settings-hint": "These fields support JSONPath expressions to extract a name from incoming message.",
-        "function-code": "Function code",
-        "function-codes": {
-            "read-coils": "01 - Read Coils",
-            "read-discrete-inputs": "02 - Read Discrete Inputs",
-            "read-multiple-holding-registers": "03 - Read Multiple Holding Registers",
-            "read-input-registers": "04 - Read Input Registers",
-            "write-single-coil": "05 - Write Single Coil",
-            "write-single-holding-register": "06 - Write Single Holding Register",
-            "write-multiple-coils": "15 - Write Multiple Coils",
-            "write-multiple-holding-registers": "16 - Write Multiple Holding Registers"
-        },
-        "to-device-response-settings": "Output request processing",
-        "to-device-response-settings-hint": "For these fields you can use the following variables and they will be replaced with actual values: ${deviceName}, ${attributeKey}, ${attributeValue}",
-        "gateway": "Gateway",
-        "gateway-exists": "Device with same name is already exists.",
         "gateway-name": "Gateway name",
         "gateway-name-required": "Gateway name is required.",
-        "gateway-saved": "Gateway configuration successfully saved.",
-        "generate-client-id": "Generate Client ID",
-        "grpc": "GRPC",
-        "grpc-keep-alive-timeout": "Keep alive timeout (in ms)",
-        "grpc-keep-alive-timeout-required": "Keep alive timeout is required",
-        "grpc-keep-alive-timeout-min": "Keep alive timeout can not be less then 1",
-        "grpc-keep-alive-timeout-pattern": "Keep alive timeout is not valid",
-        "grpc-keep-alive": "Keep alive (in ms)",
-        "grpc-keep-alive-required": "Keep alive is required",
-        "grpc-keep-alive-min": "Keep alive can not be less then 1",
-        "grpc-keep-alive-pattern": "Keep alive is not valid",
-        "grpc-min-time-between-pings": "Min time between pings (in ms)",
-        "grpc-min-time-between-pings-required": "Min time between pings is required",
-        "grpc-min-time-between-pings-min": "Min time between pings can not be less then 1",
-        "grpc-min-time-between-pings-pattern": "Min time between pings is not valid",
-        "grpc-min-ping-interval-without-data": "Min ping interval without data (in ms)",
-        "grpc-min-ping-interval-without-data-required": "Min ping interval without data is required",
-        "grpc-min-ping-interval-without-data-min": "Min ping interval without data can not be less then 1",
-        "grpc-min-ping-interval-without-data-pattern": "Min ping interval without data is not valid",
-        "grpc-max-pings-without-data": "Max pings without data",
-        "grpc-max-pings-without-data-required": "Max pings without data is required",
-        "grpc-max-pings-without-data-min": "Max pings without data can not be less then 1",
-        "grpc-max-pings-without-data-pattern": "Max pings without data is not valid",
-        "info": "Info",
-        "identity": "Identity",
-        "inactivity-check-period-seconds": "Inactivity check period (in sec)",
-        "inactivity-check-period-seconds-required": "Inactivity check period is required",
-        "inactivity-check-period-seconds-min": "Inactivity check period can not be less then 1",
-        "inactivity-check-period-seconds-pattern": "Inactivity check period is not valid",
-        "inactivity-timeout-seconds": "Inactivity timeout (in sec)",
-        "inactivity-timeout-seconds-required": "Inactivity timeout is required",
-        "inactivity-timeout-seconds-min": "Inactivity timeout can not be less then 1",
-        "inactivity-timeout-seconds-pattern": "Inactivity timeout is not valid",
-        "unit-id": "Unit ID",
-        "host": "Host",
-        "host-required": "Host is required.",
-        "holding_registers": "Holding registers",
-        "coils_initializer": "Coils initializer",
-        "input_registers": "Input registers",
-        "discrete_inputs": "Discrete inputs",
-        "json-parse": "Not valid JSON.",
-        "json-required": "Field cannot be empty.",
-        "JSONPath-hint": "This field supports constants and JSONPath expressions.",
-        "logs": {
-            "logs": "Logs",
-            "days": "days",
-            "hours": "hours",
-            "minutes": "minutes",
-            "seconds": "seconds",
-            "date-format": "Date format",
-            "date-format-required": "Date format required",
-            "log-format": "Log format",
-            "log-type": "Log type",
-            "log-format-required": "Log format required",
-            "remote": "Remote logging",
-            "remote-logs": "Remote logs",
-            "local": "Local logging",
-            "level": "Log level",
-            "file-path": "File path",
-            "file-path-required": "File path required",
-            "saving-period": "Log saving period",
-            "saving-period-min": "Log saving period can not be less then 1",
-            "saving-period-required": "Log saving period required",
-            "backup-count": "Backup count",
-            "backup-count-min": "Backup count can not be less then 1",
-            "backup-count-required": "Backup count required"
-        },
-        "max-number-of-workers": "Max number of workers",
-        "max-number-of-workers-hint": "Maximal number of workers threads for converters \n(The amount of workers changes dynamically, depending on load) \nRecommended amount 50-150.",
-        "max-number-of-workers-required": "Max number of workers is required.",
-        "max-messages-queue-for-worker": "Max messages queue per worker",
-        "max-messages-queue-for-worker-hint": "Maximal messages count that will be in the queue \nfor each converter worker.",
-        "max-messages-queue-for-worker-required": "Max messages queue per worker is required.",
-        "method": "Method",
-        "method-name": "Method name",
-        "method-required": "Method name is required.",
-        "min-pack-send-delay": "Min pack send delay (in ms)",
-        "min-pack-send-delay-required": "Min pack send delay is required",
-        "min-pack-send-delay-min": "Min pack send delay can not be less then 10",
-        "min-pack-send-delay-pattern": "Min pack send delay is not valid",
-        "multiplier": "Multiplier",
-        "mode": "Mode",
-        "model-name": "Model name",
-        "modifier": "Modifier",
-        "modifier-invalid": "Modifier is not valid",
-        "mqtt-version": "MQTT version",
-        "name": "Name",
-        "name-required": "Name is required.",
-        "no-attributes": "No attributes",
-        "no-attribute-updates": "No attribute updates",
-        "no-connectors": "No connectors",
-        "no-data": "No configurations",
+        "gateways": "Gateways",
+        "create-new-gateway": "Create a new gateway",
+        "create-new-gateway-text": "Are you sure you want create a new gateway with name: '{{gatewayName}}'?",
+        "launch-command": "Launch command",
         "no-gateway-found": "No gateway found.",
-        "no-gateway-matching": " '{{item}}' not found.",
-        "no-timeseries": "No time series",
-        "no-keys": "No keys",
-        "no-value": "No arguments",
-        "no-rpc-methods": "No RPC methods",
-        "no-rpc-requests": "No RPC requests",
-        "path-hint": "The path is local to the gateway file system",
-        "path-logs": "Path to log files",
-        "path-logs-required": "Path is required.",
-        "password": "Password",
-        "password-required": "Password is required.",
-        "permit-without-calls": "Keep alive permit without calls",
-        "poll-period": "Poll period (ms)",
-        "poll-period-error": "Poll period should be at least {{min}} (ms).",
-        "port": "Port",
-        "port-required": "Port is required.",
-        "port-limits-error": "Port should be number from {{min}} to {{max}}.",
-        "private-key-path": "Path to private key file",
-        "path-to-private-key-required": "Path to private key file is required.",
-        "parity": "Parity",
-        "product-code": "Product code",
-        "product-name": "Product name",
-        "raw": "Raw",
-        "retain": "Retain",
-        "retain-hint": "This flag tells the broker to store the message for a topic\nand ensures any new client subscribing to that topic\nwill receive the stored message.",
-        "remote": "Remote configuration",
-        "remote-logging-level": "Logging level",
-        "remove-entry": "Remove configuration",
-        "remote-shell": "Remote shell",
-        "remote-configuration": "Remote Configuration",
-        "retries": "Retries",
-        "retries-on-empty": "Retries on empty",
-        "retries-on-invalid": "Retries on invalid",
-        "rpc": {
-            "title": "{{type}} Connector RPC parameters",
-            "templates-title": "Connector RPC Templates",
-            "methodFilter": "Method filter",
-            "method-name": "Method name",
-            "requestTopicExpression": "Request topic expression",
-            "responseTopicExpression": "Response topic expression",
-            "responseTimeout": "Response timeout",
-            "valueExpression": "Value expression",
-            "tag": "Tag",
-            "type": "Type",
-            "functionCode": "Function Code",
-            "objectsCount": "Objects Count",
-            "address": "Address",
-            "method": "Method",
-            "requestType": "Request Type",
-            "requestTimeout": "Request Timeout",
-            "objectType": "Object type",
-            "identifier": "Identifier",
-            "propertyId": "Property ID",
-            "methodRPC": "Method RPC name",
-            "withResponse": "With Response",
-            "characteristicUUID": "Characteristic UUID",
-            "methodProcessing": "Method Processing",
-            "nodeID": "Node ID",
-            "isExtendedID": "Is Extended ID",
-            "isFD": "Is FD",
-            "bitrateSwitch": "Bitrate Switch",
-            "dataInHEX": "Data In HEX",
-            "dataLength": "Data Length",
-            "dataByteorder": "Data Byte Order",
-            "dataBefore": "Data Before",
-            "dataAfter": "Data After",
-            "dataExpression": "Data Expression",
-            "encoding": "Encoding",
-            "oid": "OID",
-            "add-oid": "Add OID",
-            "add-header": "Add header",
-            "add-security": "Add security",
-            "remove": "Remove",
-            "requestFilter": "Request Filter",
-            "requestUrlExpression": "Request URL Expression",
-            "httpMethod": "HTTP Method",
-            "timeout": "Timeout",
-            "tries": "Tries",
-            "httpHeaders": "HTTP Headers",
-            "header-name": "Header name",
-            "hint": {
-                "modbus-response-reading": "RPC response will return all subtracted values from all connected devices when the reading functions are selected.",
-                "modbus-writing-functions": "RPC will write a filled value to all connected devices when the writing functions are selected.",
-                "opc-method": "A filled method name is the OPC-UA method that will processed on the server side (make sure your node has the requested method)."
-            },
-            "security-name": "Security name",
-            "value": "Value",
-            "security": "Security",
-            "responseValueExpression": "Response Value Expression",
-            "requestValueExpression": "Request Value Expression",
-            "arguments": "Arguments",
-            "add-argument": "Add argument",
-            "write-property": "Write property",
-            "read-property": "Read property",
-            "analog-output": "Analog output",
-            "analog-input": "Analog input",
-            "binary-output": "Binary output",
-            "binary-input": "Binary input",
-            "binary-value": "Binary value",
-            "analog-value": "Analog value",
-            "write": "Write",
-            "read": "Read",
-            "scan": "Scan",
-            "oids": "OIDS",
-            "set": "Set",
-            "multiset": "Multiset",
-            "get": "Get",
-            "bulk-walk": "Bulk walk",
-            "table": "Table",
-            "multi-get": "Multiget",
-            "get-next": "Get next",
-            "bulk-get": "Bulk get",
-            "walk": "Walk",
-            "save-template": "Save template",
-            "template-name": "Template name",
-            "template-name-required": "Template name is required.",
-            "template-name-duplicate": "Template with such name already exists, it will be updated.",
-            "command": "Command",
-            "params": "Params",
-            "json-value-invalid": "JSON value has an invalid format"
-        },
-        "rpc-methods": "RPC methods",
-        "rpc-requests": "RPC requests",
-        "request" : {
-            "connect-request": "Connect request",
-            "disconnect-request": "Disconnect request",
-            "attribute-request": "Attribute request",
-            "attribute-update": "Attribute update",
-            "rpc-connection": "RPC command"
-        },
-        "request-type": "Request type",
-        "requests-mapping": "Requests mapping",
-        "requests-mapping-hint": "MQTT Connector requests allows you to connect, disconnect, process attribute requests from the device, handle attribute updates on the server and RPC processing configuration.",
-        "request-topic-expression": "Request topic expression",
-        "request-client-certificate": "Request client certificate",
-        "request-topic-expression-required": "Request topic expression is required.",
-        "response-timeout": "Response timeout (ms)",
-        "response-timeout-required": "Response timeout is required.",
-        "response-timeout-limits-error": "Timeout must be more then {{min}} ms.",
-        "response-topic-Qos": "Response topic QoS",
-        "response-topic-Qos-hint": "MQTT Quality of Service (QoS) is an agreement between the message sender and receiver that defines the level of delivery guarantee for a specific message.",
-        "response-topic-expression": "Response topic expression",
-        "response-topic-expression-required": "Response topic expression is required.",
-        "response-value-expression": "Response value expression",
-        "response-value-expression-required": "Response value expression is required.",
-        "vendor-name": "Vendor name",
-        "vendor-url": "Vendor URL",
-        "value": "Value",
-        "values": "Values",
-        "value-required": "Value is required.",
-        "value-expression": "Value expression",
-        "value-expression-required": "Value expression is required.",
-        "with-response": "With response",
-        "without-response": "Without response",
-        "other": "Other",
-        "save-tip": "Save configuration file",
-        "scan-period": "Scan period (ms)",
-        "scan-period-error": "Scan period should be at least {{min}} (ms).",
-        "sub-check-period": "Subscription check period (ms)",
-        "sub-check-period-error": "Subscription check period should be at least {{min}} (ms).",
-        "security": "Security",
-        "security-policy": "Security policy",
-        "security-type": "Security type",
-        "security-types": {
-            "access-token": "Access Token",
-            "username-password": "Username and Password",
-            "tls": "TLS",
-            "tls-access-token": "TLS + Access Token",
-            "tls-private-key": "TLS + Private Key"
-        },
-        "select-connector": "Select connector to display config",
-        "send-change-data": "Send data only on change",
-        "send-data-TB": "Send data to ThingsBoard",
-        "send-data-on-change": "Send data only on change",
-        "send-change-data-hint": "The values will be saved to the database only if they are different from the corresponding values in the previous converted message. This functionality applies to both attributes and time series in the converter output.",
-        "server": "Server",
-        "server-hostname": "Server hostname",
-        "server-slave": "Server (Slave)",
-        "servers-slaves": "Servers (Slaves)",
-        "server-port": "Server port",
-        "server-url": "Server endpoint url",
-        "server-connection": "Server Connection",
-        "server-config": "Server configuration",
-        "server-slave-config": "Server (Slave) configuration",
-        "server-url-required": "Server endpoint url is required.",
-        "stopbits": "Stopbits",
-        "strict": "Strict",
-        "set": "Set",
-        "show-map": "Show map",
-        "statistics": {
-            "statistic": "Statistic",
-            "statistics": "Statistics",
-            "statistic-commands-empty": "No configured statistic keys found. You can configure them in \"Statistics\" tab in general configuration.",
-            "statistics-button": "Go to configuration",
-            "commands": "Commands",
-            "send-period": "Statistic send period (in sec)",
-            "send-period-required": "Statistic send period is required",
-            "send-period-min": "Statistic send period can not be less then 60",
-            "send-period-pattern": "Statistic send period is not valid",
-            "check-connectors-configuration": "Check connectors configuration (in sec)",
-            "max-payload-size-bytes": "Max payload size in bytes",
-            "max-payload-size-bytes-required": "Max payload size in bytes is required",
-            "max-payload-size-bytes-min": "Max payload size in bytes can not be less then 100",
-            "max-payload-size-bytes-pattern": "Max payload size in bytes is not valid",
-            "min-pack-size-to-send": "Min packet size to send",
-            "min-pack-size-to-send-required": "Min packet size to send is required",
-            "min-pack-size-to-send-min": "Min packet size to send can not be less then 100",
-            "min-pack-size-to-send-pattern": "Min packet size to send is not valid",
-            "check-connectors-configuration-required": "Check connectors configuration is required",
-            "check-connectors-configuration-min": "Check connectors configuration can not be less then 1",
-            "check-connectors-configuration-pattern": "Check connectors configuration is not valid",
-            "add": "Add command",
-            "timeout": "Timeout (in sec)",
-            "timeout-ms": "Timeout (in ms)",
-            "timeout-required": "Timeout is required",
-            "timeout-min": "Timeout can not be less then 1",
-            "timeout-pattern": "Timeout is not valid",
-            "attribute-name": "Attribute name",
-            "attribute-name-required": "Attribute name is required",
-            "command": "Command",
-            "command-required": "Command is required",
-            "command-pattern": "Command is not valid",
-            "remove": "Remove command"
-        },
-        "storage": "Storage",
-        "storage-max-file-records": "Maximum records in file",
-        "storage-max-files": "Maximum number of files",
-        "storage-max-files-min": "Minimum number is 1.",
-        "storage-max-files-pattern": "Number is not valid.",
-        "storage-max-files-required": "Number is required.",
-        "storage-max-records": "Maximum records in storage",
-        "storage-max-records-min": "Minimum number of records is 1.",
-        "storage-max-records-pattern": "Number is not valid.",
-        "storage-max-records-required": "Maximum records is required.",
-        "storage-read-record-count": "Read record count in storage",
-        "storage-read-record-count-min": "Minimum number of records is 1.",
-        "storage-read-record-count-pattern": "Number is not valid.",
-        "storage-read-record-count-required": "Read record count is required.",
-        "storage-max-read-record-count": "Max read record count in storage",
-        "storage-max-read-record-count-min": "Minimum number of records is 1.",
-        "storage-max-read-record-count-pattern": "Number is not valid.",
-        "storage-max-read-record-count-required": "Max Read record count is required.",
-        "storage-data-folder-path": "Data folder path",
-        "storage-data-folder-path-required": "Data folder path is required.",
-        "storage-pack-size": "Maximum event pack size",
-        "storage-pack-size-min": "Minimum number is 1.",
-        "storage-pack-size-pattern": "Number is not valid.",
-        "storage-pack-size-required": "Maximum event pack size is required.",
-        "storage-path": "Storage path",
-        "storage-path-required": "Storage path is required.",
-        "storage-type": "Storage type",
-        "storage-types": {
-            "file-storage": "File storage",
-            "memory-storage": "Memory storage",
-            "sqlite": "SQLITE"
-        },
-        "report-strategy": {
-            "label": "Report strategy",
-            "on-change": "On value change",
-            "on-report-period": "On report period",
-            "on-change-or-report-period": "On value change or report period",
-            "report-period": "Report period"
-        },
-        "source-type": {
-            "msg": "Extract from message",
-            "topic": "Extract from topic",
-            "const": "Constant",
-            "identifier": "Identifier",
-            "path": "Path"
-        },
-        "workers-settings": "Workers settings",
-        "thingsboard": "ThingsBoard",
-        "general": "General",
-        "timeseries": "Time series",
-        "key": "Key",
-        "keys": "Keys",
-        "key-required": "Key is required.",
-        "thingsboard-host": "Platform host",
-        "thingsboard-host-required": "Host is required.",
-        "thingsboard-port": "Platform port",
-        "thingsboard-port-max": "Maximum port number is 65535.",
-        "thingsboard-port-min": "Minimum port number is 1.",
-        "thingsboard-port-pattern": "Port is not valid.",
-        "thingsboard-port-required": "Port is required.",
-        "tidy": "Tidy",
-        "tidy-tip": "Tidy config JSON",
-        "timeout": "Timeout (ms)",
-        "timeout-error": "Timeout should be at least {{min}} (ms).",
-        "title-connectors-json": "Connector {{typeName}} configuration",
-        "type": "Type",
-        "topic-filter": "Topic filter",
-        "topic-required": "Topic filter is required.",
-        "tls-path-ca-certificate": "Path to CA certificate on gateway",
-        "tls-path-client-certificate": "Path to client certificate on gateway",
-        "tls-connection": "TLS Connection",
-        "master-connections": "Master Connections",
-        "method-filter": "Method filter",
-        "method-filter-hint": "Regular expression to filter incoming RPC method from platform.",
-        "method-filter-required": "Method filter is required.",
-        "messages-ttl-check-in-hours": "Messages TTL check in hours",
-        "messages-ttl-check-in-hours-required": "Messages TTL check in hours is required.",
-        "messages-ttl-check-in-hours-min": "Min number is 1.",
-        "messages-ttl-check-in-hours-pattern": "Number is not valid.",
-        "messages-ttl-in-days": "Messages TTL in days",
-        "messages-ttl-in-days-required": "Messages TTL in days is required.",
-        "messages-ttl-in-days-min": "Min number is 1.",
-        "messages-ttl-in-days-pattern": "Number is not valid.",
-        "mqtt-qos": "QoS",
-        "mqtt-qos-required": "QoS is required",
-        "mqtt-qos-range": "QoS values range is from 0 to 1",
-        "qos": {
-            "at-most-once": "0 - At most once",
-            "at-least-once": "1 - At least once",
-            "exactly-once": "2 - Exactly once"
-        },
-        "objects-count": "Objects count",
-        "objects-count-required": "Objects count is required",
-        "wait-after-failed-attempts": "Wait after failed attempts (ms)",
-        "tls-path-private-key": "Path to private key on gateway",
-        "toggle-fullscreen": "Toggle fullscreen",
-        "transformer-json-config": "Configuration JSON*",
-        "update-config": "Add/update configuration JSON",
-        "username": "Username",
-        "username-required": "Username is required.",
-        "unit-id-required": "Unit ID is required.",
-        "write-coil": "Write Coil",
-        "write-coils": "Write Coils",
-        "write-register": "Write Register",
-        "write-registers": "Write Registers",
-        "hints": {
-            "modbus-master": "Configuration sections for connecting to Modbus servers and reading data from them.",
-            "modbus-server": "Configuration section for the Modbus server, storing data and sending updates to the platform when changes occur or at fixed intervals.",
-            "remote-configuration": "Enables remote configuration and management of the gateway",
-            "remote-shell": "Enables remote control of the operating system with the gateway from the Remote Shell widget",
-            "host": "Hostname or IP address of platform server",
-            "port": "Port of MQTT service on platform server",
-            "token": "Access token for the gateway from platform server",
-            "client-id": "MQTT client id for the gateway form platform server",
-            "username": "MQTT username for the gateway form platform server",
-            "password": "MQTT password for the gateway form platform server",
-            "ca-cert": "Path to CA certificate file",
-            "date-form": "Date format in log message",
-            "data-folder": "Path to the folder that will contain data (Relative or Absolute)",
-            "log-format": "Log message format",
-            "remote-log": "Enables remote logging and logs reading from the gateway",
-            "backup-count": "If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",
-            "storage": "Provides configuration for saving incoming data before it is sent to the platform",
-            "max-file-count": "Maximum number of files that will be created",
-            "max-read-count": "Number of messages to retrieve from the storage and send to platform",
-            "max-records": "Maximum count of records that will be stored in one file",
-            "read-record-count": "Number of messages to retrieve from the storage and send to platform",
-            "max-records-count": "Maximum number of data entries in storage before sending to platform",
-            "ttl-check-hour": "How often will the Gateway check data for obsolescence",
-            "ttl-messages-day": "Maximum number of days that the storage will retain data",
-            "commands": "Commands for collecting additional statistic",
-            "attribute": "Statistic telemetry key",
-            "timeout": "Timeout for command executing",
-            "command": "The result of the command execution, will be used as the value for telemetry",
-            "check-device-activity": "Enables monitor the activity of each connected device",
-            "inactivity-timeout": "Time after whose the gateway will disconnect device",
-            "inactivity-period": "Periodicity of device activity check",
-            "minimal-pack-delay": "Delay between sending packs of messages (Decreasing this setting results in increased CPU usage)",
-            "qos": "Quality of Service in MQTT messaging (0 - at most once, 1 - at least once)",
-            "server-port": "Network port on which GRPC server will listen for incoming connections.",
-            "grpc-keep-alive-timeout": "Maximum time the server should wait for a keepalive ping response before considering the connection dead.",
-            "grpc-keep-alive": "Duration between two successive keepalive ping messages when there is no active RPC call.",
-            "grpc-min-time-between-pings": "Minimum amount of time the server should wait between sending keepalive ping messages",
-            "grpc-max-pings-without-data": "Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.",
-            "grpc-min-ping-interval-without-data": "Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.",
-            "permit-without-calls": "Allow server to keep the GRPC connection alive even when there are no active RPC calls.",
-            "path-in-os": "Path in gateway os.",
-            "memory": "Your data will be stored in the in-memory queue, it is a fastest but no persistence guarantee.",
-            "file": "Your data will be stored in separated files and will be saved even after the gateway restart.",
-            "sqlite": "Your data will be stored in file based database. And will be saved even after the gateway restart.",
-            "opc-timeout": "Timeout in milliseconds for connecting to OPC-UA server.",
-            "security-policy": "Security Policy defines the security mechanisms to be applied.",
-            "scan-period": "Period in milliseconds to rescan the server.",
-            "sub-check-period": "Period to check the subscriptions in the OPC-UA server.",
-            "enable-subscription": "If true - the gateway will subscribe to interesting nodes and wait for data update and if false - the gateway will rescan OPC-UA server every scanPeriodInMillis.",
-            "show-map": "Show nodes on scanning.",
-            "method-name": "Name of method on OPC-UA server.",
-            "arguments": "Arguments for the method (will be overwritten by arguments from the RPC request).",
-            "min-pack-size-to-send": "Minimum package size for sending.",
-            "max-payload-size-bytes": "Maximum package size in bytes",
-            "poll-period": "Period in milliseconds to read data from nodes.",
-            "modbus": {
-                "framer-type": "Type of a framer (Socket, RTU, or ASCII), if needed.",
-                "host": "Hostname or IP address of Modbus server.",
-                "port": "Modbus server port for connection.",
-                "unit-id": "Modbus slave ID.",
-                "connection-timeout": "Connection timeout (in seconds) for the Modbus server.",
-                "byte-order": "Byte order for reading data.",
-                "word-order": "Word order when reading multiple registers.",
-                "retries": "Retrying data transmission to the master. Acceptable values: true or false.",
-                "retries-on-empty": "Retry sending data to the master if the data is empty.",
-                "retries-on-invalid": "Retry sending data to the master if it fails.",
-                "poll-period": "Period in milliseconds to check attributes and telemetry on the slave.",
-                "connect-attempt-time": "A waiting period in milliseconds before establishing a connection to the master.",
-                "connect-attempt-count": "The number of connection attempts made through the gateway.",
-                "wait-after-failed-attempts": "A waiting period in milliseconds before attempting to send data to the master.",
-                "serial-port": "Serial port for connection.",
-                "baudrate": "Baud rate for the serial device.",
-                "stopbits": "The number of stop bits sent after each character in a message to indicate the end of the byte.",
-                "bytesize": "The number of bits in a byte of serial data. This can be one of 5, 6, 7, or 8.",
-                "parity": "The type of checksum used to verify data integrity. Options: (E)ven, (O)dd, (N)one.",
-                "strict": "Use inter-character timeout for baudrates ≤ 19200.",
-                "objects-count": "Depends on the selected type.",
-                "address": "Register address to verify.",
-                "key": "Key to be used as the attribute key for the platform instance.",
-                "data-keys": "For more information about function codes and data types click on help icon",
-                "modifier": "The retrieved value will be adjusted (by multiplying or dividing it) based on the specified modifier value."
-            }
-        }
+        "no-gateway-matching": " '{{item}}' not found."
     },
     "grid": {
         "delete-item-title": "Are you sure you want to delete this item?",
@@ -4327,6 +3653,8 @@
         "warning": "Warning",
         "webhook-url": "Webhook URL",
         "webhook-url-required": "Webhook URL is required",
+        "workflow-url": "Workflow URL",
+        "workflow-url-required": "Workflow URL is required",
         "channel-name": "Channel name",
         "channel-name-required": "Channel name is required",
         "settings": {
@@ -4739,10 +4067,10 @@
         "queue-singleton-hint": "Select a queue for message forwarding in multi-instance environments. 'Main' queue is used by default."
     },
     "timezone": {
-      "timezone": "Timezone",
-      "select-timezone": "Select timezone",
-      "no-timezones-matching": "No timezones matching '{{timezone}}' were found.",
-      "timezone-required": "Timezone is required.",
+      "timezone": "Time zone",
+      "select-timezone": "Select time zone",
+      "no-timezones-matching": "No time zones matching '{{timezone}}' were found.",
+      "timezone-required": "Time zone is required.",
       "browser-time": "Browser Time"
     },
     "queue": {
@@ -5157,8 +4485,8 @@
         "days": "Days"
     },
     "timewindow": {
-        "timewindow": "Timewindow",
-        "timewindow-settings": "Timewindow settings",
+        "timewindow": "Time window",
+        "timewindow-settings": "Time window settings",
         "years": "{ years, plural, =1 { year } other {# years } }",
         "years-short": "{{ years }}y",
         "months": "{ months, plural, =1 { month } other {# months } }",
@@ -5186,7 +4514,7 @@
         "history": "History",
         "last-prefix": "last",
         "period": "from {{ startTime }} to {{ endTime }}",
-        "edit": "Edit timewindow",
+        "edit": "Edit time window",
         "date-range": "Date range",
         "for-all-time": "For all time",
         "last": "Last",
@@ -5196,7 +4524,7 @@
         "just-now": "Just now",
         "just-now-lower": "just now",
         "ago": "ago",
-        "style": "Timewindow style",
+        "style": "Time window style",
         "icon": "Icon",
         "icon-position": "Icon position",
         "icon-position-left": "Left",
@@ -5207,7 +4535,14 @@
         "preview": "Preview",
         "relative": "Relative",
         "range": "Range",
-        "hide-timewindow-section": "Hide timewindow section from end-users",
+        "hide-timewindow-section": "Hide time window section from end-users",
+        "hide-last-interval": "Hide last interval from end-users",
+        "hide-relative-interval": "Hide relative interval from end-users",
+        "hide-fixed-interval": "Hide fixed interval from end-users",
+        "hide-aggregation": "Hide aggregation from end-users",
+        "hide-group-interval": "Hide grouping interval from end-users",
+        "hide-max-values": "Hide max values from end-users",
+        "hide-timezone": "Hide time zone from end-users",
         "disable-custom-interval": "Disable custom interval selection"
     },
     "tooltip": {
@@ -6033,10 +5368,10 @@
         "units-short": "Units",
         "decimals-short": "Decimals",
         "decimals-suffix": "decimals",
-        "timewindow": "Timewindow",
-        "use-dashboard-timewindow": "Use dashboard timewindow",
-        "use-widget-timewindow": "Use widget timewindow",
-        "display-timewindow": "Display timewindow",
+        "timewindow": "Time window",
+        "use-dashboard-timewindow": "Use dashboard time window",
+        "use-widget-timewindow": "Use widget time window",
+        "display-timewindow": "Display time window",
         "legend": "Legend",
         "display-legend": "Display legend",
         "datasources": "Datasources",
diff --git a/ui-ngx/src/assets/locale/locale.constant-es_ES.json b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
index 86539fef58..f653e7179a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-es_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
@@ -2628,254 +2628,17 @@
         "function": "Función"
     },
     "gateway": {
-        "add-entry": "Añadir configuración",
-        "advanced": "Avanzado",
-        "checking-device-activity": "Probando actividad de dispositivo",
-        "command": "Comandos Docker",
-        "command-copied-message": "Se han copiado los comandos al portapapeles",
-        "configuration": "Configuración",
-        "connector-add": "Añadir conector",
-        "connector-enabled": "Activar conector",
-        "connector-name": "Nombre conector",
-        "connector-name-required": "Se requiere nombre conector.",
-        "connector-type": "Tipo conector",
-        "connector-type-required": "Se requiere tipo conector.",
-        "connectors": "Conectores",
-        "connectors-config": "Configuración de conectores",
-        "connectors-table-enabled": "Enabled",
-        "connectors-table-name": "Nombre",
-        "connectors-table-type": "Tipo",
-        "connectors-table-status": "Estado",
-        "connectors-table-actions": "Acciones",
-        "connectors-table-key": "Clave",
-        "connectors-table-class": "Clase",
-        "rpc-command-send": "Enviar",
-        "rpc-command-result": "Resultado",
-        "rpc-command-edit-params": "Editar parametros",
-        "gateway-configuration": "Configuración General",
-        "create-new-gateway": "Crear un gateway nuevo",
-        "create-new-gateway-text": "Crear un nuevo gateway con el nombre: '{{gatewayName}}'?",
-        "created-time": "Hora de creación",
-        "configuration-delete-dialog-header": "Las configuraciones se borrarán",
-        "configuration-delete-dialog-body": "Sólo es posible desactivar la configuración remota, si hay acceso físico al gateway. Se borrarán todas las configuraciones previas.<br><br> \nPara desactivar la configuración, introduce el nombre del gateway aquí",
-        "configuration-delete-dialog-input": "Nombre Gateway",
-        "configuration-delete-dialog-input-required": "Se requiere nombre de gateway",
-        "configuration-delete-dialog-confirm": "Desactivar",
-        "delete": "Borrar configuración",
-        "download-tip": "Descargar fichero de configuración",
-        "drop-file": "Arrastra un fichero o",
-        "gateway": "Gateway",
         "gateway-exists": "Ya existe un dispositivo con el mismo nombre.",
         "gateway-name": "Nombre de Gateway",
         "gateway-name-required": "Se requiere un nombre de gateway.",
         "gateway-saved": "Configuración de gateway grabada satisfactoriamente.",
-        "grpc": "GRPC",
-        "grpc-keep-alive-timeout": "Timeout Keep alive (en ms)",
-        "grpc-keep-alive-timeout-required": "Se requiere Timeout Keep alive",
-        "grpc-keep-alive-timeout-min": "El valor no puede ser menor de 1",
-        "grpc-keep-alive-timeout-pattern": "El valor no es válido",
-        "grpc-keep-alive": "Keep alive (en ms)",
-        "grpc-keep-alive-required": "Se requiere keep alive",
-        "grpc-keep-alive-min": "El valor no puede ser menor de 1",
-        "grpc-keep-alive-pattern": "El valor keep alive no es válido",
-        "grpc-min-time-between-pings": "Tiempo mínimo entre pings (en ms)",
-        "grpc-min-time-between-pings-required": "Se requiere tiempo mínimo entre pings",
-        "grpc-min-time-between-pings-min": "El valor no puede ser menor de 1",
-        "grpc-min-time-between-pings-pattern": "El valor de tiempo mínimo entre pings no es válido",
-        "grpc-min-ping-interval-without-data": "Intervalo mínimo sin datos (en ms)",
-        "grpc-min-ping-interval-without-data-required": "Se requiere intervalo",
-        "grpc-min-ping-interval-without-data-min": "El valor no puede ser menor de 1",
-        "grpc-min-ping-interval-without-data-pattern": "El valor de intervalo no es válido",
-        "grpc-max-pings-without-data": "Intervalo máximo sin datos",
-        "grpc-max-pings-without-data-required": "Se requiere intervalo",
-        "grpc-max-pings-without-data-min": "El valor no puede ser menor de 1",
-        "grpc-max-pings-without-data-pattern": "El valor de intervalo no es válido",
-        "inactivity-check-period-seconds": "Periodo de control de inactividad (en segundos)",
-        "inactivity-check-period-seconds-required": "Se requiere periodo",
-        "inactivity-check-period-seconds-min": "El valor no puede ser menor de 1",
-        "inactivity-check-period-seconds-pattern": "El valor del periodo no es válido",
-        "inactivity-timeout-seconds": "Timeout de inactividad (en segundos)",
-        "inactivity-timeout-seconds-required": "Se requiere timeout de inactividad",
-        "inactivity-timeout-seconds-min": "El valor no puede ser menor de 1",
-        "inactivity-timeout-seconds-pattern": "El valor de inactividad no es válido",
-        "json-parse": "JSON no válido.",
-        "json-required": "El campo no puede estar vacío.",
-        "logs": {
-            "logs": "Registros",
-            "days": "días",
-            "hours": "horas",
-            "minutes": "minutos",
-            "seconds": "segundos",
-            "date-format": "Formato de fecha",
-            "date-format-required": "Se requiere formato de fecha",
-            "log-format": "Formato de registro",
-            "log-type": "Tipo de registro",
-            "log-format-required": "Se requiere tipo de registro",
-            "remote": "Registro remoto",
-            "remote-logs": "Registro remoto",
-            "local": "Registro local",
-            "level": "Nivel de registro",
-            "file-path": "Ruta de fichero",
-            "file-path-required": "Se requiere ruta de fichero",
-            "saving-period": "Periodo de guardado de registros",
-            "saving-period-min": "El periodo no puede ser menor que 1",
-            "saving-period-required": "Se requiere periodo de guardado",
-            "backup-count": "Número de backups",
-            "backup-count-min": "El número de backups no puede ser menor que 1",
-            "backup-count-required": "Se requiere número de backups"
-        },
-        "min-pack-send-delay": "Tiempo de espera, envío de paquetes (en ms)",
-        "min-pack-send-delay-required": "Se requiere tiempo de espera",
-        "min-pack-send-delay-min": "El tiempo de espera no puede ser menor que 0",
-        "no-connectors": "No hay conectores",
-        "no-data": "No hay configuraciones",
+        "gateway": "Gateway",
+        "launch-gateway": "Iniciar gateway",
+        "launch-command": "Comando de lanzamiento",
+        "create-new-gateway": "Crear un gateway nuevo",
+        "create-new-gateway-text": "¿Está seguro de que desea crear un nuevo gateway con el nombre: '{{gatewayName}}'?",
         "no-gateway-found": "No se ha encontrado ningún gateway.",
-        "no-gateway-matching": " '{{item}}' no encontrado.",
-        "path-logs": "Ruta a los archivos de log",
-        "path-logs-required": "Ruta requerida.",
-        "permit-without-calls": "Permitir Keep alive si llamadas",
-        "remote": "Configuración remota",
-        "remote-logging-level": "Nivel de logging",
-        "remove-entry": "Borrar configuración",
-        "remote-shell": "Consola remota",
-        "remote-configuration": "Configuración remota",
-        "other": "otros",
-        "save-tip": "Grabar fichero de configuración",
-        "security-type": "Tipo de seguridad",
-        "security-types": {
-            "access-token": "Tóken de acceso",
-            "username-password": "Usuario y contraseña",
-            "tls": "TLS",
-            "tls-access-token": "TLS + Tóken de acceso",
-            "tls-private-key": "TLS + Clave privada"
-        },
-        "server-port": "Puerto del servidor",
-        "statistics": {
-            "statistic": "Estadística",
-            "statistics": "Estadísticas",
-            "statistic-commands-empty": "No hay estadísticas",
-            "commands": "Comandos",
-            "send-period": "Periodo de envío de estadísticas (en segundos)",
-            "send-period-required": "Se requiere periodo de envío",
-            "send-period-min": "El periodo de envío no puede ser menor de 60",
-            "send-period-pattern": "El periodo de envío no es válido",
-            "check-connectors-configuration": "Revisar configuración de conectores (en segundos)",
-            "check-connectors-configuration-required": "Se requiere un valor",
-            "check-connectors-configuration-min": "El valor no puede ser menor de 1",
-            "check-connectors-configuration-pattern": "La configuración no es válida",
-            "add": "Añadir comando",
-            "timeout": "Timeout",
-            "timeout-ms": "Timeout (en ms)",
-            "timeout-required": "Se requiere timeout",
-            "timeout-min": "El timeout no puede ser menor de 1",
-            "timeout-pattern": "El timeout no es válido",
-            "attribute-name": "Nombre de atributo",
-            "attribute-name-required": "Se requiere nombre de atributo",
-            "command": "Comando",
-            "command-required": "Se requiere comando",
-            "remove": "Borrar comando"
-        },
-        "storage": "Grabación",
-        "storage-max-file-records": "Número máximo de registros en fichero",
-        "storage-max-files": "Número máximo de ficheros",
-        "storage-max-files-min": "El número mínimo es 1.",
-        "storage-max-files-pattern": "Número no válido.",
-        "storage-max-files-required": "Se requiere número.",
-        "storage-max-records": "Máximo de registros en el almacén",
-        "storage-max-records-min": "El número mínimo es 1.",
-        "storage-max-records-pattern": "Número no válido.",
-        "storage-max-records-required": "Se requiere número.",
-        "storage-read-record-count": "Leer número de entradas en almacén",
-        "storage-read-record-count-min": "El número mínimo de entradas es 1.",
-        "storage-read-record-count-pattern": "El número no es válido.",
-        "storage-read-record-count-required": "Se requiere número de entradas.",
-        "storage-max-read-record-count": "Número máximo de entradas en el almacén",
-        "storage-max-read-record-count-min": "El número mínimo es 1.",
-        "storage-max-read-record-count-pattern": "El número no es válido",
-        "storage-max-read-record-count-required": "Se requiere número máximo de entradas.",
-        "storage-data-folder-path": "Ruta de carpeta de datos",
-        "storage-data-folder-path-required": "Se requiere ruta.",
-        "storage-pack-size": "Tamaño máximo de eventos",
-        "storage-pack-size-min": "El número mínimo es 1.",
-        "storage-pack-size-pattern": "Número no válido.",
-        "storage-pack-size-required": "Se requiere número.",
-        "storage-path": "Ruta de almacén",
-        "storage-path-required": "Se requiere ruta de almacén.",
-        "storage-type": "Tipo de almacén",
-        "storage-types": {
-            "file-storage": "Almacén en fichero",
-            "memory-storage": "Almacén en memoria",
-            "sqlite": "SQLITE"
-        },
-        "thingsboard": "ThingsBoard",
-        "general": "General",
-        "thingsboard-host": "Host ThingsBoard",
-        "thingsboard-host-required": "Se requiere Host.",
-        "thingsboard-port": "Puerto ThingsBoard",
-        "thingsboard-port-max": "El puerto máximo es 65535.",
-        "thingsboard-port-min": "El puerto mínimo es 1.",
-        "thingsboard-port-pattern": "Puerto no válido.",
-        "thingsboard-port-required": "Se requiere puerto.",
-        "tidy": "Tidy",
-        "tidy-tip": "Tidy JSON",
-        "title-connectors-json": "Configuración conector {{typeName}}",
-        "tls-path-ca-certificate": "Ruta al certificado CA en el gateway",
-        "tls-path-client-certificate": "Ruta al certificado cliente en el gateway",
-        "messages-ttl-check-in-hours": "Comprobación de TTL de mensajes en horas",
-        "messages-ttl-check-in-hours-required": "Campo requerido.",
-        "messages-ttl-check-in-hours-min": "El mínimo es 1.",
-        "messages-ttl-check-in-hours-pattern": "El número no es válido.",
-        "messages-ttl-in-days": "TTL (Time to live) de mensages en días",
-        "messages-ttl-in-days-required": "Se requiere TTL de mensajes.",
-        "messages-ttl-in-days-min": "El número mínimo es 1.",
-        "messages-ttl-in-days-pattern": "El número no es válido.",
-        "mqtt-qos": "QoS",
-        "mqtt-qos-required": "Se requiere QoS",
-        "mqtt-qos-range": "El rango de valores es desde 0 a 1",
-        "tls-path-private-key": "Ruta a la clave privada en el gateway",
-        "toggle-fullscreen": "Pantalla completa fullscreen",
-        "transformer-json-config": "Configuración JSON*",
-        "update-config": "Añadir/actualizar configuración JSON",
-        "hints": {
-            "remote-configuration": "Habilita la administración y configuración remota del gateway",
-            "remote-shell": "Habilita el control remoto del sistema operativo del gateway desde el widget terminal remoto",
-            "host": "Hostname o dirección IP del servidor Thingsboard",
-            "port": "Puerto del servicio MQTT en el servidor Thingsboard",
-            "token": "Access token para el gateway",
-            "client-id": "ID de cliente MQTT para el gateway",
-            "username": "Usuario MQTT para el gateway",
-            "password": "Contraseña MQTT para el gateway",
-            "ca-cert": "Ruta al fichero del certificado CA",
-            "date-form": "Formato de fecha en los mensajes de registro",
-            "data-folder": "Ruta a la carpeta que contendrá los datos (Relativa o absoluta)",
-            "log-format": "Formato de mensajes en registro",
-            "remote-log": "Habilita el registro remoto y la posterior lectura desde el gateway",
-            "backup-count": "Si el contaje de copias de seguridad es mayor que 0, cuando se realice una renovación, no se conservan más que los archivos de recuento de copias de seguridad, los más antíguos se eliminarán",
-            "storage": "Provee la configuración para el grabado de datos entrantes antes de que se envíen a la plataforma",
-            "max-file-count": "Número máximo de ficheros que se crearán",
-            "max-read-count": "Númeo máximo de mensajes a obtener desde el disco y enviados a la plataforma",
-            "max-records": "Número máximo de registros que se guardarán en un solo fichero",
-            "read-record-count": "Número de mensages a obtener desde el almacenamiento y enviados a la plataforma",
-            "max-records-count": "Número máximo de datos en almacenamiento antes de enviar a la plataforma",
-            "ttl-check-hour": "Con qué frecuencia el gateway comprobará si los datos están obsoletos",
-            "ttl-messages-day": "Número máximo de días para la retención de datos en el almacén",
-            "commands": "Comandos para recoger estadísticas adicionales",
-            "attribute": "Clave de telemetría para estadísticas",
-            "timeout": "Timeout para la ejecución de comandos",
-            "command": "El resultado de la ejecución del comando, se usará como valor para la telemetría",
-            "check-device-activity": "Habilita la monitorización de cada uno de los dispositivos conectados",
-            "inactivity-timeout": "Tiempo tras que el gateway desconectará el dispositivo",
-            "inactivity-period": "Periodo de monitorización de actividad en el dispositivo",
-            "minimal-pack-delay": "Tiempo de espera entre envío de paquetes de mensajes (Un valor muy bajo, resultará en un aumento de uso de la CPU en el gateway)",
-            "qos": "Quality of Service en los mensajes MQTT (0 - at most once, 1 - at least once)",
-            "server-port": "Puerto de red en el cual el servidor GRPC escuchará conexiones entrantes.",
-            "grpc-keep-alive-timeout": "Tiempo máximo, el cual el servidor esperara un ping keepalive antes de considerar la conexión terminada.",
-            "grpc-keep-alive": "Duración entre dos pings keepalive cuando no haya llamada RPC activa.",
-            "grpc-min-time-between-pings": "Mínimo tiempo que el servidor debe esperar entre envíos de mensajes de ping",
-            "grpc-max-pings-without-data": "Número máximo de pings keepalive que el servidor puede enviar sin recibir ningún dato antes de considerar la conexión terminada.",
-            "grpc-min-ping-interval-without-data": "Mínimo tiempo que el servidor debe esperar entre envíos de ping keepalive cuando no haya ningún dato en envío o recepción.",
-            "permit-without-calls": "Permitir al servidor mantener la conexión GRPC abierta, cuando no haya llamadas RPC activas."
-        }
+        "no-gateway-matching": "No se encontró '{{item}}'."
     },
     "grid": {
         "delete-item-title": "¿Quieres eliminar este item?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ko_KR.json b/ui-ngx/src/assets/locale/locale.constant-ko_KR.json
index 6b8dc130d4..8d2a1647a4 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ko_KR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ko_KR.json
@@ -1584,78 +1584,15 @@
         "function": "기능"
     },
     "gateway": {
-        "add-entry": "설정 추가",
-        "connector-add": "새로운 연결자 추가",
-        "connector-enabled": "Enable connector",
-        "connector-name": "Connector name",
-        "connector-name-required": "Connector name is required.",
-        "connector-type": "Connector type",
-        "connector-type-required": "Connector type is required.",
-        "connectors": "Connectors configuration",
         "create-new-gateway": "Create a new gateway",
         "create-new-gateway-text": "Are you sure you want create a new gateway with name: '{{gatewayName}}'?",
-        "delete": "Delete configuration",
-        "download-tip": "Download configuration file",
         "gateway": "Gateway",
         "gateway-exists": "Device with same name is already exists.",
         "gateway-name": "Gateway name",
         "gateway-name-required": "Gateway name is required.",
         "gateway-saved": "Gateway configuration successfully saved.",
-        "json-parse": "Not valid JSON.",
-        "json-required": "Field cannot be empty.",
-        "no-connectors": "No connectors",
-        "no-data": "No configurations",
         "no-gateway-found": "No gateway found.",
-        "no-gateway-matching": " '{{item}}' not found.",
-        "path-logs": "Path to log files",
-        "path-logs-required": "Path is required.",
-        "remote": "Remote configuration",
-        "remote-logging-level": "Logging level",
-        "remove-entry": "Remove configuration",
-        "save-tip": "Save configuration file",
-        "security-type": "Security type",
-        "security-types": {
-            "access-token": "Access Token",
-            "tls": "TLS"
-        },
-        "storage": "Storage",
-        "storage-max-file-records": "Maximum records in file",
-        "storage-max-files": "Maximum number of files",
-        "storage-max-files-min": "Minimum number is 1.",
-        "storage-max-files-pattern": "Number is not valid.",
-        "storage-max-files-required": "Number is required.",
-        "storage-max-records": "Maximum records in storage",
-        "storage-max-records-min": "Minimum number of records is 1.",
-        "storage-max-records-pattern": "Number is not valid.",
-        "storage-max-records-required": "Maximum records is required.",
-        "storage-pack-size": "Maximum event pack size",
-        "storage-pack-size-min": "Minimum number is 1.",
-        "storage-pack-size-pattern": "Number is not valid.",
-        "storage-pack-size-required": "Maximum event pack size is required.",
-        "storage-path": "Storage path",
-        "storage-path-required": "Storage path is required.",
-        "storage-type": "Storage type",
-        "storage-types": {
-            "file-storage": "File storage",
-            "memory-storage": "Memory storage"
-        },
-        "thingsboard": "ThingsBoard",
-        "thingsboard-host": "ThingsBoard host",
-        "thingsboard-host-required": "Host is required.",
-        "thingsboard-port": "ThingsBoard port",
-        "thingsboard-port-max": "Maximum port number is 65535.",
-        "thingsboard-port-min": "Minimum port number is 1.",
-        "thingsboard-port-pattern": "Port is not valid.",
-        "thingsboard-port-required": "Port is required.",
-        "tidy": "Tidy",
-        "tidy-tip": "Tidy config JSON",
-        "title-connectors-json": "Connector {{typeName}} configuration",
-        "tls-path-ca-certificate": "Path to CA certificate on gateway",
-        "tls-path-client-certificate": "Path to client certificate on gateway",
-        "tls-path-private-key": "Path to private key on gateway",
-        "toggle-fullscreen": "Toggle fullscreen",
-        "transformer-json-config": "Configuration JSON*",
-        "update-config": "Add/update configuration JSON"
+        "no-gateway-matching": " '{{item}}' not found."
     },
     "grid": {
         "delete-item-title": "이 항목을 삭제 하시겠습니까?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-lt_LT.json b/ui-ngx/src/assets/locale/locale.constant-lt_LT.json
index df1659e112..cb3a96f989 100644
--- a/ui-ngx/src/assets/locale/locale.constant-lt_LT.json
+++ b/ui-ngx/src/assets/locale/locale.constant-lt_LT.json
@@ -3128,255 +3128,15 @@
         "function": "Funkcija"
     },
     "gateway": {
-        "add-entry": "Add configuration",
-        "advanced": "Advanced",
-        "checking-device-activity": "Checking device activity",
-        "command": "Docker commands",
-        "command-copied-message": "Docker command has been copied to clipboard",
-        "configuration": "Configuration",
-        "connector-add": "Add new connector",
-        "connector-enabled": "Enable connector",
-        "connector-name": "Connector name",
-        "connector-name-required": "Connector name is required.",
-        "connector-type": "Connector type",
-        "connector-type-required": "Connector type is required.",
-        "connectors": "Connectors",
-        "connectors-config": "Connectors configuration",
-        "connectors-table-enabled": "Enabled",
-        "connectors-table-name": "Name",
-        "connectors-table-type": "Type",
-        "connectors-table-status": "Status",
-        "connectors-table-actions": "Actions",
-        "connectors-table-key": "Key",
-        "connectors-table-class": "Class",
-        "rpc-command-send": "Send",
-        "rpc-command-result": "Result",
-        "rpc-command-edit-params": "Edit parameters",
-        "gateway-configuration": "General Configuration",
-        "docker-label": "In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.",
-        "create-new-gateway": "Create a new gateway",
-        "create-new-gateway-text": "Are you sure you want create a new gateway with name: '{{gatewayName}}'?",
-        "created-time": "Created time",
-        "configuration-delete-dialog-header": "Configurations will be deleted",
-        "configuration-delete-dialog-body": "Turning off Remote Configuration is possible only if there is physical access to the Gateway. All previous configurations will be deleted.<br><br> \nTo turn off configuration, enter gateway name below",
-        "configuration-delete-dialog-input": "Gateway name",
-        "configuration-delete-dialog-input-required": "Gateway name is mandatory",
-        "configuration-delete-dialog-confirm": "Turn Off",
-        "delete": "Delete configuration",
-        "download-tip": "Download configuration file",
-        "drop-file": "Drop file here or",
-        "gateway": "Gateway",
         "gateway-exists": "Device with same name is already exists.",
         "gateway-name": "Gateway name",
         "gateway-name-required": "Gateway name is required.",
         "gateway-saved": "Gateway configuration successfully saved.",
-        "grpc": "GRPC",
-        "grpc-keep-alive-timeout": "Keep alive timeout (in ms)",
-        "grpc-keep-alive-timeout-required": "Keep alive timeout is required",
-        "grpc-keep-alive-timeout-min": "Keep alive timeout can not be less then 1",
-        "grpc-keep-alive-timeout-pattern": "Keep alive timeout is not valid",
-        "grpc-keep-alive": "Keep alive (in ms)",
-        "grpc-keep-alive-required": "Keep alive is required",
-        "grpc-keep-alive-min": "Keep alive can not be less then 1",
-        "grpc-keep-alive-pattern": "Keep alive is not valid",
-        "grpc-min-time-between-pings": "Min time between pings (in ms)",
-        "grpc-min-time-between-pings-required": "Min time between pings is required",
-        "grpc-min-time-between-pings-min": "Min time between pings can not be less then 1",
-        "grpc-min-time-between-pings-pattern": "Min time between pings is not valid",
-        "grpc-min-ping-interval-without-data": "Min ping interval without data (in ms)",
-        "grpc-min-ping-interval-without-data-required": "Min ping interval without data is required",
-        "grpc-min-ping-interval-without-data-min": "Min ping interval without data can not be less then 1",
-        "grpc-min-ping-interval-without-data-pattern": "Min ping interval without data is not valid",
-        "grpc-max-pings-without-data": "Max pings without data",
-        "grpc-max-pings-without-data-required": "Max pings without data is required",
-        "grpc-max-pings-without-data-min": "Max pings without data can not be less then 1",
-        "grpc-max-pings-without-data-pattern": "Max pings without data is not valid",
-        "inactivity-check-period-seconds": "Inactivity check period (in sec)",
-        "inactivity-check-period-seconds-required": "Inactivity check period is required",
-        "inactivity-check-period-seconds-min": "Inactivity check period can not be less then 1",
-        "inactivity-check-period-seconds-pattern": "Inactivity check period is not valid",
-        "inactivity-timeout-seconds": "Inactivity timeout (in sec)",
-        "inactivity-timeout-seconds-required": "Inactivity timeout is required",
-        "inactivity-timeout-seconds-min": "Inactivity timeout can not be less then 1",
-        "inactivity-timeout-seconds-pattern": "Inactivity timeout is not valid",
-        "json-parse": "Not valid JSON.",
-        "json-required": "Field cannot be empty.",
-        "logs": {
-            "logs": "Logs",
-            "days": "days",
-            "hours": "hours",
-            "minutes": "minutes",
-            "seconds": "seconds",
-            "date-format": "Date format",
-            "date-format-required": "Date format required",
-            "log-format": "Log format",
-            "log-type": "Log type",
-            "log-format-required": "Log format required",
-            "remote": "Remote logging",
-            "remote-logs": "Remote logs",
-            "local": "Local logging",
-            "level": "Log level",
-            "file-path": "File path",
-            "file-path-required": "File path required",
-            "saving-period": "Log saving period",
-            "saving-period-min": "Log saving period can not be less then 1",
-            "saving-period-required": "Log saving period required",
-            "backup-count": "Backup count",
-            "backup-count-min": "Backup count can not be less then 1",
-            "backup-count-required": "Backup count required"
-        },
-        "min-pack-send-delay": "Min pack send delay (in ms)",
-        "min-pack-send-delay-required": "Min pack send delay is required",
-        "min-pack-send-delay-min": "Min pack send delay can not be less then 0",
-        "no-connectors": "No connectors",
-        "no-data": "No configurations",
+        "gateway": "Gateway",
+        "create-new-gateway": "Create a new gateway",
+        "create-new-gateway-text": "Are you sure you want create a new gateway with name: '{{gatewayName}}'?",
         "no-gateway-found": "No gateway found.",
-        "no-gateway-matching": " '{{item}}' not found.",
-        "path-logs": "Path to log files",
-        "path-logs-required": "Path is required.",
-        "permit-without-calls": "Keep alive permit without calls",
-        "remote": "Remote configuration",
-        "remote-logging-level": "Logging level",
-        "remove-entry": "Remove configuration",
-        "remote-shell": "Remote shell",
-        "remote-configuration": "Remote Configuration",
-        "other": "Other",
-        "save-tip": "Save configuration file",
-        "security-type": "Security type",
-        "security-types": {
-            "access-token": "Access Token",
-            "username-password": "Username and Password",
-            "tls": "TLS",
-            "tls-access-token": "TLS + Access Token",
-            "tls-private-key": "TLS + Private Key"
-        },
-        "server-port": "Server port",
-        "statistics": {
-            "statistic": "Statistic",
-            "statistics": "Statistics",
-            "statistic-commands-empty": "No statistics available",
-            "commands": "Commands",
-            "send-period": "Statistic send period (in sec)",
-            "send-period-required": "Statistic send period is required",
-            "send-period-min": "Statistic send period can not be less then 60",
-            "send-period-pattern": "Statistic send period is not valid",
-            "check-connectors-configuration": "Check connectors configuration (in sec)",
-            "check-connectors-configuration-required": "Check connectors configuration is required",
-            "check-connectors-configuration-min": "Check connectors configuration can not be less then 1",
-            "check-connectors-configuration-pattern": "Check connectors configuration is not valid",
-            "add": "Add command",
-            "timeout": "Timeout",
-            "timeout-ms": "Timeout (in ms)",
-            "timeout-required": "Timeout is required",
-            "timeout-min": "Timeout can not be less then 1",
-            "timeout-pattern": "Timeout is not valid",
-            "attribute-name": "Attribute name",
-            "attribute-name-required": "Attribute name is required",
-            "command": "Command",
-            "command-required": "Command is required",
-            "remove": "Remove command"
-        },
-        "storage": "Storage",
-        "storage-max-file-records": "Maximum records in file",
-        "storage-max-files": "Maximum number of files",
-        "storage-max-files-min": "Minimum number is 1.",
-        "storage-max-files-pattern": "Number is not valid.",
-        "storage-max-files-required": "Number is required.",
-        "storage-max-records": "Maximum records in storage",
-        "storage-max-records-min": "Minimum number of records is 1.",
-        "storage-max-records-pattern": "Number is not valid.",
-        "storage-max-records-required": "Maximum records is required.",
-        "storage-read-record-count": "Read record count in storage",
-        "storage-read-record-count-min": "Minimum number of records is 1.",
-        "storage-read-record-count-pattern": "Number is not valid.",
-        "storage-read-record-count-required": "Read record count is required.",
-        "storage-max-read-record-count": "Max read record count in storage",
-        "storage-max-read-record-count-min": "Minimum number of records is 1.",
-        "storage-max-read-record-count-pattern": "Number is not valid.",
-        "storage-max-read-record-count-required": "Max Read record count is required.",
-        "storage-data-folder-path": "Data folder path",
-        "storage-data-folder-path-required": "Data folder path is required.",
-        "storage-pack-size": "Maximum event pack size",
-        "storage-pack-size-min": "Minimum number is 1.",
-        "storage-pack-size-pattern": "Number is not valid.",
-        "storage-pack-size-required": "Maximum event pack size is required.",
-        "storage-path": "Storage path",
-        "storage-path-required": "Storage path is required.",
-        "storage-type": "Storage type",
-        "storage-types": {
-            "file-storage": "File storage",
-            "memory-storage": "Memory storage",
-            "sqlite": "SQLITE"
-        },
-        "thingsboard": "ThingsBoard",
-        "general": "General",
-        "thingsboard-host": "ThingsBoard host",
-        "thingsboard-host-required": "Host is required.",
-        "thingsboard-port": "ThingsBoard port",
-        "thingsboard-port-max": "Maximum port number is 65535.",
-        "thingsboard-port-min": "Minimum port number is 1.",
-        "thingsboard-port-pattern": "Port is not valid.",
-        "thingsboard-port-required": "Port is required.",
-        "tidy": "Tidy",
-        "tidy-tip": "Tidy config JSON",
-        "title-connectors-json": "Connector {{typeName}} configuration",
-        "tls-path-ca-certificate": "Path to CA certificate on gateway",
-        "tls-path-client-certificate": "Path to client certificate on gateway",
-        "messages-ttl-check-in-hours": "Messages TTL check in hours",
-        "messages-ttl-check-in-hours-required": "Messages TTL check in hours is required.",
-        "messages-ttl-check-in-hours-min": "Min number is 1.",
-        "messages-ttl-check-in-hours-pattern": "Number is not valid.",
-        "messages-ttl-in-days": "Messages TTL in days",
-        "messages-ttl-in-days-required": "Messages TTL in days is required.",
-        "messages-ttl-in-days-min": "Min number is 1.",
-        "messages-ttl-in-days-pattern": "Number is not valid.",
-        "mqtt-qos": "QoS",
-        "mqtt-qos-required": "QoS is required",
-        "mqtt-qos-range": "QoS values range is from 0 to 1",
-        "tls-path-private-key": "Path to private key on gateway",
-        "toggle-fullscreen": "Toggle fullscreen",
-        "transformer-json-config": "Configuration JSON*",
-        "update-config": "Add/update configuration JSON",
-        "hints": {
-            "remote-configuration": "Enables remote configuration and management of the gateway",
-            "remote-shell": "Enables remote control of the operating system with the gateway from the Remote Shell widget",
-            "host": "Hostname or IP address of ThingsBoard server",
-            "port": "Port of MQTT service on ThingsBoard server",
-            "token": "Access token for the gateway from ThingsBoard server",
-            "client-id": "MQTT client id for the gateway form ThingsBoard server",
-            "username": "MQTT username for the gateway form ThingsBoard server",
-            "password": "MQTT password for the gateway form ThingsBoard server",
-            "ca-cert": "Path to CA certificate file",
-            "date-form": "Date format in log message",
-            "data-folder": "Path to folder, that will contains data (Relative or Absolute)",
-            "log-format": "Log message format",
-            "remote-log": "Enables remote logging and logs reading from the gateway",
-            "backup-count": "If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",
-            "storage": "Provides configuration for saving incoming data before it is sent to the platform",
-            "max-file-count": "Maximum count of file that will be created",
-            "max-read-count": "Count of messages to get from storage and send to ThingsBoard",
-            "max-records": "Maximum count of records that will be stored in one file",
-            "read-record-count": "Count of messages to get from storage and send to ThingsBoard",
-            "max-records-count": "Maximum count of data in storage before send to ThingsBoard",
-            "ttl-check-hour": "How often will Gateway check data for obsolescence",
-            "ttl-messages-day": "Maximum days that storage will save data",
-            "commands": "Commands for collecting additional statistic",
-            "attribute": "Statistic telemetry key",
-            "timeout": "Timeout for command executing",
-            "command": "The result of the command execution, will be used as the value for telemetry",
-            "check-device-activity": "Enables monitor the activity of each connected device",
-            "inactivity-timeout": "Time after whose the gateway will disconnect device",
-            "inactivity-period": "Periodicity of device activity check",
-            "minimal-pack-delay": "Delay between sending packs of messages (Decreasing this setting results in increased CPU usage)",
-            "qos": "Quality of Service in MQTT messaging (0 - at most once, 1 - at least once)",
-            "server-port": "Network port on which GRPC server will listen for incoming connections.",
-            "grpc-keep-alive-timeout": "Maximum time the server should wait for a keepalive ping response before considering the connection dead.",
-            "grpc-keep-alive": "Duration between two successive keepalive ping messages when there is no active RPC call.",
-            "grpc-min-time-between-pings": "Minimum amount of time the server should wait between sending keepalive ping messages",
-            "grpc-max-pings-without-data": "Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.",
-            "grpc-min-ping-interval-without-data": "Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.",
-            "permit-without-calls": "Allow server to keep the GRPC connection alive even when there are no active RPC calls."
-        }
+        "no-gateway-matching": " '{{item}}' not found."
     },
     "grid": {
         "delete-item-title": "Ar tikrai norite pašalinti šį elementą?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-nl_BE.json b/ui-ngx/src/assets/locale/locale.constant-nl_BE.json
index afe23e039a..c16c9c5e40 100644
--- a/ui-ngx/src/assets/locale/locale.constant-nl_BE.json
+++ b/ui-ngx/src/assets/locale/locale.constant-nl_BE.json
@@ -2993,78 +2993,15 @@
         "function": "Functie"
     },
     "gateway": {
-        "add-entry": "Configuratie toevoegen",
-        "connector-add": "Nieuwe connector toevoegen",
-        "connector-enabled": "Connector inschakelen",
-        "connector-name": "Naam van de connector",
-        "connector-name-required": "De naam van de connector is vereist.",
-        "connector-type": "Type aansluiting",
-        "connector-type-required": "Het type connector is vereist.",
-        "connectors": "Configuratie van connectoren",
         "create-new-gateway": "Een nieuwe gateway maken",
         "create-new-gateway-text": "Weet u zeker dat u een nieuwe gateway wilt maken met de naam: '{{gatewayName}}'?",
-        "delete": "Configuratie verwijderen",
-        "download-tip": "Configuratiebestand downloaden",
         "gateway": "Gateway",
         "gateway-exists": "Device met dezelfde naam bestaat al.",
         "gateway-name": "Naam van de gateway",
         "gateway-name-required": "De naam van de gateway is vereist.",
         "gateway-saved": "Gatewayconfiguratie succesvol opgeslagen.",
-        "json-parse": "Ongeldige JSON.",
-        "json-required": "Het veld mag niet leeg zijn.",
-        "no-connectors": "Geen connectoren",
-        "no-data": "Geen configuraties",
         "no-gateway-found": "Geen gateway gevonden.",
-        "no-gateway-matching": "'{{item}}' niet gevonden.",
-        "path-logs": "Pad naar logbestanden",
-        "path-logs-required": "Pad is vereist.",
-        "remote": "Configuratie op afstand",
-        "remote-logging-level": "Registratie niveau",
-        "remove-entry": "Configuratie verwijderen",
-        "save-tip": "Configuratiebestand opslaan",
-        "security-type": "Soort beveiliging",
-        "security-types": {
-            "access-token": "Toegang tot token",
-            "tls": "TLS (TLS)"
-        },
-        "storage": "Opslag",
-        "storage-max-file-records": "Maximum aantal records in bestand",
-        "storage-max-files": "Maximaal aantal bestanden",
-        "storage-max-files-min": "Minimum aantal is 1.",
-        "storage-max-files-pattern": "Nummer is niet geldig.",
-        "storage-max-files-required": "Nummer is vereist.",
-        "storage-max-records": "Maximum aantal records in opslag",
-        "storage-max-records-min": "Minimum aantal records is 1.",
-        "storage-max-records-pattern": "Nummer is niet geldig.",
-        "storage-max-records-required": "Maximale records zijn vereist.",
-        "storage-pack-size": "Maximale pakketgrootte voor events",
-        "storage-pack-size-min": "Minimum aantal is 1.",
-        "storage-pack-size-pattern": "Nummer is niet geldig.",
-        "storage-pack-size-required": "De maximale pakketgrootte van het event is vereist.",
-        "storage-path": "Opslag pad",
-        "storage-path-required": "Opslagpad is vereist.",
-        "storage-type": "Type opslag",
-        "storage-types": {
-            "file-storage": "Opslag van bestanden",
-            "memory-storage": "Geheugen opslag"
-        },
-        "thingsboard": "Dingen Bord",
-        "thingsboard-host": "ThingsBoard-gastheer",
-        "thingsboard-host-required": "Server host is vereist.",
-        "thingsboard-port": "ThingsBoard-poort",
-        "thingsboard-port-max": "Het maximale poortnummer is 65535.",
-        "thingsboard-port-min": "Het minimale poortnummer is 1.",
-        "thingsboard-port-pattern": "Poort is niet geldig.",
-        "thingsboard-port-required": "Poort is vereist.",
-        "tidy": "Ordelijk",
-        "tidy-tip": "Opgeruimde configuratie JSON",
-        "title-connectors-json": "Configuratie van connector {{typeName}}",
-        "tls-path-ca-certificate": "Pad naar CA-certificaat op gateway",
-        "tls-path-client-certificate": "Pad naar clientcertificaat op gateway",
-        "tls-path-private-key": "Pad naar privésleutel op gateway",
-        "toggle-fullscreen": "Volledig scherm in- en uitschakelen",
-        "transformer-json-config": "Configuratie JSON*",
-        "update-config": "Configuratie JSON toevoegen/bijwerken"
+        "no-gateway-matching": "'{{item}}' niet gevonden."
     },
     "grid": {
         "delete-item-title": "Weet u zeker dat u dit item wilt verwijderen?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-pl_PL.json b/ui-ngx/src/assets/locale/locale.constant-pl_PL.json
index 8f35a7daa2..ac27313248 100644
--- a/ui-ngx/src/assets/locale/locale.constant-pl_PL.json
+++ b/ui-ngx/src/assets/locale/locale.constant-pl_PL.json
@@ -3137,255 +3137,15 @@
         "function": "Funkcjonować"
     },
     "gateway": {
-        "add-entry": "Dodaj konfigurację",
-        "advanced": "Advanced",
-        "checking-device-activity": "Checking device activity",
-        "command": "Docker commands",
-        "command-copied-message": "Docker command has been copied to clipboard",
-        "configuration": "Configuration",
-        "connector-add": "Dodaj nowe złącze",
-        "connector-enabled": "Włącz złącze",
-        "connector-name": "Nazwa złącza",
-        "connector-name-required": "Nazwa złącza jest wymagana.",
-        "connector-type": "Typ złącza",
-        "connector-type-required": "Typ złącza jest wymagany.",
-        "connectors": "Konfiguracja złączy",
-        "connectors-config": "Connectors configuration",
-        "connectors-table-enabled": "Enabled",
-        "connectors-table-name": "Name",
-        "connectors-table-type": "Type",
-        "connectors-table-status": "Status",
-        "connectors-table-actions": "Actions",
-        "connectors-table-key": "Key",
-        "connectors-table-class": "Class",
-        "rpc-command-send": "Send",
-        "rpc-command-result": "Result",
-        "rpc-command-edit-params": "Edit parameters",
-        "gateway-configuration": "General Configuration",
-        "docker-label": "In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.",
         "create-new-gateway": "Utwórz nowy gateway",
         "create-new-gateway-text": "Czy na pewno chcesz utworzyć nowy gateway o nazwie: '{{gatewayName}}'?",
-        "created-time": "Created time",
-        "configuration-delete-dialog-header": "Configurations will be deleted",
-        "configuration-delete-dialog-body": "Turning off Remote Configuration is possible only if there is physical access to the Gateway. All previous configurations will be deleted.<br><br> \nTo turn off configuration, enter gateway name below",
-        "configuration-delete-dialog-input": "Gateway name",
-        "configuration-delete-dialog-input-required": "Gateway name is mandatory",
-        "configuration-delete-dialog-confirm": "Turn Off",
-        "delete": "Usuń konfigurację",
-        "download-tip": "Pobierz plik konfiguracyjny",
-        "drop-file": "Drop file here or",
         "gateway": "Wejście",
         "gateway-exists": "Urządzenie o tej samej nazwie już istnieje.",
         "gateway-name": "Nazwa Gateway",
         "gateway-name-required": "Nazwa Gateway'a jest wymagana.",
         "gateway-saved": "Konfiguracja Gatewey'a została pomyślnie zapisana.",
-        "grpc": "GRPC",
-        "grpc-keep-alive-timeout": "Keep alive timeout (in ms)",
-        "grpc-keep-alive-timeout-required": "Keep alive timeout is required",
-        "grpc-keep-alive-timeout-min": "Keep alive timeout can not be less then 1",
-        "grpc-keep-alive-timeout-pattern": "Keep alive timeout is not valid",
-        "grpc-keep-alive": "Keep alive (in ms)",
-        "grpc-keep-alive-required": "Keep alive is required",
-        "grpc-keep-alive-min": "Keep alive can not be less then 1",
-        "grpc-keep-alive-pattern": "Keep alive is not valid",
-        "grpc-min-time-between-pings": "Min time between pings (in ms)",
-        "grpc-min-time-between-pings-required": "Min time between pings is required",
-        "grpc-min-time-between-pings-min": "Min time between pings can not be less then 1",
-        "grpc-min-time-between-pings-pattern": "Min time between pings is not valid",
-        "grpc-min-ping-interval-without-data": "Min ping interval without data (in ms)",
-        "grpc-min-ping-interval-without-data-required": "Min ping interval without data is required",
-        "grpc-min-ping-interval-without-data-min": "Min ping interval without data can not be less then 1",
-        "grpc-min-ping-interval-without-data-pattern": "Min ping interval without data is not valid",
-        "grpc-max-pings-without-data": "Max pings without data",
-        "grpc-max-pings-without-data-required": "Max pings without data is required",
-        "grpc-max-pings-without-data-min": "Max pings without data can not be less then 1",
-        "grpc-max-pings-without-data-pattern": "Max pings without data is not valid",
-        "inactivity-check-period-seconds": "Inactivity check period (in sec)",
-        "inactivity-check-period-seconds-required": "Inactivity check period is required",
-        "inactivity-check-period-seconds-min": "Inactivity check period can not be less then 1",
-        "inactivity-check-period-seconds-pattern": "Inactivity check period is not valid",
-        "inactivity-timeout-seconds": "Inactivity timeout (in sec)",
-        "inactivity-timeout-seconds-required": "Inactivity timeout is required",
-        "inactivity-timeout-seconds-min": "Inactivity timeout can not be less then 1",
-        "inactivity-timeout-seconds-pattern": "Inactivity timeout is not valid",
-        "json-parse": "Nieprawidłowy JSON.",
-        "json-required": "Pole nie może być puste.",
-        "logs": {
-            "logs": "Logs",
-            "days": "days",
-            "hours": "hours",
-            "minutes": "minutes",
-            "seconds": "seconds",
-            "date-format": "Date format",
-            "date-format-required": "Date format required",
-            "log-format": "Log format",
-            "log-type": "Log type",
-            "log-format-required": "Log format required",
-            "remote": "Remote logging",
-            "remote-logs": "Remote logs",
-            "local": "Local logging",
-            "level": "Log level",
-            "file-path": "File path",
-            "file-path-required": "File path required",
-            "saving-period": "Log saving period",
-            "saving-period-min": "Log saving period can not be less then 1",
-            "saving-period-required": "Log saving period required",
-            "backup-count": "Backup count",
-            "backup-count-min": "Backup count can not be less then 1",
-            "backup-count-required": "Backup count required"
-        },
-        "min-pack-send-delay": "Min pack send delay (in ms)",
-        "min-pack-send-delay-required": "Min pack send delay is required",
-        "min-pack-send-delay-min": "Min pack send delay can not be less then 0",
-        "no-connectors": "Brak złączy",
-        "no-data": "Brak konfiguracji",
         "no-gateway-found": "Nie znaleziono gateway'a.",
-        "no-gateway-matching": " '{{item}}' nie znaleziono.",
-        "path-logs": "Ścieżka do plików dziennika",
-        "path-logs-required": "Ścieżka jest wymagana.",
-        "permit-without-calls": "Keep alive permit without calls",
-        "remote": "Zdalna konfiguracja",
-        "remote-logging-level": "Poziom logowania",
-        "remove-entry": "Usuń konfigurację",
-        "remote-shell": "Remote shell",
-        "remote-configuration": "Remote Configuration",
-        "other": "Other",
-        "save-tip": "Zapisz plik konfiguracyjny",
-        "security-type": "Rodzaj zabezpieczenia",
-        "security-types": {
-            "access-token": "Token dostępu",
-            "username-password": "Username and Password",
-            "tls": "TLS",
-            "tls-access-token": "TLS + Access Token",
-            "tls-private-key": "TLS + Private Key"
-        },
-        "server-port": "Server port",
-        "statistics": {
-            "statistic": "Statistic",
-            "statistics": "Statistics",
-            "statistic-commands-empty": "No statistics available",
-            "commands": "Commands",
-            "send-period": "Statistic send period (in sec)",
-            "send-period-required": "Statistic send period is required",
-            "send-period-min": "Statistic send period can not be less then 60",
-            "send-period-pattern": "Statistic send period is not valid",
-            "check-connectors-configuration": "Check connectors configuration (in sec)",
-            "check-connectors-configuration-required": "Check connectors configuration is required",
-            "check-connectors-configuration-min": "Check connectors configuration can not be less then 1",
-            "check-connectors-configuration-pattern": "Check connectors configuration is not valid",
-            "add": "Add command",
-            "timeout": "Timeout",
-            "timeout-ms": "Timeout (in ms)",
-            "timeout-required": "Timeout is required",
-            "timeout-min": "Timeout can not be less then 1",
-            "timeout-pattern": "Timeout is not valid",
-            "attribute-name": "Attribute name",
-            "attribute-name-required": "Attribute name is required",
-            "command": "Command",
-            "command-required": "Command is required",
-            "remove": "Remove command"
-        },
-        "storage": "Składowanie",
-        "storage-max-file-records": "Maksymalna liczba rekordów w pliku",
-        "storage-max-files": "Maksymalna liczba plików",
-        "storage-max-files-min": "Minimalna liczba to 1.",
-        "storage-max-files-pattern": "Numer jest nieprawidłowy.",
-        "storage-max-files-required": "Numer jest wymagany.",
-        "storage-max-records": "Maksymalna liczba rekordów w pamięci",
-        "storage-max-records-min": "Minimalna liczba rekordów to 1.",
-        "storage-max-records-pattern": "Numer jest nieprawidłowy.",
-        "storage-max-records-required": "Maksymalna liczba rekordów jest wymagana.",
-        "storage-read-record-count": "Read record count in storage",
-        "storage-read-record-count-min": "Minimum number of records is 1.",
-        "storage-read-record-count-pattern": "Number is not valid.",
-        "storage-read-record-count-required": "Read record count is required.",
-        "storage-max-read-record-count": "Max read record count in storage",
-        "storage-max-read-record-count-min": "Minimum number of records is 1.",
-        "storage-max-read-record-count-pattern": "Number is not valid.",
-        "storage-max-read-record-count-required": "Max Read record count is required.",
-        "storage-data-folder-path": "Data folder path",
-        "storage-data-folder-path-required": "Data folder path is required.",
-        "storage-pack-size": "Maksymalny rozmiar pakietu wydarzeń",
-        "storage-pack-size-min": "Minimalna liczba to 1.",
-        "storage-pack-size-pattern": "Numer jest nieprawidłowy.",
-        "storage-pack-size-required": "Maksymalny rozmiar pakietu wydarzeń jest wymagany.",
-        "storage-path": "Ścieżka przechowywania",
-        "storage-path-required": "Ścieżka do przechowywania jest wymagana.",
-        "storage-type": "Typ składowania",
-        "storage-types": {
-            "file-storage": "Nośnik danych",
-            "memory-storage": "Przechowywanie pamięci",
-            "sqlite": "SQLITE"
-        },
-        "thingsboard": "ThingsBoard",
-        "general": "General",
-        "thingsboard-host": "Gospodarz ThingsBoard",
-        "thingsboard-host-required": "Host jest wymagany.",
-        "thingsboard-port": "Port ThingsBoard",
-        "thingsboard-port-max": "Maksymalny numer portu to 65535.",
-        "thingsboard-port-min": "Minimalny numer portu to 1.",
-        "thingsboard-port-pattern": "Port jest nieprawidłowy.",
-        "thingsboard-port-required": "Port jest wymagany.",
-        "tidy": "Uporządkuj",
-        "tidy-tip": "Uporządkowana konfiguracja JSON",
-        "title-connectors-json": "Złącze {{typeName}} konfiguracja",
-        "tls-path-ca-certificate": "Ścieżka do certyfikatu CA na gateway",
-        "tls-path-client-certificate": "Ścieżka do certyfikatu klienta na gateway",
-        "messages-ttl-check-in-hours": "Messages TTL check in hours",
-        "messages-ttl-check-in-hours-required": "Messages TTL check in hours is required.",
-        "messages-ttl-check-in-hours-min": "Min number is 1.",
-        "messages-ttl-check-in-hours-pattern": "Number is not valid.",
-        "messages-ttl-in-days": "Messages TTL in days",
-        "messages-ttl-in-days-required": "Messages TTL in days is required.",
-        "messages-ttl-in-days-min": "Min number is 1.",
-        "messages-ttl-in-days-pattern": "Number is not valid.",
-        "mqtt-qos": "QoS",
-        "mqtt-qos-required": "QoS is required",
-        "mqtt-qos-range": "QoS values range is from 0 to 1",
-        "tls-path-private-key": "Ścieżka do klucza prywatnego na bramce",
-        "toggle-fullscreen": "Przełącz tryb pełnoekranowy",
-        "transformer-json-config": "Konfiguracja JSON*",
-        "update-config": "Dodaj/zaktualizuj konfigurację JSON",
-        "hints": {
-            "remote-configuration": "Enables remote configuration and management of the gateway",
-            "remote-shell": "Enables remote control of the operating system with the gateway from the Remote Shell widget",
-            "host": "Hostname or IP address of ThingsBoard server",
-            "port": "Port of MQTT service on ThingsBoard server",
-            "token": "Access token for the gateway from ThingsBoard server",
-            "client-id": "MQTT client id for the gateway form ThingsBoard server",
-            "username": "MQTT username for the gateway form ThingsBoard server",
-            "password": "MQTT password for the gateway form ThingsBoard server",
-            "ca-cert": "Path to CA certificate file",
-            "date-form": "Date format in log message",
-            "data-folder": "Path to folder, that will contains data (Relative or Absolute)",
-            "log-format": "Log message format",
-            "remote-log": "Enables remote logging and logs reading from the gateway",
-            "backup-count": "If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",
-            "storage": "Provides configuration for saving incoming data before it is sent to the platform",
-            "max-file-count": "Maximum count of file that will be created",
-            "max-read-count": "Count of messages to get from storage and send to ThingsBoard",
-            "max-records": "Maximum count of records that will be stored in one file",
-            "read-record-count": "Count of messages to get from storage and send to ThingsBoard",
-            "max-records-count": "Maximum count of data in storage before send to ThingsBoard",
-            "ttl-check-hour": "How often will Gateway check data for obsolescence",
-            "ttl-messages-day": "Maximum days that storage will save data",
-            "commands": "Commands for collecting additional statistic",
-            "attribute": "Statistic telemetry key",
-            "timeout": "Timeout for command executing",
-            "command": "The result of the command execution, will be used as the value for telemetry",
-            "check-device-activity": "Enables monitor the activity of each connected device",
-            "inactivity-timeout": "Time after whose the gateway will disconnect device",
-            "inactivity-period": "Periodicity of device activity check",
-            "minimal-pack-delay": "Delay between sending packs of messages (Decreasing this setting results in increased CPU usage)",
-            "qos": "Quality of Service in MQTT messaging (0 - at most once, 1 - at least once)",
-            "server-port": "Network port on which GRPC server will listen for incoming connections.",
-            "grpc-keep-alive-timeout": "Maximum time the server should wait for a keepalive ping response before considering the connection dead.",
-            "grpc-keep-alive": "Duration between two successive keepalive ping messages when there is no active RPC call.",
-            "grpc-min-time-between-pings": "Minimum amount of time the server should wait between sending keepalive ping messages",
-            "grpc-max-pings-without-data": "Maximum number of keepalive ping messages that the server can send without receiving any data before it considers the connection dead.",
-            "grpc-min-ping-interval-without-data": "Minimum amount of time the server should wait between sending keepalive ping messages when there is no data being sent or received.",
-            "permit-without-calls": "Allow server to keep the GRPC connection alive even when there are no active RPC calls."
-        }
+        "no-gateway-matching": " '{{item}}' nie znaleziono."
     },
     "grid": {
         "delete-item-title": "Czy na pewno chcesz usunąć ten element?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-pt_BR.json b/ui-ngx/src/assets/locale/locale.constant-pt_BR.json
index de9baa3998..8b77be4573 100644
--- a/ui-ngx/src/assets/locale/locale.constant-pt_BR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-pt_BR.json
@@ -1260,78 +1260,15 @@
     "function": "Função"
   },
   "gateway": {
-    "add-entry": "Adicionar configuração",
-    "connector-add": "Adicionar novo conector",
-    "connector-enabled": "Habilitar conector",
-    "connector-name": "Nome do conector",
-    "connector-name-required": "O nome do conector é obrigatório.",
-    "connector-type": "Tipo de conector",
-    "connector-type-required": "O tipo de conector é obrigatório.",
-    "connectors": "Configuração de conectores",
     "create-new-gateway": "Criar um novo gateway",
     "create-new-gateway-text": "Tem certeza de que deseja criar um novo gateway com o nome: '{{gatewayName}}'?",
-    "delete": "Excluir configuração",
-    "download-tip": "Download de arquivo de configuração",
     "gateway": "Gateway",
     "gateway-exists": "Já existe um dispositivo com o mesmo nome.",
     "gateway-name": "Nome do gateway",
     "gateway-name-required": "O nome do gateway é obrigatório.",
     "gateway-saved": "A configuração do gateway foi salva corretamente.",
-    "json-parse": "JSON inválido.",
-    "json-required": "O campo não pode estar em branco.",
-    "no-connectors": "Sem conectores",
-    "no-data": "Sem configurações",
     "no-gateway-found": "Nenhum gateway encontrado.",
-    "no-gateway-matching": " '{{item}}' não encontrado.",
-    "path-logs": "Caminho para arquivos de log",
-    "path-logs-required": "O caminho é obrigatório",
-    "remote": "Configuração remota",
-    "remote-logging-level": "Nível de registro em log",
-    "remove-entry": "Remover configuração",
-    "save-tip": "Salvar arquivo de configuração",
-    "security-type": "Tipo de segurança",
-    "security-types": {
-      "access-token": "Token de Acesso",
-      "tls": "TLS"
-    },
-    "storage": "Armazenamento",
-    "storage-max-file-records": "Número máximo de registros em arquivo",
-    "storage-max-files": "Número máximo de arquivos",
-    "storage-max-files-min": "O número mínimo é 1.",
-    "storage-max-files-pattern": "O número não é válido.",
-    "storage-max-files-required": "O número é obrigatório.",
-    "storage-max-records": "Número máximo de registros em armazenamento",
-    "storage-max-records-min": "O número mínimo de registros é 1.",
-    "storage-max-records-pattern": "O número não é válido.",
-    "storage-max-records-required": "O número máximo de registros é obrigatório.",
-    "storage-pack-size": "Tamanho máximo de pacote de eventos",
-    "storage-pack-size-min": "O número mínimo é 1.",
-    "storage-pack-size-pattern": "O número não é válido.",
-    "storage-pack-size-required": "O tamanho máximo de pacote de eventos é obrigatório.",
-    "storage-path": "Caminho de armazenamento",
-    "storage-path-required": "O caminho de armazenamento é obrigatório.",
-    "storage-type": "Tipo de armazenamento",
-    "storage-types": {
-      "file-storage": "Armazenamento de arquivo",
-      "memory-storage": "Armazenamento de memória"
-    },
-    "thingsboard": "ThingsBoard",
-    "thingsboard-host": "Host ThingsBoard",
-    "thingsboard-host-required": "O host é obrigatório.",
-    "thingsboard-port": "Porta ThingsBoard",
-    "thingsboard-port-max": "O número máximo de portas é 65535.",
-    "thingsboard-port-min": "O número mínimo de portas é 1.",
-    "thingsboard-port-pattern": "A porta não é válida.",
-    "thingsboard-port-required": "A porta é obrigatória.",
-    "tidy": "Tidy",
-    "tidy-tip": "Config Tidy JSON",
-    "title-connectors-json": "Configuração do conector {{typeName}}",
-    "tls-path-ca-certificate": "Caminho para certificado de Autoridade de Certificação no gateway",
-    "tls-path-client-certificate": "Caminho para certificado de cliente no gateway",
-    "tls-path-private-key": "Caminho para chave privada no gateway",
-    "toggle-fullscreen": "Alternar tela inteira",
-    "transformer-json-config": "Configuração JSON*",
-    "update-config": "Adicionar/atualizar configuração de JSON"
+    "no-gateway-matching": " '{{item}}' não encontrado."
   },
   "grid": {
     "delete-item-title": "Tem certeza de que deseja excluir este item?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-sl_SI.json b/ui-ngx/src/assets/locale/locale.constant-sl_SI.json
index 0fab425e80..b705358124 100644
--- a/ui-ngx/src/assets/locale/locale.constant-sl_SI.json
+++ b/ui-ngx/src/assets/locale/locale.constant-sl_SI.json
@@ -1584,78 +1584,15 @@
     "function": "Funkcija"
   },
   "gateway": {
-    "add-entry": "Dodaj konfiguracijo",
-    "connector-add": "Dodaj nov priključek",
-    "connector-enabled": "Omogoči priključek",
-    "connector-name": "Ime priključka",
-    "connector-name-required": "Ime priključka je obvezno.",
-    "connector-type": "Vrsta priključka",
-    "connector-type-required": "Zahteva se vrsta priključka.",
-    "connectors": "Konfiguracija priključkov",
     "create-new-gateway": "Ustvari nov prehod",
     "create-new-gateway-text": "Ali ste prepričani, da želite ustvariti nov prehod z imenom: '{{gatewayName}}'?",
-    "delete": "Izbriši konfiguracijo",
-    "download-tip": "Prenos konfiguracijske datoteke",
     "gateway": "Prehod",
     "gateway-exists": "Naprava z istim imenom že obstaja.",
     "gateway-name": "Ime prehoda",
     "gateway-name-required": "Ime prehoda je obvezno.",
     "gateway-saved": "Konfiguracija prehoda je uspešno shranjena.",
-    "json-parse": "Neveljaven JSON.",
-    "json-required": "Polje ne sme biti prazno.",
-    "no-connectors": "Ni priključkov",
-    "no-data": "Brez konfiguracij",
     "no-gateway-found": "Prehod ni najden.",
-    "no-gateway-matching": " '{{item}}' ni mogoče najti.",
-    "path-logs": "Pot do dnevniških datotek",
-    "path-logs-required": "Pot je obvezna.",
-    "remote": "Oddaljena konfiguracija",
-    "remote-logging-level": "Raven beleženja",
-    "remove-entry": "Odstrani konfiguracijo",
-    "save-tip": "Shrani konfiguracijsko datoteko",
-    "security-type": "Vrsta zaščite",
-    "security-types": {
-      "access-token": "Dostopni žeton",
-      "tls": "TLS"
-    },
-    "storage": "Shramba",
-    "storage-max-file-records": "Največ zapisov v datoteki",
-    "storage-max-files": "Največje število datotek",
-    "storage-max-files-min": "Najmanjše število je 1.",
-    "storage-max-files-pattern": "Številka ni veljavna.",
-    "storage-max-files-required": "Številka je obvezna.",
-    "storage-max-records": "Največ zapisov v pomnilniku",
-    "storage-max-records-min": "Najmanjše število zapisov je 1.",
-    "storage-max-records-pattern": "Številka ni veljavna.",
-    "storage-max-records-required": "Zahtevan je največ zapisov.",
-    "storage-pack-size": "Največja velikost paketa dogodkov",
-    "storage-pack-size-min": "Najmanjše število je 1.",
-    "storage-pack-size-pattern": "Številka ni veljavna.",
-    "storage-pack-size-required": "Zahtevana je največja velikost paketa dogodkov.",
-    "storage-path": "Pot pomnilnika",
-    "storage-path-required": "Zahtevana je pot do pomnilnika.",
-    "storage-type": "Vrsta pomnilnika",
-    "storage-types": {
-      "file-storage": "Shramba datotek",
-      "memory-storage": "Spomin pomnilnika"
-    },
-    "thingsboard": "ThingsBoard",
-    "thingsboard-host": "Gostitelj ThingsBoard",
-    "thingsboard-host-required": "Potreben je gostitelj.",
-    "thingsboard-port": "Vrata ThingsBoard",
-    "thingsboard-port-max": "Največja številka vrat je 65535.",
-    "thingsboard-port-min": "Najmanjša številka vrat je 1.",
-    "thingsboard-port-pattern": "Vrata niso veljavna.",
-    "thingsboard-port-required": "Potrebna so vrata.",
-    "tidy": "Urejeno",
-    "tidy-tip": "Urejena konfiguracija JSON",
-    "title-connectors-json": "Konfiguracija konektorja {{typeName}}",
-    "tls-path-ca-certificate": "Pot do potrdila CA na prehodu",
-    "tls-path-client-certificate": "Pot do potrdila stranke na prehodu",
-    "tls-path-private-key": "Pot do zasebnega ključa na prehodu",
-    "toggle-fullscreen": "Preklop na celozaslonski način",
-    "transformer-json-config": "Konfiguracija JSON *",
-    "update-config": "Dodaj / posodobi konfiguracijo JSON"
+    "no-gateway-matching": " '{{item}}' ni mogoče najti."
   },
   "grid": {
     "delete-item-title": "Ali ste prepričani, da želite izbrisati ta element?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json
index b01c3548ab..175d4f1b02 100644
--- a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json
@@ -2039,78 +2039,15 @@
     "function": "Fonksiyon"
   },
   "gateway": {
-    "add-entry": "Yapılandırma ekle",
-    "connector-add": "Yeni bağlayıcı ekle",
-    "connector-enabled": "Bağlayıcıyı etkinleştir",
-    "connector-name": "Bağlayıcı adı",
-    "connector-name-required": "Bağlayıcı adı gerekli.",
-    "connector-type": "Bağlayıcı tipi",
-    "connector-type-required": "Bağlayıcı türü gerekli.",
-    "connectors": "Bağlayıcıların yapılandırması",
-    "create-new-gateway": "Yeni bir ağ geçidi oluştur",
-    "create-new-gateway-text": "'{{gatewayName}}' adında yeni bir ağ geçidi oluşturmak istediğinizden emin misiniz?",
-    "delete": "Yapılandırmayı sil",
-    "download-tip": "Yapılandırma dosyasını indirin",
-    "gateway": "Ağ geçidi",
     "gateway-exists": "Aynı ada sahip cihaz zaten var.",
     "gateway-name": "Ağ geçidi adı",
     "gateway-name-required": "Ağ geçidi adı gerekli.",
     "gateway-saved": "Ağ geçidi yapılandırması başarıyla kaydedildi.",
-    "json-parse": "Geçerli bir JSON değil.",
-    "json-required": "Alan boş olamaz.",
-    "no-connectors": "Bağlayıcı yok",
-    "no-data": "Yapılandırma yok",
+    "gateway": "Ağ geçidi",
+    "create-new-gateway": "Yeni bir ağ geçidi oluştur",
+    "create-new-gateway-text": "'{{gatewayName}}' adında yeni bir ağ geçidi oluşturmak istediğinizden emin misiniz?",
     "no-gateway-found": "Ağ geçidi bulunamadı.",
-    "no-gateway-matching": " '{{item}}' bulunamadı.",
-    "path-logs": "Log dosyaları yolu",
-    "path-logs-required": "Log dosyaları dizini gerekli.",
-    "remote": "Uzaktan yapılandırma",
-    "remote-logging-level": "Loglama seviyesi",
-    "remove-entry": "Yapılandırmayı kaldır",
-    "save-tip": "Yapılandırma dosyasını kaydet",
-    "security-type": "Güvenlik türü",
-    "security-types": {
-      "access-token": "Access Token",
-      "tls": "TLS"
-    },
-    "storage": "Depolama",
-    "storage-max-file-records": "Dosyadaki maksimum kayıt",
-    "storage-max-files": "Maksimum dosya sayısı",
-    "storage-max-files-min": "Minimum sayı 1'dir.",
-    "storage-max-files-pattern": "Sayı geçerli değil.",
-    "storage-max-files-required": "Sayı gerekli.",
-    "storage-max-records": "Depodaki maksimum kayıt",
-    "storage-max-records-min": "Minimum kayıt sayısı 1'dir.",
-    "storage-max-records-pattern": "Sayı geçerli değil.",
-    "storage-max-records-required": "Maksimum kayıt gerekli.",
-    "storage-pack-size": "Maksimum etkinlik paketi boyutu",
-    "storage-pack-size-min": "Minimum sayı 1'dir.",
-    "storage-pack-size-pattern": "Sayı geçerli değil.",
-    "storage-pack-size-required": "Maksimum etkinlik paketi boyutu gerekli.",
-    "storage-path": "Depolama yolu",
-    "storage-path-required": "Depolama yolu gerekli.",
-    "storage-type": "Depolama türü",
-    "storage-types": {
-      "file-storage": "Dosya depolama",
-      "memory-storage": "Bellek depolama"
-    },
-    "thingsboard": "ThingsBoard",
-    "thingsboard-host": "ThingsBoard host",
-    "thingsboard-host-required": "Host gerekli.",
-    "thingsboard-port": "ThingsBoard port",
-    "thingsboard-port-max": "Maksimum port numarası 65535.",
-    "thingsboard-port-min": "Minimum port numarası 1'dir.",
-    "thingsboard-port-pattern": "Port geçerli değil.",
-    "thingsboard-port-required": "Port gerekli.",
-    "tidy": "Tidy",
-    "tidy-tip": "Tidy config JSON",
-    "title-connectors-json": "Connector {{typeName}} configuration",
-    "tls-path-ca-certificate": "Path to CA certificate on gateway",
-    "tls-path-client-certificate": "Path to client certificate on gateway",
-    "tls-path-private-key": "Path to private key on gateway",
-    "toggle-fullscreen": "Toggle fullscreen",
-    "transformer-json-config": "Configuration JSON*",
-    "update-config": "Add/update configuration JSON"
+    "no-gateway-matching": " '{{item}}' bulunamadı."
   },
   "grid": {
     "delete-item-title": "Bu öğeyi silmek istediğinizden emin misiniz?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
index 2e3f3e0355..ac302a78bb 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
@@ -84,9 +84,9 @@
     },
     "aggregation": {
         "aggregation": "聚合",
-        "function": "数据聚合功能",
+        "function": "聚合功能",
         "limit": "限制数",
-        "group-interval": "分组间隔",
+        "group-interval": "间隔",
         "min": "最小值",
         "max": "最大值",
         "avg": "平均值",
@@ -110,15 +110,6 @@
         "prohibit-different-url-hint": "应为生产环境启用此设置。禁用时可能会导致安全问题",
         "device-connectivity": {
             "device-connectivity": "设备连接",
-            "http-s": "HTTP(s)",
-            "mqtt-s": "MQTT(s)",
-            "coap-s": "COAP(s)",
-            "http": "HTTP",
-            "https": "HTTPs",
-            "mqtt": "MQTT",
-            "mqtts": "MQTTs",
-            "coap": "COAP",
-            "coaps": "COAPs",
             "hint": "如果主机或端口字段为空，将使用默认的协议值。",
             "host": "主机",
             "port": "端口",
@@ -153,8 +144,6 @@
         "sms-provider-type": "SMS 服务商类型",
         "sms-provider-type-required": "SMS 服务商类型必填。",
         "sms-provider-type-aws-sns": "亚马逊社交网站",
-        "sms-provider-type-twilio": "Twilio",
-        "sms-provider-type-smpp": "SMPP",
         "aws-access-key-id": "AWS访问密钥ID",
         "aws-access-key-id-required": "需要访问AWS密钥ID",
         "aws-secret-access-key": "AWS秘密访问密钥",
@@ -183,6 +172,9 @@
         "minimum-password-length": "最小密码长度",
         "minimum-password-length-required": "最小密码长度必填",
         "minimum-password-length-range": "最小密码长度应在5到50之间",
+        "maximum-password-length": "密码最大长度",
+        "maximum-password-length-min": "密码最大长度应至少为6个字符",
+        "maximum-password-length-less-min": "密码最大长度应大于最小长度",
         "minimum-uppercase-letters": "最少大写字母位数",
         "minimum-uppercase-letters-range": "最少大写字母位数不能为负数",
         "minimum-lowercase-letters": "最少小写字母位数",
@@ -195,105 +187,135 @@
         "password-expiration-period-days-range": "密码过期期限（天）不能为负",
         "password-reuse-frequency-days": "密码重用频率（天）",
         "password-reuse-frequency-days-range": "天内密码重用频率不能为负",
-        "allow-whitespace": "Allow whitespace",
+        "force-reset-password-if-no-valid": "如果密码不可用则强制重置密码",
+        "force-reset-password-if-no-valid-hint": "启用此功能时请小心：它会要求使用不可用密码的用户通过电子邮件重置其密码。",
         "general-policy": "基本策略",
         "max-failed-login-attempts": "登录失败之前的最大登录尝试次数",
         "minimum-max-failed-login-attempts-range": "登录失败次数不能为负数",
         "user-lockout-notification-email": "如果用户帐户锁定，请发送通知到电子邮件",
+        "user-activation-token-ttl": "用户激活链接在1小时内",
+        "user-activation-token-ttl-range": "用户激活链接必须在1到24小时范围内",
+        "password-reset-token-ttl": "密码重置链接1小时内",
+        "password-reset-token-ttl-range": "密码重置链接必须在1到24小时内",
+        "mobile-secret-key-length": "移动端密钥长度",
+        "mobile-secret-key-length-range": "移动端密钥长度范围",
         "domain-name": "域名",
         "domain-name-unique": "域名和协议必须是唯一的。",
-        "domain-name-max-length": "域名应该少于256个字符。",
+        "domain-name-max-length": "域名应该小于256个字符。",
         "error-verification-url": "域名不应包含符号 “/” 和 “:”。例：thingsboard.io",
         "connection-settings": "连接设置",
         "oauth2": {
             "access-token-uri": "访问令牌URI",
-            "access-token-uri-required": "访问令牌 URI 必填。",
+            "access-token-uri-required": "访问令牌URI必填。",
             "activate-user": "激活用户",
             "add-domain": "添加域",
             "delete-domain": "删除域",
-            "add-provider": "添加 Provider",
-            "delete-provider": "删除 Provider",
+            "add-provider": "添加Provider",
+            "delete-provider": "删除Provider",
             "allow-user-creation": "允许用户创建",
             "always-fullscreen": "始终全屏",
             "authorization-uri": "授权URI",
-            "authorization-uri-required": "授权 URI 必填。",
+            "authorization-uri-required": "授权URI必填。",
+            "add-client": "添加OAuth2.0客户端",
+            "client-details": "OAuth2.0客户端详情",
+            "client": "OAuth2.0客户端",
+            "clients": "OAuth2.0客户端",
+            "no-oauth2-clients": "未找到OAuth2.0客户端",
+            "search-oauth2-clients": "搜索OAuth2.0客户端",
+            "delete-client-title": "您确定要删除OAuth2.0客户端'{{clientName}}'？",
+            "delete-client-text": "请注意，确认后客户端和所有相关数据将无法恢复。",
+            "delete-mobile-app-title": "您确定要删除移动应用程序'{{applicationName}}'？",
+            "delete-mobile-app-text": "请小心，确认后移动应用程序和所有相关数据将变得无法恢复。",
+            "title": "标题",
+            "client-title-required": "标题是必填项。",
+            "client-title-max-length": "标题长度应该小于100个字符。",
+            "advanced-settings": "高级设置",
+            "domain-details": "域名详情",
+            "no-domains": "未找到域名",
+            "search-domains": "搜索域名",
+            "mobile-app-details": "移动端详细信息",
+            "add-mobile-app": "添加应用程序",
+            "no-mobile-apps": "未配置应用程序",
+            "search-mobile-apps": "搜索移动端",
+            "send-token": "发送令牌",
+            "create-new": "创建",
             "client-authentication-method": "客户端身份验证方法",
             "client-id": "客户端ID",
             "client-id-required": "客户端 ID 必填。",
-            "client-id-max-length": "客户端ID应该少于256个字符。",
+            "client-id-max-length": "客户端ID应该小于256个字符。",
             "client-secret": "客户机密",
             "client-secret-required": "需要客户端密码。",
-            "client-secret-max-length": "客户端密钥应该少于2049个字符。",
+            "client-secret-max-length": "客户端密钥应该小于2049个字符。",
             "custom-setting": "自定义设置",
             "customer-name-pattern": "客户名称模式",
-            "customer-name-pattern-max-length": "客户名称模式应该少于256个字符。",
+            "customer-name-pattern-max-length": "客户名称模式应该小于256个字符。",
             "default-dashboard-name": "默认仪表板名称",
-            "default-dashboard-name-max-length": "默认仪表板名称应该少于256个字符。",
-            "delete-domain-text": "请注意：确认后，域和所有 provider data 将不可恢复。",
-            "delete-domain-title": "确定要删除域 '{{domainName}}' 的设置吗？",
-            "delete-registration-text": "请注意：确认后 provider data 将不可恢复。",
-            "delete-registration-title": "确定要删除  provider '{{name}}' 吗？",
+            "default-dashboard-name-max-length": "默认仪表板名称应该小于256个字符。",
+            "delete-domain-text": "请注意：确认后域名和所有提供商数据将不可恢复。",
+            "delete-domain-title": "确定要删除域'{{domainName}}'的设置吗？",
+            "delete-registration-text": "请注意：确认后提供商数据将不可恢复。",
+            "delete-registration-title": "确定要删除'{{name}}'提供商吗？",
             "email-attribute-key": "电子邮件属性键",
             "email-attribute-key-required": "电子邮件属性键必填。",
-            "email-attribute-key-max-length": "电子邮件属性键应该少于32个字符。",
-            "first-name-attribute-key": "名字属性键",
-            "first-name-attribute-key-max-length": "名字属性键应该少于32个字符。",
+            "email-attribute-key-max-length": "电子邮件属性键应该小于32个字符。",
+            "first-name-attribute-key": "First属性名称",
+            "first-name-attribute-key-max-length": "First属性名称应该小于32个字符。",
             "general": "基本设置",
-            "jwk-set-uri": "JSON Web Key URI",
-            "last-name-attribute-key": "姓氏属性键",
-            "last-name-attribute-key-max-length": "姓氏属性键应该少于32个字符。",
+            "jwk-set-uri": "JSON Web地址",
+            "last-name-attribute-key": "Last属性名称",
+            "last-name-attribute-key-max-length": "Last属性名称应该小于32个字符。",
             "login-button-icon": "登录按钮图标",
-            "login-button-label": "Provider 标签",
-            "login-button-label-placeholder": "使用 $(Provider label) 登录",
+            "login-button-label": "标签",
+            "login-button-label-placeholder": "使用$(Provider label)登录",
             "login-button-label-required": "标签必填。",
-            "login-provider": "Login provider",
-            "mapper": "Mapper",
-            "new-domain": "新建域",
-            "oauth2": "OAuth2",
-            "password-max-length": "密码应该少于256个字符。",
+            "login-provider": "登录提供商",
+            "mapper": "映射",
+            "new-domain": "新建",
+            "password-max-length": "密码应该小于256个字符。",
             "redirect-uri-template": "重定向URI模板",
             "copy-redirect-uri": "复制重定向URI",
             "registration-id": "注册ID",
-            "registration-id-required": "注册 ID 必填。",
+            "registration-id-required": "注册ID必填。",
             "registration-id-unique": "系统的注册ID必须是唯一的。",
             "scope": "范围",
             "scope-required": "范围必填。",
             "tenant-name-pattern": "租户名称模式",
             "tenant-name-pattern-required": "租户名称模式必填。",
-            "tenant-name-pattern-max-length": "租户名称模式应该少于256个字符。",
+            "tenant-name-pattern-max-length": "租户名称模式应该小于256个字符。",
             "tenant-name-strategy": "租户名称策略",
             "type": "映射器类型",
             "uri-pattern-error": "无效的URI格式。",
             "url": "统一资源定位地址",
             "url-pattern": "无效的URL格式。",
-            "url-required": "URL 必填。",
-            "url-max-length": "URL 应该少于256个字符。",
+            "url-required": "URL必填。",
+            "url-max-length": "URL应该小于256个字符。",
             "user-info-uri": "用户信息URI",
-            "user-info-uri-required": "用户信息 URI 必填。",
-            "username-max-length": "用户名应该少于256个字符。",
+            "user-info-uri-required": "用户信息URI必填。",
+            "username-max-length": "用户名应该小于256个字符。",
             "user-name-attribute-name": "用户名属性键",
             "user-name-attribute-name-required": "用户名属性密钥必填",
             "protocol": "协议",
-            "domain-schema-http": "HTTP",
-            "domain-schema-https": "HTTPS",
-            "domain-schema-mixed": "HTTP+HTTPS",
-            "enable": "启用OAuth2设置",
+            "enable": "启用OAuth2.0设置",
+            "disable": "禁用OAuth2.0设置",
+            "edge-enable": "启用Edge",
+            "edge-disable": "禁用Edge",
             "domains": "域名",
             "mobile-apps": "移动端应用",
-            "no-mobile-apps": "未配置应用程序",
             "mobile-package": "应用程序包",
             "mobile-package-placeholder": "例如: my.example.app",
-            "mobile-package-hint": "Android:应用程序ID，iOS:产品标识符",
+            "mobile-package-hint": "Android:应用程序ID或iOS:产品标识符",
             "mobile-package-unique": "应用程序包必须是唯一的。",
+            "mobile-package-max-length": "应用程序包应小于256。",
+            "mobile-package-spaces": "应用程序包不应包含空间。",
             "mobile-app-secret": "应用程序密钥",
+            "mobile-app-secret-hint": "BASE64编码字符串不少于512位数据。",
+            "mobile-app-secret-required": "应用程序密钥必填。",
+            "mobile-app-secret-min-length": "应用程序密钥不少于512位数据。",
+            "mobile-app-secret-base64": "应用程序密钥必须为base64格式。",
             "invalid-mobile-app-secret": "应用程序密钥必须只包含字母和数字字符，并且长度必须介于16到2048个字符之间。",
             "copy-mobile-app-secret": "复制应用程序密钥",
-            "add-mobile-app": "添加应用程序",
             "delete-mobile-app": "删除应用程序信息",
             "providers": "供应商",
-            "platform-web": "Web",
-            "platform-android": "Android",
-            "platform-ios": "iOS",
             "all-platforms": "所有平台",
             "smtp-provider": "SMTP提供商",
             "allowed-platforms": "允许的平台",
@@ -302,6 +324,7 @@
             "provider": "提供商",
             "redirect-url": "重定向URL",
             "domain-name": "域名",
+            "domain-name-required": "域名必填",
             "redirect-url-template": "重定向URL模板",
             "microsoft-tenant-id": "目录（租户）ID",
             "microsoft-tenant-id-required": "需要目录（租户）ID",
@@ -309,8 +332,6 @@
             "token-uri-required": "需要令牌URI",
             "redirect-uri": "重定向URI",
             "google-provider": "谷歌",
-            "microsoft-provider": "Office 365",
-            "sendgrid-provider": "Sendgrid",
             "custom-provider": "自定义",
             "generate-access-token": "生成访问令牌",
             "update-access-token": "更新访问令牌",
@@ -367,10 +388,6 @@
             "scheme-octet-unspecified-2": "2 - 八进制未指定 (8 位二进制)",
             "scheme-latin-1": "3 - Latin 1 (ISO-8859-1)",
             "scheme-octet-unspecified-4": "4 - 八进制未指定 (8 位二进制)",
-            "scheme-jis": "5 - JIS (X 0208-1990)",
-            "scheme-cyrillic": "6 - Cyrillic (ISO-8859-5)",
-            "scheme-latin-hebrew": "7 - Latin/Hebrew (ISO-8859-8)",
-            "scheme-ucs-utf": "8 - UCS2/UTF-16 (ISO/IEC-10646)",
             "scheme-pictogram-encoding": "9 - 图标编码",
             "scheme-music-codes": "10 - 音乐编码 (ISO-2022-JP)",
             "scheme-extended-kanji-jis": "13 - 扩展汉字 JIS (X 0212-1990)",
@@ -413,6 +430,36 @@
         "no-auto-commit-entities-prompt": "没有设置自动提交的实体",
         "delete-auto-commit-settings-title": "确定要删除自动提交设置吗？",
         "delete-auto-commit-settings-text": "请注意：确认后，自动提交设置将被删除，所有实体的自动提交将被禁用。",
+        "mobile-app": {
+            "mobile-app": "移动应用",
+            "mobile-app-qr-code-widget-settings": "移动应用二维码部件设置",
+            "applications": "应用程序",
+            "default": "默认",
+            "custom": "自定义",
+            "app-package-name": "应用程序包名称",
+            "app-package-name-required": "应用程序包名称必填",
+            "sha256-certificate-fingerprints": "SHA256证书指纹",
+            "sha256-certificate-fingerprints-required": "SHA256证书指纹必填",
+            "app-id-required": "App ID必填",
+            "google-play-link": "Google Play链接",
+            "google-play-link-required": "Google Play链接必填",
+            "app-store-link": "App Store链接",
+            "app-store-link-required": "App Store链接",
+            "appearance": "外观",
+            "appearance-on-home-page": "外观显示在首页",
+            "enabled": "启用",
+            "disabled": "禁用",
+            "badges": "徽章",
+            "label": "标签",
+            "label-required": "标签必填。",
+            "label-max-length": "标签应小于或等于50个字符",
+            "right": "右侧",
+            "left": "左侧",
+            "set": "设置",
+            "preview": "预览",
+            "connect-mobile-app": "连接移动端",
+            "use-system-settings": "使用系统设置"
+        },
         "2fa": {
             "2fa": "双因素认证",
             "available-providers": "可用选项",
@@ -451,7 +498,7 @@
             "issuer-name": "发行者名称",
             "issuer-name-required": "发行者名称必填。",
             "signings-key": "签名密钥",
-            "signings-key-hint": "Base64编码的字符串，至少512位数据。",
+            "signings-key-hint": "Base64编码的字符串至少512位数据。",
             "signings-key-required": "签名密钥必填。",
             "signings-key-min-length": "签名密钥必须至少为512位的数据。",
             "signings-key-base64": "签名密钥必须是Base64格式。",
@@ -472,20 +519,17 @@
         "notifications": "通知",
         "notifications-settings": "通知设置",
         "slack-api-token": "Slack API令牌",
-        "slack": "Slack",
-        "slack-settings": "Slack 设置",
-        "maximum-password-length": "密码最大长度",
-        "maximum-password-length-min": "密码最大长度应至少为6个字符",
-        "maximum-password-length-less-min": "密码最大长度应大于最小长度",
-        "force-reset-password-if-no-valid": "如果密码不可用则强制重置密码",
-        "force-reset-password-if-no-valid-hint": "启用此功能时请小心：它会要求使用不可用密码的用户通过电子邮件重置其密码。"
+        "slack-settings": "Slack设置",
+        "mobile-settings": "移动设置",
+        "firebase-service-account-file": "Firebase服务帐户JSON凭据文件",
+        "select-firebase-service-account-file": "拖放Firebase服务帐户凭据文件"
     },
     "alarm": {
         "alarm": "告警",
         "alarms": "告警",
         "all-alarms": "所有告警",
         "select-alarm": "选择告警",
-        "no-alarms-matching": "未找到匹配 '{{entity}}' 的告警",
+        "no-alarms-matching": "未找到匹配'{{entity}}'的告警",
         "alarm-required": "告警必填",
         "alarm-filter": "告警筛选器",
         "filter": "筛选器",
@@ -634,6 +678,7 @@
         "filter-type-edge-search-query-description": "类型为 {{edgeTypes}} 且具有 {{relationType}} 关联 {{direction}} {{rootEntity}} 的边缘",
         "entity-filter": "实体筛选器",
         "resolve-multiple": "解析为多实体",
+        "resolve-multiple-hint": "启用所有过滤实体的数据同时渲染，\n如果禁用部件仅显示来自选定实体的数据。",
         "filter-type": "筛选器类型",
         "filter-type-required": "筛选器类型必填。",
         "entity-filter-no-entity-matched": "未找到匹配指定筛选条件的实体。",
@@ -674,7 +719,7 @@
         "select-asset-type": "选择资产类型",
         "enter-asset-type": "输入资产类型",
         "any-asset": "任何资产",
-        "no-asset-types-matching": "未找到匹配 '{{entitySubtype}}' 的资产类型。",
+        "no-asset-types-matching": "未找到匹配'{{entitySubtype}}'的资产类型。",
         "asset-type-list-empty": "资产类型未选择。",
         "asset-types": "资产类型",
         "name": "名称",
@@ -740,6 +785,11 @@
         "scope-client": "客户端属性",
         "scope-server": "服务端属性",
         "scope-shared": "共享属性",
+        "scope-client-short": "客户端",
+        "scope-server-short": "服务端",
+        "scope-shared-short": "共享",
+        "scope-latest-short": "最新",
+        "scope-any": "任意",
         "add": "添加属性",
         "key": "键名",
         "key-max-length": "键应该小于256个字符。",
@@ -795,13 +845,10 @@
         "email-messages-monthly-activity": "每月产生的邮件消息",
         "exceptions": "异常",
         "executions": "执行数",
-        "scripts": "Scripts",
         "scripts-hourly-activity": "脚本每小时活动",
         "scripts-daily-activity": "脚本每日活动",
         "scripts-monthly-activity": "脚本每月活动",
-        "javascript": "JavaScript",
         "javascript-executions": "JavaScript 执行数",
-        "tbel": "TBEL",
         "tbel-executions": "TBEL 执行数",
         "latest-error": "最新错误",
         "messages": "消息",
@@ -842,16 +889,22 @@
         "view-statistics": "查看统计信息"
     },
     "api-limit": {
-        "cassandra-queries": "Cassandra查询次数",
-        "entity-version-creation": "实体版本创建次数",
-        "entity-version-load": "实体版本加载次数",
-        "notification-requests": "通知请求次数",
-        "notification-requests-per-rule": "每个规则的通知请求次数",
+        "cassandra-queries": "Cassandra查询",
+        "entity-version-creation": "实体版本创建",
+        "entity-version-load": "实体版本加载",
+        "notification-requests": "通知请求",
+        "notification-requests-per-rule": "每个规则的通知请求",
         "rest-api-requests": "REST API请求次数",
-        "rest-api-requests-per-customer": "每个客户的REST API请求次数",
+        "rest-api-requests-per-customer": "每个客户的REST API请求",
         "transport-messages": "传输消息次数",
-        "transport-messages-per-device": "每个设备的传输消息次数",
-        "ws-updates-per-session": "每个会话的WS更新次数"
+        "transport-messages-per-device": "每个设备的传输消息",
+        "transport-messages-per-gateway": "每个网关的传输消息",
+        "transport-messages-per-gateway-device": "每个网关设备传输消息",
+        "ws-updates-per-session": "每个会话的WS更新",
+        "edge-events": "Edge事件",
+        "edge-events-per-edge": "Edge事件",
+        "edge-uplink-messages": "Edge上行",
+        "edge-uplink-messages-per-edge": "Edge下行"
     },
     "audit-log": {
         "audit": "审计",
@@ -883,6 +936,7 @@
         "type-relations-delete": "删除所有关联",
         "type-alarm-ack": "已确认",
         "type-alarm-clear": "已清除",
+        "type-alarm-delete": "Alarm deleted",
         "type-alarm-assign": "已分配",
         "type-alarm-unassign": "未分配",
         "type-added-comment": "添加评论",
@@ -914,6 +968,7 @@
     },
     "contact": {
         "country": "国家",
+        "country-required": "国家必填。",
         "city": "城市",
         "state": "省份",
         "postal-code": "邮政编码",
@@ -923,6 +978,8 @@
         "phone": "手机号码",
         "email": "电子邮件",
         "no-address": "无地址",
+        "no-country-found": "未找不到国家。",
+        "no-country-matching": "未匹配到'{{country}}'。",
         "state-max-length": "省份长度应该小于256个字符",
         "phone-max-length": "手机号码长度应该小于256个字符",
         "city-max-length": "城市应该小于256个字符"
@@ -942,8 +999,8 @@
     },
     "content-type": {
         "json": "Json",
-        "text": "Text",
-        "binary": "Binary (Base64)"
+        "text": "文本",
+        "binary": "二进制(Base64)"
     },
     "customer": {
         "customer": "客户",
@@ -991,7 +1048,7 @@
         "copyId": "复制客户ID",
         "idCopiedMessage": "客户ID已复制到粘贴板",
         "select-customer": "选择客户",
-        "no-customers-matching": "未找到匹配 '{{entity}}' 的客户。",
+        "no-customers-matching": "未找到匹配'{{entity}}'的客户。",
         "customer-required": "客户必填",
         "select-default-customer": "选择默认的客户",
         "default-customer": "默认客户",
@@ -1001,18 +1058,33 @@
         "edges": "客户边缘实例",
         "manage-edges": "管理边缘"
     },
+    "css-size": {
+        "size-value-required": "尺寸值必填。",
+        "invalid-size-value": "尺寸值无效"
+    },
     "date": {
         "last-update-n-ago": "N分钟前的最后更新",
         "last-update-n-ago-text": "最后更新{{ agoText }}",
         "custom-date": "自定义日期",
         "format": "格式",
-        "preview": "预览"
+        "preview": "预览",
+        "auto": "自动",
+        "time-granularity-formats": "时间格式",
+        "unit-year": "年",
+        "unit-month": "月",
+        "unit-day": "日",
+        "unit-hour": "时",
+        "unit-minute": "分",
+        "unit-second": "秒",
+        "unit-millisecond": "毫秒"
     },
     "datetime": {
         "date-from": "开始日期",
         "time-from": "开始时间",
         "date-to": "结束日期",
-        "time-to": "结束时间"
+        "time-to": "结束时间",
+        "from": "从",
+        "to": "到"
     },
     "dashboard": {
         "dashboard": "仪表板",
@@ -1050,7 +1122,7 @@
         "select-widget-subtitle": "可用的部件类型列表",
         "delete": "删除仪表板",
         "title-required": "标题必填。",
-        "title-max-length": "标题应该少于256个字符。",
+        "title-max-length": "标题应该小于256个字符。",
         "description": "说明",
         "details": "详情",
         "dashboard-details": "仪表板详情",
@@ -1097,10 +1169,21 @@
         "maximum-upload-file-size": "最大上传文件大小: {{ size }}",
         "cannot-upload-file": "无法上传文件",
         "settings": "设置",
+        "move-all-widgets": "移动所有部件",
+        "move-by": "移动",
+        "cols": "列",
+        "rows": "行",
+        "layout": "布局",
+        "layout-type-default": "默认",
+        "layout-type-scada": "SCADA",
+        "layout-type-divider": "分隔线",
+        "layout-settings-type": "布局设置:{{ type }}",
         "columns-count": "列数",
         "columns-count-required": "需要列数。",
         "min-columns-count-message": "只允许最少10列",
         "max-columns-count-message": "只允许最多1000列",
+        "min-layout-width": "最小布局宽度",
+        "columns-suffix": "列",
         "widgets-margins": "部件间边距",
         "margin-required": "边距值必填。",
         "min-margin-message": "最小边距值只允许为0。",
@@ -1120,6 +1203,11 @@
         "mobile-row-height-required": "移动端行高距必填。",
         "min-mobile-row-height-message": "移动端行高距至少5px。",
         "max-mobile-row-height-message": "移动端行高距最多200px。",
+        "row-height": "行高",
+        "row-height-required": "行高必填。",
+        "min-row-height-message": "仅允许5个像素作为最小行高值。",
+        "max-row-height-message": "仅允许200个像素作为最大行高值。",
+        "display-first-in-mobile-view": "优先在移动视图中显示",
         "title-settings": "标题设置",
         "display-title": "显示仪表板标题",
         "title-color": "标题颜色",
@@ -1185,6 +1273,7 @@
         "hide-details": "隐藏详情",
         "select-state": "选择目标状态",
         "state-controller": "状态控制",
+        "state-controller-default": "静态（已弃用）",
         "search": "查找仪表板",
         "selected-dashboards": "已选择 { count, plural, =1 {1 个仪表盘} other {# 个仪表盘} }",
         "home-dashboard": "首页仪表板",
@@ -1196,8 +1285,19 @@
         "assign-dashboard-to-edge-text": "请选择要分配给边缘的仪表板",
         "non-existent-dashboard-state-error": "找不到ID为 '{{ stateId }}' 的仪表板状态。",
         "edit-mode": "编辑模式",
-        "state-controller-default": "静态（已弃用）",
-        "duplicate-state-action": "复制状态"
+        "duplicate-state-action": "复制状态",
+        "breakpoint-value": "断点({{ value }})",
+        "breakpoints-id": {
+            "default": "默认",
+            "xs": "xs",
+            "sm": "sm",
+            "md": "md",
+            "lg": "lg",
+            "xl": "xl"
+        },
+        "view-format-type-grid": "网格",
+        "view-format-type-list": "列表",
+        "view-format": "类型"
     },
     "datakey": {
         "settings": "设置",
@@ -1368,7 +1468,7 @@
         "lwm2m-security-config": {
             "identity": "客户端身份",
             "identity-required": "需要提供客户端身份。",
-            "identity-tooltip": "PSK 标识符是一个任意的 PSK 标识符，最多可以为 128 字节，如标准 [RFC7925] 中所述。\nPSK 标识符必须首先转换为字符字符串，然后使用 UTF-8 编码成八位字节。",
+            "identity-tooltip": "PSK 标识符是一个任意的 PSK 标识符，最多可以为 128 字节，如标准 [RFC7925] 中所述。",
             "client-key": "客户端密钥",
             "client-key-required": "需要提供客户端密钥。",
             "client-key-tooltip-prk": "RPK 公钥或 ID 必须符合标准 [RFC7250] 并编码为 Base64 格式！",
@@ -1380,10 +1480,6 @@
             "client-public-key-tooltip": "X509 公钥必须采用 DER 编码的 X509v3 格式，并且仅支持 EC 算法，然后编码为 Base64 格式！",
             "mode": "安全配置模式",
             "client-tab": "客户端安全配置",
-            "client-certificate": "客户端证书",
-            "bootstrap-tab": "Bootstrap Client",
-            "bootstrap-server": "Bootstrap Server",
-            "lwm2m-server": "LwM2M Server",
             "client-publicKey-or-id": "客户端公钥或ID",
             "client-publicKey-or-id-required": "客户端公钥或ID必填。",
             "client-publicKey-or-id-tooltip-psk": "SK标识符是最多128字节，如标准[RFC7925]所述。",
@@ -1488,7 +1584,7 @@
         "set-default": "设为默认资产配置",
         "delete": "删除资产配置",
         "copyId": "复制资产配置ID",
-        "name-max-length": "名称长度必须少于256个字符",
+        "name-max-length": "名称长度必须小于256个字符",
         "new-device-profile-name": "资产配置名称",
         "new-device-profile-name-required": "资产配置名称必填。",
         "name": "名称",
@@ -1533,7 +1629,7 @@
         "set-default": "设为默认设备配置",
         "delete": "删除设备配置",
         "copyId": "复制设备配置 ID",
-        "name-max-length": "名称长度必须少于256个字符",
+        "name-max-length": "名称长度必须小于256个字符",
         "name": "名称",
         "name-required": "名称是必需的。",
         "type": "配置类型",
@@ -1563,11 +1659,11 @@
         "mobile-dashboard": "移动端仪表板",
         "mobile-dashboard-hint": "被移动端应用用作设备详情仪表板",
         "select-queue-hint": "从下拉列表中选择或添加自定义名称。",
-        "delete-device-profile-title": "确定要删除 '{{deviceProfileName}}' 设备配置吗？",
+        "delete-device-profile-title": "确定要删除'{{deviceProfileName}}'设备配置吗？",
         "delete-device-profile-text": "请注意：确认后，设备配置和所有相关数据将不可恢复。",
         "delete-device-profiles-title": "确定要删除 { count, plural, =1 {1 个设备配置} other {# 个设备配置} }吗？",
         "delete-device-profiles-text": "请注意：确认后，所有选定的设备配置将被删除，所有相关数据将不可恢复。",
-        "set-default-device-profile-title": "确定要将设备配置 '{{deviceProfileName}}' 设为默认值吗？",
+        "set-default-device-profile-title": "确定要将设备配置'{{deviceProfileName}}'设为默认值吗？",
         "set-default-device-profile-text": "确认后，设备配置将被标记为默认，并将用于未指定配置的新设备。",
         "no-device-profiles-found": "未找到设备配置。",
         "create-new-device-profile": "创建设备配置",
@@ -1578,8 +1674,6 @@
         "mqtt-device-topic-filters-spark-plug-attribute-metric-names": "将SparkPlug指标存储为属性。",
         "mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint": "将作为设备属性存储的SparkPlug指标的名称。其他指标将作为设备遥测数据进行存储。",
         "mqtt-device-payload-type": "MQTT 设备 Payload",
-        "mqtt-device-payload-type-json": "JSON",
-        "mqtt-device-payload-type-proto": "Protobuf",
         "mqtt-enable-compatibility-with-json-payload-format": "启用与其他payload格式兼容。",
         "mqtt-enable-compatibility-with-json-payload-format-hint": "启用后平台将默认使用Protobuf的payload格式，如果解析失败平台将尝试使用JSON的payload格式。对于固件更新期间的向后兼容性很有用，例如固件的初始版本使用Json而新版本使用Protobuf在设备队列的固件更新过程中，需要同时支持Protobuf和JSON。兼容模式会导致一点的性能下降，因此建议在所有设备更新后禁用此模式。",
         "mqtt-use-json-format-for-default-downlink-topics": "缺省下行主题采用json格式",
@@ -1590,11 +1684,6 @@
         "snmp-mapping-not-configured": "OID到时间序列/遥测的映射未配置",
         "snmp-timseries-or-attribute-name": "用于映射的时间序列/属性名称",
         "snmp-timseries-or-attribute-type": "用于映射的时间序列/属性类型",
-        "snmp-method-pdu-type-get-request": "GetRequest",
-        "snmp-method-pdu-type-get-next-request": "GetNextRequest",
-        "snmp-oid": "OID",
-        "transport-device-payload-type-json": "JSON",
-        "transport-device-payload-type-proto": "Protobuf",
         "mqtt-payload-type-required": "Payload 类型必填。",
         "coap-device-type": "CoAP 设备类型",
         "coap-device-payload-type": "CoAP 设备消息 Payload",
@@ -1622,10 +1711,10 @@
         "not-valid-pattern-topic-filter": "无效的 Topic 筛选器模式",
         "not-valid-single-character": "单级通配符的使用无效",
         "not-valid-multi-character": "多级通配符的使用无效",
-        "single-level-wildcards-hint": "<code>[+]</code> 适用于任何 Topic 过滤级别。例如：<b>v1/devices/+/telemetry</b> or <b>+/devices/+/attributes</b>。",
-        "multi-level-wildcards-hint": "<code>[#]</code>可以替换 Topic 筛选器本身，并且必须是 Topic 的最后一个符号。例如：<b>#</b> or <b>v1/devices/me/#</b>。",
+        "single-level-wildcards-hint": "<code>[+]</code> 适用于任何Topic过滤级别。例如：<b>v1/devices/+/telemetry</b> or <b>+/devices/+/attributes</b>。",
+        "multi-level-wildcards-hint": "<code>[#]</code>可以替换Topic筛选器本身，并且必须是Topic的最后一个符号。例如：<b>#</b> or <b>v1/devices/me/#</b>。",
         "alarm-rules": "告警规则",
-        "alarm-rules-with-count": "告警规则 ({{count}})",
+        "alarm-rules-with-count": "告警规则({{count}})",
         "no-alarm-rules": "未配置告警规则",
         "add-alarm-rule": "添加告警规则",
         "edit-alarm-rule": "编辑告警规则",
@@ -1654,7 +1743,7 @@
         "alarm-rule-additional-info": "附加信息",
         "edit-alarm-rule-additional-info": "编辑附加信息",
         "alarm-rule-additional-info-placeholder": "请在此处提供评论和调整，以便在附加信息下的告警详情中显示",
-        "alarm-rule-additional-info-hint": "提示: 使用 <code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code> 来替代告警规则条件中使用的属性或遥测键的值。",
+        "alarm-rule-additional-info-hint": "提示: 使用<code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code>来替代告警规则条件中使用的属性或遥测键的值。",
         "alarm-rule-mobile-dashboard": "移动端仪表板",
         "alarm-rule-mobile-dashboard-hint": "作为移动端告警详情仪表板使用。",
         "alarm-rule-no-mobile-dashboard": "未选择仪表板。",
@@ -1695,8 +1784,8 @@
         "condition-type": "条件类型",
         "condition-type-simple": "简单",
         "condition-type-duration": "持续时间",
-        "condition-during": "在 {{during}} 期间",
-        "condition-during-dynamic": "\"{{ attribute }}\" ({{during}}) 期间",
+        "condition-during": "在{{during}}期间",
+        "condition-during-dynamic": " \"{{ attribute }}\" ({{during}})期间",
         "condition-type-repeating": "重复",
         "condition-type-required": "条件类型必填。",
         "condition-repeating-value": "事件计数",
@@ -1704,7 +1793,7 @@
         "condition-repeating-value-pattern": "事件计数应为整数。",
         "condition-repeating-value-required": "事件计数值必填。",
         "condition-repeat-times": "重复 { count, plural, =1 {1 次} other {# 次} }",
-        "condition-repeat-times-dynamic": "重复 \"{ attribute }\" ({ count, plural, =1 {1 次} other {# 次} })",
+        "condition-repeat-times-dynamic": "重复 \"{ attribute }\" ({ count, plural, =1 {1 time} other {# times} })",
         "schedule-type": "计划程序类型",
         "schedule-type-required": "计划类型必填。",
         "schedule": "启用规则：",
@@ -1787,11 +1876,12 @@
             "delete-server-title": "确定要删除服务器吗？",
             "mode": "安全配置模式",
             "bootstrap-tab": "Bootstrap",
-            "bootstrap-server-legend": "Bootstrap Server (ShortId...)",
-            "lwm2m-server-legend": "LwM2M Server (ShortId...)",
+            "bootstrap-server-legend": "Bootstrap服务...",
+            "lwm2m-server-legend": "LwM2M服务...",
             "server": "服务器",
             "short-id": "服务器ID",
             "short-id-tooltip": "服务器ID用作关联服务器对象实例的链接。",
+            "short-id-tooltip-bootstrap": "服务器短ID用作关联服务器对象实例的链接，\n 该标识符唯一地标识了为LWM2M客户端配置的每个LWM2M服务器，\n 当Bootstrap-Server资源的值为‘false’时必须设置资源。",
             "short-id-required": "服务器ID必填。",
             "short-id-range": "服务器ID应在{{ min }}到{{ max }}范围内。",
             "short-id-pattern": "服务器ID必须是一个正整数。",
@@ -1817,7 +1907,7 @@
                 "tqs": "TQS: 通过TCP和SMS活动连接（不支持LWM2M 1.1）。",
                 "sq": "SQ: 通过队列模式的SMS连接（不支持LWM2M 1.1）。"
             },
-            "binding-tooltip": "这是LwM2M服务器对象的\"绑定\"资源列表 - /1/x/7。\n表示LwM2M客户端中支持的绑定模式。\n此值应与设备对象(/3/0/16)中的\"支持的绑定和模式\"资源。\n虽然支持多个传输但在整个传输会话期间只能使用一个传输绑定。\n 例如：当UDP和SMS都受支持，LwM2M客户端和LwM2M服务器可以选择在整个传输会话期间通过UDP或SMS进行通信。",
+            "binding-tooltip": "这是LwM2M服务器对象的绑定资源列表 - /1/x/7。",
             "bootstrap-server": "Bootstrap Server",
             "lwm2m-server": "LwM2M Server",
             "include-bootstrap-server": "包含Bootstrap Server更新",
@@ -1871,6 +1961,11 @@
                 "step": "步长",
                 "min-evaluation-period": "最小评估周期",
                 "max-evaluation-period": "最大评估周期"
+            },
+            "default-object-id": "默认对象版本(属性)",
+            "default-object-id-ver": {
+                "v1-0": "1.0",
+                "v1-1": "1.1"
             }
         },
         "snmp": {
@@ -1936,9 +2031,9 @@
         "edge-instances": "边缘实例",
         "instances": "边缘实例",
         "edge-file": "边缘文件",
-        "name-max-length": "名称长度必须少于256个字符",
-        "label-max-length": "标签长度必须少于256个字符",
-        "type-max-length": "类型长度必须少于256个字符",
+        "name-max-length": "名称长度必须小于256个字符",
+        "label-max-length": "标签长度必须小于256个字符",
+        "type-max-length": "类型长度必须小于256个字符",
         "management": "边缘管理",
         "no-edges-matching": "未找到匹配的边缘 '{{entity}}'。",
         "add": "增加边缘",
@@ -2081,14 +2176,14 @@
         "entities": "实体",
         "entities-count": "实体数量",
         "alarms-count": "告警数量",
-        "aliases": "实体别名",
+        "aliases": "别名",
         "aliases-short": "别名",
-        "entity-alias": "实体别名",
+        "entity-alias": "别名",
         "unable-delete-entity-alias-title": "无法删除实体别名",
-        "unable-delete-entity-alias-text": "实体别名 '{{entityAlias}}' 被以下部件使用不能删除：<br/>{{widgetsList}}",
-        "duplicate-alias-error": "别名 '{{alias}}' 重复。<br>同一仪表板别名必须唯一。",
-        "missing-entity-filter-error": "别名 '{{alias}}' 缺少筛选器",
-        "configure-alias": "别名 '{{alias}}' 配置",
+        "unable-delete-entity-alias-text": "实体别名'{{entityAlias}}'被以下部件使用不能删除：<br/>{{widgetsList}}",
+        "duplicate-alias-error": "别名'{{alias}}'重复,同一仪表板别名必须唯一。",
+        "missing-entity-filter-error": "别名'{{alias}}'缺少筛选器",
+        "configure-alias": "别名'{{alias}}'配置",
         "alias": "别名",
         "alias-required": "实体别名必填。",
         "remove-alias": "移除实体别名",
@@ -2100,25 +2195,26 @@
         "any-entity": "任意实体",
         "add-entity-type": "添加实体类型",
         "enter-entity-type": "输入实体类型",
-        "no-entities-matching": "未找到匹配 '{{entity}}' 的实体。",
-        "no-entity-types-matching": "未找到匹配 '{{entityType}}' 类型的实体。",
+        "no-entities-matching": "未找到匹配'{{entity}}'的实体。",
+        "no-entities-text": "找不到实体",
+        "no-entity-types-matching": "未找到匹配'{{entityType}}'类型的实体。",
         "name-starts-with": "名称开始于",
-        "help-text": "根据需要可以使用'%'进行匹配，例如：'%entity_name_contains%', '%entity_name_ends', 'entity_starts_with'。",
+        "help-text": "根据需要可以使用'%'进行匹配例如：'%entity_name_contains%', '%entity_name_ends', 'entity_starts_with'。",
         "use-entity-name-filter": "用户筛选器",
         "entity-list-empty": "没有选择实体。",
         "entity-type-list-required": "至少应选择一个实体类型。",
         "entity-name-filter-required": "实体名筛选器必填。",
-        "entity-name-filter-no-entity-matched": "未找到以 '{{entity}}' 开头的实体",
+        "entity-name-filter-no-entity-matched": "未找到以'{{entity}}'开头的实体",
         "all-subtypes": "全部",
         "select-entities": "选择实体",
         "no-aliases-found": "未找到别名",
-        "no-alias-matching": "未找到 '{{alias}}'",
+        "no-alias-matching": "未找到'{{alias}}'",
         "create-new-alias": "创建别名",
         "create-new": "创建",
         "key": "键名",
         "key-name": "键名",
         "no-keys-found": "未找到键名",
-        "no-key-matching": "未找到键名 '{{key}}'",
+        "no-key-matching": "未找到键名'{{key}}'",
         "create-new-key": "创建键",
         "type": "类型",
         "type-required": "实体类型必填。",
@@ -2205,11 +2301,21 @@
         "type-edge": "边缘",
         "type-edges": "边缘",
         "list-of-edges": "{ count, plural, =1 {1 个边缘} other {列表 # 个边缘} }",
-        "edge-name-starts-with": "以 '{{prefix}}' 开头的边缘",
+        "edge-name-starts-with": "以'{{prefix}}'开头的边缘",
+        "version-conflict": {
+            "message": "您要覆盖现有版本还是丢弃更改并加载最新版本？",
+            "link": "您可以使用此下载的{{entityType}}版本",
+            "overwrite": "覆盖",
+            "discard": "丢弃"
+        },
         "type-tb-resource": "资源",
+        "type-tb-resources": "资源",
+        "list-of-tb-resources": "{ count, plural, =1 {1 个资源} other {# 个资源} }",
         "type-ota-package": "OTA包",
         "type-rpc": "RPC",
         "type-queue": "队列",
+        "type-queue-stats": "队列统计",
+        "type-queues-stats": "队列统计",
         "type-notification": "通知",
         "type-notification-rule": "通知规则",
         "type-notification-rules": "通知规则",
@@ -2221,8 +2327,16 @@
         "type-notification-template": "通知模板",
         "type-notification-templates": "通知模板",
         "list-of-notification-templates": "{ count, plural, =1 {1 个通知模板} other {# 个通知模板} }",
-        "type-tb-resources": "资源",
-        "list-of-tb-resources": "{ count, plural, =1 {1 个资源} other {# 个资源} }"
+        "link": "连接",
+        "type-oauth2-client": "OAuth 2.0客户端",
+        "type-oauth2-clients": "OAuth 2.0客户端",
+        "list-of-oauth2-clients": "{ count, plural, =1 {One OAuth 2.0 client} other {List of # OAuth 2.0 clients} }",
+        "type-domain": "域名",
+        "type-domains": "域名",
+        "list-of-domains": "{ count, plural, =1 {One Domain} other {List of # Domains} }",
+        "type-mobile-app": "移劝端",
+        "type-mobile-apps": "移动端",
+        "list-of-mobile-apps": "{ count, plural, =1 {One Mobile application} other {List of # Mobile applications} }"
     },
     "entity-field": {
         "created-time": "创建时间",
@@ -2239,7 +2353,11 @@
         "address2": "地址二",
         "zip": "邮政编码",
         "phone": "电话",
-        "label": "标签"
+        "label": "标签",
+        "queue-name": "对列名称",
+        "service-id": "服务Id",
+        "owner-name": "所有者名称",
+        "owner-type": "所有者类型"
     },
     "entity-view": {
         "entity-view": "实体视图",
@@ -2249,15 +2367,15 @@
         "view-entity-views": "查看实体视图",
         "entity-view-alias": "实体视图别名",
         "aliases": "实体视图别名",
-        "no-alias-matching": "未找到匹配 '{{alias}}' 的别名。",
+        "no-alias-matching": "未找到匹配'{{alias}}'的别名。",
         "no-aliases-found": "未找到别名。",
         "no-key-matching": "'{{key}}' 未找到。",
         "no-keys-found": "未找到密钥。",
         "create-new-alias": "创建别名",
         "create-new-key": "创建键",
-        "duplicate-alias-error": "找到重复别名 '{{alias}}'。 <br> 实体视图别名必须是唯一的。",
+        "duplicate-alias-error": "找到重复别名'{{alias}}'。<br> 实体视图别名必须是唯一的。",
         "configure-alias": "配置 '{{alias}}' 别名",
-        "no-entity-views-matching": "未找到与 '{{entity}}' 匹配的实体视图。",
+        "no-entity-views-matching": "未找到与'{{entity}}'匹配的实体视图。",
         "public": "公开",
         "alias": "别名",
         "alias-required": "实体视图别名必填。",
@@ -2309,8 +2427,8 @@
         "created-time": "创建时间",
         "name": "名称",
         "name-required": "名称必填。",
-        "name-max-length": "名称应该少于256个字符。",
-        "type-max-length": "实体视图类型应该少于256个字符。",
+        "name-max-length": "名称应该小于256个字符。",
+        "type-max-length": "实体视图类型应该小于256个字符。",
         "description": "说明",
         "events": "事件",
         "details": "详情",
@@ -2452,11 +2570,11 @@
         "password": "密码",
         "retry-interval": "重试间隔（毫秒）",
         "anonymous": "匿名",
-        "basic": "Basic",
+        "basic": "基本",
         "pem": "PEM",
-        "ca-cert": "CA证书文件 *",
-        "private-key": "私钥文件 *",
-        "cert": "证书文件 *",
+        "ca-cert": "CA证书文件*",
+        "private-key": "私钥文件*",
+        "cert": "证书文件*",
         "no-file": "没有选择文件。",
         "drop-file": "删除文件或单击以选择要上载的文件。",
         "mapping": "映射",
@@ -2477,7 +2595,7 @@
         "value-expression": "值表达式",
         "topic": "主题",
         "timeout": "超时时间（毫秒）",
-        "converter-json-required": "Converter JSON 必填。",
+        "converter-json-required": "转换JSON必填。",
         "converter-json-parse": "无法解析转换JSON。",
         "filter-expression": "筛选条件表达式",
         "connect-requests": "连接请求",
@@ -2509,7 +2627,7 @@
         "opc-keystore": "密钥库",
         "opc-type": "类型",
         "opc-keystore-type": "类型",
-        "opc-keystore-location": "位置 *",
+        "opc-keystore-location": "Location *",
         "opc-keystore-password": "密码",
         "opc-keystore-alias": "别名",
         "opc-keystore-key-password": "密钥密码",
@@ -2601,7 +2719,7 @@
             "not-in": "不存在"
         },
         "ignore-case": "忽略大小写",
-        "value": "值",
+        "value": "数值",
         "remove-filter": "删除筛选器",
         "duplicate-filter-action": "重复过滤器",
         "preview": "筛选器预览",
@@ -2652,6 +2770,7 @@
         "current-user": "当前用户",
         "current-device": "当前设备",
         "default-value": "默认值",
+        "default-comma-separated-values": "默认用逗号分隔",
         "dynamic-source-type": "动态源类型",
         "dynamic-value": "动态值",
         "no-dynamic-value": "无动态值",
@@ -2671,268 +2790,23 @@
         "function": "函数"
     },
     "gateway": {
-        "add-entry": "添加配置",
-        "advanced": "高级",
-        "checking-device-activity": "检查设备活动",
-        "command": "Docker命令",
-        "command-copied-message": "Docker命令已复制到剪贴板",
-        "configuration": "配置",
-        "connector-add": "添加连接器",
-        "connector-enabled": "启用连接器",
-        "connector-name": "连接器名称",
-        "connector-name-required": "连接器名称必填。",
-        "connector-type": "连接器类型",
-        "connector-type-required": "连接器类型必填。",
-        "connectors": "连接器配置",
-        "connectors-config": "连接器配置",
-        "connectors-table-enabled": "已启用",
-        "connectors-table-name": "名称",
-        "connectors-table-type": "类型",
-        "connectors-table-status": "状态",
-        "connectors-table-actions": "操作",
-        "connectors-table-key": "键",
-        "connectors-table-class": "类",
-        "rpc-command-send": "发送",
-        "rpc-command-result": "结果",
-        "rpc-command-edit-params": "编辑参数",
-        "gateway-configuration": "通用配置",
-        "create-new-gateway": "创建网关",
-        "create-new-gateway-text": "确定要创建名为 '{{gatewayName}}' 的新网关？",
-        "created-time": "创建时间",
-        "configuration-delete-dialog-header": "配置将被删除",
-        "configuration-delete-dialog-body": "只有对网关进行物理访问时，才有可能关闭远程配置。所有先前的配置都将被删除。<br><br>\n要关闭配置，请在下面输入网关名称",
-        "configuration-delete-dialog-input": "网关名称",
-        "configuration-delete-dialog-input-required": "网关名称是必需的",
-        "configuration-delete-dialog-confirm": "关闭",
-        "delete": "删除配置",
-        "download-tip": "下载配置",
-        "drop-file": "将文件拖放到此处或",
-        "gateway": "网关",
         "gateway-exists": "同名设备已存在。",
         "gateway-name": "网关名称",
         "gateway-name-required": "网关名称必填。",
         "gateway-saved": "已成功保存网关配置。",
-        "grpc": "GRPC",
-        "grpc-keep-alive-timeout": "保持连接超时（毫秒）",
-        "grpc-keep-alive-timeout-required": "需要保持连接超时",
-        "grpc-keep-alive-timeout-min": "保持连接超时不能小于1",
-        "grpc-keep-alive-timeout-pattern": "保持连接超时无效",
-        "grpc-keep-alive": "保持连接（毫秒）",
-        "grpc-keep-alive-required": "需要保持连接",
-        "grpc-keep-alive-min": "保持连接不能小于1",
-        "grpc-keep-alive-pattern": "保持连接无效",
-        "grpc-min-time-between-pings": "最小Ping间隔（毫秒）",
-        "grpc-min-time-between-pings-required": "需要最小Ping间隔",
-        "grpc-min-time-between-pings-min": "最小Ping间隔不能小于1",
-        "grpc-min-time-between-pings-pattern": "最小Ping间隔无效",
-        "grpc-min-ping-interval-without-data": "无数据时的最小Ping间隔（毫秒）",
-        "grpc-min-ping-interval-without-data-required": "需要无数据时的最小Ping间隔",
-        "grpc-min-ping-interval-without-data-min": "无数据时的最小Ping间隔不能小于1",
-        "grpc-min-ping-interval-without-data-pattern": "无数据时的最小Ping间隔无效",
-        "grpc-max-pings-without-data": "无数据时的最大Ping数",
-        "grpc-max-pings-without-data-required": "需要无数据时的最大Ping数",
-        "grpc-max-pings-without-data-min": "无数据时的最大Ping数不能小于1",
-        "grpc-max-pings-without-data-pattern": "无数据时的最大Ping数无效",
-        "inactivity-check-period-seconds": "不活跃检查期（秒）",
-        "inactivity-check-period-seconds-required": "需要不活跃检查期",
-        "inactivity-check-period-seconds-min": "不活跃检查期不能小于1",
-        "inactivity-check-period-seconds-pattern": "不活跃检查期无效",
-        "inactivity-timeout-seconds": "不活跃超时（秒）",
-        "inactivity-timeout-seconds-required": "需要不活跃超时",
-        "inactivity-timeout-seconds-min": "不活跃超时不能小于1",
-        "inactivity-timeout-seconds-pattern": "不活跃超时无效",
-        "json-parse": "无效的JSON。",
-        "json-required": "字段不能为空。",
-        "logs": {
-            "logs": "日志",
-            "days": "天",
-            "hours": "小时",
-            "minutes": "分钟",
-            "seconds": "秒",
-            "date-format": "日期格式",
-            "date-format-required": "需要日期格式",
-            "log-format": "日志格式",
-            "log-type": "日志类型",
-            "log-format-required": "需要日志格式",
-            "remote": "远程日志记录",
-            "remote-logs": "远程日志",
-            "local": "本地日志记录",
-            "level": "日志级别",
-            "file-path": "文件路径",
-            "file-path-required": "需要文件路径",
-            "saving-period": "日志保存期限",
-            "saving-period-min": "日志保存期限不能小于1",
-            "saving-period-required": "需要日志保存期限",
-            "backup-count": "备份数量",
-            "backup-count-min": "备份数量不能小于1",
-            "backup-count-required": "需要备份数量"
-        },
-        "min-pack-send-delay": "最小包发送延迟（毫秒）",
-        "min-pack-send-delay-required": "最小包发送延迟是必需的",
-        "min-pack-send-delay-min": "最小包发送延迟不能小于0",
-        "no-connectors": "无连接器",
-        "no-data": "没有配置",
+        "gateway": "网关",
+        "create-new-gateway": "创建网关",
+        "create-new-gateway-text": "确定要创建名为 '{{gatewayName}}' 的新网关？",
         "no-gateway-found": "未找到网关。",
         "no-gateway-matching": "未找到 '{{item}}' 。",
-        "path-logs": "日志文件的路径",
-        "path-logs-required": "路径是必需的。",
-        "permit-without-calls": "保持连接许可，无需响应",
-        "remote": "远程配置",
-        "remote-logging-level": "日志记录级别",
-        "remove-entry": "删除配置",
-        "remote-shell": "远程Shell",
-        "remote-configuration": "远程配置",
-        "other": "其他",
-        "save-tip": "保存配置",
-        "security-type": "安全类型",
-        "security-types": {
-            "access-token": "访问令牌",
-            "username-password": "用户名和密码",
-            "tls": "TLS",
-            "tls-access-token": "TLS + 访问令牌",
-            "tls-private-key": "TLS + 私钥"
-        },
-        "server-port": "服务器端口",
-        "statistics": {
-            "statistic": "统计信息",
-            "statistics": "统计信息",
-            "statistic-commands-empty": "无可用统计信息",
-            "commands": "命令",
-            "send-period": "统计信息发送周期（秒）",
-            "send-period-required": "统计信息发送周期是必需的",
-            "send-period-min": "统计信息发送周期不能小于60",
-            "send-period-pattern": "统计信息发送周期无效",
-            "check-connectors-configuration": "检查连接器配置（秒）",
-            "check-connectors-configuration-required": "检查连接器配置是必需的",
-            "check-connectors-configuration-min": "检查连接器配置不能小于1",
-            "check-connectors-configuration-pattern": "检查连接器配置无效",
-            "add": "添加命令",
-            "timeout": "超时时间",
-            "timeout-ms": "超时时间（毫秒）",
-            "timeout-required": "超时时间是必需的",
-            "timeout-min": "超时时间不能小于1",
-            "timeout-pattern": "超时时间无效",
-            "attribute-name": "属性名称",
-            "attribute-name-required": "属性名称是必需的",
-            "command": "命令",
-            "command-required": "命令是必需的",
-            "command-pattern": "命令无效",
-            "remove": "删除命令"
-        },
-        "storage": "存储",
-        "storage-max-file-records": "文件中的最大记录数",
-        "storage-max-files": "最大文件数",
-        "storage-max-files-min": "最小值为1。",
-        "storage-max-files-pattern": "数字无效。",
-        "storage-max-files-required": "数字是必需的。",
-        "storage-max-records": "存储中的最大记录数",
-        "storage-max-records-min": "最小记录数为1。",
-        "storage-max-records-pattern": "数字无效。",
-        "storage-max-records-required": "最大记录项必填。",
-        "storage-read-record-count": "存储中的读取记录数",
-        "storage-read-record-count-min": "最小记录数为1。",
-        "storage-read-record-count-pattern": "数字不合法。",
-        "storage-read-record-count-required": "需要读取记录数。",
-        "storage-max-read-record-count": "存储中的最大读取记录数",
-        "storage-max-read-record-count-min": "最小记录数为1。",
-        "storage-max-read-record-count-pattern": "数字不合法。",
-        "storage-max-read-record-count-required": "最大读取记录数必需。",
-        "storage-data-folder-path": "数据文件夹路径",
-        "storage-data-folder-path-required": "需要数据文件夹路径。",
-        "storage-pack-size": "最大事件包大小",
-        "storage-pack-size-min": "最小值为1。",
-        "storage-pack-size-pattern": "数字无效。",
-        "storage-pack-size-required": "最大事件包大小必填。",
-        "storage-path": "存储路径",
-        "storage-path-required": "存储路径必填。",
-        "storage-type": "存储类型",
-        "storage-types": {
-            "file-storage": "文件存储",
-            "memory-storage": "内存存储",
-            "sqlite": "SQLITE"
-        },
-        "thingsboard": "ThingsBoard",
-        "general": "常规",
-        "thingsboard-host": "ThingsBoard主机",
-        "thingsboard-host-required": "主机必填。",
-        "thingsboard-port": "ThingsBoard端口",
-        "thingsboard-port-max": "最大端口号为65535。",
-        "thingsboard-port-min": "最小端口号为1。",
-        "thingsboard-port-pattern": "端口无效。",
-        "thingsboard-port-required": "端口必填。",
-        "tidy": "整理",
-        "tidy-tip": "整理配置JSON",
-        "title-connectors-json": "连接器 {{typeName}} 配置",
-        "tls-path-ca-certificate": "网关上CA证书的路径",
-        "tls-path-client-certificate": "网关上客户端证书的路径",
-        "messages-ttl-check-in-hours": "消息TTL检查小时数",
-        "messages-ttl-check-in-hours-required": "需要提供消息TTL检查小时数。",
-        "messages-ttl-check-in-hours-min": "最小值为1。",
-        "messages-ttl-check-in-hours-pattern": "数字无效。",
-        "messages-ttl-in-days": "消息TTL天数",
-        "messages-ttl-in-days-required": "需要提供消息TTL天数。",
-        "messages-ttl-in-days-min": "最小值为1。",
-        "messages-ttl-in-days-pattern": "数字无效。",
-        "mqtt-qos": "QoS",
-        "mqtt-qos-required": "需要提供QoS",
-        "mqtt-qos-range": "QoS值的范围是从0到1",
-        "tls-path-private-key": "网关上私钥的路径",
-        "toggle-fullscreen": "切换全屏",
-        "transformer-json-config": "配置JSON*",
-        "update-config": "添加/更新配置JSON",
-        "hints": {
-            "remote-configuration": "启用对网关的远程配置和管理",
-            "remote-shell": "通过远程Shell小部件启用对网关操作系统的远程控制",
-            "host": "ThingsBoard 主机名或IP地址",
-            "port": "ThingsBoard MQTT服务端口",
-            "token": "ThingsBoard 网关访问令牌",
-            "client-id": "ThingsBoard 网关MQTT客户端ID",
-            "username": "ThingsBoard 网关MQTT用户名",
-            "password": "ThingsBoard 网关MQTT密码",
-            "ca-cert": "CA证书文件的路径",
-            "date-form": "日志消息中的日期格式",
-            "data-folder": "包含数据的文件夹的路径（相对或绝对路径）",
-            "log-format": "日志消息格式",
-            "remote-log": "启用对网关的远程日志记录和日志读取",
-            "backup-count": "如果备份计数大于0，则在执行轮换时，最多保留备份计数个文件-最旧的文件将被删除",
-            "storage": "提供将数据发送到平台之前保存传入数据的配置",
-            "max-file-count": "将创建的文件的最大数量",
-            "max-read-count": "从存储中获取的消息计数并发送到ThingsBoard",
-            "max-records": "一个文件中存储的最大记录数",
-            "read-record-count": "从存储中获取的消息计数并发送到ThingsBoard",
-            "max-records-count": "在将数据发送到ThingsBoard之前，存储中的最大数据计数",
-            "ttl-check-hour": "网关多久检查一次数据是否过时",
-            "ttl-messages-day": "存储将保存数据的最大天数",
-            "commands": "用于收集附加统计信息的命令",
-            "attribute": "统计遥测键",
-            "timeout": "命令执行的超时时间",
-            "command": "命令执行的结果，将用作遥测的值",
-            "check-device-activity": "启用监视每个连接设备的活动",
-            "inactivity-timeout": "在此时间后，网关将断开设备的连接",
-            "inactivity-period": "设备活动检查的周期",
-            "minimal-pack-delay": "发送消息包之间的延迟（减小此设置会导致增加CPU使用率）",
-            "qos": "MQTT消息传递的服务质量（0-至多一次，1-至少一次）",
-            "server-port": "GRPC服务器侦听传入连接的网络端口",
-            "grpc-keep-alive-timeout": "在考虑连接死亡之前，服务器等待keepalive ping响应的最长时间",
-            "grpc-keep-alive": "没有活动RPC调用时两个连续keepalive ping消息之间的持续时间",
-            "grpc-min-time-between-pings": "服务器在发送keepalive ping消息之间应等待的最小时间量",
-            "grpc-max-pings-without-data": "在没有接收到任何数据之前，服务器可以发送的keepalive ping消息的最大数量，然后将连接视为死亡",
-            "grpc-min-ping-interval-without-data": "在没有发送或接收数据时，服务器在发送keepalive ping消息之间应等待的最小时间量",
-            "permit-without-calls": "允许服务器在没有活动RPC调用时保持GRPC连接活动"
-        },
-        "docker-label": "使用以下指令在 Docker compose 中运行 IoT 网关，并为选定的设备提供凭据",
-        "install-docker-compose": "使用以下说明下载、安装和设置 Docker Compose",
-        "download-configuration-file": "下载配置文件",
-        "download-docker-compose": "下载您的网关的 docker-compose.yml 文件",
-        "launch-gateway": "启动网关",
-        "launch-docker-compose": "在包含 docker-compose.yml 文件的文件夹中，使用以下命令在终端中启动网关"
+        "launch-gateway": "启动网关"
     },
     "grid": {
         "delete-item-title": "确定要删除此项吗？",
         "delete-item-text": "请注意，确认后，项目及其所有相关数据将不可恢复。",
-        "delete-items-title": "确定删除 { count, plural, =1 {1 项} other {# 项} }吗？",
-        "delete-items-action-title": "删除 { count, plural, =1 {1 个元素} other {# 个元素} }",
-        "delete-items-text": "请注意，确认后所有选择的项目将被删除，所有相关数据将不可恢复。",
+        "delete-items-title": "确定删除{ count, plural, =1 {1 项} other {# 项} }吗？",
+        "delete-items-action-title": "删除{ count, plural, =1 {1 个元素} other {# 个元素} }",
+        "delete-items-text": "请注意确认后所有选择的项目将被删除，所有相关数据将不可恢复。",
         "add-item-text": "添加项目",
         "no-items-text": "未找到项目",
         "item-details": "项目详细信息",
@@ -2959,12 +2833,12 @@
     "image": {
         "gallery": "图像库",
         "search": "搜索图像",
-        "selected-images": "已选择 { count, plural, =1 {1 个图像} other {# 个图像} }",
+        "selected-images": "已选择{ count, plural, =1 {1 个图像} other {# 个图像} }",
         "created-time": "创建时间",
         "name": "名称",
         "name-required": "名称不能为空。",
         "resolution": "分辨率",
-        "size": "大小",
+        "size": "尺寸",
         "system": "系统",
         "download-image": "下载图像",
         "export-image": "导出图像为JSON",
@@ -2976,7 +2850,7 @@
         "delete-image": "删除图像",
         "delete-image-title": "确定要删除图像 '{{imageTitle}}' 吗？",
         "delete-image-text": "请注意，确认后图像将无法恢复。",
-        "delete-images-title": "确定要删除 { count, plural, =1 {1 个图像} other {# 个图像} } 吗？",
+        "delete-images-title": "确定要删除{ count, plural, =1 {1 个图像} other {# 个图像} } 吗？",
         "delete-images-text": "请注意，确认后所有选定的图像都将被删除，并且所有相关数据将无法恢复。",
         "list-mode": "列表视图",
         "grid-mode": "网格视图",
@@ -3088,12 +2962,257 @@
             "error-entities": "创建 {{count}} 个实体时出错。"
         }
     },
+    "scada": {
+        "symbols": "组态库",
+        "search": "搜索组态图形",
+        "selected-symbols": "选中{ count, plural, =1 {1个图形} other {#个图形} }",
+        "download-symbol": "下载图形",
+        "export-symbol": "导出图形",
+        "import-symbol": "导入图形",
+        "upload-symbol": "上传图形",
+        "update-symbol": "更新图形",
+        "edit-symbol": "编辑图形",
+        "symbol-details": "图形详情",
+        "mode-svg": "SVG",
+        "mode-xml": "XML",
+        "no-symbols": "未找到图形",
+        "show-hidden-elements": "显示元素",
+        "hide-hidden-elements": "隐藏元素",
+        "delete-symbol": "删除图形",
+        "delete-symbol-title": "确定要删除'{{imageTitle}}'组态图形吗？",
+        "delete-symbol-text": "请注意在确认后组态图形将无法恢复。",
+        "delete-symbols-title": "确定要删除{ count, plural, =1 {1个图形} other {#个图形} }吗？",
+        "delete-symbols-text": "请注意在确认后所有选择的组态图形将被删除且相关数据将无法恢复。",
+        "include-system-symbols": "包含系统组态图形",
+        "symbol-preview": "图形预览",
+        "general": "常规",
+        "tags": "标签",
+        "properties": "属性",
+        "title": "标题",
+        "description": "描述",
+        "search-tags": "标签",
+        "widget-size": "尺寸",
+        "cols": "列",
+        "rows": "行",
+        "state-render-function": "函数",
+        "preview": "预览",
+        "preview-widget-action-text": "部件动作'{{type}}'调用成功！",
+        "no-symbol": "没有图形",
+        "no-symbol-selected": "没有选中图形。",
+        "clear-symbol": "清除图形缓存",
+        "browse-symbol-from-gallery": "查看图形库中的图形",
+        "zoom-in": "放大",
+        "zoom-out": "缩小",
+        "create-widget": "创建部件",
+        "create-widget-from-symbol": "根据图形创建部件",
+        "hidden": "隐藏",
+        "tag": {
+            "tag": "标签",
+            "on-click-action": "事件",
+            "no-tags": "没有配置标签",
+            "delete-tag-text": "您确定要从<b>{{elementType}}</b>元素删除<b>{{tag}}</b>标签吗？",
+            "update-tag": "更新标签",
+            "enter-tag": "确定标签",
+            "tag-settings": "标签设置",
+            "remove-tag": "移除标签",
+            "add-tag": "添加标签"
+        },
+        "behavior": {
+            "behavior": "行为",
+            "id": "序号",
+            "name": "名称",
+            "type": "类型",
+            "no-behaviors": "无任何行为配置",
+            "add-behavior": "添加行为",
+            "type-action": "动作",
+            "type-value": "数值",
+            "type-widget-action": "部件动作",
+            "behavior-settings": "行为设置",
+            "remove-behavior": "移除行为",
+            "hint": "提示",
+            "group-title": "分组标题",
+            "value-type": "数据类型",
+            "default-value": "默认数据",
+            "true-label": "True标签",
+            "false-label": "False标签",
+            "state-label": "State标签",
+            "default-payload": "默认payload",
+            "not-unique-behavior-ids-error": "行为ID必须是唯一的！",
+            "default-settings": "默认设置"
+        },
+        "property": {
+            "property": "属性",
+            "id": "序号",
+            "name": "名称",
+            "type": "类型",
+            "type-text": "文本",
+            "type-number": "数字",
+            "type-switch": "开关",
+            "type-color": "颜色",
+            "type-color-settings": "颜色设置",
+            "type-font": "字体",
+            "type-units": "单位",
+            "type-icon": "图标",
+            "no-properties": "无任何属性配置",
+            "add-property": "添加属性",
+            "property-settings": "属性设置",
+            "remove-property": "删除属性",
+            "default-value": "默认数据",
+            "value-required": "值必填",
+            "number-settings": "数字设置",
+            "min": "最小值",
+            "max": "最大值",
+            "step": "步长",
+            "advanced-ui-settings": "UI高级设置",
+            "disable-on-property": "禁用属性",
+            "sub-label": "子级标签",
+            "vertical-divider-after": "垂直分隔线",
+            "input-field-suffix": "输入字段后缀",
+            "property-row-classes": "行类名称",
+            "property-field-classes": "字段类名称",
+            "not-unique-property-ids-error": "属性ID必须是唯一的！"
+        },
+        "symbol": {
+            "symbol": "图形",
+            "fluid-presence": "液体",
+            "fluid-presence-hint": "指示管道中是否显示液体。",
+            "fluid-present": "液体显示",
+            "present": "显示",
+            "absent": "隐藏",
+            "flow-presence": "流动",
+            "flow-presence-hint": "指示液体是否在管道中流动。",
+            "flow-present": "存在流动",
+            "flow-direction": "方向",
+            "flow-direction-hint": "指示液体流动方向。",
+            "forward": "向前",
+            "reverse": "向后",
+            "flow-animation-speed": "速度",
+            "flow-animation-speed-hint": "数值表示流动的动画速度：1正常速度 0无动画 <1动画较慢 >1动画较快。",
+            "leak": "裂纹",
+            "leak-hint": "指示管道是否存在裂纹。",
+            "leak-present": "裂纹存在",
+            "fluid-color": "液体颜色",
+            "pipe-color": "管道颜色",
+            "horizontal-pipe": "水平管",
+            "vertical-pipe": "垂直管",
+            "horizontal-fluid-color": "水平液体颜色",
+            "vertical-fluid-color": "垂直液体颜色",
+            "left-pipe": "左管",
+            "right-pipe": "右管",
+            "top-pipe": "顶管",
+            "bottom-pipe": "底管",
+            "left-fluid-color": "左液体颜色",
+            "right-fluid-color": "正常液体颜色",
+            "top-fluid-color": "顶液体颜色",
+            "bottom-fluid-color": "底液体颜色",
+            "display": "显示",
+            "value": "数值",
+            "units": "单位",
+            "flow-meter-value-hint": "在流量计上显示数值",
+            "running": "运行",
+            "running-hint": "指示组件是否处于运行状态。",
+            "warning-state": "警告状态",
+            "warning": "警告",
+            "warning-state-hint": "指示组件是否处于警告状态。",
+            "critical-state": "严重状态",
+            "critical": "严重",
+            "critical-state-hint": "指示组件是否处于严重状态。",
+            "critical-state-animation": "状态动画",
+            "critical-state-animation-hint": "当组件处于严重状态时显示闪烁动画。",
+            "animation": "动画",
+            "broken": "裂纹",
+            "broken-hint": "指示组件是否存在裂纹。",
+            "on-display-click": "显示单击",
+            "on-display-click-hint": "当用户单击时请调用显示操作。",
+            "pipe": "管道",
+            "default-border-color": "默认边框颜色",
+            "active-border-color": "主动边框颜色",
+            "warning-border-color": "警告边框颜色",
+            "critical-border-color": "严重边框颜色",
+            "background-color": "背景颜色",
+            "rotation-animation-speed": "动画速度",
+            "rotation-animation-speed-hint": "数值表示旋转动画速度：1正常速度 0无动画 <1动画较慢 >1动画较快。",
+            "on-click": "单击",
+            "on-click-hint": "当用户单击组件时调用操作。",
+            "right-top-connector": "右上连接",
+            "right-bottom-connector": "右下连接",
+            "left-top-connector": "左上连接",
+            "left-bottom-connector": "左下连接",
+            "top-left-connector": "上左连接",
+            "top-right-connector": "右左连接",
+            "running-color": "运行颜色",
+            "stopped-color": "停止颜色",
+            "warning-color": "警告颜色",
+            "critical-color": "严重颜色",
+            "opened": "已经打开",
+            "opened-hint": "指示组件是否处于打开状态。",
+            "open": "打开",
+            "open-hint": "当用户单击打开组件时请调用操作。",
+            "close": "关闭",
+            "close-hint": "当用户单击关闭组件时请调用操作。",
+            "close-state-animation": "关闭状态动画",
+            "close-state-animation-hint": "当组件处于关闭状态时启用闪烁动画。",
+            "opened-color": "打开时颜色",
+            "closed-color": "关闭时颜色",
+            "opened-rotation-angle": "打开角度",
+            "closed-rotation-angle": "关闭角度",
+            "tank-capacity": "容器容量",
+            "tank-capacity-hint": "双值表示总储罐容量。",
+            "current-volume": "当前容量",
+            "current-volume-hint": "双重值表示当前占用的体积。",
+            "tank-color": "容器颜色",
+            "value-box": "显示文本框",
+            "value-text": "单位",
+            "scale": "显示刻度",
+            "transparent-mode": "透明模式",
+            "major-ticks": "数值刻度",
+            "intervals": "间隔",
+            "major-ticks-color": "数值颜色",
+            "normal": "正常",
+            "minor-ticks": "线条刻度",
+            "minor-ticks-color": "线条颜色",
+            "temperature": "温度",
+            "temperature-hint": "表示当前温度。",
+            "update-temperature": "温度更新",
+            "update-temperature-hint": "当用户单击更改当前温度时调用动作。",
+            "run": "运行",
+            "run-hint": "当用户单击组件时调用运行操作。",
+            "stop": "停止",
+            "stop-hint": "当用户单击组件时调用停止操作。",
+            "temperature-step": "温度步长",
+            "heat-pump-color": "背景颜色",
+            "power-button-background": "按钮颜色",
+            "value-box-background": "文本框颜色",
+            "value-units": "显示单位",
+            "filtration-mode": "过滤模式",
+            "filtration-mode-hint": "指示当前的过滤模式。",
+            "filtration-mode-update": "状态更新",
+            "filtration-mode-update-hint": "当用户单击更改当前过滤模式时调用操作。",
+            "filter-mode": "过滤",
+            "waste-mode": "废弃",
+            "backwash-mode": "清洗",
+            "recirculate-mode": "循环",
+            "rinse-mode": "冲洗",
+            "closed-mode": "关闭",
+            "stand-filter-color": "沙箱背景色",
+            "mode-box-background": "按钮颜色",
+            "border-color": "状态颜色",
+            "label-color": "文本颜色",
+            "water-leak-hint": "指示是否泄漏。",
+            "default-color": "默认颜色",
+            "leak-color": "泄漏颜色",
+            "full-value": "全部数值",
+            "full-value-hint": "表示全部数值。",
+            "label": "标签",
+            "icon": "图标"
+        }
+    },
     "item": {
         "selected": "选择"
     },
     "js-func": {
         "no-return-error": "函数必须返回值！",
-        "return-type-mismatch": "函数必须返回 '{{type}}' 类型的值！",
+        "return-type-mismatch": "函数必须返回'{{type}}'类型的值！",
         "tidy": "整理",
         "mini": "迷你"
     },
@@ -3127,7 +3246,14 @@
         "left-width-percentage-required": "左侧百分比宽度必填",
         "divider": "分隔线",
         "right-side": "右侧布局",
-        "left-side": "左侧布局"
+        "left-side": "左侧布局",
+        "add-new-breakpoint": "添加新的栅格",
+        "breakpoint": "栅格",
+        "breakpoints": "栅格",
+        "copy-from": "复制",
+        "size": "尺寸",
+        "delete-breakpoint-title": "确定要删除栅格'{{name}}'吗？",
+        "delete-breakpoint-text": "请注意确认后栅格将无法恢复并且将使用默认栅格。"
     },
     "legend": {
         "direction": "图例方向",
@@ -3144,12 +3270,17 @@
         "show-avg": "显示平均值",
         "show-total": "显示总数",
         "show-latest": "显示最新值",
-        "settings": "图例设置",
+        "settings": "设置图例",
         "min": "最小值",
         "max": "最大值",
         "avg": "平均值",
         "total": "总数",
         "latest": "最新值",
+        "Min": "最小值",
+        "Max": "最大值",
+        "Avg": "平均值",
+        "Total": "总数",
+        "Latest": "最新值",
         "comparison-time-ago": {
             "previousInterval": "（历史间隔）",
             "customInterval": "（自定义间隔）",
@@ -3158,8 +3289,9 @@
             "months": "（一个月前）",
             "years": "（一年前）"
         },
+        "column-title": "标题",
         "label": "标签",
-        "value": "值"
+        "value": "数值"
     },
     "login": {
         "login": "登录",
@@ -3179,7 +3311,8 @@
         "new-password-again": "再次输入新密码",
         "password-link-sent-message": "密码重置链接已成功发送！",
         "email": "电子邮件",
-        "login-with": "使用 {{name}} 登录",
+        "invalid-email-format": "email格式无效。",
+        "login-with": "使用{{name}}登录",
         "or": "或",
         "error": "登录错误",
         "verify-your-identity": "身份验证",
@@ -3189,18 +3322,22 @@
         "try-another-way": "尝试其他方法",
         "totp-auth-description": "请从验证APP中查看验证码。",
         "totp-auth-placeholder": "验证码",
-        "sms-auth-description": "验证码已发送到手机号码 {{contact}}。",
+        "sms-auth-description": "验证码已发送到手机号码{{contact}}。",
         "sms-auth-placeholder": "SMS 验证码",
-        "email-auth-description": "验证码已发送到电子邮箱地址 {{contact}}。",
+        "email-auth-description": "验证码已发送到电子邮箱地址{{contact}}。",
         "email-auth-placeholder": "电子邮件验证码",
         "backup-code-auth-description": "请输入一个备份验证码。",
-        "backup-code-auth-placeholder": "备份验证码"
+        "backup-code-auth-placeholder": "备份验证码",
+        "activation-link-expired": "激活链接已过期",
+        "activation-link-expired-message": "您的激活链接已过期返回登录页面重新发送电子邮件。",
+        "reset-password-link-expired": "密码重置链接已过期",
+        "reset-password-link-expired-message": "重置密码链接已过期返回登录页面重新发送电子邮件。"
     },
     "markdown": {
         "edit": "编辑",
         "preview": "预览",
         "copy-code": "点击复制",
-        "copied": "已复制！"
+        "copied": "复制完成"
     },
     "notification": {
         "action-button": "操作按钮",
@@ -3222,6 +3359,7 @@
         "api-usage-trigger-settings": "API使用触发设置",
         "new-platform-version-trigger-settings": "新平台版本触发设置",
         "rate-limits-trigger-settings": "超出速率限制触发设置",
+        "task-processing-failure-trigger-settings": "任务处理故障触发设置",
         "at-least-one-should-be-selected": "至少需要选择一个",
         "basic-settings": "基本设置",
         "button-text": "按钮文本",
@@ -3235,26 +3373,27 @@
         "copy-template": "复制模板",
         "create-new": "创建",
         "created": "已创建",
+        "customize-messages": "自定义消息",
         "delete-notification-text": "请注意，在确认后，通知将无法恢复。",
         "delete-notification-title": "您确定要删除该通知吗？",
         "delete-notifications-text": "请注意，在确认后，通知将无法恢复。",
-        "delete-notifications-title": "确定要删除 { count, plural, =1 {1 个通知} other {# 个通知} } 吗？",
+        "delete-notifications-title": "确定要删除{ count, plural, =1 {1 个通知} other {# 个通知} }吗？",
         "delete-recipient-text": "请注意，在确认后，收件人将无法恢复。",
-        "delete-recipient-title": "确定要删除收件人 '{{recipientName}}' 吗？",
+        "delete-recipient-title": "确定要删除收件人'{{recipientName}}' 吗？",
         "delete-recipients-text": "请注意，在确认后，收件人将无法恢复。",
-        "delete-recipients-title": "确定要删除 { count, plural, =1 {1 个收件人} other {# 个收件人} } 吗？",
+        "delete-recipients-title": "确定要删除{ count, plural, =1 {1 个收件人} other {# 个收件人} }吗？",
         "delete-request-text": "请注意，在确认后，请求将无法恢复。",
         "delete-request-title": "确定要删除请求吗？",
         "delete-requests-text": "请注意，在确认后，请求将无法恢复。",
-        "delete-requests-title": "确定要删除 { count, plural, =1 {1 个请求} other {# 个请求} } 吗？",
+        "delete-requests-title": "确定要删除{ count, plural, =1 {1 个请求} other {# 个请求} }吗？",
         "delete-rule-text": "请注意，在确认后，规则将无法恢复。",
-        "delete-rule-title": "确定要删除规则 '{{ruleName}}' 吗？请注意，确认后无法恢复。",
+        "delete-rule-title": "确定要删除规则'{{ruleName}}' 吗？请注意，确认后无法恢复。",
         "delete-rules-text": "请注意，在确认后，规则将无法恢复。",
-        "delete-rules-title": "确定要删除 { count, plural, =1 {1 条规则} other {# 条规则} } 吗？",
+        "delete-rules-title": "确定要删除{ count, plural, =1 {1 条规则} other {# 条规则} }吗？",
         "delete-template-text": "请注意，在确认后，模板将无法恢复。",
-        "delete-template-title": "确定要删除模板 '{{templateName}}' 吗？",
+        "delete-template-title": "确定要删除模板'{{templateName}}' 吗？",
         "delete-templates-text": "请注意，在确认后，模板将无法恢复。",
-        "delete-templates-title": "确定要删除 { count, plural, =1 {1 个模板} other {# 个模板} } 吗？",
+        "delete-templates-title": "确定要删除{ count, plural, =1 {1 个模板} other {# 个模板} }吗？",
         "deleted": "已删除",
         "delivery-method": {
             "delivery-method": "推送方式",
@@ -3262,21 +3401,25 @@
             "email-preview": "Email 通知预览",
             "slack": "Slack",
             "slack-preview": "Slack 通知预览",
-            "microsoft-teams": "Microsoft Teams",
-            "microsoft-teams-preview": "Microsoft Teams 通知预览",
+            "microsoft-teams": "微软Teams",
+            "microsoft-teams-preview": "微软Teams通知预览",
             "sms": "SMS",
-            "sms-preview": "SMS 通知预览",
+            "sms-preview": "SMS通知预览",
             "web": "Web",
-            "web-preview": "Web 通知预览"
+            "web-preview": "Web通知预览",
+            "mobile-app": "移动应用",
+            "mobile-app-preview": "移动应用通知预览"
         },
-        "delivery-method-not-configure-click": "推送方式未配置，点击进行设置。",
-        "delivery-method-not-configure-contact": "推送方式未配置，请与您的系统管理员联系。",
+        "delivery-method-not-configure-click": "单击进行推送方式设置。",
+        "delivery-method-not-configure-contact": "推送方式未设置，请与系统管理员联系。",
         "delivery-methods": "推送方式",
         "description": "描述",
         "device-activity-trigger-settings": "设备活动触发设置",
         "device-list-rule-hint": "如果该字段为空，则触发器将适用于所有设备。",
         "device-profiles-list-rule-hint": "如果该字段为空，则触发器将适用于所有设备配置。",
-        "disabled": "已禁用",
+        "disabled": "禁用",
+        "edge-trigger-settings": "Edge触发设置",
+        "edge-list-rule-hint": "如果字段为空则将触发应用于所有Edge实例",
         "edit-notification-recipients-group": "编辑通知收件人群组",
         "edit-notification-template": "编辑通知模板",
         "edit-rule": "编辑规则",
@@ -3307,7 +3450,7 @@
         "mark-as-read": "标记为已读",
         "message": "信息",
         "message-required": "信息必填。",
-        "message-max-length": "提示信息应该少于或等于 {{ length }} 个字符",
+        "message-max-length": "提示信息应该小于或等于 {{ length }}个字符",
         "name": "名称",
         "name-required": "名称必填",
         "new-notification": "新通知",
@@ -3319,11 +3462,13 @@
         "no-rule": "未配置规则",
         "no-rules-notification": "没有规则通知",
         "no-severity-found": "未找到严重性级别",
-        "no-severity-matching": "未找到 '{{severity}}'。",
-        "no-template-matching": "未找到与 '{{template}}' 匹配的资源。",
-        "not-found-slack-recipient": "未找到 Slack 的收件人",
+        "no-severity-matching": "未找到'{{severity}}'。",
+        "no-template-matching": "未找到与'{{template}}' 匹配的资源。",
+        "not-found-slack-recipient": "未找到Slack的收件人",
         "notification": "通知",
         "notification-center": "通知中心",
+        "notification-tap-action": "单击通知操作",
+        "notification-tap-action-hint": "如果未启用将使用默认警报仪表板",
         "notify": "通知",
         "notify-again": "再次通知",
         "notify-alarm-action": {
@@ -3358,7 +3503,7 @@
             "users-entity-owner": "实体所有者的用户"
         },
         "recipients": "收件人",
-        "notification-recipients": "通知 / 收件人",
+        "notification-recipients": "通知/收件人",
         "recipients-count": "{ count, plural, =1 {1 个收件人} other {# 个收件人} }",
         "recipients-required": "收件人必填。",
         "refresh-allow-delivery-method": "刷新允许推送方式",
@@ -3386,16 +3531,17 @@
         "search-rules": "搜索规则",
         "search-templates": "搜索模板",
         "see-documentation": "查看文档",
-        "selected-notifications": "已选择 { count, plural, =1 {1 个通知} other {# 个通知} }",
-        "selected-recipients": "已选择 { count, plural, =1 {1 个收件人} other {# 个收件人} }",
-        "selected-requests": "已选择 { count, plural, =1 {1 个请求} other {# 个请求} }",
-        "selected-rules": "已选择 { count, plural, =1 {1 个规则} other {# 个规则} }",
-        "selected-template": "已选择 { count, plural, =1 {1 个模板} other {# 个模板} }",
+        "selected-notifications": "已选择{ count, plural, =1 {1 个通知} other {# 个通知} }",
+        "selected-recipients": "已选择{ count, plural, =1 {1 个收件人} other {# 个收件人} }",
+        "selected-requests": "已选择{ count, plural, =1 {1 个请求} other {# 个请求} }",
+        "selected-rules": "已选择{ count, plural, =1 {1 个规则} other {# 个规则} }",
+        "selected-template": "已选择{ count, plural, =1 {1 个模板} other {# 个模板} }",
         "send-notification": "发送通知",
         "sent": "已发送",
-        "notification-sent": "通知 / 已发送",
+        "setup": "步骤",
+        "notification-sent": "通知/已发送",
         "set-entity-from-notification": "将通知中的实体设置为仪表盘状态",
-        "slack-chanel-type": "Slack 频道类型",
+        "slack-chanel-type": "Slack频道类型",
         "slack-chanel-types": {
             "direct": "直接消息",
             "private-channel": "私有频道",
@@ -3406,6 +3552,7 @@
         "stop-escalation-alarm-status-become": "停止逐步升级，将告警状态设置为：",
         "subject": "主题",
         "subject-required": "主题必填。",
+        "subject-max-length": "主题应小于或等于{{ length }}个字符",
         "template": "模板",
         "template-name": "模板名称",
         "template-required": "模板必填。",
@@ -3421,10 +3568,13 @@
             "rule-engine-lifecycle-event": "规则引擎生命周期事件",
             "rule-node": "规则节点",
             "new-platform-version": "新的平台版本",
-            "rate-limits": "超过速率限制"
+            "rate-limits": "超过速率限制",
+            "edge-communication-failure": "Edge通信故障",
+            "edge-connection": "Edge连接",
+            "task-processing-failure": "任务处理失败"
         },
         "templates": "模板",
-        "notification-templates": "通知 / 模板",
+        "notification-templates": "通知/模板",
         "tenant-profiles-list-rule-hint": "如果字段为空，触发器将应用于所有租户配置",
         "tenants-list-rule-hint": "如果字段为空，触发器将应用于所有租户",
         "threshold": "阈值",
@@ -3442,17 +3592,24 @@
             "rule-engine-lifecycle-event": "规则引擎生命周期事件",
             "new-platform-version": "新的平台版本",
             "rate-limits": "超过速率限制",
+            "edge-connection": "Edge连接",
+            "edge-communication-failure": "Edge通信故障",
+            "task-processing-failure": "任务处理失败",
             "trigger": "触发器",
             "trigger-required": "触发器必填。"
         },
         "type": "类型",
         "unread": "未读",
         "updated": "已更新",
+        "use-deprecated-webhook-connectors": "使用已弃用的Webhook连接器",
+        "use-old-api": "使用旧API",
         "use-template": "使用模板",
         "view-all": "查看全部",
         "warning": "警告",
         "webhook-url": "Webhook URL",
-        "webhook-url-required": "需要填写Webhook URL",
+        "webhook-url-required": "Webhook URL必填。",
+        "workflow-url": "Workflow URL",
+        "workflow-url-required": "Workflow URL必填。",
         "channel-name": "频道名称",
         "channel-name-required": "需要填写频道名称",
         "settings": {
@@ -3477,8 +3634,8 @@
         "checksum-hint": "如果校验和为空，会自动生成",
         "checksum-algorithm": "校验和算法",
         "checksum-copied-message": "包校验和已复制到剪贴板",
-        "change-firmware": "固件的更改可能会导致 { count, plural, =1 {1 个设备} other {# 个设备} } 的更新。",
-        "change-software": "软件的更改可能会导致 { count, plural, =1 {1 个设备} other {# 个设备} } 的更新。",
+        "change-firmware": "固件的更改可能会导致{ count, plural, =1 {1 个设备} other {# 个设备} } 的更新。",
+        "change-software": "软件的更改可能会导致{ count, plural, =1 {1 个设备} other {# 个设备} } 的更新。",
         "chose-compatible-device-profile": "上传的包仅适用于具有所选配置的设备。",
         "chose-firmware-distributed-device": "选择将分发到设备的固件",
         "chose-software-distributed-device": "选择将分发到设备的软件",
@@ -3491,7 +3648,7 @@
         "delete-ota-update-text": "请注意：确认后，OTA升级将不可恢复。",
         "delete-ota-update-title": "确定要删除 '{{title}}' OTA升级吗？",
         "delete-ota-updates-text": "请注意：确认后，所有选中的OTA升级将被删除。",
-        "delete-ota-updates-title": "确定要删除 { count, plural, =1 {1 OTA升级} other {# OTA升级} } 吗？",
+        "delete-ota-updates-title": "确定要删除{ count, plural, =1 {1 OTA升级} other {# OTA升级} }吗？",
         "description": "说明",
         "direct-url": "直接URL",
         "direct-url-copied-message": "包直接URL已复制到剪贴板",
@@ -3511,13 +3668,14 @@
         "ota-update": "OTA 升级",
         "ota-update-details": "OTA 升级详情",
         "ota-updates": "OTA 升级",
+        "package-file": "包文件",
         "package-type": "包类型",
         "packages-repository": "包仓库",
         "search": "搜索包",
-        "selected-package": "{ count, plural, =1 {1 个包} other {# 个包} } 选中",
+        "selected-package": "{ count, plural, =1 {1个包} other {#个包} }选中",
         "title": "标题",
         "title-required": "标题必填。",
-        "title-max-length": "标题长度应该少于256个字符。",
+        "title-max-length": "标题长度应该小于256个字符。",
         "types": {
             "firmware": "固件",
             "software": "软件"
@@ -3528,9 +3686,8 @@
         "version-required": "版本必填。",
         "version-tag": "版本标签",
         "version-tag-hint": "自定义标签应与您设备报告的软件包版本相匹配。",
-        "version-max-length": "版本长度应该少于256个字符",
-        "warning-after-save-no-edit": "上传包后，您将无法修改标题、版本、设备配置和包类型。",
-        "package-file": "包文件"
+        "version-max-length": "版本长度应该小于256个字符",
+        "warning-after-save-no-edit": "上传包后，您将无法修改标题、版本、设备配置和包类型。"
     },
     "position": {
         "top": "顶部",
@@ -3566,8 +3723,8 @@
             "2fa": "双因素认证",
             "2fa-description": "双因素认证可保护您的帐户免受未经授权的访问。在登录时必须输入安全验证码。",
             "authenticate-with": "可以使用以下身份验证：",
-            "disable-2fa-provider-text": "禁用 {{ name }} 会降低帐户的安全性",
-            "disable-2fa-provider-title": "确定要禁用 {{ name }} 吗？",
+            "disable-2fa-provider-text": "禁用{{ name }}会降低帐户的安全性",
+            "disable-2fa-provider-title": "确定要禁用 {{ name }}吗？",
             "get-new-code": "获取新验证码",
             "main-2fa-method": "用作主要的双因素认证方法",
             "dialog": {
@@ -3598,16 +3755,16 @@
                 "verification-code-invalid": "验证码格式无效",
                 "verification-code-incorrect": "验证码不正确",
                 "verification-code-many-request": "请求过多，请检查验证码",
-                "verification-step-description": "输入发送到 {{ address }} 的6位代码",
+                "verification-step-description": "输入发送到{{ address }}的6位代码",
                 "verification-step-label": "验证"
             },
             "provider": {
                 "email": "电子邮件",
                 "email-description": "使用您电子邮件中的验证码进行身份验证。",
-                "email-hint": "身份验证码通过电子邮件发送到 {{ info }}",
+                "email-hint": "身份验证码通过电子邮件发送到{{ info }}",
                 "sms": "SMS",
-                "sms-description": "使用短信进行身份验证。当登录时，系统会通过短信向您发送验证码。",
-                "sms-hint": "身份验证码通过短信发送到 {{ info }}",
+                "sms-description": "使用短信进行身份验证，当登录时系统会通过短信向您发送验证码。",
+                "sms-hint": "身份验证码通过短信发送到{{ info }}",
                 "totp": "验证APP",
                 "totp-description": "使用手机上的Google Authenticator、Authy或Duo等应用程序进行身份验证，它将生成用于登录的验证码。",
                 "totp-hint": "已为您的帐户设置验证APP",
@@ -3620,7 +3777,7 @@
             "at-least": "至少：",
             "character": "{ count, plural, =1 {1 位字符} other {# 位字符} }",
             "digit": "{ count, plural, =1 {1 位数字} other {# 位数字} }",
-            "incorrect-password-try-again": "密码不正确。再试一次",
+            "incorrect-password-try-again": "密码不正确再试一次。",
             "lowercase-letter": "{ count, plural, =1 {1 位小写字母} other {# 位小写字母} }",
             "new-passwords-not-match": "新密码不匹配",
             "password-should-not-contain-spaces": "密码不应包含空格",
@@ -3646,7 +3803,7 @@
         },
         "from-relations": "向外的关联",
         "to-relations": "向内的关联",
-        "selected-relations": "已选择 { count, plural, =1 {1 个关联} other {# 个关联} }",
+        "selected-relations": "已选择{ count, plural, =1 {1 个关联} other {# 个关联} }",
         "type": "类型",
         "to-entity-type": "到实体类型",
         "to-entity-name": "到实体名称",
@@ -3657,17 +3814,17 @@
         "delete": "删除关联",
         "relation-type": "关联类型",
         "relation-type-required": "关联类型必填",
-        "relation-type-max-length": "关联类型长度应该少于256个字符。",
+        "relation-type-max-length": "关联类型长度应该小于256个字符。",
         "any-relation-type": "任何类型",
         "add": "添加关联",
         "edit": "编辑关联",
-        "delete-to-relation-title": "确定要删除实体 '{{entityName}}' 的关联吗？",
-        "delete-to-relation-text": "确定删除后实体 '{{entityName}}' 将取消与当前实体的关联关系。",
-        "delete-to-relations-title": "确定要删除 { count, plural, =1 {1 个关联} other {# 个关联} }吗？",
+        "delete-to-relation-title": "确定要删除实体'{{entityName}}'的关联吗？",
+        "delete-to-relation-text": "确定删除后实体'{{entityName}}'将取消与当前实体的关联关系。",
+        "delete-to-relations-title": "确定要删除{ count, plural, =1 {1 个关联} other {# 个关联} }吗？",
         "delete-to-relations-text": "确定删除所有选择的关联关系后，与当前实体对应的所有关联关系将被移除。",
-        "delete-from-relation-title": "确定要从实体 '{{entityName}}' 删除关联吗？",
-        "delete-from-relation-text": "确定删除后，当前实体将与实体 '{{entityName}}' 取消关联",
-        "delete-from-relations-title": "确定删除 { count, plural, =1 {1 个关联} other {# 个关联} } 吗？",
+        "delete-from-relation-title": "确定要从实体'{{entityName}}' 删除关联吗？",
+        "delete-from-relation-text": "确定删除后当前实体将与实体 '{{entityName}}'取消关联",
+        "delete-from-relations-title": "确定删除{ count, plural, =1 {1 个关联} other {# 个关联} }吗？",
         "delete-from-relations-text": "确定删除所有选择的关联关系后，当前实体将与对应的实体取消关联",
         "remove-relation-filter": "移除关联筛选器",
         "remove-filter": "移除过滤器",
@@ -3684,20 +3841,22 @@
         "copyId": "复制资源ID",
         "delete": "删除资源",
         "delete-resource-text": "请注意：确认后，资源将不可恢复。",
-        "delete-resource-title": "确定要删除资源 '{{resourceTitle}}' 吗？",
-        "delete-resources-action-title": "删除 { count, plural, =1 {1 个资源} other {# 个资源} }",
+        "delete-resource-title": "确定要删除资源'{{resourceTitle}}'吗？",
+        "delete-resources-action-title": "删除{ count, plural, =1 {1 个资源} other {# 个资源} }",
         "delete-resources-text": "请注意：确认后，所有选定的资源将被删除。",
-        "delete-resources-title": "确定要删除 { count, plural, =1 {1 个资源} other {# 个资源} }吗？",
+        "delete-resources-title": "确定要删除{ count, plural, =1 {1 个资源} other {# 个资源} }吗？",
         "download": "下载资源",
         "drop-file": "拖放资源文件或单击以选择要上传的文件。",
         "drop-resource-file-or": "拖放一个资源文件或者",
         "empty": "资源为空",
         "file-name": "文件名称",
         "idCopiedMessage": "资源ID已复制到剪贴板",
-        "no-resource-matching": "未找到与 '{{widgetsBundle}}' 匹配的资源。",
+        "no-resource-matching": "未找到与'{{widgetsBundle}}'匹配的资源。",
         "no-resource-text": "未找到资源",
         "open-widgets-bundle": "打开部件库",
         "resource": "资源",
+        "resource-file": "资源文件",
+        "resource-files": "资源文件",
         "resource-library-details": "资源库详情",
         "resource-type": "资源类型",
         "resources-library": "资源库",
@@ -3706,15 +3865,22 @@
         "system": "系统",
         "title": "标题",
         "title-required": "标题是必填项。",
-        "title-max-length": "标题长度应该少于256个字符。",
+        "title-max-length": "标题长度应该小于256个字符。",
         "type": {
             "jks": "JKS",
             "js-module": "JS 模块",
             "lwm2m-model": "LWM2M 模型",
             "pkcs-12": "PKCS #12"
-        },
-        "resource-file": "资源文件",
-        "resource-files": "资源文件"
+        }
+    },
+    "rpc": {
+        "error": {
+            "target-device-is-not-set": "目标设备未设置！",
+            "invalid-target-entity": "<b>{{entityType}}</b>实体不支持RPC命令。",
+            "failed-to-resolve-target-device": "无法解析目标设备！",
+            "request-timeout": "请求超时",
+            "rpc-http-error": "错误: {{status}}-{{statusText}}"
+        }
     },
     "rulechain": {
         "rulechain": "规则链",
@@ -3724,7 +3890,7 @@
         "delete": "删除规则链",
         "name": "名称",
         "name-required": "名称必填。",
-        "name-max-length": "名称长度应该少于256个字符。",
+        "name-max-length": "名称长度应该小于256个字符。",
         "description": "说明",
         "add": "添加规则链",
         "set-root": "设置为根规则链",
@@ -3733,8 +3899,8 @@
         "delete-rulechain-title": " 确定要删除规则链'{{ruleChainName}}'吗？",
         "delete-rulechain-text": "请注意，确认后，规则链和所有相关数据将不可恢复。",
         "delete-rulechains-title": "确定要删除{count, plural, =1 { 1 个规则链} other {# 个规则链} }吗？",
-        "delete-rulechains-action-title": "删除 { count, plural, =1 {1 个规则链} other {# 个规则链} }",
-        "delete-rulechains-text": "请注意：确认后，所有选定的规则链将被删除，所有相关的数据将不可恢复。",
+        "delete-rulechains-action-title": "删除{ count, plural, =1 {1 个规则链} other {# 个规则链} }",
+        "delete-rulechains-text": "请注意：确认后所有选定的规则链将被删除，所有相关的数据将不可恢复。",
         "add-rulechain-text": "添加规则链",
         "no-rulechains-text": "未找到规则链",
         "rulechain-details": "规则链详情",
@@ -3755,18 +3921,18 @@
         "management": "规则集管理",
         "debug-mode": "调试模式",
         "search": "查找规则链",
-        "selected-rulechains": "已选择 { count, plural, =1 {1 个规则链} other {# 个规则链} }",
+        "selected-rulechains": "已选择{ count, plural, =1 {1 个规则链} other {# 个规则链} }",
         "open-rulechain": "打开规则链",
         "edge-template-root": "模版根链",
         "assign-to-edge": "分配给边缘",
         "edge-rulechain": "边缘规则链",
-        "unassign-rulechain-from-edge-text": "确认后，规则链将会取消分配，边缘无法访问。",
-        "unassign-rulechains-from-edge-title": "确定要取消分配 { count, plural, =1 {1 个规则链} other {# 个规则链} }吗？",
+        "unassign-rulechain-from-edge-text": "确认后规则链将会取消分配，边缘无法访问。",
+        "unassign-rulechains-from-edge-title": "确定要取消分配{ count, plural, =1 {1 个规则链} other {# 个规则链} }吗？",
         "unassign-rulechains-from-edge-text": "确认后，选定的规则链将会取消分配，边缘无法访问。",
         "assign-rulechain-to-edge-title": "分配规则链给边缘",
         "assign-rulechain-to-edge-text": "请选择要分配给边缘的规则链",
         "set-edge-template-root-rulechain": "设置为边缘模版根规则链",
-        "set-edge-template-root-rulechain-title": "确定将 '{{ruleChainName}}' 设置为边缘模版根规则链吗？",
+        "set-edge-template-root-rulechain-title": "确定将'{{ruleChainName}}' 设置为边缘模版根规则链吗？",
         "set-edge-template-root-rulechain-text": "确认后，将会成为边缘模版根规则链，且它会成为新创建边缘的根规则链。",
         "invalid-rulechain-type-error": "不能导入规则链：无效的规则链类型。期望类型为{{expectedRuleChainType}}。",
         "set-auto-assign-to-edge": "将规则链分配给新创建的边缘",
@@ -3775,7 +3941,7 @@
         "unset-auto-assign-to-edge": "不将规则链分配给边缘",
         "unset-auto-assign-to-edge-title": "确定不再将规则链'{{ruleChainName}}'自动分配给新创建的边缘吗？",
         "unset-auto-assign-to-edge-text": "确认后，将不再自动分配规则链给新创建的边缘。",
-        "unassign-rulechain-title": "确定要取消分配规则链 '{{ruleChainName}}' 吗？",
+        "unassign-rulechain-title": "确定要取消分配规则链'{{ruleChainName}}' 吗？",
         "unassign-rulechains": "取消分配规则链"
     },
     "rulenode": {
@@ -3788,7 +3954,7 @@
         "add": "添加规则节点",
         "name": "名称",
         "name-required": "名称必填。",
-        "name-max-length": "名称长度应该少于256个字符。",
+        "name-max-length": "名称长度应该小于256个字符。",
         "type": "类型",
         "rule-node-description": "规则节点描述",
         "delete": "删除规则节点",
@@ -3798,7 +3964,7 @@
         "delete-selected": "删除选定",
         "create-nested-rulechain": "创建嵌套规则链",
         "select-all": "选择全部",
-        "copy-selected": "选择副本",
+        "copy-selected": "复制",
         "deselect-all": "取消选择",
         "rulenode-details": "规则节点详情",
         "debug-mode": "调试模式",
@@ -3814,27 +3980,27 @@
         "link-labels": "链接标签",
         "link-labels-required": "链接标签必填。",
         "no-link-labels-found": "未找到链接标签",
-        "no-link-label-matching": "未找到匹配 '{{label}}' 的链接标签。",
+        "no-link-label-matching": "未找到匹配'{{label}}'的链接标签。",
         "create-new-link-label": "创建链接标签",
         "type-filter": "筛选器",
         "type-filter-details": "使用配置条件筛选传入消息",
         "type-enrichment": "属性集",
         "type-enrichment-details": "向消息元数据中添加附加信息",
         "type-transformation": "变换",
-        "type-transformation-details": "更改消息 Payload 和元数据",
+        "type-transformation-details": "更改消息Payload和元数据",
         "type-action": "动作",
         "type-action-details": "执行特别动作",
-        "type-external": "外部的",
+        "type-external": "外部",
         "type-external-details": "与外部系统交互",
         "type-rule-chain": "规则链",
         "type-rule-chain-details": "将传入消息转发到指定的规则链",
-        "type-flow": "Flow",
-        "type-flow-details": "组织消息流",
+        "type-flow": "流",
+        "type-flow-details": "流详情",
         "type-input": "输入",
         "type-input-details": "规则链的逻辑输入，将传入消息转发到下一个相关规则节点",
         "type-unknown": "未知",
         "type-unknown-details": "未解析的规则节点",
-        "directive-is-not-loaded": "定义的配置指令 '{{directiveName}}' 不可用。",
+        "directive-is-not-loaded": "定义的配置指令'{{directiveName}}'不可用。",
         "ui-resources-load-error": "加载配置UI资源失败。",
         "invalid-target-rulechain": "无法解析目标规则链！",
         "test-script-function": "测试脚本功能",
@@ -3850,24 +4016,26 @@
         "test": "测试",
         "help": "帮助",
         "reset-debug-mode": "重置所有节点中的调试模式",
-        "test-with-this-message": "使用此消息进行{{test}}测试"
+        "test-with-this-message": "使用此消息进行{{test}}测试",
+        "queue-hint": "选择一个队列将消息转发到另一个队列，默认情况下使用'Main'队列。",
+        "queue-singleton-hint": "选择一个队列以在多实体中转发消息,默认情况下使用'Main'队列。"
     },
     "timezone": {
         "timezone": "时区",
         "select-timezone": "选择时区",
-        "no-timezones-matching": "未找到与 '{{timezone}}' 匹配的时区。",
+        "no-timezones-matching": "未找到与'{{timezone}}'匹配的时区。",
         "timezone-required": "时区必填。",
         "browser-time": "浏览器时间"
     },
     "queue": {
         "queue-name": "队列",
         "no-queues-found": "未找到队列",
-        "no-queues-matching": "未找到匹配 '{{queue}}' 的队列",
+        "no-queues-matching": "未找到匹配'{{queue}}'的队列",
         "select-name": "选择队列名称",
         "name": "名称",
         "name-required": "队列名称必填。",
         "name-unique": "队列名称必须唯一。",
-        "name-pattern": "队列名称不能包含ASCII字母数字以外的字符, '.', '_' 和 '-'等。",
+        "name-pattern": "队列名称不能包含ASCII字母数字以外的字符,'.','_'和'-'等。",
         "queue-required": "队列必填。",
         "topic-required": "队列主题必填。",
         "poll-interval-required": "轮询间隔必填。",
@@ -3890,11 +4058,11 @@
         "submit-strategy-type-required": "提交策略类型必填。",
         "processing-strategy-type-required": "处理策略类型必填。",
         "queues": "队列",
-        "selected-queues": "已选择 { count, plural, =1 {1 个队列} other {# 个队列} }",
-        "delete-queue-title": "确定要删除 '{{queueName}}' 队列吗？",
-        "delete-queues-title": "确定要删除 { count, plural, =1 {1 个队列} other {# 个队列} }吗？",
-        "delete-queue-text": "请注意：确认后，队列和所有相关数据将不可恢复。",
-        "delete-queues-text": "确认后，所有选定队列都将被删除，无法访问。",
+        "selected-queues": "已选择{ count, plural, =1 {1 个队列} other {# 个队列} }",
+        "delete-queue-title": "确定要删除'{{queueName}}'队列吗？",
+        "delete-queues-title": "确定要删除{ count, plural, =1 {1 个队列} other {# 个队列} }吗？",
+        "delete-queue-text": "请注意：确认后队列和所有相关数据将不可恢复。",
+        "delete-queues-text": "确认后所有选定队列都将被删除并无法访问。",
         "search": "搜索队列",
         "add": "添加队列",
         "details": "队列详情",
@@ -3912,6 +4080,7 @@
         "immediate-processing": "即时处理",
         "consumer-per-partition": "每个分区消费者单独轮询消息",
         "consumer-per-partition-hint": "每个分区启用单独的消费者",
+        "duplicate-msg-to-all-partitions": "重复给所有分区的消息",
         "processing-timeout": "处理超时（毫秒）",
         "batch-size": "批量处理大小",
         "retries": "重试次数 (0 – 无限制)",
@@ -3925,7 +4094,7 @@
         "description-hint": "此文本将显示在队列说明中，而不是所选策略中",
         "alt-description": "提交策略：{{submitStrategy}}，处理策略：{{processingStrategy}}",
         "custom-properties": "自定义属性",
-        "custom-properties-hint": "自定义队列（主题）创建属性，例如 'retention.ms:604800000;retention.bytes:1048576000'",
+        "custom-properties-hint": "自定义队列（主题）创建属性例如'retention.ms:604800000;retention.bytes:1048576000'",
         "strategies": {
             "sequential-by-originator-label": "按发起者顺序处理",
             "sequential-by-originator-hint": "在确认设备A的前一条消息之前，不会提交设备A的新消息",
@@ -3951,6 +4120,15 @@
             "retry-failed-and-timeout-hint": "重试处理包中所有失败和超时的消息"
         }
     },
+    "queue-statistics": {
+        "queue-statistics": "队列统计",
+        "no-queue-statistics-matching": "未找到与'{{entity}}'匹配的队列统计信息。",
+        "queue-statistics-required": "队列统计必填。",
+        "list-of-queue-statistics": "{ count, plural, =1 {个队列统计} other {对列统计#列表} }",
+        "selected-queue-statistics": "选中{ count, plural, =1 {1个队列统计} other {#对列统计} }",
+        "no-queue-statistics-text": "找不到队列统计数据",
+        "queue-statistics-starts-with": "队列统计的名称以始于'{{prefix}}'"
+    },
     "server-error": {
         "general": "一般服务器错误",
         "authentication": "授权错误",
@@ -3975,12 +4153,12 @@
         "add-tenant-text": "添加租户",
         "no-tenants-text": "未找到租户",
         "tenant-details": "租客详情",
-        "title-max-length": "标题长度应该少于256个字符。",
+        "title-max-length": "标题长度应该小于256个字符。",
         "delete-tenant-title": "确定要删除租户'{{tenantTitle}}'吗？",
-        "delete-tenant-text": "请注意：确认后，租户和所有相关数据将不可恢复。",
-        "delete-tenants-title": "确定要删除 {count,plural,=1 {1 个租户} other {# 个租户} } 吗？",
-        "delete-tenants-action-title": "删除 { count, plural, =1 {1 个租户} other {# 个租户} }",
-        "delete-tenants-text": "请注意：确认后，所有选定的租户将被删除，所有相关数据将不可恢复。",
+        "delete-tenant-text": "请注意：确认后租户和所有相关数据将不可恢复。",
+        "delete-tenants-title": "确定要删除{count,plural,=1 {1 个租户} other {# 个租户} }吗？",
+        "delete-tenants-action-title": "删除{ count, plural, =1 {1 个租户} other {# 个租户} }",
+        "delete-tenants-text": "请注意：确认后所有选定的租户将被删除，所有相关数据将不可恢复。",
         "title": "标题",
         "title-required": "标题必填。",
         "description": "说明",
@@ -3989,10 +4167,10 @@
         "copyId": "复制租户ID",
         "idCopiedMessage": "租户ID已经复制到粘贴板",
         "select-tenant": "选择租户",
-        "no-tenants-matching": "未找到匹配 '{{entity}}' 的租户",
+        "no-tenants-matching": "未找到匹配'{{entity}}'的租户",
         "tenant-required": "租户必填",
         "search": "查找租户",
-        "selected-tenants": "已选择 { count, plural, =1 {1 个租户} other {# 个租户} }",
+        "selected-tenants": "已选择{ count, plural, =1 {1 个租户} other {# 个租户} }",
         "isolated-tb-rule-engine": "使用独立的规则引擎服务",
         "isolated-tb-rule-engine-details": "每个独立租户需要单独的规则引擎微服务"
     },
@@ -4004,10 +4182,10 @@
         "edit": "编辑租户配置",
         "tenant-profile-details": "租户配置详细信息",
         "no-tenant-profiles-text": "未找到租户配置",
-        "name-max-length": "名称长度必须少于256个字符",
+        "name-max-length": "名称长度必须小于256个字符",
         "search": "查找租户配置",
-        "selected-tenant-profiles": "已选择 { count, plural, =1 {1 个租户配置} other {# 个租户配置} }",
-        "no-tenant-profiles-matching": "未找到与 '{{entity}}' 匹配的租户配置。",
+        "selected-tenant-profiles": "已选择{ count, plural, =1 {1 个租户配置} other {# 个租户配置} }",
+        "no-tenant-profiles-matching": "未找到与'{{entity}}'匹配的租户配置。",
         "tenant-profile-required": "租户配置必填",
         "idCopiedMessage": "租户配置ID已复制到剪贴板",
         "set-default": "设置该租户配置为默认",
@@ -4019,18 +4197,18 @@
         "profile-configuration": "配置设置",
         "description": "说明",
         "default": "默认",
-        "delete-tenant-profile-title": "确定要删除租户配置 '{{tenantProfileName}}'吗？",
+        "delete-tenant-profile-title": "确定要删除租户配置'{{tenantProfileName}}'吗？",
         "delete-tenant-profile-text": "请注意：确认后，租户配置和所有相关数据将不可恢复。",
-        "delete-tenant-profiles-title": "确定要删除 { count, plural, =1 {1 个租户配置} other {# 个租户配置} }吗？",
+        "delete-tenant-profiles-title": "确定要删除{ count, plural, =1 {1 个租户配置} other {# 个租户配置} }吗？",
         "delete-tenant-profiles-text": "请注意：确认后，所有选定的租户配置将被删除，所有相关数据将不可恢复。",
-        "set-default-tenant-profile-title": "确定要将租户配置 '{{tenantProfileName}}' 设为默认值吗？",
-        "set-default-tenant-profile-text": "确认后，此租户配置将被标记为默认配置，并将用于未指定配置的新租户。",
+        "set-default-tenant-profile-title": "确定要将租户配置'{{tenantProfileName}}'设为默认值吗？",
+        "set-default-tenant-profile-text": "确认后此租户配置将被标记为默认配置并将用于未指定配置的新租户。",
         "no-tenant-profiles-found": "未找到租户配置。",
         "create-new-tenant-profile": "创建租户配置",
         "create-tenant-profile": "创建租户配置",
         "import": "导入租户配置",
         "export": "导出租户配置",
-        "export-failed-error": "无法导出租户配置: {{error}}",
+        "export-failed-error": "无法导出租户配置:{{error}}",
         "tenant-profile-file": "租户配置",
         "invalid-tenant-profile-file-error": "无法导入租户配置：无效的租户配置数据结构。",
         "advanced-settings": "高级设置",
@@ -4062,6 +4240,9 @@
         "maximum-resources-sum-data-size": "资源文件总大小",
         "maximum-resources-sum-data-size-required": "资源文件总大小必填。",
         "maximum-resources-sum-data-size-range": "资源文件总大小不能为负数",
+        "maximum-resource-size": "最大资源文件大小（字节）",
+        "maximum-resource-size-required": "最大资源文件大小是必需的",
+        "maximum-resource-size-range": "最大资源文件大小不能为负数",
         "maximum-ota-packages-sum-data-size": "OTA包文件总大小",
         "maximum-ota-package-sum-data-size-required": "OTA包文件总大小必填。",
         "maximum-ota-package-sum-data-size-range": "OTA包文件总大小不能为负数",
@@ -4071,6 +4252,12 @@
         "transport-device-msg-rate-limit": "设备消息",
         "transport-device-telemetry-msg-rate-limit": "设备遥测数据点",
         "transport-device-telemetry-data-points-rate-limit": "设备遥测消息",
+        "transport-gateway-msg-rate-limit": "传输网关消息",
+        "transport-gateway-telemetry-msg-rate-limit": "传输网关遥测消息",
+        "transport-gateway-telemetry-data-points-rate-limit": "传输网关遥测数据点",
+        "transport-gateway-device-msg-rate-limit": "传输网关设备消息",
+        "transport-gateway-device-telemetry-msg-rate-limit": "传输网关设备遥测消息",
+        "transport-gateway-device-telemetry-data-points-rate-limit": "传输网关设备遥测数据点",
         "tenant-entity-export-rate-limit": "实体版本创建",
         "tenant-entity-import-rate-limit": "实体版本加载",
         "tenant-notification-request-rate-limit": "通知请求",
@@ -4084,12 +4271,12 @@
         "max-r-e-executions": "最大规则引擎执行数",
         "max-r-e-executions-required": "最大规则引擎执行数必填。",
         "max-r-e-executions-range": "最大规则引擎执行数不能为负",
-        "max-j-s-executions": "最大 JavaScript 执行数",
-        "max-j-s-executions-required": "最大 JavaScript 执行数必填。",
-        "max-j-s-executions-range": "最大 JavaScript 执行数不能为负数",
-        "max-tbel-executions": "最大 TBEL 执行数",
-        "max-tbel-executions-required": "需要指定最大 TBEL 执行数。",
-        "max-tbel-executions-range": "最大 TBEL 执行数不能为负数。",
+        "max-j-s-executions": "最大JavaScript执行数",
+        "max-j-s-executions-required": "最大JavaScript执行数必填。",
+        "max-j-s-executions-range": "最大JavaScript执行数不能为负数",
+        "max-tbel-executions": "最大TBEL执行数",
+        "max-tbel-executions-required": "需要指定最大TBEL执行数。",
+        "max-tbel-executions-range": "最大TBEL执行数不能为负数。",
         "max-d-p-storage-days": "最大存储点天",
         "max-d-p-storage-days-required": "最大存储点天必填。",
         "max-d-p-storage-days-range": "最大存储点天不能为负数",
@@ -4126,7 +4313,7 @@
         "queues-with-count": "队列 ({{count}})",
         "tenant-rest-limits": "租户REST请求",
         "customer-rest-limits": "客户REST请求",
-        "incorrect-pattern-for-rate-limits": "格式为以冒号分割容量与周期（秒）并以逗号分割配置对，例如 100:1,2000:60",
+        "incorrect-pattern-for-rate-limits": "格式为以冒号分割容量与周期（秒）并以逗号分割配置对例如 100:1,2000:60",
         "too-small-value-zero": "数值必须大于0",
         "too-small-value-one": "数值必须大于1",
         "queue-size-is-limited-by-system-configuration": "队列的大小也受系统配置的限制。",
@@ -4152,7 +4339,13 @@
             "edit-transport-device-msg-title": "编辑传输设备消息速率限制",
             "edit-transport-device-telemetry-msg-title": "编辑传输设备遥测消息速率限制",
             "edit-transport-device-telemetry-data-points-title": "编辑传输设备遥测数据点速率限制",
-            "edit-tenant-rest-limits-title": "Edit REST requests for tenant rate limits",
+            "edit-transport-gateway-msg-title": "编辑传输网关消息速率限制",
+            "edit-transport-gateway-telemetry-msg-title": "编辑传输网关遥测消息速率限制",
+            "edit-transport-gateway-telemetry-data-points-title": "编辑传输网关遥测数据点率限制",
+            "edit-transport-gateway-device-msg-title": "编辑传输网关设备消息速率限制",
+            "edit-transport-gateway-device-telemetry-msg-title": "编辑传输网关设备遥测消息速率限制",
+            "edit-transport-gateway-device-telemetry-data-points-title": "编辑传输网关设备遥测数据点速率限制",
+            "edit-tenant-rest-limits-title": "编辑租户费率限制的休息请求",
             "edit-customer-rest-limits-title": "编辑客户REST请求速率限制",
             "edit-ws-limit-updates-per-session-title": "编辑会话WS更新速率限制",
             "edit-cassandra-tenant-limits-configuration-title": "编辑租户Cassandra查询速率限制",
@@ -4160,14 +4353,22 @@
             "edit-tenant-entity-import-rate-limit-title": "编辑实体版本加载速率限制",
             "edit-tenant-notification-request-rate-limit-title": "编辑通知请求的速率限制",
             "edit-tenant-notification-requests-per-rule-rate-limit-title": "编辑每个通知规则的通知请求速率限制",
-            "messages-per": "条消息每",
+            "edit-edge-events-rate-limit": "编辑Edge事件速率限制",
+            "edit-edge-events-per-edge-rate-limit": "编辑每个Edge事件速率限制",
+            "edge-events-rate-limit": "Edge事件",
+            "edge-events-per-edge-rate-limit": "每个Edge事件",
+            "edit-edge-uplink-messages-rate-limit": "编辑Edge上行链路消息速率限制",
+            "edit-edge-uplink-messages-per-edge-rate-limit": "编辑Edge上行链路消息每个Edge速率限制",
+            "edge-uplink-messages-rate-limit": "Edge上行链路消息",
+            "edge-uplink-messages-per-edge-rate-limit": "每个Edge上行链路消息",
+            "messages-per": "每条消息",
             "not-set": "未配置",
             "number-of-messages": "消息数量",
             "number-of-messages-required": "消息数量必填。",
             "number-of-messages-min": "最小值为1。",
             "preview": "预览",
             "per-seconds": "每秒",
-            "per-seconds-required": "时间比率必填。",
+            "per-seconds-required": "时间必填。",
             "per-seconds-min": "最小值为1。",
             "rate-limits": "速率限制",
             "remove-limit": "删除限制",
@@ -4177,11 +4378,14 @@
             "transport-device-msg": "传输设备消息",
             "transport-device-telemetry-msg": "传输设备遥测消息",
             "transport-device-telemetry-data-points": "传输设备遥测数据点",
+            "transport-gateway-msg": "传输网关消息",
+            "transport-gateway-telemetry-msg": "传输网关遥测消息",
+            "transport-gateway-telemetry-data-points": "传输网关遥测数据点",
+            "transport-gateway-device-msg": "传输网关设备消息",
+            "transport-gateway-device-telemetry-msg": "传输网关设备遥测消息",
+            "transport-gateway-device-telemetry-data-points": "传输网关设备遥测数据点",
             "sec": "秒"
-        },
-        "maximum-resource-size": "最大资源文件大小（字节）",
-        "maximum-resource-size-required": "最大资源文件大小是必需的",
-        "maximum-resource-size-range": "最大资源文件大小不能为负数"
+        }
     },
     "timeinterval": {
         "seconds-interval": "{ seconds, plural, =1 {1 秒} other {# 秒} }",
@@ -4193,6 +4397,7 @@
         "minutes": "分钟",
         "seconds": "秒",
         "advanced": "高级",
+        "custom": "自定义",
         "predefined": {
             "yesterday": "昨天",
             "day-before-yesterday": "前天",
@@ -4218,6 +4423,12 @@
             "current-half-year-so-far": "当前半年到目前为止",
             "current-year": "本年",
             "current-year-so-far": "本年到目前为止"
+        },
+        "type": {
+            "week": "每周(星期日-星期六)",
+            "week-iso": "每周(星期一-星期日)",
+            "month": "月",
+            "quarter": "季度"
         }
     },
     "timeunit": {
@@ -4229,33 +4440,34 @@
     },
     "timewindow": {
         "timewindow": "时间窗口",
-        "years": "{ years, plural, =1 {1 年 } other {# 年 } }",
+        "timewindow-settings": "设置时间窗口",
+        "years": "{ years, plural, =1 {1年 } other {#年 } }",
         "years-short": "{{ years }}y",
-        "months": "{ months, plural, =1 {1 月 } other {# 月 } }",
+        "months": "{ months, plural, =1 {1月 } other {#月 } }",
         "months-short": "{{ months }}M",
-        "weeks": "{ weeks, plural, =1 {1 周 } other {# 周 } }",
+        "weeks": "{ weeks, plural, =1 {1周 } other {#周 } }",
         "weeks-short": "{{ weeks }}w",
-        "days": "{ days, plural, =1 {1 天 } other {# 天 } }",
+        "days": "{ days, plural, =1 {1天 } other {#天 } }",
         "days-short": "{{ days }}d",
-        "hours": "{ hours, plural, =0 {- 小时 } =1 {1 小时 } other {# 小时 } }",
+        "hours": "{ hours, plural, =0 {-小时 } =1 {1小时 } other {#小时 } }",
         "hr": "{{ hr }} 时",
         "hr-short": "{{ hr }}h",
-        "minutes": "{ minutes, plural, =0 {- 分 } =1 {1 分 } other {# 分 } }",
+        "minutes": "{ minutes, plural, =0 {-分 } =1 {1分 } other {#分 } }",
         "min": "{{ min }} 分",
         "min-short": "{{ min }}m",
-        "seconds": "{ seconds, plural, =0 {- 秒 } =1 {1 秒 } other {# 秒 } }",
+        "seconds": "{ seconds, plural, =0 {-秒 } =1 {1秒 } other {#秒 } }",
         "sec": "{{ sec }} 秒",
         "sec-short": "{{ sec }}s",
         "short": {
             "days": "{ days, plural, =1 {1 天 } other {# 天 } }",
             "hours": "{ hours, plural, =1 {1 小时 } other {# 小时 } }",
-            "minutes": "{{minutes}} 分 ",
-            "seconds": "{{seconds}} 秒 "
+            "minutes": "{{minutes}}分 ",
+            "seconds": "{{seconds}}秒 "
         },
         "realtime": "实时",
         "history": "历史",
         "last-prefix": "最后",
-        "period": "从 {{ startTime }} 到 {{ endTime }}",
+        "period": "从{{ startTime }}到{{ endTime }}",
         "edit": "编辑时间窗口",
         "date-range": "日期范围",
         "for-all-time": "所有时间",
@@ -4266,22 +4478,101 @@
         "just-now": "刚刚",
         "just-now-lower": "刚刚",
         "ago": "之前",
-        "style": "时间窗口样式",
+        "style": "样式",
         "icon": "图标",
         "icon-position": "图标位置",
         "icon-position-left": "左侧",
         "icon-position-right": "右侧",
         "font": "字体",
         "color": "颜色",
-        "displayTypePrefix": "显示实时/历史前缀",
-        "preview": "预览"
+        "displayTypePrefix": "实时/历史",
+        "preview": "预览",
+        "relative": "相对",
+        "range": "范围",
+        "hide-timewindow-section": "隐藏用户的时间窗口",
+        "hide-last-interval": "隐藏用户的最后间隔",
+        "hide-relative-interval": "隐藏用户的相对间隔",
+        "hide-fixed-interval": "隐藏用户的固定间隔",
+        "hide-aggregation": "隐藏用户的聚合",
+        "hide-group-interval": "隐藏用户的分组间隔",
+        "hide-max-values": "隐藏用户的最大值",
+        "hide-timezone": "隐藏用户的时区",
+        "disable-custom-interval": "禁用自定义间隔选择"
     },
     "tooltip": {
-        "value": "值",
+        "trigger": "触发",
+        "trigger-point": "点",
+        "trigger-axis": "轴",
+        "label": "标签",
+        "value": "数值",
         "date": "日期",
+        "show-date-time-interval": "显示间隔",
+        "show-date-time-interval-hint": "根据数据聚合显示时间间隔。",
         "background-color": "背景颜色",
         "background-blur": "背景模糊"
     },
+    "unit": {
+        "millimeter": "毫米",
+        "centimeter": "厘米",
+        "angstrom": "埃米",
+        "nanometer": "纳米",
+        "micrometer": "千分尺",
+        "meter": "米",
+        "kilometer": "公里",
+        "inch": "英寸",
+        "foot": "英尺",
+        "yard": "码",
+        "mile": "英里",
+        "nautical-mile": "海里",
+        "astronomical-unit": "天文单位",
+        "reciprocal-metre": "倒数米",
+        "meter-per-meter": "每米",
+        "steradian": "球面度",
+        "thou": "毫英寸",
+        "barleycorn": "1/3英寸",
+        "hand": "4英寸",
+        "chain": "66英尺",
+        "furlong": "660英尺",
+        "league": "3英里",
+        "fathom": "6英尺",
+        "cable": "平方毫米",
+        "link": "Link",
+        "rod": "杆",
+        "nanogram": "纳克",
+        "microgram": "微克",
+        "milligram": "毫克",
+        "gram": "克",
+        "kilogram": "千克",
+        "tonne": "吨",
+        "ounce": "盎司",
+        "pound": "磅",
+        "stone": "英石",
+        "hundredweight-count": "数百分点",
+        "short-tons": "短吨",
+        "dalton": "道尔顿",
+        "grain": "格令",
+        "drachm": "打兰",
+        "quarter": "一刻钟",
+        "slug": "斯勒格",
+        "carat": "克拉",
+        "cubic-millimeter": "立方毫米",
+        "cubic-centimeter": "立方厘米",
+        "cubic-meter": "立方米",
+        "cubic-kilometer": "立方千米",
+        "microliter": "微升",
+        "milliliter": "毫升",
+        "liter": "公升",
+        "hectoliter": "百升",
+        "cubic-inch": "立方英寸",
+        "cubic-foot": "立方英尺",
+        "cubic-yard": "立方英里",
+        "fluid-ounce": "液体盎司",
+        "pint": "品脱",
+        "quart": "夸脱",
+        "gallon": "加仑",
+        "oil-barrels": "油桶",
+        "cubic-meter-per-kilogram": "每公斤立方米"
+    },
     "user": {
         "user": "用户",
         "users": "用户",
@@ -4296,11 +4587,11 @@
         "add-user-text": "添加用户",
         "no-users-text": "未找到用户",
         "user-details": "用户详细信息",
-        "delete-user-title": "确定要删除用户 '{{userEmail}}' 吗？",
+        "delete-user-title": "确定要删除用户'{{userEmail}}' 吗？",
         "delete-user-text": "请注意：确认后，用户和所有相关数据将不可恢复。",
-        "delete-users-title": "确定要删除 { count, plural, =1 {1 个用户} other {# 个用户} } 吗？",
-        "delete-users-action-title": "删除  { count, plural, =1 {1 个用户} other {# 个用户} }",
-        "delete-users-text": "请注意：确认后，所有选定的用户将被删除，所有相关数据将不可恢复。",
+        "delete-users-title": "确定要删除{ count, plural, =1 {1 个用户} other {# 个用户} } 吗？",
+        "delete-users-action-title": "删除{ count, plural, =1 {1 个用户} other {# 个用户} }",
+        "delete-users-text": "请注意：确认后所有选定的用户将被删除，所有相关数据将不可恢复。",
         "activation-email-sent-message": "激活电子邮件已成功发送！",
         "resend-activation": "重新发送激活",
         "email": "电子邮件",
@@ -4312,20 +4603,20 @@
         "default-dashboard": "默认面板",
         "always-fullscreen": "始终全屏",
         "select-user": "选择用户",
-        "no-users-matching": "未找到匹配 '{{entity}}' 的用户。",
+        "no-users-matching": "未找到匹配'{{entity}}'的用户。",
         "user-required": "用户必填",
         "activation-method": "激活方式",
         "display-activation-link": "显示激活链接",
         "send-activation-mail": "发送激活邮件",
         "activation-link": "用户激活链接",
-        "activation-link-text": "使用该链接 <a href='{{activationLink}}' target='_blank'>激活</a> 激活用户:",
+        "activation-link-text": "使用该链接<a href='{{activationLink}}' target='_blank'>激活</a>激活用户:",
         "copy-activation-link": "复制用户激活链接",
         "activation-link-copied-message": "用户激活链接已经复制到粘贴板",
         "details": "详情",
         "login-as-tenant-admin": "以租户管理员身份登录",
         "login-as-customer-user": "以客户用户身份登录",
         "search": "查找用户",
-        "selected-users": "已选择 { count, plural, =1 {1 个用户} other {# 个用户} }",
+        "selected-users": "已选择{ count, plural, =1 {1 个用户} other {# 个用户} }",
         "disable-account": "禁用用户帐户",
         "enable-account": "启用用户帐户",
         "enable-account-message": "已成功启用用户帐户！",
@@ -4383,13 +4674,13 @@
         "creating-version": "请稍候，正在创建版本...",
         "nothing-to-commit": "没有要提交的更改",
         "restore-version": "还原版本",
-        "restore-entity-from-version": "从版本 '{{versionName}}' 还原实体",
-        "restoring-entity-version": "请稍候，正在还原实体版本...",
+        "restore-entity-from-version": "从版本'{{versionName}}'还原实体",
+        "restoring-entity-version": "请稍候正在还原实体版本...",
         "load-relations": "加载关联",
         "load-attributes": "加载属性",
         "load-credentials": "加载凭据",
         "compare-with-current": "与当前比较",
-        "diff-entity-with-version": "与实体版本 '{{versionName}}' 不同",
+        "diff-entity-with-version": "与实体版本'{{versionName}}'不同",
         "previous-difference": "上一个差异",
         "next-difference": "下一个差异",
         "current": "当前",
@@ -4406,24 +4697,26 @@
         "no-entities-to-restore-prompt": "请指定要还原的实体",
         "add-entity-type": "添加实体类型",
         "remove-all": "全部删除",
-        "version-create-result": "{ added, plural, =0 {没有实体} =1 {1 个实体} other {# 个实体} } 被添加。<br/>{ modified, plural, =0 {没有实体} =1 {1 个实体} other {# 个实体} } 被修改。<br/>{ removed, plural, =0 {没有实体} =1 {1 个实体} other {# 个实体} } 被删除。",
+        "version-create-result": "{ added, plural, =0 {没有实体} =1 {1 个实体} other {# 个实体} } 被添加。<br/>{ modified, plural, =0 {没有实体} =1 {1 个实体} other {# 个实体} }被修改。<br/>{ removed, plural, =0 {没有实体} =1 {1 个实体} other {# 个实体} }被删除。",
         "remove-other-entities": "删除其他实体",
         "find-existing-entity-by-name": "按名称查找现有实体",
-        "restore-entities-from-version": "从版本 '{{versionName}}' 还原实体",
-        "restoring-entities-from-version": "请稍候，正在还原实体...",
+        "restore-entities-from-version": "从版本'{{versionName}}'还原实体",
+        "restoring-entities-from-version": "请稍候正在还原实体...",
         "no-entities-restored": "未还原任何实体",
-        "created": "{{created}} 创建",
-        "updated": "{{updated}} 更新",
-        "deleted": "{{deleted}} 删除",
-        "remove-other-entities-confirm-text": "请注意！在还原版本中不存在的当前实体<br/> 将被永久 <b>删除</b>。<br/><br/>请输入 <b>\"remove other entities\"</b> 进行确认。",
-        "auto-commit-to-branch": "自动提交到 <b>{{ branch }}</b> 分支",
-        "default-create-entity-version-name": "{{entityName}} 更新",
+        "created": "{{created}}创建",
+        "updated": "{{updated}}更新",
+        "deleted": "{{deleted}}删除",
+        "remove-other-entities-confirm-text": "请注意！在还原版本中不存在的当前实体<br/>将被永久<b>删除</b>。<br/><br/>请输入<b>\"remove other entities\"</b>进行确认。",
+        "auto-commit-to-branch": "自动提交到<b>{{ branch }}</b>分支",
+        "default-create-entity-version-name": "{{entityName}}更新",
         "sync-strategy-merge-hint": "创建或更新选定的实体，仓库其他实体均<b>不修改</b>。",
         "sync-strategy-overwrite-hint": "创建或更新选定的实体，仓库其他实体将<b>被删除</b>。",
-        "device-credentials-conflict": "无法加载外部ID为 <b>{{entityId}} 的设备</b><br/>因为数据库中已存在相同的凭据。<br/>请考虑禁用还原表单中的 <b>加载凭据</b> 设置。",
-        "missing-referenced-entity": "无法加载外部ID为 <b>{{sourceEntityId}}</b> 的 <b>{{sourceEntityTypeName}}</b><br/>因为它引用了缺失的 <b>{{targetEntityTypeName}}</b> （ID：<b>{{targetEntityId}}）</b>.",
-        "runtime-failed": "<b>失败：</b> {{message}}",
-        "auto-commit-settings-read-only-hint": "在仓库设置中启用只读选项后，'自动提交'功能将无法正常工作。"
+        "device-credentials-conflict": "无法加载外部ID为<b>{{entityId}} 的设备</b><br/>因为数据库中已存在相同的凭据。<br/>请考虑禁用还原表单中的 <b>加载凭据</b> 设置。",
+        "missing-referenced-entity": "无法加载外部ID为<b>{{sourceEntityId}}</b> 的 <b>{{sourceEntityTypeName}}</b><br/>因为它引用了缺失的 <b>{{targetEntityTypeName}}</b> （ID：<b>{{targetEntityId}}）</b>.",
+        "runtime-failed": "<b>失败：</b>{{message}}",
+        "auto-commit-settings-read-only-hint": "在仓库设置中启用只读选项后，'自动提交'功能将无法正常工作。",
+        "rollback-on-error": "回滚错误",
+        "rollback-on-error-hint": "如果您有大量实体需要恢复请考虑禁用此选项以提高性能。\n请注意如果在版本加载过程中发生错误，已经持久化的实体（具有关系、属性等）将不发生修改。"
     },
     "widget": {
         "widget-library": "部件库",
@@ -4434,19 +4727,20 @@
         "all-widgets": "所有部件",
         "widget": "部件",
         "select-widget": "选择部件",
-        "no-widgets-matching": "未找到与 '{{entity}}' 匹配的部件。",
+        "no-widgets-matching": "未找到与'{{entity}}匹配的部件。",
         "no-widgets": "暂无部件",
         "no-widgets-text": "未找到部件",
         "management": "管理部件",
         "editor": "部件编辑器",
-        "confirm-to-exit-editor-html": "有未保存的部件设置。<br>确定要离开此页面吗？",
-        "widget-type-not-found": "加载部件配置出错。<br>可能关联的部件已经删除了。",
+        "confirm-to-exit-editor-html": "有未保存的部件设置<br>确定要离开此页面吗？",
+        "widget-type-not-found": "加载部件配置出错<br>可能关联的部件已经删除了。",
         "widget-type-load-error": "由于以下错误未加载部件：",
         "remove": "删除部件",
         "delete": "删除部件",
         "edit": "编辑部件",
-        "remove-widget-title": "确定要删除 '{{widgetTitle}}'部件吗？",
-        "remove-widget-text": "确认后，控件和所有相关数据将变得不可恢复。",
+        "remove-widget-title": "确定要删除'{{widgetTitle}}'部件吗？",
+        "remove-widget-text": "确认后所有相关数据将变得不可恢复。",
+        "replace-reference-with-widget-copy": "基于部件复制替换引用",
         "timeseries": "时间序列",
         "search-data": "查找数据",
         "no-data-found": "未找到数据",
@@ -4462,32 +4756,32 @@
         "select-widget-type": "选择窗口部件类型",
         "missing-widget-title-error": "部件标题必须指定！",
         "widget-saved": "部件已保存",
-        "unable-to-save-widget-error": "无法保存部件！控件有错误!",
+        "unable-to-save-widget-error": "控件有错误无法保存部件！",
         "save": "保存部件",
         "saveAs": "部件另存为",
         "move": "移动部件",
-        "save-widget-as": "另存部件为",
+        "save-widget-as": "部件另存为",
         "save-widget-as-text": "请输入部件标题",
-        "toggle-fullscreen": "切换全屏",
-        "run": "运行部件",
+        "toggle-fullscreen": "全屏",
+        "run": "运行",
         "widget-title": "部件标题",
         "title": "部件标题",
         "title-required": "部件标题必填。",
-        "title-max-length": "标题应少于256个字符",
+        "title-max-length": "标题必须小于256个字符",
         "system": "系统",
-        "type": "部件类型",
+        "type": "类型",
         "resources": "资源",
-        "resource-url": "JavaScript/CSS URL",
-        "resource-is-module": "Is module",
+        "resource-url": "JavaScript/CSS",
+        "resource-is-module": "是否模块",
         "remove-resource": "删除资源",
         "add-resource": "添加资源",
         "html": "HTML",
         "tidy": "整理",
         "css": "CSS",
         "settings-schema": "设置模式",
-        "datakey-settings-schema": "数据键设置模式",
-        "latest-datakey-settings-schema": "最新值数据键设置模式",
-        "widget-settings": "部件设置",
+        "datakey-settings-schema": "数据键设置",
+        "latest-datakey-settings-schema": "最新数据键设置",
+        "widget-settings": "设置",
         "description": "描述",
         "tags": "标签",
         "image-preview": "图片预览",
@@ -4496,17 +4790,18 @@
         "latest-data-key-settings-form-selector": "最新值数据键设置表单选择器",
         "all": "全部",
         "actual": "实际",
-        "deprecated": "已弃用",
-        "has-basic-mode": "具有基本模式",
-        "basic-mode-form-selector": "基本模式表单选择器",
-        "basic-mode": "基本",
+        "scada": "组态",
+        "deprecated": "弃用",
+        "has-basic-mode": "基础模式",
+        "basic-mode-form-selector": "表单选择器",
+        "basic-mode": "基础",
         "advanced-mode": "高级",
         "javascript": "JavaScript",
         "js": "JS",
         "delete-widget-title": "确定要删除部件'{{widgetName}}'吗？",
-        "delete-widget-text": "确认后，部件及其所有相关数据将无法恢复。",
-        "delete-widgets-title": "确定要删除 { count, plural, =1 {1个部件} other {#个部件} }吗？",
-        "delete-widgets-text": "请谨慎操作，确认后，所有选定的部件将被删除，并且所有相关数据将无法恢复。",
+        "delete-widget-text": "确认后部件及其所有相关数据将无法恢复。",
+        "delete-widgets-title": "确定要删除{ count, plural, =1 {1个部件} other {#个部件} }吗？",
+        "delete-widgets-text": "请谨慎操作确认后，所有选定的部件将被删除并且所有相关数据将无法恢复。",
         "delete-widget": "删除部件",
         "widget-template-load-failed-error": "无法加载部件模板！",
         "details": "详情",
@@ -4515,34 +4810,38 @@
         "add-existing-widget": "添加现有部件",
         "add-new-widget": "添加新部件",
         "search-widgets": "搜索部件",
-        "selected-widgets": "已选择 { count, plural, =1 {1 个部件} other {# 个部件} }",
+        "selected-widgets": "已选择{ count, plural, =1 {1 个部件} other {# 个部件} }",
         "undo": "撤销",
         "export": "导出",
         "export-widgets": "导出部件",
         "import": "导入部件",
         "no-data": "部件上没有要显示的数据",
-        "data-overflow": "部件显示 {{count}} 条实体中的 {{total}} 条",
-        "alarm-data-overflow": "部件显示了 {{allowedEntities}}（最大允许）实体中的告警，总共有 {{totalEntities}} 个实体",
-        "search": "搜索部件",
-        "filter": "部件类型过滤",
+        "data-overflow": "部件显示{{count}}条实体中的{{total}}条。",
+        "alarm-data-overflow": "部件显示了{{allowedEntities}}（最大允许）实体中的告警，总共有{{totalEntities}}个实体",
+        "search": "搜索",
+        "filter": "过滤",
         "loading-widgets": "加载部件...",
-        "widget-template-error": "无效的部件 HTML 模板。"
+        "widget-template-error": "无效HTML模板部件。",
+        "reference": "引用"
     },
     "widget-action": {
-        "header-button": "部件顶部按钮",
-        "open-dashboard-state": "切换到新仪表板状态",
-        "update-dashboard-state": "更新当前仪表板状态",
-        "open-dashboard": "切换到另一个仪表板",
+        "header-button": "顶部按钮",
+        "do-nothing": "无任何动作",
+        "open-dashboard-state": "切换仪表板状态",
+        "update-dashboard-state": "更新仪表板状态",
+        "open-dashboard": "打开仪表板",
         "custom": "自定义动作",
-        "custom-pretty": "自定义动作（使用HTML模板）",
+        "custom-pretty": "自定义动作（HTML模板）",
         "custom-pretty-error-title": "自定义对话框错误",
         "custom-pretty-template-error": "无效的自定义对话框模板。",
-        "custom-pretty-controller-error": "在评估自定义对话框函数时发生了错误。",
+        "custom-pretty-controller-error": "自定义对话框函数错误。",
         "mobile-action": "移动端动作",
         "target-dashboard-state": "目标仪表板状态",
         "target-dashboard-state-required": "目标仪表板状态必填",
         "set-entity-from-widget": "从部件中设置实体",
         "target-dashboard": "目标仪表板",
+        "select-target-dashboard": "选择目标仪表板",
+        "target-dashboard-required": "必须选择目标仪表板。",
         "open-right-layout": "打开右侧布局 (移动端视图)",
         "state-display-type": "显示仪表板状态选项",
         "open-normal": "普通",
@@ -4568,12 +4867,15 @@
         "popover-placement-leftBottom": "左下",
         "popover-hide-on-click-outside": "在点击弹出框外部时隐藏弹出框",
         "popover-hide-dashboard-toolbar": "在弹出框中隐藏仪表板工具栏",
-        "popover-width": "弹出宽度",
-        "popover-height": "弹出高度",
-        "popover-style": "弹出框样式",
-        "open-new-browser-tab": "在新的浏览器选项卡中打开",
+        "popover-width": "宽度",
+        "popover-height": "高度",
+        "popover-style": "样式",
+        "open-new-browser-tab": "在选项卡中打开",
+        "open-URL": "打开URL",
+        "url-required": "URL必填。",
         "mobile": {
             "action-type": "移动端动作类型",
+            "select-action-type": "选择移动端操作类型",
             "action-type-required": "移动端动作类型必填。",
             "take-picture-from-gallery": "从图库中获取照片",
             "take-photo": "拍照",
@@ -4583,7 +4885,9 @@
             "make-phone-call": "拨打电话",
             "get-location": "获取手机位置",
             "take-screenshot": "截屏"
-        }
+        },
+        "custom-action-function": "自定义动作函数",
+        "custom-pretty-function": "自定义动作(HTML模板)"
     },
     "widgets-bundle": {
         "current": "当前组",
@@ -4593,21 +4897,22 @@
         "delete": "删除部件包",
         "title": "标题",
         "title-required": "标题必填。",
-        "title-max-length": "标题长度应该少于256个字符。",
+        "title-max-length": "标题长度应该小于256个字符。",
         "description": "描述",
         "image-preview": "图片预览",
+        "scada": "SCADA部件包",
         "order": "其他",
         "add-widgets-bundle-text": "添加部件包",
         "no-widgets-bundles-text": "未找到部件包",
         "empty": "部件包是空的",
         "details": "详情",
         "widgets-bundle-details": "部件包详细信息",
-        "delete-widgets-bundle-title": "确定要删除部件包 '{{widgetsBundleTitle}}'吗？",
-        "delete-widgets-bundle-text": "请注意：确认后，部件包和所有相关数据将不可恢复。",
-        "delete-widgets-bundles-title": "确定要删除  { count, plural, =1 {1 个部件包} other {# 个部件包} } 吗？",
-        "delete-widgets-bundles-action-title": "删除 { count, plural, =1 {1 个部件包} other {# 个部件包} }",
+        "delete-widgets-bundle-title": "确定要删除部件包'{{widgetsBundleTitle}}'吗？",
+        "delete-widgets-bundle-text": "请注意：确认后部件包和所有相关数据将不可恢复。",
+        "delete-widgets-bundles-title": "确定要删除{ count, plural, =1 {1 个部件包} other {# 个部件包} }吗？",
+        "delete-widgets-bundles-action-title": "删除{ count, plural, =1 {1 个部件包} other {# 个部件包} }",
         "delete-widgets-bundles-text": "请注意：确认后，所有选定的部件包将被删除，所有相关数据将不可恢复。",
-        "no-widgets-bundles-matching": "未找到与 '{{widgetsBundle}}' 匹配的部件包。",
+        "no-widgets-bundles-matching": "未找到与'{{widgetsBundle}}'匹配的部件包。",
         "widgets-bundle-required": "部件包必填。",
         "system": "系统",
         "import": "导入部件包",
@@ -4618,22 +4923,23 @@
         "widgets-bundle-file": "部件包文件",
         "invalid-widgets-bundle-file-error": "无法导入部件包：无效的部件包数据结构。",
         "search": "查找部件包",
-        "selected-widgets-bundles": "已选择 { count, plural, =1 {1 个部件包} other {# 个部件包} }",
+        "selected-widgets-bundles": "已选择{ count, plural, =1 {1 个部件包} other {# 个部件包} }",
         "open-widgets-bundle": "打开部件包",
-        "loading-widgets-bundles": "加载部件包..."
+        "loading-widgets-bundles": "加载部件包...",
+        "create-new": "创建新部件包"
     },
     "widget-config": {
         "data": "数据",
         "settings": "设置",
         "advanced": "高级",
         "appearance": "外观",
-        "widget-card": "部件卡片",
+        "widget-card": "卡片",
         "mobile": "移动设备",
         "title": "标题",
-        "title-tooltip": "标题文字提示",
+        "title-tooltip": "标题提示文字",
         "general-settings": "常规设置",
-        "display-title": "显示标题",
-        "card-title": "卡片标题",
+        "display-title": "显示",
+        "card-title": "标题",
         "drop-shadow": "投影",
         "enable-fullscreen": "启用全屏",
         "background-color": "背景颜色",
@@ -4653,7 +4959,7 @@
         "units-by-default": "默认单位",
         "decimals": "小数位数",
         "decimals-by-default": "默认小数位数",
-        "default-data-key-parameter-hint": "该参数适用于所有部件值，除非被数据键配置覆盖",
+        "default-data-key-parameter-hint": "该参数适用于所有部件值，除非被数据键配置覆盖。",
         "units-short": "单位",
         "decimals-short": "小数",
         "decimals-suffix": "位小数",
@@ -4665,8 +4971,8 @@
         "display-legend": "显示图例",
         "datasources": "数据源",
         "datasource": "数据源",
-        "maximum-datasources": "最大允许 { count, plural, =1 {1 个数据源。} other {# 个数据源。} }",
-        "timeseries-key-error": "需要至少指定一个 timeseries 数据键",
+        "maximum-datasources": "最大允许{ count, plural, =1 {1 个数据源。} other {# 个数据源。} }",
+        "timeseries-key-error": "需要至少指定一个timeseries数据键",
         "datasource-type": "类型",
         "datasource-parameters": "参数",
         "remove-datasource": "移除数据源",
@@ -4679,59 +4985,155 @@
         "search-actions": "搜索动作",
         "no-actions-text": "找不到动作",
         "action-source": "动作源",
+        "select-action-source": "选择动作源",
         "action-source-required": "动作源必填",
+        "column-index": "序号",
+        "select-column-index": "选择序号",
+        "column-index-required": "序号必填。",
+        "not-set": "未设置",
         "action-name": "名称",
         "action-name-required": "动作名称必填。",
-        "action-name-not-unique": "动作名称已经存在。\n相同动作源的动作名称必须唯一。",
+        "action-name-not-unique": "动作名称已经存在。",
         "action-icon": "图标",
         "show-hide-action-using-function": "使用函数显示/隐藏动作",
+        "show-action-function": "显示动作函数",
         "action-type": "类型",
         "action-type-required": "类型必填",
         "edit-action": "编辑动作",
         "delete-action": "删除动作",
         "delete-action-title": "删除部件动作",
-        "delete-action-text": "确定要删除部件动作'{{actionName}}' 吗？",
+        "delete-action-text": "确定要删除部件动作'{{actionName}}'吗？",
         "title-icon": "标题图标",
         "display-icon": "显示标题图标",
-        "card-icon": "卡片图标",
+        "card-icon": "图标",
         "icon": "图标",
         "icon-color": "图标颜色",
         "icon-size": "图标大小",
         "advanced-settings": "高级设置",
         "data-settings": "数据设置",
         "limits": "限制",
-        "no-data-display-message": "\"没有数据可显示\" 替代信息",
+        "no-data-display-message": "没有数据时显示文本",
         "data-page-size": "每个数据源的最大实体数",
-        "settings-component-not-found": "未找到设置的表单组件选择器 '{{selector}}'",
+        "settings-component-not-found": "未找到设置的表单组件选择器'{{selector}}'",
         "preview": "预览",
         "set": "设置",
-        "set-message": "设置消息",
+        "set-message": "设置显示文本",
         "advanced-title-style": "高级标题样式",
-        "card-style": "卡片样式",
+        "card-style": "样式",
         "text": "文本",
         "background": "背景",
         "advanced-widget-style": "高级部件样式",
-        "card-buttons": "卡片按钮",
-        "show-card-buttons": "显示卡片按钮",
-        "card-border-radius": "卡片边框半径",
-        "card-appearance": "卡片外观",
+        "card-buttons": "按钮",
+        "show-card-buttons": "全屏按钮",
+        "card-border-radius": "边框半径",
+        "card-padding": "内边边距",
+        "card-appearance": "外观",
         "color": "颜色",
         "tooltip": "文字提示",
-        "units-required": "单位是必须的。"
+        "units-required": "单位必填",
+        "list-layout": "列表",
+        "layout": "布局",
+        "resize-options": "调整大小",
+        "resizable": "可调整大小",
+        "preserve-aspect-ratio": "保留纵横比例"
     },
     "widget-type": {
-        "import": "导入部件类型",
-        "export": "导出部件类型",
-        "export-failed-error": "无法导出部件类型： {{error}}",
+        "import": "导入部件",
+        "export": "导出部件",
+        "export-failed-error": "无法导出部件：{{error}}",
         "widget-file": "部件文件",
         "invalid-widget-file-error": "无法导入部件：无效的部件数据结构。"
     },
     "widgets": {
+        "mobile-app-qr-code": {
+            "configuration-hint": "配置取决于平台中设置的移动应用二维码部件",
+            "get-it-on-google-play": "在Google Play上下载",
+            "download-on-the-app-store": "在App Store上下载"
+        },
+        "action-button": {
+            "behavior": "行为",
+            "on-click": "单击",
+            "on-click-hint": "单击按钮时触发动作"
+        },
+        "command-button": {
+            "behavior": "行为",
+            "on-click": "单击",
+            "on-click-hint": "单击按钮时触发动作"
+        },
+        "power-button": {
+            "behavior": "行为",
+            "power-on": "打开",
+            "power-on-hint": "打开电源执行的动作。",
+            "power-off": "关闭",
+            "power-off-hint": "关闭电源执行的动作。",
+            "on-label": "打开",
+            "off-label": "关闭",
+            "layout": "布局",
+            "layout-default": "默认",
+            "layout-simplified": "精简",
+            "layout-outlined": "默认",
+            "layout-default-volume": "默认",
+            "layout-simplified-volume": "精简",
+            "layout-outlined-volume": "默认",
+            "layout-default-icon": "默认.Icon",
+            "layout-simplified-icon": "精简.Icon",
+            "layout-outlined-icon": "默认.Icon",
+            "main": "前景色",
+            "background": "背景色",
+            "power-on-colors": "打开颜色",
+            "power-off-colors": "关闭颜色",
+            "disabled-colors": "禁用颜色",
+            "button": "按钮"
+        },
+        "toggle-button": {
+            "behavior": "行为",
+            "checked": "打开",
+            "unchecked": "关闭",
+            "check": "打开状态",
+            "check-hint": "打开组件执行的动作。",
+            "uncheck": "关闭状态",
+            "uncheck-hint": "关闭组件执行的动作。",
+            "auto-scale": "自动",
+            "horizontal-fill": "水平填充",
+            "vertical-fill": "垂直填充",
+            "button-appearance": "外观"
+        },
+        "button": {
+            "layout": "布局",
+            "outlined": "默认",
+            "filled": "填充",
+            "underlined": "强调",
+            "basic": "基础",
+            "auto-scale": "自动",
+            "label": "标签",
+            "icon": "图标",
+            "border-radius": "圆角",
+            "color-palette": "调色板",
+            "main": "前景色",
+            "background": "背景色",
+            "custom-styles": "自定义样式",
+            "clear-style": "清除样式",
+            "shadow": "阴影",
+            "enabled": "启用",
+            "disabled": "禁用",
+            "preview": "预览",
+            "copy-style-from": "复制"
+        },
+        "button-state": {
+            "activated-state": "激活状态",
+            "activated-state-hint": "按钮在激活状态的触发条件。",
+            "disabled-state": "禁用状态",
+            "disabled-state-hint": "按钮在禁用状态的触发条件。",
+            "enabled": "启用",
+            "hovered": "悬停",
+            "pressed": "按压",
+            "activated": "激活",
+            "disabled": "禁用"
+        },
         "background": {
-            "background": "背景",
+            "background": "背景颜色",
             "background-settings": "背景设置",
             "background-type-image": "上传图像",
-            "background-type-image-url": "图像URL",
             "background-type-color": "纯色背景",
             "image-url": "图像URL",
             "overlay": "覆盖",
@@ -4739,18 +5141,30 @@
             "blur": "模糊",
             "preview": "预览"
         },
+        "bar-chart": {
+            "bar-appearance": "外观",
+            "label-on-bar": "标签",
+            "value-on-bar": "数值",
+            "bar-chart-style": "样式",
+            "bar-axis": "轴"
+        },
+        "polar-area-chart": {
+            "polar-axis": "极轴",
+            "start-angle": "角度",
+            "polar-area-chart-style": "图表样式"
+        },
         "battery-level": {
             "layout": "布局",
-            "layout-vertical-solid": "垂直. 实心",
-            "layout-horizontal-solid": "水平. 实心",
-            "layout-vertical-divided": "垂直. 分割",
-            "layout-horizontal-divided": "水平. 分割",
+            "layout-vertical-solid": "垂直.实心",
+            "layout-horizontal-solid": "水平.实心",
+            "layout-vertical-divided": "垂直.分割",
+            "layout-horizontal-divided": "水平.分割",
             "icon": "图标",
             "value": "数值",
             "auto-scale": "自动缩放",
-            "battery-level-color": "电池电量颜色",
-            "battery-shape-color": "电池形状颜色",
-            "battery-level-card-style": "电池电量卡片样式",
+            "battery-level-color": "电量颜色",
+            "battery-shape-color": "形状颜色",
+            "battery-level-card-style": "电量卡片样式",
             "sections-count": "分段数量"
         },
         "signal-strength": {
@@ -4759,12 +5173,32 @@
             "no-signal": "无信号",
             "layout": "布局",
             "layout-wifi": "Wi-Fi",
-            "layout-cellular-bar": "蜂窝网络条状",
+            "layout-cellular-bar": "蜂窝网络",
             "icon": "图标",
             "date": "日期",
-            "active-bars-color": "活动信号条颜色",
-            "inactive-bars-color": "非活动信号条颜色",
-            "signal-strength-card-style": "信号强度卡片样式"
+            "active-bars-color": "有信号颜色",
+            "inactive-bars-color": "无信号颜色",
+            "signal-strength-card-style": "信号强度样式",
+            "no-signal-rssi-value": "无信号RSSI值"
+        },
+        "status-widget": {
+            "behavior": "行为",
+            "layout": "布局",
+            "layout-default": "默认",
+            "layout-center": "居中",
+            "layout-icon": "图标",
+            "on": "打开",
+            "off": "关闭",
+            "label": "标签",
+            "status": "状态",
+            "icon": "图标",
+            "color-palette": "启用时调色板",
+            "disabled-color-palette": "禁用时调色板",
+            "primary": "基本",
+            "primary-color-hint": "图标和标签的颜色",
+            "secondary": "次要",
+            "secondary-color-hint": "状态颜色",
+            "background": "背景"
         },
         "chart": {
             "common-settings": "通用设置",
@@ -4810,7 +5244,7 @@
             "comparison-settings": "比较设置",
             "enable-comparison": "启用比较",
             "time-for-comparison": "比较期间",
-            "time-for-comparison-previous-interval": "上一个时间段 (默认)",
+            "time-for-comparison-previous-interval": "上一个时间段(默认)",
             "time-for-comparison-days": "一天前",
             "time-for-comparison-weeks": "一周前",
             "time-for-comparison-months": "一月前",
@@ -4821,7 +5255,7 @@
             "axis-position": "轴位置",
             "axis-position-top": "顶部 (默认)",
             "axis-position-bottom": "底部",
-            "custom-legend-settings": "自定义图例设置",
+            "custom-legend-settings": "自定义设置图例",
             "enable-custom-legend": "启用自定义图例 (这将允许您在键标签中使用属性/时间序列值)",
             "key-name": "键名",
             "key-name-required": "键名是必需的",
@@ -4838,21 +5272,21 @@
             "remove-from-legend": "从图例中移除数据键",
             "exclude-from-stacking": "从堆叠中排除(仅适用于'堆叠'模式)",
             "line-settings": "线设置",
-            "show-line": "显示线",
-            "fill-line": "填充线",
+            "show-line": "显示线条",
+            "fill-line": "填充线条",
             "fill-line-opacity": "填充透明度",
             "points-settings": "点设置",
             "show-points": "显示点",
             "points-line-width": "点的线宽",
             "points-radius": "点的半径",
-            "point-shape": "点形状",
+            "point-shape": "形状",
             "point-shape-circle": "圆",
             "point-shape-cross": "十字",
             "point-shape-diamond": "菱形",
             "point-shape-square": "矩形",
             "point-shape-triangle": "三角形",
             "point-shape-custom": "自定义函数",
-            "point-shape-draw-function": "点形状绘制函数",
+            "point-shape-draw-function": "形状绘制函数",
             "show-separate-axis": "显示分离的轴",
             "axis-position-left": "左侧",
             "axis-position-right": "右侧",
@@ -4863,7 +5297,7 @@
             "comparison-values-label": "历史值标签",
             "comparison-line-color": "对比线颜色",
             "threshold-settings": "阈值设置",
-            "use-as-threshold": "使用键值作为阈值",
+            "use-as-threshold": "使用遥测作为阈值",
             "threshold-line-width": "阈值线宽",
             "threshold-color": "阈值颜色",
             "common-pie-settings": "常用饼图设置",
@@ -4872,22 +5306,22 @@
             "tilt": "倾斜",
             "common-pie-settings-range-error": "值应在0到1的范围内",
             "stroke-settings": "描边设置",
-            "width-pixels": "宽度 (px)",
+            "width-pixels": "宽度(px)",
             "show-labels": "显示标签",
             "animation-settings": "动画设置",
-            "animated-pie": "启用饼图动画 (实验性)",
+            "animated-pie": "启用饼图动画",
             "border-settings": "边框设置",
             "border-width": "边框宽度",
             "border-color": "边框颜色",
-            "legend-settings": "图例设置",
+            "legend-settings": "设置图例",
             "display-legend": "显示图例",
             "labels-font-color": "标签字体颜色",
-            "series": "系列",
-            "add-series": "添加系列",
-            "series-settings": "系列设置",
-            "remove-series": "删除系列",
-            "no-series": "未配置系列",
-            "no-series-error": "至少应指定一个系列",
+            "series": "时间序列",
+            "add-series": "添加",
+            "series-settings": "设置",
+            "remove-series": "删除",
+            "no-series": "没有设置时间序列",
+            "no-series-error": "至少指定一个时间序列",
             "chart-appearance": "图表外观",
             "vertical-grid-lines": "垂直网格线",
             "horizontal-grid-lines": "水平网格线",
@@ -4897,19 +5331,87 @@
             "axis": "轴",
             "vertical-axis": "垂直轴",
             "ticks": "刻度",
-            "horizontal-axis": "水平轴"
+            "horizontal-axis": "水平轴",
+            "shape-empty-circle": "空心圆形",
+            "shape-circle": "圆形",
+            "shape-rect": "长方形",
+            "shape-round-rect": "矩形",
+            "shape-triangle": "三角形",
+            "shape-diamond": "菱形",
+            "shape-pin": "Pin",
+            "shape-arrow": "箭头",
+            "shape-none": "无",
+            "line-type-solid": "实线",
+            "line-type-dashed": "虚线",
+            "line-type-dotted": "点画线",
+            "label-position-top": "上",
+            "label-position-bottom": "下",
+            "label-position-outside": "外部",
+            "label-position-inside": "内部",
+            "fill": "填充",
+            "fill-type-none": "无",
+            "fill-type-solid": "实线",
+            "fill-type-opacity": "透明度",
+            "fill-type-gradient": "渐变色",
+            "background": "背景色",
+            "opacity": "透明度",
+            "gradient-stops": "渐变值",
+            "gradient-start": "起始点",
+            "gradient-end": "结束点",
+            "animation": {
+                "animation": "动画",
+                "animation-threshold": "动画阈值",
+                "animation-duration": "动画时长",
+                "animation-easing": "动画方式",
+                "animation-delay": "动画延迟",
+                "update-animation-duration": "更新时长",
+                "update-animation-easing": "更新方式",
+                "update-animation-delay": "更新延迟"
+            },
+            "chart-axis": {
+                "scale": "比例",
+                "scale-min": "最小",
+                "scale-max": "最大",
+                "scale-auto": "自动"
+            },
+            "bar": {
+                "show-border": "显示边框",
+                "border-width": "边框宽度",
+                "border-radius": "边框圆角",
+                "bar-width": "宽度",
+                "label": "标签",
+                "label-hint": "在bar上显示标签。",
+                "series-label-hint": "显示具有数值的标签。",
+                "label-background": "标签背景"
+            }
         },
         "color": {
             "color-settings": "颜色设置",
             "color-type-constant": "固定值",
+            "color-type-gradient": "渐变色",
             "color-type-range": "数值范围",
             "color-type-function": "函数",
             "color": "颜色",
             "value-range": "数值范围",
             "from": "从",
-            "to": "至",
+            "to": "到",
             "color-function": "颜色函数",
-            "copy-color-settings-from": "从其他处复制颜色设置"
+            "copy-color-settings-from": "复制其他颜色设置",
+            "copy-from": "复制",
+            "settings-type": "类型设置",
+            "basic-mode": "基础",
+            "advanced-mode": "高级",
+            "entity-alias": "实体别名",
+            "entity-attribute": "实体属性",
+            "gradient-color": "渐变色",
+            "gradient-color-min": "颜色",
+            "gradient-start": "起始点",
+            "gradient-start-min": "起始",
+            "gradient-end": "结束点",
+            "gradient-end-min": "结束",
+            "start-value": "起始值",
+            "end-value": "结束植",
+            "gradient-type": "渐变类型"
         },
         "dashboard-state": {
             "dashboard-state-settings": "仪表板状态设置",
@@ -4994,21 +5496,16 @@
                 "Custom interval": "自定义间隔",
                 "Interval": "间隔",
                 "Step size": "步长",
-                "Ok": "Ok"
+                "Ok": "确定"
             }
         },
         "doughnut": {
-            "total": "总计",
+            "doughnut-appearance": "外观",
             "layout": "布局",
             "layout-default": "默认",
-            "layout-with-total": "带总计",
-            "auto-scale": "自动缩放",
-            "clockwise-layout": "顺时针布局",
-            "sort-series": "按标签对系列排序",
-            "central-total-value": "中央总计值",
-            "tooltip-value-type-absolute": "绝对值",
-            "tooltip-value-type-percentage": "百分比",
-            "doughnut-card-style": "圆环样式"
+            "layout-with-total": "总计",
+            "central-total-value": "中心数值",
+            "doughnut-card-style": "样式"
         },
         "entities-hierarchy": {
             "hierarchy-data-settings": "层次数据设置",
@@ -5018,7 +5515,7 @@
             "node-opened-function": "展开函数",
             "node-disabled-function": "禁用函数",
             "display-settings": "显示设置",
-            "node-icon-function": "icon函数",
+            "node-icon-function": "图标函数",
             "node-text-function": "文本函数",
             "sort-settings": "排序设置",
             "nodes-sort-function": "排序函数"
@@ -5041,20 +5538,20 @@
             "event-key-contains": "事件键包含...",
             "show-connector": "显示连接器",
             "connector-state-param-key": "连接器状态参数键",
-            "status": "状态",
             "message": "消息",
+            "level": "层级",
             "created-time": "创建时间"
         },
         "gauge": {
             "default-color": "默认颜色",
-            "radial-gauge-settings": "径向量规设置",
+            "radial-gauge-settings": "量规设置",
             "ticks-settings": "刻度设置",
             "min-value": "最小值",
             "max-value": "最大值",
             "min-value-short": "最小值",
             "max-value-short": "最大值",
-            "start-ticks-angle": "刻度起始角度",
-            "ticks-angle": "刻度角度",
+            "start-ticks-angle": "起始角度",
+            "ticks-angle": "结束角度",
             "major-ticks": "主刻度",
             "major-ticks-count": "主刻度数量",
             "major-ticks-color": "主刻度颜色",
@@ -5062,35 +5559,35 @@
             "minor-ticks-count": "次刻度数量",
             "minor-ticks-color": "次刻度颜色",
             "tick-numbers-font": "刻度数字字体",
-            "unit-title-settings": "单位标题设置",
-            "show-unit-title": "显示单位标题",
-            "unit-title": "单位标题",
-            "title-font": "标题文字字体",
+            "unit-title-settings": "单位设置",
+            "show-unit-title": "显示单位",
+            "unit-title": "单位",
+            "title-font": "字体",
             "units-settings": "单位设置",
-            "units-font": "单位文字字体",
+            "units-font": "字体",
             "value-box-settings": "数值框设置",
             "show-value-box": "显示数值框",
             "value-box": "数值框",
-            "value-int": "整数部位数",
+            "value-int": "整数位数",
             "value-text": "数值文本",
-            "value-text-shadow": "数值文本阴影",
+            "value-text-shadow": "文本阴影",
             "value-font": "数值字体",
-            "rect-stroke-color-start": "矩形边框颜色 - 渐变起始",
-            "rect-stroke-color-end": "矩形边框颜色 - 渐变结束",
+            "rect-stroke-color-start": "边框色渐变起始",
+            "rect-stroke-color-end": "边框色渐变结束",
             "background-color": "背景颜色",
             "shadow-color": "阴影颜色",
-            "value-box-rect-stroke-color": "数值框矩形描边颜色",
-            "value-box-rect-stroke-color-end": "数值框矩形描边颜色 - 渐变结束",
+            "value-box-rect-stroke-color": "数值框描边",
+            "value-box-rect-stroke-color-end": "数值框描边色渐变结束",
             "value-box-background-color": "数值框背景颜色",
             "value-box-shadow-color": "数值框阴影颜色",
-            "plate-settings": "背景板设置",
-            "show-plate-border": "显示背景板边框",
-            "plate-color": "背景板颜色",
+            "plate-settings": "背景设置",
+            "show-plate-border": "显示背景边框",
+            "plate-color": "背景颜色",
             "needle-settings": "指针设置",
-            "needle-circle-size": "指针圆圈尺寸",
+            "needle-circle-size": "针座尺寸",
             "needle-color": "指针颜色",
-            "needle-color-start": "指针颜色 - 渐变起始",
-            "needle-color-end": "指针颜色 - 渐变结束",
+            "needle-color-start": "指针颜色渐变起始",
+            "needle-color-end": "指针颜色渐变结束",
             "needle-color-shadow-up": "指针上半部分阴影颜色",
             "needle-color-shadow-down": "指针下半部分阴影颜色",
             "highlights-settings": "高亮设置",
@@ -5103,8 +5600,8 @@
             "add-highlight": "添加高亮",
             "animation-settings": "动画设置",
             "enable-animation": "启用动画",
-            "animation-duration-rule": "动画持续时间和规则",
-            "animation-duration": "动画持续时间",
+            "animation-duration-rule": "动画保持规则",
+            "animation-duration": "动画保持时间",
             "animation-rule": "动画规则",
             "animation-linear": "线性",
             "animation-quad": "二次方",
@@ -5122,11 +5619,11 @@
             "bar-stroke-width": "条形图描边宽度",
             "bar-stroke-color": "条形图描边颜色",
             "bar-background-color": "量规条形图背景颜色",
-            "bar-background-color-end": "条形图背景颜色 - 渐变结束",
+            "bar-background-color-end": "条形图背景颜色-渐变结束",
             "progress-bar-color": "进度条颜色",
             "progress-bar": "进度条",
-            "progress-bar-color-start": "进度条颜色 - 渐变起始",
-            "progress-bar-color-end": "进度条颜色 - 渐变结束",
+            "progress-bar-color-start": "进度条颜色-渐变起始",
+            "progress-bar-color-end": "进度条颜色-渐变结束",
             "major-ticks-names": "主刻度名称",
             "show-stroke-ticks": "显示刻度描边",
             "major-ticks-font": "主刻度字体",
@@ -5140,16 +5637,18 @@
             "common-settings": "通用量规设置",
             "gauge-type": "量规类型",
             "gauge-type-arc": "弧形",
-            "gauge-type-donut": "甜甜圈",
+            "gauge-type-donut": "圆圈",
             "gauge-type-horizontal-bar": "水平条形",
             "gauge-type-vertical-bar": "垂直条形",
-            "donut-start-angle": "起始角度",
+            "donut-start-angle": "角度",
             "bar-settings": "条形图设置",
-            "relative-bar-width": "相对条形宽度",
-            "neon-glow-brightness": "霓虹灯光效亮度，（0-100），0 - 禁用效果",
-            "stripes-thickness": "条纹的厚度，0 - 无条纹",
-            "rounded-line-cap": "显示圆角线帽",
-            "bar-color-settings": "条形图颜色设置",
+            "relative-bar-width": "条形宽度",
+            "neon-glow-brightness": "霓虹灯光效亮度（0-100）0-禁用效果",
+            "neon-glow-brightness-hint": "0-禁用效果",
+            "stripes-thickness": "条纹的厚度",
+            "stripes-thickness-hint": "0-无条纹",
+            "rounded-line-cap": "圆角线帽",
+            "bar-color-settings": "颜色设置",
             "use-precise-level-color-values": "使用精确的颜色级别",
             "bar-colors": "条形图颜色，从低到高",
             "color": "颜色",
@@ -5164,7 +5663,7 @@
             "gauge-title-font": "量规标题字体",
             "unit-title-and-timestamp-settings": "单位标题和时间戳设置",
             "show-timestamp": "显示值时间戳",
-            "timestamp-format": "时间戳格式",
+            "timestamp-format": "时间格式",
             "label-font": "显示在数值下方的标签字体",
             "value-settings": "数值设置",
             "show-value": "显示数值文本",
@@ -5172,8 +5671,8 @@
             "show-min-max": "显示最小和最大值",
             "min-max-font": "最小和最大标签字体",
             "show-ticks": "显示刻度",
-            "tick-width": "刻度宽度",
-            "tick-color": "刻度颜色",
+            "tick-width": "宽度",
+            "tick-color": "颜色",
             "tick-values": "刻度值",
             "no-tick-values": "未配置刻度值",
             "add-tick-value": "添加刻度值",
@@ -5181,13 +5680,22 @@
             "units-title": "单位标题",
             "value": "数值",
             "ticks": "刻度",
-            "arrow-and-scale-color": "箭头和刻度默认颜色",
-            "scale-settings": "刻度设置",
-            "scale": "刻度尺寸",
-            "scale-color": "刻度颜色",
-            "compass-appearance": "指南针外观",
+            "arrow-and-scale-color": "默认颜色",
+            "scale-settings": "设置",
+            "scale": "尺寸",
+            "scale-color": "颜色",
+            "compass-appearance": "外观",
+            "label": "标签",
             "labels": "标签",
-            "label-style": "标签样式"
+            "label-style": "标签样式",
+            "simple-gauge-type": "类型",
+            "gauge-bar-background": "量规背景",
+            "bar-color": "颜色",
+            "min-and-max-value": "最小和最大值",
+            "min-and-max-label": "最小和最大标签",
+            "font": "字体",
+            "tick-width-and-color": "刻度宽度和颜色",
+            "min-max-validation-text": "最大值必须大于最小值"
         },
         "gpio": {
             "pin": "引脚",
@@ -5209,10 +5717,6 @@
             "no-gpio-leds": "未配置GPIO LED",
             "add-gpio-led": "添加GPIO LED"
         },
-        "html-card": {
-            "html": "HTML",
-            "css": "CSS"
-        },
         "input-widgets": {
             "attribute-not-allowed": "属性参数不能在此部件中使用",
             "blocked-location": "在浏览器中阻止地理位置",
@@ -5407,7 +5911,7 @@
         },
         "label-widget": {
             "label-pattern": "模式",
-            "label-pattern-hint": "提示：例如 'Text <code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code> units.' or <code><span style=\"color: #000;\">$&#123;</span>#&lt;key index&gt;<span style=\"color: #000;\">&#125;</span></code> units'",
+            "label-pattern-hint": "提示：例如文本<code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code>单位或<code><span style=\"color: #000;\">$&#123;</span>#&lt;key index&gt;<span style=\"color: #000;\">&#125;</span></code>单位'",
             "label-pattern-required": "必须提供模式",
             "label-position": "位置（相对于背景的百分比）",
             "x-pos": "X",
@@ -5481,14 +5985,18 @@
             "display-columns": "要显示的列",
             "column": "列",
             "no-columns-found": "找不到列",
-            "no-columns-matching": "未找到 '{{column}}'。"
+            "no-columns-matching": "未找到'{{column}}'。"
         },
         "range-chart": {
             "chart": "图表",
             "data-zoom": "数据缩放",
+            "range-chart-appearance": "图表范围外观",
             "range-colors": "范围颜色",
             "out-of-range-color": "超出范围颜色",
+            "show-range-thresholds": "显示范围阈值",
+            "range-thresholds-settings": "范围阈值设置",
             "fill-area": "填充区域",
+            "fill-area-opacity": "填充区域透明度",
             "range-chart-style": "范围图样式"
         },
         "rpc": {
@@ -5555,13 +6063,13 @@
             "select-entity": "选择实体",
             "select-entity-hint": "提示：选择后在地图上点击以设置位置",
             "tooltips": {
-                "placeMarker": "点击以放置 '{{entityName}}' 实体",
+                "placeMarker": "点击以放置'{{entityName}}'实体",
                 "firstVertex": "'{{entityName}}' 的多边形：点击以放置第一个点",
                 "firstVertex-cut": "点击以放置第一个点",
                 "continueLine": "'{{entityName}}' 的多边形：点击以继续绘制",
                 "continueLine-cut": "点击以继续绘制",
                 "finishLine": "点击任意现有标记以完成",
-                "finishPoly": "'{{entityName}}' 的多边形：点击第一个标记以完成并保存",
+                "finishPoly": "'{{entityName}}'的多边形：点击第一个标记以完成并保存",
                 "finishPoly-cut": "点击第一个标记以完成并保存",
                 "finishRect": "'{{entityName}}' 的多边形：点击以完成并保存",
                 "startCircle": "'{{entityName}}' 的圆：点击以放置圆心",
@@ -5683,7 +6191,7 @@
             "show-polygon-tooltip": "显示多边形文字提示",
             "auto-close-polygon-tooltips": "自动关闭多边形文字提示",
             "use-polygon-tooltip-function": "使用多边形文字提示函数",
-            "polygon-tooltip-pattern": "文字提示(例如 'Text ${keyName} units.' or <link-act name='my-action'>Link text</link-act>')",
+            "polygon-tooltip-pattern": "文字提示(例如'文本${keyName}单位'或<link-act name='my-action'>连接文本</link-act>')",
             "polygon-tooltip-function": "多边形文字提示函数",
             "polygon-color": "多边形颜色",
             "polygon-opacity": "多边形不透明度",
@@ -5708,7 +6216,7 @@
             "show-circle-tooltip": "显示圆文字提示",
             "auto-close-circle-tooltips": "自动关闭圆文字提示",
             "use-circle-tooltip-function": "使用圆文字提示函数",
-            "circle-tooltip-pattern": "文字提示 (例如 'Text ${keyName} units.' or <link-act name='my-action'>Link text</link-act>')",
+            "circle-tooltip-pattern": "文字提示(例如'文本${keyName}单位'或<link-act name='my-action'>连接文本</link-act>')",
             "circle-tooltip-function": "圆文字提示函数",
             "circle-fill-color": "圆填充颜色",
             "circle-fill-color-opacity": "圆填充颜色不透明度",
@@ -5772,10 +6280,10 @@
             "marker-color-function": "标记颜色函数"
         },
         "markdown": {
-            "use-markdown-text-function": "使用 Markdown/HTML 值函数",
-            "markdown-text-function": "Markdown/HTML 值函数",
-            "markdown-text-pattern": "Markdown/HTML 模板 (使用变量的 markdown 或 HTML，例如 '${entityName} or ${keyName} - some text.')",
-            "apply-default-markdown-style": "应用默认的 Markdown 样式",
+            "use-markdown-text-function": "使用Markdown/HTML值函数",
+            "markdown-text-function": "Markdown/HTML值函数",
+            "markdown-text-pattern": "Markdown/HTML模板(使用变量的markdown或HTML，例如 '${entityName}或${keyName}。')",
+            "apply-default-markdown-style": "应用默认Markdown样式",
             "markdown-css": "Markdown/HTML CSS"
         },
         "simple-card": {
@@ -5784,6 +6292,49 @@
             "label-position-left": "左侧",
             "label-position-top": "顶部"
         },
+        "single-switch": {
+            "behavior": "行为",
+            "layout": "布局",
+            "layout-right": "居右",
+            "layout-left": "居左",
+            "layout-centered": "居中",
+            "auto-scale": "自动",
+            "label": "标签",
+            "icon": "图标",
+            "switch-color": "开关颜色",
+            "on": "打开",
+            "off": "关闭",
+            "disabled": "禁用",
+            "tumbler-color": "缩略图颜色",
+            "on-label": "打开标签",
+            "off-label": "闭关标签",
+            "switch": "开关"
+        },
+        "slider": {
+            "behavior": "行为",
+            "initial-value": "初始值",
+            "initial-value-hint": "获取滑块的初始值。",
+            "on-value-change": "设置值",
+            "on-value-change-hint": "更改滑块数值时触发操作。",
+            "layout": "布局",
+            "layout-default": "默认",
+            "layout-extended": "扩展",
+            "layout-simplified": "精简",
+            "auto-scale": "自动",
+            "icon": "图标",
+            "value": "数值",
+            "range": "范围",
+            "min": "最小值",
+            "max": "最大值",
+            "range-ticks": "刻度范围",
+            "tick-marks": "刻度线",
+            "colors": "颜色",
+            "main": "前景色",
+            "background": "背景色",
+            "left-icon": "左边图标",
+            "right-icon": "右边图标",
+            "slider": "滑块"
+        },
         "value-card": {
             "layout": "布局",
             "layout-square": "正方形",
@@ -5799,6 +6350,16 @@
             "value-card-style": "数值卡片样式",
             "auto-scale": "自动缩放"
         },
+        "label-card": {
+            "auto-scale": "自动",
+            "label": "标签",
+            "icon": "图标",
+            "label-card-style": "样式"
+        },
+        "label-value-card": {
+            "value": "数值",
+            "label-value-card-style": "标签数值样式"
+        },
         "liquid-level-card": {
             "layout-simple": "简单",
             "layout-percentage": "百分比",
@@ -5806,21 +6367,22 @@
             "layout": "布局",
             "background-overlay": "值背景叠加",
             "total-volume": "总体积",
-            "tank": "储罐",
+            "total-volume-units": "总体积单位",
+            "tank": "容器",
             "shape": "形状",
             "datasource-units": "数据源单位",
-            "widget-units": "小部件单位",
+            "widget-units": "部件单位",
             "decimals": "小数位数",
             "liquid": "液体",
             "liquid-color": "液体颜色",
-            "value": "值",
+            "value": "数值",
             "value-font": "值字体",
             "level": "水位",
             "last-update": "最后更新",
             "shape-by-attribute": "按属性名称设置储罐形状",
             "tooltip-background": "背景颜色",
             "background-blur": "背景模糊",
-            "tank-color": "储罐颜色",
+            "tank-color": "容器颜色",
             "static": "静态",
             "see-examples": "查看示例",
             "attribute": "属性",
@@ -5835,15 +6397,15 @@
             "h-cylinder": "水平圆柱体",
             "h-capsule": "水平胶囊",
             "h-elliptical_2_1": "水平2:1椭圆",
-            "icon": "卡片图标",
-            "title": "卡片标题",
+            "icon": "图标",
+            "title": "标题",
             "units": "单位",
             "color-and-font": "颜色和字体",
             "shape-attribute-name": "属性名称",
             "total-volume-required": "需要总体积。",
             "attribute-name-required": "需要属性名称。",
-            "attribute-key-not-set": "未设置属性 '{{attributeName}}' 键",
-            "attribute-key-invalid": "属性 '{{attributeName}}' 键无效"
+            "attribute-key-not-set": "未设置属性'{{attributeName}}'键",
+            "attribute-key-invalid": "属性'{{attributeName}}'键无效"
         },
         "aggregated-value-card": {
             "subtitle": "副标题",
@@ -5885,16 +6447,33 @@
             "icon": "图标",
             "value": "数值",
             "range": "范围",
-            "min": "最小",
-            "max": "最大",
-            "range-ticks": "范围刻度",
-            "bar": "进度条",
-            "bar-color": "进度条颜色",
-            "bar-background": "进度条背景",
-            "progress-bar-card-style": "进度条卡片样式"
+            "min": "最小值",
+            "max": "最大值",
+            "range-ticks": "刻度范围",
+            "bar": "条形",
+            "bar-color": "条形颜色",
+            "bar-background": "条形背景色",
+            "progress-bar-card-style": "条形卡片样式"
+        },
+        "notification": {
+            "max-notification-display": "显示的最大通知数量",
+            "counter": "计数提示",
+            "counter-hint": "如果启用部件标题将显示通知计数",
+            "icon": "图标",
+            "counter-value": "数值",
+            "counter-color": "颜色",
+            "notification-button": "通知按钮",
+            "button-view-all": "查看全部",
+            "button-filter": "过滤",
+            "type-filter": "类型",
+            "button-mark-read": "全部已读",
+            "notification-types": "通知类型",
+            "notification-type": "通知类型",
+            "search-type": "查询类型",
+            "any-type": "任意类型"
         },
         "alarm-count": {
-            "alarm-count-card-style": "告警计数卡片样式"
+            "alarm-count-card-style": "告警告计数卡片样式"
         },
         "entity-count": {
             "entity-count-card-style": "实体计数卡片样式"
@@ -5911,16 +6490,16 @@
             "auto-scale": "自动缩放"
         },
         "table": {
-            "common-table-settings": "常规表格设置",
+            "common-table-settings": "常规设置",
             "enable-search": "启用搜索",
-            "enable-sticky-header": "始终显示表头",
-            "enable-sticky-action": "始终显示操作列",
+            "enable-sticky-header": "显示表头",
+            "enable-sticky-action": "显示操作列",
             "hidden-cell-button-display-mode": "隐藏单元格按钮操作显示模式",
             "show-empty-space-hidden-action": "显示空白区域而不是隐藏单元格按钮操作",
             "dont-reserve-space-hidden-action": "不为隐藏的操作按钮预留空间",
-            "display-timestamp": "显示时间戳列",
+            "display-timestamp": "显示时间",
             "display-pagination": "显示分页",
-            "default-page-size": "默认页面大小",
+            "default-page-size": "默认大小",
             "use-entity-label-tab-name": "在选项卡名称中使用实体标签",
             "hide-empty-lines": "隐藏空行",
             "row-style": "行样式",
@@ -5943,22 +6522,22 @@
             "display-entity-type": "显示实体类型列",
             "default-sort-order": "默认排序顺序",
             "custom-title": "自定义表头标题",
-            "column-width": "列宽度（px 或 %）",
-            "default-column-visibility": "默认列可见性",
-            "column-visibility-visible": "可见",
+            "column-width": "列宽度（px或%）",
+            "default-column-visibility": "默认显示",
+            "column-visibility-visible": "显示",
             "column-visibility-hidden": "隐藏",
             "column-visibility-hidden-mobile": "在移动模式下隐藏",
-            "column-selection-to-display": "'显示列' 中的列选择",
+            "column-selection-to-display": "'显示列'中的列选择",
             "column-selection-to-display-enabled": "启用",
             "column-selection-to-display-disabled": "禁用",
-            "alarms-table-title": "告警表标题",
+            "alarms-table-title": "告警表格标题",
             "enable-alarms-selection": "启用告警选择",
             "enable-alarms-search": "启用告警搜索",
             "enable-alarm-filter": "启用告警过滤",
             "display-alarm-details": "显示告警详细信息",
             "allow-alarms-ack": "允许确认告警",
             "allow-alarms-clear": "允许清除告警",
-            "display-alarm-activity": "显示告警活动",
+            "display-alarm-activity": "显示活动告警",
             "allow-alarms-assign": "允许分配告警",
             "columns": "列",
             "column-settings": "列设置",
@@ -5971,11 +6550,184 @@
             "table-buttons": "表格按钮",
             "pagination": "分页",
             "rows": "行",
-            "timeseries-column-error": "至少应指定一个时间序列列",
-            "alarm-column-error": "至少应指定一个告警列",
-            "table-tabs": "表格标签",
+            "timeseries-column-error": "必须指定一个时间序序列",
+            "alarm-column-error": "必须指定一个告警数据列",
+            "table-tabs": "标签",
             "show-cell-actions-menu-mobile": "在移动模式下显示单元格操作下拉菜单"
         },
+        "latest-chart": {
+            "total": "总数",
+            "auto-scale": "自动",
+            "clockwise-layout": "顺时针方向",
+            "sort-series": "标签排序",
+            "tooltip-value-type-absolute": "绝对",
+            "tooltip-value-type-percentage": "百分比"
+        },
+        "pie-chart": {
+            "pie-chart-appearance": "外观",
+            "label": "标签",
+            "border": "标签",
+            "radius": "圆角",
+            "pie-chart-card-style": "样式"
+        },
+        "radar-chart": {
+            "radar-appearance": "外观",
+            "shape": "形状",
+            "shape-polygon": "多边形",
+            "shape-circle": "圆形",
+            "color": "颜色",
+            "line": "线条",
+            "points": "点",
+            "points-label": "点标签",
+            "radar-axis": "雷达轴",
+            "axis-label": "轴标签",
+            "ticks-label": "刻度标签",
+            "radar-chart-style": "样式"
+        },
+        "time-series-chart": {
+            "chart": "图表",
+            "chart-style": "样式",
+            "data-zoom": "数据缩放",
+            "stack-mode": "堆叠模式",
+            "stack-mode-hint": "图表上的堆栈具有同一单元的序列将放置在一起。",
+            "axes": "坐标",
+            "y-axes": "Y轴",
+            "line-type": "线条类型",
+            "line-width": "线条宽度",
+            "type-line": "线条",
+            "type-bar": "条形",
+            "type-point": "点",
+            "no-aggregation-bar-width-strategy": "非聚合数据的条形宽度",
+            "no-aggregation-bar-width-strategy-group": "分组",
+            "no-aggregation-bar-width-strategy-separate": "分隔",
+            "bar-group-width": "条形分组宽度",
+            "bar-width": "条形宽度",
+            "bar-width-relative": "百分比",
+            "bar-width-absolute": "绝对(ms)",
+            "comparison": {
+                "comparison": "数据比较",
+                "comparison-hint": "仅与历史数据一起比较！",
+                "show": "显示",
+                "settings": "比较设置",
+                "show-values-for-comparison": "显示历史数据进行比较",
+                "comparison-values-label": "数据键标签",
+                "comparison-values-label-auto": "自动",
+                "comparison-data-color": "颜色"
+            },
+            "threshold": {
+                "thresholds": "阈值",
+                "source": "源",
+                "key-value": "键/值",
+                "no-thresholds": "未配置阈值",
+                "add-threshold": "添加",
+                "type-constant": "常量",
+                "type-latest-key": "键",
+                "type-entity": "实体",
+                "threshold-settings": "设置阈值",
+                "remove-threshold": "移除阈值",
+                "threshold-value-required": "阈值必填。",
+                "key-required": "键必填。",
+                "entity-key-required": "实体必填。",
+                "line-appearance": "线条外观",
+                "line-color": "线条颜色",
+                "start-symbol": "起始",
+                "end-symbol": "结束",
+                "symbol-size": "尺寸",
+                "label": "标签",
+                "label-position-start": "起始",
+                "label-position-middle": "中间",
+                "label-position-end": "结束",
+                "label-position-inside-start": "起始",
+                "label-position-inside-start-top": "起始上",
+                "label-position-inside-start-bottom": "起始下",
+                "label-position-inside-middle": "中间",
+                "label-position-inside-middle-top": "中间上",
+                "label-position-inside-middle-bottom": "中间下",
+                "label-position-inside-end": "结束",
+                "label-position-inside-end-top": "结束上",
+                "label-position-inside-end-bottom": "结束下",
+                "label-background": "标签背景"
+            },
+            "state": {
+                "states": "状态",
+                "label": "标签",
+                "ticks-value": "刻度",
+                "source": "源",
+                "value-range": "值/范围",
+                "no-states": "未配置状态",
+                "add-state": "添加",
+                "type-constant": "常量",
+                "type-range": "范围",
+                "from": "从",
+                "to": "到",
+                "remove-state": "移除"
+            },
+            "grid": {
+                "grid": "网格",
+                "background-color": "背景颜色",
+                "border": "边框"
+            },
+            "axis": {
+                "axes": "坐标",
+                "x-axis": "X轴",
+                "y-axis": "Y轴",
+                "y-axis-settings": "Y轴设置",
+                "comparison-x-axis-settings": "比较X轴设置",
+                "remove-y-axis": "移除Y轴",
+                "id": "编号",
+                "label": "标签",
+                "position": "位置",
+                "position-left": "左",
+                "position-right": "右",
+                "position-top": "上",
+                "position-bottom": "下",
+                "tick-labels": "刻度标签",
+                "ticks-formatter-function": "刻度格式化函数",
+                "ticks-generator-function": "刻度生成函数",
+                "show-ticks": "显示刻度",
+                "show-line": "显示线条",
+                "show-split-lines": "显示分隔线",
+                "show-split-lines-x-axis-hint": "启用则显示垂直线。",
+                "show-split-lines-y-axis-hint": "启用则显示水平线。",
+                "ticks-interval": "刻度间隔",
+                "ticks-interval-hint": "强制设置轴的分段间隔。",
+                "split-number": "分隔号码",
+                "split-number-hint": "轴分成的多少段数量。",
+                "min": "最小值",
+                "max": "最大值",
+                "show": "显示",
+                "add-y-axis": "添加"
+            },
+            "series": {
+                "legend-settings": "设置图例",
+                "show-in-legend": "显示图例",
+                "show-in-legend-hint": "在图例中显示系列名称和数据。",
+                "hidden-by-default": "默认情况下隐藏",
+                "hidden-by-default-hint": "默认情况下使系列隐藏在图例中。",
+                "series-type": "序列类型",
+                "type": "类型",
+                "type-line": "线条类型",
+                "type-bar": "条形",
+                "line": {
+                    "line": "线条",
+                    "show-line": "显示线条",
+                    "step-line": "斜线",
+                    "step-type-start": "起始",
+                    "step-type-middle": "中间",
+                    "step-type-end": "结束",
+                    "smooth-line": "流畅"
+                },
+                "point": {
+                    "points": "点",
+                    "show-points": "显示",
+                    "point-label": "标签",
+                    "point-label-hint": "显示具有超过序列点的值的标签。",
+                    "point-label-background": "背景",
+                    "point-shape": "形状",
+                    "point-size": "尺寸"
+                }
+            }
+        },
         "wind-speed-direction": {
             "layout": "布局",
             "layout-default": "默认",
@@ -6001,9 +6753,79 @@
             "value-source": "值来源",
             "predefined-value": "预定义值",
             "entity-attribute": "从实体属性中获取的值",
-            "value": "值",
+            "value": "数值",
+            "value-required": "数值必填。",
+            "key-required": "键必填。",
+            "entity-key-required": "实体必填。",
             "source-entity-alias": "源实体别名",
-            "source-entity-attribute": "源实体属性"
+            "source-entity-attribute": "源实体属性",
+            "type-constant": "常量",
+            "type-latest-key": "键",
+            "type-entity": "实体"
+        },
+        "rpc-state": {
+            "initial-state": "初始状态",
+            "initial-state-hint": "获取组件的初始状态（开/关）。",
+            "disabled-state": "禁用状态",
+            "disabled-state-hint": "配置禁用条件。",
+            "turn-on": "打开",
+            "turn-on-hint": "当滑块切换至“开”时触发的操作",
+            "turn-off": "关闭",
+            "turn-off-hint": "当滑块切换至“关闭”时触发的操作",
+            "on": "打开",
+            "off": "关闭",
+            "disabled": "禁用"
+        },
+        "value-action": {
+            "do-nothing": "无任何动作",
+            "execute-rpc": "执行RPC",
+            "get-attribute": "获取属性",
+            "set-attribute": "设置属性",
+            "get-time-series": "获取遥测",
+            "get-dashboard-state": "获取仪表板状态",
+            "add-time-series": "添加遥测",
+            "execute-rpc-text": "执行RPC方法'{{methodName}}'",
+            "get-attribute-text": "使用属性'{{key}}'",
+            "get-time-series-text": "使用遥测'{{key}}'",
+            "get-dashboard-state-text": "使用仪表板状态",
+            "when-dashboard-state-is-text": "当仪表板状态为'{{state}}'",
+            "when-dashboard-state-function-is-text": "当(仪表板状态)是'{{state}}'",
+            "set-attribute-to-value-text": "设置'{{key}}'属性值:{{value}}",
+            "add-time-series-value-text": "添加'{{key}}'遥测值:{{value}}",
+            "set-attribute-text": "设置'{{key}}'属性",
+            "add-time-series-text": "添加'{{key}}'遥测",
+            "action": "动作",
+            "value": "数值",
+            "init-value-hint": "在设备发送数据之前将值设置。",
+            "method": "方法",
+            "method-name-required": "方法名称必填。",
+            "request-timeout-ms": "RPC请求超时(ms)",
+            "request-timeout-required": "RPC请求超时必填。",
+            "min-request-timeout-error": "请求超时值应更大或等于5000（5秒）。",
+            "request-persistent": "RPC请求持久化",
+            "persistent-polling-interval": "持久化的轮训间隔(ms)",
+            "persistent-polling-interval-hint": "轮询获取持久化RPC的命令响应",
+            "persistent-polling-interval-required": "轮询获取持久化必填。",
+            "min-persistent-polling-interval-error": "持续的轮询间隔值应>=1000 ms（1秒）。",
+            "attribute-scope": "作用域",
+            "attribute-key": "键名称",
+            "attribute-key-required": "键名称必填。",
+            "time-series-key": "键名称",
+            "time-series-key-required": "键名称必填。",
+            "action-result-converter": "动作转换",
+            "converter-none": "无",
+            "converter-function": "函数",
+            "converter-constant": "常量",
+            "converter-value": "数值",
+            "parse-value-function": "解析函数",
+            "state-when-result-is": "'{{state}}'结果是",
+            "parameters": "参数",
+            "convert-value-function": "转换函数",
+            "error": {
+                "target-entity-is-not-set": "目标实体未设置！",
+                "failed-to-perform-action": "无法执行<b>{{ actionLabel }}</b>操作。",
+                "invalid-attribute-scope": " {{entityType}}</b>实体不支持{{scope}}属性作用域。"
+            }
         },
         "widget-font": {
             "font-settings": "字体设置",
@@ -6032,12 +6854,12 @@
             "cpu": "CPU",
             "ram": "内存",
             "disk": "磁盘",
-            "cpu-warning-text": "CPU 使用率过高。为了避免系统故障，请优化系统性能。",
-            "cpu-critical-text": "CPU 使用率严重过高。为了避免系统故障，请优化系统性能。",
-            "ram-warning-text": "内存储备不足。为了避免系统故障，请优化系统性能或增加内存大小。",
-            "ram-critical-text": "内存储备严重不足。为了避免系统故障，请优化系统性能或增加内存大小。",
-            "disk-warning-text": "磁盘空间不足。为了避免数据丢失，请释放或扩展磁盘空间。",
-            "disk-critical-text": "磁盘空间严重不足。为了避免数据丢失，请释放或扩展磁盘空间。"
+            "cpu-warning-text": "CPU使用率过高为了避免系统故障，请优化系统性能。",
+            "cpu-critical-text": "CPU使用率严重过高为了避免系统故障，请优化系统性能。",
+            "ram-warning-text": "内存储备不足为了避免系统故障，请优化系统性能或增加内存大小。",
+            "ram-critical-text": "内存储备严重不足为了避免系统故障，请优化系统性能或增加内存大小。",
+            "disk-warning-text": "磁盘空间不足为了避免数据丢失，请释放或扩展磁盘空间。",
+            "disk-critical-text": "磁盘空间严重不足为了避免数据丢失，请释放或扩展磁盘空间。"
         },
         "cluster-info": {
             "service-id": "服务ID",
@@ -6084,10 +6906,10 @@
             "email-feature": "电子邮件",
             "sms-feature": "短信",
             "slack-feature": "Slack",
-            "oauth2-feature": "OAuth 2",
+            "oauth2-feature": "OAuth2.0",
             "2fa-feature": "两步验证",
-            "feature-configured": "功能已配置\n点击设置",
-            "feature-not-configured": "功能未配置\n点击设置"
+            "feature-configured": "功能已配置",
+            "feature-not-configured": "功能未配置"
         },
         "version-info": {
             "title": "版本",
@@ -6102,19 +6924,19 @@
         "usage-info": {
             "title": "使用情况",
             "entities": "实体",
-            "api-calls": "API 调用"
+            "api-calls": "API调用"
         },
         "functions": {
             "title": "功能",
-            "pe-feature-tooltip": "仅适用于 ThingsBoard 专业版",
-            "switch-to-pe": "切换至专业版",
+            "pe-feature-tooltip": "仅适用于ThingsBoard专业版",
+            "switch-to-pe": "切换专业版",
             "alarms": "告警",
             "dashboards": "仪表盘",
             "entities-and-relations": "实体和关系",
             "profiles": "配置",
             "advanced-features": "高级功能",
             "notification-center": "通知中心",
-            "api-usage": "API 使用情况",
+            "api-usage": "API使用情况",
             "customers": "客户",
             "customers-hierarchy": "客户层级",
             "roles-and-permissions": "角色和权限",
@@ -6191,7 +7013,7 @@
                         "install-curl": "从Windows 10 b17063开始，cURL已默认可用。"
                     },
                     "replace-access-token": "将<em>$ACCESS_TOKEN</em>替换为您的设备令牌：",
-                    "content-after": "<p>您还可以使用其他协议，如MQTT、CoAP等。</p><p>请按照文档进行操作：</p>",
+                    "content-after": "<p>您还可以使用其他协议如MQTT、CoAP等。</p><p>请按照文档进行操作：</p>",
                     "how-to-connect-device": "如何连接设备"
                 },
                 "step3": {
@@ -6236,8 +7058,8 @@
         "phone-input-label": "手机号码",
         "phone-input-required": "手机号码必填",
         "phone-input-validation": "手机号码无效或不存在",
-        "phone-input-pattern": "无效的手机号码。应为E.164格式，例如：{{phoneNumber}}",
-        "phone-input-hint": "E.164格式手机号码，例如：{{phoneNumber}}"
+        "phone-input-pattern": "无效的手机号码应为E.164格式例如：{{phoneNumber}}",
+        "phone-input-hint": "E.164格式手机号码例如：{{phoneNumber}}"
     },
     "custom": {
         "widget-action": {
@@ -6255,12 +7077,12 @@
         }
     },
     "paginator": {
-        "items-per-page": "每页条数:",
+        "items-per-page": "每页数量:",
         "first-page-label": "首页",
         "last-page-label": "尾页",
         "next-page-label": "下一页",
         "previous-page-label": "上一页",
-        "items-per-page-separator": "of"
+        "items-per-page-separator": "至"
     },
     "language": {
         "language": "语言"
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
index 959d1d2048..9782faf351 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
@@ -2251,78 +2251,15 @@
         "function": "函數"
     },
     "gateway": {
-        "add-entry": "增加配置",
-        "connector-add": "增加新連接器",
-        "connector-enabled": "啟用連接器",
-        "connector-name": "連接器名稱",
-        "connector-name-required": "需要連接器名稱。",
-        "connector-type": "連接器類型",
-        "connector-type-required": "需要連接器類型。",
-        "connectors": "連接器配置",
-        "create-new-gateway": "建立新閘道",
-        "create-new-gateway-text": "您確定要建立一個名稱為：'{{gatewayName}}'的新閘道嗎？",
-        "delete": "刪除配置",
-        "download-tip": "下載配置文件",
+        "no-gateway-found": "未找到閘道。",
+        "no-gateway-matching": " 未找到'{{item}}'。",
         "gateway": "閘道",
         "gateway-exists": "同名設備已存在。",
         "gateway-name": "閘道名稱",
         "gateway-name-required": "需要閘道名稱。",
         "gateway-saved": "閘道配置已成功保存。",
-        "json-parse": "無效的JSON",
-        "json-required": "欄位不能為空。",
-        "no-connectors": "無連接器",
-        "no-data": "無配置",
-        "no-gateway-found": "未找到閘道。",
-        "no-gateway-matching": " 未找到'{{item}}'。",
-        "path-logs": "日誌文件的路徑",
-        "path-logs-required": "需要路徑。",
-        "remote": "移除配置",
-        "remote-logging-level": "日誌記錄級別",
-        "remove-entry": "移除配置",
-        "save-tip": "保存配置文件",
-        "security-type": "安全類型",
-        "security-types": {
-            "access-token": "訪問Token",
-            "tls": "TLS"
-        },
-        "storage": "貯存",
-        "storage-max-file-records": "文件中的最大紀錄",
-        "storage-max-files": "最大文件數",
-        "storage-max-files-min": "最小數量為1。",
-        "storage-max-files-pattern": "號碼無效。",
-        "storage-max-files-required": "需要號碼。",
-        "storage-max-records": "存儲中的最大紀錄",
-        "storage-max-records-min": "最小紀錄數為1。",
-        "storage-max-records-pattern": "號碼無效。",
-        "storage-max-records-required": "需要最大紀錄數",
-        "storage-pack-size": "最大事件包大小",
-        "storage-pack-size-min": "最小數量為1。",
-        "storage-pack-size-pattern": "號碼無效．",
-        "storage-pack-size-required": "需要最大事件包大小",
-        "storage-path": "存儲路徑",
-        "storage-path-required": "需要存儲路徑。",
-        "storage-type": "存儲類型",
-        "storage-types": {
-            "file-storage": "文件存儲",
-            "memory-storage": "記憶體存儲"
-        },
-        "thingsboard": "ThingsBoard",
-        "thingsboard-host": "ThingsBoard主機",
-        "thingsboard-host-required": "需要主機。",
-        "thingsboard-port": "ThingsBoard連接埠",
-        "thingsboard-port-max": "最大埠號為 65535。",
-        "thingsboard-port-min": "最小埠號為1。",
-        "thingsboard-port-pattern": "連接埠無效。",
-        "thingsboard-port-required": "需要連接埠。",
-        "tidy": "整理",
-        "tidy-tip": "整理配置JSON",
-        "title-connectors-json": "連接器{{typeName}}配置",
-        "tls-path-ca-certificate": "閘道上CA證書的路徑",
-        "tls-path-client-certificate": "閘道上用戶端憑據的路徑",
-        "tls-path-private-key": "閘道上的私鑰路徑",
-        "toggle-fullscreen": "切換全螢幕",
-        "transformer-json-config": "配置JSON*",
-        "update-config": "增加/更新配置JSON"
+        "create-new-gateway": "建立新閘道",
+        "create-new-gateway-text": "您確定要建立一個名稱為：'{{gatewayName}}'的新閘道嗎？"
     },
     "grid": {
         "delete-item-title": "您確定要刪除此項嗎？",
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/bacnet.json b/ui-ngx/src/assets/metadata/connector-default-configs/bacnet.json
deleted file mode 100644
index a03bbdb975..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/bacnet.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "general": {
-    "objectName": "TB_gateway",
-    "address": "0.0.0.0:47808",
-    "objectIdentifier": 599,
-    "maxApduLengthAccepted": 1476,
-    "segmentationSupported": "segmentedBoth",
-    "vendorIdentifier": 15
-  },
-  "devices": [
-    {
-      "deviceName": "BACnet Device ${objectName}",
-      "deviceType": "default",
-      "address": "192.168.2.110:47808",
-      "pollPeriod": 10000,
-      "attributes": [
-        {
-          "key": "temperature",
-          "type": "string",
-          "objectId": "analogOutput:1",
-          "propertyId": "presentValue"
-        }
-      ],
-      "timeseries": [
-        {
-          "key": "state",
-          "type": "bool",
-          "objectId": "binaryValue:1",
-          "propertyId": "presentValue"
-        }
-      ],
-      "attributeUpdates": [
-        {
-          "key": "brightness",
-          "requestType": "writeProperty",
-          "objectId": "analogOutput:1",
-          "propertyId": "presentValue"
-        }
-      ],
-      "serverSideRpc": [
-        {
-          "method": "set_state",
-          "requestType": "writeProperty",
-          "requestTimeout": 10000,
-          "objectId": "binaryOutput:1",
-          "propertyId": "presentValue"
-        },
-        {
-          "method": "get_state",
-          "requestType": "readProperty",
-          "requestTimeout": 10000,
-          "objectId": "binaryOutput:1",
-          "propertyId": "presentValue"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/ble.json b/ui-ngx/src/assets/metadata/connector-default-configs/ble.json
deleted file mode 100644
index 609e742f2e..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/ble.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "passiveScanMode": true,
-  "showMap": false,
-  "scanner": {
-    "timeout": 10000,
-    "deviceName": "Device name"
-  },
-  "devices": [
-    {
-      "name": "Temperature and humidity sensor",
-      "MACAddress": "4C:65:A8:DF:85:C0",
-      "pollPeriod": 500000,
-      "showMap": false,
-      "timeout": 10000,
-      "connectRetry": 5,
-      "connectRetryInSeconds": 0,
-      "waitAfterConnectRetries": 10,
-      "telemetry": [
-        {
-          "key": "temperature",
-          "method": "notify",
-          "characteristicUUID": "226CAA55-6476-4566-7562-66734470666D",
-          "valueExpression": "[2]"
-        },
-        {
-          "key": "humidity",
-          "method": "notify",
-          "characteristicUUID": "226CAA55-6476-4566-7562-66734470666D",
-          "valueExpression": "[0]"
-        }
-      ],
-      "attributes": [
-        {
-          "key": "name",
-          "method": "read",
-          "characteristicUUID": "00002A00-0000-1000-8000-00805F9B34FB",
-          "valueExpression": "[0:2]cm [2:]A"
-        },
-        {
-          "key": "values",
-          "method": "read",
-          "characteristicUUID": "00002A00-0000-1000-8000-00805F9B34FB",
-          "valueExpression": "All values: [:]"
-        }
-      ],
-      "attributeUpdates": [
-        {
-          "attributeOnThingsBoard": "sharedName",
-          "characteristicUUID": "00002A00-0000-1000-8000-00805F9B34FB"
-        }
-      ],
-      "serverSideRpc": [
-        {
-          "methodRPC": "rpcMethod1",
-          "withResponse": true,
-          "characteristicUUID": "00002A00-0000-1000-8000-00805F9B34FB",
-          "methodProcessing": "read"
-        },
-        {
-          "methodRPC": "rpcMethod2",
-          "withResponse": true,
-          "characteristicUUID": "00002A00-0000-1000-8000-00805F9B34FB",
-          "methodProcessing": "write"
-        },
-        {
-          "methodRPC": "rpcMethod3",
-          "withResponse": true,
-          "methodProcessing": "scan"
-        }
-      ]
-    }
-  ]
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/can.json b/ui-ngx/src/assets/metadata/connector-default-configs/can.json
deleted file mode 100644
index ea9d162960..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/can.json
+++ /dev/null
@@ -1,89 +0,0 @@
-{
-  "interface": "socketcan",
-  "channel": "vcan0",
-  "backend": {
-    "fd": true
-  },
-  "reconnectPeriod": 5,
-  "devices": [
-    {
-      "name": "Car",
-      "sendDataOnlyOnChange": false,
-      "enableUnknownRpc": true,
-      "strictEval": false,
-      "attributes": [
-        {
-          "key": "isDriverDoorOpened",
-          "nodeId": 41,
-          "command": "2:2:big:8717",
-          "value": "4:1:int",
-          "expression": "bool(value & 0b00000100)",
-          "polling": {
-            "type": "once",
-            "dataInHex": "AB CD AB CD"
-          }
-        }
-      ],
-      "timeseries": [
-        {
-          "key": "rpm",
-          "nodeId": 1918,
-          "isExtendedId": true,
-          "command": "2:2:big:48059",
-          "value": "4:2:big:int",
-          "expression": "value / 4",
-          "polling": {
-            "type": "always",
-            "period": 5,
-            "dataInHex": "aaaa bbbb aaaa bbbb"
-          }
-        },
-        {
-          "key": "milliage",
-          "nodeId": 1918,
-          "isExtendedId": true,
-          "value": "4:2:little:int",
-          "expression": "value * 10",
-          "polling": {
-            "type": "always",
-            "period": 30,
-            "dataInHex": "aa bb cc dd ee ff aa bb"
-          }
-        }
-      ],
-      "attributeUpdates": [
-        {
-          "attributeOnThingsBoard": "softwareVersion",
-          "nodeId": 64,
-          "isExtendedId": true,
-          "dataLength": 4,
-          "dataExpression": "value + 5",
-          "dataByteorder": "little"
-        }
-      ],
-      "serverSideRpc": [
-        {
-          "method": "sendSameData",
-          "nodeId": 4,
-          "isExtendedId": true,
-          "isFd": true,
-          "bitrateSwitch": true,
-          "dataInHex": "aa bb cc dd ee ff    aa bb aa bb cc d ee ff"
-        },
-        {
-          "method": "setLightLevel",
-          "nodeId": 5,
-          "dataLength": 2,
-          "dataByteorder": "little",
-          "dataBefore": "00AA"
-        },
-        {
-          "method": "setSpeed",
-          "nodeId": 16,
-          "dataAfter": "0102",
-          "dataExpression": "userSpeed if maxAllowedSpeed > userSpeed else maxAllowedSpeed"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/ftp.json b/ui-ngx/src/assets/metadata/connector-default-configs/ftp.json
deleted file mode 100644
index 3a193e43da..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/ftp.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
-  "host": "0.0.0.0",
-  "port": 21,
-  "TLSSupport": false,
-  "security": {
-    "type": "basic",
-    "username": "admin",
-    "password": "admin"
-  },
-  "paths": [
-    {
-      "devicePatternName": "asd",
-      "devicePatternType": "Device",
-      "delimiter": ",",
-      "path": "fol/*_hello*.txt",
-      "readMode": "FULL",
-      "maxFileSize": 5,
-      "pollPeriod": 500,
-      "txtFileDataView": "SLICED",
-      "withSortingFiles": true,
-      "attributes": [
-        {
-          "key": "temp",
-          "value": "[1:]"
-        },
-        {
-          "key": "tmp",
-          "value": "[0:1]"
-        }
-      ],
-      "timeseries": [
-        {
-          "type": "int",
-          "key": "[0:1]",
-          "value": "[0:1]"
-        },
-        {
-          "type": "int",
-          "key": "temp",
-          "value": "[1:]"
-        }
-      ]
-    }
-  ],
-  "attributeUpdates": [
-    {
-      "path": "fol/hello.json",
-      "deviceNameFilter": ".*",
-      "writingMode": "WRITE",
-      "valueExpression": "{'${attributeKey}':'${attributeValue}'}"
-    }
-  ],
-  "serverSideRpc": [
-    {
-      "deviceNameFilter": ".*",
-      "methodFilter": "read",
-      "valueExpression": "${params}"
-    },
-    {
-      "deviceNameFilter": ".*",
-      "methodFilter": "write",
-      "valueExpression": "${params}"
-    }
-  ]
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json b/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json
deleted file mode 100644
index 019d2062f8..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/modbus.json
+++ /dev/null
@@ -1,472 +0,0 @@
-{
-    "3.5.2": {
-        "master": {
-            "slaves": [
-                {
-                    "host": "127.0.0.1",
-                    "port": 5021,
-                    "type": "tcp",
-                    "method": "socket",
-                    "timeout": 35,
-                    "byteOrder": "LITTLE",
-                    "wordOrder": "LITTLE",
-                    "retries": true,
-                    "retryOnEmpty": true,
-                    "retryOnInvalid": true,
-                    "pollPeriod": 5000,
-                    "unitId": 1,
-                    "deviceName": "Temp Sensor",
-                    "deviceType": "default",
-                    "connectAttemptTimeMs": 5000,
-                    "connectAttemptCount": 5,
-                    "waitAfterFailedAttemptsMs": 300000,
-                    "attributes": [
-                        {
-                            "tag": "string_read",
-                            "type": "string",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 1
-                        },
-                        {
-                            "tag": "bits_read",
-                            "type": "bits",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 5
-                        },
-                        {
-                            "tag": "8int_read",
-                            "type": "8int",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 6
-                        },
-                        {
-                            "tag": "16int_read",
-                            "type": "16int",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 7
-                        },
-                        {
-                            "tag": "32int_read_divider",
-                            "type": "32int",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 8,
-                            "divider": 10
-                        },
-                        {
-                            "tag": "8int_read_multiplier",
-                            "type": "8int",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 10,
-                            "multiplier": 10
-                        },
-                        {
-                            "tag": "32int_read",
-                            "type": "32int",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 11
-                        },
-                        {
-                            "tag": "64int_read",
-                            "type": "64int",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 13
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "tag": "8uint_read",
-                            "type": "8uint",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 17
-                        },
-                        {
-                            "tag": "16uint_read",
-                            "type": "16uint",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 18
-                        },
-                        {
-                            "tag": "32uint_read",
-                            "type": "32uint",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 20
-                        },
-                        {
-                            "tag": "64uint_read",
-                            "type": "64uint",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 24
-                        },
-                        {
-                            "tag": "16float_read",
-                            "type": "16float",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 25
-                        },
-                        {
-                            "tag": "32float_read",
-                            "type": "32float",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 26
-                        },
-                        {
-                            "tag": "64float_read",
-                            "type": "64float",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 28
-                        }
-                    ],
-                    "attributeUpdates": [
-                        {
-                            "tag": "shared_attribute_write",
-                            "type": "32int",
-                            "functionCode": 6,
-                            "objectsCount": 2,
-                            "address": 29
-                        }
-                    ],
-                    "rpc": [
-                        {
-                            "tag": "setValue",
-                            "type": "bits",
-                            "functionCode": 5,
-                            "objectsCount": 1,
-                            "address": 31
-                        },
-                        {
-                            "tag": "getValue",
-                            "type": "bits",
-                            "functionCode": 1,
-                            "objectsCount": 1,
-                            "address": 31
-                        },
-                        {
-                            "tag": "setCPUFanSpeed",
-                            "type": "32int",
-                            "functionCode": 16,
-                            "objectsCount": 2,
-                            "address": 33
-                        },
-                        {
-                            "tag": "getCPULoad",
-                            "type": "32int",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 35
-                        }
-                    ]
-                }
-            ]
-        },
-        "slave": {
-            "type": "tcp",
-            "host": "127.0.0.1",
-            "port": 5026,
-            "method": "socket",
-            "deviceName": "Modbus Slave Example",
-            "deviceType": "default",
-            "pollPeriod": 5000,
-            "sendDataToThingsBoard": false,
-            "byteOrder": "LITTLE",
-            "wordOrder": "LITTLE",
-            "unitId": 0,
-            "values": {
-                "holding_registers": {
-                    "attributes": [
-                        {
-                            "address": 1,
-                            "type": "string",
-                            "tag": "sm",
-                            "objectsCount": 1,
-                            "value": "ON"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "address": 2,
-                            "type": "8int",
-                            "tag": "smm",
-                            "objectsCount": 1,
-                            "value": "12334"
-                        }
-                    ],
-                    "attributeUpdates": [
-                        {
-                            "tag": "shared_attribute_write",
-                            "type": "32int",
-                            "functionCode": 6,
-                            "objectsCount": 2,
-                            "address": 29,
-                            "value": 1243
-                        }
-                    ],
-                    "rpc": [
-                        {
-                            "tag": "setValue",
-                            "type": "bits",
-                            "functionCode": 5,
-                            "objectsCount": 1,
-                            "address": 31,
-                            "value": 22
-                        }
-                    ]
-                },
-                "coils_initializer": {
-                    "attributes": [
-                        {
-                            "address": 5,
-                            "type": "8int",
-                            "tag": "coil",
-                            "objectsCount": 1,
-                            "value": 0
-                        }
-                    ],
-                    "timeseries": [],
-                    "attributeUpdates": [],
-                    "rpc": []
-                }
-            }
-        }
-    },
-    "legacy": {
-        "master": {
-            "slaves": [
-                {
-                    "host": "127.0.0.1",
-                    "port": 5021,
-                    "type": "tcp",
-                    "method": "socket",
-                    "timeout": 35,
-                    "byteOrder": "LITTLE",
-                    "wordOrder": "LITTLE",
-                    "retries": true,
-                    "retryOnEmpty": true,
-                    "retryOnInvalid": true,
-                    "pollPeriod": 5000,
-                    "unitId": 1,
-                    "deviceName": "Temp Sensor",
-                    "sendDataOnlyOnChange": true,
-                    "connectAttemptTimeMs": 5000,
-                    "connectAttemptCount": 5,
-                    "waitAfterFailedAttemptsMs": 300000,
-                    "attributes": [
-                        {
-                            "tag": "string_read",
-                            "type": "string",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 1
-                        },
-                        {
-                            "tag": "bits_read",
-                            "type": "bits",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 5
-                        },
-                        {
-                            "tag": "16int_read",
-                            "type": "16int",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 7
-                        },
-                        {
-                            "tag": "32int_read_divider",
-                            "type": "32int",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 8,
-                            "divider": 10
-                        },
-                        {
-                            "tag": "32int_read",
-                            "type": "32int",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 11
-                        },
-                        {
-                            "tag": "64int_read",
-                            "type": "64int",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 13
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "tag": "16uint_read",
-                            "type": "16uint",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 18
-                        },
-                        {
-                            "tag": "32uint_read",
-                            "type": "32uint",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 20
-                        },
-                        {
-                            "tag": "64uint_read",
-                            "type": "64uint",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 24
-                        },
-                        {
-                            "tag": "16float_read",
-                            "type": "16float",
-                            "functionCode": 4,
-                            "objectsCount": 1,
-                            "address": 25
-                        },
-                        {
-                            "tag": "32float_read",
-                            "type": "32float",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 26
-                        },
-                        {
-                            "tag": "64float_read",
-                            "type": "64float",
-                            "functionCode": 4,
-                            "objectsCount": 4,
-                            "address": 28
-                        }
-                    ],
-                    "attributeUpdates": [
-                        {
-                            "tag": "shared_attribute_write",
-                            "type": "32int",
-                            "functionCode": 6,
-                            "objectsCount": 2,
-                            "address": 29
-                        }
-                    ],
-                    "rpc": [
-                        {
-                            "tag": "setValue",
-                            "type": "bits",
-                            "functionCode": 5,
-                            "objectsCount": 1,
-                            "address": 31
-                        },
-                        {
-                            "tag": "getValue",
-                            "type": "bits",
-                            "functionCode": 1,
-                            "objectsCount": 1,
-                            "address": 31
-                        },
-                        {
-                            "tag": "setCPUFanSpeed",
-                            "type": "32int",
-                            "functionCode": 16,
-                            "objectsCount": 2,
-                            "address": 33
-                        },
-                        {
-                            "tag": "getCPULoad",
-                            "type": "32int",
-                            "functionCode": 4,
-                            "objectsCount": 2,
-                            "address": 35
-                        }
-                    ]
-                }
-            ]
-        },
-        "slave": {
-            "type": "tcp",
-            "host": "127.0.0.1",
-            "port": 5026,
-            "method": "socket",
-            "deviceName": "Modbus Slave Example",
-            "deviceType": "default",
-            "pollPeriod": 5000,
-            "sendDataToThingsBoard": false,
-            "byteOrder": "LITTLE",
-            "wordOrder": "LITTLE",
-            "unitId": 0,
-            "values": {
-                "holding_registers": [
-                    {
-                        "attributes": [
-                            {
-                                "address": 1,
-                                "type": "string",
-                                "tag": "sm",
-                                "objectsCount": 1,
-                                "value": "ON"
-                            }
-                        ],
-                        "timeseries": [
-                            {
-                                "address": 2,
-                                "type": "int",
-                                "tag": "smm",
-                                "objectsCount": 1,
-                                "value": "12334"
-                            }
-                        ],
-                        "attributeUpdates": [
-                            {
-                                "tag": "shared_attribute_write",
-                                "type": "32int",
-                                "functionCode": 6,
-                                "objectsCount": 2,
-                                "address": 29,
-                                "value": 1243
-                            }
-                        ],
-                        "rpc": [
-                            {
-                                "tag": "setValue",
-                                "type": "bits",
-                                "functionCode": 5,
-                                "objectsCount": 1,
-                                "address": 31,
-                                "value": 22
-                            }
-                        ]
-                    }
-                ],
-                "coils_initializer": [
-                    {
-                        "attributes": [
-                            {
-                                "address": 5,
-                                "type": "string",
-                                "tag": "sm",
-                                "objectsCount": 1,
-                                "value": "12"
-                            }
-                        ],
-                        "timeseries": [],
-                        "attributeUpdates": [],
-                        "rpc": []
-                    }
-                ]
-            }
-        }
-    }
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/mqtt.json b/ui-ngx/src/assets/metadata/connector-default-configs/mqtt.json
deleted file mode 100644
index 5b8b8dbd44..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/mqtt.json
+++ /dev/null
@@ -1,398 +0,0 @@
-{
-    "3.5.2": {
-        "broker": {
-            "host": "127.0.0.1",
-            "port": 1883,
-            "clientId": "ThingsBoard_gateway",
-            "version": 5,
-            "maxMessageNumberPerWorker": 10,
-            "maxNumberOfWorkers": 100,
-            "sendDataOnlyOnChange": false,
-            "security": {
-                "type": "anonymous"
-            }
-        },
-        "mapping": [
-            {
-                "topicFilter": "sensor/data",
-                "subscriptionQos": 1,
-                "converter": {
-                    "type": "json",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "message",
-                        "deviceNameExpression": "${serialNumber}",
-                        "deviceProfileExpressionSource": "message",
-                        "deviceProfileExpression": "${sensorType}"
-                    },
-                    "sendDataOnlyOnChange": false,
-                    "timeout": 60000,
-                    "attributes": [
-                        {
-                            "type": "string",
-                            "key": "model",
-                            "value": "${sensorModel}"
-                        },
-                        {
-                            "type": "string",
-                            "key": "${sensorModel}",
-                            "value": "on"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "type": "string",
-                            "key": "temperature",
-                            "value": "${temp}"
-                        },
-                        {
-                            "type": "double",
-                            "key": "humidity",
-                            "value": "${hum}"
-                        },
-                        {
-                            "type": "string",
-                            "key": "combine",
-                            "value": "${hum}:${temp}"
-                        }
-                    ]
-                }
-            },
-            {
-                "topicFilter": "sensor/+/data",
-                "subscriptionQos": 1,
-                "converter": {
-                    "type": "json",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "topic",
-                        "deviceNameExpression": "(?<=sensor\/)(.*?)(?=\/data)",
-                        "deviceProfileExpressionSource": "constant",
-                        "deviceProfileExpression": "Thermometer"
-                    },
-                    "sendDataOnlyOnChange": false,
-                    "timeout": 60000,
-                    "attributes": [
-                        {
-                            "type": "string",
-                            "key": "model",
-                            "value": "${sensorModel}"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "type": "double",
-                            "key": "temperature",
-                            "value": "${temp}"
-                        },
-                        {
-                            "type": "string",
-                            "key": "humidity",
-                            "value": "${hum}"
-                        }
-                    ]
-                }
-            },
-            {
-                "topicFilter": "sensor/raw_data",
-                "subscriptionQos": 1,
-                "converter": {
-                    "type": "bytes",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "message",
-                        "deviceNameExpression": "[0:4]",
-                        "deviceProfileExpressionSource": "constant",
-                        "deviceProfileExpression": "default"
-                    },
-                    "sendDataOnlyOnChange": false,
-                    "timeout": 60000,
-                    "attributes": [
-                        {
-                            "type": "raw",
-                            "key": "rawData",
-                            "value": "[:]"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "type": "raw",
-                            "key": "temp",
-                            "value": "[4:]"
-                        }
-                    ]
-                }
-            },
-            {
-                "topicFilter": "custom/sensors/+",
-                "subscriptionQos": 1,
-                "converter": {
-                    "type": "custom",
-                    "extension": "CustomMqttUplinkConverter",
-                    "cached": true,
-                    "extensionConfig": {
-                        "temperature": 2,
-                        "humidity": 2,
-                        "batteryLevel": 1
-                    }
-                }
-            }
-        ],
-        "requestsMapping": {
-            "connectRequests": [
-                {
-                    "topicFilter": "sensor/connect",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "message",
-                        "deviceNameExpression": "${serialNumber}",
-                        "deviceProfileExpressionSource": "constant",
-                        "deviceProfileExpression": "Thermometer"
-                    }
-                },
-                {
-                    "topicFilter": "sensor/+/connect",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "topic",
-                        "deviceNameExpression": "(?<=sensor\/)(.*?)(?=\/connect)",
-                        "deviceProfileExpressionSource": "constant",
-                        "deviceProfileExpression": "Thermometer"
-                    }
-                }
-            ],
-            "disconnectRequests": [
-                {
-                    "topicFilter": "sensor/disconnect",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "message",
-                        "deviceNameExpression": "${serialNumber}"
-                    }
-                },
-                {
-                    "topicFilter": "sensor/+/disconnect",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "topic",
-                        "deviceNameExpression": "(?<=sensor\/)(.*?)(?=\/connect)"
-                    }
-                }
-            ],
-            "attributeRequests": [
-                {
-                    "retain": false,
-                    "topicFilter": "v1/devices/me/attributes/request",
-                    "deviceInfo": {
-                        "deviceNameExpressionSource": "message",
-                        "deviceNameExpression": "${serialNumber}"
-                    },
-                    "attributeNameExpressionSource": "message",
-                    "attributeNameExpression": "${versionAttribute}, ${pduAttribute}",
-                    "topicExpression": "devices/${deviceName}/attrs",
-                    "valueExpression": "${attributeKey}: ${attributeValue}"
-                }
-            ],
-            "attributeUpdates": [
-                {
-                    "retain": true,
-                    "deviceNameFilter": ".*",
-                    "attributeFilter": "firmwareVersion",
-                    "topicExpression": "sensor/${deviceName}/${attributeKey}",
-                    "valueExpression": "{\"${attributeKey}\":\"${attributeValue}\"}"
-                }
-            ],
-            "serverSideRpc": [
-                {
-                    "type": "twoWay",
-                    "deviceNameFilter": ".*",
-                    "methodFilter": "echo",
-                    "requestTopicExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-                    "responseTopicExpression": "sensor/${deviceName}/response/${methodName}/${requestId}",
-                    "responseTopicQoS": 1,
-                    "responseTimeout": 10000,
-                    "valueExpression": "${params}"
-                },
-                {
-                    "type": "oneWay",
-                    "deviceNameFilter": ".*",
-                    "methodFilter": "no-reply",
-                    "requestTopicExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-                    "valueExpression": "${params}"
-                }
-            ]
-        }
-    },
-    "legacy": {
-        "broker": {
-            "name": "Default Local Broker",
-            "host": "127.0.0.1",
-            "port": 1883,
-            "clientId": "ThingsBoard_gateway",
-            "version": 5,
-            "maxMessageNumberPerWorker": 10,
-            "maxNumberOfWorkers": 100,
-            "sendDataOnlyOnChange": false,
-            "security": {
-                "type": "basic",
-                "username": "user",
-                "password": "password"
-            }
-        },
-        "mapping": [
-            {
-                "topicFilter": "sensor/data",
-                "converter": {
-                    "type": "json",
-                    "deviceNameJsonExpression": "${serialNumber}",
-                    "deviceTypeJsonExpression": "${sensorType}",
-                    "sendDataOnlyOnChange": false,
-                    "timeout": 60000,
-                    "attributes": [
-                        {
-                            "type": "string",
-                            "key": "model",
-                            "value": "${sensorModel}"
-                        },
-                        {
-                            "type": "string",
-                            "key": "${sensorModel}",
-                            "value": "on"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "type": "double",
-                            "key": "temperature",
-                            "value": "${temp}"
-                        },
-                        {
-                            "type": "double",
-                            "key": "humidity",
-                            "value": "${hum}"
-                        },
-                        {
-                            "type": "string",
-                            "key": "combine",
-                            "value": "${hum}:${temp}"
-                        }
-                    ]
-                }
-            },
-            {
-                "topicFilter": "sensor/+/data",
-                "converter": {
-                    "type": "json",
-                    "deviceNameTopicExpression": "(?<=sensor\/)(.*?)(?=\/data)",
-                    "deviceTypeTopicExpression": "Thermometer",
-                    "sendDataOnlyOnChange": false,
-                    "timeout": 60000,
-                    "attributes": [
-                        {
-                            "type": "string",
-                            "key": "model",
-                            "value": "${sensorModel}"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "type": "double",
-                            "key": "temperature",
-                            "value": "${temp}"
-                        },
-                        {
-                            "type": "double",
-                            "key": "humidity",
-                            "value": "${hum}"
-                        }
-                    ]
-                }
-            },
-            {
-                "topicFilter": "sensor/raw_data",
-                "converter": {
-                    "type": "bytes",
-                    "deviceNameExpression": "[0:4]",
-                    "deviceTypeExpression": "default",
-                    "sendDataOnlyOnChange": false,
-                    "timeout": 60000,
-                    "attributes": [
-                        {
-                            "type": "raw",
-                            "key": "rawData",
-                            "value": "[:]"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "type": "raw",
-                            "key": "temp",
-                            "value": "[4:]"
-                        }
-                    ]
-                }
-            },
-            {
-                "topicFilter": "custom/sensors/+",
-                "converter": {
-                    "type": "custom",
-                    "extension": "CustomMqttUplinkConverter",
-                    "cached": true,
-                    "extension-config": {
-                        "temperatureBytes": 2,
-                        "humidityBytes": 2,
-                        "batteryLevelBytes": 1
-                    }
-                }
-            }
-        ],
-        "connectRequests": [
-            {
-                "topicFilter": "sensor/connect",
-                "deviceNameJsonExpression": "${serialNumber}"
-            },
-            {
-                "topicFilter": "sensor/+/connect",
-                "deviceNameTopicExpression": "(?<=sensor\/)(.*?)(?=\/connect)"
-            }
-        ],
-        "disconnectRequests": [
-            {
-                "topicFilter": "sensor/disconnect",
-                "deviceNameJsonExpression": "${serialNumber}"
-            },
-            {
-                "topicFilter": "sensor/+/disconnect",
-                "deviceNameTopicExpression": "(?<=sensor\/)(.*?)(?=\/disconnect)"
-            }
-        ],
-        "attributeRequests": [
-            {
-                "retain": false,
-                "topicFilter": "v1/devices/me/attributes/request",
-                "deviceNameJsonExpression": "${serialNumber}",
-                "attributeNameJsonExpression": "${versionAttribute}, ${pduAttribute}",
-                "topicExpression": "devices/${deviceName}/attrs",
-                "valueExpression": "${attributeKey}: ${attributeValue}"
-            }
-        ],
-        "attributeUpdates": [
-            {
-                "retain": true,
-                "deviceNameFilter": ".*",
-                "attributeFilter": "firmwareVersion",
-                "topicExpression": "sensor/${deviceName}/${attributeKey}",
-                "valueExpression": "{\"${attributeKey}\":\"${attributeValue}\"}"
-            }
-        ],
-        "serverSideRpc": [
-            {
-                "deviceNameFilter": ".*",
-                "methodFilter": "echo",
-                "requestTopicExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-                "responseTopicExpression": "sensor/${deviceName}/response/${methodName}/${requestId}",
-                "responseTimeout": 10000,
-                "valueExpression": "${params}"
-            },
-            {
-                "deviceNameFilter": ".*",
-                "methodFilter": "no-reply",
-                "requestTopicExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-                "valueExpression": "${params}"
-            }
-        ]
-    }
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/ocpp.json b/ui-ngx/src/assets/metadata/connector-default-configs/ocpp.json
deleted file mode 100644
index 35d878836a..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/ocpp.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "centralSystem": {
-    "name": "Central System",
-    "host": "127.0.0.1",
-    "port": 9000,
-    "connection": {
-      "type": "insecure"
-    },
-    "security": [
-      {
-        "type": "token",
-        "tokens": [
-          "Bearer ACCESS_TOKEN"
-        ]
-      },
-      {
-        "type": "basic",
-        "credentials": [
-          {
-            "username": "admin",
-            "password": "admin"
-          }
-        ]
-      }
-    ]
-  },
-  "chargePoints": [
-    {
-      "idRegexpPattern": "bidon/hello/CP_1",
-      "deviceNameExpression": "${Vendor} ${Model}",
-      "deviceTypeExpression": "default",
-      "attributes": [
-        {
-          "messageTypeFilter": "MeterValues,",
-          "key": "temp1",
-          "value": "${meter_value[:].sampled_value[:].value}"
-        },
-        {
-          "messageTypeFilter": "MeterValues,",
-          "key": "vendorId",
-          "value": "${connector_id}"
-        }
-      ],
-      "timeseries": [
-        {
-          "messageTypeFilter": "DataTransfer,",
-          "key": "temp",
-          "value": "${data.temp}"
-        }
-      ],
-      "attributeUpdates": [
-        {
-          "attributeOnThingsBoard": "shared",
-          "valueExpression": "{\"${attributeKey}\":\"${attributeValue}\"}"
-        }
-      ],
-      "serverSideRpc": [
-        {
-          "methodRPC": "rpc1",
-          "withResponse": true,
-          "valueExpression": "${params}"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/odbc.json b/ui-ngx/src/assets/metadata/connector-default-configs/odbc.json
deleted file mode 100644
index dc70cdf421..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/odbc.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "connection": {
-    "str": "Driver={PostgreSQL};Server=localhost;Port=5432;Database=thingsboard;Uid=postgres;Pwd=postgres;",
-    "attributes": {
-      "autocommit": true,
-      "timeout": 0
-    },
-    "encoding": "utf-8",
-    "decoding": {
-      "char": "utf-8",
-      "wchar": "utf-8",
-      "metadata": "utf-16le"
-    },
-    "reconnect": true,
-    "reconnectPeriod": 60
-  },
-  "pyodbc": {
-    "pooling": false
-  },
-  "polling": {
-    "query": "SELECT bool_v, str_v, dbl_v, long_v, entity_id, ts FROM ts_kv WHERE ts > ? ORDER BY ts ASC LIMIT 10",
-    "period": 10,
-    "iterator": {
-      "column": "ts",
-      "query": "SELECT MIN(ts) - 1 FROM ts_kv",
-      "persistent": false
-    }
-  },
-  "mapping": {
-    "device": {
-      "type": "postgres",
-      "name": "'ODBC ' + entity_id"
-    },
-    "sendDataOnlyOnChange": false,
-    "attributes": "*",
-    "timeseries": [
-      {
-        "name": "value",
-        "value": "[i for i in [str_v, long_v, dbl_v,bool_v] if i is not None][0]"
-      }
-    ]
-  },
-  "serverSideRpc": {
-    "enableUnknownRpc": false,
-    "overrideRpcConfig": true,
-    "methods": [
-      "procedureOne",
-      {
-        "name": "procedureTwo",
-        "args": [
-          "One",
-          2,
-          3.0
-        ]
-      }
-    ]
-  }
-}
\ No newline at end of file
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/opcua.json b/ui-ngx/src/assets/metadata/connector-default-configs/opcua.json
deleted file mode 100644
index c0ef993dd1..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/opcua.json
+++ /dev/null
@@ -1,120 +0,0 @@
-{
-    "3.5.2": {
-        "server": {
-            "url": "localhost:4840/freeopcua/server/",
-            "timeoutInMillis": 5000,
-            "scanPeriodInMillis": 3600000,
-            "pollPeriodInMillis": 5000,
-            "enableSubscriptions": true,
-            "subCheckPeriodInMillis": 100,
-            "showMap": false,
-            "security": "Basic128Rsa15",
-            "identity": {
-                "type": "anonymous"
-            }
-        },
-        "mapping": [{
-            "deviceNodePattern": "Root\\.Objects\\.Device1",
-            "deviceNodeSource": "path",
-            "deviceInfo": {
-                "deviceNameExpression": "Device ${Root\\.Objects\\.Device1\\.serialNumber}",
-                "deviceNameExpressionSource": "path",
-                "deviceProfileExpression": "Device",
-                "deviceProfileExpressionSource": "constant"
-            },
-            "attributes": [
-                {
-                    "key": "temperature °C",
-                    "type": "path",
-                    "value": "${ns=2;i=5}"
-                }
-            ],
-            "timeseries": [
-                {
-                    "key": "humidity",
-                    "type": "path",
-                    "value": "${Root\\.Objects\\.Device1\\.TemperatureAndHumiditySensor\\.Humidity}"
-                },
-                {
-                    "key": "batteryLevel",
-                    "type": "path",
-                    "value": "${Battery\\.batteryLevel}"
-                }
-            ],
-            "rpc_methods": [
-                {
-                    "method": "multiply",
-                    "arguments": [
-                        {
-                            "type": "integer",
-                            "value": 2
-                        },
-                        {
-                            "type": "integer",
-                            "value": 4
-                        }
-                    ]
-                }
-            ],
-            "attributes_updates": [
-                {
-                    "key": "deviceName",
-                    "type": "path",
-                    "value": "Root\\.Objects\\.Device1\\.serialNumber"
-                }
-            ]
-        }]
-    },
-    "legacy": {
-        "server": {
-            "name": "OPC-UA Default Server",
-            "url": "localhost:4840/freeopcua/server/",
-            "timeoutInMillis": 5000,
-            "scanPeriodInMillis": 5000,
-            "disableSubscriptions": false,
-            "subCheckPeriodInMillis": 100,
-            "showMap": false,
-            "security": "Basic128Rsa15",
-            "identity": {
-                "type": "anonymous"
-            },
-            "mapping": [
-                {
-                    "deviceNodePattern": "Root\\.Objects\\.Device1",
-                    "deviceNamePattern": "Device ${Root\\.Objects\\.Device1\\.serialNumber}",
-                    "attributes": [
-                        {
-                            "key": "temperature °C",
-                            "path": "${ns=2;i=5}"
-                        }
-                    ],
-                    "timeseries": [
-                        {
-                            "key": "humidity",
-                            "path": "${Root\\.Objects\\.Device1\\.TemperatureAndHumiditySensor\\.Humidity}"
-                        },
-                        {
-                            "key": "batteryLevel",
-                            "path": "${Battery\\.batteryLevel}"
-                        }
-                    ],
-                    "rpc_methods": [
-                        {
-                            "method": "multiply",
-                            "arguments": [
-                                2,
-                                4
-                            ]
-                        }
-                    ],
-                    "attributes_updates": [
-                        {
-                            "attributeOnThingsBoard": "deviceName",
-                            "attributeOnDevice": "Root\\.Objects\\.Device1\\.serialNumber"
-                        }
-                    ]
-                }
-            ]
-        }
-    }
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/opcua_asyncio.json b/ui-ngx/src/assets/metadata/connector-default-configs/opcua_asyncio.json
deleted file mode 100644
index 65fb6c5145..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/opcua_asyncio.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "server": {
-    "name": "OPC-UA Default Server",
-    "url": "localhost:4840/freeopcua/server/",
-    "timeoutInMillis": 5000,
-    "scanPeriodInMillis": 3600000,
-    "pollPeriodInMillis": 5000,
-    "disableSubscriptions": false,
-    "subCheckPeriodInMillis": 100,
-    "showMap": false,
-    "security": "Basic128Rsa15",
-    "identity": {
-      "type": "anonymous"
-    },
-    "mapping": [
-      {
-        "deviceNodePattern": "Root\\.Objects\\.Device1",
-        "deviceNamePattern": "Device ${Root\\.Objects\\.Device1\\.serialNumber}",
-        "attributes": [
-          {
-            "key": "temperature °C",
-            "path": "${ns=2;i=5}"
-          }
-        ],
-        "timeseries": [
-          {
-            "key": "humidity",
-            "path": "${Root\\.Objects\\.Device1\\.TemperatureAndHumiditySensor\\.Humidity}"
-          },
-          {
-            "key": "batteryLevel",
-            "path": "${Battery\\.batteryLevel}"
-          }
-        ],
-        "rpc_methods": [
-          {
-            "method": "multiply",
-            "arguments": [
-              2,
-              4
-            ]
-          }
-        ],
-        "attributes_updates": [
-          {
-            "attributeOnThingsBoard": "deviceName",
-            "attributeOnDevice": "Root\\.Objects\\.Device1\\.serialNumber"
-          }
-        ]
-      }
-    ]
-  }
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/request.json b/ui-ngx/src/assets/metadata/connector-default-configs/request.json
deleted file mode 100644
index c5b96ff4cf..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/request.json
+++ /dev/null
@@ -1,169 +0,0 @@
-{
-  "host": "http://127.0.0.1:5000",
-  "SSLVerify": true,
-  "security": {
-    "type": "basic",
-    "username": "user",
-    "password": "password"
-  },
-  "mapping": [
-    {
-      "url": "getdata",
-      "httpMethod": "GET",
-      "httpHeaders": {
-        "ACCEPT": "application/json"
-      },
-      "content": {
-        "name": "morpheus",
-        "job": "leader"
-      },
-      "allowRedirects": true,
-      "timeout": 0.5,
-      "scanPeriod": 5,
-      "converter": {
-        "type": "json",
-        "deviceNameJsonExpression": "SD8500",
-        "deviceTypeJsonExpression": "SD",
-        "attributes": [
-          {
-            "key": "serialNumber",
-            "type": "string",
-            "value": "${serial}"
-          }
-        ],
-        "telemetry": [
-          {
-            "key": "Maintainer",
-            "type": "string",
-            "value": "${Developer}"
-          },
-          {
-            "key": "combine",
-            "type": "string",
-            "value": "${Developer}:${hum}"
-          }
-        ]
-      }
-    },
-    {
-      "url": "get_info",
-      "httpMethod": "GET",
-      "httpHeaders": {
-        "ACCEPT": "application/json"
-      },
-      "allowRedirects": true,
-      "timeout": 0.5,
-      "scanPeriod": 100,
-      "converter": {
-        "type": "custom",
-        "deviceNameJsonExpression": "SD8500",
-        "deviceTypeJsonExpression": "SD",
-        "extension": "CustomRequestUplinkConverter",
-        "extension-config": [
-          {
-            "key": "Totaliser",
-            "type": "float",
-            "fromByte": 0,
-            "toByte": 4,
-            "byteorder": "big",
-            "signed": true,
-            "multiplier": 1
-          },
-          {
-            "key": "Flow",
-            "type": "int",
-            "fromByte": 4,
-            "toByte": 6,
-            "byteorder": "big",
-            "signed": true,
-            "multiplier": 0.01
-          },
-          {
-            "key": "Temperature",
-            "type": "int",
-            "fromByte": 8,
-            "toByte": 10,
-            "byteorder": "big",
-            "signed": true,
-            "multiplier": 0.01
-          },
-          {
-            "key": "Pressure",
-            "type": "int",
-            "fromByte": 12,
-            "toByte": 14,
-            "byteorder": "big",
-            "signed": true,
-            "multiplier": 0.01
-          },
-          {
-            "key": "deviceStatus",
-            "type": "int",
-            "byteAddress": 15,
-            "fromBit": 4,
-            "toBit": 8,
-            "byteorder": "big",
-            "signed": false
-          },
-          {
-            "key": "OUT2",
-            "type": "int",
-            "byteAddress": 15,
-            "fromBit": 1,
-            "toBit": 2,
-            "byteorder": "big"
-          },
-          {
-            "key": "OUT1",
-            "type": "int",
-            "byteAddress": 15,
-            "fromBit": 0,
-            "toBit": 1,
-            "byteorder": "big"
-          }
-        ]
-      }
-    }
-  ],
-  "attributeUpdates": [
-    {
-      "httpMethod": "POST",
-      "httpHeaders": {
-        "CONTENT-TYPE": "application/json"
-      },
-      "timeout": 0.5,
-      "tries": 3,
-      "allowRedirects": true,
-      "deviceNameFilter": "SD.*",
-      "attributeFilter": "send_data",
-      "requestUrlExpression": "sensor/${deviceName}/${attributeKey}",
-      "requestValueExpression": "{\"${attributeKey}\":\"${attributeValue}\"}"
-    }
-  ],
-  "serverSideRpc": [
-    {
-      "deviceNameFilter": ".*",
-      "methodFilter": "echo",
-      "requestUrlExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-      "responseTimeout": 1,
-      "httpMethod": "GET",
-      "requestValueExpression": "${params}",
-      "responseValueExpression": "${temp}",
-      "timeout": 0.5,
-      "tries": 3,
-      "httpHeaders": {
-        "Content-Type": "application/json"
-      }
-    },
-    {
-      "deviceNameFilter": ".*",
-      "methodFilter": "no-reply",
-      "requestUrlExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-      "httpMethod": "POST",
-      "requestValueExpression": "${params}",
-      "httpHeaders": {
-        "Content-Type": "application/json"
-      }
-    }
-  ]
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/rest.json b/ui-ngx/src/assets/metadata/connector-default-configs/rest.json
deleted file mode 100644
index f927b8f8b2..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/rest.json
+++ /dev/null
@@ -1,190 +0,0 @@
-{
-  "host": "127.0.0.1",
-  "port": "5000",
-  "SSL": false,
-  "security": {
-    "cert": "~/ssl/cert.pem",
-    "key": "~/ssl/key.pem"
-  },
-  "mapping": [
-    {
-      "endpoint": "/my_devices",
-      "HTTPMethods": [
-        "POST"
-      ],
-      "security": {
-        "type": "anonymous"
-      },
-      "converter": {
-        "type": "json",
-        "deviceNameExpression": "${sensorName}",
-        "deviceTypeExpression": "${sensorType}",
-        "attributes": [
-          {
-            "type": "string",
-            "key": "model",
-            "value": "${sensorModel}"
-          },
-          {
-            "type": "string",
-            "key": "certificateNumber",
-            "value": "${certificateNumber}"
-          }
-        ],
-        "timeseries": [
-          {
-            "type": "double",
-            "key": "temperature",
-            "value": "${temp}"
-          },
-          {
-            "type": "double",
-            "key": "humidity",
-            "value": "${hum}"
-          }
-        ]
-      }
-    },
-    {
-      "endpoint": "/anon1",
-      "HTTPMethods": [
-        "GET",
-        "POST"
-      ],
-      "security": {
-        "type": "anonymous"
-      },
-      "converter": {
-        "type": "json",
-        "deviceNameExpression": "Device 2",
-        "deviceTypeExpression": "default",
-        "attributes": [
-          {
-            "type": "string",
-            "key": "model",
-            "value": "Model2"
-          }
-        ],
-        "timeseries": [
-          {
-            "type": "double",
-            "key": "temperature",
-            "value": "${temp}"
-          },
-          {
-            "type": "double",
-            "key": "humidity",
-            "value": "${hum}"
-          }
-        ]
-      }
-    },
-    {
-      "endpoint": "/anon2",
-      "HTTPMethods": [
-        "POST"
-      ],
-      "security": {
-        "type": "anonymous"
-      },
-      "converter": {
-        "type": "custom",
-        "deviceNameExpression": "SuperAnonDevice",
-        "deviceTypeExpression": "default",
-        "extension": "CustomRestUplinkConverter",
-        "extension-config": [
-          {
-            "key": "Totaliser",
-            "datatype": "float",
-            "fromByte": 0,
-            "toByte": 4,
-            "byteorder": "big",
-            "signed": true,
-            "multiplier": 1
-          }
-        ]
-      }
-    }
-  ],
-  "attributeRequests": [
-    {
-      "endpoint": "/sharedAttributes",
-      "type": "shared",
-      "HTTPMethods": [
-        "POST"
-      ],
-      "security": {
-        "type": "anonymous"
-      },
-      "timeout": 10.0,
-      "deviceNameExpression": "${deviceName}",
-      "attributeNameExpression": "${attribute}${attribute1}"
-    }
-  ],
-  "attributeUpdates": [
-    {
-      "HTTPMethod": "POST",
-      "SSLVerify": false,
-      "httpHeaders": {
-        "CONTENT-TYPE": "application/json"
-      },
-      "security": {
-        "type": "anonymous"
-      },
-      "timeout": 0.5,
-      "tries": 3,
-      "allowRedirects": true,
-      "deviceNameFilter": "SN.*",
-      "attributeFilter": ".*",
-      "requestUrlExpression": "http://127.0.0.1:5001/",
-      "valueExpression": "{\"deviceName\":\"${deviceName}\",\"${attributeKey}\":\"${attributeValue}\"}"
-    }
-  ],
-  "serverSideRpc": [
-    {
-      "deviceNameFilter": ".*",
-      "methodFilter": "echo",
-      "requestUrlExpression": "http://127.0.0.1:5001/${deviceName}",
-      "responseTimeout": 1,
-      "HTTPMethod": "GET",
-      "valueExpression": "${params}",
-      "timeout": 10.0,
-      "tries": 3,
-      "httpHeaders": {
-        "Content-Type": "application/json"
-      },
-      "security": {
-        "type": "anonymous"
-      }
-    },
-    {
-      "deviceNameFilter": "SN.*",
-      "methodFilter": "post_attributes",
-      "requestUrlExpression": "http://127.0.0.1:5000/my_devices",
-      "responseTimeout": 1,
-      "HTTPMethod": "POST",
-      "valueExpression": "{\"sensorName\":\"${deviceName}\", \"sensorModel\":\"${params.sensorModel}\", \"certificateNumber\":\"${params.certificateNumber}\", \"temp\":\"${params.temp}\", \"hum\":\"${params.hum}\"}",
-      "timeout": 10.0,
-      "tries": 3,
-      "httpHeaders": {
-        "Content-Type": "application/json"
-      },
-      "security": {
-        "type": "anonymous"
-      }
-    },
-    {
-      "deviceNameFilter": ".*",
-      "methodFilter": "no-reply",
-      "requestUrlExpression": "sensor/${deviceName}/request/${methodName}/${requestId}",
-      "HTTPMethod": "POST",
-      "valueExpression": "${params}",
-      "httpHeaders": {
-        "Content-Type": "application/json"
-      },
-      "security": {
-        "type": "anonymous"
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/snmp.json b/ui-ngx/src/assets/metadata/connector-default-configs/snmp.json
deleted file mode 100644
index 1d782dc665..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/snmp.json
+++ /dev/null
@@ -1,138 +0,0 @@
-{
-  "devices": [
-    {
-      "deviceName": "SNMP router",
-      "deviceType": "snmp",
-      "ip": "snmp.live.gambitcommunications.com",
-      "port": 161,
-      "pollPeriod": 5000,
-      "community": "public",
-      "attributes": [
-        {
-          "key": "ReceivedFromGet",
-          "method": "get",
-          "oid": "1.3.6.1.2.1.1.1.0",
-          "timeout": 6
-        },
-        {
-          "key": "ReceivedFromMultiGet",
-          "method": "multiget",
-          "oid": [
-            "1.3.6.1.2.1.1.1.0",
-            "1.3.6.1.2.1.1.2.0"
-          ],
-          "timeout": 6
-        },
-        {
-          "key": "ReceivedFromGetNext",
-          "method": "getnext",
-          "oid": "1.3.6.1.2.1.1.1.0",
-          "timeout": 6
-        },
-        {
-          "key": "ReceivedFromMultiWalk",
-          "method": "multiwalk",
-          "oid": [
-            "1.3.6.1.2.1.1.1.0",
-            "1.3.6.0.1.2.1"
-          ]
-        },
-        {
-          "key": "ReceivedFromBulkWalk",
-          "method": "bulkwalk",
-          "oid": [
-            "1.3.6.1.2.1.1.1.0",
-            "1.3.6.1.2.1.1.2.0"
-          ]
-        },
-        {
-          "key": "ReceivedFromBulkGet",
-          "method": "bulkget",
-          "scalarOid": [
-            "1.3.6.1.2.1.1.1.0",
-            "1.3.6.1.2.1.1.2.0"
-          ],
-          "repeatingOid": [
-            "1.3.6.1.2.1.1.1.0",
-            "1.3.6.1.2.1.1.2.0"
-          ],
-          "maxListSize": 10
-        }
-      ],
-      "telemetry": [
-        {
-          "key": "ReceivedFromWalk",
-          "community": "private",
-          "method": "walk",
-          "oid": "1.3.6.1.2.1.1.1.0"
-        },
-        {
-          "key": "ReceivedFromTable",
-          "method": "table",
-          "oid": "1.3.6.1.2.1.1"
-        }
-      ],
-      "attributeUpdateRequests": [
-        {
-          "attributeFilter": "dataToSet",
-          "method": "set",
-          "oid": "1.3.6.1.2.1.1.1.0"
-        },
-        {
-          "attributeFilter": "dataToMultiSet",
-          "method": "multiset",
-          "mappings": {
-            "1.2.3": "10",
-            "2.3.4": "${attribute}"
-          }
-        }
-      ],
-      "serverSideRpcRequests": [
-        {
-          "requestFilter": "setData",
-          "method": "set",
-          "oid": "1.3.6.1.2.1.1.1.0"
-        },
-        {
-          "requestFilter": "multiSetData",
-          "method": "multiset"
-        },
-        {
-          "requestFilter": "getData",
-          "method": "get",
-          "oid": "1.3.6.1.2.1.1.1.0"
-        },
-        {
-          "requestFilter": "runBulkWalk",
-          "method": "bulkwalk",
-          "oid": [
-            "1.3.6.1.2.1.1.1.0",
-            "1.3.6.1.2.1.1.2.0"
-          ]
-        }
-      ]
-    },
-    {
-      "deviceName": "SNMP router",
-      "deviceType": "snmp",
-      "ip": "127.0.0.1",
-      "pollPeriod": 5000,
-      "community": "public",
-      "converter": "CustomSNMPConverter",
-      "attributes": [
-        {
-          "key": "ReceivedFromGetWithCustomConverter",
-          "method": "get",
-          "oid": "1.3.6.1.2.1.1.1.0"
-        }
-      ],
-      "telemetry": [
-        {
-          "key": "ReceivedFromTableWithCustomConverter",
-          "method": "table",
-          "oid": "1.3.6.1.2.1.1.1.0"
-        }
-      ]
-    }
-  ]
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/socket.json b/ui-ngx/src/assets/metadata/connector-default-configs/socket.json
deleted file mode 100644
index 47fd59af4a..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/socket.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "type": "TCP",
-  "address": "127.0.0.1",
-  "port": 50000,
-  "bufferSize": 1024,
-  "devices": [
-    {
-      "address": "127.0.0.1:50001",
-      "deviceName": "Device Example",
-      "deviceType": "default",
-      "encoding": "utf-8",
-      "telemetry": [
-        {
-          "key": "temp",
-          "byteFrom": 0,
-          "byteTo": -1
-        },
-        {
-          "key": "hum",
-          "byteFrom": 0,
-          "byteTo": 2
-        }
-      ],
-      "attributes": [
-        {
-          "key": "name",
-          "byteFrom": 0,
-          "byteTo": -1
-        },
-        {
-          "key": "num",
-          "byteFrom": 2,
-          "byteTo": 4
-        }
-      ],
-      "attributeRequests": [
-        {
-          "type": "shared",
-          "requestExpression": "${[0:3]==atr}",
-          "attributeNameExpression": "[3:]"
-        }
-      ],
-      "attributeUpdates": [
-        {
-          "encoding": "utf-16",
-          "attributeOnThingsBoard": "sharedName"
-        }
-      ],
-      "serverSideRpc": [
-        {
-          "methodRPC": "rpcMethod1",
-          "withResponse": true,
-          "methodProcessing": "write",
-          "encoding": "utf-8"
-        }
-      ]
-    }
-  ]
-}
diff --git a/ui-ngx/src/assets/metadata/connector-default-configs/xmpp.json b/ui-ngx/src/assets/metadata/connector-default-configs/xmpp.json
deleted file mode 100644
index e66504363e..0000000000
--- a/ui-ngx/src/assets/metadata/connector-default-configs/xmpp.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "server": {
-    "jid": "gateway@localhost",
-    "password": "password",
-    "host": "localhost",
-    "port": 5222,
-    "use_ssl": false,
-    "disable_starttls": false,
-    "force_starttls": true,
-    "timeout": 10000,
-    "plugins": [
-      "xep_0030",
-      "xep_0323",
-      "xep_0325"
-    ]
-  },
-  "devices": [
-    {
-      "jid": "device@localhost/TMP_1101",
-      "deviceNameExpression": "${serialNumber}",
-      "deviceTypeExpression": "default",
-      "attributes": [
-        {
-          "key": "temperature",
-          "value": "${temp}"
-        }
-      ],
-      "timeseries": [
-        {
-          "key": "humidity",
-          "value": "${hum}"
-        },
-        {
-          "key": "combination",
-          "value": "${temp}:${hum}"
-        }
-      ],
-      "attributeUpdates": [
-        {
-          "attributeOnThingsBoard": "shared",
-          "valueExpression": "{\"${attributeKey}\":\"${attributeValue}\"}"
-        }
-      ],
-      "serverSideRpc": [
-        {
-          "methodRPC": "rpc1",
-          "withResponse": true,
-          "valueExpression": "${params}"
-        }
-      ]
-    }
-  ]
-}
diff --git a/ui-ngx/src/assets/metadata/material-icons.json b/ui-ngx/src/assets/metadata/material-icons.json
index 2da54c48c2..13d4daef99 100644
--- a/ui-ngx/src/assets/metadata/material-icons.json
+++ b/ui-ngx/src/assets/metadata/material-icons.json
@@ -1 +1 @@
-[{"name":"more_horiz","tags":["3","DISABLE_IOS","app","application","components","disable_ios","dots","etc","horiz","horizontal","interface","ios","more","screen","site","three","ui","ux","web","website"]},{"name":"more_vert","tags":["3","DISABLE_IOS","android","app","application","components","disable_ios","dots","etc","interface","more","screen","site","three","ui","ux","vert","vertical","web","website"]},{"name":"open_in_new","tags":["app","application","arrow","box","components","in","interface","new","open","right","screen","site","ui","up","ux","web","website","window"]},{"name":"visibility","tags":["eye","on","reveal","see","show","view","visibility"]},{"name":"play_arrow","tags":["arrow","control","controls","media","music","play","video"]},{"name":"arrow_back","tags":["DISABLE_IOS","app","application","arrow","back","components","direction","disable_ios","interface","left","navigation","previous","screen","site","ui","ux","web","website"]},{"name":"arrow_downward","tags":["app","application","arrow","components","direction","down","downward","interface","navigation","screen","site","ui","ux","web","website"]},{"name":"arrow_forward","tags":["app","application","arrow","arrows","components","direction","forward","interface","navigation","right","screen","site","ui","ux","web","website"]},{"name":"arrow_upward","tags":["app","application","arrow","components","direction","interface","navigation","screen","site","ui","up","upward","ux","web","website"]},{"name":"close","tags":["cancel","close","exit","stop","x"]},{"name":"refresh","tags":["around","arrow","arrows","direction","inprogress","load","loading refresh","navigation","refresh","renew","right","rotate","turn"]},{"name":"menu","tags":["app","application","components","hamburger","interface","line","lines","menu","screen","site","ui","ux","web","website"]},{"name":"show_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","line","measure","metrics","presentation","show chart","statistics","tracking"]},{"name":"multiline_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","line","measure","metrics","multiple","statistics","tracking"]},{"name":"pie_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","pie","statistics","tracking"]},{"name":"insert_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","insert","measure","metrics","statistics","tracking"]},{"name":"people","tags":["accounts","committee","face","family","friends","humans","network","people","persons","profiles","social","team","users"]},{"name":"person","tags":["account","face","human","people","person","profile","user"]},{"name":"domain","tags":["apartment","architecture","building","business","domain","estate","home","place","real","residence","residential","shelter","web","www"]},{"name":"devices_other","tags":["Android","OS","ar","cell","chrome","desktop","device","gadget","hardware","iOS","ipad","mac","mobile","monitor","other","phone","tablet","vr","watch","wearables","window"]},{"name":"widgets","tags":["app","box","menu","setting","squares","ui","widgets"]},{"name":"dashboard","tags":["cards","dashboard","format","layout","rectangle","shapes","square","web","website"]},{"name":"map","tags":["destination","direction","location","map","maps","pin","place","route","stop","travel"]},{"name":"pin_drop","tags":["destination","direction","drop","location","maps","navigation","pin","place","stop"]},{"name":"gps_fixed","tags":["destination","direction","fixed","gps","location","maps","pin","place","pointer","stop","tracking"]},{"name":"extension","tags":["app","extended","extension","game","jigsaw","plugin add","puzzle","shape"]},{"name":"search","tags":["filter","find","glass","look","magnify","magnifying","search","see"]},{"name":"settings","tags":["application","change","details","gear","info","information","options","personal","service","settings"]},{"name":"notifications","tags":["active","alarm","alert","bell","chime","notifications","notify","reminder","ring","sound"]},{"name":"notifications_active","tags":["active","alarm","alert","bell","chime","notifications","notify","reminder","ring","ringing","sound"]},{"name":"info","tags":["alert","announcement","assistance","details","help","i","info","information","service","support"]},{"name":"error_outline","tags":["!","alert","attention","caution","circle","danger","error","exclamation","important","mark","notification","outline","symbol","warning"]},{"name":"warning","tags":["!","alert","attention","caution","danger","error","exclamation","important","mark","notification","symbol","triangle","warning"]},{"name":"list","tags":["file","format","index","list","menu","options"]},{"name":"download","tags":["arrow","down","download","downloads","drive","install","upload"]},{"name":"import_export","tags":["arrow","arrows","direction","down","explort","import","up"]},{"name":"share","tags":["DISABLE_IOS","android","connect","contect","disable_ios","link","media","multimedia","multiple","network","options","share","shared","sharing","social"]},{"name":"add","tags":["+","add","new symbol","plus","symbol"]},{"name":"edit","tags":["compose","create","edit","editing","input","new","pen","pencil","write","writing"]},{"name":"check","tags":["DISABLE_IOS","check","confirm","correct","disable_ios","done","enter","mark","ok","okay","select","tick","yes"]},{"name":"delete","tags":["bin","can","delete","garbage","remove","trash"]},{"name":"thermostat","tags":["climate","forecast","temperature","thermostat","weather"]},{"name":"air","tags":["air","blowing","breeze","flow","wave","weather","wind"]},{"name":"lightbulb","tags":["alert","announcement","idea","info","information","light","lightbulb"]},{"name":"home","tags":["address","app","application--house","architecture","building","components","design","estate","home","interface","layout","place","real","residence","residential","screen","shelter","site","structure","ui","unit","ux","web","website","window"]},{"name":"account_circle","tags":["account","avatar","circle","face","human","people","person","profile","thumbnail","user"]},{"name":"done","tags":["DISABLE_IOS","approve","check","complete","disable_ios","done","mark","ok","select","tick","validate","verified","yes"]},{"name":"check_circle","tags":["approve","check","circle","complete","done","mark","ok","select","tick","validate","verified","yes"]},{"name":"expand_more","tags":["arrow","arrows","chevron","collapse","direction","down","expand","expandable","list","more"]},{"name":"shopping_cart","tags":["add","bill","buy","card","cart","cash","checkout","coin","commerce","credit","currency","dollars","money","online","pay","payment","shopping"]},{"name":"email","tags":["email","envelop","letter","mail","message","send"]},{"name":"favorite","tags":["appreciate","favorite","heart","like","love","remember","save","shape"]},{"name":"description","tags":["article","data","description","doc","document","drive","file","folder","folders","notes","page","paper","sheet","slide","text","writing"]},{"name":"logout","tags":["app","application","arrow","components","design","exit","interface","leave","log","login","logout","right","screen","site","ui","ux","web","website"]},{"name":"favorite_border","tags":["border","favorite","heart","like","love","outline","remember","save","shape"]},{"name":"chevron_right","tags":["arrow","arrows","chevron","direction","right"]},{"name":"lock","tags":["lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"location_on","tags":["destination","direction","location","maps","on","pin","place","room","stop"]},{"name":"schedule","tags":["clock","date","schedule","time"]},{"name":"local_shipping","tags":["automobile","car","cars","delivery","letter","local","mail","maps","office","package","parcel","post","postal","send","shipping","shopping","stamp","transportation","truck","vehicle"]},{"name":"language","tags":["globe","internet","language","planet","website","world","www"]},{"name":"call","tags":["call","cell","contact","device","hardware","mobile","phone","telephone"]},{"name":"file_download","tags":["arrow","arrows","down","download","downloads","drive","export","file","install","upload"]},{"name":"arrow_forward_ios","tags":["app","application","arrow","chevron","components","direction","forward","interface","ios","navigation","next","right","screen","site","ui","ux","web","website"]},{"name":"arrow_back_ios","tags":["DISABLE_IOS","app","application","arrow","back","chevron","components","direction","disable_ios","interface","ios","left","navigation","previous","screen","site","ui","ux","web","website"]},{"name":"groups","tags":["body","club","collaboration","crowd","gathering","groups","human","meeting","people","person","social","teams"]},{"name":"cancel","tags":["cancel","circle","close","exit","stop","x"]},{"name":"help_outline","tags":["?","assistance","circle","help","info","information","outline","punctuation","question mark","recent","restore","shape","support","symbol"]},{"name":"arrow_drop_down","tags":["app","application","arrow","components","direction","down","drop","interface","navigation","screen","site","ui","ux","web","website"]},{"name":"face","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"manage_accounts","tags":["accounts","change","details service-human","face","gear","manage","options","people","person","profile","settings","user"]},{"name":"place","tags":["destination","direction","location","maps","navigation","pin","place","point","stop"]},{"name":"verified","tags":["approve","badge","burst","check","complete","done","mark","ok","select","star","tick","validate","verified","yes"]},{"name":"add_circle_outline","tags":["+","add","circle","create","new","outline","plus"]},{"name":"filter_alt","tags":["alt","edit","filter","funnel","options","refine","sift"]},{"name":"thumb_up","tags":["favorite","fingers","gesture","hand","hands","like","rank","ranking","rate","rating","thumb","up"]},{"name":"event","tags":["calendar","date","day","event","mark","month","range","remember","reminder","today","week"]},{"name":"star","tags":["best","bookmark","favorite","highlight","ranking","rate","rating","save","star","toggle"]},{"name":"fingerprint","tags":["finger","fingerprint","id","identification","identity","print","reader","thumbprint","verification"]},{"name":"content_copy","tags":["content","copy","cut","doc","document","duplicate","file","multiple","past"]},{"name":"login","tags":["access","app","application","arrow","components","design","enter","in","interface","left","log","login","screen","sign","site","ui","ux","web","website"]},{"name":"add_circle","tags":["+","add","circle","create","new","plus"]},{"name":"visibility_off","tags":["disabled","enabled","eye","off","on","reveal","see","show","slash","view","visibility"]},{"name":"check_circle_outline","tags":["approve","check","circle","complete","done","finished","mark","ok","outline","select","tick","validate","verified","yes"]},{"name":"chevron_left","tags":["DISABLE_IOS","arrow","arrows","chevron","direction","disable_ios","left"]},{"name":"calendar_today","tags":["calendar","date","day","event","month","schedule","today"]},{"name":"send","tags":["email","mail","message","paper","plane","reply","right","send","share"]},{"name":"check_box","tags":["approved","box","button","check","component","control","form","mark","ok","select","selected","selection","tick","toggle","ui","yes"]},{"name":"highlight_off","tags":["cancel","close","exit","highlight","no","off","quit","remove","stop","x"]},{"name":"navigate_next","tags":["arrow","arrows","direction","navigate","next","right"]},{"name":"help","tags":["?","assistance","circle","help","info","information","punctuation","question mark","recent","restore","shape","support","symbol"]},{"name":"phone","tags":["call","cell","contact","device","hardware","mobile","phone","telephone"]},{"name":"paid","tags":["circle","currency","money","paid","payment","transaction"]},{"name":"task_alt","tags":["approve","check","circle","complete","done","mark","ok","select","task","tick","validate","verified","yes"]},{"name":"question_answer","tags":["answer","bubble","chat","comment","communicate","conversation","feedback","message","question","speech","talk"]},{"name":"expand_less","tags":["arrow","arrows","chevron","collapse","direction","expand","expandable","less","list","up"]},{"name":"clear","tags":["back","cancel","clear","correct","delete","erase","exit","x"]},{"name":"date_range","tags":["calendar","date","day","event","month","range","remember","reminder","schedule","time","today","week"]},{"name":"article","tags":["article","doc","document","file","page","paper","text","writing"]},{"name":"error","tags":["!","alert","attention","caution","circle","danger","error","exclamation","important","mark","notification","symbol","warning"]},{"name":"photo_camera","tags":["camera","image","photo","photography","picture"]},{"name":"check_box_outline_blank","tags":["blank","box","button","check","component","control","deselected","empty","form","outline","select","selection","square","tick","toggle","ui"]},{"name":"image","tags":["disabled","enabled","hide","image","landscape","mountain","mountains","off","on","photo","photography","picture","slash"]},{"name":"shopping_bag","tags":["bag","bill","business","buy","card","cart","cash","coin","commerce","credit","currency","dollars","money","online","pay","payment","shop","shopping","store","storefront"]},{"name":"person_outline","tags":["account","face","human","outline","people","person","profile","user"]},{"name":"school","tags":["academy","achievement","cap","class","college","education","graduation","hat","knowledge","learning","school","university"]},{"name":"file_upload","tags":["arrow","arrows","download","drive","export","file","up","upload"]},{"name":"perm_identity","tags":["account","avatar","face","human","identity","people","perm","person","profile","thumbnail","user"]},{"name":"credit_card","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","shopping","symbol"]},{"name":"history","tags":["arrow","back","backwards","clock","date","history","refresh","renew","reverse","rotate","schedule","time","turn"]},{"name":"trending_up","tags":["analytics","arrow","data","diagram","graph","infographic","measure","metrics","movement","rate","rating","statistics","tracking","trending","up"]},{"name":"support_agent","tags":["agent","care","customer","face","headphone","person","representative","service","support"]},{"name":"account_balance","tags":["account","balance","bank","bill","card","cash","coin","commerce","credit","currency","dollars","finance","money","online","pay","payment"]},{"name":"delete_outline","tags":["bin","can","delete","garbage","outline","remove","trash"]},{"name":"attach_money","tags":["attach","attachment","bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","symbol"]},{"name":"person_add","tags":["+","account","add","avatar","face","human","new","people","person","plus","profile","symbol","user"]},{"name":"public","tags":["earth","global","globe","map","network","planet","public","social","space","web","world"]},{"name":"save","tags":["data","disk","document","drive","file","floppy","multimedia","save","storage"]},{"name":"mail","tags":["email","envelop","letter","mail","message","send"]},{"name":"report_problem","tags":["!","alert","attention","caution","danger","error","exclamation","feedback","important","mark","notification","problem","report","symbol","triangle","warning"]},{"name":"fact_check","tags":["approve","check","complete","done","fact","list","mark","ok","select","tick","validate","verified","yes"]},{"name":"radio_button_unchecked","tags":["bullet","button","circle","deselected","form","off","on","point","radio","record","select","toggle","unchecked"]},{"name":"verified_user","tags":["approve","certified","check","complete","done","mark","ok","privacy","private","protect","protection","security","select","shield","tick","user","validate","verified","yes"]},{"name":"assignment","tags":["assignment","clipboard","doc","document","text","writing"]},{"name":"link","tags":["chain","clip","connection","link","linked","links","multimedia","url"]},{"name":"play_circle_filled","tags":["arrow","circle","control","controls","media","music","play","video"]},{"name":"emoji_events","tags":["achievement","award","chalice","champion","cup","emoji","events","first","prize","reward","sport","trophy","winner"]},{"name":"remove","tags":["can","delete","minus","negative","remove","substract","trash"]},{"name":"star_rate","tags":["achievement","bookmark","favorite","highlight","important","marked","ranking","rate","rating rank","reward","save","saved","shape","special","star"]},{"name":"apps","tags":["all","applications","apps","circles","collection","components","dots","grid","interface","squares","ui","ux"]},{"name":"business","tags":["apartment","architecture","building","business","company","estate","home","place","real","residence","residential","shelter"]},{"name":"filter_list","tags":["filter","lines","list","organize","sort"]},{"name":"arrow_right_alt","tags":["alt","arrow","arrows","direction","east","navigation","pointing","right"]},{"name":"chat","tags":["bubble","chat","comment","communicate","feedback","message","speech"]},{"name":"account_balance_wallet","tags":["account","balance","bank","bill","card","cash","coin","commerce","credit","currency","dollars","finance","money","online","pay","payment","wallet"]},{"name":"payments","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","layer","money","multiple","online","pay","payment","payments","price","shopping","symbol"]},{"name":"menu_book","tags":["book","dining","food","meal","menu","restaurant"]},{"name":"folder","tags":["data","doc","document","drive","file","folder","folders","sheet","slide","storage"]},{"name":"keyboard_arrow_down","tags":["arrow","arrows","down","keyboard"]},{"name":"autorenew","tags":["around","arrow","arrows","autorenew","cache","cached","direction","inprogress","load","loading refresh","navigation","renew","rotate","turn"]},{"name":"build","tags":["adjust","build","fix","home","nest","repair","tool","tools","wrench"]},{"name":"videocam","tags":["cam","camera","conference","film","filming","hardware","image","motion","picture","video","videography"]},{"name":"view_list","tags":["design","format","grid","layout","lines","list","stacked","view","website"]},{"name":"print","tags":["draft","fax","ink","machine","office","paper","print","printer","send"]},{"name":"work","tags":["bag","baggage","briefcase","business","case","job","suitcase","work"]},{"name":"store","tags":["bill","building","business","card","cash","coin","commerce","company","credit","currency","dollars","market","money","online","pay","payment","shop","shopping","store","storefront"]},{"name":"analytics","tags":["analytics","assessment","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"radio_button_checked","tags":["app","application","bullet","button","checked","circle","components","design","form","interface","off","on","point","radio","record","screen","select","selected","site","toggle","ui","ux","web","website"]},{"name":"phone_iphone","tags":["Android","OS","cell","device","hardware","iOS","iphone","mobile","phone","tablet"]},{"name":"play_circle","tags":["arrow","circle","control","controls","media","music","play","video"]},{"name":"tune","tags":["adjust","audio","controls","custom","customize","edit","editing","filter","filters","instant","mix","music","options","setting","settings","slider","sliders","switches","tune"]},{"name":"delete_forever","tags":["bin","can","cancel","delete","exit","forever","garbage","remove","trash","x"]},{"name":"today","tags":["calendar","date","day","event","mark","month","remember","reminder","schedule","time","today"]},{"name":"grid_view","tags":["app","application square","blocks","components","dashboard","design","grid","interface","layout","screen","site","tiles","ui","ux","view","web","website","window"]},{"name":"east","tags":["arrow","directional","east","maps","navigation","right"]},{"name":"inventory_2","tags":["archive","box","file","inventory","organize","packages","product","stock","storage","supply"]},{"name":"mail_outline","tags":["email","envelop","letter","mail","message","outline","send"]},{"name":"admin_panel_settings","tags":["account","admin","avatar","certified","face","human","panel","people","person","privacy","private","profile","protect","protection","security","settings","shield","user","verified"]},{"name":"mic","tags":["hear","hearing","mic","microphone","noise","record","sound","voice"]},{"name":"calendar_month","tags":["calendar","date","day","event","month","schedule","today"]},{"name":"group","tags":["accounts","committee","face","family","friends","group","humans","network","people","persons","profiles","social","team","users"]},{"name":"picture_as_pdf","tags":["alphabet","as","character","document","file","font","image","letter","multiple","pdf","photo","photography","picture","symbol","text","type"]},{"name":"lock_open","tags":["lock","open","password","privacy","private","protection","safety","secure","security","unlocked"]},{"name":"volume_up","tags":["audio","control","music","sound","speaker","tv","up","volume"]},{"name":"watch_later","tags":["clock","date","later","schedule","time","watch"]},{"name":"grade","tags":["'favorite_news'  .","'star_outline'","Duplicate of 'star_boarder'","star_border_purple500'"]},{"name":"receipt_long","tags":["bill","check","document","list","long","paper","paperwork","receipt","record","store","transaction"]},{"name":"local_offer","tags":["deal","discount","offer","price","shop","shopping","store","tag"]},{"name":"room","tags":["destination","direction","location","maps","pin","place","room","stop"]},{"name":"update","tags":["arrow","back","backwards","clock","forward","history","load","refresh","reverse","schedule","time","update"]},{"name":"badge","tags":["account","avatar","badge","card","certified","employee","face","human","identification","name","people","person","profile","security","user","work"]},{"name":"savings","tags":["bank","bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","pig","piggy","savings","symbol"]},{"name":"code","tags":["brackets","code","css","develop","developer","engineer","engineering","html","platform"]},{"name":"light_mode","tags":["bright","brightness","day","device","light","lighting","mode","morning","sky","sun","sunny"]},{"name":"receipt","tags":[]},{"name":"circle","tags":["circle","full","geometry","moon"]},{"name":"inventory","tags":["archive","box","clipboard","doc","document","file","inventory","organize","packages","product","stock","supply"]},{"name":"add_shopping_cart","tags":["add","card","cart","cash","checkout","coin","commerce","credit","currency","dollars","money","online","pay","payment","plus","shopping"]},{"name":"contact_support","tags":["?","bubble","chat","comment","communicate","contact","help","info","information","mark","message","punctuation","question","question mark","speech","support","symbol"]},{"name":"category","tags":["categories","category","circle","collection","items","product","sort","square","triangle"]},{"name":"edit_note","tags":["compose","create","draft","edit","editing","input","lines","note","pen","pencil","text","write","writing"]},{"name":"insights","tags":["ai","analytics","artificial","automatic","automation","bar","bars","chart","custom","data","diagram","genai","graph","infographic","insights","intelligence","magic","measure","metrics","smart","spark","sparkle","star","stars","statistics","tracking"]},{"name":"power_settings_new","tags":["info","information","off","on","power","save","settings","shutdown"]},{"name":"campaign","tags":["alert","announcement","campaign","loud","megaphone","microphone","notification","speaker"]},{"name":"format_list_bulleted","tags":["align","alignment","bulleted","doc","edit","editing","editor","format","list","notes","sheet","spreadsheet","text","type","writing"]},{"name":"star_border","tags":["best","bookmark","border","favorite","highlight","outline","ranking","rate","rating","save","star","toggle"]},{"name":"pause","tags":["control","controls","media","music","pause","video"]},{"name":"remove_circle_outline","tags":["block","can","circle","delete","minus","negative","outline","remove","substract","trash"]},{"name":"warning_amber","tags":["!","alert","amber","attention","caution","danger","error","exclamation","important","mark","notification","symbol","triangle","warning"]},{"name":"wifi","tags":["connection","data","internet","network","scan","service","signal","wifi","wireless"]},{"name":"arrow_back_ios_new","tags":["DISABLE_IOS","app","application","arrow","back","chevron","components","direction","disable_ios","interface","ios","left","navigation","new","previous","screen","site","ui","ux","web","website"]},{"name":"restart_alt","tags":["alt","around","arrow","inprogress","load","loading refresh","reboot","renew","repeat","reset","restart"]},{"name":"done_all","tags":["all","approve","check","complete","done","layers","mark","multiple","ok","select","stack","tick","validate","verified","yes"]},{"name":"pets","tags":["animal","cat","dog","hand","paw","pet"]},{"name":"storefront","tags":["business","buy","cafe","commerce","front","market","places","restaurant","retail","sell","shop","shopping","store","storefront"]},{"name":"sort","tags":["filter","find","lines","list","organize","sort"]},{"name":"mode_edit","tags":["compose","create","draft","draw","edit","mode","pen","pencil","write"]},{"name":"list_alt","tags":["alt","box","contained","format","lines","list","order","reorder","stacked","title"]},{"name":"toggle_on","tags":["active","app","application","components","configuration","control","design","disable","inable","inactive","interface","off","on","selection","settings","site","slider","switch","toggle","ui","ux","web","website"]},{"name":"dark_mode","tags":["app","application","dark","device","interface","mode","moon","night","silent","theme","ui","ux","website"]},{"name":"engineering","tags":["body","cogs","cogwheel","construction","engineering","fixing","gears","hat","helmet","human","maintenance","people","person","setting","worker"]},{"name":"explore","tags":["compass","destination","direction","east","explore","location","maps","needle","north","south","travel","west"]},{"name":"bolt","tags":["bolt","electric","energy","fast","flash","lightning","power","thunderbolt"]},{"name":"construction","tags":["build","carpenter","construction","equipment","fix","hammer","improvement","industrial","industry","repair","tools","wrench"]},{"name":"qr_code_scanner","tags":["barcode","camera","code","media","product","qr","quick","response","scanner","smartphone","url","urls"]},{"name":"bookmark","tags":["archive","bookmark","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"vpn_key","tags":["code","key","lock","network","passcode","password","unlock","vpn"]},{"name":"monetization_on","tags":["bill","card","cash","circle","coin","commerce","cost","credit","currency","dollars","finance","monetization","money","on","online","pay","payment","shopping","symbol"]},{"name":"attach_file","tags":["add","attach","attachment","clip","file","link","mail","media"]},{"name":"timer","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","stop","time","timer","watch"]},{"name":"account_box","tags":["account","avatar","box","face","human","people","person","profile","square","thumbnail","user"]},{"name":"note_add","tags":["+","-doc","add","data","document","drive","file","folder","folders","new","note","page","paper","plus","sheet","slide","symbol","writing"]},{"name":"reorder","tags":["format","lines","list","order","reorder","stacked"]},{"name":"bookmark_border","tags":["archive","bookmark","border","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"arrow_right","tags":["app","application","arrow","components","direction","interface","navigation","right","screen","site","ui","ux","web","website"]},{"name":"pending_actions","tags":["actions","clipboard","clock","date","doc","document","pending","remember","schedule","time"]},{"name":"smartphone","tags":["Android","OS","call","cell","chat","device","hardware","iOS","mobile","phone","smartphone","tablet","text"]},{"name":"upload_file","tags":["arrow","data","doc","document","download","drive","file","folder","folders","page","paper","sheet","slide","up","upload","writing"]},{"name":"account_tree","tags":["account","analytics","chart","connect","data","diagram","flow","graph","infographic","measure","metrics","process","square","statistics","structure","tracking","tree"]},{"name":"shopping_basket","tags":["add","basket","bill","buy","card","cart","cash","checkout","coin","commerce","credit","currency","dollars","money","online","pay","payment","shopping"]},{"name":"flag","tags":["country","flag","goal","mark","nation","report","start"]},{"name":"apartment","tags":["accommodation","apartment","architecture","building","city","company","estate","flat","home","house","office","places","real","residence","residential","shelter","units","workplace"]},{"name":"restaurant","tags":["breakfast","dining","dinner","eat","food","fork","knife","local","lunch","meal","places","restaurant","spoon","utensils"]},{"name":"people_alt","tags":["accounts","committee","face","family","friends","humans","network","people","persons","profiles","social","team","users"]},{"name":"reply","tags":["arrow","backward","left","mail","message","reply","send","share"]},{"name":"play_circle_outline","tags":["arrow","circle","control","controls","media","music","outline","play","video"]},{"name":"payment","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","shopping","symbol"]},{"name":"sync","tags":["360","around","arrow","arrows","direction","inprogress","load","loading refresh","renew","rotate","sync","turn"]},{"name":"task","tags":["approve","check","complete","data","doc","document","done","drive","file","folder","folders","mark","ok","page","paper","select","sheet","slide","task","tick","validate","verified","writing","yes"]},{"name":"launch","tags":["app","application","arrow","box","components","interface","launch","new","open","screen","site","ui","ux","web","website","window"]},{"name":"menu_open","tags":["app","application","arrow","components","hamburger","interface","left","line","lines","menu","open","screen","site","ui","ux","web","website"]},{"name":"add_box","tags":["add","box","new square","plus","symbol"]},{"name":"drag_indicator","tags":["app","application","circles","components","design","dots","drag","drop","indicator","interface","layout","mobile","monitor","move","phone","screen","shape","shift","site","tablet","ui","ux","web","website","window"]},{"name":"supervisor_account","tags":["account","avatar","control","face","human","parental","parental control","parents","people","person","profile","supervised","supervisor","user"]},{"name":"touch_app","tags":["app","command","fingers","gesture","hand","press","tap","touch"]},{"name":"pending","tags":["circle","dots","loading","pending","progress","wait","waiting"]},{"name":"zoom_in","tags":["big","bigger","find","glass","grow","in","look","magnify","magnifying","plus","scale","search","see","size","zoom"]},{"name":"manage_search","tags":["glass","history","magnifying","manage","search","text"]},{"name":"remove_circle","tags":["block","can","circle","delete","minus","negative","remove","substract","trash"]},{"name":"group_add","tags":["accounts","add","committee","face","family","friends","group","humans","increase","more","network","people","persons","plus","profiles","social","team","users"]},{"name":"chat_bubble_outline","tags":["bubble","chat","comment","communicate","feedback","message","outline","speech"]},{"name":"assessment","tags":["analytics","assessment","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"priority_high","tags":["!","alert","attention","caution","danger","error","exclamation","high","important","mark","notification","symbol","warning"]},{"name":"push_pin","tags":["location","marker","pin","place","push","remember","save"]},{"name":"feed","tags":["article","feed","headline","information","news","newspaper","paper","public","social","timeline"]},{"name":"leaderboard","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","leaderboard","measure","metrics","statistics","tracking"]},{"name":"summarize","tags":["doc","document","list","menu","note","report","summary"]},{"name":"block","tags":["avoid","block","cancel","close","entry","exit","no","prohibited","quit","remove","stop"]},{"name":"event_available","tags":["approve","available","calendar","check","complete","date","done","event","mark","ok","schedule","select","tick","time","validate","verified","yes"]},{"name":"thumb_up_off_alt","tags":["alt","disabled","enabled","favorite","fingers","gesture","hand","hands","like","off","offline","on","rank","ranking","rate","rating","slash","thumb","up"]},{"name":"directions_car","tags":["automobile","car","cars","direction","directions","maps","public","transportation","vehicle"]},{"name":"open_in_full","tags":["action","arrow","arrows","expand","full","grow","in","move","open"]},{"name":"auto_stories","tags":["auto","book","flipping","pages","stories"]},{"name":"post_add","tags":["+","add","data","doc","document","drive","file","folder","folders","page","paper","plus","post","sheet","slide","text","writing"]},{"name":"calculate","tags":["+","-","=","calculate","count","finance calculator","math"]},{"name":"alternate_email","tags":["@","address","alternate","contact","email","tag"]},{"name":"create","tags":["compose","create","edit","editing","input","new","pen","pencil","write","writing"]},{"name":"cloud_upload","tags":["app","application","arrow","backup","cloud","connection","download","drive","files","folders","internet","network","sky","storage","up","upload"]},{"name":"local_fire_department","tags":["911","climate","department","fire","firefighter","flame","heat","home","hot","nest","thermostat"]},{"name":"bar_chart","tags":["analytics","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"password","tags":["key","login","password","pin","security","star","unlock"]},{"name":"collections","tags":["album","collections","gallery","image","landscape","library","mountain","mountains","photo","photography","picture","stack"]},{"name":"preview","tags":["design","eye","layout","preview","reveal","screen","see","show","site","view","web","website","window","www"]},{"name":"star_outline","tags":["bookmark","favorite","half","highlight","ranking","rate","rating","save","star","toggle"]},{"name":"exit_to_app","tags":["app","application","arrow","components","design","exit","export","interface","layout","leave","mobile","monitor","move","output","phone","screen","site","tablet","to","ui","ux","web","website","window"]},{"name":"done_outline","tags":["all","approve","check","complete","done","mark","ok","outline","select","tick","validate","verified","yes"]},{"name":"psychology","tags":["behavior","body","brain","cognitive","function","gear","head","human","intellectual","mental","mind","people","person","preferences","psychiatric","psychology","science","settings","social","therapy","thinking","thoughts"]},{"name":"assignment_ind","tags":["account","assignment","clipboard","doc","document","face","ind","people","person","profile","user"]},{"name":"volunteer_activism","tags":["activism","donation","fingers","gesture","giving","hand","hands","heart","love","sharing","volunteer"]},{"name":"navigate_before","tags":["arrow","arrows","before","direction","left","navigate"]},{"name":"published_with_changes","tags":["approve","arrow","arrows","changes","check","complete","done","inprogress","load","loading","mark","ok","published","refresh","renew","replace","rotate","select","tick","validate","verified","with","yes"]},{"name":"add_a_photo","tags":["+","a photo","add","camera","lens","new","photography","picture","plus","symbol"]},{"name":"auto_awesome","tags":["adjust","ai","artificial","automatic","automation","custom","edit","editing","enhance","genai","intelligence","magic","smart","spark","sparkle","star","stars"]},{"name":"card_giftcard","tags":["account","balance","bill","card","cart","cash","certificate","coin","commerce","credit","currency","dollars","gift","giftcard","money","online","pay","payment","present","shopping"]},{"name":"fullscreen","tags":["adjust","app","application","components","full","fullscreen","interface","screen","site","size","ui","ux","view","web","website"]},{"name":"sell","tags":["bill","card","cart","cash","coin","commerce","credit","currency","dollars","money","online","pay","payment","price","sell","shopping","tag"]},{"name":"checklist","tags":["align","alignment","approve","check","checklist","complete","doc","done","edit","editing","editor","format","list","mark","notes","ok","select","sheet","spreadsheet","text","tick","type","validate","verified","writing","yes"]},{"name":"view_in_ar","tags":["3d","ar","augmented","cube","daydream","headset","in","reality","square","view","vr"]},{"name":"undo","tags":["arrow","backward","mail","previous","redo","repeat","rotate","undo"]},{"name":"arrow_drop_up","tags":["app","application","arrow","components","direction","drop","interface","navigation","screen","site","ui","up","ux","web","website"]},{"name":"feedback","tags":["!","alert","announcement","attention","bubble","caution","chat","comment","communicate","danger","error","exclamation","feedback","important","mark","message","notification","speech","symbol","warning"]},{"name":"health_and_safety","tags":["+","add","and","certified","cross","health","home","nest","plus","privacy","private","protect","protection","safety","security","shield","symbol","verified"]},{"name":"work_outline","tags":["bag","baggage","briefcase","business","case","job","suitcase","work"]},{"name":"unfold_more","tags":["arrow","arrows","chevron","collapse","direction","down","expand","expandable","list","more","navigation","unfold"]},{"name":"travel_explore","tags":["earth","explore","find","glass","global","globe","look","magnify","magnifying","map","network","planet","search","see","social","space","travel","web","world"]},{"name":"palette","tags":["art","color","colors","filters","paint","palette"]},{"name":"keyboard_arrow_right","tags":["arrow","arrows","keyboard","right"]},{"name":"double_arrow","tags":["arrow","arrows","direction","double","multiple","navigation","right"]},{"name":"computer","tags":["Android","OS","chrome","computer","desktop","device","hardware","iOS","mac","monitor","web","window"]},{"name":"timeline","tags":["data","history","line","movement","point","points","timeline","tracking","trending","zigzag"]},{"name":"thumb_up_alt","tags":["agreed","approved","confirm","correct","favorite","feedback","good","happy","like","okay","positive","satisfaction","social","thumb","up","vote","yes"]},{"name":"signal_cellular_alt","tags":["alt","analytics","bar","cell","cellular","chart","data","diagram","graph","infographic","internet","measure","metrics","mobile","network","phone","signal","statistics","tracking","wifi","wireless"]},{"name":"replay","tags":["arrow","arrows","control","controls","music","refresh","renew","repeat","replay","video"]},{"name":"swap_horiz","tags":["arrow","arrows","back","forward","horizontal","swap"]},{"name":"volume_off","tags":["audio","control","disabled","enabled","low","music","off","on","slash","sound","speaker","tv","volume"]},{"name":"forum","tags":["bubble","chat","comment","communicate","community","conversation","feedback","forum","hub","message","speech"]},{"name":"skip_next","tags":["arrow","control","controls","music","next","play","previous","skip","video"]},{"name":"water_drop","tags":["drink","drop","droplet","eco","liquid","nature","ocean","rain","social","water"]},{"name":"assignment_turned_in","tags":["approve","assignment","check","clipboard","complete","doc","document","done","in","mark","ok","select","tick","turn","validate","verified","yes"]},{"name":"library_books","tags":["add","album","audio","book","books","collection","library","read","reading"]},{"name":"maps_home_work","tags":["building","home","house","maps","office","work"]},{"name":"dns","tags":["address","bars","dns","domain","information","ip","list","lookup","name","server","system"]},{"name":"sync_alt","tags":["alt","arrow","arrows","horizontal","internet","sync","technology","up","update","wifi"]},{"name":"how_to_reg","tags":["approve","ballot","check","complete","done","election","how","mark","ok","poll","register","registration","select","tick","to reg","validate","verified","vote","yes"]},{"name":"notifications_none","tags":["alarm","alert","bell","none","notifications","notify","reminder","sound"]},{"name":"stars","tags":["achievement","bookmark","circle","favorite","highlight","important","marked","ranking","rate","rating rank","reward","save","saved","shape","special","star"]},{"name":"flight_takeoff","tags":["airport","departed","departing","flight","fly","landing","plane","takeoff","transportation","travel"]},{"name":"label","tags":["favorite","indent","label","library","mail","remember","save","stamp","sticker","tag"]},{"name":"devices","tags":["Android","OS","computer","desktop","device","hardware","iOS","laptop","mobile","monitor","phone","tablet","watch","wearable","web"]},{"name":"chat_bubble","tags":["bubble","chat","comment","communicate","feedback","message","speech"]},{"name":"emoji_emotions","tags":["+","add","emoji","emotions","expressions","face","feelings","glad","happiness","happy","icon","icons","insert","like","mood","new","person","pleased","plus","smile","smiling","social","survey","symbol"]},{"name":"remove_red_eye","tags":["eye","iris","look","looking","preview","red","remove","see","sight","vision"]},{"name":"content_paste","tags":["clipboard","content","copy","cut","doc","document","file","multiple","past"]},{"name":"folder_open","tags":["data","doc","document","drive","file","folder","folders","open","sheet","slide","storage"]},{"name":"text_snippet","tags":["data","doc","document","file","note","notes","snippet","storage","text","writing"]},{"name":"tips_and_updates","tags":["ai","alert","and","announcement","artificial","automatic","automation","custom","electricity","genai","idea","info","information","intelligence","light","lightbulb","magic","smart","spark","sparkle","star","tips","updates"]},{"name":"my_location","tags":["destination","direction","location","maps","navigation","pin","place","point","stop"]},{"name":"textsms","tags":["bubble","chat","comment","communicate","dots","feedback","message","speech","textsms"]},{"name":"cloud","tags":["cloud","connection","internet","network","sky","upload"]},{"name":"sports_esports","tags":["controller","entertainment","esports","game","gamepad","gaming","hobby","online","social","sports","video"]},{"name":"security","tags":["certified","privacy","private","protect","protection","security","shield","verified"]},{"name":"request_quote","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","quote","request","shopping","symbol"]},{"name":"toggle_off","tags":["active","app","application","components","configuration","control","design","disable","inable","inactive","interface","off","on","selection","settings","site","slider","switch","toggle","ui","ux","web","website"]},{"name":"book","tags":["book","bookmark","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"contact_page","tags":["account","avatar","contact","data","doc","document","drive","face","file","folder","folders","human","page","people","person","profile","sheet","slide","storage","user","writing"]},{"name":"speed","tags":["arrow","control","controls","fast","gauge","meter","motion","music","slow","speed","speedometer","velocity","video"]},{"name":"bug_report","tags":["animal","bug","fix","insect","issue","problem","report","testing","virus","warning"]},{"name":"space_dashboard","tags":["cards","dashboard","format","grid","layout","rectangle","shapes","space","squares","web","website"]},{"name":"fiber_manual_record","tags":["circle","dot","fiber","manual","play","record","watch"]},{"name":"report","tags":["!","alert","attention","caution","danger","error","exclamation","important","mark","notification","octagon","report","symbol","warning"]},{"name":"alarm","tags":["alarm","alert","bell","clock","countdown","date","notification","schedule","time"]},{"name":"cached","tags":["around","arrows","cache","cached","inprogress","load","loading refresh","renew","rotate"]},{"name":"translate","tags":["language","speaking","speech","translate","translator","words"]},{"name":"pan_tool","tags":["fingers","gesture","hand","hands","human","move","pan","scan","stop","tool"]},{"name":"gavel","tags":["agreement","contract","court","document","gavel","government","judge","law","mallet","official","police","rule","rules","terms"]},{"name":"settings_suggest","tags":["ai","artificial","automatic","automation","change","custom","details","gear","genai","intelligence","magic","options","recommendation","service","settings","smart","spark","sparkle","star","suggest","suggestion","system"]},{"name":"file_copy","tags":["content","copy","cut","doc","document","duplicate","file","multiple","past"]},{"name":"edit_calendar","tags":["calendar","compose","create","date","day","draft","edit","editing","event","month","pen","pencil","schedule","write","writing"]},{"name":"contact_mail","tags":["account","address","avatar","communicate","contact","email","face","human","info","information","mail","message","people","person","profile","user"]},{"name":"quiz","tags":["?","assistance","faq","help","info","information","punctuation","question mark","quiz","support","symbol","test"]},{"name":"supervised_user_circle","tags":["account","avatar","circle","control","face","human","parental","parents","people","person","profile","supervised","supervisor","user"]},{"name":"cloud_download","tags":["app","application","arrow","backup","cloud","connection","down","download","drive","files","folders","internet","network","sky","storage","upload"]},{"name":"stop","tags":["control","controls","music","pause","play","square","stop","video"]},{"name":"person_search","tags":["account","avatar","face","find","glass","human","look","magnify","magnifying","people","person","profile","search","user"]},{"name":"location_city","tags":["apartments","architecture","buildings","business","city","estate","home","landscape","location","place","real","residence","residential","shelter","town","urban"]},{"name":"sentiment_very_satisfied","tags":["emotions","expressions","face","feelings","glad","happiness","happy","like","mood","person","pleased","satisfied","sentiment","smile","smiling","survey","very"]},{"name":"ios_share","tags":["arrow","export","ios","send","share","up"]},{"name":"minimize","tags":["app","application","components","design","interface","line","minimize","screen","shape","site","ui","ux","web","website"]},{"name":"qr_code","tags":["barcode","camera","code","media","product","qr","quick","response","smartphone","url","urls"]},{"name":"sentiment_satisfied_alt","tags":["account","alt","emoji","face","happy","human","people","person","profile","satisfied","sentiment","smile","user"]},{"name":"local_mall","tags":["bag","bill","building","business","buy","card","cart","cash","coin","commerce","credit","currency","dollars","handbag","local","mall","money","online","pay","payment","shop","shopping","store","storefront"]},{"name":"qr_code_2","tags":["barcode","camera","code","media","product","qr","quick","response","smartphone","url","urls"]},{"name":"flight","tags":["air","airplane","airport","flight","plane","transportation","travel","trip"]},{"name":"desktop_windows","tags":["Android","OS","chrome","desktop","device","display","hardware","iOS","mac","monitor","screen","television","tv","web","window","windows"]},{"name":"music_note","tags":["audio","audiotrack","key","music","note","sound","track"]},{"name":"sentiment_satisfied","tags":["emotions","expressions","face","feelings","glad","happiness","happy","like","mood","person","pleased","satisfied","sentiment","smile","smiling","survey"]},{"name":"android","tags":["android","character","logo","mascot","toy"]},{"name":"accessibility","tags":["accessibility","accessible","body","handicap","help","human","people","person"]},{"name":"backspace","tags":["arrow","back","backspace","cancel","clear","correct","delete","erase","remove"]},{"name":"precision_manufacturing","tags":["arm","automatic","chain","conveyor","crane","factory","industry","machinery","manufacturing","mechanical","precision","production","repairing","robot","supply","warehouse"]},{"name":"drag_handle","tags":["app","application ui","components","design","drag","handle","interface","layout","menu","move","screen","site","ui","ux","web","website","window"]},{"name":"smart_display","tags":["airplay","cast","chrome","connect","device","display","play","screen","screencast","smart","stream","television","tv","video","wireless"]},{"name":"near_me","tags":["destination","direction","location","maps","me","navigation","near","pin","place","point","stop"]},{"name":"west","tags":["arrow","directional","left","maps","navigation","west"]},{"name":"get_app","tags":["app","arrow","arrows","down","download","downloads","export","get","install","play","upload"]},{"name":"person_add_alt","tags":["+","account","add","face","human","people","person","plus","profile","user"]},{"name":"fitness_center","tags":["athlete","center","dumbbell","exercise","fitness","gym","hobby","places","sport","weights","workout"]},{"name":"shield","tags":["certified","privacy","private","protect","protection","security","shield","verified"]},{"name":"message","tags":["bubble","chat","comment","communicate","feedback","message","speech"]},{"name":"rocket_launch","tags":["launch","rocket","space","spaceship","takeoff"]},{"name":"record_voice_over","tags":["account","face","human","over","people","person","profile","record","recording","speak","speaking","speech","transcript","user","voice"]},{"name":"add_task","tags":["+","add","approve","check","circle","completed","increase","mark","ok","plus","select","task","tick","yes"]},{"name":"drive_file_rename_outline","tags":["compose","create","draft","drive","edit","editing","file","input","marker","pen","pencil","rename","write","writing"]},{"name":"insert_drive_file","tags":["doc","drive","file","format","insert","sheet","slide"]},{"name":"question_mark","tags":["?","assistance","help","info","information","punctuation","question mark","support","symbol"]},{"name":"trending_flat","tags":["arrow","change","data","flat","metric","movement","rate","right","track","tracking","trending"]},{"name":"handyman","tags":["build","construction","fix","hammer","handyman","repair","screw","screwdriver","tools"]},{"name":"emoji_objects","tags":["bulb","creative","emoji","idea","light","objects","solution","thinking"]},{"name":"military_tech","tags":["army","award","badge","honor","medal","merit","military","order","privilege","prize","rank","reward","ribbon","soldier","star","status","tech","trophy","win","winner"]},{"name":"hourglass_empty","tags":["countdown","empty","hourglass","loading","minutes","time","wait","waiting"]},{"name":"help_center","tags":["?","assistance","center","help","info","information","punctuation","question mark","recent","restore","support","symbol"]},{"name":"science","tags":["beaker","chemical","chemistry","experiment","flask","glass","laboratory","research","science","tube"]},{"name":"storage","tags":["computer","data","drive","memory","storage"]},{"name":"movie","tags":["cinema","film","media","movie","slate","video"]},{"name":"accessibility_new","tags":["accessibility","accessible","body","handicap","help","human","new","people","person"]},{"name":"workspace_premium","tags":["certification","degree","ecommerce","guarantee","medal","permit","premium","ribbon","verification","workspace"]},{"name":"directions_run","tags":["body","directions","human","jogging","maps","people","person","route","run","running","walk"]},{"name":"rule","tags":["approve","check","complete","done","incomplete","line","mark","missing","no","ok","rule","select","tick","validate","verified","wrong","x","yes"]},{"name":"thumb_down","tags":["ate","dislike","down","favorite","fingers","gesture","hand","hands","like","rank","ranking","rating","thumb"]},{"name":"event_note","tags":["calendar","date","event","note","schedule","text","time","writing"]},{"name":"contacts","tags":["account","avatar","call","cell","contacts","face","human","info","information","mobile","people","person","phone","profile","user"]},{"name":"comment","tags":["bubble","chat","comment","communicate","feedback","message","outline","speech"]},{"name":"restaurant_menu","tags":["book","dining","eat","food","fork","knife","local","meal","menu","restaurant","spoon"]},{"name":"add_photo_alternate","tags":["+","add","alternate","image","landscape","mountain","mountains","new","photo","photography","picture","plus","symbol"]},{"name":"confirmation_number","tags":["admission","confirmation","entertainment","event","number","ticket"]},{"name":"sticky_note_2","tags":["2","bookmark","mark","message","note","paper","sticky","text","writing"]},{"name":"format_quote","tags":["doc","edit","editing","editor","format","quotation","quote","sheet","spreadsheet","text","type","writing"]},{"name":"history_edu","tags":["document","edu","education","feather","history","letter","paper","pen","quill","school","story","tools","write","writing"]},{"name":"business_center","tags":["bag","baggage","briefcase","business","case","center","places","purse","suitcase","work"]},{"name":"upload","tags":["arrow","arrows","download","drive","up","upload"]},{"name":"skip_previous","tags":["arrow","control","controls","music","next","play","previous","skip","video"]},{"name":"archive","tags":["archive","inbox","mail","store"]},{"name":"wb_sunny","tags":["balance","bright","light","lighting","sun","sunny","wb","white"]},{"name":"cake","tags":["add","baked","birthday","cake","candles","celebration","dessert","food","frosting","new","party","pastries","pastry","plus","social","sweet","symbol"]},{"name":"attachment","tags":["attach","attachment","clip","compose","file","image","link"]},{"name":"source","tags":["code","composer","content","creation","data","doc","document","file","folder","mode","source","storage","view"]},{"name":"settings_applications","tags":["application","change","details","gear","info","information","options","personal","service","settings"]},{"name":"dashboard_customize","tags":["cards","customize","dashboard","format","layout","rectangle","shapes","square","web","website"]},{"name":"find_in_page","tags":["data","doc","document","drive","file","find","folder","folders","glass","in","look","magnify","magnifying","page","paper","search","see","sheet","slide","writing"]},{"name":"support","tags":["assist","buoy","help","life","lifebuoy","rescue","safe","safety","support"]},{"name":"ads_click","tags":["ads","browser","click","clicks","cursor","internet","target","traffic","web"]},{"name":"new_releases","tags":["approve","award","check","checkmark","complete","done","new","notification","ok","release","releases","select","star","symbol","tick","verification","verified","warning","yes"]},{"name":"flutter_dash","tags":["bird","dash","flutter","mascot"]},{"name":"playlist_add","tags":["+","add","collection","list","music","new","playlist","plus","symbol"]},{"name":"save_alt","tags":["alt","arrow","disk","document","down","file","floppy","multimedia","save"]},{"name":"close_fullscreen","tags":["action","arrow","arrows","close","collapse","direction","full","fullscreen","minimize","screen"]},{"name":"credit_score","tags":["approve","bill","card","cash","check","coin","commerce","complete","cost","credit","currency","dollars","done","finance","loan","mark","money","ok","online","pay","payment","score","select","symbol","tick","validate","verified","yes"]},{"name":"layers","tags":["arrange","disabled","enabled","interaction","layers","maps","off","on","overlay","pages","slash"]},{"name":"redeem","tags":["bill","card","cart","cash","certificate","coin","commerce","credit","currency","dollars","gift","giftcard","money","online","pay","payment","present","redeem","shopping"]},{"name":"spa","tags":["aromatherapy","flower","healthcare","leaf","massage","meditation","nature","petals","places","relax","spa","wellbeing","wellness"]},{"name":"announcement","tags":["!","alert","announcement","attention","bubble","caution","chat","comment","communicate","danger","error","exclamation","feedback","important","mark","message","notification","speech","symbol","warning"]},{"name":"keyboard_backspace","tags":["arrow","back","backspace","keyboard","left"]},{"name":"loyalty","tags":["benefits","card","credit","heart","loyalty","membership","miles","points","program","subscription","tag","travel","trip"]},{"name":"swap_vert","tags":["arrow","arrows","direction","down","navigation","swap","up","vert","vertical"]},{"name":"sentiment_dissatisfied","tags":["angry","disappointed","dislike","dissatisfied","emotions","expressions","face","feelings","frown","mood","person","sad","sentiment","survey","unhappy","unsatisfied","upset"]},{"name":"medical_services","tags":["aid","bag","briefcase","emergency","first","kit","medical","medicine","services"]},{"name":"view_headline","tags":["design","format","grid","headline","layout","paragraph","text","view","website"]},{"name":"arrow_circle_right","tags":["arrow","circle","direction","navigation","right"]},{"name":"format_list_numbered","tags":["align","alignment","digit","doc","edit","editing","editor","format","list","notes","number","numbered","sheet","spreadsheet","symbol","text","type","writing"]},{"name":"phone_android","tags":["OS","android","cell","device","hardware","iOS","mobile","phone","tablet"]},{"name":"sms","tags":["3","bubble","chat","communication","conversation","dots","message","more","service","sms","speech","three"]},{"name":"restore","tags":["arrow","back","backwards","clock","date","history","refresh","renew","restore","reverse","rotate","schedule","time","turn"]},{"name":"policy","tags":["certified","find","glass","legal","look","magnify","magnifying","policy","privacy","private","protect","protection","search","security","see","shield","verified"]},{"name":"dangerous","tags":["broken","danger","dangerous","fix","no","sign","stop","update","warning","wrong","x"]},{"name":"battery_full","tags":["battery","cell","charge","full","mobile","power"]},{"name":"euro_symbol","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","euro","finance","money","online","pay","payment","symbol"]},{"name":"query_stats","tags":["analytics","chart","data","diagram","find","glass","graph","infographic","line","look","magnify","magnifying","measure","metrics","query","search","see","statistics","stats","tracking"]},{"name":"group_work","tags":["alliance","collaboration","group","partnership","team","teamwork","together","work"]},{"name":"expand_circle_down","tags":["arrow","arrows","chevron","circle","collapse","direction","down","expand","expandable","list","more"]},{"name":"sensors","tags":["connection","network","scan","sensors","signal","wireless"]},{"name":"keyboard_arrow_up","tags":["arrow","arrows","keyboard","up"]},{"name":"brush","tags":["art","brush","design","draw","edit","editing","paint","painting","tool"]},{"name":"meeting_room","tags":["building","door","doorway","entrance","home","house","interior","meeting","office","open","places","room"]},{"name":"key","tags":["key","lock","password","unlock"]},{"name":"house","tags":["architecture","building","estate","family","home","homepage","house","place","places","real","residence","residential","shelter"]},{"name":"lunch_dining","tags":["breakfast","dining","dinner","drink","fastfood","food","hamburger","lunch","meal"]},{"name":"table_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic grid","measure","metrics","statistics","table","tracking"]},{"name":"border_color","tags":["all","border","doc","edit","editing","editor","pen","pencil","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"compare_arrows","tags":["arrow","arrows","collide","compare","direction","left","pressure","push","right","together"]},{"name":"south","tags":["arrow","directional","down","maps","navigation","south"]},{"name":"directions_walk","tags":["body","direction","directions","human","jogging","maps","people","person","route","run","walk"]},{"name":"arrow_left","tags":["app","application","arrow","components","direction","interface","left","navigation","screen","site","ui","ux","web","website"]},{"name":"tag","tags":["hash","hashtag","key","media","number","pound","social","tag","trend"]},{"name":"change_circle","tags":["around","arrows","change","circle","direction","navigation","rotate"]},{"name":"subject","tags":["alignment","doc","document","email","full","justify","list","note","subject","text","writing"]},{"name":"sentiment_very_dissatisfied","tags":["angry","disappointed","dislike","dissatisfied","emotions","expressions","face","feelings","mood","person","sad","sentiment","sorrow","survey","unhappy","unsatisfied","upset","very"]},{"name":"local_hospital","tags":["911","aid","cross","emergency","first","hospital","local","medicine"]},{"name":"table_view","tags":["format","grid","group","layout","multiple","table","view"]},{"name":"disabled_by_default","tags":["box","by","cancel","close","default","disabled","exit","no","quit","remove","square","stop","x"]},{"name":"notification_important","tags":["!","active","alarm","alert","attention","bell","caution","chime","danger","error","exclamation","important","mark","notification","notifications","notify","reminder","ring","sound","symbol","warning"]},{"name":"celebration","tags":["activity","birthday","celebration","event","fun","party"]},{"name":"laptop","tags":["Android","OS","chrome","computer","desktop","device","hardware","iOS","laptop","mac","monitor","web","windows"]},{"name":"loop","tags":["around","arrow","arrows","direction","inprogress","load","loading refresh","loop","music","navigation","renew","rotate","turn"]},{"name":"nightlight_round","tags":["dark","half","light","mode","moon","night","nightlight","round"]},{"name":"privacy_tip","tags":["alert","announcement","assistance","certified","details","help","i","info","information","privacy","private","protect","protection","security","service","shield","support","tip","verified"]},{"name":"import_contacts","tags":["address","book","contacts","import","info","information","open"]},{"name":"equalizer","tags":["adjustment","analytics","chart","data","equalizer","graph","measure","metrics","music","noise","sound","static","statistics","tracking","volume"]},{"name":"app_registration","tags":["app","apps","edit","pencil","register","registration"]},{"name":"keyboard_double_arrow_right","tags":["arrow","arrows","direction","double","multiple","navigation","right"]},{"name":"handshake","tags":["agreement","hand","hands","partnership","shake"]},{"name":"corporate_fare","tags":["architecture","building","business","corporate","estate","fare","organization","place","real","residence","residential","shelter"]},{"name":"local_library","tags":["book","community learning","library","local","read"]},{"name":"https","tags":["https","lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"euro","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","euro","euros","finance","money","online","pay","payment","price","shopping","symbol"]},{"name":"coronavirus","tags":["19","bacteria","coronavirus","covid","disease","germs","illness","sick","social"]},{"name":"price_check","tags":["approve","bill","card","cash","check","coin","commerce","complete","cost","credit","currency","dollars","done","finance","mark","money","ok","online","pay","payment","price","select","shopping","symbol","tick","validate","verified","yes"]},{"name":"live_tv","tags":["Android","OS","antennas hardware","chrome","desktop","device","iOS","live","mac","monitor","movie","play","stream","television","tv","web","window"]},{"name":"park","tags":["attraction","fresh","local","nature","outside","park","plant","tree"]},{"name":"toc","tags":["content","format","lines","list","order","reorder","stacked","table","title","titles","toc"]},{"name":"track_changes","tags":["bullseye","changes","circle","evolve","lines","movement","rotate","shift","target","track"]},{"name":"arrow_circle_up","tags":["arrow","circle","direction","navigation","up"]},{"name":"emoji_people","tags":["arm","body","emoji","greeting","human","people","person","social","waving"]},{"name":"flash_on","tags":["bolt","disabled","electric","enabled","fast","flash","lightning","off","on","slash","thunderbolt"]},{"name":"copyright","tags":["alphabet","c","character","copyright","emblem","font","legal","letter","owner","symbol","text"]},{"name":"bookmarks","tags":["bookmark","bookmarks","favorite","label","layers","library","multiple","read","reading","remember","ribbon","save","stack","tag"]},{"name":"ac_unit","tags":["ac","air","cold","conditioner","flake","snow","temperature","unit","weather","winter"]},{"name":"contact_phone","tags":["account","avatar","call","communicate","contact","face","human","info","information","message","mobile","people","person","phone","profile","user"]},{"name":"keyboard_arrow_left","tags":["arrow","arrows","keyboard","left"]},{"name":"medication","tags":["doctor","drug","emergency","hospital","medication","medicine","pharmacy","pills","prescription"]},{"name":"grading","tags":["'favorite'_new'.  ' Remove this icon & keep 'star'.","'star_boarder'","'star_border_purple500'","'star_outline'","'star_purple500'","'star_rate'","Same as 'star'"]},{"name":"keyboard_return","tags":["arrow","back","keyboard","left","return"]},{"name":"api","tags":["api","developer","development","enterprise","software"]},{"name":"smart_toy","tags":["bot","droid","games","robot","smart","toy"]},{"name":"input","tags":["arrow","box","download","input","login","move","right"]},{"name":"self_improvement","tags":["body","calm","care","chi","human","improvement","meditate","meditation","people","person","relax","self","sitting","wellbeing","yoga","zen"]},{"name":"live_help","tags":["?","assistance","bubble","chat","comment","communicate","help","info","information","live","message","punctuation","question mark","recent","restore","speech","support","symbol"]},{"name":"query_builder","tags":["builder","clock","date","query","schedule","time"]},{"name":"perm_media","tags":["collection","data","doc","document","file","folder","folders","image","landscape","media","mountain","mountains","perm","photo","photography","picture","storage"]},{"name":"download_for_offline","tags":["arrow","circle","down","download","for offline","install","upload"]},{"name":"view_module","tags":["design","format","grid","layout","module","square","squares","stacked","view","website"]},{"name":"pin","tags":["1","2","3","digit","key","login","logout","number","password","pattern","pin","security","star","symbol","unlock"]},{"name":"fast_forward","tags":["control","fast","forward","media","music","play","speed","time","tv","video"]},{"name":"forward_to_inbox","tags":["arrow","arrows","directions","email","envelop","forward","inbox","letter","mail","message","navigation","outgoing","right","send","to"]},{"name":"person_remove","tags":["account","avatar","delete","face","human","minus","people","person","profile","remove","unfriend","user"]},{"name":"local_atm","tags":["atm","bill","card","cart","cash","coin","commerce","credit","currency","dollars","local","money","online","pay","payment","shopping","symbol"]},{"name":"star_half","tags":["achievement","bookmark","favorite","half","highlight","important","marked","ranking","rate","rating rank","reward","save","saved","shape","special","star","toggle"]},{"name":"build_circle","tags":["adjust","build","circle","fix","repair","tool","wrench"]},{"name":"redo","tags":["arrow","backward","forward","next","redo","repeat","rotate","undo"]},{"name":"web","tags":["browser","internet","page","screen","site","web","website","www"]},{"name":"north_east","tags":["arrow","east","maps","navigation","noth","right","up"]},{"name":"north","tags":["arrow","directional","maps","navigation","north","up"]},{"name":"cottage","tags":["architecture","beach","cottage","estate","home","house","lake","lodge","maps","place","real","residence","residential","stay","traveling"]},{"name":"local_activity","tags":["activity","event","event ticket","local","star","things","ticket"]},{"name":"currency_exchange","tags":["360","around","arrow","arrows","cash","coin","commerce","currency","direction","dollars","exchange","inprogress","money","pay","renew","rotate","sync","turn","universal"]},{"name":"video_library","tags":["arrow","collection","library","play","video"]},{"name":"hourglass_bottom","tags":["bottom","countdown","half","hourglass","loading","minute","minutes","time","wait","waiting"]},{"name":"headphones","tags":["accessory","audio","device","ear","earphone","headphones","headset","listen","music","sound"]},{"name":"zoom_out","tags":["find","glass","look","magnify","magnifying","minus","negative","out","scale","search","see","size","small","smaller","zoom"]},{"name":"poll","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","poll","statistics","survey","tracking","vote"]},{"name":"perm_contact_calendar","tags":["account","calendar","contact","date","face","human","information","people","perm","person","profile","schedule","time","user"]},{"name":"forward","tags":["arrow","forward","mail","message","playback","right","sent"]},{"name":"person_pin","tags":["account","avatar","destination","direction","face","human","location","maps","people","person","pin","place","profile","stop","user"]},{"name":"home_work","tags":["architecture","building","estate","home","place","real","residence","residential","shelter","work"]},{"name":"playlist_add_check","tags":["add","approve","check","collection","complete","done","list","mark","music","ok","playlist","select","tick","validate","verified","yes"]},{"name":"local_cafe","tags":["bottle","cafe","coffee","cup","drink","food","restaurant","tea"]},{"name":"ondemand_video","tags":["Android","OS","chrome","demand","desktop","device","hardware","iOS","mac","monitor","ondemand","play","television","tv","video","web","window"]},{"name":"design_services","tags":["compose","create","design","draft","edit","editing","input","pen","pencil","ruler","service","write","writing"]},{"name":"looks_one","tags":["1","digit","looks","numbers","square","symbol"]},{"name":"backup","tags":["arrow","backup","cloud","data","drive","files folders","storage","up","upload"]},{"name":"newspaper","tags":["article","data","doc","document","drive","file","folder","folders","magazine","media","news","newspaper","notes","page","paper","sheet","slide","text","writing"]},{"name":"memory","tags":["card","chip","digital","memory","micro","processor","sd","storage"]},{"name":"open_with","tags":["arrow","arrows","direction","expand","move","open","pan","with"]},{"name":"content_cut","tags":["content","copy","cut","doc","document","file","past","scissors","trim"]},{"name":"keyboard","tags":["computer","device","hardware","input","keyboard","keypad","letter","office","text","type"]},{"name":"hourglass_top","tags":["countdown","half","hourglass","loading","minute","minutes","time","top","wait","waiting"]},{"name":"settings_phone","tags":["call","cell","contact","device","hardware","mobile","phone","settings","telephone"]},{"name":"rss_feed","tags":["application","blog","connection","data","feed","internet","network","rss","service","signal","website","wifi","wireless"]},{"name":"first_page","tags":["arrow","back","chevron","first","left","page","rewind"]},{"name":"delivery_dining","tags":["delivery","dining","food","meal","restaurant","scooter","takeout","transportation","vehicle","vespa"]},{"name":"rate_review","tags":["comment","feedback","pen","pencil","rate","review","stars","write"]},{"name":"control_point","tags":["+","add","circle","control","plus","point"]},{"name":"gpp_good","tags":["certified","check","good","gpp","ok","pass","security","shield","sim","tick"]},{"name":"circle_notifications","tags":["active","alarm","alert","bell","chime","circle","notifications","notify","reminder","ring","sound"]},{"name":"auto_fix_high","tags":["adjust","ai","artificial","auto","automatic","automation","custom","edit","editing","enhance","erase","fix","genai","high","intelligence","magic","modify","pen","smart","spark","sparkle","star","tool","wand"]},{"name":"book_online","tags":["Android","OS","admission","appointment","book","cell","device","event","hardware","iOS","mobile","online","pass","phone","reservation","tablet","ticket"]},{"name":"notes","tags":["comment","doc","document","note","notes","text","write","writing"]},{"name":"point_of_sale","tags":["checkout","cost","machine","merchant","money","of","pay","payment","point","pos","retail","sale","system","transaction"]},{"name":"perm_phone_msg","tags":["bubble","call","cell","chat","comment","communicate","contact","device","message","msg","perm","phone","recording","speech","telephone","voice"]},{"name":"speaker_notes","tags":["bubble","chat","comment","communicate","format","list","message","notes","speaker","speech","text"]},{"name":"fullscreen_exit","tags":["adjust","app","application","components","exit","full","fullscreen","interface","screen","site","size","ui","ux","view","web","website"]},{"name":"headset_mic","tags":["accessory","audio","chat","device","ear","earphone","headphones","headset","listen","mic","music","sound","talk"]},{"name":"create_new_folder","tags":["+","add","create","data","doc","document","drive","file","folder","new","plus","sheet","slide","storage","symbol"]},{"name":"wysiwyg","tags":["composer","mode","screen","site","software","system","text","view","visibility","web","website","window","wysiwyg"]},{"name":"label_important","tags":["favorite","important","indent","label","library","mail","remember","save","stamp","sticker","tag","wing"]},{"name":"card_membership","tags":["bill","bookmark","card","cash","certificate","coin","commerce","cost","credit","currency","dollars","finance","loyalty","membership","money","online","pay","payment","shopping","subscription"]},{"name":"style","tags":["booklet","cards","filters","options","style","tags"]},{"name":"arrow_circle_down","tags":["arrow","circle","direction","down","navigation"]},{"name":"file_present","tags":["clip","data","doc","document","drive","file","folder","folders","note","paper","present","reminder","sheet","slide","storage","writing"]},{"name":"directions_bus","tags":["automobile","bus","car","cars","directions","maps","public","transportation","vehicle"]},{"name":"whatshot","tags":["arrow","circle","direction","fire","frames","hot","round","whatshot"]},{"name":"sports_soccer","tags":["athlete","athletic","ball","entertainment","exercise","football","game","hobby","soccer","social","sports"]},{"name":"indeterminate_check_box","tags":["app","application","box","button","check","components","control","design","form","indeterminate","interface","screen","select","selected","selection","site","square","toggle","ui","undetermined","ux","web","website"]},{"name":"outlined_flag","tags":["country","flag","goal","mark","nation","outlined","report","start"]},{"name":"price_change","tags":["arrows","bill","card","cash","change","coin","commerce","cost","credit","currency","dollars","down","finance","money","online","pay","payment","price","shopping","symbol","up"]},{"name":"mark_email_read","tags":["approve","check","complete","done","email","envelop","letter","mail","mark","message","note","ok","read","select","send","sent","tick","yes"]},{"name":"library_add","tags":["+","add","collection","layers","library","multiple","music","new","plus","stacked","symbol","video"]},{"name":"pageview","tags":["doc","document","find","glass","magnifying","page","paper","search","view"]},{"name":"tv","tags":["device","display","monitor","screen","screencast","stream","television","tv","video","wireless"]},{"name":"inbox","tags":["archive","email","inbox","incoming","mail","message"]},{"name":"adjust","tags":["adjust","alter","center","circle","circles","dot","fix","image","move","target"]},{"name":"3d_rotation","tags":["3","3d","D","alphabet","arrow","arrows","av","camera","character","digit","font","letter","number","rotation","symbol","text","type","vr"]},{"name":"battery_charging_full","tags":["battery","bolt","cell","charge","charging","full","lightening","mobile","power","thunderbolt"]},{"name":"chair","tags":["chair","comfort","couch","decoration","furniture","home","house","living","lounging","loveseat","room","seat","seating","sofa"]},{"name":"directions_bike","tags":["bicycle","bike","direction","directions","human","maps","person","public","route","transportation"]},{"name":"mic_off","tags":["audio","disabled","enabled","hear","hearing","mic","microphone","noise","off","on","record","recording","slash","sound","voice"]},{"name":"local_police","tags":["911","badge","law","local","officer","police","protect","protection","security","shield"]},{"name":"fastfood","tags":["drink","fastfood","food","hamburger","maps","meal","places"]},{"name":"tungsten","tags":["electricity","indoor","lamp","light","lightbulb","setting","tungsten"]},{"name":"mood","tags":["emoji","emotions","expressions","face","feelings","glad","happiness","happy","like","mood","person","pleased","smile","smiling","social","survey"]},{"name":"pause_circle","tags":["circle","control","controls","media","music","pause","video"]},{"name":"upgrade","tags":["arrow","export","instal","line","replace","up","update","upgrade"]},{"name":"recommend","tags":["approved","circle","confirm","favorite","gesture","hand","like","reaction","recommend","social","support","thumbs","up","well"]},{"name":"directions_car_filled","tags":["automobile","car","cars","direction","directions","filled","maps","public","transportation","vehicle"]},{"name":"fmd_good","tags":["destination","direction","fmd","good","location","maps","pin","place","stop"]},{"name":"integration_instructions","tags":["brackets","clipboard","code","css","develop","developer","doc","document","engineer","engineering clipboard","html","instructions","integration","platform"]},{"name":"format_bold","tags":["B","alphabet","bold","character","doc","edit","editing","editor","font","format","letter","sheet","spreadsheet","styles","symbol","text","type","writing"]},{"name":"people_outline","tags":["accounts","committee","face","family","friends","humans","network","outline","people","persons","profiles","social","team","users"]},{"name":"trending_down","tags":["analytics","arrow","data","diagram","down","graph","infographic","measure","metrics","movement","rate","rating","statistics","tracking","trending"]},{"name":"change_history","tags":["change","history","shape","triangle"]},{"name":"female","tags":["female","gender","girl","lady","social","symbol","woman","women"]},{"name":"link_off","tags":["attached","chain","clip","connection","disabled","enabled","link","linked","links","multimedia","off","on","slash","url"]},{"name":"text_fields","tags":["T","add","alphabet","character","field","fields","font","input","letter","symbol","text","type"]},{"name":"swipe","tags":["arrow","arrows","fingers","gesture","hand","hands","swipe","touch"]},{"name":"reviews","tags":["bubble","chat","comment","communicate","feedback","message","rate","rating","recommendation","reviews","speech"]},{"name":"home_repair_service","tags":["box","equipment","fix","home","kit","mechanic","repair","repairing","service","tool","toolbox","tools","workshop"]},{"name":"subscriptions","tags":["enroll","list","media","order","play","signup","subscribe","subscriptions"]},{"name":"video_call","tags":["+","add","call","camera","chat","conference","film","filming","hardware","image","motion","new","picture","plus","symbol","video","videography"]},{"name":"zoom_out_map","tags":["arrow","arrows","destination","location","maps","move","out","place","stop","zoom"]},{"name":"straighten","tags":["length","measure","measurement","ruler","size","straighten"]},{"name":"arrow_drop_down_circle","tags":["app","application","arrow","circle","components","direction","down","drop","interface","navigation","screen","site","ui","ux","web","website"]},{"name":"bed","tags":["bed","bedroom","double","full","furniture","home","hotel","house","king","night","pillows","queen","rest","room","size","sleep"]},{"name":"drive_eta","tags":["automobile","car","cars","destination","direction","drive","estimate","eta","maps","public","transportation","travel","trip","vehicle"]},{"name":"class","tags":["archive","book","bookmark","class","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"drafts","tags":["document","draft","drafts","email","file","letter","mail","message","read"]},{"name":"ballot","tags":["ballot","bullet","election","list","point","poll","vote"]},{"name":"volume_mute","tags":["audio","control","music","mute","sound","speaker","tv","volume"]},{"name":"table_rows","tags":["grid","layout","lines","rows","stacked","table"]},{"name":"accessible","tags":["accessibility","accessible","body","handicap","help","human","people","person","wheelchair"]},{"name":"stop_circle","tags":["circle","control","controls","music","pause","play","square","stop","video"]},{"name":"family_restroom","tags":["bathroom","child","children","family","father","kids","mother","parents","restroom","wc"]},{"name":"title","tags":["T","alphabet","character","font","header","letter","subject","symbol","text","title","type"]},{"name":"biotech","tags":["biotech","chemistry","laboratory","microscope","research","science","technology"]},{"name":"insert_emoticon","tags":["account","emoji","emoticon","face","happy","human","insert","people","person","profile","sentiment","smile","user"]},{"name":"g_translate","tags":["emblem","g","google","language","logo","mark","speaking","speech","translate","translator","words"]},{"name":"last_page","tags":["app","application","arrow","chevron","components","end","forward","interface","last","page","right","screen","site","ui","ux","web","website"]},{"name":"publish","tags":["arrow","cloud","file","import","publish","up","upload"]},{"name":"repeat","tags":["arrow","arrows","control","controls","media","music","repeat","video"]},{"name":"checklist_rtl","tags":["align","alignment","approve","check","checklist","complete","doc","done","edit","editing","editor","format","list","mark","notes","ok","rtl","select","sheet","spreadsheet","text","tick","type","validate","verified","writing","yes"]},{"name":"wifi_off","tags":["connection","data","disabled","enabled","internet","network","off","offline","on","scan","service","signal","slash","wifi","wireless"]},{"name":"settings_accessibility","tags":["accessibility","body","details","human","information","people","person","personal","preferences","profile","settings","user"]},{"name":"percent","tags":["math","number","percent","symbol"]},{"name":"insert_photo","tags":["image","insert","landscape","mountain","mountains","photo","photography","picture"]},{"name":"hotel","tags":["body","hotel","human","people","person","sleep","stay","travel","trip"]},{"name":"cleaning_services","tags":["clean","cleaning","dust","services","sweep"]},{"name":"downloading","tags":["arrow","circle","down","download","downloading","downloads","install","pending","progress","upload"]},{"name":"expand","tags":["arrow","arrows","compress","enlarge","expand","grow","move","push","together"]},{"name":"local_phone","tags":["booth","call","communication","phone","telecommunication"]},{"name":"offline_bolt","tags":["bolt","circle","electric","fast","lightning","offline","thunderbolt"]},{"name":"auto_graph","tags":["analytics","auto","chart","data","diagram","graph","infographic","line","measure","metrics","stars","statistics","tracking"]},{"name":"local_grocery_store","tags":["grocery","market","shop","store"]},{"name":"photo_library","tags":["album","image","library","mountain","mountains","photo","photography","picture"]},{"name":"miscellaneous_services","tags":[]},{"name":"note_alt","tags":["alt","clipboard","document","file","memo","note","page","paper","writing"]},{"name":"settings_backup_restore","tags":["arrow","back","backup","backwards","refresh","restore","reverse","rotate","settings"]},{"name":"production_quantity_limits","tags":["!","alert","attention","bill","card","cart","cash","caution","coin","commerce","credit","currency","danger","dollars","error","exclamation","important","limits","mark","money","notification","online","pay","payment","production","quantity","shopping","symbol","warning"]},{"name":"person_off","tags":["account","avatar","disabled","enabled","face","human","off","on","people","person","profile","slash","user"]},{"name":"report_gmailerrorred","tags":["!","alert","attention","caution","danger","error","exclamation","gmail","gmailerrorred","important","mark","notification","octagon","report","symbol","warning"]},{"name":"camera","tags":["aperture","camera","lens","photo","photography","picture","shutter"]},{"name":"recycling","tags":["bio","eco","green","loop","recyclable","recycle","recycling","rotate","sustainability","sustainable","trash"]},{"name":"male","tags":["boy","gender","male","man","social","symbol"]},{"name":"not_interested","tags":["cancel","close","dislike","exit","interested","no","not","off","quit","remove","stop","x"]},{"name":"event_busy","tags":["busy","calendar","cancel","close","date","event","exit","no","remove","schedule","stop","time","unavailable","x"]},{"name":"arrow_circle_left","tags":["arrow","circle","direction","left","navigation"]},{"name":"shuffle","tags":["arrow","arrows","control","controls","music","random","shuffle","video"]},{"name":"aspect_ratio","tags":["aspect","expand","image","ratio","resize","scale","size","square"]},{"name":"other_houses","tags":["architecture","cottage","estate","home","house","houses","maps","other","place","real","residence","residential","stay","traveling"]},{"name":"model_training","tags":["arrow","bulb","idea","inprogress","light","load","loading","model","refresh","renew","restore","reverse","rotate","training"]},{"name":"unfold_less","tags":["arrow","arrows","chevron","collapse","direction","expand","expandable","inward","less","list","navigation","unfold","up"]},{"name":"insert_chart_outlined","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","insert","measure","metrics","outlined","statistics","tracking"]},{"name":"donut_large","tags":["analytics","chart","data","diagram","donut","graph","infographic","inprogress","large","measure","metrics","pie","statistics","tracking"]},{"name":"view_column","tags":["column","design","format","grid","layout","vertical","view","website"]},{"name":"segment","tags":["alignment","fonts","format","lines","list","paragraph","part","piece","rule","rules","segment","style","text"]},{"name":"checkroom","tags":["checkroom","closet","clothes","coat check","hanger"]},{"name":"mode","tags":["compose","create","draft","draw","edit","mode","pen","pencil","write"]},{"name":"portrait","tags":["account","face","human","people","person","photo","picture","portrait","profile","user"]},{"name":"camera_alt","tags":["alt","camera","image","photo","photography","picture"]},{"name":"keyboard_double_arrow_left","tags":["arrow","arrows","direction","double","left","multiple","navigation"]},{"name":"delete_sweep","tags":["bin","can","delete","garbage","remove","sweep","trash"]},{"name":"hub","tags":["center","connection","core","focal point","hub","network","nucleus","topology"]},{"name":"audiotrack","tags":["audio","audiotrack","key","music","note","sound","track"]},{"name":"calendar_view_month","tags":["calendar","date","day","event","format","grid","layout","month","schedule","today","view"]},{"name":"draw","tags":["compose","create","design","draft","draw","edit","editing","input","pen","pencil","write","writing"]},{"name":"navigation","tags":["destination","direction","location","maps","navigation","pin","place","point","stop"]},{"name":"folder_shared","tags":["account","collaboration","data","doc","document","drive","face","file","folder","human","people","person","profile","share","shared","sheet","slide","storage","team","user"]},{"name":"read_more","tags":["arrow","more","read","text"]},{"name":"stacked_bar_chart","tags":["analytics","bar","chart-chart","data","diagram","graph","infographic","measure","metrics","stacked","statistics","tracking"]},{"name":"mode_comment","tags":["bubble","chat","comment","communicate","feedback","message","mode comment","speech"]},{"name":"schedule_send","tags":["calendar","clock","date","email","letter","mail","remember","schedule","send","share","time"]},{"name":"bluetooth","tags":["bluetooth","cast","connect","connection","device","paring","streaming","symbol","wireless"]},{"name":"graphic_eq","tags":["audio","eq","equalizer","graphic","music","recording","sound","voice"]},{"name":"markunread","tags":["email","envelop","letter","mail","markunread","message","send","unread"]},{"name":"alarm_on","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","time","timer","watch"]},{"name":"local_gas_station","tags":["auto","car","gas","local","oil","station","vehicle"]},{"name":"person_add_alt_1","tags":[]},{"name":"maximize","tags":["app","application","components","design","interface","line","maximize","screen","shape","site","ui","ux","web","website"]},{"name":"bookmark_add","tags":["+","add","bookmark","favorite","plus","remember","ribbon","save","symbol"]},{"name":"dvr","tags":["Android","OS","audio","chrome","computer","desktop","device","display","dvr","electronic","hardware","iOS","list","mac","monitor","record","recorder","screen","tv","video","web","window"]},{"name":"do_not_disturb_on","tags":["cancel","close","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","slash","stop"]},{"name":"train","tags":["automobile","car","cars","direction","maps","public","rail","subway","train","transportation","vehicle"]},{"name":"person_pin_circle","tags":["account","circle","destination","direction","face","human","location","maps","people","person","pin","place","profile","stop","user"]},{"name":"square_foot","tags":["construction","feet","foot","inches","length","measurement","ruler","school","set","square","tools"]},{"name":"more_time","tags":["+","add","clock","date","more","new","plus","schedule","symbol","time"]},{"name":"document_scanner","tags":["article","data","doc","document","drive","file","folder","folders","notes","page","paper","scan","scanner","sheet","slide","text","writing"]},{"name":"thumbs_up_down","tags":["dislike","down","favorite","fingers","gesture","hands","like","rate","rating","thumbs","up"]},{"name":"settings_ethernet","tags":["arrows","computer","connect","connection","connectivity","dots","ethernet","internet","network","settings","wifi"]},{"name":"sort_by_alpha","tags":["alphabet","alphabetize","az","by alpha","character","font","letter","list","order","organize","sort","symbol","text","type"]},{"name":"theaters","tags":["film","movie","movies","show","showtimes","theater","theaters","watch"]},{"name":"cloud_done","tags":["app","application","approve","backup","check","cloud","complete","connection","done","drive","files","folders","internet","mark","network","ok","select","sky","storage","tick","upload","validate","verified","yes"]},{"name":"local_parking","tags":["alphabet","auto","car","character","font","garage","letter","local","park","parking","symbol","text","type","vehicle"]},{"name":"view_agenda","tags":["agenda","cards","design","format","grid","layout","stacked","view","website"]},{"name":"mark_email_unread","tags":["check","circle","email","envelop","letter","mail","mark","message","note","notification","send","unread"]},{"name":"local_florist","tags":["florist","flower","local","shop"]},{"name":"connect_without_contact","tags":["communicating","connect","contact","distance","people","signal","social","socialize","without"]},{"name":"thumb_down_off_alt","tags":["disabled","dislike","down","enabled","favorite","filled","fingers","gesture","hand","hands","like","off","offline","on","rank","ranking","rate","rating","slash","thumb"]},{"name":"sentiment_neutral","tags":["emotionless","emotions","expressions","face","feelings","fine","indifference","mood","neutral","okay","person","sentiment","survey"]},{"name":"call_end","tags":["call","cell","contact","device","end","hardware","mobile","phone","telephone"]},{"name":"subdirectory_arrow_right","tags":["arrow","directory","down","navigation","right","sub","subdirectory"]},{"name":"diamond","tags":["diamond","fashion","gems","jewelry","logo","retail","valuable","valuables"]},{"name":"podcasts","tags":["broadcast","casting","network","podcasts","signal","transmitting","wireless"]},{"name":"monitor_heart","tags":["baseline","device","ecc","ecg","fitness","health","heart","medical","monitor","track"]},{"name":"all_inclusive","tags":["all","endless","forever","inclusive","infinity","loop","mobius","neverending","strip","sustainability","sustainable"]},{"name":"wc","tags":["bathroom","closet","female","male","man","restroom","room","wash","water","wc","women"]},{"name":"grass","tags":["backyard","fodder","grass","ground","home","lawn","plant","turf","yard"]},{"name":"important_devices","tags":["Android","OS","desktop","devices","hardware","iOS","important","mobile","monitor","phone","star","tablet","web"]},{"name":"back_hand","tags":["back","fingers","gesture","hand","raised"]},{"name":"hiking","tags":["backpacking","bag","climbing","duffle","hiking","mountain","social","sports","stick","trail","travel","walking"]},{"name":"masks","tags":["air","cover","covid","face","hospital","masks","medical","pollution","protection","respirator","sick","social"]},{"name":"waving_hand","tags":["bye","fingers","gesture","goodbye","greetings","hand","hello","palm","wave","waving"]},{"name":"architecture","tags":["architecture","art","compass","design","draw","drawing","engineering","geometric","tool"]},{"name":"local_post_office","tags":["delivery","email","envelop","letter","local","mail","message","office","package","parcel","post","postal","send","stamp"]},{"name":"functions","tags":["average","calculate","count","custom","doc","edit","editing","editor","functions","math","sheet","spreadsheet","style","sum","text","type","writing"]},{"name":"directions","tags":["arrow","directions","maps","right","route","sign","traffic"]},{"name":"money","tags":["100","bill","card","cash","coin","commerce","cost","credit","currency","digit","dollars","finance","money","number","online","pay","payment","price","shopping","symbol"]},{"name":"unpublished","tags":["approve","check","circle","complete","disabled","done","enabled","mark","off","ok","on","select","slash","tick","unpublished","validate","verified","yes"]},{"name":"notifications_off","tags":["active","alarm","alert","bell","chime","disabled","enabled","notifications","notify","off","offline","on","reminder","ring","slash","sound"]},{"name":"airport_shuttle","tags":["airport","automobile","car","cars","commercial","delivery","direction","maps","mini","public","shuttle","transport","transportation","travel","truck","van","vehicle"]},{"name":"insert_link","tags":["add","attach","clip","file","insert","link","mail","media"]},{"name":"thumb_down_alt","tags":["bad","decline","disapprove","dislike","down","feedback","hate","negative","no","reject","social","thumb","veto","vote"]},{"name":"two_wheeler","tags":["automobile","bike","car","cars","direction","maps","motorcycle","public","scooter","sport","transportation","travel","two wheeler","vehicle"]},{"name":"nightlight","tags":["dark","disturb","mode","moon","night","nightlight","sleep"]},{"name":"mic_none","tags":["hear","hearing","mic","microphone","noise","none","record","sound","voice"]},{"name":"keyboard_double_arrow_down","tags":["arrow","arrows","direction","double","down","multiple","navigation"]},{"name":"invert_colors","tags":["colors","drop","droplet","edit","editing","hue","invert","inverted","palette","tone","water"]},{"name":"clear_all","tags":["all","clear","doc","document","format","lines","list"]},{"name":"mouse","tags":["click","computer","cursor","device","hardware","mouse","wireless"]},{"name":"mode_edit_outline","tags":["compose","create","draft","draw","edit","mode","outline","pen","pencil","write"]},{"name":"open_in_browser","tags":["arrow","browser","in","open","site","up","web","website","window"]},{"name":"insert_invitation","tags":["calendar","date","day","event","insert","invitation","mark","month","range","remember","reminder","today","week"]},{"name":"fast_rewind","tags":["back","control","fast","media","music","play","rewind","speed","time","tv","video"]},{"name":"opacity","tags":["color","drop","droplet","hue","invert","inverted","opacity","palette","tone","water"]},{"name":"video_camera_front","tags":["account","camera","face","front","human","image","people","person","photo","photography","picture","profile","user","video"]},{"name":"commute","tags":["automobile","car","commute","direction","maps","public","train","transportation","trip","vehicle"]},{"name":"addchart","tags":["+","addchart","analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","new","plus","statistics","symbol","tracking"]},{"name":"no_accounts","tags":["account","accounts","avatar","disabled","enabled","face","human","no","off","offline","on","people","person","profile","slash","thumbnail","unavailable","unidentifiable","unknown","user"]},{"name":"coffee","tags":["beverage","coffee","cup","drink","mug","plate","set","tea"]},{"name":"luggage","tags":["airport","bag","baggage","carry","flight","hotel","luggage","on","suitcase","travel","trip"]},{"name":"workspaces","tags":["circles","collaboration","dot","filled","group","outline","space","team","work","workspaces"]},{"name":"child_care","tags":["babies","baby","care","child","children","face","infant","kids","newborn","toddler","young"]},{"name":"sports_score","tags":["destination","flag","goal","score","sports"]},{"name":"library_music","tags":["add","album","collection","library","music","song","sounds"]},{"name":"history_toggle_off","tags":["clock","date","history","off","schedule","time","toggle"]},{"name":"system_update_alt","tags":["arrow","down","download","export","system","update"]},{"name":"access_time","tags":[]},{"name":"rotate_right","tags":["around","arrow","direction","inprogress","load","loading refresh","renew","right","rotate","turn"]},{"name":"color_lens","tags":["art","color","lens","paint","pallet"]},{"name":"grid_on","tags":["collage","disabled","enabled","grid","image","layout","off","on","slash","view"]},{"name":"crop_free","tags":["adjust","adjustments","crop","edit","editing","focus","frame","free","image","photo","photos","settings","size","zoom"]},{"name":"cloud_queue","tags":["cloud","connection","internet","network","queue","sky","upload"]},{"name":"keyboard_voice","tags":["keyboard","mic","microphone","noise","record","recorder","speaker","voice"]},{"name":"format_align_left","tags":["align","alignment","doc","edit","editing","editor","format","left","sheet","spreadsheet","text","type","writing"]},{"name":"view_week","tags":["bars","columns","design","format","grid","layout","view","website","week"]},{"name":"real_estate_agent","tags":["agent","architecture","broker","estate","hand","home","house","loan","mortgage","property","real","residence","residential","sales","social"]},{"name":"horizontal_rule","tags":["gmail","horizontal","line","novitas","rule"]},{"name":"topic","tags":["data","doc","document","drive","file","folder","sheet","slide","storage","topic"]},{"name":"shower","tags":["bath","bathroom","closet","home","house","place","plumbing","room","shower","sprinkler","wash","water","wc"]},{"name":"format_italic","tags":["alphabet","character","doc","edit","editing","editor","font","format","italic","letter","sheet","spreadsheet","style","symbol","text","type","writing"]},{"name":"traffic","tags":["direction","light","maps","signal","street","traffic"]},{"name":"add_business","tags":["+","add","bill","building","business","card","cash","coin","commerce","company","credit","currency","dollars","market","money","new","online","pay","payment","plus","shop","shopping","store","storefront","symbol"]},{"name":"electrical_services","tags":["charge","cord","electric","electrical","plug","power","services","wire"]},{"name":"timelapse","tags":["duration","motion","photo","time","timelapse","timer","video"]},{"name":"youtube_searched_for","tags":["arrow","back","backwards","find","glass","history","inprogress","load","loading","look","magnify","magnifying","refresh","renew","restore","reverse","rotate","search","see","youtube"]},{"name":"front_hand","tags":["fingers","front","gesture","hand","hello","palm","stop"]},{"name":"yard","tags":["backyard","flower","garden","home","house","nature","pettle","plants","yard"]},{"name":"tour","tags":["destination","flag","places","tour","travel","visit"]},{"name":"factory","tags":["factory","industry","manufacturing","warehouse"]},{"name":"developer_board","tags":["board","chip","computer","developer","development","hardware","microchip","processor"]},{"name":"more","tags":["3","archive","bookmark","dots","etc","favorite","indent","label","more","remember","save","stamp","sticker","tab","tag","three"]},{"name":"star_purple500","tags":["500","best","bookmark","favorite","highlight","purple","ranking","rate","rating","save","star","toggle"]},{"name":"format_color_fill","tags":["bucket","color","doc","edit","editing","editor","fill","format","paint","sheet","spreadsheet","style","text","type","writing"]},{"name":"beach_access","tags":["access","beach","places","summer","sunny","umbrella"]},{"name":"local_bar","tags":["alcohol","bar","bottle","club","cocktail","drink","food","liquor","local","wine"]},{"name":"add_link","tags":["add","attach","clip","link","new","plus","symbol"]},{"name":"landscape","tags":["image","landscape","mountain","mountains","nature","photo","photography","picture"]},{"name":"slideshow","tags":["movie","photos","play","slideshow","square","video","view"]},{"name":"stream","tags":["cast","connected","feed","live","network","signal","stream","wireless"]},{"name":"videocam_off","tags":["cam","camera","conference","disabled","enabled","film","filming","hardware","image","motion","off","offline","on","picture","slash","video","videography"]},{"name":"directions_boat","tags":["automobile","boat","car","cars","direction","directions","ferry","maps","public","transportation","vehicle"]},{"name":"download_done","tags":["arrow","arrows","check","done","down","download","downloads","drive","install","installed","ok","tick","upload"]},{"name":"volume_down","tags":["audio","control","down","music","sound","speaker","tv","volume"]},{"name":"alt_route","tags":["alt","alternate","alternative","arrows","direction","maps","navigation","options","other","route","routes","split","symbol"]},{"name":"mood_bad","tags":["bad","disappointment","dislike","emoji","emotions","expressions","face","feelings","mood","person","rating","social","survey","unhappiness","unhappy","unpleased","unsmile","unsmiling"]},{"name":"vaccines","tags":["aid","covid","doctor","drug","emergency","hospital","immunity","injection","medical","medication","medicine","needle","pharmacy","sick","syringe","vaccination","vaccines","vial"]},{"name":"dialpad","tags":["buttons","call","contact","device","dial","dialpad","dots","mobile","numbers","pad","phone"]},{"name":"route","tags":["directions","maps","path","route","sign","traffic"]},{"name":"hide_source","tags":["circle","disabled","enabled","hide","off","offline","on","shape","slash","source"]},{"name":"bookmark_added","tags":["added","approve","bookmark","check","complete","done","favorite","mark","ok","remember","save","select","tick","validate","verified","yes"]},{"name":"mark_as_unread","tags":["as","envelop","letter","mail","mark","post","postal","read","receive","send","unread"]},{"name":"plagiarism","tags":["doc","document","find","glass","look","magnifying","page","paper","plagiarism","search","see"]},{"name":"turned_in","tags":["archive","bookmark","favorite","in","label","library","read","reading","remember","ribbon","save","tag","turned"]},{"name":"settings_input_antenna","tags":["airplay","antenna","arrows","cast","computer","connect","connection","connectivity","dots","input","internet","network","screencast","settings","stream","wifi","wireless"]},{"name":"shop","tags":["bag","bill","buy","card","cart","cash","coin","commerce","credit","currency","dollars","google","money","online","pay","payment","play","shop","shopping","store"]},{"name":"pool","tags":["athlete","athletic","beach","body","entertainment","exercise","hobby","human","ocean","people","person","places","pool","sea","sports","swim","swimming","water"]},{"name":"search_off","tags":["cancel","close","disabled","enabled","find","glass","look","magnify","magnifying","off","on","search","see","slash","stop","x"]},{"name":"approval","tags":["apply","approval","approvals","approve","certificate","certification","disapproval","drive","file","impression","ink","mark","postage","stamp"]},{"name":"currency_rupee","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","rupee","shopping","symbol"]},{"name":"power","tags":["charge","cord","electric","electrical","outlet","plug","power"]},{"name":"collections_bookmark","tags":["album","archive","bookmark","collections","favorite","gallery","label","library","read","reading","remember","ribbon","save","stack","tag"]},{"name":"not_started","tags":["circle","media","not","pause","play","started","video"]},{"name":"pedal_bike","tags":["automobile","bicycle","bike","car","cars","direction","human","maps","pedal","public","route","scooter","transportation","vehicle","vespa"]},{"name":"water","tags":["aqua","beach","lake","ocean","river","water","waves","weather"]},{"name":"router","tags":["box","cable","connection","hardware","internet","network","router","signal","wifi"]},{"name":"flight_land","tags":["airport","arrival","arriving","flight","fly","land","landing","plane","transportation","travel"]},{"name":"shopping_cart_checkout","tags":["arrow","cart","cash","checkout","coin","commerce","currency","dollars","money","online","pay","payment","right","shopping"]},{"name":"agriculture","tags":["agriculture","automobile","car","cars","cultivation","farm","harvest","maps","tractor","transport","travel","truck","vehicle"]},{"name":"where_to_vote","tags":["approve","ballot","check","complete","destination","direction","done","location","maps","mark","ok","pin","place","poll","select","stop","tick","to","validate election","verified","vote","where","yes"]},{"name":"beenhere","tags":["approve","archive","beenhere","bookmark","check","complete","done","favorite","label","library","mark","ok","read","reading","remember","ribbon","save","select","tag","tick","validate","verified","yes"]},{"name":"add_comment","tags":["+","add","bubble","chat","comment","communicate","feedback","message","new","plus","speech","symbol"]},{"name":"copy_all","tags":["all","content","copy","cut","doc","document","file","multiple","page","paper","past"]},{"name":"dynamic_feed","tags":["'mail_outline'","'markunread'. Keep 'mail' and remove others.","Duplicate of 'email'"]},{"name":"videogame_asset","tags":["asset","console","controller","device","game","gamepad","gaming","playstation","video"]},{"name":"move_to_inbox","tags":["archive","arrow","down","email","envelop","inbox","incoming","letter","mail","message","move to","send"]},{"name":"crop_square","tags":["adjust","adjustments","app","application","area","components","crop","design","edit","editing","expand","frame","image","images","interface","open","photo","photos","rectangle","screen","settings","shape","shapes","site","size","square","ui","ux","web","website","window"]},{"name":"recent_actors","tags":["account","actors","avatar","card","cards","carousel","face","human","layers","list","people","person","profile","recent","thumbnail","user"]},{"name":"emoji_nature","tags":["animal","bee","bug","daisy","emoji","flower","insect","ladybug","nature","petals","spring","summer"]},{"name":"cloud_off","tags":["app","application","backup","cloud","connection","disabled","drive","enabled","files","folders","internet","network","off","offline","on","sky","slash","storage","upload"]},{"name":"panorama_fish_eye","tags":["angle","circle","eye","fish","image","panorama","photo","photography","picture","wide"]},{"name":"lens","tags":["circle","full","geometry","lens","moon"]},{"name":"360","tags":["360","arrow","av","camera","direction","rotate","rotation","vr"]},{"name":"share_location","tags":["destination","direction","gps","location","maps","pin","place","share","stop","tracking"]},{"name":"assignment_late","tags":["!","alert","assignment","attention","caution","clipboard","danger","doc","document","error","exclamation","important","late","mark","notification","symbol","warning"]},{"name":"switch_account","tags":["account","choices","face","human","multiple","options","people","person","profile","social","switch","user"]},{"name":"looks_two","tags":["2","digit","looks","numbers","square","symbol"]},{"name":"do_not_disturb","tags":["cancel","close","denied","deny","disturb","do","remove","silence","stop"]},{"name":"donut_small","tags":["analytics","chart","data","diagram","donut","graph","infographic","inprogress","measure","metrics","pie","small","statistics","tracking"]},{"name":"saved_search","tags":["find","glass","important","look","magnify","magnifying","marked","saved","search","see","star"]},{"name":"contactless","tags":["bluetooth","cash","connect","connection","connectivity","contact","contactless","credit","device","finance","pay","payment","signal","transaction","wifi","wireless"]},{"name":"highlight_alt","tags":["alt","arrow","box","click","cursor","draw","focus","highlight","pointer","select","selection","target"]},{"name":"assignment_return","tags":["arrow","assignment","back","clipboard","doc","document","left","retun"]},{"name":"kitchen","tags":["appliance","cold","food","fridge","home","house","ice","kitchen","places","refrigerator","storage"]},{"name":"warehouse","tags":["garage","industry","manufacturing","storage","warehouse"]},{"name":"liquor","tags":["alcohol","bar","bottle","club","cocktail","drink","food","liquor","party","store","wine"]},{"name":"gpp_maybe","tags":["!","alert","attention","caution","certified","danger","error","exclamation","gpp","important","mark","maybe","notification","privacy","private","protect","protection","security","shield","sim","symbol","verified","warning"]},{"name":"settings_input_component","tags":["audio","av","cable","cables","component","connect","connection","connectivity","input","internet","plug","points","settings","video","wifi"]},{"name":"waves","tags":["beach","lake","ocean","pool","river","sea","swim","water","wave","waves"]},{"name":"hotel_class","tags":["achievement","bookmark","class","favorite","highlight","hotel","important","marked","rank","ranking","rate","rating","reward","save","saved","shape","special","star"]},{"name":"web_asset","tags":["-website","app","application desktop","asset","browser","design","download","image","interface","internet","layout","screen","site","ui","ux","video","web","website","window","www"]},{"name":"view_carousel","tags":["cards","carousel","design","format","grid","layout","view","website"]},{"name":"anchor","tags":["anchor","google","logo"]},{"name":"filter_alt_off","tags":["alt","disabled","edit","filter","funnel","off","offline","options","refine","sift","slash"]},{"name":"balance","tags":["balance","equal","equity","impartiality","justice","parity","stability. equilibrium","steadiness","symmetry"]},{"name":"view_quilt","tags":["design","format","grid","layout","quilt","square","squares","stacked","view","website"]},{"name":"library_add_check","tags":["add","approve","check","collection","complete","done","layers","library","mark","multiple","music","ok","select","stacked","tick","validate","verified","video","yes"]},{"name":"queue_music","tags":["collection","list","music","playlist","queue"]},{"name":"casino","tags":["casino","dice","dots","entertainment","gamble","gambling","game","games","luck","places"]},{"name":"hearing","tags":["accessibility","accessible","aid","ear","handicap","hearing","help","impaired","listen","sound","volume"]},{"name":"phone_enabled","tags":["call","cell","contact","device","enabled","hardware","mobile","phone","telephone"]},{"name":"linear_scale","tags":["app","application","components","design","interface","layout","linear","measure","menu","scale","screen","site","slider","ui","ux","web","website","window"]},{"name":"holiday_village","tags":["architecture","beach","camping","cottage","estate","holiday","home","house","lake","lodge","maps","place","real","residence","residential","stay","traveling","vacation","village"]},{"name":"turned_in_not","tags":["archive","bookmark","favorite","in","label","library","not","read","reading","remember","ribbon","save","tag","turned"]},{"name":"sync_problem","tags":["!","360","alert","around","arrow","arrows","attention","caution","danger","direction","error","exclamation","important","inprogress","load","loading refresh","mark","notification","problem","renew","rotate","symbol","sync","turn","warning"]},{"name":"start","tags":["arrow","keyboard","next","right","start"]},{"name":"all_inbox","tags":["Inbox","all","delivered","delivery","email","mail","message","send"]},{"name":"mediation","tags":["arrow","arrows","direction","dots","mediation","right"]},{"name":"edit_off","tags":["compose","create","disabled","draft","edit","editing","enabled","input","new","off","offline","on","pen","pencil","slash","write","writing"]},{"name":"emergency","tags":["asterisk","clinic","emergency","health","hospital","maps","medical","symbol"]},{"name":"settings_remote","tags":["bluetooth","connection","connectivity","device","remote","settings","signal","wifi","wireless"]},{"name":"drive_file_move","tags":["arrow","data","doc","document","drive","file","folder","move","right","sheet","slide","storage"]},{"name":"fit_screen","tags":["enlarge","fit","format","layout","reduce","scale","screen","size"]},{"name":"hourglass_full","tags":["countdown","full","hourglass","loading","minutes","time","wait","waiting"]},{"name":"nights_stay","tags":["climate","cloud","crescent","dark","lunar","mode","moon","nights","phases","silence","silent","sky","stay","time","weather"]},{"name":"pause_circle_filled","tags":["circle","control","controls","filled","media","music","pause","video"]},{"name":"catching_pokemon","tags":["catching","go","pokemon","pokestop","travel"]},{"name":"king_bed","tags":["bed","bedroom","double","furniture","home","hotel","house","king","night","pillows","queen","rest","room","sleep"]},{"name":"flaky","tags":["approve","check","close","complete","contrast","done","exit","flaky","mark","no","ok","options","select","stop","tick","verified","x","yes"]},{"name":"format_size","tags":["alphabet","character","color","doc","edit","editing","editor","fill","font","format","letter","paint","sheet","size","spreadsheet","style","symbol","text","type","writing"]},{"name":"interests","tags":["circle","heart","interests","shapes","social","square","triangle"]},{"name":"stacked_line_chart","tags":["analytics","chart","data","diagram","graph","infographic","line","measure","metrics","stacked","statistics","tracking"]},{"name":"unarchive","tags":["archive","arrow","inbox","mail","store","unarchive","undo","up"]},{"name":"subtitles","tags":["accessible","caption","cc","character","closed","decoder","language","media","movies","subtitle","subtitles","tv"]},{"name":"toll","tags":["bill","booth","car","card","cash","coin","commerce","credit","currency","dollars","highway","money","online","pay","payment","ticket","toll"]},{"name":"keyboard_double_arrow_up","tags":["arrow","arrows","direction","double","multiple","navigation","up"]},{"name":"time_to_leave","tags":["automobile","car","cars","destination","direction","drive","estimate","eta","maps","public","transportation","travel","trip","vehicle"]},{"name":"location_searching","tags":["destination","direction","location","maps","pin","place","pointer","searching","stop","tracking"]},{"name":"cable","tags":["cable","connect","connection","device","electronics","usb","wire"]},{"name":"moving","tags":["arrow","direction","moving","navigation","travel","up"]},{"name":"remove_shopping_cart","tags":["card","cart","cash","checkout","coin","commerce","credit","currency","disabled","dollars","enabled","off","on","online","pay","payment","remove","shopping","slash","tick"]},{"name":"cast_for_education","tags":["Android","OS","airplay","cast","chrome","connect","desktop","device","display","education","for","hardware","iOS","learning","lessons teaching","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"fiber_new","tags":["alphabet","character","fiber","font","letter","network","new","symbol","text","type"]},{"name":"format_underlined","tags":["alphabet","character","doc","edit","editing","editor","font","format","letter","line","sheet","spreadsheet","style","symbol","text","type","under","underlined","writing"]},{"name":"pause_circle_outline","tags":["circle","control","controls","media","music","outline","pause","video"]},{"name":"mark_chat_unread","tags":["bubble","chat","circle","comment","communicate","mark","message","notification","speech","unread"]},{"name":"insert_comment","tags":["add","bubble","chat","comment","feedback","insert","message"]},{"name":"cameraswitch","tags":["arrows","camera","cameraswitch","flip","rotate","swap","switch","view"]},{"name":"rocket","tags":["rocket","space","spaceship"]},{"name":"local_airport","tags":["air","airplane","airport","flight","plane","transportation","travel","trip"]},{"name":"lock_clock","tags":["clock","date","lock","locked","password","privacy","private","protection","safety","schedule","secure","security","time"]},{"name":"device_hub","tags":["Android","OS","circle","computer","desktop","device","hardware","hub","iOS","laptop","mobile","monitor","phone","square","tablet","triangle","watch","wearable","web"]},{"name":"filter_vintage","tags":["edit","editing","effect","filter","flower","image","images","photography","picture","pictures","vintage"]},{"name":"sailing","tags":["boat","entertainment","fishing","hobby","ocean","sailboat","sailing","sea","social sports","travel","water"]},{"name":"roofing","tags":["architecture","building","chimney","construction","estate","home","house","real","residence","residential","roof","roofing","service","shelter"]},{"name":"settings_voice","tags":["mic","microphone","record","recorder","settings","speaker","voice"]},{"name":"swap_horizontal_circle","tags":["arrow","arrows","back","circle","forward","horizontal","swap"]},{"name":"add_location_alt","tags":["+","add","alt","destination","direction","location","maps","new","pin","place","plus","stop","symbol"]},{"name":"room_service","tags":["alert","bell","delivery","hotel","notify","room","service"]},{"name":"content_paste_search","tags":["clipboard","content","doc","document","file","find","paste","search","trace","track"]},{"name":"reply_all","tags":["all","arrow","backward","group","left","mail","message","multiple","reply","send","share"]},{"name":"compost","tags":["bio","compost","compostable","decomposable","decompose","eco","green","leaf","leafs","nature","organic","plant","recycle","sustainability","sustainable"]},{"name":"bubble_chart","tags":["analytics","bar","bars","bubble","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"compare","tags":["adjust","adjustment","compare","edit","editing","edits","enhance","fix","image","images","photo","photography","photos","scan","settings"]},{"name":"money_off","tags":["bill","card","cart","cash","coin","commerce","credit","currency","disabled","dollars","enabled","money","off","on","online","pay","payment","shopping","slash","symbol"]},{"name":"file_open","tags":["arrow","doc","document","drive","file","left","open","page","paper"]},{"name":"filter_drama","tags":["cloud","drama","edit","editing","effect","filter","image","photo","photography","picture","sky camera"]},{"name":"shortcut","tags":["arrow","direction","forward","right","shortcut"]},{"name":"view_sidebar","tags":["design","format","grid","layout","sidebar","view","web"]},{"name":"looks_3","tags":["3","digit","looks","numbers","square","symbol"]},{"name":"note","tags":["bookmark","message","note","paper"]},{"name":"vertical_align_bottom","tags":["align","alignment","arrow","bottom","doc","down","edit","editing","editor","sheet","spreadsheet","text","type","vertical","writing"]},{"name":"3p","tags":["3","3p","account","avatar","bubble","chat","comment","communicate","face","human","message","party","people","person","profile","speech","user"]},{"name":"online_prediction","tags":["bulb","connection","idea","light","network","online","prediction","signal","wireless"]},{"name":"cancel_presentation","tags":["cancel","close","device","exit","no","present","presentation","quit","remove","screen","slide","stop","website","window","x"]},{"name":"select_all","tags":["all","select","selection","square","tool"]},{"name":"event_seat","tags":["assign","assigned","chair","event","furniture","reservation","row","seat","section","sit"]},{"name":"window","tags":["close","glass","grid","home","house","interior","layout","outside","window"]},{"name":"av_timer","tags":["av","clock","countdown","duration","minutes","seconds","time","timer","watch"]},{"name":"album","tags":["album","artist","audio","bvb","cd","computer","data","disk","file","music","record","sound","storage","track"]},{"name":"local_dining","tags":["dining","eat","food","fork","knife","local","meal","restaurant","spoon"]},{"name":"headset","tags":["accessory","audio","device","ear","earphone","headphones","headset","listen","music","sound"]},{"name":"maps_ugc","tags":["+","add","bubble","comment","communicate","feedback","maps","message","new","plus","speech","symbol","ugc"]},{"name":"airplane_ticket","tags":["airplane","airport","boarding","flight","fly","maps","pass","ticket","transportation","travel"]},{"name":"vertical_split","tags":["design","format","grid","layout","paragraph","split","text","vertical","website","writing"]},{"name":"sports_basketball","tags":["athlete","athletic","ball","basketball","entertainment","exercise","game","hobby","social","sports"]},{"name":"next_plan","tags":["arrow","circle","next","plan","right"]},{"name":"drive_folder_upload","tags":["arrow","data","doc","document","drive","file","folder","sheet","slide","storage","up","upload"]},{"name":"pregnant_woman","tags":["baby","birth","body","female","human","lady","maternity","mom","mother","people","person","pregnant","women"]},{"name":"wallpaper","tags":["background","image","landscape","photo","photography","picture","wallpaper"]},{"name":"image_search","tags":["find","glass","image","landscape","look","magnify","magnifying","mountain","mountains","photo","photography","picture","search","see"]},{"name":"data_exploration","tags":["analytics","arrow","chart","data","diagram","exploration","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"device_thermostat","tags":["celsius","device","fahrenheit","meter","temp","temperature","thermometer","thermostat"]},{"name":"healing","tags":["bandage","edit","editing","emergency","fix","healing","hospital","image","medicine"]},{"name":"laptop_mac","tags":["Android","OS","chrome","device","display","hardware","iOS","laptop","mac","monitor","screen","web","window"]},{"name":"height","tags":["arrow","color","doc","down","edit","editing","editor","fill","format","height","paint","sheet","spreadsheet","style","text","type","up","writing"]},{"name":"restore_from_trash","tags":["arrow","back","backwards","clock","date","history","refresh","renew","restore","reverse","rotate","schedule","time","turn"]},{"name":"radar","tags":["detect","military","near","network","position","radar","scan"]},{"name":"auto_awesome_motion","tags":["adjust","auto","awesome","collage","edit","editing","enhance","image","motion","photo","video"]},{"name":"file_download_done","tags":["arrow","arrows","check","done","down","download","downloads","drive","file","install","installed","tick","upload"]},{"name":"notification_add","tags":["+","active","add","alarm","alert","bell","chime","notification","notifications","notify","plus","reminder","ring","sound","symbol"]},{"name":"call_made","tags":["arrow","call","device","made","mobile"]},{"name":"camera_enhance","tags":["ai","artificial","automatic","automation","camera","custom","enhance","genai","important","intelligence","lens","magic","photo","photography","picture","quality","smart","spark","sparkle","special","star"]},{"name":"rotate_left","tags":["around","arrow","direction","inprogress","left","load","loading refresh","renew","rotate","turn"]},{"name":"local_taxi","tags":["automobile","cab","call","car","cars","direction","local","lyft","maps","public","taxi","transportation","uber","vehicle","yellow"]},{"name":"star_border_purple500","tags":["500","best","bookmark","border","favorite","highlight","outline","purple","ranking","rate","rating","save","star","toggle"]},{"name":"gpp_bad","tags":["bad","cancel","certified","close","error","exit","gpp","no","privacy","private","protect","protection","remove","security","shield","sim","stop","verified","x"]},{"name":"playlist_play","tags":["arrow","collection","list","music","play","playlist"]},{"name":"cast","tags":["Android","OS","airplay","cast","chrome","connect","desktop","device","display","hardware","iOS","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"vertical_align_top","tags":["align","alignment","arrow","doc","edit","editing","editor","sheet","spreadsheet","text","top","type","up","vertical","writing"]},{"name":"ramen_dining","tags":["breakfast","dining","dinner","drink","fastfood","food","lunch","meal","noodles","ramen","restaurant"]},{"name":"data_usage","tags":["analytics","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking","usage"]},{"name":"markunread_mailbox","tags":["deliver","envelop","letter","mail","mailbox","markunread","post","postal","postbox","receive","send","unread"]},{"name":"terminal","tags":["application","code","emulator","program","software","terminal"]},{"name":"screen_share","tags":["Android","OS","arrow","cast","chrome","device","display","hardware","iOS","laptop","mac","mirror","monitor","screen","share","steam","streaming","web","window"]},{"name":"center_focus_strong","tags":["camera","center","focus","image","lens","photo","photography","strong","zoom"]},{"name":"queue","tags":["add","collection","layers","list","multiple","music","playlist","queue","stack","stream","video"]},{"name":"games","tags":["adjust","arrow","arrows","control","controller","direction","games","gaming","left","move","right"]},{"name":"low_priority","tags":["arrange","arrow","backward","bottom","list","low","move","order","priority"]},{"name":"dynamic_form","tags":["bolt","code","dynamic","electric","fast","form","lightning","lists","questionnaire","thunderbolt"]},{"name":"tab","tags":["browser","computer","document","documents","folder","internet","tab","tabs","web","website","window","windows"]},{"name":"lock_reset","tags":["around","inprogress","load","loading refresh","lock","locked","password","privacy","private","protection","renew","rotate","safety","secure","security","turn"]},{"name":"room_preferences","tags":["building","door","doorway","entrance","gear","home","house","interior","office","open","preferences","room","settings"]},{"name":"crop","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"monitor_weight","tags":["body","device","diet","health","monitor","scale","smart","weight"]},{"name":"trip_origin","tags":["circle","departure","origin","trip"]},{"name":"calendar_view_week","tags":["calendar","date","day","event","format","grid","layout","month","schedule","today","view","week"]},{"name":"signal_wifi_4_bar","tags":["4","bar","cell","cellular","data","internet","mobile","network","phone","signal","wifi","wireless"]},{"name":"blur_on","tags":["blur","disabled","dots","edit","editing","effect","enabled","enhance","filter","off","on","slash"]},{"name":"view_stream","tags":["design","format","grid","layout","lines","list","stacked","stream","view","website"]},{"name":"radio","tags":["antenna","audio","device","frequency","hardware","listen","media","music","player","radio","signal","tune"]},{"name":"hail","tags":["body","hail","human","people","person","pick","public","stop","taxi","transportation"]},{"name":"do_disturb_on","tags":["cancel","close","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","slash","stop"]},{"name":"sensor_door","tags":["alarm","security","security system"]},{"name":"wb_incandescent","tags":["balance","bright","edit","editing","incandescent","light","lighting","setting","settings","white","wp"]},{"name":"local_drink","tags":["cup","drink","drop","droplet","liquid","local","park","water"]},{"name":"accessible_forward","tags":["accessibility","accessible","body","forward","handicap","help","human","people","person","wheelchair"]},{"name":"replay_circle_filled","tags":["arrow","arrows","circle","control","controls","filled","music","refresh","renew","repeat","replay","video"]},{"name":"local_printshop","tags":["draft","fax","ink","local","machine","office","paper","print","printer","printshop","send"]},{"name":"local_laundry_service","tags":["cleaning","clothing","dry","dryer","hotel","laundry","local","service","washer"]},{"name":"vpn_lock","tags":["earth","globe","lock","locked","network","password","privacy","private","protection","safety","secure","security","virtual","vpn","world"]},{"name":"schema","tags":["analytics","chart","data","diagram","flow","graph","infographic","measure","metrics","schema","statistics","tracking"]},{"name":"request_page","tags":["data","doc","document","drive","file","folder","folders","page","paper","request","sheet","slide","writing"]},{"name":"token","tags":["badge","hexagon","mark","shield","sign","symbol"]},{"name":"branding_watermark","tags":["branding","components","copyright","design","emblem","format","identity","interface","layout","logo","screen","site","stamp","ui","ux","watermark","web","website","window"]},{"name":"theater_comedy","tags":["broadway","comedy","event","movie","musical","places","show","standup","theater","tour","watch"]},{"name":"text_format","tags":["alphabet","character","font","format","letter","square A","style","symbol","text","type"]},{"name":"directions_bus_filled","tags":["automobile","bus","car","cars","direction","directions","filled","maps","public","transportation","vehicle"]},{"name":"remove_done","tags":["approve","check","complete","disabled","done","enabled","finished","mark","multiple","off","ok","on","remove","select","slash","tick","yes"]},{"name":"sports_bar","tags":["alcohol","bar","beer","drink","liquor","pint","places","pub","sports"]},{"name":"watch","tags":["Android","OS","ar","clock","gadget","iOS","time","vr","watch","wearables","web","wristwatch"]},{"name":"add_to_drive","tags":["add","app","application","backup","cloud","drive","files","folders","gdrive","google","recovery","shortcut","storage"]},{"name":"format_align_center","tags":["align","alignment","center","doc","edit","editing","editor","format","sheet","spreadsheet","text","type","writing"]},{"name":"settings_power","tags":["info","information","off","on","power","save","settings","shutdown"]},{"name":"local_pizza","tags":["drink","fastfood","food","local","meal","pizza"]},{"name":"add_alert","tags":["+","active","add","alarm","alert","bell","chime","new","notifications","notify","plus","reminder","ring","sound","symbol"]},{"name":"smart_button","tags":["action","ai","artificial","automatic","automation","button","components","composer","custom","function","genai","intelligence","interface","magic","site","smart","spark","sparkle","special","star","stars","ui","ux","web","website"]},{"name":"flare","tags":["bright","edit","editing","effect","flare","image","images","light","photography","picture","pictures","sun"]},{"name":"developer_mode","tags":["Android","OS","bracket","cell","code","developer","development","device","engineer","hardware","iOS","mobile","mode","phone","tablet"]},{"name":"call_split","tags":["arrow","call","device","mobile","split"]},{"name":"free_breakfast","tags":["beverage","breakfast","cafe","coffee","cup","drink","free","mug","tea"]},{"name":"auto_delete","tags":["auto","bin","can","clock","date","delete","garbage","remove","schedule","time","trash"]},{"name":"sports_kabaddi","tags":["athlete","athletic","body","combat","entertainment","exercise","fighting","game","hobby","human","kabaddi","people","person","social","sports","wrestle","wrestling"]},{"name":"face_retouching_natural","tags":["ai","artificial","automatic","automation","custom","edit","editing","effect","emoji","emotion","face","faces","genai","image","intelligence","magic","natural","photo","photography","retouch","retouching","settings","smart","spark","sparkle","star","tag"]},{"name":"not_listed_location","tags":["?","assistance","destination","direction","help","info","information","listed","location","maps","not","pin","place","punctuation","question mark","stop","support","symbol"]},{"name":"wb_cloudy","tags":["balance","cloud","cloudy","edit","editing","white","wp"]},{"name":"sports","tags":["athlete","athletic","blowing","coach","entertainment","exercise","game","hobby","instrument","referee","social","sound","sports","warning","whistle"]},{"name":"emoji_symbols","tags":["ampersand","character","emoji","hieroglyph","music","note","percent","sign","symbols"]},{"name":"bathtub","tags":["bath","bathing","bathroom","bathtub","home","hotel","human","person","shower","travel","tub"]},{"name":"forward_10","tags":["10","arrow","control","controls","digit","fast","forward","music","number","play","seconds","symbol","video"]},{"name":"tablet_mac","tags":["Android","OS","device","hardware","iOS","ipad","mobile","tablet mac","web"]},{"name":"mode_night","tags":["dark","disturb","lunar","mode","moon","night","sleep"]},{"name":"broken_image","tags":["broken","corrupt","error","image","landscape","mountain","mountains","photo","photography","picture","torn"]},{"name":"escalator_warning","tags":["body","child","escalator","human","kid","parent","people","person","warning"]},{"name":"assistant","tags":["ai","artificial","assistant","automatic","automation","bubble","chat","comment","communicate","custom","feedback","genai","intelligence","magic","message","recommendation","smart","spark","sparkle","speech","star","suggestion","twinkle"]},{"name":"cases","tags":["bag","baggage","briefcase","business","case","cases","purse","suitcase"]},{"name":"wifi_tethering","tags":["cell","cellular","connection","data","internet","mobile","network","phone","scan","service","signal","speed","tethering","wifi","wireless"]},{"name":"reduce_capacity","tags":["arrow","body","capacity","covid","decrease","down","human","people","person","reduce","social"]},{"name":"colorize","tags":["color","colorize","dropper","extract","eye","picker","tool"]},{"name":"save_as","tags":["compose","create","data","disk","document","draft","drive","edit","editing","file","floppy","input","multimedia","pen","pencil","save","storage","write","writing"]},{"name":"card_travel","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","membership","miles","money","online","pay","payment","travel","trip"]},{"name":"emoji_food_beverage","tags":["beverage","coffee","cup","drink","emoji","mug","plate","set","tea"]},{"name":"font_download","tags":["A","alphabet","character","download","font","letter","square","symbol","text","type"]},{"name":"outbox","tags":["box","mail","outbox","send","sent"]},{"name":"battery_std","tags":["battery","cell","charge","mobile","plus","power","standard","std"]},{"name":"sick","tags":["covid","discomfort","emotions","expressions","face","feelings","fever","flu","ill","mood","pain","person","sick","survey","upset"]},{"name":"add_location","tags":["+","add","destination","direction","location","maps","new","pin","place","plus","stop","symbol"]},{"name":"try","tags":["bookmark","bubble","chat","comment","communicate","favorite","feedback","highlight","important","marked","message","save","saved","shape","special","speech","star","try"]},{"name":"discount","tags":[]},{"name":"man","tags":["boy","gender","male","man","social","symbol"]},{"name":"running_with_errors","tags":["!","alert","attention","caution","danger","duration","error","errors","exclamation","important","mark","notification","process","processing","running","symbol","time","warning","with"]},{"name":"diversity_3","tags":["committee","diverse","diversity","family","friends","group","groups","humans","network","people","persons","social","team"]},{"name":"filter_none","tags":["filter","multiple","none","square","stack"]},{"name":"cloud_sync","tags":["app","application","around","backup","cloud","connection","drive","files","folders","inprogress","internet","load","loading refresh","network","renew","rotate","sky","storage","turn","upload"]},{"name":"bloodtype","tags":["blood","bloodtype","donate","droplet","emergency","hospital","medicine","negative","positive","type","water"]},{"name":"dinner_dining","tags":["breakfast","dining","dinner","food","fork","lunch","meal","restaurant","spaghetti","utensils"]},{"name":"transfer_within_a_station","tags":["a","arrow","arrows","body","direction","human","left","maps","people","person","public","right","route","station","stop","transfer","transportation","vehicle","walk","within"]},{"name":"weekend","tags":["chair","couch","furniture","home","living","lounge","relax","room","weekend"]},{"name":"child_friendly","tags":["baby","care","carriage","child","children","friendly","infant","kid","newborn","stroller","toddler","young"]},{"name":"offline_pin","tags":["approve","check","checkmark","circle","complete","done","mark","offline","ok","pin","select","tick","validate","verified","yes"]},{"name":"replay_10","tags":["10","arrow","arrows","control","controls","digit","music","number","refresh","renew","repeat","replay","symbol","ten","video"]},{"name":"brightness_4","tags":["4","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"cruelty_free","tags":["animal","bunny","cruelty","eco","free","nature","rabbit","social","sustainability","sustainable","testing"]},{"name":"format_paint","tags":["brush","color","doc","edit","editing","editor","fill","format","paint","roller","sheet","spreadsheet","style","text","type","writing"]},{"name":"filter_center_focus","tags":["camera","center","dot","edit","filter","focus","image","photo","photography","picture"]},{"name":"area_chart","tags":["analytics","area","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"bakery_dining","tags":["bakery","bread","breakfast","brunch","croissant","dining","food"]},{"name":"emoji_transportation","tags":["architecture","automobile","building","car","cars","direction","emoji","estate","maps","place","public","real","residence","residential","shelter","transportation","travel","vehicle"]},{"name":"folder_special","tags":["bookmark","data","doc","document","drive","favorite","file","folder","highlight","important","marked","save","saved","shape","sheet","slide","special","star","storage"]},{"name":"door_front","tags":["closed","door","doorway","entrance","exit","front","home","house","way"]},{"name":"calendar_view_day","tags":["calendar","date","day","event","format","grid","layout","month","schedule","today","view","week"]},{"name":"legend_toggle","tags":["analytics","chart","data","diagram","graph","infographic","legend","measure","metrics","monitoring","stackdriver","statistics","toggle","tracking"]},{"name":"light","tags":["bulb","ceiling","hanging","inside","interior","lamp","light","lighting","pendent","room"]},{"name":"find_replace","tags":["around","arrows","find","glass","inprogress","load","loading refresh","look","magnify","magnifying","renew","replace","rotate","search","see"]},{"name":"crop_original","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","original","photo","photos","picture","settings","size"]},{"name":"rowing","tags":["activity","boat","body","canoe","human","people","person","row","rowing","sport","water"]},{"name":"enhanced_encryption","tags":["+","add","encryption","enhanced","lock","locked","new","password","plus","privacy","private","protection","safety","secure","security","symbol"]},{"name":"how_to_vote","tags":["ballot","election","how","poll","to","vote"]},{"name":"chrome_reader_mode","tags":["chrome","mode","read","reader","text"]},{"name":"auto_fix_normal","tags":["ai","artificial","auto","automatic","automation","custom","edit","erase","fix","genai","intelligence","magic","modify","smart","spark","sparkle","star","wand"]},{"name":"compress","tags":["arrow","arrows","collide","compress","pressure","push","together"]},{"name":"dehaze","tags":["adjust","dehaze","edit","editing","enhance","haze","image","lines","photo","photography","remove"]},{"name":"outlet","tags":["connect","connecter","electricity","outlet","plug","power"]},{"name":"desktop_mac","tags":["Android","OS","chrome","desktop","device","display","hardware","iOS","mac","monitor","screen","web","window"]},{"name":"nature_people","tags":["activity","body","forest","human","nature","outdoor","outside","park","people","person","tree","wilderness"]},{"name":"sports_tennis","tags":["athlete","athletic","ball","bat","entertainment","exercise","game","hobby","racket","social","sports","tennis"]},{"name":"forest","tags":["forest","jungle","nature","plantation","plants","trees","woodland"]},{"name":"upcoming","tags":["alarm","calendar","mail","message","notification","upcoming"]},{"name":"assignment_returned","tags":["arrow","assignment","clipboard","doc","document","down","returned"]},{"name":"cookie","tags":["biscuit","cookies","data","dessert","wafer"]},{"name":"fax","tags":["fax","machine","office","phone","send"]},{"name":"square","tags":["draw","four","shape quadrangle","sides","square"]},{"name":"density_medium","tags":["density","horizontal","lines","medium","rule","rules"]},{"name":"terrain","tags":["geography","landscape","mountain","terrain"]},{"name":"settings_brightness","tags":["brightness","dark","filter","light","mode","setting","settings"]},{"name":"attach_email","tags":["attach","attachment","clip","compose","email","envelop","letter","link","mail","message","send"]},{"name":"photo","tags":["image","mountain","mountains","photo","photography","picture"]},{"name":"http","tags":["alphabet","character","font","http","letter","symbol","text","transfer","type","url","website"]},{"name":"garage","tags":["automobile","automotive","car","cars","direction","garage","maps","transportation","travel","vehicle"]},{"name":"wine_bar","tags":["alcohol","bar","cocktail","cup","drink","glass","liquor","wine"]},{"name":"multiple_stop","tags":["arrows","directions","dots","left","maps","multiple","navigation","right","stop"]},{"name":"format_color_text","tags":["color","doc","edit","editing","editor","fill","format","paint","sheet","spreadsheet","style","text","type","writing"]},{"name":"gesture","tags":["drawing","finger","gesture","gestures","hand","motion"]},{"name":"heart_broken","tags":["break","broken","core","crush","health","heart","nucleus","split"]},{"name":"format_align_right","tags":["align","alignment","doc","edit","editing","editor","format","right","sheet","spreadsheet","text","type","writing"]},{"name":"transgender","tags":["female","gender","lgbt","male","neutral","social","symbol","transgender"]},{"name":"alarm_add","tags":["+","add","alarm","alert","bell","clock","countdown","date","new","notification","plus","schedule","symbol","time"]},{"name":"new_label","tags":["+","add","archive","bookmark","favorite","label","library","new","plus","read","reading","remember","ribbon","save","symbol","tag"]},{"name":"south_east","tags":["arrow","directional","down","east","maps","navigation","right","south"]},{"name":"backup_table","tags":["backup","drive","files folders","format","layout","stack","storage","table"]},{"name":"unsubscribe","tags":["cancel","close","email","envelop","letter","mail","message","newsletter","off","remove","send","subscribe","unsubscribe"]},{"name":"flash_off","tags":["bolt","disabled","electric","enabled","fast","flash","lightning","off","on","slash","thunderbolt"]},{"name":"elderly","tags":["body","cane","elderly","human","old","people","person","senior"]},{"name":"generating_tokens","tags":["access","ai","api","artificial","automatic","automation","coin","custom","genai","generating","intelligence","magic","smart","spark","sparkle","star","tokens"]},{"name":"spellcheck","tags":["a","alphabet","approve","character","check","font","letter","mark","ok","processor","select","spell","spellcheck","symbol","text","tick","type","word","write","yes"]},{"name":"auto_awesome_mosaic","tags":["adjust","auto","awesome","collage","edit","editing","enhance","image","mosaic","photo"]},{"name":"outdoor_grill","tags":["barbecue","bbq","charcoal","cooking","grill","home","house","outdoor","outside"]},{"name":"restore_page","tags":["arrow","data","doc","file","page","paper","refresh","restore","rotate","sheet","storage"]},{"name":"foundation","tags":["architecture","base","basis","building","construction","estate","foundation","home","house","real","residential"]},{"name":"credit_card_off","tags":["card","charge","commerce","cost","credit","disabled","enabled","finance","money","off","online","pay","payment","slash"]},{"name":"scatter_plot","tags":["analytics","bar","bars","chart","circles","data","diagram","dot","graph","infographic","measure","metrics","plot","scatter","statistics","tracking"]},{"name":"signal_cellular_4_bar","tags":["4","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"add_moderator","tags":["+","add","certified","moderator","new","plus","privacy","private","protect","protection","security","shield","symbol","verified"]},{"name":"play_for_work","tags":["arrow","circle","down","google","half","play","work"]},{"name":"add_card","tags":["+","add","bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","new","online","pay","payment","plus","price","shopping","symbol"]},{"name":"app_settings_alt","tags":["Android","OS","app","applications","cell","device","gear","hardware","iOS","mobile","phone","setting","settings","tablet"]},{"name":"keyboard_tab","tags":["arrow","keyboard","left","next","right","tab"]},{"name":"wifi_protected_setup","tags":["around","arrow","arrows","protected","rotate","setup","wifi"]},{"name":"deck","tags":["chairs","deck","home","house","outdoors","outside","patio","social","terrace","umbrella","yard"]},{"name":"takeout_dining","tags":["box","container","delivery","dining","food","meal","restaurant","takeout"]},{"name":"tag_faces","tags":["emoji","emotion","faces","happy","satisfied","smile","tag"]},{"name":"brightness_6","tags":["6","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"woman","tags":["female","gender","girl","lady","social","symbol","woman","women"]},{"name":"assistant_direction","tags":["assistant","destination","direction","location","maps","navigate","navigation","pin","place","right","stop"]},{"name":"brightness_5","tags":["5","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"social_distance","tags":["6","apart","body","distance","ft","human","people","person","social","space"]},{"name":"free_cancellation","tags":["approve","calendar","cancel","cancellation","check","complete","date","day","done","event","exit","free","mark","month","no","ok","remove","schedule","select","stop","tick","validate","verified","x","yes"]},{"name":"subdirectory_arrow_left","tags":["arrow","directory","down","left","navigation","sub","subdirectory"]},{"name":"laptop_chromebook","tags":["Android","OS","chrome","chromebook","device","display","hardware","iOS","laptop","mac chromebook","monitor","screen","web","window"]},{"name":"format_list_numbered_rtl","tags":["align","alignment","digit","doc","edit","editing","editor","format","list","notes","number","numbered","rtl","sheet","spreadsheet","symbol","text","type","writing"]},{"name":"store_mall_directory","tags":["directory","mall","store"]},{"name":"settings_overscan","tags":["arrows","expand","image","photo","picture","scan","settings"]},{"name":"icecream","tags":["cream","dessert","food","ice","icecream","snack"]},{"name":"details","tags":["details","edit","editing","enhance","image","photo","photography","sharpen","triangle"]},{"name":"add_reaction","tags":["+","add","emoji","emotions","expressions","face","feelings","glad","happiness","happy","icon","icons","insert","like","mood","new","person","pleased","plus","smile","smiling","social","survey","symbol"]},{"name":"follow_the_signs","tags":["arrow","body","directional","follow","human","people","person","right","signs","social","the"]},{"name":"attribution","tags":["attribute","attribution","body","copyright","copywriter","human","people","person"]},{"name":"food_bank","tags":["architecture","bank","building","charity","eat","estate","food","fork","house","knife","meal","place","real","residence","residential","shelter","utensils"]},{"name":"closed_caption","tags":["accessible","alphabet","caption","cc","character","closed","decoder","font","language","letter","media","movies","subtitle","subtitles","symbol","text","tv","type"]},{"name":"gif","tags":["alphabet","animated","animation","bitmap","character","font","format","gif","graphics","interchange","letter","symbol","text","type"]},{"name":"phonelink","tags":["Android","OS","chrome","computer","connect","desktop","device","hardware","iOS","link","mac","mobile","phone","phonelink","sync","tablet","web","windows"]},{"name":"grain","tags":["dots","edit","editing","effect","filter","grain","image","images","photography","picture","pictures"]},{"name":"personal_injury","tags":["accident","aid","arm","bandage","body","broke","cast","fracture","health","human","injury","medical","patient","people","person","personal","sling","social"]},{"name":"flip_camera_android","tags":["android","camera","center","edit","editing","flip","image","mobile","orientation","rotate","turn"]},{"name":"museum","tags":["architecture","attraction","building","estate","event","exhibition","explore","local","museum","places","real","see","shop","store","tour"]},{"name":"north_west","tags":["arrow","directional","left","maps","navigation","north","up","west"]},{"name":"gite","tags":["architecture","estate","gite","home","hostel","house","maps","place","real","residence","residential","stay","traveling"]},{"name":"highlight","tags":["color","doc","edit","editing","editor","emphasize","fill","flash","format","highlight","light","paint","sheet","spreadsheet","style","text","type","writing"]},{"name":"brightness_1","tags":["1","brightness","circle","control","crescent","level","moon","screen"]},{"name":"plus_one","tags":["1","add","digit","increase","number","one","plus","symbol"]},{"name":"villa","tags":["architecture","beach","estate","home","house","maps","place","real","residence","residential","traveling","vacation stay","villa"]},{"name":"fmd_bad","tags":["!","alert","attention","bad","caution","danger","destination","direction","error","exclamation","fmd","important","location","maps","mark","notification","pin","place","symbol","warning"]},{"name":"flashlight_on","tags":["disabled","enabled","flash","flashlight","light","off","on","slash"]},{"name":"flip","tags":["edit","editing","flip","image","orientation","scan scanning"]},{"name":"nightlife","tags":["alcohol","bar","bottle","club","cocktail","dance","drink","food","glass","liquor","music","nightlife","note","wine"]},{"name":"present_to_all","tags":["all","arrow","present","presentation","screen","share","site","slides","to","web","website"]},{"name":"do_disturb","tags":["cancel","close","denied","deny","disturb","do","remove","silence","stop"]},{"name":"outbound","tags":["arrow","circle","directional","outbound","right","up"]},{"name":"local_pharmacy","tags":["911","aid","cross","emergency","first","hospital","local","medicine","pharmacy","places"]},{"name":"splitscreen","tags":["column","grid","layout","multitasking","row","screen","split","splitscreen","two"]},{"name":"waterfall_chart","tags":["analytics","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking","waterfall"]},{"name":"switch_left","tags":["arrows","directional","left","navigation","switch","toggle"]},{"name":"domain_verification","tags":["app","application desktop","approve","check","complete","design","domain","done","interface","internet","layout","mark","ok","screen","select","site","tick","ui","ux","validate","verification","verified","web","website","window","www","yes"]},{"name":"fireplace","tags":["chimney","fire","fireplace","flame","home","house","living","pit","place","room","warm","winter"]},{"name":"video_settings","tags":["change","details","gear","info","information","options","play","screen","service","setting","settings","video","window"]},{"name":"disabled_visible","tags":["cancel","close","disabled","exit","eye","no","on","quit","remove","reveal","see","show","stop","view","visibility","visible"]},{"name":"network_wifi","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"quickreply","tags":["bolt","bubble","chat","comment","communicate","fast","lightning","message","quick","quickreply","reply","speech","thunderbolt"]},{"name":"swap_vertical_circle","tags":["arrow","arrows","circle","down","swap","up","vertical"]},{"name":"format_align_justify","tags":["align","alignment","density","doc","edit","editing","editor","extra","format","justify","sheet","small","spreadsheet","text","type","writing"]},{"name":"settings_input_composite","tags":["component","composite","connection","connectivity","input","plug","points","settings"]},{"name":"loupe","tags":["+","add","details","focus","glass","loupe","magnifying","new","plus","symbol"]},{"name":"123","tags":["1","2","3","digit","number","symbol"]},{"name":"network_check","tags":["check","connect","connection","internet","meter","network","signal","speed","tick","wifi","wireless"]},{"name":"sms_failed","tags":["!","alert","attention","bubbles","caution","chat","communication","conversation","danger","error","exclamation","failed","feedback","important","mark","message","notification","service","sms","speech","symbol","warning"]},{"name":"cancel_schedule_send","tags":["cancel","email","mail","no","quit","remove","schedule","send","share","stop","x"]},{"name":"work_history","tags":["back","backwards","bag","baggage","briefcase","business","case","clock","date","history","job","pending","recent","schedule","suitcase","time","updates","work"]},{"name":"electric_bolt","tags":["bolt","electric","energy","fast","lightning","nest","thunderbolt"]},{"name":"view_day","tags":["cards","carousel","day","design","format","grid","layout","view","website"]},{"name":"night_shelter","tags":["architecture","bed","building","estate","homeless","house","night","place","real","shelter","sleep"]},{"name":"monitor","tags":["Android","OS","chrome","device","display","hardware","iOS","mac","monitor","screen","web","window"]},{"name":"clean_hands","tags":["bacteria","clean","disinfect","germs","gesture","hand","hands","sanitize","sanitizer"]},{"name":"mark_chat_read","tags":["approve","bubble","chat","check","comment","communicate","complete","done","mark","message","ok","read","select","sent","speech","tick","verified","yes"]},{"name":"comment_bank","tags":["archive","bank","bookmark","bubble","cchat","comment","communicate","favorite","label","library","message","remember","ribbon","save","speech","tag"]},{"name":"sim_card_download","tags":["arrow","camera","card","chip","device","down","download","memory","phone","sim","storage"]},{"name":"lan","tags":["computer","connection","data","internet","lan","network","service"]},{"name":"piano","tags":["instrument","keyboard","keys","music","musical","piano","social"]},{"name":"add_road","tags":["+","add","destination","direction","highway","maps","new","plus","road","stop","street","symbol","traffic"]},{"name":"add_ic_call","tags":["+","add","call","cell","contact","device","hardware","mobile","new","phone","plus","symbol","telephone"]},{"name":"rule_folder","tags":["approve","cancel","check","close","complete","data","doc","document","done","drive","exit","file","folder","mark","no","ok","remove","rule","select","sheet","slide","storage","tick","validate","verified","x","yes"]},{"name":"switch_access_shortcut","tags":["access","arrow","arrows","direction","navigation","new","north","shortcut","switch","symbol","up"]},{"name":"hardware","tags":["break","construction","hammer","hardware","nail","repair","tool"]},{"name":"line_weight","tags":["height","line","size","spacing","style","thickness","weight"]},{"name":"image_not_supported","tags":["disabled","enabled","image","landscape","mountain","mountains","not","off","on","photo","photography","picture","slash","supported"]},{"name":"flip_camera_ios","tags":["DISABLE_IOS","android","camera","disable_ios","edit","editing","flip","image","ios","mobile","orientation","rotate","turn"]},{"name":"phone_callback","tags":["arrow","call","callback","cell","contact","device","down","hardware","mobile","phone","telephone"]},{"name":"access_time_filled","tags":[]},{"name":"dining","tags":["cafe","cafeteria","cutlery","diner","dining","eat","eating","fork","room","spoon"]},{"name":"scale","tags":["measure","monitor","scale","weight"]},{"name":"airplanemode_active","tags":["active","airplane","airplanemode","flight","mode","on","signal"]},{"name":"set_meal","tags":["chopsticks","dinner","fish","food","lunch","meal","restaurant","set","teishoku"]},{"name":"mobile_friendly","tags":["Android","OS","approve","cell","check","complete","device","done","friendly","hardware","iOS","mark","mobile","ok","phone","select","tablet","tick","validate","verified","yes"]},{"name":"assured_workload","tags":["assured","compliance","confidential","federal","government","secure","sensitive regulatory","workload"]},{"name":"wallet","tags":[]},{"name":"merge_type","tags":["arrow","combine","direction","format","merge","text","type"]},{"name":"view_timeline","tags":["grid","layout","pattern","squares","timeline","view"]},{"name":"departure_board","tags":["automobile","board","bus","car","cars","clock","departure","maps","public","schedule","time","transportation","travel","vehicle"]},{"name":"event_repeat","tags":["around","calendar","date","day","event","inprogress","load","loading refresh","month","renew","rotate","schedule","turn"]},{"name":"sanitizer","tags":["bacteria","bottle","clean","covid","disinfect","germs","pump","sanitizer"]},{"name":"surfing","tags":["athlete","athletic","beach","body","entertainment","exercise","hobby","human","people","person","sea","social sports","sports","summer","surfing","water"]},{"name":"pix","tags":["bill","brazil","card","cash","commerce","credit","currency","finance","money","payment"]},{"name":"phonelink_ring","tags":["Android","OS","cell","connection","data","device","hardware","iOS","mobile","network","phone","phonelink","ring","service","signal","tablet","wireless"]},{"name":"display_settings","tags":["Android","OS","application","change","chrome","desktop","details","device","display","gear","hardware","iOS","info","information","mac","monitor","options","personal","screen","service","settings","web","window"]},{"name":"sports_motorsports","tags":["athlete","athletic","automobile","bike","drive","driving","entertainment","helmet","hobby","motorcycle","motorsports","protect","social","sports","vehicle"]},{"name":"horizontal_split","tags":["bars","format","horizontal","layout","lines","split","stacked"]},{"name":"view_comfy","tags":["comfy","grid","layout","pattern","squares","view"]},{"name":"polymer","tags":["emblem","logo","mark","polymer"]},{"name":"golf_course","tags":["athlete","athletic","ball","club","course","entertainment","flag","golf","golfer","golfing","hobby","hole","places","putt","sports"]},{"name":"batch_prediction","tags":["batch","bulb","idea","light","prediction"]},{"name":"filter_1","tags":["1","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"stay_current_portrait","tags":["Android","OS","current","device","hardware","iOS","mobile","phone","portrait","stay","tablet"]},{"name":"usb","tags":["cable","connection","device","usb","wire"]},{"name":"featured_play_list","tags":["collection","featured","highlighted","list","music","play","playlist","recommended"]},{"name":"data_object","tags":["brackets","code","coder","data","object","parentheses"]},{"name":"co_present","tags":["arrow","co-present","presentation","screen","share","site","slides","togather","web","website"]},{"name":"ev_station","tags":["automobile","car","cars","charging","electric","electricity","ev","maps","places","station","transportation","vehicle"]},{"name":"send_and_archive","tags":["archive","arrow","down","download","email","letter","mail","save","send","share"]},{"name":"send_to_mobile","tags":["Android","OS","arrow","device","export","forward","hardware","iOS","mobile","phone","right","send","share","tablet","to"]},{"name":"local_see","tags":["camera","lens","local","photo","photography","picture","see"]},{"name":"satellite_alt","tags":["alternative","artificial","communication","satellite","space","space station","television"]},{"name":"flatware","tags":["cafe","cafeteria","cutlery","diner","dining","eat","eating","fork","room","spoon"]},{"name":"speaker","tags":["box","electronic","loud","music","sound","speaker","stereo","system","video"]},{"name":"adb","tags":["adb","android","bridge","debug"]},{"name":"movie_creation","tags":["cinema","clapperboard","creation","film","movie","movies","slate","video"]},{"name":"picture_in_picture","tags":["crop","cropped","overlap","photo","picture","position","shape"]},{"name":"call_received","tags":["arrow","call","device","mobile","received"]},{"name":"battery_alert","tags":["!","alert","attention","battery","caution","cell","charge","danger","error","exclamation","important","mark","mobile","notification","power","symbol","warning"]},{"name":"system_update","tags":["Android","OS","arrow","arrows","cell","device","direction","down","download","hardware","iOS","install","mobile","phone","system","tablet","update"]},{"name":"webhook","tags":["api","developer","development","enterprise","software","webhook"]},{"name":"add_chart","tags":["+","add","analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","new","plus","statistics","symbol","tracking"]},{"name":"pan_tool_alt","tags":["fingers","gesture","hand","hands","human","move","pan","scan","stop","tool"]},{"name":"sports_handball","tags":["athlete","athletic","ball","body","entertainment","exercise","game","handball","hobby","human","people","person","social","sports"]},{"name":"electric_car","tags":["automobile","car","cars","electric","electricity","maps","transportation","travel","vehicle"]},{"name":"phone_forwarded","tags":["arrow","call","cell","contact","device","direction","forwarded","hardware","mobile","phone","right","telephone"]},{"name":"add_to_photos","tags":["add","collection","image","landscape","mountain","mountains","photo","photography","photos","picture","plus","to"]},{"name":"power_off","tags":["charge","cord","disabled","electric","electrical","enabled","off","on","outlet","plug","power","slash"]},{"name":"noise_control_off","tags":["audio","aware","cancel","cancellation","control","disabled","enabled","music","noise","note","off","offline","on","slash","sound"]},{"name":"code_off","tags":["brackets","code","css","develop","developer","disabled","enabled","engineer","engineering","html","off","on","platform","slash"]},{"name":"bookmark_remove","tags":["bookmark","delete","favorite","minus","remember","remove","ribbon","save","subtract"]},{"name":"screen_search_desktop","tags":["Android","OS","arrow","desktop","device","hardware","iOS","lock","monitor","rotate","screen","web"]},{"name":"panorama","tags":["angle","image","mountain","mountains","panorama","photo","photography","picture","view","wide"]},{"name":"settings_bluetooth","tags":["bluetooth","connect","connection","connectivity","device","settings","signal","symbol"]},{"name":"sports_baseball","tags":["athlete","athletic","ball","baseball","entertainment","exercise","game","hobby","social","sports"]},{"name":"festival","tags":["circus","event","festival","local","maps","places","tent","tour","travel"]},{"name":"lens_blur","tags":["blur","camera","dim","dot","effect","foggy","fuzzy","image","lens","photo","soften"]},{"name":"plumbing","tags":["build","construction","fix","handyman","plumbing","repair","tools","wrench"]},{"name":"toys","tags":["car","games","kids","toy","toys","windmill"]},{"name":"coffee_maker","tags":["appliances","beverage","coffee","cup","drink","machine","maker","mug"]},{"name":"edit_notifications","tags":["active","alarm","alert","bell","chime","compose","create","draft","edit","editing","input","new","notifications","notify","pen","pencil","reminder","ring","sound","write","writing"]},{"name":"personal_video","tags":["Android","OS","cam","chrome","desktop","device","hardware","iOS","mac","monitor","personal","television","tv","video","web","window"]},{"name":"animation","tags":["animation","circles","film","motion","movement","sequence","video"]},{"name":"bedtime","tags":["bedtime","nightime","sleep"]},{"name":"gamepad","tags":["buttons","console","controller","device","game","gamepad","gaming","playstation","video"]},{"name":"diversity_1","tags":["committee","diverse","diversity","family","friends","group","groups","heart","humans","network","people","persons","social","team"]},{"name":"center_focus_weak","tags":["camera","center","focus","image","lens","photo","photography","weak","zoom"]},{"name":"signal_wifi_statusbar_4_bar","tags":["4","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","statusbar","wifi","wireless"]},{"name":"manage_history","tags":["application","arrow","back","backwards","change","clock","date","details","gear","history","options","refresh","renew","reverse","rotate","schedule","settings","time","turn"]},{"name":"folder_zip","tags":["compress","data","doc","document","drive","file","folder","folders","open","sheet","slide","storage","zip"]},{"name":"flag_circle","tags":["circle","country","flag","goal","mark","nation","report","round","start"]},{"name":"south_west","tags":["arrow","directional","down","left","maps","navigation","south","west"]},{"name":"looks_4","tags":["4","digit","looks","numbers","square","symbol"]},{"name":"cloud_circle","tags":["app","application","backup","circle","cloud","connection","drive","files","folders","internet","network","sky","storage","upload"]},{"name":"format_shapes","tags":["alphabet","character","color","doc","edit","editing","editor","fill","font","format","letter","paint","shapes","sheet","spreadsheet","style","symbol","text","type","writing"]},{"name":"car_rental","tags":["automobile","car","cars","key","maps","rental","transportation","vehicle"]},{"name":"movie_filter","tags":["ai","artificial","automatic","automation","clapperboard","creation","custom","film","filter","genai","intelligence","magic","movie","movies","slate","smart","spark","sparkle","star","stars","video"]},{"name":"layers_clear","tags":["arrange","clear","delete","disabled","enabled","interaction","layers","maps","off","on","overlay","pages","slash"]},{"name":"phonelink_lock","tags":["Android","OS","cell","connection","device","erase","hardware","iOS","lock","locked","mobile","password","phone","phonelink","privacy","private","protection","safety","secure","security","tablet"]},{"name":"attractions","tags":["amusement","attractions","entertainment","ferris","fun","maps","park","places","wheel"]},{"name":"playlist_add_check_circle","tags":["add","album","artist","audio","cd","check","circle","collection","list","mark","music","playlist","record","sound","track"]},{"name":"hive","tags":["bee","honey","honeycomb"]},{"name":"no_photography","tags":["camera","disabled","enabled","image","no","off","on","photo","photography","picture","slash"]},{"name":"content_paste_go","tags":["clipboard","content","disabled","doc","document","enabled","file","go","on","paste","slash"]},{"name":"shop_two","tags":["add","arrow","buy","cart","google","play","purchase","shop","shopping","two"]},{"name":"edit_location","tags":["destination","direction","edit","location","maps","pen","pencil","pin","place","stop"]},{"name":"screen_rotation","tags":["Android","OS","arrow","device","hardware","iOS","mobile","phone","rotate","rotation","screen","tablet","turn"]},{"name":"numbers","tags":["digit","number","numbers","symbol"]},{"name":"sim_card","tags":["camera","card","chip","device","memory","phone","sim","storage"]},{"name":"control_camera","tags":["adjust","arrow","arrows","camera","center","control","direction","left","move","right"]},{"name":"blender","tags":["appliance","blender","cooking","electric","juicer","kitchen","machine","vitamix"]},{"name":"flip_to_front","tags":["arrange","arrangement","back","flip","format","front","layout","move","order","sort","to"]},{"name":"sports_volleyball","tags":["athlete","athletic","ball","entertainment","exercise","game","hobby","social","sports","volleyball"]},{"name":"stairs","tags":["down","staircase","stairs","up"]},{"name":"keyboard_alt","tags":["alt","computer","device","hardware","input","keyboard","keypad","letter","office","text","type"]},{"name":"crop_din","tags":["adjust","adjustments","area","crop","din","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"html","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","letter","platform","symbol","text","type"]},{"name":"signal_wifi_statusbar_connected_no_internet_4","tags":["!","4","alert","attention","caution","cell","cellular","connected","danger","data","error","exclamation","important","internet","mark","mobile","network","no","notification","phone","signal","speed","statusbar","symbol","warning","wifi","wireless"]},{"name":"pivot_table_chart","tags":["analytics","arrow","arrows","bar","bars","chart","data","diagram","direction","drive","edit","editing","graph","grid","infographic","measure","metrics","pivot","rotate","sheet","statistics","table","tracking"]},{"name":"microwave","tags":["appliance","cooking","electric","heat","home","house","kitchen","machine","microwave"]},{"name":"folder_copy","tags":["content","copy","cut","data","doc","document","drive","duplicate","file","folder","folders","multiple","paste","sheet","slide","storage"]},{"name":"output","tags":[]},{"name":"gif_box","tags":["alphabet","animated","animation","bitmap","character","font","format","gif","graphics","interchange","letter","symbol","text","type"]},{"name":"voice_chat","tags":["bubble","cam","camera","chat","comment","communicate","facetime","feedback","message","speech","video","voice"]},{"name":"local_convenience_store","tags":["--","24","bill","building","business","card","cash","coin","commerce","company","convenience","credit","currency","dollars","local","maps","market","money","new","online","pay","payment","plus","shop","shopping","store","storefront","symbol"]},{"name":"gps_not_fixed","tags":["destination","direction","disabled","enabled","gps","location","maps","not fixed","off","on","online","place","pointer","slash","tracking"]},{"name":"high_quality","tags":["alphabet","character","definition","display","font","high","hq","letter","movie","movies","quality","resolution","screen","symbol","text","tv","type"]},{"name":"switch_right","tags":["arrows","directional","navigation","right","switch","toggle"]},{"name":"pages","tags":["article","gplus","pages","paper","post","star"]},{"name":"table_restaurant","tags":["bar","dining","table"]},{"name":"speaker_notes_off","tags":["bubble","chat","comment","communicate","disabled","enabled","format","list","message","notes","off","on","slash","speaker","speech","text"]},{"name":"phone_disabled","tags":["call","cell","contact","device","disabled","enabled","hardware","mobile","off","offline","on","phone","slash","telephone"]},{"name":"eject","tags":["disc","drive","dvd","eject","remove","triangle","usb"]},{"name":"control_point_duplicate","tags":["+","add","circle","control","duplicate","multiple","new","plus","point","symbol"]},{"name":"filter","tags":["edit","editing","effect","filter","image","landscape","mountain","mountains","photo","photography","picture","settings"]},{"name":"pest_control","tags":["bug","control","exterminator","insects","pest"]},{"name":"backpack","tags":["back","backpack","bag","book","bookbag","knapsack","pack","storage","travel"]},{"name":"leak_add","tags":["add","connection","data","leak","link","network","service","signals","synce","wireless"]},{"name":"zoom_in_map","tags":["arrow","arrows","destination","in","location","maps","move","place","stop","zoom"]},{"name":"brightness_7","tags":["7","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"system_security_update_good","tags":["Android","OS","approve","cell","check","complete","device","done","good","hardware","iOS","mark","mobile","ok","phone","security","select","system","tablet","tick","update","validate","verified","yes"]},{"name":"ring_volume","tags":["call","calling","cell","contact","device","hardware","incoming","mobile","phone","ring","ringer","sound","telephone","volume"]},{"name":"money_off_csred","tags":["bill","card","cart","cash","coin","commerce","credit","csred","currency","disabled","dollars","enabled","money","off","on","online","pay","payment","shopping","slash","symbol"]},{"name":"sports_football","tags":["athlete","athletic","ball","entertainment","exercise","football","game","hobby","social","sports"]},{"name":"nature","tags":["forest","nature","outdoor","outside","park","tree","wilderness"]},{"name":"vibration","tags":["Android","OS","alert","cell","device","hardware","iOS","mobile","mode","motion","notification","phone","silence","silent","tablet","vibrate","vibration"]},{"name":"snippet_folder","tags":["data","doc","document","drive","file","folder","sheet","slide","snippet","storage"]},{"name":"edit_road","tags":["destination","direction","edit","highway","maps","pen","pencil","road","street","traffic"]},{"name":"run_circle","tags":["body","circle","exercise","human","people","person","run","running"]},{"name":"dry_cleaning","tags":["cleaning","dry","hanger","hotel","laundry","places","service","towel"]},{"name":"alarm_off","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","time","timer","watch"]},{"name":"perm_data_setting","tags":["data","gear","info","information","perm","settings"]},{"name":"bedroom_parent","tags":["bed","bedroom","double","full","furniture","home","hotel","house","king","night","parent","pillows","queen","rest","room","sizem master","sleep"]},{"name":"airline_seat_recline_normal","tags":["airline","body","extra","feet","human","leg","legroom","normal","people","person","recline","seat","sitting","space","travel"]},{"name":"currency_bitcoin","tags":["bill","blockchain","card","cash","coin","commerce","cost","credit","currency","digital","dollars","finance","franc","money","online","pay","payment","price","shopping","symbol"]},{"name":"do_disturb_alt","tags":["cancel","close","denied","deny","disturb","do","remove","silence","stop"]},{"name":"sensor_window","tags":["alarm","security","security system"]},{"name":"incomplete_circle","tags":["chart","circle","incomplete"]},{"name":"settings_input_hdmi","tags":["cable","connection","connectivity","definition","hdmi","high","input","plug","plugin","points","settings","video","wire"]},{"name":"camera_indoor","tags":["architecture","building","camera","estate","film","filming","home","house","image","indoor","inside","motion","nest","picture","place","real","residence","residential","shelter","video","videography"]},{"name":"edit_location_alt","tags":["alt","edit","location","pen","pencil","pin"]},{"name":"texture","tags":["diagonal","lines","pattern","stripes","texture"]},{"name":"location_off","tags":["destination","direction","location","maps","off","pin","place","room","stop"]},{"name":"edit_attributes","tags":["approve","attribution","check","complete","done","edit","mark","ok","select","tick","validate","verified","yes"]},{"name":"duo","tags":["call","chat","conference","device","duo","video"]},{"name":"slow_motion_video","tags":["arrow","control","controls","motion","music","play","slow","speed","video"]},{"name":"perm_scan_wifi","tags":["alert","announcement","connection","info","information","internet","network","perm","scan","service","signal","wifi","wireless"]},{"name":"phonelink_setup","tags":["Android","OS","call","chat","device","hardware","iOS","info","mobile","phone","phonelink","settings","setup","tablet","text"]},{"name":"hourglass_disabled","tags":["clock","countdown","disabled","empty","enabled","hourglass","loading","minute","minutes","off","on","slash","time","wait","waiting"]},{"name":"add_to_queue","tags":["+","Android","OS","add","chrome","desktop","device","display","hardware","iOS","mac","monitor","new","plus","queue","screen","symbol","to","web","window"]},{"name":"pie_chart_outline","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","outline","pie","statistics","tracking"]},{"name":"playlist_remove","tags":["-","collection","list","minus","music","playlist","remove"]},{"name":"next_week","tags":["arrow","bag","baggage","briefcase","business","case","next","suitcase","week"]},{"name":"church","tags":["christian","christianity","religion","spiritual","worship"]},{"name":"medical_information","tags":["badge","card","health","id","information","medical","services"]},{"name":"view_compact","tags":["compact","grid","layout","pattern","squares","view"]},{"name":"timer_off","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","stop","time","timer","watch"]},{"name":"bluetooth_connected","tags":["bluetooth","cast","connect","connection","device","paring","streaming","symbol","wireless"]},{"name":"photo_size_select_actual","tags":["actual","image","mountain","mountains","photo","photography","picture","select","size"]},{"name":"short_text","tags":["brief","comment","doc","document","note","short","text","write","writing"]},{"name":"bedroom_baby","tags":["babies","baby","bedroom","child","children","home","horse","house","infant","kid","newborn","rocking","room","toddler","young"]},{"name":"video_camera_back","tags":["back","camera","image","landscape","mountain","mountains","photo","photography","picture","rear","video"]},{"name":"bathroom","tags":["bath","bathroom","closet","home","house","place","plumbing","room","shower","sprinkler","wash","water","wc"]},{"name":"downhill_skiing","tags":["athlete","athletic","body","downhill","entertainment","exercise","hobby","human","people","person","ski social","skiing","snow","sports","travel","winter"]},{"name":"filter_list_off","tags":["alt","disabled","edit","filter","list","off","offline","options","refine","sift","slash"]},{"name":"connected_tv","tags":["Android","OS","airplay","chrome","connect","connected","desktop","device","display","hardware","iOS","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"format_indent_increase","tags":["align","alignment","doc","edit","editing","editor","format","increase","indent","indentation","paragraph","sheet","spreadsheet","text","type","writing"]},{"name":"settings_cell","tags":["Android","OS","cell","device","hardware","iOS","mobile","phone","settings","tablet"]},{"name":"remember_me","tags":["Android","OS","avatar","device","hardware","human","iOS","identity","me","mobile","people","person","phone","profile","remember","tablet","user"]},{"name":"kayaking","tags":["athlete","athletic","body","canoe","entertainment","exercise","hobby","human","kayak","kayaking","lake","paddle","paddling","people","person","rafting","river","row","social","sports","summer","travel","water"]},{"name":"switch_access_shortcut_add","tags":["+","access","add","arrow","arrows","direction","navigation","new","north","plus","shortcut","switch","symbol","up"]},{"name":"app_blocking","tags":["Android","OS","app","application","block","blocking","cancel","cell","device","hardware","iOS","mobile","phone","stop","stopped","tablet"]},{"name":"elevator","tags":["body","down","elevator","human","people","person","up"]},{"name":"work_off","tags":["bag","baggage","briefcase","business","case","disabled","enabled","job","off","on","slash","suitcase","work"]},{"name":"sensors_off","tags":["connection","disabled","enabled","network","off","on","scan","sensors","signal","slash","wireless"]},{"name":"stay_primary_portrait","tags":["Android","OS","current","device","hardware","iOS","mobile","phone","portrait","primary","stay","tablet"]},{"name":"cell_tower","tags":["broadcast","casting","cell","network","signal","tower","transmitting","wireless"]},{"name":"moped","tags":["automobile","bike","car","cars","maps","scooter","transportation","vehicle","vespa"]},{"name":"wrong_location","tags":["cancel","close","destination","direction","exit","location","maps","no","pin","place","quit","remove","stop","wrong","x"]},{"name":"groups_2","tags":["body","club","collaboration","crowd","gathering","groups","hair","human","meeting","people","person","social","teams"]},{"name":"public_off","tags":["disabled","earth","enabled","global","globe","map","network","off","on","planet","public","slash","social","space","web","world"]},{"name":"picture_in_picture_alt","tags":["crop","cropped","overlap","photo","picture","position","shape"]},{"name":"chair_alt","tags":["cahir","furniture","home","house","kitchen","lounging","seating","table"]},{"name":"car_repair","tags":["automobile","car","cars","maps","repair","transportation","vehicle"]},{"name":"airplay","tags":["airplay","arrow","connect","control","desktop","device","display","monitor","screen","signal"]},{"name":"nfc","tags":["communication","data","field","mobile","near","nfc","wireless"]},{"name":"line_style","tags":["dash","dotted","line","rule","spacing","style"]},{"name":"transform","tags":["adjust","crop","edit","editing","image","photo","picture","transform"]},{"name":"single_bed","tags":["bed","bedroom","double","furniture","home","hotel","house","king","night","pillows","queen","rest","room","single","sleep","twin"]},{"name":"pattern","tags":["key","login","password","pattern","pin","security","star","unlock"]},{"name":"local_movies","tags":[]},{"name":"repeat_one","tags":["1","arrow","arrows","control","controls","digit","media","music","number","one","repeat","symbol","video"]},{"name":"swap_calls","tags":["arrow","arrows","calls","device","direction","mobile","share","swap"]},{"name":"do_not_disturb_alt","tags":["cancel","close","denied","deny","disturb","do","remove","silence","stop"]},{"name":"smoking_rooms","tags":["allowed","cigarette","places","rooms","smoke","smoking","tobacco","zone"]},{"name":"remove_moderator","tags":["certified","disabled","enabled","moderator","off","on","privacy","private","protect","protection","remove","security","shield","slash","verified"]},{"name":"perm_device_information","tags":["Android","OS","alert","announcement","device","hardware","i","iOS","info","information","mobile","perm","phone","tablet"]},{"name":"wash","tags":["bathroom","clean","fingers","gesture","hand","wash","wc"]},{"name":"mode_standby","tags":["disturb","mode","power","sleep","standby","target"]},{"name":"door_sliding","tags":["auto","automatic","door","doorway","double","entrance","exit","glass","home","house","sliding","two"]},{"name":"skateboarding","tags":["athlete","athletic","body","entertainment","exercise","hobby","human","people","person","skate","skateboarder","skateboarding","social","sports"]},{"name":"difference","tags":["compare","content","copy","cut","diff","difference","doc","document","duplicate","file","multiple","past"]},{"name":"group_remove","tags":["accounts","committee","face","family","friends","group","humans","network","people","persons","profiles","remove","social","team","users"]},{"name":"brightness_high","tags":["auto","brightness","control","high","mobile","monitor","phone","sun"]},{"name":"cabin","tags":["architecture","cabin","camping","cottage","estate","home","house","log","maps","place","real","residence","residential","stay","traveling","wood"]},{"name":"camera_outdoor","tags":["architecture","building","camera","estate","film","filming","home","house","image","motion","nest","outdoor","outside","picture","place","real","residence","residential","shelter","video","videography"]},{"name":"troubleshoot","tags":["analytics","chart","data","diagram","find","glass","graph","infographic","line","look","magnify","magnifying","measure","metrics","search","see","statistics","tracking","troubleshoot"]},{"name":"tablet_android","tags":["OS","android","device","hardware","iOS","ipad","mobile","tablet","web"]},{"name":"house_siding","tags":["architecture","building","construction","estate","exterior","facade","home","house","real","residential","siding"]},{"name":"satellite","tags":["bluetooth","connect","connection","connectivity","data","device","image","internet","landscape","location","maps","mountain","mountains","network","photo","photography","picture","satellite","scan","service","signal","symbol","wireless-- wifi"]},{"name":"motion_photos_on","tags":["animation","circle","disabled","enabled","motion","off","on","photos","play","slash","video"]},{"name":"door_back","tags":["back","closed","door","doorway","entrance","exit","home","house","way"]},{"name":"strikethrough_s","tags":["alphabet","character","cross","doc","edit","editing","editor","font","letter","out","s","sheet","spreadsheet","strikethrough","styles","symbol","text","type","writing"]},{"name":"co2","tags":["carbon","chemical","co2","dioxide","gas"]},{"name":"notifications_paused","tags":["active","alarm","alert","bell","chime","ignore","notifications","notify","paused","quiet","reminder","ring --- pause","sleep","snooze","sound","z","zzz"]},{"name":"currency_yen","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","shopping","symbol","yen"]},{"name":"call_to_action","tags":["action","alert","bar","call","components","cta","design","info","information","interface","layout","message","notification","screen","site","to","ui","ux","web","website","window"]},{"name":"photo_camera_front","tags":["account","camera","face","front","human","image","people","person","photo","photography","picture","portrait","profile","user"]},{"name":"directions_boat_filled","tags":["automobile","boat","car","cars","direction","directions","ferry","filled","maps","public","transportation","vehicle"]},{"name":"subtitles_off","tags":["accessibility","accessible","caption","cc","closed","disabled","enabled","language","off","on","slash","subtitle","subtitles","translate","video"]},{"name":"rotate_90_degrees_ccw","tags":["90","arrow","arrows","ccw","degrees","direction","edit","editing","image","photo","rotate","turn"]},{"name":"vertical_align_center","tags":["align","alignment","arrow","center","doc","down","edit","editing","editor","sheet","spreadsheet","text","type","up","vertical","writing"]},{"name":"living","tags":["chair","comfort","couch","decoration","furniture","home","house","living","lounging","loveseat","room","seat","seating","sofa"]},{"name":"battery_saver","tags":["+","add","battery","charge","charging","new","plus","power","saver","symbol"]},{"name":"hot_tub","tags":["bath","bathing","bathroom","bathtub","hot","hotel","human","jacuzzi","person","shower","spa","steam","travel","tub","water"]},{"name":"play_lesson","tags":["audio","book","bookmark","digital","ebook","lesson","multimedia","play","play lesson","read","reading","ribbon"]},{"name":"update_disabled","tags":["arrow","back","backwards","clock","date","disabled","enabled","forward","history","load","off","on","refresh","reverse","rotate","schedule","slash","time","update"]},{"name":"psychology_alt","tags":["?","assistance","behavior","body","brain","cognitive","function","gear","head","help","human","info","information","intellectual","mental","mind","people","person","preferences","psychiatric","psychology","punctuation","question mark","science","settings","social","support","symbol","therapy","thinking","thoughts"]},{"name":"cast_connected","tags":["Android","OS","airplay","cast","chrome","connect","connected","desktop","device","display","hardware","iOS","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"format_color_reset","tags":["clear","color","disabled","doc","droplet","edit","editing","editor","enabled","fill","format","off","on","paint","reset","sheet","slash","spreadsheet","style","text","type","water","writing"]},{"name":"snooze","tags":["alarm","bell","clock","duration","notification","snooze","time","timer","watch","z"]},{"name":"person_remove_alt_1","tags":[]},{"name":"align_horizontal_left","tags":["align","alignment","format","horizontal","layout","left","lines","paragraph","rule","rules","style","text"]},{"name":"boy","tags":["body","boy","gender","human","male","man","people","person","social","symbol"]},{"name":"battery_5_bar","tags":["5","bar","battery","cell","charge","mobile","power"]},{"name":"mic_external_on","tags":["audio","disabled","enabled","external","mic","microphone","off","on","slash","sound","voice"]},{"name":"voicemail","tags":["call","device","message","missed","mobile","phone","recording","voice","voicemail"]},{"name":"join_full","tags":["circle","combine","command","full","join","left","outer","overlap","right","sql"]},{"name":"looks_5","tags":["5","digit","looks","numbers","square","symbol"]},{"name":"countertops","tags":["counter","countertops","home","house","kitchen","sink","table","tops"]},{"name":"energy_savings_leaf","tags":["eco","energy","leaf","leaves","nest","savings","usage"]},{"name":"safety_divider","tags":["apart","distance","divider","safety","separate","social","space"]},{"name":"move_up","tags":["arrow","direction","jump","move","navigation","transfer","up"]},{"name":"storm","tags":["forecast","hurricane","storm","temperature","twister","weather","wind"]},{"name":"sync_disabled","tags":["360","around","arrow","arrows","direction","disabled","enabled","inprogress","load","loading refresh","off","on","renew","rotate","slash","sync","turn"]},{"name":"javascript","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","javascript","letter","platform","symbol","text","type"]},{"name":"tram","tags":["automobile","car","cars","direction","maps","public","rail","subway","train","tram","transportation","vehicle"]},{"name":"app_shortcut","tags":["app","bookmarked","favorite","highlight","important","marked","mobile","save","saved","shortcut","software","special","star"]},{"name":"data_saver_off","tags":["analytics","bar","bars","chart","data","diagram","donut","graph","infographic","measure","metrics","off","on","ring","saver","statistics","tracking"]},{"name":"laptop_windows","tags":["Android","OS","chrome","device","display","hardware","iOS","laptop","mac","monitor","screen","web","window","windows"]},{"name":"doorbell","tags":["alarm","bell","door","doorbell","home","house","ringing"]},{"name":"hd","tags":["alphabet","character","definition","display","font","hd","high","letter","movie","movies","resolution","screen","symbol","text","tv","type"]},{"name":"file_download_off","tags":["arrow","disabled","down","download","drive","enabled","export","file","install","off","on","save","slash","upload"]},{"name":"apps_outage","tags":["all","applications","apps","circles","collection","components","dots","grid","interface","outage","squares","ui","ux"]},{"name":"taxi_alert","tags":["!","alert","attention","automobile","cab","car","cars","caution","danger","direction","error","exclamation","important","lyft","maps","mark","notification","public","symbol","taxi","transportation","uber","vehicle","warning","yellow"]},{"name":"breakfast_dining","tags":["bakery","bread","breakfast","butter","dining","food","toast"]},{"name":"brightness_medium","tags":["auto","brightness","control","medium","mobile","monitor","phone","sun"]},{"name":"gradient","tags":["color","edit","editing","effect","filter","gradient","image","images","photography","picture","pictures"]},{"name":"swipe_left","tags":["arrow","arrows","finger","hand","hit","left","navigation","reject","strike","swing","swipe","take"]},{"name":"soup_kitchen","tags":["breakfast","brunch","dining","food","kitchen","lunch","meal","soup"]},{"name":"voice_over_off","tags":["account","disabled","enabled","face","human","off","on","over","people","person","profile","recording","slash","speak","speaking","speech","transcript","user","voice"]},{"name":"water_damage","tags":["architecture","building","damage","drop","droplet","estate","house","leak","plumbing","real","residence","residential","shelter","water"]},{"name":"abc","tags":["alphabet","character","font","letter","symbol","text","type"]},{"name":"data_saver_on","tags":["+","add","analytics","chart","data","diagram","graph","infographic","measure","metrics","new","on","plus","ring","saver","statistics","symbol","tracking"]},{"name":"signal_wifi_0_bar","tags":["0","bar","cell","cellular","data","internet","mobile","network","phone","signal","wifi","wireless"]},{"name":"brightness_low","tags":["auto","brightness","control","low","mobile","monitor","phone","sun"]},{"name":"device_unknown","tags":["?","Android","OS","assistance","cell","device","hardware","help","iOS","info","information","mobile","phone","punctuation","question mark","support","symbol","tablet","unknown"]},{"name":"fire_extinguisher","tags":["emergency","extinguisher","fire","water"]},{"name":"fitbit","tags":["athlete","athletic","exercise","fitbit","fitness","hobby","logo"]},{"name":"bedroom_child","tags":["bed","bedroom","child","children","furniture","home","hotel","house","kid","night","pillows","rest","room","size","sleep","twin","young"]},{"name":"closed_caption_off","tags":["accessible","alphabet","caption","cc","character","closed","decoder","font","language","letter","media","movies","off","outline","subtitle","subtitles","symbol","text","tv","type"]},{"name":"bluetooth_searching","tags":["bluetooth","connection","device","paring","search","searching","symbol"]},{"name":"content_paste_off","tags":["clipboard","content","disabled","doc","document","enabled","file","off","on","paste","slash"]},{"name":"hexagon","tags":["hexagon","shape","six sides"]},{"name":"tap_and_play","tags":["Android","OS wifi","cell","connection","device","hardware","iOS","internet","mobile","network","phone","play","signal","tablet","tap","to","wireless"]},{"name":"domain_add","tags":["+","add","apartment","architecture","building","business","domain","estate","home","new","place","plus","real","residence","residential","shelter","symbol","web","www"]},{"name":"signpost","tags":["arrow","direction","left","maps","right","signal","signs","street","traffic"]},{"name":"screenshot","tags":["Android","OS","cell","crop","device","hardware","iOS","mobile","phone","screen","screenshot","tablet"]},{"name":"network_cell","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"repeat_on","tags":["arrow","arrows","control","controls","media","music","on","repeat","video"]},{"name":"charging_station","tags":["Android","OS","battery","bolt","cell","charging","device","electric","hardware","iOS","lightning","mobile","phone","station","tablet","thunderbolt"]},{"name":"grid_4x4","tags":["4","by","grid","layout","lines","space"]},{"name":"assistant_photo","tags":["assistant","flag","photo","recommendation","smart","star","suggestion"]},{"name":"carpenter","tags":["building","carpenter","construction","cutting","handyman","repair","saw","tool"]},{"name":"private_connectivity","tags":["connectivity","lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"mobiledata_off","tags":["arrow","data","disabled","down","enabled","internet","mobile","network","off","on","slash","speed","up","wifi","wireless"]},{"name":"atm","tags":["alphabet","atm","automated","bill","card","cart","cash","character","coin","commerce","credit","currency","dollars","font","letter","machine","money","online","pay","payment","shopping","symbol","teller","text","type"]},{"name":"rv_hookup","tags":["arrow","attach","automobile","automotive","back","car","cars","connect","direction","hookup","left","maps","public","right","rv","trailer","transportation","travel","truck","van","vehicle"]},{"name":"replay_30","tags":["30","arrow","arrows","control","controls","digit","music","number","refresh","renew","repeat","replay","symbol","thirty","video"]},{"name":"offline_share","tags":["Android","OS","arrow","cell","connect","device","direction","hardware","iOS","link","mobile","multiple","offline","phone","right","share","tablet"]},{"name":"settings_input_svideo","tags":["cable","connection","connectivity","definition","input","plug","plugin","points","settings","standard","svideo","video"]},{"name":"soap","tags":["bathroom","clean","fingers","gesture","hand","soap","wash","wc"]},{"name":"baby_changing_station","tags":["babies","baby","bathroom","body","changing","child","children","father","human","infant","kids","mother","newborn","people","person","station","toddler","wc","young"]},{"name":"sports_cricket","tags":["athlete","athletic","ball","bat","cricket","entertainment","exercise","game","hobby","social","sports"]},{"name":"ad_units","tags":["Android","OS","ad","banner","cell","device","hardware","iOS","mobile","notification","notifications","phone","tablet","top","units"]},{"name":"wb_twilight","tags":["balance","light","lighting","noon","sun","sunset","twilight","wb","white"]},{"name":"no_encryption","tags":["disabled","enabled","encryption","lock","no","off","on","password","safety","security","slash"]},{"name":"table_bar","tags":["bar","cafe","round","table"]},{"name":"diversity_2","tags":["committee","diverse","diversity","family","friends","group","groups","heart","humans","network","people","persons","social","team"]},{"name":"subway","tags":["automobile","bike","car","cars","maps","rail","scooter","subway","train","transportation","travel","tunnel","underground","vehicle","vespa"]},{"name":"browser_updated","tags":["Android","OS","arrow","browser","chrome","desktop","device","display","download","hardware","iOS","mac","monitor","screen","updated","web","window"]},{"name":"currency_pound","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","pound","price","shopping","symbol"]},{"name":"transit_enterexit","tags":["arrow","direction","enterexit","maps","navigation","route","transit","transportation"]},{"name":"contrast","tags":["black","contrast","edit","editing","effect","filter","grayscale","image","images","photography","picture","pictures","settings","white"]},{"name":"lightbulb_circle","tags":["alert","announcement","idea","info","information","light","lightbulb"]},{"name":"rectangle","tags":["four sides","parallelograms","polygons","quadrilaterals","recangle","shape"]},{"name":"call_merge","tags":["arrow","call","device","merge","mobile"]},{"name":"hide_image","tags":["disabled","enabled","hide","image","landscape","mountain","mountains","off","on","photo","photography","picture","slash"]},{"name":"shield_moon","tags":["certified","do not disturb","moon","night","privacy","private","protect","protection","security","shield","verified"]},{"name":"group_off","tags":["body","club","collaboration","crowd","gathering","group","human","meeting","off","people","person","social","teams"]},{"name":"music_off","tags":["audio","audiotrack","disabled","enabled","key","music","note","off","on","slash","sound","track"]},{"name":"bluetooth_disabled","tags":["bluetooth","cast","connect","connection","device","disabled","enabled","off","offline","on","paring","slash","streaming","symbol","wireless"]},{"name":"flip_to_back","tags":["arrange","arrangement","back","flip","format","front","layout","move","order","sort","to"]},{"name":"sd_card","tags":["camera","card","digital","memory","photos","sd","secure","storage"]},{"name":"exposure_plus_1","tags":["1","add","brightness","contrast","digit","edit","editing","effect","exposure","image","number","photo","photography","plus","settings","symbol"]},{"name":"view_array","tags":["array","design","format","grid","layout","view","website"]},{"name":"sports_mma","tags":["arts","athlete","athletic","boxing","combat","entertainment","exercise","fighting","game","glove","hobby","martial","mixed","mma","social","sports"]},{"name":"straight","tags":["arrow","arrows","direction","directions","maps","navigation","path","route","sign","straight","traffic","up"]},{"name":"thermostat_auto","tags":["A","auto","celsius","fahrenheit","meter","temp","temperature","thermometer","thermostat"]},{"name":"mobile_screen_share","tags":["Android","OS","cast","cell","device","hardware","iOS","mirror","mobile","monitor","phone","screen","screencast","share","stream","streaming","tablet","tv","wireless"]},{"name":"phone_missed","tags":["arrow","call","cell","contact","device","hardware","missed","mobile","phone","telephone"]},{"name":"brunch_dining","tags":["breakfast","brunch","champagne","dining","drink","food","lunch","meal"]},{"name":"featured_video","tags":["advertised","advertisement","featured","highlighted","recommended","video","watch"]},{"name":"merge","tags":["arrow","arrows","direction","directions","maps","merge","navigation","path","route","sign","traffic"]},{"name":"open_in_new_off","tags":["arrow","box","disabled","enabled","export","in","new","off","on","open","slash","window"]},{"name":"hdr_auto","tags":["A","alphabet","auto","camera","character","circle","dynamic","font","hdr","high","letter","photo","range","symbol","text","type"]},{"name":"join_inner","tags":["circle","command","inner","join","matching","overlap","sql","values"]},{"name":"solar_power","tags":["eco","energy","heat","nest","power","solar","sun","sunny"]},{"name":"crop_16_9","tags":["16","9","adjust","adjustments","area","by","crop","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"swipe_right","tags":["accept","arrows","direction","finger","hands","hit","navigation","right","strike","swing","swpie","take"]},{"name":"phonelink_erase","tags":["Android","OS","cancel","cell","close","connection","device","erase","exit","hardware","iOS","mobile","no","phone","phonelink","remove","stop","tablet","x"]},{"name":"smoke_free","tags":["cigarette","disabled","enabled","free","never","no","off","on","places","prohibited","slash","smoke","smoking","tobacco","warning","zone"]},{"name":"install_desktop","tags":["Android","OS","chrome","desktop","device","display","fix","hardware","iOS","install","mac","monitor","place","pwa","screen","web","window"]},{"name":"shutter_speed","tags":["aperture","camera","duration","image","lens","photo","photography","photos","picture","setting","shutter","speed","stop","time","timer","watch"]},{"name":"keyboard_hide","tags":["arrow","computer","device","down","hardware","hide","input","keyboard","keypad","text"]},{"name":"exposure","tags":["add","brightness","contrast","edit","editing","effect","exposure","image","minus","photo","photography","picture","plus","settings","subtract"]},{"name":"nordic_walking","tags":["athlete","athletic","body","entertainment","exercise","hiking","hobby","human","nordic","people","person","social","sports","travel","walker","walking"]},{"name":"umbrella","tags":["beach","protection","rain","sun","sunny","umbrella"]},{"name":"move_down","tags":["arrow","direction","down","jump","move","navigation","transfer"]},{"name":"filter_2","tags":["2","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"photo_album","tags":["album","archive","bookmark","image","label","library","mountain","mountains","photo","photography","picture","ribbon","save","tag"]},{"name":"security_update_good","tags":["Android","OS","checkmark","device","good","hardware","iOS","mobile","ok","phone","security","tablet","tick","update"]},{"name":"ssid_chart","tags":["chart","graph","lines","network","ssid","wifi"]},{"name":"score","tags":["2k","alphabet","analytics","bar","bars","character","chart","data","diagram","digit","font","graph","infographic","letter","measure","metrics","number","score","statistics","symbol","text","tracking","type"]},{"name":"swipe_up","tags":["arrows","direction","disable","enable","finger","hands","hit","navigation","strike","swing","swpie","take","up"]},{"name":"battery_4_bar","tags":["4","bar","battery","cell","charge","mobile","power"]},{"name":"all_out","tags":["all","circle","out","shape"]},{"name":"battery_unknown","tags":["?","assistance","battery","cell","charge","help","info","information","mobile","power","punctuation","question mark","support","symbol","unknown"]},{"name":"sports_golf","tags":["athlete","athletic","ball","club","entertainment","exercise","game","golf","golfer","golfing","hobby","social","sports"]},{"name":"sports_martial_arts","tags":["arts","athlete","athletic","entertainment","exercise","hobby","human","karate","martial","people","person","social","sports"]},{"name":"filter_tilt_shift","tags":["blur","center","edit","editing","effect","filter","focus","image","images","photography","picture","pictures","shift","tilt"]},{"name":"electric_bike","tags":["bike","electric","electricity","maps","scooter","transportation","travel","vespa"]},{"name":"border_all","tags":["all","border","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"auto_mode","tags":["ai","around","arrow","arrows","artificial","auto","automatic","automation","custom","direction","genai","inprogress","intelligence","load","loading refresh","magic","mode","navigation","nest","renew","rotate","smart","spark","sparkle","star","turn"]},{"name":"hvac","tags":["air","conditioning","heating","hvac","ventilation"]},{"name":"scanner","tags":["copy","device","hardware","machine","scan","scanner"]},{"name":"shuffle_on","tags":["arrow","arrows","control","controls","music","on","random","shuffle","video"]},{"name":"wifi_calling_3","tags":["3","calling","cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"signal_wifi_off","tags":["cell","cellular","data","disabled","enabled","internet","mobile","network","off","on","phone","signal","slash","speed","wifi","wireless"]},{"name":"girl","tags":["body","female","gender","girl","human","lady","people","person","social","symbol","woman","women"]},{"name":"shop_2","tags":["2","add","arrow","buy","cart","google","play","purchase","shop","shopping"]},{"name":"hdr_strong","tags":["circles","dots","dynamic","enhance","hdr","high","range","strong"]},{"name":"directions_transit","tags":["automobile","car","cars","direction","directions","maps","public","rail","subway","train","transit","transportation","vehicle"]},{"name":"label_off","tags":["disabled","enabled","favorite","indent","label","library","mail","off","on","remember","save","slash","stamp","sticker","tag","wing"]},{"name":"tablet","tags":["Android","OS","device","hardware","iOS","ipad","mobile","tablet","web"]},{"name":"5g","tags":["5g","alphabet","cellular","character","data","digit","font","letter","mobile","network","number","phone","signal","speed","symbol","text","type","wifi"]},{"name":"vrpano","tags":["angle","image","landscape","mountain","mountains","panorama","photo","photography","picture","view","vrpano","wide"]},{"name":"forward_30","tags":["30","arrow","control","controls","digit","fast","forward","music","number","seconds","symbol","video"]},{"name":"battery_0_bar","tags":["0","bar","battery","cell","charge","mobile","power"]},{"name":"airline_seat_recline_extra","tags":["airline","body","extra","feet","human","leg","legroom","people","person","seat","sitting","space","travel"]},{"name":"looks","tags":["circle","half","looks","rainbow"]},{"name":"linked_camera","tags":["camera","connect","connection","lens","linked","network","photo","photography","picture","signal","signals","sync","wireless"]},{"name":"paragliding","tags":["athlete","athletic","body","entertainment","exercise","fly","gliding","hobby","human","parachute","paragliding","people","person","sky","skydiving","social","sports","travel"]},{"name":"electric_scooter","tags":["bike","electric","maps","scooter","transportation","vehicle","vespa"]},{"name":"settings_system_daydream","tags":["backup","cloud","daydream","drive","settings","storage","system"]},{"name":"format_indent_decrease","tags":["align","alignment","decrease","doc","edit","editing","editor","format","indent","indentation","paragraph","sheet","spreadsheet","text","type","writing"]},{"name":"tapas","tags":["appetizer","brunch","dinner","food","lunch","restaurant","snack","tapas"]},{"name":"brightness_3","tags":["3","brightness","circle","control","crescent","level","moon","screen"]},{"name":"tab_unselected","tags":["browser","computer","document","documents","folder","internet","tab","tabs","unselected","web","website","window","windows"]},{"name":"density_small","tags":["density","horizontal","lines","rule","rules","small"]},{"name":"blur_circular","tags":["blur","circle","circular","dots","edit","editing","effect","enhance","filter"]},{"name":"rice_bowl","tags":["bowl","dinner","food","lunch","meal","restaurant","rice"]},{"name":"rounded_corner","tags":["adjust","corner","edit","rounded","shape","square","transform"]},{"name":"person_add_disabled","tags":["+","account","add","disabled","enabled","face","human","new","off","offline","on","people","person","plus","profile","slash","symbol","user"]},{"name":"music_video","tags":["band","music","recording","screen","tv","video","watch"]},{"name":"looks_6","tags":["6","digit","looks","numbers","square","symbol"]},{"name":"do_not_touch","tags":["disabled","do","enabled","fingers","gesture","hand","not","off","on","slash","touch"]},{"name":"playlist_add_circle","tags":["add","album","artist","audio","cd","check","circle","collection","list","mark","music","playlist","record","sound","track"]},{"name":"domain_disabled","tags":["apartment","architecture","building","business","company","disabled","domain","enabled","estate","home","internet","maps","off","office","offline","on","place","real","residence","residential","slash","web","website"]},{"name":"flash_auto","tags":["a","auto","bolt","electric","fast","flash","lightning","thunderbolt"]},{"name":"6_ft_apart","tags":["6","apart","body","covid","distance","feet","ft","human","people","person","social"]},{"name":"signal_wifi_bad","tags":["bad","bar","cancel","cell","cellular","close","data","exit","internet","mobile","network","no","phone","quit","remove","signal","stop","wifi","wireless","x"]},{"name":"crisis_alert","tags":["!","alert","attention","bullseye","caution","crisis","danger","error","exclamation","important","mark","notification","symbol","target","warning"]},{"name":"queue_play_next","tags":["+","add","arrow","desktop","device","display","hardware","monitor","new","next","play","plus","queue","screen","steam","symbol","tv"]},{"name":"format_clear","tags":["T","alphabet","character","clear","disabled","doc","edit","editing","editor","enabled","font","format","letter","off","on","sheet","slash","spreadsheet","style","symbol","text","type","writing"]},{"name":"bus_alert","tags":["!","alert","attention","automobile","bus","car","cars","caution","danger","error","exclamation","important","maps","mark","notification","symbol","transportation","vehicle","warning"]},{"name":"party_mode","tags":["camera","lens","mode","party","photo","photography","picture"]},{"name":"snowboarding","tags":["athlete","athletic","body","entertainment","exercise","hobby","human","people","person","snow","snowboarding","social","sports","travel","winter"]},{"name":"text_rotate_vertical","tags":["A","alphabet","arrow","character","down","field","font","letter","move","rotate","symbol","text","type","vertical"]},{"name":"motion_photos_auto","tags":["A","alphabet","animation","auto","automatic","character","circle","font","gif","letter","live","motion","photos","symbol","text","type","video"]},{"name":"crop_portrait","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","photo","photos","portrait","rectangle","settings","size","square"]},{"name":"thunderstorm","tags":["bolt","climate","cloud","cloudy","lightning","rain","rainfall","rainstorm","storm","thunder","thunderstorm","weather"]},{"name":"battery_6_bar","tags":["6","bar","battery","cell","charge","mobile","power"]},{"name":"space_bar","tags":["bar","keyboard","line","space"]},{"name":"replay_5","tags":["5","arrow","arrows","control","controls","digit","five","music","number","refresh","renew","repeat","replay","symbol","video"]},{"name":"local_car_wash","tags":["automobile","car","cars","local","maps","transportation","travel","vehicle","wash"]},{"name":"folder_delete","tags":["bin","can","data","delete","doc","document","drive","file","folder","folders","garbage","remove","sheet","slide","storage","trash"]},{"name":"data_thresholding","tags":["data","hidden","privacy","thresholding","thresold"]},{"name":"connecting_airports","tags":["airplane","airplanes","airport","airports","connecting","flight","plane","transportation","travel","trip"]},{"name":"access_alarms","tags":[]},{"name":"tty","tags":["call","cell","contact","deaf","device","hardware","impaired","mobile","phone","speech","talk","telephone","text","tty"]},{"name":"audio_file","tags":["audio","doc","document","key","music","note","sound","track"]},{"name":"egg","tags":["breakfast","brunch","egg","food"]},{"name":"balcony","tags":["architecture","balcony","doors","estate","home","house","maps","out","outside","place","real","residence","residential","stay","terrace","window"]},{"name":"kitesurfing","tags":["athlete","athletic","beach","body","entertainment","exercise","hobby","human","kitesurfing","people","person","social","sports","surf","travel","water"]},{"name":"call_missed_outgoing","tags":["arrow","call","device","missed","mobile","outgoing"]},{"name":"local_hotel","tags":["body","hotel","human","local","people","person","sleep","stay","travel","trip"]},{"name":"text_increase","tags":["+","add","alphabet","character","font","increase","letter","new","plus","resize","symbol","text","type"]},{"name":"speaker_phone","tags":["Android","OS","cell","device","hardware","iOS","mobile","phone","sound","speaker","tablet","volume"]},{"name":"no_food","tags":["disabled","drink","enabled","fastfood","food","hamburger","meal","no","off","on","slash"]},{"name":"brightness_2","tags":["2","brightness","circle","control","crescent","level","moon","screen"]},{"name":"mode_of_travel","tags":["arrow","destination","direction","location","maps","mode","of","pin","place","stop","transportation","travel","trip"]},{"name":"format_line_spacing","tags":["align","alignment","doc","edit","editing","editor","format","line","sheet","spacing","spreadsheet","text","type","writing"]},{"name":"iso","tags":["add","edit","editing","effect","image","iso","minus","photography","picture","plus","sensor","shutter","speed","subtract"]},{"name":"explore_off","tags":["compass","destination","direction","disabled","east","enabled","explore","location","maps","needle","north","off","on","slash","south","travel","west"]},{"name":"drive_file_move_rtl","tags":["arrow","arrows","data","direction","doc","document","drive","file","folder","folders","left","move","rtl","sheet","side","slide","storage"]},{"name":"cell_wifi","tags":["cell","connection","data","internet","mobile","network","phone","service","signal","wifi","wireless"]},{"name":"tonality","tags":["circle","edit","editing","filter","image","photography","picture","tonality"]},{"name":"spoke","tags":["connection","network","radius","spoke"]},{"name":"photo_filter","tags":["ai","artificial","automatic","automation","custom","filter","filters","genai","image","intelligence","magic","photo","photography","picture","smart","spark","sparkle","star"]},{"name":"desktop_access_disabled","tags":["Android","OS","access","chrome","desktop","device","disabled","display","enabled","hardware","iOS","mac","monitor","off","offline","on","screen","slash","web","window"]},{"name":"sports_gymnastics","tags":["athlete","athletic","entertainment","exercise","gymnastics","hobby","social","sports"]},{"name":"houseboat","tags":["architecture","beach","boat","estate","floating","home","house","houseboat","maps","place","real","residence","residential","sea","stay","traveling","vacation"]},{"name":"fence","tags":["backyard","barrier","boundaries","boundary","fence","home","house","protection","yard"]},{"name":"commit","tags":["accomplish","bind","circle","commit","dedicate","execute","line","perform","pledge"]},{"name":"photo_size_select_small","tags":["adjust","album","edit","editing","image","large","library","mountain","mountains","photo","photography","picture","select","size","small"]},{"name":"signal_wifi_connected_no_internet_4","tags":["4","cell","cellular","connected","data","internet","mobile","network","no","offline","phone","signal","wifi","wireless","x"]},{"name":"horizontal_distribute","tags":["alignment","distribute","format","horizontal","layout","lines","paragraph","rule","rules","style","text"]},{"name":"report_off","tags":["!","alert","attention","caution","danger","disabled","enabled","error","exclamation","important","mark","notification","octagon","off","offline","on","report","slash","symbol","warning"]},{"name":"polyline","tags":["compose","create","design","draw","line","polyline","vector"]},{"name":"art_track","tags":["album","art","artist","audio","image","music","photo","photography","picture","sound","track","tracks"]},{"name":"crop_7_5","tags":["5","7","adjust","adjustments","area","by","crop","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"filter_hdr","tags":["camera","edit","editing","effect","filter","hdr","image","mountain","mountains","photo","photography","picture"]},{"name":"text_rotation_none","tags":["A","alphabet","arrow","character","field","font","letter","move","none","rotate","symbol","text","type"]},{"name":"battery_3_bar","tags":["3","bar","battery","cell","charge","mobile","power"]},{"name":"align_vertical_bottom","tags":["align","alignment","bottom","format","layout","lines","paragraph","rule","rules","style","text","vertical"]},{"name":"stop_screen_share","tags":["Android","OS","arrow","cast","chrome","device","disabled","display","enabled","hardware","iOS","laptop","mac","mirror","monitor","off","offline","on","screen","share","slash","steam","stop","streaming","web","window"]},{"name":"imagesearch_roller","tags":["art","image","imagesearch","paint","roller","search"]},{"name":"bento","tags":["bento","box","dinner","food","lunch","meal","restaurant","takeout"]},{"name":"rotate_90_degrees_cw","tags":["90","arrow","arrows","ccw","degrees","direction","edit","editing","image","photo","rotate","turn"]},{"name":"install_mobile","tags":["Android","OS","cell","device","hardware","iOS","install","mobile","phone","pwa","tablet"]},{"name":"hearing_disabled","tags":["accessibility","accessible","aid","disabled","ear","enabled","handicap","hearing","help","impaired","listen","off","on","slash","sound","volume"]},{"name":"video_file","tags":["camera","doc","document","film","filming","hardware","image","motion","picture","video","videography"]},{"name":"mms","tags":["bubble","chat","comment","communicate","feedback","image","landscape","message","mms","mountain","mountains","multimedia","photo","photography","picture","speech"]},{"name":"crop_rotate","tags":["adjust","adjustments","area","arrow","arrows","crop","edit","editing","frame","image","images","photo","photos","rotate","settings","size","turn"]},{"name":"wheelchair_pickup","tags":["accessibility","accessible","body","handicap","help","human","person","pickup","wheelchair"]},{"name":"aod","tags":["Android","OS","always","aod","device","display","hardware","homescreen","iOS","mobile","on","phone","tablet"]},{"name":"castle","tags":["castle","fort","fortress","mansion","palace"]},{"name":"interpreter_mode","tags":["interpreter","language","microphone","mode","person","speaking","symbol"]},{"name":"access_alarm","tags":[]},{"name":"forward_5","tags":["10","5","arrow","control","controls","digit","fast","forward","music","number","seconds","symbol","video"]},{"name":"add_to_home_screen","tags":["Android","OS","add to","arrow","cell","device","hardware","home","iOS","mobile","phone","screen","tablet","up"]},{"name":"not_accessible","tags":["accessibility","accessible","body","handicap","help","human","not","person","wheelchair"]},{"name":"signal_cellular_0_bar","tags":["0","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"stadium","tags":["activity","amphitheater","arena","coliseum","event","local","stadium","star","things","ticket"]},{"name":"photo_size_select_large","tags":["adjust","album","edit","editing","image","large","library","mountain","mountains","photo","photography","picture","select","size"]},{"name":"groups_3","tags":["abstract","body","club","collaboration","crowd","gathering","groups","human","meeting","people","person","social","teams"]},{"name":"snowshoeing","tags":["body","human","people","person","snow","snowshoe","snowshoeing","sports","travel","walking","winter"]},{"name":"view_kanban","tags":["grid","kanban","layout","pattern","squares","view"]},{"name":"candlestick_chart","tags":["analytics","candlestick","chart","data","diagram","finance","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"filter_3","tags":["3","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"arrow_outward","tags":["app","application","arrow","arrows","components","direction","forward","interface","navigation","right","screen","site","ui","ux","web","website"]},{"name":"align_horizontal_center","tags":["align","alignment","center","format","horizontal","layout","lines","paragraph","rule","rules","style","text"]},{"name":"flashlight_off","tags":["disabled","enabled","flash","flashlight","light","off","on","slash"]},{"name":"security_update","tags":["Android","OS","arrow","device","down","download","hardware","iOS","mobile","phone","security","tablet","update"]},{"name":"iron","tags":["appliance","clothes","electric","iron","ironing","machine","object"]},{"name":"print_disabled","tags":["disabled","enabled","off","on","paper","print","printer","slash"]},{"name":"pin_invoke","tags":["action","arrow","dot","invoke","pin"]},{"name":"speaker_group","tags":["box","electronic","group","loud","multiple","music","sound","speaker","stereo","system","video"]},{"name":"exposure_zero","tags":["0","brightness","contrast","digit","edit","editing","effect","exposure","image","number","photo","photography","settings","symbol","zero"]},{"name":"bungalow","tags":["architecture","bungalow","cottage","estate","home","house","maps","place","real","residence","residential","stay","traveling"]},{"name":"streetview","tags":["maps","street","streetview","view"]},{"name":"swipe_down","tags":["arrows","direction","disable","down","enable","finger","hands","hit","navigation","strike","swing","swpie","take"]},{"name":"hdr_weak","tags":["circles","dots","dynamic","enhance","hdr","high","range","weak"]},{"name":"css","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","letter","platform","symbol","text","type"]},{"name":"call_missed","tags":["arrow","call","device","missed","mobile"]},{"name":"gps_off","tags":["destination","direction","disabled","enabled","gps","location","maps","not fixed","off","offline","on","place","pointer","slash","tracking"]},{"name":"sports_hockey","tags":["athlete","athletic","entertainment","exercise","game","hobby","hockey","social","sports","sticks"]},{"name":"ice_skating","tags":["athlete","athletic","entertainment","exercise","hobby","ice","shoe","skates","skating","social","sports","travel"]},{"name":"keyboard_capslock","tags":["arrow","capslock","keyboard","up"]},{"name":"earbuds","tags":["accessory","audio","earbuds","earphone","headphone","listen","music","sound"]},{"name":"camera_front","tags":["body","camera","front","human","lens","mobile","person","phone","photography","portrait","selfie"]},{"name":"vertical_distribute","tags":["alignment","distribute","format","layout","lines","paragraph","rule","rules","style","text","vertical"]},{"name":"currency_ruble","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","ruble","shopping","symbol"]},{"name":"signal_wifi_statusbar_null","tags":["cell","cellular","data","internet","mobile","network","null","phone","signal","speed","statusbar","wifi","wireless"]},{"name":"align_horizontal_right","tags":["align","alignment","format","horizontal","layout","lines","paragraph","right","rule","rules","style","text"]},{"name":"crop_5_4","tags":["4","5","adjust","adjustments","area","by","crop","edit","editing settings","frame","image","images","photo","photos","rectangle","size","square"]},{"name":"format_strikethrough","tags":["alphabet","character","doc","edit","editing","editor","font","format","letter","sheet","spreadsheet","strikethrough","style","symbol","text","type","writing"]},{"name":"face_6","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"join_left","tags":["circle","command","join","left","matching","overlap","sql","values"]},{"name":"explicit","tags":["adult","alphabet","character","content","e","explicit","font","language","letter","media","movies","music","symbol","text","type"]},{"name":"extension_off","tags":["disabled","enabled","extended","extension","jigsaw","off","on","piece","puzzle","shape","slash"]},{"name":"perm_camera_mic","tags":["camera","image","microphone","min","perm","photo","photography","picture","speaker"]},{"name":"sports_rugby","tags":["athlete","athletic","ball","entertainment","exercise","game","hobby","rugby","social","sports"]},{"name":"pause_presentation","tags":["app","application desktop","device","pause","present","presentation","screen","share","site","slides","web","website","window","www"]},{"name":"south_america","tags":["continent","landscape","place","region","south america"]},{"name":"sd_storage","tags":["camera","card","data","digital","memory","sd","secure","storage"]},{"name":"superscript","tags":["2","doc","edit","editing","editor","gmail","novitas","sheet","spreadsheet","style","superscript","symbol","text","writing","x"]},{"name":"4g_mobiledata","tags":["4g","alphabet","cellular","character","digit","font","letter","mobile","mobiledata","network","number","phone","signal","speed","symbol","text","type","wifi"]},{"name":"pinch","tags":["arrow","arrows","compress","direction","finger","grasp","hand","navigation","nip","pinch","squeeze","tweak"]},{"name":"lock_person","tags":[]},{"name":"grid_3x3","tags":["3","grid","layout","line","space"]},{"name":"mark_unread_chat_alt","tags":["bubble","chat","circle","comment","communicate","mark","message","notification","speech","unread"]},{"name":"web_stories","tags":["google","images","logo","stories","web"]},{"name":"safety_check","tags":["certified","check","clock","privacy","private","protect","protection","safety","schedule","security","shield","time","verified"]},{"name":"filter_frames","tags":["boarders","border","camera","center","edit","editing","effect","filter","filters","focus","frame","frames","image","options","photo","photography","picture"]},{"name":"spatial_audio_off","tags":["audio","disabled","enabled","music","note","off","offline","on","slash","sound","spatial"]},{"name":"directions_subway","tags":["automobile","car","cars","direction","directions","maps","public","rail","subway","train","transportation","vehicle"]},{"name":"reset_tv","tags":["arrow","device","hardware","monitor","reset","television","tv"]},{"name":"4k","tags":["4000","4K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"burst_mode","tags":["burst","image","landscape","mode","mountain","mountains","multiple","photo","photography","picture"]},{"name":"chalet","tags":["architecture","chalet","cottage","estate","home","house","maps","place","real","residence","residential","stay","traveling"]},{"name":"battery_1_bar","tags":["1","bar","battery","cell","charge","mobile","power"]},{"name":"elderly_woman","tags":["body","cane","elderly","female","gender","girl","human","lady","old","people","person","senior","social","symbol","woman","women"]},{"name":"headset_off","tags":["accessory","audio","chat","device","disabled","ear","earphone","enabled","headphones","headset","listen","mic","music","off","on","slash","sound","talk"]},{"name":"swipe_vertical","tags":["arrows","direction","finger","hands","hit","navigation","strike","swing","swpie","take","verticle"]},{"name":"crib","tags":["babies","baby","bassinet","bed","child","children","cradle","crib","infant","kid","newborn","sleeping","toddler"]},{"name":"video_label","tags":["label","screen","video","window"]},{"name":"fiber_smart_record","tags":["circle","dot","fiber","play","record","smart","watch"]},{"name":"brightness_auto","tags":["A","auto","brightness","control","display","level","mobile","monitor","phone","screen","sun"]},{"name":"margin","tags":["design","layout","margin","padding","size","square"]},{"name":"punch_clock","tags":["clock","date","punch","schedule","time","timer","timesheet"]},{"name":"compass_calibration","tags":["calibration","compass","connection","internet","location","maps","network","refresh","service","signal","wifi","wireless"]},{"name":"mosque","tags":["islam","islamic","masjid","muslim","religion","spiritual","worship"]},{"name":"medication_liquid","tags":["+","bottle","doctor","drug","health","hospital","liquid","medications","medicine","pharmacy","spoon","vessel"]},{"name":"camera_roll","tags":["camera","film","image","library","photo","photography","roll"]},{"name":"pin_end","tags":["action","arrow","dot","end","pin"]},{"name":"dialer_sip","tags":["alphabet","call","cell","character","contact","device","dialer","font","hardware","initiation","internet","letter","mobile","over","phone","protocol","routing","session","sip","symbol","telephone","text","type","voice"]},{"name":"oil_barrel","tags":["barrel","droplet","gas","gasoline","nest","oil","water"]},{"name":"disc_full","tags":["!","alert","attention","caution","cd","danger","disc","error","exclamation","full","important","mark","music","notification","storage","symbol","warning"]},{"name":"signal_cellular_connected_no_internet_4_bar","tags":["!","4","alert","attention","bar","caution","cell","cellular","connected","danger","data","error","exclamation","important","internet","mark","mobile","network","no","notification","phone","signal","symbol","warning","wifi","wireless"]},{"name":"wind_power","tags":["eco","energy","nest","power","wind","windy"]},{"name":"logo_dev","tags":["dev","dev.to","logo"]},{"name":"sledding","tags":["athlete","athletic","body","entertainment","exercise","hobby","human","people","person","sled","sledding","sledge","snow","social","sports","travel","winter"]},{"name":"invert_colors_off","tags":["colors","disabled","drop","droplet","enabled","hue","invert","inverted","off","offline","on","opacity","palette","slash","tone","water"]},{"name":"wifi_lock","tags":["cellular","connection","data","internet","lock","locked","mobile","network","password","privacy","private","protection","safety","secure","security","service","signal","wifi","wireless"]},{"name":"noise_aware","tags":["audio","aware","cancellation","music","noise","note","sound"]},{"name":"face_3","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"car_crash","tags":["accident","automobile","car","cars","collision","crash","direction","maps","public","transportation","vehicle"]},{"name":"comments_disabled","tags":["bubble","chat","comment","comments","communicate","disabled","enabled","feedback","message","off","offline","on","slash","speech"]},{"name":"data_array","tags":["array","brackets","code","coder","data","parentheses"]},{"name":"do_not_disturb_on_total_silence","tags":["busy","disturb","do","mute","no","not","on total","quiet","silence"]},{"name":"filter_b_and_w","tags":["and","b","black","contrast","edit","editing","effect","filter","grayscale","image","images","photography","picture","pictures","settings","w","white"]},{"name":"no_encryption_gmailerrorred","tags":["disabled","enabled","encryption","error","gmail","lock","locked","no","off","on","slash"]},{"name":"blur_linear","tags":["blur","dots","edit","editing","effect","enhance","filter","linear"]},{"name":"view_cozy","tags":["comfy","cozy","design","format","layout","view","web"]},{"name":"wifi_calling","tags":["call","calling","cell","connect","connection","connectivity","contact","device","hardware","mobile","phone","signal","telephone","wifi","wireless"]},{"name":"electric_rickshaw","tags":["automobile","car","cars","electric","india","maps","rickshaw","transportation","truck","vehicle"]},{"name":"rtt","tags":["call","real","rrt","text","time"]},{"name":"join_right","tags":["circle","command","join","matching","overlap","right","sql","values"]},{"name":"crop_3_2","tags":["2","3","adjust","adjustments","area","by","crop","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"crop_landscape","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","landscape","photo","photos","settings","size"]},{"name":"nearby_error","tags":["!","alert","attention","caution","danger","error","exclamation","important","mark","nearby","notification","symbol","warning"]},{"name":"airplanemode_inactive","tags":["airplane","airplanemode","airport","disabled","enabled","flight","fly","inactive","maps","mode","off","offline","on","slash","transportation","travel"]},{"name":"airline_stops","tags":["airline","arrow","destination","direction","layover","location","maps","place","stops","transportation","travel","trip"]},{"name":"bluetooth_audio","tags":["audio","bluetooth","connect","connection","device","music","signal","sound","symbol"]},{"name":"portable_wifi_off","tags":["connection","data","disabled","enabled","internet","network","off","offline","on","portable","service","signal","slash","wifi","wireless"]},{"name":"turn_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sign","traffic","turn"]},{"name":"1x_mobiledata","tags":["1x","alphabet","cellular","character","digit","font","letter","mobile","mobiledata","network","number","phone","signal","speed","symbol","text","type","wifi"]},{"name":"do_not_step","tags":["boot","disabled","do","enabled","feet","foot","not","off","on","shoe","slash","sneaker","step","steps"]},{"name":"sensor_occupied","tags":["body","body response","connection","fitbit","human","network","people","person","scan","sensors","signal","smart body scan sensor","wireless"]},{"name":"directions_railway","tags":["automobile","car","cars","direction","directions","maps","public","railway","train","transportation","vehicle"]},{"name":"security_update_warning","tags":["!","Android","OS","alert","attention","caution","danger","device","download","error","exclamation","hardware","iOS","important","mark","mobile","notification","phone","security","symbol","tablet","update","warning"]},{"name":"pentagon","tags":["five sides","pentagon","shape"]},{"name":"wrap_text","tags":["arrow writing","doc","edit","editing","editor","sheet","spreadsheet","text","type","wrap","write","writing"]},{"name":"no_meeting_room","tags":["building","disabled","door","doorway","enabled","entrance","home","house","interior","meeting","no","off","office","on","open","places","room","slash"]},{"name":"sd_card_alert","tags":["!","alert","attention","camera","card","caution","danger","digital","error","exclamation","important","mark","memory","notification","photos","sd","secure","storage","symbol","warning"]},{"name":"deselect","tags":["all","disabled","enabled","off","on","selection","slash","square","tool"]},{"name":"switch_camera","tags":["arrow","arrows","camera","photo","photography","picture","switch"]},{"name":"text_rotate_up","tags":["A","alphabet","arrow","character","field","font","letter","move","rotate","symbol","text","type","up"]},{"name":"sync_lock","tags":["around","arrow","arrows","lock","locked","password","privacy","private","protection","renew","rotate","safety","secure","security","sync","turn"]},{"name":"switch_video","tags":["arrow","arrows","camera","photography","switch","video","videos"]},{"name":"border_clear","tags":["border","clear","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"repeat_one_on","tags":["arrow","arrows","control","controls","digit","media","music","number","on","one","repeat","symbol","video"]},{"name":"no_meals","tags":["dining","disabled","eat","enabled","food","fork","knife","meal","meals","no","off","on","restaurant","slash","spoon","utensils"]},{"name":"align_vertical_top","tags":["align","alignment","format","layout","lines","paragraph","rule","rules","style","text","top","vertical"]},{"name":"subscript","tags":["2","doc","edit","editing","editor","gmail","novitas","sheet","spreadsheet","style","subscript","symbol","text","writing","x"]},{"name":"font_download_off","tags":["alphabet","character","disabled","download","enabled","font","letter","off","on","slash","square","symbol","text","type"]},{"name":"scoreboard","tags":["board","points","score","scoreboard","sports"]},{"name":"swipe_right_alt","tags":["accept","alt","arrows","direction","finger","hands","hit","navigation","right","strike","swing","swpie","take"]},{"name":"align_vertical_center","tags":["align","alignment","center","format","layout","lines","paragraph","rule","rules","style","text","vertical"]},{"name":"electric_meter","tags":["bolt","electric","energy","fast","lightning","measure","meter","nest","thunderbolt","usage","voltage","volts"]},{"name":"contact_emergency","tags":["account","avatar","call","cell","contacts","face","human","info","information","mobile","people","person","phone","profile","user"]},{"name":"signal_cellular_connected_no_internet_0_bar","tags":["!","0","alert","attention","bar","caution","cell","cellular","connected","danger","data","error","exclamation","important","internet","mark","mobile","network","no","notification","phone","signal","symbol","warning","wifi","wireless"]},{"name":"sim_card_alert","tags":["!","alert","attention","camera","card","caution","danger","digital","error","exclamation","important","mark","memory","notification","photos","sd","secure","storage","symbol","warning"]},{"name":"battery_2_bar","tags":["2","bar","battery","cell","charge","mobile","power"]},{"name":"text_rotation_angleup","tags":["A","alphabet","angleup","arrow","character","field","font","letter","move","rotate","symbol","text","type"]},{"name":"text_rotation_down","tags":["A","alphabet","arrow","character","dow","field","font","letter","move","rotate","symbol","text","type"]},{"name":"railway_alert","tags":["!","alert","attention","automobile","bike","car","cars","caution","danger","direction","error","exclamation","important","maps","mark","notification","public","railway","scooter","subway","symbol","train","transportation","vehicle","vespa","warning"]},{"name":"escalator","tags":["down","escalator","staircase","up"]},{"name":"electric_moped","tags":["automobile","bike","car","cars","electric","maps","moped","scooter","transportation","travel","vehicle","vespa"]},{"name":"closed_caption_disabled","tags":["accessible","alphabet","caption","cc","character","closed","decoder","disabled","enabled","font","language","letter","media","movies","off","on","slash","subtitle","subtitles","symbol","text","tv","type"]},{"name":"filter_7","tags":["7","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"heat_pump","tags":["air conditioner","cool","energy","furnance","heat","nest","pump","usage"]},{"name":"dry","tags":["air","bathroom","dry","dryer","fingers","gesture","hand","wc"]},{"name":"fork_right","tags":["arrow","arrows","direction","directions","fork","maps","navigation","path","right","route","sign","traffic"]},{"name":"text_rotation_angledown","tags":["A","alphabet","angledown","arrow","character","field","font","letter","move","rotate","symbol","text","type"]},{"name":"do_not_disturb_off","tags":["cancel","close","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","slash","stop"]},{"name":"screen_lock_portrait","tags":["Android","OS","device","hardware","iOS","lock","mobile","phone","portrait","rotate","screen","tablet"]},{"name":"send_time_extension","tags":["deliver","dispatch","envelop","extension","mail","message","schedule","send","time"]},{"name":"keyboard_command_key","tags":["button","command key","control","keyboard"]},{"name":"remove_from_queue","tags":["desktop","device","display","from","hardware","monitor","queue","remove","screen","steam"]},{"name":"filter_4","tags":["4","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"filter_9_plus","tags":["+","9","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","plus","settings","stack","symbol"]},{"name":"exposure_plus_2","tags":["2","add","brightness","contrast","digit","edit","editing","effect","exposure","image","number","photo","photography","plus","settings","symbol"]},{"name":"surround_sound","tags":["circle","signal","sound","speaker","surround","system","volumn","wireless"]},{"name":"airline_seat_individual_suite","tags":["airline","body","business","class","first","human","individual","people","person","rest","seat","sleep","suite","travel"]},{"name":"home_max","tags":["device","gadget","hardware","home","internet","iot","max","nest","smart","things"]},{"name":"phone_paused","tags":["call","cell","contact","device","hardware","mobile","pause","paused","phone","telephone"]},{"name":"local_play","tags":[]},{"name":"stroller","tags":["baby","care","carriage","child","children","infant","kid","newborn","stroller","toddler","young"]},{"name":"wifi_password","tags":["(scan)","[cellular","connection","data","internet","lock","mobile]","network","password","secure","service","signal","wifi","wireless"]},{"name":"browse_gallery","tags":["clock","collection","gallery","library","stack","watch"]},{"name":"system_security_update","tags":["Android","OS","arrow","cell","device","down","hardware","iOS","mobile","phone","security","system","tablet","update"]},{"name":"person_2","tags":["account","face","human","people","person","profile","user"]},{"name":"screenshot_monitor","tags":["Android","OS","chrome","desktop","device","display","hardware","iOS","mac","monitor","screen","screengrab","screenshot","web","window"]},{"name":"wb_iridescent","tags":["balance","bright","edit","editing","iridescent","light","lighting","setting","settings","white","wp"]},{"name":"grid_off","tags":["collage","disabled","enabled","grid","image","layout","off","on","slash","view"]},{"name":"system_security_update_warning","tags":["!","Android","OS","alert","attention","caution","cell","danger","device","error","exclamation","hardware","iOS","important","mark","mobile","notification","phone","security","symbol","system","tablet","update","warning"]},{"name":"play_disabled","tags":["control","controls","disabled","enabled","media","music","off","on","play","slash","video"]},{"name":"php","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","letter","php","platform","symbol","text","type"]},{"name":"phishing","tags":["fish","fishing","fraud","hook","phishing","scam"]},{"name":"border_style","tags":["border","color","doc","edit","editing","editor","sheet","spreadsheet","stroke","style","text","type","writing"]},{"name":"motion_photos_paused","tags":["animation","circle","motion","pause","paused","photos","video"]},{"name":"headphones_battery","tags":["accessory","audio","battery","charging","device","ear","earphone","headphones","headset","listen","music","sound"]},{"name":"monochrome_photos","tags":["black","camera","image","monochrome","photo","photography","photos","picture","white"]},{"name":"web_asset_off","tags":["asset","browser","disabled","enabled","internet","off","on","page","screen","slash","web","webpage","website","windows","www"]},{"name":"wifi_tethering_off","tags":["cell","cellular","connection","data","disabled","enabled","internet","mobile","network","off","offline","on","phone","scan","service","signal","slash","speed","tethering","wifi","wireless"]},{"name":"text_decrease","tags":["-","alphabet","character","decrease","font","letter","minus","remove","resize","subtract","symbol","text","type"]},{"name":"view_comfy_alt","tags":["alt","comfy","cozy","design","format","layout","view","web"]},{"name":"photo_camera_back","tags":["back","camera","image","landscape","mountain","mountains","photo","photography","picture","rear"]},{"name":"folder_off","tags":["data","disabled","doc","document","drive","enabled","file","folder","folders","off","on","online","sheet","slash","slide","storage"]},{"name":"gas_meter","tags":["droplet","energy","gas","measure","meter","nest","usage","water"]},{"name":"edgesensor_high","tags":["Android","OS","cell","device","edge","hardware","high","iOS","mobile","move","phone","sensitivity","sensor","tablet","vibrate"]},{"name":"filter_5","tags":["5","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"stay_current_landscape","tags":["Android","OS","current","device","hardware","iOS","landscape","mobile","phone","stay","tablet"]},{"name":"sip","tags":["alphabet","call","character","dialer","font","initiation","internet","letter","over","phone","protocol","routing","session","sip","symbol","text","type","voice"]},{"name":"power_input","tags":["input","lines","power","supply"]},{"name":"smart_screen","tags":["Android","OS","airplay","cast","cell","connect","device","hardware","iOS","mobile","phone","screen","screencast","smart","stream","tablet","video"]},{"name":"mail_lock","tags":["email","envelop","letter","lock","locked","mail","message","password","privacy","private","protection","safety","secure","security","send"]},{"name":"dataset","tags":[]},{"name":"nat","tags":["communication","nat"]},{"name":"do_disturb_off","tags":["cancel","close","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","slash","stop"]},{"name":"no_drinks","tags":["alcohol","beverage","bottle","cocktail","drink","drinks","food","liquor","no","wine"]},{"name":"bike_scooter","tags":["automobile","bike","car","cars","maps","scooter","transportation","vehicle","vespa"]},{"name":"dock","tags":["Android","OS","cell","charging","connector","device","dock","hardware","iOS","mobile","phone","power","station","tablet"]},{"name":"face_2","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"face_retouching_off","tags":["disabled","edit","editing","effect","emoji","emotion","enabled","face","faces","image","natural","off","on","photo","photography","retouch","retouching","settings","slash","tag"]},{"name":"auto_fix_off","tags":["ai","artificial","auto","automatic","automation","custom","disabled","edit","enabled","erase","fix","genai","intelligence","magic","modify","off","on","slash","smart","spark","sparkle","star","wand"]},{"name":"airline_seat_flat","tags":["airline","body","business","class","first","flat","human","people","person","rest","seat","sleep","travel"]},{"name":"phone_locked","tags":["call","cell","contact","device","hardware","lock","locked","mobile","password","phone","privacy","private","protection","safety","secure","security","telephone"]},{"name":"network_locked","tags":["alert","available","cellular","connection","data","error","internet","lock","locked","mobile","network","not","privacy","private","protection","restricted","safety","secure","security","service","signal","warning","wifi","wireless"]},{"name":"padding","tags":["design","layout","margin","padding","size","square"]},{"name":"browser_not_supported","tags":["browser","disabled","enabled","internet","not","off","on","page","screen","site","slash","supported","web","website","www"]},{"name":"border_outer","tags":["border","doc","edit","editing","editor","outer","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"exposure_neg_1","tags":["1","brightness","contrast","digit","edit","editing","effect","exposure","image","neg","negative","number","photo","photography","settings","symbol"]},{"name":"view_compact_alt","tags":["alt","compact","design","format","layout dense","view","web"]},{"name":"pest_control_rodent","tags":["control","exterminator","mice","pest","rodent"]},{"name":"swipe_down_alt","tags":["alt","arrows","direction","disable","down","enable","finger","hands","hit","navigation","strike","swing","swpie","take"]},{"name":"airlines","tags":["airlines","airplane","airport","flight","plane","transportation","travel","trip"]},{"name":"turn_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","route","sign","traffic","turn"]},{"name":"sd","tags":["alphabet","camera","card","character","data","device","digital","drive","flash","font","image","letter","memory","photo","sd","secure","symbol","text","type"]},{"name":"near_me_disabled","tags":["destination","direction","disabled","enabled","location","maps","me","navigation","near","off","on","pin","place","point","slash"]},{"name":"face_4","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"stay_primary_landscape","tags":["Android","OS","current","device","hardware","iOS","landscape","mobile","phone","primary","stay","tablet"]},{"name":"4g_plus_mobiledata","tags":["4g","alphabet","cellular","character","digit","font","letter","mobile","mobiledata","network","number","phone","plus","signal","speed","symbol","text","type","wifi"]},{"name":"snowmobile","tags":["automobile","car","direction","skimobile","snow","snowmobile","social","sports","transportation","travel","vehicle","winter"]},{"name":"sign_language","tags":["communication","deaf","fingers","gesture","hand","language","sign"]},{"name":"network_ping","tags":["alert","available","cellular","connection","data","internet","ip","mobile","network","ping","service","signal","wifi","wireless"]},{"name":"signal_cellular_off","tags":["cell","cellular","data","disabled","enabled","internet","mobile","network","off","offline","on","phone","signal","slash","wifi","wireless"]},{"name":"signal_cellular_nodata","tags":["cell","cellular","data","internet","mobile","network","no","nodata","offline","phone","quit","signal","wifi","wireless","x"]},{"name":"no_sim","tags":["camera","card","device","eject","insert","memory","no","phone","sim","storage"]},{"name":"signal_wifi_4_bar_lock","tags":["4","bar","cell","cellular","data","internet","lock","locked","mobile","network","password","phone","privacy","private","protection","safety","secure","security","signal","wifi","wireless"]},{"name":"missed_video_call","tags":["arrow","call","camera","film","filming","hardware","image","missed","motion","picture","record","video","videography"]},{"name":"lte_mobiledata","tags":["alphabet","character","data","font","internet","letter","lte","mobile","network","speed","symbol","text","type","wifi","wireless"]},{"name":"earbuds_battery","tags":["accessory","audio","battery","charging","earbuds","earphone","headphone","listen","music","sound"]},{"name":"panorama_photosphere","tags":["angle","horizontal","image","panorama","photo","photography","photosphere","picture","wide"]},{"name":"no_crash","tags":["accident","auto","automobile","car","cars","check","collision","confirm","correct","crash","direction","done","enter","maps","mark","no","ok","okay","select","tick","transportation","vehicle","yes"]},{"name":"add_alarm","tags":[]},{"name":"directions_transit_filled","tags":["automobile","car","cars","direction","directions","filled","maps","public","rail","subway","train","transit","transportation","vehicle"]},{"name":"u_turn_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","route","sign","traffic","u-turn"]},{"name":"line_axis","tags":["axis","dash","horizontal","line","stroke","vertical"]},{"name":"density_large","tags":["density","horizontal","large","lines","rule","rules"]},{"name":"location_disabled","tags":["destination","direction","disabled","enabled","location","maps","off","on","pin","place","pointer","slash","stop","tracking"]},{"name":"bluetooth_drive","tags":["automobile","bluetooth","car","cars","cast","connect","connection","device","drive","maps","paring","streaming","symbol","transportation","travel","vehicle","wireless"]},{"name":"30fps","tags":["30fps","alphabet","camera","character","digit","font","fps","frames","letter","number","symbol","text","type","video"]},{"name":"no_luggage","tags":["bag","baggage","carry","disabled","enabled","luggage","no","off","on","slash","suitcase","travel"]},{"name":"leak_remove","tags":["connection","data","disabled","enabled","leak","link","network","off","offline","on","remove","service","signals","slash","synce","wireless"]},{"name":"filter_8","tags":["8","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"mobile_off","tags":["Android","OS","cell","device","disabled","enabled","hardware","iOS","mobile","off","on","phone","silence","slash","tablet"]},{"name":"key_off","tags":["disabled","enabled","key","lock","off","offline","on","password","slash","unlock"]},{"name":"signal_cellular_null","tags":["cell","cellular","data","internet","mobile","network","null","phone","signal","wifi","wireless"]},{"name":"phonelink_off","tags":["Android","OS","chrome","computer","connect","desktop","device","disabled","enabled","hardware","iOS","link","mac","mobile","off","on","phone","phonelink","slash","sync","tablet","web","windows"]},{"name":"filter_9","tags":["9","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"home_mini","tags":["Internet","device","gadget","hardware","home","iot","mini","nest","smart","things"]},{"name":"on_device_training","tags":["arrow","bulb","call","cell","contact","device","hardware","idea","inprogress","light","load","loading","mobile","model","phone","refresh","renew","restore","reverse","rotate","telephone","training"]},{"name":"egg_alt","tags":["breakfast","brunch","egg","food"]},{"name":"media_bluetooth_on","tags":["bluetooth","connect","connection","connectivity","device","disabled","enabled","media","music","note","off","on","online","paring","signal","slash","symbol","wireless"]},{"name":"10k","tags":["10000","10K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"video_stable","tags":["film","filming","recording","setting","stability","stable","taping","video"]},{"name":"add_home","tags":[]},{"name":"no_transfer","tags":["automobile","bus","car","cars","direction","disabled","enabled","maps","no","off","on","public","slash","transfer","transportation","vehicle"]},{"name":"timer_10","tags":["10","digits","duration","number","numbers","seconds","time","timer"]},{"name":"directions_subway_filled","tags":["automobile","car","cars","direction","directions","filled","maps","public","rail","subway","train","transportation","vehicle"]},{"name":"wb_shade","tags":["balance","house","light","lighting","shade","wb","white"]},{"name":"swipe_left_alt","tags":["alt","arrow","arrows","finger","hand","hit","left","navigation","reject","strike","swing","swipe","take"]},{"name":"filter_6","tags":["6","digit","edit","editing","effect","filter","image","images","multiple","number","photography","picture","pictures","settings","stack","symbol"]},{"name":"cyclone","tags":["crisis","disaster","natural","rain","storm","weather","wind","winds"]},{"name":"network_wifi_1_bar","tags":[]},{"name":"directions_railway_filled","tags":["automobile","car","cars","direction","directions","filled","maps","public","railway","train","transportation","vehicle"]},{"name":"wifi_find","tags":["(scan)","[cellular","connection","data","detect","discover","find","internet","look","magnifying glass","mobile]","network","notice","search","service","signal","wifi","wireless"]},{"name":"blur_off","tags":["blur","disabled","dots","edit","editing","effect","enabled","enhance","off","on","slash"]},{"name":"motion_photos_off","tags":["animation","circle","disabled","enabled","motion","off","on","photos","slash","video"]},{"name":"lyrics","tags":["audio","bubble","chat","comment","communicate","feedback","key","lyrics","message","music","note","song","sound","speech","track"]},{"name":"raw_on","tags":["alphabet","character","disabled","enabled","font","image","letter","off","on","original","photo","photography","raw","slash","symbol","text","type"]},{"name":"flight_class","tags":["airplane","business","class","first","flight","plane","seat","transportation","travel","trip","window"]},{"name":"insert_page_break","tags":["break","doc","document","file","page","paper"]},{"name":"rsvp","tags":["alphabet","character","font","invitation","invite","letter","plaît","respond","rsvp","répondez","sil","symbol","text","type","vous"]},{"name":"tire_repair","tags":["auto","automobile","car","cars","gauge","mechanic","pressure","repair","tire","vehicle"]},{"name":"swipe_up_alt","tags":["alt","arrows","direction","disable","enable","finger","hands","hit","navigation","strike","swing","swpie","take","up"]},{"name":"3g_mobiledata","tags":["3g","alphabet","cellular","character","digit","font","letter","mobile","mobiledata","network","number","phone","signal","speed","symbol","text","type","wifi"]},{"name":"tv_off","tags":["Android","OS","chrome","desktop","device","disabled","enabled","hardware","iOS","mac","monitor","off","on","slash","television","tv","web","window"]},{"name":"hdr_on","tags":["add","alphabet","character","dynamic","enhance","font","hdr","high","letter","on","plus","range","select","symbol","text","type"]},{"name":"add_home_work","tags":[]},{"name":"motion_photos_pause","tags":["animation","circle","motion","pause","paused","photos","video"]},{"name":"edgesensor_low","tags":["Android","cell","device","edge","hardware","iOS","low","mobile","move","phone","sensitivity","sensor","tablet","vibrate"]},{"name":"grid_goldenratio","tags":["golden","goldenratio","grid","layout","lines","ratio","space"]},{"name":"network_wifi_3_bar","tags":[]},{"name":"temple_buddhist","tags":["buddha","buddhism","buddhist","monastery","religion","spiritual","temple","worship"]},{"name":"airline_seat_flat_angled","tags":["airline","angled","body","business","class","first","flat","human","people","person","rest","seat","sleep","travel"]},{"name":"fort","tags":["castle","fort","fortress","mansion","palace"]},{"name":"spatial_tracking","tags":["audio","disabled","enabled","music","note","off","offline","on","slash","sound","spatial","tracking"]},{"name":"screen_lock_rotation","tags":["Android","OS","arrow","device","hardware","iOS","lock","mobile","phone","rotate","rotation","screen","tablet","turn"]},{"name":"fiber_pin","tags":["alphabet","character","fiber","font","letter","network","pin","symbol","text","type"]},{"name":"phone_bluetooth_speaker","tags":["bluetooth","call","cell","connect","connection","connectivity","contact","device","hardware","mobile","phone","signal","speaker","symbol","telephone","wireless"]},{"name":"vignette","tags":["border","edit","editing","filter","gradient","image","photo","photography","setting","vignette"]},{"name":"panorama_horizontal","tags":["angle","horizontal","image","panorama","photo","photography","picture","wide"]},{"name":"propane_tank","tags":["bbq","gas","grill","nest","propane","tank"]},{"name":"kebab_dining","tags":["dining","dinner","food","kebab","meal","meat","skewer"]},{"name":"developer_board_off","tags":["board","chip","computer","developer","development","disabled","enabled","hardware","microchip","off","on","processor","slash"]},{"name":"adf_scanner","tags":["adf","document","feeder","machine","office","scan","scanner"]},{"name":"no_cell","tags":["Android","OS","cell","device","disabled","enabled","hardware","iOS","mobile","no","off","on","phone","slash","tablet"]},{"name":"dirty_lens","tags":["camera","dirty","lens","photo","photography","picture","splat"]},{"name":"usb_off","tags":["cable","connection","device","off","usb","wire"]},{"name":"image_aspect_ratio","tags":["aspect","image","photo","photography","picture","ratio","rectangle","square"]},{"name":"30fps_select","tags":["30","camera","digits","fps","frame","frequency","image","numbers","per","rate","second","seconds","select","video"]},{"name":"60fps","tags":["60fps","camera","digit","fps","frames","number","symbol","video"]},{"name":"screen_lock_landscape","tags":["Android","OS","device","hardware","iOS","landscape","lock","mobile","phone","rotate","screen","tablet"]},{"name":"lte_plus_mobiledata","tags":["+","alphabet","character","data","font","internet","letter","lte","mobile","network","plus","speed","symbol","text","type","wifi","wireless"]},{"name":"piano_off","tags":["disabled","enabled","instrument","keyboard","keys","music","musical","off","on","piano","slash","social"]},{"name":"unfold_more_double","tags":["arrow","arrows","chevron","collapse","direction","double","down","expand","expandable","list","more","navigation","unfold"]},{"name":"deblur","tags":["adjust","deblur","edit","editing","enhance","face","image","lines","photo","photography","sharpen"]},{"name":"person_4","tags":["account","face","human","people","person","profile","user"]},{"name":"spatial_audio","tags":["audio","music","note","sound","spatial"]},{"name":"camera_rear","tags":["camera","front","lens","mobile","phone","photo","photography","picture","portrait","rear","selfie"]},{"name":"timer_10_select","tags":["10","alphabet","camera","character","digit","font","letter","number","seconds","select","symbol","text","timer","type"]},{"name":"face_5","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"minor_crash","tags":["accident","auto","automobile","car","cars","collision","directions","maps","public","transportation","vehicle"]},{"name":"sos","tags":["font","help","letters","save","sos","text","type"]},{"name":"videogame_asset_off","tags":["asset","console","controller","device","disabled","enabled","game","gamepad","gaming","off","on","playstation","slash","video","videogame"]},{"name":"flood","tags":["crisis","disaster","natural","rain","storm","weather"]},{"name":"60fps_select","tags":["60","camera","digits","fps","frame","frequency","numbers","per","rate","second","seconds","select","video"]},{"name":"timer_3","tags":["3","digits","duration","number","numbers","seconds","time","timer"]},{"name":"vpn_key_off","tags":["code","disabled","enabled","key","lock","network","off","offline","on","passcode","password","slash","unlock","vpn"]},{"name":"directions_off","tags":["arrow","directions","disabled","enabled","maps","off","on","right","route","sign","slash","traffic"]},{"name":"emergency_share","tags":["alert","attention","caution","danger","emergency","important","notification","share","warning"]},{"name":"panorama_wide_angle_select","tags":["angle","image","panorama","photo","photography","picture","select","wide"]},{"name":"airline_seat_legroom_normal","tags":["airline","body","feet","human","leg","legroom","normal","people","person","seat","sitting","space","travel"]},{"name":"fiber_dvr","tags":["alphabet","character","digital","dvr","electronics","fiber","font","letter","network","record","recorder","symbol","text","tv","type","video"]},{"name":"person_3","tags":["account","face","human","people","person","profile","user"]},{"name":"scuba_diving","tags":["diving","entertainment","exercise","hobby","scuba","social","swim","swimming"]},{"name":"signal_cellular_no_sim","tags":["camera","card","cellular","chip","device","disabled","enabled","memory","no","off","offline","on","phone","signal","sim","slash","storage"]},{"name":"24mp","tags":["24","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"exposure_neg_2","tags":["2","brightness","contrast","digit","edit","editing","effect","exposure","image","neg","negative","number","photo","photography","settings","symbol"]},{"name":"network_wifi_2_bar","tags":[]},{"name":"wifi_2_bar","tags":["2","bar","cell","cellular","connection","data","internet","mobile","network","phone","scan","service","signal","wifi","wireless"]},{"name":"u_turn_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sign","traffic","u-turn"]},{"name":"currency_yuan","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","shopping","symbol","yuan"]},{"name":"currency_lira","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","lira","money","online","pay","payment","price","shopping","symbol"]},{"name":"no_flash","tags":["bolt","camera","disabled","enabled","flash","image","lightning","no","off","on","photo","photography","picture","slash","thunderbolt"]},{"name":"temple_hindu","tags":["hindu","hinduism","hindus","mandir","religion","spiritual","temple","worship"]},{"name":"mode_fan_off","tags":["air conditioner","cool","disabled","enabled","fan","nest","off","on","slash"]},{"name":"airline_seat_legroom_extra","tags":["airline","body","extra","feet","human","leg","legroom","people","person","seat","sitting","space","travel"]},{"name":"4k_plus","tags":["+","4000","4K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"border_inner","tags":["border","doc","edit","editing","editor","inner","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"wifi_tethering_error","tags":["!","alert","attention","caution","cell","cellular","connection","danger","data","error","exclamation","important","internet","mark","mobile","network","notification","phone","rounded","scan","service","signal","speed","symbol","tethering","warning","wifi","wireless"]},{"name":"airline_seat_legroom_reduced","tags":["airline","body","feet","human","leg","legroom","people","person","reduced","seat","sitting","space","travel"]},{"name":"synagogue","tags":["jew","jewish","religion","shul","spiritual","temple","worship"]},{"name":"border_left","tags":["border","doc","edit","editing","editor","left","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"autofps_select","tags":["A","alphabet","auto","character","font","fps","frame","frequency","letter","per","rate","second","seconds","select","symbol","text","type"]},{"name":"signal_cellular_alt_2_bar","tags":["2","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"g_mobiledata","tags":["alphabet","character","data","font","g","letter","mobile","network","service","symbol","text","type"]},{"name":"1k","tags":["1000","1K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"format_textdirection_l_to_r","tags":["align","alignment","doc","edit","editing","editor","format","ltr","sheet","spreadsheet","text","textdirection","type","writing"]},{"name":"border_bottom","tags":["border","bottom","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"fork_left","tags":["arrow","arrows","direction","directions","fork","left","maps","navigation","path","route","sign","traffic"]},{"name":"severe_cold","tags":["!","alert","attention","caution","climate","cold","crisis","danger","disaster","error","exclamation","important","notification","severe","snow","snowflake","warning","weather","winter"]},{"name":"tsunami","tags":["crisis","disaster","flood","rain","storm","tsunami","weather"]},{"name":"signal_cellular_alt_1_bar","tags":["1","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"border_vertical","tags":["border","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","vertical","writing"]},{"name":"turn_sharp_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sharp","sign","traffic","turn"]},{"name":"no_backpack","tags":["accessory","backpack","bag","bookbag","knapsack","no","pack","travel"]},{"name":"remove_road","tags":["-","cancel","close","destination","direction","exit","highway","maps","minus","new","no","remove","road","stop","street","symbol","traffic","x"]},{"name":"timer_3_select","tags":["3","alphabet","camera","character","digit","font","letter","number","seconds","select","symbol","text","timer","type"]},{"name":"roller_skating","tags":["athlete","athletic","entertainment","exercise","hobby","roller","shoe","skate","skates","skating","social","sports","travel"]},{"name":"panorama_horizontal_select","tags":["angle","horizontal","image","panorama","photo","photography","picture","select","wide"]},{"name":"border_horizontal","tags":["border","doc","edit","editing","editor","horizontal","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"2k","tags":["2000","2K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"wifi_1_bar","tags":["1","bar","cell","cellular","connection","data","internet","mobile","network","phone","scan","service","signal","wifi","wireless"]},{"name":"format_textdirection_r_to_l","tags":["align","alignment","doc","edit","editing","editor","format","rtl","sheet","spreadsheet","text","textdirection","type","writing"]},{"name":"wifi_channel","tags":["(scan)","[cellular","channel","connection","data","internet","mobile]","network","service","signal","wifi","wireless"]},{"name":"roundabout_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","roundabout","route","sign","traffic"]},{"name":"wb_auto","tags":["A","W","alphabet","auto","automatic","balance","character","edit","editing","font","image","letter","photo","photography","symbol","text","type","white","wp"]},{"name":"panorama_photosphere_select","tags":["angle","horizontal","image","panorama","photo","photography","photosphere","picture","select","wide"]},{"name":"panorama_wide_angle","tags":["angle","image","panorama","photo","photography","picture","wide"]},{"name":"hdr_plus","tags":["+","add","alphabet","character","circle","dynamic","enhance","font","hdr","high","letter","plus","range","select","symbol","text","type"]},{"name":"panorama_vertical_select","tags":["angle","image","panorama","photo","photography","picture","select","vertical","wide"]},{"name":"border_top","tags":["border","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","top","type","writing"]},{"name":"mic_external_off","tags":["audio","disabled","enabled","external","mic","microphone","off","on","slash","sound","voice"]},{"name":"width_full","tags":[]},{"name":"h_mobiledata","tags":["alphabet","character","data","font","h","letter","mobile","network","service","symbol","text","type"]},{"name":"roller_shades","tags":["blinds","cover","curtains","nest","open","roller","shade","shutter","sunshade"]},{"name":"no_stroller","tags":["baby","care","carriage","child","children","disabled","enabled","infant","kid","newborn","no","off","on","parents","slash","stroller","toddler","young"]},{"name":"tornado","tags":["crisis","disaster","natural","rain","storm","tornado","weather","wind"]},{"name":"keyboard_control_key","tags":["control key","keyboard"]},{"name":"turn_slight_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sharp","sign","slight","traffic","turn"]},{"name":"border_right","tags":["border","doc","edit","editing","editor","right","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"1k_plus","tags":["+","1000","1K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"turn_slight_left","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sign","slight","traffic","turn"]},{"name":"screen_rotation_alt","tags":["Android","OS","arrow","device","hardware","iOS","mobile","phone","rotate","rotation","screen","tablet","turn"]},{"name":"dataset_linked","tags":[]},{"name":"unfold_less_double","tags":["arrow","arrows","chevron","collapse","direction","double","expand","expandable","inward","less","list","navigation","unfold","up"]},{"name":"8k","tags":["8000","8K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"landslide","tags":["crisis","disaster","natural","rain","storm","weather"]},{"name":"media_bluetooth_off","tags":["bluetooth","connect","connection","connectivity","device","disabled","enabled","media","music","note","off","offline","on","paring","signal","slash","symbol","wireless"]},{"name":"fire_truck","tags":[]},{"name":"e_mobiledata","tags":["alphabet","data","e","font","letter","mobile","mobiledata","text","type"]},{"name":"panorama_vertical","tags":["angle","image","panorama","photo","photography","picture","vertical","wide"]},{"name":"r_mobiledata","tags":["alphabet","character","data","font","letter","mobile","r","symbol","text","type"]},{"name":"12mp","tags":["12","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"repartition","tags":["arrow","arrows","data","partition","refresh","renew","repartition","restore","table"]},{"name":"width_normal","tags":[]},{"name":"h_plus_mobiledata","tags":["+","alphabet","character","data","font","h","letter","mobile","network","plus","service","symbol","text","type"]},{"name":"hdr_enhanced_select","tags":["add","alphabet","character","dynamic","enhance","font","hdr","high","letter","plus","range","select","symbol","text","type"]},{"name":"mp","tags":["alphabet","character","font","image","letter","megapixel","mp","photo","photography","pixels","quality","resolution","symbol","text","type"]},{"name":"shape_line","tags":["circle","draw","edit","editing","line","shape","square"]},{"name":"9k_plus","tags":["+","9000","9K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"5k","tags":["5000","5K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"hevc","tags":["alphabet","character","coding","efficiency","font","hevc","high","letter","symbol","text","type","video"]},{"name":"currency_franc","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","franc","money","online","pay","payment","price","shopping","symbol"]},{"name":"8k_plus","tags":["+","7000","8K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"hdr_on_select","tags":["+","alphabet","camera","character","circle","dynamic","font","hdr","high","letter","on","photo","range","select","symbol","text","type"]},{"name":"3k","tags":["3000","3K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"transcribe","tags":[]},{"name":"width_wide","tags":[]},{"name":"hdr_auto_select","tags":["+","A","alphabet","auto","camera","character","circle","dynamic","font","hdr","high","letter","photo","range","select","symbol","text","type"]},{"name":"hls","tags":["alphabet","character","develop","developer","engineer","engineering","font","hls","letter","platform","symbol","text","type"]},{"name":"5k_plus","tags":["+","5000","5K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"assist_walker","tags":["accessibility","accessible","assist","body","disability","handicap","help","human","injured","injury","mobility","person","walk","walker"]},{"name":"hls_off","tags":["alphabet","character","develop","developer","disabled","enabled","engineer","engineering","font","hls","letter","off","offline","on","platform","slash","symbol","text","type"]},{"name":"18mp","tags":["18","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"format_overline","tags":["alphabet","character","doc","edit","editing","editor","font","format","letter","line","overline","sheet","spreadsheet","style","symbol","text","type","under","writing"]},{"name":"volcano","tags":["crisis","disaster","eruption","lava","magma","natural","volcano"]},{"name":"vaping_rooms","tags":["allowed","e-cigarette","never","no","places","prohibited","smoke","smoking","tobacco","vape","vaping","vapor","warning","zone"]},{"name":"watch_off","tags":["Android","OS","ar","clock","close","gadget","iOS","off","shut","time","vr","watch","wearables","web","wristwatch"]},{"name":"9k","tags":["9000","9K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"23mp","tags":["23","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"propane","tags":["gas","nest","propane"]},{"name":"raw_off","tags":["alphabet","character","disabled","enabled","font","image","letter","off","on","original","photo","photography","raw","slash","symbol","text","type"]},{"name":"keyboard_option_key","tags":["alt key","key","keyboard","modifier key","option"]},{"name":"woman_2","tags":["female","gender","girl","lady","social","symbol","woman","women"]},{"name":"2k_plus","tags":["+","2k","alphabet","character","digit","font","letter","number","plus","symbol","text","type"]},{"name":"6k_plus","tags":["+","6000","6K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"broadcast_on_personal","tags":[]},{"name":"10mp","tags":["10","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"man_2","tags":["boy","gender","male","man","social","symbol"]},{"name":"7k","tags":["7000","7K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"7k_plus","tags":["+","7000","7K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"nearby_off","tags":["disabled","enabled","nearby","off","on","slash"]},{"name":"3k_plus","tags":["+","3000","3K","alphabet","character","digit","display","font","letter","number","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"6k","tags":["6000","6K","alphabet","character","digit","display","font","letter","number","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"hdr_off","tags":["alphabet","character","disabled","dynamic","enabled","enhance","font","hdr","high","letter","off","on","range","select","slash","symbol","text","type"]},{"name":"roundabout_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","roundabout","route","sign","traffic"]},{"name":"hdr_off_select","tags":["alphabet","camera","character","circle","disabled","dynamic","enabled","font","hdr","high","letter","off","on","photo","range","select","slash","symbol","text","type"]},{"name":"bedtime_off","tags":["bedtime","disabled","lunar","moon","night","nightime","off","offline","slash","sleep"]},{"name":"18_up_rating","tags":[]},{"name":"turn_sharp_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","route","sharp","sign","traffic","turn"]},{"name":"11mp","tags":["11","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"roller_shades_closed","tags":["blinds","closed","cover","curtains","nest","roller","shade","shutter","sunshade"]},{"name":"20mp","tags":["20","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"blinds","tags":["blinds","cover","curtains","nest","open","shade","shutter","sunshade"]},{"name":"3mp","tags":["3","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"blind","tags":["accessibility","accessible","assist","blind","body","cane","disability","handicap","help","human","mobility","person","walk","walker"]},{"name":"emergency_recording","tags":["alert","attention","camera","caution","danger","emergency","film","filming","hardware","image","important","motion","notification","picture","record","video","videography","warning"]},{"name":"curtains","tags":["blinds","cover","curtains","nest","open","shade","shutter","sunshade"]},{"name":"13mp","tags":["13","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"5mp","tags":["5","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"21mp","tags":["21","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"blinds_closed","tags":["blinds","closed","cover","curtains","nest","shade","shutter","sunshade"]},{"name":"16mp","tags":["16","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"17mp","tags":["17","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"2mp","tags":["2","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"15mp","tags":["15","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"desk","tags":[]},{"name":"no_adult_content","tags":[]},{"name":"14mp","tags":["14","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"22mp","tags":["22","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"vertical_shades","tags":["blinds","cover","curtains","nest","open","shade","shutter","sunshade","vertical"]},{"name":"vertical_shades_closed","tags":["blinds","closed","cover","curtains","nest","roller","shade","shutter","sunshade"]},{"name":"curtains_closed","tags":["blinds","closed","cover","curtains","nest","shade","shutter","sunshade"]},{"name":"broadcast_on_home","tags":[]},{"name":"4mp","tags":["4","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"19mp","tags":["19","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"nest_cam_wired_stand","tags":["camera","film","filming","hardware","image","motion","nest","picture","stand","video","videography","wired"]},{"name":"9mp","tags":["9","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"7mp","tags":["7","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"8mp","tags":["8","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"6mp","tags":["6","camera","digit","font","image","letters","megapixel","megapixels","mp","number","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"devices_fold","tags":["Android","OS","cell","device","fold","foldable","hardware","iOS","mobile","phone","tablet"]},{"name":"vape_free","tags":["disabled","e-cigarette","enabled","free","never","no","off","on","places","prohibited","slash","smoke","smoking","tobacco","vape","vaping","vapor","warning","zone"]},{"name":"ramp_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","ramp","route","sign","traffic"]},{"name":"ramp_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","ramp","right","route","sign","traffic"]},{"name":"video_chat","tags":["bubble","cam","camera","chat","comment","communicate","facetime","feedback","message","speech","video","voice"]},{"name":"type_specimen","tags":[]},{"name":"man_4","tags":["abstract","boy","gender","male","man","social","symbol"]},{"name":"fluorescent","tags":["bright","fluorescent","lamp","light","lightbulb"]},{"name":"man_3","tags":["abstract","boy","gender","male","man","social","symbol"]},{"name":"fire_hydrant_alt","tags":[]},{"name":"macro_off","tags":["camera","disabled","enabled","flower","garden","image","macro","off","offline","on","slash"]},{"name":"mdi:ab-testing","tags":["developer / languages"]},{"name":"mdi:abacus","tags":["math"]},{"name":"mdi:abjad-arabic","tags":["alpha / numeric","writing system arabic"]},{"name":"mdi:abjad-hebrew","tags":["alpha / numeric","writing system hebrew"]},{"name":"mdi:abugida-devanagari","tags":["alpha / numeric","writing system devanagari"]},{"name":"mdi:abugida-thai","tags":["alpha / numeric","writing system thai"]},{"name":"mdi:access-point","tags":["wireless"]},{"name":"mdi:access-point-check","tags":["access point success","access point tick"]},{"name":"mdi:access-point-minus","tags":[]},{"name":"mdi:access-point-network","tags":[]},{"name":"mdi:access-point-network-off","tags":[]},{"name":"mdi:access-point-off","tags":[]},{"name":"mdi:access-point-plus","tags":[]},{"name":"mdi:access-point-remove","tags":[]},{"name":"mdi:account-alert","tags":["account / user","alert / error","user alert","account warning","user warning","person alert","person warning"]},{"name":"mdi:account-alert-outline","tags":["account / user","alert / error","user alert outline","account warning outline","user warning outline","person warning outline","person alert outline"]},{"name":"mdi:account-arrow-down","tags":["account / user","account download"]},{"name":"mdi:account-arrow-down-outline","tags":["account / user","account download outline"]},{"name":"mdi:account-arrow-left","tags":["account / user","user arrow left","person arrow left"]},{"name":"mdi:account-arrow-left-outline","tags":["account / user","user arrow left outline","person arrow left outline"]},{"name":"mdi:account-arrow-right","tags":["account / user","user arrow right","person arrow right"]},{"name":"mdi:account-arrow-right-outline","tags":["account / user","user arrow right outline","person arrow right outline"]},{"name":"mdi:account-arrow-up","tags":["account / user","account upload"]},{"name":"mdi:account-arrow-up-outline","tags":["account / user","account upload outline"]},{"name":"mdi:account-badge","tags":["account / user","account online","user online"]},{"name":"mdi:account-badge-outline","tags":["account / user","user online outline","account online outline"]},{"name":"mdi:account-box-multiple-outline","tags":["account / user"]},{"name":"mdi:account-cancel","tags":["account / user","user cancel","user block","person cancel","person block"]},{"name":"mdi:account-cancel-outline","tags":["account / user","user cancel outline","user block outline","person cancel outline","person block outline"]},{"name":"mdi:account-card","tags":["account / user"]},{"name":"mdi:account-card-outline","tags":["account / user"]},{"name":"mdi:account-cash","tags":["account / user","banking","currency"]},{"name":"mdi:account-cash-outline","tags":["account / user","banking","currency"]},{"name":"mdi:account-child-outline","tags":["account / user"]},{"name":"mdi:account-clock","tags":["account / user","date / time","user clock","account pending","person clock"]},{"name":"mdi:account-clock-outline","tags":["account / user","date / time","user clock outline","account pending outline","person clock outline"]},{"name":"mdi:account-cog","tags":["account / user","settings","account settings"]},{"name":"mdi:account-cog-outline","tags":["account / user","settings","account settings outline"]},{"name":"mdi:account-convert","tags":["account / user","user convert","person convert"]},{"name":"mdi:account-convert-outline","tags":["account / user"]},{"name":"mdi:account-cowboy-hat","tags":["account / user","agriculture","rancher"]},{"name":"mdi:account-cowboy-hat-outline","tags":["account / user","agriculture","rancher outline"]},{"name":"mdi:account-credit-card","tags":["account / user","banking","account payment","cardholder"]},{"name":"mdi:account-credit-card-outline","tags":["account / user","banking","account payment outline","cardholder outline"]},{"name":"mdi:account-details-outline","tags":["account / user","settings","person details outline","user details outline"]},{"name":"mdi:account-edit","tags":["account / user","edit / modify","user edit","person edit"]},{"name":"mdi:account-edit-outline","tags":["account / user","edit / modify"]},{"name":"mdi:account-eye","tags":["account / user","account view"]},{"name":"mdi:account-eye-outline","tags":["account / user","account view outline"]},{"name":"mdi:account-filter","tags":["account / user","account funnel","leads"]},{"name":"mdi:account-filter-outline","tags":["account / user","account funnel outline","leads outline"]},{"name":"mdi:account-group","tags":["account / user","home automation","user group","users group","person group","people group","accounts group"]},{"name":"mdi:account-group-outline","tags":["account / user","user group outline","users group outline","person group outline","people group outline","accounts group outline"]},{"name":"mdi:account-hard-hat","tags":["account / user","worker","construction"]},{"name":"mdi:account-hard-hat-outline","tags":["account / user","worker outline","construction outline"]},{"name":"mdi:account-heart","tags":["account / user","medical / hospital","user heart","person heart"]},{"name":"mdi:account-heart-outline","tags":["account / user","medical / hospital","user heart outline","person heart outline"]},{"name":"mdi:account-key","tags":["account / user","user key","person key"]},{"name":"mdi:account-key-outline","tags":["account / user","user key outline","person key outline"]},{"name":"mdi:account-lock","tags":["account / user","lock","account security","account secure","user lock","person lock"]},{"name":"mdi:account-lock-open","tags":["account / user","lock","account unlocked","user unlocked","user lock open"]},{"name":"mdi:account-lock-open-outline","tags":["account / user","lock","user lock open outline","user unlocked outline","account unlocked outline"]},{"name":"mdi:account-lock-outline","tags":["account / user","lock","account security outline","account secure outline","person lock outline","user lock outline"]},{"name":"mdi:account-minus","tags":["account / user","user minus","person minus"]},{"name":"mdi:account-minus-outline","tags":["account / user","user minus outline","person minus outline"]},{"name":"mdi:account-multiple-check","tags":["account / user","user multiple check","account multiple tick","accounts check","accounts tick","users check","users tick","user multiple tick","person multiple check","person multiple tick","people check","people tick","account multiple success"]},{"name":"mdi:account-multiple-check-outline","tags":["account / user","user multiple check outline","account multiple tick outline","accounts check outline","accounts tick outline","users check outline","users tick outline","user multiple tick outline","person multiple check outline","person multiple tick outline","people check outline","people tick outline","account multiple success outline"]},{"name":"mdi:account-multiple-remove","tags":["account / user","user multiple remove","person multiple remove"]},{"name":"mdi:account-multiple-remove-outline","tags":["account / user","user multiple remove outline","person multiple remove outline"]},{"name":"mdi:account-music-outline","tags":["account / user","artist outline"]},{"name":"mdi:account-network","tags":["account / user","user network","person network"]},{"name":"mdi:account-network-off","tags":["account / user"]},{"name":"mdi:account-network-off-outline","tags":["account / user"]},{"name":"mdi:account-network-outline","tags":["account / user","user network outline","person network outline"]},{"name":"mdi:account-off","tags":["account / user","user off","person off"]},{"name":"mdi:account-off-outline","tags":["account / user","user off outline","person off outline"]},{"name":"mdi:account-plus-outline","tags":["account / user","person add outline","register outline","user plus outline","account add outline","person plus outline","user add outline","invite"]},{"name":"mdi:account-question","tags":["account / user","user help","account question mark","account help","user question","person question","person help"]},{"name":"mdi:account-question-outline","tags":["account / user","account question mark outline","user help outline","account help outline","user question outline","person question outline","person help outline"]},{"name":"mdi:account-reactivate","tags":["account / user"]},{"name":"mdi:account-reactivate-outline","tags":["account / user"]},{"name":"mdi:account-remove","tags":["account / user","user remove","person remove"]},{"name":"mdi:account-remove-outline","tags":["account / user","user remove outline","person remove outline"]},{"name":"mdi:account-school","tags":["account / user","account student","account graduation"]},{"name":"mdi:account-school-outline","tags":["account / user","account student outline","account graduation outline"]},{"name":"mdi:account-search","tags":["account / user","user search","person search"]},{"name":"mdi:account-search-outline","tags":["account / user","user search outline","person search outline"]},{"name":"mdi:account-settings","tags":["account / user","settings","user settings","person settings"]},{"name":"mdi:account-settings-outline","tags":["account / user","settings"]},{"name":"mdi:account-star","tags":["account / user","user star","person star","account favorite"]},{"name":"mdi:account-star-outline","tags":["account / user","user star outline","person star outline"]},{"name":"mdi:account-supervisor-outline","tags":["account / user"]},{"name":"mdi:account-switch","tags":["account / user","user switch","accounts switch","users switch","person switch","people switch"]},{"name":"mdi:account-switch-outline","tags":["account / user"]},{"name":"mdi:account-sync","tags":["account / user","account cache"]},{"name":"mdi:account-sync-outline","tags":["account / user","account cache outline"]},{"name":"mdi:account-tag","tags":["account / user"]},{"name":"mdi:account-tag-outline","tags":["account / user"]},{"name":"mdi:account-tie","tags":["account / user","people / family","person tie","user tie"]},{"name":"mdi:account-tie-hat","tags":["account / user","transportation + flying","account pilot"]},{"name":"mdi:account-tie-hat-outline","tags":["account / user","transportation + flying","account pilot outline"]},{"name":"mdi:account-tie-outline","tags":["account / user"]},{"name":"mdi:account-tie-voice","tags":["account / user"]},{"name":"mdi:account-tie-voice-off","tags":["account / user"]},{"name":"mdi:account-tie-voice-off-outline","tags":["account / user"]},{"name":"mdi:account-tie-voice-outline","tags":["account / user"]},{"name":"mdi:account-tie-woman","tags":["account / user","people / family","business woman"]},{"name":"mdi:account-wrench","tags":["account / user","account service"]},{"name":"mdi:account-wrench-outline","tags":["account / user","account service outline"]},{"name":"mdi:advertisements","tags":["ads"]},{"name":"mdi:advertisements-off","tags":["ads off"]},{"name":"mdi:air-conditioner","tags":["home automation","automotive","ac unit"]},{"name":"mdi:air-filter","tags":["home automation","water filter","filter"]},{"name":"mdi:air-horn","tags":[]},{"name":"mdi:air-humidifier","tags":["home automation"]},{"name":"mdi:air-humidifier-off","tags":["home automation","air dehumidifier"]},{"name":"mdi:air-purifier-off","tags":["home automation"]},{"name":"mdi:airbag","tags":["automotive"]},{"name":"mdi:airballoon","tags":["transportation + other","transportation + flying","hot air balloon"]},{"name":"mdi:airballoon-outline","tags":["transportation + flying","hot air balloon outline"]},{"name":"mdi:airplane","tags":["transportation + flying","navigation","aeroplane","airplanemode active","flight","local airport","flight mode","plane"]},{"name":"mdi:airplane-alert","tags":["transportation + flying","alert / error"]},{"name":"mdi:airplane-check","tags":["transportation + flying","airplace success","airplane tick"]},{"name":"mdi:airplane-clock","tags":["transportation + flying","date / time","airplane schedule","airplane time","airplane date"]},{"name":"mdi:airplane-cog","tags":["transportation + flying","settings","airplane settings"]},{"name":"mdi:airplane-edit","tags":["transportation + flying","edit / modify"]},{"name":"mdi:airplane-marker","tags":["transportation + flying","navigation","airplane location","airplane gps"]},{"name":"mdi:airplane-minus","tags":["transportation + flying"]},{"name":"mdi:airplane-off","tags":["transportation + flying","aeroplane off","airplanemode inactive","flight mode off","plane off"]},{"name":"mdi:airplane-plus","tags":["transportation + flying"]},{"name":"mdi:airplane-remove","tags":["transportation + flying"]},{"name":"mdi:airplane-search","tags":["transportation + flying","airplane find"]},{"name":"mdi:airplane-settings","tags":["transportation + flying","settings"]},{"name":"mdi:airport","tags":["places","transportation + flying"]},{"name":"mdi:alarm-bell","tags":["notification"]},{"name":"mdi:alarm-light","tags":["home automation"]},{"name":"mdi:alarm-light-off","tags":["home automation"]},{"name":"mdi:alarm-light-off-outline","tags":["home automation"]},{"name":"mdi:alarm-light-outline","tags":["home automation"]},{"name":"mdi:alarm-multiple","tags":["date / time","alarms","alarm clock multiple","alarm clocks"]},{"name":"mdi:alarm-note","tags":[]},{"name":"mdi:alarm-note-off","tags":[]},{"name":"mdi:alarm-panel","tags":["home automation"]},{"name":"mdi:alarm-panel-outline","tags":["home automation"]},{"name":"mdi:alert-box","tags":["alert / error","warning box"]},{"name":"mdi:alert-box-outline","tags":["alert / error","warning box outline"]},{"name":"mdi:alert-circle-check","tags":["alert / error","alert circle success"]},{"name":"mdi:alert-circle-check-outline","tags":["alert / error","alert circle success outline"]},{"name":"mdi:alert-decagram-outline","tags":["alert / error","warning decagram outline"]},{"name":"mdi:alert-minus","tags":["alert / error"]},{"name":"mdi:alert-minus-outline","tags":["alert / error"]},{"name":"mdi:alert-octagon-outline","tags":["alert / error","warning octagon outline","stop alert outline"]},{"name":"mdi:alert-octagram","tags":["alert / error","warning octagram"]},{"name":"mdi:alert-octagram-outline","tags":["alert / error","warning octagram outline"]},{"name":"mdi:alert-outline","tags":["alert / error","warning outline"]},{"name":"mdi:alert-plus","tags":["alert / error"]},{"name":"mdi:alert-plus-outline","tags":["alert / error"]},{"name":"mdi:alert-remove","tags":["alert / error"]},{"name":"mdi:alert-remove-outline","tags":["alert / error"]},{"name":"mdi:alert-rhombus","tags":["alert / error"]},{"name":"mdi:alert-rhombus-outline","tags":["alert / error"]},{"name":"mdi:alien","tags":[]},{"name":"mdi:alien-outline","tags":[]},{"name":"mdi:all-inclusive-box","tags":["infinity box","forever box"]},{"name":"mdi:all-inclusive-box-outline","tags":["forever box outline","infinity box outline"]},{"name":"mdi:allergy","tags":["medical / hospital","hand","rash","germ"]},{"name":"mdi:alpha","tags":["alpha / numeric"]},{"name":"mdi:alpha-a","tags":["alpha / numeric","alphabet a","letter a"]},{"name":"mdi:alpha-a-box","tags":["alpha / numeric","alphabet a box","letter a box"]},{"name":"mdi:alpha-a-box-outline","tags":["alpha / numeric","alphabet a box outline","letter a box outline"]},{"name":"mdi:alpha-a-circle","tags":["alpha / numeric","alphabet a circle","letter a circle"]},{"name":"mdi:alpha-a-circle-outline","tags":["alpha / numeric","alphabet a circle outline","letter a circle outline"]},{"name":"mdi:alpha-b","tags":["alpha / numeric","alphabet b","letter b"]},{"name":"mdi:alpha-b-box","tags":["alpha / numeric","alphabet b box","letter b box"]},{"name":"mdi:alpha-b-box-outline","tags":["alpha / numeric","alphabet b box outline","letter b box outline"]},{"name":"mdi:alpha-b-circle","tags":["alpha / numeric","alphabet b circle","letter b circle"]},{"name":"mdi:alpha-b-circle-outline","tags":["alpha / numeric","alphabet b circle outline","letter b circle outline"]},{"name":"mdi:alpha-c","tags":["alpha / numeric","alphabet c","letter c"]},{"name":"mdi:alpha-c-box","tags":["alpha / numeric","alphabet c box","letter c box"]},{"name":"mdi:alpha-c-box-outline","tags":["alpha / numeric","alphabet c box outline","letter c box outline"]},{"name":"mdi:alpha-c-circle","tags":["alpha / numeric","alphabet c circle","letter c circle"]},{"name":"mdi:alpha-c-circle-outline","tags":["alpha / numeric","alphabet c circle outline","letter c circle outline"]},{"name":"mdi:alpha-d","tags":["automotive","alpha / numeric","alphabet d","letter d","drive"]},{"name":"mdi:alpha-d-box","tags":["alpha / numeric","alphabet d box","letter d box"]},{"name":"mdi:alpha-d-box-outline","tags":["alpha / numeric","alphabet d box outline","letter d box outline"]},{"name":"mdi:alpha-d-circle","tags":["alpha / numeric","alphabet d circle","letter d circle"]},{"name":"mdi:alpha-d-circle-outline","tags":["alpha / numeric","alphabet d circle outline","letter d circle outline"]},{"name":"mdi:alpha-e","tags":["alpha / numeric","alphabet e","letter e"]},{"name":"mdi:alpha-e-box","tags":["alpha / numeric","alphabet e box","letter e box"]},{"name":"mdi:alpha-e-box-outline","tags":["alpha / numeric","alphabet e box outline","letter e box outline"]},{"name":"mdi:alpha-e-circle","tags":["alpha / numeric","alphabet e circle","letter e circle"]},{"name":"mdi:alpha-e-circle-outline","tags":["alpha / numeric","alphabet e circle outline","letter e circle outline"]},{"name":"mdi:alpha-f","tags":["alpha / numeric","alphabet f","letter f"]},{"name":"mdi:alpha-f-box","tags":["alpha / numeric","alphabet f box","letter f box"]},{"name":"mdi:alpha-f-box-outline","tags":["alpha / numeric","alphabet f box outline","letter f box outline"]},{"name":"mdi:alpha-f-circle","tags":["alpha / numeric","alphabet f circle","letter f circle"]},{"name":"mdi:alpha-f-circle-outline","tags":["alpha / numeric","alphabet f circle outline","letter f circle outline"]},{"name":"mdi:alpha-g","tags":["alpha / numeric","alphabet g","letter g"]},{"name":"mdi:alpha-g-box","tags":["alpha / numeric","alphabet g box","letter g box"]},{"name":"mdi:alpha-g-box-outline","tags":["alpha / numeric","alphabet g box outline","letter g box outline"]},{"name":"mdi:alpha-g-circle","tags":["alpha / numeric","alphabet g circle","letter g circle"]},{"name":"mdi:alpha-g-circle-outline","tags":["alpha / numeric","alphabet g circle outline","letter g circle outline"]},{"name":"mdi:alpha-h","tags":["alpha / numeric","alphabet h","letter h"]},{"name":"mdi:alpha-h-box","tags":["alpha / numeric","alphabet h box","letter h box"]},{"name":"mdi:alpha-h-box-outline","tags":["alpha / numeric","alphabet h box outline","letter h box outline"]},{"name":"mdi:alpha-h-circle","tags":["alpha / numeric","alphabet h circle","letter h circle"]},{"name":"mdi:alpha-h-circle-outline","tags":["alpha / numeric","alphabet h circle outline","letter h circle outline","helipad"]},{"name":"mdi:alpha-i","tags":["alpha / numeric","alphabet i","letter i","roman numeral 1"]},{"name":"mdi:alpha-i-box","tags":["alpha / numeric","alphabet i box","letter i box"]},{"name":"mdi:alpha-i-box-outline","tags":["alpha / numeric","alphabet i box outline","letter i box outline"]},{"name":"mdi:alpha-i-circle","tags":["alpha / numeric","alphabet i circle","letter i circle"]},{"name":"mdi:alpha-i-circle-outline","tags":["alpha / numeric","alphabet i circle outline","letter i circle outline"]},{"name":"mdi:alpha-j","tags":["alpha / numeric","alphabet j","letter j"]},{"name":"mdi:alpha-j-box","tags":["alpha / numeric","alphabet j box","letter j box"]},{"name":"mdi:alpha-j-box-outline","tags":["alpha / numeric","alphabet j box outline","letter j box outline"]},{"name":"mdi:alpha-j-circle","tags":["alpha / numeric","alphabet j circle","letter j circle"]},{"name":"mdi:alpha-j-circle-outline","tags":["alpha / numeric","alphabet j circle outline","letter j circle outline"]},{"name":"mdi:alpha-k","tags":["alpha / numeric","alphabet k","letter k"]},{"name":"mdi:alpha-k-box","tags":["alpha / numeric","alphabet k box","letter k box"]},{"name":"mdi:alpha-k-box-outline","tags":["alpha / numeric","alphabet k box outline","letter k box outline"]},{"name":"mdi:alpha-k-circle","tags":["alpha / numeric","alphabet k circle","letter k circle"]},{"name":"mdi:alpha-k-circle-outline","tags":["alpha / numeric","alphabet k circle outline","letter k circle outline"]},{"name":"mdi:alpha-l","tags":["alpha / numeric","alphabet l","letter l"]},{"name":"mdi:alpha-l-box","tags":["alpha / numeric","alphabet l box","letter l box"]},{"name":"mdi:alpha-l-box-outline","tags":["alpha / numeric","alphabet l box outline","letter l box outline"]},{"name":"mdi:alpha-l-circle","tags":["alpha / numeric","alphabet l circle","letter l circle"]},{"name":"mdi:alpha-l-circle-outline","tags":["alpha / numeric","alphabet l circle outline","letter l circle outline"]},{"name":"mdi:alpha-m","tags":["alpha / numeric","alphabet m","letter m"]},{"name":"mdi:alpha-m-box","tags":["alpha / numeric","alphabet m box","letter m box"]},{"name":"mdi:alpha-m-box-outline","tags":["alpha / numeric","alphabet m box outline","letter m box outline"]},{"name":"mdi:alpha-m-circle","tags":["alpha / numeric","alphabet m circle","letter m circle"]},{"name":"mdi:alpha-m-circle-outline","tags":["alpha / numeric","alphabet m circle outline","letter m circle outline"]},{"name":"mdi:alpha-n","tags":["automotive","alpha / numeric","alphabet n","letter n","neutral"]},{"name":"mdi:alpha-n-box","tags":["alpha / numeric","alphabet n box","letter n box"]},{"name":"mdi:alpha-n-box-outline","tags":["alpha / numeric","alphabet n box outline","letter n box outline"]},{"name":"mdi:alpha-n-circle","tags":["alpha / numeric","alphabet n circle","letter n circle"]},{"name":"mdi:alpha-n-circle-outline","tags":["alpha / numeric","alphabet n circle outline","letter n circle outline"]},{"name":"mdi:alpha-o","tags":["alpha / numeric","alphabet o","letter o"]},{"name":"mdi:alpha-o-box","tags":["alpha / numeric","alphabet o box","letter o box"]},{"name":"mdi:alpha-o-box-outline","tags":["alpha / numeric","alphabet o box outline","letter o box outline"]},{"name":"mdi:alpha-o-circle","tags":["alpha / numeric","alphabet o circle","letter o circle"]},{"name":"mdi:alpha-o-circle-outline","tags":["alpha / numeric","alphabet o circle outline","letter o circle outline"]},{"name":"mdi:alpha-p","tags":["automotive","alpha / numeric","alphabet p","letter p","park"]},{"name":"mdi:alpha-p-box","tags":["alpha / numeric","alphabet p box","letter p box"]},{"name":"mdi:alpha-p-box-outline","tags":["alpha / numeric","alphabet p box outline","letter p box outline"]},{"name":"mdi:alpha-p-circle","tags":["alpha / numeric","alphabet p circle","letter p circle"]},{"name":"mdi:alpha-p-circle-outline","tags":["alpha / numeric","alphabet p circle outline","letter p circle outline"]},{"name":"mdi:alpha-q","tags":["alpha / numeric","alphabet q","letter q"]},{"name":"mdi:alpha-q-box","tags":["alpha / numeric","alphabet q box","letter q box"]},{"name":"mdi:alpha-q-box-outline","tags":["alpha / numeric","alphabet q box outline","letter q box outline"]},{"name":"mdi:alpha-q-circle","tags":["alpha / numeric","alphabet q circle","letter q circle"]},{"name":"mdi:alpha-q-circle-outline","tags":["alpha / numeric","alphabet q circle outline","letter q circle outline"]},{"name":"mdi:alpha-r","tags":["automotive","alpha / numeric","alphabet r","letter r","reverse"]},{"name":"mdi:alpha-r-box","tags":["alpha / numeric","alphabet r box","letter r box"]},{"name":"mdi:alpha-r-box-outline","tags":["alpha / numeric","alphabet r box outline","letter r box outline"]},{"name":"mdi:alpha-r-circle","tags":["alpha / numeric","alphabet r circle","letter r circle"]},{"name":"mdi:alpha-r-circle-outline","tags":["alpha / numeric","alphabet r circle outline","letter r circle outline"]},{"name":"mdi:alpha-s","tags":["alpha / numeric","alphabet s","letter s"]},{"name":"mdi:alpha-s-box","tags":["alpha / numeric","alphabet s box","letter s box"]},{"name":"mdi:alpha-s-box-outline","tags":["alpha / numeric","alphabet s box outline","letter s box outline"]},{"name":"mdi:alpha-s-circle","tags":["alpha / numeric","alphabet s circle","letter s circle"]},{"name":"mdi:alpha-s-circle-outline","tags":["alpha / numeric","alphabet s circle outline","letter s circle outline"]},{"name":"mdi:alpha-t","tags":["alpha / numeric","alphabet t","letter t"]},{"name":"mdi:alpha-t-box","tags":["alpha / numeric","alphabet t box","letter t box"]},{"name":"mdi:alpha-t-box-outline","tags":["alpha / numeric","alphabet t box outline","letter t box outline"]},{"name":"mdi:alpha-t-circle","tags":["alpha / numeric","alphabet t circle","letter t circle"]},{"name":"mdi:alpha-t-circle-outline","tags":["alpha / numeric","alphabet t circle outline","letter t circle outline"]},{"name":"mdi:alpha-u","tags":["alpha / numeric","alphabet u","letter u"]},{"name":"mdi:alpha-u-box","tags":["alpha / numeric","alphabet u box","letter u box"]},{"name":"mdi:alpha-u-box-outline","tags":["alpha / numeric","alphabet u box outline","letter u box outline"]},{"name":"mdi:alpha-u-circle","tags":["alpha / numeric","alphabet u circle","letter u circle"]},{"name":"mdi:alpha-u-circle-outline","tags":["alpha / numeric","alphabet u circle outline","letter u circle outline"]},{"name":"mdi:alpha-v","tags":["alpha / numeric","alphabet v","letter v","roman numeral 5"]},{"name":"mdi:alpha-v-box","tags":["alpha / numeric","alphabet v box","letter v box"]},{"name":"mdi:alpha-v-box-outline","tags":["alpha / numeric","alphabet v box outline","letter v box outline"]},{"name":"mdi:alpha-v-circle","tags":["alpha / numeric","alphabet v circle","letter v circle"]},{"name":"mdi:alpha-v-circle-outline","tags":["alpha / numeric","alphabet v circle outline","letter v circle outline"]},{"name":"mdi:alpha-w","tags":["alpha / numeric","alphabet w","letter w"]},{"name":"mdi:alpha-w-box","tags":["alpha / numeric","alphabet w box","letter w box"]},{"name":"mdi:alpha-w-box-outline","tags":["alpha / numeric","alphabet w box outline","letter w box outline"]},{"name":"mdi:alpha-w-circle","tags":["alpha / numeric","alphabet w circle","letter w circle"]},{"name":"mdi:alpha-w-circle-outline","tags":["alpha / numeric","alphabet w circle outline","letter w circle outline"]},{"name":"mdi:alpha-x","tags":["alpha / numeric","alphabet x","letter x","roman numeral 10"]},{"name":"mdi:alpha-x-box","tags":["alpha / numeric","alphabet x box","letter x box"]},{"name":"mdi:alpha-x-box-outline","tags":["alpha / numeric","alphabet x box outline","letter x box outline"]},{"name":"mdi:alpha-x-circle","tags":["alpha / numeric","alphabet x circle","letter x circle"]},{"name":"mdi:alpha-x-circle-outline","tags":["alpha / numeric","alphabet x circle outline","letter x circle outline"]},{"name":"mdi:alpha-y","tags":["alpha / numeric","alphabet y","letter y"]},{"name":"mdi:alpha-y-box","tags":["alpha / numeric","alphabet y box","letter y box"]},{"name":"mdi:alpha-y-box-outline","tags":["alpha / numeric","alphabet y box outline","letter y box outline"]},{"name":"mdi:alpha-y-circle","tags":["alpha / numeric","alphabet y circle","letter y circle"]},{"name":"mdi:alpha-y-circle-outline","tags":["alpha / numeric","alphabet y circle outline","letter y circle outline"]},{"name":"mdi:alpha-z","tags":["alpha / numeric","alphabet z","letter z"]},{"name":"mdi:alpha-z-box","tags":["alpha / numeric","alphabet z box","letter z box"]},{"name":"mdi:alpha-z-box-outline","tags":["alpha / numeric","alphabet z box outline","letter z box outline"]},{"name":"mdi:alpha-z-circle","tags":["alpha / numeric","alphabet z circle","letter z circle"]},{"name":"mdi:alpha-z-circle-outline","tags":["alpha / numeric","alphabet z circle outline","letter z circle outline"]},{"name":"mdi:alphabet-aurebesh","tags":["alpha / numeric","writing system aurebesh"]},{"name":"mdi:alphabet-cyrillic","tags":["alpha / numeric","writing system cyrillic"]},{"name":"mdi:alphabet-greek","tags":["alpha / numeric","writing system greek"]},{"name":"mdi:alphabet-latin","tags":["alpha / numeric","writing system latin"]},{"name":"mdi:alphabet-piqad","tags":["alpha / numeric","writing system piqad"]},{"name":"mdi:alphabet-tengwar","tags":["alpha / numeric","writing system tengwar"]},{"name":"mdi:alphabetical","tags":["alpha / numeric","letters","a b c","abc"]},{"name":"mdi:alphabetical-off","tags":["alpha / numeric","letters off","abc off","a b c off"]},{"name":"mdi:alphabetical-variant","tags":["alpha / numeric","letters","abc","a b c"]},{"name":"mdi:alphabetical-variant-off","tags":["alpha / numeric","letters off","abc off","a b c off"]},{"name":"mdi:altimeter","tags":[]},{"name":"mdi:ambulance","tags":["transportation + road","medical / hospital"]},{"name":"mdi:ammunition","tags":["bullets"]},{"name":"mdi:ampersand","tags":["and"]},{"name":"mdi:amplifier","tags":["home automation","music"]},{"name":"mdi:amplifier-off","tags":[]},{"name":"mdi:angle-acute","tags":["math"]},{"name":"mdi:angle-obtuse","tags":["math"]},{"name":"mdi:angle-right","tags":["math"]},{"name":"mdi:animation-outline","tags":[]},{"name":"mdi:animation-play-outline","tags":[]},{"name":"mdi:anvil","tags":[]},{"name":"mdi:api-off","tags":["developer / languages"]},{"name":"mdi:apple-keyboard-caps","tags":[]},{"name":"mdi:apple-keyboard-command","tags":[]},{"name":"mdi:apple-keyboard-control","tags":[]},{"name":"mdi:apple-keyboard-option","tags":[]},{"name":"mdi:apple-keyboard-shift","tags":[]},{"name":"mdi:application","tags":["iframe"]},{"name":"mdi:application-array","tags":["developer / languages","iframe array"]},{"name":"mdi:application-array-outline","tags":["developer / languages","iframe array outline"]},{"name":"mdi:application-braces","tags":["developer / languages","iframe braces"]},{"name":"mdi:application-braces-outline","tags":["developer / languages","iframe braces outline"]},{"name":"mdi:application-brackets","tags":["developer / languages","iframe brackets"]},{"name":"mdi:application-brackets-outline","tags":["developer / languages","iframe brackets outline"]},{"name":"mdi:application-cog","tags":["settings","iframe cog"]},{"name":"mdi:application-cog-outline","tags":["settings","application settings","iframe cog outline"]},{"name":"mdi:application-edit","tags":["edit / modify","iframe edit"]},{"name":"mdi:application-edit-outline","tags":["edit / modify","iframe edit outline"]},{"name":"mdi:application-export","tags":["iframe export outline"]},{"name":"mdi:application-import","tags":["iframe import outline"]},{"name":"mdi:application-outline","tags":["web asset","iframe outline"]},{"name":"mdi:application-parentheses","tags":["developer / languages","iframe parentheses"]},{"name":"mdi:application-parentheses-outline","tags":["developer / languages","iframe parentheses outline"]},{"name":"mdi:application-settings","tags":["settings","iframe settings"]},{"name":"mdi:application-settings-outline","tags":["settings","iframe settings outline"]},{"name":"mdi:application-variable","tags":["developer / languages","iframe variable"]},{"name":"mdi:application-variable-outline","tags":["developer / languages","iframe variable outline"]},{"name":"mdi:approximately-equal","tags":["math"]},{"name":"mdi:approximately-equal-box","tags":["math"]},{"name":"mdi:archive","tags":["box"]},{"name":"mdi:archive-alert","tags":["alert / error","box alert"]},{"name":"mdi:archive-alert-outline","tags":["alert / error","box alert outline"]},{"name":"mdi:archive-arrow-down","tags":["box arrow down","this side down"]},{"name":"mdi:archive-arrow-down-outline","tags":["box arrow down","this side down outline"]},{"name":"mdi:archive-arrow-up","tags":["box arrow up","this side up"]},{"name":"mdi:archive-arrow-up-outline","tags":["box arrow up outline","this side up outline"]},{"name":"mdi:archive-cancel","tags":["box cancel"]},{"name":"mdi:archive-cancel-outline","tags":["box cancel outline"]},{"name":"mdi:archive-check","tags":["box check","archive success","box success"]},{"name":"mdi:archive-check-outline","tags":["box check outline","archive success outline","box success outline"]},{"name":"mdi:archive-clock","tags":["date / time","box clock","box time","archive time"]},{"name":"mdi:archive-clock-outline","tags":["date / time","box clock outline","box time outline","archive time outline"]},{"name":"mdi:archive-cog","tags":["settings","box cog"]},{"name":"mdi:archive-cog-outline","tags":["settings","box cog outline"]},{"name":"mdi:archive-edit","tags":["edit / modify","box edit"]},{"name":"mdi:archive-edit-outline","tags":["edit / modify","box edit outline"]},{"name":"mdi:archive-eye","tags":["archive view","box eye","box view"]},{"name":"mdi:archive-eye-outline","tags":["archive view outline","box eye outline","box view outline"]},{"name":"mdi:archive-lock","tags":["lock","box lock"]},{"name":"mdi:archive-lock-open","tags":["lock","box lock open"]},{"name":"mdi:archive-lock-open-outline","tags":["lock","box lock open outline"]},{"name":"mdi:archive-lock-outline","tags":["lock","box lock outline"]},{"name":"mdi:archive-marker","tags":["navigation","archive location","box marker","box location"]},{"name":"mdi:archive-marker-outline","tags":["navigation","archive location outline","box marker outline","box location outline"]},{"name":"mdi:archive-minus","tags":["box minus"]},{"name":"mdi:archive-minus-outline","tags":["box minus outline"]},{"name":"mdi:archive-music","tags":["music","box music"]},{"name":"mdi:archive-music-outline","tags":["music","box music outline"]},{"name":"mdi:archive-off","tags":["box off"]},{"name":"mdi:archive-off-outline","tags":["box off outline"]},{"name":"mdi:archive-outline","tags":["box outline"]},{"name":"mdi:archive-plus","tags":["archive add","box plus","box add"]},{"name":"mdi:archive-plus-outline","tags":["archive add outline","box plus outline","box add outline"]},{"name":"mdi:archive-refresh","tags":["box refresh"]},{"name":"mdi:archive-refresh-outline","tags":["box refresh outline"]},{"name":"mdi:archive-remove","tags":["box remove"]},{"name":"mdi:archive-remove-outline","tags":["box remove outline"]},{"name":"mdi:archive-search","tags":["box search"]},{"name":"mdi:archive-search-outline","tags":["box search outline"]},{"name":"mdi:archive-settings","tags":["settings","box settings"]},{"name":"mdi:archive-settings-outline","tags":["settings","box settings outline"]},{"name":"mdi:archive-star","tags":["archive favorite","box star","box favorite"]},{"name":"mdi:archive-star-outline","tags":["archive favorite outline","box star outline","box favorite outline"]},{"name":"mdi:archive-sync","tags":["box sync"]},{"name":"mdi:archive-sync-outline","tags":["box sync outline"]},{"name":"mdi:arm-flex","tags":[]},{"name":"mdi:arm-flex-outline","tags":[]},{"name":"mdi:arrange-bring-forward","tags":["arrange","geographic information system"]},{"name":"mdi:arrange-bring-to-front","tags":["arrange","geographic information system"]},{"name":"mdi:arrange-send-backward","tags":["arrange","geographic information system"]},{"name":"mdi:arrange-send-to-back","tags":["arrange","geographic information system"]},{"name":"mdi:arrow-all","tags":["arrow"]},{"name":"mdi:arrow-bottom-left","tags":["arrow","arrow down left"]},{"name":"mdi:arrow-bottom-left-bold-box","tags":["arrow"]},{"name":"mdi:arrow-bottom-left-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-bottom-left-bold-outline","tags":["arrow","arrow down left bold outline"]},{"name":"mdi:arrow-bottom-left-thick","tags":["arrow","arrow down left thick","arrow bottom left bold","arrow down left bold"]},{"name":"mdi:arrow-bottom-left-thin","tags":["arrow"]},{"name":"mdi:arrow-bottom-right","tags":["arrow","arrow down right"]},{"name":"mdi:arrow-bottom-right-bold-box","tags":["arrow"]},{"name":"mdi:arrow-bottom-right-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-bottom-right-bold-outline","tags":["arrow","arrow down right bold outline"]},{"name":"mdi:arrow-bottom-right-thick","tags":["arrow","arrow down right thick","arrow bottom right bold","arrow down right bold"]},{"name":"mdi:arrow-bottom-right-thin","tags":["arrow"]},{"name":"mdi:arrow-collapse","tags":["arrow","arrow compress"]},{"name":"mdi:arrow-collapse-all","tags":["arrow","arrow compress all"]},{"name":"mdi:arrow-collapse-down","tags":["arrow","arrow compress down"]},{"name":"mdi:arrow-collapse-left","tags":["arrow","arrow compress left"]},{"name":"mdi:arrow-collapse-right","tags":["arrow","arrow compress right"]},{"name":"mdi:arrow-collapse-up","tags":["arrow","arrow compress up"]},{"name":"mdi:arrow-decision","tags":["arrow","proxy"]},{"name":"mdi:arrow-decision-auto","tags":["proxy auto"]},{"name":"mdi:arrow-decision-auto-outline","tags":["proxy auto outline"]},{"name":"mdi:arrow-decision-outline","tags":["arrow","proxy outline"]},{"name":"mdi:arrow-down","tags":["arrow","arrow downward","arrow bottom"]},{"name":"mdi:arrow-down-bold","tags":["arrow","arrow bottom bold"]},{"name":"mdi:arrow-down-bold-box","tags":["arrow","arrow bottom bold box"]},{"name":"mdi:arrow-down-bold-box-outline","tags":["arrow","arrow bottom bold box outline"]},{"name":"mdi:arrow-down-bold-circle","tags":["arrow","arrow bottom bold circle"]},{"name":"mdi:arrow-down-bold-circle-outline","tags":["arrow","arrow bottom bold circle outline"]},{"name":"mdi:arrow-down-bold-hexagon-outline","tags":["arrow","arrow bottom bold hexagon outline"]},{"name":"mdi:arrow-down-bold-outline","tags":["arrow","arrow bottom bold outline"]},{"name":"mdi:arrow-down-box","tags":["arrow","arrow bottom box"]},{"name":"mdi:arrow-down-circle","tags":["arrow","arrow bottom circle"]},{"name":"mdi:arrow-down-circle-outline","tags":["arrow","arrow bottom circle outline"]},{"name":"mdi:arrow-down-drop-circle-outline","tags":["arrow","arrow bottom drop circle outline"]},{"name":"mdi:arrow-down-left","tags":["arrow"]},{"name":"mdi:arrow-down-left-bold","tags":["arrow"]},{"name":"mdi:arrow-down-right","tags":["arrow"]},{"name":"mdi:arrow-down-right-bold","tags":["arrow"]},{"name":"mdi:arrow-down-thick","tags":["arrow","arrow bottom thick","arrow down bold","arrow bottom bold"]},{"name":"mdi:arrow-down-thin","tags":["arrow"]},{"name":"mdi:arrow-expand","tags":["arrow"]},{"name":"mdi:arrow-expand-all","tags":["arrow","geographic information system"]},{"name":"mdi:arrow-expand-down","tags":["arrow"]},{"name":"mdi:arrow-expand-left","tags":["arrow"]},{"name":"mdi:arrow-expand-right","tags":["arrow"]},{"name":"mdi:arrow-expand-up","tags":["arrow"]},{"name":"mdi:arrow-horizontal-lock","tags":["lock","arrow","scroll horizontal lock"]},{"name":"mdi:arrow-left-bold","tags":["arrow","automotive"]},{"name":"mdi:arrow-left-bold-box","tags":["arrow"]},{"name":"mdi:arrow-left-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-left-bold-circle","tags":["arrow"]},{"name":"mdi:arrow-left-bold-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-bold-hexagon-outline","tags":["arrow"]},{"name":"mdi:arrow-left-bold-outline","tags":["arrow","automotive"]},{"name":"mdi:arrow-left-bottom","tags":[]},{"name":"mdi:arrow-left-bottom-bold","tags":[]},{"name":"mdi:arrow-left-box","tags":["arrow"]},{"name":"mdi:arrow-left-circle","tags":["arrow","arrow back circle"]},{"name":"mdi:arrow-left-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-drop-circle","tags":["arrow"]},{"name":"mdi:arrow-left-drop-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-right","tags":["arrow"]},{"name":"mdi:arrow-left-right-bold","tags":["arrow"]},{"name":"mdi:arrow-left-right-bold-outline","tags":["arrow"]},{"name":"mdi:arrow-left-thick","tags":["arrow","arrow left bold"]},{"name":"mdi:arrow-left-thin","tags":["arrow"]},{"name":"mdi:arrow-left-top","tags":["turn left"]},{"name":"mdi:arrow-left-top-bold","tags":["turn left bold"]},{"name":"mdi:arrow-projectile","tags":["gaming / rpg","sport"]},{"name":"mdi:arrow-projectile-multiple","tags":["gaming / rpg","sport"]},{"name":"mdi:arrow-right-bold","tags":["arrow","automotive"]},{"name":"mdi:arrow-right-bold-box","tags":["arrow"]},{"name":"mdi:arrow-right-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-right-bold-circle","tags":["arrow"]},{"name":"mdi:arrow-right-bold-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-bold-hexagon-outline","tags":["arrow"]},{"name":"mdi:arrow-right-bold-outline","tags":["arrow","automotive"]},{"name":"mdi:arrow-right-bottom","tags":[]},{"name":"mdi:arrow-right-bottom-bold","tags":[]},{"name":"mdi:arrow-right-box","tags":["arrow"]},{"name":"mdi:arrow-right-circle","tags":["arrow","arrow forward circle"]},{"name":"mdi:arrow-right-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-drop-circle","tags":["arrow"]},{"name":"mdi:arrow-right-drop-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-thick","tags":["arrow","arrow right bold"]},{"name":"mdi:arrow-right-thin","tags":["arrow"]},{"name":"mdi:arrow-right-top","tags":["turn right"]},{"name":"mdi:arrow-right-top-bold","tags":["turn right bold"]},{"name":"mdi:arrow-split-horizontal","tags":["arrow","resize vertical","resize"]},{"name":"mdi:arrow-split-vertical","tags":["arrow","resize horizontal","resize"]},{"name":"mdi:arrow-top-left","tags":["arrow","arrow up left"]},{"name":"mdi:arrow-top-left-bold-box","tags":["arrow"]},{"name":"mdi:arrow-top-left-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-top-left-bold-outline","tags":["arrow","arrow up left bold outline"]},{"name":"mdi:arrow-top-left-bottom-right","tags":["arrow"]},{"name":"mdi:arrow-top-left-bottom-right-bold","tags":["arrow"]},{"name":"mdi:arrow-top-left-thick","tags":["arrow","arrow up left thick","arrow top left bold","arrow up left bold"]},{"name":"mdi:arrow-top-left-thin","tags":["arrow"]},{"name":"mdi:arrow-top-right","tags":["arrow","arrow up right"]},{"name":"mdi:arrow-top-right-bold-box","tags":["arrow"]},{"name":"mdi:arrow-top-right-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-top-right-bold-outline","tags":["arrow","arrow up right bold outline"]},{"name":"mdi:arrow-top-right-bottom-left","tags":["arrow"]},{"name":"mdi:arrow-top-right-bottom-left-bold","tags":["arrow"]},{"name":"mdi:arrow-top-right-thick","tags":["arrow","arrow up right thick","arrow top right bold","arrow up right bold"]},{"name":"mdi:arrow-top-right-thin","tags":["arrow"]},{"name":"mdi:arrow-u-down-left","tags":["u turn left"]},{"name":"mdi:arrow-u-down-left-bold","tags":["u turn left bold"]},{"name":"mdi:arrow-u-down-right","tags":["u turn right"]},{"name":"mdi:arrow-u-down-right-bold","tags":["u turn right bold"]},{"name":"mdi:arrow-u-left-bottom","tags":["undo"]},{"name":"mdi:arrow-u-left-bottom-bold","tags":["undo"]},{"name":"mdi:arrow-u-left-top","tags":["undo"]},{"name":"mdi:arrow-u-left-top-bold","tags":["undo"]},{"name":"mdi:arrow-u-right-bottom","tags":["redo"]},{"name":"mdi:arrow-u-right-bottom-bold","tags":["redo"]},{"name":"mdi:arrow-u-right-top","tags":["redo"]},{"name":"mdi:arrow-u-right-top-bold","tags":["redo"]},{"name":"mdi:arrow-u-up-left","tags":[]},{"name":"mdi:arrow-u-up-left-bold","tags":[]},{"name":"mdi:arrow-u-up-right","tags":[]},{"name":"mdi:arrow-u-up-right-bold","tags":[]},{"name":"mdi:arrow-up","tags":["arrow","arrow upward","arrow top"]},{"name":"mdi:arrow-up-bold","tags":["arrow","arrow top bold"]},{"name":"mdi:arrow-up-bold-box","tags":["arrow","arrow top bold box"]},{"name":"mdi:arrow-up-bold-box-outline","tags":["arrow","arrow top bold box outline"]},{"name":"mdi:arrow-up-bold-circle","tags":["arrow","arrow top bold circle"]},{"name":"mdi:arrow-up-bold-circle-outline","tags":["arrow","arrow top bold circle outline"]},{"name":"mdi:arrow-up-bold-hexagon-outline","tags":["arrow","arrow top bold hexagon outline"]},{"name":"mdi:arrow-up-bold-outline","tags":["arrow","arrow top bold outline"]},{"name":"mdi:arrow-up-box","tags":["arrow"]},{"name":"mdi:arrow-up-circle","tags":["arrow","arrow top circle"]},{"name":"mdi:arrow-up-circle-outline","tags":["arrow","arrow top circle outline"]},{"name":"mdi:arrow-up-down","tags":["arrow"]},{"name":"mdi:arrow-up-down-bold","tags":["arrow"]},{"name":"mdi:arrow-up-down-bold-outline","tags":["arrow"]},{"name":"mdi:arrow-up-drop-circle","tags":["arrow","arrow top drop circle"]},{"name":"mdi:arrow-up-drop-circle-outline","tags":["arrow","arrow top drop circle outline"]},{"name":"mdi:arrow-up-left","tags":[]},{"name":"mdi:arrow-up-left-bold","tags":[]},{"name":"mdi:arrow-up-right","tags":[]},{"name":"mdi:arrow-up-right-bold","tags":[]},{"name":"mdi:arrow-up-thick","tags":["arrow","arrow top thick","arrow up bold","arrow top bold"]},{"name":"mdi:arrow-up-thin","tags":["arrow"]},{"name":"mdi:arrow-vertical-lock","tags":["lock","arrow","scroll vertical lock"]},{"name":"mdi:artboard","tags":["drawing / art","canvas","frame"]},{"name":"mdi:asterisk","tags":["required"]},{"name":"mdi:asterisk-circle-outline","tags":["required circle"]},{"name":"mdi:atom","tags":["science"]},{"name":"mdi:atom-variant","tags":["science","orbit"]},{"name":"mdi:attachment-check","tags":["attachment tick","paperclip check","paperclip tick"]},{"name":"mdi:attachment-lock","tags":["lock","paperclip lock"]},{"name":"mdi:attachment-minus","tags":["paperclip minus","paperclip subtract","attachment subtract"]},{"name":"mdi:attachment-off","tags":["paperclip off"]},{"name":"mdi:attachment-plus","tags":["paperclip plus","paperclip add","attachment add"]},{"name":"mdi:attachment-remove","tags":["paperclip remove"]},{"name":"mdi:audio-input-rca","tags":["audio"]},{"name":"mdi:audio-input-stereo-minijack","tags":["audio"]},{"name":"mdi:audio-input-xlr","tags":["audio"]},{"name":"mdi:audio-video","tags":["home automation","audio","av receiver"]},{"name":"mdi:audio-video-off","tags":["home automation","audio","av receiver off"]},{"name":"mdi:augmented-reality","tags":[]},{"name":"mdi:aurora","tags":["science","weather","aurora borealis","aurora australis","northern lights","southern lights","polar lights"]},{"name":"mdi:auto-download","tags":[]},{"name":"mdi:auto-mode","tags":[]},{"name":"mdi:autorenew-off","tags":["arrow","clockwise arrows off","circular arrows off","circle arrows off","sync off"]},{"name":"mdi:awning","tags":["home automation","marquise","sun shade"]},{"name":"mdi:awning-outline","tags":["home automation","marquise outline","sun shade outline"]},{"name":"mdi:axe","tags":["hardware / tools"]},{"name":"mdi:axe-battle","tags":["gaming / rpg"]},{"name":"mdi:axis","tags":[]},{"name":"mdi:axis-arrow","tags":["arrow","accelerometer","gyro"]},{"name":"mdi:axis-arrow-info","tags":["arrow"]},{"name":"mdi:axis-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-lock","tags":["lock"]},{"name":"mdi:axis-x-arrow","tags":["arrow"]},{"name":"mdi:axis-x-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-x-rotate-clockwise","tags":[]},{"name":"mdi:axis-x-rotate-counterclockwise","tags":[]},{"name":"mdi:axis-x-y-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-y-arrow","tags":["arrow"]},{"name":"mdi:axis-y-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-y-rotate-clockwise","tags":[]},{"name":"mdi:axis-y-rotate-counterclockwise","tags":[]},{"name":"mdi:axis-z-arrow","tags":["arrow"]},{"name":"mdi:axis-z-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-z-rotate-clockwise","tags":["vertical rotate clockwise"]},{"name":"mdi:axis-z-rotate-counterclockwise","tags":["vertical rotate counterclockwise"]},{"name":"mdi:baby-bottle","tags":["people / family"]},{"name":"mdi:baby-bottle-outline","tags":["people / family"]},{"name":"mdi:baby-buggy","tags":["people / family","stroller","pram","carriage"]},{"name":"mdi:baby-buggy-off","tags":["people / family"]},{"name":"mdi:baby-carriage-off","tags":["people / family","child friendly off","stroller off","pram off","buggy off"]},{"name":"mdi:backburger","tags":["hamburger menu back"]},{"name":"mdi:backspace-reverse","tags":["clear reverse","erase reverse"]},{"name":"mdi:backspace-reverse-outline","tags":["clear reverse outline","erase reverse outline"]},{"name":"mdi:bacteria","tags":["science","medical / hospital"]},{"name":"mdi:bacteria-outline","tags":["science","medical / hospital"]},{"name":"mdi:badge-account","tags":["account / user","user badge","person badge"]},{"name":"mdi:badge-account-alert","tags":["account / user","alert / error","user badge alert","person badge alert","account badge warning","user badge warning","person badge warning"]},{"name":"mdi:badge-account-alert-outline","tags":["account / user","alert / error","user badge alert outline","person badge alert outline","account badge warning outline","user badge warning outline","person badge warning outline"]},{"name":"mdi:badge-account-outline","tags":["account / user","user badge outline","person badge outline"]},{"name":"mdi:badminton","tags":["sport","shuttlecock"]},{"name":"mdi:bag-personal","tags":["transportation + flying","backpack"]},{"name":"mdi:bag-personal-off","tags":["transportation + flying","backpack off"]},{"name":"mdi:bag-personal-off-outline","tags":["transportation + flying","backpack off outline"]},{"name":"mdi:bag-personal-outline","tags":["transportation + flying","backpack outline"]},{"name":"mdi:bag-personal-tag","tags":["property tag"]},{"name":"mdi:bag-personal-tag-outline","tags":["property tag outline"]},{"name":"mdi:baguette","tags":["food / drink","bread","bakery","french baguette","loaf"]},{"name":"mdi:balloon","tags":["holiday","party balloon"]},{"name":"mdi:ballot-recount","tags":["vote recount"]},{"name":"mdi:ballot-recount-outline","tags":["vote recount outline"]},{"name":"mdi:bank-check","tags":["banking"]},{"name":"mdi:bank-circle","tags":["banking"]},{"name":"mdi:bank-circle-outline","tags":["banking"]},{"name":"mdi:bank-minus","tags":["banking"]},{"name":"mdi:bank-off","tags":["banking"]},{"name":"mdi:bank-off-outline","tags":["banking"]},{"name":"mdi:bank-plus","tags":["banking","bank add"]},{"name":"mdi:bank-remove","tags":["banking"]},{"name":"mdi:bank-transfer","tags":["banking"]},{"name":"mdi:bank-transfer-in","tags":["banking"]},{"name":"mdi:bank-transfer-out","tags":["banking"]},{"name":"mdi:barcode","tags":[]},{"name":"mdi:barcode-off","tags":[]},{"name":"mdi:barcode-scan","tags":["barcode scanner"]},{"name":"mdi:barley","tags":["agriculture","food / drink","grain","wheat","gluten"]},{"name":"mdi:barley-off","tags":["agriculture","gluten free","grain off","wheat off"]},{"name":"mdi:barn","tags":["agriculture","farm"]},{"name":"mdi:baseball","tags":["sport"]},{"name":"mdi:baseball-bat","tags":["sport"]},{"name":"mdi:baseball-diamond","tags":["sport"]},{"name":"mdi:baseball-diamond-outline","tags":["sport"]},{"name":"mdi:baseball-outline","tags":["sport"]},{"name":"mdi:bash","tags":["developer / languages"]},{"name":"mdi:basket-check","tags":["shopping"]},{"name":"mdi:basket-check-outline","tags":["shopping"]},{"name":"mdi:basket-fill","tags":["shopping","skip fill"]},{"name":"mdi:basket-minus","tags":["shopping","shopping basket minus","skip minus"]},{"name":"mdi:basket-minus-outline","tags":["shopping","shopping basket minus outline","skip minus outline"]},{"name":"mdi:basket-off","tags":["shopping","shopping basket off","skip off"]},{"name":"mdi:basket-off-outline","tags":["shopping","shopping basket off outline","skip off outline"]},{"name":"mdi:basket-plus","tags":["shopping","shopping basket plus","skip plus"]},{"name":"mdi:basket-plus-outline","tags":["shopping","shopping basket plus outline","skip plus outline"]},{"name":"mdi:basket-remove","tags":["shopping","shopping basket remove","skip remove"]},{"name":"mdi:basket-remove-outline","tags":["shopping","shopping basket remove outline","skip remove outline"]},{"name":"mdi:basket-unfill","tags":["shopping"]},{"name":"mdi:basketball-hoop","tags":["sport"]},{"name":"mdi:basketball-hoop-outline","tags":["sport"]},{"name":"mdi:bat","tags":["holiday","animal"]},{"name":"mdi:battery-10-bluetooth","tags":["battery"]},{"name":"mdi:battery-20-bluetooth","tags":["battery"]},{"name":"mdi:battery-30-bluetooth","tags":["battery"]},{"name":"mdi:battery-40-bluetooth","tags":["battery"]},{"name":"mdi:battery-50-bluetooth","tags":["battery"]},{"name":"mdi:battery-60-bluetooth","tags":["battery"]},{"name":"mdi:battery-70-bluetooth","tags":["battery"]},{"name":"mdi:battery-80-bluetooth","tags":["battery"]},{"name":"mdi:battery-90-bluetooth","tags":["battery"]},{"name":"mdi:battery-alert-bluetooth","tags":["alert / error","battery","battery warning bluetooth"]},{"name":"mdi:battery-alert-variant","tags":["battery","alert / error"]},{"name":"mdi:battery-alert-variant-outline","tags":["battery","alert / error"]},{"name":"mdi:battery-arrow-down","tags":["battery"]},{"name":"mdi:battery-arrow-down-outline","tags":["battery"]},{"name":"mdi:battery-arrow-up","tags":["battery"]},{"name":"mdi:battery-arrow-up-outline","tags":["battery"]},{"name":"mdi:battery-bluetooth","tags":["battery","battery bluetooth 100","battery bluetooth full"]},{"name":"mdi:battery-bluetooth-variant","tags":["battery"]},{"name":"mdi:battery-charging-high","tags":["battery"]},{"name":"mdi:battery-charging-low","tags":["battery"]},{"name":"mdi:battery-charging-medium","tags":["battery"]},{"name":"mdi:battery-charging-wireless","tags":["battery","home automation","battery charging wireless full","battery charging wireless 100"]},{"name":"mdi:battery-charging-wireless-10","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-20","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-30","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-40","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-50","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-60","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-70","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-80","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-90","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-alert","tags":["battery","home automation","alert / error","battery charging wireless warning"]},{"name":"mdi:battery-charging-wireless-outline","tags":["battery","home automation","battery charging wireless empty","battery charging wireless 0"]},{"name":"mdi:battery-check","tags":["battery"]},{"name":"mdi:battery-check-outline","tags":["battery"]},{"name":"mdi:battery-clock","tags":["battery","home automation","date / time","battery full clock","battery 100 clock"]},{"name":"mdi:battery-clock-outline","tags":["battery","home automation","date / time","batter 0 clock","battery empty clock"]},{"name":"mdi:battery-heart","tags":["battery"]},{"name":"mdi:battery-heart-outline","tags":["battery"]},{"name":"mdi:battery-heart-variant","tags":["battery"]},{"name":"mdi:battery-high","tags":["battery"]},{"name":"mdi:battery-lock","tags":["battery","lock"]},{"name":"mdi:battery-lock-open","tags":["battery","lock"]},{"name":"mdi:battery-low","tags":["battery"]},{"name":"mdi:battery-medium","tags":["battery"]},{"name":"mdi:battery-minus","tags":["battery"]},{"name":"mdi:battery-minus-outline","tags":["battery"]},{"name":"mdi:battery-minus-variant","tags":["battery","home automation"]},{"name":"mdi:battery-negative","tags":["battery","home automation"]},{"name":"mdi:battery-off","tags":["battery"]},{"name":"mdi:battery-off-outline","tags":["battery"]},{"name":"mdi:battery-plus","tags":["battery"]},{"name":"mdi:battery-plus-outline","tags":["battery"]},{"name":"mdi:battery-plus-variant","tags":["battery","home automation","battery saver","battery add"]},{"name":"mdi:battery-positive","tags":["battery","home automation"]},{"name":"mdi:battery-remove","tags":["battery"]},{"name":"mdi:battery-remove-outline","tags":["battery"]},{"name":"mdi:battery-sync","tags":["battery","battery saver","battery recycle","battery eco"]},{"name":"mdi:battery-sync-outline","tags":["battery","battery saver outline","battery eco outline","battery recycle outline"]},{"name":"mdi:battery-unknown-bluetooth","tags":["battery"]},{"name":"mdi:beach","tags":["places","parasol"]},{"name":"mdi:beaker","tags":["science"]},{"name":"mdi:beaker-alert","tags":["alert / error","science"]},{"name":"mdi:beaker-alert-outline","tags":["alert / error","science"]},{"name":"mdi:beaker-check","tags":["science"]},{"name":"mdi:beaker-check-outline","tags":["science"]},{"name":"mdi:beaker-minus","tags":["science"]},{"name":"mdi:beaker-minus-outline","tags":["science"]},{"name":"mdi:beaker-outline","tags":["science"]},{"name":"mdi:beaker-plus","tags":["science"]},{"name":"mdi:beaker-plus-outline","tags":["science"]},{"name":"mdi:beaker-question","tags":["science"]},{"name":"mdi:beaker-question-outline","tags":["science"]},{"name":"mdi:beaker-remove","tags":["science"]},{"name":"mdi:beaker-remove-outline","tags":["science"]},{"name":"mdi:bed-clock","tags":["date / time","bed schedule","bed time","sleep schedule","sleep time"]},{"name":"mdi:bed-double","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-empty","tags":["home automation","holiday"]},{"name":"mdi:bed-king-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:bed-queen","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-queen-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:bed-single","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-single-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:beehive-off-outline","tags":["nature","agriculture"]},{"name":"mdi:beehive-outline","tags":["nature","agriculture","honey outline"]},{"name":"mdi:beekeeper","tags":["nature","agriculture","apiarists","apiculturists","honey farmer"]},{"name":"mdi:beer","tags":["food / drink","pint","pub","bar","drink","cup full"]},{"name":"mdi:beer-outline","tags":["food / drink","drink outline","cup full outline","pint outline","pub outline","bar outline"]},{"name":"mdi:bell-alert","tags":["alert / error","notification","bell warning"]},{"name":"mdi:bell-alert-outline","tags":["alert / error","notification"]},{"name":"mdi:bell-badge","tags":["notification","bell notification"]},{"name":"mdi:bell-badge-outline","tags":["notification","bell notification outline"]},{"name":"mdi:bell-cancel","tags":["notification"]},{"name":"mdi:bell-cancel-outline","tags":["notification"]},{"name":"mdi:bell-check","tags":["notification"]},{"name":"mdi:bell-check-outline","tags":["notification"]},{"name":"mdi:bell-cog","tags":["notification","settings","bell settings","notification settings"]},{"name":"mdi:bell-cog-outline","tags":["notification","settings","bell settings outline","notification settings outline"]},{"name":"mdi:bell-minus","tags":["notification"]},{"name":"mdi:bell-minus-outline","tags":["notification"]},{"name":"mdi:bell-plus","tags":["notification","add alert","bell add"]},{"name":"mdi:bell-plus-outline","tags":["notification","bell add outline","add alert outline"]},{"name":"mdi:bell-remove","tags":["notification"]},{"name":"mdi:bell-remove-outline","tags":["notification"]},{"name":"mdi:bench","tags":[]},{"name":"mdi:bench-back","tags":[]},{"name":"mdi:beta","tags":["alpha / numeric"]},{"name":"mdi:betamax","tags":[]},{"name":"mdi:bicycle","tags":["transportation + other","sport","bike","cycling"]},{"name":"mdi:bicycle-basket","tags":["transportation + other","sport","bike basket"]},{"name":"mdi:bicycle-cargo","tags":["transportation + other","sport","bike cargo"]},{"name":"mdi:bicycle-electric","tags":["transportation + other","bike electric"]},{"name":"mdi:bicycle-penny-farthing","tags":["transportation + other","sport","bicycle high wheel","bicycle antique"]},{"name":"mdi:bike-fast","tags":["transportation + other","sport","velocity"]},{"name":"mdi:bike-pedal","tags":["transportation + other","sport","bike pedal flat"]},{"name":"mdi:bike-pedal-clipless","tags":["transportation + other","sport"]},{"name":"mdi:bike-pedal-mountain","tags":["transportation + other","sport"]},{"name":"mdi:billboard","tags":[]},{"name":"mdi:billiards","tags":["sport","pool","eight ball"]},{"name":"mdi:billiards-rack","tags":["sport","pool table","pool rack","snooker rack","pool triangle","billiards triangle","snooker triangle"]},{"name":"mdi:binoculars","tags":[]},{"name":"mdi:bio","tags":[]},{"name":"mdi:biohazard","tags":["science"]},{"name":"mdi:bird","tags":["animal"]},{"name":"mdi:blinds","tags":["home automation","roller shade closed","window closed"]},{"name":"mdi:blinds-open","tags":["home automation","roller shade open","window open"]},{"name":"mdi:block-helper","tags":[]},{"name":"mdi:blood-bag","tags":["medical / hospital"]},{"name":"mdi:bluetooth","tags":[]},{"name":"mdi:bolt","tags":["hardware / tools"]},{"name":"mdi:bomb","tags":["gaming / rpg"]},{"name":"mdi:bomb-off","tags":["gaming / rpg"]},{"name":"mdi:bone","tags":["animal","holiday"]},{"name":"mdi:bone-off","tags":["animal","holiday"]},{"name":"mdi:book-account","tags":["account / user"]},{"name":"mdi:book-account-outline","tags":["account / user"]},{"name":"mdi:book-alert","tags":["alert / error"]},{"name":"mdi:book-alert-outline","tags":["alert / error"]},{"name":"mdi:book-alphabet","tags":["dictionary"]},{"name":"mdi:book-arrow-down","tags":[]},{"name":"mdi:book-arrow-down-outline","tags":[]},{"name":"mdi:book-arrow-left","tags":[]},{"name":"mdi:book-arrow-left-outline","tags":[]},{"name":"mdi:book-arrow-right","tags":[]},{"name":"mdi:book-arrow-right-outline","tags":[]},{"name":"mdi:book-arrow-up","tags":[]},{"name":"mdi:book-arrow-up-outline","tags":[]},{"name":"mdi:book-cancel","tags":[]},{"name":"mdi:book-cancel-outline","tags":[]},{"name":"mdi:book-check","tags":[]},{"name":"mdi:book-check-outline","tags":[]},{"name":"mdi:book-clock","tags":["date / time","book schedule","book time"]},{"name":"mdi:book-clock-outline","tags":["date / time","book schedule","book time"]},{"name":"mdi:book-cog","tags":["settings","book settings"]},{"name":"mdi:book-cog-outline","tags":["settings","book settings outline"]},{"name":"mdi:book-cross","tags":["religion","bible"]},{"name":"mdi:book-edit","tags":["edit / modify"]},{"name":"mdi:book-edit-outline","tags":["edit / modify"]},{"name":"mdi:book-education","tags":[]},{"name":"mdi:book-education-outline","tags":[]},{"name":"mdi:book-heart","tags":["book favorite","book love"]},{"name":"mdi:book-heart-outline","tags":["book favorite outline","book love outline"]},{"name":"mdi:book-information-variant","tags":["encyclopedia"]},{"name":"mdi:book-lock","tags":["lock","book secure"]},{"name":"mdi:book-lock-open","tags":["lock","book unsecure"]},{"name":"mdi:book-lock-open-outline","tags":["lock"]},{"name":"mdi:book-lock-outline","tags":["lock","book secure outline"]},{"name":"mdi:book-marker","tags":["navigation","book location"]},{"name":"mdi:book-marker-outline","tags":["navigation","book location outline"]},{"name":"mdi:book-minus","tags":[]},{"name":"mdi:book-minus-multiple","tags":["books minus"]},{"name":"mdi:book-minus-multiple-outline","tags":[]},{"name":"mdi:book-minus-outline","tags":[]},{"name":"mdi:book-multiple","tags":["books"]},{"name":"mdi:book-multiple-outline","tags":[]},{"name":"mdi:book-music","tags":["audio","music","audio book"]},{"name":"mdi:book-music-outline","tags":["music"]},{"name":"mdi:book-off","tags":[]},{"name":"mdi:book-off-outline","tags":[]},{"name":"mdi:book-play","tags":[]},{"name":"mdi:book-play-outline","tags":[]},{"name":"mdi:book-plus","tags":["book add"]},{"name":"mdi:book-plus-multiple","tags":["books plus","book multiple add","books add"]},{"name":"mdi:book-plus-multiple-outline","tags":[]},{"name":"mdi:book-plus-outline","tags":[]},{"name":"mdi:book-refresh","tags":[]},{"name":"mdi:book-refresh-outline","tags":[]},{"name":"mdi:book-remove","tags":[]},{"name":"mdi:book-remove-multiple","tags":["books remove"]},{"name":"mdi:book-remove-multiple-outline","tags":[]},{"name":"mdi:book-remove-outline","tags":[]},{"name":"mdi:book-search","tags":[]},{"name":"mdi:book-search-outline","tags":[]},{"name":"mdi:book-settings","tags":["settings"]},{"name":"mdi:book-settings-outline","tags":["settings"]},{"name":"mdi:book-sync","tags":[]},{"name":"mdi:book-sync-outline","tags":[]},{"name":"mdi:bookmark-box","tags":[]},{"name":"mdi:bookmark-box-multiple-outline","tags":["collections bookmark outline","library bookmark outline"]},{"name":"mdi:bookmark-box-outline","tags":[]},{"name":"mdi:bookmark-check-outline","tags":["bookmark success outline"]},{"name":"mdi:bookmark-minus","tags":[]},{"name":"mdi:bookmark-minus-outline","tags":[]},{"name":"mdi:bookmark-music","tags":["music"]},{"name":"mdi:bookmark-music-outline","tags":["music"]},{"name":"mdi:bookmark-off","tags":[]},{"name":"mdi:bookmark-off-outline","tags":[]},{"name":"mdi:bookmark-plus","tags":["bookmark add"]},{"name":"mdi:bookmark-remove","tags":[]},{"name":"mdi:bookmark-remove-outline","tags":[]},{"name":"mdi:bookshelf","tags":[]},{"name":"mdi:boom-gate","tags":["transportation + road","home automation","boom arm","boom barrier","arm barrier","barrier","automatic gate"]},{"name":"mdi:boom-gate-alert","tags":["alert / error","transportation + road","boom arm alert","boom barrier alert","arm barrier alert","barrier alert","automatic gate alert"]},{"name":"mdi:boom-gate-alert-outline","tags":["alert / error","transportation + road","boom arm alert outline","boom barrier alert outline","arm barrier alert outline","barrier alert outline","automatic gate alert outline"]},{"name":"mdi:boom-gate-arrow-down","tags":["transportation + road","boom arm down","boom barrier down","arm barrier down","barrier down","automatic gate down"]},{"name":"mdi:boom-gate-arrow-down-outline","tags":["transportation + road","boom arm down outline","boom barrier down outline","arm barrier down outline","barrier down outline","automatic gate down outline"]},{"name":"mdi:boom-gate-arrow-up","tags":["transportation + road","boom arm up","boom barrier up","arm barrier up","barrier up","automatic gate up"]},{"name":"mdi:boom-gate-arrow-up-outline","tags":["transportation + road","boom arm up outline","boom barrier up outline","arm barrier up outline","barrier up outline","automatic gate up outline"]},{"name":"mdi:boom-gate-outline","tags":["transportation + road","home automation","boom arm outline","boom barrier outline","arm barrier outline","barrier outline","automatic gate outline"]},{"name":"mdi:boom-gate-up","tags":["transportation + road","home automation","boom arm up","boom barrier up","arm barrier up","barrier up","automatic gate up"]},{"name":"mdi:boom-gate-up-outline","tags":["transportation + road","home automation","boom arm up outline","boom barrier up outline","arm barrier up outline","barrier up outline","automatic gate up outline"]},{"name":"mdi:boomerang","tags":["gaming / rpg"]},{"name":"mdi:border-all-variant","tags":["text / content / format"]},{"name":"mdi:border-bottom-variant","tags":["text / content / format"]},{"name":"mdi:border-left-variant","tags":["text / content / format"]},{"name":"mdi:border-none-variant","tags":["text / content / format"]},{"name":"mdi:border-radius","tags":["text / content / format","border round corners"]},{"name":"mdi:border-right-variant","tags":["text / content / format"]},{"name":"mdi:border-top-variant","tags":["text / content / format"]},{"name":"mdi:bottle-soda","tags":["food / drink","bottle coke","bottle pop"]},{"name":"mdi:bottle-soda-classic","tags":["food / drink","bottle coke classic","bottle pop classic"]},{"name":"mdi:bottle-soda-classic-outline","tags":[]},{"name":"mdi:bottle-soda-outline","tags":["food / drink","bottle coke outline","bottle pop outline"]},{"name":"mdi:bottle-tonic","tags":["science","flask"]},{"name":"mdi:bottle-tonic-outline","tags":["science","flask outline"]},{"name":"mdi:bottle-tonic-plus","tags":["gaming / rpg","health potion"]},{"name":"mdi:bottle-tonic-plus-outline","tags":["gaming / rpg","health potion outline"]},{"name":"mdi:bottle-tonic-skull","tags":["gaming / rpg","holiday","poison","moonshine"]},{"name":"mdi:bottle-tonic-skull-outline","tags":["gaming / rpg","holiday","poison outline","moonshine outline"]},{"name":"mdi:bottle-wine","tags":["food / drink"]},{"name":"mdi:bottle-wine-outline","tags":["food / drink"]},{"name":"mdi:bow-arrow","tags":["gaming / rpg","sport"]},{"name":"mdi:bow-tie","tags":["clothing"]},{"name":"mdi:bowl","tags":["food / drink"]},{"name":"mdi:bowl-mix","tags":["food / drink","mixing bowl"]},{"name":"mdi:bowl-mix-outline","tags":["food / drink","mixing bowl outline"]},{"name":"mdi:bowl-outline","tags":["food / drink"]},{"name":"mdi:bowling","tags":["sport"]},{"name":"mdi:box-cutter","tags":["hardware / tools","stanley knife"]},{"name":"mdi:box-cutter-off","tags":[]},{"name":"mdi:box-shadow","tags":[]},{"name":"mdi:boxing-glove","tags":["sport"]},{"name":"mdi:braille","tags":["touch reading","hand reading"]},{"name":"mdi:brain","tags":["medical / hospital"]},{"name":"mdi:bread-slice","tags":["food / drink"]},{"name":"mdi:bread-slice-outline","tags":["food / drink"]},{"name":"mdi:bridge","tags":["places"]},{"name":"mdi:briefcase-account","tags":["account / user","briefcase person","briefcase user"]},{"name":"mdi:briefcase-account-outline","tags":["account / user","briefcase person outline","briefcase user outline"]},{"name":"mdi:briefcase-arrow-left-right","tags":["briefcase transfer","briefcase exchange","briefcase swap"]},{"name":"mdi:briefcase-arrow-left-right-outline","tags":["briefcase exchange outline","briefcase transfer outline","briefcase swap outline"]},{"name":"mdi:briefcase-arrow-up-down","tags":["briefcase exchange","briefcase transfer","briefcase swap"]},{"name":"mdi:briefcase-arrow-up-down-outline","tags":["briefcase exchange outline","briefcase transfer outline","briefcase swap outline"]},{"name":"mdi:briefcase-check-outline","tags":[]},{"name":"mdi:briefcase-clock","tags":["date / time"]},{"name":"mdi:briefcase-clock-outline","tags":["date / time"]},{"name":"mdi:briefcase-download-outline","tags":[]},{"name":"mdi:briefcase-edit","tags":["edit / modify"]},{"name":"mdi:briefcase-edit-outline","tags":["edit / modify"]},{"name":"mdi:briefcase-eye","tags":["briefcase view"]},{"name":"mdi:briefcase-eye-outline","tags":["briefcase view outline"]},{"name":"mdi:briefcase-minus","tags":[]},{"name":"mdi:briefcase-minus-outline","tags":[]},{"name":"mdi:briefcase-off","tags":[]},{"name":"mdi:briefcase-off-outline","tags":[]},{"name":"mdi:briefcase-plus","tags":["briefcase add"]},{"name":"mdi:briefcase-plus-outline","tags":["briefcase add outline"]},{"name":"mdi:briefcase-remove","tags":[]},{"name":"mdi:briefcase-remove-outline","tags":[]},{"name":"mdi:briefcase-search","tags":[]},{"name":"mdi:briefcase-search-outline","tags":[]},{"name":"mdi:briefcase-upload","tags":[]},{"name":"mdi:briefcase-upload-outline","tags":[]},{"name":"mdi:briefcase-variant-off","tags":[]},{"name":"mdi:briefcase-variant-off-outline","tags":[]},{"name":"mdi:brightness-percent","tags":["shopping","discount","sale"]},{"name":"mdi:broom","tags":[]},{"name":"mdi:brush-off","tags":[]},{"name":"mdi:bucket","tags":[]},{"name":"mdi:bucket-outline","tags":[]},{"name":"mdi:buffet","tags":["home automation","sideboard"]},{"name":"mdi:bug-check","tags":["animal","bug tick"]},{"name":"mdi:bug-check-outline","tags":["animal","bug tick outline"]},{"name":"mdi:bug-pause","tags":[]},{"name":"mdi:bug-pause-outline","tags":[]},{"name":"mdi:bug-play","tags":["bug start"]},{"name":"mdi:bug-play-outline","tags":[]},{"name":"mdi:bug-stop","tags":[]},{"name":"mdi:bug-stop-outline","tags":[]},{"name":"mdi:bugle","tags":["automotive","music","car horn"]},{"name":"mdi:bulkhead-light","tags":["home automation"]},{"name":"mdi:bulldozer","tags":["hardware / tools"]},{"name":"mdi:bullet","tags":[]},{"name":"mdi:bulletin-board","tags":["notice board"]},{"name":"mdi:bullhorn-variant","tags":["announcement","megaphone","loudspeaker"]},{"name":"mdi:bullhorn-variant-outline","tags":["announcement outline","megaphone outline","loudspeaker outline"]},{"name":"mdi:bullseye","tags":["sport","target"]},{"name":"mdi:bullseye-arrow","tags":["sport","target arrow"]},{"name":"mdi:bunk-bed","tags":["home automation"]},{"name":"mdi:bunk-bed-outline","tags":["home automation"]},{"name":"mdi:bus-articulated-end","tags":["transportation + road"]},{"name":"mdi:bus-articulated-front","tags":["transportation + road"]},{"name":"mdi:bus-double-decker","tags":["transportation + road"]},{"name":"mdi:bus-electric","tags":["transportation + road"]},{"name":"mdi:bus-marker","tags":["navigation","bus location","bus stop"]},{"name":"mdi:bus-multiple","tags":["transportation + road","fleet"]},{"name":"mdi:bus-school","tags":["transportation + road","education"]},{"name":"mdi:bus-side","tags":["transportation + road"]},{"name":"mdi:bus-stop","tags":["transportation + road","navigation"]},{"name":"mdi:bus-stop-covered","tags":["transportation + road","navigation"]},{"name":"mdi:bus-stop-uncovered","tags":["transportation + road","navigation"]},{"name":"mdi:butterfly","tags":["nature","animal"]},{"name":"mdi:butterfly-outline","tags":["nature","animal"]},{"name":"mdi:button-cursor","tags":["form"]},{"name":"mdi:button-pointer","tags":["form"]},{"name":"mdi:cabin-a-frame","tags":["home automation"]},{"name":"mdi:cable-data","tags":[]},{"name":"mdi:cactus","tags":["nature"]},{"name":"mdi:calculator","tags":["math"]},{"name":"mdi:calendar-account","tags":["date / time","account / user","calendar user"]},{"name":"mdi:calendar-account-outline","tags":["date / time","account / user","calendar user outline"]},{"name":"mdi:calendar-alert","tags":["date / time","alert / error","event alert","calendar warning"]},{"name":"mdi:calendar-alert-outline","tags":["date / time","alert / error"]},{"name":"mdi:calendar-arrow-left","tags":["date / time","reschedule"]},{"name":"mdi:calendar-arrow-right","tags":["date / time","reschedule"]},{"name":"mdi:calendar-badge","tags":["date / time"]},{"name":"mdi:calendar-badge-outline","tags":["date / time"]},{"name":"mdi:calendar-blank","tags":["date / time","calendar today"]},{"name":"mdi:calendar-blank-multiple","tags":["date / time"]},{"name":"mdi:calendar-clock","tags":["date / time","event clock","event time","calendar time"]},{"name":"mdi:calendar-clock-outline","tags":["date / time"]},{"name":"mdi:calendar-collapse-horizontal","tags":["date / time"]},{"name":"mdi:calendar-collapse-horizontal-outline","tags":["date / time"]},{"name":"mdi:calendar-cursor","tags":["date / time"]},{"name":"mdi:calendar-cursor-outline","tags":["date / time"]},{"name":"mdi:calendar-edit","tags":["date / time","edit / modify","event edit"]},{"name":"mdi:calendar-edit-outline","tags":["date / time","edit / modify"]},{"name":"mdi:calendar-end","tags":["date / time"]},{"name":"mdi:calendar-end-outline","tags":["date / time"]},{"name":"mdi:calendar-expand-horizontal","tags":["date / time"]},{"name":"mdi:calendar-expand-horizontal-outline","tags":["date / time"]},{"name":"mdi:calendar-export","tags":["date / time"]},{"name":"mdi:calendar-export-outline","tags":["date / time"]},{"name":"mdi:calendar-filter","tags":["date / time"]},{"name":"mdi:calendar-filter-outline","tags":["date / time","event week end outline"]},{"name":"mdi:calendar-heart","tags":["date / time","event heart"]},{"name":"mdi:calendar-heart-outline","tags":["date / time"]},{"name":"mdi:calendar-import","tags":["date / time"]},{"name":"mdi:calendar-import-outline","tags":["date / time"]},{"name":"mdi:calendar-lock","tags":["date / time","lock"]},{"name":"mdi:calendar-lock-open","tags":["lock","date / time"]},{"name":"mdi:calendar-lock-open-outline","tags":["lock","date / time"]},{"name":"mdi:calendar-lock-outline","tags":["date / time","lock"]},{"name":"mdi:calendar-minus","tags":["date / time","event minus"]},{"name":"mdi:calendar-minus-outline","tags":["date / time"]},{"name":"mdi:calendar-month","tags":["date / time"]},{"name":"mdi:calendar-month-outline","tags":["date / time"]},{"name":"mdi:calendar-multiple","tags":["date / time","event multiple","calendars","events"]},{"name":"mdi:calendar-multiple-check","tags":["date / time","event multiple check","calendar multiple tick","calendars check","calendars tick","event multiple tick","events check","events tick"]},{"name":"mdi:calendar-multiselect","tags":["date / time"]},{"name":"mdi:calendar-multiselect-outline","tags":["date / time"]},{"name":"mdi:calendar-plus","tags":["date / time","event plus","calendar add","event add"]},{"name":"mdi:calendar-plus-outline","tags":["date / time"]},{"name":"mdi:calendar-question","tags":["date / time","calendar rsvp","event question","calendar help"]},{"name":"mdi:calendar-question-outline","tags":["date / time","calendar help outline"]},{"name":"mdi:calendar-refresh","tags":["date / time","calendar repeat"]},{"name":"mdi:calendar-refresh-outline","tags":["date / time","calendar repeat outline"]},{"name":"mdi:calendar-search","tags":["date / time","event search"]},{"name":"mdi:calendar-search-outline","tags":["date / time"]},{"name":"mdi:calendar-star","tags":["date / time","event star","calendar favorite"]},{"name":"mdi:calendar-star-four-points","tags":["date / time","calendar auto","event star four points","event auto"]},{"name":"mdi:calendar-star-outline","tags":["date / time"]},{"name":"mdi:calendar-start","tags":["date / time"]},{"name":"mdi:calendar-start-outline","tags":["date / time"]},{"name":"mdi:calendar-sync","tags":["date / time","calendar repeat"]},{"name":"mdi:calendar-sync-outline","tags":["date / time","calendar repeat outline"]},{"name":"mdi:calendar-today-outline","tags":["date / time","calendar day outline"]},{"name":"mdi:calendar-week","tags":["date / time","event week"]},{"name":"mdi:calendar-week-begin","tags":["date / time","event week begin"]},{"name":"mdi:calendar-week-begin-outline","tags":["date / time","event week begin outline"]},{"name":"mdi:calendar-week-outline","tags":["date / time","event week outline"]},{"name":"mdi:calendar-weekend","tags":["date / time"]},{"name":"mdi:calendar-weekend-outline","tags":["date / time"]},{"name":"mdi:camcorder","tags":["video / movie"]},{"name":"mdi:camcorder-off","tags":["video / movie"]},{"name":"mdi:camera-document","tags":["photography","overhead projector"]},{"name":"mdi:camera-document-off","tags":["photography","overhead projector off"]},{"name":"mdi:camera-flip","tags":["photography","camera sync","camera refresh"]},{"name":"mdi:camera-flip-outline","tags":["photography","camera sync outline","camera refresh outline"]},{"name":"mdi:camera-gopro","tags":["photography","device / tech"]},{"name":"mdi:camera-lock","tags":["photography","lock"]},{"name":"mdi:camera-lock-open","tags":["photography"]},{"name":"mdi:camera-lock-open-outline","tags":["photography"]},{"name":"mdi:camera-lock-outline","tags":["photography","lock"]},{"name":"mdi:camera-marker","tags":["photography","navigation","camera location"]},{"name":"mdi:camera-marker-outline","tags":["photography","navigation","camera location outline"]},{"name":"mdi:camera-metering-center","tags":["photography","camera metering centre"]},{"name":"mdi:camera-metering-matrix","tags":["photography"]},{"name":"mdi:camera-metering-partial","tags":["photography"]},{"name":"mdi:camera-metering-spot","tags":["photography"]},{"name":"mdi:camera-off","tags":["photography"]},{"name":"mdi:camera-off-outline","tags":["photography"]},{"name":"mdi:camera-retake","tags":["photography"]},{"name":"mdi:camera-retake-outline","tags":["photography"]},{"name":"mdi:camera-timer","tags":["date / time","photography"]},{"name":"mdi:campfire","tags":[]},{"name":"mdi:candelabra","tags":["home automation","holiday","candle","candelabrum"]},{"name":"mdi:candelabra-fire","tags":["home automation","holiday","candelabrum fire","candelabrum flame","candelabra flame","candle fire","candle flame"]},{"name":"mdi:candy","tags":["food / drink","treat","chocolate"]},{"name":"mdi:candy-off","tags":["food / drink","chocolate off","treat off"]},{"name":"mdi:candy-off-outline","tags":["food / drink","gaming / rpg","chocolate off outline","treat off outline","navi off"]},{"name":"mdi:candy-outline","tags":["food / drink","gaming / rpg","chocolate outline","treat outline","navi","hey listen","fairy"]},{"name":"mdi:candycane","tags":["holiday","food / drink"]},{"name":"mdi:cannabis","tags":["nature","medical / hospital","weed","pot","marijuana"]},{"name":"mdi:cannabis-off","tags":[]},{"name":"mdi:caps-lock","tags":["text / content / format"]},{"name":"mdi:car-2-plus","tags":["transportation + road","automotive","hov lane","high occupancy vehicle lane","carpool lane"]},{"name":"mdi:car-3-plus","tags":["transportation + road","automotive","hov lane","high occupancy vehicle lane","carpool lane"]},{"name":"mdi:car-arrow-left","tags":["automotive","transportation + road"]},{"name":"mdi:car-arrow-right","tags":["automotive","transportation + road"]},{"name":"mdi:car-back","tags":["automotive","transportation + road"]},{"name":"mdi:car-battery","tags":["battery","automotive"]},{"name":"mdi:car-brake-abs","tags":["automotive","anti lock brake system","anti lock braking system"]},{"name":"mdi:car-brake-alert","tags":["automotive","alert / error","car parking brake","car handbrake","car hand brake","car emergency brake","car brake warning"]},{"name":"mdi:car-brake-fluid-level","tags":["automotive"]},{"name":"mdi:car-brake-hold","tags":["automotive"]},{"name":"mdi:car-brake-low-pressure","tags":["automotive"]},{"name":"mdi:car-brake-parking","tags":["automotive"]},{"name":"mdi:car-brake-retarder","tags":["automotive"]},{"name":"mdi:car-brake-temperature","tags":["automotive"]},{"name":"mdi:car-brake-worn-linings","tags":["automotive"]},{"name":"mdi:car-child-seat","tags":["automotive","people / family"]},{"name":"mdi:car-clock","tags":["date / time","automotive"]},{"name":"mdi:car-clutch","tags":["automotive"]},{"name":"mdi:car-cog","tags":["automotive","settings","transportation + road","car settings"]},{"name":"mdi:car-connected","tags":["transportation + road","automotive"]},{"name":"mdi:car-convertible","tags":["transportation + road","automotive"]},{"name":"mdi:car-coolant-level","tags":["automotive"]},{"name":"mdi:car-cruise-control","tags":["automotive"]},{"name":"mdi:car-defrost-front","tags":["automotive"]},{"name":"mdi:car-defrost-rear","tags":["automotive"]},{"name":"mdi:car-door","tags":["automotive"]},{"name":"mdi:car-door-lock","tags":["automotive","lock"]},{"name":"mdi:car-emergency","tags":["transportation + road","automotive","car police"]},{"name":"mdi:car-esp","tags":["automotive","electronic stability program"]},{"name":"mdi:car-estate","tags":["transportation + road","automotive","car suv","car sports utility vehicle"]},{"name":"mdi:car-hatchback","tags":["transportation + road","automotive"]},{"name":"mdi:car-info","tags":["automotive"]},{"name":"mdi:car-key","tags":["transportation + road","automotive","car rental","rent a car"]},{"name":"mdi:car-lifted-pickup","tags":["automotive","agriculture"]},{"name":"mdi:car-light-alert","tags":["alert / error","automotive"]},{"name":"mdi:car-light-dimmed","tags":["automotive","head light dimmed","low beam"]},{"name":"mdi:car-light-fog","tags":["automotive","head light fog"]},{"name":"mdi:car-light-high","tags":["automotive","head light high","high beam"]},{"name":"mdi:car-limousine","tags":["transportation + road","automotive"]},{"name":"mdi:car-multiple","tags":["transportation + road","automotive"]},{"name":"mdi:car-off","tags":["automotive"]},{"name":"mdi:car-parking-lights","tags":["automotive"]},{"name":"mdi:car-pickup","tags":["transportation + road","automotive","agriculture"]},{"name":"mdi:car-search","tags":["automotive","car find"]},{"name":"mdi:car-search-outline","tags":["automotive","car find outline"]},{"name":"mdi:car-seat","tags":["automotive"]},{"name":"mdi:car-seat-cooler","tags":["automotive"]},{"name":"mdi:car-seat-heater","tags":["automotive"]},{"name":"mdi:car-select","tags":["automotive","car location"]},{"name":"mdi:car-settings","tags":["automotive","settings"]},{"name":"mdi:car-shift-pattern","tags":["automotive","car transmission","car manual transmission"]},{"name":"mdi:car-side","tags":["transportation + road","automotive","car saloon"]},{"name":"mdi:car-speed-limiter","tags":["automotive"]},{"name":"mdi:car-sports","tags":["transportation + road","sport","automotive"]},{"name":"mdi:car-tire-alert","tags":["automotive","alert / error","car tyre alert","car tyre warning","car tire warning"]},{"name":"mdi:car-traction-control","tags":["automotive"]},{"name":"mdi:car-turbocharger","tags":["automotive"]},{"name":"mdi:car-windshield","tags":["automotive","car front glass"]},{"name":"mdi:car-windshield-outline","tags":["automotive","car front glass outline"]},{"name":"mdi:car-wireless","tags":["automotive","car autonomous","car self driving","car smart"]},{"name":"mdi:car-wrench","tags":["automotive","hardware / tools","car repair","mechanic"]},{"name":"mdi:caravan","tags":["transportation + road","home automation","automotive"]},{"name":"mdi:card","tags":["form","button"]},{"name":"mdi:card-account-details","tags":["account / user","identification card","user card details","id card","person card details","drivers license","business card"]},{"name":"mdi:card-account-details-outline","tags":["account / user","identification card outline","user card details outline","id card outline","person card details outline","drivers license outline","business card outline"]},{"name":"mdi:card-account-details-star","tags":["account / user","card account details favorite"]},{"name":"mdi:card-account-details-star-outline","tags":["account / user","card account details favorite outline"]},{"name":"mdi:card-bulleted","tags":[]},{"name":"mdi:card-bulleted-off","tags":[]},{"name":"mdi:card-bulleted-off-outline","tags":[]},{"name":"mdi:card-bulleted-outline","tags":[]},{"name":"mdi:card-bulleted-settings","tags":["settings"]},{"name":"mdi:card-bulleted-settings-outline","tags":["settings"]},{"name":"mdi:card-minus","tags":[]},{"name":"mdi:card-minus-outline","tags":[]},{"name":"mdi:card-multiple","tags":[]},{"name":"mdi:card-multiple-outline","tags":[]},{"name":"mdi:card-off","tags":[]},{"name":"mdi:card-off-outline","tags":[]},{"name":"mdi:card-outline","tags":["form","button outline"]},{"name":"mdi:card-plus","tags":[]},{"name":"mdi:card-plus-outline","tags":[]},{"name":"mdi:card-remove","tags":[]},{"name":"mdi:card-remove-outline","tags":[]},{"name":"mdi:card-text","tags":[]},{"name":"mdi:card-text-outline","tags":[]},{"name":"mdi:cards","tags":["gaming / rpg"]},{"name":"mdi:cards-club","tags":["gaming / rpg","suit clubs","poker club"]},{"name":"mdi:cards-club-outline","tags":[]},{"name":"mdi:cards-diamond","tags":["gaming / rpg","transportation + road","suit diamonds","hov lane","high occupancy vehicle lane","carpool lane","poker diamond"]},{"name":"mdi:cards-diamond-outline","tags":["transportation + road","hov lane outline","high occupancy vehicle lane outline","carpool lane outline","poker diamond outline"]},{"name":"mdi:cards-heart","tags":["gaming / rpg","suit hearts","poker heart"]},{"name":"mdi:cards-heart-outline","tags":[]},{"name":"mdi:cards-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-spade","tags":["gaming / rpg","suit spades","poker spade"]},{"name":"mdi:cards-spade-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-variant","tags":["gaming / rpg"]},{"name":"mdi:carrot","tags":["agriculture","food / drink"]},{"name":"mdi:cart-arrow-down","tags":["shopping","shopping cart arrow down","trolley arrow down"]},{"name":"mdi:cart-arrow-right","tags":["shopping","trolley arrow right","shopping cart arrow right"]},{"name":"mdi:cart-arrow-up","tags":["shopping","shopping cart arrow up","trolley arrow up"]},{"name":"mdi:cart-check","tags":["shopping"]},{"name":"mdi:cart-heart","tags":["shopping","cart favorite","shopping favorite"]},{"name":"mdi:cart-minus","tags":["shopping","shopping cart minus","trolley minus"]},{"name":"mdi:cart-percent","tags":["shopping","cart discount","cart sale","trolley percent"]},{"name":"mdi:cart-remove","tags":["shopping","trolley remove","shopping cart remove"]},{"name":"mdi:cart-variant","tags":["shopping"]},{"name":"mdi:case-sensitive-alt","tags":[]},{"name":"mdi:cash","tags":["currency","banking","shopping","money"]},{"name":"mdi:cash-check","tags":["currency","banking"]},{"name":"mdi:cash-clock","tags":["banking","currency","date / time","cash schedule","payment schedule","payment clock","auto pay"]},{"name":"mdi:cash-fast","tags":["currency","banking","instant deposit","instant transfer","instant cash"]},{"name":"mdi:cash-lock","tags":["lock","currency","banking"]},{"name":"mdi:cash-lock-open","tags":["lock","currency","banking"]},{"name":"mdi:cash-marker","tags":["banking","currency","navigation","cod","cash on delivery","cash location"]},{"name":"mdi:cash-minus","tags":["currency","banking"]},{"name":"mdi:cash-multiple","tags":["currency","banking","money"]},{"name":"mdi:cash-off","tags":["currency","banking"]},{"name":"mdi:cash-plus","tags":["currency","banking"]},{"name":"mdi:cash-refund","tags":["banking","currency","cash return","cash chargeback"]},{"name":"mdi:cash-register","tags":["shopping","banking","till"]},{"name":"mdi:cash-remove","tags":["currency","banking"]},{"name":"mdi:cash-sync","tags":["banking","currency","auto pay","recurring payment","scheduled payment","cash cycle"]},{"name":"mdi:cassette","tags":["music","tape"]},{"name":"mdi:cast-audio","tags":["audio","cast speaker"]},{"name":"mdi:cast-audio-variant","tags":["apple airplay"]},{"name":"mdi:cast-off","tags":["home automation"]},{"name":"mdi:castle","tags":["places"]},{"name":"mdi:cat","tags":["animal","holiday","emoji cat","emoticon cat"]},{"name":"mdi:cctv","tags":["home automation","closed circuit television","security camera"]},{"name":"mdi:cctv-off","tags":["home automation","closed circuit television off","security camera off"]},{"name":"mdi:ceiling-fan","tags":["home automation"]},{"name":"mdi:ceiling-fan-light","tags":["home automation","ceiling fan on"]},{"name":"mdi:ceiling-light","tags":["home automation","ceiling lamp"]},{"name":"mdi:ceiling-light-multiple","tags":["home automation","ceiling lamp multiple"]},{"name":"mdi:ceiling-light-multiple-outline","tags":["home automation","ceiling lamp multiple outline"]},{"name":"mdi:ceiling-light-outline","tags":["home automation"]},{"name":"mdi:cellphone-arrow-down-variant","tags":["cellphone / phone","cellphone download"]},{"name":"mdi:cellphone-basic","tags":["cellphone / phone","device / tech","mobile phone basic"]},{"name":"mdi:cellphone-charging","tags":["cellphone / phone"]},{"name":"mdi:cellphone-check","tags":["cellphone / phone"]},{"name":"mdi:cellphone-key","tags":["cellphone / phone","device / tech","mobile phone key","smartphone key"]},{"name":"mdi:cellphone-marker","tags":["cellphone / phone","navigation","cellphone location","cellphone map","find my phone","cellphone gps"]},{"name":"mdi:cellphone-message","tags":["cellphone / phone","device / tech","mobile phone message","smartphone message"]},{"name":"mdi:cellphone-message-off","tags":["cellphone / phone"]},{"name":"mdi:cellphone-nfc-off","tags":["cellphone / phone"]},{"name":"mdi:cellphone-remove","tags":["cellphone / phone","device / tech","phonelink erase","mobile phone erase","smartphone erase","cellphone erase"]},{"name":"mdi:cellphone-text","tags":["cellphone / phone","device / tech","mobile phone text","smartphone text"]},{"name":"mdi:cellphone-wireless","tags":["cellphone / phone","device / tech","mobile phone wireless","smartphone wireless"]},{"name":"mdi:certificate","tags":["diploma","seal"]},{"name":"mdi:certificate-outline","tags":["diploma outline","seal outline"]},{"name":"mdi:chair-rolling","tags":["home automation","office chair","study chair"]},{"name":"mdi:chair-school","tags":["desk","education","learn"]},{"name":"mdi:chandelier","tags":["home automation","ceiling light","girandole","candelabra lamp","suspended light"]},{"name":"mdi:chart-arc","tags":["math","report arc","widget arc"]},{"name":"mdi:chart-areaspline","tags":["math","report areaspline","widget areaspline","graph areaspline"]},{"name":"mdi:chart-areaspline-variant","tags":["math","report areaspline variant","widget areaspline variant","graph areaspline variant"]},{"name":"mdi:chart-bar","tags":["math","report bar","widget bar","graph bar"]},{"name":"mdi:chart-bar-stacked","tags":["math","report bar stacked","widget bar stacked","graph bar stacked"]},{"name":"mdi:chart-bell-curve","tags":["math","report bell curve","widget bell curve","graph bell curve"]},{"name":"mdi:chart-bell-curve-cumulative","tags":["math","report bell curve cumulative","widget bell curve cumulative","graph bell curve cumulative"]},{"name":"mdi:chart-donut-variant","tags":["math","chart doughnut variant","report donut variant","widget donut variant"]},{"name":"mdi:chart-gantt","tags":["math","report gantt","timeline","widget gantt","roadmap"]},{"name":"mdi:chart-histogram","tags":["math","report histogram","widget histogram","graph histogram"]},{"name":"mdi:chart-line","tags":["math","report line","widget line","graph line"]},{"name":"mdi:chart-line-stacked","tags":["math","report line stacked","widget line stacked","graph line stacked"]},{"name":"mdi:chart-multiple","tags":["math","report multiple","widget multiple","graph multiple"]},{"name":"mdi:chart-ppf","tags":["math","chart production possibility frontier","report ppf","widget ppf","graph ppf"]},{"name":"mdi:chart-sankey","tags":["math","chart snakey","report sankey","widget sankey","graph sankey"]},{"name":"mdi:chart-sankey-variant","tags":["math","chart snakey variant","report sankey variant","widget sankey variant","graph sankey variant"]},{"name":"mdi:chart-scatter-plot","tags":["math","report scatter plot","widget scatter plot","graph scatter plot"]},{"name":"mdi:chart-scatter-plot-hexbin","tags":["math","chart scatterplot hexbin","report scatter plot hexbin","widget scatter plot hexbin","graph scatter plot hexbin"]},{"name":"mdi:chart-timeline","tags":["math","report timeline","widget timeline","graph timeline","roadmap"]},{"name":"mdi:chart-waterfall","tags":["math"]},{"name":"mdi:chat","tags":[]},{"name":"mdi:chat-alert","tags":["alert / error","chat warning"]},{"name":"mdi:chat-alert-outline","tags":["alert / error"]},{"name":"mdi:chat-minus","tags":[]},{"name":"mdi:chat-minus-outline","tags":[]},{"name":"mdi:chat-outline","tags":[]},{"name":"mdi:chat-plus","tags":[]},{"name":"mdi:chat-plus-outline","tags":[]},{"name":"mdi:chat-processing","tags":["chat typing"]},{"name":"mdi:chat-processing-outline","tags":["chat typing outline"]},{"name":"mdi:chat-question","tags":["chat help"]},{"name":"mdi:chat-question-outline","tags":["chat help outline"]},{"name":"mdi:chat-remove","tags":[]},{"name":"mdi:chat-remove-outline","tags":[]},{"name":"mdi:chat-sleep","tags":[]},{"name":"mdi:chat-sleep-outline","tags":[]},{"name":"mdi:check-bold","tags":["check thick","success thick","success bold"]},{"name":"mdi:check-decagram","tags":["verified","decagram check","approve","approval","tick decagram"]},{"name":"mdi:check-decagram-outline","tags":["approve","approval","verified"]},{"name":"mdi:check-network","tags":["tick network"]},{"name":"mdi:check-network-outline","tags":["tick network outline"]},{"name":"mdi:check-underline","tags":[]},{"name":"mdi:check-underline-circle","tags":[]},{"name":"mdi:check-underline-circle-outline","tags":[]},{"name":"mdi:checkbook-arrow-left","tags":["banking","chequebook arrow left"]},{"name":"mdi:checkbook-arrow-right","tags":["banking","chequebook arrow right"]},{"name":"mdi:checkbox-blank-badge","tags":["notification","form","checkbox blank notification","app notification","app badge"]},{"name":"mdi:checkbox-blank-badge-outline","tags":["notification","form","checkbox blank notification outline","app notification outline","app badge outline"]},{"name":"mdi:checkbox-blank-off","tags":["form"]},{"name":"mdi:checkbox-blank-off-outline","tags":["form"]},{"name":"mdi:checkbox-intermediate","tags":["form","checkbox indeterminate"]},{"name":"mdi:checkbox-intermediate-variant","tags":["form","checkbox indeterminate variant"]},{"name":"mdi:checkbox-marked-circle-auto-outline","tags":["form","task auto","todo auto"]},{"name":"mdi:checkbox-marked-circle-minus-outline","tags":["form","todo minus","task minus"]},{"name":"mdi:checkbox-marked-circle-plus-outline","tags":["form","task plus","task add","todo plus","todo add"]},{"name":"mdi:checkbox-multiple-blank","tags":["form","checkboxes blank"]},{"name":"mdi:checkbox-multiple-blank-circle","tags":["form","checkboxes blank circle"]},{"name":"mdi:checkbox-multiple-blank-circle-outline","tags":["form","checkboxes blank circle outline"]},{"name":"mdi:checkbox-multiple-blank-outline","tags":["form","checkboxes blank outline"]},{"name":"mdi:checkbox-multiple-marked","tags":["form","checkboxes marked"]},{"name":"mdi:checkbox-multiple-marked-circle","tags":["form","checkboxes marked circle"]},{"name":"mdi:checkbox-multiple-marked-circle-outline","tags":["form","checkboxes marked circle outline"]},{"name":"mdi:checkbox-multiple-marked-outline","tags":["form","checkboxes marked outline"]},{"name":"mdi:checkbox-multiple-outline","tags":["form","check boxes outline","tick box multiple outline"]},{"name":"mdi:checkbox-outline","tags":["form"]},{"name":"mdi:checkerboard","tags":["gaming / rpg","geographic information system","raster"]},{"name":"mdi:checkerboard-minus","tags":["geographic information system","raster minus"]},{"name":"mdi:checkerboard-plus","tags":["geographic information system","raster plus"]},{"name":"mdi:checkerboard-remove","tags":["geographic information system","raster remove"]},{"name":"mdi:cheese","tags":["food / drink","swiss cheese"]},{"name":"mdi:cheese-off","tags":["food / drink"]},{"name":"mdi:chef-hat","tags":["clothing","toque","cook"]},{"name":"mdi:chemical-weapon","tags":[]},{"name":"mdi:chess-bishop","tags":["gaming / rpg"]},{"name":"mdi:chess-king","tags":["gaming / rpg","crown","royalty"]},{"name":"mdi:chess-knight","tags":["gaming / rpg","chess horse"]},{"name":"mdi:chess-pawn","tags":["gaming / rpg"]},{"name":"mdi:chess-queen","tags":["gaming / rpg","crown","royalty"]},{"name":"mdi:chess-rook","tags":["gaming / rpg","chess castle","chess tower"]},{"name":"mdi:chevron-double-down","tags":["arrow"]},{"name":"mdi:chevron-double-left","tags":["arrow"]},{"name":"mdi:chevron-double-right","tags":["arrow"]},{"name":"mdi:chevron-double-up","tags":["arrow"]},{"name":"mdi:chevron-down-box","tags":["form","arrow"]},{"name":"mdi:chevron-down-box-outline","tags":["form","arrow"]},{"name":"mdi:chevron-down-circle","tags":["arrow"]},{"name":"mdi:chevron-down-circle-outline","tags":["arrow"]},{"name":"mdi:chevron-left-box","tags":["arrow"]},{"name":"mdi:chevron-left-box-outline","tags":["arrow"]},{"name":"mdi:chevron-left-circle","tags":["arrow"]},{"name":"mdi:chevron-left-circle-outline","tags":["arrow"]},{"name":"mdi:chevron-right-box","tags":["arrow"]},{"name":"mdi:chevron-right-box-outline","tags":["arrow"]},{"name":"mdi:chevron-right-circle","tags":["arrow"]},{"name":"mdi:chevron-right-circle-outline","tags":["arrow"]},{"name":"mdi:chevron-up-box","tags":["arrow"]},{"name":"mdi:chevron-up-box-outline","tags":["arrow"]},{"name":"mdi:chevron-up-circle","tags":["arrow"]},{"name":"mdi:chevron-up-circle-outline","tags":["arrow"]},{"name":"mdi:chili-alert","tags":["alert / error"]},{"name":"mdi:chili-alert-outline","tags":["alert / error"]},{"name":"mdi:chili-hot","tags":["food / drink","chilli hot","pepper","spicy"]},{"name":"mdi:chili-hot-outline","tags":[]},{"name":"mdi:chili-medium","tags":["food / drink","chilli medium","pepper","spicy"]},{"name":"mdi:chili-medium-outline","tags":[]},{"name":"mdi:chili-mild","tags":["food / drink","agriculture","chilli mild","pepper","spicy"]},{"name":"mdi:chili-mild-outline","tags":[]},{"name":"mdi:chili-off","tags":["food / drink","chilli off","pepper off","spicy off"]},{"name":"mdi:chili-off-outline","tags":[]},{"name":"mdi:chip","tags":["integrated circuit"]},{"name":"mdi:cigar","tags":[]},{"name":"mdi:cigar-off","tags":[]},{"name":"mdi:circle","tags":["shape","lens"]},{"name":"mdi:circle-box","tags":[]},{"name":"mdi:circle-box-outline","tags":[]},{"name":"mdi:circle-double","tags":["shape"]},{"name":"mdi:circle-half","tags":["shape","brightness half"]},{"name":"mdi:circle-half-full","tags":["shape"]},{"name":"mdi:circle-medium","tags":[]},{"name":"mdi:circle-multiple","tags":["currency","banking","coins"]},{"name":"mdi:circle-off-outline","tags":["null off"]},{"name":"mdi:circle-opacity","tags":["shape","drawing / art","circle transparent"]},{"name":"mdi:circle-outline","tags":["shape","null"]},{"name":"mdi:circle-slice-1","tags":[]},{"name":"mdi:circle-slice-2","tags":[]},{"name":"mdi:circle-slice-3","tags":[]},{"name":"mdi:circle-slice-4","tags":[]},{"name":"mdi:circle-slice-5","tags":[]},{"name":"mdi:circle-slice-6","tags":[]},{"name":"mdi:circle-slice-7","tags":[]},{"name":"mdi:circle-slice-8","tags":[]},{"name":"mdi:circle-small","tags":["math","bullet","multiplication","dot"]},{"name":"mdi:circular-saw","tags":["hardware / tools"]},{"name":"mdi:city-switch","tags":["places","city swap"]},{"name":"mdi:city-variant","tags":["places"]},{"name":"mdi:city-variant-outline","tags":["places"]},{"name":"mdi:clipboard","tags":[]},{"name":"mdi:clipboard-account-outline","tags":["account / user","clipboard user outline","clipboard person outline","assignment ind outline"]},{"name":"mdi:clipboard-alert-outline","tags":["alert / error","clipboard warning outline"]},{"name":"mdi:clipboard-arrow-left-outline","tags":[]},{"name":"mdi:clipboard-arrow-right","tags":[]},{"name":"mdi:clipboard-arrow-right-outline","tags":[]},{"name":"mdi:clipboard-arrow-up","tags":["clipboard arrow top"]},{"name":"mdi:clipboard-arrow-up-outline","tags":["clipboard arrow top outline"]},{"name":"mdi:clipboard-check-multiple","tags":[]},{"name":"mdi:clipboard-check-multiple-outline","tags":[]},{"name":"mdi:clipboard-check-outline","tags":["clipboard tick outline"]},{"name":"mdi:clipboard-clock","tags":["date / time"]},{"name":"mdi:clipboard-clock-outline","tags":["date / time"]},{"name":"mdi:clipboard-edit","tags":["edit / modify"]},{"name":"mdi:clipboard-edit-outline","tags":["edit / modify"]},{"name":"mdi:clipboard-file","tags":["files / folders"]},{"name":"mdi:clipboard-file-outline","tags":["files / folders"]},{"name":"mdi:clipboard-flow","tags":[]},{"name":"mdi:clipboard-flow-outline","tags":[]},{"name":"mdi:clipboard-list","tags":[]},{"name":"mdi:clipboard-list-outline","tags":[]},{"name":"mdi:clipboard-minus","tags":[]},{"name":"mdi:clipboard-minus-outline","tags":[]},{"name":"mdi:clipboard-multiple","tags":[]},{"name":"mdi:clipboard-multiple-outline","tags":[]},{"name":"mdi:clipboard-off","tags":[]},{"name":"mdi:clipboard-off-outline","tags":[]},{"name":"mdi:clipboard-outline","tags":[]},{"name":"mdi:clipboard-play","tags":[]},{"name":"mdi:clipboard-play-multiple","tags":[]},{"name":"mdi:clipboard-play-multiple-outline","tags":[]},{"name":"mdi:clipboard-play-outline","tags":[]},{"name":"mdi:clipboard-plus","tags":["clipboard add"]},{"name":"mdi:clipboard-plus-outline","tags":[]},{"name":"mdi:clipboard-pulse","tags":["medical / hospital","clipboard vitals"]},{"name":"mdi:clipboard-pulse-outline","tags":["medical / hospital","clipboard vitals outline"]},{"name":"mdi:clipboard-remove","tags":[]},{"name":"mdi:clipboard-remove-outline","tags":[]},{"name":"mdi:clipboard-search","tags":[]},{"name":"mdi:clipboard-search-outline","tags":[]},{"name":"mdi:clipboard-text-clock","tags":["date / time","clipboard text date","clipboard text time","clipboard text history"]},{"name":"mdi:clipboard-text-clock-outline","tags":["date / time","clipboard text date outline","clipboard text time outline","clipboard text history outline"]},{"name":"mdi:clipboard-text-multiple","tags":[]},{"name":"mdi:clipboard-text-multiple-outline","tags":[]},{"name":"mdi:clipboard-text-off","tags":[]},{"name":"mdi:clipboard-text-off-outline","tags":[]},{"name":"mdi:clipboard-text-outline","tags":[]},{"name":"mdi:clipboard-text-play","tags":[]},{"name":"mdi:clipboard-text-play-outline","tags":[]},{"name":"mdi:clipboard-text-search","tags":[]},{"name":"mdi:clipboard-text-search-outline","tags":[]},{"name":"mdi:clippy","tags":[]},{"name":"mdi:clock-alert","tags":["date / time","alert / error","clock warning"]},{"name":"mdi:clock-alert-outline","tags":["date / time","alert / error","clock warning"]},{"name":"mdi:clock-check","tags":["date / time"]},{"name":"mdi:clock-check-outline","tags":["date / time"]},{"name":"mdi:clock-digital","tags":["date / time","home automation"]},{"name":"mdi:clock-edit","tags":["date / time","edit / modify"]},{"name":"mdi:clock-edit-outline","tags":["date / time","edit / modify"]},{"name":"mdi:clock-end","tags":["date / time"]},{"name":"mdi:clock-fast","tags":["date / time","velocity"]},{"name":"mdi:clock-in","tags":["date / time"]},{"name":"mdi:clock-minus","tags":["date / time"]},{"name":"mdi:clock-minus-outline","tags":["date / time"]},{"name":"mdi:clock-out","tags":["date / time"]},{"name":"mdi:clock-plus","tags":["date / time"]},{"name":"mdi:clock-plus-outline","tags":["date / time"]},{"name":"mdi:clock-remove","tags":["date / time"]},{"name":"mdi:clock-remove-outline","tags":["date / time"]},{"name":"mdi:clock-star-four-points","tags":["date / time","clock auto"]},{"name":"mdi:clock-star-four-points-outline","tags":["date / time","clock auto outline"]},{"name":"mdi:clock-start","tags":["date / time"]},{"name":"mdi:clock-time-eight","tags":["date / time"]},{"name":"mdi:clock-time-eight-outline","tags":["date / time"]},{"name":"mdi:clock-time-eleven","tags":["date / time"]},{"name":"mdi:clock-time-eleven-outline","tags":["date / time"]},{"name":"mdi:clock-time-five","tags":["date / time"]},{"name":"mdi:clock-time-five-outline","tags":["date / time"]},{"name":"mdi:clock-time-four","tags":["date / time"]},{"name":"mdi:clock-time-four-outline","tags":["date / time"]},{"name":"mdi:clock-time-nine","tags":["date / time"]},{"name":"mdi:clock-time-nine-outline","tags":["date / time"]},{"name":"mdi:clock-time-one","tags":["date / time"]},{"name":"mdi:clock-time-one-outline","tags":["date / time"]},{"name":"mdi:clock-time-seven","tags":["date / time"]},{"name":"mdi:clock-time-seven-outline","tags":["date / time"]},{"name":"mdi:clock-time-six","tags":["date / time"]},{"name":"mdi:clock-time-six-outline","tags":["date / time"]},{"name":"mdi:clock-time-ten","tags":["date / time"]},{"name":"mdi:clock-time-ten-outline","tags":["date / time"]},{"name":"mdi:clock-time-three","tags":["date / time"]},{"name":"mdi:clock-time-three-outline","tags":["date / time"]},{"name":"mdi:clock-time-twelve","tags":["date / time"]},{"name":"mdi:clock-time-twelve-outline","tags":["date / time"]},{"name":"mdi:clock-time-two","tags":["date / time"]},{"name":"mdi:clock-time-two-outline","tags":["date / time"]},{"name":"mdi:close-box","tags":["math","form","multiply box","clear box","cancel box","remove box"]},{"name":"mdi:close-box-multiple","tags":["form","close boxes","library remove","library close","multiply boxes","multiply box multiple","cancel box multiple","remove box multiple"]},{"name":"mdi:close-box-multiple-outline","tags":["form","close boxes outline","library remove outline","library close outline","multiply boxes outline","multiply box multiple outline","remove box multiple","cancel box multiple"]},{"name":"mdi:close-box-outline","tags":["math","form","multiply box outline","clear box outline","remove box outline","cancel box outline"]},{"name":"mdi:close-circle","tags":["form","remove circle","cancel circle","multiply circle","clear circle"]},{"name":"mdi:close-circle-multiple","tags":["form","remove circle multiple","coins close","coins remove","clear circle multiple","multiply circle multiple"]},{"name":"mdi:close-circle-multiple-outline","tags":["form","remove circle multiple outline","coins close outline","coins remove outline","cancel circle multiple outline","multiply circle multiple outline","clear circle multiple outline"]},{"name":"mdi:close-network","tags":["remove network","cancel network","multiply network","clear network"]},{"name":"mdi:close-network-outline","tags":["remove network outline","cancel network outline","multiply network outline","clear network outline"]},{"name":"mdi:close-octagon","tags":["dangerous","multiply octagon","remove octagon","cancel octagon","clear octagon","stop remove"]},{"name":"mdi:close-octagon-outline","tags":["remove octagon outline","multiply octagon outline","clear octagon outline","cancel octagon outline","stop remove outline"]},{"name":"mdi:close-outline","tags":["remove outline","cancel outline","multiply outline","clear outline"]},{"name":"mdi:close-thick","tags":["close bold","remove thick","remove bold","multiply thick","multiply bold","clear thick","clear bold","cancel thick","cancel bold"]},{"name":"mdi:cloud-alert","tags":["alert / error","cloud","weather","cloud warning"]},{"name":"mdi:cloud-alert-outline","tags":["alert / error","weather","cloud"]},{"name":"mdi:cloud-arrow-down","tags":["cloud","weather"]},{"name":"mdi:cloud-arrow-down-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-arrow-left","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-left-outline","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-right","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-right-outline","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-up","tags":["cloud","weather"]},{"name":"mdi:cloud-arrow-up-outline","tags":["weather","cloud"]},{"name":"mdi:cloud-braces","tags":["cloud","developer / languages","cloud json"]},{"name":"mdi:cloud-cancel","tags":["cloud","weather"]},{"name":"mdi:cloud-cancel-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-check","tags":["cloud","weather"]},{"name":"mdi:cloud-check-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-check-variant-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-clock","tags":["weather","cloud"]},{"name":"mdi:cloud-clock-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-cog","tags":["cloud","weather"]},{"name":"mdi:cloud-cog-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-lock","tags":["cloud","lock"]},{"name":"mdi:cloud-lock-open","tags":["cloud"]},{"name":"mdi:cloud-lock-open-outline","tags":["cloud"]},{"name":"mdi:cloud-lock-outline","tags":["cloud","lock"]},{"name":"mdi:cloud-minus","tags":["cloud"]},{"name":"mdi:cloud-minus-outline","tags":["cloud"]},{"name":"mdi:cloud-percent","tags":["weather","cloud","nature","humidity","rain chance","cloud discount"]},{"name":"mdi:cloud-percent-outline","tags":["weather","cloud","nature","cloud discount outline","humidity outline","rain chance outline"]},{"name":"mdi:cloud-plus","tags":["cloud"]},{"name":"mdi:cloud-plus-outline","tags":["cloud"]},{"name":"mdi:cloud-print","tags":["cloud","printer","home automation"]},{"name":"mdi:cloud-print-outline","tags":["cloud","printer","home automation"]},{"name":"mdi:cloud-question","tags":["cloud","weather"]},{"name":"mdi:cloud-question-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh-variant","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh-variant-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-remove","tags":["cloud"]},{"name":"mdi:cloud-remove-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-search","tags":["cloud","weather"]},{"name":"mdi:cloud-search-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-sync","tags":["cloud","weather"]},{"name":"mdi:cloud-sync-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-tags","tags":["cloud","cloud xml"]},{"name":"mdi:clouds","tags":["weather","cloud"]},{"name":"mdi:clover","tags":["nature","luck"]},{"name":"mdi:clover-outline","tags":["nature","luck outline"]},{"name":"mdi:coach-lamp","tags":["home automation","coach light","carriage lamp","carriage light"]},{"name":"mdi:coach-lamp-variant","tags":["home automation","coach light","carriage light","carriage lamp"]},{"name":"mdi:coat-rack","tags":["home automation","clothing","foyer","hallway","entry room"]},{"name":"mdi:code-array","tags":["developer / languages"]},{"name":"mdi:code-braces","tags":["developer / languages","math","set"]},{"name":"mdi:code-braces-box","tags":["developer / languages"]},{"name":"mdi:code-brackets","tags":["developer / languages","math","square brackets"]},{"name":"mdi:code-equal","tags":["developer / languages"]},{"name":"mdi:code-greater-than","tags":["developer / languages","math"]},{"name":"mdi:code-greater-than-or-equal","tags":["developer / languages","math"]},{"name":"mdi:code-json","tags":["developer / languages"]},{"name":"mdi:code-less-than","tags":["developer / languages","math"]},{"name":"mdi:code-less-than-or-equal","tags":["developer / languages","math"]},{"name":"mdi:code-not-equal","tags":["developer / languages"]},{"name":"mdi:code-not-equal-variant","tags":["developer / languages"]},{"name":"mdi:code-parentheses","tags":["developer / languages"]},{"name":"mdi:code-parentheses-box","tags":["developer / languages"]},{"name":"mdi:code-string","tags":["developer / languages"]},{"name":"mdi:code-tags-check","tags":["developer / languages","code tags tick"]},{"name":"mdi:coffee-maker-check","tags":["home automation","food / drink","coffee maker done","coffee maker complete"]},{"name":"mdi:coffee-maker-check-outline","tags":["home automation","food / drink","coffee maker complete outline","coffee maker done outline"]},{"name":"mdi:coffee-off","tags":["food / drink","drink off","tea off","cup off","free breakfast off","local cafe off"]},{"name":"mdi:coffee-off-outline","tags":["food / drink","drink off outline","cup off outline","tea off outline","free breakfast off outline","local cafe off outline"]},{"name":"mdi:coffee-to-go","tags":["food / drink","tea to go","drink to go","cup to go","free breakfast to go","local cafe to go"]},{"name":"mdi:coffee-to-go-outline","tags":["food / drink","tea to go outline","cup to go outline","drink to go outline","free breakfast to go outline","local cafe to go outline"]},{"name":"mdi:coffin","tags":["holiday","death","dead"]},{"name":"mdi:cog-clockwise","tags":["settings"]},{"name":"mdi:cog-counterclockwise","tags":["settings"]},{"name":"mdi:cog-off","tags":["settings","settings off"]},{"name":"mdi:cog-off-outline","tags":["settings","settings off outline"]},{"name":"mdi:cog-pause","tags":["settings","settings pause","gear pause"]},{"name":"mdi:cog-pause-outline","tags":["settings","settings pause outline","gear pause outline"]},{"name":"mdi:cog-play","tags":["settings","settings play","gear play"]},{"name":"mdi:cog-play-outline","tags":["settings","settings play outline","gear play outline"]},{"name":"mdi:cog-refresh","tags":["settings","settings refresh"]},{"name":"mdi:cog-refresh-outline","tags":["settings","settings refresh outline"]},{"name":"mdi:cog-stop","tags":["settings","settings stop","gear stop"]},{"name":"mdi:cog-stop-outline","tags":["settings","settings stop outline","gear stop outline"]},{"name":"mdi:cog-sync","tags":["settings","settings sync"]},{"name":"mdi:cog-sync-outline","tags":["settings","settings sync outline"]},{"name":"mdi:cog-transfer","tags":["settings","settings transfer"]},{"name":"mdi:cog-transfer-outline","tags":["settings","settings transfer outline"]},{"name":"mdi:collapse-all","tags":["animation minus"]},{"name":"mdi:collapse-all-outline","tags":["animation minus outline"]},{"name":"mdi:comma","tags":[]},{"name":"mdi:comma-box","tags":[]},{"name":"mdi:comma-box-outline","tags":[]},{"name":"mdi:comma-circle","tags":[]},{"name":"mdi:comma-circle-outline","tags":[]},{"name":"mdi:comment","tags":[]},{"name":"mdi:comment-account","tags":["account / user","comment user","comment person"]},{"name":"mdi:comment-account-outline","tags":["account / user","comment user outline","comment person outline"]},{"name":"mdi:comment-alert","tags":["alert / error","comment warning"]},{"name":"mdi:comment-alert-outline","tags":["alert / error","comment warning outline"]},{"name":"mdi:comment-arrow-left","tags":["comment previous"]},{"name":"mdi:comment-arrow-left-outline","tags":["comment previous outline"]},{"name":"mdi:comment-arrow-right","tags":["comment next"]},{"name":"mdi:comment-arrow-right-outline","tags":["comment next outline"]},{"name":"mdi:comment-bookmark","tags":[]},{"name":"mdi:comment-bookmark-outline","tags":[]},{"name":"mdi:comment-check","tags":["comment tick"]},{"name":"mdi:comment-check-outline","tags":["comment tick outline"]},{"name":"mdi:comment-edit","tags":["edit / modify"]},{"name":"mdi:comment-edit-outline","tags":["edit / modify"]},{"name":"mdi:comment-eye","tags":[]},{"name":"mdi:comment-eye-outline","tags":[]},{"name":"mdi:comment-flash","tags":["comment quick"]},{"name":"mdi:comment-flash-outline","tags":["comment quick outline"]},{"name":"mdi:comment-minus","tags":[]},{"name":"mdi:comment-minus-outline","tags":[]},{"name":"mdi:comment-multiple","tags":["comments"]},{"name":"mdi:comment-multiple-outline","tags":["comments outline"]},{"name":"mdi:comment-off","tags":[]},{"name":"mdi:comment-off-outline","tags":[]},{"name":"mdi:comment-outline","tags":[]},{"name":"mdi:comment-plus","tags":["comment add"]},{"name":"mdi:comment-plus-outline","tags":["comment add outline"]},{"name":"mdi:comment-processing","tags":[]},{"name":"mdi:comment-processing-outline","tags":[]},{"name":"mdi:comment-question","tags":["comment help"]},{"name":"mdi:comment-question-outline","tags":["comment help outline"]},{"name":"mdi:comment-quote","tags":["feedback"]},{"name":"mdi:comment-quote-outline","tags":["feedback outline"]},{"name":"mdi:comment-remove","tags":[]},{"name":"mdi:comment-remove-outline","tags":[]},{"name":"mdi:comment-search","tags":[]},{"name":"mdi:comment-search-outline","tags":[]},{"name":"mdi:comment-text","tags":[]},{"name":"mdi:comment-text-multiple","tags":["comments text"]},{"name":"mdi:comment-text-multiple-outline","tags":["comments text outline"]},{"name":"mdi:comment-text-outline","tags":[]},{"name":"mdi:compare-remove","tags":[]},{"name":"mdi:compass-outline","tags":["navigation","geographic information system"]},{"name":"mdi:compass-rose","tags":["navigation"]},{"name":"mdi:cone","tags":["shape"]},{"name":"mdi:cone-off","tags":["shape"]},{"name":"mdi:connection","tags":["home automation","plug"]},{"name":"mdi:console","tags":["terminal"]},{"name":"mdi:console-line","tags":["terminal line"]},{"name":"mdi:console-network","tags":["terminal network"]},{"name":"mdi:console-network-outline","tags":["terminal network outline"]},{"name":"mdi:consolidate","tags":[]},{"name":"mdi:contactless-payment","tags":["currency"]},{"name":"mdi:contactless-payment-circle-outline","tags":["currency"]},{"name":"mdi:contain","tags":[]},{"name":"mdi:contain-end","tags":[]},{"name":"mdi:contain-start","tags":[]},{"name":"mdi:content-duplicate","tags":[]},{"name":"mdi:content-save-alert","tags":["alert / error","floppy disc alert"]},{"name":"mdi:content-save-alert-outline","tags":["alert / error","floppy disc alert outline"]},{"name":"mdi:content-save-all","tags":["floppy disc multiple"]},{"name":"mdi:content-save-all-outline","tags":["floppy disc multiple outline"]},{"name":"mdi:content-save-check","tags":[]},{"name":"mdi:content-save-check-outline","tags":[]},{"name":"mdi:content-save-cog","tags":["settings","floppy disc cog"]},{"name":"mdi:content-save-cog-outline","tags":["settings","floppy disc cog outline"]},{"name":"mdi:content-save-edit","tags":["edit / modify","floppy disc edit"]},{"name":"mdi:content-save-edit-outline","tags":["edit / modify","floppy disc edit outline"]},{"name":"mdi:content-save-minus","tags":[]},{"name":"mdi:content-save-minus-outline","tags":[]},{"name":"mdi:content-save-move","tags":["floppy disc move"]},{"name":"mdi:content-save-move-outline","tags":["floppy disc move outline"]},{"name":"mdi:content-save-off","tags":[]},{"name":"mdi:content-save-off-outline","tags":[]},{"name":"mdi:content-save-plus","tags":["content save add"]},{"name":"mdi:content-save-plus-outline","tags":["content save add outline"]},{"name":"mdi:content-save-settings","tags":["settings","floppy disc settings"]},{"name":"mdi:content-save-settings-outline","tags":["settings","floppy disc settings outline"]},{"name":"mdi:contrast","tags":[]},{"name":"mdi:controller-classic","tags":["gaming / rpg","gamepad classic"]},{"name":"mdi:controller-classic-outline","tags":["gaming / rpg","gamepad classic outline"]},{"name":"mdi:cookie-alert","tags":["food / drink","alert / error","biscuit alert"]},{"name":"mdi:cookie-alert-outline","tags":["food / drink","alert / error","biscuit alert outline"]},{"name":"mdi:cookie-check","tags":["food / drink","biscuit check"]},{"name":"mdi:cookie-check-outline","tags":["food / drink","biscuit check outline"]},{"name":"mdi:cookie-clock","tags":["food / drink","date / time","biscuit clock"]},{"name":"mdi:cookie-clock-outline","tags":["food / drink","date / time","biscuit clock outline"]},{"name":"mdi:cookie-cog","tags":["food / drink","settings","biscuit cog"]},{"name":"mdi:cookie-cog-outline","tags":["food / drink","settings","biscuit cog outline"]},{"name":"mdi:cookie-edit","tags":["food / drink","edit / modify","biscuit edit"]},{"name":"mdi:cookie-edit-outline","tags":["food / drink","edit / modify","biscuit edit outline"]},{"name":"mdi:cookie-lock","tags":["food / drink","lock","biscuit lock"]},{"name":"mdi:cookie-lock-outline","tags":["food / drink","lock","biscuit lock outline"]},{"name":"mdi:cookie-minus","tags":["food / drink","biscuit minus"]},{"name":"mdi:cookie-minus-outline","tags":["food / drink","biscuit minus outline"]},{"name":"mdi:cookie-off","tags":["food / drink","biscuit off"]},{"name":"mdi:cookie-off-outline","tags":["food / drink","biscuit off outline"]},{"name":"mdi:cookie-outline","tags":["food / drink","biscuit outline"]},{"name":"mdi:cookie-plus","tags":["food / drink","biscuit plus"]},{"name":"mdi:cookie-plus-outline","tags":["food / drink","biscuit plus outline"]},{"name":"mdi:cookie-refresh","tags":["food / drink","biscuit refresh"]},{"name":"mdi:cookie-refresh-outline","tags":["food / drink","biscuit refresh outline"]},{"name":"mdi:cookie-remove","tags":["food / drink","biscuit remove"]},{"name":"mdi:cookie-remove-outline","tags":["food / drink","biscuit remove outline"]},{"name":"mdi:cookie-settings","tags":["food / drink","settings","biscuit settings","cookie crumbs","biscuit crumbs"]},{"name":"mdi:cookie-settings-outline","tags":["food / drink","settings","biscuit settings outline","cookie crumbs outline","biscuit crumbs outline"]},{"name":"mdi:coolant-temperature","tags":["automotive"]},{"name":"mdi:copyleft","tags":[]},{"name":"mdi:corn","tags":["agriculture","food / drink"]},{"name":"mdi:corn-off","tags":["food / drink","agriculture"]},{"name":"mdi:cosine-wave","tags":["audio","frequency","amplitude"]},{"name":"mdi:counter","tags":["automotive","score","numbers","odometer"]},{"name":"mdi:cow","tags":["animal","agriculture","emoji cow","emoticon cow"]},{"name":"mdi:cow-off","tags":["food / drink","agriculture","animal","dairy off","dairy free"]},{"name":"mdi:cpu-32-bit","tags":["chip 32 bit"]},{"name":"mdi:cpu-64-bit","tags":["chip 64 bit"]},{"name":"mdi:crane","tags":[]},{"name":"mdi:creation-outline","tags":["auto awesome outline"]},{"name":"mdi:credit-card","tags":["banking","currency"]},{"name":"mdi:credit-card-check","tags":["banking"]},{"name":"mdi:credit-card-check-outline","tags":["banking"]},{"name":"mdi:credit-card-chip","tags":["banking","credit card icc chip"]},{"name":"mdi:credit-card-chip-outline","tags":["banking","credit card icc chip outline"]},{"name":"mdi:credit-card-clock","tags":["banking","date / time"]},{"name":"mdi:credit-card-clock-outline","tags":["banking","date / time"]},{"name":"mdi:credit-card-edit","tags":["edit / modify","banking"]},{"name":"mdi:credit-card-edit-outline","tags":["edit / modify","banking"]},{"name":"mdi:credit-card-fast","tags":["banking","credit card swipe"]},{"name":"mdi:credit-card-fast-outline","tags":["banking","credit card swipe outline"]},{"name":"mdi:credit-card-lock","tags":["banking","lock"]},{"name":"mdi:credit-card-lock-outline","tags":["banking","lock"]},{"name":"mdi:credit-card-marker","tags":["banking","navigation","credit card location","payment on delivery"]},{"name":"mdi:credit-card-marker-outline","tags":["banking","navigation","cod","payment on delivery outline","credit card location outline"]},{"name":"mdi:credit-card-minus","tags":["banking"]},{"name":"mdi:credit-card-minus-outline","tags":["banking"]},{"name":"mdi:credit-card-multiple","tags":["banking"]},{"name":"mdi:credit-card-multiple-outline","tags":["banking","credit cards"]},{"name":"mdi:credit-card-off","tags":["banking"]},{"name":"mdi:credit-card-off-outline","tags":["banking"]},{"name":"mdi:credit-card-plus","tags":["banking"]},{"name":"mdi:credit-card-plus-outline","tags":["banking","credit card add"]},{"name":"mdi:credit-card-refresh","tags":["banking"]},{"name":"mdi:credit-card-refresh-outline","tags":["banking"]},{"name":"mdi:credit-card-refund","tags":["banking"]},{"name":"mdi:credit-card-refund-outline","tags":["banking"]},{"name":"mdi:credit-card-remove","tags":["banking"]},{"name":"mdi:credit-card-remove-outline","tags":["banking"]},{"name":"mdi:credit-card-scan","tags":["banking"]},{"name":"mdi:credit-card-scan-outline","tags":["banking"]},{"name":"mdi:credit-card-search","tags":["banking"]},{"name":"mdi:credit-card-search-outline","tags":["banking"]},{"name":"mdi:credit-card-settings","tags":["banking","settings"]},{"name":"mdi:credit-card-settings-outline","tags":["banking","settings","payment settings"]},{"name":"mdi:credit-card-sync","tags":["banking"]},{"name":"mdi:credit-card-sync-outline","tags":["banking"]},{"name":"mdi:credit-card-wireless","tags":["currency","banking"]},{"name":"mdi:credit-card-wireless-off","tags":["banking"]},{"name":"mdi:credit-card-wireless-off-outline","tags":["banking"]},{"name":"mdi:credit-card-wireless-outline","tags":["currency","banking","credit card contactless"]},{"name":"mdi:cross","tags":["religion","holiday","christianity","religion christian"]},{"name":"mdi:cross-bolnisi","tags":["religion"]},{"name":"mdi:cross-celtic","tags":["religion","holiday"]},{"name":"mdi:cross-outline","tags":["religion","religion christian outline","christianity outline"]},{"name":"mdi:crown","tags":[]},{"name":"mdi:crown-circle","tags":["gaming / rpg","checkers"]},{"name":"mdi:crown-circle-outline","tags":["gaming / rpg","checkers outline"]},{"name":"mdi:crown-outline","tags":[]},{"name":"mdi:crystal-ball","tags":["gaming / rpg"]},{"name":"mdi:cube","tags":["shape"]},{"name":"mdi:cube-off","tags":[]},{"name":"mdi:cube-off-outline","tags":["food / drink","sugar off","sugar cube off","sugar free"]},{"name":"mdi:cube-outline","tags":["shape","food / drink","sugar","sugar cube"]},{"name":"mdi:cube-send","tags":[]},{"name":"mdi:cube-unfolded","tags":[]},{"name":"mdi:cup","tags":["food / drink","glass","drink"]},{"name":"mdi:cup-off","tags":["food / drink","glass off","drink off"]},{"name":"mdi:cup-off-outline","tags":["food / drink","glass off outline","drink off outline"]},{"name":"mdi:cup-outline","tags":["food / drink","glass outline","drink outline","cup empty"]},{"name":"mdi:cupboard","tags":["home automation"]},{"name":"mdi:cupboard-outline","tags":["home automation"]},{"name":"mdi:cupcake","tags":["food / drink"]},{"name":"mdi:curling","tags":["sport"]},{"name":"mdi:currency-bdt","tags":["banking","currency","taka","bangladeshi taka"]},{"name":"mdi:currency-brl","tags":["banking","currency","brazilian real"]},{"name":"mdi:currency-eth","tags":["currency","banking","ethereum","xi"]},{"name":"mdi:currency-eur-off","tags":["currency","banking"]},{"name":"mdi:currency-ils","tags":["banking","currency"]},{"name":"mdi:currency-inr","tags":["currency","banking","rupee"]},{"name":"mdi:currency-krw","tags":["currency","banking","won"]},{"name":"mdi:currency-kzt","tags":["banking","currency","kazakhstani tenge"]},{"name":"mdi:currency-mnt","tags":["currency","banking","currency mongolian tugrug"]},{"name":"mdi:currency-ngn","tags":["currency","banking","naira"]},{"name":"mdi:currency-php","tags":["banking","currency","philippine peso"]},{"name":"mdi:currency-rial","tags":["currency","banking","currency riyal","currency irr","currency omr","currency yer","currency sar"]},{"name":"mdi:currency-sign","tags":["currency","banking","currency scarab"]},{"name":"mdi:currency-thb","tags":["banking","currency thai baht"]},{"name":"mdi:currency-twd","tags":["currency","banking","new taiwan dollar"]},{"name":"mdi:currency-uah","tags":["banking","currency hryvnia","currency ukraine"]},{"name":"mdi:current-ac","tags":["alternating current"]},{"name":"mdi:current-dc","tags":["battery","direct current"]},{"name":"mdi:cursor-default","tags":[]},{"name":"mdi:cursor-default-click","tags":[]},{"name":"mdi:cursor-default-click-outline","tags":[]},{"name":"mdi:cursor-default-gesture","tags":[]},{"name":"mdi:cursor-default-gesture-outline","tags":[]},{"name":"mdi:cursor-default-outline","tags":[]},{"name":"mdi:cursor-move","tags":[]},{"name":"mdi:cursor-pointer","tags":["cursor hand"]},{"name":"mdi:cursor-text","tags":[]},{"name":"mdi:curtains","tags":["home automation","drapes","window"]},{"name":"mdi:curtains-closed","tags":["home automation","drapes closed","window closed"]},{"name":"mdi:cylinder","tags":["shape"]},{"name":"mdi:cylinder-off","tags":["shape"]},{"name":"mdi:dance-ballroom","tags":["people / family","human dance ballroom"]},{"name":"mdi:dance-pole","tags":["sport","people / family","kho kho","human dance pole"]},{"name":"mdi:data-matrix","tags":[]},{"name":"mdi:data-matrix-edit","tags":["edit / modify"]},{"name":"mdi:data-matrix-minus","tags":[]},{"name":"mdi:data-matrix-plus","tags":[]},{"name":"mdi:data-matrix-remove","tags":[]},{"name":"mdi:data-matrix-scan","tags":[]},{"name":"mdi:database","tags":["geographic information system","database","storage"]},{"name":"mdi:database-alert","tags":["database","alert / error"]},{"name":"mdi:database-alert-outline","tags":["database","alert / error"]},{"name":"mdi:database-arrow-down","tags":["database"]},{"name":"mdi:database-arrow-down-outline","tags":["database"]},{"name":"mdi:database-arrow-left","tags":["database"]},{"name":"mdi:database-arrow-left-outline","tags":["database"]},{"name":"mdi:database-arrow-right","tags":["database"]},{"name":"mdi:database-arrow-right-outline","tags":["database"]},{"name":"mdi:database-arrow-up","tags":["database"]},{"name":"mdi:database-arrow-up-outline","tags":["database"]},{"name":"mdi:database-check","tags":["geographic information system","database","database tick"]},{"name":"mdi:database-check-outline","tags":["database"]},{"name":"mdi:database-clock","tags":["database","date / time"]},{"name":"mdi:database-clock-outline","tags":["database","date / time"]},{"name":"mdi:database-cog","tags":["database","settings"]},{"name":"mdi:database-cog-outline","tags":["database","settings"]},{"name":"mdi:database-edit","tags":["edit / modify","geographic information system","database"]},{"name":"mdi:database-edit-outline","tags":["database","edit / modify"]},{"name":"mdi:database-export","tags":["geographic information system","database"]},{"name":"mdi:database-export-outline","tags":["database"]},{"name":"mdi:database-eye","tags":["database","database view"]},{"name":"mdi:database-eye-off","tags":["database","database view off"]},{"name":"mdi:database-eye-off-outline","tags":["database","database view off outline"]},{"name":"mdi:database-eye-outline","tags":["database","database view outline"]},{"name":"mdi:database-import","tags":["geographic information system","database"]},{"name":"mdi:database-import-outline","tags":["database"]},{"name":"mdi:database-lock","tags":["lock","geographic information system","database"]},{"name":"mdi:database-lock-outline","tags":["database","lock"]},{"name":"mdi:database-marker","tags":["geographic information system","database","navigation","database location"]},{"name":"mdi:database-marker-outline","tags":["database","navigation","database location outline"]},{"name":"mdi:database-minus","tags":["geographic information system","database"]},{"name":"mdi:database-minus-outline","tags":["database"]},{"name":"mdi:database-off","tags":["database"]},{"name":"mdi:database-off-outline","tags":["database"]},{"name":"mdi:database-outline","tags":["database"]},{"name":"mdi:database-plus","tags":["geographic information system","database","database add"]},{"name":"mdi:database-plus-outline","tags":["database"]},{"name":"mdi:database-refresh","tags":["database"]},{"name":"mdi:database-refresh-outline","tags":["database"]},{"name":"mdi:database-remove","tags":["geographic information system","database"]},{"name":"mdi:database-remove-outline","tags":["database"]},{"name":"mdi:database-search","tags":["geographic information system","database","sql query"]},{"name":"mdi:database-search-outline","tags":["database"]},{"name":"mdi:database-settings","tags":["settings","geographic information system","database"]},{"name":"mdi:database-settings-outline","tags":["database","settings"]},{"name":"mdi:database-sync","tags":["geographic information system","database"]},{"name":"mdi:database-sync-outline","tags":["database"]},{"name":"mdi:death-star","tags":[]},{"name":"mdi:death-star-variant","tags":[]},{"name":"mdi:deathly-hallows","tags":["harry potter"]},{"name":"mdi:debug-step-into","tags":[]},{"name":"mdi:debug-step-out","tags":[]},{"name":"mdi:debug-step-over","tags":["skip","jump"]},{"name":"mdi:decagram","tags":["shape","starburst"]},{"name":"mdi:decagram-outline","tags":["shape","starburst outline"]},{"name":"mdi:decimal","tags":["math"]},{"name":"mdi:decimal-comma","tags":["math"]},{"name":"mdi:decimal-comma-decrease","tags":["math"]},{"name":"mdi:decimal-comma-increase","tags":["math"]},{"name":"mdi:decimal-decrease","tags":["math"]},{"name":"mdi:decimal-increase","tags":["math"]},{"name":"mdi:delete-alert","tags":["alert / error"]},{"name":"mdi:delete-alert-outline","tags":["alert / error"]},{"name":"mdi:delete-circle","tags":["trash circle","bin circle","garbage can circle","garbage circle","rubbish bin circle","rubbish circle","trash can circle"]},{"name":"mdi:delete-circle-outline","tags":["bin circle outline","garbage can circle outline","garbage circle outline","rubbish bin circle outline","rubbish circle outline","trash can circle outline","trash circle outline"]},{"name":"mdi:delete-clock","tags":["date / time"]},{"name":"mdi:delete-clock-outline","tags":["date / time"]},{"name":"mdi:delete-empty","tags":["trash empty","bin empty","rubbish empty","rubbish bin empty","trash can empty","garbage empty","garbage can empty"]},{"name":"mdi:delete-empty-outline","tags":[]},{"name":"mdi:delete-off","tags":[]},{"name":"mdi:delete-off-outline","tags":[]},{"name":"mdi:delete-variant","tags":["trash variant","bin variant","cup ice","drink ice"]},{"name":"mdi:desk","tags":[]},{"name":"mdi:desk-lamp","tags":["home automation"]},{"name":"mdi:desk-lamp-off","tags":["home automation"]},{"name":"mdi:desk-lamp-on","tags":["home automation"]},{"name":"mdi:deskphone","tags":["cellphone / phone","device / tech"]},{"name":"mdi:desktop-classic","tags":["device / tech","home automation","computer classic"]},{"name":"mdi:desktop-tower","tags":["device / tech","home automation"]},{"name":"mdi:desktop-tower-monitor","tags":["device / tech"]},{"name":"mdi:dharmachakra","tags":["religion","dharma wheel","religion buddhist","buddhism"]},{"name":"mdi:diabetes","tags":["medical / hospital","hand blood"]},{"name":"mdi:diameter","tags":["math","circle diameter","sphere diameter"]},{"name":"mdi:diameter-outline","tags":["math","circle diameter outline","sphere diameter outline"]},{"name":"mdi:diameter-variant","tags":["math","circle diameter variant","sphere diameter variant"]},{"name":"mdi:diamond","tags":[]},{"name":"mdi:diamond-outline","tags":[]},{"name":"mdi:diamond-stone","tags":["jewel"]},{"name":"mdi:dice-1","tags":["gaming / rpg","die 1","dice one"]},{"name":"mdi:dice-1-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-2","tags":["gaming / rpg","die 2","dice two"]},{"name":"mdi:dice-2-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-3","tags":["gaming / rpg","die 3","dice three"]},{"name":"mdi:dice-3-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-4","tags":["gaming / rpg","die 4","dice four"]},{"name":"mdi:dice-4-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-5","tags":["gaming / rpg","die 5","dice five"]},{"name":"mdi:dice-5-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-6","tags":["gaming / rpg","die 6","dice six"]},{"name":"mdi:dice-6-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-d10","tags":["gaming / rpg"]},{"name":"mdi:dice-d10-outline","tags":["gaming / rpg","die d10"]},{"name":"mdi:dice-d12","tags":["gaming / rpg"]},{"name":"mdi:dice-d12-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-d20","tags":["gaming / rpg"]},{"name":"mdi:dice-d20-outline","tags":["gaming / rpg","die d20"]},{"name":"mdi:dice-d4","tags":["gaming / rpg"]},{"name":"mdi:dice-d4-outline","tags":["gaming / rpg","die d4"]},{"name":"mdi:dice-d6","tags":["gaming / rpg"]},{"name":"mdi:dice-d6-outline","tags":["gaming / rpg","die d6"]},{"name":"mdi:dice-d8","tags":["gaming / rpg"]},{"name":"mdi:dice-d8-outline","tags":["gaming / rpg","die d8"]},{"name":"mdi:dice-multiple","tags":["gaming / rpg","die multiple"]},{"name":"mdi:dice-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:dip-switch","tags":[]},{"name":"mdi:disc","tags":["music","cd rom","dvd"]},{"name":"mdi:disc-player","tags":["home automation","device / tech"]},{"name":"mdi:dishwasher-alert","tags":["home automation","alert / error"]},{"name":"mdi:dishwasher-off","tags":["home automation"]},{"name":"mdi:distribute-horizontal-center","tags":[]},{"name":"mdi:distribute-horizontal-left","tags":[]},{"name":"mdi:distribute-horizontal-right","tags":[]},{"name":"mdi:distribute-vertical-bottom","tags":[]},{"name":"mdi:distribute-vertical-center","tags":[]},{"name":"mdi:distribute-vertical-top","tags":[]},{"name":"mdi:diversify","tags":[]},{"name":"mdi:diving-flippers","tags":["sport"]},{"name":"mdi:diving-helmet","tags":[]},{"name":"mdi:diving-scuba-flag","tags":[]},{"name":"mdi:diving-scuba-mask","tags":["sport"]},{"name":"mdi:diving-scuba-tank","tags":[]},{"name":"mdi:diving-scuba-tank-multiple","tags":[]},{"name":"mdi:diving-snorkel","tags":["sport"]},{"name":"mdi:division","tags":["math","obelus"]},{"name":"mdi:division-box","tags":["math"]},{"name":"mdi:dna","tags":["science","helix"]},{"name":"mdi:dock-bottom","tags":[]},{"name":"mdi:dock-left","tags":[]},{"name":"mdi:dock-right","tags":[]},{"name":"mdi:dock-top","tags":[]},{"name":"mdi:dock-window","tags":[]},{"name":"mdi:doctor","tags":["medical / hospital"]},{"name":"mdi:dog","tags":["animal","emoji dog","emoticon dog"]},{"name":"mdi:dog-service","tags":["animal","guide dog","k9","canine"]},{"name":"mdi:dog-side","tags":["animal","k9","canine"]},{"name":"mdi:dog-side-off","tags":["animal"]},{"name":"mdi:dolly","tags":["hand truck","trolley"]},{"name":"mdi:dolphin","tags":["animal","porpoise"]},{"name":"mdi:domain-plus","tags":[]},{"name":"mdi:domain-remove","tags":[]},{"name":"mdi:domain-switch","tags":[]},{"name":"mdi:dome-light","tags":[]},{"name":"mdi:domino-mask","tags":["robber mask","zorro mask"]},{"name":"mdi:donkey","tags":["animal"]},{"name":"mdi:door","tags":["home automation"]},{"name":"mdi:door-closed","tags":["home automation"]},{"name":"mdi:door-closed-lock","tags":["home automation","lock"]},{"name":"mdi:door-open","tags":["home automation"]},{"name":"mdi:door-sliding-lock","tags":["home automation","lock","patio door lock","french door lock"]},{"name":"mdi:door-sliding-open","tags":["home automation","patio door open","french door open"]},{"name":"mdi:doorbell","tags":["home automation"]},{"name":"mdi:doorbell-video","tags":["home automation"]},{"name":"mdi:dots-circle","tags":["perimeter"]},{"name":"mdi:dots-grid","tags":[]},{"name":"mdi:dots-hexagon","tags":[]},{"name":"mdi:dots-horizontal-circle-outline","tags":["ellipsis horizontal circle outline","more circle outline","menu"]},{"name":"mdi:dots-square","tags":["perimeter"]},{"name":"mdi:dots-triangle","tags":[]},{"name":"mdi:dots-vertical-circle","tags":["ellipsis vertical circle","menu"]},{"name":"mdi:dots-vertical-circle-outline","tags":["ellipsis vertical circle outline","menu"]},{"name":"mdi:download-box","tags":[]},{"name":"mdi:download-box-outline","tags":[]},{"name":"mdi:download-circle","tags":[]},{"name":"mdi:download-circle-outline","tags":[]},{"name":"mdi:download-lock","tags":["lock"]},{"name":"mdi:download-lock-outline","tags":["lock"]},{"name":"mdi:download-multiple","tags":["downloads"]},{"name":"mdi:download-network","tags":[]},{"name":"mdi:download-network-outline","tags":[]},{"name":"mdi:download-off","tags":[]},{"name":"mdi:download-off-outline","tags":[]},{"name":"mdi:drag","tags":[]},{"name":"mdi:drag-horizontal","tags":[]},{"name":"mdi:drag-variant","tags":[]},{"name":"mdi:drag-vertical","tags":[]},{"name":"mdi:drag-vertical-variant","tags":[]},{"name":"mdi:drama-masks","tags":["comedy","tragedy","theatre"]},{"name":"mdi:draw","tags":["drawing / art","form","sign","signature"]},{"name":"mdi:draw-pen","tags":["form","drawing / art","sign","signature"]},{"name":"mdi:drawing","tags":["drawing / art","shape"]},{"name":"mdi:dresser","tags":["home automation"]},{"name":"mdi:dresser-outline","tags":["home automation"]},{"name":"mdi:drone","tags":["transportation + flying"]},{"name":"mdi:duck","tags":["animal"]},{"name":"mdi:dump-truck","tags":["transportation + road","hardware / tools","tipper lorry"]},{"name":"mdi:ear-hearing-loop","tags":["medical / hospital","audio induction loop","telecoil"]},{"name":"mdi:ear-hearing-off","tags":["medical / hospital","hearing impaired"]},{"name":"mdi:earbuds","tags":["audio","music","headphones"]},{"name":"mdi:earbuds-off","tags":["audio","music","headphones off"]},{"name":"mdi:earbuds-off-outline","tags":["audio","music","headphones off outline"]},{"name":"mdi:earbuds-outline","tags":["audio","music","headphones outline"]},{"name":"mdi:earth-arrow-right","tags":["navigation","globe arrow right","world arrow right","planet arrow right"]},{"name":"mdi:earth-box","tags":["navigation","globe box","world box","planet box"]},{"name":"mdi:earth-box-minus","tags":["navigation","globe box minus","world box minus","planet box minus"]},{"name":"mdi:earth-box-off","tags":["navigation","globe box off","world box off","planet box off"]},{"name":"mdi:earth-box-plus","tags":["navigation","globe box plus","world box plus","planet box plus"]},{"name":"mdi:earth-box-remove","tags":["navigation","globe box remove","world box remove","planet box remove"]},{"name":"mdi:earth-minus","tags":["navigation","globe minus","world minus","planet minus"]},{"name":"mdi:earth-off","tags":["geographic information system","navigation","globe off","world off","planet off"]},{"name":"mdi:earth-plus","tags":["navigation","globe plus","world plus","planet plus"]},{"name":"mdi:earth-remove","tags":["navigation","globe remove","world remove","planet remove"]},{"name":"mdi:egg","tags":["food / drink","agriculture"]},{"name":"mdi:egg-easter","tags":["holiday"]},{"name":"mdi:egg-fried","tags":["food / drink"]},{"name":"mdi:egg-off","tags":["food / drink","agriculture"]},{"name":"mdi:egg-off-outline","tags":["food / drink","agriculture"]},{"name":"mdi:egg-outline","tags":["food / drink","agriculture"]},{"name":"mdi:eiffel-tower","tags":["places","paris","france"]},{"name":"mdi:eight-track","tags":["music","8 track"]},{"name":"mdi:eject-circle","tags":[]},{"name":"mdi:eject-circle-outline","tags":[]},{"name":"mdi:electric-switch","tags":[]},{"name":"mdi:electric-switch-closed","tags":[]},{"name":"mdi:elephant","tags":["animal"]},{"name":"mdi:elevation-decline","tags":[]},{"name":"mdi:elevation-rise","tags":[]},{"name":"mdi:elevator","tags":["transportation + other"]},{"name":"mdi:elevator-down","tags":["transportation + other"]},{"name":"mdi:elevator-passenger-off","tags":["transportation + other"]},{"name":"mdi:elevator-passenger-off-outline","tags":["transportation + other"]},{"name":"mdi:elevator-up","tags":["transportation + other"]},{"name":"mdi:ellipse","tags":["shape"]},{"name":"mdi:ellipse-outline","tags":["shape"]},{"name":"mdi:email-alert","tags":["alert / error","email warning","envelope alert","envelope warning"]},{"name":"mdi:email-alert-outline","tags":["alert / error"]},{"name":"mdi:email-arrow-left","tags":["email receive"]},{"name":"mdi:email-arrow-left-outline","tags":["email receive outline"]},{"name":"mdi:email-arrow-right","tags":["email send"]},{"name":"mdi:email-arrow-right-outline","tags":["email arrow right outline"]},{"name":"mdi:email-box","tags":["envelope box"]},{"name":"mdi:email-check","tags":["email tick"]},{"name":"mdi:email-check-outline","tags":["email tick outline"]},{"name":"mdi:email-edit","tags":["edit / modify"]},{"name":"mdi:email-edit-outline","tags":["edit / modify"]},{"name":"mdi:email-fast","tags":["envelope fast","email quick","email sent","email send"]},{"name":"mdi:email-fast-outline","tags":["email send outline","email sent outline","envelope fast outline","email quick outline"]},{"name":"mdi:email-heart-outline","tags":["love letter","envelope heart outline","greeting card"]},{"name":"mdi:email-lock","tags":["lock","envelope secure","email secure","envelope lock"]},{"name":"mdi:email-lock-outline","tags":["lock","email secure outline"]},{"name":"mdi:email-minus","tags":[]},{"name":"mdi:email-minus-outline","tags":[]},{"name":"mdi:email-multiple","tags":[]},{"name":"mdi:email-multiple-outline","tags":[]},{"name":"mdi:email-newsletter","tags":[]},{"name":"mdi:email-off","tags":[]},{"name":"mdi:email-off-outline","tags":[]},{"name":"mdi:email-open","tags":["drafts","envelope open"]},{"name":"mdi:email-open-heart-outline","tags":["love letter open","greeting card open","envelope open heart outline"]},{"name":"mdi:email-open-multiple","tags":[]},{"name":"mdi:email-open-multiple-outline","tags":[]},{"name":"mdi:email-open-outline","tags":["envelope open outline"]},{"name":"mdi:email-plus","tags":["email add","envelope add","envelope plus"]},{"name":"mdi:email-plus-outline","tags":["email add outline","envelope add outline","envelope plus outline"]},{"name":"mdi:email-remove","tags":[]},{"name":"mdi:email-remove-outline","tags":[]},{"name":"mdi:email-seal","tags":["email certified","mail certified","mail seal","email verified","mail verified"]},{"name":"mdi:email-seal-outline","tags":["email verified outline","email certified outline","mail verified outline","mail certified outline","mail seal outline"]},{"name":"mdi:email-search","tags":[]},{"name":"mdi:email-search-outline","tags":[]},{"name":"mdi:email-sync","tags":["email refresh","email resend"]},{"name":"mdi:email-sync-outline","tags":["email refresh outline","email resend outline"]},{"name":"mdi:email-variant","tags":["envelope variant"]},{"name":"mdi:emoticon-angry","tags":["emoji","smiley angry","face angry","emoji angry"]},{"name":"mdi:emoticon-angry-outline","tags":["emoji","smiley angry outline","face angry outline","emoji angry outline"]},{"name":"mdi:emoticon-confused","tags":["emoji","face confused","emoji confused"]},{"name":"mdi:emoticon-confused-outline","tags":["emoji","face confused outline","emoji confused outline"]},{"name":"mdi:emoticon-cool","tags":["emoji","smiley cool","face cool","face sunglasses","emoji cool"]},{"name":"mdi:emoticon-cool-outline","tags":["emoji","smiley cool outline","face cool outline","face sunglasses outline","emoji cool outline"]},{"name":"mdi:emoticon-cry","tags":["emoji","smiley cry","face cry","emoji cry"]},{"name":"mdi:emoticon-cry-outline","tags":["emoji","smiley cry outline","face cry outline","emoji cry outline"]},{"name":"mdi:emoticon-devil","tags":["emoji","smiley devil","face devil","emoji devil"]},{"name":"mdi:emoticon-devil-outline","tags":["emoji","smiley devil outline","face devil outline","emoji devil outline"]},{"name":"mdi:emoticon-frown","tags":["emoji","face frown","emoji frown"]},{"name":"mdi:emoticon-happy","tags":["emoji","smiley happy","face happy","emoji happy"]},{"name":"mdi:emoticon-happy-outline","tags":["emoji","smiley happy outline","face happy outline","emoji happy outline"]},{"name":"mdi:emoticon-kiss","tags":["emoji","smiley kiss","face kiss","emoji kiss"]},{"name":"mdi:emoticon-kiss-outline","tags":["emoji","smiley kiss outline","face kiss outline","emoji kiss outline"]},{"name":"mdi:emoticon-lol","tags":["emoji","face lol","emoji lol"]},{"name":"mdi:emoticon-lol-outline","tags":["emoji","face lol outline","emoji lol outline"]},{"name":"mdi:emoticon-neutral","tags":["emoji","smiley neutral","face neutral","emoji neutral"]},{"name":"mdi:emoticon-neutral-outline","tags":["emoji","smiley neutral outline","face neutral outline","emoji neutral outline"]},{"name":"mdi:emoticon-poop","tags":["emoji","smiley poop","face poop","emoji poop"]},{"name":"mdi:emoticon-poop-outline","tags":["emoji","face poop outline","emoji poop outline"]},{"name":"mdi:emoticon-sad","tags":["emoji","smiley sad","face sad","emoji sad"]},{"name":"mdi:emoticon-sad-outline","tags":["emoji","smiley sad outline","face sad outline","emoji sad outline"]},{"name":"mdi:emoticon-tongue","tags":["emoji","smiley tongue","face tongue","emoji tongue"]},{"name":"mdi:emoticon-tongue-outline","tags":["emoji","smiley tongue outline","face tongue outline","emoji tongue outline"]},{"name":"mdi:emoticon-wink","tags":["emoji","smiley wink","face wink","emoji wink"]},{"name":"mdi:emoticon-wink-outline","tags":["emoji","smiley wink outline","face wink outline","emoji wink outline"]},{"name":"mdi:engine","tags":["automotive","motor"]},{"name":"mdi:engine-off","tags":["automotive","motor off"]},{"name":"mdi:engine-off-outline","tags":["automotive","motor off outline"]},{"name":"mdi:engine-outline","tags":["automotive","motor outline"]},{"name":"mdi:epsilon","tags":["alpha / numeric"]},{"name":"mdi:equal","tags":["math"]},{"name":"mdi:equal-box","tags":["math"]},{"name":"mdi:equalizer-outline","tags":["audio"]},{"name":"mdi:eraser","tags":[]},{"name":"mdi:escalator","tags":["transportation + other"]},{"name":"mdi:escalator-box","tags":[]},{"name":"mdi:escalator-down","tags":["transportation + other"]},{"name":"mdi:escalator-up","tags":["transportation + other"]},{"name":"mdi:et","tags":[]},{"name":"mdi:ethernet","tags":[]},{"name":"mdi:ethernet-cable","tags":[]},{"name":"mdi:ethernet-cable-off","tags":[]},{"name":"mdi:ev-plug-ccs1","tags":["automotive","ev plug ccs combo 1","ev charger ccs1"]},{"name":"mdi:ev-plug-ccs2","tags":["automotive","ev plug ccs combo 2","ev charger ccs2"]},{"name":"mdi:ev-plug-chademo","tags":["automotive","ev charger chademo"]},{"name":"mdi:ev-plug-tesla","tags":["automotive","ev charger tesla"]},{"name":"mdi:ev-plug-type1","tags":["automotive","ev plug j1772","ev charger type1"]},{"name":"mdi:ev-plug-type2","tags":["automotive","ev plug mennekes","ev charger type2"]},{"name":"mdi:excavator","tags":["hardware / tools"]},{"name":"mdi:exclamation","tags":["math","factorial"]},{"name":"mdi:exclamation-thick","tags":["exclamation bold"]},{"name":"mdi:exit-run","tags":["home automation","emergency exit"]},{"name":"mdi:expand-all","tags":["animation plus"]},{"name":"mdi:expand-all-outline","tags":["animation plus outline"]},{"name":"mdi:expansion-card","tags":["gaming / rpg","gpu","graphics processing unit","nic","network interface card"]},{"name":"mdi:expansion-card-variant","tags":["graphics processing unit","gpu","network interface card","nice"]},{"name":"mdi:exponent","tags":["math","power"]},{"name":"mdi:exponent-box","tags":["math","power box"]},{"name":"mdi:export","tags":["output"]},{"name":"mdi:eye-arrow-left","tags":["view arrow left"]},{"name":"mdi:eye-arrow-left-outline","tags":["view arrow left outline"]},{"name":"mdi:eye-arrow-right","tags":["view arrow right"]},{"name":"mdi:eye-arrow-right-outline","tags":["view arrow right outline"]},{"name":"mdi:eye-check","tags":["eye tick"]},{"name":"mdi:eye-check-outline","tags":["eye tick outline"]},{"name":"mdi:eye-circle","tags":[]},{"name":"mdi:eye-circle-outline","tags":[]},{"name":"mdi:eye-lock","tags":[]},{"name":"mdi:eye-lock-open","tags":[]},{"name":"mdi:eye-lock-open-outline","tags":[]},{"name":"mdi:eye-lock-outline","tags":[]},{"name":"mdi:eye-minus","tags":[]},{"name":"mdi:eye-minus-outline","tags":[]},{"name":"mdi:eye-off-outline","tags":["hide outline","visibility off outline"]},{"name":"mdi:eye-outline","tags":["show outline","visibility outline"]},{"name":"mdi:eye-plus","tags":["eye add"]},{"name":"mdi:eye-plus-outline","tags":["eye add outline"]},{"name":"mdi:eye-refresh","tags":["view refresh"]},{"name":"mdi:eye-refresh-outline","tags":["view refresh outline"]},{"name":"mdi:eye-remove","tags":[]},{"name":"mdi:eye-remove-outline","tags":[]},{"name":"mdi:eye-settings","tags":["settings"]},{"name":"mdi:eye-settings-outline","tags":["settings"]},{"name":"mdi:eyedropper","tags":["color","drawing / art","science","pipette"]},{"name":"mdi:eyedropper-minus","tags":["science"]},{"name":"mdi:eyedropper-off","tags":["science"]},{"name":"mdi:eyedropper-plus","tags":["science"]},{"name":"mdi:eyedropper-remove","tags":["science"]},{"name":"mdi:face-agent","tags":["customer service","support","emoji agent","emoticon agent"]},{"name":"mdi:face-man-shimmer-outline","tags":["people / family","photography","health / beauty","account / user","face retouching natural outline","face male shimmer outline","emoji man shimmer outline","emoticon man shimmer outline"]},{"name":"mdi:face-mask","tags":["medical / hospital","clothing"]},{"name":"mdi:face-mask-outline","tags":["medical / hospital","clothing"]},{"name":"mdi:face-recognition","tags":["photography","facial recognition","scan"]},{"name":"mdi:face-woman","tags":["people / family","face female","emoji woman","emoticon woman"]},{"name":"mdi:face-woman-outline","tags":["people / family","face female outline","emoji woman outline","emoticon woman outline"]},{"name":"mdi:face-woman-profile","tags":["people / family","face female profile","emoji woman profile","emoticon woman profile"]},{"name":"mdi:face-woman-shimmer","tags":["people / family","photography","health / beauty","account / user","face retouching natural woman","face female shimmer","emoji woman shimmer","emoticon woman shimmer"]},{"name":"mdi:face-woman-shimmer-outline","tags":["people / family","photography","health / beauty","account / user","face retouching natural woman outline","face female shimmer outline","emoji woman shimmer outline","emoticon woman shimmer outline"]},{"name":"mdi:factory","tags":["places","industrial"]},{"name":"mdi:family-tree","tags":["people / family"]},{"name":"mdi:fan","tags":["home automation","automotive"]},{"name":"mdi:fan-alert","tags":["home automation","alert / error"]},{"name":"mdi:fan-auto","tags":[]},{"name":"mdi:fan-chevron-down","tags":["home automation","fan speed down"]},{"name":"mdi:fan-chevron-up","tags":["home automation","fan speed up"]},{"name":"mdi:fan-clock","tags":["home automation","date / time","fan clock","fan schedule","fan timer"]},{"name":"mdi:fan-minus","tags":["home automation"]},{"name":"mdi:fan-off","tags":["home automation","automotive"]},{"name":"mdi:fan-plus","tags":["home automation"]},{"name":"mdi:fan-remove","tags":["home automation"]},{"name":"mdi:fan-speed-1","tags":["home automation","fan speed low"]},{"name":"mdi:fan-speed-2","tags":["home automation","fan speed medium"]},{"name":"mdi:fan-speed-3","tags":["home automation","fan speed high"]},{"name":"mdi:fast-forward-10","tags":[]},{"name":"mdi:fast-forward-15","tags":[]},{"name":"mdi:fast-forward-30","tags":[]},{"name":"mdi:fast-forward-45","tags":[]},{"name":"mdi:fast-forward-5","tags":[]},{"name":"mdi:fast-forward-60","tags":[]},{"name":"mdi:faucet","tags":["home automation","kitchen tap","bathroom tap","sink"]},{"name":"mdi:faucet-variant","tags":["home automation","bathroom tap","kitchen tap","sink"]},{"name":"mdi:feather","tags":["nature","quill"]},{"name":"mdi:feature-search","tags":["box","box search"]},{"name":"mdi:feature-search-outline","tags":["box","box outline","box search outline"]},{"name":"mdi:fence","tags":["home automation","agriculture","railway","train track"]},{"name":"mdi:fence-electric","tags":["home automation","agriculture","railway electric","train track electric"]},{"name":"mdi:file-account","tags":["account / user","files / folders","file user","resume"]},{"name":"mdi:file-account-outline","tags":["files / folders","account / user"]},{"name":"mdi:file-alert","tags":["files / folders","alert / error","file warning"]},{"name":"mdi:file-alert-outline","tags":["files / folders","alert / error","file warning outline"]},{"name":"mdi:file-arrow-left-right","tags":["files / folders","file exchange","file transfer","file swap"]},{"name":"mdi:file-arrow-left-right-outline","tags":["files / folders","file exchange outline","file swap outline","file transfer outline"]},{"name":"mdi:file-arrow-up-down","tags":["files / folders","file exchange","file swap","file transfer","file upload download"]},{"name":"mdi:file-arrow-up-down-outline","tags":["files / folders","file exchange outline","file swap outline","file transfer outline","file upload download outline"]},{"name":"mdi:file-cabinet","tags":["files / folders","filing cabinet"]},{"name":"mdi:file-cad","tags":["files / folders"]},{"name":"mdi:file-cad-box","tags":["files / folders"]},{"name":"mdi:file-cancel","tags":["files / folders","ban","forbid"]},{"name":"mdi:file-cancel-outline","tags":["files / folders","ban","forbid"]},{"name":"mdi:file-certificate","tags":["files / folders"]},{"name":"mdi:file-certificate-outline","tags":["files / folders"]},{"name":"mdi:file-chart","tags":["files / folders","file report","file graph"]},{"name":"mdi:file-chart-check","tags":["files / folders"]},{"name":"mdi:file-chart-check-outline","tags":["files / folders"]},{"name":"mdi:file-chart-outline","tags":["files / folders","file graph outline","file report outline"]},{"name":"mdi:file-check","tags":["files / folders","file tick"]},{"name":"mdi:file-check-outline","tags":["files / folders"]},{"name":"mdi:file-clock","tags":["files / folders","date / time"]},{"name":"mdi:file-clock-outline","tags":["files / folders","date / time"]},{"name":"mdi:file-cloud","tags":["cloud","files / folders"]},{"name":"mdi:file-cloud-outline","tags":["files / folders","cloud"]},{"name":"mdi:file-code","tags":["files / folders","developer / languages"]},{"name":"mdi:file-code-outline","tags":["files / folders","developer / languages"]},{"name":"mdi:file-cog","tags":["settings","files / folders","file settings cog"]},{"name":"mdi:file-cog-outline","tags":["settings","files / folders","file settings cog outline"]},{"name":"mdi:file-compare","tags":["files / folders"]},{"name":"mdi:file-delimited","tags":["files / folders","file csv"]},{"name":"mdi:file-delimited-outline","tags":["files / folders","file csv outline"]},{"name":"mdi:file-document","tags":["files / folders","file text"]},{"name":"mdi:file-document-alert","tags":["files / folders","alert / error","file document error","file text alert","file text error"]},{"name":"mdi:file-document-alert-outline","tags":["files / folders","alert / error","file document error outline","file text error outline","file text alert outline"]},{"name":"mdi:file-document-arrow-right","tags":["files / folders","file document move","file text move","file text arrow right"]},{"name":"mdi:file-document-arrow-right-outline","tags":["files / folders","file document move outline","file text move outline","file text arrow right outline"]},{"name":"mdi:file-document-check","tags":["files / folders","file document tick","file text tick","file text check"]},{"name":"mdi:file-document-check-outline","tags":["files / folders","file document tick outline","file text tick outline","file text check outline"]},{"name":"mdi:file-document-edit","tags":["edit / modify","files / folders","contract","file text edit"]},{"name":"mdi:file-document-edit-outline","tags":["edit / modify","files / folders","contract outline","file text edit outline"]},{"name":"mdi:file-document-minus","tags":["files / folders","file text minus"]},{"name":"mdi:file-document-minus-outline","tags":["files / folders","file text minus outline"]},{"name":"mdi:file-document-multiple","tags":["files / folders","file text multiple"]},{"name":"mdi:file-document-multiple-outline","tags":["files / folders","file text multiple outline"]},{"name":"mdi:file-document-plus","tags":["files / folders","file document add","file text add","file text plus"]},{"name":"mdi:file-document-plus-outline","tags":["files / folders","file document add outline","file text plus outline","file text add outline"]},{"name":"mdi:file-document-refresh","tags":["files / folders"]},{"name":"mdi:file-document-refresh-outline","tags":["files / folders"]},{"name":"mdi:file-document-remove","tags":["files / folders","file document delete","file text remove","file text delete"]},{"name":"mdi:file-document-remove-outline","tags":["files / folders","file document delete outline","file text remove outline","file text delete outline"]},{"name":"mdi:file-download","tags":["files / folders"]},{"name":"mdi:file-download-outline","tags":["files / folders"]},{"name":"mdi:file-edit","tags":["edit / modify","files / folders"]},{"name":"mdi:file-edit-outline","tags":["edit / modify","files / folders"]},{"name":"mdi:file-excel","tags":["files / folders"]},{"name":"mdi:file-excel-box-outline","tags":["files / folders"]},{"name":"mdi:file-excel-outline","tags":["files / folders"]},{"name":"mdi:file-export","tags":["files / folders"]},{"name":"mdi:file-export-outline","tags":["files / folders"]},{"name":"mdi:file-eye","tags":["files / folders"]},{"name":"mdi:file-eye-outline","tags":["files / folders"]},{"name":"mdi:file-gif-box","tags":["files / folders"]},{"name":"mdi:file-hidden","tags":["files / folders"]},{"name":"mdi:file-image","tags":["files / folders"]},{"name":"mdi:file-image-marker","tags":["files / folders","navigation","file image location"]},{"name":"mdi:file-image-marker-outline","tags":["files / folders","navigation","file image location outline"]},{"name":"mdi:file-image-minus","tags":["files / folders"]},{"name":"mdi:file-image-minus-outline","tags":["files / folders"]},{"name":"mdi:file-image-outline","tags":["files / folders"]},{"name":"mdi:file-image-plus","tags":["files / folders","file image add"]},{"name":"mdi:file-image-plus-outline","tags":["files / folders","file image add outline"]},{"name":"mdi:file-image-remove","tags":["files / folders"]},{"name":"mdi:file-image-remove-outline","tags":["files / folders"]},{"name":"mdi:file-import","tags":["files / folders"]},{"name":"mdi:file-import-outline","tags":["files / folders"]},{"name":"mdi:file-jpg-box","tags":["files / folders","file jpeg box","image jpg box","image jpeg box"]},{"name":"mdi:file-key","tags":["files / folders"]},{"name":"mdi:file-key-outline","tags":["files / folders"]},{"name":"mdi:file-link","tags":["files / folders"]},{"name":"mdi:file-link-outline","tags":["files / folders"]},{"name":"mdi:file-lock","tags":["lock","files / folders"]},{"name":"mdi:file-lock-open","tags":["lock","files / folders"]},{"name":"mdi:file-lock-open-outline","tags":["lock","files / folders"]},{"name":"mdi:file-lock-outline","tags":["files / folders","lock"]},{"name":"mdi:file-marker","tags":["files / folders","navigation","file location"]},{"name":"mdi:file-marker-outline","tags":["files / folders","navigation","file location outline"]},{"name":"mdi:file-minus","tags":["files / folders"]},{"name":"mdi:file-minus-outline","tags":["files / folders"]},{"name":"mdi:file-move","tags":["files / folders"]},{"name":"mdi:file-move-outline","tags":["files / folders"]},{"name":"mdi:file-multiple","tags":["files / folders","files"]},{"name":"mdi:file-multiple-outline","tags":["files / folders"]},{"name":"mdi:file-music","tags":["files / folders","music"]},{"name":"mdi:file-music-outline","tags":["files / folders","music"]},{"name":"mdi:file-pdf-box","tags":["files / folders","file acrobat box","adobe acrobat"]},{"name":"mdi:file-percent","tags":["files / folders"]},{"name":"mdi:file-percent-outline","tags":["files / folders"]},{"name":"mdi:file-phone","tags":["files / folders","cellphone / phone"]},{"name":"mdi:file-phone-outline","tags":["files / folders","cellphone / phone"]},{"name":"mdi:file-plus","tags":["files / folders","note add"]},{"name":"mdi:file-plus-outline","tags":["files / folders"]},{"name":"mdi:file-png-box","tags":["files / folders"]},{"name":"mdi:file-powerpoint","tags":["files / folders"]},{"name":"mdi:file-powerpoint-box-outline","tags":["files / folders"]},{"name":"mdi:file-powerpoint-outline","tags":["files / folders"]},{"name":"mdi:file-question","tags":["files / folders"]},{"name":"mdi:file-question-outline","tags":["files / folders"]},{"name":"mdi:file-refresh","tags":["files / folders"]},{"name":"mdi:file-refresh-outline","tags":["files / folders"]},{"name":"mdi:file-remove","tags":["files / folders"]},{"name":"mdi:file-remove-outline","tags":["files / folders"]},{"name":"mdi:file-replace","tags":["files / folders"]},{"name":"mdi:file-replace-outline","tags":["files / folders"]},{"name":"mdi:file-restore-outline","tags":["files / folders"]},{"name":"mdi:file-rotate-left","tags":["files / folders","file rotate counter clockwise","file rotate ccw"]},{"name":"mdi:file-rotate-left-outline","tags":["files / folders","file rotate counter clockwise outline","file rotate ccw outline"]},{"name":"mdi:file-rotate-right","tags":["files / folders","file rotate clockwise"]},{"name":"mdi:file-rotate-right-outline","tags":["files / folders","file rotate clockwise"]},{"name":"mdi:file-search","tags":["files / folders"]},{"name":"mdi:file-search-outline","tags":["files / folders"]},{"name":"mdi:file-send","tags":["files / folders","file move"]},{"name":"mdi:file-send-outline","tags":["files / folders"]},{"name":"mdi:file-settings","tags":["settings","files / folders"]},{"name":"mdi:file-settings-outline","tags":["settings","files / folders"]},{"name":"mdi:file-sign","tags":["banking","files / folders","contract sign","document sign"]},{"name":"mdi:file-star","tags":["files / folders","file favorite"]},{"name":"mdi:file-star-four-points","tags":["files / folders","file auto"]},{"name":"mdi:file-star-four-points-outline","tags":["files / folders","file auto outline"]},{"name":"mdi:file-star-outline","tags":["files / folders","file favorite outline"]},{"name":"mdi:file-swap","tags":["files / folders","file transfer"]},{"name":"mdi:file-swap-outline","tags":["files / folders","file transfer outline"]},{"name":"mdi:file-sync","tags":["files / folders"]},{"name":"mdi:file-sync-outline","tags":["files / folders"]},{"name":"mdi:file-table","tags":["files / folders"]},{"name":"mdi:file-table-box","tags":["files / folders"]},{"name":"mdi:file-table-box-multiple","tags":["files / folders"]},{"name":"mdi:file-table-box-multiple-outline","tags":["files / folders"]},{"name":"mdi:file-table-box-outline","tags":["files / folders"]},{"name":"mdi:file-table-outline","tags":["files / folders"]},{"name":"mdi:file-tree","tags":["files / folders","subtasks"]},{"name":"mdi:file-tree-outline","tags":["files / folders"]},{"name":"mdi:file-undo","tags":["files / folders","file revert","file discard"]},{"name":"mdi:file-undo-outline","tags":["files / folders"]},{"name":"mdi:file-upload","tags":["files / folders"]},{"name":"mdi:file-upload-outline","tags":["files / folders"]},{"name":"mdi:file-video","tags":["video / movie","files / folders"]},{"name":"mdi:file-video-outline","tags":["files / folders"]},{"name":"mdi:file-word","tags":["files / folders"]},{"name":"mdi:file-word-box-outline","tags":["files / folders"]},{"name":"mdi:file-word-outline","tags":["files / folders"]},{"name":"mdi:file-xml-box","tags":["files / folders"]},{"name":"mdi:filmstrip-box","tags":[]},{"name":"mdi:filmstrip-off","tags":["video / movie"]},{"name":"mdi:filter","tags":["funnel"]},{"name":"mdi:filter-check","tags":["funnel check"]},{"name":"mdi:filter-check-outline","tags":["funnel check outline"]},{"name":"mdi:filter-cog","tags":["settings","funnel settings","filter settings","funnel cog","filter gear","funnel gear"]},{"name":"mdi:filter-cog-outline","tags":["settings","filter settings outline","filter gear outline","funnel cog outline","funnel settings outline","funnel gear outline"]},{"name":"mdi:filter-menu","tags":[]},{"name":"mdi:filter-menu-outline","tags":[]},{"name":"mdi:filter-minus","tags":["funnel minus"]},{"name":"mdi:filter-minus-outline","tags":["funnel minus outline"]},{"name":"mdi:filter-multiple","tags":["funnel multiple"]},{"name":"mdi:filter-multiple-outline","tags":["funnel multiple outline"]},{"name":"mdi:filter-off","tags":[]},{"name":"mdi:filter-off-outline","tags":[]},{"name":"mdi:filter-outline","tags":["funnel outline"]},{"name":"mdi:filter-plus","tags":["funnel plus"]},{"name":"mdi:filter-plus-outline","tags":["funnel plus outline"]},{"name":"mdi:filter-remove","tags":["funnel remove"]},{"name":"mdi:filter-remove-outline","tags":["funnel remove outline"]},{"name":"mdi:filter-settings","tags":["settings","funnel settings"]},{"name":"mdi:filter-settings-outline","tags":["settings","funnel settings outline"]},{"name":"mdi:filter-variant-minus","tags":[]},{"name":"mdi:filter-variant-plus","tags":[]},{"name":"mdi:filter-variant-remove","tags":[]},{"name":"mdi:fingerprint-off","tags":[]},{"name":"mdi:fire-alert","tags":["alert / error","home automation","flame alert"]},{"name":"mdi:fire-circle","tags":["home automation","flame circle","hot circle","gas circle","natural gas circle"]},{"name":"mdi:fire-extinguisher","tags":["hardware / tools","home automation"]},{"name":"mdi:fire-hydrant","tags":[]},{"name":"mdi:fire-hydrant-alert","tags":["alert / error"]},{"name":"mdi:fire-hydrant-off","tags":[]},{"name":"mdi:fire-off","tags":["home automation","flame off"]},{"name":"mdi:fire-truck","tags":["transportation + road","fire engine"]},{"name":"mdi:fireplace","tags":["home automation"]},{"name":"mdi:fireplace-off","tags":["home automation"]},{"name":"mdi:firewire","tags":[]},{"name":"mdi:firework","tags":["holiday","bottle rocket"]},{"name":"mdi:firework-off","tags":[]},{"name":"mdi:fish","tags":["animal","food / drink"]},{"name":"mdi:fish-off","tags":["food / drink"]},{"name":"mdi:fishbowl","tags":["animal","aquarium"]},{"name":"mdi:fishbowl-outline","tags":["animal","aquarium outline"]},{"name":"mdi:fit-to-page","tags":["text / content / format","arrow"]},{"name":"mdi:fit-to-page-outline","tags":["text / content / format","arrow"]},{"name":"mdi:flag-checkered","tags":["sport","goal"]},{"name":"mdi:flag-minus","tags":[]},{"name":"mdi:flag-minus-outline","tags":[]},{"name":"mdi:flag-off","tags":[]},{"name":"mdi:flag-off-outline","tags":[]},{"name":"mdi:flag-plus","tags":["flag add"]},{"name":"mdi:flag-plus-outline","tags":[]},{"name":"mdi:flag-remove","tags":[]},{"name":"mdi:flag-remove-outline","tags":[]},{"name":"mdi:flag-triangle","tags":["milestone"]},{"name":"mdi:flag-variant","tags":[]},{"name":"mdi:flag-variant-minus","tags":[]},{"name":"mdi:flag-variant-minus-outline","tags":[]},{"name":"mdi:flag-variant-off","tags":[]},{"name":"mdi:flag-variant-off-outline","tags":[]},{"name":"mdi:flag-variant-outline","tags":[]},{"name":"mdi:flag-variant-plus","tags":[]},{"name":"mdi:flag-variant-plus-outline","tags":[]},{"name":"mdi:flag-variant-remove","tags":[]},{"name":"mdi:flag-variant-remove-outline","tags":[]},{"name":"mdi:flash-alert","tags":["weather","alert / error","lightning alert","storm advisory"]},{"name":"mdi:flash-alert-outline","tags":["weather","alert / error","lightning alert outline","storm advisory outline"]},{"name":"mdi:flash-off-outline","tags":[]},{"name":"mdi:flash-outline","tags":["weather","lightning bolt outline"]},{"name":"mdi:flash-red-eye","tags":[]},{"name":"mdi:flash-triangle","tags":["home automation","high voltage"]},{"name":"mdi:flash-triangle-outline","tags":["home automation","high voltage outline"]},{"name":"mdi:flashlight","tags":["torch"]},{"name":"mdi:flashlight-off","tags":["torch off"]},{"name":"mdi:flask","tags":["science","gaming / rpg"]},{"name":"mdi:flask-empty","tags":["science","gaming / rpg"]},{"name":"mdi:flask-empty-minus","tags":["science"]},{"name":"mdi:flask-empty-minus-outline","tags":["science"]},{"name":"mdi:flask-empty-off","tags":[]},{"name":"mdi:flask-empty-off-outline","tags":[]},{"name":"mdi:flask-empty-outline","tags":["science","gaming / rpg"]},{"name":"mdi:flask-empty-plus","tags":["science"]},{"name":"mdi:flask-empty-plus-outline","tags":["science"]},{"name":"mdi:flask-empty-remove","tags":["science"]},{"name":"mdi:flask-empty-remove-outline","tags":["science"]},{"name":"mdi:flask-minus","tags":["science"]},{"name":"mdi:flask-minus-outline","tags":["science"]},{"name":"mdi:flask-off","tags":[]},{"name":"mdi:flask-off-outline","tags":[]},{"name":"mdi:flask-outline","tags":["science","gaming / rpg"]},{"name":"mdi:flask-plus","tags":["science"]},{"name":"mdi:flask-plus-outline","tags":["science"]},{"name":"mdi:flask-remove","tags":["science"]},{"name":"mdi:flask-remove-outline","tags":["science"]},{"name":"mdi:flask-round-bottom","tags":["science"]},{"name":"mdi:flask-round-bottom-empty","tags":["science"]},{"name":"mdi:flask-round-bottom-empty-outline","tags":["science"]},{"name":"mdi:flask-round-bottom-outline","tags":["science"]},{"name":"mdi:fleur-de-lis","tags":[]},{"name":"mdi:floor-lamp","tags":["home automation","floor light"]},{"name":"mdi:floor-lamp-dual","tags":["home automation","floor light dual"]},{"name":"mdi:floor-lamp-dual-outline","tags":["home automation","floor light dual outline"]},{"name":"mdi:floor-lamp-outline","tags":["home automation","floor light outline"]},{"name":"mdi:floor-lamp-torchiere","tags":["home automation","floor light torchiere"]},{"name":"mdi:floor-lamp-torchiere-outline","tags":["home automation"]},{"name":"mdi:floor-lamp-torchiere-variant","tags":["home automation","floor light torchiere variant"]},{"name":"mdi:floor-lamp-torchiere-variant-outline","tags":["home automation","floor light torchiere variant outline"]},{"name":"mdi:floor-plan","tags":["home automation"]},{"name":"mdi:floppy","tags":[]},{"name":"mdi:floppy-variant","tags":[]},{"name":"mdi:flower-pollen","tags":["nature","agriculture","allergy"]},{"name":"mdi:flower-pollen-outline","tags":["nature","agriculture","allergy outline"]},{"name":"mdi:flower-poppy","tags":["nature","agriculture","plant"]},{"name":"mdi:flower-tulip","tags":["nature","agriculture","plant"]},{"name":"mdi:flower-tulip-outline","tags":["nature","agriculture","plant"]},{"name":"mdi:focus-auto","tags":["photography"]},{"name":"mdi:focus-field","tags":["photography"]},{"name":"mdi:focus-field-horizontal","tags":["photography"]},{"name":"mdi:focus-field-vertical","tags":["photography"]},{"name":"mdi:folder-alert","tags":["files / folders","alert / error","folder warning"]},{"name":"mdi:folder-alert-outline","tags":["files / folders","alert / error","folder warning outline"]},{"name":"mdi:folder-arrow-down","tags":["files / folders","folder download"]},{"name":"mdi:folder-arrow-down-outline","tags":["files / folders","folder download outline"]},{"name":"mdi:folder-arrow-left","tags":["files / folders"]},{"name":"mdi:folder-arrow-left-outline","tags":["files / folders"]},{"name":"mdi:folder-arrow-left-right","tags":["files / folders"]},{"name":"mdi:folder-arrow-left-right-outline","tags":["files / folders"]},{"name":"mdi:folder-arrow-right","tags":["files / folders"]},{"name":"mdi:folder-arrow-right-outline","tags":["files / folders"]},{"name":"mdi:folder-arrow-up","tags":["files / folders","folder upload"]},{"name":"mdi:folder-arrow-up-down","tags":["files / folders","folder transfer"]},{"name":"mdi:folder-arrow-up-down-outline","tags":["files / folders","folder transfer outline"]},{"name":"mdi:folder-arrow-up-outline","tags":["files / folders","folder upload outline"]},{"name":"mdi:folder-cancel","tags":["files / folders"]},{"name":"mdi:folder-cancel-outline","tags":["files / folders"]},{"name":"mdi:folder-check","tags":["files / folders"]},{"name":"mdi:folder-check-outline","tags":["files / folders"]},{"name":"mdi:folder-clock","tags":["files / folders","date / time"]},{"name":"mdi:folder-clock-outline","tags":["files / folders","date / time"]},{"name":"mdi:folder-cog","tags":["settings","files / folders","folder cog"]},{"name":"mdi:folder-cog-outline","tags":["settings","files / folders","folder cog outline"]},{"name":"mdi:folder-download","tags":["files / folders"]},{"name":"mdi:folder-download-outline","tags":["files / folders"]},{"name":"mdi:folder-edit","tags":["files / folders","edit / modify"]},{"name":"mdi:folder-edit-outline","tags":["edit / modify","files / folders"]},{"name":"mdi:folder-eye","tags":["files / folders"]},{"name":"mdi:folder-eye-outline","tags":["files / folders"]},{"name":"mdi:folder-file","tags":["files / folders"]},{"name":"mdi:folder-file-outline","tags":["files / folders"]},{"name":"mdi:folder-heart","tags":["files / folders"]},{"name":"mdi:folder-heart-outline","tags":["files / folders"]},{"name":"mdi:folder-hidden","tags":["files / folders"]},{"name":"mdi:folder-home","tags":["files / folders","home automation","folder house"]},{"name":"mdi:folder-home-outline","tags":["files / folders","home automation","folder house outline"]},{"name":"mdi:folder-image","tags":["files / folders"]},{"name":"mdi:folder-information","tags":["files / folders"]},{"name":"mdi:folder-information-outline","tags":["files / folders"]},{"name":"mdi:folder-key","tags":["files / folders"]},{"name":"mdi:folder-key-network","tags":["files / folders"]},{"name":"mdi:folder-key-network-outline","tags":["files / folders"]},{"name":"mdi:folder-key-outline","tags":["files / folders"]},{"name":"mdi:folder-lock","tags":["lock","files / folders"]},{"name":"mdi:folder-lock-open","tags":["lock","files / folders"]},{"name":"mdi:folder-lock-open-outline","tags":["files / folders","lock"]},{"name":"mdi:folder-lock-outline","tags":["files / folders","lock"]},{"name":"mdi:folder-marker","tags":["geographic information system","files / folders","navigation","folder location"]},{"name":"mdi:folder-marker-outline","tags":["geographic information system","files / folders","navigation","folder location outline"]},{"name":"mdi:folder-minus","tags":["files / folders"]},{"name":"mdi:folder-minus-outline","tags":["files / folders"]},{"name":"mdi:folder-move-outline","tags":["files / folders"]},{"name":"mdi:folder-multiple","tags":["files / folders","folders"]},{"name":"mdi:folder-multiple-outline","tags":["files / folders","folders outline"]},{"name":"mdi:folder-multiple-plus","tags":["files / folders"]},{"name":"mdi:folder-multiple-plus-outline","tags":["files / folders"]},{"name":"mdi:folder-music","tags":["files / folders","music"]},{"name":"mdi:folder-music-outline","tags":["files / folders","music"]},{"name":"mdi:folder-network","tags":["files / folders"]},{"name":"mdi:folder-network-outline","tags":["files / folders"]},{"name":"mdi:folder-off","tags":["files / folders"]},{"name":"mdi:folder-off-outline","tags":["files / folders"]},{"name":"mdi:folder-open","tags":["files / folders"]},{"name":"mdi:folder-open-outline","tags":["files / folders"]},{"name":"mdi:folder-play","tags":["files / folders","folder media","folder music","folder video"]},{"name":"mdi:folder-play-outline","tags":["files / folders","folder media outline","folder music outline","folder video outline"]},{"name":"mdi:folder-plus","tags":["files / folders","create new folder","folder add"]},{"name":"mdi:folder-pound","tags":["files / folders","developer / languages","folder hash"]},{"name":"mdi:folder-pound-outline","tags":["files / folders","developer / languages","folder hash outline"]},{"name":"mdi:folder-question","tags":["files / folders","folder help"]},{"name":"mdi:folder-question-outline","tags":["files / folders","folder help outline"]},{"name":"mdi:folder-refresh","tags":["files / folders"]},{"name":"mdi:folder-refresh-outline","tags":["files / folders"]},{"name":"mdi:folder-remove","tags":["files / folders"]},{"name":"mdi:folder-remove-outline","tags":["files / folders"]},{"name":"mdi:folder-search","tags":["files / folders"]},{"name":"mdi:folder-search-outline","tags":["files / folders"]},{"name":"mdi:folder-settings","tags":["settings","files / folders"]},{"name":"mdi:folder-settings-outline","tags":["settings","files / folders"]},{"name":"mdi:folder-star-multiple","tags":["files / folders","folder favorite multiple"]},{"name":"mdi:folder-star-multiple-outline","tags":["files / folders","folder favorite multiple outline"]},{"name":"mdi:folder-swap","tags":["files / folders","folder transfer"]},{"name":"mdi:folder-swap-outline","tags":["files / folders","folder transfer outline"]},{"name":"mdi:folder-sync","tags":["files / folders"]},{"name":"mdi:folder-sync-outline","tags":["files / folders"]},{"name":"mdi:folder-table","tags":["files / folders"]},{"name":"mdi:folder-table-outline","tags":["files / folders"]},{"name":"mdi:folder-text","tags":["files / folders"]},{"name":"mdi:folder-text-outline","tags":["files / folders"]},{"name":"mdi:folder-upload","tags":["files / folders"]},{"name":"mdi:folder-upload-outline","tags":["files / folders"]},{"name":"mdi:folder-wrench","tags":["files / folders","folder settings"]},{"name":"mdi:folder-wrench-outline","tags":["files / folders","folder settings outline"]},{"name":"mdi:folder-zip","tags":["files / folders","compressed folder"]},{"name":"mdi:folder-zip-outline","tags":["files / folders","compressed folder outline"]},{"name":"mdi:food-apple","tags":["food / drink","agriculture"]},{"name":"mdi:food-apple-outline","tags":["food / drink","agriculture"]},{"name":"mdi:food-croissant","tags":["food / drink"]},{"name":"mdi:food-drumstick","tags":["food / drink","chicken leg","turkey leg","meat"]},{"name":"mdi:food-drumstick-off","tags":["food / drink","chicken leg off","turkey leg off","meat off"]},{"name":"mdi:food-drumstick-off-outline","tags":["food / drink","chicken leg off outline","turkey leg off outline","meat off outline"]},{"name":"mdi:food-drumstick-outline","tags":["food / drink","chicken leg outline","turkey leg outline","meat outline"]},{"name":"mdi:food-halal","tags":["food / drink","food muslim","dietary restriction"]},{"name":"mdi:food-hot-dog","tags":["food / drink","food weiner","food frankfurter"]},{"name":"mdi:food-kosher","tags":["food / drink","food jewish","dietary restriction"]},{"name":"mdi:food-steak","tags":["food / drink","meat","beef"]},{"name":"mdi:food-steak-off","tags":["food / drink","meat off","beef off"]},{"name":"mdi:food-turkey","tags":["food / drink","holiday","dinner","thanksgiving"]},{"name":"mdi:food-variant","tags":["food / drink"]},{"name":"mdi:food-variant-off","tags":["food / drink"]},{"name":"mdi:foot-print","tags":[]},{"name":"mdi:football-australian","tags":["sport"]},{"name":"mdi:football-helmet","tags":["sport"]},{"name":"mdi:forest-outline","tags":["nature","agriculture","places","forestry outline","pine tree multiple outline"]},{"name":"mdi:forklift","tags":["transportation + road"]},{"name":"mdi:form-dropdown","tags":["form"]},{"name":"mdi:form-select","tags":["form"]},{"name":"mdi:form-textarea","tags":["form"]},{"name":"mdi:form-textbox","tags":["form","rename"]},{"name":"mdi:form-textbox-lock","tags":["form","lock"]},{"name":"mdi:form-textbox-password","tags":["form"]},{"name":"mdi:format-align-bottom","tags":["text / content / format"]},{"name":"mdi:format-align-middle","tags":["text / content / format"]},{"name":"mdi:format-align-top","tags":["text / content / format"]},{"name":"mdi:format-annotation-minus","tags":["text / content / format"]},{"name":"mdi:format-annotation-plus","tags":["text / content / format","format annotation add"]},{"name":"mdi:format-color-highlight","tags":["color","text / content / format","format colour highlight"]},{"name":"mdi:format-color-marker-cancel","tags":["text / content / format","color","format color redact"]},{"name":"mdi:format-columns","tags":["text / content / format"]},{"name":"mdi:format-float-center","tags":["text / content / format","format float centre"]},{"name":"mdi:format-float-left","tags":["text / content / format"]},{"name":"mdi:format-float-none","tags":["text / content / format"]},{"name":"mdi:format-float-right","tags":["text / content / format"]},{"name":"mdi:format-font","tags":["text / content / format"]},{"name":"mdi:format-font-size-decrease","tags":["text / content / format"]},{"name":"mdi:format-font-size-increase","tags":["text / content / format"]},{"name":"mdi:format-header-1","tags":["text / content / format","format heading 1"]},{"name":"mdi:format-header-2","tags":["text / content / format","format heading 2"]},{"name":"mdi:format-header-3","tags":["text / content / format","format heading 3"]},{"name":"mdi:format-header-4","tags":["text / content / format","format heading 4"]},{"name":"mdi:format-header-5","tags":["text / content / format","format heading 5"]},{"name":"mdi:format-header-6","tags":["text / content / format","format heading 6"]},{"name":"mdi:format-header-decrease","tags":["text / content / format","format heading decease"]},{"name":"mdi:format-header-equal","tags":["text / content / format","format heading equal"]},{"name":"mdi:format-header-increase","tags":["text / content / format","format heading increase"]},{"name":"mdi:format-header-pound","tags":["text / content / format","format header hash","format heading pound","format heading hash","format heading markdown"]},{"name":"mdi:format-horizontal-align-center","tags":["text / content / format","format horizontal align centre","arrow horizontal collapse"]},{"name":"mdi:format-horizontal-align-left","tags":["text / content / format"]},{"name":"mdi:format-horizontal-align-right","tags":["text / content / format"]},{"name":"mdi:format-letter-case","tags":["text / content / format"]},{"name":"mdi:format-letter-case-lower","tags":["text / content / format","format lowercase"]},{"name":"mdi:format-letter-case-upper","tags":["text / content / format","format uppercase"]},{"name":"mdi:format-letter-ends-with","tags":["text / content / format"]},{"name":"mdi:format-letter-matches","tags":["text / content / format"]},{"name":"mdi:format-letter-spacing","tags":["text / content / format","format kerning"]},{"name":"mdi:format-letter-spacing-variant","tags":["text / content / format"]},{"name":"mdi:format-letter-starts-with","tags":["text / content / format"]},{"name":"mdi:format-line-height","tags":["text / content / format"]},{"name":"mdi:format-list-bulleted-triangle","tags":["text / content / format"]},{"name":"mdi:format-list-bulleted-type","tags":["text / content / format"]},{"name":"mdi:format-list-checks","tags":["text / content / format","to do"]},{"name":"mdi:format-list-group","tags":["text / content / format"]},{"name":"mdi:format-list-group-plus","tags":["text / content / format","format list group add"]},{"name":"mdi:format-list-text","tags":["text / content / format"]},{"name":"mdi:format-overline","tags":["text / content / format"]},{"name":"mdi:format-page-split","tags":["text / content / format"]},{"name":"mdi:format-paragraph","tags":["text / content / format"]},{"name":"mdi:format-paragraph-spacing","tags":["text / content / format"]},{"name":"mdi:format-pilcrow","tags":["text / content / format"]},{"name":"mdi:format-quote-close-outline","tags":["text / content / format"]},{"name":"mdi:format-quote-open","tags":["text / content / format"]},{"name":"mdi:format-quote-open-outline","tags":["text / content / format"]},{"name":"mdi:format-section","tags":["text / content / format"]},{"name":"mdi:format-subscript","tags":["text / content / format"]},{"name":"mdi:format-superscript","tags":["text / content / format","math","exponent"]},{"name":"mdi:format-text","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-down-vertical","tags":["text / content / format"]},{"name":"mdi:format-text-variant","tags":["text / content / format"]},{"name":"mdi:format-text-variant-outline","tags":["text / content / format"]},{"name":"mdi:format-underline-wavy","tags":["text / content / format"]},{"name":"mdi:format-wrap-inline","tags":["text / content / format"]},{"name":"mdi:format-wrap-square","tags":["text / content / format"]},{"name":"mdi:format-wrap-tight","tags":["text / content / format"]},{"name":"mdi:format-wrap-top-bottom","tags":["text / content / format"]},{"name":"mdi:forum-minus","tags":["chat minus","forum subtract","chat subtract"]},{"name":"mdi:forum-minus-outline","tags":["chat minus outline","forum subtract outline","chat subtract outline"]},{"name":"mdi:forum-plus","tags":["chat plus","forum add","chat add"]},{"name":"mdi:forum-plus-outline","tags":["chat plus outline","chat add outline","forum add outline"]},{"name":"mdi:forum-remove","tags":["forum delete","chat remove","chat delete"]},{"name":"mdi:forum-remove-outline","tags":["forum delete outline","chat remove outline","chat delete outline"]},{"name":"mdi:forwardburger","tags":[]},{"name":"mdi:fountain","tags":[]},{"name":"mdi:fountain-pen","tags":["drawing / art"]},{"name":"mdi:fountain-pen-tip","tags":["drawing / art"]},{"name":"mdi:fraction-one-half","tags":[]},{"name":"mdi:french-fries","tags":["food / drink","chips","finger chips","french fry","fried potatoes","fries","frites"]},{"name":"mdi:frequently-asked-questions","tags":["faq"]},{"name":"mdi:fridge","tags":["home automation","fridge filled","refrigerator","kitchen"]},{"name":"mdi:fridge-alert","tags":["home automation","alert / error"]},{"name":"mdi:fridge-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:fridge-bottom","tags":["home automation","fridge filled top","refrigerator bottom"]},{"name":"mdi:fridge-industrial","tags":["home automation"]},{"name":"mdi:fridge-industrial-alert","tags":["home automation","alert / error"]},{"name":"mdi:fridge-industrial-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:fridge-industrial-off","tags":["home automation"]},{"name":"mdi:fridge-industrial-off-outline","tags":["home automation"]},{"name":"mdi:fridge-industrial-outline","tags":["home automation"]},{"name":"mdi:fridge-off","tags":["home automation"]},{"name":"mdi:fridge-off-outline","tags":["home automation"]},{"name":"mdi:fridge-outline","tags":["home automation","kitchen","refrigerator outline"]},{"name":"mdi:fridge-top","tags":["home automation","fridge filled bottom","refrigerator top"]},{"name":"mdi:fridge-variant","tags":["home automation"]},{"name":"mdi:fridge-variant-alert","tags":["home automation","alert / error"]},{"name":"mdi:fridge-variant-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:fridge-variant-off","tags":["home automation"]},{"name":"mdi:fridge-variant-off-outline","tags":["home automation"]},{"name":"mdi:fridge-variant-outline","tags":["home automation"]},{"name":"mdi:fruit-cherries","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-cherries-off","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-citrus","tags":["food / drink","agriculture","fruit lemon","fruit lime"]},{"name":"mdi:fruit-citrus-off","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-grapes","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-grapes-outline","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-pear","tags":["food / drink"]},{"name":"mdi:fruit-pineapple","tags":["food / drink","agriculture","fruit ananas"]},{"name":"mdi:fruit-watermelon","tags":["food / drink","agriculture"]},{"name":"mdi:fuel","tags":["automotive","petrol","gasoline"]},{"name":"mdi:fuel-cell","tags":["automotive","battery","battery"]},{"name":"mdi:function","tags":["math"]},{"name":"mdi:function-variant","tags":["math"]},{"name":"mdi:furigana-horizontal","tags":["text / content / format","ruby horizontal"]},{"name":"mdi:furigana-vertical","tags":["text / content / format","zhuyin","ruby vertical"]},{"name":"mdi:fuse","tags":["automotive"]},{"name":"mdi:fuse-alert","tags":["automotive","alert / error"]},{"name":"mdi:fuse-blade","tags":["automotive"]},{"name":"mdi:fuse-off","tags":["automotive"]},{"name":"mdi:gamepad-circle","tags":["gaming / rpg","controller circle"]},{"name":"mdi:gamepad-circle-down","tags":["gaming / rpg","controller circle down"]},{"name":"mdi:gamepad-circle-left","tags":["gaming / rpg","controller circle left"]},{"name":"mdi:gamepad-circle-outline","tags":["gaming / rpg","controller circle outline"]},{"name":"mdi:gamepad-circle-right","tags":["gaming / rpg","controller circle right"]},{"name":"mdi:gamepad-circle-up","tags":["gaming / rpg","controller circle up"]},{"name":"mdi:gamepad-down","tags":["gaming / rpg","controller down"]},{"name":"mdi:gamepad-left","tags":["gaming / rpg","controller left"]},{"name":"mdi:gamepad-outline","tags":["gaming / rpg","home automation","controller outline","games outline"]},{"name":"mdi:gamepad-right","tags":["gaming / rpg","controller right"]},{"name":"mdi:gamepad-round","tags":["gaming / rpg","controller round"]},{"name":"mdi:gamepad-round-down","tags":["gaming / rpg","controller round down"]},{"name":"mdi:gamepad-round-left","tags":["gaming / rpg","controller round left"]},{"name":"mdi:gamepad-round-outline","tags":["gaming / rpg","controller round outline"]},{"name":"mdi:gamepad-round-right","tags":["gaming / rpg","controller round right"]},{"name":"mdi:gamepad-round-up","tags":["gaming / rpg","controller round up"]},{"name":"mdi:gamepad-up","tags":["gaming / rpg","controller up"]},{"name":"mdi:gamepad-variant","tags":["gaming / rpg","controller variant"]},{"name":"mdi:gamepad-variant-outline","tags":["gaming / rpg","controller variant outline"]},{"name":"mdi:gamma","tags":["alpha / numeric"]},{"name":"mdi:gantry-crane","tags":[]},{"name":"mdi:garage","tags":["home automation"]},{"name":"mdi:garage-alert","tags":["home automation","alert / error","garage warning"]},{"name":"mdi:garage-alert-variant","tags":["home automation","alert / error"]},{"name":"mdi:garage-lock","tags":["home automation","lock"]},{"name":"mdi:garage-open","tags":["home automation"]},{"name":"mdi:garage-open-variant","tags":["home automation"]},{"name":"mdi:garage-variant","tags":["home automation"]},{"name":"mdi:garage-variant-lock","tags":["home automation","lock"]},{"name":"mdi:gas-burner","tags":["home automation","stove burner","cooktop burner","grill"]},{"name":"mdi:gas-cylinder","tags":["tank","oxygen tank"]},{"name":"mdi:gas-station-off","tags":[]},{"name":"mdi:gas-station-off-outline","tags":[]},{"name":"mdi:gate","tags":["home automation"]},{"name":"mdi:gate-alert","tags":["home automation","alert / error"]},{"name":"mdi:gate-and","tags":["logic gate and"]},{"name":"mdi:gate-arrow-left","tags":["home automation"]},{"name":"mdi:gate-arrow-right","tags":["home automation"]},{"name":"mdi:gate-buffer","tags":[]},{"name":"mdi:gate-nand","tags":["logic gate nand"]},{"name":"mdi:gate-nor","tags":["logic gate nor"]},{"name":"mdi:gate-not","tags":["logic gate not"]},{"name":"mdi:gate-open","tags":["home automation"]},{"name":"mdi:gate-or","tags":["logic gate or"]},{"name":"mdi:gate-xnor","tags":["logic gate xnor"]},{"name":"mdi:gate-xor","tags":["logic gate xor"]},{"name":"mdi:gauge-empty","tags":["automotive","home automation"]},{"name":"mdi:gauge-full","tags":["automotive","home automation"]},{"name":"mdi:gauge-low","tags":["automotive","home automation"]},{"name":"mdi:gavel","tags":["court hammer"]},{"name":"mdi:gender-female","tags":["venus"]},{"name":"mdi:gender-male","tags":["mars"]},{"name":"mdi:gender-male-female","tags":[]},{"name":"mdi:gender-male-female-variant","tags":["mercury"]},{"name":"mdi:gender-non-binary","tags":["gender enby"]},{"name":"mdi:gender-transgender","tags":[]},{"name":"mdi:gesture-double-tap","tags":["interaction double tap","hand double tap"]},{"name":"mdi:gesture-pinch","tags":[]},{"name":"mdi:gesture-spread","tags":[]},{"name":"mdi:gesture-swipe-down","tags":[]},{"name":"mdi:gesture-swipe-horizontal","tags":[]},{"name":"mdi:gesture-swipe-left","tags":[]},{"name":"mdi:gesture-swipe-right","tags":[]},{"name":"mdi:gesture-swipe-up","tags":[]},{"name":"mdi:gesture-swipe-vertical","tags":[]},{"name":"mdi:gesture-tap","tags":["interaction tap","hand tap","gesture touch"]},{"name":"mdi:gesture-tap-box","tags":["gesture touch box"]},{"name":"mdi:gesture-tap-button","tags":["form","call to action","cta","button pointer","gesture touch button"]},{"name":"mdi:gesture-two-double-tap","tags":[]},{"name":"mdi:gesture-two-tap","tags":[]},{"name":"mdi:ghost","tags":["gaming / rpg","inky","blinky","pinky","clyde"]},{"name":"mdi:ghost-off","tags":["gaming / rpg"]},{"name":"mdi:ghost-off-outline","tags":["gaming / rpg"]},{"name":"mdi:ghost-outline","tags":["gaming / rpg"]},{"name":"mdi:gift","tags":["holiday","present","package","donate"]},{"name":"mdi:gift-off","tags":["holiday","present off","package off","donate off"]},{"name":"mdi:gift-off-outline","tags":["holiday","present off outline","package off outline","donate off outline"]},{"name":"mdi:gift-open","tags":["holiday","present open","package open"]},{"name":"mdi:gift-open-outline","tags":["holiday","present open outline","package open outline"]},{"name":"mdi:gift-outline","tags":["shopping","holiday","donate outline","present outline","package outline"]},{"name":"mdi:glass-cocktail-off","tags":["food / drink"]},{"name":"mdi:glass-flute","tags":["food / drink","alcohol","cocktail","cup","drink"]},{"name":"mdi:glass-fragile","tags":["food / drink","glass broken"]},{"name":"mdi:glass-mug","tags":["food / drink","pub","bar","beer","alcohol","cup","drink","local bar"]},{"name":"mdi:glass-mug-off","tags":["food / drink"]},{"name":"mdi:glass-mug-variant","tags":["food / drink","pub","bar","beer","drink","alcohol","cup","local bar"]},{"name":"mdi:glass-mug-variant-off","tags":["food / drink"]},{"name":"mdi:glass-pint-outline","tags":["food / drink"]},{"name":"mdi:glass-stange","tags":["food / drink","alcohol","bar","cocktail","cup","drink"]},{"name":"mdi:glass-tulip","tags":["food / drink","bar","alcohol","cocktail","cup","drink"]},{"name":"mdi:glass-wine","tags":["food / drink","bar","alcohol","cocktail","cup","drink"]},{"name":"mdi:glasses","tags":["clothing"]},{"name":"mdi:globe-light","tags":["home automation"]},{"name":"mdi:globe-light-outline","tags":["home automation"]},{"name":"mdi:globe-model","tags":[]},{"name":"mdi:go-kart","tags":["sport","cart"]},{"name":"mdi:go-kart-track","tags":[]},{"name":"mdi:gold","tags":[]},{"name":"mdi:golf-cart","tags":["sport","transportation + other"]},{"name":"mdi:gondola","tags":["transportation + other","cable car"]},{"name":"mdi:gradient-horizontal","tags":["drawing / art"]},{"name":"mdi:graph","tags":["dependency","dependencies"]},{"name":"mdi:graph-outline","tags":["dependency","dependencies"]},{"name":"mdi:grave-stone","tags":["holiday","headstone","tombstone","cemetery","graveyard"]},{"name":"mdi:greater-than","tags":["math"]},{"name":"mdi:greater-than-or-equal","tags":["math"]},{"name":"mdi:greenhouse","tags":["home automation","agriculture","nature","glasshouse","hothouse","shed"]},{"name":"mdi:grid-large","tags":[]},{"name":"mdi:group","tags":[]},{"name":"mdi:guitar-acoustic","tags":["music"]},{"name":"mdi:guitar-electric","tags":["music"]},{"name":"mdi:guitar-pick","tags":["music"]},{"name":"mdi:guitar-pick-outline","tags":["music"]},{"name":"mdi:guy-fawkes-mask","tags":[]},{"name":"mdi:hair-dryer","tags":["health / beauty"]},{"name":"mdi:hair-dryer-outline","tags":["health / beauty"]},{"name":"mdi:halloween","tags":["holiday","pumpkin face","pumpkin carved","jack o lantern","emoji halloween","emoticon halloween"]},{"name":"mdi:hamburger","tags":["food / drink","burger","fast food","food"]},{"name":"mdi:hamburger-check","tags":["food / drink","burger check"]},{"name":"mdi:hamburger-minus","tags":["food / drink","burger minus"]},{"name":"mdi:hamburger-off","tags":["food / drink","burger off","fast food off","food off"]},{"name":"mdi:hamburger-plus","tags":["food / drink","burger plus","burger add"]},{"name":"mdi:hamburger-remove","tags":["food / drink","burger remove"]},{"name":"mdi:hammer-sickle","tags":["communism"]},{"name":"mdi:hand-back-left-off","tags":[]},{"name":"mdi:hand-back-left-off-outline","tags":[]},{"name":"mdi:hand-back-right-off","tags":[]},{"name":"mdi:hand-back-right-off-outline","tags":[]},{"name":"mdi:hand-clap","tags":["applause"]},{"name":"mdi:hand-clap-off","tags":["applause off"]},{"name":"mdi:hand-coin","tags":["banking","charity","donation"]},{"name":"mdi:hand-coin-outline","tags":["banking","charity outline","donation outline"]},{"name":"mdi:hand-cycle","tags":["sport","hand bike"]},{"name":"mdi:hand-extended","tags":["hand open","hand palm"]},{"name":"mdi:hand-extended-outline","tags":["hand open outline","hand palm outline"]},{"name":"mdi:hand-heart-outline","tags":[]},{"name":"mdi:hand-okay","tags":[]},{"name":"mdi:hand-peace","tags":[]},{"name":"mdi:hand-peace-variant","tags":[]},{"name":"mdi:hand-pointing-down","tags":[]},{"name":"mdi:hand-pointing-left","tags":[]},{"name":"mdi:hand-pointing-right","tags":[]},{"name":"mdi:hand-pointing-up","tags":[]},{"name":"mdi:hand-saw","tags":["hardware / tools"]},{"name":"mdi:hand-water","tags":["medical / hospital","hand wash"]},{"name":"mdi:handcuffs","tags":[]},{"name":"mdi:hands-pray","tags":[]},{"name":"mdi:handshake","tags":["business","deal","help","partnership"]},{"name":"mdi:handshake-outline","tags":["business outline","deal outline","help outline","partnership outline"]},{"name":"mdi:hanger","tags":["clothing","home automation","coat hanger","clothes hanger","closet"]},{"name":"mdi:hard-hat","tags":["hardware / tools","clothing","helmet"]},{"name":"mdi:harddisk","tags":["hdd"]},{"name":"mdi:harddisk-plus","tags":["hdd plus"]},{"name":"mdi:harddisk-remove","tags":["hdd remove"]},{"name":"mdi:hazard-lights","tags":["automotive","warning lights"]},{"name":"mdi:hdmi-port","tags":["video / movie","home automation"]},{"name":"mdi:head","tags":[]},{"name":"mdi:head-alert","tags":["alert / error"]},{"name":"mdi:head-alert-outline","tags":["alert / error"]},{"name":"mdi:head-check","tags":[]},{"name":"mdi:head-check-outline","tags":[]},{"name":"mdi:head-cog-outline","tags":["settings","psychology outline"]},{"name":"mdi:head-dots-horizontal","tags":["head thinking"]},{"name":"mdi:head-dots-horizontal-outline","tags":["head thinking outline"]},{"name":"mdi:head-flash","tags":["head ache"]},{"name":"mdi:head-flash-outline","tags":["head ache outline"]},{"name":"mdi:head-heart","tags":["head love"]},{"name":"mdi:head-heart-outline","tags":["head love outline"]},{"name":"mdi:head-lightbulb","tags":["head idea","head bulb"]},{"name":"mdi:head-lightbulb-outline","tags":["head idea outline","head bulb outline"]},{"name":"mdi:head-minus","tags":[]},{"name":"mdi:head-minus-outline","tags":[]},{"name":"mdi:head-outline","tags":[]},{"name":"mdi:head-plus","tags":[]},{"name":"mdi:head-plus-outline","tags":[]},{"name":"mdi:head-question","tags":[]},{"name":"mdi:head-question-outline","tags":[]},{"name":"mdi:head-remove","tags":[]},{"name":"mdi:head-remove-outline","tags":[]},{"name":"mdi:head-snowflake","tags":["head freeze","brain freeze"]},{"name":"mdi:head-snowflake-outline","tags":["head freeze outline","brain freeze outline"]},{"name":"mdi:head-sync","tags":["head reload","head refresh"]},{"name":"mdi:head-sync-outline","tags":["head reload outline","head refresh outline"]},{"name":"mdi:headphones-bluetooth","tags":[]},{"name":"mdi:headphones-off","tags":["audio","device / tech","music"]},{"name":"mdi:headphones-settings","tags":["audio","settings"]},{"name":"mdi:headset-dock","tags":["audio"]},{"name":"mdi:headset-off","tags":["audio","device / tech"]},{"name":"mdi:heart-box","tags":[]},{"name":"mdi:heart-box-outline","tags":[]},{"name":"mdi:heart-broken","tags":[]},{"name":"mdi:heart-broken-outline","tags":[]},{"name":"mdi:heart-circle","tags":[]},{"name":"mdi:heart-circle-outline","tags":[]},{"name":"mdi:heart-cog","tags":["settings"]},{"name":"mdi:heart-cog-outline","tags":["settings"]},{"name":"mdi:heart-flash","tags":["medical / hospital","aed","defibrillator"]},{"name":"mdi:heart-half","tags":["gaming / rpg"]},{"name":"mdi:heart-half-full","tags":["gaming / rpg"]},{"name":"mdi:heart-half-outline","tags":["gaming / rpg"]},{"name":"mdi:heart-minus","tags":[]},{"name":"mdi:heart-minus-outline","tags":[]},{"name":"mdi:heart-multiple","tags":["hearts"]},{"name":"mdi:heart-multiple-outline","tags":["hearts outline"]},{"name":"mdi:heart-off","tags":["medical / hospital"]},{"name":"mdi:heart-off-outline","tags":["medical / hospital"]},{"name":"mdi:heart-plus","tags":[]},{"name":"mdi:heart-plus-outline","tags":[]},{"name":"mdi:heart-remove","tags":[]},{"name":"mdi:heart-remove-outline","tags":[]},{"name":"mdi:heart-settings","tags":["settings"]},{"name":"mdi:heart-settings-outline","tags":["settings"]},{"name":"mdi:heat-wave","tags":["home automation","weather","agriculture","keep warm","warmth"]},{"name":"mdi:heating-coil","tags":["home automation","radiator coil","heated floor"]},{"name":"mdi:helicopter","tags":["transportation + flying"]},{"name":"mdi:help","tags":["question mark"]},{"name":"mdi:help-box","tags":["question mark box"]},{"name":"mdi:help-box-multiple","tags":["quiz","question box multiple"]},{"name":"mdi:help-box-multiple-outline","tags":["quiz outline","question box multiple outline"]},{"name":"mdi:help-box-outline","tags":["question box outline"]},{"name":"mdi:help-network","tags":["question network"]},{"name":"mdi:help-network-outline","tags":["question network outline"]},{"name":"mdi:help-rhombus","tags":["question mark rhombus"]},{"name":"mdi:help-rhombus-outline","tags":["question mark rhombus outline"]},{"name":"mdi:hexadecimal","tags":["developer / languages"]},{"name":"mdi:hexagon","tags":["shape"]},{"name":"mdi:hexagon-multiple","tags":["shape","hexagons"]},{"name":"mdi:hexagon-multiple-outline","tags":["nature"]},{"name":"mdi:hexagon-outline","tags":["shape"]},{"name":"mdi:hexagon-slice-1","tags":[]},{"name":"mdi:hexagon-slice-2","tags":[]},{"name":"mdi:hexagon-slice-3","tags":[]},{"name":"mdi:hexagon-slice-4","tags":[]},{"name":"mdi:hexagon-slice-5","tags":[]},{"name":"mdi:hexagon-slice-6","tags":[]},{"name":"mdi:hexagram","tags":["shape","holiday","star","christmas star"]},{"name":"mdi:hexagram-outline","tags":["shape","holiday","star outline","christmas star outline"]},{"name":"mdi:high-definition","tags":["video / movie","hd"]},{"name":"mdi:highway","tags":["transportation + road","autobahn","motorway"]},{"name":"mdi:hockey-puck","tags":["sport"]},{"name":"mdi:hololens","tags":["gaming / rpg"]},{"name":"mdi:home-account","tags":["account / user","home automation","home user","house account","house user"]},{"name":"mdi:home-alert","tags":["home automation","alert / error","home warning","house alert","house warning"]},{"name":"mdi:home-alert-outline","tags":["home automation","alert / error","house alert outline","home warning outline","house warning outline"]},{"name":"mdi:home-analytics","tags":["home automation","chart home","home chart","home report","house analytics","house chart"]},{"name":"mdi:home-automation","tags":["home automation","house automation","home wireless","house wireless","smart home","smart house"]},{"name":"mdi:home-battery","tags":["home automation","battery","home energy","home power","home electricity","house energy","house battery","house power"]},{"name":"mdi:home-battery-outline","tags":["home automation","battery","home energy outline","home power outline","home electricity outline","house battery outline","house power outline","house energy outline"]},{"name":"mdi:home-circle","tags":["home automation","house circle"]},{"name":"mdi:home-circle-outline","tags":["home automation","house circle outline"]},{"name":"mdi:home-clock","tags":["home automation","date / time","home time","home schedule","house time","house clock","house schedule"]},{"name":"mdi:home-clock-outline","tags":["home automation","date / time","home time outline","home schedule outline","house clock outline","house time outline","house schedule outline"]},{"name":"mdi:home-edit","tags":["home automation","edit / modify","house edit"]},{"name":"mdi:home-edit-outline","tags":["home automation","edit / modify","house edit outline"]},{"name":"mdi:home-export-outline","tags":["home automation","house export outline"]},{"name":"mdi:home-floor-0","tags":["home automation","house floor 0","home floor zero","house floor zero"]},{"name":"mdi:home-floor-1","tags":["home automation","house floor 1","home floor one","house floor one","home floor first","house floor first"]},{"name":"mdi:home-floor-2","tags":["home automation","house floor 2","home floor two","house floor two","home floor second","house floor second"]},{"name":"mdi:home-floor-3","tags":["home automation","house floor 3","home floor three","house floor three","home floor third","house floor third"]},{"name":"mdi:home-floor-a","tags":["home automation","home floor attic","house floor a","house floor attic"]},{"name":"mdi:home-floor-b","tags":["home automation","home floor basement","house floor b","house floor basement"]},{"name":"mdi:home-floor-g","tags":["home automation","home floor ground","house floor g","house floor ground"]},{"name":"mdi:home-floor-l","tags":["home automation","home floor loft","home floor lower","house floor l","house floor loft","house floor lower"]},{"name":"mdi:home-floor-negative-1","tags":["home automation","house floor negative 1","home floor negative one","home floor minus 1","home floor minus one","house floor negative one","house floor minus 1","house floor minus one"]},{"name":"mdi:home-group","tags":["home automation","house group","neighbourhood","estate","housing estate"]},{"name":"mdi:home-group-minus","tags":["home automation","house group minus"]},{"name":"mdi:home-group-plus","tags":["home automation","house group plus","home group add","house group add"]},{"name":"mdi:home-group-remove","tags":["home automation","house group remove"]},{"name":"mdi:home-import-outline","tags":["home automation","house import outline"]},{"name":"mdi:home-lightbulb","tags":["home automation","home bulb","house lightbulb","house bulb"]},{"name":"mdi:home-lightbulb-outline","tags":["home automation","home bulb outline","house lightbulb outline","house bulb outline"]},{"name":"mdi:home-lightning-bolt","tags":["home automation","home energy","home power","home electricity","home flash","house lightning bolt","house flash"]},{"name":"mdi:home-lightning-bolt-outline","tags":["home automation","home energy","home power","home electricity","home flash","house lightning bolt outline","house flash outline"]},{"name":"mdi:home-lock","tags":["home automation","lock","house lock","home secure","house secure"]},{"name":"mdi:home-lock-open","tags":["home automation","lock","house lock open"]},{"name":"mdi:home-map-marker","tags":["home automation","navigation","house map marker","home location"]},{"name":"mdi:home-minus","tags":["home automation","house minus"]},{"name":"mdi:home-minus-outline","tags":["home automation","house minus outline"]},{"name":"mdi:home-modern","tags":["home automation","house modern"]},{"name":"mdi:home-off","tags":["home automation","house off"]},{"name":"mdi:home-off-outline","tags":["home automation","house off outline"]},{"name":"mdi:home-percent","tags":[]},{"name":"mdi:home-percent-outline","tags":["home automation"]},{"name":"mdi:home-plus","tags":["home automation","home add","house plus","house add"]},{"name":"mdi:home-plus-outline","tags":["home automation","house plus outline","house add outline"]},{"name":"mdi:home-remove","tags":["home automation","house remove"]},{"name":"mdi:home-remove-outline","tags":["home automation","house remove outline"]},{"name":"mdi:home-roof","tags":["home automation","home chimney","home attic","house roof","house attic","house chimney"]},{"name":"mdi:home-search","tags":["home automation","house search","home find","house find"]},{"name":"mdi:home-search-outline","tags":["home automation","house search outline","home find outline","house find outline"]},{"name":"mdi:home-silo","tags":["home automation","agriculture","farm house","farm home"]},{"name":"mdi:home-silo-outline","tags":["agriculture","home automation","farm house outline","farm home outline"]},{"name":"mdi:home-sound-in","tags":["home automation"]},{"name":"mdi:home-sound-in-outline","tags":["home automation"]},{"name":"mdi:home-sound-out","tags":["home automation"]},{"name":"mdi:home-sound-out-outline","tags":["home automation"]},{"name":"mdi:home-switch","tags":["home automation","home swap","house switch","house swap"]},{"name":"mdi:home-switch-outline","tags":["home automation","home swap outline","house swap outline","house switch outline"]},{"name":"mdi:home-thermometer","tags":["home automation","home climate","home temperature","house thermometer","house climate","house temperature"]},{"name":"mdi:home-thermometer-outline","tags":["home automation","home climate outline","home temperature outline","house thermometer outline","house climate outline","house temperature outline"]},{"name":"mdi:hook","tags":[]},{"name":"mdi:hook-off","tags":[]},{"name":"mdi:hoop-house","tags":["agriculture","home automation","green house"]},{"name":"mdi:hops","tags":["food / drink","agriculture"]},{"name":"mdi:horizontal-rotate-clockwise","tags":[]},{"name":"mdi:horizontal-rotate-counterclockwise","tags":[]},{"name":"mdi:horse","tags":["transportation + other","animal","agriculture","equestrian"]},{"name":"mdi:horse-human","tags":["transportation + other","agriculture","people / family","horseback riding","horse riding","equestrian"]},{"name":"mdi:horse-variant","tags":["animal","agriculture","equestrian variant"]},{"name":"mdi:horse-variant-fast","tags":["animal","agriculture"]},{"name":"mdi:horseshoe","tags":["sport","agriculture","luck"]},{"name":"mdi:hospital","tags":["medical / hospital","swiss cross","dispensary"]},{"name":"mdi:hospital-box-outline","tags":["medical / hospital","swiss cross box outline","dispensary box outline"]},{"name":"mdi:hospital-building","tags":["places","medical / hospital"]},{"name":"mdi:hospital-marker","tags":["medical / hospital","navigation","hospital location"]},{"name":"mdi:hours-24","tags":["date / time"]},{"name":"mdi:hubspot","tags":[]},{"name":"mdi:human-baby-changing-table","tags":["people / family","medical / hospital"]},{"name":"mdi:human-capacity-increase","tags":["account / user","transportation + other","people / family"]},{"name":"mdi:human-child","tags":["people / family"]},{"name":"mdi:human-dolly","tags":["people / family","human hand truck","human trolley"]},{"name":"mdi:human-edit","tags":["people / family","edit / modify"]},{"name":"mdi:human-female-boy","tags":["people / family","mother","mom","woman child","mum"]},{"name":"mdi:human-female-dance","tags":["people / family","sport","ballet"]},{"name":"mdi:human-female-female","tags":["people / family","woman woman","women"]},{"name":"mdi:human-female-girl","tags":["people / family","mother","mom","woman child","mum"]},{"name":"mdi:human-male-board","tags":["people / family","teacher","teaching","lecture","college","blackboard","whiteboard","human man board"]},{"name":"mdi:human-male-board-poll","tags":["people / family","teach poll"]},{"name":"mdi:human-male-boy","tags":["people / family","father","dad","man child"]},{"name":"mdi:human-male-child","tags":["people / family"]},{"name":"mdi:human-male-girl","tags":["people / family","father","dad","man child"]},{"name":"mdi:human-male-height","tags":["medical / hospital","people / family"]},{"name":"mdi:human-male-height-variant","tags":["medical / hospital","people / family"]},{"name":"mdi:human-male-male","tags":["people / family","man man","men"]},{"name":"mdi:human-non-binary","tags":["people / family","human genderless","human transgender"]},{"name":"mdi:human-queue","tags":["people / family","human line"]},{"name":"mdi:human-wheelchair","tags":["people / family","medical / hospital","human accessible"]},{"name":"mdi:human-white-cane","tags":["people / family","medical / hospital","human blind"]},{"name":"mdi:hvac-off","tags":["home automation","heating off","ventilation off","air conditioning off"]},{"name":"mdi:hydraulic-oil-level","tags":["automotive"]},{"name":"mdi:hydraulic-oil-temperature","tags":["automotive"]},{"name":"mdi:hydro-power","tags":["device / tech","agriculture","hydraulic turbine","water turbine","watermill"]},{"name":"mdi:hydrogen-station","tags":["automotive"]},{"name":"mdi:ice-cream-off","tags":["food / drink"]},{"name":"mdi:ice-pop","tags":["food / drink","popsicle"]},{"name":"mdi:id-card","tags":[]},{"name":"mdi:identifier","tags":["developer / languages","key"]},{"name":"mdi:ideogram-cjk","tags":["alpha / numeric","ideogram chinese japanese korean","writing system cjk"]},{"name":"mdi:ideogram-cjk-variant","tags":["alpha / numeric","ideogram chinese japanese korean variant","writing system cjk variant"]},{"name":"mdi:image-area","tags":[]},{"name":"mdi:image-area-close","tags":[]},{"name":"mdi:image-broken","tags":[]},{"name":"mdi:image-check","tags":[]},{"name":"mdi:image-check-outline","tags":[]},{"name":"mdi:image-edit","tags":["edit / modify"]},{"name":"mdi:image-edit-outline","tags":["edit / modify"]},{"name":"mdi:image-filter-hdr-outline","tags":["photography","nature","mountain outline","landscape outline"]},{"name":"mdi:image-lock","tags":["lock","photography","image secure"]},{"name":"mdi:image-lock-outline","tags":["photography","lock","image secure outline"]},{"name":"mdi:image-marker","tags":["navigation","image location"]},{"name":"mdi:image-marker-outline","tags":["navigation","image location outline"]},{"name":"mdi:image-minus","tags":[]},{"name":"mdi:image-minus-outline","tags":[]},{"name":"mdi:image-move","tags":[]},{"name":"mdi:image-off","tags":[]},{"name":"mdi:image-off-outline","tags":[]},{"name":"mdi:image-outline","tags":[]},{"name":"mdi:image-plus","tags":["image add"]},{"name":"mdi:image-plus-outline","tags":["image add outline"]},{"name":"mdi:image-refresh","tags":["photography"]},{"name":"mdi:image-refresh-outline","tags":["photography"]},{"name":"mdi:image-remove","tags":[]},{"name":"mdi:image-remove-outline","tags":[]},{"name":"mdi:image-sync","tags":["photography"]},{"name":"mdi:image-sync-outline","tags":["photography"]},{"name":"mdi:import","tags":["input"]},{"name":"mdi:inbox-arrow-down-outline","tags":[]},{"name":"mdi:inbox-arrow-up","tags":["move from inbox"]},{"name":"mdi:inbox-arrow-up-outline","tags":[]},{"name":"mdi:inbox-full","tags":[]},{"name":"mdi:inbox-full-outline","tags":[]},{"name":"mdi:inbox-outline","tags":[]},{"name":"mdi:inbox-remove","tags":[]},{"name":"mdi:inbox-remove-outline","tags":[]},{"name":"mdi:incognito","tags":["anonymous","spy"]},{"name":"mdi:incognito-circle-off","tags":["anonymous circle off","spy circle off"]},{"name":"mdi:incognito-off","tags":["spy off","anonymous off"]},{"name":"mdi:induction","tags":["home automation","automotive","ignition"]},{"name":"mdi:infinity","tags":["math"]},{"name":"mdi:information-box","tags":["settings","info box"]},{"name":"mdi:information-box-outline","tags":["settings","info box outline"]},{"name":"mdi:information-off","tags":["info off","info circle off","information circle off"]},{"name":"mdi:information-off-outline","tags":["info circle off outline","information circle off outline","information off outline","info off outline"]},{"name":"mdi:information-slab-box","tags":["settings","info slab box"]},{"name":"mdi:information-slab-box-outline","tags":["settings","info slab box outline"]},{"name":"mdi:information-slab-circle","tags":["settings","info slab circle"]},{"name":"mdi:information-slab-circle-outline","tags":["settings","info slab circle outline"]},{"name":"mdi:information-slab-symbol","tags":["settings","info slab symbol"]},{"name":"mdi:information-symbol","tags":["settings","info symbol"]},{"name":"mdi:information-variant","tags":["info variant","about variant","information serif symbol","info variant symbol"]},{"name":"mdi:information-variant-box","tags":["settings","info variant box","information serif box","info serif box"]},{"name":"mdi:information-variant-box-outline","tags":["settings","info variant box outline","information serif box outline","info serif box outline"]},{"name":"mdi:information-variant-circle","tags":["settings","information serif circle","info serif circle","info variant circle"]},{"name":"mdi:information-variant-circle-outline","tags":["settings","information serif circle outline","info variant circle outline","info serif circle outline"]},{"name":"mdi:instrument-triangle","tags":["music","dinner bell"]},{"name":"mdi:integrated-circuit-chip","tags":["banking","icc","chip"]},{"name":"mdi:ip","tags":["internet protocol"]},{"name":"mdi:ip-network","tags":[]},{"name":"mdi:ip-network-outline","tags":[]},{"name":"mdi:ip-outline","tags":["internet protocol outline"]},{"name":"mdi:ipod","tags":["apple ipod"]},{"name":"mdi:iron-board","tags":["home automation","clothing"]},{"name":"mdi:island","tags":["places"]},{"name":"mdi:iv-bag","tags":["medical / hospital"]},{"name":"mdi:jeepney","tags":["transportation + road"]},{"name":"mdi:jellyfish","tags":["animal"]},{"name":"mdi:jellyfish-outline","tags":["animal"]},{"name":"mdi:jump-rope","tags":["sport"]},{"name":"mdi:kangaroo","tags":["animal","marsupial"]},{"name":"mdi:keg","tags":["food / drink"]},{"name":"mdi:kettle","tags":["home automation","food / drink","tea kettle","kettle full","tea kettle full"]},{"name":"mdi:kettle-alert","tags":["home automation","alert / error","food / drink","tea kettle alert","kettle full alert","tea kettle full alert"]},{"name":"mdi:kettle-alert-outline","tags":["home automation","alert / error","food / drink","tea kettle alert outline","kettle empty alert","tea kettle empty alert"]},{"name":"mdi:kettle-off","tags":["home automation","food / drink","tea kettle off","tea kettle full off","kettle full off"]},{"name":"mdi:kettle-off-outline","tags":["home automation","food / drink","tea kettle off outline","kettle empty off","tea kettle empty off"]},{"name":"mdi:kettle-outline","tags":["food / drink","home automation","tea kettle outline","kettle empty","tea kettle empty"]},{"name":"mdi:kettle-pour-over","tags":[]},{"name":"mdi:kettle-steam","tags":["home automation","food / drink","tea kettle steam","kettle full steam","tea kettle full steam"]},{"name":"mdi:kettle-steam-outline","tags":["home automation","food / drink","tea kettle steam outline","kettle empty steam","tea kettle empty steam"]},{"name":"mdi:kettlebell","tags":["sport"]},{"name":"mdi:key-alert","tags":["alert / error"]},{"name":"mdi:key-alert-outline","tags":["alert / error"]},{"name":"mdi:key-arrow-right","tags":[]},{"name":"mdi:key-chain","tags":["automotive","home automation"]},{"name":"mdi:key-chain-variant","tags":["automotive","home automation"]},{"name":"mdi:key-change","tags":[]},{"name":"mdi:key-link","tags":["foreign key","sql foreign key"]},{"name":"mdi:key-minus","tags":[]},{"name":"mdi:key-plus","tags":["key add"]},{"name":"mdi:key-remove","tags":[]},{"name":"mdi:key-star","tags":["primary key","sql primary key","key favorite"]},{"name":"mdi:key-variant","tags":["automotive"]},{"name":"mdi:key-wireless","tags":[]},{"name":"mdi:keyboard-close-outline","tags":["keyboard hide outline"]},{"name":"mdi:keyboard-esc","tags":[]},{"name":"mdi:keyboard-f1","tags":[]},{"name":"mdi:keyboard-f10","tags":[]},{"name":"mdi:keyboard-f11","tags":[]},{"name":"mdi:keyboard-f12","tags":[]},{"name":"mdi:keyboard-f2","tags":[]},{"name":"mdi:keyboard-f3","tags":[]},{"name":"mdi:keyboard-f4","tags":[]},{"name":"mdi:keyboard-f5","tags":[]},{"name":"mdi:keyboard-f6","tags":[]},{"name":"mdi:keyboard-f7","tags":[]},{"name":"mdi:keyboard-f8","tags":[]},{"name":"mdi:keyboard-f9","tags":[]},{"name":"mdi:keyboard-off","tags":[]},{"name":"mdi:keyboard-off-outline","tags":[]},{"name":"mdi:keyboard-settings","tags":["settings"]},{"name":"mdi:keyboard-settings-outline","tags":["settings"]},{"name":"mdi:keyboard-space","tags":[]},{"name":"mdi:keyboard-tab-reverse","tags":[]},{"name":"mdi:keyboard-variant","tags":[]},{"name":"mdi:khanda","tags":["religion","sikh"]},{"name":"mdi:klingon","tags":[]},{"name":"mdi:knife","tags":["silverware knife","cutlery knife"]},{"name":"mdi:knife-military","tags":["gaming / rpg","dagger"]},{"name":"mdi:knob","tags":["audio","volume knob","volume control","dial","tuner","switch","adjuster"]},{"name":"mdi:koala","tags":["animal","marsupial","emoji koala","emoticon koala"]},{"name":"mdi:label-multiple","tags":[]},{"name":"mdi:label-multiple-outline","tags":[]},{"name":"mdi:label-percent","tags":[]},{"name":"mdi:label-percent-outline","tags":[]},{"name":"mdi:ladder","tags":["hardware / tools"]},{"name":"mdi:lambda","tags":["gaming / rpg","math"]},{"name":"mdi:lamp","tags":["home automation"]},{"name":"mdi:lamp-outline","tags":["home automation"]},{"name":"mdi:lamps","tags":["home automation","lights"]},{"name":"mdi:lamps-outline","tags":["home automation","lights outline"]},{"name":"mdi:lan","tags":["local area network"]},{"name":"mdi:lan-check","tags":[]},{"name":"mdi:lan-connect","tags":["local area network connect"]},{"name":"mdi:lan-disconnect","tags":["local area network disconnect"]},{"name":"mdi:lan-pending","tags":["local area network pending"]},{"name":"mdi:land-fields","tags":["agriculture"]},{"name":"mdi:land-plots","tags":["agriculture"]},{"name":"mdi:land-plots-circle","tags":["agriculture"]},{"name":"mdi:land-plots-circle-variant","tags":["agriculture"]},{"name":"mdi:land-plots-marker","tags":["agriculture"]},{"name":"mdi:land-rows-horizontal","tags":["agriculture"]},{"name":"mdi:land-rows-vertical","tags":["agriculture"]},{"name":"mdi:laptop-account","tags":["account / user","device / tech","teleconference","virtual meeting","video chat"]},{"name":"mdi:laptop-off","tags":["device / tech"]},{"name":"mdi:lasso","tags":[]},{"name":"mdi:latitude","tags":["navigation","geographic information system"]},{"name":"mdi:lava-lamp","tags":["home automation"]},{"name":"mdi:layers-edit","tags":["geographic information system","edit / modify"]},{"name":"mdi:layers-minus","tags":["geographic information system"]},{"name":"mdi:layers-plus","tags":["geographic information system"]},{"name":"mdi:layers-remove","tags":["geographic information system"]},{"name":"mdi:layers-search","tags":["geographic information system"]},{"name":"mdi:layers-search-outline","tags":["geographic information system"]},{"name":"mdi:layers-triple","tags":[]},{"name":"mdi:layers-triple-outline","tags":[]},{"name":"mdi:leaf","tags":["nature","food / drink","agriculture"]},{"name":"mdi:leaf-circle","tags":["nature","agriculture","green circle","organic"]},{"name":"mdi:leaf-circle-outline","tags":["agriculture","nature","green circle outline","organic outline"]},{"name":"mdi:leaf-maple","tags":["nature"]},{"name":"mdi:leaf-maple-off","tags":["nature"]},{"name":"mdi:leaf-off","tags":["nature","food / drink","agriculture"]},{"name":"mdi:lectern","tags":["podium","dais","rostrum","lecturn"]},{"name":"mdi:led-off","tags":["home automation"]},{"name":"mdi:led-on","tags":["home automation"]},{"name":"mdi:led-outline","tags":["home automation"]},{"name":"mdi:led-strip","tags":["home automation","light strip"]},{"name":"mdi:led-strip-variant","tags":["home automation","light strip variant"]},{"name":"mdi:led-strip-variant-off","tags":["home automation","light strip variant off"]},{"name":"mdi:led-variant-off","tags":["home automation"]},{"name":"mdi:led-variant-on","tags":["home automation"]},{"name":"mdi:led-variant-outline","tags":["home automation"]},{"name":"mdi:leek","tags":["food / drink"]},{"name":"mdi:less-than","tags":["math"]},{"name":"mdi:less-than-or-equal","tags":["math"]},{"name":"mdi:library-outline","tags":["places","local library outline"]},{"name":"mdi:lifebuoy","tags":["transportation + water","life preserver","support","help","overboard"]},{"name":"mdi:light-flood-down","tags":["home automation","floodlight down"]},{"name":"mdi:light-flood-up","tags":["home automation","floodlight up"]},{"name":"mdi:light-recessed","tags":["home automation","can light","pot light","high hat light","hi hat light","downlight"]},{"name":"mdi:light-switch","tags":["home automation","toggle switch","rocker switch"]},{"name":"mdi:light-switch-off","tags":["home automation","toggle switch off","rocker switch off"]},{"name":"mdi:lightbulb-alert","tags":["home automation","alert / error","lightbulb error"]},{"name":"mdi:lightbulb-alert-outline","tags":["home automation","alert / error","lightbulb error outline"]},{"name":"mdi:lightbulb-auto","tags":["home automation","lightbulb automatic","lightbulb motion"]},{"name":"mdi:lightbulb-auto-outline","tags":["home automation","lightbulb automatic outline","lightbulb motion outline"]},{"name":"mdi:lightbulb-cfl","tags":["home automation","bulb cfl"]},{"name":"mdi:lightbulb-cfl-off","tags":["home automation","bulb cfl off"]},{"name":"mdi:lightbulb-cfl-spiral","tags":["home automation","bulb cfl spiral"]},{"name":"mdi:lightbulb-cfl-spiral-off","tags":["home automation","bulb cfl spiral off"]},{"name":"mdi:lightbulb-fluorescent-tube","tags":["home automation"]},{"name":"mdi:lightbulb-fluorescent-tube-outline","tags":["home automation"]},{"name":"mdi:lightbulb-group","tags":["home automation","bulb group"]},{"name":"mdi:lightbulb-group-off","tags":["home automation","bulb group off"]},{"name":"mdi:lightbulb-group-off-outline","tags":["home automation","bulb group off outline"]},{"name":"mdi:lightbulb-group-outline","tags":["home automation","bulb group outline"]},{"name":"mdi:lightbulb-multiple","tags":["home automation","lightbulbs","bulb multiple","bulbs"]},{"name":"mdi:lightbulb-multiple-off","tags":["home automation","lightbulbs off","bulb multiple off","bulbs off"]},{"name":"mdi:lightbulb-multiple-off-outline","tags":["home automation","lightbulbs off outline","bulb multiple off outline","bulbs off outline"]},{"name":"mdi:lightbulb-multiple-outline","tags":["home automation","lightbulbs outline","bulb multiple outline","bulbs outline"]},{"name":"mdi:lightbulb-night","tags":["home automation","night light","nite light","lightbulb moon star"]},{"name":"mdi:lightbulb-night-outline","tags":["home automation","night light outline","nite light outline","lightbulb moon star outline"]},{"name":"mdi:lightbulb-off","tags":["home automation","bulb off"]},{"name":"mdi:lightbulb-off-outline","tags":["home automation","bulb off outline"]},{"name":"mdi:lightbulb-on","tags":["home automation","idea","bulb on","lightbulb dimmer 100"]},{"name":"mdi:lightbulb-on-10","tags":["home automation","lightbulb dimmer 10"]},{"name":"mdi:lightbulb-on-20","tags":["home automation","lightbulb dimmer 20"]},{"name":"mdi:lightbulb-on-30","tags":["home automation","lightbulb dimmer 30"]},{"name":"mdi:lightbulb-on-40","tags":["home automation","lightbulb dimmer 40"]},{"name":"mdi:lightbulb-on-50","tags":["home automation","lightbulb dimmer 50"]},{"name":"mdi:lightbulb-on-60","tags":["home automation","lightbulb dimmer 60"]},{"name":"mdi:lightbulb-on-70","tags":["home automation","lightbulb dimmer 70"]},{"name":"mdi:lightbulb-on-80","tags":["home automation","lightbulb dimmer 80"]},{"name":"mdi:lightbulb-on-90","tags":["home automation","lightbulb dimmer 90"]},{"name":"mdi:lightbulb-on-outline","tags":["home automation","idea","bulb on outline"]},{"name":"mdi:lightbulb-outline","tags":["home automation","idea","bulb outline"]},{"name":"mdi:lightbulb-question","tags":["home automation","lightbulb help"]},{"name":"mdi:lightbulb-question-outline","tags":["home automation","lightbulb help outline"]},{"name":"mdi:lightbulb-spot","tags":["home automation","lightbulb halogen","lightbulb gu10"]},{"name":"mdi:lightbulb-spot-off","tags":["home automation","lightbulb halogen off","lightbulb gu10 off"]},{"name":"mdi:lightbulb-variant","tags":["home automation","lightbulb edison","lightbulb filament"]},{"name":"mdi:lightbulb-variant-outline","tags":["home automation","lightbulb edison outline","lightbulb filament outline"]},{"name":"mdi:lighthouse","tags":["beacon"]},{"name":"mdi:lighthouse-on","tags":["beacon"]},{"name":"mdi:lightning-bolt","tags":["home automation","weather","thunder","storm","energy","electricity"]},{"name":"mdi:lightning-bolt-outline","tags":["home automation","weather","thunder outline","storm outline","energy outline","electricity outline"]},{"name":"mdi:line-scan","tags":[]},{"name":"mdi:lingerie","tags":["clothing","underwear","bra","panties"]},{"name":"mdi:link-box","tags":[]},{"name":"mdi:link-box-outline","tags":[]},{"name":"mdi:link-box-variant","tags":[]},{"name":"mdi:link-box-variant-outline","tags":[]},{"name":"mdi:link-lock","tags":["lock","block chain"]},{"name":"mdi:link-variant","tags":[]},{"name":"mdi:link-variant-minus","tags":[]},{"name":"mdi:link-variant-off","tags":[]},{"name":"mdi:link-variant-plus","tags":[]},{"name":"mdi:link-variant-remove","tags":[]},{"name":"mdi:lipstick","tags":["health / beauty"]},{"name":"mdi:liquid-spot","tags":["automotive","medical / hospital","ink spot","puddle","water","blood","spill","oil","dirty"]},{"name":"mdi:list-box","tags":["form"]},{"name":"mdi:list-box-outline","tags":["form outline"]},{"name":"mdi:loading","tags":[]},{"name":"mdi:location-enter","tags":["home automation","presence enter"]},{"name":"mdi:location-exit","tags":["home automation","presence exit"]},{"name":"mdi:lock-alert","tags":["lock","alert / error","home automation","lock warning","password alert","encryption alert","password warning","encryption warning"]},{"name":"mdi:lock-alert-outline","tags":["home automation","alert / error","lock","lock warning outline","password alert outline","encryption alert outline","password warning outline","encryption warning outline"]},{"name":"mdi:lock-check","tags":["lock","password check","password secure","encryption check","encryption secure","password verified","encryption verified"]},{"name":"mdi:lock-check-outline","tags":["lock","password check outline","password secure outline","encryption check outline","encryption secure outline","password verified outline","encryption verified outline"]},{"name":"mdi:lock-minus","tags":["lock","password minus","encryption minus"]},{"name":"mdi:lock-minus-outline","tags":["lock","password minus outline","encryption minus"]},{"name":"mdi:lock-off","tags":["lock","password off","not protected","unsecure","encryption off"]},{"name":"mdi:lock-off-outline","tags":["lock","password off outline","unsecure outline","not protected outline","encryption off outline"]},{"name":"mdi:lock-open-alert","tags":["alert / error","home automation","lock","unlocked alert","decrypted alert","lock open warning","unlocked warning","decrypted warning"]},{"name":"mdi:lock-open-alert-outline","tags":["home automation","alert / error","lock","unlocked alert outline","lock open warning outline","decrypted alert outline","unlocked warning outline","decrypted warning outline"]},{"name":"mdi:lock-open-check","tags":["lock","unlocked check","decrypted check"]},{"name":"mdi:lock-open-check-outline","tags":["lock","unlocked check outline","decrypted check outline"]},{"name":"mdi:lock-open-minus","tags":["lock","unlocked minus","decrypted minus"]},{"name":"mdi:lock-open-minus-outline","tags":["lock","unlocked minus outline","decrypted minus outline"]},{"name":"mdi:lock-open-plus","tags":["lock","unlocked plus","decrypted plus","lock open add","unlocked add","decrypted add"]},{"name":"mdi:lock-open-plus-outline","tags":["lock","unlocked plus outline","lock open add outline","unlocked add outline","decrypted plus outline","decrypted add outline"]},{"name":"mdi:lock-open-remove","tags":["lock","unlocked remove","decrypted remove"]},{"name":"mdi:lock-open-remove-outline","tags":["lock","unlocked remove outline","decrypted remove outline"]},{"name":"mdi:lock-open-variant","tags":["lock","home automation","unlocked variant","decrypted variant"]},{"name":"mdi:lock-open-variant-outline","tags":["lock","home automation","unlocked variant outline","decrypted variant outline"]},{"name":"mdi:lock-pattern","tags":[]},{"name":"mdi:lock-percent","tags":["lock rate"]},{"name":"mdi:lock-percent-open","tags":["lock rate open"]},{"name":"mdi:lock-percent-open-outline","tags":["lock rate open outline"]},{"name":"mdi:lock-percent-open-variant","tags":["lock rate open variant"]},{"name":"mdi:lock-percent-open-variant-outline","tags":["lock rate open variant outline"]},{"name":"mdi:lock-percent-outline","tags":["lock rate outline"]},{"name":"mdi:lock-plus","tags":["lock","enhanced encryption","lock add","encryption add","password add","password plus","encryption plus"]},{"name":"mdi:lock-plus-outline","tags":["lock","lock add outline","password plus outline","password add outline","encryption plus outline","encryption add outline"]},{"name":"mdi:lock-question","tags":["lock","forgot password","password question","encryption question"]},{"name":"mdi:lock-remove","tags":["lock","password remove","encryption remove"]},{"name":"mdi:lock-remove-outline","tags":["lock","password remove outline","encryption remove outline"]},{"name":"mdi:lock-smart","tags":["home automation"]},{"name":"mdi:locker","tags":[]},{"name":"mdi:locker-multiple","tags":["lockers"]},{"name":"mdi:login","tags":["log in","sign in"]},{"name":"mdi:login-variant","tags":["log in variant","sign in variant"]},{"name":"mdi:logout","tags":["log out","sign out"]},{"name":"mdi:logout-variant","tags":["log out variant","sign out variant"]},{"name":"mdi:longitude","tags":["navigation","geographic information system"]},{"name":"mdi:lotion","tags":["medical / hospital","health / beauty"]},{"name":"mdi:lotion-outline","tags":["medical / hospital","health / beauty"]},{"name":"mdi:lungs","tags":["medical / hospital"]},{"name":"mdi:mace","tags":["gaming / rpg"]},{"name":"mdi:magazine-pistol","tags":["ammunition pistol"]},{"name":"mdi:magazine-rifle","tags":["ammunition rifle"]},{"name":"mdi:magic-staff","tags":["gaming / rpg","staff shimmer","magic wand"]},{"name":"mdi:magnet","tags":[]},{"name":"mdi:magnet-on","tags":[]},{"name":"mdi:magnify-close","tags":[]},{"name":"mdi:magnify-expand","tags":["geographic information system","search expand"]},{"name":"mdi:magnify-minus","tags":["zoom out","search minus"]},{"name":"mdi:magnify-minus-cursor","tags":["zoom out cursor"]},{"name":"mdi:magnify-plus","tags":["zoom in","magnify add","search plus","search add"]},{"name":"mdi:magnify-plus-cursor","tags":["zoom in cursor","magnify add cursor"]},{"name":"mdi:magnify-remove-cursor","tags":[]},{"name":"mdi:magnify-remove-outline","tags":["geographic information system"]},{"name":"mdi:magnify-scan","tags":[]},{"name":"mdi:mail","tags":[]},{"name":"mdi:mailbox","tags":[]},{"name":"mdi:mailbox-open","tags":[]},{"name":"mdi:mailbox-open-outline","tags":[]},{"name":"mdi:mailbox-open-up","tags":[]},{"name":"mdi:mailbox-open-up-outline","tags":[]},{"name":"mdi:mailbox-outline","tags":[]},{"name":"mdi:mailbox-up","tags":[]},{"name":"mdi:mailbox-up-outline","tags":[]},{"name":"mdi:map-check","tags":["navigation","geographic information system","map tick"]},{"name":"mdi:map-check-outline","tags":["navigation","geographic information system","map tick outline"]},{"name":"mdi:map-clock","tags":["navigation","geographic information system","date / time","timezone"]},{"name":"mdi:map-clock-outline","tags":["navigation","geographic information system","date / time","timezone outline"]},{"name":"mdi:map-legend","tags":["navigation","geographic information system"]},{"name":"mdi:map-marker-alert","tags":["navigation","alert / error","geographic information system","location alert","location warning"]},{"name":"mdi:map-marker-alert-outline","tags":["navigation","alert / error","geographic information system","location alert outline","location warning outline"]},{"name":"mdi:map-marker-check-outline","tags":["navigation","geographic information system","location check outline","where to vote outline"]},{"name":"mdi:map-marker-distance","tags":["navigation","geographic information system","location distance"]},{"name":"mdi:map-marker-down","tags":["navigation","geographic information system","location down"]},{"name":"mdi:map-marker-left","tags":["navigation","geographic information system","location left"]},{"name":"mdi:map-marker-left-outline","tags":["navigation","geographic information system","location left outline"]},{"name":"mdi:map-marker-minus","tags":["navigation","geographic information system","location minus"]},{"name":"mdi:map-marker-minus-outline","tags":["geographic information system","navigation","location minus outline"]},{"name":"mdi:map-marker-multiple","tags":["navigation","geographic information system","map markers","location multiple","locations"]},{"name":"mdi:map-marker-multiple-outline","tags":["navigation","geographic information system","locations outline","location multiple outline","map markers outline"]},{"name":"mdi:map-marker-off","tags":["navigation","geographic information system","location off"]},{"name":"mdi:map-marker-off-outline","tags":["navigation","geographic information system","location off outline"]},{"name":"mdi:map-marker-path","tags":["navigation","geographic information system","location path"]},{"name":"mdi:map-marker-plus","tags":["navigation","geographic information system","location plus","map marker add","location add"]},{"name":"mdi:map-marker-plus-outline","tags":["geographic information system","navigation","map marker add outline","location plus outline","location add outline"]},{"name":"mdi:map-marker-radius","tags":["navigation","geographic information system","home automation","location radius"]},{"name":"mdi:map-marker-radius-outline","tags":["navigation","geographic information system","home automation","location radius outline"]},{"name":"mdi:map-marker-remove","tags":["navigation","geographic information system","location remove"]},{"name":"mdi:map-marker-remove-outline","tags":["geographic information system","navigation","location remove outline"]},{"name":"mdi:map-marker-remove-variant","tags":["navigation","geographic information system","location remove variant outline"]},{"name":"mdi:map-marker-right","tags":["navigation","geographic information system","location right"]},{"name":"mdi:map-marker-right-outline","tags":["navigation","geographic information system","location right outline"]},{"name":"mdi:map-marker-star","tags":["navigation","map marker favorite","location star","location favorite"]},{"name":"mdi:map-marker-star-outline","tags":["navigation","map marker favorite outline","location star outline","location favorite outline"]},{"name":"mdi:map-marker-up","tags":["navigation","geographic information system","location up"]},{"name":"mdi:map-minus","tags":["navigation","geographic information system"]},{"name":"mdi:map-plus","tags":["navigation","geographic information system","map add"]},{"name":"mdi:map-search","tags":["navigation","geographic information system"]},{"name":"mdi:map-search-outline","tags":["navigation","geographic information system"]},{"name":"mdi:margin","tags":[]},{"name":"mdi:marker-cancel","tags":["text / content / format"]},{"name":"mdi:math-compass","tags":["math","drawing / art","navigation","maths compass"]},{"name":"mdi:math-cos","tags":["math","math cosine","maths cos"]},{"name":"mdi:math-integral","tags":["math"]},{"name":"mdi:math-integral-box","tags":["math"]},{"name":"mdi:math-log","tags":["math"]},{"name":"mdi:math-norm","tags":["math","developer / languages","code or","parallel"]},{"name":"mdi:math-norm-box","tags":["math","developer / languages","code or box","parallel box"]},{"name":"mdi:math-sin","tags":["math","math sine","maths sin"]},{"name":"mdi:math-tan","tags":["math","math tangent","maths tan"]},{"name":"mdi:matrix","tags":[]},{"name":"mdi:medal","tags":["gaming / rpg","sport","award"]},{"name":"mdi:medal-outline","tags":["sport"]},{"name":"mdi:medical-bag","tags":["medical / hospital","first aid kit","medicine"]},{"name":"mdi:menorah","tags":["religion","holiday","candelabrum","candelabra","candle"]},{"name":"mdi:menorah-fire","tags":["religion","holiday","menorah flame","candle flame","candelabra flame","candelabra fire","candle fire","candelabrum fire","candelabrum flame"]},{"name":"mdi:menu-down-outline","tags":["arrow","caret down outline"]},{"name":"mdi:menu-left","tags":["arrow","arrow left"]},{"name":"mdi:menu-left-outline","tags":[]},{"name":"mdi:menu-right","tags":["arrow","arrow right"]},{"name":"mdi:menu-right-outline","tags":[]},{"name":"mdi:menu-swap","tags":["arrow"]},{"name":"mdi:menu-swap-outline","tags":["arrow"]},{"name":"mdi:menu-up-outline","tags":["arrow","caret up outline"]},{"name":"mdi:message-alert-outline","tags":["alert / error","announcement outline","feedback outline","message warning outline","sms failed outline"]},{"name":"mdi:message-arrow-left","tags":[]},{"name":"mdi:message-arrow-left-outline","tags":[]},{"name":"mdi:message-arrow-right","tags":[]},{"name":"mdi:message-arrow-right-outline","tags":[]},{"name":"mdi:message-check","tags":[]},{"name":"mdi:message-check-outline","tags":[]},{"name":"mdi:message-cog","tags":["settings"]},{"name":"mdi:message-cog-outline","tags":["settings"]},{"name":"mdi:message-fast","tags":[]},{"name":"mdi:message-fast-outline","tags":[]},{"name":"mdi:message-image-outline","tags":[]},{"name":"mdi:message-lock","tags":["lock","message secure"]},{"name":"mdi:message-lock-outline","tags":["lock"]},{"name":"mdi:message-minus","tags":[]},{"name":"mdi:message-minus-outline","tags":[]},{"name":"mdi:message-off","tags":[]},{"name":"mdi:message-off-outline","tags":[]},{"name":"mdi:message-plus","tags":["message add"]},{"name":"mdi:message-plus-outline","tags":[]},{"name":"mdi:message-processing-outline","tags":[]},{"name":"mdi:message-question","tags":[]},{"name":"mdi:message-question-outline","tags":[]},{"name":"mdi:message-reply-outline","tags":[]},{"name":"mdi:message-reply-text-outline","tags":[]},{"name":"mdi:message-settings","tags":["settings"]},{"name":"mdi:message-settings-outline","tags":["settings"]},{"name":"mdi:message-star","tags":[]},{"name":"mdi:message-star-outline","tags":[]},{"name":"mdi:message-text-clock","tags":["date / time"]},{"name":"mdi:message-text-clock-outline","tags":["date / time"]},{"name":"mdi:message-text-fast","tags":[]},{"name":"mdi:message-text-fast-outline","tags":[]},{"name":"mdi:message-text-lock","tags":["lock","message text secure"]},{"name":"mdi:message-text-lock-outline","tags":["lock"]},{"name":"mdi:message-text-outline","tags":[]},{"name":"mdi:metronome","tags":["music","tempo","bpm","beats per minute"]},{"name":"mdi:metronome-tick","tags":["music","tempo tick","bpm tick","beats per minute tick"]},{"name":"mdi:micro-sd","tags":[]},{"name":"mdi:microphone-message","tags":["tts","text to speech"]},{"name":"mdi:microphone-message-off","tags":["tts off","text to speech off"]},{"name":"mdi:microphone-minus","tags":["microphone remove"]},{"name":"mdi:microphone-plus","tags":["microphone add"]},{"name":"mdi:microphone-question","tags":["audio","music","microphone help"]},{"name":"mdi:microphone-question-outline","tags":["audio","music","microphone help outline"]},{"name":"mdi:microphone-variant","tags":["music"]},{"name":"mdi:microphone-variant-off","tags":["music"]},{"name":"mdi:microscope","tags":["science"]},{"name":"mdi:microsoft-xbox-controller-battery-unknown","tags":["battery","gaming / rpg","microsoft xbox gamepad battery unknown"]},{"name":"mdi:microwave","tags":["home automation","food / drink","microwave oven"]},{"name":"mdi:microwave-off","tags":["home automation"]},{"name":"mdi:middleware","tags":["arrow"]},{"name":"mdi:middleware-outline","tags":["arrow"]},{"name":"mdi:midi-port","tags":["music"]},{"name":"mdi:mine","tags":[]},{"name":"mdi:mini-sd","tags":[]},{"name":"mdi:minidisc","tags":[]},{"name":"mdi:minus-box-multiple","tags":["form","library minus"]},{"name":"mdi:minus-box-multiple-outline","tags":["form","library minus outline"]},{"name":"mdi:minus-circle-multiple","tags":["form","coins minus"]},{"name":"mdi:minus-circle-multiple-outline","tags":["form","coins minus outline"]},{"name":"mdi:minus-circle-off","tags":["do not disturb off","remove circle off","do not enter off"]},{"name":"mdi:minus-circle-off-outline","tags":["do not disturb off outline","remove circle off outline","do not enter off outline"]},{"name":"mdi:minus-network","tags":[]},{"name":"mdi:minus-network-outline","tags":[]},{"name":"mdi:minus-thick","tags":[]},{"name":"mdi:mirror","tags":["home automation"]},{"name":"mdi:mirror-rectangle","tags":["home automation"]},{"name":"mdi:mirror-variant","tags":["home automation"]},{"name":"mdi:mixed-reality","tags":[]},{"name":"mdi:molecule","tags":["science"]},{"name":"mdi:molecule-co","tags":["home automation","science","carbon monoxide","gas co"]},{"name":"mdi:molecule-co2","tags":["science","home automation","periodic table carbon dioxide","gas co2"]},{"name":"mdi:monitor-account","tags":["account / user","device / tech","teleconference","virtual meeting","video chat"]},{"name":"mdi:monitor-arrow-down","tags":["device / tech","monitor download"]},{"name":"mdi:monitor-arrow-down-variant","tags":["device / tech","monitor download"]},{"name":"mdi:monitor-dashboard","tags":["device / tech"]},{"name":"mdi:monitor-edit","tags":["edit / modify"]},{"name":"mdi:monitor-eye","tags":[]},{"name":"mdi:monitor-lock","tags":["device / tech","lock"]},{"name":"mdi:monitor-multiple","tags":["device / tech","monitors"]},{"name":"mdi:monitor-shimmer","tags":["device / tech","monitor clean"]},{"name":"mdi:monitor-small","tags":["device / tech","monitor crt"]},{"name":"mdi:monitor-speaker","tags":["device / tech"]},{"name":"mdi:monitor-speaker-off","tags":["device / tech"]},{"name":"mdi:monitor-star","tags":["device / tech","monitor favorite"]},{"name":"mdi:monitor-vertical","tags":[]},{"name":"mdi:moon-first-quarter","tags":["weather"]},{"name":"mdi:moon-full","tags":["weather"]},{"name":"mdi:moon-last-quarter","tags":["weather"]},{"name":"mdi:moon-new","tags":["weather"]},{"name":"mdi:moon-waning-crescent","tags":["weather"]},{"name":"mdi:moon-waning-gibbous","tags":["weather"]},{"name":"mdi:moon-waxing-crescent","tags":["weather"]},{"name":"mdi:moon-waxing-gibbous","tags":["weather"]},{"name":"mdi:mortar-pestle","tags":[]},{"name":"mdi:mother-heart","tags":["people / family"]},{"name":"mdi:mother-nurse","tags":["medical / hospital","people / family","breast feed"]},{"name":"mdi:motion-sensor","tags":["home automation","motion detector"]},{"name":"mdi:motion-sensor-off","tags":["home automation"]},{"name":"mdi:motorbike-electric","tags":["transportation + road","motorcycle electric"]},{"name":"mdi:motorbike-off","tags":["transportation + road","motorcycle off"]},{"name":"mdi:mouse-bluetooth","tags":[]},{"name":"mdi:mouse-move-down","tags":[]},{"name":"mdi:mouse-move-up","tags":[]},{"name":"mdi:mouse-move-vertical","tags":[]},{"name":"mdi:mouse-off","tags":[]},{"name":"mdi:mouse-variant","tags":[]},{"name":"mdi:mouse-variant-off","tags":[]},{"name":"mdi:move-resize","tags":[]},{"name":"mdi:move-resize-variant","tags":[]},{"name":"mdi:movie-check","tags":["video / movie","slate check","clapperboard check","film check"]},{"name":"mdi:movie-check-outline","tags":["video / movie","slate check outline","clapperboard check outline","film check outline"]},{"name":"mdi:movie-cog","tags":["video / movie","settings","slate cog","clapperboard cog","film cog"]},{"name":"mdi:movie-cog-outline","tags":["video / movie","settings","slate cog outline","clapperboard cog outline","film cog outline"]},{"name":"mdi:movie-edit","tags":["video / movie","edit / modify","slate edit","clapperboard edit","film edit"]},{"name":"mdi:movie-edit-outline","tags":["video / movie","edit / modify","slate edit outline","clapperboard edit outline","film edit outline"]},{"name":"mdi:movie-minus","tags":["video / movie","slate minus","clapperboard minus","film minus"]},{"name":"mdi:movie-minus-outline","tags":["video / movie","slate minus outline","clapperboard minus outline","film minus outline"]},{"name":"mdi:movie-off","tags":["video / movie","slate off","clapperboard off","film off"]},{"name":"mdi:movie-off-outline","tags":["video / movie","slate off outline","clapperboard off outline","film off outline"]},{"name":"mdi:movie-open","tags":["video / movie","slate open","clapperboard open","film open","movie creation"]},{"name":"mdi:movie-open-check","tags":["video / movie","slate open check","clapperboard open check","film open check"]},{"name":"mdi:movie-open-check-outline","tags":["video / movie","slate open check outline","clapperboard open check outline","film open check outline"]},{"name":"mdi:movie-open-cog","tags":["video / movie","settings","slate open cog","clapperboard open cog","film open cog"]},{"name":"mdi:movie-open-cog-outline","tags":["video / movie","settings","slate open cog outline","clapperboard open cog outline","film open cog outline"]},{"name":"mdi:movie-open-edit","tags":["video / movie","edit / modify","slate open edit","clapperboard open edit","film open edit"]},{"name":"mdi:movie-open-edit-outline","tags":["video / movie","edit / modify","slate open edit outline","clapperboard open edit outline","film open edit outline"]},{"name":"mdi:movie-open-minus","tags":["video / movie","slate open minus","clapperboard open minus","film open minus"]},{"name":"mdi:movie-open-minus-outline","tags":["video / movie","slate open minus outline","clapperboard open minus outline","film open minus outline"]},{"name":"mdi:movie-open-off","tags":["video / movie","slate open off","clapperboard open off","film open off"]},{"name":"mdi:movie-open-off-outline","tags":["video / movie","slate open off outline","clapperboard open off outline","film open off outline"]},{"name":"mdi:movie-open-outline","tags":["video / movie","slate open outline","clapperboard open outline","film open outline","movie creation"]},{"name":"mdi:movie-open-play","tags":["video / movie","slate open play","clapperboard open play","film open play"]},{"name":"mdi:movie-open-play-outline","tags":["video / movie","slate open play outline","clapperboard open play outline","film open play outline"]},{"name":"mdi:movie-open-plus","tags":["video / movie","clapperboard open plus","slate open plus","flim open plus"]},{"name":"mdi:movie-open-plus-outline","tags":["video / movie","slate open plus outline","clapperboard open plus outline","film open plus outline"]},{"name":"mdi:movie-open-remove","tags":["video / movie","slate open remove","clapperboard open remove","film open remove"]},{"name":"mdi:movie-open-remove-outline","tags":["video / movie","slate open remove outline","clapperboard open remove outline","film open remove outline"]},{"name":"mdi:movie-open-settings","tags":["video / movie","settings","slate open settings","clapperboard open settings","film open settings"]},{"name":"mdi:movie-open-settings-outline","tags":["video / movie","settings","slate open settings outline","clapperboard open settings outline","film open settings outline"]},{"name":"mdi:movie-open-star","tags":["video / movie","slate open star","clapperboard open star","film open star","movie open favorite"]},{"name":"mdi:movie-open-star-outline","tags":["video / movie","slate open star outline","clapperboard open star outline","film open star outline","movie open favorite outline"]},{"name":"mdi:movie-play","tags":["video / movie","slate play","clapperboard play","film play"]},{"name":"mdi:movie-play-outline","tags":["video / movie","slate play outline","clapperboard play outline","film play outline"]},{"name":"mdi:movie-plus","tags":["video / movie","slate plus","clapperboard plus","film plus"]},{"name":"mdi:movie-plus-outline","tags":["video / movie","slate plus outline","clapperboard plus outline","film plus outline"]},{"name":"mdi:movie-remove","tags":["video / movie","slate remove","clapperboard remove","film remove"]},{"name":"mdi:movie-remove-outline","tags":["video / movie","slate remove outline","clapperboard remove outline","film remove outline"]},{"name":"mdi:movie-roll","tags":["video / movie","film reel"]},{"name":"mdi:movie-search","tags":["video / movie"]},{"name":"mdi:movie-search-outline","tags":["video / movie"]},{"name":"mdi:movie-settings","tags":["video / movie","settings","slate settings","clapperboard settings","film settings"]},{"name":"mdi:movie-settings-outline","tags":["video / movie","settings","slate settings outline","clapperboard settings outline","film settings outline"]},{"name":"mdi:movie-star","tags":["video / movie","slate star","clapperboard star","film star","movie favorite"]},{"name":"mdi:movie-star-outline","tags":["video / movie","slate star outline","clapperboard star outline","film star outline","movie favorite outline"]},{"name":"mdi:mower","tags":["hardware / tools","home automation"]},{"name":"mdi:mower-bag","tags":["hardware / tools","home automation"]},{"name":"mdi:mower-bag-on","tags":["hardware / tools","home automation"]},{"name":"mdi:mower-on","tags":["hardware / tools","home automation"]},{"name":"mdi:muffin","tags":["food / drink"]},{"name":"mdi:multicast","tags":["multiplex","broadcast"]},{"name":"mdi:multimedia","tags":["audio","video / movie","photography","audio","video","image","music","movie","picture"]},{"name":"mdi:multiplication","tags":["math"]},{"name":"mdi:multiplication-box","tags":["math"]},{"name":"mdi:mushroom","tags":["nature","food / drink","agriculture","fungus"]},{"name":"mdi:mushroom-off","tags":["food / drink","nature","agriculture"]},{"name":"mdi:mushroom-off-outline","tags":["food / drink","nature","agriculture"]},{"name":"mdi:mushroom-outline","tags":["nature","food / drink","agriculture","fungus outline"]},{"name":"mdi:music","tags":["audio","music"]},{"name":"mdi:music-accidental-double-flat","tags":["music"]},{"name":"mdi:music-accidental-double-sharp","tags":["music"]},{"name":"mdi:music-accidental-flat","tags":["music"]},{"name":"mdi:music-accidental-natural","tags":["music"]},{"name":"mdi:music-accidental-sharp","tags":["music"]},{"name":"mdi:music-box","tags":["audio","music"]},{"name":"mdi:music-box-multiple-outline","tags":["music","library music outline"]},{"name":"mdi:music-box-outline","tags":["audio","music"]},{"name":"mdi:music-circle","tags":["audio","music","note circle"]},{"name":"mdi:music-circle-outline","tags":["music","audio","note circle outline"]},{"name":"mdi:music-clef-alto","tags":["music","music c clef","music clef tenor","music clef soprano","music clef baritone"]},{"name":"mdi:music-clef-bass","tags":["music","music f clef"]},{"name":"mdi:music-clef-treble","tags":["music","music g clef"]},{"name":"mdi:music-note","tags":["audio","music"]},{"name":"mdi:music-note-bluetooth","tags":["audio","music"]},{"name":"mdi:music-note-bluetooth-off","tags":["audio","music"]},{"name":"mdi:music-note-eighth","tags":["audio","music"]},{"name":"mdi:music-note-eighth-dotted","tags":["music"]},{"name":"mdi:music-note-half","tags":["audio","music"]},{"name":"mdi:music-note-half-dotted","tags":["music"]},{"name":"mdi:music-note-minus","tags":[]},{"name":"mdi:music-note-off","tags":["audio","music"]},{"name":"mdi:music-note-off-outline","tags":["music"]},{"name":"mdi:music-note-outline","tags":["music"]},{"name":"mdi:music-note-plus","tags":["audio","music","music note add"]},{"name":"mdi:music-note-quarter","tags":["audio","music"]},{"name":"mdi:music-note-quarter-dotted","tags":["music"]},{"name":"mdi:music-note-sixteenth","tags":["audio","music"]},{"name":"mdi:music-note-sixteenth-dotted","tags":["music"]},{"name":"mdi:music-note-whole","tags":["audio","music"]},{"name":"mdi:music-note-whole-dotted","tags":["music"]},{"name":"mdi:music-off","tags":["audio","music"]},{"name":"mdi:music-rest-eighth","tags":["music"]},{"name":"mdi:music-rest-half","tags":["music"]},{"name":"mdi:music-rest-quarter","tags":["music"]},{"name":"mdi:music-rest-sixteenth","tags":["music"]},{"name":"mdi:music-rest-whole","tags":["music"]},{"name":"mdi:nail","tags":["hardware / tools"]},{"name":"mdi:nas","tags":["network attached storage"]},{"name":"mdi:nature-outline","tags":["nature"]},{"name":"mdi:nature-people-outline","tags":["account / user","nature"]},{"name":"mdi:necklace","tags":["clothing"]},{"name":"mdi:needle","tags":["medical / hospital","syringe","injection","medicine","shot","drug","immunization","pharmaceutical"]},{"name":"mdi:needle-off","tags":["medical / hospital","syringe off","injection off","medicine off","shot off","drug off","immunization off","pharmaceutical off"]},{"name":"mdi:network","tags":[]},{"name":"mdi:network-off","tags":[]},{"name":"mdi:network-off-outline","tags":[]},{"name":"mdi:network-outline","tags":[]},{"name":"mdi:network-pos","tags":["banking","network point of sale","network cash box"]},{"name":"mdi:network-strength-1","tags":["cellphone / phone"]},{"name":"mdi:network-strength-1-alert","tags":["cellphone / phone","alert / error","network strength 1 warning"]},{"name":"mdi:network-strength-2","tags":["cellphone / phone"]},{"name":"mdi:network-strength-2-alert","tags":["cellphone / phone","alert / error","network strength 2 warning"]},{"name":"mdi:network-strength-3","tags":["cellphone / phone"]},{"name":"mdi:network-strength-3-alert","tags":["cellphone / phone","alert / error","network strength 3 warning"]},{"name":"mdi:network-strength-4","tags":["cellphone / phone"]},{"name":"mdi:network-strength-4-alert","tags":["cellphone / phone","alert / error","network strength 4 warning"]},{"name":"mdi:network-strength-4-cog","tags":["settings","network strength 4 settings","data settings"]},{"name":"mdi:network-strength-off","tags":["cellphone / phone"]},{"name":"mdi:network-strength-off-outline","tags":["cellphone / phone"]},{"name":"mdi:network-strength-outline","tags":["cellphone / phone","network strength 0"]},{"name":"mdi:newspaper-check","tags":[]},{"name":"mdi:newspaper-minus","tags":[]},{"name":"mdi:newspaper-plus","tags":[]},{"name":"mdi:newspaper-remove","tags":[]},{"name":"mdi:newspaper-variant-multiple","tags":[]},{"name":"mdi:newspaper-variant-multiple-outline","tags":[]},{"name":"mdi:nfc-search-variant","tags":[]},{"name":"mdi:nfc-tap","tags":["near field communication tap"]},{"name":"mdi:nfc-variant-off","tags":["home automation","near field communication off"]},{"name":"mdi:ninja","tags":[]},{"name":"mdi:nintendo-game-boy","tags":["gaming / rpg"]},{"name":"mdi:not-equal","tags":[]},{"name":"mdi:not-equal-variant","tags":["math"]},{"name":"mdi:note","tags":["paper","sticky note","post it note"]},{"name":"mdi:note-alert","tags":["alert / error","paper alert","sticky note alert","post it note alert"]},{"name":"mdi:note-alert-outline","tags":["alert / error","paper alert outline","post it note alert outline","sticky note alert outline"]},{"name":"mdi:note-check","tags":["paper check","sticky note check","post it note check"]},{"name":"mdi:note-check-outline","tags":["paper check outline","sticky note check outline","post it note check outline"]},{"name":"mdi:note-edit","tags":["edit / modify","paper edit","sticky note edit","post it note edit"]},{"name":"mdi:note-edit-outline","tags":["edit / modify","paper edit outline","sticky note edit outline","post it note edit outline"]},{"name":"mdi:note-minus","tags":["paper minus","sticky note minus","post it note minus"]},{"name":"mdi:note-minus-outline","tags":["paper minus outline","sticky note minus outline","post it note minus outline"]},{"name":"mdi:note-multiple","tags":["notes","papers","sticky notes","post it notes"]},{"name":"mdi:note-multiple-outline","tags":["notes outline","papers outline","sticky notes outline","post it notes outline"]},{"name":"mdi:note-off","tags":["paper off","sticky note off","post it note off"]},{"name":"mdi:note-off-outline","tags":["paper off outline","sticky note off outline","post it note off outline"]},{"name":"mdi:note-outline","tags":["paper outline","sticky note outline","post it note outline"]},{"name":"mdi:note-plus","tags":["note add","paper plus","paper add","sticky note plus","sticky note add","post it note plus","post it note add"]},{"name":"mdi:note-plus-outline","tags":["note add outline","paper plus outline","paper add outline","sticky note plus outline","sticky note add outline","post it note plus outline","post it note add outline"]},{"name":"mdi:note-remove","tags":["paper remove","sticky note remove","post it note remove"]},{"name":"mdi:note-remove-outline","tags":[]},{"name":"mdi:note-search","tags":["paper search","sticky note search","post it note search"]},{"name":"mdi:note-search-outline","tags":["paper search outline","sticky note search outline","post it note search outline"]},{"name":"mdi:note-text","tags":["paper text","sticky note text","post it note text"]},{"name":"mdi:note-text-outline","tags":["paper text outline","sticky note text outline","post it note text outline"]},{"name":"mdi:notebook","tags":["journal","planner","diary"]},{"name":"mdi:notebook-check","tags":[]},{"name":"mdi:notebook-check-outline","tags":[]},{"name":"mdi:notebook-edit","tags":["edit / modify"]},{"name":"mdi:notebook-edit-outline","tags":["edit / modify"]},{"name":"mdi:notebook-heart","tags":["notebook favorite","notebook love"]},{"name":"mdi:notebook-heart-outline","tags":["notebook favorite outline","notebook love outline"]},{"name":"mdi:notebook-minus","tags":[]},{"name":"mdi:notebook-minus-outline","tags":[]},{"name":"mdi:notebook-multiple","tags":["journal multiple","planner multiple"]},{"name":"mdi:notebook-outline","tags":["journal outline","planner outline"]},{"name":"mdi:notebook-plus","tags":[]},{"name":"mdi:notebook-plus-outline","tags":[]},{"name":"mdi:notebook-remove","tags":[]},{"name":"mdi:notebook-remove-outline","tags":[]},{"name":"mdi:nuke","tags":["nuclear","atomic bomb"]},{"name":"mdi:null","tags":[]},{"name":"mdi:numeric","tags":["alpha / numeric","numbers","1 2 3","one two three","123"]},{"name":"mdi:numeric-0","tags":["alpha / numeric","number 0","numeric zero"]},{"name":"mdi:numeric-0-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-0-circle","tags":["alpha / numeric","numeric zero circle","number 0 circle","number zero circle"]},{"name":"mdi:numeric-0-circle-outline","tags":["alpha / numeric","numeric zero circle outline","number 0 circle outline","number zero circle outline"]},{"name":"mdi:numeric-1","tags":["alpha / numeric","number 1","numeric one"]},{"name":"mdi:numeric-1-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-1-circle","tags":["alpha / numeric","numeric one circle","number 1 circle","number one circle"]},{"name":"mdi:numeric-1-circle-outline","tags":["alpha / numeric","numeric one circle outline","number 1 circle outline","number one circle outline"]},{"name":"mdi:numeric-10","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box-multiple-outline","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box-outline","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-circle","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-circle-outline","tags":["alpha / numeric"]},{"name":"mdi:numeric-2","tags":["alpha / numeric","number 2","numeric two"]},{"name":"mdi:numeric-2-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-2-circle","tags":["alpha / numeric","numeric two circle","number 2 circle","number two circle"]},{"name":"mdi:numeric-2-circle-outline","tags":["alpha / numeric","numeric two circle outline","number 2 circle outline","number two circle outline"]},{"name":"mdi:numeric-3","tags":["alpha / numeric","number 3","numeric three"]},{"name":"mdi:numeric-3-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-3-circle","tags":["alpha / numeric","numeric three circle","number 3 circle","number three circle"]},{"name":"mdi:numeric-3-circle-outline","tags":["alpha / numeric","numeric three circle outline","number 3 circle outline","number three circle outline"]},{"name":"mdi:numeric-4","tags":["alpha / numeric","number 4","numeric four"]},{"name":"mdi:numeric-4-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-4-circle","tags":["alpha / numeric","numeric four circle","number 4 circle","number four circle"]},{"name":"mdi:numeric-4-circle-outline","tags":["alpha / numeric","numeric four circle outline","number 4 circle outline","number four circle outline"]},{"name":"mdi:numeric-5","tags":["alpha / numeric","number 5","numeric five"]},{"name":"mdi:numeric-5-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-5-circle","tags":["alpha / numeric","numeric five circle","number 5 circle","number five circle"]},{"name":"mdi:numeric-5-circle-outline","tags":["alpha / numeric","numeric five circle outline","number 5 circle outline","number five circle outline"]},{"name":"mdi:numeric-6","tags":["alpha / numeric","number 6","numeric six"]},{"name":"mdi:numeric-6-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-6-circle","tags":["alpha / numeric","numeric six circle","number 6 circle","number six circle"]},{"name":"mdi:numeric-6-circle-outline","tags":["alpha / numeric","numeric six circle outline","number 6 circle outline","number six circle outline"]},{"name":"mdi:numeric-7","tags":["alpha / numeric","number 7","numeric seven"]},{"name":"mdi:numeric-7-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-7-circle","tags":["alpha / numeric","numeric seven circle","number 7 circle","number seven circle"]},{"name":"mdi:numeric-7-circle-outline","tags":["alpha / numeric","numeric seven circle outline","number 7 circle outline","number seven circle outline"]},{"name":"mdi:numeric-8","tags":["alpha / numeric","number 8","numeric eight"]},{"name":"mdi:numeric-8-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-8-circle","tags":["alpha / numeric","numeric eight circle","number 8 circle","number eight circle"]},{"name":"mdi:numeric-8-circle-outline","tags":["alpha / numeric","numeric eight circle outline","number 8 circle outline","number eight circle outline"]},{"name":"mdi:numeric-9","tags":["alpha / numeric","number 9","numeric nine"]},{"name":"mdi:numeric-9-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-9-circle","tags":["alpha / numeric","numeric nine circle","number 9 circle","number nine circle"]},{"name":"mdi:numeric-9-circle-outline","tags":["alpha / numeric","numeric nine circle outline","number 9 circle outline","number nine circle outline"]},{"name":"mdi:numeric-9-plus","tags":["alpha / numeric"]},{"name":"mdi:numeric-9-plus-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-9-plus-circle","tags":["alpha / numeric","numeric nine plus circle","number 9 plus circle","number nine plus circle"]},{"name":"mdi:numeric-9-plus-circle-outline","tags":["alpha / numeric","numeric nine plus circle outline","number 9 plus circle outline","number nine plus circle outline"]},{"name":"mdi:numeric-negative-1","tags":["alpha / numeric","decrement","minus one"]},{"name":"mdi:numeric-off","tags":["alpha / numeric","numbers off","123 off","one two three off"]},{"name":"mdi:numeric-positive-1","tags":["alpha / numeric","increment","plus one"]},{"name":"mdi:nut","tags":["hardware / tools"]},{"name":"mdi:nutrition","tags":["food / drink"]},{"name":"mdi:oar","tags":[]},{"name":"mdi:ocarina","tags":["music","gaming / rpg"]},{"name":"mdi:ocr","tags":["optical character recognition"]},{"name":"mdi:octagon","tags":["shape","transportation + road","stop"]},{"name":"mdi:octagon-outline","tags":["shape","transportation + road","stop outline"]},{"name":"mdi:octagram","tags":["shape","starburst"]},{"name":"mdi:octagram-edit","tags":["shape","starburst edit"]},{"name":"mdi:octagram-edit-outline","tags":["shape","starburst edit outline"]},{"name":"mdi:octagram-minus","tags":["shape","starburst plus"]},{"name":"mdi:octagram-minus-outline","tags":["shape","starburst minus outline"]},{"name":"mdi:octagram-outline","tags":["shape","starburst outline"]},{"name":"mdi:octagram-plus","tags":["shape","starburst plus"]},{"name":"mdi:octagram-plus-outline","tags":[]},{"name":"mdi:octahedron","tags":["shape"]},{"name":"mdi:octahedron-off","tags":["shape"]},{"name":"mdi:offer","tags":[]},{"name":"mdi:office-building","tags":["places"]},{"name":"mdi:office-building-cog","tags":["settings","places","office building settings"]},{"name":"mdi:office-building-cog-outline","tags":["settings","places","office building settings outline"]},{"name":"mdi:office-building-marker","tags":["navigation","places","office building location"]},{"name":"mdi:office-building-marker-outline","tags":["navigation","places","office building location outline"]},{"name":"mdi:office-building-minus","tags":[]},{"name":"mdi:office-building-minus-outline","tags":[]},{"name":"mdi:office-building-outline","tags":["places"]},{"name":"mdi:office-building-plus","tags":[]},{"name":"mdi:office-building-plus-outline","tags":[]},{"name":"mdi:office-building-remove","tags":[]},{"name":"mdi:office-building-remove-outline","tags":[]},{"name":"mdi:oil","tags":["automotive"]},{"name":"mdi:oil-lamp","tags":["wish","genie lamp"]},{"name":"mdi:oil-level","tags":["automotive"]},{"name":"mdi:oil-temperature","tags":["automotive"]},{"name":"mdi:om","tags":["religion","religion hindu","hinduism"]},{"name":"mdi:omega","tags":["ohm","electrical resistance"]},{"name":"mdi:one-up","tags":["gaming / rpg","1up","extra life"]},{"name":"mdi:orbit","tags":["science"]},{"name":"mdi:orbit-variant","tags":["photography","camera flip"]},{"name":"mdi:order-alphabetical-ascending","tags":["text / content / format"]},{"name":"mdi:order-alphabetical-descending","tags":["text / content / format"]},{"name":"mdi:order-bool-ascending","tags":["text / content / format"]},{"name":"mdi:order-bool-ascending-variant","tags":["text / content / format","order checkbox ascending"]},{"name":"mdi:order-bool-descending","tags":["text / content / format","order checkbox descending"]},{"name":"mdi:order-bool-descending-variant","tags":["text / content / format"]},{"name":"mdi:order-numeric-ascending","tags":["text / content / format"]},{"name":"mdi:order-numeric-descending","tags":["text / content / format"]},{"name":"mdi:ornament","tags":["holiday"]},{"name":"mdi:ornament-variant","tags":["holiday"]},{"name":"mdi:outdoor-lamp","tags":["home automation","outdoor light"]},{"name":"mdi:owl","tags":["animal","holiday"]},{"name":"mdi:pac-man","tags":["gaming / rpg"]},{"name":"mdi:package","tags":["box"]},{"name":"mdi:package-check","tags":["package delivered"]},{"name":"mdi:package-up","tags":["unarchive","box up","this side up"]},{"name":"mdi:package-variant","tags":["box variant"]},{"name":"mdi:package-variant-closed","tags":["box variant closed"]},{"name":"mdi:package-variant-closed-check","tags":["package variant closed delivered"]},{"name":"mdi:package-variant-closed-minus","tags":["package variant closed subtract","box variant closed minus","box variant closed subtract"]},{"name":"mdi:package-variant-closed-plus","tags":["box variant closed plus","package variant closed add","box variant closed add"]},{"name":"mdi:package-variant-closed-remove","tags":["box variant closed remove"]},{"name":"mdi:package-variant-minus","tags":["box variant minus","package variant subtract","box variant subtract"]},{"name":"mdi:package-variant-plus","tags":["box variant plus","package variant add","box variant add"]},{"name":"mdi:package-variant-remove","tags":["box variant remove"]},{"name":"mdi:page-layout-body","tags":[]},{"name":"mdi:page-layout-footer","tags":[]},{"name":"mdi:page-layout-header","tags":[]},{"name":"mdi:page-layout-header-footer","tags":["page layout marginals"]},{"name":"mdi:page-layout-sidebar-left","tags":[]},{"name":"mdi:page-layout-sidebar-right","tags":[]},{"name":"mdi:page-next","tags":["read more"]},{"name":"mdi:page-next-outline","tags":["read more outline"]},{"name":"mdi:page-previous","tags":[]},{"name":"mdi:page-previous-outline","tags":[]},{"name":"mdi:pail","tags":["bucket"]},{"name":"mdi:pail-minus","tags":["bucket minus"]},{"name":"mdi:pail-minus-outline","tags":["bucket minus outline"]},{"name":"mdi:pail-off","tags":["bucket off"]},{"name":"mdi:pail-off-outline","tags":["bucket off outline"]},{"name":"mdi:pail-outline","tags":["bucket outline"]},{"name":"mdi:pail-plus","tags":["bucket plus"]},{"name":"mdi:pail-plus-outline","tags":["bucket plus outline"]},{"name":"mdi:pail-remove","tags":["bucket remove"]},{"name":"mdi:pail-remove-outline","tags":["bucket remove outline"]},{"name":"mdi:palette-advanced","tags":["color","drawing / art","paint"]},{"name":"mdi:palette-swatch-variant","tags":["drawing / art","color","style","paint","material"]},{"name":"mdi:palm-tree","tags":["nature"]},{"name":"mdi:pan","tags":[]},{"name":"mdi:pan-bottom-left","tags":["pan down left"]},{"name":"mdi:pan-bottom-right","tags":["pan down right"]},{"name":"mdi:pan-down","tags":[]},{"name":"mdi:pan-horizontal","tags":[]},{"name":"mdi:pan-left","tags":[]},{"name":"mdi:pan-right","tags":[]},{"name":"mdi:pan-top-left","tags":["pan up left"]},{"name":"mdi:pan-top-right","tags":["pan up right"]},{"name":"mdi:pan-up","tags":[]},{"name":"mdi:pan-vertical","tags":[]},{"name":"mdi:panda","tags":["animal","emoji panda","emoticon panda"]},{"name":"mdi:paper-cut-vertical","tags":[]},{"name":"mdi:paper-roll","tags":["home automation","printer","lavatory roll","bathroom tissue","toilet paper","kitchen roll","paper towels","receipt roll"]},{"name":"mdi:paper-roll-outline","tags":["home automation","printer","lavatory roll outline","bathroom tissue outline","kitchen roll outline","paper towels outline","toilet paper outline","receipt roll outline"]},{"name":"mdi:paperclip-check","tags":["paperclip tick","attachment check","attachment tick"]},{"name":"mdi:paperclip-lock","tags":["lock","attachment lock"]},{"name":"mdi:paperclip-minus","tags":["paperclip subtract","attachment minus","attachment subtract"]},{"name":"mdi:paperclip-off","tags":["attachment off"]},{"name":"mdi:paperclip-plus","tags":["paperclip add","attachment plus","attachment add"]},{"name":"mdi:paperclip-remove","tags":["attachment remove"]},{"name":"mdi:parachute","tags":["transportation + flying"]},{"name":"mdi:parachute-outline","tags":["transportation + flying"]},{"name":"mdi:passport","tags":[]},{"name":"mdi:passport-biometric","tags":["passport electronic"]},{"name":"mdi:patio-heater","tags":["home automation"]},{"name":"mdi:pause-box","tags":["audio","music"]},{"name":"mdi:pause-box-outline","tags":["audio","music"]},{"name":"mdi:pause-octagon","tags":["stop pause"]},{"name":"mdi:pause-octagon-outline","tags":["stop pause outline"]},{"name":"mdi:paw","tags":["animal","nature","pets"]},{"name":"mdi:paw-off","tags":["animal"]},{"name":"mdi:paw-off-outline","tags":["animal"]},{"name":"mdi:paw-outline","tags":["animal"]},{"name":"mdi:peace","tags":[]},{"name":"mdi:peanut","tags":["food / drink","agriculture","allergen","food allergy"]},{"name":"mdi:peanut-off","tags":["food / drink","agriculture","allergen off","food allergy off"]},{"name":"mdi:peanut-off-outline","tags":["food / drink","agriculture","allergen off outline","food allergy off outline"]},{"name":"mdi:peanut-outline","tags":["food / drink","agriculture","allergen outline","food allergy outline"]},{"name":"mdi:pen","tags":["drawing / art"]},{"name":"mdi:pen-lock","tags":["lock"]},{"name":"mdi:pen-minus","tags":[]},{"name":"mdi:pen-off","tags":[]},{"name":"mdi:pen-plus","tags":["pen add"]},{"name":"mdi:pen-remove","tags":[]},{"name":"mdi:pencil-box","tags":["drawing / art","edit box"]},{"name":"mdi:pencil-box-multiple","tags":["edit / modify","library edit"]},{"name":"mdi:pencil-box-multiple-outline","tags":["edit / modify","library edit outline"]},{"name":"mdi:pencil-box-outline","tags":["drawing / art","edit box outline"]},{"name":"mdi:pencil-circle","tags":["drawing / art","edit circle"]},{"name":"mdi:pencil-circle-outline","tags":["drawing / art","edit circle outline"]},{"name":"mdi:pencil-lock","tags":["lock"]},{"name":"mdi:pencil-lock-outline","tags":["lock"]},{"name":"mdi:pencil-minus","tags":[]},{"name":"mdi:pencil-minus-outline","tags":[]},{"name":"mdi:pencil-off","tags":["edit off"]},{"name":"mdi:pencil-off-outline","tags":["edit off outline"]},{"name":"mdi:pencil-plus","tags":["pencil add"]},{"name":"mdi:pencil-plus-outline","tags":["pencil add outline"]},{"name":"mdi:pencil-remove","tags":[]},{"name":"mdi:pencil-remove-outline","tags":[]},{"name":"mdi:pencil-ruler","tags":["drawing / art","design"]},{"name":"mdi:pencil-ruler-outline","tags":["drawing / art"]},{"name":"mdi:penguin","tags":["animal","emoji penguin","emoticon penguin","linux"]},{"name":"mdi:pentagon","tags":["shape"]},{"name":"mdi:pentagon-outline","tags":["shape"]},{"name":"mdi:pentagram","tags":[]},{"name":"mdi:percent","tags":["math","shopping","discount","sale"]},{"name":"mdi:percent-box","tags":["math","shopping","discount box","sale box"]},{"name":"mdi:percent-box-outline","tags":["math","shopping","discount box outline","sale box outline"]},{"name":"mdi:percent-circle","tags":["math","shopping","discount circle","sale circle"]},{"name":"mdi:percent-circle-outline","tags":["math","shopping","discount circle outline","sale circle outline"]},{"name":"mdi:percent-outline","tags":["math","shopping","discount outline","sale outline"]},{"name":"mdi:periodic-table","tags":["science"]},{"name":"mdi:perspective-less","tags":["math","perspective decrease"]},{"name":"mdi:perspective-more","tags":["math","perspective increase"]},{"name":"mdi:ph","tags":["science","home automation","acid","base","potential of hydrogen","power of hydrogen"]},{"name":"mdi:phone-alert","tags":["cellphone / phone","alert / error"]},{"name":"mdi:phone-alert-outline","tags":["cellphone / phone","alert / error"]},{"name":"mdi:phone-cancel","tags":["cellphone / phone","phone block"]},{"name":"mdi:phone-cancel-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-check","tags":["cellphone / phone"]},{"name":"mdi:phone-check-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-classic","tags":["cellphone / phone"]},{"name":"mdi:phone-classic-off","tags":[]},{"name":"mdi:phone-clock","tags":["cellphone / phone","date / time","phone schedule","phone time"]},{"name":"mdi:phone-dial","tags":["cellphone / phone","phone keypad"]},{"name":"mdi:phone-dial-outline","tags":["cellphone / phone","phone keypad outline"]},{"name":"mdi:phone-incoming","tags":["cellphone / phone","telephone incoming"]},{"name":"mdi:phone-incoming-outgoing","tags":["cellphone / phone"]},{"name":"mdi:phone-incoming-outgoing-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-log","tags":["cellphone / phone"]},{"name":"mdi:phone-log-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-off","tags":["cellphone / phone"]},{"name":"mdi:phone-outgoing","tags":["cellphone / phone"]},{"name":"mdi:phone-outgoing-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-refresh","tags":["cellphone / phone","phone redial"]},{"name":"mdi:phone-refresh-outline","tags":["cellphone / phone","phone redial outline"]},{"name":"mdi:phone-remove","tags":["cellphone / phone"]},{"name":"mdi:phone-remove-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-return","tags":["cellphone / phone"]},{"name":"mdi:phone-return-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-rotate-landscape","tags":["cellphone / phone"]},{"name":"mdi:phone-rotate-portrait","tags":["cellphone / phone"]},{"name":"mdi:phone-sync","tags":["cellphone / phone","phone redial"]},{"name":"mdi:phone-sync-outline","tags":["cellphone / phone","phone redial outline"]},{"name":"mdi:phone-voip","tags":["cellphone / phone"]},{"name":"mdi:pi","tags":["math"]},{"name":"mdi:pi-box","tags":["math"]},{"name":"mdi:pickaxe","tags":[]},{"name":"mdi:pier","tags":["places","transportation + water"]},{"name":"mdi:pier-crane","tags":["transportation + water","places"]},{"name":"mdi:pig","tags":["animal","agriculture","emoji pig","emoticon pig"]},{"name":"mdi:pill","tags":["medical / hospital","medicine","capsule","drug","pharmaceutical"]},{"name":"mdi:pill-multiple","tags":["medical / hospital","medicine","medication","drugs"]},{"name":"mdi:pill-off","tags":["medical / hospital","medicine off","capsule off","drug off","pharmaceutical off"]},{"name":"mdi:pillar","tags":["historic","column"]},{"name":"mdi:pin-off","tags":["keep off"]},{"name":"mdi:pin-off-outline","tags":["keep off outline"]},{"name":"mdi:pine-tree","tags":["holiday","nature","places","agriculture","forest","plant"]},{"name":"mdi:pine-tree-box","tags":["holiday","nature","agriculture","plant"]},{"name":"mdi:pine-tree-fire","tags":["nature","agriculture","wildfire","controlled burn"]},{"name":"mdi:pine-tree-variant","tags":["nature","places","agriculture"]},{"name":"mdi:pine-tree-variant-outline","tags":["places","nature","agriculture"]},{"name":"mdi:pipe","tags":["home automation"]},{"name":"mdi:pipe-disconnected","tags":["home automation"]},{"name":"mdi:pipe-leak","tags":["home automation"]},{"name":"mdi:pipe-valve","tags":["home automation"]},{"name":"mdi:pirate","tags":[]},{"name":"mdi:pistol","tags":["gun"]},{"name":"mdi:piston","tags":["automotive"]},{"name":"mdi:pitchfork","tags":["hardware / tools"]},{"name":"mdi:plane-car","tags":["transportation + flying","transportation + road","airport shuttle","airport taxi","airplane car"]},{"name":"mdi:plane-train","tags":["transportation + flying","transportation + other","airport shuttle","airplane train"]},{"name":"mdi:play-box","tags":[]},{"name":"mdi:play-box-edit-outline","tags":[]},{"name":"mdi:play-box-lock","tags":["video / movie","lock"]},{"name":"mdi:play-box-lock-open","tags":["video / movie","lock"]},{"name":"mdi:play-box-lock-open-outline","tags":["video / movie","lock"]},{"name":"mdi:play-box-lock-outline","tags":["video / movie","lock"]},{"name":"mdi:play-network","tags":["media network"]},{"name":"mdi:play-network-outline","tags":["media network outline"]},{"name":"mdi:play-outline","tags":[]},{"name":"mdi:play-pause","tags":["home automation"]},{"name":"mdi:playlist-edit","tags":["edit / modify"]},{"name":"mdi:playlist-minus","tags":[]},{"name":"mdi:pliers","tags":["hardware / tools"]},{"name":"mdi:plus-box-multiple-outline","tags":[]},{"name":"mdi:plus-circle-multiple","tags":["coins plus"]},{"name":"mdi:plus-lock","tags":["lock","plus secure"]},{"name":"mdi:plus-lock-open","tags":["lock"]},{"name":"mdi:plus-minus","tags":["math"]},{"name":"mdi:plus-minus-box","tags":["math"]},{"name":"mdi:plus-minus-variant","tags":["math"]},{"name":"mdi:plus-network","tags":["add network"]},{"name":"mdi:plus-network-outline","tags":["add network outline"]},{"name":"mdi:plus-outline","tags":[]},{"name":"mdi:plus-thick","tags":["math","add thick","add bold","plus bold"]},{"name":"mdi:podium","tags":["sport"]},{"name":"mdi:podium-bronze","tags":["sport","podium third"]},{"name":"mdi:podium-gold","tags":["sport","podium first"]},{"name":"mdi:podium-silver","tags":["sport","podium second"]},{"name":"mdi:point-of-sale","tags":[]},{"name":"mdi:pokeball","tags":["gaming / rpg"]},{"name":"mdi:poker-chip","tags":["gaming / rpg","casino chip","gambling chip"]},{"name":"mdi:polaroid","tags":[]},{"name":"mdi:police-badge","tags":[]},{"name":"mdi:police-badge-outline","tags":[]},{"name":"mdi:police-station","tags":["places"]},{"name":"mdi:poll","tags":["bar chart","report","performance","analytics"]},{"name":"mdi:pool","tags":["places","home automation","swimming pool"]},{"name":"mdi:pool-thermometer","tags":["home automation","pool temperature"]},{"name":"mdi:popcorn","tags":["food / drink"]},{"name":"mdi:post-lamp","tags":["home automation","post light"]},{"name":"mdi:post-outline","tags":["blog outline"]},{"name":"mdi:postage-stamp","tags":[]},{"name":"mdi:pot","tags":["food / drink","holiday"]},{"name":"mdi:pot-mix","tags":["food / drink","holiday"]},{"name":"mdi:pot-mix-outline","tags":["food / drink","holiday"]},{"name":"mdi:pot-outline","tags":["food / drink","holiday"]},{"name":"mdi:pot-steam","tags":["food / drink","holiday"]},{"name":"mdi:pot-steam-outline","tags":["food / drink","holiday"]},{"name":"mdi:pound","tags":["hashtag"]},{"name":"mdi:pound-box","tags":["hashtag box"]},{"name":"mdi:pound-box-outline","tags":["hashtag box outline"]},{"name":"mdi:power-cycle","tags":[]},{"name":"mdi:power-off","tags":[]},{"name":"mdi:power-on","tags":[]},{"name":"mdi:power-plug-battery","tags":["home automation","battery","battery backup"]},{"name":"mdi:power-plug-battery-outline","tags":["home automation","battery","battery backup outline"]},{"name":"mdi:power-plug-off","tags":["home automation","power off"]},{"name":"mdi:power-plug-off-outline","tags":["home automation"]},{"name":"mdi:power-plug-outline","tags":["home automation"]},{"name":"mdi:power-sleep","tags":[]},{"name":"mdi:power-socket","tags":["home automation","plug socket"]},{"name":"mdi:power-socket-au","tags":["home automation","plug socket au","power socket type i","power socket cn","power socket ar","power socket nz","power socket pg","power socket australia","power socket china","power socket argentina","power socket new zealand","power socket papua new guinea"]},{"name":"mdi:power-socket-ch","tags":["home automation","plug socket ch","power socket type j","plug socket type j","power socket switzerland","plug socket switzerland"]},{"name":"mdi:power-socket-de","tags":["home automation"]},{"name":"mdi:power-socket-eu","tags":["home automation","plug socket eu","power socket europe"]},{"name":"mdi:power-socket-fr","tags":["home automation"]},{"name":"mdi:power-socket-it","tags":[]},{"name":"mdi:power-socket-jp","tags":["home automation"]},{"name":"mdi:power-socket-uk","tags":["home automation","plug socket uk","power socket type g","power socket ie","power socket hk","power socket my","power socket cy","power socket mt","power socket sg","power socket united kingdom","power socket ireland","power socket hong kong","power socket malaysia","power socket cyprus","power socket malta","power socket singapore"]},{"name":"mdi:power-socket-us","tags":["home automation","plug socket us","power socket ca","power socket mx","power socket type b","power socket united states","power socket japan","power socket canada","power socket mexico"]},{"name":"mdi:power-standby","tags":[]},{"name":"mdi:powershell","tags":[]},{"name":"mdi:prescription","tags":["medical / hospital"]},{"name":"mdi:presentation","tags":[]},{"name":"mdi:presentation-play","tags":[]},{"name":"mdi:pretzel","tags":["food / drink"]},{"name":"mdi:printer-3d","tags":["printer","home automation"]},{"name":"mdi:printer-3d-nozzle","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-alert","tags":["alert / error","printer"]},{"name":"mdi:printer-3d-nozzle-alert-outline","tags":["alert / error","printer"]},{"name":"mdi:printer-3d-nozzle-heat","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-heat-outline","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-off","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-off-outline","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-outline","tags":["printer"]},{"name":"mdi:printer-3d-off","tags":["printer"]},{"name":"mdi:printer-alert","tags":["printer","home automation","alert / error","printer warning","paper jam"]},{"name":"mdi:printer-check","tags":["printer"]},{"name":"mdi:printer-eye","tags":["printer","printer preview","printer view"]},{"name":"mdi:printer-off","tags":["printer"]},{"name":"mdi:printer-pos","tags":["printer","printer point of sale","printer receipt"]},{"name":"mdi:printer-pos-alert","tags":["alert / error","printer","printer point of sale alert","printer receipt alert"]},{"name":"mdi:printer-pos-alert-outline","tags":["printer","alert / error","printer point of sale alert outline","printer receipt alert outline"]},{"name":"mdi:printer-pos-cancel","tags":["printer","printer point of sale cancel","printer receipt cancel"]},{"name":"mdi:printer-pos-cancel-outline","tags":["printer","printer point of sale cancel outline","printer receipt cancel outline"]},{"name":"mdi:printer-pos-check","tags":["printer","printer point of sale check","printer receipt check"]},{"name":"mdi:printer-pos-check-outline","tags":["printer","printer point of sale check outline","printer receipt check outline"]},{"name":"mdi:printer-pos-cog","tags":["printer","printer point of sale cog","printer receipt cog"]},{"name":"mdi:printer-pos-cog-outline","tags":["printer","printer point of sale cog outline","printer receipt cog outline"]},{"name":"mdi:printer-pos-edit","tags":["printer","printer point of sale edit","printer receipt edit"]},{"name":"mdi:printer-pos-edit-outline","tags":["printer","printer point of sale edit outline","printer receipt edit outline"]},{"name":"mdi:printer-pos-minus","tags":["printer","printer point of sale minus","printer receipt minus"]},{"name":"mdi:printer-pos-minus-outline","tags":["printer","printer point of sale minus outline","printer receipt minus outline"]},{"name":"mdi:printer-pos-network","tags":["printer","printer point of sale network","printer receipt network"]},{"name":"mdi:printer-pos-network-outline","tags":["printer","printer point of sale network outline","printer receipt network outline"]},{"name":"mdi:printer-pos-off","tags":["printer","printer point of sale off","printer receipt off"]},{"name":"mdi:printer-pos-off-outline","tags":["printer","printer point of sale off outline","printer receipt off outline"]},{"name":"mdi:printer-pos-outline","tags":["printer","printer point of sale outline","printer receipt outline"]},{"name":"mdi:printer-pos-pause","tags":["printer","printer point of sale pause","printer receipt pause"]},{"name":"mdi:printer-pos-pause-outline","tags":["printer","printer point of sale pause outline","printer receipt pause outline"]},{"name":"mdi:printer-pos-play","tags":["printer","printer point of sale play","printer receipt play"]},{"name":"mdi:printer-pos-play-outline","tags":["printer","printer point of sale play outline","printer receipt play outline"]},{"name":"mdi:printer-pos-plus","tags":["printer","printer point of sale plus","printer receipt plus"]},{"name":"mdi:printer-pos-plus-outline","tags":["printer","printer point of sale plus outline","printer receipt plus outline"]},{"name":"mdi:printer-pos-refresh","tags":["printer","printer point of sale refresh","printer receipt refresh"]},{"name":"mdi:printer-pos-refresh-outline","tags":["printer","printer point of sale refresh outline","printer receipt refresh outline"]},{"name":"mdi:printer-pos-remove","tags":["printer","printer point of sale remove","printer receipt remove"]},{"name":"mdi:printer-pos-remove-outline","tags":["printer","printer point of sale remove outline","printer receipt remove outline"]},{"name":"mdi:printer-pos-star","tags":["printer","printer point of sale star","printer receipt star","printer favorite","printer primary"]},{"name":"mdi:printer-pos-star-outline","tags":["printer","printer point of sale star outline","printer receipt star outline"]},{"name":"mdi:printer-pos-stop","tags":["printer","printer point of sale stop","printer receipt stop"]},{"name":"mdi:printer-pos-stop-outline","tags":["printer","printer point of sale stop outline","printer receipt stop outline"]},{"name":"mdi:printer-pos-sync","tags":["printer","printer point of sale sync","printer receipt sync"]},{"name":"mdi:printer-pos-sync-outline","tags":["printer","printer point of sale sync outline","printer receipt sync outline"]},{"name":"mdi:printer-pos-wrench","tags":["printer","printer point of sale wrench","printer receipt wrench"]},{"name":"mdi:printer-pos-wrench-outline","tags":["printer","printer point of sale wrench outline","printer receipt wrench outline"]},{"name":"mdi:printer-search","tags":["printer","printer preview","printer magnify"]},{"name":"mdi:printer-settings","tags":["settings","printer"]},{"name":"mdi:printer-wireless","tags":["printer"]},{"name":"mdi:professional-hexagon","tags":[]},{"name":"mdi:progress-alert","tags":["alert / error","progress warning"]},{"name":"mdi:progress-check","tags":["progress tick"]},{"name":"mdi:progress-clock","tags":["date / time"]},{"name":"mdi:progress-close","tags":[]},{"name":"mdi:progress-download","tags":[]},{"name":"mdi:progress-helper","tags":[]},{"name":"mdi:progress-pencil","tags":[]},{"name":"mdi:progress-question","tags":[]},{"name":"mdi:progress-star","tags":[]},{"name":"mdi:progress-star-four-points","tags":["progress auto"]},{"name":"mdi:progress-upload","tags":[]},{"name":"mdi:progress-wrench","tags":["hardware / tools","progress spanner"]},{"name":"mdi:projector","tags":["device / tech","home automation"]},{"name":"mdi:projector-off","tags":["device / tech","home automation"]},{"name":"mdi:projector-screen","tags":["device / tech","home automation"]},{"name":"mdi:projector-screen-off","tags":["home automation"]},{"name":"mdi:projector-screen-off-outline","tags":["home automation"]},{"name":"mdi:projector-screen-outline","tags":["home automation"]},{"name":"mdi:projector-screen-variant","tags":["home automation"]},{"name":"mdi:projector-screen-variant-off","tags":["home automation"]},{"name":"mdi:projector-screen-variant-off-outline","tags":["home automation"]},{"name":"mdi:projector-screen-variant-outline","tags":["home automation"]},{"name":"mdi:protocol","tags":[]},{"name":"mdi:publish-off","tags":["arrow","publish disabled"]},{"name":"mdi:pulse","tags":["medical / hospital","vitals"]},{"name":"mdi:pump","tags":[]},{"name":"mdi:pump-off","tags":[]},{"name":"mdi:pumpkin","tags":["holiday"]},{"name":"mdi:purse","tags":[]},{"name":"mdi:purse-outline","tags":[]},{"name":"mdi:puzzle-check","tags":["gaming / rpg"]},{"name":"mdi:puzzle-check-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-edit","tags":["gaming / rpg","edit / modify"]},{"name":"mdi:puzzle-edit-outline","tags":["gaming / rpg","edit / modify"]},{"name":"mdi:puzzle-heart","tags":["gaming / rpg"]},{"name":"mdi:puzzle-heart-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-minus","tags":["gaming / rpg"]},{"name":"mdi:puzzle-minus-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-plus","tags":["gaming / rpg"]},{"name":"mdi:puzzle-plus-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-remove","tags":["gaming / rpg"]},{"name":"mdi:puzzle-remove-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-star","tags":["gaming / rpg","puzzle favorite"]},{"name":"mdi:puzzle-star-outline","tags":["gaming / rpg","puzzle favorite outline"]},{"name":"mdi:pyramid","tags":["shape"]},{"name":"mdi:pyramid-off","tags":["shape"]},{"name":"mdi:qrcode","tags":[]},{"name":"mdi:qrcode-edit","tags":["edit / modify"]},{"name":"mdi:qrcode-minus","tags":[]},{"name":"mdi:qrcode-plus","tags":[]},{"name":"mdi:qrcode-remove","tags":[]},{"name":"mdi:qrcode-scan","tags":[]},{"name":"mdi:quadcopter","tags":["drone"]},{"name":"mdi:quality-low","tags":["low quality","lq"]},{"name":"mdi:quality-medium","tags":["medium quality","mq"]},{"name":"mdi:quora","tags":[]},{"name":"mdi:rabbit","tags":["animal","nature","bunny","hare"]},{"name":"mdi:radiator","tags":["home automation","heater"]},{"name":"mdi:radiator-disabled","tags":["home automation","heater disabled"]},{"name":"mdi:radiator-off","tags":["home automation","heater off"]},{"name":"mdi:radio-am","tags":["audio"]},{"name":"mdi:radio-fm","tags":["audio"]},{"name":"mdi:radio-handheld","tags":["device / tech"]},{"name":"mdi:radio-off","tags":[]},{"name":"mdi:radio-tower","tags":[]},{"name":"mdi:radioactive","tags":["science","radiation"]},{"name":"mdi:radioactive-circle","tags":["science","radiation circle"]},{"name":"mdi:radioactive-circle-outline","tags":["science","radiation circle outline"]},{"name":"mdi:radioactive-off","tags":["science","radiation off"]},{"name":"mdi:radiobox-indeterminate-variant","tags":["form","radio button indeterminate","radiobox intermediate variant"]},{"name":"mdi:radiology-box","tags":["medical / hospital","x ray box"]},{"name":"mdi:radiology-box-outline","tags":["medical / hospital","x ray box outline"]},{"name":"mdi:radius","tags":["math","circle radius","sphere radius"]},{"name":"mdi:radius-outline","tags":["math","circle radius outline","sphere radius outline"]},{"name":"mdi:railroad-light","tags":["transportation + other","railroad crossing light","train crossing light","level crossing signals"]},{"name":"mdi:rake","tags":["hardware / tools"]},{"name":"mdi:raspberry-pi","tags":["raspberrypi"]},{"name":"mdi:ray-end","tags":[]},{"name":"mdi:ray-end-arrow","tags":[]},{"name":"mdi:ray-start","tags":[]},{"name":"mdi:ray-start-arrow","tags":[]},{"name":"mdi:ray-start-end","tags":[]},{"name":"mdi:ray-vertex","tags":[]},{"name":"mdi:razor-double-edge","tags":["health / beauty","hardware / tools"]},{"name":"mdi:razor-single-edge","tags":["hardware / tools"]},{"name":"mdi:read","tags":[]},{"name":"mdi:receipt","tags":["cloth","fabric","swatch"]},{"name":"mdi:receipt-clock","tags":["receipt pending"]},{"name":"mdi:receipt-clock-outline","tags":["receipt pending"]},{"name":"mdi:receipt-outline","tags":["cloth outline","fabric outline","swatch outline"]},{"name":"mdi:receipt-send","tags":[]},{"name":"mdi:receipt-send-outline","tags":[]},{"name":"mdi:receipt-text-arrow-left","tags":["invoice arrow left","invoice receive"]},{"name":"mdi:receipt-text-arrow-left-outline","tags":["invoice arrow left outline","invoice receive outline"]},{"name":"mdi:receipt-text-arrow-right","tags":["invoice arrow right","invoice send"]},{"name":"mdi:receipt-text-arrow-right-outline","tags":["invoice arrow right outline","invoice send outline"]},{"name":"mdi:receipt-text-check","tags":["invoice check"]},{"name":"mdi:receipt-text-check-outline","tags":["invoice check outline"]},{"name":"mdi:receipt-text-clock","tags":["invoice clock","invoice schedule","receipt text pending"]},{"name":"mdi:receipt-text-clock-outline","tags":["invoice clock outline","invoice schedule outline","receipt text pending"]},{"name":"mdi:receipt-text-edit","tags":["invoice edit"]},{"name":"mdi:receipt-text-edit-outline","tags":["invoice edit outline"]},{"name":"mdi:receipt-text-minus","tags":["invoice minus"]},{"name":"mdi:receipt-text-minus-outline","tags":["invoice minus outline"]},{"name":"mdi:receipt-text-plus","tags":["invoice plus","invoice add","receipt text add"]},{"name":"mdi:receipt-text-plus-outline","tags":["invoice plus","invoice add","receipt text add"]},{"name":"mdi:receipt-text-remove","tags":["invoice remove"]},{"name":"mdi:receipt-text-remove-outline","tags":["invoice remove outline"]},{"name":"mdi:receipt-text-send","tags":[]},{"name":"mdi:receipt-text-send-outline","tags":[]},{"name":"mdi:record","tags":["home automation","fiber manual record"]},{"name":"mdi:record-circle","tags":[]},{"name":"mdi:record-circle-outline","tags":[]},{"name":"mdi:record-player","tags":["home automation"]},{"name":"mdi:record-rec","tags":["home automation"]},{"name":"mdi:rectangle","tags":["shape"]},{"name":"mdi:rectangle-outline","tags":["shape"]},{"name":"mdi:recycle","tags":[]},{"name":"mdi:recycle-variant","tags":[]},{"name":"mdi:redo-variant","tags":["arrow"]},{"name":"mdi:reflect-horizontal","tags":[]},{"name":"mdi:reflect-vertical","tags":[]},{"name":"mdi:refresh-auto","tags":["automotive","auto start","automatic start","auto stop","automatic stop","automatic","refresh automatic"]},{"name":"mdi:refresh-circle","tags":[]},{"name":"mdi:regex","tags":["regular expression"]},{"name":"mdi:registered-trademark","tags":[]},{"name":"mdi:reiterate","tags":["arrow"]},{"name":"mdi:relation-many-to-many","tags":["database"]},{"name":"mdi:relation-many-to-one","tags":["database"]},{"name":"mdi:relation-many-to-one-or-many","tags":["database"]},{"name":"mdi:relation-many-to-only-one","tags":["database"]},{"name":"mdi:relation-many-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-many-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-one-or-many-to-many","tags":["database"]},{"name":"mdi:relation-one-or-many-to-one","tags":["database"]},{"name":"mdi:relation-one-or-many-to-one-or-many","tags":["database"]},{"name":"mdi:relation-one-or-many-to-only-one","tags":["database"]},{"name":"mdi:relation-one-or-many-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-one-or-many-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-one-to-many","tags":["database"]},{"name":"mdi:relation-one-to-one","tags":["database"]},{"name":"mdi:relation-one-to-one-or-many","tags":["database"]},{"name":"mdi:relation-one-to-only-one","tags":["database"]},{"name":"mdi:relation-one-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-one-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-only-one-to-many","tags":["database"]},{"name":"mdi:relation-only-one-to-one","tags":["database"]},{"name":"mdi:relation-only-one-to-one-or-many","tags":["database"]},{"name":"mdi:relation-only-one-to-only-one","tags":["database"]},{"name":"mdi:relation-only-one-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-only-one-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-many","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-one","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-one-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-only-one","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-many","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-one","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-one-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-only-one","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-zero-or-one","tags":["database"]},{"name":"mdi:reload","tags":["automotive","arrow","car engine start","loop","rotate clockwise"]},{"name":"mdi:reload-alert","tags":["alert / error"]},{"name":"mdi:remote-desktop","tags":[]},{"name":"mdi:remote-off","tags":[]},{"name":"mdi:remote-tv","tags":["device / tech"]},{"name":"mdi:remote-tv-off","tags":["device / tech"]},{"name":"mdi:rename-box","tags":[]},{"name":"mdi:rename-box-outline","tags":[]},{"name":"mdi:reorder-vertical","tags":[]},{"name":"mdi:repeat-off","tags":[]},{"name":"mdi:repeat-variant","tags":["arrow","twitter retweet","repost"]},{"name":"mdi:reply-all-outline","tags":["arrow"]},{"name":"mdi:reply-circle","tags":["arrow"]},{"name":"mdi:reply-outline","tags":["arrow"]},{"name":"mdi:reproduction","tags":["medical / hospital"]},{"name":"mdi:resistor","tags":[]},{"name":"mdi:resistor-nodes","tags":[]},{"name":"mdi:resize","tags":[]},{"name":"mdi:resize-bottom-right","tags":["drag"]},{"name":"mdi:responsive","tags":[]},{"name":"mdi:restart-alert","tags":["alert / error"]},{"name":"mdi:restart-off","tags":[]},{"name":"mdi:restore-alert","tags":["alert / error"]},{"name":"mdi:rewind-10","tags":[]},{"name":"mdi:rewind-15","tags":[]},{"name":"mdi:rewind-30","tags":[]},{"name":"mdi:rewind-45","tags":[]},{"name":"mdi:rewind-5","tags":[]},{"name":"mdi:rewind-60","tags":[]},{"name":"mdi:rhombus","tags":["shape","diamond"]},{"name":"mdi:rhombus-medium","tags":["shape"]},{"name":"mdi:rhombus-medium-outline","tags":["shape"]},{"name":"mdi:rhombus-outline","tags":["shape","diamond outline"]},{"name":"mdi:rhombus-split","tags":["shape","collection"]},{"name":"mdi:rhombus-split-outline","tags":["shape"]},{"name":"mdi:rice","tags":["food / drink"]},{"name":"mdi:rickshaw","tags":["transportation + road","transportation + other"]},{"name":"mdi:rickshaw-electric","tags":["transportation + road","transportation + other"]},{"name":"mdi:ring","tags":[]},{"name":"mdi:rivet","tags":["hardware / tools"]},{"name":"mdi:road","tags":["transportation + road"]},{"name":"mdi:road-variant","tags":["transportation + road"]},{"name":"mdi:robber","tags":[]},{"name":"mdi:robot","tags":["home automation","emoji robot","emoticon robot"]},{"name":"mdi:robot-angry","tags":["emoji robot angry","emoticon robot angry"]},{"name":"mdi:robot-angry-outline","tags":["emoji robot angry outline","emoticon robot angry outline"]},{"name":"mdi:robot-confused","tags":["emoji robot confused","emoticon robot confused"]},{"name":"mdi:robot-confused-outline","tags":["emoji robot confused outline","emoticon robot confused outline"]},{"name":"mdi:robot-dead","tags":["emoji robot dead","emoticon robot dead"]},{"name":"mdi:robot-dead-outline","tags":["emoji robot dead outline","emoticon robot dead outline"]},{"name":"mdi:robot-excited","tags":["emoticon robot excited","emoji robot excited"]},{"name":"mdi:robot-excited-outline","tags":["emoji robot excited outline","emoticon robot excited outline"]},{"name":"mdi:robot-happy","tags":["emoji robot happy","emoticon robot happy"]},{"name":"mdi:robot-happy-outline","tags":["emoji robot happy outline","emoticon robot happy outline"]},{"name":"mdi:robot-industrial","tags":["autonomous","assembly"]},{"name":"mdi:robot-industrial-outline","tags":[]},{"name":"mdi:robot-love","tags":["emoji robot love","emoticon robot love"]},{"name":"mdi:robot-love-outline","tags":[]},{"name":"mdi:robot-mower","tags":["home automation","lawn mower"]},{"name":"mdi:robot-mower-outline","tags":["home automation","lawn mower outline"]},{"name":"mdi:robot-off","tags":["emoji robot off","emoticon robot off"]},{"name":"mdi:robot-off-outline","tags":[]},{"name":"mdi:robot-outline","tags":["emoji robot outline","emoticon robot outline"]},{"name":"mdi:robot-vacuum","tags":["device / tech","home automation","roomba"]},{"name":"mdi:robot-vacuum-alert","tags":["alert / error","home automation","robot vacuum error"]},{"name":"mdi:robot-vacuum-off","tags":["home automation"]},{"name":"mdi:robot-vacuum-variant","tags":["home automation","neato"]},{"name":"mdi:robot-vacuum-variant-alert","tags":["alert / error","home automation","robot vacuum variant error"]},{"name":"mdi:robot-vacuum-variant-off","tags":["home automation"]},{"name":"mdi:rocket-launch","tags":["science","transportation + flying"]},{"name":"mdi:rocket-launch-outline","tags":["science","transportation + flying"]},{"name":"mdi:roller-skate","tags":["sport"]},{"name":"mdi:roller-skate-off","tags":["sport"]},{"name":"mdi:rollerblade","tags":["sport"]},{"name":"mdi:rollerblade-off","tags":["sport"]},{"name":"mdi:rolodex","tags":[]},{"name":"mdi:rolodex-outline","tags":[]},{"name":"mdi:roman-numeral-1","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-10","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-2","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-3","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-4","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-5","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-6","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-7","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-8","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-9","tags":["alpha / numeric"]},{"name":"mdi:rotate-3d-variant","tags":["3d rotation"]},{"name":"mdi:rotate-left-variant","tags":[]},{"name":"mdi:rotate-orbit","tags":["gyro","accelerometer"]},{"name":"mdi:rotate-right-variant","tags":[]},{"name":"mdi:router","tags":[]},{"name":"mdi:router-network","tags":[]},{"name":"mdi:router-wireless-off","tags":[]},{"name":"mdi:routes","tags":["sign routes"]},{"name":"mdi:routes-clock","tags":["date / time"]},{"name":"mdi:rss-box","tags":["rss feed box"]},{"name":"mdi:rss-off","tags":[]},{"name":"mdi:rug","tags":["home automation","carpet"]},{"name":"mdi:ruler","tags":["hardware / tools","drawing / art"]},{"name":"mdi:ruler-square","tags":["hardware / tools","drawing / art","square","carpentry","architecture"]},{"name":"mdi:ruler-square-compass","tags":["hardware / tools","mason","masonic","freemasonry"]},{"name":"mdi:run-fast","tags":["home automation","sport","people / family","velocity","human run fast"]},{"name":"mdi:rv-truck","tags":["transportation + road","recreational vehicle","campervan"]},{"name":"mdi:sack","tags":["gaming / rpg"]},{"name":"mdi:sack-outline","tags":[]},{"name":"mdi:sack-percent","tags":[]},{"name":"mdi:safe","tags":["banking"]},{"name":"mdi:safe-square","tags":[]},{"name":"mdi:safe-square-outline","tags":[]},{"name":"mdi:safety-goggles","tags":["science","safety glasses"]},{"name":"mdi:sail-boat-sink","tags":["transportation + water","sail boat crash","sail boat wreck"]},{"name":"mdi:sale","tags":["shopping","discount"]},{"name":"mdi:sale-outline","tags":["shopping","discount outline"]},{"name":"mdi:satellite-uplink","tags":[]},{"name":"mdi:satellite-variant","tags":[]},{"name":"mdi:sausage","tags":["food / drink"]},{"name":"mdi:sausage-off","tags":["food / drink"]},{"name":"mdi:saw-blade","tags":["hardware / tools"]},{"name":"mdi:sawtooth-wave","tags":["audio"]},{"name":"mdi:scale","tags":["food / drink","science"]},{"name":"mdi:scale-balance","tags":["science","justice","legal"]},{"name":"mdi:scale-bathroom","tags":["home automation","medical / hospital"]},{"name":"mdi:scale-off","tags":["science"]},{"name":"mdi:scale-unbalanced","tags":[]},{"name":"mdi:scan-helper","tags":[]},{"name":"mdi:scanner-off","tags":["device / tech"]},{"name":"mdi:scent","tags":["aroma","fragrance","smell","odor"]},{"name":"mdi:scent-off","tags":["aroma off","smell off","fragrance off","odor off"]},{"name":"mdi:scissors-cutting","tags":[]},{"name":"mdi:scoreboard","tags":["sport"]},{"name":"mdi:scoreboard-outline","tags":["sport"]},{"name":"mdi:screw-flat-top","tags":["hardware / tools"]},{"name":"mdi:screw-lag","tags":["hardware / tools"]},{"name":"mdi:screw-machine-flat-top","tags":["hardware / tools"]},{"name":"mdi:screw-machine-round-top","tags":["hardware / tools"]},{"name":"mdi:screw-round-top","tags":["hardware / tools"]},{"name":"mdi:screwdriver","tags":["hardware / tools"]},{"name":"mdi:script","tags":["gaming / rpg","scroll"]},{"name":"mdi:script-outline","tags":["gaming / rpg","scroll outline"]},{"name":"mdi:script-text","tags":["gaming / rpg","scroll text"]},{"name":"mdi:script-text-key","tags":[]},{"name":"mdi:script-text-key-outline","tags":[]},{"name":"mdi:script-text-outline","tags":["gaming / rpg","scroll text outline"]},{"name":"mdi:script-text-play","tags":[]},{"name":"mdi:script-text-play-outline","tags":[]},{"name":"mdi:seal","tags":["ribbon","prize","award"]},{"name":"mdi:seal-variant","tags":["ribbon","prize","award"]},{"name":"mdi:search-web","tags":["search globe","global search","internet search"]},{"name":"mdi:seat-passenger","tags":[]},{"name":"mdi:seatbelt","tags":["automotive","seat belt","safety belt"]},{"name":"mdi:security-network","tags":["shield network","uac network","administrator network"]},{"name":"mdi:seed","tags":["agriculture","nature","food / drink"]},{"name":"mdi:seed-off","tags":["nature","food / drink","agriculture"]},{"name":"mdi:seed-off-outline","tags":["nature","food / drink","agriculture"]},{"name":"mdi:seed-outline","tags":["agriculture","nature","food / drink"]},{"name":"mdi:seed-plus","tags":["agriculture","nature","seed add"]},{"name":"mdi:seed-plus-outline","tags":["agriculture","nature","seed add outline"]},{"name":"mdi:seesaw","tags":["playground seesaw"]},{"name":"mdi:select","tags":[]},{"name":"mdi:select-arrow-down","tags":[]},{"name":"mdi:select-arrow-up","tags":[]},{"name":"mdi:select-compare","tags":[]},{"name":"mdi:select-drag","tags":[]},{"name":"mdi:select-inverse","tags":["selection invert"]},{"name":"mdi:select-marker","tags":["navigation","select location"]},{"name":"mdi:select-multiple","tags":[]},{"name":"mdi:select-multiple-marker","tags":["navigation","select multiple location"]},{"name":"mdi:select-off","tags":[]},{"name":"mdi:select-place","tags":[]},{"name":"mdi:select-remove","tags":[]},{"name":"mdi:select-search","tags":[]},{"name":"mdi:selection","tags":[]},{"name":"mdi:selection-drag","tags":[]},{"name":"mdi:selection-ellipse","tags":[]},{"name":"mdi:selection-ellipse-remove","tags":[]},{"name":"mdi:selection-marker","tags":["navigation","selection location"]},{"name":"mdi:selection-multiple","tags":[]},{"name":"mdi:selection-multiple-marker","tags":["navigation","selection multiple location"]},{"name":"mdi:selection-off","tags":[]},{"name":"mdi:selection-remove","tags":[]},{"name":"mdi:selection-search","tags":[]},{"name":"mdi:send-check","tags":[]},{"name":"mdi:send-check-outline","tags":[]},{"name":"mdi:send-circle","tags":[]},{"name":"mdi:send-circle-outline","tags":[]},{"name":"mdi:send-lock","tags":["lock","send secure"]},{"name":"mdi:send-lock-outline","tags":["lock"]},{"name":"mdi:send-outline","tags":["paper airplane outline","paper plane outline"]},{"name":"mdi:send-variant-clock","tags":[]},{"name":"mdi:send-variant-clock-outline","tags":[]},{"name":"mdi:serial-port","tags":["vga"]},{"name":"mdi:server","tags":["storage"]},{"name":"mdi:server-minus","tags":["server remove"]},{"name":"mdi:server-network","tags":[]},{"name":"mdi:server-network-off","tags":[]},{"name":"mdi:server-off","tags":[]},{"name":"mdi:server-plus","tags":["server add"]},{"name":"mdi:server-remove","tags":[]},{"name":"mdi:server-security","tags":["server shield"]},{"name":"mdi:set-all","tags":["database","set union","set or","full outer join","sql full outer join"]},{"name":"mdi:set-center","tags":["database","set centre","set intersection","set and","inner join","sql inner join"]},{"name":"mdi:set-center-right","tags":["database","set centre right","outer join right","sql right outer join"]},{"name":"mdi:set-left","tags":["database","difference left"]},{"name":"mdi:set-left-center","tags":["database","set left centre","outer join left","sql left outer join"]},{"name":"mdi:set-left-right","tags":["database","exclusion","set xor"]},{"name":"mdi:set-merge","tags":[]},{"name":"mdi:set-none","tags":["database","set null","set not","venn diagram"]},{"name":"mdi:set-right","tags":["database","difference right"]},{"name":"mdi:set-split","tags":[]},{"name":"mdi:set-top-box","tags":["home automation"]},{"name":"mdi:settings-helper","tags":["settings"]},{"name":"mdi:shaker","tags":["food / drink","pepper","fish food"]},{"name":"mdi:shaker-outline","tags":["food / drink","salt","fish food outline"]},{"name":"mdi:shape-circle-plus","tags":["shape","shape circle add"]},{"name":"mdi:shape-oval-plus","tags":[]},{"name":"mdi:shape-plus","tags":["shape","shape add","category plus"]},{"name":"mdi:shape-plus-outline","tags":["shape","shape add outline","category plus outline"]},{"name":"mdi:shape-polygon-plus","tags":["shape","shape polygon add"]},{"name":"mdi:shape-rectangle-plus","tags":["shape","shape rectangle add"]},{"name":"mdi:shape-square-plus","tags":["shape","shape square add"]},{"name":"mdi:shape-square-rounded-plus","tags":[]},{"name":"mdi:share-all","tags":[]},{"name":"mdi:share-all-outline","tags":[]},{"name":"mdi:share-circle","tags":["arrow"]},{"name":"mdi:share-off","tags":["arrow","forward off"]},{"name":"mdi:share-off-outline","tags":["arrow","forward off outline"]},{"name":"mdi:share-outline","tags":["arrow","forward outline"]},{"name":"mdi:share-variant-outline","tags":[]},{"name":"mdi:shark","tags":["animal","jaws"]},{"name":"mdi:shark-fin","tags":["animal"]},{"name":"mdi:shark-fin-outline","tags":["animal"]},{"name":"mdi:shark-off","tags":["animal","jaws off"]},{"name":"mdi:sheep","tags":["animal","agriculture","emoji sheep","emoticon sheep"]},{"name":"mdi:shield","tags":["gaming / rpg"]},{"name":"mdi:shield-account","tags":["account / user","home automation","security account","shield user","shield person","alarm arm home"]},{"name":"mdi:shield-account-outline","tags":["account / user","home automation","security account outline","shield user outline","shield person outline","alarm arm home outline"]},{"name":"mdi:shield-airplane","tags":["transportation + flying","shield aeroplane","shield plane","plane shield"]},{"name":"mdi:shield-airplane-outline","tags":["transportation + flying","shield aeroplane outline","shield plane outline"]},{"name":"mdi:shield-alert","tags":["alert / error","shield warning"]},{"name":"mdi:shield-alert-outline","tags":["alert / error","shield warning outline"]},{"name":"mdi:shield-bug","tags":["antivirus"]},{"name":"mdi:shield-bug-outline","tags":["antivirus outline"]},{"name":"mdi:shield-car","tags":["automotive","car security","car insurance"]},{"name":"mdi:shield-check-outline","tags":["shield tick outline"]},{"name":"mdi:shield-cross","tags":["gaming / rpg","religion","shield templar","shield christianity"]},{"name":"mdi:shield-cross-outline","tags":["gaming / rpg","religion","shield templar outline","shield christianity outline"]},{"name":"mdi:shield-crown","tags":["gaming / rpg","administrator"]},{"name":"mdi:shield-crown-outline","tags":["gaming / rpg","administrator outline"]},{"name":"mdi:shield-edit","tags":["edit / modify"]},{"name":"mdi:shield-edit-outline","tags":["edit / modify"]},{"name":"mdi:shield-half","tags":[]},{"name":"mdi:shield-half-full","tags":[]},{"name":"mdi:shield-home","tags":["home automation","security home","shield house","alarm arm home"]},{"name":"mdi:shield-home-outline","tags":["home automation","shield house outline","alarm arm home"]},{"name":"mdi:shield-link-variant","tags":[]},{"name":"mdi:shield-link-variant-outline","tags":[]},{"name":"mdi:shield-lock","tags":["lock","home automation","security lock","alarm arm away"]},{"name":"mdi:shield-lock-open","tags":["home automation","lock","shield unlocked"]},{"name":"mdi:shield-lock-open-outline","tags":["home automation","lock","shield unlocked outline"]},{"name":"mdi:shield-lock-outline","tags":["lock","home automation","alarm arm away outline","security lock outline"]},{"name":"mdi:shield-moon","tags":["home automation","alarm arm night"]},{"name":"mdi:shield-moon-outline","tags":["home automation","alarm arm night outline"]},{"name":"mdi:shield-off","tags":["security off"]},{"name":"mdi:shield-off-outline","tags":[]},{"name":"mdi:shield-outline","tags":["gaming / rpg"]},{"name":"mdi:shield-refresh","tags":[]},{"name":"mdi:shield-refresh-outline","tags":[]},{"name":"mdi:shield-remove","tags":[]},{"name":"mdi:shield-remove-outline","tags":[]},{"name":"mdi:shield-star","tags":["badge","shield favorite"]},{"name":"mdi:shield-star-outline","tags":["badge outline","shield favorite outline"]},{"name":"mdi:shield-sun","tags":["weather","sun protection"]},{"name":"mdi:shield-sun-outline","tags":["weather","sun protection outline"]},{"name":"mdi:shield-sword","tags":["gaming / rpg","moderator"]},{"name":"mdi:shield-sword-outline","tags":["gaming / rpg","moderator outline"]},{"name":"mdi:shield-sync","tags":[]},{"name":"mdi:shield-sync-outline","tags":[]},{"name":"mdi:shimmer","tags":["sparkles"]},{"name":"mdi:shipping-pallet","tags":[]},{"name":"mdi:shoe-ballet","tags":["sport","clothing","slippers ballet"]},{"name":"mdi:shoe-cleat","tags":["sport","clothing"]},{"name":"mdi:shoe-formal","tags":["clothing"]},{"name":"mdi:shoe-heel","tags":["clothing"]},{"name":"mdi:shoe-print","tags":["footprints"]},{"name":"mdi:shoe-sneaker","tags":["sport","clothing","shoe running"]},{"name":"mdi:shopping-music","tags":["shopping"]},{"name":"mdi:shopping-search","tags":["shopping"]},{"name":"mdi:shopping-search-outline","tags":["shopping"]},{"name":"mdi:shore","tags":[]},{"name":"mdi:shovel","tags":["hardware / tools","gardening"]},{"name":"mdi:shovel-off","tags":["hardware / tools"]},{"name":"mdi:shower","tags":["home automation","bathtub","bathroom"]},{"name":"mdi:shower-head","tags":["home automation","bathroom"]},{"name":"mdi:shredder","tags":[]},{"name":"mdi:shuffle-disabled","tags":["arrow"]},{"name":"mdi:shuffle-variant","tags":["arrow"]},{"name":"mdi:shuriken","tags":["ninja star"]},{"name":"mdi:sickle","tags":["hardware / tools"]},{"name":"mdi:sigma-lower","tags":[]},{"name":"mdi:sign-caution","tags":["transportation + road","barrier"]},{"name":"mdi:sign-direction","tags":["milestone"]},{"name":"mdi:sign-direction-minus","tags":["milestone minus"]},{"name":"mdi:sign-direction-plus","tags":["milestone plus","sign direction add","milestone add"]},{"name":"mdi:sign-direction-remove","tags":["milestone remove"]},{"name":"mdi:sign-pole","tags":[]},{"name":"mdi:sign-real-estate","tags":[]},{"name":"mdi:sign-text","tags":[]},{"name":"mdi:sign-yield","tags":["transportation + road","give way"]},{"name":"mdi:signal","tags":["cellphone / phone"]},{"name":"mdi:signal-2g","tags":["cellphone / phone"]},{"name":"mdi:signal-3g","tags":["cellphone / phone"]},{"name":"mdi:signal-4g","tags":["cellphone / phone"]},{"name":"mdi:signal-5g","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-1","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-2","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-3","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-outline","tags":["cellphone / phone","signal cellular 0"]},{"name":"mdi:signal-distance-variant","tags":[]},{"name":"mdi:signal-hspa","tags":["cellphone / phone"]},{"name":"mdi:signal-hspa-plus","tags":["cellphone / phone"]},{"name":"mdi:signal-off","tags":["cellphone / phone"]},{"name":"mdi:signal-variant","tags":[]},{"name":"mdi:signature","tags":["form"]},{"name":"mdi:signature-freehand","tags":["form"]},{"name":"mdi:signature-image","tags":["form"]},{"name":"mdi:signature-text","tags":["form"]},{"name":"mdi:silo","tags":["agriculture","farm"]},{"name":"mdi:silo-outline","tags":["agriculture","farm outline"]},{"name":"mdi:silverware-clean","tags":["food / drink","silverware shimmer","cutlery clean"]},{"name":"mdi:silverware-fork","tags":["food / drink","cutlery fork"]},{"name":"mdi:silverware-spoon","tags":["food / drink","cutlery spoon"]},{"name":"mdi:silverware-variant","tags":["food / drink","places","cutlery variant"]},{"name":"mdi:sim-alert-outline","tags":["cellphone / phone","alert / error"]},{"name":"mdi:sim-off-outline","tags":["cellphone / phone"]},{"name":"mdi:sim-outline","tags":["cellphone / phone","sim card outline","subscriber identity module outline","subscriber identification module outline"]},{"name":"mdi:sine-wave","tags":["audio","alternating current","current ac","wave","analog","frequency","amplitude"]},{"name":"mdi:sitemap","tags":["workflow","flowchart"]},{"name":"mdi:sitemap-outline","tags":["workflow outline","flowchart outline"]},{"name":"mdi:size-l","tags":["size large"]},{"name":"mdi:size-m","tags":["size medium"]},{"name":"mdi:size-s","tags":["size small"]},{"name":"mdi:size-xl","tags":["size extra large"]},{"name":"mdi:size-xs","tags":["size extra small"]},{"name":"mdi:size-xxl","tags":["size extra extra large"]},{"name":"mdi:size-xxs","tags":["size extra extra small"]},{"name":"mdi:size-xxxl","tags":[]},{"name":"mdi:skate-off","tags":["sport"]},{"name":"mdi:skew-less","tags":["math","skew decrease"]},{"name":"mdi:skew-more","tags":["math","skew increase"]},{"name":"mdi:ski-water","tags":["sport","people / family","transportation + water","human ski water"]},{"name":"mdi:skip-backward","tags":["home automation","title backward","previous title"]},{"name":"mdi:skip-backward-outline","tags":[]},{"name":"mdi:skip-forward","tags":["home automation","title forward","next title"]},{"name":"mdi:skip-forward-outline","tags":[]},{"name":"mdi:skip-next-circle","tags":[]},{"name":"mdi:skip-next-circle-outline","tags":[]},{"name":"mdi:skip-next-outline","tags":[]},{"name":"mdi:skip-previous-circle","tags":[]},{"name":"mdi:skip-previous-circle-outline","tags":[]},{"name":"mdi:skip-previous-outline","tags":[]},{"name":"mdi:skull","tags":["holiday","gaming / rpg"]},{"name":"mdi:skull-crossbones","tags":["gaming / rpg","holiday","jolly roger"]},{"name":"mdi:skull-crossbones-outline","tags":["gaming / rpg","holiday","jolly roger outline"]},{"name":"mdi:skull-outline","tags":["holiday","gaming / rpg"]},{"name":"mdi:skull-scan","tags":["medical / hospital","x ray","radiology"]},{"name":"mdi:skull-scan-outline","tags":["medical / hospital","x ray outline","radiology outline"]},{"name":"mdi:slash-forward","tags":["math","divide","division"]},{"name":"mdi:slash-forward-box","tags":["math","divide box","division box"]},{"name":"mdi:sleep-off","tags":[]},{"name":"mdi:slide","tags":["playground slide"]},{"name":"mdi:slope-downhill","tags":[]},{"name":"mdi:slope-uphill","tags":[]},{"name":"mdi:slot-machine","tags":["casino","gambling"]},{"name":"mdi:slot-machine-outline","tags":["casino outline","gambling outline"]},{"name":"mdi:smart-card","tags":["account / user"]},{"name":"mdi:smart-card-off","tags":["account / user"]},{"name":"mdi:smart-card-off-outline","tags":["account / user"]},{"name":"mdi:smart-card-outline","tags":["account / user"]},{"name":"mdi:smart-card-reader","tags":["account / user"]},{"name":"mdi:smart-card-reader-outline","tags":["account / user"]},{"name":"mdi:smog","tags":[]},{"name":"mdi:smoke","tags":["smog","fire"]},{"name":"mdi:smoke-detector-alert","tags":["home automation","alert / error"]},{"name":"mdi:smoke-detector-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:smoke-detector-off","tags":["home automation"]},{"name":"mdi:smoke-detector-off-outline","tags":["home automation"]},{"name":"mdi:smoke-detector-outline","tags":["home automation"]},{"name":"mdi:smoke-detector-variant","tags":["home automation"]},{"name":"mdi:smoke-detector-variant-alert","tags":["home automation","alert / error"]},{"name":"mdi:smoke-detector-variant-off","tags":["home automation"]},{"name":"mdi:smoking-pipe","tags":[]},{"name":"mdi:smoking-pipe-off","tags":[]},{"name":"mdi:snail","tags":["animal","gastropod"]},{"name":"mdi:snake","tags":["animal","reptile"]},{"name":"mdi:snowflake-alert","tags":["weather","alert / error","home automation","cold alert","snow advisory","freeze advisory"]},{"name":"mdi:snowflake-check","tags":["weather","snowflake approve"]},{"name":"mdi:snowflake-melt","tags":["weather","defrost"]},{"name":"mdi:snowflake-off","tags":["weather"]},{"name":"mdi:snowflake-thermometer","tags":["weather","home automation","frost point","freezing point","snowflake temperature"]},{"name":"mdi:snowflake-variant","tags":["holiday","weather"]},{"name":"mdi:snowman","tags":["holiday"]},{"name":"mdi:soccer-field","tags":["sport","football pitch"]},{"name":"mdi:social-distance-2-meters","tags":["medical / hospital"]},{"name":"mdi:sofa","tags":["home automation","couch","living room","family room"]},{"name":"mdi:sofa-outline","tags":["home automation","couch outline","living room outline","family room outline"]},{"name":"mdi:sofa-single","tags":["home automation","loveseat","love seat","couch","chair accent","living room","family room"]},{"name":"mdi:sofa-single-outline","tags":["home automation","loveseat outline","love seat outline","couch outline","chair accent outline","living room outline","family room outline"]},{"name":"mdi:solar-panel","tags":["home automation","solar energy","solar electricity"]},{"name":"mdi:solar-panel-large","tags":["home automation","solar panel energy","solar panel electricity"]},{"name":"mdi:solar-power","tags":["home automation","solar energy","solar electricity"]},{"name":"mdi:soldering-iron","tags":[]},{"name":"mdi:solid","tags":[]},{"name":"mdi:sort","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-ascending","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-ascending-variant","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-descending","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-descending-variant","tags":["text / content / format"]},{"name":"mdi:sort-ascending","tags":["text / content / format"]},{"name":"mdi:sort-bool-ascending","tags":["text / content / format"]},{"name":"mdi:sort-bool-ascending-variant","tags":["text / content / format","sort checkbox ascending"]},{"name":"mdi:sort-bool-descending","tags":["text / content / format"]},{"name":"mdi:sort-bool-descending-variant","tags":["text / content / format","sort checkbox descending"]},{"name":"mdi:sort-calendar-ascending","tags":["text / content / format","date / time","sort date ascending"]},{"name":"mdi:sort-calendar-descending","tags":["text / content / format","date / time","sort date descending"]},{"name":"mdi:sort-clock-ascending","tags":["text / content / format","date / time","sort time ascending"]},{"name":"mdi:sort-clock-ascending-outline","tags":["text / content / format","date / time","sort time ascending outline"]},{"name":"mdi:sort-clock-descending","tags":["text / content / format","date / time","sort time descending"]},{"name":"mdi:sort-clock-descending-outline","tags":["text / content / format","date / time","sort time descending outline"]},{"name":"mdi:sort-descending","tags":["text / content / format"]},{"name":"mdi:sort-numeric-ascending","tags":["text / content / format"]},{"name":"mdi:sort-numeric-ascending-variant","tags":["text / content / format"]},{"name":"mdi:sort-numeric-descending","tags":["text / content / format"]},{"name":"mdi:sort-numeric-descending-variant","tags":["text / content / format"]},{"name":"mdi:sort-reverse-variant","tags":["text / content / format"]},{"name":"mdi:sort-variant-lock","tags":["text / content / format","lock"]},{"name":"mdi:sort-variant-lock-open","tags":["text / content / format","lock"]},{"name":"mdi:sort-variant-off","tags":["text / content / format"]},{"name":"mdi:sort-variant-remove","tags":["text / content / format"]},{"name":"mdi:soundbar","tags":["home automation","speaker bar"]},{"name":"mdi:source-branch","tags":["developer / languages"]},{"name":"mdi:source-branch-check","tags":["developer / languages"]},{"name":"mdi:source-branch-minus","tags":["developer / languages"]},{"name":"mdi:source-branch-plus","tags":["developer / languages"]},{"name":"mdi:source-branch-refresh","tags":["developer / languages"]},{"name":"mdi:source-branch-remove","tags":["developer / languages"]},{"name":"mdi:source-branch-sync","tags":["developer / languages"]},{"name":"mdi:source-commit","tags":[]},{"name":"mdi:source-commit-end","tags":[]},{"name":"mdi:source-commit-end-local","tags":[]},{"name":"mdi:source-commit-local","tags":[]},{"name":"mdi:source-commit-next-local","tags":[]},{"name":"mdi:source-commit-start","tags":[]},{"name":"mdi:source-commit-start-next-local","tags":[]},{"name":"mdi:source-fork","tags":["developer / languages"]},{"name":"mdi:source-merge","tags":["developer / languages"]},{"name":"mdi:source-pull","tags":["developer / languages"]},{"name":"mdi:source-repository","tags":["developer / languages"]},{"name":"mdi:source-repository-multiple","tags":["developer / languages","source repositories"]},{"name":"mdi:soy-sauce","tags":["food / drink","soya sauce"]},{"name":"mdi:soy-sauce-off","tags":[]},{"name":"mdi:space-invaders","tags":["gaming / rpg"]},{"name":"mdi:space-station","tags":[]},{"name":"mdi:spade","tags":["hardware / tools"]},{"name":"mdi:speaker-bluetooth","tags":["audio"]},{"name":"mdi:speaker-message","tags":["home automation","audio","text to speech"]},{"name":"mdi:speaker-multiple","tags":["audio","speakers"]},{"name":"mdi:speaker-off","tags":["audio","home automation"]},{"name":"mdi:speaker-pause","tags":["audio","music"]},{"name":"mdi:speaker-play","tags":["audio","music"]},{"name":"mdi:speaker-stop","tags":["audio","music"]},{"name":"mdi:speaker-wireless","tags":["audio","home automation"]},{"name":"mdi:spear","tags":["gaming / rpg","staff","fishing"]},{"name":"mdi:speedometer","tags":["automotive"]},{"name":"mdi:speedometer-medium","tags":["automotive"]},{"name":"mdi:speedometer-slow","tags":["automotive"]},{"name":"mdi:sphere","tags":["shape"]},{"name":"mdi:sphere-off","tags":["shape"]},{"name":"mdi:spider","tags":["holiday","nature","animal","arachnid","bug"]},{"name":"mdi:spider-outline","tags":["animal","holiday","nature","arachnid outline"]},{"name":"mdi:spider-thread","tags":["holiday","nature","animal","arachnid thread","bug"]},{"name":"mdi:spider-web","tags":["holiday","cobweb","arachnid web"]},{"name":"mdi:spirit-level","tags":["hardware / tools"]},{"name":"mdi:spoon-sugar","tags":["food / drink"]},{"name":"mdi:spotlight","tags":["home automation"]},{"name":"mdi:spotlight-beam","tags":["home automation"]},{"name":"mdi:spray","tags":["agriculture","drawing / art","color","paint","aerosol"]},{"name":"mdi:spray-bottle","tags":["cleaning"]},{"name":"mdi:sprinkler","tags":["home automation","agriculture","irrigation"]},{"name":"mdi:sprinkler-fire","tags":["home automation","agriculture","sprinkler mist","mister","sprinkler head"]},{"name":"mdi:sprinkler-variant","tags":["home automation","agriculture","irrigation"]},{"name":"mdi:sprout","tags":["agriculture","nature","seedling","plant","ecology","environment"]},{"name":"mdi:sprout-outline","tags":["agriculture","nature","seedling outline","plant outline","ecology outline","environment outline"]},{"name":"mdi:square","tags":["shape"]},{"name":"mdi:square-circle","tags":["food / drink","vegetarian","lacto vegetarian"]},{"name":"mdi:square-circle-outline","tags":[]},{"name":"mdi:square-edit-outline","tags":["edit / modify"]},{"name":"mdi:square-medium","tags":["shape"]},{"name":"mdi:square-medium-outline","tags":["shape"]},{"name":"mdi:square-off","tags":[]},{"name":"mdi:square-off-outline","tags":[]},{"name":"mdi:square-opacity","tags":["drawing / art","shape","square transparent"]},{"name":"mdi:square-outline","tags":["shape"]},{"name":"mdi:square-root","tags":["math"]},{"name":"mdi:square-root-box","tags":[]},{"name":"mdi:square-rounded","tags":[]},{"name":"mdi:square-rounded-badge","tags":["shape","notification","app badge","push notification"]},{"name":"mdi:square-rounded-badge-outline","tags":["shape","notification","app badge outline","push notification outline"]},{"name":"mdi:square-rounded-outline","tags":[]},{"name":"mdi:square-small","tags":["bullet"]},{"name":"mdi:square-wave","tags":["audio"]},{"name":"mdi:squeegee","tags":[]},{"name":"mdi:ssh","tags":[]},{"name":"mdi:stadium-variant","tags":["places","sport","arena"]},{"name":"mdi:stairs","tags":["transportation + other"]},{"name":"mdi:stairs-box","tags":[]},{"name":"mdi:stairs-down","tags":["transportation + other"]},{"name":"mdi:stairs-up","tags":["transportation + other"]},{"name":"mdi:stamper","tags":[]},{"name":"mdi:standard-definition","tags":["video / movie"]},{"name":"mdi:star-box","tags":["favorite box"]},{"name":"mdi:star-box-multiple","tags":["favorite box multiple"]},{"name":"mdi:star-box-multiple-outline","tags":["favorite box multiple outline"]},{"name":"mdi:star-box-outline","tags":["favorite box outline"]},{"name":"mdi:star-check","tags":["shape","favorite check"]},{"name":"mdi:star-check-outline","tags":["shape","favorite check outline"]},{"name":"mdi:star-cog","tags":["settings","favorite cog"]},{"name":"mdi:star-cog-outline","tags":["settings","favorite cog outline"]},{"name":"mdi:star-crescent","tags":["religion","islam","religion islamic","religion muslim"]},{"name":"mdi:star-david","tags":["religion","jewish","religion judaic","judaism","magen david"]},{"name":"mdi:star-four-points","tags":["shape"]},{"name":"mdi:star-four-points-box","tags":["shape","auto box"]},{"name":"mdi:star-four-points-box-outline","tags":["shape","auto box outline"]},{"name":"mdi:star-four-points-circle","tags":["shape","auto circle"]},{"name":"mdi:star-four-points-circle-outline","tags":["shape","auto circle outline"]},{"name":"mdi:star-four-points-outline","tags":["shape"]},{"name":"mdi:star-four-points-small","tags":["shape"]},{"name":"mdi:star-half","tags":["shape","favorite half"]},{"name":"mdi:star-minus","tags":["shape","favorite minus"]},{"name":"mdi:star-minus-outline","tags":["shape","favorite minus outline"]},{"name":"mdi:star-off","tags":["favorite off"]},{"name":"mdi:star-off-outline","tags":["favorite off outline"]},{"name":"mdi:star-plus","tags":["shape","favorite plus","star add","favorite add"]},{"name":"mdi:star-plus-outline","tags":["shape","star add outline","favorite plus outline","favorite add outline"]},{"name":"mdi:star-remove","tags":["shape","favorite remove"]},{"name":"mdi:star-remove-outline","tags":["shape","favorite remove outline"]},{"name":"mdi:star-settings","tags":["settings","favorite settings"]},{"name":"mdi:star-settings-outline","tags":["settings","favorite settings outline"]},{"name":"mdi:star-shooting","tags":["favorite shooting"]},{"name":"mdi:star-shooting-outline","tags":["favorite shooting outline"]},{"name":"mdi:star-three-points","tags":["shape"]},{"name":"mdi:star-three-points-outline","tags":["shape"]},{"name":"mdi:state-machine","tags":[]},{"name":"mdi:step-backward","tags":[]},{"name":"mdi:step-backward-2","tags":["frame backward"]},{"name":"mdi:step-forward","tags":[]},{"name":"mdi:step-forward-2","tags":["frame forward"]},{"name":"mdi:stethoscope","tags":["medical / hospital"]},{"name":"mdi:sticker","tags":[]},{"name":"mdi:sticker-alert","tags":["alert / error"]},{"name":"mdi:sticker-alert-outline","tags":["alert / error"]},{"name":"mdi:sticker-check","tags":[]},{"name":"mdi:sticker-check-outline","tags":[]},{"name":"mdi:sticker-circle-outline","tags":[]},{"name":"mdi:sticker-minus","tags":[]},{"name":"mdi:sticker-minus-outline","tags":[]},{"name":"mdi:sticker-outline","tags":[]},{"name":"mdi:sticker-plus","tags":[]},{"name":"mdi:sticker-plus-outline","tags":[]},{"name":"mdi:sticker-remove","tags":[]},{"name":"mdi:sticker-remove-outline","tags":[]},{"name":"mdi:sticker-text","tags":[]},{"name":"mdi:sticker-text-outline","tags":[]},{"name":"mdi:stocking","tags":["holiday"]},{"name":"mdi:stomach","tags":["medical / hospital"]},{"name":"mdi:stool","tags":[]},{"name":"mdi:stool-outline","tags":[]},{"name":"mdi:stop-circle","tags":[]},{"name":"mdi:stop-circle-outline","tags":[]},{"name":"mdi:store-alert","tags":["places","shopping","alert / error","shop alert"]},{"name":"mdi:store-alert-outline","tags":["places","shopping","alert / error","shop alert outline"]},{"name":"mdi:store-check","tags":["shopping","places","shop check","shop complete","store complete"]},{"name":"mdi:store-check-outline","tags":["shopping","places","shop complete","store complete outline","shop check outline"]},{"name":"mdi:store-clock","tags":["places","shopping","store schedule","store hours","shop clock","shop hours","shop schedule","store time","shop time"]},{"name":"mdi:store-clock-outline","tags":["places","shopping","date / time","shop clock outline","store hours outline","shop hours outline","store time outline","shop time outline","store schedule outline","shop schedule outline"]},{"name":"mdi:store-cog","tags":["places","shopping","settings","store settings","shop settings"]},{"name":"mdi:store-cog-outline","tags":["places","shopping","settings","store settings outline","shop settings outline","shop cog outline"]},{"name":"mdi:store-edit","tags":["places","shopping","edit / modify","shop edit"]},{"name":"mdi:store-edit-outline","tags":["places","shopping","edit / modify","shop edit outline"]},{"name":"mdi:store-marker","tags":["places","shopping","navigation","store location","shop marker","shop location"]},{"name":"mdi:store-marker-outline","tags":["places","shopping","navigation","store location outline","shop marker outline","shop location outline"]},{"name":"mdi:store-minus","tags":["places","shopping","shop minus"]},{"name":"mdi:store-minus-outline","tags":["places","shopping","shop minus outline"]},{"name":"mdi:store-off","tags":["places","shopping","shop off"]},{"name":"mdi:store-off-outline","tags":["places","shopping","shop off outline"]},{"name":"mdi:store-plus","tags":["places","shopping","shop plus"]},{"name":"mdi:store-plus-outline","tags":["places","shopping","shop plus outline"]},{"name":"mdi:store-remove","tags":["places","shopping","shop remove","store delete","shop delete"]},{"name":"mdi:store-remove-outline","tags":["places","shopping","shop remove outline","store delete outline","shop delete outline"]},{"name":"mdi:store-search","tags":["places","shopping","shop search","store find","shop find","store locator","shop locator","store look up","shop look up"]},{"name":"mdi:store-search-outline","tags":["places","shopping","store find outline","shop search outline","shop find outline","store locator outline","shop locator outline","store look up outline","shop look up outline"]},{"name":"mdi:store-settings","tags":["places","shopping","settings","shop settings"]},{"name":"mdi:store-settings-outline","tags":["places","shopping","settings","shop settings outline"]},{"name":"mdi:storefront","tags":["places","awning"]},{"name":"mdi:storefront-check","tags":[]},{"name":"mdi:storefront-check-outline","tags":[]},{"name":"mdi:storefront-edit","tags":["edit / modify"]},{"name":"mdi:storefront-edit-outline","tags":["edit / modify"]},{"name":"mdi:storefront-minus","tags":[]},{"name":"mdi:storefront-minus-outline","tags":[]},{"name":"mdi:storefront-plus","tags":[]},{"name":"mdi:storefront-plus-outline","tags":[]},{"name":"mdi:storefront-remove","tags":[]},{"name":"mdi:storefront-remove-outline","tags":[]},{"name":"mdi:stove","tags":["food / drink","home automation","cooker","oven"]},{"name":"mdi:strategy","tags":["sport","football play"]},{"name":"mdi:stretch-to-page","tags":["text / content / format","arrow"]},{"name":"mdi:stretch-to-page-outline","tags":["text / content / format","arrow"]},{"name":"mdi:string-lights","tags":["home automation","italian lights","christmas lights","fairy lights"]},{"name":"mdi:string-lights-off","tags":["home automation","italian lights off","christmas lights off","fairy lights off"]},{"name":"mdi:submarine","tags":[]},{"name":"mdi:subway-alert-variant","tags":["alert / error","transportation + other","subway warning variant"]},{"name":"mdi:summit","tags":["peak"]},{"name":"mdi:sun-angle","tags":["weather","solar angle"]},{"name":"mdi:sun-angle-outline","tags":["weather","solar angle outline"]},{"name":"mdi:sun-clock","tags":["weather","home automation","sun schedule","sun time","time of day"]},{"name":"mdi:sun-clock-outline","tags":["weather","home automation","date / time","sun schedule outline","sun time outline","time of day outline"]},{"name":"mdi:sun-compass","tags":["weather","home automation","navigation","sun azimuth","solar compass","solar asimuth"]},{"name":"mdi:sun-snowflake-variant","tags":["home automation","weather","hot cold","heat cool"]},{"name":"mdi:sun-thermometer","tags":["weather","home automation","heat index","sun temperature","day temperature","external temperature","outdoor temperature"]},{"name":"mdi:sun-thermometer-outline","tags":["home automation","weather","external temperature","outside temperature","heat index","day temperature"]},{"name":"mdi:sun-wireless","tags":["home automation","weather","weather sun wireless","illuminance","uv ray","ultraviolet"]},{"name":"mdi:sun-wireless-outline","tags":["home automation","weather","weather sun wireless outline","illuminance outline","uv ray outline","ultraviolet outline"]},{"name":"mdi:sunglasses","tags":["clothing"]},{"name":"mdi:surround-sound-2-0","tags":["audio","stereo"]},{"name":"mdi:surround-sound-2-1","tags":[]},{"name":"mdi:surround-sound-3-1","tags":["audio"]},{"name":"mdi:surround-sound-5-1","tags":["audio"]},{"name":"mdi:surround-sound-5-1-2","tags":[]},{"name":"mdi:surround-sound-7-1","tags":["audio"]},{"name":"mdi:swap-horizontal-circle-outline","tags":["arrow"]},{"name":"mdi:swap-vertical-circle","tags":["arrow"]},{"name":"mdi:swap-vertical-circle-outline","tags":["arrow"]},{"name":"mdi:swim","tags":["sport"]},{"name":"mdi:switch","tags":[]},{"name":"mdi:sword","tags":["gaming / rpg"]},{"name":"mdi:sword-cross","tags":["gaming / rpg"]},{"name":"mdi:syllabary-hangul","tags":["alpha / numeric","writing system hangul"]},{"name":"mdi:syllabary-hiragana","tags":["alpha / numeric","writing system hiragana"]},{"name":"mdi:syllabary-katakana","tags":["alpha / numeric","writing system katakana"]},{"name":"mdi:syllabary-katakana-halfwidth","tags":["alpha / numeric","writing system katakana half width"]},{"name":"mdi:symbol","tags":[]},{"name":"mdi:sync-circle","tags":[]},{"name":"mdi:tab-minus","tags":[]},{"name":"mdi:tab-plus","tags":["tab add"]},{"name":"mdi:tab-remove","tags":[]},{"name":"mdi:tab-search","tags":["tab find"]},{"name":"mdi:table","tags":["text / content / format"]},{"name":"mdi:table-account","tags":["account / user","table user"]},{"name":"mdi:table-alert","tags":["alert / error"]},{"name":"mdi:table-arrow-down","tags":["table download"]},{"name":"mdi:table-arrow-left","tags":["table import"]},{"name":"mdi:table-arrow-right","tags":["table share","table export"]},{"name":"mdi:table-arrow-up","tags":["table upload"]},{"name":"mdi:table-border","tags":["text / content / format"]},{"name":"mdi:table-cancel","tags":[]},{"name":"mdi:table-chair","tags":["home automation","restaurant","kitchen","dining","dining room"]},{"name":"mdi:table-check","tags":[]},{"name":"mdi:table-clock","tags":["date / time"]},{"name":"mdi:table-cog","tags":["settings","table settings"]},{"name":"mdi:table-column","tags":["text / content / format"]},{"name":"mdi:table-column-plus-after","tags":["text / content / format","table column add after"]},{"name":"mdi:table-column-plus-before","tags":["text / content / format","table column add before"]},{"name":"mdi:table-column-remove","tags":["text / content / format"]},{"name":"mdi:table-column-width","tags":["text / content / format"]},{"name":"mdi:table-edit","tags":["edit / modify","text / content / format"]},{"name":"mdi:table-eye","tags":[]},{"name":"mdi:table-eye-off","tags":[]},{"name":"mdi:table-filter","tags":[]},{"name":"mdi:table-furniture","tags":["home automation","kitchen","dining room"]},{"name":"mdi:table-headers-eye","tags":[]},{"name":"mdi:table-headers-eye-off","tags":[]},{"name":"mdi:table-heart","tags":["table favorite"]},{"name":"mdi:table-key","tags":[]},{"name":"mdi:table-large","tags":["text / content / format","geographic information system"]},{"name":"mdi:table-large-plus","tags":["text / content / format","geographic information system","table large add"]},{"name":"mdi:table-large-remove","tags":["text / content / format","geographic information system"]},{"name":"mdi:table-lock","tags":["lock"]},{"name":"mdi:table-minus","tags":[]},{"name":"mdi:table-multiple","tags":[]},{"name":"mdi:table-network","tags":[]},{"name":"mdi:table-off","tags":[]},{"name":"mdi:table-picnic","tags":[]},{"name":"mdi:table-pivot","tags":["text / content / format"]},{"name":"mdi:table-plus","tags":["text / content / format","table add"]},{"name":"mdi:table-question","tags":["table help"]},{"name":"mdi:table-refresh","tags":[]},{"name":"mdi:table-remove","tags":["text / content / format"]},{"name":"mdi:table-row","tags":["text / content / format"]},{"name":"mdi:table-row-height","tags":["text / content / format"]},{"name":"mdi:table-row-plus-after","tags":["text / content / format","table row add after"]},{"name":"mdi:table-row-plus-before","tags":["text / content / format","table row add before"]},{"name":"mdi:table-row-remove","tags":["text / content / format"]},{"name":"mdi:table-search","tags":[]},{"name":"mdi:table-settings","tags":["settings"]},{"name":"mdi:table-split-cell","tags":["text / content / format"]},{"name":"mdi:table-star","tags":["table favorite"]},{"name":"mdi:table-sync","tags":[]},{"name":"mdi:tablet-dashboard","tags":["device / tech"]},{"name":"mdi:taco","tags":["food / drink"]},{"name":"mdi:tag-arrow-down","tags":[]},{"name":"mdi:tag-arrow-down-outline","tags":[]},{"name":"mdi:tag-arrow-left","tags":[]},{"name":"mdi:tag-arrow-left-outline","tags":[]},{"name":"mdi:tag-arrow-right","tags":[]},{"name":"mdi:tag-arrow-right-outline","tags":[]},{"name":"mdi:tag-arrow-up","tags":[]},{"name":"mdi:tag-arrow-up-outline","tags":[]},{"name":"mdi:tag-check","tags":["tag approve"]},{"name":"mdi:tag-check-outline","tags":["tag approve outline"]},{"name":"mdi:tag-hidden","tags":[]},{"name":"mdi:tag-minus","tags":[]},{"name":"mdi:tag-minus-outline","tags":[]},{"name":"mdi:tag-multiple","tags":["tags"]},{"name":"mdi:tag-multiple-outline","tags":[]},{"name":"mdi:tag-off","tags":[]},{"name":"mdi:tag-off-outline","tags":[]},{"name":"mdi:tag-plus","tags":["tag add"]},{"name":"mdi:tag-plus-outline","tags":[]},{"name":"mdi:tag-remove","tags":[]},{"name":"mdi:tag-remove-outline","tags":[]},{"name":"mdi:tag-search","tags":["tag find"]},{"name":"mdi:tag-search-outline","tags":["tag find outline"]},{"name":"mdi:tag-text","tags":[]},{"name":"mdi:tag-text-outline","tags":[]},{"name":"mdi:tally-mark-1","tags":["math","counting 1","one"]},{"name":"mdi:tally-mark-2","tags":["math","counting 2","two"]},{"name":"mdi:tally-mark-3","tags":["math","counting 3","three"]},{"name":"mdi:tally-mark-4","tags":["math","counting 4","four"]},{"name":"mdi:tally-mark-5","tags":["math","counting 5","five"]},{"name":"mdi:tangram","tags":["gaming / rpg","puzzle"]},{"name":"mdi:tank","tags":[]},{"name":"mdi:tanker-truck","tags":["transportation + road","fuel truck","oil truck","water truck","tanker"]},{"name":"mdi:tape-drive","tags":[]},{"name":"mdi:tape-measure","tags":["hardware / tools","measuring tape"]},{"name":"mdi:target","tags":["registration mark"]},{"name":"mdi:target-account","tags":["account / user","crosshairs account","target user"]},{"name":"mdi:target-variant","tags":["registration mark"]},{"name":"mdi:tea-outline","tags":["food / drink"]},{"name":"mdi:teddy-bear","tags":["holiday","home automation","child toy","children toy","kids room","childrens room","play room"]},{"name":"mdi:telescope","tags":["science"]},{"name":"mdi:television-ambient-light","tags":["home automation"]},{"name":"mdi:television-classic","tags":["device / tech","home automation","tv classic"]},{"name":"mdi:television-classic-off","tags":["device / tech","home automation","tv classic off"]},{"name":"mdi:television-guide","tags":["device / tech","home automation"]},{"name":"mdi:television-off","tags":["device / tech","home automation","tv off"]},{"name":"mdi:television-pause","tags":["device / tech"]},{"name":"mdi:television-shimmer","tags":["device / tech","television clean"]},{"name":"mdi:television-speaker","tags":["audio","video / movie"]},{"name":"mdi:television-speaker-off","tags":["audio","video / movie"]},{"name":"mdi:television-stop","tags":["device / tech"]},{"name":"mdi:temperature-celsius","tags":["weather","temperature centigrade"]},{"name":"mdi:temperature-fahrenheit","tags":["weather"]},{"name":"mdi:temperature-kelvin","tags":["weather"]},{"name":"mdi:tennis-ball-outline","tags":["sport"]},{"name":"mdi:tent","tags":["camping"]},{"name":"mdi:test-tube","tags":["science"]},{"name":"mdi:test-tube-empty","tags":["science"]},{"name":"mdi:test-tube-off","tags":["science"]},{"name":"mdi:text-account","tags":["account / user","biography","text user"]},{"name":"mdi:text-box-check","tags":["files / folders","file document box tick","file document box check"]},{"name":"mdi:text-box-check-outline","tags":["files / folders","file document box tick outline","file document box check outline"]},{"name":"mdi:text-box-edit","tags":["files / folders","edit / modify"]},{"name":"mdi:text-box-edit-outline","tags":["files / folders","edit / modify"]},{"name":"mdi:text-box-minus","tags":["files / folders","file document box minus"]},{"name":"mdi:text-box-minus-outline","tags":["files / folders","file document box minus outline"]},{"name":"mdi:text-box-multiple","tags":["files / folders","file document boxes","file document box multiple"]},{"name":"mdi:text-box-multiple-outline","tags":["files / folders","file document boxes outline","file document box multiple outline"]},{"name":"mdi:text-box-outline","tags":["files / folders","file document box outline"]},{"name":"mdi:text-box-plus","tags":["files / folders","file document box plus"]},{"name":"mdi:text-box-plus-outline","tags":["files / folders","file document box plus outline"]},{"name":"mdi:text-box-remove","tags":["files / folders","file document box remove"]},{"name":"mdi:text-box-remove-outline","tags":["files / folders","file document box remove outline"]},{"name":"mdi:text-box-search","tags":["files / folders","file document box search"]},{"name":"mdi:text-box-search-outline","tags":["files / folders","file document box search outline"]},{"name":"mdi:text-recognition","tags":[]},{"name":"mdi:text-search","tags":["notes search"]},{"name":"mdi:text-search-variant","tags":["notes search variant"]},{"name":"mdi:text-shadow","tags":[]},{"name":"mdi:texture-box","tags":["math","surface area"]},{"name":"mdi:theater","tags":["places","home automation","cinema","theatre"]},{"name":"mdi:theme-light-dark","tags":["weather","sun moon stars"]},{"name":"mdi:thermometer","tags":["weather","home automation","automotive","temperature"]},{"name":"mdi:thermometer-alert","tags":["home automation","weather","alert / error","thermometer warning","temperature alert","temperature warning"]},{"name":"mdi:thermometer-auto","tags":["home automation","weather","temperature auto"]},{"name":"mdi:thermometer-bluetooth","tags":["weather","home automation","automotive","temperature bluetooth"]},{"name":"mdi:thermometer-check","tags":["weather","home automation","thermometer approve","temperature check","temperature approve"]},{"name":"mdi:thermometer-chevron-down","tags":["home automation","weather","temperature chevron down","temperature decrease","thermometer decrease"]},{"name":"mdi:thermometer-chevron-up","tags":["home automation","weather","temperature chevron up","temperature increase","thermometer increase"]},{"name":"mdi:thermometer-high","tags":["home automation","weather","temperature high"]},{"name":"mdi:thermometer-lines","tags":["weather","home automation","temperature lines"]},{"name":"mdi:thermometer-low","tags":["home automation","weather","temperature low"]},{"name":"mdi:thermometer-minus","tags":["home automation","weather","temperature minus","thermometer decrease","temperature decrease"]},{"name":"mdi:thermometer-off","tags":["weather","home automation","temperature off"]},{"name":"mdi:thermometer-plus","tags":["home automation","weather","thermometer add","thermometer increase","temperature plus","temperature add","temperature increase"]},{"name":"mdi:thermometer-probe","tags":[]},{"name":"mdi:thermometer-probe-off","tags":[]},{"name":"mdi:thermometer-water","tags":["weather","home automation","dew point","water temperature","boiling point"]},{"name":"mdi:thermostat-auto","tags":["home automation"]},{"name":"mdi:thermostat-box","tags":["home automation","device / tech"]},{"name":"mdi:thermostat-box-auto","tags":["home automation"]},{"name":"mdi:thermostat-cog","tags":[]},{"name":"mdi:thought-bubble","tags":["comic bubble","thinking"]},{"name":"mdi:thought-bubble-outline","tags":["comic thought bubble outline","thinking outline","think outline"]},{"name":"mdi:ticket-account","tags":["account / user","ticket user"]},{"name":"mdi:ticket-outline","tags":[]},{"name":"mdi:ticket-percent","tags":["coupon","voucher"]},{"name":"mdi:ticket-percent-outline","tags":["coupon outline","voucher outline"]},{"name":"mdi:tie","tags":["clothing"]},{"name":"mdi:tilde","tags":[]},{"name":"mdi:tilde-off","tags":[]},{"name":"mdi:timeline","tags":[]},{"name":"mdi:timeline-alert","tags":["alert / error"]},{"name":"mdi:timeline-alert-outline","tags":["alert / error"]},{"name":"mdi:timeline-check","tags":[]},{"name":"mdi:timeline-check-outline","tags":[]},{"name":"mdi:timeline-clock","tags":["date / time"]},{"name":"mdi:timeline-clock-outline","tags":["date / time"]},{"name":"mdi:timeline-minus","tags":[]},{"name":"mdi:timeline-minus-outline","tags":[]},{"name":"mdi:timeline-outline","tags":[]},{"name":"mdi:timeline-plus","tags":[]},{"name":"mdi:timeline-plus-outline","tags":[]},{"name":"mdi:timeline-question","tags":["timeline help"]},{"name":"mdi:timeline-question-outline","tags":["timeline help outline"]},{"name":"mdi:timeline-remove","tags":[]},{"name":"mdi:timeline-remove-outline","tags":[]},{"name":"mdi:timeline-text","tags":[]},{"name":"mdi:timeline-text-outline","tags":[]},{"name":"mdi:timer","tags":["sport","date / time","stopwatch"]},{"name":"mdi:timer-alert","tags":["date / time","alert / error","stopwatch alert"]},{"name":"mdi:timer-alert-outline","tags":["date / time","alert / error","stopwatch alert outline"]},{"name":"mdi:timer-cancel","tags":["date / time","stopwatch cancel"]},{"name":"mdi:timer-cancel-outline","tags":["date / time","stopwatch cancel outline"]},{"name":"mdi:timer-check","tags":["date / time","stopwatch check","timer tick","stopwatch tick"]},{"name":"mdi:timer-check-outline","tags":["date / time","timer tick outline","stopwatch check outline","stopwatch tick outline"]},{"name":"mdi:timer-cog","tags":["date / time","settings","timer settings"]},{"name":"mdi:timer-cog-outline","tags":["date / time","settings","timer settings outline"]},{"name":"mdi:timer-edit","tags":["date / time","edit / modify","stopwatch edit"]},{"name":"mdi:timer-edit-outline","tags":["date / time","edit / modify","stopwatch edit outline"]},{"name":"mdi:timer-lock","tags":["date / time","lock","stopwatch lock","timer secure","stopwatch secure"]},{"name":"mdi:timer-lock-open","tags":["date / time","lock","stopwatch lock open"]},{"name":"mdi:timer-lock-open-outline","tags":["date / time","lock","stopwatch lock open outline"]},{"name":"mdi:timer-lock-outline","tags":["date / time","lock","stopwatch lock outline","stopwatch secure outline","timer secure outline"]},{"name":"mdi:timer-marker","tags":["date / time","navigation","stopwatch marker","timer location","stopwatch location"]},{"name":"mdi:timer-marker-outline","tags":["date / time","navigation","stopwatch marker outline","timer location outline","stopwatch location outline"]},{"name":"mdi:timer-minus","tags":["date / time","timer subtract","stopwatch minus","stopwatch subtract"]},{"name":"mdi:timer-minus-outline","tags":["date / time","timer subtract outline","stopwatch minus outline","stopwatch subtract outline"]},{"name":"mdi:timer-music","tags":["date / time","music","stopwatch music"]},{"name":"mdi:timer-music-outline","tags":["date / time","music","stopwatch music outline"]},{"name":"mdi:timer-off","tags":["date / time","stopwatch off"]},{"name":"mdi:timer-pause","tags":["date / time","stopwatch pause"]},{"name":"mdi:timer-pause-outline","tags":["date / time","stopwatch pause outline"]},{"name":"mdi:timer-play","tags":["date / time","timer start","stopwatch play","stopwatch start"]},{"name":"mdi:timer-play-outline","tags":["date / time","timer start outline","stopwatch play outline","stopwatch start outline"]},{"name":"mdi:timer-plus","tags":["date / time","timer add","stopwatch plus","stopwatch add"]},{"name":"mdi:timer-plus-outline","tags":["date / time","timer add outline","stopwatch plus outline","stopwatch add outline"]},{"name":"mdi:timer-refresh","tags":["date / time","stopwatch refresh"]},{"name":"mdi:timer-refresh-outline","tags":["date / time","stopwatch refresh outline"]},{"name":"mdi:timer-remove","tags":["date / time","stopwatch remove"]},{"name":"mdi:timer-remove-outline","tags":["date / time","stopwatch remove outline"]},{"name":"mdi:timer-sand","tags":["date / time","hourglass"]},{"name":"mdi:timer-sand-complete","tags":["date / time","hourglass complete"]},{"name":"mdi:timer-sand-paused","tags":["date / time","hourglass paused"]},{"name":"mdi:timer-settings","tags":["date / time","settings"]},{"name":"mdi:timer-settings-outline","tags":["date / time","settings"]},{"name":"mdi:timer-star","tags":["date / time","timer favorite","stopwatch star","stopwatch favorite"]},{"name":"mdi:timer-star-outline","tags":["date / time","timer favorite outline","stopwatch star outline","stopwatch favorite outline"]},{"name":"mdi:timer-stop","tags":["date / time","stopwatch stop"]},{"name":"mdi:timer-stop-outline","tags":["date / time","stopwatch stop outline"]},{"name":"mdi:timer-sync","tags":["date / time","stopwatch sync"]},{"name":"mdi:timer-sync-outline","tags":["date / time","stopwatch sync outline"]},{"name":"mdi:timetable","tags":["date / time"]},{"name":"mdi:tire","tags":["automotive","agriculture","tyre","wheel"]},{"name":"mdi:toaster","tags":["home automation"]},{"name":"mdi:toaster-off","tags":["home automation"]},{"name":"mdi:toaster-oven","tags":["home automation","food / drink"]},{"name":"mdi:toggle-switch-variant","tags":["home automation","light switch on"]},{"name":"mdi:toggle-switch-variant-off","tags":["home automation","light switch off","rocker switch off"]},{"name":"mdi:toilet","tags":["home automation","bathroom","lavatory","bidet"]},{"name":"mdi:tools","tags":["hardware / tools","wrench","screwdriver"]},{"name":"mdi:tooltip","tags":["tooltip"]},{"name":"mdi:tooltip-cellphone","tags":["cellphone / phone","tooltip","cellphone location","cellphone gps","find my phone"]},{"name":"mdi:tooltip-check","tags":["tooltip"]},{"name":"mdi:tooltip-check-outline","tags":["tooltip"]},{"name":"mdi:tooltip-edit","tags":["tooltip","edit / modify"]},{"name":"mdi:tooltip-edit-outline","tags":["edit / modify","tooltip"]},{"name":"mdi:tooltip-image","tags":["tooltip"]},{"name":"mdi:tooltip-image-outline","tags":["tooltip"]},{"name":"mdi:tooltip-minus","tags":["tooltip"]},{"name":"mdi:tooltip-minus-outline","tags":["tooltip"]},{"name":"mdi:tooltip-outline","tags":["tooltip"]},{"name":"mdi:tooltip-plus","tags":["tooltip","tooltip add"]},{"name":"mdi:tooltip-plus-outline","tags":["tooltip","tooltip outline plus","tooltip add outline"]},{"name":"mdi:tooltip-question","tags":["tooltip","tooltip help"]},{"name":"mdi:tooltip-question-outline","tags":["tooltip","tooltip help outline"]},{"name":"mdi:tooltip-remove","tags":["tooltip"]},{"name":"mdi:tooltip-remove-outline","tags":["tooltip"]},{"name":"mdi:tooltip-text","tags":["tooltip"]},{"name":"mdi:tooltip-text-outline","tags":["tooltip"]},{"name":"mdi:tooth","tags":["medical / hospital","dentist"]},{"name":"mdi:tooth-outline","tags":["medical / hospital"]},{"name":"mdi:toothbrush","tags":["medical / hospital","dentist","oral hygiene"]},{"name":"mdi:toothbrush-electric","tags":["medical / hospital","dentist","oral hygiene"]},{"name":"mdi:toothbrush-paste","tags":["medical / hospital","dentist","oral hygiene"]},{"name":"mdi:torch","tags":["sport","olympics"]},{"name":"mdi:tortoise","tags":["animal","turtle","reptile"]},{"name":"mdi:toslink","tags":["audio","optical audio"]},{"name":"mdi:touch-text-outline","tags":[]},{"name":"mdi:tournament","tags":["gaming / rpg","sport","bracket"]},{"name":"mdi:tower-beach","tags":[]},{"name":"mdi:tower-fire","tags":[]},{"name":"mdi:town-hall","tags":["places","school"]},{"name":"mdi:toy-brick","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-marker","tags":["navigation","lego","plugin","extension","lego location","toy brick location"]},{"name":"mdi:toy-brick-marker-outline","tags":["navigation","extension outline","lego location outline","toy brick location outline","plugin outline","lego outline"]},{"name":"mdi:toy-brick-minus","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-minus-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-plus","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-plus-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-remove","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-remove-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-search","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-search-outline","tags":["lego","plugin","extension"]},{"name":"mdi:track-light","tags":["home automation"]},{"name":"mdi:track-light-off","tags":[]},{"name":"mdi:trackpad","tags":[]},{"name":"mdi:trackpad-lock","tags":["lock"]},{"name":"mdi:tractor","tags":["agriculture","transportation + road","farm"]},{"name":"mdi:trademark","tags":["tm"]},{"name":"mdi:traffic-cone","tags":["transportation + road"]},{"name":"mdi:train-car-autorack","tags":["transportation + other"]},{"name":"mdi:train-car-box","tags":["transportation + other"]},{"name":"mdi:train-car-box-full","tags":["transportation + other"]},{"name":"mdi:train-car-box-open","tags":["transportation + other"]},{"name":"mdi:train-car-caboose","tags":["transportation + other"]},{"name":"mdi:train-car-centerbeam","tags":["transportation + other"]},{"name":"mdi:train-car-centerbeam-full","tags":["transportation + other"]},{"name":"mdi:train-car-container","tags":["transportation + other"]},{"name":"mdi:train-car-flatbed","tags":["transportation + other"]},{"name":"mdi:train-car-flatbed-car","tags":["transportation + other"]},{"name":"mdi:train-car-flatbed-tank","tags":["transportation + other"]},{"name":"mdi:train-car-gondola","tags":["transportation + other"]},{"name":"mdi:train-car-gondola-full","tags":["transportation + other"]},{"name":"mdi:train-car-hopper","tags":["transportation + other"]},{"name":"mdi:train-car-hopper-covered","tags":["transportation + other"]},{"name":"mdi:train-car-hopper-full","tags":["transportation + other"]},{"name":"mdi:train-car-intermodal","tags":["transportation + other"]},{"name":"mdi:train-car-passenger","tags":["transportation + other"]},{"name":"mdi:train-car-passenger-door","tags":["transportation + other"]},{"name":"mdi:train-car-passenger-door-open","tags":["transportation + other"]},{"name":"mdi:train-car-passenger-variant","tags":["transportation + other"]},{"name":"mdi:train-car-tank","tags":["transportation + other"]},{"name":"mdi:transcribe","tags":[]},{"name":"mdi:transcribe-close","tags":[]},{"name":"mdi:transfer","tags":[]},{"name":"mdi:transfer-down","tags":["arrow"]},{"name":"mdi:transfer-left","tags":["arrow"]},{"name":"mdi:transfer-right","tags":["arrow"]},{"name":"mdi:transfer-up","tags":["arrow"]},{"name":"mdi:transit-connection","tags":["transportation + other","navigation"]},{"name":"mdi:transit-connection-horizontal","tags":["transportation + other"]},{"name":"mdi:transit-connection-variant","tags":["transportation + other","navigation"]},{"name":"mdi:transit-detour","tags":["transportation + other","navigation"]},{"name":"mdi:transit-skip","tags":["transportation + other"]},{"name":"mdi:translate-off","tags":[]},{"name":"mdi:translate-variant","tags":["developer / languages","spoken language"]},{"name":"mdi:transmission-tower","tags":["home automation","pylon","powerline","electricity","energy","power","grid"]},{"name":"mdi:transmission-tower-export","tags":["home automation","power from grid","energy from grid","electricity from grid"]},{"name":"mdi:transmission-tower-import","tags":["home automation","power to grid","energy to grid","electricity to grid","return to grid"]},{"name":"mdi:transmission-tower-off","tags":["home automation","powerline off","pylon off","grid off"]},{"name":"mdi:trash-can","tags":["delete","rubbish bin","trashcan","garbage can"]},{"name":"mdi:trash-can-outline","tags":["delete outline","rubbish bin outline","trashcan outline","garbage can outline"]},{"name":"mdi:tray","tags":["queue","printer","inbox"]},{"name":"mdi:tray-alert","tags":["alert / error","queue","printer","inbox"]},{"name":"mdi:tray-arrow-down","tags":["arrow","tray download"]},{"name":"mdi:tray-arrow-up","tags":["arrow","tray upload"]},{"name":"mdi:tray-full","tags":["queue","printer","inbox"]},{"name":"mdi:tray-minus","tags":["queue","printer","inbox"]},{"name":"mdi:tray-plus","tags":["queue","printer","inbox"]},{"name":"mdi:tray-remove","tags":["queue","printer","inbox"]},{"name":"mdi:treasure-chest","tags":["gaming / rpg","shopping","lock","jewelry box","jewel case"]},{"name":"mdi:treasure-chest-outline","tags":["gaming / rpg","lock","shopping","jewel case outline","jewelry box outline"]},{"name":"mdi:tree","tags":["nature","agriculture","plant"]},{"name":"mdi:tree-outline","tags":["nature","agriculture","plant"]},{"name":"mdi:triangle","tags":["shape"]},{"name":"mdi:triangle-down","tags":["shape"]},{"name":"mdi:triangle-down-outline","tags":["shape"]},{"name":"mdi:triangle-outline","tags":["shape"]},{"name":"mdi:triangle-small-down","tags":["shape","trending down variant"]},{"name":"mdi:triangle-small-up","tags":["shape","trending up variant"]},{"name":"mdi:triangle-wave","tags":["audio"]},{"name":"mdi:triforce","tags":["gaming / rpg","zelda"]},{"name":"mdi:trophy","tags":["sport","achievement"]},{"name":"mdi:trophy-award","tags":["sport","achievement award"]},{"name":"mdi:trophy-broken","tags":["sport"]},{"name":"mdi:trophy-outline","tags":["sport","achievement outline"]},{"name":"mdi:trophy-variant","tags":["sport","achievement variant"]},{"name":"mdi:trophy-variant-outline","tags":["sport","achievement variant outline"]},{"name":"mdi:truck-alert","tags":["transportation + road","alert / error","truck error"]},{"name":"mdi:truck-alert-outline","tags":["transportation + road","alert / error","truck error outline"]},{"name":"mdi:truck-cargo-container","tags":["transportation + road","truck shipping"]},{"name":"mdi:truck-check","tags":["transportation + road","truck tick","lorry check","courier check"]},{"name":"mdi:truck-check-outline","tags":["transportation + road"]},{"name":"mdi:truck-delivery","tags":["transportation + road","lorry delivery"]},{"name":"mdi:truck-delivery-outline","tags":["transportation + road"]},{"name":"mdi:truck-fast","tags":["transportation + road","lorry fast","courier fast"]},{"name":"mdi:truck-fast-outline","tags":["transportation + road"]},{"name":"mdi:truck-flatbed","tags":["automotive","transportation + road","truck flatbed tow"]},{"name":"mdi:truck-minus","tags":["transportation + road","truck subtract"]},{"name":"mdi:truck-minus-outline","tags":["transportation + road","truck subtract outline"]},{"name":"mdi:truck-plus","tags":["transportation + road","medical / hospital","truck add"]},{"name":"mdi:truck-plus-outline","tags":["transportation + road","medical / hospital","truck add outline"]},{"name":"mdi:truck-remove","tags":["transportation + road"]},{"name":"mdi:truck-remove-outline","tags":["transportation + road"]},{"name":"mdi:truck-snowflake","tags":["transportation + road","truck refrigerator","truck freezer"]},{"name":"mdi:truck-trailer","tags":["transportation + road"]},{"name":"mdi:trumpet","tags":["music"]},{"name":"mdi:tshirt-crew","tags":["clothing","t shirt crew"]},{"name":"mdi:tshirt-crew-outline","tags":["clothing","t shirt crew outline"]},{"name":"mdi:tshirt-v","tags":["clothing","t shirt v"]},{"name":"mdi:tshirt-v-outline","tags":["clothing","t shirt v outline"]},{"name":"mdi:tumble-dryer","tags":["home automation","laundry room"]},{"name":"mdi:tumble-dryer-alert","tags":["home automation","alert / error","laundry room alert"]},{"name":"mdi:tumble-dryer-off","tags":["home automation","laundry room off"]},{"name":"mdi:tune-variant","tags":["audio","settings","settings","equalizer"]},{"name":"mdi:tune-vertical-variant","tags":["audio","settings","settings vertical","equalizer vertical"]},{"name":"mdi:tunnel","tags":["transportation + road","transportation + other"]},{"name":"mdi:tunnel-outline","tags":["transportation + road","transportation + other"]},{"name":"mdi:turbine","tags":["transportation + flying","jet engine","wind turbine"]},{"name":"mdi:turkey","tags":["animal","holiday","agriculture","thanksgiving"]},{"name":"mdi:turnstile","tags":[]},{"name":"mdi:turnstile-outline","tags":[]},{"name":"mdi:turtle","tags":["animal","reptile"]},{"name":"mdi:two-factor-authentication","tags":[]},{"name":"mdi:typewriter","tags":[]},{"name":"mdi:ufo","tags":["unidentified flying object","alien"]},{"name":"mdi:ufo-outline","tags":["unidentified flying object outline","alien"]},{"name":"mdi:ultra-high-definition","tags":["video / movie","uhd"]},{"name":"mdi:umbrella","tags":["weather"]},{"name":"mdi:umbrella-closed","tags":["weather"]},{"name":"mdi:umbrella-closed-outline","tags":["weather"]},{"name":"mdi:umbrella-closed-variant","tags":["weather"]},{"name":"mdi:umbrella-outline","tags":["weather"]},{"name":"mdi:undo-variant","tags":["arrow"]},{"name":"mdi:unfold-less-vertical","tags":["chevron right left","collapse vertical"]},{"name":"mdi:unfold-more-vertical","tags":["chevron left right","expand vertical"]},{"name":"mdi:ungroup","tags":[]},{"name":"mdi:unicorn","tags":["animal","fantasy"]},{"name":"mdi:unicorn-variant","tags":["animal","fantasy variant"]},{"name":"mdi:unicycle","tags":["sport","transportation + other"]},{"name":"mdi:upload-lock","tags":["lock"]},{"name":"mdi:upload-lock-outline","tags":["lock"]},{"name":"mdi:upload-multiple","tags":["uploads"]},{"name":"mdi:upload-network","tags":[]},{"name":"mdi:upload-network-outline","tags":[]},{"name":"mdi:upload-off","tags":[]},{"name":"mdi:upload-off-outline","tags":[]},{"name":"mdi:upload-outline","tags":["file upload outline"]},{"name":"mdi:usb-flash-drive","tags":[]},{"name":"mdi:usb-flash-drive-outline","tags":[]},{"name":"mdi:usb-port","tags":[]},{"name":"mdi:valve","tags":["home automation"]},{"name":"mdi:valve-closed","tags":["home automation"]},{"name":"mdi:valve-open","tags":["home automation"]},{"name":"mdi:van-passenger","tags":["transportation + road"]},{"name":"mdi:van-utility","tags":["transportation + road","van candy"]},{"name":"mdi:vanish","tags":[]},{"name":"mdi:vanish-quarter","tags":[]},{"name":"mdi:vanity-light","tags":["home automation"]},{"name":"mdi:variable","tags":["developer / languages","math"]},{"name":"mdi:variable-box","tags":["developer / languages"]},{"name":"mdi:vector-arrange-above","tags":["vector","arrange","geographic information system"]},{"name":"mdi:vector-arrange-below","tags":["vector","arrange","geographic information system"]},{"name":"mdi:vector-bezier","tags":["vector"]},{"name":"mdi:vector-circle","tags":["vector","geographic information system"]},{"name":"mdi:vector-circle-variant","tags":["vector"]},{"name":"mdi:vector-combine","tags":["vector","geographic information system"]},{"name":"mdi:vector-curve","tags":["vector","geographic information system","bezier"]},{"name":"mdi:vector-difference","tags":["vector","geographic information system"]},{"name":"mdi:vector-difference-ab","tags":["vector","geographic information system"]},{"name":"mdi:vector-difference-ba","tags":["vector","geographic information system"]},{"name":"mdi:vector-ellipse","tags":["vector","geographic information system"]},{"name":"mdi:vector-intersection","tags":["vector","geographic information system"]},{"name":"mdi:vector-line","tags":["vector","geographic information system"]},{"name":"mdi:vector-link","tags":["vector","geographic information system"]},{"name":"mdi:vector-point","tags":["vector"]},{"name":"mdi:vector-point-edit","tags":["vector","edit / modify"]},{"name":"mdi:vector-point-minus","tags":["vector"]},{"name":"mdi:vector-point-plus","tags":["vector","vector point add"]},{"name":"mdi:vector-point-select","tags":["vector","geographic information system"]},{"name":"mdi:vector-polygon","tags":["vector","geographic information system"]},{"name":"mdi:vector-polygon-variant","tags":["vector"]},{"name":"mdi:vector-polyline","tags":["vector","geographic information system"]},{"name":"mdi:vector-polyline-edit","tags":["edit / modify"]},{"name":"mdi:vector-polyline-minus","tags":[]},{"name":"mdi:vector-polyline-plus","tags":[]},{"name":"mdi:vector-polyline-remove","tags":[]},{"name":"mdi:vector-radius","tags":["vector","geographic information system"]},{"name":"mdi:vector-rectangle","tags":["vector","geographic information system"]},{"name":"mdi:vector-selection","tags":["vector","geographic information system"]},{"name":"mdi:vector-square","tags":["vector","geographic information system","mdi"]},{"name":"mdi:vector-square-close","tags":["vector"]},{"name":"mdi:vector-square-edit","tags":["vector","edit / modify"]},{"name":"mdi:vector-square-minus","tags":["vector","vector square subtract"]},{"name":"mdi:vector-square-open","tags":["vector"]},{"name":"mdi:vector-square-plus","tags":["vector","vector square add"]},{"name":"mdi:vector-square-remove","tags":["vector","vector square delete"]},{"name":"mdi:vector-triangle","tags":["vector","geographic information system"]},{"name":"mdi:vector-union","tags":["vector","geographic information system"]},{"name":"mdi:vhs","tags":["video / movie","video home system","vhs cassette","vhs tape"]},{"name":"mdi:vibrate-off","tags":[]},{"name":"mdi:video-2d","tags":["video / movie"]},{"name":"mdi:video-3d","tags":["video / movie"]},{"name":"mdi:video-3d-off","tags":["video / movie"]},{"name":"mdi:video-3d-variant","tags":["video / movie"]},{"name":"mdi:video-check","tags":["video / movie"]},{"name":"mdi:video-check-outline","tags":["video / movie"]},{"name":"mdi:video-high-definition","tags":["video / movie"]},{"name":"mdi:video-input-scart","tags":["video / movie"]},{"name":"mdi:video-marker","tags":["video / movie","navigation","video location"]},{"name":"mdi:video-marker-outline","tags":["video / movie","navigation","video location outline"]},{"name":"mdi:video-minus-outline","tags":["video / movie"]},{"name":"mdi:video-plus-outline","tags":["video / movie"]},{"name":"mdi:video-vintage","tags":["video / movie","video film","video classic"]},{"name":"mdi:video-wireless","tags":["video / movie"]},{"name":"mdi:video-wireless-outline","tags":["video / movie"]},{"name":"mdi:view-dashboard-edit","tags":["view","edit / modify"]},{"name":"mdi:view-dashboard-edit-outline","tags":["view","edit / modify"]},{"name":"mdi:view-dashboard-variant-outline","tags":["view"]},{"name":"mdi:view-gallery","tags":["view"]},{"name":"mdi:view-gallery-outline","tags":["view"]},{"name":"mdi:view-grid","tags":["view"]},{"name":"mdi:view-grid-compact","tags":[]},{"name":"mdi:view-grid-outline","tags":["view"]},{"name":"mdi:view-grid-plus-outline","tags":["view"]},{"name":"mdi:view-parallel","tags":["view"]},{"name":"mdi:view-parallel-outline","tags":["view"]},{"name":"mdi:view-sequential","tags":["view"]},{"name":"mdi:view-sequential-outline","tags":["view"]},{"name":"mdi:virtual-reality","tags":["vr"]},{"name":"mdi:virus","tags":["science","medical / hospital"]},{"name":"mdi:virus-off","tags":["science"]},{"name":"mdi:virus-off-outline","tags":["science"]},{"name":"mdi:virus-outline","tags":["science","medical / hospital"]},{"name":"mdi:volume-equal","tags":["audio"]},{"name":"mdi:volume-minus","tags":["audio","home automation","cellphone / phone","volume decrease"]},{"name":"mdi:volume-mute","tags":["audio","cellphone / phone"]},{"name":"mdi:volume-plus","tags":["audio","home automation","cellphone / phone","volume increase"]},{"name":"mdi:volume-variant-off","tags":["audio","cellphone / phone"]},{"name":"mdi:volume-vibrate","tags":["cellphone / phone","audio"]},{"name":"mdi:vpn","tags":["virtual private network"]},{"name":"mdi:wall","tags":["bricks"]},{"name":"mdi:wall-fire","tags":["device / tech","firewall"]},{"name":"mdi:wall-sconce","tags":["home automation"]},{"name":"mdi:wall-sconce-flat","tags":["home automation","ceiling light flat","pot light flat"]},{"name":"mdi:wall-sconce-flat-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-flat-variant","tags":["home automation","pot light flat variant"]},{"name":"mdi:wall-sconce-flat-variant-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-round","tags":["home automation","pot light round"]},{"name":"mdi:wall-sconce-round-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-round-variant","tags":["home automation","pot light round variant"]},{"name":"mdi:wall-sconce-round-variant-outline","tags":["home automation"]},{"name":"mdi:wallet-bifold","tags":["currency","banking"]},{"name":"mdi:wallet-bifold-outline","tags":["banking","currency"]},{"name":"mdi:wallet-plus","tags":["banking","wallet add"]},{"name":"mdi:wallet-plus-outline","tags":["banking","wallet add outline"]},{"name":"mdi:wan","tags":["wide area network"]},{"name":"mdi:wardrobe","tags":["home automation","closet"]},{"name":"mdi:wardrobe-outline","tags":["home automation","closet outline"]},{"name":"mdi:warehouse","tags":["places"]},{"name":"mdi:washing-machine-alert","tags":["home automation","alert / error","laundry room alert"]},{"name":"mdi:washing-machine-off","tags":["home automation","laundry room off"]},{"name":"mdi:watch-export","tags":["device / tech"]},{"name":"mdi:watch-export-variant","tags":["device / tech"]},{"name":"mdi:watch-import","tags":["device / tech"]},{"name":"mdi:watch-import-variant","tags":["device / tech"]},{"name":"mdi:watch-variant","tags":["device / tech"]},{"name":"mdi:watch-vibrate","tags":["device / tech"]},{"name":"mdi:watch-vibrate-off","tags":["device / tech"]},{"name":"mdi:water-alert","tags":["alert / error","agriculture","drop alert","blood alert","ink alert"]},{"name":"mdi:water-alert-outline","tags":["alert / error","agriculture","drop alert outline","blood alert outline","ink alert outline"]},{"name":"mdi:water-boiler","tags":["home automation","water heater","gas water boiler","electric water boiler","gas water heater","electric water heater"]},{"name":"mdi:water-boiler-alert","tags":["home automation","alert / error","water heater alert","water boiler error","water heater error"]},{"name":"mdi:water-boiler-auto","tags":["home automation","water heater auto"]},{"name":"mdi:water-boiler-off","tags":["home automation","water heater off"]},{"name":"mdi:water-check","tags":["drop check","blood check","ink check"]},{"name":"mdi:water-check-outline","tags":["drop check outline","blood check outline","ink check outline"]},{"name":"mdi:water-circle","tags":["home automation","drop circle","blood circle","ink circle"]},{"name":"mdi:water-minus","tags":["drop minus","blood minus","ink minus"]},{"name":"mdi:water-minus-outline","tags":["drop minus outline","blood minus outline","ink minus outline"]},{"name":"mdi:water-off-outline","tags":["drop off outline","blood off outline","trans fat off outline","ink off outline"]},{"name":"mdi:water-opacity","tags":["home automation","drawing / art","weather","water transparent","water saver","blood saver","blood transparent","oil saver","oil transparent","drop transparent","drop saver"]},{"name":"mdi:water-outline","tags":["home automation","weather","drop outline","blood outline","water drop outline","ink outline"]},{"name":"mdi:water-percent","tags":["weather","home automation","nature","humidity","ink percent"]},{"name":"mdi:water-percent-alert","tags":["alert / error","nature","humidity alert","ink percent alert"]},{"name":"mdi:water-plus","tags":["drop plus","blood plus","ink plus"]},{"name":"mdi:water-plus-outline","tags":["drop plus outline","blood plus outline","ink plus outline"]},{"name":"mdi:water-polo","tags":["sport"]},{"name":"mdi:water-pump","tags":["agriculture","home automation","tap","kitchen tap","faucet"]},{"name":"mdi:water-pump-off","tags":["agriculture","home automation","tap off","kitchen tap off","faucet off"]},{"name":"mdi:water-remove","tags":["drop remove","blood remove","ink remove"]},{"name":"mdi:water-remove-outline","tags":["drop remove outline","blood remove outline","ink remove outline"]},{"name":"mdi:water-sync","tags":["agriculture","water recycle","water reuse"]},{"name":"mdi:water-thermometer","tags":["weather","home automation","boil point","water temperature","dew point"]},{"name":"mdi:water-thermometer-outline","tags":["weather","home automation","dew point outline","water temperature outline","boil point outline"]},{"name":"mdi:water-well","tags":[]},{"name":"mdi:water-well-outline","tags":[]},{"name":"mdi:waterfall","tags":["home automation","nature"]},{"name":"mdi:watering-can","tags":["agriculture","watering pot"]},{"name":"mdi:watering-can-outline","tags":["agriculture","watering pot outline"]},{"name":"mdi:wave","tags":["transportation + water","water"]},{"name":"mdi:waveform","tags":["audio"]},{"name":"mdi:waves","tags":["weather","transportation + water","agriculture","ocean","lake","flood","water"]},{"name":"mdi:waves-arrow-left","tags":["nature","weather","tide in","water flow"]},{"name":"mdi:waves-arrow-right","tags":["nature","weather","tide out","water flow"]},{"name":"mdi:waves-arrow-up","tags":["nature","weather","water evaporation","humidity","sea level rise","ocean level rise","climate change"]},{"name":"mdi:weather-cloudy","tags":["weather","cloud","agriculture"]},{"name":"mdi:weather-cloudy-alert","tags":["weather","alert / error","cloud"]},{"name":"mdi:weather-cloudy-arrow-right","tags":["weather","cloud"]},{"name":"mdi:weather-cloudy-clock","tags":["weather","cloud","weather history","weather time","weather date"]},{"name":"mdi:weather-dust","tags":["weather","agriculture","dust storm","windy"]},{"name":"mdi:weather-fog","tags":["weather","agriculture","weather mist"]},{"name":"mdi:weather-hail","tags":["weather","agriculture"]},{"name":"mdi:weather-hazy","tags":["weather","agriculture"]},{"name":"mdi:weather-hurricane","tags":["weather","nature","agriculture","cyclone"]},{"name":"mdi:weather-hurricane-outline","tags":["weather","nature","agriculture","cyclone outline"]},{"name":"mdi:weather-lightning","tags":["weather","agriculture","weather storm","weather thunder","weather flash"]},{"name":"mdi:weather-lightning-rainy","tags":["weather","weather thunder rainy","weather storm"]},{"name":"mdi:weather-night","tags":["weather","holiday","moon and stars","night sky"]},{"name":"mdi:weather-night-partly-cloudy","tags":["weather","cloud"]},{"name":"mdi:weather-partly-cloudy","tags":["weather","cloud","weather partlycloudy"]},{"name":"mdi:weather-partly-lightning","tags":["weather"]},{"name":"mdi:weather-partly-rainy","tags":["weather"]},{"name":"mdi:weather-partly-snowy","tags":["weather"]},{"name":"mdi:weather-partly-snowy-rainy","tags":["weather"]},{"name":"mdi:weather-pouring","tags":["weather","agriculture","weather heavy rain"]},{"name":"mdi:weather-rainy","tags":["weather","agriculture","weather drizzle","weather spitting"]},{"name":"mdi:weather-snowy","tags":["weather"]},{"name":"mdi:weather-snowy-heavy","tags":["weather","flurries"]},{"name":"mdi:weather-snowy-rainy","tags":["weather","weather sleet"]},{"name":"mdi:weather-sunny","tags":["weather"]},{"name":"mdi:weather-sunny-alert","tags":["weather","alert / error","home automation","heat alert","heat advisory","sun advisory"]},{"name":"mdi:weather-sunny-off","tags":["weather"]},{"name":"mdi:weather-sunset","tags":["weather"]},{"name":"mdi:weather-sunset-down","tags":["weather"]},{"name":"mdi:weather-sunset-up","tags":["weather","sunrise"]},{"name":"mdi:weather-tornado","tags":["weather"]},{"name":"mdi:weather-windy","tags":["weather"]},{"name":"mdi:weather-windy-variant","tags":["weather"]},{"name":"mdi:web-box","tags":["geographic information system","language box","globe box","internet box"]},{"name":"mdi:web-cancel","tags":[]},{"name":"mdi:web-check","tags":[]},{"name":"mdi:web-clock","tags":["date / time"]},{"name":"mdi:web-minus","tags":[]},{"name":"mdi:web-off","tags":[]},{"name":"mdi:web-plus","tags":[]},{"name":"mdi:web-refresh","tags":[]},{"name":"mdi:web-remove","tags":[]},{"name":"mdi:web-sync","tags":[]},{"name":"mdi:webcam","tags":["video / movie","home automation","web camera"]},{"name":"mdi:webcam-off","tags":[]},{"name":"mdi:webhook","tags":[]},{"name":"mdi:weight","tags":[]},{"name":"mdi:weight-gram","tags":[]},{"name":"mdi:weight-kilogram","tags":["weight kg"]},{"name":"mdi:weight-lifter","tags":["sport","people / family","crossfit","gym","fitness center","human barbell"]},{"name":"mdi:weight-pound","tags":["weight lb"]},{"name":"mdi:wheel-barrow","tags":["hardware / tools"]},{"name":"mdi:wheelchair","tags":["medical / hospital","people / family","accessible","isa","international symbol of access"]},{"name":"mdi:wheelchair-accessibility","tags":["medical / hospital","accessible"]},{"name":"mdi:whistle","tags":["sport"]},{"name":"mdi:whistle-outline","tags":["sport"]},{"name":"mdi:wifi","tags":[]},{"name":"mdi:wifi-alert","tags":["alert / error"]},{"name":"mdi:wifi-arrow-down","tags":[]},{"name":"mdi:wifi-arrow-left","tags":[]},{"name":"mdi:wifi-arrow-left-right","tags":[]},{"name":"mdi:wifi-arrow-right","tags":[]},{"name":"mdi:wifi-arrow-up","tags":[]},{"name":"mdi:wifi-arrow-up-down","tags":[]},{"name":"mdi:wifi-cancel","tags":[]},{"name":"mdi:wifi-check","tags":[]},{"name":"mdi:wifi-cog","tags":["settings"]},{"name":"mdi:wifi-lock","tags":["lock"]},{"name":"mdi:wifi-lock-open","tags":["lock"]},{"name":"mdi:wifi-marker","tags":["navigation","wifi location"]},{"name":"mdi:wifi-minus","tags":[]},{"name":"mdi:wifi-off","tags":[]},{"name":"mdi:wifi-plus","tags":[]},{"name":"mdi:wifi-refresh","tags":[]},{"name":"mdi:wifi-remove","tags":[]},{"name":"mdi:wifi-settings","tags":["settings"]},{"name":"mdi:wifi-star","tags":["wifi favourite","network favourite","wifi favorite","network favorite"]},{"name":"mdi:wifi-strength-1","tags":[]},{"name":"mdi:wifi-strength-1-alert","tags":["alert / error","wifi strength 1 warning"]},{"name":"mdi:wifi-strength-1-lock","tags":["lock"]},{"name":"mdi:wifi-strength-1-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-2","tags":[]},{"name":"mdi:wifi-strength-2-alert","tags":["alert / error","wifi strength 2 warning"]},{"name":"mdi:wifi-strength-2-lock","tags":["lock"]},{"name":"mdi:wifi-strength-2-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-3","tags":[]},{"name":"mdi:wifi-strength-3-alert","tags":["alert / error","wifi strength 3 warning"]},{"name":"mdi:wifi-strength-3-lock","tags":["lock"]},{"name":"mdi:wifi-strength-3-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-4","tags":[]},{"name":"mdi:wifi-strength-4-alert","tags":["alert / error","wifi strength 4 warning"]},{"name":"mdi:wifi-strength-4-lock","tags":["lock"]},{"name":"mdi:wifi-strength-4-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-alert-outline","tags":["alert / error","wifi strength warning outline","wifi strength 0 alert","wifi strength 0 warning"]},{"name":"mdi:wifi-strength-lock-open-outline","tags":["lock"]},{"name":"mdi:wifi-strength-lock-outline","tags":["lock","wifi strength 0 lock"]},{"name":"mdi:wifi-strength-off","tags":[]},{"name":"mdi:wifi-strength-off-outline","tags":[]},{"name":"mdi:wifi-strength-outline","tags":["wifi strength 0"]},{"name":"mdi:wifi-sync","tags":[]},{"name":"mdi:wind-turbine-alert","tags":["home automation","alert / error","wind power alert","wind turbine warning"]},{"name":"mdi:wind-turbine-check","tags":["home automation","wind power check","wind turbine success","wind power success"]},{"name":"mdi:window-close","tags":["cancel","close"]},{"name":"mdi:window-closed","tags":["home automation"]},{"name":"mdi:window-closed-variant","tags":["home automation"]},{"name":"mdi:window-maximize","tags":[]},{"name":"mdi:window-minimize","tags":[]},{"name":"mdi:window-open","tags":["home automation"]},{"name":"mdi:window-open-variant","tags":["home automation"]},{"name":"mdi:window-restore","tags":[]},{"name":"mdi:window-shutter","tags":["home automation"]},{"name":"mdi:window-shutter-alert","tags":["home automation","alert / error"]},{"name":"mdi:window-shutter-auto","tags":["home automation"]},{"name":"mdi:window-shutter-cog","tags":["home automation","settings","window shutter settings"]},{"name":"mdi:window-shutter-open","tags":["home automation"]},{"name":"mdi:window-shutter-settings","tags":["home automation","settings"]},{"name":"mdi:windsock","tags":["weather"]},{"name":"mdi:wiper","tags":[]},{"name":"mdi:wiper-wash","tags":["automotive","wiper fluid","washer fluid"]},{"name":"mdi:wiper-wash-alert","tags":["alert / error","automotive","wiper fluid alert","washer fluid alert","wiper fluid low","washer fluid low"]},{"name":"mdi:wizard-hat","tags":["clothing","gaming / rpg"]},{"name":"mdi:wrap","tags":[]},{"name":"mdi:wrap-disabled","tags":["unwrap"]},{"name":"mdi:wrench-check","tags":[]},{"name":"mdi:wrench-check-outline","tags":[]},{"name":"mdi:wrench-clock","tags":["date / time","hardware / tools","scheduled maintenance","wrench time","tool time","tool clock"]},{"name":"mdi:wrench-clock-outline","tags":["date / time"]},{"name":"mdi:wrench-cog","tags":["settings","wrench settings"]},{"name":"mdi:wrench-cog-outline","tags":["settings","wrench settings outline"]},{"name":"mdi:xml","tags":["developer / languages","code"]},{"name":"mdi:yeast","tags":[]},{"name":"mdi:yin-yang","tags":["taoism"]},{"name":"mdi:yoga","tags":["sport"]},{"name":"mdi:yurt","tags":[]},{"name":"mdi:zip-box-outline","tags":["files / folders","compressed file outline"]},{"name":"mdi:zip-disk","tags":[]},{"name":"mdi:zodiac-aquarius","tags":["horoscope aquarius"]},{"name":"mdi:zodiac-aries","tags":["horoscope aries"]},{"name":"mdi:zodiac-cancer","tags":["horoscope cancer"]},{"name":"mdi:zodiac-capricorn","tags":["horoscope capricorn"]},{"name":"mdi:zodiac-gemini","tags":["horoscope gemini"]},{"name":"mdi:zodiac-leo","tags":["horoscope leo"]},{"name":"mdi:zodiac-libra","tags":["horoscope libra"]},{"name":"mdi:zodiac-pisces","tags":["horoscope pisces"]},{"name":"mdi:zodiac-sagittarius","tags":["horoscope sagittarius"]},{"name":"mdi:zodiac-scorpio","tags":["horoscope scorpio"]},{"name":"mdi:zodiac-taurus","tags":["horoscope taurus"]},{"name":"mdi:zodiac-virgo","tags":["horoscope virgo"]}]
\ No newline at end of file
+[{"name":"more_horiz","tags":["3","DISABLE_IOS","app","application","components","disable_ios","dots","etc","horiz","horizontal","interface","ios","more","screen","site","three","ui","ux","web","website"]},{"name":"more_vert","tags":["3","DISABLE_IOS","android","app","application","components","disable_ios","dots","etc","interface","more","screen","site","three","ui","ux","vert","vertical","web","website"]},{"name":"open_in_new","tags":["app","application","arrow","box","components","in","interface","new","open","right","screen","site","ui","up","ux","web","website","window"]},{"name":"visibility","tags":["eye","on","reveal","see","show","view","visibility"]},{"name":"play_arrow","tags":["app","application","arrow","back","components","control","controls","direction","forward","interface","media","music","navigation","play","right","screen","site","triangle","ui","ux","video","web","website"]},{"name":"arrow_back","tags":["DISABLE_IOS","app","application","arrow","back","components","direction","disable_ios","interface","left","navigation","previous","screen","site","ui","ux","web","website"]},{"name":"arrow_downward","tags":["app","application","arrow","components","direction","down","downward","interface","navigation","screen","site","ui","ux","web","website"]},{"name":"arrow_forward","tags":["app","application","arrow","arrows","components","direction","forward","interface","navigation","right","screen","site","ui","ux","web","website"]},{"name":"arrow_upward","tags":["app","application","arrow","components","direction","interface","navigation","screen","site","ui","up","upward","ux","web","website"]},{"name":"close","tags":["cancel","clear","close","exit","remove","stop","x"]},{"name":"refresh","tags":["around","arrow","arrows","direction","inprogress","load","loading refresh","navigation","refresh","renew","right","rotate","turn"]},{"name":"menu","tags":["app","application","components","hamburger","interface","line","lines","menu","screen","site","ui","ux","web","website"]},{"name":"show_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","line","measure","metrics","presentation","show chart","statistics","tracking"]},{"name":"multiline_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","line","measure","metrics","multiple","statistics","tracking"]},{"name":"pie_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","pie","statistics","tracking"]},{"name":"insert_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","insert","measure","metrics","statistics","tracking"]},{"name":"people","tags":["accounts","committee","face","family","friends","humans","network","people","persons","profiles","social","team","users"]},{"name":"person","tags":["account","face","human","people","person","profile","user"]},{"name":"domain","tags":["apartment","architecture","building","business","domain","estate","home","place","real","residence","residential","shelter","web","www"]},{"name":"devices_other","tags":["Android","OS","ar","cell","chrome","desktop","device","gadget","hardware","iOS","ipad","mac","mobile","monitor","other","phone","tablet","virtual_reality","vr","watch","wearables","window"]},{"name":"widgets","tags":["app","box","menu","setting","squares","ui","widgets"]},{"name":"dashboard","tags":["cards","dashboard","format","grid","layout","rectangle","shapes","square","view","web","website"]},{"name":"map","tags":["destination","direction","location","map","maps","pin","place","route","stop","travel"]},{"name":"pin_drop","tags":["destination","direction","drop","location","maps","navigation","pin","place","stop"]},{"name":"gps_fixed","tags":["destination","direction","fixed","gps","location","maps","pin","place","pointer","stop","tracking"]},{"name":"extension","tags":["app","extended","extension","game","jigsaw","plugin add","puzzle","shape"]},{"name":"search","tags":["filter","find","glass","look","magnify","magnifying","search","see"]},{"name":"settings","tags":["application","change","details","gear","info","information","options","personal","service","settings"]},{"name":"notifications","tags":["active","alarm","alert","bell","chime","notifications","notify","reminder","ring","sound"]},{"name":"notifications_active","tags":["active","alarm","alert","bell","chime","notifications","notify","reminder","ring","ringing","sound"]},{"name":"info","tags":["alert","announcement","assistance","details","help","i","info","information","service","support"]},{"name":"error_outline","tags":["!","alert","attention","caution","circle","danger","error","exclamation","important","mark","notification","outline","symbol","warning"]},{"name":"warning","tags":["!","alert","attention","caution","danger","error","exclamation","important","mark","notification","symbol","triangle","warning"]},{"name":"list","tags":["file","format","index","list","menu","options"]},{"name":"download","tags":["arrow","down","download","downloads","drive","install","upload"]},{"name":"import_export","tags":["arrow","arrows","direction","down","explort","import","up"]},{"name":"share","tags":["DISABLE_IOS","android","connect","contect","disable_ios","link","media","multimedia","multiple","network","options","share","shared","sharing","social"]},{"name":"add","tags":["+","add","new symbol","plus","symbol"]},{"name":"edit","tags":["compose","create","edit","editing","input","new","pen","pencil","write","writing"]},{"name":"check","tags":["DISABLE_IOS","check","confirm","correct","disable_ios","done","enter","mark","ok","okay","select","tick","yes"]},{"name":"delete","tags":["bin","can","delete","garbage","remove","trash"]},{"name":"thermostat","tags":["climate","forecast","temperature","thermostat","weather"]},{"name":"air","tags":["air","blowing","breeze","flow","wave","weather","wind"]},{"name":"lightbulb","tags":["alert","announcement","bulb","idea","incandescent","info","information","led","light","lightbulb","tip"]},{"name":"home","tags":["address","app","application--house","architecture","building","components","design","estate","home","interface","layout","place","real","residence","residential","screen","shelter","site","structure","ui","unit","ux","web","website","window"]},{"name":"account_circle","tags":["account","avatar","circle","face","human","people","person","profile","thumbnail","user"]},{"name":"done","tags":["DISABLE_IOS","approve","check","complete","disable_ios","done","mark","ok","select","tick","validate","verified","yes"]},{"name":"check_circle","tags":["approve","check","circle","complete","confirm","done","mark","ok","select","tick","validate","verified","yes"]},{"name":"expand_more","tags":["arrow","arrows","chevron","collapse","direction","down","expand","expandable","list","more"]},{"name":"shopping_cart","tags":["add","bill","buy","card","cart","cash","checkout","coin","commerce","credit","currency","dollars","money","online","pay","payment","shopping"]},{"name":"email","tags":["email","envelop","letters","mail","message","send"]},{"name":"favorite","tags":["appreciate","favorite","heart","like","love","remember","save","shape"]},{"name":"description","tags":["article","data","description","doc","document","drive","file","folder","folders","notes","page","paper","sheet","slide","text","writing"]},{"name":"logout","tags":["app","application","arrow","components","design","exit","interface","leave","log","login","logout","right","screen","site","ui","ux","web","website"]},{"name":"favorite_border","tags":["border","favorite","heart","like","love","outline","remember","save","shape"]},{"name":"chevron_right","tags":["arrow","arrows","chevron","direction","right"]},{"name":"lock","tags":["lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"location_on","tags":["destination","direction","location","maps","on","pin","place","room","stop"]},{"name":"location_pin","tags":["destination","direction","location","maps","pin","place","stop"]},{"name":"schedule","tags":["clock","date","history","recent","schedule","time"]},{"name":"local_shipping","tags":["automobile","car","cars","delivery","letters","local","mail","maps","office","package","parcel","post","postal","send","shipping","shopping","stamp","transportation","truck","vehicle"]},{"name":"language","tags":["globe","internet","language","planet","website","world","www"]},{"name":"call","tags":["call","cell","contact","device","hardware","mobile","phone","telephone"]},{"name":"file_download","tags":["arrow","arrows","down","download","downloads","drive","export","file","install","upload"]},{"name":"arrow_forward_ios","tags":["app","application","arrow","chevron","components","direction","forward","interface","ios","navigation","next","right","screen","site","ui","ux","web","website"]},{"name":"arrow_back_ios","tags":["DISABLE_IOS","app","application","arrow","back","chevron","components","direction","disable_ios","interface","ios","left","navigation","previous","screen","site","ui","ux","web","website"]},{"name":"groups","tags":["body","club","collaboration","crowd","gathering","groups","human","meeting","people","person","social","teams"]},{"name":"cancel","tags":["cancel","circle","clear","close","exit","remove","stop","x"]},{"name":"help_outline","tags":["?","assistance","circle","help","info","information","outline","punctuation","question mark","recent","restore","shape","support","symbol"]},{"name":"arrow_drop_down","tags":["app","application","arrow","components","direction","down","drop","interface","navigation","screen","site","ui","ux","web","website"]},{"name":"face","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"manage_accounts","tags":["accounts","change","details","face","gear","human","manage","options","people","person","profile","service","settings","user"]},{"name":"place","tags":["destination","direction","location","maps","navigation","pin","place","point","stop"]},{"name":"verified","tags":["approve","badge","burst","check","complete","done","mark","ok","select","star","tick","validate","verified","yes"]},{"name":"add_circle_outline","tags":["+","add","circle","create","new","outline","plus"]},{"name":"filter_alt","tags":["edit","filter","funnel","options","refine","sift"]},{"name":"thumb_up","tags":["favorite","fingers","gesture","hand","hands","like","rank","ranking","rate","rating","thumb","up"]},{"name":"event","tags":["calendar","date","day","event","mark","month","range","remember","reminder","today","week"]},{"name":"star","tags":["best","bookmark","favorite","highlight","ranking","rate","rating","save","star","toggle"]},{"name":"fingerprint","tags":["finger","fingerprint","id","identification","identity","print","reader","thumbprint","verification"]},{"name":"content_copy","tags":["content","copy","cut","doc","document","duplicate","file","multiple","paste","stack"]},{"name":"login","tags":["access","app","application","arrow","components","design","enter","in","interface","left","log","login","screen","sign","site","ui","ux","web","website"]},{"name":"add_circle","tags":["+","add","circle","counter","create","new","plus"]},{"name":"visibility_off","tags":["disabled","enabled","eye","off","on","reveal","see","show","slash","view","visibility"]},{"name":"check_circle_outline","tags":["approve","check","circle","complete","done","finished","mark","ok","outline","select","tick","validate","verified","yes"]},{"name":"chevron_left","tags":["DISABLE_IOS","arrow","arrows","chevron","direction","disable_ios","left"]},{"name":"calendar_today","tags":["calendar","date","day","event","month","schedule","today"]},{"name":"send","tags":["email","mail","message","paper","plane","reply","right","send","share"]},{"name":"check_box","tags":["approved","box","button","check","component","control","form","mark","ok","select","selected","selection","tick","toggle","ui","yes"]},{"name":"highlight_off","tags":["cancel","clear","close","exit","highlight","no","off","quit","remove","stop","x"]},{"name":"navigate_next","tags":["arrow","arrows","direction","navigate","next","right"]},{"name":"help","tags":["?","assistance","circle","help","info","information","punctuation","question mark","recent","restore","shape","support","symbol"]},{"name":"phone","tags":["call","cell","contact","device","hardware","mobile","phone","telephone"]},{"name":"paid","tags":["bill","card","cash","circle","coin","commerce","cost","credit","currency","dollars","finance","monetization","money","on","online","pay","payment","shopping","symbol"]},{"name":"task_alt","tags":["approve","check","circle","complete","done","mark","ok","select","task","tick","validate","verified","yes"]},{"name":"question_answer","tags":["answer","bubble","chat","comment","communicate","conversation","feedback","message","question","speech","talk"]},{"name":"expand_less","tags":["arrow","arrows","chevron","collapse","direction","expand","expandable","less","list","up"]},{"name":"clear","tags":["back","cancel","clear","correct","delete","erase","exit","remove","x"]},{"name":"date_range","tags":["calendar","date","day","event","month","range","remember","reminder","schedule","time","today","week"]},{"name":"article","tags":["article","doc","document","file","page","paper","text","writing"]},{"name":"error","tags":["!","alert","attention","caution","circle","danger","error","exclamation","important","mark","notification","symbol","warning"]},{"name":"photo_camera","tags":["camera","image","photo","photography","picture"]},{"name":"check_box_outline_blank","tags":["blank","box","button","check","component","control","dash","dashed","deselected","empty","form","outline","select","selection","square","tick","toggle","ui"]},{"name":"image","tags":["image","landscape","mountain","mountains","photo","photography","picture"]},{"name":"shopping_bag","tags":["bag","bill","business","buy","card","cart","cash","coin","commerce","credit","currency","dollars","money","online","pay","payment","shop","shopping","store","storefront"]},{"name":"person_outline","tags":["account","face","human","outline","people","person","profile","user"]},{"name":"school","tags":["academy","achievement","cap","class","college","education","graduation","hat","knowledge","learning","school","university"]},{"name":"file_upload","tags":["arrow","arrows","download","drive","export","file","up","upload"]},{"name":"file_upload_off","tags":["arrow","arrows","disabled","download","drive","enabled","export","file","off","offline","on","slash","up","upload"]},{"name":"perm_identity","tags":["account","avatar","face","human","identity","people","perm","person","profile","thumbnail","user"]},{"name":"credit_card","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","shopping","symbol"]},{"name":"history","tags":["arrow","back","backwards","clock","date","device","history","home","nest","refresh","renew","reset","restore","reverse","rotate","schedule","time","turn"]},{"name":"trending_up","tags":["analytics","arrow","data","diagram","graph","infographic","measure","metrics","movement","rate","rating","statistics","tracking","trending","up"]},{"name":"support_agent","tags":["agent","care","customer","face","headphone","person","representative","service","support"]},{"name":"account_balance","tags":["account","balance","bank","bill","building","card","cash","coin","commerce","credit","currency","dollars","finance","government","money","online","pay","payment"]},{"name":"delete_outline","tags":["bin","can","delete","garbage","outline","remove","trash"]},{"name":"attach_money","tags":["bill","card","cash","circle","coin","commerce","cost","credit","currency","dollars","finance","monetization","money","on","online","pay","payment","shopping","symbol"]},{"name":"person_add","tags":["+","account","add","avatar","face","human","new","people","person","plus","profile","symbol","user"]},{"name":"public","tags":["earth","global","globe","map","network","planet","public","social","space","web","world"]},{"name":"save","tags":["data","disk","document","drive","file","floppy","multimedia","save","storage"]},{"name":"mail","tags":["email","envelop","letters","mail","message","send"]},{"name":"report_problem","tags":["!","alert","attention","caution","danger","error","exclamation","feedback","important","mark","notification","problem","report","symbol","triangle","warning"]},{"name":"fact_check","tags":["approve","check","complete","done","fact","list","mark","ok","select","tick","validate","verified","yes"]},{"name":"radio_button_unchecked","tags":["bullet","button","circle","deselected","form","off","on","point","radio","record","select","toggle","unchecked"]},{"name":"verified_user","tags":["approve","certified","check","complete","done","mark","ok","privacy","private","protect","protection","security","select","shield","tick","user","validate","verified","yes"]},{"name":"assignment","tags":["assignment","clipboard","doc","document","text","writing"]},{"name":"assignment_add","tags":["+","add","assignment","clipboard","doc","document","new","note","plus","quick","symbol","text","writing"]},{"name":"link","tags":["chain","clip","connection","link","linked","links","multimedia","url"]},{"name":"play_circle_filled","tags":["arrow","circle","control","controls","media","music","play","video"]},{"name":"emoji_events","tags":["achievement","award","chalice","champion","cup","emoji","events","first","prize","reward","sport","trophy","winner"]},{"name":"remove","tags":["can","delete","minus","negative","remove","substract","trash"]},{"name":"star_rate","tags":["achievement","bookmark","favorite","highlight","important","marked","ranking","rate","rating rank","reward","save","saved","shape","special","star"]},{"name":"apps","tags":["all","applications","apps","circles","collection","components","dots","grid","interface","squares","ui","ux"]},{"name":"business","tags":["apartment","architecture","building","business","company","estate","home","place","real","residence","residential","shelter"]},{"name":"filter_list","tags":["filter","lines","list","organize","sort"]},{"name":"filter_list_alt","tags":["change","edit","filter","funnel","list. alt"]},{"name":"arrow_right_alt","tags":["alt","arrow","arrows","direction","east","navigation","pointing","right"]},{"name":"chat","tags":["bubble","chat","comment","communicate","feedback","message","speech"]},{"name":"account_balance_wallet","tags":["account","balance","bank","bill","card","cash","coin","commerce","credit","currency","dollars","finance","money","online","pay","payment","wallet"]},{"name":"payments","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","layer","money","multiple","online","pay","payment","payments","price","shopping","symbol"]},{"name":"menu_book","tags":["book","dining","food","meal","menu","restaurant"]},{"name":"folder","tags":["data","doc","document","drive","file","folder","folders","sheet","slide","storage"]},{"name":"keyboard_arrow_down","tags":["arrow","arrows","down","keyboard"]},{"name":"autorenew","tags":["around","arrow","arrows","autorenew","cache","cached","direction","inprogress","load","loading refresh","navigation","renew","rotate","turn"]},{"name":"build","tags":["adjust","build","fix","home","nest","repair","tool","tools","wrench"]},{"name":"videocam","tags":["cam","camera","conference","film","filming","hardware","image","motion","picture","video","videography"]},{"name":"view_list","tags":["design","format","grid","layout","lines","list","stacked","view","website"]},{"name":"print","tags":["draft","fax","ink","machine","office","paper","print","printer","send"]},{"name":"work","tags":["bag","baggage","briefcase","business","case","job","suitcase","work"]},{"name":"store","tags":["bill","building","business","card","cash","coin","commerce","company","credit","currency","dollars","market","money","online","pay","payment","shop","shopping","store","storefront"]},{"name":"analytics","tags":["analytics","assessment","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"radio_button_checked","tags":["app","application","bullet","button","checked","circle","components","design","form","interface","off","on","point","radio","record","screen","select","selected","site","toggle","ui","ux","web","website"]},{"name":"phone_iphone","tags":["Android","OS","cell","device","hardware","iOS","iphone","mobile","phone","tablet"]},{"name":"play_circle","tags":["arrow","circle","control","controls","media","music","play","video"]},{"name":"tune","tags":["adjust","audio","controls","custom","customize","edit","editing","filter","filters","instant","mix","music","options","setting","settings","slider","sliders","switches","tune"]},{"name":"delete_forever","tags":["bin","can","cancel","clear","delete","exit","forever","garbage","remove","trash","x"]},{"name":"today","tags":["calendar","date","day","event","mark","month","remember","reminder","schedule","time","today"]},{"name":"grid_view","tags":["app","application square","blocks","components","dashboard","design","grid","interface","layout","screen","site","tiles","ui","ux","view","web","website","window"]},{"name":"east","tags":["arrow","directional","east","maps","navigation","right"]},{"name":"inventory_2","tags":["archive","box","file","inventory","organize","packages","product","stock","storage","supply"]},{"name":"mail_outline","tags":["email","envelop","letters","mail","message","outline","send"]},{"name":"admin_panel_settings","tags":["account","admin","avatar","certified","face","human","panel","people","person","privacy","private","profile","protect","protection","security","settings","shield","user","verified"]},{"name":"mic","tags":["dictation","hear","hearing","keyboard","mic","microphone","noise","record","recorder","sound","speaker","voice"]},{"name":"calendar_month","tags":["calendar","date","day","event","month","schedule","today"]},{"name":"group","tags":["accounts","committee","face","family","friends","group","humans","network","people","persons","profiles","social","team","users"]},{"name":"picture_as_pdf","tags":["alphabet","as","character","copy","document","duplicate","file","font","image","letters","multiple","pdf","photo","photography","picture","stack","symbol","text","type"]},{"name":"lock_open","tags":["lock","open","password","privacy","private","protection","safety","secure","security","unlocked"]},{"name":"lock_outline","tags":["lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"volume_up","tags":["audio","control","music","sound","speaker","tv","up","volume"]},{"name":"watch_later","tags":["clock","date","later","schedule","time","watch"]},{"name":"grade","tags":["'favorite_news'  .","'star_outline'","Duplicate of 'star_boarder'","star_border_purple500'"]},{"name":"receipt_long","tags":["bill","check","document","list","long","paper","paperwork","receipt","record","store","transaction"]},{"name":"local_offer","tags":["deal","discount","offer","price","shop","shopping","store","tag"]},{"name":"room","tags":["destination","direction","location","maps","pin","place","room","stop"]},{"name":"update","tags":["arrow","back","backwards","clock","forward","history","load","refresh","reverse","schedule","time","update"]},{"name":"badge","tags":["account","avatar","badge","card","certified","employee","face","human","id","id card","identification","name","people","person","profile","security","user","work"]},{"name":"savings","tags":["bank","bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","pig","piggy","savings","symbol"]},{"name":"code","tags":["brackets","code","css","develop","developer","engineer","engineering","html","platform"]},{"name":"light_mode","tags":["bright","brightness","day","device","light","lighting","mode","morning","sky","sun","sunny"]},{"name":"receipt","tags":[]},{"name":"circle","tags":["angle","circle","eye","fish","full","geometry","image","lens","moon","panorama","photo","photography","picture","wide"]},{"name":"inventory","tags":["archive","box","clipboard","doc","document","file","inventory","organize","packages","product","stock","supply"]},{"name":"add_shopping_cart","tags":["add","card","cart","cash","checkout","coin","commerce","credit","currency","dollars","money","online","pay","payment","plus","shopping"]},{"name":"contact_support","tags":["?","bubble","chat","comment","communicate","contact","help","info","information","mark","message","punctuation","question","question mark","speech","support","symbol"]},{"name":"category","tags":["categories","category","circle","collection","items","product","shapes","sort","square","triangle"]},{"name":"edit_note","tags":["compose","create","draft","edit","editing","input","lines","note","pen","pencil","text","write","writing"]},{"name":"insights","tags":["ai","analytics","artificial","automatic","automation","bar","bars","chart","custom","data","diagram","genai","graph","infographic","insights","intelligence","magic","measure","metrics","smart","spark","sparkle","star","stars","statistics","tracking"]},{"name":"power_settings_new","tags":["info","information","off","on","power","save","settings","shutdown"]},{"name":"campaign","tags":["alert","announcement","campaign","loud","megaphone","microphone","notification","speaker"]},{"name":"format_list_bulleted","tags":["align","alignment","bulleted","doc","edit","editing","editor","format","list","notes","sheet","spreadsheet","text","type","writing"]},{"name":"format_list_bulleted_add","tags":["+","add","align","alignment","bulleted","doc","edit","editing","editor","format","list","new","note","notes","plus","quick","sheet","spreadsheet","symbol","text","type","writing"]},{"name":"star_border","tags":["best","bookmark","border","favorite","highlight","outline","ranking","rate","rating","save","star","toggle"]},{"name":"pause","tags":["control","controls","media","music","pause","video"]},{"name":"remove_circle_outline","tags":["block","can","circle","delete","minus","negative","outline","remove","substract","trash"]},{"name":"warning_amber","tags":["!","alert","amber","attention","caution","danger","error","exclamation","important","mark","notification","symbol","triangle","warning"]},{"name":"wifi","tags":["connection","data","internet","network","scan","service","signal","wifi","wireless"]},{"name":"arrow_back_ios_new","tags":["DISABLE_IOS","app","application","arrow","back","chevron","components","direction","disable_ios","interface","ios","left","navigation","previous","screen","site","ui","ux","web","website"]},{"name":"restart_alt","tags":["alt","around","arrow","inprogress","load","loading refresh","reboot","renew","repeat","reset","restart"]},{"name":"done_all","tags":["all","approve","check","complete","done","layers","mark","multiple","ok","select","stack","tick","validate","verified","yes"]},{"name":"pets","tags":["animal","cat","dog","hand","paw","pet"]},{"name":"storefront","tags":["business","buy","cafe","commerce","front","market","places","restaurant","retail","sell","shop","shopping","store","storefront"]},{"name":"sort","tags":["filter","find","lines","list","organize","sort"]},{"name":"mode_edit","tags":["compose","create","draft","draw","edit","mode","pen","pencil","write"]},{"name":"list_alt","tags":["alt","box","contained","form","format","lines","list","order","reorder","stacked","title"]},{"name":"toggle_on","tags":["active","app","application","components","configuration","control","design","disable","inable","inactive","interface","off","on","selection","settings","site","slider","switch","toggle","ui","ux","web","website"]},{"name":"dark_mode","tags":["app","application","dark","device","interface","mode","moon","night","silent","theme","ui","ux","website"]},{"name":"engineering","tags":["body","cogs","cogwheel","construction","engineering","fixing","gears","hat","helmet","human","maintenance","people","person","setting","worker"]},{"name":"explore","tags":["compass","destination","direction","east","explore","location","maps","needle","north","south","travel","west"]},{"name":"bolt","tags":["bolt","electric","energy","fast","flash","instant","lightning","power","thunderbolt"]},{"name":"construction","tags":["build","carpenter","construction","equipment","fix","hammer","improvement","industrial","industry","repair","tools","wrench"]},{"name":"qr_code_scanner","tags":["barcode","camera","code","media","product","qr","quick","response","scanner","smartphone","url","urls"]},{"name":"bookmark","tags":["archive","bookmark","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"vpn_key","tags":["access","code","door","entry","key","lock","network","passcode","password","unlock","vpn"]},{"name":"monetization_on","tags":["bill","card","cash","circle","coin","commerce","cost","credit","currency","dollars","finance","monetization","money","on","online","pay","payment","shopping","symbol"]},{"name":"attach_file","tags":["add","attach","attachment","clip","file","link","mail","media","paperclip"]},{"name":"timer","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","time","timer","watch"]},{"name":"account_box","tags":["account","avatar","box","face","human","people","person","profile","square","thumbnail","user"]},{"name":"note_add","tags":["+","add","data","doc","document","drive","file","folder","folders","new","note","page","paper","plus","sheet","slide","symbol","writing"]},{"name":"reorder","tags":["format","lines","list","order","reorder","stacked"]},{"name":"bookmark_border","tags":["archive","bookmark","border","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"arrow_right","tags":["app","application","arrow","components","direction","interface","navigation","right","screen","site","ui","ux","web","website"]},{"name":"pending_actions","tags":["actions","clipboard","clock","date","doc","document","pending","remember","schedule","time"]},{"name":"smartphone","tags":["Android","OS","call","cell","chat","device","hardware","iOS","mobile","phone","smartphone","tablet","text"]},{"name":"upload_file","tags":["arrow","data","doc","document","download","drive","file","folder","folders","page","paper","sheet","slide","up","upload","writing"]},{"name":"account_tree","tags":["account","analytics","chart","connect","data","diagram","flow","graph","infographic","measure","metrics","process","square","statistics","structure","tracking","tree"]},{"name":"shopping_basket","tags":["add","basket","bill","buy","card","cart","cash","checkout","coin","commerce","credit","currency","dollars","money","online","pay","payment","shopping"]},{"name":"flag","tags":["country","destination","emoji","flag","flags","goal","landmark","location","mark","milepost","milestone","nation","place","pole","report","save","social","start","world"]},{"name":"apartment","tags":["accommodation","apartment","architecture","building","city","company","estate","flat","home","house","office","places","real","residence","residential","shelter","units","workplace"]},{"name":"restaurant","tags":["cafe","cafeteria","cutlery","diner","dining","dinner","eat","eating","food","fork","knife","local","meal","restaurant","spoon","utensils"]},{"name":"people_alt","tags":["accounts","committee","face","family","friends","humans","network","people","persons","profiles","social","team","users"]},{"name":"reply","tags":["arrow","backward","left","mail","message","reply","send","share"]},{"name":"play_circle_outline","tags":["arrow","circle","control","controls","media","music","outline","play","video"]},{"name":"payment","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","shopping","symbol"]},{"name":"sync","tags":["360","around","arrow","arrows","direction","inprogress","load","loading refresh","renew","rotate","sync","turn"]},{"name":"task","tags":["approve","check","complete","data","doc","document","done","drive","file","folder","folders","mark","ok","page","paper","select","sheet","slide","task","tick","validate","verified","writing","yes"]},{"name":"launch","tags":["app","application","arrow","box","components","interface","launch","new","open","screen","site","ui","ux","web","website","window"]},{"name":"menu_open","tags":["app","application","arrow","components","hamburger","interface","left","line","lines","menu","open","screen","site","ui","ux","web","website"]},{"name":"add_box","tags":["add","box","new square","plus","symbol"]},{"name":"drag_indicator","tags":["app","application","circles","components","design","dots","drag","drop","indicator","interface","layout","mobile","monitor","move","phone","screen","shape","shift","site","tablet","ui","ux","web","website","window"]},{"name":"supervisor_account","tags":["account","avatar","control","custodian","face","guardian","human","parental","parental control","parents","people","person","profile","supervised","supervisor","user"]},{"name":"touch_app","tags":["app","command","fingers","gesture","hand","long press","press","tap","touch"]},{"name":"pending","tags":["circle","dots","loading","pending","progress","wait","waiting"]},{"name":"zoom_in","tags":["big","bigger","find","glass","grow","in","look","magnify","magnifying","plus","scale","search","see","size","zoom"]},{"name":"manage_search","tags":["glass","history","magnifying","manage","search","text"]},{"name":"remove_circle","tags":["block","can","circle","delete","minus","negative","remove","substract","trash"]},{"name":"group_add","tags":["accounts","add","committee","face","family","friends","group","humans","increase","more","network","people","persons","plus","profiles","social","team","users"]},{"name":"chat_bubble_outline","tags":["bubble","chat","comment","communicate","feedback","message","outline","speech"]},{"name":"assessment","tags":["analytics","assessment","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"priority_high","tags":["!","alert","attention","caution","danger","error","exclamation","high","important","mark","notification","symbol","warning"]},{"name":"push_pin","tags":["location","marker","pin","place","push","remember","save"]},{"name":"feed","tags":["article","feed","headline","information","news","newspaper","paper","public","social","timeline"]},{"name":"leaderboard","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","leaderboard","measure","metrics","statistics","tracking"]},{"name":"summarize","tags":["doc","document","form","list","menu","note","report","summary"]},{"name":"sunny","tags":["climate","hot","summer","sun","sunny","temperature","warm","weather"]},{"name":"sunny_snowing","tags":["climate","cold","snow","sun","sunny","temperature","weather","winter"]},{"name":"block","tags":["avoid","block","cancel","close","disturb","do not disturb","entry","exit","no","prohibited","quit","remove","stop"]},{"name":"block_flipped","tags":["avoid","block","cancel","close","disturb","do not disturb","entry","exit","no","prohibited","quit","remove","stop"]},{"name":"event_available","tags":["approve","available","calendar","check","complete","date","done","event","mark","ok","schedule","select","tick","time","validate","verified","yes"]},{"name":"thumb_up_off_alt","tags":["alt","disabled","enabled","favorite","fingers","gesture","hand","hands","like","off","offline","on","rank","ranking","rate","rating","slash","thumb","up"]},{"name":"directions_car","tags":["automobile","car","cars","direction","directions","maps","public","transportation","vehicle"]},{"name":"open_in_full","tags":["action","arrow","arrows","expand","full","grow","in","move","open"]},{"name":"auto_stories","tags":["auto","book","flipping","pages","stories"]},{"name":"post_add","tags":["+","add","data","doc","document","drive","file","folder","folders","page","paper","plus","post","sheet","slide","text","writing"]},{"name":"calculate","tags":["+","-","=","calculate","count","finance calculator","math"]},{"name":"alternate_email","tags":["@","address","alternate","contact","email","tag"]},{"name":"create","tags":["compose","create","edit","editing","input","new","pen","pencil","write","writing"]},{"name":"cloud_upload","tags":["app","application","arrow","backup","cloud","connection","download","drive","files","folders","internet","network","sky","storage","up","upload"]},{"name":"cloudy_snowing","tags":["climate","cloud","cold","snow","temperature","weather","winter"]},{"name":"local_fire_department","tags":["911","climate","department","fire","firefighter","flame","heat","home","hot","nest","thermostat"]},{"name":"bar_chart","tags":["analytics","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"barcode_reader","tags":["barcode","ecommerce","handheld","machine","price","reader","scan","scanner","shop","shopping","tag"]},{"name":"password","tags":["code","key","login","password","pin","security","star","unlock"]},{"name":"collections","tags":["album","collections","gallery","image","landscape","library","mountain","mountains","photo","photography","picture","stack"]},{"name":"preview","tags":["design","eye","layout","preview","reveal","screen","see","show","site","view","web","website","window","www"]},{"name":"star_outline","tags":["bookmark","favorite","half","highlight","ranking","rate","rating","save","star","toggle"]},{"name":"exit_to_app","tags":["app","application","arrow","components","design","exit","export","interface","layout","leave","mobile","monitor","move","output","phone","screen","site","tablet","to","ui","ux","web","website","window"]},{"name":"done_outline","tags":["all","approve","check","complete","done","mark","ok","outline","select","tick","validate","verified","yes"]},{"name":"psychology","tags":["behavior","body","brain","cognitive","function","gear","head","human","intellectual","mental","mind","people","person","preferences","psychiatric","psychology","science","settings","social","therapy","thinking","thoughts"]},{"name":"assignment_ind","tags":["account","assignment","clipboard","doc","document","face","ind","people","person","profile","user"]},{"name":"volunteer_activism","tags":["activism","donation","fingers","gesture","giving","hand","hands","heart","love","sharing","volunteer"]},{"name":"navigate_before","tags":["arrow","arrows","before","direction","left","navigate"]},{"name":"published_with_changes","tags":["approve","arrow","arrows","changes","check","complete","done","inprogress","load","loading","mark","ok","published","refresh","renew","replace","rotate","select","tick","validate","verified","with","yes"]},{"name":"add_a_photo","tags":["+","a photo","add","camera","lens","new","photography","picture","plus","symbol"]},{"name":"auto_awesome","tags":["adjust","ai","artificial","automatic","automation","custom","edit","editing","enhance","genai","intelligence","magic","smart","spark","sparkle","star","stars"]},{"name":"card_giftcard","tags":["account","balance","bill","card","cart","cash","certificate","coin","commerce","credit","currency","dollars","gift","giftcard","money","online","pay","payment","present","shopping"]},{"name":"fullscreen","tags":["adjust","app","application","components","full","fullscreen","interface","screen","site","size","ui","ux","view","web","website"]},{"name":"sell","tags":["bill","card","cart","cash","coin","commerce","credit","currency","dollars","money","online","pay","payment","price","sell","shopping","tag"]},{"name":"checklist","tags":["align","alignment","approve","check","checklist","complete","doc","done","edit","editing","editor","format","list","mark","notes","ok","select","sheet","spreadsheet","text","tick","type","validate","verified","writing","yes"]},{"name":"view_in_ar","tags":["3d","ar","augmented","cube","daydream","headset","in","reality","square","view","virtual_reality","vr"]},{"name":"undo","tags":["arrow","backward","mail","previous","redo","repeat","rotate","undo"]},{"name":"arrow_drop_up","tags":["app","application","arrow","components","direction","drop","interface","navigation","screen","site","ui","up","ux","web","website"]},{"name":"feedback","tags":["!","alert","announcement","attention","caution","chat","chat bubble","comment","communicate","communication","conversation","danger","error","exclamation","failed","feedback","important","mark","message","notification","service","sms","speech","symbol","warning"]},{"name":"health_and_safety","tags":["+","add","and","certified","cross","health","home","nest","plus","privacy","private","protect","protection","safety","security","shield","symbol","verified"]},{"name":"work_outline","tags":["bag","baggage","briefcase","business","case","job","suitcase","work"]},{"name":"unfold_more","tags":["arrow","arrows","chevron","collapse","direction","down","expand","expandable","list","more","navigation","unfold"]},{"name":"travel_explore","tags":["browser","earth","explore","find","glass","global","globe","look","magnify","magnifying","map","network","planet","search","see","social","space","travel","web","world"]},{"name":"palette","tags":["art","color","colors","filters","paint","palette"]},{"name":"pallet","tags":["box","construction","factory","manufactory","storage","transport"]},{"name":"keyboard_arrow_right","tags":["arrow","arrows","keyboard","right"]},{"name":"double_arrow","tags":["arrow","arrows","direction","double","multiple","navigation","right"]},{"name":"computer","tags":["Android","OS","chrome","computer","desktop","device","hardware","iOS","mac","monitor","web","window"]},{"name":"timeline","tags":["data","history","line","movement","point","points","timeline","tracking","trending","zigzag"]},{"name":"thumb_up_alt","tags":["agreed","approved","confirm","correct","favorite","feedback","good","happy","like","okay","positive","satisfaction","social","thumb","up","vote","yes"]},{"name":"signal_cellular_alt","tags":["alt","analytics","bar","cell","cellular","chart","data","diagram","graph","infographic","internet","measure","metrics","mobile","network","phone","signal","statistics","tracking","wifi","wireless"]},{"name":"replay","tags":["arrow","arrows","control","controls","music","refresh","renew","repeat","replay","video"]},{"name":"swap_horiz","tags":["arrow","arrows","back","forward","horizontal","swap"]},{"name":"volume_off","tags":["audio","control","disabled","enabled","low","music","mute","off","on","slash","sound","speaker","tv","volume"]},{"name":"forum","tags":["bubble","chat","comment","communicate","community","conversation","feedback","forum","hub","message","speech"]},{"name":"skip_next","tags":["arrow","control","controls","music","next","play","previous","skip","video"]},{"name":"water_drop","tags":["drink","drop","droplet","eco","liquid","nature","ocean","rain","social","water"]},{"name":"assignment_turned_in","tags":["approve","assignment","check","clipboard","complete","doc","document","done","in","mark","ok","select","tick","turn","validate","verified","yes"]},{"name":"library_books","tags":["add","album","audio","book","books","collection","library","read","reading"]},{"name":"maps_home_work","tags":["building","home","house","maps","office","work"]},{"name":"dns","tags":["address","bars","dns","domain","information","ip","list","lookup","name","server","system"]},{"name":"sync_alt","tags":["alt","arrow","arrows","horizontal","internet","sync","technology","up","update","wifi"]},{"name":"how_to_reg","tags":["approve","ballot","check","complete","done","election","how","mark","ok","poll","register","registration","select","tick","to reg","validate","verified","vote","yes"]},{"name":"notifications_none","tags":["alarm","alert","bell","none","notifications","notify","reminder","sound"]},{"name":"stars","tags":["achievement","bookmark","circle","favorite","highlight","important","marked","ranking","rate","rating rank","reward","save","saved","shape","special","star"]},{"name":"flight_takeoff","tags":["air","aircraft","airplane","airplanes","airport","arrival","arriving","departing","departure","flight","flights","fly","flying","landing","plane","planes","signal","transportation","travel","trip"]},{"name":"label","tags":["favorite","indent","label","library","mail","remember","save","stamp","sticker","tag"]},{"name":"devices","tags":["Android","OS","computer","desktop","device","hardware","iOS","laptop","mobile","monitor","phone","tablet","watch","wearable","web"]},{"name":"chat_bubble","tags":["bubble","chat","comment","communicate","feedback","message","speech"]},{"name":"emoji_emotions","tags":["+","add","emoji","emotions","expressions","face","feelings","glad","happiness","happy","icon","icons","insert","like","mood","new","person","pleased","plus","smile","smiling","social","survey","symbol"]},{"name":"remove_red_eye","tags":["eye","iris","look","looking","preview","red","remove","see","sight","vision"]},{"name":"content_paste","tags":["clipboard","content","copy","cut","doc","document","file","multiple","paste"]},{"name":"folder_open","tags":["data","doc","document","drive","file","folder","folders","open","sheet","slide","storage"]},{"name":"text_snippet","tags":["data","doc","document","file","note","notes","snippet","storage","text","writing"]},{"name":"tips_and_updates","tags":["ai","alert","and","announcement","artificial","automatic","automation","custom","electricity","genai","idea","info","information","intelligence","light","lightbulb","magic","smart","spark","sparkle","star","tips","updates"]},{"name":"my_location","tags":["destination","direction","location","maps","navigation","pin","place","point","stop"]},{"name":"textsms","tags":["bubble","chat","comment","communicate","dots","feedback","message","speech","textsms"]},{"name":"cloud","tags":["climate","cloud","connection","internet","network","queue","sky","temperature","upload","weather"]},{"name":"sports_esports","tags":["asset","console","control","controller","device","entertainment","esports","game","gamepad","gaming","google","handheld","hardware","hobby","online","playstation","remote","social","sports","stadia","video","video game","videogame","xbox"]},{"name":"security","tags":["certified","privacy","private","protect","protection","security","shield","verified"]},{"name":"request_quote","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","online","pay","payment","price","quote","request","shopping","symbol"]},{"name":"toggle_off","tags":["active","app","application","components","configuration","control","design","disable","inable","inactive","interface","off","on","selection","settings","site","slider","switch","toggle","ui","ux","web","website"]},{"name":"book","tags":["book","bookmark","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"contact_page","tags":["account","avatar","contact","data","doc","document","drive","face","file","folder","folders","human","page","people","person","profile","sheet","slide","storage","user","writing"]},{"name":"speed","tags":["arrow","control","controls","fast","gauge","meter","motion","music","slow","speed","speedometer","velocity","video"]},{"name":"bug_report","tags":["animal","bug","fix","insect","issue","problem","report","testing","virus","warning"]},{"name":"space_dashboard","tags":["cards","dashboard","format","grid","layout","rectangle","shapes","space","squares","web","website"]},{"name":"fiber_manual_record","tags":["circle","dot","fiber","manual","play","record","watch"]},{"name":"report","tags":["!","alert","attention","caution","danger","error","exclamation","important","mark","notification","octagon","report","symbol","warning"]},{"name":"alarm","tags":["alarm","alert","bell","clock","countdown","date","notification","schedule","time"]},{"name":"cached","tags":["around","arrows","cache","cached","inprogress","load","loading refresh","renew","rotate"]},{"name":"translate","tags":["language","speaking","speech","translate","translator","words"]},{"name":"pan_tool","tags":["fingers","gesture","hand","hands","human","move","pan","scan","stop","tool"]},{"name":"gavel","tags":["agreement","contract","court","document","gavel","government","judge","law","mallet","official","police","rule","rules","terms"]},{"name":"settings_suggest","tags":["ai","artificial","automatic","automation","change","custom","details","gear","genai","intelligence","magic","options","recommendation","service","settings","smart","spark","sparkle","star","suggest","suggestion","system"]},{"name":"file_copy","tags":["content","copy","cut","doc","document","duplicate","file","multiple","past","stack"]},{"name":"edit_calendar","tags":["calendar","compose","create","date","day","draft","edit","editing","event","month","pen","pencil","schedule","write","writing"]},{"name":"edit_document","tags":["compose","create","doc","document","draft","drive","edit","editing","file","folder","folders","input","page","paper","pen","pencil","write","writing"]},{"name":"contact_mail","tags":["account","address","avatar","communicate","contact","email","face","human","info","information","mail","message","people","person","profile","user"]},{"name":"quiz","tags":["?","assistance","faq","help","info","information","punctuation","question mark","quiz","support","symbol","test"]},{"name":"supervised_user_circle","tags":["account","avatar","circle","control","face","human","parental","parents","people","person","profile","supervised","supervisor","user"]},{"name":"cloud_download","tags":["app","application","arrow","backup","cloud","connection","down","download","drive","files","folders","internet","network","sky","storage","upload"]},{"name":"stop","tags":["control","controls","music","pause","play","square","stop","video"]},{"name":"person_search","tags":["account","avatar","face","find","glass","human","look","magnify","magnifying","people","person","profile","search","user"]},{"name":"location_city","tags":["apartments","architecture","buildings","business","city","estate","home","landscape","location","place","real","residence","residential","shelter","town","urban"]},{"name":"sentiment_very_satisfied","tags":["emotions","expressions","face","feelings","glad","happiness","happy","like","mood","person","pleased","satisfied","sentiment","smile","smiling","survey","very"]},{"name":"ios_share","tags":["arrow","export","ios","send","share","up"]},{"name":"minimize","tags":["app","application","components","design","interface","line","minimize","screen","shape","site","ui","ux","web","website"]},{"name":"qr_code","tags":["barcode","camera","code","media","product","qr","quick","response","smartphone","url","urls"]},{"name":"sentiment_satisfied_alt","tags":["account","alt","emoji","face","happy","human","people","person","profile","satisfied","sentiment","smile","user"]},{"name":"local_mall","tags":["bag","bill","building","business","buy","card","cart","cash","coin","commerce","credit","currency","dollars","handbag","local","mall","money","online","pay","payment","shop","shopping","store","storefront"]},{"name":"qr_code_2","tags":["barcode","camera","code","media","product","qr","quick","response","smartphone","url","urls"]},{"name":"flight","tags":["air","aircraft","airplane","airplanes","airport","flight","flights","fly","flying","mode","on","plane","planes","signal","transportation","travel","trip"]},{"name":"desktop_windows","tags":["Android","OS","chrome","desktop","device","display","hardware","iOS","mac","monitor","screen","television","tv","web","window","windows"]},{"name":"music_note","tags":["audio","audiotrack","key","music","note","sound","track"]},{"name":"sentiment_satisfied","tags":["emotions","expressions","face","feelings","glad","happiness","happy","like","mood","person","pleased","satisfied","sentiment","smile","smiling","survey"]},{"name":"android","tags":["android","character","logo","mascot","toy"]},{"name":"accessibility","tags":["accessibility","accessible","body","handicap","help","human","people","person"]},{"name":"backspace","tags":["arrow","back","backspace","cancel","clear","correct","delete","erase","remove"]},{"name":"precision_manufacturing","tags":["arm","automatic","chain","conveyor","crane","factory","industry","machinery","manufacturing","mechanical","precision","production","repairing","robot","supply","warehouse"]},{"name":"drag_handle","tags":["app","application ui","components","design","drag","handle","interface","layout","menu","move","screen","site","ui","ux","web","website","window"]},{"name":"smart_display","tags":["airplay","cast","chrome","connect","device","display","play","screen","screencast","smart","stream","television","tv","video","wireless"]},{"name":"near_me","tags":["destination","direction","location","maps","me","navigation","near","pin","place","point","stop"]},{"name":"west","tags":["arrow","directional","left","maps","navigation","west"]},{"name":"get_app","tags":["app","arrow","arrows","down","download","downloads","export","get","install","play","upload"]},{"name":"person_add_alt","tags":["+","account","add","face","human","people","person","plus","profile","user"]},{"name":"fitness_center","tags":["athlete","center","dumbbell","exercise","fitness","gym","hobby","places","sport","weights","workout"]},{"name":"shield","tags":["certified","privacy","private","protect","protection","security","shield","verified"]},{"name":"message","tags":["bubble","chat","comment","communicate","feedback","message","speech"]},{"name":"rocket_launch","tags":["launch","rocket","space","spaceship","takeoff"]},{"name":"record_voice_over","tags":["account","dictation","face","human","over","people","person","profile","record","recording","speak","speaking","speech","transcript","user","voice"]},{"name":"add_task","tags":["+","add","approve","check","circle","completed","increase","mark","ok","plus","select","task","tick","yes"]},{"name":"drive_file_rename_outline","tags":["compose","create","draft","drive","edit","editing","file","input","marker","pen","pencil","rename","write","writing"]},{"name":"insert_drive_file","tags":["doc","drive","file","format","insert","sheet","slide"]},{"name":"question_mark","tags":["?","assistance","help","info","information","punctuation","question mark","support","symbol"]},{"name":"trending_flat","tags":["arrow","change","data","flat","metric","movement","rate","right","track","tracking","trending"]},{"name":"handyman","tags":["build","construction","fix","hammer","handyman","repair","screw","screwdriver","tools"]},{"name":"emoji_objects","tags":["bulb","creative","emoji","idea","light","objects","solution","thinking"]},{"name":"military_tech","tags":["army","award","badge","honor","medal","merit","military","order","privilege","prize","rank","reward","ribbon","soldier","star","status","tech","trophy","win","winner"]},{"name":"hourglass_empty","tags":["countdown","empty","full","hourglass","loading","minutes","time","wait","waiting"]},{"name":"help_center","tags":["?","assistance","center","help","info","information","punctuation","question mark","recent","restore","support","symbol"]},{"name":"science","tags":["beaker","chemical","chemistry","experiment","flask","glass","laboratory","research","science","tube"]},{"name":"storage","tags":["computer","data","drive","memory","storage"]},{"name":"movie","tags":["cinema","film","media","movie","slate","video"]},{"name":"accessibility_new","tags":["accessibility","accessible","body","handicap","help","human","new","people","person"]},{"name":"workspace_premium","tags":["certification","degree","ecommerce","guarantee","medal","permit","premium","ribbon","verification","workspace"]},{"name":"directions_run","tags":["body","directions","human","jogging","maps","people","person","route","run","running","walk"]},{"name":"rule","tags":["approve","check","complete","done","incomplete","line","mark","missing","no","ok","rule","select","tick","validate","verified","wrong","x","yes"]},{"name":"thumb_down","tags":["ate","dislike","down","favorite","fingers","gesture","hand","hands","like","rank","ranking","rating","thumb"]},{"name":"event_note","tags":["calendar","date","event","note","schedule","text","time","writing"]},{"name":"contacts","tags":["account","avatar","call","cell","contacts","face","human","info","information","mobile","people","person","phone","profile","user"]},{"name":"comment","tags":["bubble","chat","comment","communicate","feedback","message","outline","speech"]},{"name":"restaurant_menu","tags":["book","dining","eat","food","fork","knife","local","meal","menu","restaurant","spoon"]},{"name":"add_photo_alternate","tags":["+","add","alternate","image","landscape","mountain","mountains","new","photo","photography","picture","plus","symbol"]},{"name":"confirmation_number","tags":["admission","confirmation","entertainment","event","numbers","ticket"]},{"name":"sticky_note_2","tags":["2","bookmark","mark","message","note","paper","sticky","text","writing"]},{"name":"format_quote","tags":["doc","edit","editing","editor","format","quotation","quote","sheet","spreadsheet","text","type","writing"]},{"name":"history_edu","tags":["document","edu","education","feather","history","letters","paper","pen","quill","school","story","tools","write","writing"]},{"name":"business_center","tags":["bag","baggage","briefcase","business","case","center","places","purse","suitcase","work"]},{"name":"upload","tags":["arrow","arrows","download","drive","up","upload"]},{"name":"skip_previous","tags":["arrow","control","controls","music","next","play","previous","skip","video"]},{"name":"archive","tags":["archive","inbox","mail","store"]},{"name":"wb_sunny","tags":["balance","bright","light","lighting","sun","sunny","wb","white"]},{"name":"wb_twighlight","tags":["balance","light","lighting","noon","sun","sunset","twilight","wb","white"]},{"name":"cake","tags":["add","baked","birthday","cake","candles","celebration","dessert","food","frosting","new","party","pastries","pastry","plus","social","sweet","symbol"]},{"name":"attachment","tags":["attach","attachment","clip","compose","file","image","link"]},{"name":"source","tags":["code","composer","content","creation","data","doc","document","file","folder","mode","source","storage","view"]},{"name":"settings_applications","tags":["application","change","details","gear","info","information","options","personal","service","settings"]},{"name":"dashboard_customize","tags":["cards","customize","dashboard","format","layout","rectangle","shapes","square","web","website"]},{"name":"find_in_page","tags":["data","doc","document","drive","file","find","folder","folders","glass","in","look","magnify","magnifying","page","paper","search","see","sheet","slide","writing"]},{"name":"support","tags":["assist","buoy","help","life","lifebuoy","rescue","safe","safety","support"]},{"name":"ads_click","tags":["ads","browser","click","clicks","cursor","internet","target","traffic","web"]},{"name":"new_releases","tags":["approve","award","check","checkmark","complete","done","new","notification","ok","release","releases","select","star","symbol","tick","verification","verified","warning","yes"]},{"name":"flutter_dash","tags":["app","application","bird","dash","flutter","framework","logo","mascot","open source","program","software"]},{"name":"playlist_add","tags":["+","add","collection","list","music","new","playlist","plus","symbol"]},{"name":"save_alt","tags":["alt","arrow","disk","document","down","file","floppy","multimedia","save"]},{"name":"close_fullscreen","tags":["action","arrow","arrows","close","collapse","direction","full","fullscreen","minimize","screen"]},{"name":"credit_score","tags":["approve","bill","card","cash","check","coin","commerce","complete","cost","credit","currency","dollars","done","finance","loan","mark","money","ok","online","pay","payment","score","select","symbol","tick","validate","verified","yes"]},{"name":"layers","tags":["arrange","disabled","enabled","interaction","layers","maps","off","on","overlay","pages","slash","stack"]},{"name":"redeem","tags":["bill","card","cart","cash","certificate","coin","commerce","credit","currency","dollars","gift","giftcard","money","online","pay","payment","present","redeem","shopping"]},{"name":"spa","tags":["aromatherapy","flower","healthcare","leaf","massage","meditation","nature","petals","places","relax","spa","wellbeing","wellness"]},{"name":"announcement","tags":["!","alert","announcement","attention","bubble","caution","chat","comment","communicate","danger","error","exclamation","feedback","important","mark","message","notification","speech","symbol","warning"]},{"name":"keyboard_backspace","tags":["arrow","back","backspace","keyboard","left"]},{"name":"loyalty","tags":["benefits","card","credit","heart","loyalty","membership","miles","points","program","subscription","tag","travel","trip"]},{"name":"swap_vert","tags":["arrow","arrows","direction","down","navigation","sort","sorting","swap","up","vert","vertical"]},{"name":"sentiment_dissatisfied","tags":["angry","disappointed","dislike","dissatisfied","emotions","expressions","face","feelings","frown","mood","person","sad","sentiment","survey","unhappy","unsatisfied","upset"]},{"name":"medical_services","tags":["aid","bag","briefcase","emergency","first","kit","medical","medicine","services"]},{"name":"view_headline","tags":["design","format","grid","headline","layout","paragraph","text","view","website"]},{"name":"arrow_circle_right","tags":["arrow","circle","direction","navigation","right"]},{"name":"format_list_numbered","tags":["align","alignment","digit","doc","edit","editing","editor","format","list","notes","numbered","numbers","sheet","spreadsheet","symbol","text","type","writing"]},{"name":"phone_android","tags":["OS","android","cell","device","hardware","iOS","mobile","phone","tablet"]},{"name":"sms","tags":["3","bubble","chat","communication","conversation","dots","message","more","service","sms","speech","three"]},{"name":"restore","tags":["arrow","back","backwards","clock","date","device","history","home","nest","refresh","renew","reset","restore","reverse","rotate","schedule","time","turn"]},{"name":"policy","tags":["certified","find","glass","legal","look","magnify","magnifying","policy","privacy","private","protect","protection","search","security","see","shield","verified"]},{"name":"dangerous","tags":["broken","danger","dangerous","fix","no","sign","stop","update","warning","wrong","x"]},{"name":"battery_full","tags":["0","bar","battery","cell","charge","full","mobile","power"]},{"name":"euro_symbol","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","euro","finance","money","online","pay","payment","symbol"]},{"name":"query_stats","tags":["analytics","chart","data","diagram","find","glass","graph","infographic","line","look","magnify","magnifying","measure","metrics","query","search","see","statistics","stats","tracking"]},{"name":"group_work","tags":["alliance","collaboration","group","partnership","team","teamwork","together","work"]},{"name":"expand_circle_down","tags":["arrow","arrows","chevron","circle","collapse","direction","down","expand","expandable","list","more"]},{"name":"sensors","tags":["connection","network","scan","sensors","signal","wireless"]},{"name":"keyboard_arrow_up","tags":["arrow","arrows","chevron","collapse","direction","expand","expandable","less","list","up"]},{"name":"brush","tags":["art","brush","design","draw","edit","editing","paint","painting","tool"]},{"name":"meeting_room","tags":["building","door","doorway","entrance","home","house","interior","meeting","office","open","places","room"]},{"name":"key","tags":["access","door","entry","key","lock","password","unlock"]},{"name":"house","tags":["architecture","building","estate","family","home","homepage","house","place","places","real","residence","residential","shelter"]},{"name":"lunch_dining","tags":["breakfast","dining","dinner","drink","fastfood","food","hamburger","lunch","meal"]},{"name":"table_chart","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic grid","measure","metrics","statistics","table","tracking"]},{"name":"border_color","tags":["all","border","doc","edit","editing","editor","pen","pencil","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"compare_arrows","tags":["arrow","arrows","collide","compare","direction","left","pressure","push","right","together"]},{"name":"south","tags":["arrow","directional","down","maps","navigation","south"]},{"name":"directions_walk","tags":["body","direction","directions","human","jogging","maps","people","person","route","run","walk"]},{"name":"arrow_left","tags":["app","application","arrow","components","direction","interface","left","navigation","screen","site","ui","ux","web","website"]},{"name":"tag","tags":["hash","hashtag","key","media","numbers","pound","social","tag","trend"]},{"name":"change_circle","tags":["around","arrows","change","circle","direction","navigation","rotate"]},{"name":"subject","tags":["alignment","doc","document","email","full","justify","list","note","subject","text","writing"]},{"name":"sentiment_very_dissatisfied","tags":["angry","disappointed","dislike","dissatisfied","emotions","expressions","face","feelings","mood","person","sad","sentiment","sorrow","survey","unhappy","unsatisfied","upset","very"]},{"name":"local_hospital","tags":["911","aid","cross","emergency","first","hospital","local","medicine"]},{"name":"table_view","tags":["format","grid","group","layout","multiple","table","view"]},{"name":"disabled_by_default","tags":["box","by","cancel","clear","close","default","disabled","exit","no","quit","remove","square","stop","x"]},{"name":"notification_important","tags":["!","active","alarm","alert","attention","bell","caution","chime","danger","error","exclamation","important","mark","notification","notifications","notify","reminder","ring","sound","symbol","warning"]},{"name":"celebration","tags":["activity","birthday","celebration","event","fun","party"]},{"name":"laptop","tags":["Android","OS","chrome","computer","desktop","device","hardware","iOS","laptop","mac","monitor","web","windows"]},{"name":"loop","tags":["around","arrow","arrows","direction","inprogress","load","loading refresh","loop","music","navigation","renew","rotate","turn"]},{"name":"nightlight_round","tags":["dark","half","light","mode","moon","night","nightlight","round"]},{"name":"privacy_tip","tags":["alert","announcement","assistance","certified","details","help","i","info","information","privacy","private","protect","protection","security","service","shield","support","tip","verified"]},{"name":"import_contacts","tags":["address","book","contacts","import","info","information","open"]},{"name":"equalizer","tags":["adjustment","analytics","chart","data","equalizer","graph","measure","metrics","music","noise","sound","static","statistics","tracking","volume"]},{"name":"app_registration","tags":["app","apps","edit","pencil","register","registration"]},{"name":"keyboard_double_arrow_right","tags":["arrow","arrows","direction","double","multiple","navigation","right"]},{"name":"handshake","tags":["agreement","hand","hands","partnership","shake"]},{"name":"corporate_fare","tags":["architecture","building","business","corporate","estate","fare","organization","place","real","residence","residential","shelter"]},{"name":"local_library","tags":["book","community learning","library","local","read"]},{"name":"https","tags":["https","lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"euro","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","euro","euros","finance","money","online","pay","payment","price","shopping","symbol"]},{"name":"coronavirus","tags":["19","bacteria","coronavirus","covid","disease","germs","illness","sick","social"]},{"name":"price_check","tags":["approve","bill","card","cash","check","coin","commerce","complete","cost","credit","currency","dollars","done","finance","mark","money","ok","online","pay","payment","price","select","shopping","symbol","tick","validate","verified","yes"]},{"name":"live_tv","tags":["Android","OS","antennas hardware","chrome","desktop","device","iOS","live","mac","monitor","movie","play","stream","television","tv","web","window"]},{"name":"park","tags":["attraction","fresh","local","nature","outside","park","plant","tree"]},{"name":"toc","tags":["content","format","lines","list","order","reorder","stacked","table","title","titles","toc"]},{"name":"track_changes","tags":["bullseye","changes","circle","evolve","lines","movement","rotate","shift","target","track"]},{"name":"arrow_circle_up","tags":["arrow","circle","direction","navigation","up"]},{"name":"emoji_people","tags":["arm","body","emoji","greeting","human","people","person","social","waving"]},{"name":"flash_on","tags":["bolt","disabled","electric","enabled","energy","fast","flash","instant","lightning","off","on","slash","thunderbolt"]},{"name":"copyright","tags":["alphabet","c","character","copyright","emblem","font","legal","letters","owner","symbol","text"]},{"name":"bookmarks","tags":["bookmark","bookmarks","favorite","label","layers","library","multiple","read","reading","remember","ribbon","save","stack","tag"]},{"name":"ac_unit","tags":["ac","air","cold","conditioner","flake","snow","snowflake","temperature","unit","weather","winter"]},{"name":"contact_phone","tags":["account","avatar","call","communicate","contact","face","human","info","information","message","mobile","people","person","phone","profile","user"]},{"name":"keyboard_arrow_left","tags":["arrow","arrows","keyboard","left"]},{"name":"medication","tags":["doctor","drug","emergency","hospital","medication","medicine","pharmacy","pills","prescription"]},{"name":"grading","tags":["'favorite'_new'.  ' Remove this icon & keep 'star'.","'star_boarder'","'star_border_purple500'","'star_outline'","'star_purple500'","'star_rate'","Same as 'star'"]},{"name":"keyboard_return","tags":["arrow","back","keyboard","left","return"]},{"name":"api","tags":["api","developer","development","enterprise","software"]},{"name":"smart_toy","tags":["bot","droid","games","robot","smart","toy"]},{"name":"input","tags":["arrow","box","download","input","login","move","right"]},{"name":"self_improvement","tags":["body","calm","care","chi","human","improvement","meditate","meditation","people","person","relax","self","sitting","wellbeing","yoga","zen"]},{"name":"live_help","tags":["?","assistance","bubble","chat","comment","communicate","help","info","information","live","message","punctuation","question mark","recent","restore","speech","support","symbol"]},{"name":"query_builder","tags":["builder","clock","date","query","schedule","time"]},{"name":"perm_media","tags":["collection","copy","data","doc","document","duplicate","file","folder","folders","image","landscape","media","mountain","mountains","perm","photo","photography","picture","stack","storage"]},{"name":"download_for_offline","tags":["arrow","circle","down","download","for offline","install","upload"]},{"name":"view_module","tags":["design","format","grid","layout","module","square","squares","stacked","view","website"]},{"name":"pin","tags":["1","2","3","digit","key","login","logout","numbers","password","pattern","pin","security","star","symbol","unlock"]},{"name":"fast_forward","tags":["control","fast","forward","media","music","play","speed","time","tv","video"]},{"name":"forward_to_inbox","tags":["arrow","arrows","directions","email","envelop","forward","inbox","letters","mail","message","navigation","outgoing","right","send","to"]},{"name":"person_remove","tags":["account","avatar","delete","face","human","minus","people","person","profile","remove","unfriend","user"]},{"name":"local_atm","tags":["atm","bill","card","cart","cash","coin","commerce","credit","currency","dollars","local","money","online","pay","payment","shopping","symbol"]},{"name":"star_half","tags":["achievement","bookmark","favorite","half","highlight","important","marked","ranking","rate","rating rank","reward","save","saved","shape","special","star","toggle"]},{"name":"build_circle","tags":["adjust","build","circle","fix","repair","tool","wrench"]},{"name":"redo","tags":["arrow","backward","forward","next","redo","repeat","rotate","undo"]},{"name":"web","tags":["browser","internet","page","screen","site","web","website","www"]},{"name":"north_east","tags":["arrow","east","maps","navigation","noth","right","up"]},{"name":"north","tags":["arrow","directional","maps","navigation","north","up"]},{"name":"cottage","tags":["architecture","beach","cottage","estate","home","house","lake","lodge","maps","place","real","residence","residential","stay","traveling"]},{"name":"local_activity","tags":["activity","event","event ticket","local","star","things","ticket"]},{"name":"currency_exchange","tags":["360","around","arrow","arrows","cash","coin","commerce","currency","direction","dollars","exchange","inprogress","money","pay","renew","rotate","sync","turn","universal"]},{"name":"video_library","tags":["arrow","collection","library","play","video"]},{"name":"hourglass_bottom","tags":["bottom","countdown","half","hourglass","loading","minute","minutes","time","wait","waiting"]},{"name":"headphones","tags":["accessory","audio","device","ear","earphone","headphones","headset","listen","music","sound"]},{"name":"zoom_out","tags":["find","glass","look","magnify","magnifying","minus","negative","out","scale","search","see","size","small","smaller","zoom"]},{"name":"poll","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","poll","statistics","survey","tracking","vote"]},{"name":"perm_contact_calendar","tags":["account","calendar","contact","date","face","human","information","people","perm","person","profile","schedule","time","user"]},{"name":"forward","tags":["arrow","forward","mail","message","playback","right","sent"]},{"name":"person_pin","tags":["account","avatar","destination","direction","face","human","location","maps","people","person","pin","place","profile","stop","user"]},{"name":"home_work","tags":["architecture","building","estate","home","place","real","residence","residential","shelter","work"]},{"name":"playlist_add_check","tags":["add","approve","check","collection","complete","done","list","mark","music","ok","playlist","select","tick","validate","verified","yes"]},{"name":"local_cafe","tags":["bottle","cafe","coffee","cup","drink","food","restaurant","tea"]},{"name":"ondemand_video","tags":["Android","OS","chrome","demand","desktop","device","hardware","iOS","mac","monitor","ondemand","play","television","tv","video","web","window"]},{"name":"design_services","tags":["compose","create","design","draft","edit","editing","input","pen","pencil","ruler","service","write","writing"]},{"name":"looks_one","tags":["1","digit","looks","numbers","square","symbol"]},{"name":"backup","tags":["arrow","backup","cloud","data","drive","files folders","storage","up","upload"]},{"name":"newspaper","tags":["article","data","doc","document","drive","file","folder","folders","magazine","media","news","newspaper","notes","page","paper","sheet","slide","text","writing"]},{"name":"memory","tags":["card","chip","digital","memory","micro","processor","sd","storage"]},{"name":"open_with","tags":["arrow","arrows","direction","expand","move","open","pan","with"]},{"name":"content_cut","tags":["content","copy","cut","doc","document","file","paste","scissors","trim"]},{"name":"keyboard","tags":["computer","device","hardware","input","keyboard","keypad","letters","office","text","type"]},{"name":"hourglass_top","tags":["countdown","half","hourglass","loading","minute","minutes","time","top","wait","waiting"]},{"name":"settings_phone","tags":["call","cell","contact","device","hardware","mobile","phone","settings","telephone"]},{"name":"rss_feed","tags":["application","blog","connection","data","feed","internet","network","rss","service","signal","website","wifi","wireless"]},{"name":"first_page","tags":["arrow","back","chevron","first","left","page","rewind"]},{"name":"delivery_dining","tags":["delivery","dining","food","meal","restaurant","scooter","takeout","transportation","vehicle","vespa"]},{"name":"rate_review","tags":["comment","feedback","pen","pencil","rate","review","stars","write"]},{"name":"control_point","tags":["+","add","circle","control","plus","point"]},{"name":"gpp_good","tags":["certified","check","good","gpp","ok","pass","security","shield","sim","tick"]},{"name":"circle_notifications","tags":["active","alarm","alert","bell","chime","circle","notifications","notify","reminder","ring","sound"]},{"name":"auto_fix_high","tags":["adjust","ai","artificial","auto","automatic","automation","custom","edit","editing","enhance","erase","fix","genai","high","intelligence","magic","modify","pen","smart","spark","sparkle","star","tool","wand"]},{"name":"book_online","tags":["Android","OS","admission","appointment","book","cell","device","event","hardware","iOS","mobile","online","pass","phone","reservation","tablet","ticket"]},{"name":"notes","tags":["comment","doc","document","note","notes","text","write","writing"]},{"name":"point_of_sale","tags":["checkout","cost","machine","merchant","money","of","pay","payment","point","pos","retail","sale","system","transaction"]},{"name":"perm_phone_msg","tags":["bubble","call","cell","chat","comment","communicate","contact","device","message","msg","perm","phone","recording","speech","telephone","voice"]},{"name":"speaker_notes","tags":["bubble","chat","comment","communicate","format","list","message","notes","speaker","speech","text"]},{"name":"fullscreen_exit","tags":["adjust","app","application","components","exit","full","fullscreen","interface","screen","site","size","ui","ux","view","web","website"]},{"name":"headset_mic","tags":["accessory","audio","chat","device","ear","earphone","headphones","headset","listen","mic","music","sound","talk"]},{"name":"create_new_folder","tags":["+","add","create","data","doc","document","drive","file","folder","new","plus","sheet","slide","storage","symbol"]},{"name":"wysiwyg","tags":["composer","mode","screen","site","software","system","text","view","visibility","web","website","window","wysiwyg"]},{"name":"label_important","tags":["favorite","important","indent","label","library","mail","remember","save","stamp","sticker","tag","wing"]},{"name":"label_important_outline","tags":["favorite","important","indent","label","library","mail","outline","remember","save","stamp","sticker","tag","wing"]},{"name":"card_membership","tags":["bill","bookmark","card","cash","certificate","coin","commerce","cost","credit","currency","dollars","finance","loyalty","membership","money","online","pay","payment","shopping","subscription"]},{"name":"style","tags":["booklet","cards","filters","options","style","tags"]},{"name":"arrow_circle_down","tags":["arrow","circle","direction","down","navigation"]},{"name":"file_present","tags":["clip","data","doc","document","drive","file","folder","folders","note","paper","present","reminder","sheet","slide","storage","writing"]},{"name":"directions_bus","tags":["automobile","bus","car","cars","directions","maps","public","transportation","vehicle"]},{"name":"whatshot","tags":["arrow","circle","direction","fire","frames","hot","round","whatshot"]},{"name":"sports_soccer","tags":["athlete","athletic","ball","entertainment","exercise","football","game","hobby","soccer","social","sports"]},{"name":"indeterminate_check_box","tags":["app","application","box","button","check","components","control","design","form","indeterminate","interface","screen","select","selected","selection","site","square","toggle","ui","undetermined","ux","web","website"]},{"name":"info_outline","tags":["alert","announcement","assistance","details","help","i","info","information","outline","service","support"]},{"name":"outlined_flag","tags":["country","flag","goal","mark","nation","outlined","report","start"]},{"name":"price_change","tags":["arrows","bill","card","cash","change","coin","commerce","cost","credit","currency","dollars","down","finance","money","online","pay","payment","price","shopping","symbol","up"]},{"name":"mark_email_read","tags":["approve","check","complete","done","email","envelop","letters","mail","mark","message","note","ok","read","select","send","sent","tick","yes"]},{"name":"library_add","tags":["+","add","collection","layers","library","multiple","music","new","plus","stacked","symbol","video"]},{"name":"pageview","tags":["doc","document","find","glass","magnifying","page","paper","search","view"]},{"name":"tv","tags":["device","display","monitor","screen","screencast","stream","television","tv","video","wireless"]},{"name":"inbox","tags":["archive","email","inbox","incoming","mail","message"]},{"name":"adjust","tags":["adjust","alter","auto click","center","circle","circles","dot","fix","focus","image","move","target"]},{"name":"3d_rotation","tags":["3","3d","D","alphabet","arrow","arrows","av","camera","character","digit","font","letters","numbers","rotation","symbol","text","type","virtual_reality","vr"]},{"name":"battery_charging_full","tags":["battery","bolt","cell","charge","charging","electric","energy","full","instant","lightening","mobile","power","thunderbolt"]},{"name":"chair","tags":["chair","comfort","couch","decoration","furniture","home","house","living","lounging","loveseat","room","seat","seating","sofa"]},{"name":"directions_bike","tags":["bicycle","bike","direction","directions","human","maps","person","public","route","transportation"]},{"name":"mic_off","tags":["audio","disabled","enabled","hear","hearing","mic","microphone","mute","noise","off","on","record","recording","slash","sound","voice"]},{"name":"local_police","tags":["911","badge","law","local","officer","police","protect","protection","security","shield"]},{"name":"fastfood","tags":["drink","fastfood","food","hamburger","maps","meal","places"]},{"name":"tungsten","tags":["balance","bright","edit","editing","electricity","indoor","iridescent","lamp","light","lightbulb","lighting","setting","settings","tungsten","white","wp"]},{"name":"mood","tags":["emoji","emotions","expressions","face","feelings","glad","happiness","happy","like","mood","person","pleased","smile","smiling","social","survey"]},{"name":"pause_circle","tags":["circle","control","controls","media","music","pause","video"]},{"name":"upgrade","tags":["arrow","export","instal","line","replace","up","update","upgrade"]},{"name":"recommend","tags":["approved","circle","confirm","favorite","gesture","hand","like","reaction","recommend","social","support","thumbs","up","well"]},{"name":"directions_car_filled","tags":["automobile","car","cars","direction","directions","maps","public","transportation","vehicle"]},{"name":"fmd_good","tags":["destination","direction","fmd","good","location","maps","pin","place","stop"]},{"name":"foggy","tags":["climate","cloud","cloudy","fog","hazy","overcast","temperature","weather"]},{"name":"integration_instructions","tags":["brackets","clipboard","code","css","develop","developer","doc","document","engineer","engineering clipboard","html","instructions","integration","platform"]},{"name":"format_bold","tags":["B","alphabet","bold","character","doc","edit","editing","editor","font","format","letters","sheet","spreadsheet","styles","symbol","text","type","writing"]},{"name":"people_outline","tags":["accounts","committee","face","family","friends","humans","network","outline","people","persons","profiles","social","team","users"]},{"name":"trending_down","tags":["analytics","arrow","data","diagram","down","graph","infographic","measure","metrics","movement","rate","rating","statistics","tracking","trending"]},{"name":"change_history","tags":["change","history","shape","triangle"]},{"name":"female","tags":["female","gender","girl","lady","social","symbol","woman","women"]},{"name":"link_off","tags":["attached","chain","clip","connection","disabled","enabled","link","linked","links","multimedia","off","on","slash","url"]},{"name":"text_fields","tags":["T","add","alphabet","character","field","fields","font","input","letters","symbol","text","type"]},{"name":"swipe","tags":["arrow","arrows","fingers","gesture","hand","hands","swipe","touch"]},{"name":"reviews","tags":["bubble","chat","comment","communicate","feedback","message","rate","rating","recommendation","reviews","speech"]},{"name":"home_repair_service","tags":["box","equipment","fix","home","kit","mechanic","repair","repairing","service","tool","toolbox","tools","workshop"]},{"name":"subscriptions","tags":["enroll","list","media","order","play","signup","subscribe","subscriptions"]},{"name":"video_call","tags":["+","add","call","camera","chat","conference","film","filming","hardware","image","motion","new","picture","plus","symbol","video","videography"]},{"name":"zoom_out_map","tags":["arrow","arrows","destination","location","maps","move","out","place","stop","zoom"]},{"name":"straighten","tags":["length","measure","measurement","ruler","size","straighten"]},{"name":"arrow_drop_down_circle","tags":["app","application","arrow","circle","components","direction","down","drop","interface","navigation","screen","site","ui","ux","web","website"]},{"name":"bed","tags":["bed","bedroom","double","full","furniture","home","hotel","house","king","night","pillows","queen","rest","room","size","sleep"]},{"name":"drive_eta","tags":["automobile","car","cars","destination","direction","drive","estimate","eta","maps","public","transportation","travel","trip","vehicle"]},{"name":"class","tags":["archive","book","bookmark","class","favorite","label","library","read","reading","remember","ribbon","save","tag"]},{"name":"drafts","tags":["document","draft","drafts","email","file","letters","mail","message","read"]},{"name":"ballot","tags":["ballot","bullet","election","list","point","poll","vote"]},{"name":"volume_mute","tags":["audio","control","music","mute","sound","speaker","tv","volume"]},{"name":"table_rows","tags":["background","grid","layout","lines","rows","stacked","table"]},{"name":"accessible","tags":["accessibility","accessible","body","handicap","help","human","people","person","wheelchair"]},{"name":"stop_circle","tags":["circle","control","controls","music","pause","play","square","stop","video"]},{"name":"family_restroom","tags":["bathroom","child","children","family","father","gender","kids","mother","parents","restroom","wc"]},{"name":"title","tags":["T","alphabet","character","font","header","letters","subject","symbol","text","title","type"]},{"name":"biotech","tags":["biotech","chemistry","laboratory","microscope","research","science","technology"]},{"name":"insert_emoticon","tags":["account","emoji","emoticon","face","happy","human","insert","people","person","profile","sentiment","smile","user"]},{"name":"g_translate","tags":["emblem","g","google","language","logo","mark","speaking","speech","translate","translator","words"]},{"name":"last_page","tags":["app","application","arrow","chevron","components","end","forward","interface","last","page","right","screen","site","ui","ux","web","website"]},{"name":"publish","tags":["arrow","cloud","file","import","publish","up","upload"]},{"name":"repeat","tags":["arrow","arrows","control","controls","loop","media","music","repeat","video"]},{"name":"checklist_rtl","tags":["align","alignment","approve","check","checklist","complete","doc","done","edit","editing","editor","format","list","mark","notes","ok","rtl","select","sheet","spreadsheet","text","tick","type","validate","verified","writing","yes"]},{"name":"wifi_off","tags":["connection","data","disabled","enabled","internet","network","off","offline","on","scan","service","signal","slash","wifi","wireless"]},{"name":"settings_accessibility","tags":["accessibility","body","details","human","information","people","person","personal","preferences","profile","settings","user"]},{"name":"percent","tags":["math","numbers","percent","symbol"]},{"name":"insert_photo","tags":["image","insert","landscape","mountain","mountains","photo","photography","picture"]},{"name":"hotel","tags":["body","hotel","human","people","person","sleep","stay","travel","trip"]},{"name":"cleaning_services","tags":["clean","cleaning","dust","services","sweep"]},{"name":"downloading","tags":["arrow","circle","down","download","downloading","downloads","install","pending","progress","upload"]},{"name":"expand","tags":["arrow","arrows","compress","enlarge","expand","grow","move","push","together"]},{"name":"local_phone","tags":["booth","call","communication","phone","telecommunication"]},{"name":"offline_bolt","tags":["bolt","circle","electric","energy","fast","instant","lightning","offline","thunderbolt"]},{"name":"auto_graph","tags":["analytics","auto","chart","data","diagram","graph","infographic","line","measure","metrics","stars","statistics","tracking"]},{"name":"local_grocery_store","tags":["grocery","market","shop","store"]},{"name":"photo_library","tags":["album","image","library","mountain","mountains","photo","photography","picture"]},{"name":"miscellaneous_services","tags":[]},{"name":"note_alt","tags":["alt","clipboard","document","file","memo","note","page","paper","writing"]},{"name":"settings_backup_restore","tags":["arrow","back","backup","backwards","refresh","restore","reverse","rotate","settings"]},{"name":"production_quantity_limits","tags":["!","alert","attention","bill","card","cart","cash","caution","coin","commerce","credit","currency","danger","dollars","error","exclamation","important","limits","mark","money","notification","online","pay","payment","production","quantity","shopping","symbol","warning"]},{"name":"person_off","tags":["account","avatar","disabled","enabled","face","human","off","on","people","person","profile","slash","user"]},{"name":"report_gmailerrorred","tags":["!","alert","attention","caution","danger","error","exclamation","gmail","gmailerrorred","important","mark","notification","octagon","report","symbol","warning"]},{"name":"camera","tags":["aperture","camera","lens","photo","photography","picture","shutter"]},{"name":"recycling","tags":["bio","eco","green","loop","recyclable","recycle","recycling","rotate","sustainability","sustainable","trash"]},{"name":"male","tags":["boy","gender","male","man","social","symbol"]},{"name":"not_interested","tags":["cancel","clear","close","dislike","exit","interested","no","not","off","quit","remove","stop","x"]},{"name":"event_busy","tags":["busy","calendar","cancel","clear","close","date","event","exit","no","remove","schedule","stop","time","unavailable","x"]},{"name":"arrow_circle_left","tags":["arrow","circle","direction","left","navigation"]},{"name":"shuffle","tags":["arrow","arrows","control","controls","music","random","shuffle","video"]},{"name":"aspect_ratio","tags":["aspect","dash","dashed","expand","image","ratio","resize","scale","size","square"]},{"name":"other_houses","tags":["architecture","cottage","estate","home","house","houses","maps","other","place","real","residence","residential","stay","traveling"]},{"name":"model_training","tags":["arrow","bulb","idea","inprogress","light","load","loading","model","refresh","renew","restore","reverse","rotate","training"]},{"name":"unfold_less","tags":["arrow","arrows","chevron","collapse","direction","expand","expandable","inward","less","list","navigation","unfold","up"]},{"name":"insert_chart_outlined","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","insert","measure","metrics","outlined","statistics","tracking"]},{"name":"donut_large","tags":["analytics","chart","data","diagram","donut","graph","infographic","inprogress","large","measure","metrics","pie","statistics","tracking"]},{"name":"view_column","tags":["column","design","format","grid","layout","vertical","view","website"]},{"name":"segment","tags":["alignment","fonts","format","lines","list","paragraph","part","piece","rule","rules","segment","style","text"]},{"name":"checkroom","tags":["checkroom","closet","clothes","coat check","hanger"]},{"name":"mode","tags":["compose","create","draft","draw","edit","mode","pen","pencil","write"]},{"name":"portrait","tags":["account","face","human","people","person","photo","picture","portrait","profile","user"]},{"name":"camera_alt","tags":["alt","camera","image","photo","photography","picture"]},{"name":"keyboard_double_arrow_left","tags":["arrow","arrows","direction","double","left","multiple","navigation"]},{"name":"delete_sweep","tags":["bin","can","delete","garbage","remove","sweep","trash"]},{"name":"hub","tags":["center","connection","core","focal point","hub","network","nodes","nucleus","topology"]},{"name":"audiotrack","tags":["audio","audiotrack","key","music","note","sound","track"]},{"name":"calendar_view_month","tags":["calendar","date","day","event","format","grid","layout","month","schedule","today","view"]},{"name":"draw","tags":["compose","create","design","draft","draw","edit","editing","input","pen","pencil","write","writing"]},{"name":"navigation","tags":["destination","direction","location","maps","navigation","pin","place","point","stop"]},{"name":"folder_shared","tags":["account","collaboration","data","doc","document","drive","face","file","folder","human","people","person","profile","share","shared","sheet","slide","storage","team","user"]},{"name":"read_more","tags":["arrow","more","read","text"]},{"name":"stacked_bar_chart","tags":["analytics","bar","chart-chart","data","diagram","graph","infographic","measure","metrics","stacked","statistics","tracking"]},{"name":"mode_comment","tags":["bubble","chat","comment","communicate","feedback","message","mode comment","speech"]},{"name":"schedule_send","tags":["calendar","clock","date","email","letters","mail","remember","schedule","send","share","time"]},{"name":"bluetooth","tags":["bluetooth","cast","connect","connection","device","paring","streaming","symbol","wireless"]},{"name":"graphic_eq","tags":["audio","detect","detection","eq","equalizer","graphic","music","noise","recording","sound","voice"]},{"name":"markunread","tags":["email","envelop","letters","mail","markunread","message","send","unread"]},{"name":"alarm_on","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","time","timer","watch"]},{"name":"local_gas_station","tags":["auto","car","gas","local","oil","station","vehicle"]},{"name":"person_add_alt_1","tags":[]},{"name":"maximize","tags":["app","application","components","design","interface","line","maximize","screen","shape","site","ui","ux","web","website"]},{"name":"bookmark_add","tags":["+","add","bookmark","favorite","plus","remember","ribbon","save","symbol"]},{"name":"dvr","tags":["Android","OS","audio","chrome","computer","desktop","device","display","dvr","electronic","hardware","iOS","list","mac","monitor","record","recorder","screen","tv","video","web","window"]},{"name":"do_not_disturb_on","tags":["cancel","close","dash","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","stop"]},{"name":"train","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"person_pin_circle","tags":["account","circle","destination","direction","face","human","location","maps","people","person","pin","place","profile","stop","user"]},{"name":"square_foot","tags":["construction","feet","foot","inches","length","measurement","ruler","school","set","square","tools"]},{"name":"more_time","tags":["+","add","clock","date","more","new","plus","schedule","symbol","time"]},{"name":"document_scanner","tags":["article","data","doc","document","drive","file","folder","folders","notes","page","paper","scan","scanner","sheet","slide","text","writing"]},{"name":"thumbs_up_down","tags":["dislike","down","favorite","fingers","gesture","hands","like","rate","rating","thumbs","up"]},{"name":"settings_ethernet","tags":["arrows","computer","connect","connection","connectivity","dots","ethernet","internet","network","settings","wifi"]},{"name":"sort_by_alpha","tags":["alphabet","alphabetize","az","by alpha","character","font","letters","list","order","organize","sort","symbol","text","type"]},{"name":"theaters","tags":["film","movie","movies","show","showtimes","theater","theaters","watch"]},{"name":"cloud_done","tags":["app","application","approve","backup","check","cloud","complete","connection","done","drive","files","folders","internet","mark","network","ok","select","sky","storage","tick","upload","validate","verified","yes"]},{"name":"local_parking","tags":["alphabet","auto","car","character","font","garage","letters","local","park","parking","symbol","text","type","vehicle"]},{"name":"view_agenda","tags":["agenda","cards","design","format","grid","layout","stacked","view","website"]},{"name":"mark_email_unread","tags":["check","circle","email","envelop","letters","mail","mark","message","note","notification","send","unread"]},{"name":"local_florist","tags":["florist","flower","local","shop"]},{"name":"connect_without_contact","tags":["communicating","connect","contact","distance","people","signal","social","socialize","without"]},{"name":"thumb_down_off_alt","tags":["disabled","dislike","down","enabled","favorite","filled","fingers","gesture","hand","hands","like","off","offline","on","rank","ranking","rate","rating","slash","thumb"]},{"name":"sentiment_neutral","tags":["emotionless","emotions","expressions","face","feelings","fine","indifference","mood","neutral","okay","person","sentiment","survey"]},{"name":"call_end","tags":["call","cell","contact","device","end","hardware","mobile","phone","telephone"]},{"name":"subdirectory_arrow_right","tags":["arrow","directory","down","navigation","right","sub","subdirectory"]},{"name":"diamond","tags":["diamond","fashion","gems","jewelry","logo","retail","valuable","valuables"]},{"name":"podcasts","tags":["broadcast","casting","network","podcasts","signal","transmitting","wireless"]},{"name":"monitor_heart","tags":["baseline","device","ecc","ecg","fitness","health","heart","medical","monitor","track"]},{"name":"all_inclusive","tags":["all","endless","forever","inclusive","infinity","loop","mobius","neverending","strip","sustainability","sustainable"]},{"name":"wc","tags":["bathroom","closet","female","gender","male","man","restroom","room","wash","water","wc","women"]},{"name":"grass","tags":["backyard","fodder","grass","ground","home","lawn","plant","turf","yard"]},{"name":"important_devices","tags":["Android","OS","desktop","devices","hardware","iOS","important","mobile","monitor","phone","star","tablet","web"]},{"name":"back_hand","tags":["back","fingers","gesture","hand","raised"]},{"name":"hiking","tags":["backpacking","bag","climbing","duffle","hiking","mountain","social","sports","stick","trail","travel","walking"]},{"name":"masks","tags":["air","cover","covid","face","hospital","masks","medical","pollution","protection","respirator","sick","social"]},{"name":"waving_hand","tags":["bye","fingers","gesture","goodbye","greetings","hand","hello","palm","wave","waving"]},{"name":"architecture","tags":["architecture","art","compass","design","draw","drawing","engineering","geometric","tool"]},{"name":"local_post_office","tags":["delivery","email","envelop","letters","local","mail","message","office","package","parcel","post","postal","send","stamp"]},{"name":"functions","tags":["average","calculate","count","custom","doc","edit","editing","editor","functions","math","sheet","spreadsheet","style","sum","text","type","writing"]},{"name":"directions","tags":["arrow","directions","maps","right","route","sign","traffic"]},{"name":"money","tags":["100","bill","card","cash","coin","commerce","cost","credit","currency","digit","dollars","finance","money","numbers","online","pay","payment","price","shopping","symbol"]},{"name":"unpublished","tags":["approve","check","circle","complete","disabled","done","enabled","mark","off","ok","on","select","slash","tick","unpublished","validate","verified","yes"]},{"name":"notifications_off","tags":["active","alarm","alert","bell","chime","disabled","enabled","notifications","notify","off","offline","on","reminder","ring","slash","sound"]},{"name":"airport_shuttle","tags":["airport","automobile","car","cars","commercial","delivery","direction","maps","mini","public","shuttle","transport","transportation","travel","truck","van","vehicle"]},{"name":"insert_link","tags":["add","attach","clip","file","insert","link","mail","media"]},{"name":"thumb_down_alt","tags":["bad","decline","disapprove","dislike","down","feedback","hate","negative","no","reject","social","thumb","veto","vote"]},{"name":"two_wheeler","tags":["automobile","bike","car","cars","direction","maps","motorcycle","public","scooter","sport","transportation","travel","two wheeler","vehicle"]},{"name":"nightlight","tags":["dark","disturb","mode","moon","night","nightlight","sleep"]},{"name":"mic_none","tags":["dictation","hear","hearing","keyboard","mic","microphone","noise","record","recorder","sound","speaker","voice"]},{"name":"keyboard_double_arrow_down","tags":["arrow","arrows","direction","double","down","multiple","navigation"]},{"name":"invert_colors","tags":["colors","drop","droplet","edit","editing","hue","invert","inverted","palette","tone","water"]},{"name":"clear_all","tags":["all","clear","doc","document","format","lines","list"]},{"name":"mouse","tags":["click","computer","cursor","device","hardware","mouse","wireless"]},{"name":"mode_edit_outline","tags":["compose","create","draft","draw","edit","mode","outline","pen","pencil","write"]},{"name":"open_in_browser","tags":["arrow","browser","in","open","site","up","web","website","window"]},{"name":"insert_invitation","tags":["calendar","date","day","event","insert","invitation","mark","month","range","remember","reminder","today","week"]},{"name":"fast_rewind","tags":["back","control","fast","media","music","play","rewind","speed","time","tv","video"]},{"name":"opacity","tags":["color","drop","droplet","hue","invert","inverted","opacity","palette","tone","water"]},{"name":"video_camera_front","tags":["account","camera","face","front","human","image","people","person","photo","photography","picture","profile","user","video"]},{"name":"commute","tags":["automobile","car","commute","direction","maps","public","train","transportation","trip","vehicle"]},{"name":"addchart","tags":["+","addchart","analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","new","plus","statistics","symbol","tracking"]},{"name":"no_accounts","tags":["account","accounts","avatar","disabled","enabled","face","human","no","off","offline","on","people","person","profile","slash","thumbnail","unavailable","unidentifiable","unknown","user"]},{"name":"coffee","tags":["beverage","coffee","cup","drink","mug","plate","set","tea"]},{"name":"luggage","tags":["airport","bag","baggage","carry","flight","hotel","luggage","on","suitcase","travel","trip"]},{"name":"workspaces","tags":["circles","collaboration","dot","filled","group","outline","space","team","work","workspaces"]},{"name":"workspaces_filled","tags":["circles","collaboration","dot","filled","group","space","team","work","workspaces"]},{"name":"workspaces_outline","tags":["circles","collaboration","dot","group","outline","space","team","work","workspaces"]},{"name":"child_care","tags":["babies","baby","care","child","children","face","infant","kids","newborn","toddler","young"]},{"name":"sports_score","tags":["destination","flag","goal","score","sports"]},{"name":"library_music","tags":["add","album","collection","library","music","song","sounds"]},{"name":"history_toggle_off","tags":["clock","dash","dashed","date","history","off","schedule","time","toggle"]},{"name":"system_update_alt","tags":["arrow","down","download","export","system","update"]},{"name":"access_time","tags":[]},{"name":"rotate_right","tags":["around","arrow","direction","inprogress","load","loading refresh","renew","right","rotate","turn"]},{"name":"color_lens","tags":["art","color","lens","paint","pallet"]},{"name":"grid_on","tags":["background","collage","disabled","enabled","grid","image","layout","off","on","slash","view"]},{"name":"crop_free","tags":["adjust","adjustments","crop","display","edit","editing","focus","frame","free","image","photo","photos","settings","size","zoom"]},{"name":"cloud_queue","tags":["climate","cloud","connection","internet","network","queue","sky","temperature","upload","weather"]},{"name":"keyboard_voice","tags":["dictation","hear","hearing","keyboard","mic","microphone","noise","record","recorder","sound","speaker","voice"]},{"name":"format_align_left","tags":["align","alignment","doc","edit","editing","editor","format","left","sheet","spreadsheet","text","type","writing"]},{"name":"view_week","tags":["bars","columns","design","format","grid","layout","view","website","week"]},{"name":"real_estate_agent","tags":["agent","architecture","broker","estate","hand","home","house","loan","mortgage","property","real","residence","residential","sales","social"]},{"name":"rebase_edit","tags":["arrow","arrows","chart","combine","compose","create","direction","draft","edit","editing","input","navigation","path","pen","pencil","process","workflow","write","writing"]},{"name":"horizontal_rule","tags":["gmail","horizontal","line","novitas","rule"]},{"name":"topic","tags":["data","doc","document","drive","file","folder","sheet","slide","storage","topic"]},{"name":"shower","tags":["bath","bathroom","closet","home","house","place","plumbing","room","shower","sprinkler","wash","water","wc"]},{"name":"format_italic","tags":["alphabet","character","doc","edit","editing","editor","font","format","italic","letters","sheet","spreadsheet","style","symbol","text","type","writing"]},{"name":"traffic","tags":["direction","light","maps","signal","street","traffic"]},{"name":"add_business","tags":["+","add","bill","building","business","card","cash","coin","commerce","company","credit","currency","dollars","market","money","new","online","pay","payment","plus","shop","shopping","store","storefront","symbol"]},{"name":"add_call","tags":["+","add","call","cell","contact","device","hardware","mobile","new","phone","plus","symbol","telephone"]},{"name":"electrical_services","tags":["charge","cord","electric","electrical","plug","power","services","wire"]},{"name":"timelapse","tags":["duration","motion","photo","time","timelapse","timer","video"]},{"name":"youtube_searched_for","tags":["arrow","back","backwards","find","glass","history","inprogress","load","loading","look","magnify","magnifying","refresh","renew","restore","reverse","rotate","search","see","youtube"]},{"name":"front_hand","tags":["fingers","front","gesture","hand","hello","palm","stop"]},{"name":"front_loader","tags":["carry","factory","industrial","load","manufactory","supply","truck","vehicle"]},{"name":"yard","tags":["backyard","flower","garden","home","house","nature","pettle","plants","yard"]},{"name":"tour","tags":["destination","flag","places","tour","travel","visit"]},{"name":"factory","tags":["factory","industry","manufacturing","warehouse"]},{"name":"developer_board","tags":["board","chip","computer","developer","development","hardware","microchip","processor"]},{"name":"more","tags":["3","archive","bookmark","dots","etc","favorite","indent","label","more","remember","save","stamp","sticker","tab","tag","three"]},{"name":"star_purple500","tags":["500","best","bookmark","favorite","highlight","purple","ranking","rate","rating","save","star","toggle"]},{"name":"format_color_fill","tags":["bucket","color","doc","edit","editing","editor","fill","format","paint","sheet","spreadsheet","style","text","type","writing"]},{"name":"beach_access","tags":["access","beach","places","summer","sunny","umbrella"]},{"name":"local_bar","tags":["alcohol","bar","bottle","club","cocktail","drink","food","liquor","local","wine"]},{"name":"add_link","tags":["add","attach","clip","link","new","plus","symbol"]},{"name":"landscape","tags":["image","landscape","mountain","mountains","nature","photo","photography","picture"]},{"name":"slideshow","tags":["movie","photos","play","slideshow","square","video","view"]},{"name":"stream","tags":["cast","connected","feed","live","network","signal","stream","wireless"]},{"name":"videocam_off","tags":["cam","camera","conference","disabled","enabled","film","filming","hardware","image","motion","off","offline","on","picture","slash","video","videography"]},{"name":"directions_boat","tags":["automobile","boat","car","cars","direction","directions","ferry","maps","public","transportation","vehicle"]},{"name":"download_done","tags":["arrow","arrows","check","done","down","download","downloads","drive","install","installed","ok","tick","upload"]},{"name":"volume_down","tags":["audio","control","down","music","sound","speaker","tv","volume"]},{"name":"volume_down_alt","tags":["alt","audio","control","down","music","sound","speaker","tv","volume"]},{"name":"alt_route","tags":["alt","alternate","alternative","arrows","dash","dashed","direction","maps","navigation","options","other","route","routes","split","symbol"]},{"name":"mood_bad","tags":["bad","disappointment","dislike","emoji","emotions","expressions","face","feelings","mood","person","rating","social","survey","unhappiness","unhappy","unpleased","unsmile","unsmiling"]},{"name":"vaccines","tags":["aid","covid","doctor","drug","emergency","hospital","immunity","injection","medical","medication","medicine","needle","pharmacy","sick","syringe","vaccination","vaccines","vial"]},{"name":"dialpad","tags":["buttons","call","contact","device","dial","dialpad","dots","mobile","numbers","pad","phone"]},{"name":"route","tags":["directions","maps","path","route","sign","traffic"]},{"name":"hide_source","tags":["circle","disabled","enabled","hide","off","offline","on","shape","slash","source"]},{"name":"bookmark_added","tags":["added","approve","bookmark","check","complete","done","favorite","mark","ok","remember","save","select","tick","validate","verified","yes"]},{"name":"mark_as_unread","tags":["as","envelop","letters","mail","mark","post","postal","read","receive","send","unread"]},{"name":"plagiarism","tags":["doc","document","find","glass","look","magnifying","page","paper","plagiarism","search","see"]},{"name":"turned_in","tags":["archive","bookmark","favorite","in","label","library","read","reading","remember","ribbon","save","tag","turned"]},{"name":"settings_input_antenna","tags":["airplay","antenna","arrows","cast","computer","connect","connection","connectivity","dots","input","internet","network","screencast","settings","stream","wifi","wireless"]},{"name":"shop","tags":["bag","bill","buy","card","cart","cash","coin","commerce","credit","currency","dollars","google","money","online","pay","payment","play","shop","shopping","store"]},{"name":"pool","tags":["athlete","athletic","beach","body","entertainment","exercise","hobby","human","ocean","people","person","places","pool","sea","sports","swim","swimming","water"]},{"name":"search_off","tags":["cancel","clear","close","disabled","enabled","find","glass","look","magnify","magnifying","off","on","search","see","slash","stop","x"]},{"name":"approval","tags":["apply","approval","approvals","approve","certificate","certification","disapproval","drive","file","impression","ink","mark","postage","stamp"]},{"name":"currency_rupee","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","money","online","pay","payment","price","rupee","shopping","symbol"]},{"name":"power","tags":["charge","cord","electric","electrical","outlet","plug","power"]},{"name":"collections_bookmark","tags":["album","archive","bookmark","collections","favorite","gallery","label","library","read","reading","remember","ribbon","save","stack","tag"]},{"name":"not_started","tags":["circle","media","not","pause","play","started","video"]},{"name":"pedal_bike","tags":["automobile","bicycle","bike","car","cars","direction","human","maps","pedal","public","route","scooter","transportation","vehicle","vespa"]},{"name":"water","tags":["aqua","beach","lake","ocean","river","water","waves","weather"]},{"name":"router","tags":["box","cable","connection","hardware","internet","network","router","signal","wifi"]},{"name":"flight_land","tags":["air","aircraft","airplane","airplanes","airport","arrival","arriving","departing","departure","flight","flights","fly","flying","landing","plane","planes","signal","transportation","travel","trip"]},{"name":"shopping_cart_checkout","tags":["arrow","cart","cash","checkout","coin","commerce","currency","dollars","money","online","pay","payment","right","shopping"]},{"name":"agriculture","tags":["agriculture","automobile","car","cars","cultivation","farm","harvest","maps","tractor","transport","travel","truck","vehicle"]},{"name":"where_to_vote","tags":["approve","ballot","check","complete","destination","direction","done","location","maps","mark","ok","pin","place","poll","select","stop","tick","to","validate election","verified","vote","where","yes"]},{"name":"beenhere","tags":["approve","archive","beenhere","bookmark","check","complete","done","favorite","label","library","mark","ok","read","reading","remember","ribbon","save","select","tag","tick","validate","verified","yes"]},{"name":"add_comment","tags":["+","add","bubble","chat","comment","communicate","feedback","message","new","plus","speech","symbol"]},{"name":"copy_all","tags":["all","content","copy","cut","dash","dashed","doc","document","file","multiple","page","paper","past"]},{"name":"dynamic_feed","tags":["'mail_outline'","'markunread'. Keep 'mail' and remove others.","Duplicate of 'email'"]},{"name":"videogame_asset","tags":["asset","console","control","controller","device","entertainment","esports","game","gamepad","gaming","google","handheld","hardware","hobby","online","playstation","remote","social","sports","stadia","video","video game","videogame","xbox"]},{"name":"move_to_inbox","tags":["archive","arrow","down","email","envelop","inbox","incoming","letters","mail","message","move to","send"]},{"name":"crop_square","tags":["adjust","adjustments","app","application","area","components","crop","design","edit","editing","expand","frame","image","images","interface","open","photo","photos","rectangle","screen","settings","shape","shapes","site","size","square","ui","ux","web","website","window"]},{"name":"recent_actors","tags":["account","actors","avatar","card","cards","carousel","face","human","layers","list","people","person","profile","recent","thumbnail","user"]},{"name":"emoji_nature","tags":["animal","bee","bug","daisy","emoji","flower","insect","ladybug","nature","petals","spring","summer"]},{"name":"cloud_off","tags":["app","application","backup","cloud","connection","disabled","drive","enabled","files","folders","internet","network","off","offline","on","sky","slash","storage","upload"]},{"name":"panorama_fish_eye","tags":["angle","circle","eye","fish","full","geometry","image","lens","moon","panorama","photo","photography","picture","wide"]},{"name":"lens","tags":["angle","circle","eye","fish","full","geometry","image","lens","moon","panorama","photo","photography","picture","wide"]},{"name":"360","tags":["360","arrow","av","camera","direction","rotate","rotation","virtual reality","vr"]},{"name":"share_location","tags":["dash","dashed","destination","direction","gps","location","maps","pin","place","share","stop","tracking"]},{"name":"shelves","tags":["box","factory","furniture","home","manufactory","shelf","storage"]},{"name":"assignment_late","tags":["!","alert","assignment","attention","caution","clipboard","danger","doc","document","error","exclamation","important","late","mark","notification","symbol","warning"]},{"name":"switch_account","tags":["account","choices","face","human","multiple","options","people","person","profile","social","stack","switch","user"]},{"name":"looks_two","tags":["2","digit","looks","numbers","square","symbol"]},{"name":"do_not_disturb","tags":["cancel","close","denied","deny","disturb","do","remove","silence","slash","stop"]},{"name":"donut_small","tags":["analytics","chart","data","diagram","donut","graph","infographic","inprogress","measure","metrics","pie","small","statistics","tracking"]},{"name":"saved_search","tags":["find","glass","important","look","magnify","magnifying","marked","saved","search","see","star"]},{"name":"contactless","tags":["bluetooth","cash","connect","connection","connectivity","contact","contactless","credit","device","finance","pay","payment","signal","transaction","wifi","wireless"]},{"name":"highlight_alt","tags":["alt","arrow","box","click","cursor","draw","focus","highlight","pointer","select","selection","target"]},{"name":"assignment_return","tags":["arrow","assignment","back","clipboard","doc","document","left","retun"]},{"name":"kitchen","tags":["appliance","cold","food","fridge","home","house","ice","kitchen","places","refrigerator","storage"]},{"name":"warehouse","tags":["garage","industry","manufacturing","storage","warehouse"]},{"name":"liquor","tags":["alcohol","bar","bottle","club","cocktail","drink","food","liquor","party","store","wine"]},{"name":"gpp_maybe","tags":["!","alert","attention","caution","certified","danger","error","exclamation","gpp","important","mark","maybe","notification","privacy","private","protect","protection","security","shield","sim","symbol","verified","warning"]},{"name":"settings_input_component","tags":["audio","av","cable","cables","component","connect","connection","connectivity","input","internet","plug","points","settings","video","wifi"]},{"name":"waves","tags":["beach","lake","ocean","pool","river","sea","swim","water","wave","waves"]},{"name":"hotel_class","tags":["achievement","bookmark","class","favorite","highlight","hotel","important","marked","rank","ranking","rate","rating","reward","save","saved","shape","special","star"]},{"name":"web_asset","tags":["-website","app","application desktop","asset","browser","design","download","image","interface","internet","layout","screen","site","ui","ux","video","web","website","window","www"]},{"name":"view_carousel","tags":["cards","carousel","design","format","grid","layout","view","website"]},{"name":"anchor","tags":["anchor","google","logo"]},{"name":"filter_alt_off","tags":["alt","disabled","edit","filter","funnel","off","offline","options","refine","sift","slash"]},{"name":"balance","tags":["balance","equal","equity","impartiality","justice","parity","stability. equilibrium","steadiness","symmetry"]},{"name":"view_quilt","tags":["design","format","grid","layout","quilt","square","squares","stacked","view","website"]},{"name":"library_add_check","tags":["add","approve","check","collection","complete","done","layers","library","mark","multiple","music","ok","select","stacked","tick","validate","verified","video","yes"]},{"name":"queue_music","tags":["collection","list","music","playlist","queue"]},{"name":"casino","tags":["casino","casino chip","chips","dice","dots","entertainment","gamble","gambling","game","games","luck","places","tokens"]},{"name":"hearing","tags":["accessibility","accessible","aids","body","ear","handicap","hearing","hearing aids","help","human","impaired","listen","mono","sound","volume"]},{"name":"phone_enabled","tags":["call","cell","contact","device","enabled","hardware","mobile","phone","telephone"]},{"name":"linear_scale","tags":["app","application","components","design","interface","layout","linear","measure","menu","scale","screen","site","slider","ui","ux","web","website","window"]},{"name":"holiday_village","tags":["architecture","beach","camping","cottage","estate","holiday","home","house","lake","lodge","maps","place","real","residence","residential","stay","traveling","vacation","village"]},{"name":"home_filled","tags":["address","app","application--house","architecture","building","components","design","estate","filled","home","interface","layout","place","real","residence","residential","screen","shelter","site","structure","ui","unit","ux","web","website","window"]},{"name":"turned_in_not","tags":["archive","bookmark","favorite","in","label","library","not","read","reading","remember","ribbon","save","tag","turned"]},{"name":"sync_problem","tags":["!","360","alert","around","arrow","arrows","attention","caution","danger","direction","error","exclamation","important","inprogress","load","loading refresh","mark","notification","problem","renew","rotate","symbol","sync","turn","warning"]},{"name":"start","tags":["arrow","keyboard","next","right","start"]},{"name":"all_inbox","tags":["Inbox","all","delivered","delivery","email","mail","message","send"]},{"name":"mediation","tags":["arrow","arrows","direction","dots","mediation","right"]},{"name":"edit_off","tags":["compose","create","disabled","draft","edit","editing","enabled","input","new","off","offline","on","pen","pencil","slash","write","writing"]},{"name":"emergency","tags":["asterisk","clinic","emergency","health","hospital","maps","medical","symbol"]},{"name":"settings_remote","tags":["bluetooth","connection","connectivity","device","remote","settings","signal","wifi","wireless"]},{"name":"drive_file_move","tags":["arrow","data","doc","document","drive","file","folder","move","right","sheet","slide","storage"]},{"name":"drive_file_move_outline","tags":["data","doc","document","drive","file","folder","move","outline","sheet","slide","storage"]},{"name":"fit_screen","tags":["enlarge","fit","format","layout","reduce","scale","screen","size"]},{"name":"hourglass_full","tags":["countdown","empty","full","hourglass","loading","minutes","time","wait","waiting"]},{"name":"nights_stay","tags":["climate","cloud","crescent","dark","lunar","mode","moon","nights","phases","silence","silent","sky","stay","time","weather"]},{"name":"pause_circle_filled","tags":["circle","control","controls","filled","media","music","pause","video"]},{"name":"catching_pokemon","tags":["catching","go","pokemon","pokestop","travel"]},{"name":"king_bed","tags":["bed","bedroom","double","furniture","home","hotel","house","king","night","pillows","queen","rest","room","sleep"]},{"name":"flaky","tags":["approve","check","close","complete","contrast","done","exit","flaky","mark","no","ok","options","select","stop","tick","verified","x","yes"]},{"name":"format_size","tags":["alphabet","character","color","doc","edit","editing","editor","fill","font","format","letters","paint","sheet","size","spreadsheet","style","symbol","text","type","writing"]},{"name":"interests","tags":["circle","heart","interests","shapes","social","square","triangle"]},{"name":"stacked_line_chart","tags":["analytics","chart","data","diagram","graph","infographic","line","measure","metrics","stacked","statistics","tracking"]},{"name":"unarchive","tags":["archive","arrow","inbox","mail","store","unarchive","undo","up"]},{"name":"subtitles","tags":["accessible","caption","cc","character","closed","decoder","language","live caption","media","movies","subtitle","subtitles","tv"]},{"name":"toll","tags":["bill","booth","car","card","cash","coin","commerce","credit","currency","dollars","highway","money","online","pay","payment","ticket","toll"]},{"name":"keyboard_double_arrow_up","tags":["arrow","arrows","direction","double","multiple","navigation","up"]},{"name":"time_to_leave","tags":["automobile","car","cars","destination","direction","drive","estimate","eta","maps","public","transportation","travel","trip","vehicle"]},{"name":"location_searching","tags":["destination","direction","location","maps","pin","place","pointer","searching","stop","tracking"]},{"name":"cable","tags":["cable","connect","connection","device","electronics","usb","wire"]},{"name":"moving","tags":["arrow","direction","moving","navigation","travel","up"]},{"name":"remove_shopping_cart","tags":["card","cart","cash","checkout","coin","commerce","credit","currency","delete","dollars","minus","online","pay","payment","remember","remove","ribbon","save","shopping","subtract"]},{"name":"cast_for_education","tags":["Android","OS","airplay","cast","chrome","connect","desktop","device","display","education","for","hardware","iOS","learning","lessons teaching","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"fiber_new","tags":["alphabet","character","fiber","font","letters","network","new","symbol","text","type"]},{"name":"format_underlined","tags":["alphabet","character","doc","edit","editing","editor","font","format","letters","line","sheet","spreadsheet","style","symbol","text","type","under","underlined","writing"]},{"name":"pause_circle_outline","tags":["circle","control","controls","media","music","outline","pause","video"]},{"name":"mark_chat_unread","tags":["alarm","alert","bubble","chat","circle","comment","communicate","dot","mark","message","notification","notifications","notify","reminder","speech","unread"]},{"name":"insert_comment","tags":["add","bubble","chat","comment","feedback","insert","message"]},{"name":"cameraswitch","tags":["arrows","camera","cameraswitch","flip","rotate","swap","switch","view"]},{"name":"rocket","tags":["rocket","space","spaceship"]},{"name":"local_airport","tags":["air","airplane","airport","flight","plane","transportation","travel","trip"]},{"name":"lock_clock","tags":["clock","date","lock","locked","password","privacy","private","protection","safety","schedule","secure","security","time"]},{"name":"device_hub","tags":["Android","OS","circle","computer","desktop","device","hardware","hub","iOS","laptop","mobile","monitor","phone","square","tablet","triangle","watch","wearable","web"]},{"name":"filter_vintage","tags":["edit","editing","effect","filter","flower","image","images","photography","picture","pictures","vintage"]},{"name":"sailing","tags":["boat","entertainment","fishing","hobby","ocean","sailboat","sailing","sea","social sports","travel","water"]},{"name":"roofing","tags":["architecture","building","chimney","construction","estate","home","house","real","residence","residential","roof","roofing","service","shelter"]},{"name":"settings_voice","tags":["mic","microphone","record","recorder","settings","speaker","voice"]},{"name":"swap_horizontal_circle","tags":["arrow","arrows","back","circle","forward","horizontal","swap"]},{"name":"add_location_alt","tags":["+","add","alt","destination","direction","location","maps","new","pin","place","plus","stop","symbol"]},{"name":"room_service","tags":["alert","bell","delivery","hotel","notify","room","service"]},{"name":"content_paste_search","tags":["clipboard","content","doc","document","file","find","paste","search","trace","track"]},{"name":"reply_all","tags":["all","arrow","backward","group","left","mail","message","multiple","reply","send","share"]},{"name":"compost","tags":["bio","compost","compostable","decomposable","decompose","eco","green","leaf","leafs","nature","organic","plant","recycle","sustainability","sustainable"]},{"name":"bubble_chart","tags":["analytics","bar","bars","bubble","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"compare","tags":["adjust","adjustment","compare","edit","editing","edits","enhance","fix","image","images","photo","photography","photos","scan","settings"]},{"name":"money_off","tags":["bill","card","cart","cash","coin","commerce","credit","currency","disabled","dollars","enabled","money","off","on","online","pay","payment","shopping","slash","symbol"]},{"name":"file_open","tags":["arrow","doc","document","drive","file","left","open","page","paper"]},{"name":"filter_drama","tags":["cloud","drama","edit","editing","effect","filter","image","photo","photography","picture","sky camera"]},{"name":"shortcut","tags":["arrow","direction","forward","right","shortcut"]},{"name":"view_sidebar","tags":["design","format","grid","layout","sidebar","view","web"]},{"name":"looks_3","tags":["3","digit","looks","numbers","square","symbol"]},{"name":"note","tags":["bookmark","data","doc","document","drive","file","folder","folders","message","note","page","paper","plus","sheet","slide","symbol","writing"]},{"name":"vertical_align_bottom","tags":["align","alignment","arrow","bottom","doc","down","edit","editing","editor","sheet","spreadsheet","text","type","vertical","writing"]},{"name":"3p","tags":["3","3p","account","avatar","bubble","chat","comment","communicate","face","human","message","party","people","person","profile","speech","user"]},{"name":"online_prediction","tags":["bulb","connection","idea","light","network","online","prediction","signal","wireless"]},{"name":"cancel_presentation","tags":["cancel","clear","close","device","exit","no","present","presentation","quit","remove","screen","slide","stop","website","window","x"]},{"name":"select_all","tags":["all","dash","dashed","select","selection","square","tool"]},{"name":"event_seat","tags":["assign","assigned","chair","event","furniture","reservation","row","seat","section","sit"]},{"name":"window","tags":["close","glass","grid","home","house","interior","layout","outside","window"]},{"name":"av_timer","tags":["av","clock","countdown","duration","minutes","seconds","time","timer","watch"]},{"name":"album","tags":["album","artist","audio","bvb","cd","computer","data","disk","file","music","record","sound","storage","track"]},{"name":"local_dining","tags":["dining","eat","food","fork","knife","local","meal","restaurant","spoon"]},{"name":"headset","tags":["accessory","audio","device","ear","earphone","headphones","headset","listen","music","sound"]},{"name":"maps_ugc","tags":["+","add","bubble","comment","communicate","feedback","maps","message","new","plus","speech","symbol","ugc"]},{"name":"airplane_ticket","tags":["air","aircraft","airplane","airplanes","airport","boarding","boarding pass","flight","flights","fly","flying","maps","pass","plane","planes","signal","ticket","transportation","travel","trip"]},{"name":"vertical_split","tags":["design","format","grid","layout","paragraph","split","text","vertical","website","writing"]},{"name":"sports_basketball","tags":["athlete","athletic","ball","basketball","entertainment","exercise","game","hobby","social","sports"]},{"name":"next_plan","tags":["arrow","circle","next","plan","right"]},{"name":"drive_folder_upload","tags":["arrow","data","doc","document","drive","file","folder","sheet","slide","storage","up","upload"]},{"name":"pregnant_woman","tags":["baby","birth","body","female","human","lady","maternity","mom","mother","people","person","pregnant","women"]},{"name":"wallpaper","tags":["background","dash","dashed","image","landscape","photo","photography","picture","wallpaper"]},{"name":"image_search","tags":["find","glass","image","landscape","look","magnify","magnifying","mountain","mountains","photo","photography","picture","search","see"]},{"name":"data_exploration","tags":["analytics","arrow","chart","data","diagram","exploration","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"device_thermostat","tags":["celsius","device","fahrenheit","meter","temp","temperature","thermometer","thermostat"]},{"name":"healing","tags":["bandage","edit","editing","emergency","fix","healing","hospital","image","medicine"]},{"name":"laptop_mac","tags":["Android","OS","chrome","device","display","hardware","iOS","laptop","mac","monitor","screen","web","window"]},{"name":"height","tags":["arrow","color","doc","down","edit","editing","editor","fill","format","height","paint","sheet","spreadsheet","style","text","type","up","writing"]},{"name":"restore_from_trash","tags":["arrow","back","backwards","clock","date","history","refresh","renew","restore","reverse","rotate","schedule","time","turn"]},{"name":"radar","tags":["detect","military","near","network","position","radar","scan"]},{"name":"auto_awesome_motion","tags":["adjust","auto","awesome","collage","edit","editing","enhance","image","motion","photo","video"]},{"name":"file_download_done","tags":["arrow","arrows","check","done","down","download","downloads","drive","file","install","installed","tick","upload"]},{"name":"notification_add","tags":["+","active","add","alarm","alert","bell","chime","notification","notifications","notify","plus","reminder","ring","sound","symbol"]},{"name":"call_made","tags":["arrow","call","device","made","mobile"]},{"name":"camera_enhance","tags":["ai","artificial","automatic","automation","camera","custom","enhance","genai","important","intelligence","lens","magic","photo","photography","picture","quality","smart","spark","sparkle","special","star"]},{"name":"rotate_left","tags":["around","arrow","dash","dashed","direction","inprogress","left","load","loading refresh","renew","rotate","turn"]},{"name":"local_taxi","tags":["automobile","cab","call","car","cars","direction","local","lyft","maps","public","taxi","transportation","uber","vehicle","yellow"]},{"name":"star_border_purple500","tags":["500","best","bookmark","border","favorite","highlight","outline","purple","ranking","rate","rating","save","star","toggle"]},{"name":"gpp_bad","tags":["bad","cancel","certified","close","error","exit","gpp","no","privacy","private","protect","protection","remove","security","shield","sim","stop","verified","x"]},{"name":"playlist_play","tags":["arrow","collection","list","music","play","playlist"]},{"name":"cast","tags":["Android","OS","airplay","cast","chrome","connect","desktop","device","display","hardware","iOS","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"vertical_align_top","tags":["align","alignment","arrow","doc","edit","editing","editor","sheet","spreadsheet","text","top","type","up","vertical","writing"]},{"name":"ramen_dining","tags":["breakfast","dining","dinner","drink","fastfood","food","lunch","meal","noodles","ramen","restaurant"]},{"name":"data_usage","tags":["analytics","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking","usage"]},{"name":"markunread_mailbox","tags":["deliver","envelop","letters","mail","mailbox","markunread","post","postal","postbox","receive","send","unread"]},{"name":"terminal","tags":["application","code","emulator","program","software","terminal"]},{"name":"screen_share","tags":["Android","OS","arrow","cast","chrome","device","display","hardware","iOS","laptop","mac","mirror","monitor","screen","share","stream","streaming","web","window"]},{"name":"center_focus_strong","tags":["camera","center","focus","image","lens","photo","photography","strong","zoom"]},{"name":"queue","tags":["add","collection","layers","list","multiple","music","playlist","queue","stack","stream","video"]},{"name":"games","tags":["adjust","arrow","arrows","control","controller","direction","games","gaming","left","move","right"]},{"name":"low_priority","tags":["arrange","arrow","backward","bottom","list","low","move","order","priority"]},{"name":"dynamic_form","tags":["bolt","code","dynamic","electric","fast","form","lightning","lists","questionnaire","thunderbolt"]},{"name":"tab","tags":["browser","computer","document","documents","folder","internet","tab","tabs","web","website","window","windows"]},{"name":"lock_reset","tags":["around","inprogress","load","loading refresh","lock","locked","password","privacy","private","protection","renew","rotate","safety","secure","security","turn"]},{"name":"room_preferences","tags":["building","door","doorway","entrance","gear","home","house","interior","office","open","preferences","room","settings"]},{"name":"crop","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"monitor_weight","tags":["body","device","diet","health","monitor","scale","smart","weight"]},{"name":"trip_origin","tags":["circle","departure","origin","trip"]},{"name":"trolley","tags":["carry","factory","manufactory","move","transport"]},{"name":"calendar_view_week","tags":["calendar","date","day","event","format","grid","layout","month","schedule","today","view","week"]},{"name":"signal_wifi_4_bar","tags":["4","bar","cell","cellular","data","internet","mobile","network","phone","signal","wifi","wireless"]},{"name":"blur_on","tags":["blur","disabled","dots","edit","editing","effect","enabled","enhance","filter","off","on","slash"]},{"name":"view_stream","tags":["design","format","grid","layout","lines","list","stacked","stream","view","website"]},{"name":"radio","tags":["antenna","audio","device","frequency","hardware","listen","media","music","player","radio","signal","tune"]},{"name":"hail","tags":["body","hail","human","people","person","pick","public","stop","taxi","transportation"]},{"name":"do_disturb_on","tags":["cancel","close","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","slash","stop"]},{"name":"sensor_door","tags":["alarm","security","security system"]},{"name":"wb_incandescent","tags":["balance","bright","edit","editing","incandescent","light","lighting","setting","settings","white","wp"]},{"name":"local_drink","tags":["cup","drink","drop","droplet","liquid","local","park","water"]},{"name":"accessible_forward","tags":["accessibility","accessible","body","forward","handicap","help","human","people","person","wheelchair"]},{"name":"replay_circle_filled","tags":["arrow","arrows","circle","control","controls","filled","music","refresh","renew","repeat","replay","video"]},{"name":"local_printshop","tags":["draft","fax","ink","local","machine","office","paper","print","printer","printshop","send"]},{"name":"local_laundry_service","tags":["cleaning","clothing","dry","dryer","hotel","laundry","local","service","washer"]},{"name":"vpn_lock","tags":["earth","globe","lock","locked","network","password","privacy","private","protection","safety","secure","security","virtual","vpn","world"]},{"name":"schema","tags":["analytics","chart","data","diagram","flow","graph","infographic","measure","metrics","schema","squares","statistics","tracking"]},{"name":"request_page","tags":["data","doc","document","drive","file","folder","folders","page","paper","request","sheet","slide","writing"]},{"name":"token","tags":["badge","hexagon","mark","shield","sign","symbol"]},{"name":"branding_watermark","tags":["branding","components","copyright","design","emblem","format","identity","interface","layout","logo","screen","site","stamp","ui","ux","watermark","web","website","window"]},{"name":"theater_comedy","tags":["broadway","comedy","event","mask","masks","movie","musical","places","show","standup","theater","tour","watch"]},{"name":"text_format","tags":["alphabet","character","font","format","letters","square A","style","symbol","text","type"]},{"name":"directions_bus_filled","tags":["automobile","bus","car","cars","direction","directions","filled","maps","public","transportation","vehicle"]},{"name":"remove_done","tags":["approve","check","complete","disabled","done","enabled","finished","mark","multiple","off","ok","on","remove","select","slash","tick","yes"]},{"name":"sports_bar","tags":["alcohol","bar","beer","drink","liquor","pint","places","pub","sports"]},{"name":"watch","tags":["Android","OS","ar","clock","gadget","iOS","time","vr","watch","wearables","web","wristwatch"]},{"name":"add_to_drive","tags":["add","app","application","backup","cloud","drive","files","folders","gdrive","google","recovery","shortcut","storage"]},{"name":"format_align_center","tags":["align","alignment","center","doc","edit","editing","editor","format","sheet","spreadsheet","text","type","writing"]},{"name":"settings_power","tags":["info","information","off","on","power","save","settings","shutdown"]},{"name":"local_pizza","tags":["drink","fastfood","food","local","meal","pizza"]},{"name":"add_alert","tags":["+","active","add","alarm","alert","bell","chime","new","notifications","notify","plus","reminder","ring","sound","symbol"]},{"name":"smart_button","tags":["action","ai","artificial","automatic","automation","button","components","composer","custom","function","genai","intelligence","interface","magic","site","smart","spark","sparkle","special","star","stars","ui","ux","web","website"]},{"name":"flare","tags":["bright","edit","editing","effect","flare","image","images","light","photography","picture","pictures","sun"]},{"name":"developer_mode","tags":["Android","OS","bracket","cell","code","developer","development","device","engineer","hardware","iOS","mobile","mode","phone","tablet"]},{"name":"call_split","tags":["arrow","call","device","mobile","split"]},{"name":"free_breakfast","tags":["beverage","breakfast","cafe","coffee","cup","drink","free","mug","tea"]},{"name":"auto_delete","tags":["auto","bin","can","clock","date","delete","garbage","remove","schedule","time","trash"]},{"name":"sports_kabaddi","tags":["athlete","athletic","body","combat","entertainment","exercise","fighting","game","hobby","human","kabaddi","people","person","social","sports","wrestle","wrestling"]},{"name":"face_retouching_natural","tags":["ai","artificial","automatic","automation","custom","edit","editing","effect","emoji","emotion","face","faces","genai","image","intelligence","magic","natural","photo","photography","retouch","retouching","settings","smart","spark","sparkle","star","tag"]},{"name":"not_listed_location","tags":["?","assistance","destination","direction","help","info","information","listed","location","maps","not","pin","place","punctuation","question mark","stop","support","symbol"]},{"name":"wb_cloudy","tags":["balance","cloud","cloudy","edit","editing","white","wp"]},{"name":"sports","tags":["athlete","athletic","blowing","coach","entertainment","exercise","game","hobby","instrument","referee","social","sound","sports","warning","whistle"]},{"name":"emoji_symbols","tags":["ampersand","character","emoji","hieroglyph","music","note","percent","sign","symbols"]},{"name":"bathtub","tags":["bath","bathing","bathroom","bathtub","home","hotel","human","person","shower","travel","tub"]},{"name":"forward_10","tags":["10","arrow","control","controls","digit","fast","forward","music","numbers","play","seconds","symbol","video"]},{"name":"tablet_mac","tags":["Android","OS","device","hardware","iOS","ipad","mobile","tablet mac","web"]},{"name":"mode_night","tags":["dark","disturb","lunar","mode","moon","night","sleep"]},{"name":"broken_image","tags":["broken","corrupt","error","image","landscape","mountain","mountains","photo","photography","picture","torn"]},{"name":"escalator_warning","tags":["body","child","escalator","human","kid","parent","people","person","warning"]},{"name":"assistant","tags":["ai","artificial","assistant","automatic","automation","bubble","chat","comment","communicate","custom","feedback","genai","intelligence","magic","message","recommendation","smart","spark","sparkle","speech","star","suggestion","twinkle"]},{"name":"cases","tags":["bag","baggage","briefcase","business","case","cases","purse","suitcase"]},{"name":"wifi_tethering","tags":["cell","cellular","connection","data","internet","mobile","network","phone","scan","service","signal","speed","tethering","wifi","wireless"]},{"name":"reduce_capacity","tags":["arrow","body","capacity","covid","decrease","down","human","people","person","reduce","social"]},{"name":"colorize","tags":["color","colorize","dropper","extract","eye","picker","tool"]},{"name":"save_as","tags":["compose","create","data","disk","document","draft","drive","edit","editing","file","floppy","input","multimedia","pen","pencil","save","storage","write","writing"]},{"name":"card_travel","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","membership","miles","money","online","pay","payment","travel","trip"]},{"name":"emoji_food_beverage","tags":["beverage","coffee","cup","drink","emoji","mug","plate","set","tea"]},{"name":"font_download","tags":["A","alphabet","character","classification","download","font","letters","square","symbol","text","type","typeface"]},{"name":"outbox","tags":["box","mail","outbox","send","sent"]},{"name":"battery_std","tags":["battery","cell","charge","mobile","plus","power","standard","std"]},{"name":"sick","tags":["covid","discomfort","emotions","expressions","face","feelings","fever","flu","ill","mood","pain","person","sick","survey","upset"]},{"name":"add_location","tags":["+","add","destination","direction","location","maps","new","pin","place","plus","stop","symbol"]},{"name":"try","tags":["bookmark","bubble","chat","comment","communicate","favorite","feedback","highlight","important","marked","message","save","saved","shape","special","speech","star","try"]},{"name":"discount","tags":[]},{"name":"man","tags":["boy","gender","male","man","social","symbol"]},{"name":"running_with_errors","tags":["!","alert","attention","caution","danger","duration","error","errors","exclamation","important","mark","notification","process","processing","running","symbol","time","warning","with"]},{"name":"diversity_3","tags":["committee","diverse","diversity","family","friends","group","groups","humans","network","people","persons","social","team"]},{"name":"filter_none","tags":["filter","multiple","none","square","stack"]},{"name":"cloud_sync","tags":["app","application","around","backup","cloud","connection","drive","files","folders","inprogress","internet","load","loading refresh","network","renew","rotate","sky","storage","turn","upload"]},{"name":"bloodtype","tags":["blood","bloodtype","donate","droplet","emergency","hospital","medicine","negative","positive","type","water"]},{"name":"dinner_dining","tags":["breakfast","dining","dinner","food","fork","lunch","meal","restaurant","spaghetti","utensils"]},{"name":"transfer_within_a_station","tags":["a","arrow","arrows","body","direction","human","left","maps","people","person","public","right","route","station","stop","transfer","transportation","vehicle","walk","within"]},{"name":"weekend","tags":["chair","couch","furniture","home","living","lounge","relax","room","weekend"]},{"name":"child_friendly","tags":["baby","care","carriage","child","children","friendly","infant","kid","newborn","stroller","toddler","young"]},{"name":"offline_pin","tags":["approve","check","checkmark","circle","complete","done","mark","offline","ok","pin","select","tick","validate","verified","yes"]},{"name":"replay_10","tags":["10","arrow","arrows","control","controls","digit","music","numbers","refresh","renew","repeat","replay","symbol","ten","video"]},{"name":"brightness_4","tags":["4","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"cruelty_free","tags":["animal","bunny","cruelty","eco","free","nature","rabbit","social","sustainability","sustainable","testing"]},{"name":"format_paint","tags":["brush","color","doc","edit","editing","editor","fill","format","paint","roller","sheet","spreadsheet","style","text","type","writing"]},{"name":"filter_center_focus","tags":["camera","center","dot","edit","filter","focus","image","photo","photography","picture"]},{"name":"area_chart","tags":["analytics","area","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"bakery_dining","tags":["bakery","bread","breakfast","brunch","croissant","dining","food"]},{"name":"emoji_transportation","tags":["architecture","automobile","building","car","cars","direction","emoji","estate","maps","place","public","real","residence","residential","shelter","transportation","travel","vehicle"]},{"name":"folder_special","tags":["bookmark","data","doc","document","drive","favorite","file","folder","highlight","important","marked","save","saved","shape","sheet","slide","special","star","storage"]},{"name":"door_front","tags":["closed","door","doorway","entrance","exit","front","home","house","way"]},{"name":"calendar_view_day","tags":["calendar","date","day","event","format","grid","layout","month","schedule","today","view","week"]},{"name":"legend_toggle","tags":["analytics","chart","data","diagram","graph","infographic","legend","measure","metrics","monitoring","stackdriver","statistics","toggle","tracking"]},{"name":"light","tags":["bulb","ceiling","hanging","inside","interior","lamp","light","lighting","pendent","room"]},{"name":"find_replace","tags":["around","arrows","find","glass","inprogress","load","loading refresh","look","magnify","magnifying","renew","replace","rotate","search","see"]},{"name":"crop_original","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","original","photo","photos","picture","settings","size"]},{"name":"rowing","tags":["activity","boat","body","canoe","human","people","person","row","rowing","sport","water"]},{"name":"enhanced_encryption","tags":["+","add","encryption","enhanced","lock","locked","new","password","plus","privacy","private","protection","safety","secure","security","symbol"]},{"name":"how_to_vote","tags":["ballot","election","how","poll","to","vote"]},{"name":"chrome_reader_mode","tags":["chrome","mode","read","reader","text"]},{"name":"auto_fix_normal","tags":["ai","artificial","auto","automatic","automation","custom","edit","erase","fix","genai","intelligence","magic","modify","smart","spark","sparkle","star","wand"]},{"name":"compress","tags":["arrow","arrows","collide","compress","pressure","push","together"]},{"name":"dehaze","tags":["adjust","dehaze","edit","editing","enhance","haze","image","lines","photo","photography","remove"]},{"name":"outlet","tags":["connect","connecter","electricity","outlet","plug","power"]},{"name":"desktop_mac","tags":["Android","OS","chrome","desktop","device","display","hardware","iOS","mac","monitor","screen","web","window"]},{"name":"nature_people","tags":["activity","body","forest","human","landscape","nature","outdoor","outside","park","people","person","tree","wilderness"]},{"name":"sports_tennis","tags":["athlete","athletic","ball","bat","entertainment","exercise","game","hobby","racket","social","sports","tennis"]},{"name":"forest","tags":["forest","jungle","nature","plantation","plants","trees","woodland"]},{"name":"upcoming","tags":["alarm","calendar","mail","message","notification","upcoming"]},{"name":"assignment_returned","tags":["arrow","assignment","clipboard","doc","document","down","returned"]},{"name":"cookie","tags":["biscuit","cookies","data","dessert","wafer"]},{"name":"fax","tags":["fax","machine","office","phone","send"]},{"name":"square","tags":["draw","four","shape quadrangle","sides","square"]},{"name":"density_medium","tags":["density","horizontal","lines","medium","rule","rules"]},{"name":"terrain","tags":["geography","landscape","mountain","terrain"]},{"name":"settings_brightness","tags":["brightness","dark","filter","light","mode","setting","settings"]},{"name":"attach_email","tags":["attach","attachment","clip","compose","email","envelop","letters","link","mail","message","paperclip","send"]},{"name":"photo","tags":["image","mountain","mountains","photo","photography","picture"]},{"name":"http","tags":["alphabet","character","font","http","letters","symbol","text","transfer","type","url","website"]},{"name":"garage","tags":["automobile","automotive","car","cars","direction","garage","maps","transportation","travel","vehicle"]},{"name":"wine_bar","tags":["alcohol","bar","cocktail","cup","drink","glass","liquor","wine"]},{"name":"multiple_stop","tags":["arrows","dash","dashed","directions","dots","left","maps","multiple","navigation","right","stop"]},{"name":"format_color_text","tags":["color","doc","edit","editing","editor","fill","format","paint","sheet","spreadsheet","style","text","type","writing"]},{"name":"gesture","tags":["doodle","draw","drawing","finger","gesture","gestures","hand","motion","string","thread"]},{"name":"heart_broken","tags":["break","broken","core","crush","health","heart","nucleus","split"]},{"name":"format_align_right","tags":["align","alignment","doc","edit","editing","editor","format","right","sheet","spreadsheet","text","type","writing"]},{"name":"transgender","tags":["female","gender","lgbt","male","neutral","social","symbol","transgender"]},{"name":"alarm_add","tags":["+","add","alarm","alert","bell","clock","countdown","date","new","notification","plus","schedule","symbol","time"]},{"name":"new_label","tags":["+","add","archive","bookmark","favorite","label","library","new","plus","read","reading","remember","ribbon","save","symbol","tag"]},{"name":"south_east","tags":["arrow","directional","down","east","maps","navigation","right","south"]},{"name":"backup_table","tags":["backup","drive","files folders","format","layout","stack","storage","table"]},{"name":"unsubscribe","tags":["cancel","close","email","envelop","letters","mail","message","newsletter","off","remove","send","subscribe","unsubscribe"]},{"name":"flash_off","tags":["bolt","disabled","electric","enabled","energy","fast","flash","instant","lightning","off","on","slash","thunderbolt"]},{"name":"elderly","tags":["body","cane","elderly","human","old","people","person","senior"]},{"name":"generating_tokens","tags":["access","ai","api","artificial","automatic","automation","coin","custom","genai","generating","intelligence","magic","smart","spark","sparkle","star","tokens"]},{"name":"spellcheck","tags":["a","alphabet","approve","character","check","font","letters","mark","ok","processor","proofread","select","spell","spellcheck","symbol","text","tick","type","word","write","yes"]},{"name":"auto_awesome_mosaic","tags":["adjust","auto","awesome","collage","edit","editing","enhance","image","mosaic","photo"]},{"name":"outdoor_grill","tags":["barbecue","bbq","charcoal","cook","cooking","grill","home","house","outdoor","outside"]},{"name":"outgoing_mail","tags":["arrow","arrows","directions","email","envelop","forward","inbox","letters","mail","message","navigation","outgoing","right","send","to"]},{"name":"restore_page","tags":["arrow","data","doc","file","page","paper","refresh","restore","rotate","sheet","storage"]},{"name":"foundation","tags":["architecture","base","basis","building","construction","estate","foundation","home","house","real","residential"]},{"name":"credit_card_off","tags":["bill","card","cash","coin","commerce","cost","credit","currency","disabled","dollars","enabled","finance","money","off","online","pay","payment","price","shopping","slash","symbol"]},{"name":"scatter_plot","tags":["analytics","bar","bars","chart","circles","data","diagram","dot","graph","infographic","measure","metrics","plot","scatter","statistics","tracking"]},{"name":"signal_cellular_4_bar","tags":["4","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"add_moderator","tags":["+","add","certified","moderator","new","plus","privacy","private","protect","protection","security","shield","symbol","verified"]},{"name":"play_for_work","tags":["arrow","circle","down","google","half","play","work"]},{"name":"add_card","tags":["+","add","bill","card","cash","coin","commerce","cost","credit","currency","dollars","finance","money","new","online","pay","payment","plus","price","shopping","symbol"]},{"name":"app_settings_alt","tags":["Android","OS","app","applications","cell","device","gear","hardware","iOS","mobile","phone","setting","settings","tablet"]},{"name":"keyboard_tab","tags":["arrow","keyboard","left","next","right","tab"]},{"name":"wifi_protected_setup","tags":["around","arrow","arrows","protected","rotate","setup","wifi"]},{"name":"deck","tags":["chairs","deck","home","house","outdoors","outside","patio","social","terrace","umbrella","yard"]},{"name":"takeout_dining","tags":["box","container","delivery","dining","food","meal","restaurant","takeout"]},{"name":"tag_faces","tags":["emoji","emotion","faces","happy","satisfied","smile","tag"]},{"name":"brightness_6","tags":["6","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"woman","tags":["female","gender","girl","lady","social","symbol","woman","women"]},{"name":"assistant_direction","tags":["assistant","destination","direction","location","maps","navigate","navigation","pin","place","right","stop"]},{"name":"assistant_navigation","tags":["assistant","destination","direction","location","maps","navigation","pin","place","stop","straight","up"]},{"name":"brightness_5","tags":["5","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"social_distance","tags":["6","apart","body","distance","ft","human","people","person","social","space"]},{"name":"free_cancellation","tags":["approve","calendar","cancel","cancellation","check","clear","complete","date","day","done","event","exit","free","mark","month","no","ok","remove","schedule","select","stop","tick","validate","verified","x","yes"]},{"name":"subdirectory_arrow_left","tags":["arrow","directory","down","left","navigation","sub","subdirectory"]},{"name":"laptop_chromebook","tags":["Android","OS","chrome","chromebook","device","display","hardware","iOS","laptop","mac chromebook","monitor","screen","web","window"]},{"name":"format_list_numbered_rtl","tags":["align","alignment","digit","doc","edit","editing","editor","format","list","notes","numbered","numbers","rtl","sheet","spreadsheet","symbol","text","type","writing"]},{"name":"store_mall_directory","tags":["directory","mall","store"]},{"name":"settings_overscan","tags":["arrows","expand","image","photo","picture","scan","settings"]},{"name":"icecream","tags":["cream","dessert","food","ice","icecream","snack"]},{"name":"details","tags":["details","edit","editing","enhance","image","photo","photography","sharpen","triangle"]},{"name":"add_reaction","tags":["+","add","emoji","emotions","expressions","face","feelings","glad","happiness","happy","icon","icons","insert","like","mood","new","person","pleased","plus","smile","smiling","social","survey","symbol"]},{"name":"follow_the_signs","tags":["arrow","body","directional","follow","human","people","person","right","signs","social","the"]},{"name":"attribution","tags":["account","attribute","attribution","body","circle","copyright","copywriter","human","people","person","profile","user","youtube"]},{"name":"food_bank","tags":["architecture","bank","building","charity","eat","estate","food","fork","house","knife","meal","place","real","residence","residential","shelter","utensils"]},{"name":"closed_caption","tags":["accessible","alphabet","caption","cc","character","closed","decoder","font","language","letters","media","movies","subtitle","subtitles","symbol","text","tv","type"]},{"name":"gif","tags":["alphabet","animated","animation","bitmap","character","font","format","gif","graphics","interchange","letters","symbol","text","type"]},{"name":"phonelink","tags":["Android","OS","chrome","computer","connect","desktop","device","hardware","iOS","link","mac","mobile","phone","phonelink","sync","tablet","web","windows"]},{"name":"grain","tags":["dots","edit","editing","effect","filter","grain","image","images","photography","picture","pictures"]},{"name":"personal_injury","tags":["accident","aid","arm","bandage","body","broke","cast","fracture","health","human","injury","medical","patient","people","person","personal","sling","social"]},{"name":"flip_camera_android","tags":["android","camera","center","edit","editing","flip","image","mobile","orientation","rotate","turn"]},{"name":"museum","tags":["architecture","attraction","building","estate","event","exhibition","explore","local","museum","places","real","see","shop","store","tour"]},{"name":"north_west","tags":["arrow","directional","left","maps","navigation","north","up","west"]},{"name":"gite","tags":["architecture","estate","gite","home","hostel","house","maps","place","real","residence","residential","stay","traveling"]},{"name":"highlight","tags":["color","doc","edit","editing","editor","emphasize","fill","flash","format","highlight","light","paint","sheet","spreadsheet","style","text","type","writing"]},{"name":"brightness_1","tags":["1","brightness","circle","control","crescent","level","moon","screen"]},{"name":"plus_one","tags":["1","add","digit","increase","numbers","one","plus","symbol"]},{"name":"villa","tags":["architecture","beach","estate","home","house","maps","place","real","residence","residential","traveling","vacation stay","villa"]},{"name":"fmd_bad","tags":["!","alert","attention","bad","caution","danger","destination","direction","error","exclamation","fmd","important","location","maps","mark","notification","pin","place","symbol","warning"]},{"name":"flashlight_on","tags":["disabled","enabled","flash","flashlight","light","off","on","slash"]},{"name":"flip","tags":["dash","dashed","edit","editing","flip","image","orientation","scan scanning"]},{"name":"nightlife","tags":["alcohol","bar","bottle","club","cocktail","dance","drink","food","glass","liquor","music","nightlife","note","wine"]},{"name":"present_to_all","tags":["all","arrow","present","presentation","screen","share","site","slides","to","web","website"]},{"name":"do_disturb","tags":["cancel","close","denied","deny","disturb","do","remove","silence","stop"]},{"name":"outbound","tags":["arrow","circle","directional","outbound","right","up"]},{"name":"local_pharmacy","tags":["911","aid","cross","emergency","first","hospital","local","medicine","pharmacy","places"]},{"name":"splitscreen","tags":["column","grid","layout","multitasking","row","screen","spaces","split","splitscreen","window"]},{"name":"waterfall_chart","tags":["analytics","bar","chart","data","diagram","graph","infographic","measure","metrics","statistics","tracking","waterfall"]},{"name":"switch_left","tags":["arrows","directional","left","navigation","switch","toggle"]},{"name":"domain_verification","tags":["app","application desktop","approve","check","complete","design","domain","done","interface","internet","layout","mark","ok","screen","select","site","tick","ui","ux","validate","verification","verified","web","website","window","www","yes"]},{"name":"fireplace","tags":["chimney","fire","fireplace","flame","home","house","living","pit","place","room","warm","winter"]},{"name":"video_settings","tags":["change","details","gear","info","information","options","play","screen","service","setting","settings","video","window"]},{"name":"disabled_visible","tags":["cancel","close","disabled","exit","eye","no","on","quit","remove","reveal","see","show","stop","view","visibility","visible"]},{"name":"network_wifi","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"quickreply","tags":["bolt","bubble","chat","comment","communicate","electric","energy","fast","instant","lightning","message","quick","quickreply","reply","speech","thunderbolt"]},{"name":"swap_vertical_circle","tags":["arrow","arrows","circle","down","swap","up","vertical"]},{"name":"format_align_justify","tags":["align","alignment","density","doc","edit","editing","editor","extra","format","justify","sheet","small","spreadsheet","text","type","writing"]},{"name":"settings_input_composite","tags":["component","composite","connection","connectivity","input","plug","points","settings"]},{"name":"loupe","tags":["+","add","details","focus","glass","loupe","magnifying","new","plus","symbol"]},{"name":"123","tags":["1","2","3","digit","numbers","symbol"]},{"name":"network_check","tags":["check","connect","connection","internet","meter","network","signal","speed","tick","wifi","wireless"]},{"name":"sms_failed","tags":["!","alert","announcement","attention","caution","chat","chat bubble","comment","communicate","communication","conversation","danger","error","exclamation","failed","feedback","important","mark","message","notification","service","sms","speech","symbol","warning"]},{"name":"cancel_schedule_send","tags":["cancel","clear","email","mail","no","quit","remove","schedule","send","share","stop","x"]},{"name":"work_history","tags":["back","backwards","bag","baggage","briefcase","business","case","clock","date","history","job","pending","recent","schedule","suitcase","time","updates","work"]},{"name":"electric_bolt","tags":["bolt","electric","energy","fast","instant","lightning","nest","thunderbolt"]},{"name":"view_day","tags":["cards","carousel","day","design","format","grid","layout","view","website"]},{"name":"night_shelter","tags":["architecture","bed","building","estate","homeless","house","night","place","real","shelter","sleep"]},{"name":"monitor","tags":["Android","OS","chrome","device","display","hardware","iOS","mac","monitor","screen","web","window"]},{"name":"clean_hands","tags":["bacteria","clean","disinfect","germs","gesture","hand","hands","sanitize","sanitizer"]},{"name":"mark_chat_read","tags":["approve","bubble","chat","check","comment","communicate","complete","done","mark","message","ok","read","select","sent","speech","tick","verified","yes"]},{"name":"comment_bank","tags":["archive","bank","bookmark","bubble","cchat","comment","communicate","favorite","label","library","message","remember","ribbon","save","speech","tag"]},{"name":"sim_card_download","tags":["arrow","camera","card","chip","device","down","download","memory","phone","sim","storage"]},{"name":"lan","tags":["computer","connection","data","internet","lan","network","service"]},{"name":"piano","tags":["instrument","keyboard","keys","music","musical","piano","social"]},{"name":"add_road","tags":["+","add","destination","direction","highway","maps","new","plus","road","stop","street","symbol","traffic"]},{"name":"add_ic_call","tags":["+","add","call","cell","contact","device","hardware","mobile","new","phone","plus","symbol","telephone"]},{"name":"rule_folder","tags":["approve","cancel","check","close","complete","data","doc","document","done","drive","exit","file","folder","mark","no","ok","remove","rule","select","sheet","slide","storage","tick","validate","verified","x","yes"]},{"name":"switch_access_shortcut","tags":["access","arrow","arrows","direction","navigation","new","north","shortcut","switch","symbol","up"]},{"name":"hardware","tags":["break","construction","hammer","hardware","nail","repair","tool"]},{"name":"line_weight","tags":["height","line","size","spacing","style","thickness","weight"]},{"name":"image_not_supported","tags":["disabled","enabled","image","landscape","mountain","mountains","not","off","on","photo","photography","picture","slash","supported"]},{"name":"flip_camera_ios","tags":["DISABLE_IOS","android","camera","disable_ios","edit","editing","flip","image","ios","mobile","orientation","rotate","turn"]},{"name":"phone_callback","tags":["arrow","call","callback","cell","contact","device","down","hardware","mobile","phone","telephone"]},{"name":"access_time_filled","tags":[]},{"name":"dining","tags":["cafe","cafeteria","cutlery","diner","dining","eat","eating","fork","room","spoon"]},{"name":"scale","tags":["measure","monitor","scale","weight"]},{"name":"airplanemode_active","tags":["air","aircraft","airplane","airplanes","airport","flight","flights","fly","flying","mode","on","plane","planes","signal","transportation","travel","trip"]},{"name":"set_meal","tags":["chopsticks","dinner","fish","food","lunch","meal","restaurant","set","teishoku"]},{"name":"mobile_friendly","tags":["Android","OS","approve","cell","check","complete","device","done","friendly","hardware","iOS","mark","mobile","ok","phone","select","tablet","tick","validate","verified","yes"]},{"name":"assured_workload","tags":["account","assured","balance","bank","bill","building","card","cash","coin","commerce","compliance","confidential","credit","currency","dollars","federal","finance","government","money","online","pay","payment","secure","sensitive regulatory","workload"]},{"name":"wallet","tags":[]},{"name":"merge_type","tags":["arrow","combine","direction","format","merge","text","type"]},{"name":"view_timeline","tags":["grid","layout","pattern","squares","timeline","view"]},{"name":"departure_board","tags":["automobile","board","bus","car","cars","clock","departure","maps","public","schedule","time","transportation","travel","vehicle"]},{"name":"event_repeat","tags":["around","calendar","date","day","event","inprogress","load","loading refresh","month","renew","rotate","schedule","turn"]},{"name":"sanitizer","tags":["bacteria","bottle","clean","covid","disinfect","germs","pump","sanitizer"]},{"name":"surfing","tags":["athlete","athletic","beach","body","entertainment","exercise","hobby","human","people","person","sea","social sports","sports","summer","surfing","water","wave"]},{"name":"pix","tags":["bill","brazil","card","cash","commerce","credit","currency","finance","money","payment"]},{"name":"phonelink_ring","tags":["Android","OS","cell","connection","data","device","hardware","iOS","mobile","network","phone","phonelink","ring","service","signal","tablet","wireless"]},{"name":"display_settings","tags":["Android","OS","application","change","chrome","desktop","details","device","display","gear","hardware","iOS","info","information","mac","monitor","options","personal","screen","service","settings","web","window"]},{"name":"sports_motorsports","tags":["athlete","athletic","automobile","bike","drive","driving","entertainment","helmet","hobby","motorcycle","motorsports","protect","social","sports","vehicle"]},{"name":"horizontal_split","tags":["bars","format","horizontal","layout","lines","split","stacked"]},{"name":"view_comfy","tags":["comfy","grid","layout","pattern","squares","view"]},{"name":"polymer","tags":["emblem","logo","mark","polymer"]},{"name":"golf_course","tags":["athlete","athletic","ball","club","course","entertainment","flag","golf","golfer","golfing","hobby","hole","places","putt","sports"]},{"name":"batch_prediction","tags":["batch","bulb","idea","light","prediction"]},{"name":"filter_1","tags":["1","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"stay_current_portrait","tags":["Android","OS","current","device","hardware","iOS","mobile","phone","portrait","stay","tablet"]},{"name":"usb","tags":["cable","connection","device","usb","wire"]},{"name":"featured_play_list","tags":["collection","featured","highlighted","list","music","play","playlist","recommended"]},{"name":"data_object","tags":["brackets","code","coder","data","object","parentheses"]},{"name":"co_present","tags":["arrow","co-present","presentation","screen","share","site","slides","togather","web","website"]},{"name":"ev_station","tags":["automobile","bolt","car","cars","charger","charging","electric","electricity","ev","home","maps","places","station","thunderbolt","transportation","vehicle"]},{"name":"send_and_archive","tags":["archive","arrow","down","download","email","letters","mail","save","send","share"]},{"name":"send_to_mobile","tags":["Android","OS","arrow","device","export","forward","hardware","iOS","mobile","phone","right","send","share","tablet","to"]},{"name":"local_see","tags":["camera","lens","local","photo","photography","picture","see"]},{"name":"satellite_alt","tags":["alternative","artificial","communication","satellite","space","space station","television"]},{"name":"flatware","tags":["cafe","cafeteria","cutlery","diner","dining","dinner","eat","eating","food","fork","knife","local","meal","restaurant","spoon","utensils"]},{"name":"speaker","tags":["box","electronic","loud","music","sound","speaker","stereo","system","video"]},{"name":"adb","tags":["adb","android","bridge","debug"]},{"name":"movie_creation","tags":["cinema","clapperboard","creation","film","movie","movies","slate","video"]},{"name":"movie_edit","tags":["cinema","compose","create","draft","edit","editing","film","input","movie","movies","pen","pencil","slate","video"]},{"name":"picture_in_picture","tags":["chat","crop","cropped","display","displays","layout","multitasking","overlap","photo","picture","pip","position","shape","sizes","talktrack"]},{"name":"call_received","tags":["arrow","call","device","mobile","received"]},{"name":"battery_alert","tags":["!","alert","attention","battery","caution","cell","charge","danger","error","exclamation","important","mark","mobile","notification","power","symbol","warning"]},{"name":"system_update","tags":["Android","OS","arrow","arrows","cell","device","direction","down","download","hardware","iOS","install","mobile","phone","system","tablet","update"]},{"name":"webhook","tags":["api","developer","development","enterprise","software","webhook"]},{"name":"add_chart","tags":["+","add","analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","new","plus","statistics","symbol","tracking"]},{"name":"pan_tool_alt","tags":["fingers","gesture","hand","hands","human","move","pan","scan","stop","tool"]},{"name":"sports_handball","tags":["athlete","athletic","ball","body","entertainment","exercise","game","handball","hobby","human","people","person","social","sports"]},{"name":"electric_car","tags":["automobile","bolt","car","cars","electric","electricity","maps","thunderbolt","transportation","travel","vehicle"]},{"name":"phone_forwarded","tags":["arrow","call","cell","contact","device","direction","forwarded","hardware","mobile","phone","right","telephone"]},{"name":"add_to_photos","tags":["add","collection","image","landscape","mountain","mountains","photo","photography","photos","picture","plus","to"]},{"name":"power_off","tags":["charge","cord","disabled","electric","electrical","enabled","off","on","outlet","plug","power","slash"]},{"name":"noise_control_off","tags":["audio","aware","cancel","cancellation","control","disabled","enabled","music","noise","note","off","offline","on","slash","sound"]},{"name":"code_off","tags":["brackets","code","css","develop","developer","disabled","enabled","engineer","engineering","html","off","on","platform","slash"]},{"name":"bookmark_remove","tags":["bookmark","delete","favorite","minus","remember","remove","ribbon","save","subtract"]},{"name":"screen_search_desktop","tags":["Android","OS","arrow","desktop","device","hardware","iOS","lock","monitor","rotate","screen","web"]},{"name":"panorama","tags":["angle","image","mountain","mountains","panorama","photo","photography","picture","view","wide"]},{"name":"settings_bluetooth","tags":["bluetooth","connect","connection","connectivity","device","settings","signal","symbol"]},{"name":"sports_baseball","tags":["athlete","athletic","ball","baseball","entertainment","exercise","game","hobby","social","sports"]},{"name":"festival","tags":["circus","event","festival","local","maps","places","tent","tour","travel"]},{"name":"lens_blur","tags":["blur","camera","dim","dot","effect","foggy","fuzzy","image","lens","photo","soften"]},{"name":"plumbing","tags":["build","construction","fix","handyman","plumbing","repair","tools","wrench"]},{"name":"toys","tags":["car","games","kids","toy","toys","windmill"]},{"name":"coffee_maker","tags":["appliances","beverage","coffee","cup","drink","machine","maker","mug"]},{"name":"edit_notifications","tags":["active","alarm","alert","bell","chime","compose","create","draft","edit","editing","input","new","notifications","notify","pen","pencil","reminder","ring","sound","write","writing"]},{"name":"personal_video","tags":["Android","OS","cam","chrome","desktop","device","hardware","iOS","mac","monitor","personal","television","tv","video","web","window"]},{"name":"animation","tags":["animation","circles","film","motion","movement","sequence","video"]},{"name":"bedtime","tags":["bedtime","clear","climate","home","lunar","moon","nest","night","nightime","quiet","security","sleep","thermostat","time","weather"]},{"name":"gamepad","tags":["buttons","console","controller","device","game","gamepad","gaming","playstation","video"]},{"name":"diversity_1","tags":["committee","diverse","diversity","family","friends","group","groups","heart","humans","network","people","persons","social","team"]},{"name":"center_focus_weak","tags":["camera","center","focus","image","lens","photo","photography","weak","zoom"]},{"name":"signal_wifi_statusbar_4_bar","tags":["4","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","statusbar","wifi","wireless"]},{"name":"manage_history","tags":["application","arrow","back","backwards","change","clock","date","details","gear","history","options","refresh","renew","reverse","rotate","schedule","settings","time","turn"]},{"name":"folder_zip","tags":["compress","data","doc","document","drive","file","folder","folders","open","sheet","slide","storage","zip"]},{"name":"flag_circle","tags":["circle","country","flag","goal","mark","nation","report","round","start"]},{"name":"south_west","tags":["arrow","directional","down","left","maps","navigation","south","west"]},{"name":"looks_4","tags":["4","digit","looks","numbers","square","symbol"]},{"name":"cloud_circle","tags":["app","application","backup","circle","cloud","connection","drive","files","folders","internet","network","sky","storage","upload"]},{"name":"format_shapes","tags":["alphabet","character","color","doc","edit","editing","editor","fill","font","format","insert","letters","paint","shapes","sheet","spreadsheet","style","symbol","text","type","vector","writing"]},{"name":"car_rental","tags":["access","automobile","car","cars","entry","key","lock","maps","password","rental","transportation","unlock","vehicle"]},{"name":"movie_filter","tags":["ai","artificial","automatic","automation","clapperboard","creation","custom","film","filter","genai","intelligence","magic","movie","movies","slate","smart","spark","sparkle","star","stars","video"]},{"name":"layers_clear","tags":["arrange","clear","delete","disabled","enabled","interaction","layers","maps","off","on","overlay","pages","slash"]},{"name":"phonelink_lock","tags":["Android","OS","cell","connection","device","erase","hardware","iOS","lock","locked","mobile","password","phone","phonelink","privacy","private","protection","safety","secure","security","tablet"]},{"name":"attractions","tags":["amusement","attractions","entertainment","ferris","fun","maps","park","places","wheel"]},{"name":"playlist_add_check_circle","tags":["add","album","artist","audio","cd","check","circle","collection","list","mark","music","playlist","record","sound","track"]},{"name":"hive","tags":["bee","honey","honeycomb"]},{"name":"no_photography","tags":["camera","disabled","enabled","image","no","off","on","photo","photography","picture","slash"]},{"name":"content_paste_go","tags":["clipboard","content","disabled","doc","document","enabled","file","go","on","paste","slash"]},{"name":"shop_two","tags":["add","arrow","buy","cart","google","play","purchase","shop","shopping","two"]},{"name":"edit_location","tags":["destination","direction","edit","location","maps","pen","pencil","pin","place","stop"]},{"name":"screen_rotation","tags":["Android","OS","arrow","device","hardware","iOS","mobile","phone","rotate","rotation","screen","tablet","turn"]},{"name":"numbers","tags":["digit","numbers","symbol"]},{"name":"sim_card","tags":["camera","card","chip","device","memory","phone","sim","storage"]},{"name":"control_camera","tags":["adjust","arrow","arrows","camera","center","control","direction","left","move","reposition","right"]},{"name":"blender","tags":["appliance","blender","cook","cooking","electric","juicer","kitchen","machine","vitamix"]},{"name":"flip_to_front","tags":["arrange","arrangement","back","dash","dashed","flip","format","front","layout","move","order","sort","to"]},{"name":"sports_volleyball","tags":["athlete","athletic","ball","entertainment","exercise","game","hobby","social","sports","volleyball"]},{"name":"stairs","tags":["down","staircase","stairs","stairway","stairwell","steps","up"]},{"name":"keyboard_alt","tags":["computer","device","hardware","input","keyboard","keypad","letters","office","text","type"]},{"name":"crop_din","tags":["adjust","adjustments","area","crop","din","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"html","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","letters","platform","symbol","text","type"]},{"name":"signal_wifi_statusbar_connected_no_internet_4","tags":["!","4","alert","attention","caution","cell","cellular","connected","danger","data","error","exclamation","important","internet","mark","mobile","network","no","notification","phone","signal","speed","statusbar","symbol","warning","wifi","wireless"]},{"name":"pivot_table_chart","tags":["analytics","arrow","arrows","bar","bars","chart","data","diagram","direction","drive","edit","editing","graph","grid","infographic","measure","metrics","pivot","rotate","sheet","statistics","table","tracking"]},{"name":"microwave","tags":["appliance","cook","cooking","electric","heat","home","house","kitchen","machine","microwave"]},{"name":"folder_copy","tags":["content","copy","cut","data","doc","document","drive","duplicate","file","folder","folders","multiple","paste","sheet","slide","storage"]},{"name":"output","tags":[]},{"name":"gif_box","tags":["alphabet","animated","animation","bitmap","character","font","format","gif","graphics","interchange","letters","symbol","text","type"]},{"name":"voice_chat","tags":["bubble","cam","camera","chat","comment","communicate","facetime","feedback","message","speech","video","voice"]},{"name":"local_convenience_store","tags":["--","24","bill","building","business","card","cash","coin","commerce","company","convenience","credit","currency","dollars","local","maps","market","money","new","online","pay","payment","plus","shop","shopping","store","storefront","symbol"]},{"name":"gps_not_fixed","tags":["destination","direction","disabled","enabled","gps","location","maps","not fixed","off","on","online","place","pointer","slash","tracking"]},{"name":"high_quality","tags":["alphabet","character","definition","display","font","high","hq","letters","movie","movies","quality","resolution","screen","symbol","text","tv","type"]},{"name":"switch_right","tags":["arrows","directional","navigation","right","switch","toggle"]},{"name":"pages","tags":["article","gplus","pages","paper","post","star"]},{"name":"table_restaurant","tags":["bar","dining","table"]},{"name":"speaker_notes_off","tags":["bubble","chat","comment","communicate","disabled","enabled","format","list","message","notes","off","on","slash","speaker","speech","text"]},{"name":"phone_disabled","tags":["call","cell","contact","device","disabled","enabled","hardware","mobile","off","offline","on","phone","slash","telephone"]},{"name":"eject","tags":["disc","drive","dvd","eject","remove","triangle","usb"]},{"name":"control_point_duplicate","tags":["+","add","circle","control","duplicate","multiple","new","plus","point","symbol"]},{"name":"conveyor_belt","tags":["factory","logistic","logistics","manufactory","production","supply","system","transport"]},{"name":"filter","tags":["edit","editing","effect","filter","image","landscape","mountain","mountains","photo","photography","picture","settings"]},{"name":"pest_control","tags":["bug","control","exterminator","insects","pest"]},{"name":"backpack","tags":["back","backpack","bag","book","bookbag","knapsack","pack","storage","travel"]},{"name":"leak_add","tags":["add","connection","data","leak","link","network","service","signals","synce","wireless"]},{"name":"zoom_in_map","tags":["arrow","arrows","destination","in","location","maps","move","place","stop","zoom"]},{"name":"brightness_7","tags":["7","brightness","circle","control","crescent","level","moon","screen","sun"]},{"name":"system_security_update_good","tags":["Android","OS","approve","cell","check","complete","device","done","good","hardware","iOS","mark","mobile","ok","phone","security","select","system","tablet","tick","update","validate","verified","yes"]},{"name":"ring_volume","tags":["call","calling","cell","contact","device","hardware","incoming","mobile","phone","ring","ringer","sound","telephone","volume"]},{"name":"money_off_csred","tags":["bill","card","cart","cash","coin","commerce","credit","csred","currency","disabled","dollars","enabled","money","off","on","online","pay","payment","shopping","slash","symbol"]},{"name":"sports_football","tags":["athlete","athletic","ball","entertainment","exercise","football","game","hobby","social","sports"]},{"name":"nature","tags":["forest","nature","outdoor","outside","park","tree","wilderness"]},{"name":"vibration","tags":["Android","OS","alert","cell","device","hardware","iOS","mobile","mode","motion","notification","phone","silence","silent","tablet","vibrate","vibration"]},{"name":"snippet_folder","tags":["data","doc","document","drive","file","folder","sheet","slide","snippet","storage"]},{"name":"edit_road","tags":["destination","direction","edit","highway","maps","pen","pencil","road","street","traffic"]},{"name":"edit_square","tags":["compose","create","draft","edit","editing","input","pen","pencil","square","write","writing"]},{"name":"run_circle","tags":["body","circle","exercise","human","people","person","run","running"]},{"name":"dry_cleaning","tags":["cleaning","dry","hanger","hotel","laundry","places","service","towel"]},{"name":"alarm_off","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","time","timer","watch"]},{"name":"perm_data_setting","tags":["data","gear","info","information","perm","settings"]},{"name":"bedroom_parent","tags":["bed","bedroom","double","full","furniture","home","hotel","house","king","night","parent","pillows","queen","rest","room","sizem master","sleep"]},{"name":"airline_seat_recline_normal","tags":["airline","body","extra","feet","human","leg","legroom","normal","people","person","recline","seat","sitting","space","travel"]},{"name":"currency_bitcoin","tags":["bill","blockchain","card","cash","coin","commerce","cost","credit","currency","digital","dollar","dollars","finance","franc","money","online","pay","payment","price","shopping","symbol"]},{"name":"do_disturb_alt","tags":["cancel","close","denied","deny","disturb","do","remove","silence","stop"]},{"name":"sensor_window","tags":["alarm","security","security system"]},{"name":"incomplete_circle","tags":["chart","circle","incomplete"]},{"name":"settings_input_hdmi","tags":["cable","connection","connectivity","definition","hdmi","high","input","plug","plugin","points","settings","video","wire"]},{"name":"camera_indoor","tags":["architecture","building","camera","estate","film","filming","home","house","image","indoor","inside","motion","nest","picture","place","real","residence","residential","shelter","video","videography"]},{"name":"edit_location_alt","tags":["alt","edit","location","pen","pencil","pin"]},{"name":"texture","tags":["diagonal","lines","pattern","stripes","texture"]},{"name":"location_off","tags":["destination","direction","location","maps","off","pin","place","room","stop"]},{"name":"edit_attributes","tags":["approve","attribution","check","complete","done","edit","mark","ok","select","tick","validate","verified","yes"]},{"name":"duo","tags":["call","chat","conference","device","duo","video"]},{"name":"slow_motion_video","tags":["arrow","control","controls","dash","dashed","motion","music","play","slow","speed","video"]},{"name":"perm_scan_wifi","tags":["alert","announcement","connection","info","information","internet","network","perm","scan","service","signal","wifi","wireless"]},{"name":"phonelink_setup","tags":["Android","OS","call","chat","device","hardware","iOS","info","mobile","phone","phonelink","settings","setup","tablet","text"]},{"name":"hourglass_disabled","tags":["clock","countdown","disabled","empty","enabled","hourglass","loading","minute","minutes","off","on","slash","time","wait","waiting"]},{"name":"add_to_queue","tags":["+","Android","OS","add","chrome","desktop","device","display","hardware","iOS","mac","monitor","new","plus","queue","screen","symbol","to","web","window"]},{"name":"pie_chart_outline","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","outline","pie","statistics","tracking"]},{"name":"pie_chart_outlined","tags":["analytics","bar","bars","chart","data","diagram","graph","infographic","measure","metrics","outlined","pie","statistics","tracking"]},{"name":"playlist_remove","tags":["-","collection","list","minus","music","playlist","remove"]},{"name":"next_week","tags":["arrow","bag","baggage","briefcase","business","case","next","suitcase","week"]},{"name":"church","tags":["christian","christianity","ideology","religion","spiritual","worship"]},{"name":"medical_information","tags":["badge","card","health","id","id card","identification","information","medical","services"]},{"name":"view_compact","tags":["compact","grid","layout","pattern","squares","view"]},{"name":"timer_off","tags":["alarm","alert","bell","clock","disabled","duration","enabled","notification","off","on","slash","stop","time","timer","watch"]},{"name":"bluetooth_connected","tags":["bluetooth","cast","connect","connection","device","paring","streaming","symbol","wireless"]},{"name":"photo_size_select_actual","tags":["actual","dash","dashed","image","mountain","mountains","photo","photography","picture","select","size"]},{"name":"short_text","tags":["brief","comment","doc","document","note","short","text","write","writing"]},{"name":"bedroom_baby","tags":["babies","baby","bedroom","child","children","home","horse","house","infant","kid","newborn","rocking","room","toddler","young"]},{"name":"video_camera_back","tags":["back","camera","image","landscape","mountain","mountains","photo","photography","picture","rear","video"]},{"name":"bathroom","tags":["bath","bathroom","closet","home","house","place","plumbing","room","shower","sprinkler","wash","water","wc"]},{"name":"downhill_skiing","tags":["athlete","athletic","body","downhill","entertainment","exercise","hobby","human","people","person","ski social","skiing","snow","sports","travel","winter"]},{"name":"filter_list_off","tags":["alt","disabled","edit","filter","list","off","offline","options","refine","sift","slash"]},{"name":"connected_tv","tags":["Android","OS","airplay","chrome","connect","connected","desktop","device","display","hardware","iOS","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"format_indent_increase","tags":["align","alignment","doc","edit","editing","editor","format","increase","indent","indentation","paragraph","sheet","spreadsheet","text","type","writing"]},{"name":"settings_cell","tags":["Android","OS","cell","device","hardware","iOS","mobile","phone","settings","tablet"]},{"name":"remember_me","tags":["Android","OS","avatar","device","hardware","human","iOS","identity","me","mobile","people","person","phone","profile","remember","tablet","user"]},{"name":"kayaking","tags":["athlete","athletic","body","canoe","entertainment","exercise","hobby","human","kayak","kayaking","lake","paddle","paddling","people","person","rafting","river","row","social","sports","summer","travel","water"]},{"name":"switch_access_shortcut_add","tags":["+","access","add","arrow","arrows","direction","navigation","new","north","plus","shortcut","switch","symbol","up"]},{"name":"app_blocking","tags":["Android","OS","app","application","block","blocking","cancel","cell","device","hardware","iOS","mobile","phone","stop","stopped","tablet"]},{"name":"elevator","tags":["body","down","elevator","human","people","person","up"]},{"name":"work_off","tags":["bag","baggage","briefcase","business","case","disabled","enabled","job","off","on","slash","suitcase","work"]},{"name":"sensors_off","tags":["connection","disabled","enabled","network","off","on","scan","sensors","signal","slash","wireless"]},{"name":"stay_primary_portrait","tags":["Android","OS","current","device","hardware","iOS","mobile","phone","portrait","primary","stay","tablet"]},{"name":"cell_tower","tags":["broadcast","casting","cell","network","signal","tower","transmitting","wireless"]},{"name":"moped","tags":["automobile","bike","car","cars","maps","scooter","transportation","vehicle","vespa"]},{"name":"wrong_location","tags":["cancel","clear","close","destination","direction","exit","location","maps","no","pin","place","quit","remove","stop","wrong","x"]},{"name":"groups_2","tags":["body","club","collaboration","crowd","gathering","groups","hair","human","meeting","people","person","social","teams"]},{"name":"public_off","tags":["disabled","earth","enabled","global","globe","map","network","off","on","planet","public","slash","social","space","web","world"]},{"name":"picture_in_picture_alt","tags":["chat","crop","cropped","display","displays","layout","multitasking","overlap","photo","picture","pip","position","shape","sizes","talktrack"]},{"name":"chair_alt","tags":["cahir","furniture","home","house","kitchen","lounging","seating","table"]},{"name":"car_repair","tags":["automobile","car","cars","maps","repair","transportation","vehicle"]},{"name":"airplay","tags":["airplay","arrow","connect","control","desktop","device","display","monitor","screen","signal"]},{"name":"nfc","tags":["communication","data","field","mobile","near","nfc","wireless"]},{"name":"line_style","tags":["dash","dotted","line","rule","spacing","style"]},{"name":"transform","tags":["adjust","crop","edit","editing","image","photo","picture","transform"]},{"name":"single_bed","tags":["bed","bedroom","double","furniture","home","hotel","house","king","night","pillows","queen","rest","room","single","sleep","twin"]},{"name":"pattern","tags":["key","login","password","pattern","pin","security","star","unlock"]},{"name":"local_movies","tags":[]},{"name":"repeat_one","tags":["1","arrow","arrows","control","controls","digit","loop","media","music","numbers","one","repeat","symbol","video"]},{"name":"swap_calls","tags":["arrow","arrows","calls","device","direction","mobile","share","swap"]},{"name":"do_not_disturb_alt","tags":["cancel","close","denied","deny","disturb","do","remove","silence","slash","stop"]},{"name":"smoking_rooms","tags":["allowed","cigarette","places","rooms","smoke","smoking","tobacco","zone"]},{"name":"remove_moderator","tags":["certified","disabled","enabled","moderator","off","on","privacy","private","protect","protection","remove","security","shield","slash","verified"]},{"name":"perm_device_information","tags":["Android","OS","alert","announcement","device","hardware","i","iOS","info","information","mobile","perm","phone","tablet"]},{"name":"wash","tags":["bathroom","clean","fingers","gesture","hand","wash","wc"]},{"name":"mode_standby","tags":["disturb","mode","power","sleep","standby","target"]},{"name":"door_sliding","tags":["auto","automatic","door","doorway","double","entrance","exit","glass","home","house","sliding","two"]},{"name":"skateboarding","tags":["athlete","athletic","body","entertainment","exercise","hobby","human","people","person","skate","skateboarder","skateboarding","social","sports"]},{"name":"difference","tags":["compare","content","copy","cut","diff","difference","doc","document","duplicate","file","multiple","past","stack"]},{"name":"group_remove","tags":["accounts","committee","face","family","friends","group","humans","network","people","persons","profiles","remove","social","team","users"]},{"name":"brightness_high","tags":["auto","brightness","control","high","mobile","monitor","phone","sun"]},{"name":"cabin","tags":["architecture","cabin","camping","cottage","estate","home","house","log","maps","place","real","residence","residential","stay","traveling","wood"]},{"name":"camera_outdoor","tags":["architecture","building","camera","estate","film","filming","home","house","image","motion","nest","outdoor","outside","picture","place","real","residence","residential","shelter","video","videography"]},{"name":"troubleshoot","tags":["analytics","chart","data","diagram","find","glass","graph","infographic","line","look","magnify","magnifying","measure","metrics","search","see","statistics","tracking","troubleshoot"]},{"name":"tablet_android","tags":["OS","android","device","hardware","iOS","ipad","mobile","tablet","web"]},{"name":"house_siding","tags":["architecture","building","construction","estate","exterior","facade","home","house","real","residential","siding"]},{"name":"satellite","tags":["bluetooth","connect","connection","connectivity","data","device","image","internet","landscape","location","maps","mountain","mountains","network","photo","photography","picture","satellite","scan","service","signal","symbol","wifi","wireless"]},{"name":"motion_photos_on","tags":["animation","circle","disabled","enabled","motion","off","on","photos","play","slash","video"]},{"name":"door_back","tags":["back","closed","door","doorway","entrance","exit","home","house","way"]},{"name":"strikethrough_s","tags":["alphabet","character","cross","doc","edit","editing","editor","font","letters","out","s","sheet","spreadsheet","strikethrough","styles","symbol","text","type","writing"]},{"name":"co2","tags":["carbon","chemical","co2","dioxide","gas"]},{"name":"notifications_paused","tags":["active","alarm","alert","bell","chime","ignore","notifications","notify","paused","quiet","reminder","ring --- pause","sleep","snooze","sound","z","zzz"]},{"name":"currency_yen","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","money","online","pay","payment","price","shopping","symbol","yen"]},{"name":"call_to_action","tags":["action","alert","bar","call","components","cta","design","info","information","interface","layout","message","notification","screen","site","to","ui","ux","web","website","window"]},{"name":"photo_camera_front","tags":["account","camera","face","front","human","image","people","person","photo","photography","picture","portrait","profile","user"]},{"name":"directions_boat_filled","tags":["automobile","boat","car","cars","direction","directions","ferry","filled","maps","public","transportation","vehicle"]},{"name":"subtitles_off","tags":["accessibility","accessible","caption","cc","closed","disabled","enabled","language","live caption","off","on","slash","subtitle","subtitles","translate","video"]},{"name":"rotate_90_degrees_ccw","tags":["90","arrow","arrows","ccw","degrees","direction","edit","editing","image","photo","rotate","turn"]},{"name":"vertical_align_center","tags":["align","alignment","arrow","center","doc","down","edit","editing","editor","sheet","spreadsheet","text","type","up","vertical","writing"]},{"name":"living","tags":["chair","comfort","couch","decoration","furniture","home","house","living","lounging","loveseat","room","seat","seating","sofa"]},{"name":"battery_saver","tags":["+","add","battery","charge","charging","new","plus","power","saver","symbol"]},{"name":"hot_tub","tags":["bath","bathing","bathroom","bathtub","hot","hotel","human","jacuzzi","person","shower","spa","steam","travel","tub","water"]},{"name":"play_lesson","tags":["audio","book","bookmark","digital","ebook","lesson","multimedia","play","play lesson","read","reading","ribbon"]},{"name":"update_disabled","tags":["arrow","back","backwards","clock","date","disabled","enabled","forward","history","load","off","on","refresh","reverse","rotate","schedule","slash","time","update"]},{"name":"psychology_alt","tags":["?","assistance","behavior","body","brain","cognitive","function","gear","head","help","human","info","information","intellectual","mental","mind","people","person","preferences","psychiatric","psychology","punctuation","question mark","science","settings","social","support","symbol","therapy","thinking","thoughts"]},{"name":"cast_connected","tags":["Android","OS","airplay","cast","chrome","connect","connected","desktop","device","display","hardware","iOS","mac","monitor","screen","screencast","streaming","television","tv","web","window","wireless"]},{"name":"format_color_reset","tags":["clear","color","disabled","doc","droplet","edit","editing","editor","enabled","fill","format","off","on","paint","reset","sheet","slash","spreadsheet","style","text","type","water","writing"]},{"name":"snooze","tags":["alarm","bell","clock","duration","notification","snooze","time","timer","watch","z"]},{"name":"person_remove_alt_1","tags":[]},{"name":"align_horizontal_left","tags":["align","alignment","format","horizontal","layout","left","lines","paragraph","rule","rules","style","text"]},{"name":"boy","tags":["body","boy","gender","human","male","man","people","person","social","symbol"]},{"name":"battery_5_bar","tags":["5","bar","battery","cell","charge","mobile","power"]},{"name":"mic_external_on","tags":["audio","disabled","enabled","external","mic","microphone","off","on","slash","sound","voice"]},{"name":"voicemail","tags":["call","device","message","missed","mobile","phone","recording","voice","voicemail"]},{"name":"join_full","tags":["circle","combine","command","join","left","outer","overlap","right","sql"]},{"name":"looks_5","tags":["5","digit","looks","numbers","square","symbol"]},{"name":"countertops","tags":["counter","countertops","home","house","kitchen","sink","table","tops"]},{"name":"energy_savings_leaf","tags":["eco","energy","leaf","leaves","nest","savings","usage"]},{"name":"safety_divider","tags":["apart","distance","divider","safety","separate","social","space"]},{"name":"move_up","tags":["arrow","direction","jump","move","navigation","transfer","up"]},{"name":"storm","tags":["forecast","hurricane","storm","temperature","twister","weather","wind"]},{"name":"sync_disabled","tags":["360","around","arrow","arrows","direction","disabled","enabled","inprogress","load","loading refresh","off","on","renew","rotate","slash","sync","turn"]},{"name":"javascript","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","javascript","letters","platform","symbol","text","type"]},{"name":"tram","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"app_shortcut","tags":["app","bookmarked","favorite","highlight","important","marked","mobile","save","saved","shortcut","software","special","star"]},{"name":"data_saver_off","tags":["analytics","bar","bars","chart","data","diagram","donut","graph","infographic","measure","metrics","off","on","ring","saver","statistics","tracking"]},{"name":"laptop_windows","tags":["Android","OS","chrome","device","display","hardware","iOS","laptop","mac","monitor","screen","web","window","windows"]},{"name":"doorbell","tags":["alarm","bell","door","doorbell","home","house","ringing"]},{"name":"hd","tags":["alphabet","character","codec","definition","display","font","hd","high","high definition","letters","movie","movies","resolution","screen","symbol","text","tv","type"]},{"name":"file_download_off","tags":["arrow","disabled","down","download","drive","enabled","export","file","install","off","on","save","slash","upload"]},{"name":"apps_outage","tags":["all","applications","apps","circles","collection","components","dots","grid","interface","outage","squares","ui","ux"]},{"name":"taxi_alert","tags":["!","alert","attention","automobile","cab","car","cars","caution","danger","direction","error","exclamation","important","lyft","maps","mark","notification","public","symbol","taxi","transportation","uber","vehicle","warning","yellow"]},{"name":"breakfast_dining","tags":["bakery","bread","breakfast","butter","dining","food","toast"]},{"name":"brightness_medium","tags":["auto","brightness","control","medium","mobile","monitor","phone","sun"]},{"name":"gradient","tags":["color","edit","editing","effect","filter","gradient","image","images","photography","picture","pictures"]},{"name":"swipe_left","tags":["arrow","arrows","finger","hand","hit","left","navigation","reject","strike","swing","swipe","take"]},{"name":"soup_kitchen","tags":["breakfast","brunch","dining","food","kitchen","lunch","meal","soup"]},{"name":"voice_over_off","tags":["account","disabled","enabled","face","human","mute","off","on","over","people","person","profile","recording","slash","speak","speaking","speech","transcript","user","voice"]},{"name":"water_damage","tags":["architecture","building","damage","drop","droplet","estate","house","leak","plumbing","real","residence","residential","shelter","water"]},{"name":"abc","tags":["alphabet","character","font","letters","symbol","text","type"]},{"name":"data_saver_on","tags":["+","add","analytics","chart","data","diagram","graph","infographic","measure","metrics","new","on","plus","ring","saver","statistics","symbol","tracking"]},{"name":"signal_wifi_0_bar","tags":["0","bar","cell","cellular","data","internet","mobile","network","phone","signal","wifi","wireless"]},{"name":"brightness_low","tags":["auto","brightness","control","low","mobile","monitor","phone","sun"]},{"name":"device_unknown","tags":["?","Android","OS","assistance","cell","device","hardware","help","iOS","info","information","mobile","phone","punctuation","question mark","support","symbol","tablet","unknown"]},{"name":"fire_extinguisher","tags":["emergency","extinguisher","fire","water"]},{"name":"fitbit","tags":["athlete","athletic","exercise","fitbit","fitness","hobby","logo"]},{"name":"bedroom_child","tags":["bed","bedroom","child","children","furniture","home","hotel","house","kid","night","pillows","rest","room","size","sleep","twin","young"]},{"name":"closed_caption_off","tags":["accessible","alphabet","caption","cc","character","closed","decoder","font","language","letters","media","movies","off","outline","subtitle","subtitles","symbol","text","tv","type"]},{"name":"bluetooth_searching","tags":["bluetooth","connection","device","paring","search","searching","symbol"]},{"name":"content_paste_off","tags":["clipboard","content","disabled","doc","document","enabled","file","off","on","paste","slash"]},{"name":"hexagon","tags":["hexagon","shape","six sides"]},{"name":"tap_and_play","tags":["Android","OS wifi","cell","connection","device","hardware","iOS","internet","mobile","network","phone","play","signal","tablet","tap","to","wireless"]},{"name":"domain_add","tags":["+","add","apartment","architecture","building","business","domain","estate","home","new","place","plus","real","residence","residential","shelter","symbol","web","www"]},{"name":"signpost","tags":["arrow","direction","left","maps","right","signal","signs","street","traffic"]},{"name":"screenshot","tags":["Android","OS","cell","crop","device","hardware","iOS","mobile","phone","screen","screenshot","tablet"]},{"name":"network_cell","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"repeat_on","tags":["arrow","arrows","control","controls","loop","media","music","on","repeat","video"]},{"name":"charging_station","tags":["Android","OS","battery","bolt","cell","charging","device","electric","energy","hardware","iOS","instant","lightning","mobile","phone","station","tablet","thunderbolt"]},{"name":"grid_4x4","tags":["4","by","grid","layout","lines","space"]},{"name":"assistant_photo","tags":["assistant","flag","photo","recommendation","smart","star","suggestion"]},{"name":"carpenter","tags":["building","carpenter","construction","cutting","handyman","repair","saw","tool"]},{"name":"private_connectivity","tags":["connectivity","lock","locked","password","privacy","private","protection","safety","secure","security"]},{"name":"mobiledata_off","tags":["arrow","data","disabled","down","enabled","internet","mobile","network","off","on","slash","speed","up","wifi","wireless"]},{"name":"atm","tags":["alphabet","atm","automated","bill","card","cart","cash","character","coin","commerce","credit","currency","dollars","font","letters","machine","money","online","pay","payment","shopping","symbol","teller","text","type"]},{"name":"rv_hookup","tags":["arrow","attach","automobile","automotive","back","car","cars","connect","direction","hookup","left","maps","public","right","rv","trailer","transportation","travel","truck","van","vehicle"]},{"name":"replay_30","tags":["30","arrow","arrows","control","controls","digit","music","numbers","refresh","renew","repeat","replay","symbol","thirty","video"]},{"name":"offline_share","tags":["Android","OS","arrow","cell","connect","device","direction","hardware","iOS","link","mobile","multiple","offline","phone","right","share","tablet"]},{"name":"settings_input_svideo","tags":["cable","connection","connectivity","definition","input","plug","plugin","points","settings","standard","svideo","video"]},{"name":"soap","tags":["bathroom","clean","fingers","gesture","hand","soap","wash","wc"]},{"name":"baby_changing_station","tags":["babies","baby","bathroom","body","changing","child","children","father","human","infant","kids","mother","newborn","people","person","station","toddler","wc","young"]},{"name":"sports_cricket","tags":["athlete","athletic","ball","bat","cricket","entertainment","exercise","game","hobby","social","sports"]},{"name":"ad_units","tags":["Android","OS","ad","banner","cell","device","hardware","iOS","mobile","notification","notifications","phone","tablet","top","units"]},{"name":"wb_twilight","tags":["balance","light","lighting","noon","sun","sunset","twilight","wb","white"]},{"name":"no_encryption","tags":["disabled","enabled","encryption","lock","no","off","on","password","safety","security","slash"]},{"name":"table_bar","tags":["bar","cafe","round","table"]},{"name":"diversity_2","tags":["committee","diverse","diversity","family","friends","group","groups","heart","humans","network","people","persons","social","team"]},{"name":"subway","tags":["automobile","bike","car","cars","maps","rail","scooter","subway","train","transportation","travel","tunnel","underground","vehicle","vespa"]},{"name":"browser_updated","tags":["Android","OS","arrow","browser","chrome","desktop","device","display","download","hardware","iOS","mac","monitor","screen","updated","web","window"]},{"name":"currency_pound","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","money","online","pay","payment","pound","price","shopping","symbol"]},{"name":"transit_enterexit","tags":["arrow","direction","enterexit","maps","navigation","route","transit","transportation"]},{"name":"contrast","tags":["black","contrast","dark theme","edit","editing","effect","filter","grayscale","image","images","photography","picture","pictures","settings","white"]},{"name":"lightbulb_circle","tags":["alert","announcement","bulb","idea","incandescent","info","information","led","light","lightbulb","tip"]},{"name":"lightbulb_outline","tags":["alert","announcement","bulb","idea","incandescent","info","information","led","light","lightbulb","tip"]},{"name":"rectangle","tags":["four sides","parallelograms","polygons","quadrilaterals","recangle","shape"]},{"name":"call_merge","tags":["arrow","call","device","merge","mobile"]},{"name":"hide_image","tags":["disabled","enabled","hide","image","landscape","mountain","mountains","off","on","photo","photography","picture","slash"]},{"name":"shield_moon","tags":["certified","do not disturb","moon","night","privacy","private","protect","protection","security","shield","verified"]},{"name":"group_off","tags":["body","club","collaboration","crowd","gathering","group","human","meeting","off","people","person","social","teams"]},{"name":"music_off","tags":["audio","audiotrack","disabled","enabled","key","music","mute","note","off","on","slash","sound","track"]},{"name":"bluetooth_disabled","tags":["bluetooth","cast","connect","connection","device","disabled","enabled","off","offline","on","paring","slash","streaming","symbol","wireless"]},{"name":"flip_to_back","tags":["arrange","arrangement","back","dash","dashed","flip","format","front","layout","move","order","sort","to"]},{"name":"sd_card","tags":["camera","card","digital","memory","photos","sd","secure","storage"]},{"name":"exposure_plus_1","tags":["1","add","brightness","contrast","digit","edit","editing","effect","exposure","image","numbers","photo","photography","plus","settings","symbol"]},{"name":"view_array","tags":["array","design","format","grid","layout","view","website"]},{"name":"sports_mma","tags":["arts","athlete","athletic","boxing","combat","entertainment","exercise","fighting","game","glove","hobby","martial","mixed","mma","social","sports"]},{"name":"straight","tags":["arrow","arrows","direction","directions","maps","navigation","path","route","sign","straight","traffic","up"]},{"name":"thermostat_auto","tags":["A","auto","celsius","fahrenheit","meter","temp","temperature","thermometer","thermostat"]},{"name":"mobile_screen_share","tags":["Android","OS","cast","cell","device","hardware","iOS","mirror","mobile","monitor","phone","screen","screencast","share","stream","streaming","tablet","tv","wireless"]},{"name":"phone_missed","tags":["arrow","call","cell","contact","device","hardware","missed","mobile","phone","telephone"]},{"name":"brunch_dining","tags":["breakfast","brunch","champagne","dining","drink","food","lunch","meal"]},{"name":"featured_video","tags":["advertised","advertisement","featured","highlighted","recommended","video","watch"]},{"name":"merge","tags":["arrow","arrows","direction","directions","maps","merge","navigation","path","route","sign","traffic"]},{"name":"open_in_new_off","tags":["arrow","box","disabled","enabled","export","in","new","off","on","open","slash","window"]},{"name":"hdr_auto","tags":["A","alphabet","auto","camera","character","circle","dynamic","font","hdr","high","letters","photo","range","symbol","text","type"]},{"name":"join_inner","tags":["circle","command","inner","join","matching","overlap","sql","values"]},{"name":"solar_power","tags":["eco","energy","heat","nest","power","solar","sun","sunny"]},{"name":"crop_16_9","tags":["16","9","adjust","adjustments","area","by","crop","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"swipe_right","tags":["accept","arrows","direction","finger","hands","hit","navigation","right","strike","swing","swpie","take"]},{"name":"phonelink_erase","tags":["Android","OS","cancel","cell","clear","close","connection","device","erase","exit","hardware","iOS","mobile","no","phone","phonelink","remove","stop","tablet","x"]},{"name":"smoke_free","tags":["cigarette","disabled","enabled","free","never","no","off","on","places","prohibited","slash","smoke","smoking","tobacco","warning","zone"]},{"name":"install_desktop","tags":["Android","OS","chrome","desktop","device","display","fix","hardware","iOS","install","mac","monitor","place","pwa","screen","web","window"]},{"name":"shutter_speed","tags":["aperture","camera","duration","image","lens","photo","photography","photos","picture","setting","shutter","speed","stop","time","timer","watch"]},{"name":"keyboard_hide","tags":["arrow","computer","device","down","hardware","hide","input","keyboard","keypad","text"]},{"name":"exposure","tags":["add","brightness","contrast","edit","editing","effect","exposure","image","minus","photo","photography","picture","plus","settings","subtract"]},{"name":"nordic_walking","tags":["athlete","athletic","body","entertainment","exercise","hiking","hobby","human","nordic","people","person","social","sports","travel","walker","walking"]},{"name":"umbrella","tags":["beach","protection","rain","sun","sunny","umbrella"]},{"name":"move_down","tags":["arrow","direction","down","jump","move","navigation","transfer"]},{"name":"filter_2","tags":["2","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"photo_album","tags":["album","archive","bookmark","image","label","library","mountain","mountains","photo","photography","picture","ribbon","save","tag"]},{"name":"security_update_good","tags":["Android","OS","checkmark","device","good","hardware","iOS","mobile","ok","phone","security","tablet","tick","update"]},{"name":"ssid_chart","tags":["chart","graph","lines","network","ssid","wifi"]},{"name":"score","tags":["2k","alphabet","analytics","bar","bars","character","chart","data","diagram","digit","font","graph","infographic","letters","measure","metrics","numbers","score","statistics","symbol","text","tracking","type"]},{"name":"swipe_up","tags":["arrows","direction","disable","enable","finger","hands","hit","navigation","strike","swing","swpie","take","up"]},{"name":"battery_4_bar","tags":["4","bar","battery","cell","charge","mobile","power"]},{"name":"all_out","tags":["all","circle","out","shape"]},{"name":"battery_unknown","tags":["?","assistance","battery","cell","charge","help","info","information","mobile","power","punctuation","question mark","support","symbol","unknown"]},{"name":"sports_golf","tags":["athlete","athletic","ball","club","entertainment","exercise","game","golf","golfer","golfing","hobby","social","sports"]},{"name":"sports_martial_arts","tags":["arts","athlete","athletic","entertainment","exercise","hobby","human","karate","martial","people","person","social","sports"]},{"name":"filter_tilt_shift","tags":["blur","center","dash","dashed","edit","editing","effect","filter","focus","image","images","photography","picture","pictures","shift","tilt"]},{"name":"electric_bike","tags":["bike","bolt","ebike","electric","electricity","maps","scooter","thunderbolt","transportation","travel","vespa"]},{"name":"border_all","tags":["all","border","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"auto_mode","tags":["ai","around","arrow","arrows","artificial","auto","automatic","automation","custom","direction","genai","inprogress","intelligence","load","loading refresh","magic","mode","navigation","nest","renew","rotate","smart","spark","sparkle","star","turn"]},{"name":"hvac","tags":["air","conditioning","heating","hvac","ventilation"]},{"name":"scanner","tags":["copy","device","hardware","machine","scan","scanner"]},{"name":"shuffle_on","tags":["arrow","arrows","control","controls","music","on","random","shuffle","video"]},{"name":"wifi_calling_3","tags":["3","calling","cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"signal_wifi_off","tags":["cell","cellular","data","disabled","enabled","internet","mobile","network","off","on","phone","signal","slash","speed","wifi","wireless"]},{"name":"girl","tags":["body","female","gender","girl","human","lady","people","person","social","symbol","woman","women"]},{"name":"shop_2","tags":["2","add","arrow","buy","cart","google","play","purchase","shop","shopping"]},{"name":"hdr_strong","tags":["circles","dots","dynamic","enhance","hdr","high","range","strong"]},{"name":"directions_transit","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"label_off","tags":["disabled","enabled","favorite","indent","label","library","mail","off","on","remember","save","slash","stamp","sticker","tag","wing"]},{"name":"tablet","tags":["Android","OS","device","hardware","iOS","ipad","mobile","tablet","web"]},{"name":"5g","tags":["5g","alphabet","cellular","character","data","digit","font","letters","mobile","network","numbers","phone","signal","speed","symbol","text","type","wifi"]},{"name":"vrpano","tags":["angle","image","landscape","mountain","mountains","panorama","photo","photography","picture","view","vrpano","wide"]},{"name":"forward_30","tags":["30","arrow","control","controls","digit","fast","forward","music","numbers","seconds","symbol","video"]},{"name":"battery_0_bar","tags":["0","bar","battery","cell","charge","full","mobile","power"]},{"name":"airline_seat_recline_extra","tags":["airline","body","extra","feet","human","leg","legroom","people","person","seat","sitting","space","travel"]},{"name":"looks","tags":["circle","half","looks","rainbow"]},{"name":"linked_camera","tags":["camera","connect","connection","lens","linked","network","photo","photography","picture","signal","signals","sync","wireless"]},{"name":"paragliding","tags":["athlete","athletic","body","entertainment","exercise","fly","gliding","hobby","human","parachute","paragliding","people","person","sky","skydiving","social","sports","travel"]},{"name":"electric_scooter","tags":["bike","bolt","direction","directions","electric","maps","scooter","thunderbolt","transportation","vehicle","vespa"]},{"name":"settings_system_daydream","tags":["backup","cloud","daydream","drive","settings","storage","system"]},{"name":"format_indent_decrease","tags":["align","alignment","decrease","doc","edit","editing","editor","format","indent","indentation","paragraph","sheet","spreadsheet","text","type","writing"]},{"name":"tapas","tags":["appetizer","brunch","dinner","food","lunch","restaurant","snack","tapas"]},{"name":"brightness_3","tags":["3","brightness","circle","control","crescent","level","moon","screen"]},{"name":"tab_unselected","tags":["browser","computer","dash","dashed","document","documents","folder","internet","tab","tabs","unselected","web","website","window","windows"]},{"name":"density_small","tags":["density","horizontal","lines","rule","rules","small"]},{"name":"blur_circular","tags":["blur","circle","circular","dots","edit","editing","effect","enhance","filter"]},{"name":"rice_bowl","tags":["bowl","dinner","food","lunch","meal","restaurant","rice"]},{"name":"rounded_corner","tags":["adjust","corner","dash","dashed","edit","rounded","shape","square","transform"]},{"name":"person_add_disabled","tags":["+","account","add","disabled","enabled","face","human","new","off","offline","on","people","person","plus","profile","slash","symbol","user"]},{"name":"music_video","tags":["band","music","recording","screen","tv","video","watch"]},{"name":"looks_6","tags":["6","digit","looks","numbers","square","symbol"]},{"name":"do_not_touch","tags":["disabled","do","enabled","fingers","gesture","hand","not","off","on","slash","touch"]},{"name":"playlist_add_circle","tags":["add","album","artist","audio","cd","check","circle","collection","list","mark","music","playlist","record","sound","track"]},{"name":"domain_disabled","tags":["apartment","architecture","building","business","company","disabled","domain","enabled","estate","home","internet","maps","off","office","offline","on","place","real","residence","residential","slash","web","website"]},{"name":"flash_auto","tags":["a","auto","bolt","electric","energy","fast","flash","instant","lightning","thunderbolt"]},{"name":"6_ft_apart","tags":["6","apart","body","covid","distance","feet","ft","human","people","person","social"]},{"name":"signal_wifi_bad","tags":["bad","bar","cancel","cell","cellular","clear","close","data","exit","internet","mobile","network","no","phone","quit","remove","signal","stop","wifi","wireless","x"]},{"name":"crisis_alert","tags":["!","alert","attention","bullseye","caution","crisis","danger","error","exclamation","important","mark","notification","symbol","target","warning"]},{"name":"queue_play_next","tags":["+","add","arrow","desktop","device","display","hardware","monitor","new","next","play","plus","queue","screen","stream","symbol","tv"]},{"name":"format_clear","tags":["T","alphabet","character","clear","disabled","doc","edit","editing","editor","enabled","font","format","letters","off","on","sheet","slash","spreadsheet","style","symbol","text","type","writing"]},{"name":"bus_alert","tags":["!","alert","attention","automobile","bus","car","cars","caution","danger","error","exclamation","important","maps","mark","notification","symbol","transportation","vehicle","warning"]},{"name":"party_mode","tags":["camera","lens","mode","party","photo","photography","picture"]},{"name":"snowboarding","tags":["athlete","athletic","body","entertainment","exercise","hobby","human","people","person","snow","snowboarding","social","sports","travel","winter"]},{"name":"snowing","tags":["climate","cold","snow","temperature","weather","winter"]},{"name":"text_rotate_vertical","tags":["A","alphabet","arrow","character","down","field","font","letters","move","rotate","symbol","text","type","vertical"]},{"name":"motion_photos_auto","tags":["A","alphabet","animation","auto","automatic","character","circle","font","gif","letters","live","motion","photos","symbol","text","type","video"]},{"name":"crop_portrait","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","photo","photos","portrait","rectangle","settings","size","square"]},{"name":"thunderstorm","tags":["bolt","climate","cloud","cloudy","lightning","rain","rainfall","rainstorm","storm","thunder","thunderstorm","weather"]},{"name":"battery_6_bar","tags":["6","bar","battery","cell","charge","mobile","power"]},{"name":"space_bar","tags":["bar","keyboard","line","space"]},{"name":"replay_5","tags":["5","arrow","arrows","control","controls","digit","five","music","numbers","refresh","renew","repeat","replay","symbol","video"]},{"name":"local_car_wash","tags":["automobile","car","cars","local","maps","transportation","travel","vehicle","wash"]},{"name":"folder_delete","tags":["bin","can","data","delete","doc","document","drive","file","folder","folders","garbage","remove","sheet","slide","storage","trash"]},{"name":"data_thresholding","tags":["data","hidden","privacy","thresholding","thresold"]},{"name":"connecting_airports","tags":["air","aircraft","airplane","airplanes","airport","flight","flights","fly","flying","mode","on","plane","planes","signal","transportation","travel","trip"]},{"name":"access_alarms","tags":[]},{"name":"tty","tags":["call","cell","contact","deaf","device","hardware","impaired","mobile","phone","speech","talk","telephone","text","tty"]},{"name":"audio_file","tags":["audio","doc","document","key","music","note","sound","track"]},{"name":"egg","tags":["breakfast","brunch","egg","food"]},{"name":"balcony","tags":["architecture","balcony","doors","estate","home","house","maps","out","outside","place","real","residence","residential","stay","terrace","window"]},{"name":"kitesurfing","tags":["athlete","athletic","beach","body","entertainment","exercise","hobby","human","kitesurfing","people","person","social","sports","surf","travel","water"]},{"name":"call_missed_outgoing","tags":["arrow","call","device","missed","mobile","outgoing"]},{"name":"local_hotel","tags":["body","hotel","human","local","people","person","sleep","stay","travel","trip"]},{"name":"text_increase","tags":["+","add","alphabet","character","font","increase","letters","new","plus","resize","symbol","text","type"]},{"name":"speaker_phone","tags":["Android","OS","audio","cell","device","hardware","iOS","mobile","phone","sound","speaker","tablet","volume"]},{"name":"no_food","tags":["disabled","drink","enabled","fastfood","food","hamburger","meal","no","off","on","slash"]},{"name":"brightness_2","tags":["2","brightness","circle","control","crescent","level","moon","screen"]},{"name":"mode_of_travel","tags":["arrow","destination","direction","location","maps","mode","of","pin","place","stop","transportation","travel","trip"]},{"name":"format_line_spacing","tags":["align","alignment","doc","edit","editing","editor","format","line","sheet","spacing","spreadsheet","text","type","writing"]},{"name":"iso","tags":["add","edit","editing","effect","image","iso","minus","photography","picture","plus","sensor","shutter","speed","subtract"]},{"name":"explore_off","tags":["compass","destination","direction","disabled","east","enabled","explore","location","maps","needle","north","off","on","slash","south","travel","west"]},{"name":"drive_file_move_rtl","tags":["arrow","arrows","data","direction","doc","document","drive","file","folder","folders","left","move","rtl","sheet","side","slide","storage"]},{"name":"cell_wifi","tags":["cell","connection","data","internet","mobile","network","phone","service","signal","wifi","wireless"]},{"name":"tonality","tags":["circle","edit","editing","filter","greyscale","image","photography","picture","shade","shadow","tonality"]},{"name":"spoke","tags":["connection","network","radius","spoke"]},{"name":"photo_filter","tags":["ai","artificial","automatic","automation","custom","filter","filters","genai","image","intelligence","magic","photo","photography","picture","smart","spark","sparkle","star"]},{"name":"desktop_access_disabled","tags":["Android","OS","access","chrome","desktop","device","disabled","display","enabled","hardware","iOS","mac","monitor","off","offline","on","screen","slash","web","window"]},{"name":"sports_gymnastics","tags":["athlete","athletic","entertainment","exercise","gymnastics","hobby","social","sports"]},{"name":"houseboat","tags":["architecture","beach","boat","estate","floating","home","house","houseboat","maps","place","real","residence","residential","sea","stay","traveling","vacation"]},{"name":"fence","tags":["backyard","barrier","boundaries","boundary","door","entrance","fence","flowers","garden","gate","grass","home","house","nature","nest","outdoor","outside","protection","yard"]},{"name":"commit","tags":["accomplish","bind","circle","commit","dedicate","execute","line","perform","pledge"]},{"name":"photo_size_select_small","tags":["adjust","album","edit","editing","image","large","library","mountain","mountains","photo","photography","picture","select","size","small"]},{"name":"signal_wifi_connected_no_internet_4","tags":["4","cell","cellular","connected","data","internet","mobile","network","no","offline","phone","signal","wifi","wireless","x"]},{"name":"horizontal_distribute","tags":["alignment","distribute","format","horizontal","layout","lines","paragraph","rule","rules","style","text"]},{"name":"report_off","tags":["!","alert","attention","caution","danger","disabled","enabled","error","exclamation","important","mark","notification","octagon","off","offline","on","report","slash","symbol","warning"]},{"name":"polyline","tags":["compose","connect","connection","create","design","draw","line","node","polyline","vector"]},{"name":"art_track","tags":["album","art","artist","audio","image","music","photo","photography","picture","sound","track","tracks"]},{"name":"crop_7_5","tags":["5","7","adjust","adjustments","area","by","crop","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"filter_hdr","tags":["camera","edit","editing","effect","filter","hdr","image","mountain","mountains","photo","photography","picture"]},{"name":"text_rotation_none","tags":["A","alphabet","arrow","character","field","font","letters","move","none","rotate","symbol","text","type"]},{"name":"battery_3_bar","tags":["3","bar","battery","cell","charge","mobile","power"]},{"name":"align_vertical_bottom","tags":["align","alignment","bottom","format","layout","lines","paragraph","rule","rules","style","text","vertical"]},{"name":"stop_screen_share","tags":["Android","OS","arrow","cast","chrome","device","disabled","display","enabled","hardware","iOS","laptop","mac","mirror","monitor","off","offline","on","screen","share","slash","stop","stream","streaming","web","window"]},{"name":"imagesearch_roller","tags":["art","image","imagesearch","paint","roller","search"]},{"name":"bento","tags":["bento","box","dinner","food","lunch","meal","restaurant","takeout"]},{"name":"rotate_90_degrees_cw","tags":["90","arrow","arrows","ccw","degrees","direction","edit","editing","image","photo","rotate","turn"]},{"name":"install_mobile","tags":["Android","OS","cell","device","hardware","iOS","install","mobile","phone","pwa","tablet"]},{"name":"hearing_disabled","tags":["accessibility","accessible","aid","disabled","ear","enabled","handicap","hearing","help","impaired","listen","mute","off","on","slash","sound","volume"]},{"name":"video_file","tags":["camera","doc","document","film","filming","hardware","image","motion","picture","video","videography"]},{"name":"mms","tags":["bubble","chat","comment","communicate","feedback","image","landscape","message","mms","mountain","mountains","multimedia","photo","photography","picture","speech"]},{"name":"crop_rotate","tags":["adjust","adjustments","area","arrow","arrows","crop","edit","editing","frame","image","images","photo","photos","rotate","settings","size","turn"]},{"name":"wheelchair_pickup","tags":["accessibility","accessible","body","handicap","help","human","person","pickup","wheelchair"]},{"name":"aod","tags":["Android","OS","always","aod","device","display","hardware","homescreen","iOS","mobile","on","phone","tablet"]},{"name":"castle","tags":["castle","fort","fortress","mansion","palace"]},{"name":"interpreter_mode","tags":["account","accounts","committee","dictation","face","family","friends","group","hear","hearing","human","humans","interpreter","keyboard","language","mic","microphone","mode","network","noise","people","person","persons","profile","profiles","record","recorder","social","sound","speaker","speaking","symbol","team","user","users","voice"]},{"name":"access_alarm","tags":[]},{"name":"forward_5","tags":["10","5","arrow","control","controls","digit","fast","forward","music","numbers","seconds","symbol","video"]},{"name":"add_to_home_screen","tags":["Android","OS","add to","arrow","cell","device","hardware","home","iOS","mobile","phone","screen","tablet","up"]},{"name":"not_accessible","tags":["accessibility","accessible","body","handicap","help","human","not","person","wheelchair"]},{"name":"signal_cellular_0_bar","tags":["0","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"stadium","tags":["activity","amphitheater","arena","coliseum","event","local","stadium","star","things","ticket"]},{"name":"photo_size_select_large","tags":["adjust","album","dash","dashed","edit","editing","image","large","library","mountain","mountains","photo","photography","picture","select","size"]},{"name":"groups_3","tags":["abstract","body","club","collaboration","crowd","gathering","groups","human","meeting","people","person","social","teams"]},{"name":"snowshoeing","tags":["body","human","people","person","snow","snowshoe","snowshoeing","sports","travel","walking","winter"]},{"name":"view_kanban","tags":["grid","kanban","layout","pattern","squares","view"]},{"name":"candlestick_chart","tags":["analytics","candlestick","chart","data","diagram","finance","graph","infographic","measure","metrics","statistics","tracking"]},{"name":"filter_3","tags":["3","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"arrow_outward","tags":["app","application","arrow","arrows","components","direction","forward","interface","navigation","right","screen","site","ui","ux","web","website"]},{"name":"align_horizontal_center","tags":["align","alignment","center","format","horizontal","layout","lines","paragraph","rule","rules","style","text"]},{"name":"flashlight_off","tags":["disabled","enabled","flash","flashlight","light","off","on","slash"]},{"name":"security_update","tags":["Android","OS","arrow","device","down","download","hardware","iOS","mobile","phone","security","tablet","update"]},{"name":"iron","tags":["appliance","clothes","electric","iron","ironing","machine","object"]},{"name":"print_disabled","tags":["disabled","enabled","off","on","paper","print","printer","slash"]},{"name":"pin_invoke","tags":["action","arrow","dot","invoke","pin"]},{"name":"speaker_group","tags":["box","electronic","group","loud","multiple","music","sound","speaker","stereo","system","video"]},{"name":"exposure_zero","tags":["0","brightness","contrast","digit","edit","editing","effect","exposure","image","numbers","photo","photography","settings","symbol","zero"]},{"name":"bungalow","tags":["architecture","bungalow","cottage","estate","home","house","maps","place","real","residence","residential","stay","traveling"]},{"name":"streetview","tags":["maps","street","streetview","view"]},{"name":"swipe_down","tags":["arrows","direction","disable","down","enable","finger","hands","hit","navigation","strike","swing","swpie","take"]},{"name":"hdr_weak","tags":["circles","dots","dynamic","enhance","hdr","high","range","weak"]},{"name":"css","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","letters","platform","symbol","text","type"]},{"name":"call_missed","tags":["arrow","call","device","missed","mobile"]},{"name":"gps_off","tags":["destination","direction","disabled","enabled","gps","location","maps","not fixed","off","offline","on","place","pointer","slash","tracking"]},{"name":"sports_hockey","tags":["athlete","athletic","entertainment","exercise","game","hobby","hockey","social","sports","sticks"]},{"name":"ice_skating","tags":["athlete","athletic","entertainment","exercise","hobby","ice","shoe","skates","skating","social","sports","travel"]},{"name":"keyboard_capslock","tags":["arrow","capslock","keyboard","up"]},{"name":"earbuds","tags":["accessory","audio","earbuds","earphone","headphone","listen","music","sound"]},{"name":"camera_front","tags":["body","camera","front","human","lens","mobile","person","phone","photography","portrait","selfie"]},{"name":"vertical_distribute","tags":["alignment","distribute","format","layout","lines","paragraph","rule","rules","style","text","vertical"]},{"name":"currency_ruble","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","money","online","pay","payment","price","ruble","shopping","symbol"]},{"name":"signal_wifi_statusbar_null","tags":["cell","cellular","data","internet","mobile","network","null","phone","signal","speed","statusbar","wifi","wireless"]},{"name":"align_horizontal_right","tags":["align","alignment","format","horizontal","layout","lines","paragraph","right","rule","rules","style","text"]},{"name":"crop_5_4","tags":["4","5","adjust","adjustments","area","by","crop","edit","editing settings","frame","image","images","photo","photos","rectangle","size","square"]},{"name":"format_strikethrough","tags":["alphabet","character","doc","edit","editing","editor","font","format","letters","sheet","spreadsheet","strikethrough","style","symbol","text","type","writing"]},{"name":"face_6","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"join_left","tags":["circle","command","join","left","matching","overlap","sql","values"]},{"name":"explicit","tags":["adult","alphabet","character","content","e","explicit","font","language","letters","media","movies","music","symbol","text","type"]},{"name":"extension_off","tags":["disabled","enabled","extended","extension","jigsaw","off","on","piece","puzzle","shape","slash"]},{"name":"perm_camera_mic","tags":["camera","image","microphone","min","perm","photo","photography","picture","speaker"]},{"name":"sports_rugby","tags":["athlete","athletic","ball","entertainment","exercise","game","hobby","rugby","social","sports"]},{"name":"pause_presentation","tags":["app","application desktop","device","pause","present","presentation","screen","share","site","slides","web","website","window","www"]},{"name":"south_america","tags":["continent","landscape","place","region","south america"]},{"name":"sd_storage","tags":["camera","card","data","digital","memory","sd","secure","storage"]},{"name":"superscript","tags":["2","doc","edit","editing","editor","gmail","novitas","sheet","spreadsheet","style","superscript","symbol","text","writing","x"]},{"name":"4g_mobiledata","tags":["4g","alphabet","cellular","character","digit","font","letters","mobile","mobiledata","network","numbers","phone","signal","speed","symbol","text","type","wifi"]},{"name":"pinch","tags":["arrow","arrows","compress","direction","finger","grasp","hand","navigation","nip","pinch","squeeze","tweak"]},{"name":"lock_person","tags":[]},{"name":"grid_3x3","tags":["3","grid","layout","line","space"]},{"name":"mark_unread_chat_alt","tags":["alarm","alert","bubble","chat","circle","comment","communicate","dot","mark","message","notification","notifications","notify","reminder","speech","unread"]},{"name":"web_stories","tags":["google","images","logo","stories","web"]},{"name":"safety_check","tags":["certified","check","clock","privacy","private","protect","protection","safety","schedule","security","shield","time","verified"]},{"name":"filter_frames","tags":["boarders","border","camera","center","edit","editing","effect","filter","filters","focus","frame","frames","image","options","photo","photography","picture"]},{"name":"spatial_audio_off","tags":["audio","disabled","enabled","music","note","off","offline","on","slash","sound","spatial"]},{"name":"directions_subway","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"reset_tv","tags":["arrow","arrows","device","hardware","monitor","reset","television","tv"]},{"name":"4k","tags":["4000","4K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"burst_mode","tags":["burst","image","landscape","mode","mountain","mountains","multiple","photo","photography","picture"]},{"name":"chalet","tags":["architecture","chalet","cottage","estate","home","house","maps","place","real","residence","residential","stay","traveling"]},{"name":"battery_1_bar","tags":["1","bar","battery","cell","charge","mobile","power"]},{"name":"elderly_woman","tags":["body","cane","elderly","female","gender","girl","human","lady","old","people","person","senior","social","symbol","woman","women"]},{"name":"headset_off","tags":["accessory","audio","chat","device","disabled","ear","earphone","enabled","headphones","headset","listen","mic","music","mute","off","on","slash","sound","talk"]},{"name":"swipe_vertical","tags":["arrows","direction","finger","hands","hit","navigation","strike","swing","swpie","take","verticle"]},{"name":"crib","tags":["babies","baby","bassinet","bed","child","children","cradle","crib","infant","kid","newborn","sleeping","toddler"]},{"name":"video_label","tags":["label","screen","video","window"]},{"name":"fiber_smart_record","tags":["circle","dot","fiber","play","record","smart","watch"]},{"name":"brightness_auto","tags":["A","auto","brightness","control","display","level","mobile","monitor","phone","screen","sun"]},{"name":"margin","tags":["design","dots","layout","margin","padding","size","square"]},{"name":"punch_clock","tags":["clock","date","punch","schedule","time","timer","timesheet"]},{"name":"compass_calibration","tags":["calibration","compass","connection","internet","location","maps","network","refresh","service","signal","wifi","wireless"]},{"name":"mosque","tags":["ideology","islam","islamic","masjid","muslim","religion","spiritual","worship"]},{"name":"medication_liquid","tags":["+","bottle","doctor","drug","health","hospital","liquid","medications","medicine","pharmacy","spoon","vessel"]},{"name":"camera_roll","tags":["camera","film","image","library","photo","photography","roll"]},{"name":"pin_end","tags":["action","arrow","dot","end","pin"]},{"name":"dialer_sip","tags":["alphabet","call","cell","character","contact","device","dialer","font","hardware","initiation","internet","letters","mobile","over","phone","protocol","routing","session","sip","symbol","telephone","text","type","voice"]},{"name":"oil_barrel","tags":["barrel","droplet","gas","gasoline","nest","oil","water"]},{"name":"disc_full","tags":["!","alert","attention","caution","cd","danger","disc","error","exclamation","full","important","mark","music","notification","storage","symbol","warning"]},{"name":"signal_cellular_connected_no_internet_4_bar","tags":["!","4","alert","attention","bar","caution","cell","cellular","connected","danger","data","error","exclamation","important","internet","mark","mobile","network","no","notification","phone","signal","symbol","warning","wifi","wireless"]},{"name":"wind_power","tags":["eco","energy","nest","power","wind","windy"]},{"name":"logo_dev","tags":["dev","dev.to","logo"]},{"name":"sledding","tags":["athlete","athletic","body","entertainment","exercise","hobby","human","people","person","sled","sledding","sledge","snow","social","sports","travel","winter"]},{"name":"invert_colors_off","tags":["colors","disabled","drop","droplet","enabled","hue","invert","inverted","off","offline","on","opacity","palette","slash","tone","water"]},{"name":"wifi_lock","tags":["cellular","connection","data","internet","lock","locked","mobile","network","password","privacy","private","protection","safety","secure","security","service","signal","wifi","wireless"]},{"name":"noise_aware","tags":["audio","aware","cancellation","music","noise","note","sound"]},{"name":"face_3","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"car_crash","tags":["accident","automobile","car","cars","collision","crash","direction","maps","public","transportation","vehicle"]},{"name":"comments_disabled","tags":["bubble","chat","comment","comments","communicate","disabled","enabled","feedback","message","off","offline","on","slash","speech"]},{"name":"data_array","tags":["array","brackets","code","coder","data","parentheses"]},{"name":"do_not_disturb_on_total_silence","tags":["busy","disturb","do","mute","no","not","on total","quiet","silence"]},{"name":"filter_b_and_w","tags":["and","b","black","contrast","edit","editing","effect","filter","grayscale","image","images","photography","picture","pictures","settings","w","white"]},{"name":"no_encryption_gmailerrorred","tags":["disabled","enabled","encryption","error","gmail","lock","locked","no","off","on","slash"]},{"name":"blur_linear","tags":["blur","dots","edit","editing","effect","enhance","filter","linear"]},{"name":"view_cozy","tags":["comfy","cozy","design","format","layout","view","web"]},{"name":"wifi_calling","tags":["call","calling","cell","connect","connection","connectivity","contact","device","hardware","mobile","phone","signal","telephone","wifi","wireless"]},{"name":"electric_rickshaw","tags":["automobile","bolt","car","cars","electric","india","maps","rickshaw","thunderbolt","transportation","truck","vehicle"]},{"name":"rtt","tags":["call","real","rrt","text","time"]},{"name":"join_right","tags":["circle","command","join","matching","overlap","right","sql","values"]},{"name":"crop_3_2","tags":["2","3","adjust","adjustments","area","by","crop","edit","editing","frame","image","images","photo","photos","rectangle","settings","size","square"]},{"name":"crop_landscape","tags":["adjust","adjustments","area","crop","edit","editing","frame","image","images","landscape","photo","photos","settings","size"]},{"name":"nearby_error","tags":["!","alert","attention","caution","danger","error","exclamation","important","mark","nearby","notification","symbol","warning"]},{"name":"airplanemode_inactive","tags":["air","aircraft","airplane","airplanes","airport","disabled","enabled","flight","flights","fly","flying","inactive","maps","mode","off","offline","on","plane","planes","signal","slash","transportation","travel","trip"]},{"name":"airline_stops","tags":["airline","arrow","destination","direction","layover","location","maps","place","stops","transportation","travel","trip"]},{"name":"bluetooth_audio","tags":["audio","bluetooth","connect","connection","device","music","signal","sound","symbol"]},{"name":"portable_wifi_off","tags":["connection","data","disabled","enabled","internet","network","off","offline","on","portable","service","signal","slash","wifi","wireless"]},{"name":"turn_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sign","traffic","turn"]},{"name":"1x_mobiledata","tags":["1x","alphabet","cellular","character","digit","font","letters","mobile","mobiledata","network","numbers","phone","signal","speed","symbol","text","type","wifi"]},{"name":"do_not_step","tags":["boot","disabled","do","enabled","feet","foot","not","off","on","shoe","slash","sneaker","step","steps"]},{"name":"sensor_occupied","tags":["body","body response","connection","fitbit","human","network","people","person","scan","sensors","signal","smart body scan sensor","wireless"]},{"name":"directions_railway","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"security_update_warning","tags":["!","Android","OS","alert","attention","caution","danger","device","download","error","exclamation","hardware","iOS","important","mark","mobile","notification","phone","security","symbol","tablet","update","warning"]},{"name":"pentagon","tags":["five sides","pentagon","shape"]},{"name":"wrap_text","tags":["arrow writing","doc","edit","editing","editor","sheet","spreadsheet","text","type","wrap","write","writing"]},{"name":"no_meeting_room","tags":["building","disabled","door","doorway","enabled","entrance","home","house","interior","meeting","no","off","office","on","open","places","room","slash"]},{"name":"sd_card_alert","tags":["!","alert","attention","camera","card","caution","danger","digital","error","exclamation","important","mark","memory","notification","photos","sd","secure","storage","symbol","warning"]},{"name":"deselect","tags":["all","disabled","enabled","off","on","selection","slash","square","tool"]},{"name":"switch_camera","tags":["arrow","arrows","camera","photo","photography","picture","switch"]},{"name":"text_rotate_up","tags":["A","alphabet","arrow","character","field","font","letters","move","rotate","symbol","text","type","up"]},{"name":"sync_lock","tags":["around","arrow","arrows","lock","locked","password","privacy","private","protection","renew","rotate","safety","secure","security","sync","turn"]},{"name":"switch_video","tags":["arrow","arrows","camera","photography","switch","video","videos"]},{"name":"border_clear","tags":["border","clear","dash","dashed","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"repeat_one_on","tags":["arrow","arrows","control","controls","digit","loop","media","music","numbers","on","one","repeat","symbol","video"]},{"name":"no_meals","tags":["dining","disabled","eat","enabled","food","fork","knife","meal","meals","no","off","on","restaurant","slash","spoon","utensils"]},{"name":"no_meals_ouline","tags":[]},{"name":"align_vertical_top","tags":["align","alignment","format","layout","lines","paragraph","rule","rules","style","text","top","vertical"]},{"name":"subscript","tags":["2","doc","edit","editing","editor","gmail","novitas","sheet","spreadsheet","style","subscript","symbol","text","writing","x"]},{"name":"font_download_off","tags":["alphabet","character","disabled","download","enabled","font","letters","off","on","slash","square","symbol","text","type"]},{"name":"scoreboard","tags":["board","points","score","scoreboard","sports"]},{"name":"swipe_right_alt","tags":["accept","alt","arrows","direction","finger","hands","hit","navigation","right","strike","swing","swpie","take"]},{"name":"align_vertical_center","tags":["align","alignment","center","format","layout","lines","paragraph","rule","rules","style","text","vertical"]},{"name":"electric_meter","tags":["bolt","electric","energy","fast","instant","lightning","measure","meter","nest","thunderbolt","usage","voltage","volts"]},{"name":"contact_emergency","tags":["account","avatar","call","cell","contacts","face","human","info","information","mobile","people","person","phone","profile","user"]},{"name":"signal_cellular_connected_no_internet_0_bar","tags":["!","0","alert","attention","bar","caution","cell","cellular","connected","danger","data","error","exclamation","important","internet","mark","mobile","network","no","notification","phone","signal","symbol","warning","wifi","wireless"]},{"name":"sim_card_alert","tags":["!","alert","attention","camera","card","caution","danger","digital","error","exclamation","important","mark","memory","notification","photos","sd","secure","storage","symbol","warning"]},{"name":"battery_2_bar","tags":["2","bar","battery","cell","charge","mobile","power"]},{"name":"text_rotation_angleup","tags":["A","alphabet","angleup","arrow","character","field","font","letters","move","rotate","symbol","text","type"]},{"name":"text_rotation_down","tags":["A","alphabet","arrow","character","dow","field","font","letters","move","rotate","symbol","text","type"]},{"name":"railway_alert","tags":["!","alert","attention","automobile","bike","car","cars","caution","danger","direction","error","exclamation","important","maps","mark","notification","public","railway","scooter","subway","symbol","train","transportation","vehicle","vespa","warning"]},{"name":"escalator","tags":["down","escalator","staircase","up"]},{"name":"electric_moped","tags":["automobile","bike","bolt","car","cars","electric","maps","moped","scooter","thunderbolt","transportation","travel","vehicle","vespa"]},{"name":"closed_caption_disabled","tags":["accessible","alphabet","caption","cc","character","closed","decoder","disabled","enabled","font","language","letters","media","movies","off","on","slash","subtitle","subtitles","symbol","text","tv","type"]},{"name":"filter_7","tags":["7","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"heat_pump","tags":["air conditioner","cool","energy","furnance","heat","nest","pump","usage"]},{"name":"dry","tags":["air","bathroom","dry","dryer","fingers","gesture","hand","wc"]},{"name":"fork_right","tags":["arrow","arrows","direction","directions","fork","maps","navigation","path","right","route","sign","traffic"]},{"name":"forklift","tags":["carry","factory","industrial","lift","manufactory","supply","truck","vehicle"]},{"name":"text_rotation_angledown","tags":["A","alphabet","angledown","arrow","character","field","font","letters","move","rotate","symbol","text","type"]},{"name":"do_not_disturb_off","tags":["cancel","close","dash","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","stop"]},{"name":"screen_lock_portrait","tags":["Android","OS","device","hardware","iOS","lock","mobile","phone","portrait","rotate","screen","tablet"]},{"name":"send_time_extension","tags":["deliver","dispatch","envelop","extension","mail","message","schedule","send","time"]},{"name":"keyboard_command_key","tags":["button","command key","control","keyboard"]},{"name":"remove_from_queue","tags":["desktop","device","display","from","hardware","monitor","queue","remove","screen","stream"]},{"name":"filter_4","tags":["4","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"filter_9_plus","tags":["+","9","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","plus","settings","stack","symbol"]},{"name":"exposure_plus_2","tags":["2","add","brightness","contrast","digit","edit","editing","effect","exposure","image","numbers","photo","photography","plus","settings","symbol"]},{"name":"surround_sound","tags":["circle","signal","sound","speaker","surround","system","volumn","wireless"]},{"name":"airline_seat_individual_suite","tags":["airline","body","business","class","first","human","individual","people","person","rest","seat","sleep","suite","travel"]},{"name":"home_max","tags":["device","gadget","hardware","home","internet","iot","max","nest","smart","things"]},{"name":"phone_paused","tags":["call","cell","contact","device","hardware","mobile","pause","paused","phone","telephone"]},{"name":"local_play","tags":[]},{"name":"stroller","tags":["baby","care","carriage","child","children","infant","kid","newborn","stroller","toddler","young"]},{"name":"wifi_password","tags":["cellular","connection","data","internet","lock","mobile","network","password","scan","secure","service","signal","wifi","wireless"]},{"name":"browse_gallery","tags":["clock","collection","gallery","library","stack","watch"]},{"name":"system_security_update","tags":["Android","OS","arrow","cell","device","down","hardware","iOS","mobile","phone","security","system","tablet","update"]},{"name":"person_2","tags":["account","face","human","people","person","profile","user"]},{"name":"screenshot_monitor","tags":["Android","OS","chrome","desktop","device","display","hardware","iOS","mac","monitor","screen","screengrab","screenshot","web","window"]},{"name":"wb_iridescent","tags":["balance","bright","edit","editing","electricity","indoor","iridescent","lamp","light","lightbulb","lighting","setting","settings","tungsten","white","wp"]},{"name":"grid_off","tags":["collage","disabled","enabled","grid","image","layout","off","on","slash","view"]},{"name":"system_security_update_warning","tags":["!","Android","OS","alert","attention","caution","cell","danger","device","error","exclamation","hardware","iOS","important","mark","mobile","notification","phone","security","symbol","system","tablet","update","warning"]},{"name":"play_disabled","tags":["control","controls","disabled","enabled","media","music","off","on","play","slash","video"]},{"name":"php","tags":["alphabet","brackets","character","code","css","develop","developer","engineer","engineering","font","html","letters","php","platform","symbol","text","type"]},{"name":"phishing","tags":["fish","fishing","fraud","hook","phishing","scam"]},{"name":"border_style","tags":["border","color","dash","dashed","doc","edit","editing","editor","sheet","spreadsheet","stroke","style","text","type","writing"]},{"name":"motion_photos_paused","tags":["animation","circle","motion","pause","paused","photos","video"]},{"name":"headphones_battery","tags":["accessory","audio","battery","charging","device","ear","earphone","headphones","headset","listen","music","sound"]},{"name":"monochrome_photos","tags":["black","camera","image","monochrome","photo","photography","photos","picture","white"]},{"name":"web_asset_off","tags":["asset","browser","disabled","enabled","internet","off","on","page","screen","slash","web","webpage","website","windows","www"]},{"name":"wifi_tethering_off","tags":["cell","cellular","connection","data","disabled","enabled","internet","mobile","network","off","offline","on","phone","scan","service","signal","slash","speed","tethering","wifi","wireless"]},{"name":"text_decrease","tags":["-","alphabet","character","decrease","font","letters","minus","remove","resize","subtract","symbol","text","type"]},{"name":"view_comfy_alt","tags":["alt","comfy","cozy","design","format","layout","view","web"]},{"name":"photo_camera_back","tags":["back","camera","image","landscape","mountain","mountains","photo","photography","picture","rear"]},{"name":"folder_off","tags":["data","disabled","doc","document","drive","enabled","file","folder","folders","off","on","online","sheet","slash","slide","storage"]},{"name":"gas_meter","tags":["droplet","energy","gas","measure","meter","nest","usage","water"]},{"name":"edgesensor_high","tags":["Android","OS","cell","device","edge","hardware","high","iOS","mobile","move","phone","sensitivity","sensor","tablet","vibrate"]},{"name":"filter_5","tags":["5","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"stay_current_landscape","tags":["Android","OS","current","device","hardware","iOS","landscape","mobile","phone","stay","tablet"]},{"name":"sip","tags":["alphabet","call","character","dialer","font","initiation","internet","letters","over","phone","protocol","routing","session","sip","symbol","text","type","voice"]},{"name":"power_input","tags":["input","lines","power","supply"]},{"name":"smart_screen","tags":["Android","OS","airplay","cast","cell","connect","device","hardware","iOS","mobile","phone","screen","screencast","smart","stream","tablet","video"]},{"name":"mail_lock","tags":["email","envelop","letters","lock","locked","mail","message","password","privacy","private","protection","safety","secure","security","send"]},{"name":"dataset","tags":[]},{"name":"nat","tags":["communication","nat"]},{"name":"do_disturb_off","tags":["cancel","close","denied","deny","disabled","disturb","do","enabled","off","on","remove","silence","slash","stop"]},{"name":"no_drinks","tags":["alcohol","beverage","bottle","cocktail","drink","drinks","food","liquor","no","wine"]},{"name":"bike_scooter","tags":["automobile","bike","car","cars","maps","scooter","transportation","vehicle","vespa"]},{"name":"dock","tags":["Android","OS","cell","charging","connector","device","dock","hardware","iOS","mobile","phone","power","station","tablet"]},{"name":"face_2","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"face_retouching_off","tags":["disabled","edit","editing","effect","emoji","emotion","enabled","face","faces","image","natural","off","on","photo","photography","retouch","retouching","settings","slash","tag"]},{"name":"auto_fix_off","tags":["ai","artificial","auto","automatic","automation","custom","disabled","edit","enabled","erase","fix","genai","intelligence","magic","modify","off","on","slash","smart","spark","sparkle","star","wand"]},{"name":"airline_seat_flat","tags":["airline","body","business","class","first","flat","human","people","person","rest","seat","sleep","travel"]},{"name":"phone_locked","tags":["call","cell","contact","device","hardware","lock","locked","mobile","password","phone","privacy","private","protection","safety","secure","security","telephone"]},{"name":"network_locked","tags":["alert","available","cellular","connection","data","error","internet","lock","locked","mobile","network","not","privacy","private","protection","restricted","safety","secure","security","service","signal","warning","wifi","wireless"]},{"name":"padding","tags":["design","dots","layout","margin","padding","size","square"]},{"name":"browser_not_supported","tags":["browser","disabled","enabled","internet","not","off","on","page","screen","site","slash","supported","web","website","www"]},{"name":"border_outer","tags":["border","dash","dashed","doc","edit","editing","editor","outer","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"exposure_neg_1","tags":["1","brightness","contrast","digit","edit","editing","effect","exposure","image","neg","negative","numbers","photo","photography","settings","symbol"]},{"name":"view_compact_alt","tags":["alt","compact","design","format","layout dense","view","web"]},{"name":"pest_control_rodent","tags":["control","exterminator","mice","mouse","pest","rodent"]},{"name":"swipe_down_alt","tags":["alt","arrows","direction","disable","down","enable","finger","hands","hit","navigation","strike","swing","swpie","take"]},{"name":"airlines","tags":["air","aircraft","airplane","airplanes","airport","flight","flights","fly","flying","mode","on","plane","planes","signal","transportation","travel","trip"]},{"name":"turn_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","route","sign","traffic","turn"]},{"name":"sd","tags":["alphabet","camera","card","character","data","device","digital","drive","flash","font","image","letters","memory","photo","sd","secure","symbol","text","type"]},{"name":"near_me_disabled","tags":["destination","direction","disabled","enabled","location","maps","me","navigation","near","off","on","pin","place","point","slash"]},{"name":"face_4","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"stay_primary_landscape","tags":["Android","OS","current","device","hardware","iOS","landscape","mobile","phone","primary","stay","tablet"]},{"name":"4g_plus_mobiledata","tags":["4g","alphabet","cellular","character","digit","font","letters","mobile","mobiledata","network","numbers","phone","plus","signal","speed","symbol","text","type","wifi"]},{"name":"snowmobile","tags":["automobile","car","direction","skimobile","snow","snowmobile","social","sports","transportation","travel","vehicle","winter"]},{"name":"sign_language","tags":["communication","deaf","fingers","gesture","hand","language","sign"]},{"name":"network_ping","tags":["alert","available","cellular","connection","data","internet","ip","mobile","network","ping","service","signal","wifi","wireless"]},{"name":"signal_cellular_off","tags":["cell","cellular","data","disabled","enabled","internet","mobile","network","off","offline","on","phone","signal","slash","wifi","wireless"]},{"name":"signal_cellular_nodata","tags":["cell","cellular","clear","data","internet","mobile","network","no","nodata","offline","phone","quit","remove","signal","wifi","wireless","x"]},{"name":"no_sim","tags":["camera","card","device","eject","insert","memory","no","phone","sim","storage"]},{"name":"signal_wifi_4_bar_lock","tags":["4","bar","cell","cellular","data","internet","lock","locked","mobile","network","password","phone","privacy","private","protection","safety","secure","security","signal","wifi","wireless"]},{"name":"missed_video_call","tags":["arrow","call","camera","film","filming","hardware","image","missed","motion","picture","record","video","videography"]},{"name":"lte_mobiledata","tags":["alphabet","character","data","font","internet","letters","lte","mobile","network","speed","symbol","text","type","wifi","wireless"]},{"name":"earbuds_battery","tags":["accessory","audio","battery","charging","earbuds","earphone","headphone","listen","music","sound"]},{"name":"panorama_photosphere","tags":["angle","horizontal","image","panorama","photo","photography","photosphere","picture","wide"]},{"name":"no_crash","tags":["accident","auto","automobile","car","cars","check","collision","confirm","correct","crash","direction","done","enter","maps","mark","no","ok","okay","select","tick","transportation","vehicle","yes"]},{"name":"add_alarm","tags":[]},{"name":"directions_transit_filled","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"u_turn_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","route","sign","traffic","u-turn"]},{"name":"line_axis","tags":["axis","dash","horizontal","line","stroke","vertical"]},{"name":"density_large","tags":["density","horizontal","large","lines","rule","rules"]},{"name":"location_disabled","tags":["destination","direction","disabled","enabled","location","maps","off","on","pin","place","pointer","slash","stop","tracking"]},{"name":"bluetooth_drive","tags":["automobile","bluetooth","car","cars","cast","connect","connection","device","drive","maps","paring","streaming","symbol","transportation","travel","vehicle","wireless"]},{"name":"30fps","tags":["30fps","alphabet","camera","character","digit","font","fps","frames","letters","numbers","symbol","text","type","video"]},{"name":"no_luggage","tags":["bag","baggage","carry","disabled","enabled","luggage","no","off","on","slash","suitcase","travel"]},{"name":"leak_remove","tags":["connection","data","disabled","enabled","leak","link","network","off","offline","on","remove","service","signals","slash","synce","wireless"]},{"name":"filter_8","tags":["8","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"mobile_off","tags":["Android","OS","cell","device","disabled","enabled","hardware","iOS","mobile","off","on","phone","silence","slash","tablet"]},{"name":"key_off","tags":["access","disabled","door","enabled","entry","key","lock","off","offline","on","password","slash","unlock"]},{"name":"signal_cellular_null","tags":["cell","cellular","data","internet","mobile","network","null","phone","signal","wifi","wireless"]},{"name":"phonelink_off","tags":["Android","OS","chrome","computer","connect","desktop","device","disabled","enabled","hardware","iOS","link","mac","mobile","off","on","phone","phonelink","slash","sync","tablet","web","windows"]},{"name":"filter_9","tags":["9","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"home_mini","tags":["Internet","device","gadget","hardware","home","iot","mini","nest","smart","things"]},{"name":"on_device_training","tags":["arrow","bulb","call","cell","contact","device","hardware","idea","inprogress","light","load","loading","mobile","model","phone","refresh","renew","restore","reverse","rotate","telephone","training"]},{"name":"egg_alt","tags":["breakfast","brunch","egg","food"]},{"name":"media_bluetooth_on","tags":["bluetooth","connect","connection","connectivity","device","disabled","enabled","media","music","note","off","on","online","paring","signal","slash","symbol","wireless"]},{"name":"10k","tags":["10000","10K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"video_stable","tags":["film","filming","recording","setting","stability","stable","taping","video"]},{"name":"add_home","tags":[]},{"name":"no_transfer","tags":["automobile","bus","car","cars","direction","disabled","enabled","maps","no","off","on","public","slash","transfer","transportation","vehicle"]},{"name":"timer_10","tags":["10","alarm","alert","bell","clock","digits","disabled","duration","enabled","notification","numbers","seconds","ten","time","timer","watch"]},{"name":"directions_subway_filled","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"wb_shade","tags":["balance","house","light","lighting","shade","wb","white"]},{"name":"swipe_left_alt","tags":["alt","arrow","arrows","finger","hand","hit","left","navigation","reject","strike","swing","swipe","take"]},{"name":"filter_6","tags":["6","digit","edit","editing","effect","filter","image","images","multiple","numbers","photography","picture","pictures","settings","stack","symbol"]},{"name":"cyclone","tags":["crisis","disaster","natural","rain","storm","water","weather","wind","winds"]},{"name":"network_wifi_1_bar","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"directions_railway_filled","tags":["automobile","car","cars","direction","maps","public","rail","railway","subway","train","tram","transit","transportation","trolley","vehicle"]},{"name":"wifi_find","tags":["cellular","connection","data","detect","discover","find","internet","look","magnifying glass","mobile","network","notice","scan","search","service","signal","wifi","wireless"]},{"name":"blur_off","tags":["blur","disabled","dots","edit","editing","effect","enabled","enhance","off","on","slash"]},{"name":"motion_photos_off","tags":["animation","circle","disabled","enabled","motion","off","on","photos","slash","video"]},{"name":"lyrics","tags":["audio","bubble","chat","comment","communicate","feedback","key","lyrics","message","music","note","song","sound","speech","track"]},{"name":"raw_on","tags":["alphabet","character","disabled","enabled","font","image","letters","off","on","original","photo","photography","raw","slash","symbol","text","type"]},{"name":"flight_class","tags":["air","aircraft","airplane","airplanes","airport","business","business class","first class","flight","flights","fly","flying","plane","planes","seat","signal","transportation","travel","trip"]},{"name":"insert_page_break","tags":["break","dash","dashed","doc","document","file","page","paper"]},{"name":"rsvp","tags":["alphabet","character","font","invitation","invite","letters","plaît","respond","rsvp","répondez","sil","symbol","text","type","vous"]},{"name":"tire_repair","tags":["auto","automobile","car","cars","gauge","mechanic","pressure","repair","tire","vehicle"]},{"name":"swipe_up_alt","tags":["alt","arrows","direction","disable","enable","finger","hands","hit","navigation","strike","swing","swpie","take","up"]},{"name":"3g_mobiledata","tags":["3g","alphabet","cellular","character","digit","font","letters","mobile","mobiledata","network","numbers","phone","signal","speed","symbol","text","type","wifi"]},{"name":"tv_off","tags":["Android","OS","chrome","desktop","device","disabled","enabled","hardware","iOS","mac","monitor","off","on","slash","television","tv","web","window"]},{"name":"hdr_on","tags":["add","alphabet","character","dynamic","enhance","font","hdr","high","letters","on","plus","range","select","symbol","text","type"]},{"name":"add_home_work","tags":[]},{"name":"motion_photos_pause","tags":["animation","circle","motion","pause","paused","photos","video"]},{"name":"edgesensor_low","tags":["Android","cell","device","edge","hardware","iOS","low","mobile","move","phone","sensitivity","sensor","tablet","vibrate"]},{"name":"grid_goldenratio","tags":["golden","goldenratio","grid","layout","lines","ratio","space"]},{"name":"network_wifi_3_bar","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"temple_buddhist","tags":["buddha","buddhism","buddhist","ideology","monastery","religion","spiritual","temple","worship"]},{"name":"airline_seat_flat_angled","tags":["airline","angled","body","business","class","first","flat","human","people","person","rest","seat","sleep","travel"]},{"name":"fort","tags":["castle","fort","fortress","mansion","palace"]},{"name":"spatial_tracking","tags":["audio","disabled","enabled","music","note","off","offline","on","slash","sound","spatial","tracking"]},{"name":"screen_lock_rotation","tags":["Android","OS","arrow","device","hardware","iOS","lock","mobile","phone","rotate","rotation","screen","tablet","turn"]},{"name":"fiber_pin","tags":["alphabet","character","fiber","font","letters","network","pin","symbol","text","type"]},{"name":"phone_bluetooth_speaker","tags":["bluetooth","call","cell","connect","connection","connectivity","contact","device","hardware","mobile","phone","signal","speaker","symbol","telephone","wireless"]},{"name":"vignette","tags":["border","edit","editing","filter","gradient","image","photo","photography","setting","vignette"]},{"name":"panorama_horizontal","tags":["angle","horizontal","image","panorama","photo","photography","picture","wide"]},{"name":"propane_tank","tags":["bbq","gas","grill","nest","propane","tank"]},{"name":"kebab_dining","tags":["dining","dinner","food","kebab","meal","meat","skewer"]},{"name":"developer_board_off","tags":["board","chip","computer","developer","development","disabled","enabled","hardware","microchip","off","on","processor","slash"]},{"name":"adf_scanner","tags":["adf","document","feeder","machine","office","scan","scanner"]},{"name":"no_cell","tags":["Android","OS","cell","device","disabled","enabled","hardware","iOS","mobile","no","off","on","phone","slash","tablet"]},{"name":"dirty_lens","tags":["camera","dirty","lens","photo","photography","picture","splat"]},{"name":"usb_off","tags":["cable","connection","device","off","usb","wire"]},{"name":"image_aspect_ratio","tags":["aspect","image","photo","photography","picture","ratio","rectangle","square"]},{"name":"30fps_select","tags":["30","camera","digits","fps","frame","frequency","image","numbers","per","rate","second","seconds","select","video"]},{"name":"60fps","tags":["60fps","camera","digit","fps","frames","numbers","symbol","video"]},{"name":"screen_lock_landscape","tags":["Android","OS","device","hardware","iOS","landscape","lock","mobile","phone","rotate","screen","tablet"]},{"name":"lte_plus_mobiledata","tags":["+","alphabet","character","data","font","internet","letters","lte","mobile","network","plus","speed","symbol","text","type","wifi","wireless"]},{"name":"piano_off","tags":["disabled","enabled","instrument","keyboard","keys","music","musical","off","on","piano","slash","social"]},{"name":"unfold_more_double","tags":["arrow","arrows","chevron","collapse","direction","double","down","expand","expandable","list","more","navigation","unfold"]},{"name":"deblur","tags":["adjust","deblur","edit","editing","enhance","face","image","lines","photo","photography","sharpen"]},{"name":"person_4","tags":["account","face","human","people","person","profile","user"]},{"name":"spatial_audio","tags":["audio","music","note","sound","spatial"]},{"name":"camera_rear","tags":["camera","front","lens","mobile","phone","photo","photography","picture","portrait","rear","selfie"]},{"name":"timer_10_select","tags":["10","alphabet","camera","character","digit","font","letters","numbers","seconds","select","symbol","ten","text","timer","type"]},{"name":"face_5","tags":["account","emoji","eyes","face","human","lock","log","login","logout","people","person","profile","recognition","security","social","thumbnail","unlock","user"]},{"name":"minor_crash","tags":["accident","auto","automobile","car","cars","collision","directions","maps","public","transportation","vehicle"]},{"name":"sos","tags":["font","help","letters","save","sos","text","type"]},{"name":"videogame_asset_off","tags":["asset","console","control","controller","device","disabled","enabled","entertainment","esports","game","gamepad","gaming","google","handheld","hardware","hobby","off","on","online","playstation","remote","slash","social","sports","stadia","video","video game","videogame","xbox"]},{"name":"flood","tags":["crisis","disaster","flooding","natural","rain","storm","water","wave","weather"]},{"name":"60fps_select","tags":["60","camera","digits","fps","frame","frequency","numbers","per","rate","second","seconds","select","video"]},{"name":"timer_3","tags":["3","digits","duration","numbers","seconds","three","time","timer"]},{"name":"vpn_key_off","tags":["access","code","disabled","door","enabled","entry","key","lock","network","off","offline","on","passcode","password","slash","unlock","vpn"]},{"name":"directions_off","tags":["arrow","directions","disabled","enabled","maps","off","on","right","route","sign","slash","traffic"]},{"name":"emergency_share","tags":["alert","attention","caution","danger","emergency","important","notification","share","warning"]},{"name":"panorama_wide_angle_select","tags":["angle","image","panorama","photo","photography","picture","select","wide"]},{"name":"airline_seat_legroom_normal","tags":["airline","body","feet","human","leg","legroom","normal","people","person","seat","sitting","space","travel"]},{"name":"fiber_dvr","tags":["alphabet","character","digital","dvr","electronics","fiber","font","letters","network","record","recorder","symbol","text","tv","type","video"]},{"name":"person_3","tags":["account","face","human","people","person","profile","user"]},{"name":"scuba_diving","tags":["diving","entertainment","exercise","hobby","scuba","social","swim","swimming"]},{"name":"signal_cellular_no_sim","tags":["camera","card","cellular","chip","device","disabled","enabled","memory","no","off","offline","on","phone","signal","sim","slash","storage"]},{"name":"24mp","tags":["24","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"exposure_neg_2","tags":["2","brightness","contrast","digit","edit","editing","effect","exposure","image","neg","negative","numbers","photo","photography","settings","symbol"]},{"name":"network_wifi_2_bar","tags":["cell","cellular","data","internet","mobile","network","phone","speed","wifi","wireless"]},{"name":"wifi_2_bar","tags":["2","bar","cell","cellular","connection","data","internet","mobile","network","phone","scan","service","signal","wifi","wireless"]},{"name":"u_turn_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sign","traffic","u-turn"]},{"name":"currency_yuan","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","money","online","pay","payment","price","shopping","symbol","yuan"]},{"name":"currency_lira","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","lira","money","online","pay","payment","price","shopping","symbol"]},{"name":"no_flash","tags":["bolt","camera","disabled","electric","enabled","energy","flash","image","instant","lightning","no","off","on","photo","photography","picture","slash","thunderbolt"]},{"name":"temple_hindu","tags":["hindu","hinduism","hindus","ideology","mandir","religion","spiritual","temple","worship"]},{"name":"mode_fan_off","tags":["air conditioner","cool","disabled","enabled","fan","nest","off","on","slash"]},{"name":"airline_seat_legroom_extra","tags":["airline","body","extra","feet","human","leg","legroom","people","person","seat","sitting","space","travel"]},{"name":"4k_plus","tags":["+","4000","4K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"border_inner","tags":["border","dash","dashed","doc","edit","editing","editor","inner","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"wifi_tethering_error","tags":["!","alert","attention","caution","cell","cellular","connection","danger","data","error","exclamation","important","internet","mark","mobile","network","notification","phone","rounded","scan","service","signal","speed","symbol","tethering","warning","wifi","wireless"]},{"name":"airline_seat_legroom_reduced","tags":["airline","body","feet","human","leg","legroom","people","person","reduced","seat","sitting","space","travel"]},{"name":"synagogue","tags":["ideology","jew","jewish","religion","shul","spiritual","temple","worship"]},{"name":"border_left","tags":["border","dash","dashed","doc","edit","editing","editor","left","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"autofps_select","tags":["A","alphabet","auto","character","font","fps","frame","frequency","letters","per","rate","second","seconds","select","symbol","text","type"]},{"name":"signal_cellular_alt_2_bar","tags":["2","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"g_mobiledata","tags":["alphabet","character","data","font","g","letters","mobile","network","service","symbol","text","type"]},{"name":"1k","tags":["1000","1K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"format_textdirection_l_to_r","tags":["align","alignment","doc","edit","editing","editor","format","ltr","paragraph","sheet","spreadsheet","text","textdirection","type","writing"]},{"name":"border_bottom","tags":["border","bottom","dash","dashed","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"fork_left","tags":["arrow","arrows","direction","directions","fork","left","maps","navigation","path","route","sign","traffic"]},{"name":"severe_cold","tags":["!","alert","attention","caution","climate","cold","crisis","danger","disaster","error","exclamation","important","notification","severe","snow","snowflake","warning","weather","winter"]},{"name":"tsunami","tags":["crisis","disaster","flood","ocean","rain","sea","storm","tsunami","water","wave","weather"]},{"name":"signal_cellular_alt_1_bar","tags":["1","bar","cell","cellular","data","internet","mobile","network","phone","signal","speed","wifi","wireless"]},{"name":"border_vertical","tags":["border","dash","dashed","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","type","vertical","writing"]},{"name":"turn_sharp_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sharp","sign","traffic","turn"]},{"name":"no_backpack","tags":["accessory","backpack","bag","bookbag","knapsack","no","pack","travel"]},{"name":"remove_road","tags":["-","cancel","clear","close","destination","direction","exit","highway","maps","minus","new","no","remove","road","stop","street","symbol","traffic","x"]},{"name":"timer_3_select","tags":["3","alphabet","camera","character","digit","font","letters","numbers","seconds","select","symbol","text","three","timer","type"]},{"name":"roller_skating","tags":["athlete","athletic","entertainment","exercise","hobby","roller","shoe","skate","skates","skating","social","sports","travel"]},{"name":"panorama_horizontal_select","tags":["angle","horizontal","image","panorama","photo","photography","picture","select","wide"]},{"name":"border_horizontal","tags":["border","dash","dashed","doc","edit","editing","editor","horizontal","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"2k","tags":["2000","2K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"wifi_1_bar","tags":["1","bar","cell","cellular","connection","data","internet","mobile","network","phone","scan","service","signal","wifi","wireless"]},{"name":"format_textdirection_r_to_l","tags":["align","alignment","doc","edit","editing","editor","format","ltr","paragraph","sheet","spreadsheet","text","textdirection","type","writing"]},{"name":"wifi_channel","tags":["cellular","channel","connection","data","internet","mobile","network","scan","service","signal","wifi","wireless"]},{"name":"roundabout_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","roundabout","route","sign","traffic"]},{"name":"wb_auto","tags":["A","W","alphabet","auto","automatic","balance","character","edit","editing","font","image","letters","photo","photography","symbol","text","type","white","wp"]},{"name":"panorama_photosphere_select","tags":["angle","horizontal","image","panorama","photo","photography","photosphere","picture","select","wide"]},{"name":"panorama_wide_angle","tags":["angle","image","panorama","photo","photography","picture","wide"]},{"name":"hdr_plus","tags":["+","add","alphabet","character","circle","dynamic","enhance","font","hdr","high","letters","plus","range","select","symbol","text","type"]},{"name":"panorama_vertical_select","tags":["angle","image","panorama","photo","photography","picture","select","vertical","wide"]},{"name":"border_top","tags":["border","dash","dashed","doc","edit","editing","editor","sheet","spreadsheet","stroke","text","top","type","writing"]},{"name":"mic_external_off","tags":["audio","disabled","enabled","external","mic","microphone","off","on","slash","sound","voice"]},{"name":"width_full","tags":[]},{"name":"h_mobiledata","tags":["alphabet","character","data","font","h","letters","mobile","network","service","symbol","text","type"]},{"name":"roller_shades","tags":["blinds","cover","curtains","nest","open","roller","shade","shutter","sunshade"]},{"name":"no_stroller","tags":["baby","care","carriage","child","children","disabled","enabled","infant","kid","newborn","no","off","on","parents","slash","stroller","toddler","young"]},{"name":"tornado","tags":["crisis","disaster","natural","rain","storm","tornado","weather","wind"]},{"name":"keyboard_control_key","tags":["control key","keyboard"]},{"name":"turn_slight_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sharp","sign","slight","traffic","turn"]},{"name":"border_right","tags":["border","dash","dashed","doc","edit","editing","editor","right","sheet","spreadsheet","stroke","text","type","writing"]},{"name":"1k_plus","tags":["+","1000","1K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"turn_slight_left","tags":["arrow","arrows","direction","directions","maps","navigation","path","right","route","sign","slight","traffic","turn"]},{"name":"screen_rotation_alt","tags":["Android","OS","arrow","device","hardware","iOS","mobile","phone","rotate","rotation","screen","tablet","turn"]},{"name":"dataset_linked","tags":[]},{"name":"unfold_less_double","tags":["arrow","arrows","chevron","collapse","direction","double","expand","expandable","inward","less","list","navigation","unfold","up"]},{"name":"8k","tags":["8000","8K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"landslide","tags":["crisis","disaster","natural","rain","storm","weather"]},{"name":"media_bluetooth_off","tags":["bluetooth","connect","connection","connectivity","device","disabled","enabled","media","music","note","off","offline","on","paring","signal","slash","symbol","wireless"]},{"name":"fire_truck","tags":[]},{"name":"e_mobiledata","tags":["alphabet","data","e","font","letters","mobile","mobiledata","text","type"]},{"name":"panorama_vertical","tags":["angle","image","panorama","photo","photography","picture","vertical","wide"]},{"name":"r_mobiledata","tags":["alphabet","character","data","font","letters","mobile","r","symbol","text","type"]},{"name":"12mp","tags":["12","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"repartition","tags":["arrow","arrows","data","partition","refresh","renew","repartition","restore","table"]},{"name":"width_normal","tags":[]},{"name":"h_plus_mobiledata","tags":["+","alphabet","character","data","font","h","letters","mobile","network","plus","service","symbol","text","type"]},{"name":"hdr_enhanced_select","tags":["add","alphabet","character","dynamic","enhance","font","hdr","high","letters","plus","range","select","symbol","text","type"]},{"name":"mp","tags":["alphabet","character","font","image","letters","megapixel","mp","photo","photography","pixels","quality","resolution","symbol","text","type"]},{"name":"shape_line","tags":["circle","draw","edit","editing","line","shape","square"]},{"name":"9k_plus","tags":["+","9000","9K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"5k","tags":["5000","5K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"hevc","tags":["alphabet","character","coding","efficiency","font","hevc","high","letters","symbol","text","type","video"]},{"name":"currency_franc","tags":["bill","card","cash","coin","commerce","cost","credit","currency","dollar","dollars","finance","franc","money","online","pay","payment","price","shopping","symbol"]},{"name":"8k_plus","tags":["+","7000","8K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"hdr_on_select","tags":["+","alphabet","camera","character","circle","dynamic","font","hdr","high","letters","on","photo","range","select","symbol","text","type"]},{"name":"3k","tags":["3000","3K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"transcribe","tags":[]},{"name":"width_wide","tags":[]},{"name":"hdr_auto_select","tags":["+","A","alphabet","auto","camera","character","circle","dynamic","font","hdr","high","letters","photo","range","select","symbol","text","type"]},{"name":"hls","tags":["alphabet","character","develop","developer","engineer","engineering","font","hls","letters","platform","symbol","text","type"]},{"name":"5k_plus","tags":["+","5000","5K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"assist_walker","tags":["accessibility","accessible","assist","body","disability","handicap","help","human","injured","injury","mobility","person","walk","walker"]},{"name":"hls_off","tags":["alphabet","character","develop","developer","disabled","enabled","engineer","engineering","font","hls","letters","off","offline","on","platform","slash","symbol","text","type"]},{"name":"18mp","tags":["18","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"format_overline","tags":["alphabet","character","doc","edit","editing","editor","font","format","letters","line","overline","sheet","spreadsheet","style","symbol","text","type","under","writing"]},{"name":"volcano","tags":["crisis","disaster","eruption","lava","magma","natural","volcano"]},{"name":"vaping_rooms","tags":["allowed","e-cigarette","never","no","places","prohibited","smoke","smoking","tobacco","vape","vaping","vapor","warning","zone"]},{"name":"watch_off","tags":["Android","OS","ar","clock","close","gadget","iOS","off","shut","time","vr","watch","wearables","web","wristwatch"]},{"name":"9k","tags":["9000","9K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"23mp","tags":["23","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"propane","tags":["gas","nest","propane"]},{"name":"raw_off","tags":["alphabet","character","disabled","enabled","font","image","letters","off","on","original","photo","photography","raw","slash","symbol","text","type"]},{"name":"keyboard_option_key","tags":["alt key","key","keyboard","modifier key","option"]},{"name":"woman_2","tags":["female","gender","girl","lady","social","symbol","woman","women"]},{"name":"2k_plus","tags":["+","2k","alphabet","character","digit","font","letters","numbers","plus","symbol","text","type"]},{"name":"6k_plus","tags":["+","6000","6K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"broadcast_on_personal","tags":[]},{"name":"10mp","tags":["10","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"man_2","tags":["boy","gender","male","man","social","symbol"]},{"name":"7k","tags":["7000","7K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"7k_plus","tags":["+","7000","7K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"nearby_off","tags":["disabled","enabled","nearby","off","on","slash"]},{"name":"3k_plus","tags":["+","3000","3K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","plus","resolution","symbol","text","type","video"]},{"name":"6k","tags":["6000","6K","alphabet","character","digit","display","font","letters","numbers","pixel","pixels","resolution","symbol","text","type","video"]},{"name":"hdr_off","tags":["alphabet","character","disabled","dynamic","enabled","enhance","font","hdr","high","letters","off","on","range","select","slash","symbol","text","type"]},{"name":"roundabout_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","roundabout","route","sign","traffic"]},{"name":"hdr_off_select","tags":["alphabet","camera","character","circle","disabled","dynamic","enabled","font","hdr","high","letters","off","on","photo","range","select","slash","symbol","text","type"]},{"name":"bedtime_off","tags":["active","bedtime","clear","climate","disabled","home","lunar","moon","nest","night","nightime","off","offline","quiet","security","slash","sleep","thermostat","time","weather"]},{"name":"18_up_rating","tags":[]},{"name":"turn_sharp_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","route","sharp","sign","traffic","turn"]},{"name":"11mp","tags":["11","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"roller_shades_closed","tags":["blinds","closed","cover","curtains","nest","roller","shade","shutter","sunshade"]},{"name":"20mp","tags":["20","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"blinds","tags":["blinds","cover","curtains","nest","open","shade","shutter","sunshade"]},{"name":"3mp","tags":["3","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"blind","tags":["accessibility","accessible","assist","blind","body","cane","disability","handicap","help","human","mobility","person","walk","walker"]},{"name":"emergency_recording","tags":["alert","attention","camera","caution","danger","emergency","film","filming","hardware","image","important","motion","notification","picture","record","video","videography","warning"]},{"name":"curtains","tags":["blinds","cover","curtains","nest","open","shade","shutter","sunshade"]},{"name":"13mp","tags":["13","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"5mp","tags":["5","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"21mp","tags":["21","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"blinds_closed","tags":["blinds","closed","cover","curtains","nest","shade","shutter","sunshade"]},{"name":"16mp","tags":["16","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"17mp","tags":["17","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"2mp","tags":["2","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"15mp","tags":["15","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"desk","tags":[]},{"name":"no_adult_content","tags":[]},{"name":"14mp","tags":["14","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"22mp","tags":["22","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"vertical_shades","tags":["blinds","cover","curtains","nest","open","shade","shutter","sunshade","vertical"]},{"name":"vertical_shades_closed","tags":["blinds","closed","cover","curtains","nest","roller","shade","shutter","sunshade"]},{"name":"curtains_closed","tags":["blinds","closed","cover","curtains","nest","shade","shutter","sunshade"]},{"name":"broadcast_on_home","tags":[]},{"name":"4mp","tags":["4","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"19mp","tags":["19","camera","digits","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"nest_cam_wired_stand","tags":["camera","film","filming","hardware","image","motion","nest","picture","stand","video","videography","wired"]},{"name":"9mp","tags":["9","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"7mp","tags":["7","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"8mp","tags":["8","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"6mp","tags":["6","camera","digit","font","image","letters","megapixel","megapixels","mp","numbers","pixel","pixels","quality","resolution","symbol","text","type"]},{"name":"devices_fold","tags":["Android","OS","cell","dash","dashed","device","fold","foldable","hardware","iOS","mobile","phone","tablet"]},{"name":"dew_point","tags":["atmospheric","condense","dew","droplets","point","temperature","thermometer","water"]},{"name":"vape_free","tags":["disabled","e-cigarette","enabled","free","never","no","off","on","places","prohibited","slash","smoke","smoking","tobacco","vape","vaping","vapor","warning","zone"]},{"name":"ramp_left","tags":["arrow","arrows","direction","directions","left","maps","navigation","path","ramp","route","sign","traffic"]},{"name":"ramp_right","tags":["arrow","arrows","direction","directions","maps","navigation","path","ramp","right","route","sign","traffic"]},{"name":"video_chat","tags":["bubble","cam","camera","chat","comment","communicate","facetime","feedback","message","speech","video","voice"]},{"name":"type_specimen","tags":[]},{"name":"man_4","tags":["abstract","boy","gender","male","man","social","symbol"]},{"name":"fluorescent","tags":["bright","fluorescent","lamp","light","lightbulb"]},{"name":"man_3","tags":["abstract","boy","gender","male","man","social","symbol"]},{"name":"fire_hydrant_alt","tags":[]},{"name":"macro_off","tags":["camera","disabled","enabled","flower","garden","image","macro","off","offline","on","slash"]},{"name":"tb_gateway","tags":[]},{"name":"trendz","tags":[]},{"name":"mdi:ab-testing","tags":["developer / languages"]},{"name":"mdi:abacus","tags":["math"]},{"name":"mdi:abjad-arabic","tags":["alpha / numeric","writing system arabic"]},{"name":"mdi:abjad-hebrew","tags":["alpha / numeric","writing system hebrew"]},{"name":"mdi:abugida-devanagari","tags":["alpha / numeric","writing system devanagari"]},{"name":"mdi:abugida-thai","tags":["alpha / numeric","writing system thai"]},{"name":"mdi:access-point","tags":["wireless"]},{"name":"mdi:access-point-check","tags":["access point success","access point tick"]},{"name":"mdi:access-point-minus","tags":[]},{"name":"mdi:access-point-network","tags":[]},{"name":"mdi:access-point-network-off","tags":[]},{"name":"mdi:access-point-off","tags":[]},{"name":"mdi:access-point-plus","tags":[]},{"name":"mdi:access-point-remove","tags":[]},{"name":"mdi:account","tags":["account / user","home automation","person","user"]},{"name":"mdi:account-alert","tags":["account / user","alert / error","user alert","account warning","user warning","person alert","person warning"]},{"name":"mdi:account-alert-outline","tags":["account / user","alert / error","user alert outline","account warning outline","user warning outline","person warning outline","person alert outline"]},{"name":"mdi:account-arrow-down","tags":["account / user","account download"]},{"name":"mdi:account-arrow-down-outline","tags":["account / user","account download outline"]},{"name":"mdi:account-arrow-left","tags":["account / user","user arrow left","person arrow left"]},{"name":"mdi:account-arrow-left-outline","tags":["account / user","user arrow left outline","person arrow left outline"]},{"name":"mdi:account-arrow-right","tags":["account / user","user arrow right","person arrow right"]},{"name":"mdi:account-arrow-right-outline","tags":["account / user","user arrow right outline","person arrow right outline"]},{"name":"mdi:account-arrow-up","tags":["account / user","account upload"]},{"name":"mdi:account-arrow-up-outline","tags":["account / user","account upload outline"]},{"name":"mdi:account-badge","tags":["account / user","account online","user online"]},{"name":"mdi:account-badge-outline","tags":["account / user","user online outline","account online outline"]},{"name":"mdi:account-box","tags":["account / user","selfie","user box","person box","contact"]},{"name":"mdi:account-box-edit-outline","tags":["account / user"]},{"name":"mdi:account-box-minus-outline","tags":["account / user"]},{"name":"mdi:account-box-multiple","tags":["account / user","switch account","user box multiple","account boxes","user boxes","person box multiple","person boxes"]},{"name":"mdi:account-box-multiple-outline","tags":["account / user"]},{"name":"mdi:account-box-outline","tags":["account / user","selfie outline","user box outline","portrait","contact outline","person box outline"]},{"name":"mdi:account-box-plus-outline","tags":["account / user"]},{"name":"mdi:account-cancel","tags":["account / user","user cancel","user block","person cancel","person block"]},{"name":"mdi:account-cancel-outline","tags":["account / user","user cancel outline","user block outline","person cancel outline","person block outline"]},{"name":"mdi:account-card","tags":["account / user"]},{"name":"mdi:account-card-outline","tags":["account / user"]},{"name":"mdi:account-cash","tags":["account / user","banking","currency"]},{"name":"mdi:account-cash-outline","tags":["account / user","banking","currency"]},{"name":"mdi:account-check","tags":["account / user","user check","account tick","user tick","person check","person tick","how to reg","account success"]},{"name":"mdi:account-check-outline","tags":["account / user","account tick outline","user check outline","user tick outline","person check outline","person tick outline","how to reg outline","account success outline"]},{"name":"mdi:account-child","tags":["account / user","user child","person child","guardian"]},{"name":"mdi:account-child-circle","tags":["account / user","user child circle","person child circle","guardian circle"]},{"name":"mdi:account-child-outline","tags":["account / user"]},{"name":"mdi:account-circle","tags":["account / user","user circle","person circle"]},{"name":"mdi:account-circle-outline","tags":["account / user","user circle outline","person circle outline"]},{"name":"mdi:account-clock","tags":["account / user","date / time","user clock","account pending","person clock"]},{"name":"mdi:account-clock-outline","tags":["account / user","date / time","user clock outline","account pending outline","person clock outline"]},{"name":"mdi:account-cog","tags":["account / user","settings","account settings"]},{"name":"mdi:account-cog-outline","tags":["account / user","settings","account settings outline"]},{"name":"mdi:account-convert","tags":["account / user","user convert","person convert"]},{"name":"mdi:account-convert-outline","tags":["account / user"]},{"name":"mdi:account-cowboy-hat","tags":["account / user","agriculture","rancher"]},{"name":"mdi:account-cowboy-hat-outline","tags":["account / user","agriculture","rancher outline"]},{"name":"mdi:account-credit-card","tags":["account / user","banking","account payment","cardholder"]},{"name":"mdi:account-credit-card-outline","tags":["account / user","banking","account payment outline","cardholder outline"]},{"name":"mdi:account-details","tags":["account / user","settings","user details","person details"]},{"name":"mdi:account-details-outline","tags":["account / user","settings","person details outline","user details outline"]},{"name":"mdi:account-edit","tags":["account / user","edit / modify","user edit","person edit"]},{"name":"mdi:account-edit-outline","tags":["account / user","edit / modify"]},{"name":"mdi:account-eye","tags":["account / user","account view"]},{"name":"mdi:account-eye-outline","tags":["account / user","account view outline"]},{"name":"mdi:account-file","tags":["account / user"]},{"name":"mdi:account-file-outline","tags":["account / user"]},{"name":"mdi:account-file-text","tags":["account / user"]},{"name":"mdi:account-file-text-outline","tags":["account / user"]},{"name":"mdi:account-filter","tags":["account / user","account funnel","leads"]},{"name":"mdi:account-filter-outline","tags":["account / user","account funnel outline","leads outline"]},{"name":"mdi:account-group","tags":["account / user","home automation","user group","users group","person group","people group","accounts group"]},{"name":"mdi:account-group-outline","tags":["account / user","user group outline","users group outline","person group outline","people group outline","accounts group outline"]},{"name":"mdi:account-hard-hat","tags":["account / user","worker","construction"]},{"name":"mdi:account-hard-hat-outline","tags":["account / user","worker outline","construction outline"]},{"name":"mdi:account-heart","tags":["account / user","medical / hospital","user heart","person heart"]},{"name":"mdi:account-heart-outline","tags":["account / user","medical / hospital","user heart outline","person heart outline"]},{"name":"mdi:account-injury","tags":["medical / hospital","account / user","account disability","patient","person injury"]},{"name":"mdi:account-injury-outline","tags":["account / user","medical / hospital","account disability outline","patient outline","person injury outline"]},{"name":"mdi:account-key","tags":["account / user","user key","person key"]},{"name":"mdi:account-key-outline","tags":["account / user","user key outline","person key outline"]},{"name":"mdi:account-lock","tags":["account / user","lock","account security","account secure","user lock","person lock"]},{"name":"mdi:account-lock-open","tags":["account / user","lock","account unlocked","user unlocked","user lock open"]},{"name":"mdi:account-lock-open-outline","tags":["account / user","lock","user lock open outline","user unlocked outline","account unlocked outline"]},{"name":"mdi:account-lock-outline","tags":["account / user","lock","account security outline","account secure outline","person lock outline","user lock outline"]},{"name":"mdi:account-minus","tags":["account / user","user minus","person minus"]},{"name":"mdi:account-minus-outline","tags":["account / user","user minus outline","person minus outline"]},{"name":"mdi:account-multiple","tags":["account / user","people","user multiple","group","accounts","users","person multiple"]},{"name":"mdi:account-multiple-check","tags":["account / user","user multiple check","account multiple tick","accounts check","accounts tick","users check","users tick","user multiple tick","person multiple check","person multiple tick","people check","people tick","account multiple success"]},{"name":"mdi:account-multiple-check-outline","tags":["account / user","user multiple check outline","account multiple tick outline","accounts check outline","accounts tick outline","users check outline","users tick outline","user multiple tick outline","person multiple check outline","person multiple tick outline","people check outline","people tick outline","account multiple success outline"]},{"name":"mdi:account-multiple-minus","tags":["account / user","user multiple minus","accounts minus","users minus","people minus","person multiple minus"]},{"name":"mdi:account-multiple-minus-outline","tags":["account / user","accounts minus outline","people minus outline","user multiple minus outline","users minus outline","person multiple minus outline"]},{"name":"mdi:account-multiple-outline","tags":["account / user","user multiple outline","people outline","accounts outline","users outline"]},{"name":"mdi:account-multiple-plus","tags":["account / user","user multiple plus","group add","accounts plus","users plus","person multiple plus","people plus","person multiple add","people add","account multiple add","accounts add","user multiple add","users add","invite"]},{"name":"mdi:account-multiple-plus-outline","tags":["account / user","group add outline","user multiple plus outline","accounts plus outline","users plus outline","person multiple plus outline","people plus outline","person multiple add outline","people add outline","account multiple add outline","accounts add outline","user multiple add outline","users add outline","invite"]},{"name":"mdi:account-multiple-remove","tags":["account / user","user multiple remove","person multiple remove"]},{"name":"mdi:account-multiple-remove-outline","tags":["account / user","user multiple remove outline","person multiple remove outline"]},{"name":"mdi:account-music","tags":["account / user","artist"]},{"name":"mdi:account-music-outline","tags":["account / user","artist outline"]},{"name":"mdi:account-network","tags":["account / user","user network","person network"]},{"name":"mdi:account-network-off","tags":["account / user"]},{"name":"mdi:account-network-off-outline","tags":["account / user"]},{"name":"mdi:account-network-outline","tags":["account / user","user network outline","person network outline"]},{"name":"mdi:account-off","tags":["account / user","user off","person off"]},{"name":"mdi:account-off-outline","tags":["account / user","user off outline","person off outline"]},{"name":"mdi:account-outline","tags":["account / user","user outline","perm identity","person outline"]},{"name":"mdi:account-plus","tags":["account / user","home automation","register","user plus","person add","account add","person plus","user add","invite"]},{"name":"mdi:account-plus-outline","tags":["account / user","person add outline","register outline","user plus outline","account add outline","person plus outline","user add outline","invite"]},{"name":"mdi:account-question","tags":["account / user","user help","account question mark","account help","user question","person question","person help"]},{"name":"mdi:account-question-outline","tags":["account / user","account question mark outline","user help outline","account help outline","user question outline","person question outline","person help outline"]},{"name":"mdi:account-reactivate","tags":["account / user"]},{"name":"mdi:account-reactivate-outline","tags":["account / user"]},{"name":"mdi:account-remove","tags":["account / user","user remove","person remove"]},{"name":"mdi:account-remove-outline","tags":["account / user","user remove outline","person remove outline"]},{"name":"mdi:account-school","tags":["account / user","account student","account graduation"]},{"name":"mdi:account-school-outline","tags":["account / user","account student outline","account graduation outline"]},{"name":"mdi:account-search","tags":["account / user","user search","person search"]},{"name":"mdi:account-search-outline","tags":["account / user","user search outline","person search outline"]},{"name":"mdi:account-settings","tags":["account / user","settings","user settings","person settings"]},{"name":"mdi:account-settings-outline","tags":["account / user","settings"]},{"name":"mdi:account-star","tags":["account / user","user star","person star","account favorite"]},{"name":"mdi:account-star-outline","tags":["account / user","user star outline","person star outline"]},{"name":"mdi:account-supervisor","tags":["account / user","user supervisor","person supervisor"]},{"name":"mdi:account-supervisor-circle","tags":["account / user","user supervisor circle","person supervisor circle"]},{"name":"mdi:account-supervisor-circle-outline","tags":["account / user"]},{"name":"mdi:account-supervisor-outline","tags":["account / user"]},{"name":"mdi:account-switch","tags":["account / user","user switch","accounts switch","users switch","person switch","people switch"]},{"name":"mdi:account-switch-outline","tags":["account / user"]},{"name":"mdi:account-sync","tags":["account / user","account cache"]},{"name":"mdi:account-sync-outline","tags":["account / user","account cache outline"]},{"name":"mdi:account-tag","tags":["account / user"]},{"name":"mdi:account-tag-outline","tags":["account / user"]},{"name":"mdi:account-tie","tags":["account / user","people / family","person tie","user tie"]},{"name":"mdi:account-tie-hat","tags":["account / user","transportation + flying","account pilot"]},{"name":"mdi:account-tie-hat-outline","tags":["account / user","transportation + flying","account pilot outline"]},{"name":"mdi:account-tie-outline","tags":["account / user"]},{"name":"mdi:account-tie-voice","tags":["account / user"]},{"name":"mdi:account-tie-voice-off","tags":["account / user"]},{"name":"mdi:account-tie-voice-off-outline","tags":["account / user"]},{"name":"mdi:account-tie-voice-outline","tags":["account / user"]},{"name":"mdi:account-tie-woman","tags":["account / user","people / family","business woman"]},{"name":"mdi:account-voice","tags":["account / user","record voice over","speak","talk","speaking","talking"]},{"name":"mdi:account-voice-off","tags":["account / user"]},{"name":"mdi:account-wrench","tags":["account / user","account service"]},{"name":"mdi:account-wrench-outline","tags":["account / user","account service outline"]},{"name":"mdi:adjust","tags":[]},{"name":"mdi:advertisements","tags":["ads"]},{"name":"mdi:advertisements-off","tags":["ads off"]},{"name":"mdi:air-conditioner","tags":["home automation","automotive","ac unit"]},{"name":"mdi:air-filter","tags":["home automation","water filter","filter"]},{"name":"mdi:air-horn","tags":[]},{"name":"mdi:air-humidifier","tags":["home automation"]},{"name":"mdi:air-humidifier-off","tags":["home automation","air dehumidifier"]},{"name":"mdi:air-purifier","tags":["home automation"]},{"name":"mdi:air-purifier-off","tags":["home automation"]},{"name":"mdi:airbag","tags":["automotive"]},{"name":"mdi:airballoon","tags":["transportation + other","transportation + flying","hot air balloon"]},{"name":"mdi:airballoon-outline","tags":["transportation + flying","hot air balloon outline"]},{"name":"mdi:airplane","tags":["transportation + flying","navigation","aeroplane","airplanemode active","flight","local airport","flight mode","plane"]},{"name":"mdi:airplane-alert","tags":["transportation + flying","alert / error"]},{"name":"mdi:airplane-check","tags":["transportation + flying","airplace success","airplane tick"]},{"name":"mdi:airplane-clock","tags":["transportation + flying","date / time","airplane schedule","airplane time","airplane date"]},{"name":"mdi:airplane-cog","tags":["transportation + flying","settings","airplane settings"]},{"name":"mdi:airplane-edit","tags":["transportation + flying","edit / modify"]},{"name":"mdi:airplane-landing","tags":["transportation + flying","aeroplane landing","flight land","plane landing"]},{"name":"mdi:airplane-marker","tags":["transportation + flying","navigation","airplane location","airplane gps"]},{"name":"mdi:airplane-minus","tags":["transportation + flying"]},{"name":"mdi:airplane-off","tags":["transportation + flying","aeroplane off","airplanemode inactive","flight mode off","plane off"]},{"name":"mdi:airplane-plus","tags":["transportation + flying"]},{"name":"mdi:airplane-remove","tags":["transportation + flying"]},{"name":"mdi:airplane-search","tags":["transportation + flying","airplane find"]},{"name":"mdi:airplane-settings","tags":["transportation + flying","settings"]},{"name":"mdi:airplane-takeoff","tags":["transportation + flying","aeroplane takeoff","flight takeoff","plane takeoff","airplane take off"]},{"name":"mdi:airport","tags":["places","transportation + flying"]},{"name":"mdi:alarm","tags":["date / time","access alarms","alarm clock"]},{"name":"mdi:alarm-bell","tags":["notification"]},{"name":"mdi:alarm-check","tags":["date / time","alarm on","alarm tick","alarm clock check","alarm clock tick","alarm success"]},{"name":"mdi:alarm-light","tags":["home automation"]},{"name":"mdi:alarm-light-off","tags":["home automation"]},{"name":"mdi:alarm-light-off-outline","tags":["home automation"]},{"name":"mdi:alarm-light-outline","tags":["home automation"]},{"name":"mdi:alarm-multiple","tags":["date / time","alarms","alarm clock multiple","alarm clocks"]},{"name":"mdi:alarm-note","tags":[]},{"name":"mdi:alarm-note-off","tags":[]},{"name":"mdi:alarm-off","tags":["date / time","alarm clock off"]},{"name":"mdi:alarm-panel","tags":["home automation"]},{"name":"mdi:alarm-panel-outline","tags":["home automation"]},{"name":"mdi:alarm-plus","tags":["date / time","add alarm","alarm clock plus","alarm clock add","alarm add"]},{"name":"mdi:alarm-snooze","tags":["date / time","alarm clock snooze"]},{"name":"mdi:album","tags":["audio","music","vinyl","record"]},{"name":"mdi:alert","tags":["alert / error","warning","report problem"]},{"name":"mdi:alert-box","tags":["alert / error","warning box"]},{"name":"mdi:alert-box-outline","tags":["alert / error","warning box outline"]},{"name":"mdi:alert-circle","tags":["alert / error","warning circle","error"]},{"name":"mdi:alert-circle-check","tags":["alert / error","alert circle success"]},{"name":"mdi:alert-circle-check-outline","tags":["alert / error","alert circle success outline"]},{"name":"mdi:alert-circle-outline","tags":["alert / error","warning circle outline","error outline","git issue"]},{"name":"mdi:alert-decagram","tags":["alert / error","new releases","warning decagram"]},{"name":"mdi:alert-decagram-outline","tags":["alert / error","warning decagram outline"]},{"name":"mdi:alert-minus","tags":["alert / error"]},{"name":"mdi:alert-minus-outline","tags":["alert / error"]},{"name":"mdi:alert-octagon","tags":["alert / error","warning octagon","report","stop alert"]},{"name":"mdi:alert-octagon-outline","tags":["alert / error","warning octagon outline","stop alert outline"]},{"name":"mdi:alert-octagram","tags":["alert / error","warning octagram"]},{"name":"mdi:alert-octagram-outline","tags":["alert / error","warning octagram outline"]},{"name":"mdi:alert-outline","tags":["alert / error","warning outline"]},{"name":"mdi:alert-plus","tags":["alert / error"]},{"name":"mdi:alert-plus-outline","tags":["alert / error"]},{"name":"mdi:alert-remove","tags":["alert / error"]},{"name":"mdi:alert-remove-outline","tags":["alert / error"]},{"name":"mdi:alert-rhombus","tags":["alert / error"]},{"name":"mdi:alert-rhombus-outline","tags":["alert / error"]},{"name":"mdi:alien","tags":[]},{"name":"mdi:alien-outline","tags":[]},{"name":"mdi:align-horizontal-center","tags":["align horizontal centre"]},{"name":"mdi:align-horizontal-distribute","tags":["text / content / format"]},{"name":"mdi:align-horizontal-left","tags":[]},{"name":"mdi:align-horizontal-right","tags":[]},{"name":"mdi:align-vertical-bottom","tags":[]},{"name":"mdi:align-vertical-center","tags":["align vertical centre"]},{"name":"mdi:align-vertical-distribute","tags":["text / content / format"]},{"name":"mdi:align-vertical-top","tags":[]},{"name":"mdi:all-inclusive","tags":["infinity","forever"]},{"name":"mdi:all-inclusive-box","tags":["infinity box","forever box"]},{"name":"mdi:all-inclusive-box-outline","tags":["forever box outline","infinity box outline"]},{"name":"mdi:allergy","tags":["medical / hospital","hand","rash","germ"]},{"name":"mdi:alpha","tags":["alpha / numeric"]},{"name":"mdi:alpha-a","tags":["alpha / numeric","alphabet a","letter a"]},{"name":"mdi:alpha-a-box","tags":["alpha / numeric","alphabet a box","letter a box"]},{"name":"mdi:alpha-a-box-outline","tags":["alpha / numeric","alphabet a box outline","letter a box outline"]},{"name":"mdi:alpha-a-circle","tags":["alpha / numeric","alphabet a circle","letter a circle"]},{"name":"mdi:alpha-a-circle-outline","tags":["alpha / numeric","alphabet a circle outline","letter a circle outline"]},{"name":"mdi:alpha-b","tags":["alpha / numeric","alphabet b","letter b"]},{"name":"mdi:alpha-b-box","tags":["alpha / numeric","alphabet b box","letter b box"]},{"name":"mdi:alpha-b-box-outline","tags":["alpha / numeric","alphabet b box outline","letter b box outline"]},{"name":"mdi:alpha-b-circle","tags":["alpha / numeric","alphabet b circle","letter b circle"]},{"name":"mdi:alpha-b-circle-outline","tags":["alpha / numeric","alphabet b circle outline","letter b circle outline"]},{"name":"mdi:alpha-c","tags":["alpha / numeric","alphabet c","letter c"]},{"name":"mdi:alpha-c-box","tags":["alpha / numeric","alphabet c box","letter c box"]},{"name":"mdi:alpha-c-box-outline","tags":["alpha / numeric","alphabet c box outline","letter c box outline"]},{"name":"mdi:alpha-c-circle","tags":["alpha / numeric","alphabet c circle","letter c circle"]},{"name":"mdi:alpha-c-circle-outline","tags":["alpha / numeric","alphabet c circle outline","letter c circle outline"]},{"name":"mdi:alpha-d","tags":["automotive","alpha / numeric","alphabet d","letter d","drive"]},{"name":"mdi:alpha-d-box","tags":["alpha / numeric","alphabet d box","letter d box"]},{"name":"mdi:alpha-d-box-outline","tags":["alpha / numeric","alphabet d box outline","letter d box outline"]},{"name":"mdi:alpha-d-circle","tags":["alpha / numeric","alphabet d circle","letter d circle"]},{"name":"mdi:alpha-d-circle-outline","tags":["alpha / numeric","alphabet d circle outline","letter d circle outline"]},{"name":"mdi:alpha-e","tags":["alpha / numeric","alphabet e","letter e"]},{"name":"mdi:alpha-e-box","tags":["alpha / numeric","alphabet e box","letter e box"]},{"name":"mdi:alpha-e-box-outline","tags":["alpha / numeric","alphabet e box outline","letter e box outline"]},{"name":"mdi:alpha-e-circle","tags":["alpha / numeric","alphabet e circle","letter e circle"]},{"name":"mdi:alpha-e-circle-outline","tags":["alpha / numeric","alphabet e circle outline","letter e circle outline"]},{"name":"mdi:alpha-f","tags":["alpha / numeric","alphabet f","letter f"]},{"name":"mdi:alpha-f-box","tags":["alpha / numeric","alphabet f box","letter f box"]},{"name":"mdi:alpha-f-box-outline","tags":["alpha / numeric","alphabet f box outline","letter f box outline"]},{"name":"mdi:alpha-f-circle","tags":["alpha / numeric","alphabet f circle","letter f circle"]},{"name":"mdi:alpha-f-circle-outline","tags":["alpha / numeric","alphabet f circle outline","letter f circle outline"]},{"name":"mdi:alpha-g","tags":["alpha / numeric","alphabet g","letter g"]},{"name":"mdi:alpha-g-box","tags":["alpha / numeric","alphabet g box","letter g box"]},{"name":"mdi:alpha-g-box-outline","tags":["alpha / numeric","alphabet g box outline","letter g box outline"]},{"name":"mdi:alpha-g-circle","tags":["alpha / numeric","alphabet g circle","letter g circle"]},{"name":"mdi:alpha-g-circle-outline","tags":["alpha / numeric","alphabet g circle outline","letter g circle outline"]},{"name":"mdi:alpha-h","tags":["alpha / numeric","alphabet h","letter h"]},{"name":"mdi:alpha-h-box","tags":["alpha / numeric","alphabet h box","letter h box"]},{"name":"mdi:alpha-h-box-outline","tags":["alpha / numeric","alphabet h box outline","letter h box outline"]},{"name":"mdi:alpha-h-circle","tags":["alpha / numeric","alphabet h circle","letter h circle"]},{"name":"mdi:alpha-h-circle-outline","tags":["alpha / numeric","alphabet h circle outline","letter h circle outline","helipad"]},{"name":"mdi:alpha-i","tags":["alpha / numeric","alphabet i","letter i","roman numeral 1"]},{"name":"mdi:alpha-i-box","tags":["alpha / numeric","alphabet i box","letter i box"]},{"name":"mdi:alpha-i-box-outline","tags":["alpha / numeric","alphabet i box outline","letter i box outline"]},{"name":"mdi:alpha-i-circle","tags":["alpha / numeric","alphabet i circle","letter i circle"]},{"name":"mdi:alpha-i-circle-outline","tags":["alpha / numeric","alphabet i circle outline","letter i circle outline"]},{"name":"mdi:alpha-j","tags":["alpha / numeric","alphabet j","letter j"]},{"name":"mdi:alpha-j-box","tags":["alpha / numeric","alphabet j box","letter j box"]},{"name":"mdi:alpha-j-box-outline","tags":["alpha / numeric","alphabet j box outline","letter j box outline"]},{"name":"mdi:alpha-j-circle","tags":["alpha / numeric","alphabet j circle","letter j circle"]},{"name":"mdi:alpha-j-circle-outline","tags":["alpha / numeric","alphabet j circle outline","letter j circle outline"]},{"name":"mdi:alpha-k","tags":["alpha / numeric","alphabet k","letter k"]},{"name":"mdi:alpha-k-box","tags":["alpha / numeric","alphabet k box","letter k box"]},{"name":"mdi:alpha-k-box-outline","tags":["alpha / numeric","alphabet k box outline","letter k box outline"]},{"name":"mdi:alpha-k-circle","tags":["alpha / numeric","alphabet k circle","letter k circle"]},{"name":"mdi:alpha-k-circle-outline","tags":["alpha / numeric","alphabet k circle outline","letter k circle outline"]},{"name":"mdi:alpha-l","tags":["alpha / numeric","alphabet l","letter l"]},{"name":"mdi:alpha-l-box","tags":["alpha / numeric","alphabet l box","letter l box"]},{"name":"mdi:alpha-l-box-outline","tags":["alpha / numeric","alphabet l box outline","letter l box outline"]},{"name":"mdi:alpha-l-circle","tags":["alpha / numeric","alphabet l circle","letter l circle"]},{"name":"mdi:alpha-l-circle-outline","tags":["alpha / numeric","alphabet l circle outline","letter l circle outline"]},{"name":"mdi:alpha-m","tags":["alpha / numeric","alphabet m","letter m"]},{"name":"mdi:alpha-m-box","tags":["alpha / numeric","alphabet m box","letter m box"]},{"name":"mdi:alpha-m-box-outline","tags":["alpha / numeric","alphabet m box outline","letter m box outline"]},{"name":"mdi:alpha-m-circle","tags":["alpha / numeric","alphabet m circle","letter m circle"]},{"name":"mdi:alpha-m-circle-outline","tags":["alpha / numeric","alphabet m circle outline","letter m circle outline"]},{"name":"mdi:alpha-n","tags":["automotive","alpha / numeric","alphabet n","letter n","neutral"]},{"name":"mdi:alpha-n-box","tags":["alpha / numeric","alphabet n box","letter n box"]},{"name":"mdi:alpha-n-box-outline","tags":["alpha / numeric","alphabet n box outline","letter n box outline"]},{"name":"mdi:alpha-n-circle","tags":["alpha / numeric","alphabet n circle","letter n circle"]},{"name":"mdi:alpha-n-circle-outline","tags":["alpha / numeric","alphabet n circle outline","letter n circle outline"]},{"name":"mdi:alpha-o","tags":["alpha / numeric","alphabet o","letter o"]},{"name":"mdi:alpha-o-box","tags":["alpha / numeric","alphabet o box","letter o box"]},{"name":"mdi:alpha-o-box-outline","tags":["alpha / numeric","alphabet o box outline","letter o box outline"]},{"name":"mdi:alpha-o-circle","tags":["alpha / numeric","alphabet o circle","letter o circle"]},{"name":"mdi:alpha-o-circle-outline","tags":["alpha / numeric","alphabet o circle outline","letter o circle outline"]},{"name":"mdi:alpha-p","tags":["automotive","alpha / numeric","alphabet p","letter p","park"]},{"name":"mdi:alpha-p-box","tags":["alpha / numeric","alphabet p box","letter p box"]},{"name":"mdi:alpha-p-box-outline","tags":["alpha / numeric","alphabet p box outline","letter p box outline"]},{"name":"mdi:alpha-p-circle","tags":["alpha / numeric","alphabet p circle","letter p circle"]},{"name":"mdi:alpha-p-circle-outline","tags":["alpha / numeric","alphabet p circle outline","letter p circle outline"]},{"name":"mdi:alpha-q","tags":["alpha / numeric","alphabet q","letter q"]},{"name":"mdi:alpha-q-box","tags":["alpha / numeric","alphabet q box","letter q box"]},{"name":"mdi:alpha-q-box-outline","tags":["alpha / numeric","alphabet q box outline","letter q box outline"]},{"name":"mdi:alpha-q-circle","tags":["alpha / numeric","alphabet q circle","letter q circle"]},{"name":"mdi:alpha-q-circle-outline","tags":["alpha / numeric","alphabet q circle outline","letter q circle outline"]},{"name":"mdi:alpha-r","tags":["automotive","alpha / numeric","alphabet r","letter r","reverse"]},{"name":"mdi:alpha-r-box","tags":["alpha / numeric","alphabet r box","letter r box"]},{"name":"mdi:alpha-r-box-outline","tags":["alpha / numeric","alphabet r box outline","letter r box outline"]},{"name":"mdi:alpha-r-circle","tags":["alpha / numeric","alphabet r circle","letter r circle"]},{"name":"mdi:alpha-r-circle-outline","tags":["alpha / numeric","alphabet r circle outline","letter r circle outline"]},{"name":"mdi:alpha-s","tags":["alpha / numeric","alphabet s","letter s"]},{"name":"mdi:alpha-s-box","tags":["alpha / numeric","alphabet s box","letter s box"]},{"name":"mdi:alpha-s-box-outline","tags":["alpha / numeric","alphabet s box outline","letter s box outline"]},{"name":"mdi:alpha-s-circle","tags":["alpha / numeric","alphabet s circle","letter s circle"]},{"name":"mdi:alpha-s-circle-outline","tags":["alpha / numeric","alphabet s circle outline","letter s circle outline"]},{"name":"mdi:alpha-t","tags":["alpha / numeric","alphabet t","letter t"]},{"name":"mdi:alpha-t-box","tags":["alpha / numeric","alphabet t box","letter t box"]},{"name":"mdi:alpha-t-box-outline","tags":["alpha / numeric","alphabet t box outline","letter t box outline"]},{"name":"mdi:alpha-t-circle","tags":["alpha / numeric","alphabet t circle","letter t circle"]},{"name":"mdi:alpha-t-circle-outline","tags":["alpha / numeric","alphabet t circle outline","letter t circle outline"]},{"name":"mdi:alpha-u","tags":["alpha / numeric","alphabet u","letter u"]},{"name":"mdi:alpha-u-box","tags":["alpha / numeric","alphabet u box","letter u box"]},{"name":"mdi:alpha-u-box-outline","tags":["alpha / numeric","alphabet u box outline","letter u box outline"]},{"name":"mdi:alpha-u-circle","tags":["alpha / numeric","alphabet u circle","letter u circle"]},{"name":"mdi:alpha-u-circle-outline","tags":["alpha / numeric","alphabet u circle outline","letter u circle outline"]},{"name":"mdi:alpha-v","tags":["alpha / numeric","alphabet v","letter v","roman numeral 5"]},{"name":"mdi:alpha-v-box","tags":["alpha / numeric","alphabet v box","letter v box"]},{"name":"mdi:alpha-v-box-outline","tags":["alpha / numeric","alphabet v box outline","letter v box outline"]},{"name":"mdi:alpha-v-circle","tags":["alpha / numeric","alphabet v circle","letter v circle"]},{"name":"mdi:alpha-v-circle-outline","tags":["alpha / numeric","alphabet v circle outline","letter v circle outline"]},{"name":"mdi:alpha-w","tags":["alpha / numeric","alphabet w","letter w"]},{"name":"mdi:alpha-w-box","tags":["alpha / numeric","alphabet w box","letter w box"]},{"name":"mdi:alpha-w-box-outline","tags":["alpha / numeric","alphabet w box outline","letter w box outline"]},{"name":"mdi:alpha-w-circle","tags":["alpha / numeric","alphabet w circle","letter w circle"]},{"name":"mdi:alpha-w-circle-outline","tags":["alpha / numeric","alphabet w circle outline","letter w circle outline"]},{"name":"mdi:alpha-x","tags":["alpha / numeric","alphabet x","letter x","roman numeral 10"]},{"name":"mdi:alpha-x-box","tags":["alpha / numeric","alphabet x box","letter x box"]},{"name":"mdi:alpha-x-box-outline","tags":["alpha / numeric","alphabet x box outline","letter x box outline"]},{"name":"mdi:alpha-x-circle","tags":["alpha / numeric","alphabet x circle","letter x circle"]},{"name":"mdi:alpha-x-circle-outline","tags":["alpha / numeric","alphabet x circle outline","letter x circle outline"]},{"name":"mdi:alpha-y","tags":["alpha / numeric","alphabet y","letter y"]},{"name":"mdi:alpha-y-box","tags":["alpha / numeric","alphabet y box","letter y box"]},{"name":"mdi:alpha-y-box-outline","tags":["alpha / numeric","alphabet y box outline","letter y box outline"]},{"name":"mdi:alpha-y-circle","tags":["alpha / numeric","alphabet y circle","letter y circle"]},{"name":"mdi:alpha-y-circle-outline","tags":["alpha / numeric","alphabet y circle outline","letter y circle outline"]},{"name":"mdi:alpha-z","tags":["alpha / numeric","alphabet z","letter z"]},{"name":"mdi:alpha-z-box","tags":["alpha / numeric","alphabet z box","letter z box"]},{"name":"mdi:alpha-z-box-outline","tags":["alpha / numeric","alphabet z box outline","letter z box outline"]},{"name":"mdi:alpha-z-circle","tags":["alpha / numeric","alphabet z circle","letter z circle"]},{"name":"mdi:alpha-z-circle-outline","tags":["alpha / numeric","alphabet z circle outline","letter z circle outline"]},{"name":"mdi:alphabet-aurebesh","tags":["alpha / numeric","writing system aurebesh"]},{"name":"mdi:alphabet-cyrillic","tags":["alpha / numeric","writing system cyrillic"]},{"name":"mdi:alphabet-greek","tags":["alpha / numeric","writing system greek"]},{"name":"mdi:alphabet-latin","tags":["alpha / numeric","writing system latin"]},{"name":"mdi:alphabet-piqad","tags":["alpha / numeric","writing system piqad"]},{"name":"mdi:alphabet-tengwar","tags":["alpha / numeric","writing system tengwar"]},{"name":"mdi:alphabetical","tags":["alpha / numeric","letters","a b c","abc"]},{"name":"mdi:alphabetical-off","tags":["alpha / numeric","letters off","abc off","a b c off"]},{"name":"mdi:alphabetical-variant","tags":["alpha / numeric","letters","abc","a b c"]},{"name":"mdi:alphabetical-variant-off","tags":["alpha / numeric","letters off","abc off","a b c off"]},{"name":"mdi:altimeter","tags":[]},{"name":"mdi:ambulance","tags":["transportation + road","medical / hospital"]},{"name":"mdi:ammunition","tags":["bullets"]},{"name":"mdi:ampersand","tags":["and"]},{"name":"mdi:amplifier","tags":["home automation","music"]},{"name":"mdi:amplifier-off","tags":[]},{"name":"mdi:anchor","tags":["transportation + water"]},{"name":"mdi:android","tags":["brand / logo"]},{"name":"mdi:android-studio","tags":["brand / logo","math compass variant"]},{"name":"mdi:angle-acute","tags":["math"]},{"name":"mdi:angle-obtuse","tags":["math"]},{"name":"mdi:angle-right","tags":["math"]},{"name":"mdi:angular","tags":["brand / logo","developer / languages"]},{"name":"mdi:angularjs","tags":["brand / logo","developer / languages"]},{"name":"mdi:animation","tags":["auto awesome motion"]},{"name":"mdi:animation-outline","tags":[]},{"name":"mdi:animation-play","tags":[]},{"name":"mdi:animation-play-outline","tags":[]},{"name":"mdi:ansible","tags":["developer / languages","brand / logo"]},{"name":"mdi:antenna","tags":[]},{"name":"mdi:anvil","tags":[]},{"name":"mdi:apache-kafka","tags":["brand / logo","developer / languages"]},{"name":"mdi:api","tags":["developer / languages"]},{"name":"mdi:api-off","tags":["developer / languages"]},{"name":"mdi:apple","tags":["brand / logo"]},{"name":"mdi:apple-finder","tags":["brand / logo"]},{"name":"mdi:apple-icloud","tags":["brand / logo","apple mobileme"]},{"name":"mdi:apple-ios","tags":["brand / logo"]},{"name":"mdi:apple-keyboard-caps","tags":[]},{"name":"mdi:apple-keyboard-command","tags":[]},{"name":"mdi:apple-keyboard-control","tags":[]},{"name":"mdi:apple-keyboard-option","tags":[]},{"name":"mdi:apple-keyboard-shift","tags":[]},{"name":"mdi:apple-safari","tags":["brand / logo"]},{"name":"mdi:application","tags":["iframe"]},{"name":"mdi:application-array","tags":["developer / languages","iframe array"]},{"name":"mdi:application-array-outline","tags":["developer / languages","iframe array outline"]},{"name":"mdi:application-braces","tags":["developer / languages","iframe braces"]},{"name":"mdi:application-braces-outline","tags":["developer / languages","iframe braces outline"]},{"name":"mdi:application-brackets","tags":["developer / languages","iframe brackets"]},{"name":"mdi:application-brackets-outline","tags":["developer / languages","iframe brackets outline"]},{"name":"mdi:application-cog","tags":["settings","iframe cog"]},{"name":"mdi:application-cog-outline","tags":["settings","application settings","iframe cog outline"]},{"name":"mdi:application-edit","tags":["edit / modify","iframe edit"]},{"name":"mdi:application-edit-outline","tags":["edit / modify","iframe edit outline"]},{"name":"mdi:application-export","tags":["iframe export outline"]},{"name":"mdi:application-import","tags":["iframe import outline"]},{"name":"mdi:application-outline","tags":["web asset","iframe outline"]},{"name":"mdi:application-parentheses","tags":["developer / languages","iframe parentheses"]},{"name":"mdi:application-parentheses-outline","tags":["developer / languages","iframe parentheses outline"]},{"name":"mdi:application-settings","tags":["settings","iframe settings"]},{"name":"mdi:application-settings-outline","tags":["settings","iframe settings outline"]},{"name":"mdi:application-variable","tags":["developer / languages","iframe variable"]},{"name":"mdi:application-variable-outline","tags":["developer / languages","iframe variable outline"]},{"name":"mdi:approximately-equal","tags":["math"]},{"name":"mdi:approximately-equal-box","tags":["math"]},{"name":"mdi:apps","tags":["view"]},{"name":"mdi:apps-box","tags":[]},{"name":"mdi:arch","tags":["brand / logo"]},{"name":"mdi:archive","tags":["box"]},{"name":"mdi:archive-alert","tags":["alert / error","box alert"]},{"name":"mdi:archive-alert-outline","tags":["alert / error","box alert outline"]},{"name":"mdi:archive-arrow-down","tags":["box arrow down","this side down"]},{"name":"mdi:archive-arrow-down-outline","tags":["box arrow down","this side down outline"]},{"name":"mdi:archive-arrow-up","tags":["box arrow up","this side up"]},{"name":"mdi:archive-arrow-up-outline","tags":["box arrow up outline","this side up outline"]},{"name":"mdi:archive-cancel","tags":["box cancel"]},{"name":"mdi:archive-cancel-outline","tags":["box cancel outline"]},{"name":"mdi:archive-check","tags":["box check","archive success","box success"]},{"name":"mdi:archive-check-outline","tags":["box check outline","archive success outline","box success outline"]},{"name":"mdi:archive-clock","tags":["date / time","box clock","box time","archive time"]},{"name":"mdi:archive-clock-outline","tags":["date / time","box clock outline","box time outline","archive time outline"]},{"name":"mdi:archive-cog","tags":["settings","box cog"]},{"name":"mdi:archive-cog-outline","tags":["settings","box cog outline"]},{"name":"mdi:archive-edit","tags":["edit / modify","box edit"]},{"name":"mdi:archive-edit-outline","tags":["edit / modify","box edit outline"]},{"name":"mdi:archive-eye","tags":["archive view","box eye","box view"]},{"name":"mdi:archive-eye-outline","tags":["archive view outline","box eye outline","box view outline"]},{"name":"mdi:archive-lock","tags":["lock","box lock"]},{"name":"mdi:archive-lock-open","tags":["lock","box lock open"]},{"name":"mdi:archive-lock-open-outline","tags":["lock","box lock open outline"]},{"name":"mdi:archive-lock-outline","tags":["lock","box lock outline"]},{"name":"mdi:archive-marker","tags":["navigation","archive location","box marker","box location"]},{"name":"mdi:archive-marker-outline","tags":["navigation","archive location outline","box marker outline","box location outline"]},{"name":"mdi:archive-minus","tags":["box minus"]},{"name":"mdi:archive-minus-outline","tags":["box minus outline"]},{"name":"mdi:archive-music","tags":["music","box music"]},{"name":"mdi:archive-music-outline","tags":["music","box music outline"]},{"name":"mdi:archive-off","tags":["box off"]},{"name":"mdi:archive-off-outline","tags":["box off outline"]},{"name":"mdi:archive-outline","tags":["box outline"]},{"name":"mdi:archive-plus","tags":["archive add","box plus","box add"]},{"name":"mdi:archive-plus-outline","tags":["archive add outline","box plus outline","box add outline"]},{"name":"mdi:archive-refresh","tags":["box refresh"]},{"name":"mdi:archive-refresh-outline","tags":["box refresh outline"]},{"name":"mdi:archive-remove","tags":["box remove"]},{"name":"mdi:archive-remove-outline","tags":["box remove outline"]},{"name":"mdi:archive-search","tags":["box search"]},{"name":"mdi:archive-search-outline","tags":["box search outline"]},{"name":"mdi:archive-settings","tags":["settings","box settings"]},{"name":"mdi:archive-settings-outline","tags":["settings","box settings outline"]},{"name":"mdi:archive-star","tags":["archive favorite","box star","box favorite"]},{"name":"mdi:archive-star-outline","tags":["archive favorite outline","box star outline","box favorite outline"]},{"name":"mdi:archive-sync","tags":["box sync"]},{"name":"mdi:archive-sync-outline","tags":["box sync outline"]},{"name":"mdi:arm-flex","tags":[]},{"name":"mdi:arm-flex-outline","tags":[]},{"name":"mdi:arrange-bring-forward","tags":["arrange","geographic information system"]},{"name":"mdi:arrange-bring-to-front","tags":["arrange","geographic information system"]},{"name":"mdi:arrange-send-backward","tags":["arrange","geographic information system"]},{"name":"mdi:arrange-send-to-back","tags":["arrange","geographic information system"]},{"name":"mdi:arrow-all","tags":["arrow"]},{"name":"mdi:arrow-bottom-left","tags":["arrow","arrow down left"]},{"name":"mdi:arrow-bottom-left-bold-box","tags":["arrow"]},{"name":"mdi:arrow-bottom-left-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-bottom-left-bold-outline","tags":["arrow","arrow down left bold outline"]},{"name":"mdi:arrow-bottom-left-thick","tags":["arrow","arrow down left thick","arrow bottom left bold","arrow down left bold"]},{"name":"mdi:arrow-bottom-left-thin","tags":["arrow"]},{"name":"mdi:arrow-bottom-left-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-bottom-right","tags":["arrow","arrow down right"]},{"name":"mdi:arrow-bottom-right-bold-box","tags":["arrow"]},{"name":"mdi:arrow-bottom-right-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-bottom-right-bold-outline","tags":["arrow","arrow down right bold outline"]},{"name":"mdi:arrow-bottom-right-thick","tags":["arrow","arrow down right thick","arrow bottom right bold","arrow down right bold"]},{"name":"mdi:arrow-bottom-right-thin","tags":["arrow"]},{"name":"mdi:arrow-bottom-right-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-collapse","tags":["arrow","arrow compress"]},{"name":"mdi:arrow-collapse-all","tags":["arrow","arrow compress all"]},{"name":"mdi:arrow-collapse-down","tags":["arrow","arrow compress down"]},{"name":"mdi:arrow-collapse-horizontal","tags":["arrow"]},{"name":"mdi:arrow-collapse-left","tags":["arrow","arrow compress left"]},{"name":"mdi:arrow-collapse-right","tags":["arrow","arrow compress right"]},{"name":"mdi:arrow-collapse-up","tags":["arrow","arrow compress up"]},{"name":"mdi:arrow-collapse-vertical","tags":["arrow","compress"]},{"name":"mdi:arrow-decision","tags":["arrow","proxy"]},{"name":"mdi:arrow-decision-auto","tags":["proxy auto"]},{"name":"mdi:arrow-decision-auto-outline","tags":["proxy auto outline"]},{"name":"mdi:arrow-decision-outline","tags":["arrow","proxy outline"]},{"name":"mdi:arrow-down","tags":["arrow","arrow downward","arrow bottom"]},{"name":"mdi:arrow-down-bold","tags":["arrow","arrow bottom bold"]},{"name":"mdi:arrow-down-bold-box","tags":["arrow","arrow bottom bold box"]},{"name":"mdi:arrow-down-bold-box-outline","tags":["arrow","arrow bottom bold box outline"]},{"name":"mdi:arrow-down-bold-circle","tags":["arrow","arrow bottom bold circle"]},{"name":"mdi:arrow-down-bold-circle-outline","tags":["arrow","arrow bottom bold circle outline"]},{"name":"mdi:arrow-down-bold-hexagon-outline","tags":["arrow","arrow bottom bold hexagon outline"]},{"name":"mdi:arrow-down-bold-outline","tags":["arrow","arrow bottom bold outline"]},{"name":"mdi:arrow-down-box","tags":["arrow","arrow bottom box"]},{"name":"mdi:arrow-down-circle","tags":["arrow","arrow bottom circle"]},{"name":"mdi:arrow-down-circle-outline","tags":["arrow","arrow bottom circle outline"]},{"name":"mdi:arrow-down-drop-circle","tags":["arrow","arrow drop down circle","arrow bottom drop circle"]},{"name":"mdi:arrow-down-drop-circle-outline","tags":["arrow","arrow bottom drop circle outline"]},{"name":"mdi:arrow-down-left","tags":["arrow"]},{"name":"mdi:arrow-down-left-bold","tags":["arrow"]},{"name":"mdi:arrow-down-right","tags":["arrow"]},{"name":"mdi:arrow-down-right-bold","tags":["arrow"]},{"name":"mdi:arrow-down-thick","tags":["arrow","arrow bottom thick","arrow down bold","arrow bottom bold"]},{"name":"mdi:arrow-down-thin","tags":["arrow"]},{"name":"mdi:arrow-down-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-expand","tags":["arrow"]},{"name":"mdi:arrow-expand-all","tags":["arrow","geographic information system"]},{"name":"mdi:arrow-expand-down","tags":["arrow"]},{"name":"mdi:arrow-expand-horizontal","tags":["arrow"]},{"name":"mdi:arrow-expand-left","tags":["arrow"]},{"name":"mdi:arrow-expand-right","tags":["arrow"]},{"name":"mdi:arrow-expand-up","tags":["arrow"]},{"name":"mdi:arrow-expand-vertical","tags":["arrow"]},{"name":"mdi:arrow-horizontal-lock","tags":["lock","arrow","scroll horizontal lock"]},{"name":"mdi:arrow-left","tags":["arrow","arrow back"]},{"name":"mdi:arrow-left-bold","tags":["arrow","automotive"]},{"name":"mdi:arrow-left-bold-box","tags":["arrow"]},{"name":"mdi:arrow-left-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-left-bold-circle","tags":["arrow"]},{"name":"mdi:arrow-left-bold-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-bold-hexagon-outline","tags":["arrow"]},{"name":"mdi:arrow-left-bold-outline","tags":["arrow","automotive"]},{"name":"mdi:arrow-left-bottom","tags":[]},{"name":"mdi:arrow-left-bottom-bold","tags":[]},{"name":"mdi:arrow-left-box","tags":["arrow"]},{"name":"mdi:arrow-left-circle","tags":["arrow","arrow back circle"]},{"name":"mdi:arrow-left-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-drop-circle","tags":["arrow"]},{"name":"mdi:arrow-left-drop-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-right","tags":["arrow"]},{"name":"mdi:arrow-left-right-bold","tags":["arrow"]},{"name":"mdi:arrow-left-right-bold-outline","tags":["arrow"]},{"name":"mdi:arrow-left-thick","tags":["arrow","arrow left bold"]},{"name":"mdi:arrow-left-thin","tags":["arrow"]},{"name":"mdi:arrow-left-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-left-top","tags":["turn left"]},{"name":"mdi:arrow-left-top-bold","tags":["turn left bold"]},{"name":"mdi:arrow-oscillating","tags":["home automation"]},{"name":"mdi:arrow-oscillating-off","tags":["home automation"]},{"name":"mdi:arrow-projectile","tags":["gaming / rpg","sport"]},{"name":"mdi:arrow-projectile-multiple","tags":["gaming / rpg","sport"]},{"name":"mdi:arrow-right","tags":["arrow","arrow forward"]},{"name":"mdi:arrow-right-bold","tags":["arrow","automotive"]},{"name":"mdi:arrow-right-bold-box","tags":["arrow"]},{"name":"mdi:arrow-right-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-right-bold-circle","tags":["arrow"]},{"name":"mdi:arrow-right-bold-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-bold-hexagon-outline","tags":["arrow"]},{"name":"mdi:arrow-right-bold-outline","tags":["arrow","automotive"]},{"name":"mdi:arrow-right-bottom","tags":[]},{"name":"mdi:arrow-right-bottom-bold","tags":[]},{"name":"mdi:arrow-right-box","tags":["arrow"]},{"name":"mdi:arrow-right-circle","tags":["arrow","arrow forward circle"]},{"name":"mdi:arrow-right-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-drop-circle","tags":["arrow"]},{"name":"mdi:arrow-right-drop-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-thick","tags":["arrow","arrow right bold"]},{"name":"mdi:arrow-right-thin","tags":["arrow"]},{"name":"mdi:arrow-right-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-right-top","tags":["turn right"]},{"name":"mdi:arrow-right-top-bold","tags":["turn right bold"]},{"name":"mdi:arrow-split-horizontal","tags":["arrow","resize vertical","resize"]},{"name":"mdi:arrow-split-vertical","tags":["arrow","resize horizontal","resize"]},{"name":"mdi:arrow-top-left","tags":["arrow","arrow up left"]},{"name":"mdi:arrow-top-left-bold-box","tags":["arrow"]},{"name":"mdi:arrow-top-left-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-top-left-bold-outline","tags":["arrow","arrow up left bold outline"]},{"name":"mdi:arrow-top-left-bottom-right","tags":["arrow"]},{"name":"mdi:arrow-top-left-bottom-right-bold","tags":["arrow"]},{"name":"mdi:arrow-top-left-thick","tags":["arrow","arrow up left thick","arrow top left bold","arrow up left bold"]},{"name":"mdi:arrow-top-left-thin","tags":["arrow"]},{"name":"mdi:arrow-top-left-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-top-right","tags":["arrow","arrow up right"]},{"name":"mdi:arrow-top-right-bold-box","tags":["arrow"]},{"name":"mdi:arrow-top-right-bold-box-outline","tags":["arrow"]},{"name":"mdi:arrow-top-right-bold-outline","tags":["arrow","arrow up right bold outline"]},{"name":"mdi:arrow-top-right-bottom-left","tags":["arrow"]},{"name":"mdi:arrow-top-right-bottom-left-bold","tags":["arrow"]},{"name":"mdi:arrow-top-right-thick","tags":["arrow","arrow up right thick","arrow top right bold","arrow up right bold"]},{"name":"mdi:arrow-top-right-thin","tags":["arrow"]},{"name":"mdi:arrow-top-right-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-u-down-left","tags":["u turn left"]},{"name":"mdi:arrow-u-down-left-bold","tags":["u turn left bold"]},{"name":"mdi:arrow-u-down-right","tags":["u turn right"]},{"name":"mdi:arrow-u-down-right-bold","tags":["u turn right bold"]},{"name":"mdi:arrow-u-left-bottom","tags":["undo"]},{"name":"mdi:arrow-u-left-bottom-bold","tags":["undo"]},{"name":"mdi:arrow-u-left-top","tags":["undo"]},{"name":"mdi:arrow-u-left-top-bold","tags":["undo"]},{"name":"mdi:arrow-u-right-bottom","tags":["redo"]},{"name":"mdi:arrow-u-right-bottom-bold","tags":["redo"]},{"name":"mdi:arrow-u-right-top","tags":["redo"]},{"name":"mdi:arrow-u-right-top-bold","tags":["redo"]},{"name":"mdi:arrow-u-up-left","tags":[]},{"name":"mdi:arrow-u-up-left-bold","tags":[]},{"name":"mdi:arrow-u-up-right","tags":[]},{"name":"mdi:arrow-u-up-right-bold","tags":[]},{"name":"mdi:arrow-up","tags":["arrow","arrow upward","arrow top"]},{"name":"mdi:arrow-up-bold","tags":["arrow","arrow top bold"]},{"name":"mdi:arrow-up-bold-box","tags":["arrow","arrow top bold box"]},{"name":"mdi:arrow-up-bold-box-outline","tags":["arrow","arrow top bold box outline"]},{"name":"mdi:arrow-up-bold-circle","tags":["arrow","arrow top bold circle"]},{"name":"mdi:arrow-up-bold-circle-outline","tags":["arrow","arrow top bold circle outline"]},{"name":"mdi:arrow-up-bold-hexagon-outline","tags":["arrow","arrow top bold hexagon outline"]},{"name":"mdi:arrow-up-bold-outline","tags":["arrow","arrow top bold outline"]},{"name":"mdi:arrow-up-box","tags":["arrow"]},{"name":"mdi:arrow-up-circle","tags":["arrow","arrow top circle"]},{"name":"mdi:arrow-up-circle-outline","tags":["arrow","arrow top circle outline"]},{"name":"mdi:arrow-up-down","tags":["arrow"]},{"name":"mdi:arrow-up-down-bold","tags":["arrow"]},{"name":"mdi:arrow-up-down-bold-outline","tags":["arrow"]},{"name":"mdi:arrow-up-drop-circle","tags":["arrow","arrow top drop circle"]},{"name":"mdi:arrow-up-drop-circle-outline","tags":["arrow","arrow top drop circle outline"]},{"name":"mdi:arrow-up-left","tags":[]},{"name":"mdi:arrow-up-left-bold","tags":[]},{"name":"mdi:arrow-up-right","tags":[]},{"name":"mdi:arrow-up-right-bold","tags":[]},{"name":"mdi:arrow-up-thick","tags":["arrow","arrow top thick","arrow up bold","arrow top bold"]},{"name":"mdi:arrow-up-thin","tags":["arrow"]},{"name":"mdi:arrow-up-thin-circle-outline","tags":["arrow"]},{"name":"mdi:arrow-vertical-lock","tags":["lock","arrow","scroll vertical lock"]},{"name":"mdi:artboard","tags":["drawing / art","canvas","frame"]},{"name":"mdi:artstation","tags":["brand / logo"]},{"name":"mdi:aspect-ratio","tags":[]},{"name":"mdi:assistant","tags":[]},{"name":"mdi:asterisk","tags":["required"]},{"name":"mdi:asterisk-circle-outline","tags":["required circle"]},{"name":"mdi:at","tags":["alternate email"]},{"name":"mdi:atlassian","tags":["brand / logo"]},{"name":"mdi:atm","tags":[]},{"name":"mdi:atom","tags":["science"]},{"name":"mdi:atom-variant","tags":["science","orbit"]},{"name":"mdi:attachment","tags":["paperclip horizontal"]},{"name":"mdi:attachment-check","tags":["attachment tick","paperclip check","paperclip tick"]},{"name":"mdi:attachment-lock","tags":["lock","paperclip lock"]},{"name":"mdi:attachment-minus","tags":["paperclip minus","paperclip subtract","attachment subtract"]},{"name":"mdi:attachment-off","tags":["paperclip off"]},{"name":"mdi:attachment-plus","tags":["paperclip plus","paperclip add","attachment add"]},{"name":"mdi:attachment-remove","tags":["paperclip remove"]},{"name":"mdi:atv","tags":["transportation + other","sport","quad","trike","two wheeler","all terrain vehicle"]},{"name":"mdi:audio-input-rca","tags":["audio"]},{"name":"mdi:audio-input-stereo-minijack","tags":["audio"]},{"name":"mdi:audio-input-xlr","tags":["audio"]},{"name":"mdi:audio-video","tags":["home automation","audio","av receiver"]},{"name":"mdi:audio-video-off","tags":["home automation","audio","av receiver off"]},{"name":"mdi:augmented-reality","tags":[]},{"name":"mdi:aurora","tags":["science","weather","aurora borealis","aurora australis","northern lights","southern lights","polar lights"]},{"name":"mdi:auto-download","tags":[]},{"name":"mdi:auto-fix","tags":["photography","magic","wand","auto fix high"]},{"name":"mdi:auto-mode","tags":[]},{"name":"mdi:auto-upload","tags":[]},{"name":"mdi:autorenew","tags":["arrow","clockwise arrows","circular arrows","circle arrows","sync"]},{"name":"mdi:autorenew-off","tags":["arrow","clockwise arrows off","circular arrows off","circle arrows off","sync off"]},{"name":"mdi:av-timer","tags":["date / time"]},{"name":"mdi:awning","tags":["home automation","marquise","sun shade"]},{"name":"mdi:awning-outline","tags":["home automation","marquise outline","sun shade outline"]},{"name":"mdi:aws","tags":["brand / logo"]},{"name":"mdi:axe","tags":["hardware / tools"]},{"name":"mdi:axe-battle","tags":["gaming / rpg"]},{"name":"mdi:axis","tags":[]},{"name":"mdi:axis-arrow","tags":["arrow","accelerometer","gyro"]},{"name":"mdi:axis-arrow-info","tags":["arrow"]},{"name":"mdi:axis-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-lock","tags":["lock"]},{"name":"mdi:axis-x-arrow","tags":["arrow"]},{"name":"mdi:axis-x-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-x-rotate-clockwise","tags":[]},{"name":"mdi:axis-x-rotate-counterclockwise","tags":[]},{"name":"mdi:axis-x-y-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-y-arrow","tags":["arrow"]},{"name":"mdi:axis-y-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-y-rotate-clockwise","tags":[]},{"name":"mdi:axis-y-rotate-counterclockwise","tags":[]},{"name":"mdi:axis-z-arrow","tags":["arrow"]},{"name":"mdi:axis-z-arrow-lock","tags":["lock","arrow"]},{"name":"mdi:axis-z-rotate-clockwise","tags":["vertical rotate clockwise"]},{"name":"mdi:axis-z-rotate-counterclockwise","tags":["vertical rotate counterclockwise"]},{"name":"mdi:babel","tags":["brand / logo"]},{"name":"mdi:baby","tags":["people / family"]},{"name":"mdi:baby-bottle","tags":["people / family"]},{"name":"mdi:baby-bottle-outline","tags":["people / family"]},{"name":"mdi:baby-buggy","tags":["people / family","stroller","pram","carriage"]},{"name":"mdi:baby-buggy-off","tags":["people / family"]},{"name":"mdi:baby-carriage","tags":["people / family","child friendly","stroller","pram","buggy"]},{"name":"mdi:baby-carriage-off","tags":["people / family","child friendly off","stroller off","pram off","buggy off"]},{"name":"mdi:baby-face","tags":["people / family","emoji baby","emoticon baby"]},{"name":"mdi:baby-face-outline","tags":["people / family","emoji baby outline","emoticon baby outline"]},{"name":"mdi:backburger","tags":["hamburger menu back"]},{"name":"mdi:backspace","tags":["erase","clear"]},{"name":"mdi:backspace-outline","tags":["erase outline","clear outline"]},{"name":"mdi:backspace-reverse","tags":["clear reverse","erase reverse"]},{"name":"mdi:backspace-reverse-outline","tags":["clear reverse outline","erase reverse outline"]},{"name":"mdi:backup-restore","tags":["settings backup restore"]},{"name":"mdi:bacteria","tags":["science","medical / hospital"]},{"name":"mdi:bacteria-outline","tags":["science","medical / hospital"]},{"name":"mdi:badge-account","tags":["account / user","user badge","person badge"]},{"name":"mdi:badge-account-alert","tags":["account / user","alert / error","user badge alert","person badge alert","account badge warning","user badge warning","person badge warning"]},{"name":"mdi:badge-account-alert-outline","tags":["account / user","alert / error","user badge alert outline","person badge alert outline","account badge warning outline","user badge warning outline","person badge warning outline"]},{"name":"mdi:badge-account-horizontal","tags":["account / user"]},{"name":"mdi:badge-account-horizontal-outline","tags":["account / user"]},{"name":"mdi:badge-account-outline","tags":["account / user","user badge outline","person badge outline"]},{"name":"mdi:badminton","tags":["sport","shuttlecock"]},{"name":"mdi:bag-carry-on","tags":["transportation + flying","carry on luggage"]},{"name":"mdi:bag-carry-on-check","tags":["transportation + flying","carry on bag tick","carry on bag check"]},{"name":"mdi:bag-carry-on-off","tags":["transportation + flying","carry on luggage off"]},{"name":"mdi:bag-checked","tags":["transportation + flying","luggage"]},{"name":"mdi:bag-personal","tags":["transportation + flying","backpack"]},{"name":"mdi:bag-personal-off","tags":["transportation + flying","backpack off"]},{"name":"mdi:bag-personal-off-outline","tags":["transportation + flying","backpack off outline"]},{"name":"mdi:bag-personal-outline","tags":["transportation + flying","backpack outline"]},{"name":"mdi:bag-personal-plus","tags":["bag personal add","backpack add","backpack plus"]},{"name":"mdi:bag-personal-plus-outline","tags":["backpack plus outline","backpack add outline","bag personal add outline"]},{"name":"mdi:bag-personal-tag","tags":["property tag"]},{"name":"mdi:bag-personal-tag-outline","tags":["property tag outline"]},{"name":"mdi:bag-suitcase","tags":["transportation + flying"]},{"name":"mdi:bag-suitcase-off","tags":["transportation + flying"]},{"name":"mdi:bag-suitcase-off-outline","tags":["transportation + flying"]},{"name":"mdi:bag-suitcase-outline","tags":["transportation + flying"]},{"name":"mdi:baguette","tags":["food / drink","bread","bakery","french baguette","loaf"]},{"name":"mdi:balcony","tags":["home automation","terrace","patio","veranda"]},{"name":"mdi:balloon","tags":["holiday","party balloon"]},{"name":"mdi:ballot","tags":["vote"]},{"name":"mdi:ballot-outline","tags":["vote outline"]},{"name":"mdi:ballot-recount","tags":["vote recount"]},{"name":"mdi:ballot-recount-outline","tags":["vote recount outline"]},{"name":"mdi:bandage","tags":["band aid","plaster"]},{"name":"mdi:bank","tags":["banking","places","account balance","museum"]},{"name":"mdi:bank-check","tags":["banking"]},{"name":"mdi:bank-circle","tags":["banking"]},{"name":"mdi:bank-circle-outline","tags":["banking"]},{"name":"mdi:bank-minus","tags":["banking"]},{"name":"mdi:bank-off","tags":["banking"]},{"name":"mdi:bank-off-outline","tags":["banking"]},{"name":"mdi:bank-outline","tags":["banking","museum outline"]},{"name":"mdi:bank-plus","tags":["banking","bank add"]},{"name":"mdi:bank-remove","tags":["banking"]},{"name":"mdi:bank-transfer","tags":["banking"]},{"name":"mdi:bank-transfer-in","tags":["banking"]},{"name":"mdi:bank-transfer-out","tags":["banking"]},{"name":"mdi:barcode","tags":[]},{"name":"mdi:barcode-off","tags":[]},{"name":"mdi:barcode-scan","tags":["barcode scanner"]},{"name":"mdi:barley","tags":["agriculture","food / drink","grain","wheat","gluten"]},{"name":"mdi:barley-off","tags":["agriculture","gluten free","grain off","wheat off"]},{"name":"mdi:barn","tags":["agriculture","farm"]},{"name":"mdi:barrel","tags":["oil barrel","energy","fossil fuel"]},{"name":"mdi:barrel-outline","tags":["oil barrel outline","fossil fuel outline","energy outline"]},{"name":"mdi:baseball","tags":["sport"]},{"name":"mdi:baseball-bat","tags":["sport"]},{"name":"mdi:baseball-diamond","tags":["sport"]},{"name":"mdi:baseball-diamond-outline","tags":["sport"]},{"name":"mdi:baseball-outline","tags":["sport"]},{"name":"mdi:bash","tags":["developer / languages"]},{"name":"mdi:basket","tags":["shopping","shopping basket","skip"]},{"name":"mdi:basket-check","tags":["shopping"]},{"name":"mdi:basket-check-outline","tags":["shopping"]},{"name":"mdi:basket-fill","tags":["shopping","skip fill"]},{"name":"mdi:basket-minus","tags":["shopping","shopping basket minus","skip minus"]},{"name":"mdi:basket-minus-outline","tags":["shopping","shopping basket minus outline","skip minus outline"]},{"name":"mdi:basket-off","tags":["shopping","shopping basket off","skip off"]},{"name":"mdi:basket-off-outline","tags":["shopping","shopping basket off outline","skip off outline"]},{"name":"mdi:basket-outline","tags":["shopping","shopping basket outline","skip outline"]},{"name":"mdi:basket-plus","tags":["shopping","shopping basket plus","skip plus"]},{"name":"mdi:basket-plus-outline","tags":["shopping","shopping basket plus outline","skip plus outline"]},{"name":"mdi:basket-remove","tags":["shopping","shopping basket remove","skip remove"]},{"name":"mdi:basket-remove-outline","tags":["shopping","shopping basket remove outline","skip remove outline"]},{"name":"mdi:basket-unfill","tags":["shopping"]},{"name":"mdi:basketball","tags":["sport","youtube sports"]},{"name":"mdi:basketball-hoop","tags":["sport"]},{"name":"mdi:basketball-hoop-outline","tags":["sport"]},{"name":"mdi:bat","tags":["holiday","animal"]},{"name":"mdi:bathtub","tags":["home automation"]},{"name":"mdi:bathtub-outline","tags":["home automation"]},{"name":"mdi:battery","tags":["battery","home automation","automotive","battery full","battery std","battery 100"]},{"name":"mdi:battery-10","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-10-bluetooth","tags":["battery"]},{"name":"mdi:battery-20","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-20-bluetooth","tags":["battery"]},{"name":"mdi:battery-30","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-30-bluetooth","tags":["battery"]},{"name":"mdi:battery-40","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-40-bluetooth","tags":["battery"]},{"name":"mdi:battery-50","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-50-bluetooth","tags":["battery"]},{"name":"mdi:battery-60","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-60-bluetooth","tags":["battery"]},{"name":"mdi:battery-70","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-70-bluetooth","tags":["battery"]},{"name":"mdi:battery-80","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-80-bluetooth","tags":["battery"]},{"name":"mdi:battery-90","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-90-bluetooth","tags":["battery"]},{"name":"mdi:battery-alert","tags":["battery","home automation","alert / error","battery warning"]},{"name":"mdi:battery-alert-bluetooth","tags":["alert / error","battery","battery warning bluetooth"]},{"name":"mdi:battery-alert-variant","tags":["battery","alert / error"]},{"name":"mdi:battery-alert-variant-outline","tags":["battery","alert / error"]},{"name":"mdi:battery-arrow-down","tags":["battery"]},{"name":"mdi:battery-arrow-down-outline","tags":["battery"]},{"name":"mdi:battery-arrow-up","tags":["battery"]},{"name":"mdi:battery-arrow-up-outline","tags":["battery"]},{"name":"mdi:battery-bluetooth","tags":["battery","battery bluetooth 100","battery bluetooth full"]},{"name":"mdi:battery-bluetooth-variant","tags":["battery"]},{"name":"mdi:battery-charging","tags":["battery","home automation","automotive","battery charging full"]},{"name":"mdi:battery-charging-10","tags":["automotive","battery"]},{"name":"mdi:battery-charging-100","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-20","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-30","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-40","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-50","tags":["automotive","battery"]},{"name":"mdi:battery-charging-60","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-70","tags":["automotive","battery"]},{"name":"mdi:battery-charging-80","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-90","tags":["battery","home automation","automotive"]},{"name":"mdi:battery-charging-high","tags":["battery"]},{"name":"mdi:battery-charging-low","tags":["battery"]},{"name":"mdi:battery-charging-medium","tags":["battery"]},{"name":"mdi:battery-charging-outline","tags":["automotive","battery"]},{"name":"mdi:battery-charging-wireless","tags":["battery","home automation","battery charging wireless full","battery charging wireless 100"]},{"name":"mdi:battery-charging-wireless-10","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-20","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-30","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-40","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-50","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-60","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-70","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-80","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-90","tags":["battery","home automation"]},{"name":"mdi:battery-charging-wireless-alert","tags":["battery","home automation","alert / error","battery charging wireless warning"]},{"name":"mdi:battery-charging-wireless-outline","tags":["battery","home automation","battery charging wireless empty","battery charging wireless 0"]},{"name":"mdi:battery-check","tags":["battery"]},{"name":"mdi:battery-check-outline","tags":["battery"]},{"name":"mdi:battery-clock","tags":["battery","home automation","date / time","battery full clock","battery 100 clock"]},{"name":"mdi:battery-clock-outline","tags":["battery","home automation","date / time","batter 0 clock","battery empty clock"]},{"name":"mdi:battery-heart","tags":["battery"]},{"name":"mdi:battery-heart-outline","tags":["battery"]},{"name":"mdi:battery-heart-variant","tags":["battery"]},{"name":"mdi:battery-high","tags":["battery"]},{"name":"mdi:battery-lock","tags":["battery","lock"]},{"name":"mdi:battery-lock-open","tags":["battery","lock"]},{"name":"mdi:battery-low","tags":["battery"]},{"name":"mdi:battery-medium","tags":["battery"]},{"name":"mdi:battery-minus","tags":["battery"]},{"name":"mdi:battery-minus-outline","tags":["battery"]},{"name":"mdi:battery-minus-variant","tags":["battery","home automation"]},{"name":"mdi:battery-negative","tags":["battery","home automation"]},{"name":"mdi:battery-off","tags":["battery"]},{"name":"mdi:battery-off-outline","tags":["battery"]},{"name":"mdi:battery-outline","tags":["battery","home automation","automotive","battery 0","battery empty"]},{"name":"mdi:battery-plus","tags":["battery"]},{"name":"mdi:battery-plus-outline","tags":["battery"]},{"name":"mdi:battery-plus-variant","tags":["battery","home automation","battery saver","battery add"]},{"name":"mdi:battery-positive","tags":["battery","home automation"]},{"name":"mdi:battery-remove","tags":["battery"]},{"name":"mdi:battery-remove-outline","tags":["battery"]},{"name":"mdi:battery-sync","tags":["battery","battery saver","battery recycle","battery eco"]},{"name":"mdi:battery-sync-outline","tags":["battery","battery saver outline","battery eco outline","battery recycle outline"]},{"name":"mdi:battery-unknown","tags":["battery","home automation"]},{"name":"mdi:battery-unknown-bluetooth","tags":["battery"]},{"name":"mdi:beach","tags":["places","parasol"]},{"name":"mdi:beaker","tags":["science"]},{"name":"mdi:beaker-alert","tags":["alert / error","science"]},{"name":"mdi:beaker-alert-outline","tags":["alert / error","science"]},{"name":"mdi:beaker-check","tags":["science"]},{"name":"mdi:beaker-check-outline","tags":["science"]},{"name":"mdi:beaker-minus","tags":["science"]},{"name":"mdi:beaker-minus-outline","tags":["science"]},{"name":"mdi:beaker-outline","tags":["science"]},{"name":"mdi:beaker-plus","tags":["science"]},{"name":"mdi:beaker-plus-outline","tags":["science"]},{"name":"mdi:beaker-question","tags":["science"]},{"name":"mdi:beaker-question-outline","tags":["science"]},{"name":"mdi:beaker-remove","tags":["science"]},{"name":"mdi:beaker-remove-outline","tags":["science"]},{"name":"mdi:bed","tags":["home automation","holiday","hotel","guest room"]},{"name":"mdi:bed-clock","tags":["date / time","bed schedule","bed time","sleep schedule","sleep time"]},{"name":"mdi:bed-double","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-double-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:bed-empty","tags":["home automation","holiday"]},{"name":"mdi:bed-king","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-king-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:bed-outline","tags":["home automation","holiday","hotel outline","guest room outline"]},{"name":"mdi:bed-queen","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-queen-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:bed-single","tags":["home automation","holiday","bedroom"]},{"name":"mdi:bed-single-outline","tags":["home automation","holiday","bedroom outline"]},{"name":"mdi:bee","tags":["nature","agriculture","animal","fly","insect"]},{"name":"mdi:bee-flower","tags":["nature","agriculture","fly flower","nature"]},{"name":"mdi:beehive-off-outline","tags":["nature","agriculture"]},{"name":"mdi:beehive-outline","tags":["nature","agriculture","honey outline"]},{"name":"mdi:beekeeper","tags":["nature","agriculture","apiarists","apiculturists","honey farmer"]},{"name":"mdi:beer","tags":["food / drink","pint","pub","bar","drink","cup full"]},{"name":"mdi:beer-outline","tags":["food / drink","drink outline","cup full outline","pint outline","pub outline","bar outline"]},{"name":"mdi:bell","tags":["notification","home automation","music","notifications"]},{"name":"mdi:bell-alert","tags":["alert / error","notification","bell warning"]},{"name":"mdi:bell-alert-outline","tags":["alert / error","notification"]},{"name":"mdi:bell-badge","tags":["notification","bell notification"]},{"name":"mdi:bell-badge-outline","tags":["notification","bell notification outline"]},{"name":"mdi:bell-cancel","tags":["notification"]},{"name":"mdi:bell-cancel-outline","tags":["notification"]},{"name":"mdi:bell-check","tags":["notification"]},{"name":"mdi:bell-check-outline","tags":["notification"]},{"name":"mdi:bell-circle","tags":["notification"]},{"name":"mdi:bell-circle-outline","tags":["notification"]},{"name":"mdi:bell-cog","tags":["notification","settings","bell settings","notification settings"]},{"name":"mdi:bell-cog-outline","tags":["notification","settings","bell settings outline","notification settings outline"]},{"name":"mdi:bell-minus","tags":["notification"]},{"name":"mdi:bell-minus-outline","tags":["notification"]},{"name":"mdi:bell-off","tags":["notification","notifications off"]},{"name":"mdi:bell-off-outline","tags":["notification"]},{"name":"mdi:bell-outline","tags":["notification","music","home automation","notifications none"]},{"name":"mdi:bell-plus","tags":["notification","add alert","bell add"]},{"name":"mdi:bell-plus-outline","tags":["notification","bell add outline","add alert outline"]},{"name":"mdi:bell-remove","tags":["notification"]},{"name":"mdi:bell-remove-outline","tags":["notification"]},{"name":"mdi:bell-ring","tags":["notification","notifications active"]},{"name":"mdi:bell-ring-outline","tags":["notification"]},{"name":"mdi:bell-sleep","tags":["notification","notifications paused"]},{"name":"mdi:bell-sleep-outline","tags":["notification"]},{"name":"mdi:bench","tags":[]},{"name":"mdi:bench-back","tags":[]},{"name":"mdi:beta","tags":["alpha / numeric"]},{"name":"mdi:betamax","tags":[]},{"name":"mdi:biathlon","tags":["sport","people / family","human biathlon"]},{"name":"mdi:bicycle","tags":["transportation + other","sport","bike","cycling"]},{"name":"mdi:bicycle-basket","tags":["transportation + other","sport","bike basket"]},{"name":"mdi:bicycle-cargo","tags":["transportation + other","sport","bike cargo"]},{"name":"mdi:bicycle-electric","tags":["transportation + other","bike electric"]},{"name":"mdi:bicycle-penny-farthing","tags":["transportation + other","sport","bicycle high wheel","bicycle antique"]},{"name":"mdi:bike","tags":["transportation + other","sport","bicycle","cycling","directions bike"]},{"name":"mdi:bike-fast","tags":["transportation + other","sport","velocity"]},{"name":"mdi:bike-pedal","tags":["transportation + other","sport","bike pedal flat"]},{"name":"mdi:bike-pedal-clipless","tags":["transportation + other","sport"]},{"name":"mdi:bike-pedal-mountain","tags":["transportation + other","sport"]},{"name":"mdi:billboard","tags":[]},{"name":"mdi:billiards","tags":["sport","pool","eight ball"]},{"name":"mdi:billiards-rack","tags":["sport","pool table","pool rack","snooker rack","pool triangle","billiards triangle","snooker triangle"]},{"name":"mdi:binoculars","tags":[]},{"name":"mdi:bio","tags":[]},{"name":"mdi:biohazard","tags":["science"]},{"name":"mdi:bird","tags":["animal"]},{"name":"mdi:bitbucket","tags":["brand / logo"]},{"name":"mdi:bitcoin","tags":["brand / logo","banking","currency"]},{"name":"mdi:black-mesa","tags":["brand / logo","gaming / rpg"]},{"name":"mdi:blender","tags":["food / drink","home automation","food processor"]},{"name":"mdi:blender-outline","tags":["home automation","food / drink","food processor outline"]},{"name":"mdi:blender-software","tags":["brand / logo"]},{"name":"mdi:blinds","tags":["home automation","roller shade closed","window closed"]},{"name":"mdi:blinds-horizontal","tags":["home automation","blinds open","mini blinds","window open"]},{"name":"mdi:blinds-horizontal-closed","tags":["home automation","mini blinds","window closed"]},{"name":"mdi:blinds-open","tags":["home automation","roller shade open","window open"]},{"name":"mdi:blinds-vertical","tags":["home automation","window"]},{"name":"mdi:blinds-vertical-closed","tags":["home automation","window closed"]},{"name":"mdi:block-helper","tags":[]},{"name":"mdi:blood-bag","tags":["medical / hospital"]},{"name":"mdi:bluetooth","tags":[]},{"name":"mdi:bluetooth-audio","tags":["audio","bluetooth searching"]},{"name":"mdi:bluetooth-connect","tags":["bluetooth connected"]},{"name":"mdi:bluetooth-off","tags":["bluetooth disabled"]},{"name":"mdi:bluetooth-settings","tags":["settings","settings bluetooth"]},{"name":"mdi:bluetooth-transfer","tags":[]},{"name":"mdi:blur","tags":["blur on"]},{"name":"mdi:blur-linear","tags":[]},{"name":"mdi:blur-off","tags":[]},{"name":"mdi:blur-radial","tags":["blur circular"]},{"name":"mdi:bolt","tags":["hardware / tools"]},{"name":"mdi:bomb","tags":["gaming / rpg"]},{"name":"mdi:bomb-off","tags":["gaming / rpg"]},{"name":"mdi:bone","tags":["animal","holiday"]},{"name":"mdi:bone-off","tags":["animal","holiday"]},{"name":"mdi:book","tags":["git repository"]},{"name":"mdi:book-account","tags":["account / user"]},{"name":"mdi:book-account-outline","tags":["account / user"]},{"name":"mdi:book-alert","tags":["alert / error"]},{"name":"mdi:book-alert-outline","tags":["alert / error"]},{"name":"mdi:book-alphabet","tags":["dictionary"]},{"name":"mdi:book-arrow-down","tags":[]},{"name":"mdi:book-arrow-down-outline","tags":[]},{"name":"mdi:book-arrow-left","tags":[]},{"name":"mdi:book-arrow-left-outline","tags":[]},{"name":"mdi:book-arrow-right","tags":[]},{"name":"mdi:book-arrow-right-outline","tags":[]},{"name":"mdi:book-arrow-up","tags":[]},{"name":"mdi:book-arrow-up-outline","tags":[]},{"name":"mdi:book-cancel","tags":[]},{"name":"mdi:book-cancel-outline","tags":[]},{"name":"mdi:book-check","tags":[]},{"name":"mdi:book-check-outline","tags":[]},{"name":"mdi:book-clock","tags":["date / time","book schedule","book time"]},{"name":"mdi:book-clock-outline","tags":["date / time","book schedule","book time"]},{"name":"mdi:book-cog","tags":["settings","book settings"]},{"name":"mdi:book-cog-outline","tags":["settings","book settings outline"]},{"name":"mdi:book-cross","tags":["religion","bible"]},{"name":"mdi:book-edit","tags":["edit / modify"]},{"name":"mdi:book-edit-outline","tags":["edit / modify"]},{"name":"mdi:book-education","tags":[]},{"name":"mdi:book-education-outline","tags":[]},{"name":"mdi:book-heart","tags":["book favorite","book love"]},{"name":"mdi:book-heart-outline","tags":["book favorite outline","book love outline"]},{"name":"mdi:book-information-variant","tags":["encyclopedia"]},{"name":"mdi:book-lock","tags":["lock","book secure"]},{"name":"mdi:book-lock-open","tags":["lock","book unsecure"]},{"name":"mdi:book-lock-open-outline","tags":["lock"]},{"name":"mdi:book-lock-outline","tags":["lock","book secure outline"]},{"name":"mdi:book-marker","tags":["navigation","book location"]},{"name":"mdi:book-marker-outline","tags":["navigation","book location outline"]},{"name":"mdi:book-minus","tags":[]},{"name":"mdi:book-minus-multiple","tags":["books minus"]},{"name":"mdi:book-minus-multiple-outline","tags":[]},{"name":"mdi:book-minus-outline","tags":[]},{"name":"mdi:book-multiple","tags":["books"]},{"name":"mdi:book-multiple-outline","tags":[]},{"name":"mdi:book-music","tags":["audio","music","audio book"]},{"name":"mdi:book-music-outline","tags":["music"]},{"name":"mdi:book-off","tags":[]},{"name":"mdi:book-off-outline","tags":[]},{"name":"mdi:book-open","tags":["chrome reader mode"]},{"name":"mdi:book-open-blank-variant","tags":["import contacts"]},{"name":"mdi:book-open-blank-variant-outline","tags":[]},{"name":"mdi:book-open-outline","tags":[]},{"name":"mdi:book-open-page-variant","tags":["auto stories"]},{"name":"mdi:book-open-page-variant-outline","tags":[]},{"name":"mdi:book-open-variant","tags":[]},{"name":"mdi:book-open-variant-outline","tags":[]},{"name":"mdi:book-outline","tags":[]},{"name":"mdi:book-play","tags":[]},{"name":"mdi:book-play-outline","tags":[]},{"name":"mdi:book-plus","tags":["book add"]},{"name":"mdi:book-plus-multiple","tags":["books plus","book multiple add","books add"]},{"name":"mdi:book-plus-multiple-outline","tags":[]},{"name":"mdi:book-plus-outline","tags":[]},{"name":"mdi:book-refresh","tags":[]},{"name":"mdi:book-refresh-outline","tags":[]},{"name":"mdi:book-remove","tags":[]},{"name":"mdi:book-remove-multiple","tags":["books remove"]},{"name":"mdi:book-remove-multiple-outline","tags":[]},{"name":"mdi:book-remove-outline","tags":[]},{"name":"mdi:book-search","tags":[]},{"name":"mdi:book-search-outline","tags":[]},{"name":"mdi:book-settings","tags":["settings"]},{"name":"mdi:book-settings-outline","tags":["settings"]},{"name":"mdi:book-sync","tags":[]},{"name":"mdi:book-sync-outline","tags":[]},{"name":"mdi:book-variant","tags":["class"]},{"name":"mdi:bookmark","tags":["turned in"]},{"name":"mdi:bookmark-box","tags":[]},{"name":"mdi:bookmark-box-multiple","tags":["collections bookmark","library bookmark"]},{"name":"mdi:bookmark-box-multiple-outline","tags":["collections bookmark outline","library bookmark outline"]},{"name":"mdi:bookmark-box-outline","tags":[]},{"name":"mdi:bookmark-check","tags":["bookmark tick","bookmark success"]},{"name":"mdi:bookmark-check-outline","tags":["bookmark success outline"]},{"name":"mdi:bookmark-minus","tags":[]},{"name":"mdi:bookmark-minus-outline","tags":[]},{"name":"mdi:bookmark-multiple","tags":[]},{"name":"mdi:bookmark-multiple-outline","tags":[]},{"name":"mdi:bookmark-music","tags":["music"]},{"name":"mdi:bookmark-music-outline","tags":["music"]},{"name":"mdi:bookmark-off","tags":[]},{"name":"mdi:bookmark-off-outline","tags":[]},{"name":"mdi:bookmark-outline","tags":["bookmark border","turned in not"]},{"name":"mdi:bookmark-plus","tags":["bookmark add"]},{"name":"mdi:bookmark-plus-outline","tags":["bookmark add outline"]},{"name":"mdi:bookmark-remove","tags":[]},{"name":"mdi:bookmark-remove-outline","tags":[]},{"name":"mdi:bookshelf","tags":[]},{"name":"mdi:boom-gate","tags":["transportation + road","home automation","boom arm","boom barrier","arm barrier","barrier","automatic gate"]},{"name":"mdi:boom-gate-alert","tags":["alert / error","transportation + road","boom arm alert","boom barrier alert","arm barrier alert","barrier alert","automatic gate alert"]},{"name":"mdi:boom-gate-alert-outline","tags":["alert / error","transportation + road","boom arm alert outline","boom barrier alert outline","arm barrier alert outline","barrier alert outline","automatic gate alert outline"]},{"name":"mdi:boom-gate-arrow-down","tags":["transportation + road","boom arm down","boom barrier down","arm barrier down","barrier down","automatic gate down"]},{"name":"mdi:boom-gate-arrow-down-outline","tags":["transportation + road","boom arm down outline","boom barrier down outline","arm barrier down outline","barrier down outline","automatic gate down outline"]},{"name":"mdi:boom-gate-arrow-up","tags":["transportation + road","boom arm up","boom barrier up","arm barrier up","barrier up","automatic gate up"]},{"name":"mdi:boom-gate-arrow-up-outline","tags":["transportation + road","boom arm up outline","boom barrier up outline","arm barrier up outline","barrier up outline","automatic gate up outline"]},{"name":"mdi:boom-gate-outline","tags":["transportation + road","home automation","boom arm outline","boom barrier outline","arm barrier outline","barrier outline","automatic gate outline"]},{"name":"mdi:boom-gate-up","tags":["transportation + road","home automation","boom arm up","boom barrier up","arm barrier up","barrier up","automatic gate up"]},{"name":"mdi:boom-gate-up-outline","tags":["transportation + road","home automation","boom arm up outline","boom barrier up outline","arm barrier up outline","barrier up outline","automatic gate up outline"]},{"name":"mdi:boombox","tags":["home automation"]},{"name":"mdi:boomerang","tags":["gaming / rpg"]},{"name":"mdi:bootstrap","tags":["brand / logo","developer / languages"]},{"name":"mdi:border-all","tags":["text / content / format"]},{"name":"mdi:border-all-variant","tags":["text / content / format"]},{"name":"mdi:border-bottom","tags":["text / content / format"]},{"name":"mdi:border-bottom-variant","tags":["text / content / format"]},{"name":"mdi:border-color","tags":["color","text / content / format","border colour"]},{"name":"mdi:border-horizontal","tags":["text / content / format"]},{"name":"mdi:border-inside","tags":["text / content / format"]},{"name":"mdi:border-left","tags":["text / content / format"]},{"name":"mdi:border-left-variant","tags":["text / content / format"]},{"name":"mdi:border-none","tags":["text / content / format","border clear"]},{"name":"mdi:border-none-variant","tags":["text / content / format"]},{"name":"mdi:border-outside","tags":["text / content / format","border outer"]},{"name":"mdi:border-radius","tags":["text / content / format","border round corners"]},{"name":"mdi:border-right","tags":["text / content / format"]},{"name":"mdi:border-right-variant","tags":["text / content / format"]},{"name":"mdi:border-style","tags":["text / content / format"]},{"name":"mdi:border-top","tags":["text / content / format"]},{"name":"mdi:border-top-variant","tags":["text / content / format"]},{"name":"mdi:border-vertical","tags":["text / content / format"]},{"name":"mdi:bottle-soda","tags":["food / drink","bottle coke","bottle pop"]},{"name":"mdi:bottle-soda-classic","tags":["food / drink","bottle coke classic","bottle pop classic"]},{"name":"mdi:bottle-soda-classic-outline","tags":[]},{"name":"mdi:bottle-soda-outline","tags":["food / drink","bottle coke outline","bottle pop outline"]},{"name":"mdi:bottle-tonic","tags":["science","flask"]},{"name":"mdi:bottle-tonic-outline","tags":["science","flask outline"]},{"name":"mdi:bottle-tonic-plus","tags":["gaming / rpg","health potion"]},{"name":"mdi:bottle-tonic-plus-outline","tags":["gaming / rpg","health potion outline"]},{"name":"mdi:bottle-tonic-skull","tags":["gaming / rpg","holiday","poison","moonshine"]},{"name":"mdi:bottle-tonic-skull-outline","tags":["gaming / rpg","holiday","poison outline","moonshine outline"]},{"name":"mdi:bottle-wine","tags":["food / drink"]},{"name":"mdi:bottle-wine-outline","tags":["food / drink"]},{"name":"mdi:bow-arrow","tags":["gaming / rpg","sport"]},{"name":"mdi:bow-tie","tags":["clothing"]},{"name":"mdi:bowl","tags":["food / drink"]},{"name":"mdi:bowl-mix","tags":["food / drink","mixing bowl"]},{"name":"mdi:bowl-mix-outline","tags":["food / drink","mixing bowl outline"]},{"name":"mdi:bowl-outline","tags":["food / drink"]},{"name":"mdi:bowling","tags":["sport"]},{"name":"mdi:box","tags":["brand / logo"]},{"name":"mdi:box-cutter","tags":["hardware / tools","stanley knife"]},{"name":"mdi:box-cutter-off","tags":[]},{"name":"mdi:box-shadow","tags":[]},{"name":"mdi:boxing-glove","tags":["sport"]},{"name":"mdi:braille","tags":["touch reading","hand reading"]},{"name":"mdi:brain","tags":["medical / hospital"]},{"name":"mdi:bread-slice","tags":["food / drink"]},{"name":"mdi:bread-slice-outline","tags":["food / drink"]},{"name":"mdi:bridge","tags":["places"]},{"name":"mdi:briefcase","tags":["work"]},{"name":"mdi:briefcase-account","tags":["account / user","briefcase person","briefcase user"]},{"name":"mdi:briefcase-account-outline","tags":["account / user","briefcase person outline","briefcase user outline"]},{"name":"mdi:briefcase-arrow-left-right","tags":["briefcase transfer","briefcase exchange","briefcase swap"]},{"name":"mdi:briefcase-arrow-left-right-outline","tags":["briefcase exchange outline","briefcase transfer outline","briefcase swap outline"]},{"name":"mdi:briefcase-arrow-up-down","tags":["briefcase exchange","briefcase transfer","briefcase swap"]},{"name":"mdi:briefcase-arrow-up-down-outline","tags":["briefcase exchange outline","briefcase transfer outline","briefcase swap outline"]},{"name":"mdi:briefcase-check","tags":["briefcase tick"]},{"name":"mdi:briefcase-check-outline","tags":[]},{"name":"mdi:briefcase-clock","tags":["date / time"]},{"name":"mdi:briefcase-clock-outline","tags":["date / time"]},{"name":"mdi:briefcase-download","tags":[]},{"name":"mdi:briefcase-download-outline","tags":[]},{"name":"mdi:briefcase-edit","tags":["edit / modify"]},{"name":"mdi:briefcase-edit-outline","tags":["edit / modify"]},{"name":"mdi:briefcase-eye","tags":["briefcase view"]},{"name":"mdi:briefcase-eye-outline","tags":["briefcase view outline"]},{"name":"mdi:briefcase-minus","tags":[]},{"name":"mdi:briefcase-minus-outline","tags":[]},{"name":"mdi:briefcase-off","tags":[]},{"name":"mdi:briefcase-off-outline","tags":[]},{"name":"mdi:briefcase-outline","tags":["work outline"]},{"name":"mdi:briefcase-plus","tags":["briefcase add"]},{"name":"mdi:briefcase-plus-outline","tags":["briefcase add outline"]},{"name":"mdi:briefcase-remove","tags":[]},{"name":"mdi:briefcase-remove-outline","tags":[]},{"name":"mdi:briefcase-search","tags":[]},{"name":"mdi:briefcase-search-outline","tags":[]},{"name":"mdi:briefcase-upload","tags":[]},{"name":"mdi:briefcase-upload-outline","tags":[]},{"name":"mdi:briefcase-variant","tags":[]},{"name":"mdi:briefcase-variant-off","tags":[]},{"name":"mdi:briefcase-variant-off-outline","tags":[]},{"name":"mdi:briefcase-variant-outline","tags":[]},{"name":"mdi:brightness-1","tags":[]},{"name":"mdi:brightness-2","tags":[]},{"name":"mdi:brightness-3","tags":[]},{"name":"mdi:brightness-4","tags":["theme light dark"]},{"name":"mdi:brightness-5","tags":["brightness low"]},{"name":"mdi:brightness-6","tags":["brightness medium","theme light dark"]},{"name":"mdi:brightness-7","tags":["home automation","brightness high"]},{"name":"mdi:brightness-auto","tags":[]},{"name":"mdi:brightness-percent","tags":["shopping","discount","sale"]},{"name":"mdi:broadcast","tags":["weather","signal"]},{"name":"mdi:broadcast-off","tags":["weather","signal off"]},{"name":"mdi:broom","tags":[]},{"name":"mdi:brush","tags":["drawing / art","paintbrush"]},{"name":"mdi:brush-off","tags":[]},{"name":"mdi:brush-outline","tags":["drawing / art","paintbrush outline"]},{"name":"mdi:brush-variant","tags":["drawing / art","paintbrush"]},{"name":"mdi:bucket","tags":[]},{"name":"mdi:bucket-outline","tags":[]},{"name":"mdi:buffet","tags":["home automation","sideboard"]},{"name":"mdi:bug","tags":["nature","animal","bug report"]},{"name":"mdi:bug-check","tags":["animal","bug tick"]},{"name":"mdi:bug-check-outline","tags":["animal","bug tick outline"]},{"name":"mdi:bug-outline","tags":["nature","animal"]},{"name":"mdi:bug-pause","tags":[]},{"name":"mdi:bug-pause-outline","tags":[]},{"name":"mdi:bug-play","tags":["bug start"]},{"name":"mdi:bug-play-outline","tags":[]},{"name":"mdi:bug-stop","tags":[]},{"name":"mdi:bug-stop-outline","tags":[]},{"name":"mdi:bugle","tags":["automotive","music","car horn"]},{"name":"mdi:bulkhead-light","tags":["home automation"]},{"name":"mdi:bulldozer","tags":["hardware / tools"]},{"name":"mdi:bullet","tags":[]},{"name":"mdi:bulletin-board","tags":["notice board"]},{"name":"mdi:bullhorn","tags":["announcement","megaphone","loudspeaker"]},{"name":"mdi:bullhorn-outline","tags":["announcement outline","megaphone outline","loudspeaker outline"]},{"name":"mdi:bullhorn-variant","tags":["announcement","megaphone","loudspeaker"]},{"name":"mdi:bullhorn-variant-outline","tags":["announcement outline","megaphone outline","loudspeaker outline"]},{"name":"mdi:bullseye","tags":["sport","target"]},{"name":"mdi:bullseye-arrow","tags":["sport","target arrow"]},{"name":"mdi:bulma","tags":["developer / languages","brand / logo"]},{"name":"mdi:bunk-bed","tags":["home automation"]},{"name":"mdi:bunk-bed-outline","tags":["home automation"]},{"name":"mdi:bus","tags":["navigation","transportation + road","directions bus"]},{"name":"mdi:bus-alert","tags":["alert / error","transportation + road","bus warning"]},{"name":"mdi:bus-articulated-end","tags":["transportation + road"]},{"name":"mdi:bus-articulated-front","tags":["transportation + road"]},{"name":"mdi:bus-clock","tags":["date / time","transportation + road","departure board"]},{"name":"mdi:bus-double-decker","tags":["transportation + road"]},{"name":"mdi:bus-electric","tags":["transportation + road"]},{"name":"mdi:bus-marker","tags":["navigation","bus location","bus stop"]},{"name":"mdi:bus-multiple","tags":["transportation + road","fleet"]},{"name":"mdi:bus-school","tags":["transportation + road","education"]},{"name":"mdi:bus-side","tags":["transportation + road"]},{"name":"mdi:bus-sign","tags":[]},{"name":"mdi:bus-stop","tags":["transportation + road","navigation"]},{"name":"mdi:bus-stop-covered","tags":["transportation + road","navigation"]},{"name":"mdi:bus-stop-uncovered","tags":["transportation + road","navigation"]},{"name":"mdi:bus-wrench","tags":[]},{"name":"mdi:butterfly","tags":["nature","animal"]},{"name":"mdi:butterfly-outline","tags":["nature","animal"]},{"name":"mdi:button-cursor","tags":["form"]},{"name":"mdi:button-pointer","tags":["form"]},{"name":"mdi:cabin-a-frame","tags":["home automation"]},{"name":"mdi:cable-data","tags":[]},{"name":"mdi:cached","tags":["arrow","counterclockwise arrows","circular arrows","circle arrows","sync"]},{"name":"mdi:cactus","tags":["nature"]},{"name":"mdi:cake","tags":["holiday","food / drink","birthday cake"]},{"name":"mdi:cake-layered","tags":["holiday","food / drink","birthday cake"]},{"name":"mdi:cake-variant","tags":["holiday","food / drink","birthday cake"]},{"name":"mdi:cake-variant-outline","tags":["holiday","food / drink","birthday cake outline"]},{"name":"mdi:calculator","tags":["math"]},{"name":"mdi:calculator-variant","tags":["math"]},{"name":"mdi:calculator-variant-outline","tags":["math"]},{"name":"mdi:calendar","tags":["date / time","event","insert invitation"]},{"name":"mdi:calendar-account","tags":["date / time","account / user","calendar user"]},{"name":"mdi:calendar-account-outline","tags":["date / time","account / user","calendar user outline"]},{"name":"mdi:calendar-alert","tags":["date / time","alert / error","event alert","calendar warning"]},{"name":"mdi:calendar-alert-outline","tags":["date / time","alert / error"]},{"name":"mdi:calendar-arrow-left","tags":["date / time","reschedule"]},{"name":"mdi:calendar-arrow-right","tags":["date / time","reschedule"]},{"name":"mdi:calendar-badge","tags":["date / time"]},{"name":"mdi:calendar-badge-outline","tags":["date / time"]},{"name":"mdi:calendar-blank","tags":["date / time","calendar today"]},{"name":"mdi:calendar-blank-multiple","tags":["date / time"]},{"name":"mdi:calendar-blank-outline","tags":["date / time","event blank outline"]},{"name":"mdi:calendar-check","tags":["date / time","event available","calendar task","calendar tick","event tick","event check"]},{"name":"mdi:calendar-check-outline","tags":["date / time","event available outline","event check outline","event tick outline","calendar task outline","calendar tick outline"]},{"name":"mdi:calendar-clock","tags":["date / time","event clock","event time","calendar time"]},{"name":"mdi:calendar-clock-outline","tags":["date / time"]},{"name":"mdi:calendar-collapse-horizontal","tags":["date / time"]},{"name":"mdi:calendar-collapse-horizontal-outline","tags":["date / time"]},{"name":"mdi:calendar-cursor","tags":["date / time"]},{"name":"mdi:calendar-cursor-outline","tags":["date / time"]},{"name":"mdi:calendar-edit","tags":["date / time","edit / modify","event edit"]},{"name":"mdi:calendar-edit-outline","tags":["date / time","edit / modify"]},{"name":"mdi:calendar-end","tags":["date / time"]},{"name":"mdi:calendar-end-outline","tags":["date / time"]},{"name":"mdi:calendar-expand-horizontal","tags":["date / time"]},{"name":"mdi:calendar-expand-horizontal-outline","tags":["date / time"]},{"name":"mdi:calendar-export","tags":["date / time"]},{"name":"mdi:calendar-export-outline","tags":["date / time"]},{"name":"mdi:calendar-filter","tags":["date / time"]},{"name":"mdi:calendar-filter-outline","tags":["date / time","event week end outline"]},{"name":"mdi:calendar-heart","tags":["date / time","event heart"]},{"name":"mdi:calendar-heart-outline","tags":["date / time"]},{"name":"mdi:calendar-import","tags":["date / time"]},{"name":"mdi:calendar-import-outline","tags":["date / time"]},{"name":"mdi:calendar-lock","tags":["date / time","lock"]},{"name":"mdi:calendar-lock-open","tags":["lock","date / time"]},{"name":"mdi:calendar-lock-open-outline","tags":["lock","date / time"]},{"name":"mdi:calendar-lock-outline","tags":["date / time","lock"]},{"name":"mdi:calendar-minus","tags":["date / time","event minus"]},{"name":"mdi:calendar-minus-outline","tags":["date / time"]},{"name":"mdi:calendar-month","tags":["date / time"]},{"name":"mdi:calendar-month-outline","tags":["date / time"]},{"name":"mdi:calendar-multiple","tags":["date / time","event multiple","calendars","events"]},{"name":"mdi:calendar-multiple-check","tags":["date / time","event multiple check","calendar multiple tick","calendars check","calendars tick","event multiple tick","events check","events tick"]},{"name":"mdi:calendar-multiselect","tags":["date / time"]},{"name":"mdi:calendar-multiselect-outline","tags":["date / time"]},{"name":"mdi:calendar-outline","tags":["date / time","event outline"]},{"name":"mdi:calendar-plus","tags":["date / time","event plus","calendar add","event add"]},{"name":"mdi:calendar-plus-outline","tags":["date / time"]},{"name":"mdi:calendar-question","tags":["date / time","calendar rsvp","event question","calendar help"]},{"name":"mdi:calendar-question-outline","tags":["date / time","calendar help outline"]},{"name":"mdi:calendar-range","tags":["date / time","date range","calendar week","event range"]},{"name":"mdi:calendar-range-outline","tags":["date / time","event range outline"]},{"name":"mdi:calendar-refresh","tags":["date / time","calendar repeat"]},{"name":"mdi:calendar-refresh-outline","tags":["date / time","calendar repeat outline"]},{"name":"mdi:calendar-remove","tags":["date / time","event busy","event remove"]},{"name":"mdi:calendar-remove-outline","tags":["date / time","event busy outline","event remove outline"]},{"name":"mdi:calendar-search","tags":["date / time","event search"]},{"name":"mdi:calendar-search-outline","tags":["date / time"]},{"name":"mdi:calendar-star","tags":["date / time","event star","calendar favorite"]},{"name":"mdi:calendar-star-four-points","tags":["date / time","calendar auto","event star four points","event auto"]},{"name":"mdi:calendar-star-outline","tags":["date / time"]},{"name":"mdi:calendar-start","tags":["date / time"]},{"name":"mdi:calendar-start-outline","tags":["date / time"]},{"name":"mdi:calendar-sync","tags":["date / time","calendar repeat"]},{"name":"mdi:calendar-sync-outline","tags":["date / time","calendar repeat outline"]},{"name":"mdi:calendar-text","tags":["date / time","event note","event text"]},{"name":"mdi:calendar-text-outline","tags":["date / time","event text outline","event note outline"]},{"name":"mdi:calendar-today","tags":["date / time","calendar day"]},{"name":"mdi:calendar-today-outline","tags":["date / time","calendar day outline"]},{"name":"mdi:calendar-week","tags":["date / time","event week"]},{"name":"mdi:calendar-week-begin","tags":["date / time","event week begin"]},{"name":"mdi:calendar-week-begin-outline","tags":["date / time","event week begin outline"]},{"name":"mdi:calendar-week-outline","tags":["date / time","event week outline"]},{"name":"mdi:calendar-weekend","tags":["date / time"]},{"name":"mdi:calendar-weekend-outline","tags":["date / time"]},{"name":"mdi:call-made","tags":["cellphone / phone","arrow"]},{"name":"mdi:call-merge","tags":["cellphone / phone","arrow","merge type"]},{"name":"mdi:call-missed","tags":["cellphone / phone","arrow"]},{"name":"mdi:call-received","tags":["cellphone / phone","arrow"]},{"name":"mdi:call-split","tags":["cellphone / phone","arrow"]},{"name":"mdi:camcorder","tags":["video / movie"]},{"name":"mdi:camcorder-off","tags":["video / movie"]},{"name":"mdi:camera","tags":["photography","home automation","photography","camera alt","local see","photo camera"]},{"name":"mdi:camera-account","tags":["account / user","photography","camera user"]},{"name":"mdi:camera-burst","tags":["photography","burst mode"]},{"name":"mdi:camera-control","tags":["photography"]},{"name":"mdi:camera-document","tags":["photography","overhead projector"]},{"name":"mdi:camera-document-off","tags":["photography","overhead projector off"]},{"name":"mdi:camera-enhance","tags":["photography"]},{"name":"mdi:camera-enhance-outline","tags":["photography"]},{"name":"mdi:camera-flip","tags":["photography","camera sync","camera refresh"]},{"name":"mdi:camera-flip-outline","tags":["photography","camera sync outline","camera refresh outline"]},{"name":"mdi:camera-front","tags":["photography"]},{"name":"mdi:camera-front-variant","tags":["photography"]},{"name":"mdi:camera-gopro","tags":["photography","device / tech"]},{"name":"mdi:camera-image","tags":["photography"]},{"name":"mdi:camera-iris","tags":["photography"]},{"name":"mdi:camera-lock","tags":["photography","lock"]},{"name":"mdi:camera-lock-open","tags":["photography"]},{"name":"mdi:camera-lock-open-outline","tags":["photography"]},{"name":"mdi:camera-lock-outline","tags":["photography","lock"]},{"name":"mdi:camera-marker","tags":["photography","navigation","camera location"]},{"name":"mdi:camera-marker-outline","tags":["photography","navigation","camera location outline"]},{"name":"mdi:camera-metering-center","tags":["photography","camera metering centre"]},{"name":"mdi:camera-metering-matrix","tags":["photography"]},{"name":"mdi:camera-metering-partial","tags":["photography"]},{"name":"mdi:camera-metering-spot","tags":["photography"]},{"name":"mdi:camera-off","tags":["photography"]},{"name":"mdi:camera-off-outline","tags":["photography"]},{"name":"mdi:camera-outline","tags":["photography"]},{"name":"mdi:camera-party-mode","tags":["photography"]},{"name":"mdi:camera-plus","tags":["photography"]},{"name":"mdi:camera-plus-outline","tags":["photography"]},{"name":"mdi:camera-rear","tags":["photography"]},{"name":"mdi:camera-rear-variant","tags":["photography"]},{"name":"mdi:camera-retake","tags":["photography"]},{"name":"mdi:camera-retake-outline","tags":["photography"]},{"name":"mdi:camera-switch","tags":["photography","switch camera"]},{"name":"mdi:camera-switch-outline","tags":["photography"]},{"name":"mdi:camera-timer","tags":["date / time","photography"]},{"name":"mdi:camera-wireless","tags":["photography"]},{"name":"mdi:camera-wireless-outline","tags":["photography"]},{"name":"mdi:campfire","tags":[]},{"name":"mdi:cancel","tags":["prohibited","ban","do not disturb alt","denied","block","forbid","no","clear"]},{"name":"mdi:candelabra","tags":["home automation","holiday","candle","candelabrum"]},{"name":"mdi:candelabra-fire","tags":["home automation","holiday","candelabrum fire","candelabrum flame","candelabra flame","candle fire","candle flame"]},{"name":"mdi:candle","tags":["holiday","home automation","candle flame","candle fire"]},{"name":"mdi:candy","tags":["food / drink","treat","chocolate"]},{"name":"mdi:candy-off","tags":["food / drink","chocolate off","treat off"]},{"name":"mdi:candy-off-outline","tags":["food / drink","gaming / rpg","chocolate off outline","treat off outline","navi off"]},{"name":"mdi:candy-outline","tags":["food / drink","gaming / rpg","chocolate outline","treat outline","navi","hey listen","fairy"]},{"name":"mdi:candycane","tags":["holiday","food / drink"]},{"name":"mdi:cannabis","tags":["nature","medical / hospital","weed","pot","marijuana"]},{"name":"mdi:cannabis-off","tags":[]},{"name":"mdi:caps-lock","tags":["text / content / format"]},{"name":"mdi:car","tags":["transportation + road","navigation","automotive","directions car","drive eta","time to leave"]},{"name":"mdi:car-2-plus","tags":["transportation + road","automotive","hov lane","high occupancy vehicle lane","carpool lane"]},{"name":"mdi:car-3-plus","tags":["transportation + road","automotive","hov lane","high occupancy vehicle lane","carpool lane"]},{"name":"mdi:car-arrow-left","tags":["automotive","transportation + road"]},{"name":"mdi:car-arrow-right","tags":["automotive","transportation + road"]},{"name":"mdi:car-back","tags":["automotive","transportation + road"]},{"name":"mdi:car-battery","tags":["battery","automotive"]},{"name":"mdi:car-brake-abs","tags":["automotive","anti lock brake system","anti lock braking system"]},{"name":"mdi:car-brake-alert","tags":["automotive","alert / error","car parking brake","car handbrake","car hand brake","car emergency brake","car brake warning"]},{"name":"mdi:car-brake-fluid-level","tags":["automotive"]},{"name":"mdi:car-brake-hold","tags":["automotive"]},{"name":"mdi:car-brake-low-pressure","tags":["automotive"]},{"name":"mdi:car-brake-parking","tags":["automotive"]},{"name":"mdi:car-brake-retarder","tags":["automotive"]},{"name":"mdi:car-brake-temperature","tags":["automotive"]},{"name":"mdi:car-brake-worn-linings","tags":["automotive"]},{"name":"mdi:car-child-seat","tags":["automotive","people / family"]},{"name":"mdi:car-clock","tags":["date / time","automotive"]},{"name":"mdi:car-clutch","tags":["automotive"]},{"name":"mdi:car-cog","tags":["automotive","settings","transportation + road","car settings"]},{"name":"mdi:car-connected","tags":["transportation + road","automotive"]},{"name":"mdi:car-convertible","tags":["transportation + road","automotive"]},{"name":"mdi:car-coolant-level","tags":["automotive"]},{"name":"mdi:car-cruise-control","tags":["automotive"]},{"name":"mdi:car-defrost-front","tags":["automotive"]},{"name":"mdi:car-defrost-rear","tags":["automotive"]},{"name":"mdi:car-door","tags":["automotive"]},{"name":"mdi:car-door-lock","tags":["automotive","lock"]},{"name":"mdi:car-door-lock-open","tags":["automotive","lock"]},{"name":"mdi:car-electric","tags":["transportation + road","automotive"]},{"name":"mdi:car-electric-outline","tags":["transportation + road","automotive"]},{"name":"mdi:car-emergency","tags":["transportation + road","automotive","car police"]},{"name":"mdi:car-esp","tags":["automotive","electronic stability program"]},{"name":"mdi:car-estate","tags":["transportation + road","automotive","car suv","car sports utility vehicle"]},{"name":"mdi:car-hatchback","tags":["transportation + road","automotive"]},{"name":"mdi:car-info","tags":["automotive"]},{"name":"mdi:car-key","tags":["transportation + road","automotive","car rental","rent a car"]},{"name":"mdi:car-lifted-pickup","tags":["automotive","agriculture"]},{"name":"mdi:car-light-alert","tags":["alert / error","automotive"]},{"name":"mdi:car-light-dimmed","tags":["automotive","head light dimmed","low beam"]},{"name":"mdi:car-light-fog","tags":["automotive","head light fog"]},{"name":"mdi:car-light-high","tags":["automotive","head light high","high beam"]},{"name":"mdi:car-limousine","tags":["transportation + road","automotive"]},{"name":"mdi:car-multiple","tags":["transportation + road","automotive"]},{"name":"mdi:car-off","tags":["automotive"]},{"name":"mdi:car-outline","tags":["automotive"]},{"name":"mdi:car-parking-lights","tags":["automotive"]},{"name":"mdi:car-pickup","tags":["transportation + road","automotive","agriculture","truck pickup"]},{"name":"mdi:car-search","tags":["automotive","car find"]},{"name":"mdi:car-search-outline","tags":["automotive","car find outline"]},{"name":"mdi:car-seat","tags":["automotive"]},{"name":"mdi:car-seat-cooler","tags":["automotive"]},{"name":"mdi:car-seat-heater","tags":["automotive"]},{"name":"mdi:car-select","tags":["automotive","car location"]},{"name":"mdi:car-settings","tags":["automotive","settings"]},{"name":"mdi:car-shift-pattern","tags":["automotive","car transmission","car manual transmission"]},{"name":"mdi:car-side","tags":["transportation + road","automotive","car saloon"]},{"name":"mdi:car-speed-limiter","tags":["automotive"]},{"name":"mdi:car-sports","tags":["transportation + road","sport","automotive"]},{"name":"mdi:car-tire-alert","tags":["automotive","alert / error","car tyre alert","car tyre warning","car tire warning"]},{"name":"mdi:car-traction-control","tags":["automotive"]},{"name":"mdi:car-turbocharger","tags":["automotive"]},{"name":"mdi:car-wash","tags":["transportation + road","places","automotive","local car wash"]},{"name":"mdi:car-windshield","tags":["automotive","car front glass"]},{"name":"mdi:car-windshield-outline","tags":["automotive","car front glass outline"]},{"name":"mdi:car-wireless","tags":["automotive","car autonomous","car self driving","car smart"]},{"name":"mdi:car-wrench","tags":["automotive","hardware / tools","car repair","mechanic"]},{"name":"mdi:carabiner","tags":["sport","karabiner","rock climbing"]},{"name":"mdi:caravan","tags":["transportation + road","home automation","automotive","holiday","camping"]},{"name":"mdi:card","tags":["form","button"]},{"name":"mdi:card-account-details","tags":["account / user","identification card","user card details","id card","person card details","drivers license","business card"]},{"name":"mdi:card-account-details-outline","tags":["account / user","identification card outline","user card details outline","id card outline","person card details outline","drivers license outline","business card outline"]},{"name":"mdi:card-account-details-star","tags":["account / user","card account details favorite"]},{"name":"mdi:card-account-details-star-outline","tags":["account / user","card account details favorite outline"]},{"name":"mdi:card-account-mail","tags":["account / user","contact mail"]},{"name":"mdi:card-account-mail-outline","tags":["account / user","contact mail outline"]},{"name":"mdi:card-account-phone","tags":["account / user","contact phone"]},{"name":"mdi:card-account-phone-outline","tags":["account / user","contact phone outline"]},{"name":"mdi:card-bulleted","tags":[]},{"name":"mdi:card-bulleted-off","tags":[]},{"name":"mdi:card-bulleted-off-outline","tags":[]},{"name":"mdi:card-bulleted-outline","tags":[]},{"name":"mdi:card-bulleted-settings","tags":["settings"]},{"name":"mdi:card-bulleted-settings-outline","tags":["settings"]},{"name":"mdi:card-minus","tags":[]},{"name":"mdi:card-minus-outline","tags":[]},{"name":"mdi:card-multiple","tags":[]},{"name":"mdi:card-multiple-outline","tags":[]},{"name":"mdi:card-off","tags":[]},{"name":"mdi:card-off-outline","tags":[]},{"name":"mdi:card-outline","tags":["form","button outline"]},{"name":"mdi:card-plus","tags":[]},{"name":"mdi:card-plus-outline","tags":[]},{"name":"mdi:card-remove","tags":[]},{"name":"mdi:card-remove-outline","tags":[]},{"name":"mdi:card-search","tags":["pageview"]},{"name":"mdi:card-search-outline","tags":["pageview outline"]},{"name":"mdi:card-text","tags":[]},{"name":"mdi:card-text-outline","tags":[]},{"name":"mdi:cards","tags":["gaming / rpg"]},{"name":"mdi:cards-club","tags":["gaming / rpg","suit clubs","poker club"]},{"name":"mdi:cards-club-outline","tags":[]},{"name":"mdi:cards-diamond","tags":["gaming / rpg","transportation + road","suit diamonds","hov lane","high occupancy vehicle lane","carpool lane","poker diamond"]},{"name":"mdi:cards-diamond-outline","tags":["transportation + road","hov lane outline","high occupancy vehicle lane outline","carpool lane outline","poker diamond outline"]},{"name":"mdi:cards-heart","tags":["gaming / rpg","suit hearts","poker heart"]},{"name":"mdi:cards-heart-outline","tags":[]},{"name":"mdi:cards-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-club-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-diamond-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-heart-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade-multiple","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-playing-spade-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-spade","tags":["gaming / rpg","suit spades","poker spade"]},{"name":"mdi:cards-spade-outline","tags":["gaming / rpg"]},{"name":"mdi:cards-variant","tags":["gaming / rpg"]},{"name":"mdi:carrot","tags":["agriculture","food / drink"]},{"name":"mdi:cart","tags":["shopping","trolley","local grocery store","shopping cart"]},{"name":"mdi:cart-arrow-down","tags":["shopping","shopping cart arrow down","trolley arrow down"]},{"name":"mdi:cart-arrow-right","tags":["shopping","trolley arrow right","shopping cart arrow right"]},{"name":"mdi:cart-arrow-up","tags":["shopping","shopping cart arrow up","trolley arrow up"]},{"name":"mdi:cart-check","tags":["shopping"]},{"name":"mdi:cart-heart","tags":["shopping","cart favorite","shopping favorite"]},{"name":"mdi:cart-minus","tags":["shopping","shopping cart minus","trolley minus"]},{"name":"mdi:cart-off","tags":["shopping","trolley off","remove shopping cart","shopping cart off"]},{"name":"mdi:cart-outline","tags":["shopping","trolley outline","shopping cart outline"]},{"name":"mdi:cart-percent","tags":["shopping","cart discount","cart sale","trolley percent"]},{"name":"mdi:cart-plus","tags":["shopping","trolley plus","add shopping cart","shopping cart plus","cart add","trolley add","shopping cart add"]},{"name":"mdi:cart-remove","tags":["shopping","trolley remove","shopping cart remove"]},{"name":"mdi:cart-variant","tags":["shopping"]},{"name":"mdi:case-sensitive-alt","tags":[]},{"name":"mdi:cash","tags":["currency","banking","shopping","money"]},{"name":"mdi:cash-100","tags":["currency","banking","money 100"]},{"name":"mdi:cash-check","tags":["currency","banking"]},{"name":"mdi:cash-clock","tags":["banking","currency","date / time","cash schedule","payment schedule","payment clock","auto pay"]},{"name":"mdi:cash-edit","tags":["banking"]},{"name":"mdi:cash-fast","tags":["currency","banking","instant deposit","instant transfer","instant cash"]},{"name":"mdi:cash-lock","tags":["lock","currency","banking"]},{"name":"mdi:cash-lock-open","tags":["lock","currency","banking"]},{"name":"mdi:cash-marker","tags":["banking","currency","navigation","cod","cash on delivery","cash location"]},{"name":"mdi:cash-minus","tags":["currency","banking"]},{"name":"mdi:cash-multiple","tags":["currency","banking","money"]},{"name":"mdi:cash-off","tags":["currency","banking"]},{"name":"mdi:cash-plus","tags":["currency","banking"]},{"name":"mdi:cash-refund","tags":["banking","currency","cash return","cash chargeback"]},{"name":"mdi:cash-register","tags":["shopping","banking","till"]},{"name":"mdi:cash-remove","tags":["currency","banking"]},{"name":"mdi:cash-sync","tags":["banking","currency","auto pay","recurring payment","scheduled payment","cash cycle"]},{"name":"mdi:cassette","tags":["music","tape"]},{"name":"mdi:cast","tags":["home automation"]},{"name":"mdi:cast-audio","tags":["audio","cast speaker"]},{"name":"mdi:cast-audio-variant","tags":["apple airplay"]},{"name":"mdi:cast-connected","tags":["home automation"]},{"name":"mdi:cast-education","tags":["cast school","school online","cast tutorial"]},{"name":"mdi:cast-off","tags":["home automation"]},{"name":"mdi:cast-variant","tags":["home automation","apple","airplay"]},{"name":"mdi:castle","tags":["places"]},{"name":"mdi:cat","tags":["animal","holiday","emoji cat","emoticon cat"]},{"name":"mdi:cctv","tags":["home automation","closed circuit television","security camera"]},{"name":"mdi:cctv-off","tags":["home automation","closed circuit television off","security camera off"]},{"name":"mdi:ceiling-fan","tags":["home automation"]},{"name":"mdi:ceiling-fan-light","tags":["home automation","ceiling fan on"]},{"name":"mdi:ceiling-light","tags":["home automation","ceiling lamp"]},{"name":"mdi:ceiling-light-multiple","tags":["home automation","ceiling lamp multiple"]},{"name":"mdi:ceiling-light-multiple-outline","tags":["home automation","ceiling lamp multiple outline"]},{"name":"mdi:ceiling-light-outline","tags":["home automation"]},{"name":"mdi:cellphone","tags":["cellphone / phone","device / tech","mobile phone","smartphone","stay current portrait","stay primary portrait"]},{"name":"mdi:cellphone-arrow-down","tags":["cellphone / phone","device / tech","cellphone system update","mobile phone arrow down","smartphone arrow down"]},{"name":"mdi:cellphone-arrow-down-variant","tags":["cellphone / phone","cellphone download"]},{"name":"mdi:cellphone-basic","tags":["cellphone / phone","device / tech","mobile phone basic"]},{"name":"mdi:cellphone-charging","tags":["cellphone / phone"]},{"name":"mdi:cellphone-check","tags":["cellphone / phone"]},{"name":"mdi:cellphone-cog","tags":["settings","cellphone / phone","device / tech","phonelink setup","mobile phone settings variant","smartphone settings variant"]},{"name":"mdi:cellphone-dock","tags":["cellphone / phone","device / tech","mobile phone dock","smartphone dock"]},{"name":"mdi:cellphone-information","tags":["cellphone / phone","mobile phone information","smartphone information"]},{"name":"mdi:cellphone-key","tags":["cellphone / phone","device / tech","mobile phone key","smartphone key"]},{"name":"mdi:cellphone-link","tags":["cellphone / phone","device / tech","mobile phone link","smartphone link","devices"]},{"name":"mdi:cellphone-link-off","tags":["cellphone / phone","device / tech","mobile phone link off","smartphone link off","phonelink off"]},{"name":"mdi:cellphone-lock","tags":["cellphone / phone","lock","device / tech","phonelink lock","mobile phone lock","smartphone lock"]},{"name":"mdi:cellphone-marker","tags":["cellphone / phone","navigation","cellphone location","cellphone map","find my phone","cellphone gps"]},{"name":"mdi:cellphone-message","tags":["cellphone / phone","device / tech","mobile phone message","smartphone message"]},{"name":"mdi:cellphone-message-off","tags":["cellphone / phone"]},{"name":"mdi:cellphone-nfc","tags":["automotive","cellphone / phone","device / tech"]},{"name":"mdi:cellphone-nfc-off","tags":["cellphone / phone"]},{"name":"mdi:cellphone-off","tags":["cellphone / phone","device / tech","mobile phone off","smartphone off","mobile off"]},{"name":"mdi:cellphone-play","tags":["cellphone / phone"]},{"name":"mdi:cellphone-remove","tags":["cellphone / phone","device / tech","phonelink erase","mobile phone erase","smartphone erase","cellphone erase"]},{"name":"mdi:cellphone-screenshot","tags":["cellphone / phone","device / tech"]},{"name":"mdi:cellphone-settings","tags":["cellphone / phone","settings","device / tech","mobile phone settings","smartphone settings","settings cell"]},{"name":"mdi:cellphone-sound","tags":["cellphone / phone","device / tech","phonelink ring","mobile phone sound","smartphone sound"]},{"name":"mdi:cellphone-text","tags":["cellphone / phone","device / tech","mobile phone text","smartphone text"]},{"name":"mdi:cellphone-wireless","tags":["cellphone / phone","device / tech","mobile phone wireless","smartphone wireless"]},{"name":"mdi:centos","tags":["brand / logo"]},{"name":"mdi:certificate","tags":["diploma","seal"]},{"name":"mdi:certificate-outline","tags":["diploma outline","seal outline"]},{"name":"mdi:chair-rolling","tags":["home automation","office chair","study chair"]},{"name":"mdi:chair-school","tags":["desk","education","learn"]},{"name":"mdi:chandelier","tags":["home automation","ceiling light","girandole","candelabra lamp","suspended light"]},{"name":"mdi:charity","tags":["super chat for good"]},{"name":"mdi:charity-search","tags":[]},{"name":"mdi:chart-arc","tags":["math","report arc","widget arc"]},{"name":"mdi:chart-areaspline","tags":["math","report areaspline","widget areaspline","graph areaspline"]},{"name":"mdi:chart-areaspline-variant","tags":["math","report areaspline variant","widget areaspline variant","graph areaspline variant"]},{"name":"mdi:chart-bar","tags":["math","report bar","widget bar","graph bar"]},{"name":"mdi:chart-bar-stacked","tags":["math","report bar stacked","widget bar stacked","graph bar stacked"]},{"name":"mdi:chart-bell-curve","tags":["math","report bell curve","widget bell curve","graph bell curve"]},{"name":"mdi:chart-bell-curve-cumulative","tags":["math","report bell curve cumulative","widget bell curve cumulative","graph bell curve cumulative"]},{"name":"mdi:chart-box","tags":["math","poll box","report box","widget box","graph box"]},{"name":"mdi:chart-box-multiple","tags":["math","poll box multiple","graph box multiple","widget box multiple","report box multiple"]},{"name":"mdi:chart-box-multiple-outline","tags":["math","graph box multiple outline","widget box multiple outline","report box multiple outline","poll box multiple outline"]},{"name":"mdi:chart-box-outline","tags":["math","poll box outline","report box outline","widget box outline","graph box outline"]},{"name":"mdi:chart-box-plus-outline","tags":["math","report box plus outline","widget box plus outline","graph box plus outline"]},{"name":"mdi:chart-bubble","tags":["math","bubble chart","report bubble","widget bubble"]},{"name":"mdi:chart-donut","tags":["math","chart doughnut","data usage","report donut","widget donut"]},{"name":"mdi:chart-donut-variant","tags":["math","chart doughnut variant","report donut variant","widget donut variant"]},{"name":"mdi:chart-gantt","tags":["math","report gantt","timeline","widget gantt","roadmap"]},{"name":"mdi:chart-histogram","tags":["math","report histogram","widget histogram","graph histogram"]},{"name":"mdi:chart-line","tags":["math","report line","widget line","graph line"]},{"name":"mdi:chart-line-stacked","tags":["math","report line stacked","widget line stacked","graph line stacked"]},{"name":"mdi:chart-line-variant","tags":["math","show chart","report line variant","widget line variant","graph line variant"]},{"name":"mdi:chart-multiline","tags":["math","report multiline","widget multiline","graph multiline"]},{"name":"mdi:chart-multiple","tags":["math","report multiple","widget multiple","graph multiple"]},{"name":"mdi:chart-pie","tags":["math","report pie","widget pie","graph pie"]},{"name":"mdi:chart-pie-outline","tags":["math","report pie outline","widget pie outline","graph pie outline"]},{"name":"mdi:chart-ppf","tags":["math","chart production possibility frontier","report ppf","widget ppf","graph ppf"]},{"name":"mdi:chart-sankey","tags":["math","chart snakey","report sankey","widget sankey","graph sankey"]},{"name":"mdi:chart-sankey-variant","tags":["math","chart snakey variant","report sankey variant","widget sankey variant","graph sankey variant"]},{"name":"mdi:chart-scatter-plot","tags":["math","report scatter plot","widget scatter plot","graph scatter plot"]},{"name":"mdi:chart-scatter-plot-hexbin","tags":["math","chart scatterplot hexbin","report scatter plot hexbin","widget scatter plot hexbin","graph scatter plot hexbin"]},{"name":"mdi:chart-timeline","tags":["math","report timeline","widget timeline","graph timeline","roadmap"]},{"name":"mdi:chart-timeline-variant","tags":["math","report timeline variant","widget timeline variant","graph timeline variant","report line","widget line","graph line"]},{"name":"mdi:chart-timeline-variant-shimmer","tags":["math","report timeline variant shimmer","widget timeline variant shimmer","graph timeline variant shimmer","report line shimmer","widget line shimmer","graph line shimmer"]},{"name":"mdi:chart-tree","tags":["math","report tree","widget tree"]},{"name":"mdi:chart-waterfall","tags":["math"]},{"name":"mdi:chat","tags":["message","message bubble","speak"]},{"name":"mdi:chat-alert","tags":["alert / error","chat warning"]},{"name":"mdi:chat-alert-outline","tags":["alert / error"]},{"name":"mdi:chat-minus","tags":[]},{"name":"mdi:chat-minus-outline","tags":[]},{"name":"mdi:chat-outline","tags":["message outline","message bubble outline","speak outline"]},{"name":"mdi:chat-plus","tags":[]},{"name":"mdi:chat-plus-outline","tags":[]},{"name":"mdi:chat-processing","tags":["chat typing"]},{"name":"mdi:chat-processing-outline","tags":["chat typing outline"]},{"name":"mdi:chat-question","tags":["chat help"]},{"name":"mdi:chat-question-outline","tags":["chat help outline"]},{"name":"mdi:chat-remove","tags":[]},{"name":"mdi:chat-remove-outline","tags":[]},{"name":"mdi:chat-sleep","tags":[]},{"name":"mdi:chat-sleep-outline","tags":[]},{"name":"mdi:check","tags":["form","tick","done","success"]},{"name":"mdi:check-all","tags":["tick all","done all","check multiple","checks","ticks"]},{"name":"mdi:check-bold","tags":["check thick","success thick","success bold"]},{"name":"mdi:check-circle","tags":["form","tick circle","success circle"]},{"name":"mdi:check-circle-outline","tags":["form","tick circle outline","success circle outline"]},{"name":"mdi:check-decagram","tags":["verified","decagram check","approve","approval","tick decagram"]},{"name":"mdi:check-decagram-outline","tags":["approve","approval","verified"]},{"name":"mdi:check-network","tags":["tick network"]},{"name":"mdi:check-network-outline","tags":["tick network outline"]},{"name":"mdi:check-outline","tags":["done outline","tick outline","sucess outline"]},{"name":"mdi:check-underline","tags":[]},{"name":"mdi:check-underline-circle","tags":[]},{"name":"mdi:check-underline-circle-outline","tags":[]},{"name":"mdi:checkbook","tags":["banking","chequebook","cheque book"]},{"name":"mdi:checkbook-arrow-left","tags":["banking","chequebook arrow left"]},{"name":"mdi:checkbook-arrow-right","tags":["banking","chequebook arrow right"]},{"name":"mdi:checkbox-blank","tags":["form"]},{"name":"mdi:checkbox-blank-badge","tags":["notification","form","checkbox blank notification","app notification","app badge"]},{"name":"mdi:checkbox-blank-badge-outline","tags":["notification","form","checkbox blank notification outline","app notification outline","app badge outline"]},{"name":"mdi:checkbox-blank-circle","tags":["form"]},{"name":"mdi:checkbox-blank-circle-outline","tags":["form"]},{"name":"mdi:checkbox-blank-off","tags":["form"]},{"name":"mdi:checkbox-blank-off-outline","tags":["form"]},{"name":"mdi:checkbox-blank-outline","tags":["form","check box outline blank","maximize"]},{"name":"mdi:checkbox-intermediate","tags":["form","checkbox indeterminate"]},{"name":"mdi:checkbox-intermediate-variant","tags":["form","checkbox indeterminate variant"]},{"name":"mdi:checkbox-marked","tags":["form","check box"]},{"name":"mdi:checkbox-marked-circle","tags":["form"]},{"name":"mdi:checkbox-marked-circle-auto-outline","tags":["form","task auto","todo auto"]},{"name":"mdi:checkbox-marked-circle-minus-outline","tags":["form","todo minus","task minus"]},{"name":"mdi:checkbox-marked-circle-outline","tags":["form"]},{"name":"mdi:checkbox-marked-circle-plus-outline","tags":["form","task plus","task add","todo plus","todo add"]},{"name":"mdi:checkbox-marked-outline","tags":["form"]},{"name":"mdi:checkbox-multiple-blank","tags":["form","checkboxes blank"]},{"name":"mdi:checkbox-multiple-blank-circle","tags":["form","checkboxes blank circle"]},{"name":"mdi:checkbox-multiple-blank-circle-outline","tags":["form","checkboxes blank circle outline"]},{"name":"mdi:checkbox-multiple-blank-outline","tags":["form","checkboxes blank outline"]},{"name":"mdi:checkbox-multiple-marked","tags":["form","checkboxes marked"]},{"name":"mdi:checkbox-multiple-marked-circle","tags":["form","checkboxes marked circle"]},{"name":"mdi:checkbox-multiple-marked-circle-outline","tags":["form","checkboxes marked circle outline"]},{"name":"mdi:checkbox-multiple-marked-outline","tags":["form","checkboxes marked outline"]},{"name":"mdi:checkbox-multiple-outline","tags":["form","check boxes outline","tick box multiple outline"]},{"name":"mdi:checkbox-outline","tags":["form"]},{"name":"mdi:checkerboard","tags":["gaming / rpg","geographic information system","raster"]},{"name":"mdi:checkerboard-minus","tags":["geographic information system","raster minus"]},{"name":"mdi:checkerboard-plus","tags":["geographic information system","raster plus"]},{"name":"mdi:checkerboard-remove","tags":["geographic information system","raster remove"]},{"name":"mdi:cheese","tags":["food / drink","swiss cheese"]},{"name":"mdi:cheese-off","tags":["food / drink"]},{"name":"mdi:chef-hat","tags":["clothing","toque","cook"]},{"name":"mdi:chemical-weapon","tags":[]},{"name":"mdi:chess-bishop","tags":["gaming / rpg"]},{"name":"mdi:chess-king","tags":["gaming / rpg","crown","royalty"]},{"name":"mdi:chess-knight","tags":["gaming / rpg","chess horse"]},{"name":"mdi:chess-pawn","tags":["gaming / rpg"]},{"name":"mdi:chess-queen","tags":["gaming / rpg","crown","royalty"]},{"name":"mdi:chess-rook","tags":["gaming / rpg","chess castle","chess tower"]},{"name":"mdi:chevron-double-down","tags":["arrow"]},{"name":"mdi:chevron-double-left","tags":["arrow"]},{"name":"mdi:chevron-double-right","tags":["arrow"]},{"name":"mdi:chevron-double-up","tags":["arrow"]},{"name":"mdi:chevron-down","tags":["arrow","expand more","keyboard arrow down"]},{"name":"mdi:chevron-down-box","tags":["form","arrow"]},{"name":"mdi:chevron-down-box-outline","tags":["form","arrow"]},{"name":"mdi:chevron-down-circle","tags":["arrow"]},{"name":"mdi:chevron-down-circle-outline","tags":["arrow"]},{"name":"mdi:chevron-left","tags":["arrow","keyboard arrow left","navigate before"]},{"name":"mdi:chevron-left-box","tags":["arrow"]},{"name":"mdi:chevron-left-box-outline","tags":["arrow"]},{"name":"mdi:chevron-left-circle","tags":["arrow"]},{"name":"mdi:chevron-left-circle-outline","tags":["arrow"]},{"name":"mdi:chevron-right","tags":["arrow","keyboard arrow right","navigate next"]},{"name":"mdi:chevron-right-box","tags":["arrow"]},{"name":"mdi:chevron-right-box-outline","tags":["arrow"]},{"name":"mdi:chevron-right-circle","tags":["arrow"]},{"name":"mdi:chevron-right-circle-outline","tags":["arrow"]},{"name":"mdi:chevron-triple-down","tags":[]},{"name":"mdi:chevron-triple-left","tags":[]},{"name":"mdi:chevron-triple-right","tags":[]},{"name":"mdi:chevron-triple-up","tags":["rank"]},{"name":"mdi:chevron-up","tags":["arrow","math","expand less","keyboard arrow up","caret"]},{"name":"mdi:chevron-up-box","tags":["arrow"]},{"name":"mdi:chevron-up-box-outline","tags":["arrow"]},{"name":"mdi:chevron-up-circle","tags":["arrow"]},{"name":"mdi:chevron-up-circle-outline","tags":["arrow"]},{"name":"mdi:chili-alert","tags":["alert / error"]},{"name":"mdi:chili-alert-outline","tags":["alert / error"]},{"name":"mdi:chili-hot","tags":["food / drink","chilli hot","pepper","spicy"]},{"name":"mdi:chili-hot-outline","tags":[]},{"name":"mdi:chili-medium","tags":["food / drink","chilli medium","pepper","spicy"]},{"name":"mdi:chili-medium-outline","tags":[]},{"name":"mdi:chili-mild","tags":["food / drink","agriculture","chilli mild","pepper","spicy"]},{"name":"mdi:chili-mild-outline","tags":[]},{"name":"mdi:chili-off","tags":["food / drink","chilli off","pepper off","spicy off"]},{"name":"mdi:chili-off-outline","tags":[]},{"name":"mdi:chip","tags":["integrated circuit"]},{"name":"mdi:church","tags":["religion","places"]},{"name":"mdi:church-outline","tags":["places","religion"]},{"name":"mdi:cigar","tags":[]},{"name":"mdi:cigar-off","tags":[]},{"name":"mdi:circle","tags":["shape","lens"]},{"name":"mdi:circle-box","tags":[]},{"name":"mdi:circle-box-outline","tags":[]},{"name":"mdi:circle-double","tags":["shape"]},{"name":"mdi:circle-edit-outline","tags":["edit / modify"]},{"name":"mdi:circle-expand","tags":[]},{"name":"mdi:circle-half","tags":["shape","brightness half"]},{"name":"mdi:circle-half-full","tags":["shape"]},{"name":"mdi:circle-medium","tags":[]},{"name":"mdi:circle-multiple","tags":["currency","banking","coins"]},{"name":"mdi:circle-multiple-outline","tags":["currency","banking","toll","coins outline"]},{"name":"mdi:circle-off-outline","tags":["null off"]},{"name":"mdi:circle-opacity","tags":["shape","drawing / art","circle transparent"]},{"name":"mdi:circle-outline","tags":["shape","null"]},{"name":"mdi:circle-slice-1","tags":[]},{"name":"mdi:circle-slice-2","tags":[]},{"name":"mdi:circle-slice-3","tags":[]},{"name":"mdi:circle-slice-4","tags":[]},{"name":"mdi:circle-slice-5","tags":[]},{"name":"mdi:circle-slice-6","tags":[]},{"name":"mdi:circle-slice-7","tags":[]},{"name":"mdi:circle-slice-8","tags":[]},{"name":"mdi:circle-small","tags":["math","bullet","multiplication","dot"]},{"name":"mdi:circular-saw","tags":["hardware / tools"]},{"name":"mdi:city","tags":["places","location city"]},{"name":"mdi:city-switch","tags":["places","city swap"]},{"name":"mdi:city-variant","tags":["places"]},{"name":"mdi:city-variant-outline","tags":["places"]},{"name":"mdi:clipboard","tags":[]},{"name":"mdi:clipboard-account","tags":["account / user","clipboard user","assignment ind","clipboard person"]},{"name":"mdi:clipboard-account-outline","tags":["account / user","clipboard user outline","clipboard person outline","assignment ind outline"]},{"name":"mdi:clipboard-alert","tags":["alert / error","clipboard warning","assignment late"]},{"name":"mdi:clipboard-alert-outline","tags":["alert / error","clipboard warning outline"]},{"name":"mdi:clipboard-arrow-down","tags":["assignment returned","clipboard arrow bottom"]},{"name":"mdi:clipboard-arrow-down-outline","tags":["assignment returned outline","clipboard arrow bottom outline"]},{"name":"mdi:clipboard-arrow-left","tags":["assignment return"]},{"name":"mdi:clipboard-arrow-left-outline","tags":[]},{"name":"mdi:clipboard-arrow-right","tags":[]},{"name":"mdi:clipboard-arrow-right-outline","tags":[]},{"name":"mdi:clipboard-arrow-up","tags":["clipboard arrow top"]},{"name":"mdi:clipboard-arrow-up-outline","tags":["clipboard arrow top outline"]},{"name":"mdi:clipboard-check","tags":["assignment turned in","clipboard tick"]},{"name":"mdi:clipboard-check-multiple","tags":[]},{"name":"mdi:clipboard-check-multiple-outline","tags":[]},{"name":"mdi:clipboard-check-outline","tags":["clipboard tick outline"]},{"name":"mdi:clipboard-clock","tags":["date / time"]},{"name":"mdi:clipboard-clock-outline","tags":["date / time"]},{"name":"mdi:clipboard-edit","tags":["edit / modify"]},{"name":"mdi:clipboard-edit-outline","tags":["edit / modify"]},{"name":"mdi:clipboard-file","tags":["files / folders"]},{"name":"mdi:clipboard-file-outline","tags":["files / folders"]},{"name":"mdi:clipboard-flow","tags":[]},{"name":"mdi:clipboard-flow-outline","tags":[]},{"name":"mdi:clipboard-list","tags":[]},{"name":"mdi:clipboard-list-outline","tags":[]},{"name":"mdi:clipboard-minus","tags":[]},{"name":"mdi:clipboard-minus-outline","tags":[]},{"name":"mdi:clipboard-multiple","tags":[]},{"name":"mdi:clipboard-multiple-outline","tags":[]},{"name":"mdi:clipboard-off","tags":[]},{"name":"mdi:clipboard-off-outline","tags":[]},{"name":"mdi:clipboard-outline","tags":[]},{"name":"mdi:clipboard-play","tags":[]},{"name":"mdi:clipboard-play-multiple","tags":[]},{"name":"mdi:clipboard-play-multiple-outline","tags":[]},{"name":"mdi:clipboard-play-outline","tags":[]},{"name":"mdi:clipboard-plus","tags":["clipboard add"]},{"name":"mdi:clipboard-plus-outline","tags":[]},{"name":"mdi:clipboard-pulse","tags":["medical / hospital","clipboard vitals"]},{"name":"mdi:clipboard-pulse-outline","tags":["medical / hospital","clipboard vitals outline"]},{"name":"mdi:clipboard-remove","tags":[]},{"name":"mdi:clipboard-remove-outline","tags":[]},{"name":"mdi:clipboard-search","tags":[]},{"name":"mdi:clipboard-search-outline","tags":[]},{"name":"mdi:clipboard-text","tags":["assignment"]},{"name":"mdi:clipboard-text-clock","tags":["date / time","clipboard text date","clipboard text time","clipboard text history"]},{"name":"mdi:clipboard-text-clock-outline","tags":["date / time","clipboard text date outline","clipboard text time outline","clipboard text history outline"]},{"name":"mdi:clipboard-text-multiple","tags":[]},{"name":"mdi:clipboard-text-multiple-outline","tags":[]},{"name":"mdi:clipboard-text-off","tags":[]},{"name":"mdi:clipboard-text-off-outline","tags":[]},{"name":"mdi:clipboard-text-outline","tags":[]},{"name":"mdi:clipboard-text-play","tags":[]},{"name":"mdi:clipboard-text-play-outline","tags":[]},{"name":"mdi:clipboard-text-search","tags":[]},{"name":"mdi:clipboard-text-search-outline","tags":[]},{"name":"mdi:clippy","tags":[]},{"name":"mdi:clock","tags":["date / time","watch later"]},{"name":"mdi:clock-alert","tags":["date / time","alert / error","clock warning"]},{"name":"mdi:clock-alert-outline","tags":["date / time","alert / error","clock warning"]},{"name":"mdi:clock-check","tags":["date / time"]},{"name":"mdi:clock-check-outline","tags":["date / time"]},{"name":"mdi:clock-digital","tags":["date / time","home automation"]},{"name":"mdi:clock-edit","tags":["date / time","edit / modify"]},{"name":"mdi:clock-edit-outline","tags":["date / time","edit / modify"]},{"name":"mdi:clock-end","tags":["date / time"]},{"name":"mdi:clock-fast","tags":["date / time","velocity"]},{"name":"mdi:clock-in","tags":["date / time"]},{"name":"mdi:clock-minus","tags":["date / time"]},{"name":"mdi:clock-minus-outline","tags":["date / time"]},{"name":"mdi:clock-out","tags":["date / time"]},{"name":"mdi:clock-outline","tags":["date / time","access time","query builder","schedule"]},{"name":"mdi:clock-plus","tags":["date / time"]},{"name":"mdi:clock-plus-outline","tags":["date / time"]},{"name":"mdi:clock-remove","tags":["date / time"]},{"name":"mdi:clock-remove-outline","tags":["date / time"]},{"name":"mdi:clock-star-four-points","tags":["date / time","clock auto"]},{"name":"mdi:clock-star-four-points-outline","tags":["date / time","clock auto outline"]},{"name":"mdi:clock-start","tags":["date / time"]},{"name":"mdi:clock-time-eight","tags":["date / time"]},{"name":"mdi:clock-time-eight-outline","tags":["date / time"]},{"name":"mdi:clock-time-eleven","tags":["date / time"]},{"name":"mdi:clock-time-eleven-outline","tags":["date / time"]},{"name":"mdi:clock-time-five","tags":["date / time"]},{"name":"mdi:clock-time-five-outline","tags":["date / time"]},{"name":"mdi:clock-time-four","tags":["date / time"]},{"name":"mdi:clock-time-four-outline","tags":["date / time"]},{"name":"mdi:clock-time-nine","tags":["date / time"]},{"name":"mdi:clock-time-nine-outline","tags":["date / time"]},{"name":"mdi:clock-time-one","tags":["date / time"]},{"name":"mdi:clock-time-one-outline","tags":["date / time"]},{"name":"mdi:clock-time-seven","tags":["date / time"]},{"name":"mdi:clock-time-seven-outline","tags":["date / time"]},{"name":"mdi:clock-time-six","tags":["date / time"]},{"name":"mdi:clock-time-six-outline","tags":["date / time"]},{"name":"mdi:clock-time-ten","tags":["date / time"]},{"name":"mdi:clock-time-ten-outline","tags":["date / time"]},{"name":"mdi:clock-time-three","tags":["date / time"]},{"name":"mdi:clock-time-three-outline","tags":["date / time"]},{"name":"mdi:clock-time-twelve","tags":["date / time"]},{"name":"mdi:clock-time-twelve-outline","tags":["date / time"]},{"name":"mdi:clock-time-two","tags":["date / time"]},{"name":"mdi:clock-time-two-outline","tags":["date / time"]},{"name":"mdi:close","tags":["math","form","clear","multiply","remove","cancel","times"]},{"name":"mdi:close-box","tags":["math","form","multiply box","clear box","cancel box","remove box"]},{"name":"mdi:close-box-multiple","tags":["form","close boxes","library remove","library close","multiply boxes","multiply box multiple","cancel box multiple","remove box multiple"]},{"name":"mdi:close-box-multiple-outline","tags":["form","close boxes outline","library remove outline","library close outline","multiply boxes outline","multiply box multiple outline","remove box multiple","cancel box multiple"]},{"name":"mdi:close-box-outline","tags":["math","form","multiply box outline","clear box outline","remove box outline","cancel box outline"]},{"name":"mdi:close-circle","tags":["form","remove circle","cancel circle","multiply circle","clear circle"]},{"name":"mdi:close-circle-multiple","tags":["form","remove circle multiple","coins close","coins remove","clear circle multiple","multiply circle multiple"]},{"name":"mdi:close-circle-multiple-outline","tags":["form","remove circle multiple outline","coins close outline","coins remove outline","cancel circle multiple outline","multiply circle multiple outline","clear circle multiple outline"]},{"name":"mdi:close-circle-outline","tags":["form","highlight off","multiply circle outline","remove circle outline","clear circle outline","cancel circle outline"]},{"name":"mdi:close-network","tags":["remove network","cancel network","multiply network","clear network"]},{"name":"mdi:close-network-outline","tags":["remove network outline","cancel network outline","multiply network outline","clear network outline"]},{"name":"mdi:close-octagon","tags":["dangerous","multiply octagon","remove octagon","cancel octagon","clear octagon","stop remove"]},{"name":"mdi:close-octagon-outline","tags":["remove octagon outline","multiply octagon outline","clear octagon outline","cancel octagon outline","stop remove outline"]},{"name":"mdi:close-outline","tags":["remove outline","cancel outline","multiply outline","clear outline"]},{"name":"mdi:close-thick","tags":["close bold","remove thick","remove bold","multiply thick","multiply bold","clear thick","clear bold","cancel thick","cancel bold"]},{"name":"mdi:closed-caption","tags":["cc"]},{"name":"mdi:closed-caption-outline","tags":["cc outline"]},{"name":"mdi:cloud","tags":["cloud","weather","wb cloudy"]},{"name":"mdi:cloud-alert","tags":["alert / error","cloud","weather","cloud warning"]},{"name":"mdi:cloud-alert-outline","tags":["alert / error","weather","cloud"]},{"name":"mdi:cloud-arrow-down","tags":["cloud","weather"]},{"name":"mdi:cloud-arrow-down-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-arrow-left","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-left-outline","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-right","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-right-outline","tags":["weather","cloud"]},{"name":"mdi:cloud-arrow-up","tags":["cloud","weather"]},{"name":"mdi:cloud-arrow-up-outline","tags":["weather","cloud"]},{"name":"mdi:cloud-braces","tags":["cloud","developer / languages","cloud json"]},{"name":"mdi:cloud-cancel","tags":["cloud","weather"]},{"name":"mdi:cloud-cancel-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-check","tags":["cloud","weather"]},{"name":"mdi:cloud-check-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-check-variant","tags":["cloud","weather","cloud done","cloud tick"]},{"name":"mdi:cloud-check-variant-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-circle","tags":["cloud","weather"]},{"name":"mdi:cloud-circle-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-clock","tags":["weather","cloud"]},{"name":"mdi:cloud-clock-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-cog","tags":["cloud","weather"]},{"name":"mdi:cloud-cog-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-download","tags":["cloud","weather"]},{"name":"mdi:cloud-download-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-key","tags":["cloud","cloud security","cloud access"]},{"name":"mdi:cloud-key-outline","tags":["cloud","cloud security outline","cloud access outline"]},{"name":"mdi:cloud-lock","tags":["cloud","lock"]},{"name":"mdi:cloud-lock-open","tags":["cloud"]},{"name":"mdi:cloud-lock-open-outline","tags":["cloud"]},{"name":"mdi:cloud-lock-outline","tags":["cloud","lock"]},{"name":"mdi:cloud-minus","tags":["cloud"]},{"name":"mdi:cloud-minus-outline","tags":["cloud"]},{"name":"mdi:cloud-off","tags":["cloud","weather"]},{"name":"mdi:cloud-off-outline","tags":["cloud","weather","offline","local"]},{"name":"mdi:cloud-outline","tags":["cloud","weather","cloud queue"]},{"name":"mdi:cloud-percent","tags":["weather","cloud","nature","humidity","rain chance","cloud discount"]},{"name":"mdi:cloud-percent-outline","tags":["weather","cloud","nature","cloud discount outline","humidity outline","rain chance outline"]},{"name":"mdi:cloud-plus","tags":["cloud"]},{"name":"mdi:cloud-plus-outline","tags":["cloud"]},{"name":"mdi:cloud-print","tags":["cloud","printer","home automation"]},{"name":"mdi:cloud-print-outline","tags":["cloud","printer","home automation"]},{"name":"mdi:cloud-question","tags":["cloud","weather"]},{"name":"mdi:cloud-question-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh-variant","tags":["cloud","weather"]},{"name":"mdi:cloud-refresh-variant-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-remove","tags":["cloud"]},{"name":"mdi:cloud-remove-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-search","tags":["cloud","weather"]},{"name":"mdi:cloud-search-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-sync","tags":["cloud","weather"]},{"name":"mdi:cloud-sync-outline","tags":["cloud","weather"]},{"name":"mdi:cloud-tags","tags":["cloud","cloud xml"]},{"name":"mdi:cloud-upload","tags":["cloud","weather","backup"]},{"name":"mdi:cloud-upload-outline","tags":["cloud","weather","backup outline"]},{"name":"mdi:clouds","tags":["weather","cloud"]},{"name":"mdi:clover","tags":["nature","luck"]},{"name":"mdi:clover-outline","tags":["nature","luck outline"]},{"name":"mdi:coach-lamp","tags":["home automation","coach light","carriage lamp","carriage light"]},{"name":"mdi:coach-lamp-variant","tags":["home automation","coach light","carriage light","carriage lamp"]},{"name":"mdi:coat-rack","tags":["home automation","clothing","foyer","hallway","entry room"]},{"name":"mdi:code-array","tags":["developer / languages"]},{"name":"mdi:code-block-braces","tags":["developer / languages","code block tag","code block json"]},{"name":"mdi:code-block-brackets","tags":["developer / languages","code block square"]},{"name":"mdi:code-block-parentheses","tags":["developer / languages"]},{"name":"mdi:code-block-tags","tags":["developer / languages","code block html","code block xml"]},{"name":"mdi:code-braces","tags":["developer / languages","math","set"]},{"name":"mdi:code-braces-box","tags":["developer / languages"]},{"name":"mdi:code-brackets","tags":["developer / languages","math","square brackets"]},{"name":"mdi:code-equal","tags":["developer / languages"]},{"name":"mdi:code-greater-than","tags":["developer / languages","math"]},{"name":"mdi:code-greater-than-or-equal","tags":["developer / languages","math"]},{"name":"mdi:code-json","tags":["developer / languages"]},{"name":"mdi:code-less-than","tags":["developer / languages","math"]},{"name":"mdi:code-less-than-or-equal","tags":["developer / languages","math"]},{"name":"mdi:code-not-equal","tags":["developer / languages"]},{"name":"mdi:code-not-equal-variant","tags":["developer / languages"]},{"name":"mdi:code-parentheses","tags":["developer / languages"]},{"name":"mdi:code-parentheses-box","tags":["developer / languages"]},{"name":"mdi:code-string","tags":["developer / languages"]},{"name":"mdi:code-tags","tags":["developer / languages"]},{"name":"mdi:code-tags-check","tags":["developer / languages","code tags tick"]},{"name":"mdi:codepen","tags":["brand / logo","developer / languages"]},{"name":"mdi:coffee","tags":["food / drink","tea","cup","free breakfast","local cafe","drink"]},{"name":"mdi:coffee-maker","tags":["home automation","food / drink","espresso maker","coffee machine","espresso machine"]},{"name":"mdi:coffee-maker-check","tags":["home automation","food / drink","coffee maker done","coffee maker complete"]},{"name":"mdi:coffee-maker-check-outline","tags":["home automation","food / drink","coffee maker complete outline","coffee maker done outline"]},{"name":"mdi:coffee-maker-outline","tags":["home automation"]},{"name":"mdi:coffee-off","tags":["food / drink","drink off","tea off","cup off","free breakfast off","local cafe off"]},{"name":"mdi:coffee-off-outline","tags":["food / drink","drink off outline","cup off outline","tea off outline","free breakfast off outline","local cafe off outline"]},{"name":"mdi:coffee-outline","tags":["food / drink","tea outline","cup outline","drink outline","free breakfast outline","local cafe outline"]},{"name":"mdi:coffee-to-go","tags":["food / drink","tea to go","drink to go","cup to go","free breakfast to go","local cafe to go"]},{"name":"mdi:coffee-to-go-outline","tags":["food / drink","tea to go outline","cup to go outline","drink to go outline","free breakfast to go outline","local cafe to go outline"]},{"name":"mdi:coffin","tags":["holiday","death","dead"]},{"name":"mdi:cog","tags":["settings","settings","gear"]},{"name":"mdi:cog-box","tags":["settings","gear box","settings applications","settings box"]},{"name":"mdi:cog-clockwise","tags":["settings"]},{"name":"mdi:cog-counterclockwise","tags":["settings"]},{"name":"mdi:cog-off","tags":["settings","settings off"]},{"name":"mdi:cog-off-outline","tags":["settings","settings off outline"]},{"name":"mdi:cog-outline","tags":["settings","gear outline","settings outline"]},{"name":"mdi:cog-pause","tags":["settings","settings pause","gear pause"]},{"name":"mdi:cog-pause-outline","tags":["settings","settings pause outline","gear pause outline"]},{"name":"mdi:cog-play","tags":["settings","settings play","gear play"]},{"name":"mdi:cog-play-outline","tags":["settings","settings play outline","gear play outline"]},{"name":"mdi:cog-refresh","tags":["settings","settings refresh"]},{"name":"mdi:cog-refresh-outline","tags":["settings","settings refresh outline"]},{"name":"mdi:cog-stop","tags":["settings","settings stop","gear stop"]},{"name":"mdi:cog-stop-outline","tags":["settings","settings stop outline","gear stop outline"]},{"name":"mdi:cog-sync","tags":["settings","settings sync"]},{"name":"mdi:cog-sync-outline","tags":["settings","settings sync outline"]},{"name":"mdi:cog-transfer","tags":["settings","settings transfer"]},{"name":"mdi:cog-transfer-outline","tags":["settings","settings transfer outline"]},{"name":"mdi:cogs","tags":["settings","settings","manufacturing"]},{"name":"mdi:collage","tags":["auto awesome mosaic"]},{"name":"mdi:collapse-all","tags":["animation minus"]},{"name":"mdi:collapse-all-outline","tags":["animation minus outline"]},{"name":"mdi:color-helper","tags":["text / content / format","color","colour helper"]},{"name":"mdi:comma","tags":[]},{"name":"mdi:comma-box","tags":[]},{"name":"mdi:comma-box-outline","tags":[]},{"name":"mdi:comma-circle","tags":[]},{"name":"mdi:comma-circle-outline","tags":[]},{"name":"mdi:comment","tags":[]},{"name":"mdi:comment-account","tags":["account / user","comment user","comment person"]},{"name":"mdi:comment-account-outline","tags":["account / user","comment user outline","comment person outline"]},{"name":"mdi:comment-alert","tags":["alert / error","comment warning"]},{"name":"mdi:comment-alert-outline","tags":["alert / error","comment warning outline"]},{"name":"mdi:comment-arrow-left","tags":["comment previous"]},{"name":"mdi:comment-arrow-left-outline","tags":["comment previous outline"]},{"name":"mdi:comment-arrow-right","tags":["comment next"]},{"name":"mdi:comment-arrow-right-outline","tags":["comment next outline"]},{"name":"mdi:comment-bookmark","tags":[]},{"name":"mdi:comment-bookmark-outline","tags":[]},{"name":"mdi:comment-check","tags":["comment tick"]},{"name":"mdi:comment-check-outline","tags":["comment tick outline"]},{"name":"mdi:comment-edit","tags":["edit / modify"]},{"name":"mdi:comment-edit-outline","tags":["edit / modify"]},{"name":"mdi:comment-eye","tags":[]},{"name":"mdi:comment-eye-outline","tags":[]},{"name":"mdi:comment-flash","tags":["comment quick"]},{"name":"mdi:comment-flash-outline","tags":["comment quick outline"]},{"name":"mdi:comment-minus","tags":[]},{"name":"mdi:comment-minus-outline","tags":[]},{"name":"mdi:comment-multiple","tags":["comments"]},{"name":"mdi:comment-multiple-outline","tags":["comments outline"]},{"name":"mdi:comment-off","tags":[]},{"name":"mdi:comment-off-outline","tags":[]},{"name":"mdi:comment-outline","tags":[]},{"name":"mdi:comment-plus","tags":["comment add"]},{"name":"mdi:comment-plus-outline","tags":["comment add outline"]},{"name":"mdi:comment-processing","tags":[]},{"name":"mdi:comment-processing-outline","tags":[]},{"name":"mdi:comment-question","tags":["comment help"]},{"name":"mdi:comment-question-outline","tags":["comment help outline"]},{"name":"mdi:comment-quote","tags":["feedback"]},{"name":"mdi:comment-quote-outline","tags":["feedback outline"]},{"name":"mdi:comment-remove","tags":[]},{"name":"mdi:comment-remove-outline","tags":[]},{"name":"mdi:comment-search","tags":[]},{"name":"mdi:comment-search-outline","tags":[]},{"name":"mdi:comment-text","tags":[]},{"name":"mdi:comment-text-multiple","tags":["comments text"]},{"name":"mdi:comment-text-multiple-outline","tags":["comments text outline"]},{"name":"mdi:comment-text-outline","tags":[]},{"name":"mdi:compare","tags":["theme light dark"]},{"name":"mdi:compare-horizontal","tags":["arrow"]},{"name":"mdi:compare-remove","tags":[]},{"name":"mdi:compare-vertical","tags":["arrow"]},{"name":"mdi:compass","tags":["navigation","geographic information system","explore"]},{"name":"mdi:compass-off","tags":["geographic information system","navigation"]},{"name":"mdi:compass-off-outline","tags":["geographic information system","navigation"]},{"name":"mdi:compass-outline","tags":["navigation","geographic information system"]},{"name":"mdi:compass-rose","tags":["navigation"]},{"name":"mdi:compost","tags":["agriculture","nature","regeneration","regenerative agriculture"]},{"name":"mdi:cone","tags":["shape"]},{"name":"mdi:cone-off","tags":["shape"]},{"name":"mdi:connection","tags":["home automation","plug"]},{"name":"mdi:console","tags":["terminal"]},{"name":"mdi:console-line","tags":["terminal line"]},{"name":"mdi:console-network","tags":["terminal network"]},{"name":"mdi:console-network-outline","tags":["terminal network outline"]},{"name":"mdi:consolidate","tags":[]},{"name":"mdi:contactless-payment","tags":["currency"]},{"name":"mdi:contactless-payment-circle","tags":["currency"]},{"name":"mdi:contactless-payment-circle-outline","tags":["currency"]},{"name":"mdi:contacts","tags":[]},{"name":"mdi:contacts-outline","tags":[]},{"name":"mdi:contain","tags":[]},{"name":"mdi:contain-end","tags":[]},{"name":"mdi:contain-start","tags":[]},{"name":"mdi:content-copy","tags":["text / content / format"]},{"name":"mdi:content-cut","tags":["health / beauty","text / content / format","scissors","clip"]},{"name":"mdi:content-duplicate","tags":[]},{"name":"mdi:content-paste","tags":["text / content / format"]},{"name":"mdi:content-save","tags":["floppy disc","floppy disk"]},{"name":"mdi:content-save-alert","tags":["alert / error","floppy disc alert"]},{"name":"mdi:content-save-alert-outline","tags":["alert / error","floppy disc alert outline"]},{"name":"mdi:content-save-all","tags":["floppy disc multiple"]},{"name":"mdi:content-save-all-outline","tags":["floppy disc multiple outline"]},{"name":"mdi:content-save-check","tags":[]},{"name":"mdi:content-save-check-outline","tags":[]},{"name":"mdi:content-save-cog","tags":["settings","floppy disc cog"]},{"name":"mdi:content-save-cog-outline","tags":["settings","floppy disc cog outline"]},{"name":"mdi:content-save-edit","tags":["edit / modify","floppy disc edit"]},{"name":"mdi:content-save-edit-outline","tags":["edit / modify","floppy disc edit outline"]},{"name":"mdi:content-save-minus","tags":[]},{"name":"mdi:content-save-minus-outline","tags":[]},{"name":"mdi:content-save-move","tags":["floppy disc move"]},{"name":"mdi:content-save-move-outline","tags":["floppy disc move outline"]},{"name":"mdi:content-save-off","tags":[]},{"name":"mdi:content-save-off-outline","tags":[]},{"name":"mdi:content-save-outline","tags":[]},{"name":"mdi:content-save-plus","tags":["content save add"]},{"name":"mdi:content-save-plus-outline","tags":["content save add outline"]},{"name":"mdi:content-save-settings","tags":["settings","floppy disc settings"]},{"name":"mdi:content-save-settings-outline","tags":["settings","floppy disc settings outline"]},{"name":"mdi:contrast","tags":[]},{"name":"mdi:contrast-box","tags":[]},{"name":"mdi:contrast-circle","tags":[]},{"name":"mdi:controller","tags":["gaming / rpg","gamepad"]},{"name":"mdi:controller-classic","tags":["gaming / rpg","gamepad classic"]},{"name":"mdi:controller-classic-outline","tags":["gaming / rpg","gamepad classic outline"]},{"name":"mdi:controller-off","tags":["gaming / rpg","gamepad off"]},{"name":"mdi:cookie","tags":["food / drink","biscuit"]},{"name":"mdi:cookie-alert","tags":["food / drink","alert / error","biscuit alert"]},{"name":"mdi:cookie-alert-outline","tags":["food / drink","alert / error","biscuit alert outline"]},{"name":"mdi:cookie-check","tags":["food / drink","biscuit check"]},{"name":"mdi:cookie-check-outline","tags":["food / drink","biscuit check outline"]},{"name":"mdi:cookie-clock","tags":["food / drink","date / time","biscuit clock"]},{"name":"mdi:cookie-clock-outline","tags":["food / drink","date / time","biscuit clock outline"]},{"name":"mdi:cookie-cog","tags":["food / drink","settings","biscuit cog"]},{"name":"mdi:cookie-cog-outline","tags":["food / drink","settings","biscuit cog outline"]},{"name":"mdi:cookie-edit","tags":["food / drink","edit / modify","biscuit edit"]},{"name":"mdi:cookie-edit-outline","tags":["food / drink","edit / modify","biscuit edit outline"]},{"name":"mdi:cookie-lock","tags":["food / drink","lock","biscuit lock"]},{"name":"mdi:cookie-lock-outline","tags":["food / drink","lock","biscuit lock outline"]},{"name":"mdi:cookie-minus","tags":["food / drink","biscuit minus"]},{"name":"mdi:cookie-minus-outline","tags":["food / drink","biscuit minus outline"]},{"name":"mdi:cookie-off","tags":["food / drink","biscuit off"]},{"name":"mdi:cookie-off-outline","tags":["food / drink","biscuit off outline"]},{"name":"mdi:cookie-outline","tags":["food / drink","biscuit outline"]},{"name":"mdi:cookie-plus","tags":["food / drink","biscuit plus"]},{"name":"mdi:cookie-plus-outline","tags":["food / drink","biscuit plus outline"]},{"name":"mdi:cookie-refresh","tags":["food / drink","biscuit refresh"]},{"name":"mdi:cookie-refresh-outline","tags":["food / drink","biscuit refresh outline"]},{"name":"mdi:cookie-remove","tags":["food / drink","biscuit remove"]},{"name":"mdi:cookie-remove-outline","tags":["food / drink","biscuit remove outline"]},{"name":"mdi:cookie-settings","tags":["food / drink","settings","biscuit settings","cookie crumbs","biscuit crumbs"]},{"name":"mdi:cookie-settings-outline","tags":["food / drink","settings","biscuit settings outline","cookie crumbs outline","biscuit crumbs outline"]},{"name":"mdi:coolant-temperature","tags":["automotive"]},{"name":"mdi:copyleft","tags":[]},{"name":"mdi:copyright","tags":[]},{"name":"mdi:cordova","tags":["brand / logo","developer / languages"]},{"name":"mdi:corn","tags":["agriculture","food / drink"]},{"name":"mdi:corn-off","tags":["food / drink","agriculture"]},{"name":"mdi:cosine-wave","tags":["audio","frequency","amplitude"]},{"name":"mdi:counter","tags":["automotive","score","numbers","odometer"]},{"name":"mdi:countertop","tags":["home automation","kitchen counter","sink"]},{"name":"mdi:countertop-outline","tags":["home automation","kitchen counter outline","sink outline"]},{"name":"mdi:cow","tags":["animal","agriculture","emoji cow","emoticon cow"]},{"name":"mdi:cow-off","tags":["food / drink","agriculture","animal","dairy off","dairy free"]},{"name":"mdi:cpu-32-bit","tags":["chip 32 bit"]},{"name":"mdi:cpu-64-bit","tags":["chip 64 bit"]},{"name":"mdi:cradle","tags":["people / family","home automation","crib","bassinet","baby","nursery","baby room"]},{"name":"mdi:cradle-outline","tags":["people / family","home automation","bassinet","crib","baby","nursery outline","baby room outline"]},{"name":"mdi:crane","tags":[]},{"name":"mdi:creation","tags":["auto awesome","sparkles","stars","shimmer"]},{"name":"mdi:creation-outline","tags":["auto awesome outline","sparkles outline","stars outline","shimmer outline"]},{"name":"mdi:creative-commons","tags":["brand / logo"]},{"name":"mdi:credit-card","tags":["banking","currency"]},{"name":"mdi:credit-card-check","tags":["banking"]},{"name":"mdi:credit-card-check-outline","tags":["banking"]},{"name":"mdi:credit-card-chip","tags":["banking","credit card icc chip"]},{"name":"mdi:credit-card-chip-outline","tags":["banking","credit card icc chip outline"]},{"name":"mdi:credit-card-clock","tags":["banking","date / time"]},{"name":"mdi:credit-card-clock-outline","tags":["banking","date / time"]},{"name":"mdi:credit-card-edit","tags":["edit / modify","banking"]},{"name":"mdi:credit-card-edit-outline","tags":["edit / modify","banking"]},{"name":"mdi:credit-card-fast","tags":["banking","credit card swipe"]},{"name":"mdi:credit-card-fast-outline","tags":["banking","credit card swipe outline"]},{"name":"mdi:credit-card-lock","tags":["banking","lock"]},{"name":"mdi:credit-card-lock-outline","tags":["banking","lock"]},{"name":"mdi:credit-card-marker","tags":["banking","navigation","credit card location","payment on delivery"]},{"name":"mdi:credit-card-marker-outline","tags":["banking","navigation","cod","payment on delivery outline","credit card location outline"]},{"name":"mdi:credit-card-minus","tags":["banking"]},{"name":"mdi:credit-card-minus-outline","tags":["banking"]},{"name":"mdi:credit-card-multiple","tags":["banking"]},{"name":"mdi:credit-card-multiple-outline","tags":["banking","credit cards"]},{"name":"mdi:credit-card-off","tags":["banking"]},{"name":"mdi:credit-card-off-outline","tags":["banking"]},{"name":"mdi:credit-card-outline","tags":["shopping","banking","currency","payment"]},{"name":"mdi:credit-card-plus","tags":["banking"]},{"name":"mdi:credit-card-plus-outline","tags":["banking","credit card add"]},{"name":"mdi:credit-card-refresh","tags":["banking"]},{"name":"mdi:credit-card-refresh-outline","tags":["banking"]},{"name":"mdi:credit-card-refund","tags":["banking"]},{"name":"mdi:credit-card-refund-outline","tags":["banking"]},{"name":"mdi:credit-card-remove","tags":["banking"]},{"name":"mdi:credit-card-remove-outline","tags":["banking"]},{"name":"mdi:credit-card-scan","tags":["banking"]},{"name":"mdi:credit-card-scan-outline","tags":["banking"]},{"name":"mdi:credit-card-search","tags":["banking"]},{"name":"mdi:credit-card-search-outline","tags":["banking"]},{"name":"mdi:credit-card-settings","tags":["banking","settings"]},{"name":"mdi:credit-card-settings-outline","tags":["banking","settings","payment settings"]},{"name":"mdi:credit-card-sync","tags":["banking"]},{"name":"mdi:credit-card-sync-outline","tags":["banking"]},{"name":"mdi:credit-card-wireless","tags":["currency","banking"]},{"name":"mdi:credit-card-wireless-off","tags":["banking"]},{"name":"mdi:credit-card-wireless-off-outline","tags":["banking"]},{"name":"mdi:credit-card-wireless-outline","tags":["currency","banking","credit card contactless"]},{"name":"mdi:cricket","tags":["sport","cricket bat"]},{"name":"mdi:crop","tags":[]},{"name":"mdi:crop-free","tags":[]},{"name":"mdi:crop-landscape","tags":["crop 5 4"]},{"name":"mdi:crop-portrait","tags":[]},{"name":"mdi:crop-rotate","tags":[]},{"name":"mdi:crop-square","tags":[]},{"name":"mdi:cross","tags":["religion","holiday","christianity","religion christian"]},{"name":"mdi:cross-bolnisi","tags":["religion"]},{"name":"mdi:cross-celtic","tags":["religion","holiday"]},{"name":"mdi:cross-outline","tags":["religion","religion christian outline","christianity outline"]},{"name":"mdi:crosshairs","tags":["geographic information system","gps not fixed","location searching"]},{"name":"mdi:crosshairs-gps","tags":["navigation","geographic information system","gps fixed","my location"]},{"name":"mdi:crosshairs-off","tags":["geographic information system"]},{"name":"mdi:crosshairs-question","tags":["navigation","geographic information system","crosshairs unknown","gps unknown"]},{"name":"mdi:crowd","tags":["account / user","people / family","family","crowd source","crowdsource"]},{"name":"mdi:crown","tags":[]},{"name":"mdi:crown-circle","tags":["gaming / rpg","checkers"]},{"name":"mdi:crown-circle-outline","tags":["gaming / rpg","checkers outline"]},{"name":"mdi:crown-outline","tags":[]},{"name":"mdi:cryengine","tags":["brand / logo"]},{"name":"mdi:crystal-ball","tags":["gaming / rpg"]},{"name":"mdi:cube","tags":["shape"]},{"name":"mdi:cube-off","tags":[]},{"name":"mdi:cube-off-outline","tags":["food / drink","sugar off","sugar cube off","sugar free"]},{"name":"mdi:cube-outline","tags":["shape","food / drink","sugar","sugar cube"]},{"name":"mdi:cube-scan","tags":["view in ar","view in augmented reality"]},{"name":"mdi:cube-send","tags":[]},{"name":"mdi:cube-unfolded","tags":[]},{"name":"mdi:cup","tags":["food / drink","glass","drink"]},{"name":"mdi:cup-off","tags":["food / drink","glass off","drink off"]},{"name":"mdi:cup-off-outline","tags":["food / drink","glass off outline","drink off outline"]},{"name":"mdi:cup-outline","tags":["food / drink","glass outline","drink outline","cup empty"]},{"name":"mdi:cup-water","tags":["food / drink","local drink","glass water","drink water","cup liquid","glass liquid"]},{"name":"mdi:cupboard","tags":["home automation"]},{"name":"mdi:cupboard-outline","tags":["home automation"]},{"name":"mdi:cupcake","tags":["food / drink"]},{"name":"mdi:curling","tags":["sport"]},{"name":"mdi:currency-bdt","tags":["banking","currency","taka","bangladeshi taka"]},{"name":"mdi:currency-brl","tags":["banking","currency","brazilian real"]},{"name":"mdi:currency-btc","tags":["currency","banking","bitcoin"]},{"name":"mdi:currency-cny","tags":["currency","banking","yuan","renminbi"]},{"name":"mdi:currency-eth","tags":["currency","banking","ethereum","xi"]},{"name":"mdi:currency-eur","tags":["currency","banking","euro","euro symbol"]},{"name":"mdi:currency-eur-off","tags":["currency","banking"]},{"name":"mdi:currency-fra","tags":["currency","banking"]},{"name":"mdi:currency-gbp","tags":["currency","banking","pound","sterling"]},{"name":"mdi:currency-ils","tags":["banking","currency"]},{"name":"mdi:currency-inr","tags":["currency","banking","rupee"]},{"name":"mdi:currency-jpy","tags":["currency","banking","yen"]},{"name":"mdi:currency-krw","tags":["currency","banking","won"]},{"name":"mdi:currency-kzt","tags":["banking","currency","kazakhstani tenge"]},{"name":"mdi:currency-mnt","tags":["currency","banking","currency mongolian tugrug"]},{"name":"mdi:currency-ngn","tags":["currency","banking","naira"]},{"name":"mdi:currency-php","tags":["banking","currency","philippine peso"]},{"name":"mdi:currency-rial","tags":["currency","banking","currency riyal","currency irr","currency omr","currency yer","currency sar"]},{"name":"mdi:currency-rub","tags":["currency","banking","ruble"]},{"name":"mdi:currency-rupee","tags":["banking","currency","currency npr","currency pkr","currency lkr","currency inr"]},{"name":"mdi:currency-sign","tags":["currency","banking","currency scarab"]},{"name":"mdi:currency-thb","tags":["banking","currency thai baht"]},{"name":"mdi:currency-try","tags":["currency","banking","lira"]},{"name":"mdi:currency-twd","tags":["currency","banking","new taiwan dollar"]},{"name":"mdi:currency-uah","tags":["banking","currency hryvnia","currency ukraine"]},{"name":"mdi:currency-usd","tags":["currency","banking","attach money","dollar"]},{"name":"mdi:currency-usd-off","tags":["currency","banking","money off","dollar off"]},{"name":"mdi:current-ac","tags":["alternating current"]},{"name":"mdi:current-dc","tags":["battery","direct current"]},{"name":"mdi:cursor-default","tags":[]},{"name":"mdi:cursor-default-click","tags":[]},{"name":"mdi:cursor-default-click-outline","tags":[]},{"name":"mdi:cursor-default-gesture","tags":[]},{"name":"mdi:cursor-default-gesture-outline","tags":[]},{"name":"mdi:cursor-default-outline","tags":[]},{"name":"mdi:cursor-move","tags":[]},{"name":"mdi:cursor-pointer","tags":["cursor hand"]},{"name":"mdi:cursor-text","tags":[]},{"name":"mdi:curtains","tags":["home automation","drapes","window"]},{"name":"mdi:curtains-closed","tags":["home automation","drapes closed","window closed"]},{"name":"mdi:cylinder","tags":["shape"]},{"name":"mdi:cylinder-off","tags":["shape"]},{"name":"mdi:dance-ballroom","tags":["people / family","human dance ballroom"]},{"name":"mdi:dance-pole","tags":["sport","people / family","kho kho","human dance pole"]},{"name":"mdi:data-matrix","tags":[]},{"name":"mdi:data-matrix-edit","tags":["edit / modify"]},{"name":"mdi:data-matrix-minus","tags":[]},{"name":"mdi:data-matrix-plus","tags":[]},{"name":"mdi:data-matrix-remove","tags":[]},{"name":"mdi:data-matrix-scan","tags":[]},{"name":"mdi:database","tags":["geographic information system","database","storage"]},{"name":"mdi:database-alert","tags":["database","alert / error"]},{"name":"mdi:database-alert-outline","tags":["database","alert / error"]},{"name":"mdi:database-arrow-down","tags":["database"]},{"name":"mdi:database-arrow-down-outline","tags":["database"]},{"name":"mdi:database-arrow-left","tags":["database"]},{"name":"mdi:database-arrow-left-outline","tags":["database"]},{"name":"mdi:database-arrow-right","tags":["database"]},{"name":"mdi:database-arrow-right-outline","tags":["database"]},{"name":"mdi:database-arrow-up","tags":["database"]},{"name":"mdi:database-arrow-up-outline","tags":["database"]},{"name":"mdi:database-check","tags":["geographic information system","database","database tick"]},{"name":"mdi:database-check-outline","tags":["database"]},{"name":"mdi:database-clock","tags":["database","date / time"]},{"name":"mdi:database-clock-outline","tags":["database","date / time"]},{"name":"mdi:database-cog","tags":["database","settings"]},{"name":"mdi:database-cog-outline","tags":["database","settings"]},{"name":"mdi:database-edit","tags":["edit / modify","geographic information system","database"]},{"name":"mdi:database-edit-outline","tags":["database","edit / modify"]},{"name":"mdi:database-export","tags":["geographic information system","database"]},{"name":"mdi:database-export-outline","tags":["database"]},{"name":"mdi:database-eye","tags":["database","database view"]},{"name":"mdi:database-eye-off","tags":["database","database view off"]},{"name":"mdi:database-eye-off-outline","tags":["database","database view off outline"]},{"name":"mdi:database-eye-outline","tags":["database","database view outline"]},{"name":"mdi:database-import","tags":["geographic information system","database"]},{"name":"mdi:database-import-outline","tags":["database"]},{"name":"mdi:database-lock","tags":["lock","geographic information system","database"]},{"name":"mdi:database-lock-outline","tags":["database","lock"]},{"name":"mdi:database-marker","tags":["geographic information system","database","navigation","database location"]},{"name":"mdi:database-marker-outline","tags":["database","navigation","database location outline"]},{"name":"mdi:database-minus","tags":["geographic information system","database"]},{"name":"mdi:database-minus-outline","tags":["database"]},{"name":"mdi:database-off","tags":["database"]},{"name":"mdi:database-off-outline","tags":["database"]},{"name":"mdi:database-outline","tags":["database"]},{"name":"mdi:database-plus","tags":["geographic information system","database","database add"]},{"name":"mdi:database-plus-outline","tags":["database"]},{"name":"mdi:database-refresh","tags":["database"]},{"name":"mdi:database-refresh-outline","tags":["database"]},{"name":"mdi:database-remove","tags":["geographic information system","database"]},{"name":"mdi:database-remove-outline","tags":["database"]},{"name":"mdi:database-search","tags":["geographic information system","database","sql query"]},{"name":"mdi:database-search-outline","tags":["database"]},{"name":"mdi:database-settings","tags":["settings","geographic information system","database"]},{"name":"mdi:database-settings-outline","tags":["database","settings"]},{"name":"mdi:database-sync","tags":["geographic information system","database"]},{"name":"mdi:database-sync-outline","tags":["database"]},{"name":"mdi:death-star","tags":[]},{"name":"mdi:death-star-variant","tags":[]},{"name":"mdi:deathly-hallows","tags":["harry potter"]},{"name":"mdi:debian","tags":["brand / logo"]},{"name":"mdi:debug-step-into","tags":[]},{"name":"mdi:debug-step-out","tags":[]},{"name":"mdi:debug-step-over","tags":["skip","jump"]},{"name":"mdi:decagram","tags":["shape","starburst"]},{"name":"mdi:decagram-outline","tags":["shape","starburst outline"]},{"name":"mdi:decimal","tags":["math"]},{"name":"mdi:decimal-comma","tags":["math"]},{"name":"mdi:decimal-comma-decrease","tags":["math"]},{"name":"mdi:decimal-comma-increase","tags":["math"]},{"name":"mdi:decimal-decrease","tags":["math"]},{"name":"mdi:decimal-increase","tags":["math"]},{"name":"mdi:delete","tags":["trash","bin","rubbish","garbage","rubbish bin","trash can","garbage can"]},{"name":"mdi:delete-alert","tags":["alert / error"]},{"name":"mdi:delete-alert-outline","tags":["alert / error"]},{"name":"mdi:delete-circle","tags":["trash circle","bin circle","garbage can circle","garbage circle","rubbish bin circle","rubbish circle","trash can circle"]},{"name":"mdi:delete-circle-outline","tags":["bin circle outline","garbage can circle outline","garbage circle outline","rubbish bin circle outline","rubbish circle outline","trash can circle outline","trash circle outline"]},{"name":"mdi:delete-clock","tags":["date / time"]},{"name":"mdi:delete-clock-outline","tags":["date / time"]},{"name":"mdi:delete-empty","tags":["trash empty","bin empty","rubbish empty","rubbish bin empty","trash can empty","garbage empty","garbage can empty"]},{"name":"mdi:delete-empty-outline","tags":[]},{"name":"mdi:delete-forever","tags":[]},{"name":"mdi:delete-forever-outline","tags":[]},{"name":"mdi:delete-off","tags":[]},{"name":"mdi:delete-off-outline","tags":[]},{"name":"mdi:delete-outline","tags":["garbage outline","bin outline","rubbish outline","garbage can outline","rubbish bin outline","trash outline","trash can outline"]},{"name":"mdi:delete-restore","tags":["trash restore","bin restore","restore from trash"]},{"name":"mdi:delete-sweep","tags":[]},{"name":"mdi:delete-sweep-outline","tags":[]},{"name":"mdi:delete-variant","tags":["trash variant","bin variant","cup ice","drink ice"]},{"name":"mdi:delta","tags":["math","alpha / numeric","change history"]},{"name":"mdi:desk","tags":[]},{"name":"mdi:desk-lamp","tags":["home automation"]},{"name":"mdi:desk-lamp-off","tags":["home automation"]},{"name":"mdi:desk-lamp-on","tags":["home automation"]},{"name":"mdi:deskphone","tags":["cellphone / phone","device / tech"]},{"name":"mdi:desktop-classic","tags":["device / tech","home automation","computer classic"]},{"name":"mdi:desktop-tower","tags":["device / tech","home automation"]},{"name":"mdi:desktop-tower-monitor","tags":["device / tech"]},{"name":"mdi:details","tags":[]},{"name":"mdi:dev-to","tags":["brand / logo"]},{"name":"mdi:developer-board","tags":[]},{"name":"mdi:deviantart","tags":["brand / logo"]},{"name":"mdi:devices","tags":["device / tech","home automation","cellphone / phone","monitor","watch","smartwatch","smartphone","cellphone","television"]},{"name":"mdi:dharmachakra","tags":["religion","dharma wheel","religion buddhist","buddhism"]},{"name":"mdi:diabetes","tags":["medical / hospital","hand blood"]},{"name":"mdi:dialpad","tags":["keypad"]},{"name":"mdi:diameter","tags":["math","circle diameter","sphere diameter"]},{"name":"mdi:diameter-outline","tags":["math","circle diameter outline","sphere diameter outline"]},{"name":"mdi:diameter-variant","tags":["math","circle diameter variant","sphere diameter variant"]},{"name":"mdi:diamond","tags":[]},{"name":"mdi:diamond-outline","tags":[]},{"name":"mdi:diamond-stone","tags":["jewel"]},{"name":"mdi:diaper-outline","tags":["clothing","medical / hospital","nappy outline"]},{"name":"mdi:dice-1","tags":["gaming / rpg","die 1","dice one"]},{"name":"mdi:dice-1-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-2","tags":["gaming / rpg","die 2","dice two"]},{"name":"mdi:dice-2-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-3","tags":["gaming / rpg","die 3","dice three"]},{"name":"mdi:dice-3-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-4","tags":["gaming / rpg","die 4","dice four"]},{"name":"mdi:dice-4-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-5","tags":["gaming / rpg","die 5","dice five"]},{"name":"mdi:dice-5-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-6","tags":["gaming / rpg","die 6","dice six"]},{"name":"mdi:dice-6-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-d10","tags":["gaming / rpg"]},{"name":"mdi:dice-d10-outline","tags":["gaming / rpg","die d10"]},{"name":"mdi:dice-d12","tags":["gaming / rpg"]},{"name":"mdi:dice-d12-outline","tags":["gaming / rpg"]},{"name":"mdi:dice-d20","tags":["gaming / rpg"]},{"name":"mdi:dice-d20-outline","tags":["gaming / rpg","die d20"]},{"name":"mdi:dice-d4","tags":["gaming / rpg"]},{"name":"mdi:dice-d4-outline","tags":["gaming / rpg","die d4"]},{"name":"mdi:dice-d6","tags":["gaming / rpg"]},{"name":"mdi:dice-d6-outline","tags":["gaming / rpg","die d6"]},{"name":"mdi:dice-d8","tags":["gaming / rpg"]},{"name":"mdi:dice-d8-outline","tags":["gaming / rpg","die d8"]},{"name":"mdi:dice-multiple","tags":["gaming / rpg","die multiple"]},{"name":"mdi:dice-multiple-outline","tags":["gaming / rpg"]},{"name":"mdi:digital-ocean","tags":["developer / languages","brand / logo"]},{"name":"mdi:dip-switch","tags":[]},{"name":"mdi:directions","tags":[]},{"name":"mdi:directions-fork","tags":[]},{"name":"mdi:disc","tags":["music","cd rom","dvd"]},{"name":"mdi:disc-alert","tags":["alert / error","disc full","disc warning"]},{"name":"mdi:disc-player","tags":["home automation","device / tech"]},{"name":"mdi:dishwasher","tags":["home automation"]},{"name":"mdi:dishwasher-alert","tags":["home automation","alert / error"]},{"name":"mdi:dishwasher-off","tags":["home automation"]},{"name":"mdi:disqus","tags":["brand / logo"]},{"name":"mdi:distribute-horizontal-center","tags":[]},{"name":"mdi:distribute-horizontal-left","tags":[]},{"name":"mdi:distribute-horizontal-right","tags":[]},{"name":"mdi:distribute-vertical-bottom","tags":[]},{"name":"mdi:distribute-vertical-center","tags":[]},{"name":"mdi:distribute-vertical-top","tags":[]},{"name":"mdi:diversify","tags":[]},{"name":"mdi:diving","tags":["sport","people / family","swim dive","human diving"]},{"name":"mdi:diving-flippers","tags":["sport"]},{"name":"mdi:diving-helmet","tags":[]},{"name":"mdi:diving-scuba","tags":["sport"]},{"name":"mdi:diving-scuba-flag","tags":[]},{"name":"mdi:diving-scuba-mask","tags":["sport"]},{"name":"mdi:diving-scuba-tank","tags":[]},{"name":"mdi:diving-scuba-tank-multiple","tags":[]},{"name":"mdi:diving-snorkel","tags":["sport"]},{"name":"mdi:division","tags":["math","obelus"]},{"name":"mdi:division-box","tags":["math"]},{"name":"mdi:dlna","tags":["brand / logo"]},{"name":"mdi:dna","tags":["science","helix"]},{"name":"mdi:dns","tags":[]},{"name":"mdi:dns-outline","tags":[]},{"name":"mdi:dock-bottom","tags":[]},{"name":"mdi:dock-left","tags":[]},{"name":"mdi:dock-right","tags":[]},{"name":"mdi:dock-top","tags":[]},{"name":"mdi:dock-window","tags":[]},{"name":"mdi:docker","tags":["brand / logo"]},{"name":"mdi:doctor","tags":["medical / hospital"]},{"name":"mdi:dog","tags":["animal","emoji dog","emoticon dog"]},{"name":"mdi:dog-service","tags":["animal","guide dog","k9","canine"]},{"name":"mdi:dog-side","tags":["animal","k9","canine"]},{"name":"mdi:dog-side-off","tags":["animal"]},{"name":"mdi:dolby","tags":["audio","brand / logo","home automation"]},{"name":"mdi:dolly","tags":["hand truck","trolley"]},{"name":"mdi:dolphin","tags":["animal","porpoise"]},{"name":"mdi:domain","tags":["places","building","company","business"]},{"name":"mdi:domain-off","tags":[]},{"name":"mdi:domain-plus","tags":[]},{"name":"mdi:domain-remove","tags":[]},{"name":"mdi:domain-switch","tags":[]},{"name":"mdi:dome-light","tags":[]},{"name":"mdi:domino-mask","tags":["robber mask","zorro mask"]},{"name":"mdi:donkey","tags":["animal"]},{"name":"mdi:door","tags":["home automation"]},{"name":"mdi:door-closed","tags":["home automation"]},{"name":"mdi:door-closed-cancel","tags":["home automation","door forbidden","door do not enter","door unavailable"]},{"name":"mdi:door-closed-lock","tags":["home automation","lock"]},{"name":"mdi:door-open","tags":["home automation"]},{"name":"mdi:door-sliding","tags":["home automation","patio door","french door"]},{"name":"mdi:door-sliding-lock","tags":["home automation","lock","patio door lock","french door lock"]},{"name":"mdi:door-sliding-open","tags":["home automation","patio door open","french door open"]},{"name":"mdi:doorbell","tags":["home automation"]},{"name":"mdi:doorbell-video","tags":["home automation"]},{"name":"mdi:dot-net","tags":["developer / languages","brand / logo","microsoft dot net"]},{"name":"mdi:dots-circle","tags":["perimeter"]},{"name":"mdi:dots-grid","tags":[]},{"name":"mdi:dots-hexagon","tags":[]},{"name":"mdi:dots-horizontal","tags":["more","ellipsis horizontal","more horiz","menu"]},{"name":"mdi:dots-horizontal-circle","tags":["ellipsis horizontal circle","more circle","menu"]},{"name":"mdi:dots-horizontal-circle-outline","tags":["ellipsis horizontal circle outline","more circle outline","menu"]},{"name":"mdi:dots-square","tags":["perimeter"]},{"name":"mdi:dots-triangle","tags":[]},{"name":"mdi:dots-vertical","tags":["ellipsis vertical","more vert","menu"]},{"name":"mdi:dots-vertical-circle","tags":["ellipsis vertical circle","menu"]},{"name":"mdi:dots-vertical-circle-outline","tags":["ellipsis vertical circle outline","menu"]},{"name":"mdi:download","tags":["file download","get app"]},{"name":"mdi:download-box","tags":[]},{"name":"mdi:download-box-outline","tags":[]},{"name":"mdi:download-circle","tags":[]},{"name":"mdi:download-circle-outline","tags":[]},{"name":"mdi:download-lock","tags":["lock"]},{"name":"mdi:download-lock-outline","tags":["lock"]},{"name":"mdi:download-multiple","tags":["downloads"]},{"name":"mdi:download-multiple-outline","tags":[]},{"name":"mdi:download-network","tags":[]},{"name":"mdi:download-network-outline","tags":[]},{"name":"mdi:download-off","tags":[]},{"name":"mdi:download-off-outline","tags":[]},{"name":"mdi:download-outline","tags":[]},{"name":"mdi:drag","tags":[]},{"name":"mdi:drag-horizontal","tags":[]},{"name":"mdi:drag-horizontal-variant","tags":[]},{"name":"mdi:drag-variant","tags":[]},{"name":"mdi:drag-vertical","tags":[]},{"name":"mdi:drag-vertical-variant","tags":[]},{"name":"mdi:drama-masks","tags":["comedy","tragedy","theatre"]},{"name":"mdi:draw","tags":["drawing / art","form","sign","signature"]},{"name":"mdi:draw-pen","tags":["form","drawing / art","sign","signature"]},{"name":"mdi:drawing","tags":["drawing / art","shape"]},{"name":"mdi:drawing-box","tags":["drawing / art","shape"]},{"name":"mdi:dresser","tags":["home automation"]},{"name":"mdi:dresser-outline","tags":["home automation"]},{"name":"mdi:drone","tags":["transportation + flying"]},{"name":"mdi:dropbox","tags":["brand / logo"]},{"name":"mdi:drupal","tags":["brand / logo"]},{"name":"mdi:duck","tags":["animal"]},{"name":"mdi:dumbbell","tags":["sport","weights","fitness center","gym","barbell"]},{"name":"mdi:dump-truck","tags":["transportation + road","hardware / tools","tipper lorry"]},{"name":"mdi:ear-hearing","tags":["medical / hospital"]},{"name":"mdi:ear-hearing-loop","tags":["medical / hospital","audio induction loop","telecoil"]},{"name":"mdi:ear-hearing-off","tags":["medical / hospital","hearing impaired"]},{"name":"mdi:earbuds","tags":["audio","music","headphones"]},{"name":"mdi:earbuds-off","tags":["audio","music","headphones off"]},{"name":"mdi:earbuds-off-outline","tags":["audio","music","headphones off outline"]},{"name":"mdi:earbuds-outline","tags":["audio","music","headphones outline"]},{"name":"mdi:earth","tags":["geographic information system","navigation","globe","public","planet","world"]},{"name":"mdi:earth-arrow-down","tags":["globe arrow down","world arrow down","planet arrow down"]},{"name":"mdi:earth-arrow-left","tags":["globe arrow left","world arrow left","planet arrow left"]},{"name":"mdi:earth-arrow-right","tags":["navigation","globe arrow right","world arrow right","planet arrow right"]},{"name":"mdi:earth-arrow-up","tags":["globe arrow up","planet arrow up","world arrow up"]},{"name":"mdi:earth-box","tags":["navigation","globe box","world box","planet box"]},{"name":"mdi:earth-box-minus","tags":["navigation","globe box minus","world box minus","planet box minus"]},{"name":"mdi:earth-box-off","tags":["navigation","globe box off","world box off","planet box off"]},{"name":"mdi:earth-box-plus","tags":["navigation","globe box plus","world box plus","planet box plus"]},{"name":"mdi:earth-box-remove","tags":["navigation","globe box remove","world box remove","planet box remove"]},{"name":"mdi:earth-minus","tags":["navigation","globe minus","world minus","planet minus"]},{"name":"mdi:earth-off","tags":["geographic information system","navigation","globe off","world off","planet off"]},{"name":"mdi:earth-plus","tags":["navigation","globe plus","world plus","planet plus"]},{"name":"mdi:earth-remove","tags":["navigation","globe remove","world remove","planet remove"]},{"name":"mdi:egg","tags":["food / drink","agriculture"]},{"name":"mdi:egg-easter","tags":["holiday"]},{"name":"mdi:egg-fried","tags":["food / drink"]},{"name":"mdi:egg-off","tags":["food / drink","agriculture"]},{"name":"mdi:egg-off-outline","tags":["food / drink","agriculture"]},{"name":"mdi:egg-outline","tags":["food / drink","agriculture"]},{"name":"mdi:eiffel-tower","tags":["places","paris","france"]},{"name":"mdi:eight-track","tags":["music","8 track"]},{"name":"mdi:eject","tags":[]},{"name":"mdi:eject-circle","tags":[]},{"name":"mdi:eject-circle-outline","tags":[]},{"name":"mdi:eject-outline","tags":[]},{"name":"mdi:electric-switch","tags":[]},{"name":"mdi:electric-switch-closed","tags":[]},{"name":"mdi:electron-framework","tags":["brand / logo","developer / languages"]},{"name":"mdi:elephant","tags":["animal"]},{"name":"mdi:elevation-decline","tags":[]},{"name":"mdi:elevation-rise","tags":[]},{"name":"mdi:elevator","tags":["transportation + other"]},{"name":"mdi:elevator-down","tags":["transportation + other"]},{"name":"mdi:elevator-passenger","tags":["transportation + other"]},{"name":"mdi:elevator-passenger-off","tags":["transportation + other"]},{"name":"mdi:elevator-passenger-off-outline","tags":["transportation + other"]},{"name":"mdi:elevator-passenger-outline","tags":["transportation + other"]},{"name":"mdi:elevator-up","tags":["transportation + other"]},{"name":"mdi:ellipse","tags":["shape"]},{"name":"mdi:ellipse-outline","tags":["shape"]},{"name":"mdi:email","tags":["local post office","mail","markunread","envelope"]},{"name":"mdi:email-alert","tags":["alert / error","email warning","envelope alert","envelope warning"]},{"name":"mdi:email-alert-outline","tags":["alert / error"]},{"name":"mdi:email-arrow-left","tags":["email receive"]},{"name":"mdi:email-arrow-left-outline","tags":["email receive outline"]},{"name":"mdi:email-arrow-right","tags":["email send"]},{"name":"mdi:email-arrow-right-outline","tags":["email arrow right outline"]},{"name":"mdi:email-box","tags":["envelope box"]},{"name":"mdi:email-check","tags":["email tick"]},{"name":"mdi:email-check-outline","tags":["email tick outline"]},{"name":"mdi:email-edit","tags":["edit / modify"]},{"name":"mdi:email-edit-outline","tags":["edit / modify"]},{"name":"mdi:email-fast","tags":["envelope fast","email quick","email sent","email send"]},{"name":"mdi:email-fast-outline","tags":["email send outline","email sent outline","envelope fast outline","email quick outline"]},{"name":"mdi:email-heart-outline","tags":["love letter","envelope heart outline","greeting card"]},{"name":"mdi:email-lock","tags":["lock","envelope secure","email secure","envelope lock"]},{"name":"mdi:email-lock-outline","tags":["lock","email secure outline"]},{"name":"mdi:email-mark-as-unread","tags":[]},{"name":"mdi:email-minus","tags":[]},{"name":"mdi:email-minus-outline","tags":[]},{"name":"mdi:email-multiple","tags":[]},{"name":"mdi:email-multiple-outline","tags":[]},{"name":"mdi:email-newsletter","tags":[]},{"name":"mdi:email-off","tags":[]},{"name":"mdi:email-off-outline","tags":[]},{"name":"mdi:email-open","tags":["drafts","envelope open"]},{"name":"mdi:email-open-heart-outline","tags":["love letter open","greeting card open","envelope open heart outline"]},{"name":"mdi:email-open-multiple","tags":[]},{"name":"mdi:email-open-multiple-outline","tags":[]},{"name":"mdi:email-open-outline","tags":["envelope open outline"]},{"name":"mdi:email-outline","tags":["mail outline","envelope outline"]},{"name":"mdi:email-plus","tags":["email add","envelope add","envelope plus"]},{"name":"mdi:email-plus-outline","tags":["email add outline","envelope add outline","envelope plus outline"]},{"name":"mdi:email-remove","tags":[]},{"name":"mdi:email-remove-outline","tags":[]},{"name":"mdi:email-seal","tags":["email certified","mail certified","mail seal","email verified","mail verified"]},{"name":"mdi:email-seal-outline","tags":["email verified outline","email certified outline","mail verified outline","mail certified outline","mail seal outline"]},{"name":"mdi:email-search","tags":[]},{"name":"mdi:email-search-outline","tags":[]},{"name":"mdi:email-sync","tags":["email refresh","email resend"]},{"name":"mdi:email-sync-outline","tags":["email refresh outline","email resend outline"]},{"name":"mdi:email-variant","tags":["envelope variant"]},{"name":"mdi:ember","tags":["brand / logo"]},{"name":"mdi:emby","tags":["brand / logo"]},{"name":"mdi:emoticon","tags":["emoji","smiley","face","emoji"]},{"name":"mdi:emoticon-angry","tags":["emoji","smiley angry","face angry","emoji angry"]},{"name":"mdi:emoticon-angry-outline","tags":["emoji","smiley angry outline","face angry outline","emoji angry outline"]},{"name":"mdi:emoticon-confused","tags":["emoji","face confused","emoji confused"]},{"name":"mdi:emoticon-confused-outline","tags":["emoji","face confused outline","emoji confused outline"]},{"name":"mdi:emoticon-cool","tags":["emoji","smiley cool","face cool","face sunglasses","emoji cool"]},{"name":"mdi:emoticon-cool-outline","tags":["emoji","smiley cool outline","face cool outline","face sunglasses outline","emoji cool outline"]},{"name":"mdi:emoticon-cry","tags":["emoji","smiley cry","face cry","emoji cry"]},{"name":"mdi:emoticon-cry-outline","tags":["emoji","smiley cry outline","face cry outline","emoji cry outline"]},{"name":"mdi:emoticon-dead","tags":["emoji","smiley dead","face dead","emoji dead"]},{"name":"mdi:emoticon-dead-outline","tags":["emoji","smiley dead outline","face dead outline","emoji dead outline"]},{"name":"mdi:emoticon-devil","tags":["emoji","smiley devil","face devil","emoji devil"]},{"name":"mdi:emoticon-devil-outline","tags":["emoji","smiley devil outline","face devil outline","emoji devil outline"]},{"name":"mdi:emoticon-excited","tags":["emoji","smiley excited","face excited","emoji excited"]},{"name":"mdi:emoticon-excited-outline","tags":["emoji","smiley excited outline","face excited outline","emoji excited outline"]},{"name":"mdi:emoticon-frown","tags":["emoji","face frown","emoji frown"]},{"name":"mdi:emoticon-frown-outline","tags":["emoji","face frown outline","emoji frown outline"]},{"name":"mdi:emoticon-happy","tags":["emoji","smiley happy","face happy","emoji happy"]},{"name":"mdi:emoticon-happy-outline","tags":["emoji","smiley happy outline","face happy outline","emoji happy outline"]},{"name":"mdi:emoticon-kiss","tags":["emoji","smiley kiss","face kiss","emoji kiss"]},{"name":"mdi:emoticon-kiss-outline","tags":["emoji","smiley kiss outline","face kiss outline","emoji kiss outline"]},{"name":"mdi:emoticon-lol","tags":["emoji","face lol","emoji lol"]},{"name":"mdi:emoticon-lol-outline","tags":["emoji","face lol outline","emoji lol outline"]},{"name":"mdi:emoticon-minus","tags":[]},{"name":"mdi:emoticon-minus-outline","tags":[]},{"name":"mdi:emoticon-neutral","tags":["emoji","smiley neutral","face neutral","emoji neutral"]},{"name":"mdi:emoticon-neutral-outline","tags":["emoji","smiley neutral outline","face neutral outline","emoji neutral outline"]},{"name":"mdi:emoticon-outline","tags":["emoji","insert emoticon","mood","sentiment very satisfied","tag faces","smiley outline","face outline","emoji outline"]},{"name":"mdi:emoticon-plus","tags":[]},{"name":"mdi:emoticon-plus-outline","tags":[]},{"name":"mdi:emoticon-poop","tags":["emoji","smiley poop","face poop","emoji poop"]},{"name":"mdi:emoticon-poop-outline","tags":["emoji","face poop outline","emoji poop outline"]},{"name":"mdi:emoticon-remove","tags":[]},{"name":"mdi:emoticon-remove-outline","tags":[]},{"name":"mdi:emoticon-sad","tags":["emoji","smiley sad","face sad","emoji sad"]},{"name":"mdi:emoticon-sad-outline","tags":["emoji","smiley sad outline","face sad outline","emoji sad outline"]},{"name":"mdi:emoticon-sick","tags":["emoji","medical / hospital","face sick","fever","emoji sick"]},{"name":"mdi:emoticon-sick-outline","tags":["emoji","medical / hospital","face sick outline","fever outline","emoji sick outline"]},{"name":"mdi:emoticon-tongue","tags":["emoji","smiley tongue","face tongue","emoji tongue"]},{"name":"mdi:emoticon-tongue-outline","tags":["emoji","smiley tongue outline","face tongue outline","emoji tongue outline"]},{"name":"mdi:emoticon-wink","tags":["emoji","smiley wink","face wink","emoji wink"]},{"name":"mdi:emoticon-wink-outline","tags":["emoji","smiley wink outline","face wink outline","emoji wink outline"]},{"name":"mdi:engine","tags":["automotive","motor"]},{"name":"mdi:engine-off","tags":["automotive","motor off"]},{"name":"mdi:engine-off-outline","tags":["automotive","motor off outline"]},{"name":"mdi:engine-outline","tags":["automotive","motor outline"]},{"name":"mdi:epsilon","tags":["alpha / numeric"]},{"name":"mdi:equal","tags":["math"]},{"name":"mdi:equal-box","tags":["math"]},{"name":"mdi:equalizer","tags":["audio"]},{"name":"mdi:equalizer-outline","tags":["audio"]},{"name":"mdi:eraser","tags":[]},{"name":"mdi:eraser-variant","tags":[]},{"name":"mdi:escalator","tags":["transportation + other"]},{"name":"mdi:escalator-box","tags":[]},{"name":"mdi:escalator-down","tags":["transportation + other"]},{"name":"mdi:escalator-up","tags":["transportation + other"]},{"name":"mdi:eslint","tags":["developer / languages","brand / logo"]},{"name":"mdi:et","tags":[]},{"name":"mdi:ethereum","tags":["brand / logo"]},{"name":"mdi:ethernet","tags":[]},{"name":"mdi:ethernet-cable","tags":[]},{"name":"mdi:ethernet-cable-off","tags":[]},{"name":"mdi:ethernet-off","tags":[]},{"name":"mdi:ev-plug-ccs1","tags":["automotive","ev plug ccs combo 1","ev charger ccs1"]},{"name":"mdi:ev-plug-ccs2","tags":["automotive","ev plug ccs combo 2","ev charger ccs2"]},{"name":"mdi:ev-plug-chademo","tags":["automotive","ev charger chademo"]},{"name":"mdi:ev-plug-tesla","tags":["automotive","ev charger tesla"]},{"name":"mdi:ev-plug-type1","tags":["automotive","ev plug j1772","ev charger type1"]},{"name":"mdi:ev-plug-type2","tags":["automotive","ev plug mennekes","ev charger type2"]},{"name":"mdi:ev-station","tags":["places","automotive","charging station","ev charger","wall charger","wallbox","electric vehicle charger","evse","electric charger"]},{"name":"mdi:evernote","tags":["brand / logo"]},{"name":"mdi:excavator","tags":["hardware / tools","transportation + other"]},{"name":"mdi:exclamation","tags":["math","factorial"]},{"name":"mdi:exclamation-thick","tags":["exclamation bold"]},{"name":"mdi:exit-run","tags":["home automation","emergency exit"]},{"name":"mdi:exit-to-app","tags":[]},{"name":"mdi:expand-all","tags":["animation plus"]},{"name":"mdi:expand-all-outline","tags":["animation plus outline"]},{"name":"mdi:expansion-card","tags":["gaming / rpg","gpu","graphics processing unit","nic","network interface card"]},{"name":"mdi:expansion-card-variant","tags":["graphics processing unit","gpu","network interface card","nice"]},{"name":"mdi:exponent","tags":["math","power"]},{"name":"mdi:exponent-box","tags":["math","power box"]},{"name":"mdi:export","tags":["output"]},{"name":"mdi:export-variant","tags":["ios share"]},{"name":"mdi:eye","tags":["show","visibility","remove red eye"]},{"name":"mdi:eye-arrow-left","tags":["view arrow left"]},{"name":"mdi:eye-arrow-left-outline","tags":["view arrow left outline"]},{"name":"mdi:eye-arrow-right","tags":["view arrow right"]},{"name":"mdi:eye-arrow-right-outline","tags":["view arrow right outline"]},{"name":"mdi:eye-check","tags":["eye tick"]},{"name":"mdi:eye-check-outline","tags":["eye tick outline"]},{"name":"mdi:eye-circle","tags":[]},{"name":"mdi:eye-circle-outline","tags":[]},{"name":"mdi:eye-closed","tags":["eye shut","visibility hidden"]},{"name":"mdi:eye-lock","tags":[]},{"name":"mdi:eye-lock-open","tags":[]},{"name":"mdi:eye-lock-open-outline","tags":[]},{"name":"mdi:eye-lock-outline","tags":[]},{"name":"mdi:eye-minus","tags":[]},{"name":"mdi:eye-minus-outline","tags":[]},{"name":"mdi:eye-off","tags":["hide","visibility off"]},{"name":"mdi:eye-off-outline","tags":["hide outline","visibility off outline"]},{"name":"mdi:eye-outline","tags":["show outline","visibility outline"]},{"name":"mdi:eye-plus","tags":["eye add"]},{"name":"mdi:eye-plus-outline","tags":["eye add outline"]},{"name":"mdi:eye-refresh","tags":["view refresh"]},{"name":"mdi:eye-refresh-outline","tags":["view refresh outline"]},{"name":"mdi:eye-remove","tags":[]},{"name":"mdi:eye-remove-outline","tags":[]},{"name":"mdi:eye-settings","tags":["settings"]},{"name":"mdi:eye-settings-outline","tags":["settings"]},{"name":"mdi:eyedropper","tags":["color","drawing / art","science","pipette"]},{"name":"mdi:eyedropper-minus","tags":["science"]},{"name":"mdi:eyedropper-off","tags":["science"]},{"name":"mdi:eyedropper-plus","tags":["science"]},{"name":"mdi:eyedropper-remove","tags":["science"]},{"name":"mdi:eyedropper-variant","tags":["color","science","colorize","colourise","pipette variant"]},{"name":"mdi:face-agent","tags":["customer service","support","emoji agent","emoticon agent"]},{"name":"mdi:face-man","tags":["people / family","face male","emoji man","emoticon man"]},{"name":"mdi:face-man-outline","tags":["people / family","face male outline","emoji man outline","emoticon man outline"]},{"name":"mdi:face-man-profile","tags":["people / family","face male profile","emoji man profile","emoticon man profile"]},{"name":"mdi:face-man-shimmer","tags":["photography","account / user","health / beauty","people / family","face retouching natural","face male shimmer","emoji man shimmer","emoticon man shimmer"]},{"name":"mdi:face-man-shimmer-outline","tags":["people / family","photography","health / beauty","account / user","face retouching natural outline","face male shimmer outline","emoji man shimmer outline","emoticon man shimmer outline"]},{"name":"mdi:face-mask","tags":["medical / hospital","clothing"]},{"name":"mdi:face-mask-outline","tags":["medical / hospital","clothing"]},{"name":"mdi:face-recognition","tags":["photography","facial recognition","scan"]},{"name":"mdi:face-woman","tags":["people / family","face female","emoji woman","emoticon woman"]},{"name":"mdi:face-woman-outline","tags":["people / family","face female outline","emoji woman outline","emoticon woman outline"]},{"name":"mdi:face-woman-profile","tags":["people / family","face female profile","emoji woman profile","emoticon woman profile"]},{"name":"mdi:face-woman-shimmer","tags":["people / family","photography","health / beauty","account / user","face retouching natural woman","face female shimmer","emoji woman shimmer","emoticon woman shimmer"]},{"name":"mdi:face-woman-shimmer-outline","tags":["people / family","photography","health / beauty","account / user","face retouching natural woman outline","face female shimmer outline","emoji woman shimmer outline","emoticon woman shimmer outline"]},{"name":"mdi:facebook","tags":["brand / logo","social media"]},{"name":"mdi:facebook-gaming","tags":["brand / logo"]},{"name":"mdi:facebook-messenger","tags":["brand / logo","social media"]},{"name":"mdi:facebook-workplace","tags":["brand / logo","social media"]},{"name":"mdi:factory","tags":["places","industrial"]},{"name":"mdi:family-tree","tags":["people / family"]},{"name":"mdi:fan","tags":["home automation","automotive"]},{"name":"mdi:fan-alert","tags":["home automation","alert / error"]},{"name":"mdi:fan-auto","tags":[]},{"name":"mdi:fan-chevron-down","tags":["home automation","fan speed down"]},{"name":"mdi:fan-chevron-up","tags":["home automation","fan speed up"]},{"name":"mdi:fan-clock","tags":["home automation","date / time","fan clock","fan schedule","fan timer"]},{"name":"mdi:fan-minus","tags":["home automation"]},{"name":"mdi:fan-off","tags":["home automation","automotive"]},{"name":"mdi:fan-plus","tags":["home automation"]},{"name":"mdi:fan-remove","tags":["home automation"]},{"name":"mdi:fan-speed-1","tags":["home automation","fan speed low"]},{"name":"mdi:fan-speed-2","tags":["home automation","fan speed medium"]},{"name":"mdi:fan-speed-3","tags":["home automation","fan speed high"]},{"name":"mdi:fast-forward","tags":[]},{"name":"mdi:fast-forward-10","tags":[]},{"name":"mdi:fast-forward-15","tags":[]},{"name":"mdi:fast-forward-30","tags":[]},{"name":"mdi:fast-forward-45","tags":[]},{"name":"mdi:fast-forward-5","tags":[]},{"name":"mdi:fast-forward-60","tags":[]},{"name":"mdi:fast-forward-outline","tags":[]},{"name":"mdi:faucet","tags":["home automation","kitchen tap","bathroom tap","sink"]},{"name":"mdi:faucet-variant","tags":["home automation","bathroom tap","kitchen tap","sink"]},{"name":"mdi:fax","tags":["printer","cellphone / phone"]},{"name":"mdi:feather","tags":["nature","quill"]},{"name":"mdi:feature-search","tags":["box","box search"]},{"name":"mdi:feature-search-outline","tags":["box","box outline","box search outline"]},{"name":"mdi:fedora","tags":["brand / logo"]},{"name":"mdi:fence","tags":["home automation","agriculture","railway","train track"]},{"name":"mdi:fence-electric","tags":["home automation","agriculture","railway electric","train track electric"]},{"name":"mdi:fencing","tags":["sport","sword fight"]},{"name":"mdi:ferris-wheel","tags":[]},{"name":"mdi:ferry","tags":["transportation + water","navigation","cargo ship","boat","ship","directions boat","directions ferry"]},{"name":"mdi:file","tags":["files / folders","insert drive file","draft","paper"]},{"name":"mdi:file-account","tags":["account / user","files / folders","file user","resume"]},{"name":"mdi:file-account-outline","tags":["files / folders","account / user"]},{"name":"mdi:file-alert","tags":["files / folders","alert / error","file warning"]},{"name":"mdi:file-alert-outline","tags":["files / folders","alert / error","file warning outline"]},{"name":"mdi:file-arrow-left-right","tags":["files / folders","file exchange","file transfer","file swap"]},{"name":"mdi:file-arrow-left-right-outline","tags":["files / folders","file exchange outline","file swap outline","file transfer outline"]},{"name":"mdi:file-arrow-up-down","tags":["files / folders","file exchange","file swap","file transfer","file upload download"]},{"name":"mdi:file-arrow-up-down-outline","tags":["files / folders","file exchange outline","file swap outline","file transfer outline","file upload download outline"]},{"name":"mdi:file-cabinet","tags":["files / folders","filing cabinet"]},{"name":"mdi:file-cad","tags":["files / folders"]},{"name":"mdi:file-cad-box","tags":["files / folders"]},{"name":"mdi:file-cancel","tags":["files / folders","ban","forbid"]},{"name":"mdi:file-cancel-outline","tags":["files / folders","ban","forbid"]},{"name":"mdi:file-certificate","tags":["files / folders"]},{"name":"mdi:file-certificate-outline","tags":["files / folders"]},{"name":"mdi:file-chart","tags":["files / folders","file report","file graph"]},{"name":"mdi:file-chart-check","tags":["files / folders"]},{"name":"mdi:file-chart-check-outline","tags":["files / folders"]},{"name":"mdi:file-chart-outline","tags":["files / folders","file graph outline","file report outline"]},{"name":"mdi:file-check","tags":["files / folders","file tick"]},{"name":"mdi:file-check-outline","tags":["files / folders"]},{"name":"mdi:file-clock","tags":["files / folders","date / time"]},{"name":"mdi:file-clock-outline","tags":["files / folders","date / time"]},{"name":"mdi:file-cloud","tags":["cloud","files / folders"]},{"name":"mdi:file-cloud-outline","tags":["files / folders","cloud"]},{"name":"mdi:file-code","tags":["files / folders","developer / languages"]},{"name":"mdi:file-code-outline","tags":["files / folders","developer / languages"]},{"name":"mdi:file-cog","tags":["settings","files / folders","file settings cog"]},{"name":"mdi:file-cog-outline","tags":["settings","files / folders","file settings cog outline"]},{"name":"mdi:file-compare","tags":["files / folders"]},{"name":"mdi:file-delimited","tags":["files / folders","file csv"]},{"name":"mdi:file-delimited-outline","tags":["files / folders","file csv outline"]},{"name":"mdi:file-document","tags":["files / folders","file text"]},{"name":"mdi:file-document-alert","tags":["files / folders","alert / error","file document error","file text alert","file text error"]},{"name":"mdi:file-document-alert-outline","tags":["files / folders","alert / error","file document error outline","file text error outline","file text alert outline"]},{"name":"mdi:file-document-arrow-right","tags":["files / folders","file document move","file text move","file text arrow right"]},{"name":"mdi:file-document-arrow-right-outline","tags":["files / folders","file document move outline","file text move outline","file text arrow right outline"]},{"name":"mdi:file-document-check","tags":["files / folders","file document tick","file text tick","file text check"]},{"name":"mdi:file-document-check-outline","tags":["files / folders","file document tick outline","file text tick outline","file text check outline"]},{"name":"mdi:file-document-edit","tags":["edit / modify","files / folders","contract","file text edit"]},{"name":"mdi:file-document-edit-outline","tags":["edit / modify","files / folders","contract outline","file text edit outline"]},{"name":"mdi:file-document-minus","tags":["files / folders","file text minus"]},{"name":"mdi:file-document-minus-outline","tags":["files / folders","file text minus outline"]},{"name":"mdi:file-document-multiple","tags":["files / folders","file text multiple"]},{"name":"mdi:file-document-multiple-outline","tags":["files / folders","file text multiple outline"]},{"name":"mdi:file-document-outline","tags":["files / folders","file text outline"]},{"name":"mdi:file-document-plus","tags":["files / folders","file document add","file text add","file text plus"]},{"name":"mdi:file-document-plus-outline","tags":["files / folders","file document add outline","file text plus outline","file text add outline"]},{"name":"mdi:file-document-refresh","tags":["files / folders"]},{"name":"mdi:file-document-refresh-outline","tags":["files / folders"]},{"name":"mdi:file-document-remove","tags":["files / folders","file document delete","file text remove","file text delete"]},{"name":"mdi:file-document-remove-outline","tags":["files / folders","file document delete outline","file text remove outline","file text delete outline"]},{"name":"mdi:file-download","tags":["files / folders"]},{"name":"mdi:file-download-outline","tags":["files / folders"]},{"name":"mdi:file-edit","tags":["edit / modify","files / folders"]},{"name":"mdi:file-edit-outline","tags":["edit / modify","files / folders"]},{"name":"mdi:file-excel","tags":["files / folders"]},{"name":"mdi:file-excel-box","tags":["files / folders"]},{"name":"mdi:file-excel-box-outline","tags":["files / folders"]},{"name":"mdi:file-excel-outline","tags":["files / folders"]},{"name":"mdi:file-export","tags":["files / folders"]},{"name":"mdi:file-export-outline","tags":["files / folders"]},{"name":"mdi:file-eye","tags":["files / folders"]},{"name":"mdi:file-eye-outline","tags":["files / folders"]},{"name":"mdi:file-find","tags":["files / folders","print preview","find in page"]},{"name":"mdi:file-find-outline","tags":["files / folders"]},{"name":"mdi:file-gif-box","tags":["files / folders"]},{"name":"mdi:file-hidden","tags":["files / folders"]},{"name":"mdi:file-image","tags":["files / folders"]},{"name":"mdi:file-image-marker","tags":["files / folders","navigation","file image location"]},{"name":"mdi:file-image-marker-outline","tags":["files / folders","navigation","file image location outline"]},{"name":"mdi:file-image-minus","tags":["files / folders"]},{"name":"mdi:file-image-minus-outline","tags":["files / folders"]},{"name":"mdi:file-image-outline","tags":["files / folders"]},{"name":"mdi:file-image-plus","tags":["files / folders","file image add"]},{"name":"mdi:file-image-plus-outline","tags":["files / folders","file image add outline"]},{"name":"mdi:file-image-remove","tags":["files / folders"]},{"name":"mdi:file-image-remove-outline","tags":["files / folders"]},{"name":"mdi:file-import","tags":["files / folders"]},{"name":"mdi:file-import-outline","tags":["files / folders"]},{"name":"mdi:file-jpg-box","tags":["files / folders","file jpeg box","image jpg box","image jpeg box"]},{"name":"mdi:file-key","tags":["files / folders"]},{"name":"mdi:file-key-outline","tags":["files / folders"]},{"name":"mdi:file-link","tags":["files / folders"]},{"name":"mdi:file-link-outline","tags":["files / folders"]},{"name":"mdi:file-lock","tags":["lock","files / folders"]},{"name":"mdi:file-lock-open","tags":["lock","files / folders"]},{"name":"mdi:file-lock-open-outline","tags":["lock","files / folders"]},{"name":"mdi:file-lock-outline","tags":["files / folders","lock"]},{"name":"mdi:file-marker","tags":["files / folders","navigation","file location"]},{"name":"mdi:file-marker-outline","tags":["files / folders","navigation","file location outline"]},{"name":"mdi:file-minus","tags":["files / folders"]},{"name":"mdi:file-minus-outline","tags":["files / folders"]},{"name":"mdi:file-move","tags":["files / folders"]},{"name":"mdi:file-move-outline","tags":["files / folders"]},{"name":"mdi:file-multiple","tags":["files / folders","files"]},{"name":"mdi:file-multiple-outline","tags":["files / folders"]},{"name":"mdi:file-music","tags":["files / folders","music"]},{"name":"mdi:file-music-outline","tags":["files / folders","music"]},{"name":"mdi:file-outline","tags":["files / folders","paper outline"]},{"name":"mdi:file-pdf-box","tags":["files / folders","file acrobat box","adobe acrobat"]},{"name":"mdi:file-percent","tags":["files / folders"]},{"name":"mdi:file-percent-outline","tags":["files / folders"]},{"name":"mdi:file-phone","tags":["files / folders","cellphone / phone"]},{"name":"mdi:file-phone-outline","tags":["files / folders","cellphone / phone"]},{"name":"mdi:file-plus","tags":["files / folders","note add"]},{"name":"mdi:file-plus-outline","tags":["files / folders"]},{"name":"mdi:file-png-box","tags":["files / folders"]},{"name":"mdi:file-powerpoint","tags":["files / folders"]},{"name":"mdi:file-powerpoint-box","tags":["files / folders"]},{"name":"mdi:file-powerpoint-box-outline","tags":["files / folders"]},{"name":"mdi:file-powerpoint-outline","tags":["files / folders"]},{"name":"mdi:file-presentation-box","tags":["files / folders"]},{"name":"mdi:file-question","tags":["files / folders"]},{"name":"mdi:file-question-outline","tags":["files / folders"]},{"name":"mdi:file-refresh","tags":["files / folders"]},{"name":"mdi:file-refresh-outline","tags":["files / folders"]},{"name":"mdi:file-remove","tags":["files / folders"]},{"name":"mdi:file-remove-outline","tags":["files / folders"]},{"name":"mdi:file-replace","tags":["files / folders"]},{"name":"mdi:file-replace-outline","tags":["files / folders"]},{"name":"mdi:file-restore","tags":["files / folders","restore page"]},{"name":"mdi:file-restore-outline","tags":["files / folders"]},{"name":"mdi:file-rotate-left","tags":["files / folders","file rotate counter clockwise","file rotate ccw"]},{"name":"mdi:file-rotate-left-outline","tags":["files / folders","file rotate counter clockwise outline","file rotate ccw outline"]},{"name":"mdi:file-rotate-right","tags":["files / folders","file rotate clockwise"]},{"name":"mdi:file-rotate-right-outline","tags":["files / folders","file rotate clockwise"]},{"name":"mdi:file-search","tags":["files / folders"]},{"name":"mdi:file-search-outline","tags":["files / folders"]},{"name":"mdi:file-send","tags":["files / folders","file move"]},{"name":"mdi:file-send-outline","tags":["files / folders"]},{"name":"mdi:file-settings","tags":["settings","files / folders"]},{"name":"mdi:file-settings-outline","tags":["settings","files / folders"]},{"name":"mdi:file-sign","tags":["banking","files / folders","contract sign","document sign"]},{"name":"mdi:file-star","tags":["files / folders","file favorite"]},{"name":"mdi:file-star-four-points","tags":["files / folders","file auto"]},{"name":"mdi:file-star-four-points-outline","tags":["files / folders","file auto outline"]},{"name":"mdi:file-star-outline","tags":["files / folders","file favorite outline"]},{"name":"mdi:file-swap","tags":["files / folders","file transfer"]},{"name":"mdi:file-swap-outline","tags":["files / folders","file transfer outline"]},{"name":"mdi:file-sync","tags":["files / folders"]},{"name":"mdi:file-sync-outline","tags":["files / folders"]},{"name":"mdi:file-table","tags":["files / folders"]},{"name":"mdi:file-table-box","tags":["files / folders"]},{"name":"mdi:file-table-box-multiple","tags":["files / folders"]},{"name":"mdi:file-table-box-multiple-outline","tags":["files / folders"]},{"name":"mdi:file-table-box-outline","tags":["files / folders"]},{"name":"mdi:file-table-outline","tags":["files / folders"]},{"name":"mdi:file-tree","tags":["files / folders","subtasks"]},{"name":"mdi:file-tree-outline","tags":["files / folders"]},{"name":"mdi:file-undo","tags":["files / folders","file revert","file discard"]},{"name":"mdi:file-undo-outline","tags":["files / folders"]},{"name":"mdi:file-upload","tags":["files / folders"]},{"name":"mdi:file-upload-outline","tags":["files / folders"]},{"name":"mdi:file-video","tags":["video / movie","files / folders"]},{"name":"mdi:file-video-outline","tags":["files / folders"]},{"name":"mdi:file-word","tags":["files / folders"]},{"name":"mdi:file-word-box","tags":["files / folders"]},{"name":"mdi:file-word-box-outline","tags":["files / folders"]},{"name":"mdi:file-word-outline","tags":["files / folders"]},{"name":"mdi:file-xml-box","tags":["files / folders"]},{"name":"mdi:film","tags":["photography","video / movie","camera roll"]},{"name":"mdi:filmstrip","tags":["video / movie","local movies","theaters"]},{"name":"mdi:filmstrip-box","tags":[]},{"name":"mdi:filmstrip-box-multiple","tags":["video / movie","library movie"]},{"name":"mdi:filmstrip-off","tags":["video / movie"]},{"name":"mdi:filter","tags":["funnel"]},{"name":"mdi:filter-check","tags":["funnel check"]},{"name":"mdi:filter-check-outline","tags":["funnel check outline"]},{"name":"mdi:filter-cog","tags":["settings","funnel settings","filter settings","funnel cog","filter gear","funnel gear"]},{"name":"mdi:filter-cog-outline","tags":["settings","filter settings outline","filter gear outline","funnel cog outline","funnel settings outline","funnel gear outline"]},{"name":"mdi:filter-menu","tags":[]},{"name":"mdi:filter-menu-outline","tags":[]},{"name":"mdi:filter-minus","tags":["funnel minus"]},{"name":"mdi:filter-minus-outline","tags":["funnel minus outline"]},{"name":"mdi:filter-multiple","tags":["funnel multiple"]},{"name":"mdi:filter-multiple-outline","tags":["funnel multiple outline"]},{"name":"mdi:filter-off","tags":[]},{"name":"mdi:filter-off-outline","tags":[]},{"name":"mdi:filter-outline","tags":["funnel outline"]},{"name":"mdi:filter-plus","tags":["funnel plus"]},{"name":"mdi:filter-plus-outline","tags":["funnel plus outline"]},{"name":"mdi:filter-remove","tags":["funnel remove"]},{"name":"mdi:filter-remove-outline","tags":["funnel remove outline"]},{"name":"mdi:filter-settings","tags":["settings","funnel settings"]},{"name":"mdi:filter-settings-outline","tags":["settings","funnel settings outline"]},{"name":"mdi:filter-variant","tags":["filter list"]},{"name":"mdi:filter-variant-minus","tags":[]},{"name":"mdi:filter-variant-plus","tags":[]},{"name":"mdi:filter-variant-remove","tags":[]},{"name":"mdi:finance","tags":["banking","math","chart finance","report finance","graph bar"]},{"name":"mdi:find-replace","tags":[]},{"name":"mdi:fingerprint","tags":[]},{"name":"mdi:fingerprint-off","tags":[]},{"name":"mdi:fire","tags":["home automation","whatshot","flame","gas","natural gas","hot"]},{"name":"mdi:fire-alert","tags":["alert / error","home automation","flame alert"]},{"name":"mdi:fire-circle","tags":["home automation","flame circle","hot circle","gas circle","natural gas circle"]},{"name":"mdi:fire-extinguisher","tags":["hardware / tools","home automation"]},{"name":"mdi:fire-hydrant","tags":[]},{"name":"mdi:fire-hydrant-alert","tags":["alert / error"]},{"name":"mdi:fire-hydrant-off","tags":[]},{"name":"mdi:fire-off","tags":["home automation","flame off"]},{"name":"mdi:fire-station","tags":[]},{"name":"mdi:fire-truck","tags":["transportation + road","fire engine"]},{"name":"mdi:firebase","tags":["brand / logo"]},{"name":"mdi:firefox","tags":["brand / logo","mozilla firefox"]},{"name":"mdi:fireplace","tags":["home automation"]},{"name":"mdi:fireplace-off","tags":["home automation"]},{"name":"mdi:firewire","tags":[]},{"name":"mdi:firework","tags":["holiday","bottle rocket"]},{"name":"mdi:firework-off","tags":[]},{"name":"mdi:fish","tags":["animal","food / drink"]},{"name":"mdi:fish-off","tags":["food / drink"]},{"name":"mdi:fishbowl","tags":["animal","aquarium"]},{"name":"mdi:fishbowl-outline","tags":["animal","aquarium outline"]},{"name":"mdi:fit-to-page","tags":["text / content / format","arrow"]},{"name":"mdi:fit-to-page-outline","tags":["text / content / format","arrow"]},{"name":"mdi:fit-to-screen","tags":[]},{"name":"mdi:fit-to-screen-outline","tags":[]},{"name":"mdi:flag","tags":["assistant photo"]},{"name":"mdi:flag-checkered","tags":["sport","goal"]},{"name":"mdi:flag-minus","tags":[]},{"name":"mdi:flag-minus-outline","tags":[]},{"name":"mdi:flag-off","tags":[]},{"name":"mdi:flag-off-outline","tags":[]},{"name":"mdi:flag-outline","tags":[]},{"name":"mdi:flag-plus","tags":["flag add"]},{"name":"mdi:flag-plus-outline","tags":[]},{"name":"mdi:flag-remove","tags":[]},{"name":"mdi:flag-remove-outline","tags":[]},{"name":"mdi:flag-triangle","tags":["milestone"]},{"name":"mdi:flag-variant","tags":[]},{"name":"mdi:flag-variant-minus","tags":[]},{"name":"mdi:flag-variant-minus-outline","tags":[]},{"name":"mdi:flag-variant-off","tags":[]},{"name":"mdi:flag-variant-off-outline","tags":[]},{"name":"mdi:flag-variant-outline","tags":[]},{"name":"mdi:flag-variant-plus","tags":[]},{"name":"mdi:flag-variant-plus-outline","tags":[]},{"name":"mdi:flag-variant-remove","tags":[]},{"name":"mdi:flag-variant-remove-outline","tags":[]},{"name":"mdi:flare","tags":["star"]},{"name":"mdi:flash","tags":["weather","lightning bolt","flash on","electricity"]},{"name":"mdi:flash-alert","tags":["weather","alert / error","lightning alert","storm advisory"]},{"name":"mdi:flash-alert-outline","tags":["weather","alert / error","lightning alert outline","storm advisory outline"]},{"name":"mdi:flash-auto","tags":[]},{"name":"mdi:flash-off","tags":[]},{"name":"mdi:flash-off-outline","tags":[]},{"name":"mdi:flash-outline","tags":["weather","lightning bolt outline"]},{"name":"mdi:flash-red-eye","tags":[]},{"name":"mdi:flash-triangle","tags":["home automation","high voltage"]},{"name":"mdi:flash-triangle-outline","tags":["home automation","high voltage outline"]},{"name":"mdi:flashlight","tags":["torch"]},{"name":"mdi:flashlight-off","tags":["torch off"]},{"name":"mdi:flask","tags":["science","gaming / rpg"]},{"name":"mdi:flask-empty","tags":["science","gaming / rpg"]},{"name":"mdi:flask-empty-minus","tags":["science"]},{"name":"mdi:flask-empty-minus-outline","tags":["science"]},{"name":"mdi:flask-empty-off","tags":[]},{"name":"mdi:flask-empty-off-outline","tags":[]},{"name":"mdi:flask-empty-outline","tags":["science","gaming / rpg"]},{"name":"mdi:flask-empty-plus","tags":["science"]},{"name":"mdi:flask-empty-plus-outline","tags":["science"]},{"name":"mdi:flask-empty-remove","tags":["science"]},{"name":"mdi:flask-empty-remove-outline","tags":["science"]},{"name":"mdi:flask-minus","tags":["science"]},{"name":"mdi:flask-minus-outline","tags":["science"]},{"name":"mdi:flask-off","tags":[]},{"name":"mdi:flask-off-outline","tags":[]},{"name":"mdi:flask-outline","tags":["science","gaming / rpg"]},{"name":"mdi:flask-plus","tags":["science"]},{"name":"mdi:flask-plus-outline","tags":["science"]},{"name":"mdi:flask-remove","tags":["science"]},{"name":"mdi:flask-remove-outline","tags":["science"]},{"name":"mdi:flask-round-bottom","tags":["science"]},{"name":"mdi:flask-round-bottom-empty","tags":["science"]},{"name":"mdi:flask-round-bottom-empty-outline","tags":["science"]},{"name":"mdi:flask-round-bottom-outline","tags":["science"]},{"name":"mdi:fleur-de-lis","tags":[]},{"name":"mdi:flip-horizontal","tags":["arrange"]},{"name":"mdi:flip-to-back","tags":["arrange"]},{"name":"mdi:flip-to-front","tags":["arrange"]},{"name":"mdi:flip-vertical","tags":["arrange"]},{"name":"mdi:floor-lamp","tags":["home automation","floor light"]},{"name":"mdi:floor-lamp-dual","tags":["home automation","floor light dual"]},{"name":"mdi:floor-lamp-dual-outline","tags":["home automation","floor light dual outline"]},{"name":"mdi:floor-lamp-outline","tags":["home automation","floor light outline"]},{"name":"mdi:floor-lamp-torchiere","tags":["home automation","floor light torchiere"]},{"name":"mdi:floor-lamp-torchiere-outline","tags":["home automation"]},{"name":"mdi:floor-lamp-torchiere-variant","tags":["home automation","floor light torchiere variant"]},{"name":"mdi:floor-lamp-torchiere-variant-outline","tags":["home automation","floor light torchiere variant outline"]},{"name":"mdi:floor-plan","tags":["home automation"]},{"name":"mdi:floppy","tags":[]},{"name":"mdi:floppy-variant","tags":[]},{"name":"mdi:flower","tags":["nature","agriculture","local florist","plant"]},{"name":"mdi:flower-outline","tags":["nature","agriculture","local florist outline","plant"]},{"name":"mdi:flower-pollen","tags":["nature","agriculture","allergy"]},{"name":"mdi:flower-pollen-outline","tags":["nature","agriculture","allergy outline"]},{"name":"mdi:flower-poppy","tags":["nature","agriculture","plant"]},{"name":"mdi:flower-tulip","tags":["nature","agriculture","plant"]},{"name":"mdi:flower-tulip-outline","tags":["nature","agriculture","plant"]},{"name":"mdi:focus-auto","tags":["photography"]},{"name":"mdi:focus-field","tags":["photography"]},{"name":"mdi:focus-field-horizontal","tags":["photography"]},{"name":"mdi:focus-field-vertical","tags":["photography"]},{"name":"mdi:folder","tags":["files / folders"]},{"name":"mdi:folder-account","tags":["account / user","files / folders","folder user","folder shared"]},{"name":"mdi:folder-account-outline","tags":["files / folders","account / user","folder user outline","folder shared outline"]},{"name":"mdi:folder-alert","tags":["files / folders","alert / error","folder warning"]},{"name":"mdi:folder-alert-outline","tags":["files / folders","alert / error","folder warning outline"]},{"name":"mdi:folder-arrow-down","tags":["files / folders","folder download"]},{"name":"mdi:folder-arrow-down-outline","tags":["files / folders","folder download outline"]},{"name":"mdi:folder-arrow-left","tags":["files / folders"]},{"name":"mdi:folder-arrow-left-outline","tags":["files / folders"]},{"name":"mdi:folder-arrow-left-right","tags":["files / folders"]},{"name":"mdi:folder-arrow-left-right-outline","tags":["files / folders"]},{"name":"mdi:folder-arrow-right","tags":["files / folders"]},{"name":"mdi:folder-arrow-right-outline","tags":["files / folders"]},{"name":"mdi:folder-arrow-up","tags":["files / folders","folder upload"]},{"name":"mdi:folder-arrow-up-down","tags":["files / folders","folder transfer"]},{"name":"mdi:folder-arrow-up-down-outline","tags":["files / folders","folder transfer outline"]},{"name":"mdi:folder-arrow-up-outline","tags":["files / folders","folder upload outline"]},{"name":"mdi:folder-cancel","tags":["files / folders"]},{"name":"mdi:folder-cancel-outline","tags":["files / folders"]},{"name":"mdi:folder-check","tags":["files / folders"]},{"name":"mdi:folder-check-outline","tags":["files / folders"]},{"name":"mdi:folder-clock","tags":["files / folders","date / time"]},{"name":"mdi:folder-clock-outline","tags":["files / folders","date / time"]},{"name":"mdi:folder-cog","tags":["settings","files / folders","folder cog"]},{"name":"mdi:folder-cog-outline","tags":["settings","files / folders","folder cog outline"]},{"name":"mdi:folder-download","tags":["files / folders"]},{"name":"mdi:folder-download-outline","tags":["files / folders"]},{"name":"mdi:folder-edit","tags":["files / folders","edit / modify"]},{"name":"mdi:folder-edit-outline","tags":["edit / modify","files / folders"]},{"name":"mdi:folder-eye","tags":["files / folders"]},{"name":"mdi:folder-eye-outline","tags":["files / folders"]},{"name":"mdi:folder-file","tags":["files / folders"]},{"name":"mdi:folder-file-outline","tags":["files / folders"]},{"name":"mdi:folder-google-drive","tags":["files / folders","brand / logo","folder mydrive"]},{"name":"mdi:folder-heart","tags":["files / folders"]},{"name":"mdi:folder-heart-outline","tags":["files / folders"]},{"name":"mdi:folder-hidden","tags":["files / folders"]},{"name":"mdi:folder-home","tags":["files / folders","home automation","folder house"]},{"name":"mdi:folder-home-outline","tags":["files / folders","home automation","folder house outline"]},{"name":"mdi:folder-image","tags":["files / folders"]},{"name":"mdi:folder-information","tags":["files / folders"]},{"name":"mdi:folder-information-outline","tags":["files / folders"]},{"name":"mdi:folder-key","tags":["files / folders"]},{"name":"mdi:folder-key-network","tags":["files / folders"]},{"name":"mdi:folder-key-network-outline","tags":["files / folders"]},{"name":"mdi:folder-key-outline","tags":["files / folders"]},{"name":"mdi:folder-lock","tags":["lock","files / folders"]},{"name":"mdi:folder-lock-open","tags":["lock","files / folders"]},{"name":"mdi:folder-lock-open-outline","tags":["files / folders","lock"]},{"name":"mdi:folder-lock-outline","tags":["files / folders","lock"]},{"name":"mdi:folder-marker","tags":["geographic information system","files / folders","navigation","folder location"]},{"name":"mdi:folder-marker-outline","tags":["geographic information system","files / folders","navigation","folder location outline"]},{"name":"mdi:folder-minus","tags":["files / folders"]},{"name":"mdi:folder-minus-outline","tags":["files / folders"]},{"name":"mdi:folder-move","tags":["files / folders"]},{"name":"mdi:folder-move-outline","tags":["files / folders"]},{"name":"mdi:folder-multiple","tags":["files / folders","folders"]},{"name":"mdi:folder-multiple-image","tags":["files / folders","perm media","folders image"]},{"name":"mdi:folder-multiple-outline","tags":["files / folders","folders outline"]},{"name":"mdi:folder-multiple-plus","tags":["files / folders"]},{"name":"mdi:folder-multiple-plus-outline","tags":["files / folders"]},{"name":"mdi:folder-music","tags":["files / folders","music"]},{"name":"mdi:folder-music-outline","tags":["files / folders","music"]},{"name":"mdi:folder-network","tags":["files / folders"]},{"name":"mdi:folder-network-outline","tags":["files / folders"]},{"name":"mdi:folder-off","tags":["files / folders"]},{"name":"mdi:folder-off-outline","tags":["files / folders"]},{"name":"mdi:folder-open","tags":["files / folders"]},{"name":"mdi:folder-open-outline","tags":["files / folders"]},{"name":"mdi:folder-outline","tags":["files / folders","folder open"]},{"name":"mdi:folder-play","tags":["files / folders","folder media","folder music","folder video"]},{"name":"mdi:folder-play-outline","tags":["files / folders","folder media outline","folder music outline","folder video outline"]},{"name":"mdi:folder-plus","tags":["files / folders","create new folder","folder add"]},{"name":"mdi:folder-plus-outline","tags":["files / folders","create new folder outline","folder add outline"]},{"name":"mdi:folder-pound","tags":["files / folders","developer / languages","folder hash"]},{"name":"mdi:folder-pound-outline","tags":["files / folders","developer / languages","folder hash outline"]},{"name":"mdi:folder-question","tags":["files / folders","folder help"]},{"name":"mdi:folder-question-outline","tags":["files / folders","folder help outline"]},{"name":"mdi:folder-refresh","tags":["files / folders"]},{"name":"mdi:folder-refresh-outline","tags":["files / folders"]},{"name":"mdi:folder-remove","tags":["files / folders"]},{"name":"mdi:folder-remove-outline","tags":["files / folders"]},{"name":"mdi:folder-search","tags":["files / folders"]},{"name":"mdi:folder-search-outline","tags":["files / folders"]},{"name":"mdi:folder-settings","tags":["settings","files / folders"]},{"name":"mdi:folder-settings-outline","tags":["settings","files / folders"]},{"name":"mdi:folder-star","tags":["files / folders","folder special","folder favorite"]},{"name":"mdi:folder-star-multiple","tags":["files / folders","folder favorite multiple"]},{"name":"mdi:folder-star-multiple-outline","tags":["files / folders","folder favorite multiple outline"]},{"name":"mdi:folder-star-outline","tags":["files / folders","folder special outline","folder favorite outline"]},{"name":"mdi:folder-swap","tags":["files / folders","folder transfer"]},{"name":"mdi:folder-swap-outline","tags":["files / folders","folder transfer outline"]},{"name":"mdi:folder-sync","tags":["files / folders"]},{"name":"mdi:folder-sync-outline","tags":["files / folders"]},{"name":"mdi:folder-table","tags":["files / folders"]},{"name":"mdi:folder-table-outline","tags":["files / folders"]},{"name":"mdi:folder-text","tags":["files / folders"]},{"name":"mdi:folder-text-outline","tags":["files / folders"]},{"name":"mdi:folder-upload","tags":["files / folders"]},{"name":"mdi:folder-upload-outline","tags":["files / folders"]},{"name":"mdi:folder-wrench","tags":["files / folders","folder settings"]},{"name":"mdi:folder-wrench-outline","tags":["files / folders","folder settings outline"]},{"name":"mdi:folder-zip","tags":["files / folders","compressed folder"]},{"name":"mdi:folder-zip-outline","tags":["files / folders","compressed folder outline"]},{"name":"mdi:font-awesome","tags":["brand / logo"]},{"name":"mdi:food","tags":["food / drink","fast food","burger","cup","drink","hamburger"]},{"name":"mdi:food-apple","tags":["food / drink","agriculture"]},{"name":"mdi:food-apple-outline","tags":["food / drink","agriculture"]},{"name":"mdi:food-croissant","tags":["food / drink"]},{"name":"mdi:food-drumstick","tags":["food / drink","chicken leg","turkey leg","meat"]},{"name":"mdi:food-drumstick-off","tags":["food / drink","chicken leg off","turkey leg off","meat off"]},{"name":"mdi:food-drumstick-off-outline","tags":["food / drink","chicken leg off outline","turkey leg off outline","meat off outline"]},{"name":"mdi:food-drumstick-outline","tags":["food / drink","chicken leg outline","turkey leg outline","meat outline"]},{"name":"mdi:food-fork-drink","tags":["food / drink","food fork cup"]},{"name":"mdi:food-halal","tags":["food / drink","food muslim","dietary restriction"]},{"name":"mdi:food-hot-dog","tags":["food / drink","food weiner","food frankfurter"]},{"name":"mdi:food-kosher","tags":["food / drink","food jewish","dietary restriction"]},{"name":"mdi:food-off","tags":["food / drink","fast food off","burger off","cup off","drink off","hamburger off"]},{"name":"mdi:food-off-outline","tags":["food / drink"]},{"name":"mdi:food-outline","tags":["food / drink"]},{"name":"mdi:food-steak","tags":["food / drink","meat","beef"]},{"name":"mdi:food-steak-off","tags":["food / drink","meat off","beef off"]},{"name":"mdi:food-takeout-box","tags":["food / drink"]},{"name":"mdi:food-takeout-box-outline","tags":["food / drink"]},{"name":"mdi:food-turkey","tags":["food / drink","holiday","dinner","thanksgiving"]},{"name":"mdi:food-variant","tags":["food / drink"]},{"name":"mdi:food-variant-off","tags":["food / drink"]},{"name":"mdi:foot-print","tags":[]},{"name":"mdi:football","tags":["sport","football american"]},{"name":"mdi:football-australian","tags":["sport"]},{"name":"mdi:football-helmet","tags":["sport"]},{"name":"mdi:forest","tags":["nature","agriculture","places","forestry","pine tree multiple"]},{"name":"mdi:forest-outline","tags":["nature","agriculture","places","forestry outline","pine tree multiple outline"]},{"name":"mdi:forklift","tags":["transportation + road"]},{"name":"mdi:form-dropdown","tags":["form"]},{"name":"mdi:form-select","tags":["form"]},{"name":"mdi:form-textarea","tags":["form"]},{"name":"mdi:form-textbox","tags":["form","rename"]},{"name":"mdi:form-textbox-lock","tags":["form","lock"]},{"name":"mdi:form-textbox-password","tags":["form"]},{"name":"mdi:format-align-bottom","tags":["text / content / format"]},{"name":"mdi:format-align-center","tags":["text / content / format","format align centre"]},{"name":"mdi:format-align-justify","tags":["text / content / format"]},{"name":"mdi:format-align-left","tags":["text / content / format"]},{"name":"mdi:format-align-middle","tags":["text / content / format"]},{"name":"mdi:format-align-right","tags":["text / content / format"]},{"name":"mdi:format-align-top","tags":["text / content / format"]},{"name":"mdi:format-annotation-minus","tags":["text / content / format"]},{"name":"mdi:format-annotation-plus","tags":["text / content / format","format annotation add"]},{"name":"mdi:format-bold","tags":["text / content / format"]},{"name":"mdi:format-clear","tags":["text / content / format"]},{"name":"mdi:format-color-fill","tags":["text / content / format","color","format colour fill","paint","paint bucket","ink color","ink colour"]},{"name":"mdi:format-color-highlight","tags":["color","text / content / format","format colour highlight"]},{"name":"mdi:format-color-marker-cancel","tags":["text / content / format","color","format color redact"]},{"name":"mdi:format-color-text","tags":["text / content / format","color","format colour text"]},{"name":"mdi:format-columns","tags":["text / content / format"]},{"name":"mdi:format-float-center","tags":["text / content / format","format float centre"]},{"name":"mdi:format-float-left","tags":["text / content / format"]},{"name":"mdi:format-float-none","tags":["text / content / format"]},{"name":"mdi:format-float-right","tags":["text / content / format"]},{"name":"mdi:format-font","tags":["text / content / format"]},{"name":"mdi:format-font-size-decrease","tags":["text / content / format"]},{"name":"mdi:format-font-size-increase","tags":["text / content / format"]},{"name":"mdi:format-header-1","tags":["text / content / format","format heading 1"]},{"name":"mdi:format-header-2","tags":["text / content / format","format heading 2"]},{"name":"mdi:format-header-3","tags":["text / content / format","format heading 3"]},{"name":"mdi:format-header-4","tags":["text / content / format","format heading 4"]},{"name":"mdi:format-header-5","tags":["text / content / format","format heading 5"]},{"name":"mdi:format-header-6","tags":["text / content / format","format heading 6"]},{"name":"mdi:format-header-decrease","tags":["text / content / format","format heading decease"]},{"name":"mdi:format-header-equal","tags":["text / content / format","format heading equal"]},{"name":"mdi:format-header-increase","tags":["text / content / format","format heading increase"]},{"name":"mdi:format-header-pound","tags":["text / content / format","format header hash","format heading pound","format heading hash","format heading markdown"]},{"name":"mdi:format-horizontal-align-center","tags":["text / content / format","format horizontal align centre","arrow horizontal collapse"]},{"name":"mdi:format-horizontal-align-left","tags":["text / content / format"]},{"name":"mdi:format-horizontal-align-right","tags":["text / content / format"]},{"name":"mdi:format-indent-decrease","tags":["text / content / format"]},{"name":"mdi:format-indent-increase","tags":["text / content / format"]},{"name":"mdi:format-italic","tags":["text / content / format"]},{"name":"mdi:format-letter-case","tags":["text / content / format"]},{"name":"mdi:format-letter-case-lower","tags":["text / content / format","format lowercase"]},{"name":"mdi:format-letter-case-upper","tags":["text / content / format","format uppercase"]},{"name":"mdi:format-letter-ends-with","tags":["text / content / format"]},{"name":"mdi:format-letter-matches","tags":["text / content / format"]},{"name":"mdi:format-letter-spacing","tags":["text / content / format","format kerning"]},{"name":"mdi:format-letter-spacing-variant","tags":["text / content / format"]},{"name":"mdi:format-letter-starts-with","tags":["text / content / format"]},{"name":"mdi:format-line-height","tags":["text / content / format"]},{"name":"mdi:format-line-spacing","tags":["text / content / format"]},{"name":"mdi:format-line-style","tags":["text / content / format","drawing / art"]},{"name":"mdi:format-line-weight","tags":["text / content / format","drawing / art"]},{"name":"mdi:format-list-bulleted","tags":["text / content / format"]},{"name":"mdi:format-list-bulleted-square","tags":["text / content / format"]},{"name":"mdi:format-list-bulleted-triangle","tags":["text / content / format"]},{"name":"mdi:format-list-bulleted-type","tags":["text / content / format"]},{"name":"mdi:format-list-checkbox","tags":["text / content / format"]},{"name":"mdi:format-list-checks","tags":["text / content / format","to do"]},{"name":"mdi:format-list-group","tags":["text / content / format"]},{"name":"mdi:format-list-group-plus","tags":["text / content / format","format list group add"]},{"name":"mdi:format-list-numbered","tags":["text / content / format","format list numbers"]},{"name":"mdi:format-list-numbered-rtl","tags":["text / content / format","format list numbered right to left"]},{"name":"mdi:format-list-text","tags":["text / content / format"]},{"name":"mdi:format-overline","tags":["text / content / format"]},{"name":"mdi:format-page-break","tags":["text / content / format"]},{"name":"mdi:format-page-split","tags":["text / content / format"]},{"name":"mdi:format-paint","tags":["text / content / format","color","drawing / art"]},{"name":"mdi:format-paragraph","tags":["text / content / format"]},{"name":"mdi:format-paragraph-spacing","tags":["text / content / format"]},{"name":"mdi:format-pilcrow","tags":["text / content / format"]},{"name":"mdi:format-pilcrow-arrow-left","tags":["text / content / format","format textdirection r to l"]},{"name":"mdi:format-pilcrow-arrow-right","tags":["text / content / format","format textdirection l to r"]},{"name":"mdi:format-quote-close","tags":["text / content / format"]},{"name":"mdi:format-quote-close-outline","tags":["text / content / format"]},{"name":"mdi:format-quote-open","tags":["text / content / format"]},{"name":"mdi:format-quote-open-outline","tags":["text / content / format"]},{"name":"mdi:format-rotate-90","tags":["text / content / format","rotate 90 degrees ccw","format rotate ninety"]},{"name":"mdi:format-section","tags":["text / content / format"]},{"name":"mdi:format-size","tags":["text / content / format","font size"]},{"name":"mdi:format-strikethrough","tags":["text / content / format"]},{"name":"mdi:format-strikethrough-variant","tags":["text / content / format","strikethrough s"]},{"name":"mdi:format-subscript","tags":["text / content / format"]},{"name":"mdi:format-superscript","tags":["text / content / format","math","exponent"]},{"name":"mdi:format-text","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-angle-down","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-angle-up","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-down","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-down-vertical","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-none","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-up","tags":["text / content / format"]},{"name":"mdi:format-text-rotation-vertical","tags":["text / content / format"]},{"name":"mdi:format-text-variant","tags":["text / content / format"]},{"name":"mdi:format-text-variant-outline","tags":["text / content / format"]},{"name":"mdi:format-text-wrapping-clip","tags":["text / content / format"]},{"name":"mdi:format-text-wrapping-overflow","tags":["text / content / format"]},{"name":"mdi:format-text-wrapping-wrap","tags":["text / content / format"]},{"name":"mdi:format-textbox","tags":["text / content / format"]},{"name":"mdi:format-title","tags":["text / content / format"]},{"name":"mdi:format-underline","tags":["text / content / format","format underlined"]},{"name":"mdi:format-underline-wavy","tags":["text / content / format"]},{"name":"mdi:format-vertical-align-bottom","tags":["text / content / format"]},{"name":"mdi:format-vertical-align-center","tags":["text / content / format","format vertical align centre","arrow vertical collapse"]},{"name":"mdi:format-vertical-align-top","tags":["text / content / format"]},{"name":"mdi:format-wrap-inline","tags":["text / content / format"]},{"name":"mdi:format-wrap-square","tags":["text / content / format"]},{"name":"mdi:format-wrap-tight","tags":["text / content / format"]},{"name":"mdi:format-wrap-top-bottom","tags":["text / content / format"]},{"name":"mdi:forum","tags":["message group","question answer","chat","dialogue","conversation","discussion"]},{"name":"mdi:forum-minus","tags":["discussion minus","conversation minus","dialogue minus","chat minus","forum subtract","chat subtract"]},{"name":"mdi:forum-minus-outline","tags":["dialogue minus outline","chat minus outline","forum subtract outline","chat subtract outline","conversation minus outline","discussion minus outline"]},{"name":"mdi:forum-outline","tags":["chat outline","dialogue outline","discussion outline","conversation outline"]},{"name":"mdi:forum-plus","tags":["chat plus","forum add","chat add","dialogue plus","conversation plus","discussion plus"]},{"name":"mdi:forum-plus-outline","tags":["chat plus outline","chat add outline","forum add outline","dialogue plus outline","conversation plus outline","discussion plus outline"]},{"name":"mdi:forum-remove","tags":["forum delete","chat remove","chat delete","dialogue remove","conversation remove","discussion remove"]},{"name":"mdi:forum-remove-outline","tags":["forum delete outline","chat remove outline","chat delete outline","dialogue remove outline","conversation remove outline","discussion remove outline"]},{"name":"mdi:forward","tags":["arrow"]},{"name":"mdi:forwardburger","tags":[]},{"name":"mdi:fountain","tags":[]},{"name":"mdi:fountain-pen","tags":["drawing / art"]},{"name":"mdi:fountain-pen-tip","tags":["drawing / art"]},{"name":"mdi:fraction-one-half","tags":[]},{"name":"mdi:freebsd","tags":["brand / logo"]},{"name":"mdi:french-fries","tags":["food / drink","chips","finger chips","french fry","fried potatoes","fries","frites"]},{"name":"mdi:frequently-asked-questions","tags":["faq"]},{"name":"mdi:fridge","tags":["home automation","fridge filled","refrigerator","kitchen"]},{"name":"mdi:fridge-alert","tags":["home automation","alert / error"]},{"name":"mdi:fridge-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:fridge-bottom","tags":["home automation","fridge filled top","refrigerator bottom"]},{"name":"mdi:fridge-industrial","tags":["home automation"]},{"name":"mdi:fridge-industrial-alert","tags":["home automation","alert / error"]},{"name":"mdi:fridge-industrial-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:fridge-industrial-off","tags":["home automation"]},{"name":"mdi:fridge-industrial-off-outline","tags":["home automation"]},{"name":"mdi:fridge-industrial-outline","tags":["home automation"]},{"name":"mdi:fridge-off","tags":["home automation"]},{"name":"mdi:fridge-off-outline","tags":["home automation"]},{"name":"mdi:fridge-outline","tags":["home automation","kitchen","refrigerator outline"]},{"name":"mdi:fridge-top","tags":["home automation","fridge filled bottom","refrigerator top"]},{"name":"mdi:fridge-variant","tags":["home automation"]},{"name":"mdi:fridge-variant-alert","tags":["home automation","alert / error"]},{"name":"mdi:fridge-variant-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:fridge-variant-off","tags":["home automation"]},{"name":"mdi:fridge-variant-off-outline","tags":["home automation"]},{"name":"mdi:fridge-variant-outline","tags":["home automation"]},{"name":"mdi:fruit-cherries","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-cherries-off","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-citrus","tags":["food / drink","agriculture","fruit lemon","fruit lime"]},{"name":"mdi:fruit-citrus-off","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-grapes","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-grapes-outline","tags":["food / drink","agriculture"]},{"name":"mdi:fruit-pear","tags":["food / drink"]},{"name":"mdi:fruit-pineapple","tags":["food / drink","agriculture","fruit ananas"]},{"name":"mdi:fruit-watermelon","tags":["food / drink","agriculture"]},{"name":"mdi:fuel","tags":["automotive","petrol","gasoline"]},{"name":"mdi:fuel-cell","tags":["automotive","battery","battery"]},{"name":"mdi:fullscreen","tags":[]},{"name":"mdi:fullscreen-exit","tags":[]},{"name":"mdi:function","tags":["math"]},{"name":"mdi:function-variant","tags":["math"]},{"name":"mdi:furigana-horizontal","tags":["text / content / format","ruby horizontal"]},{"name":"mdi:furigana-vertical","tags":["text / content / format","zhuyin","ruby vertical"]},{"name":"mdi:fuse","tags":["automotive"]},{"name":"mdi:fuse-alert","tags":["automotive","alert / error"]},{"name":"mdi:fuse-blade","tags":["automotive"]},{"name":"mdi:fuse-off","tags":["automotive"]},{"name":"mdi:gamepad","tags":["home automation","gaming / rpg","games","controller"]},{"name":"mdi:gamepad-circle","tags":["gaming / rpg","controller circle"]},{"name":"mdi:gamepad-circle-down","tags":["gaming / rpg","controller circle down"]},{"name":"mdi:gamepad-circle-left","tags":["gaming / rpg","controller circle left"]},{"name":"mdi:gamepad-circle-outline","tags":["gaming / rpg","controller circle outline"]},{"name":"mdi:gamepad-circle-right","tags":["gaming / rpg","controller circle right"]},{"name":"mdi:gamepad-circle-up","tags":["gaming / rpg","controller circle up"]},{"name":"mdi:gamepad-down","tags":["gaming / rpg","controller down"]},{"name":"mdi:gamepad-left","tags":["gaming / rpg","controller left"]},{"name":"mdi:gamepad-outline","tags":["gaming / rpg","home automation","controller outline","games outline"]},{"name":"mdi:gamepad-right","tags":["gaming / rpg","controller right"]},{"name":"mdi:gamepad-round","tags":["gaming / rpg","controller round"]},{"name":"mdi:gamepad-round-down","tags":["gaming / rpg","controller round down"]},{"name":"mdi:gamepad-round-left","tags":["gaming / rpg","controller round left"]},{"name":"mdi:gamepad-round-outline","tags":["gaming / rpg","controller round outline"]},{"name":"mdi:gamepad-round-right","tags":["gaming / rpg","controller round right"]},{"name":"mdi:gamepad-round-up","tags":["gaming / rpg","controller round up"]},{"name":"mdi:gamepad-square","tags":["gaming / rpg","controller square"]},{"name":"mdi:gamepad-square-outline","tags":["gaming / rpg","controller square outline"]},{"name":"mdi:gamepad-up","tags":["gaming / rpg","controller up"]},{"name":"mdi:gamepad-variant","tags":["gaming / rpg","controller variant"]},{"name":"mdi:gamepad-variant-outline","tags":["gaming / rpg","controller variant outline"]},{"name":"mdi:gamma","tags":["alpha / numeric"]},{"name":"mdi:gantry-crane","tags":[]},{"name":"mdi:garage","tags":["home automation"]},{"name":"mdi:garage-alert","tags":["home automation","alert / error","garage warning"]},{"name":"mdi:garage-alert-variant","tags":["home automation","alert / error"]},{"name":"mdi:garage-lock","tags":["home automation","lock"]},{"name":"mdi:garage-open","tags":["home automation"]},{"name":"mdi:garage-open-variant","tags":["home automation"]},{"name":"mdi:garage-variant","tags":["home automation"]},{"name":"mdi:garage-variant-lock","tags":["home automation","lock"]},{"name":"mdi:gas-burner","tags":["home automation","stove burner","cooktop burner","grill","natural gas","energy"]},{"name":"mdi:gas-cylinder","tags":["tank","oxygen tank"]},{"name":"mdi:gas-station","tags":["places","automotive","gas pump","petrol pump","petrol station","local gas station","fuel station","fuel pump"]},{"name":"mdi:gas-station-in-use","tags":[]},{"name":"mdi:gas-station-in-use-outline","tags":[]},{"name":"mdi:gas-station-off","tags":[]},{"name":"mdi:gas-station-off-outline","tags":[]},{"name":"mdi:gas-station-outline","tags":["gas pump outline","petrol pump outline","petrol station outline","fuel station outline","fuel pump outline"]},{"name":"mdi:gate","tags":["home automation"]},{"name":"mdi:gate-alert","tags":["home automation","alert / error"]},{"name":"mdi:gate-and","tags":["logic gate and"]},{"name":"mdi:gate-arrow-left","tags":["home automation"]},{"name":"mdi:gate-arrow-right","tags":["home automation"]},{"name":"mdi:gate-buffer","tags":[]},{"name":"mdi:gate-nand","tags":["logic gate nand"]},{"name":"mdi:gate-nor","tags":["logic gate nor"]},{"name":"mdi:gate-not","tags":["logic gate not"]},{"name":"mdi:gate-open","tags":["home automation"]},{"name":"mdi:gate-or","tags":["logic gate or"]},{"name":"mdi:gate-xnor","tags":["logic gate xnor"]},{"name":"mdi:gate-xor","tags":["logic gate xor"]},{"name":"mdi:gatsby","tags":["developer / languages","brand / logo"]},{"name":"mdi:gauge","tags":["home automation","automotive","swap driving apps wheel","barometer"]},{"name":"mdi:gauge-empty","tags":["automotive","home automation"]},{"name":"mdi:gauge-full","tags":["automotive","home automation"]},{"name":"mdi:gauge-low","tags":["automotive","home automation"]},{"name":"mdi:gavel","tags":["court hammer"]},{"name":"mdi:gender-female","tags":["venus"]},{"name":"mdi:gender-male","tags":["mars"]},{"name":"mdi:gender-male-female","tags":[]},{"name":"mdi:gender-male-female-variant","tags":["mercury"]},{"name":"mdi:gender-non-binary","tags":["gender enby"]},{"name":"mdi:gender-transgender","tags":[]},{"name":"mdi:generator-mobile","tags":["home automation","transportation + other","power generator","electricity generator"]},{"name":"mdi:generator-portable","tags":["home automation","power generator","electricity generator"]},{"name":"mdi:generator-stationary","tags":["home automation","power generator","electricity generator"]},{"name":"mdi:gentoo","tags":["brand / logo"]},{"name":"mdi:gesture","tags":["drawing / art","freehand line"]},{"name":"mdi:gesture-double-tap","tags":["interaction double tap","hand double tap"]},{"name":"mdi:gesture-pinch","tags":[]},{"name":"mdi:gesture-spread","tags":[]},{"name":"mdi:gesture-swipe","tags":[]},{"name":"mdi:gesture-swipe-down","tags":[]},{"name":"mdi:gesture-swipe-horizontal","tags":[]},{"name":"mdi:gesture-swipe-left","tags":[]},{"name":"mdi:gesture-swipe-right","tags":[]},{"name":"mdi:gesture-swipe-up","tags":[]},{"name":"mdi:gesture-swipe-vertical","tags":[]},{"name":"mdi:gesture-tap","tags":["interaction tap","hand tap","gesture touch"]},{"name":"mdi:gesture-tap-box","tags":["gesture touch box"]},{"name":"mdi:gesture-tap-button","tags":["form","call to action","cta","button pointer","gesture touch button"]},{"name":"mdi:gesture-tap-hold","tags":["gesture touch hold"]},{"name":"mdi:gesture-two-double-tap","tags":[]},{"name":"mdi:gesture-two-tap","tags":[]},{"name":"mdi:ghost","tags":["gaming / rpg","inky","blinky","pinky","clyde"]},{"name":"mdi:ghost-off","tags":["gaming / rpg"]},{"name":"mdi:ghost-off-outline","tags":["gaming / rpg"]},{"name":"mdi:ghost-outline","tags":["gaming / rpg"]},{"name":"mdi:gift","tags":["holiday","present","package","donate"]},{"name":"mdi:gift-off","tags":["holiday","present off","package off","donate off"]},{"name":"mdi:gift-off-outline","tags":["holiday","present off outline","package off outline","donate off outline"]},{"name":"mdi:gift-open","tags":["holiday","present open","package open"]},{"name":"mdi:gift-open-outline","tags":["holiday","present open outline","package open outline"]},{"name":"mdi:gift-outline","tags":["shopping","holiday","donate outline","present outline","package outline"]},{"name":"mdi:git","tags":["brand / logo","developer / languages"]},{"name":"mdi:github","tags":["developer / languages","brand / logo","microsoft github"]},{"name":"mdi:gitlab","tags":["developer / languages","brand / logo"]},{"name":"mdi:glass-cocktail","tags":["food / drink","local bar","cocktail","martini","alcohol","bar","cup","drink"]},{"name":"mdi:glass-cocktail-off","tags":["food / drink"]},{"name":"mdi:glass-flute","tags":["food / drink","alcohol","cocktail","cup","drink"]},{"name":"mdi:glass-fragile","tags":["food / drink","glass broken"]},{"name":"mdi:glass-mug","tags":["food / drink","pub","bar","beer","alcohol","cup","drink","local bar"]},{"name":"mdi:glass-mug-off","tags":["food / drink"]},{"name":"mdi:glass-mug-variant","tags":["food / drink","pub","bar","beer","drink","alcohol","cup","local bar"]},{"name":"mdi:glass-mug-variant-off","tags":["food / drink"]},{"name":"mdi:glass-pint-outline","tags":["food / drink"]},{"name":"mdi:glass-stange","tags":["food / drink","alcohol","bar","cocktail","cup","drink"]},{"name":"mdi:glass-tulip","tags":["food / drink","bar","alcohol","cocktail","cup","drink"]},{"name":"mdi:glass-wine","tags":["food / drink","bar","alcohol","cocktail","cup","drink"]},{"name":"mdi:glasses","tags":["clothing"]},{"name":"mdi:globe-light","tags":["home automation"]},{"name":"mdi:globe-light-outline","tags":["home automation"]},{"name":"mdi:globe-model","tags":[]},{"name":"mdi:gmail","tags":["brand / logo"]},{"name":"mdi:gnome","tags":["brand / logo"]},{"name":"mdi:go-kart","tags":["sport","cart"]},{"name":"mdi:go-kart-track","tags":[]},{"name":"mdi:gog","tags":["brand / logo","gaming / rpg","gog com"]},{"name":"mdi:gold","tags":[]},{"name":"mdi:golf","tags":["sport","golf course"]},{"name":"mdi:golf-cart","tags":["sport","transportation + other"]},{"name":"mdi:golf-tee","tags":["sport"]},{"name":"mdi:gondola","tags":["transportation + other","cable car"]},{"name":"mdi:goodreads","tags":["brand / logo"]},{"name":"mdi:google","tags":["brand / logo"]},{"name":"mdi:google-ads","tags":["brand / logo","google adwords"]},{"name":"mdi:google-analytics","tags":["brand / logo"]},{"name":"mdi:google-assistant","tags":["brand / logo"]},{"name":"mdi:google-cardboard","tags":["brand / logo"]},{"name":"mdi:google-chrome","tags":["brand / logo","chromecast"]},{"name":"mdi:google-circles","tags":["brand / logo"]},{"name":"mdi:google-circles-communities","tags":["brand / logo"]},{"name":"mdi:google-circles-extended","tags":["brand / logo"]},{"name":"mdi:google-circles-group","tags":["brand / logo"]},{"name":"mdi:google-classroom","tags":["brand / logo"]},{"name":"mdi:google-cloud","tags":["brand / logo"]},{"name":"mdi:google-downasaur","tags":["animal","gaming / rpg","dinosaur pixel","t rex","tyrannosaurus rex"]},{"name":"mdi:google-drive","tags":["brand / logo","attach drive"]},{"name":"mdi:google-earth","tags":["brand / logo","marble"]},{"name":"mdi:google-fit","tags":["brand / logo"]},{"name":"mdi:google-glass","tags":["brand / logo"]},{"name":"mdi:google-hangouts","tags":["brand / logo"]},{"name":"mdi:google-keep","tags":["brand / logo"]},{"name":"mdi:google-lens","tags":["brand / logo"]},{"name":"mdi:google-maps","tags":["navigation","brand / logo"]},{"name":"mdi:google-my-business","tags":[]},{"name":"mdi:google-nearby","tags":[]},{"name":"mdi:google-play","tags":["brand / logo"]},{"name":"mdi:google-plus","tags":["brand / logo","social media"]},{"name":"mdi:google-podcast","tags":[]},{"name":"mdi:google-spreadsheet","tags":[]},{"name":"mdi:google-street-view","tags":["pegman"]},{"name":"mdi:google-translate","tags":["brand / logo","g translate"]},{"name":"mdi:gradient-horizontal","tags":["drawing / art"]},{"name":"mdi:gradient-vertical","tags":["drawing / art"]},{"name":"mdi:grain","tags":["photography","video / movie","agriculture"]},{"name":"mdi:graph","tags":["dependency","dependencies"]},{"name":"mdi:graph-outline","tags":["dependency","dependencies"]},{"name":"mdi:graphql","tags":["brand / logo"]},{"name":"mdi:grass","tags":["nature","agriculture","lawn"]},{"name":"mdi:grave-stone","tags":["holiday","headstone","tombstone","cemetery","graveyard"]},{"name":"mdi:grease-pencil","tags":["drawing / art"]},{"name":"mdi:greater-than","tags":["math"]},{"name":"mdi:greater-than-or-equal","tags":["math"]},{"name":"mdi:greenhouse","tags":["home automation","agriculture","nature","glasshouse","hothouse","shed"]},{"name":"mdi:grid","tags":["grid on"]},{"name":"mdi:grid-large","tags":[]},{"name":"mdi:grid-off","tags":[]},{"name":"mdi:grill","tags":["food / drink","bbq","barbecue","charcoal"]},{"name":"mdi:grill-outline","tags":["food / drink","barbecue outline","bbq outline","charcoal outline"]},{"name":"mdi:group","tags":[]},{"name":"mdi:guitar-acoustic","tags":["music"]},{"name":"mdi:guitar-electric","tags":["music"]},{"name":"mdi:guitar-pick","tags":["music"]},{"name":"mdi:guitar-pick-outline","tags":["music"]},{"name":"mdi:guy-fawkes-mask","tags":[]},{"name":"mdi:gymnastics","tags":["sport"]},{"name":"mdi:hail","tags":["transportation + road","navigation","hail taxi","hail cab"]},{"name":"mdi:hair-dryer","tags":["health / beauty"]},{"name":"mdi:hair-dryer-outline","tags":["health / beauty"]},{"name":"mdi:halloween","tags":["holiday","pumpkin face","pumpkin carved","jack o lantern","emoji halloween","emoticon halloween"]},{"name":"mdi:hamburger","tags":["food / drink","burger","fast food","food"]},{"name":"mdi:hamburger-check","tags":["food / drink","burger check"]},{"name":"mdi:hamburger-minus","tags":["food / drink","burger minus"]},{"name":"mdi:hamburger-off","tags":["food / drink","burger off","fast food off","food off"]},{"name":"mdi:hamburger-plus","tags":["food / drink","burger plus","burger add"]},{"name":"mdi:hamburger-remove","tags":["food / drink","burger remove"]},{"name":"mdi:hammer","tags":["hardware / tools"]},{"name":"mdi:hammer-screwdriver","tags":["hardware / tools","tools"]},{"name":"mdi:hammer-sickle","tags":["communism"]},{"name":"mdi:hammer-wrench","tags":["hardware / tools","tools"]},{"name":"mdi:hand-back-left","tags":[]},{"name":"mdi:hand-back-left-off","tags":[]},{"name":"mdi:hand-back-left-off-outline","tags":[]},{"name":"mdi:hand-back-left-outline","tags":[]},{"name":"mdi:hand-back-right","tags":[]},{"name":"mdi:hand-back-right-off","tags":[]},{"name":"mdi:hand-back-right-off-outline","tags":[]},{"name":"mdi:hand-back-right-outline","tags":[]},{"name":"mdi:hand-clap","tags":["applause"]},{"name":"mdi:hand-clap-off","tags":["applause off"]},{"name":"mdi:hand-coin","tags":["banking","charity","donation"]},{"name":"mdi:hand-coin-outline","tags":["banking","charity outline","donation outline"]},{"name":"mdi:hand-cycle","tags":["sport","hand bike"]},{"name":"mdi:hand-extended","tags":["hand open","hand palm"]},{"name":"mdi:hand-extended-outline","tags":["hand open outline","hand palm outline"]},{"name":"mdi:hand-front-left","tags":[]},{"name":"mdi:hand-front-left-outline","tags":[]},{"name":"mdi:hand-front-right","tags":[]},{"name":"mdi:hand-front-right-outline","tags":[]},{"name":"mdi:hand-heart","tags":["volunteer","love","hope"]},{"name":"mdi:hand-heart-outline","tags":[]},{"name":"mdi:hand-okay","tags":[]},{"name":"mdi:hand-peace","tags":[]},{"name":"mdi:hand-peace-variant","tags":[]},{"name":"mdi:hand-pointing-down","tags":[]},{"name":"mdi:hand-pointing-left","tags":[]},{"name":"mdi:hand-pointing-right","tags":[]},{"name":"mdi:hand-pointing-up","tags":[]},{"name":"mdi:hand-saw","tags":["hardware / tools"]},{"name":"mdi:hand-wash","tags":["medical / hospital"]},{"name":"mdi:hand-wash-outline","tags":["medical / hospital"]},{"name":"mdi:hand-water","tags":["medical / hospital","hand wash"]},{"name":"mdi:hand-wave","tags":["greeting","farewell"]},{"name":"mdi:hand-wave-outline","tags":["greeting outline","farewell outline"]},{"name":"mdi:handball","tags":["sport","people / family","volleyball","human handball"]},{"name":"mdi:handcuffs","tags":[]},{"name":"mdi:hands-pray","tags":[]},{"name":"mdi:handshake","tags":["business","deal","help","partnership"]},{"name":"mdi:handshake-outline","tags":["business outline","deal outline","help outline","partnership outline"]},{"name":"mdi:hanger","tags":["clothing","home automation","coat hanger","clothes hanger","closet"]},{"name":"mdi:hard-hat","tags":["hardware / tools","clothing","helmet"]},{"name":"mdi:harddisk","tags":["hdd"]},{"name":"mdi:harddisk-plus","tags":["hdd plus"]},{"name":"mdi:harddisk-remove","tags":["hdd remove"]},{"name":"mdi:hat-fedora","tags":["clothing"]},{"name":"mdi:hazard-lights","tags":["automotive","warning lights"]},{"name":"mdi:hdmi-port","tags":["video / movie","home automation"]},{"name":"mdi:hdr","tags":[]},{"name":"mdi:hdr-off","tags":[]},{"name":"mdi:head","tags":[]},{"name":"mdi:head-alert","tags":["alert / error"]},{"name":"mdi:head-alert-outline","tags":["alert / error"]},{"name":"mdi:head-check","tags":[]},{"name":"mdi:head-check-outline","tags":[]},{"name":"mdi:head-cog","tags":["settings","psychology"]},{"name":"mdi:head-cog-outline","tags":["settings","psychology outline"]},{"name":"mdi:head-dots-horizontal","tags":["head thinking"]},{"name":"mdi:head-dots-horizontal-outline","tags":["head thinking outline"]},{"name":"mdi:head-flash","tags":["head ache"]},{"name":"mdi:head-flash-outline","tags":["head ache outline"]},{"name":"mdi:head-heart","tags":["head love"]},{"name":"mdi:head-heart-outline","tags":["head love outline"]},{"name":"mdi:head-lightbulb","tags":["head idea","head bulb"]},{"name":"mdi:head-lightbulb-outline","tags":["head idea outline","head bulb outline"]},{"name":"mdi:head-minus","tags":[]},{"name":"mdi:head-minus-outline","tags":[]},{"name":"mdi:head-outline","tags":[]},{"name":"mdi:head-plus","tags":[]},{"name":"mdi:head-plus-outline","tags":[]},{"name":"mdi:head-question","tags":[]},{"name":"mdi:head-question-outline","tags":[]},{"name":"mdi:head-remove","tags":[]},{"name":"mdi:head-remove-outline","tags":[]},{"name":"mdi:head-snowflake","tags":["head freeze","brain freeze"]},{"name":"mdi:head-snowflake-outline","tags":["head freeze outline","brain freeze outline"]},{"name":"mdi:head-sync","tags":["head reload","head refresh"]},{"name":"mdi:head-sync-outline","tags":["head reload outline","head refresh outline"]},{"name":"mdi:headphones","tags":["audio","device / tech","music","headset"]},{"name":"mdi:headphones-bluetooth","tags":[]},{"name":"mdi:headphones-box","tags":["audio","music"]},{"name":"mdi:headphones-off","tags":["audio","device / tech","music"]},{"name":"mdi:headphones-settings","tags":["audio","settings"]},{"name":"mdi:headset","tags":["audio","device / tech","headset mic"]},{"name":"mdi:headset-dock","tags":["audio"]},{"name":"mdi:headset-off","tags":["audio","device / tech"]},{"name":"mdi:heart","tags":["shape","gaming / rpg","medical / hospital","favorite","favourite"]},{"name":"mdi:heart-box","tags":[]},{"name":"mdi:heart-box-outline","tags":[]},{"name":"mdi:heart-broken","tags":[]},{"name":"mdi:heart-broken-outline","tags":[]},{"name":"mdi:heart-circle","tags":[]},{"name":"mdi:heart-circle-outline","tags":[]},{"name":"mdi:heart-cog","tags":["settings"]},{"name":"mdi:heart-cog-outline","tags":["settings"]},{"name":"mdi:heart-flash","tags":["medical / hospital","aed","defibrillator"]},{"name":"mdi:heart-half","tags":["gaming / rpg"]},{"name":"mdi:heart-half-full","tags":["gaming / rpg"]},{"name":"mdi:heart-half-outline","tags":["gaming / rpg"]},{"name":"mdi:heart-minus","tags":[]},{"name":"mdi:heart-minus-outline","tags":[]},{"name":"mdi:heart-multiple","tags":["hearts"]},{"name":"mdi:heart-multiple-outline","tags":["hearts outline"]},{"name":"mdi:heart-off","tags":["medical / hospital"]},{"name":"mdi:heart-off-outline","tags":["medical / hospital"]},{"name":"mdi:heart-outline","tags":["shape","gaming / rpg","medical / hospital","favorite border","favourite border","favorite outline","favourite outline"]},{"name":"mdi:heart-plus","tags":[]},{"name":"mdi:heart-plus-outline","tags":[]},{"name":"mdi:heart-pulse","tags":["medical / hospital","heart vitals"]},{"name":"mdi:heart-remove","tags":[]},{"name":"mdi:heart-remove-outline","tags":[]},{"name":"mdi:heart-search","tags":["find love"]},{"name":"mdi:heart-settings","tags":["settings"]},{"name":"mdi:heart-settings-outline","tags":["settings"]},{"name":"mdi:heat-pump","tags":["home automation"]},{"name":"mdi:heat-pump-outline","tags":["home automation"]},{"name":"mdi:heat-wave","tags":["home automation","weather","agriculture","keep warm","warmth"]},{"name":"mdi:heating-coil","tags":["home automation","radiator coil","heated floor"]},{"name":"mdi:helicopter","tags":["transportation + flying"]},{"name":"mdi:help","tags":["question mark"]},{"name":"mdi:help-box","tags":["question mark box"]},{"name":"mdi:help-box-multiple","tags":["quiz","question box multiple"]},{"name":"mdi:help-box-multiple-outline","tags":["quiz outline","question box multiple outline"]},{"name":"mdi:help-box-outline","tags":["question box outline"]},{"name":"mdi:help-circle","tags":["question mark circle"]},{"name":"mdi:help-circle-outline","tags":["help outline","question mark circle outline"]},{"name":"mdi:help-network","tags":["question network"]},{"name":"mdi:help-network-outline","tags":["question network outline"]},{"name":"mdi:help-rhombus","tags":["question mark rhombus"]},{"name":"mdi:help-rhombus-outline","tags":["question mark rhombus outline"]},{"name":"mdi:hexadecimal","tags":["developer / languages"]},{"name":"mdi:hexagon","tags":["shape"]},{"name":"mdi:hexagon-multiple","tags":["shape","hexagons"]},{"name":"mdi:hexagon-multiple-outline","tags":["nature"]},{"name":"mdi:hexagon-outline","tags":["shape"]},{"name":"mdi:hexagon-slice-1","tags":[]},{"name":"mdi:hexagon-slice-2","tags":[]},{"name":"mdi:hexagon-slice-3","tags":[]},{"name":"mdi:hexagon-slice-4","tags":[]},{"name":"mdi:hexagon-slice-5","tags":[]},{"name":"mdi:hexagon-slice-6","tags":[]},{"name":"mdi:hexagram","tags":["shape","holiday","star","christmas star"]},{"name":"mdi:hexagram-outline","tags":["shape","holiday","star outline","christmas star outline"]},{"name":"mdi:high-definition","tags":["video / movie","hd"]},{"name":"mdi:high-definition-box","tags":["video / movie","hd box","hd"]},{"name":"mdi:highway","tags":["transportation + road","autobahn","motorway"]},{"name":"mdi:hiking","tags":["sport","people / family","human hiking"]},{"name":"mdi:history","tags":["date / time","recent","latest","clock arrow","counterclockwise","restore clock"]},{"name":"mdi:hockey-puck","tags":["sport"]},{"name":"mdi:hockey-sticks","tags":["sport"]},{"name":"mdi:hololens","tags":["gaming / rpg"]},{"name":"mdi:home","tags":["home automation","places","house"]},{"name":"mdi:home-account","tags":["account / user","home automation","home user","house account","house user"]},{"name":"mdi:home-alert","tags":["home automation","alert / error","home warning","house alert","house warning"]},{"name":"mdi:home-alert-outline","tags":["home automation","alert / error","house alert outline","home warning outline","house warning outline"]},{"name":"mdi:home-analytics","tags":["home automation","chart home","home chart","home report","house analytics","house chart"]},{"name":"mdi:home-assistant","tags":["brand / logo","home automation"]},{"name":"mdi:home-automation","tags":["home automation","house automation","home wireless","house wireless","smart home","smart house"]},{"name":"mdi:home-battery","tags":["home automation","battery","home energy","home power","home electricity","house energy","house battery","house power"]},{"name":"mdi:home-battery-outline","tags":["home automation","battery","home energy outline","home power outline","home electricity outline","house battery outline","house power outline","house energy outline"]},{"name":"mdi:home-circle","tags":["home automation","house circle"]},{"name":"mdi:home-circle-outline","tags":["home automation","house circle outline"]},{"name":"mdi:home-city","tags":["home automation","house city"]},{"name":"mdi:home-city-outline","tags":["home automation","places","house city outline"]},{"name":"mdi:home-clock","tags":["home automation","date / time","home time","home schedule","house time","house clock","house schedule"]},{"name":"mdi:home-clock-outline","tags":["home automation","date / time","home time outline","home schedule outline","house clock outline","house time outline","house schedule outline"]},{"name":"mdi:home-edit","tags":["home automation","edit / modify","house edit"]},{"name":"mdi:home-edit-outline","tags":["home automation","edit / modify","house edit outline"]},{"name":"mdi:home-export-outline","tags":["home automation","house export outline"]},{"name":"mdi:home-flood","tags":["weather","home automation","nature","house flood"]},{"name":"mdi:home-floor-0","tags":["home automation","house floor 0","home floor zero","house floor zero"]},{"name":"mdi:home-floor-1","tags":["home automation","house floor 1","home floor one","house floor one","home floor first","house floor first"]},{"name":"mdi:home-floor-2","tags":["home automation","house floor 2","home floor two","house floor two","home floor second","house floor second"]},{"name":"mdi:home-floor-3","tags":["home automation","house floor 3","home floor three","house floor three","home floor third","house floor third"]},{"name":"mdi:home-floor-a","tags":["home automation","home floor attic","house floor a","house floor attic"]},{"name":"mdi:home-floor-b","tags":["home automation","home floor basement","house floor b","house floor basement"]},{"name":"mdi:home-floor-g","tags":["home automation","home floor ground","house floor g","house floor ground"]},{"name":"mdi:home-floor-l","tags":["home automation","home floor loft","home floor lower","house floor l","house floor loft","house floor lower"]},{"name":"mdi:home-floor-negative-1","tags":["home automation","house floor negative 1","home floor negative one","home floor minus 1","home floor minus one","house floor negative one","house floor minus 1","house floor minus one"]},{"name":"mdi:home-group","tags":["home automation","house group","neighbourhood","estate","housing estate"]},{"name":"mdi:home-group-minus","tags":["home automation","house group minus"]},{"name":"mdi:home-group-plus","tags":["home automation","house group plus","home group add","house group add"]},{"name":"mdi:home-group-remove","tags":["home automation","house group remove"]},{"name":"mdi:home-heart","tags":["home automation","people / family","family","house heart"]},{"name":"mdi:home-import-outline","tags":["home automation","house import outline"]},{"name":"mdi:home-lightbulb","tags":["home automation","home bulb","house lightbulb","house bulb"]},{"name":"mdi:home-lightbulb-outline","tags":["home automation","home bulb outline","house lightbulb outline","house bulb outline"]},{"name":"mdi:home-lightning-bolt","tags":["home automation","home energy","home power","home electricity","home flash","house lightning bolt","house flash"]},{"name":"mdi:home-lightning-bolt-outline","tags":["home automation","home energy","home power","home electricity","home flash","house lightning bolt outline","house flash outline"]},{"name":"mdi:home-lock","tags":["home automation","lock","house lock","home secure","house secure"]},{"name":"mdi:home-lock-open","tags":["home automation","lock","house lock open"]},{"name":"mdi:home-map-marker","tags":["home automation","navigation","house map marker","home location"]},{"name":"mdi:home-minus","tags":["home automation","house minus"]},{"name":"mdi:home-minus-outline","tags":["home automation","house minus outline"]},{"name":"mdi:home-modern","tags":["home automation","house modern"]},{"name":"mdi:home-off","tags":["home automation","house off"]},{"name":"mdi:home-off-outline","tags":["home automation","house off outline"]},{"name":"mdi:home-outline","tags":["home automation","places","house outline"]},{"name":"mdi:home-percent","tags":[]},{"name":"mdi:home-percent-outline","tags":["home automation"]},{"name":"mdi:home-plus","tags":["home automation","home add","house plus","house add"]},{"name":"mdi:home-plus-outline","tags":["home automation","house plus outline","house add outline"]},{"name":"mdi:home-remove","tags":["home automation","house remove"]},{"name":"mdi:home-remove-outline","tags":["home automation","house remove outline"]},{"name":"mdi:home-roof","tags":["home automation","home chimney","home attic","house roof","house attic","house chimney"]},{"name":"mdi:home-search","tags":["home automation","house search","home find","house find"]},{"name":"mdi:home-search-outline","tags":["home automation","house search outline","home find outline","house find outline"]},{"name":"mdi:home-silo","tags":["home automation","agriculture","farm house","farm home"]},{"name":"mdi:home-silo-outline","tags":["agriculture","home automation","farm house outline","farm home outline"]},{"name":"mdi:home-sound-in","tags":["home automation"]},{"name":"mdi:home-sound-in-outline","tags":["home automation"]},{"name":"mdi:home-sound-out","tags":["home automation"]},{"name":"mdi:home-sound-out-outline","tags":["home automation"]},{"name":"mdi:home-switch","tags":["home automation","home swap","house switch","house swap"]},{"name":"mdi:home-switch-outline","tags":["home automation","home swap outline","house swap outline","house switch outline"]},{"name":"mdi:home-thermometer","tags":["home automation","home climate","home temperature","house thermometer","house climate","house temperature"]},{"name":"mdi:home-thermometer-outline","tags":["home automation","home climate outline","home temperature outline","house thermometer outline","house climate outline","house temperature outline"]},{"name":"mdi:home-variant","tags":["home automation","house variant"]},{"name":"mdi:home-variant-outline","tags":["home automation","house variant outline"]},{"name":"mdi:hook","tags":[]},{"name":"mdi:hook-off","tags":[]},{"name":"mdi:hoop-house","tags":["agriculture","home automation","green house","high tunnel"]},{"name":"mdi:hops","tags":["food / drink","agriculture"]},{"name":"mdi:horizontal-rotate-clockwise","tags":[]},{"name":"mdi:horizontal-rotate-counterclockwise","tags":[]},{"name":"mdi:horse","tags":["transportation + other","animal","agriculture","equestrian"]},{"name":"mdi:horse-human","tags":["transportation + other","agriculture","people / family","horseback riding","horse riding","equestrian"]},{"name":"mdi:horse-variant","tags":["animal","agriculture","equestrian variant"]},{"name":"mdi:horse-variant-fast","tags":["animal","agriculture"]},{"name":"mdi:horseshoe","tags":["sport","agriculture","luck"]},{"name":"mdi:hospital","tags":["medical / hospital","swiss cross","dispensary"]},{"name":"mdi:hospital-box","tags":["medical / hospital","local hospital","swiss cross box","dispensary box"]},{"name":"mdi:hospital-box-outline","tags":["medical / hospital","swiss cross box outline","dispensary box outline"]},{"name":"mdi:hospital-building","tags":["places","medical / hospital"]},{"name":"mdi:hospital-marker","tags":["medical / hospital","navigation","hospital location"]},{"name":"mdi:hot-tub","tags":[]},{"name":"mdi:hours-12","tags":["date / time"]},{"name":"mdi:hours-24","tags":["date / time"]},{"name":"mdi:hub","tags":[]},{"name":"mdi:hub-outline","tags":[]},{"name":"mdi:hubspot","tags":[]},{"name":"mdi:hulu","tags":["brand / logo"]},{"name":"mdi:human","tags":["people / family","accessibility"]},{"name":"mdi:human-baby-changing-table","tags":["people / family","medical / hospital"]},{"name":"mdi:human-cane","tags":["medical / hospital","people / family","elderly"]},{"name":"mdi:human-capacity-decrease","tags":["account / user","transportation + other","people / family","human capacity reduce"]},{"name":"mdi:human-capacity-increase","tags":["account / user","transportation + other","people / family"]},{"name":"mdi:human-child","tags":["people / family"]},{"name":"mdi:human-dolly","tags":["people / family","human hand truck","human trolley"]},{"name":"mdi:human-edit","tags":["people / family","edit / modify"]},{"name":"mdi:human-female","tags":["people / family","woman"]},{"name":"mdi:human-female-boy","tags":["people / family","mother","mom","woman child","mum"]},{"name":"mdi:human-female-dance","tags":["people / family","sport","ballet"]},{"name":"mdi:human-female-female","tags":["people / family","woman woman","women"]},{"name":"mdi:human-female-female-child","tags":["people / family","family"]},{"name":"mdi:human-female-girl","tags":["people / family","mother","mom","woman child","mum"]},{"name":"mdi:human-greeting","tags":["people / family","human hello","human welcome"]},{"name":"mdi:human-greeting-proximity","tags":["account / user","people / family","connect without contact"]},{"name":"mdi:human-greeting-variant","tags":["people / family","human hello variant"]},{"name":"mdi:human-handsdown","tags":["people / family"]},{"name":"mdi:human-handsup","tags":["people / family"]},{"name":"mdi:human-male","tags":["people / family","man"]},{"name":"mdi:human-male-board","tags":["people / family","teacher","teaching","lecture","college","blackboard","whiteboard","human man board"]},{"name":"mdi:human-male-board-poll","tags":["people / family","teach poll"]},{"name":"mdi:human-male-boy","tags":["people / family","father","dad","man child"]},{"name":"mdi:human-male-child","tags":["people / family"]},{"name":"mdi:human-male-female","tags":["people / family","wc","man woman"]},{"name":"mdi:human-male-female-child","tags":["people / family","family","mom dad child"]},{"name":"mdi:human-male-girl","tags":["people / family","father","dad","man child"]},{"name":"mdi:human-male-height","tags":["medical / hospital","people / family"]},{"name":"mdi:human-male-height-variant","tags":["medical / hospital","people / family"]},{"name":"mdi:human-male-male","tags":["people / family","man man","men"]},{"name":"mdi:human-male-male-child","tags":["people / family","family"]},{"name":"mdi:human-non-binary","tags":["people / family","human genderless","human transgender"]},{"name":"mdi:human-pregnant","tags":["people / family","pregnant woman"]},{"name":"mdi:human-queue","tags":["people / family","human line"]},{"name":"mdi:human-scooter","tags":["sport","transportation + other","people / family"]},{"name":"mdi:human-walker","tags":["people / family","medical / hospital"]},{"name":"mdi:human-wheelchair","tags":["people / family","medical / hospital","human accessible"]},{"name":"mdi:human-white-cane","tags":["people / family","medical / hospital","human blind"]},{"name":"mdi:humble-bundle","tags":["brand / logo"]},{"name":"mdi:hvac","tags":["home automation","heating","ventilation","air conditioning"]},{"name":"mdi:hvac-off","tags":["home automation","heating off","ventilation off","air conditioning off"]},{"name":"mdi:hydraulic-oil-level","tags":["automotive"]},{"name":"mdi:hydraulic-oil-temperature","tags":["automotive"]},{"name":"mdi:hydro-power","tags":["device / tech","agriculture","hydraulic turbine","water turbine","watermill"]},{"name":"mdi:hydrogen-station","tags":["automotive"]},{"name":"mdi:ice-cream","tags":["food / drink"]},{"name":"mdi:ice-cream-off","tags":["food / drink"]},{"name":"mdi:ice-pop","tags":["food / drink","popsicle"]},{"name":"mdi:id-card","tags":[]},{"name":"mdi:identifier","tags":["developer / languages","key"]},{"name":"mdi:ideogram-cjk","tags":["alpha / numeric","ideogram chinese japanese korean","writing system cjk"]},{"name":"mdi:ideogram-cjk-variant","tags":["alpha / numeric","ideogram chinese japanese korean variant","writing system cjk variant"]},{"name":"mdi:image","tags":["insert photo"]},{"name":"mdi:image-album","tags":["photo album","book image"]},{"name":"mdi:image-area","tags":[]},{"name":"mdi:image-area-close","tags":[]},{"name":"mdi:image-auto-adjust","tags":["photography","image filter"]},{"name":"mdi:image-broken","tags":[]},{"name":"mdi:image-broken-variant","tags":["broken image"]},{"name":"mdi:image-check","tags":[]},{"name":"mdi:image-check-outline","tags":[]},{"name":"mdi:image-edit","tags":["edit / modify"]},{"name":"mdi:image-edit-outline","tags":["edit / modify"]},{"name":"mdi:image-filter-black-white","tags":["photography","filter b and w"]},{"name":"mdi:image-filter-center-focus","tags":["photography","image filter centre focus"]},{"name":"mdi:image-filter-center-focus-strong","tags":["photography"]},{"name":"mdi:image-filter-center-focus-strong-outline","tags":["photography"]},{"name":"mdi:image-filter-center-focus-weak","tags":["photography","image filter centre focus weak"]},{"name":"mdi:image-filter-drama","tags":["photography","nature","cloud"]},{"name":"mdi:image-filter-drama-outline","tags":["photography","nature","cloud"]},{"name":"mdi:image-filter-frames","tags":["photography"]},{"name":"mdi:image-filter-hdr","tags":["photography","nature","mountain","landscape"]},{"name":"mdi:image-filter-hdr-outline","tags":["photography","nature","mountain outline","landscape outline"]},{"name":"mdi:image-filter-none","tags":["photography"]},{"name":"mdi:image-filter-tilt-shift","tags":["photography"]},{"name":"mdi:image-filter-vintage","tags":["photography","nature"]},{"name":"mdi:image-frame","tags":["home automation","hallway","foyer","entry room"]},{"name":"mdi:image-lock","tags":["lock","photography","image secure"]},{"name":"mdi:image-lock-outline","tags":["photography","lock","image secure outline"]},{"name":"mdi:image-marker","tags":["navigation","image location"]},{"name":"mdi:image-marker-outline","tags":["navigation","image location outline"]},{"name":"mdi:image-minus","tags":[]},{"name":"mdi:image-minus-outline","tags":[]},{"name":"mdi:image-move","tags":[]},{"name":"mdi:image-multiple","tags":["collections","photo library","images"]},{"name":"mdi:image-multiple-outline","tags":["photography","image filter","images outline"]},{"name":"mdi:image-off","tags":[]},{"name":"mdi:image-off-outline","tags":[]},{"name":"mdi:image-outline","tags":[]},{"name":"mdi:image-plus","tags":["image add"]},{"name":"mdi:image-plus-outline","tags":["image add outline"]},{"name":"mdi:image-refresh","tags":["photography"]},{"name":"mdi:image-refresh-outline","tags":["photography"]},{"name":"mdi:image-remove","tags":[]},{"name":"mdi:image-remove-outline","tags":["photography"]},{"name":"mdi:image-search","tags":[]},{"name":"mdi:image-search-outline","tags":[]},{"name":"mdi:image-size-select-actual","tags":[]},{"name":"mdi:image-size-select-large","tags":[]},{"name":"mdi:image-size-select-small","tags":[]},{"name":"mdi:image-sync","tags":["photography"]},{"name":"mdi:image-sync-outline","tags":["photography"]},{"name":"mdi:image-text","tags":["image description"]},{"name":"mdi:import","tags":["input"]},{"name":"mdi:inbox","tags":[]},{"name":"mdi:inbox-arrow-down","tags":["move to inbox"]},{"name":"mdi:inbox-arrow-down-outline","tags":[]},{"name":"mdi:inbox-arrow-up","tags":["move from inbox"]},{"name":"mdi:inbox-arrow-up-outline","tags":[]},{"name":"mdi:inbox-full","tags":[]},{"name":"mdi:inbox-full-outline","tags":[]},{"name":"mdi:inbox-multiple","tags":["inboxes"]},{"name":"mdi:inbox-multiple-outline","tags":["inboxes outline"]},{"name":"mdi:inbox-outline","tags":[]},{"name":"mdi:inbox-remove","tags":[]},{"name":"mdi:inbox-remove-outline","tags":[]},{"name":"mdi:incognito","tags":["anonymous","spy"]},{"name":"mdi:incognito-circle","tags":["anonymous circle","spy circle"]},{"name":"mdi:incognito-circle-off","tags":["anonymous circle off","spy circle off"]},{"name":"mdi:incognito-off","tags":["spy off","anonymous off"]},{"name":"mdi:induction","tags":["home automation","automotive","ignition"]},{"name":"mdi:infinity","tags":["math"]},{"name":"mdi:information","tags":["settings","about","information circle","info circle","about circle","info"]},{"name":"mdi:information-box","tags":["settings","info box"]},{"name":"mdi:information-box-outline","tags":["settings","info box outline"]},{"name":"mdi:information-off","tags":["info off","info circle off","information circle off"]},{"name":"mdi:information-off-outline","tags":["info circle off outline","information circle off outline","information off outline","info off outline"]},{"name":"mdi:information-outline","tags":["settings","info outline","about outline","information circle outline","info circle outline","about circle outline"]},{"name":"mdi:information-slab-box","tags":["settings","info slab box"]},{"name":"mdi:information-slab-box-outline","tags":["settings","info slab box outline"]},{"name":"mdi:information-slab-circle","tags":["settings","info slab circle"]},{"name":"mdi:information-slab-circle-outline","tags":["settings","info slab circle outline"]},{"name":"mdi:information-slab-symbol","tags":["settings","info slab symbol"]},{"name":"mdi:information-symbol","tags":["settings","info symbol"]},{"name":"mdi:information-variant","tags":["info variant","about variant","information serif symbol","info variant symbol"]},{"name":"mdi:information-variant-box","tags":["settings","info variant box","information serif box","info serif box"]},{"name":"mdi:information-variant-box-outline","tags":["settings","info variant box outline","information serif box outline","info serif box outline"]},{"name":"mdi:information-variant-circle","tags":["settings","information serif circle","info serif circle","info variant circle"]},{"name":"mdi:information-variant-circle-outline","tags":["settings","information serif circle outline","info variant circle outline","info serif circle outline"]},{"name":"mdi:instagram","tags":["brand / logo"]},{"name":"mdi:instrument-triangle","tags":["music","dinner bell"]},{"name":"mdi:integrated-circuit-chip","tags":["banking","icc","chip"]},{"name":"mdi:invert-colors","tags":["color","invert colours"]},{"name":"mdi:invert-colors-off","tags":["color","invert colours off"]},{"name":"mdi:invoice","tags":["banking"]},{"name":"mdi:invoice-arrow-left","tags":["banking","shopping"]},{"name":"mdi:invoice-arrow-left-outline","tags":[]},{"name":"mdi:invoice-arrow-right","tags":["banking","shopping"]},{"name":"mdi:invoice-arrow-right-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-check","tags":["banking","shopping"]},{"name":"mdi:invoice-check-outline","tags":["banking"]},{"name":"mdi:invoice-clock","tags":["banking","shopping","invoice scheduled"]},{"name":"mdi:invoice-clock-outline","tags":["banking","shopping","invoice scheduled outline"]},{"name":"mdi:invoice-edit","tags":["banking","shopping"]},{"name":"mdi:invoice-edit-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-export-outline","tags":["banking","shopping","invoice outbound outline"]},{"name":"mdi:invoice-fast","tags":["banking","shopping"]},{"name":"mdi:invoice-fast-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-import","tags":["banking","shopping","invoice inbound"]},{"name":"mdi:invoice-import-outline","tags":["banking","shopping","invoice inbound outline"]},{"name":"mdi:invoice-list","tags":["banking","shopping","invoice line items"]},{"name":"mdi:invoice-list-outline","tags":["shopping","banking","invoice line items outline"]},{"name":"mdi:invoice-minus","tags":["banking"]},{"name":"mdi:invoice-minus-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-multiple","tags":["banking","shopping"]},{"name":"mdi:invoice-multiple-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-plus","tags":["banking","shopping","invoice new"]},{"name":"mdi:invoice-plus-outline","tags":["banking","shopping","invoice new outline"]},{"name":"mdi:invoice-remove","tags":["banking","shopping"]},{"name":"mdi:invoice-remove-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-send","tags":["banking","shopping"]},{"name":"mdi:invoice-send-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text","tags":["banking"]},{"name":"mdi:invoice-text-arrow-left","tags":["banking","shopping"]},{"name":"mdi:invoice-text-arrow-left-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-arrow-right","tags":["banking","shopping"]},{"name":"mdi:invoice-text-arrow-right-outline","tags":["shopping","banking"]},{"name":"mdi:invoice-text-check","tags":["banking","shopping"]},{"name":"mdi:invoice-text-check-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-clock","tags":["banking","shopping","invoice text scheduled"]},{"name":"mdi:invoice-text-clock-outline","tags":["banking","shopping","invoice text scheduled outline"]},{"name":"mdi:invoice-text-edit","tags":["banking","shopping"]},{"name":"mdi:invoice-text-edit-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-fast","tags":["banking","shopping"]},{"name":"mdi:invoice-text-fast-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-minus","tags":["banking","shopping"]},{"name":"mdi:invoice-text-minus-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-multiple","tags":["banking","shopping"]},{"name":"mdi:invoice-text-multiple-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-plus","tags":["banking","shopping","invoice text new"]},{"name":"mdi:invoice-text-plus-outline","tags":["banking","shopping","invoice text new outline"]},{"name":"mdi:invoice-text-remove","tags":["banking","shopping"]},{"name":"mdi:invoice-text-remove-outline","tags":["banking","shopping"]},{"name":"mdi:invoice-text-send","tags":["banking","shopping"]},{"name":"mdi:invoice-text-send-outline","tags":["banking","shopping"]},{"name":"mdi:iobroker","tags":["brand / logo"]},{"name":"mdi:ip","tags":["internet protocol"]},{"name":"mdi:ip-network","tags":[]},{"name":"mdi:ip-network-outline","tags":[]},{"name":"mdi:ip-outline","tags":["internet protocol outline"]},{"name":"mdi:ipod","tags":["apple ipod"]},{"name":"mdi:iron","tags":["home automation","clothing","flatiron","smoothing iron"]},{"name":"mdi:iron-board","tags":["home automation","clothing"]},{"name":"mdi:iron-outline","tags":["home automation","clothing","flatiron outline","smoothing iron outline"]},{"name":"mdi:island","tags":["places"]},{"name":"mdi:island-variant","tags":[]},{"name":"mdi:iv-bag","tags":["medical / hospital"]},{"name":"mdi:jabber","tags":["brand / logo"]},{"name":"mdi:jeepney","tags":["transportation + road"]},{"name":"mdi:jellyfish","tags":["animal"]},{"name":"mdi:jellyfish-outline","tags":["animal"]},{"name":"mdi:jira","tags":["brand / logo"]},{"name":"mdi:jquery","tags":["brand / logo"]},{"name":"mdi:jsfiddle","tags":["brand / logo"]},{"name":"mdi:jump-rope","tags":["sport"]},{"name":"mdi:kabaddi","tags":["sport","people / family","wrestling","human kabaddi"]},{"name":"mdi:kangaroo","tags":["animal","marsupial"]},{"name":"mdi:karate","tags":["sport","people / family","martial arts","kickboxing","human karate"]},{"name":"mdi:kayaking","tags":["sport","people / family","human kayaking"]},{"name":"mdi:keg","tags":["food / drink"]},{"name":"mdi:kettle","tags":["home automation","food / drink","tea kettle","kettle full","tea kettle full"]},{"name":"mdi:kettle-alert","tags":["home automation","alert / error","food / drink","tea kettle alert","kettle full alert","tea kettle full alert"]},{"name":"mdi:kettle-alert-outline","tags":["home automation","alert / error","food / drink","tea kettle alert outline","kettle empty alert","tea kettle empty alert"]},{"name":"mdi:kettle-off","tags":["home automation","food / drink","tea kettle off","tea kettle full off","kettle full off"]},{"name":"mdi:kettle-off-outline","tags":["home automation","food / drink","tea kettle off outline","kettle empty off","tea kettle empty off"]},{"name":"mdi:kettle-outline","tags":["food / drink","home automation","tea kettle outline","kettle empty","tea kettle empty"]},{"name":"mdi:kettle-pour-over","tags":[]},{"name":"mdi:kettle-steam","tags":["home automation","food / drink","tea kettle steam","kettle full steam","tea kettle full steam"]},{"name":"mdi:kettle-steam-outline","tags":["home automation","food / drink","tea kettle steam outline","kettle empty steam","tea kettle empty steam"]},{"name":"mdi:kettlebell","tags":["sport"]},{"name":"mdi:key","tags":["automotive","vpn key"]},{"name":"mdi:key-alert","tags":["alert / error"]},{"name":"mdi:key-alert-outline","tags":["alert / error"]},{"name":"mdi:key-arrow-right","tags":[]},{"name":"mdi:key-chain","tags":["automotive","home automation"]},{"name":"mdi:key-chain-variant","tags":["automotive","home automation"]},{"name":"mdi:key-change","tags":[]},{"name":"mdi:key-link","tags":["foreign key","sql foreign key"]},{"name":"mdi:key-minus","tags":[]},{"name":"mdi:key-outline","tags":[]},{"name":"mdi:key-plus","tags":["key add"]},{"name":"mdi:key-remove","tags":[]},{"name":"mdi:key-star","tags":["primary key","sql primary key","key favorite"]},{"name":"mdi:key-variant","tags":["automotive"]},{"name":"mdi:key-wireless","tags":[]},{"name":"mdi:keyboard","tags":[]},{"name":"mdi:keyboard-backspace","tags":["keyboard clear","keyboard erase"]},{"name":"mdi:keyboard-caps","tags":["keyboard capslock"]},{"name":"mdi:keyboard-close","tags":["keyboard hide"]},{"name":"mdi:keyboard-close-outline","tags":["keyboard hide outline"]},{"name":"mdi:keyboard-esc","tags":[]},{"name":"mdi:keyboard-f1","tags":[]},{"name":"mdi:keyboard-f10","tags":[]},{"name":"mdi:keyboard-f11","tags":[]},{"name":"mdi:keyboard-f12","tags":[]},{"name":"mdi:keyboard-f2","tags":[]},{"name":"mdi:keyboard-f3","tags":[]},{"name":"mdi:keyboard-f4","tags":[]},{"name":"mdi:keyboard-f5","tags":[]},{"name":"mdi:keyboard-f6","tags":[]},{"name":"mdi:keyboard-f7","tags":[]},{"name":"mdi:keyboard-f8","tags":[]},{"name":"mdi:keyboard-f9","tags":[]},{"name":"mdi:keyboard-off","tags":[]},{"name":"mdi:keyboard-off-outline","tags":[]},{"name":"mdi:keyboard-outline","tags":[]},{"name":"mdi:keyboard-return","tags":[]},{"name":"mdi:keyboard-settings","tags":["settings"]},{"name":"mdi:keyboard-settings-outline","tags":["settings"]},{"name":"mdi:keyboard-space","tags":[]},{"name":"mdi:keyboard-tab","tags":[]},{"name":"mdi:keyboard-tab-reverse","tags":[]},{"name":"mdi:keyboard-variant","tags":[]},{"name":"mdi:khanda","tags":["religion","sikh"]},{"name":"mdi:kickstarter","tags":["brand / logo"]},{"name":"mdi:kite","tags":["sport"]},{"name":"mdi:kite-outline","tags":["sport"]},{"name":"mdi:kitesurfing","tags":[]},{"name":"mdi:klingon","tags":[]},{"name":"mdi:knife","tags":["silverware knife","cutlery knife"]},{"name":"mdi:knife-military","tags":["gaming / rpg","dagger"]},{"name":"mdi:knob","tags":["audio","volume knob","volume control","dial","tuner","switch","adjuster"]},{"name":"mdi:koala","tags":["animal","marsupial","emoji koala","emoticon koala"]},{"name":"mdi:kodi","tags":["brand / logo"]},{"name":"mdi:kubernetes","tags":["developer / languages","brand / logo"]},{"name":"mdi:label","tags":[]},{"name":"mdi:label-multiple","tags":[]},{"name":"mdi:label-multiple-outline","tags":[]},{"name":"mdi:label-off","tags":[]},{"name":"mdi:label-off-outline","tags":[]},{"name":"mdi:label-outline","tags":[]},{"name":"mdi:label-percent","tags":[]},{"name":"mdi:label-percent-outline","tags":[]},{"name":"mdi:label-variant","tags":[]},{"name":"mdi:label-variant-outline","tags":[]},{"name":"mdi:ladder","tags":["hardware / tools"]},{"name":"mdi:ladybug","tags":["nature","bugfood","ladybird"]},{"name":"mdi:lambda","tags":["gaming / rpg","math"]},{"name":"mdi:lamp","tags":["home automation"]},{"name":"mdi:lamp-outline","tags":["home automation"]},{"name":"mdi:lamps","tags":["home automation","lights"]},{"name":"mdi:lamps-outline","tags":["home automation","lights outline"]},{"name":"mdi:lan","tags":["local area network"]},{"name":"mdi:lan-check","tags":[]},{"name":"mdi:lan-connect","tags":["local area network connect"]},{"name":"mdi:lan-disconnect","tags":["local area network disconnect"]},{"name":"mdi:lan-pending","tags":["local area network pending"]},{"name":"mdi:land-fields","tags":["agriculture"]},{"name":"mdi:land-plots","tags":["agriculture"]},{"name":"mdi:land-plots-circle","tags":["agriculture"]},{"name":"mdi:land-plots-circle-variant","tags":["agriculture"]},{"name":"mdi:land-plots-marker","tags":["agriculture"]},{"name":"mdi:land-rows-horizontal","tags":["agriculture"]},{"name":"mdi:land-rows-vertical","tags":["agriculture"]},{"name":"mdi:landslide","tags":["nature","avalanche","mudslide"]},{"name":"mdi:landslide-outline","tags":["nature","avalanche outline","mudslide outline"]},{"name":"mdi:language-c","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-cpp","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-csharp","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-css3","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-fortran","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-go","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-haskell","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-html5","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-java","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-javascript","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-kotlin","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-lua","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-markdown","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-markdown-outline","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-php","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-python","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-r","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-ruby","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-ruby-on-rails","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-rust","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-swift","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-typescript","tags":["developer / languages","brand / logo"]},{"name":"mdi:language-xaml","tags":["developer / languages","brand / logo","xaml","microsoft xaml"]},{"name":"mdi:laptop","tags":["device / tech","home automation","computer"]},{"name":"mdi:laptop-account","tags":["account / user","device / tech","teleconference","virtual meeting","video chat"]},{"name":"mdi:laptop-off","tags":["device / tech"]},{"name":"mdi:laravel","tags":["brand / logo"]},{"name":"mdi:laser-pointer","tags":[]},{"name":"mdi:lasso","tags":[]},{"name":"mdi:lastpass","tags":["brand / logo"]},{"name":"mdi:latitude","tags":["navigation","geographic information system"]},{"name":"mdi:launch","tags":[]},{"name":"mdi:lava-lamp","tags":["home automation"]},{"name":"mdi:layers","tags":["geographic information system"]},{"name":"mdi:layers-edit","tags":["geographic information system","edit / modify"]},{"name":"mdi:layers-minus","tags":["geographic information system"]},{"name":"mdi:layers-off","tags":["geographic information system","layers clear"]},{"name":"mdi:layers-off-outline","tags":["geographic information system"]},{"name":"mdi:layers-outline","tags":["geographic information system"]},{"name":"mdi:layers-plus","tags":["geographic information system"]},{"name":"mdi:layers-remove","tags":["geographic information system"]},{"name":"mdi:layers-search","tags":["geographic information system"]},{"name":"mdi:layers-search-outline","tags":["geographic information system"]},{"name":"mdi:layers-triple","tags":[]},{"name":"mdi:layers-triple-outline","tags":[]},{"name":"mdi:lead-pencil","tags":["drawing / art"]},{"name":"mdi:leaf","tags":["nature","food / drink","agriculture"]},{"name":"mdi:leaf-circle","tags":["nature","agriculture","green circle","organic"]},{"name":"mdi:leaf-circle-outline","tags":["agriculture","nature","green circle outline","organic outline"]},{"name":"mdi:leaf-maple","tags":["nature"]},{"name":"mdi:leaf-maple-off","tags":["nature"]},{"name":"mdi:leaf-off","tags":["nature","food / drink","agriculture"]},{"name":"mdi:leak","tags":["proximity sensor"]},{"name":"mdi:leak-off","tags":["proximity sensor off"]},{"name":"mdi:lectern","tags":["podium","dais","rostrum","lecturn"]},{"name":"mdi:led-off","tags":["home automation"]},{"name":"mdi:led-on","tags":["home automation"]},{"name":"mdi:led-outline","tags":["home automation"]},{"name":"mdi:led-strip","tags":["home automation","light strip"]},{"name":"mdi:led-strip-variant","tags":["home automation","light strip variant"]},{"name":"mdi:led-strip-variant-off","tags":["home automation","light strip variant off"]},{"name":"mdi:led-variant-off","tags":["home automation"]},{"name":"mdi:led-variant-on","tags":["home automation"]},{"name":"mdi:led-variant-outline","tags":["home automation"]},{"name":"mdi:leek","tags":["food / drink"]},{"name":"mdi:less-than","tags":["math"]},{"name":"mdi:less-than-or-equal","tags":["math"]},{"name":"mdi:library","tags":["places","local library"]},{"name":"mdi:library-outline","tags":["places","local library outline"]},{"name":"mdi:library-shelves","tags":[]},{"name":"mdi:license","tags":["ribbon","prize","award","seal"]},{"name":"mdi:lifebuoy","tags":["transportation + water","life preserver","support","help","overboard"]},{"name":"mdi:light-flood-down","tags":["home automation","floodlight down"]},{"name":"mdi:light-flood-up","tags":["home automation","floodlight up"]},{"name":"mdi:light-recessed","tags":["home automation","can light","pot light","high hat light","hi hat light","downlight"]},{"name":"mdi:light-switch","tags":["home automation","toggle switch","rocker switch"]},{"name":"mdi:light-switch-off","tags":["home automation","toggle switch off","rocker switch off"]},{"name":"mdi:lightbulb","tags":["home automation","idea","bulb"]},{"name":"mdi:lightbulb-alert","tags":["home automation","alert / error","lightbulb error"]},{"name":"mdi:lightbulb-alert-outline","tags":["home automation","alert / error","lightbulb error outline"]},{"name":"mdi:lightbulb-auto","tags":["home automation","lightbulb automatic","lightbulb motion"]},{"name":"mdi:lightbulb-auto-outline","tags":["home automation","lightbulb automatic outline","lightbulb motion outline"]},{"name":"mdi:lightbulb-cfl","tags":["home automation","bulb cfl"]},{"name":"mdi:lightbulb-cfl-off","tags":["home automation","bulb cfl off"]},{"name":"mdi:lightbulb-cfl-spiral","tags":["home automation","bulb cfl spiral"]},{"name":"mdi:lightbulb-cfl-spiral-off","tags":["home automation","bulb cfl spiral off"]},{"name":"mdi:lightbulb-fluorescent-tube","tags":["home automation"]},{"name":"mdi:lightbulb-fluorescent-tube-outline","tags":["home automation"]},{"name":"mdi:lightbulb-group","tags":["home automation","bulb group"]},{"name":"mdi:lightbulb-group-off","tags":["home automation","bulb group off"]},{"name":"mdi:lightbulb-group-off-outline","tags":["home automation","bulb group off outline"]},{"name":"mdi:lightbulb-group-outline","tags":["home automation","bulb group outline"]},{"name":"mdi:lightbulb-multiple","tags":["home automation","lightbulbs","bulb multiple","bulbs"]},{"name":"mdi:lightbulb-multiple-off","tags":["home automation","lightbulbs off","bulb multiple off","bulbs off"]},{"name":"mdi:lightbulb-multiple-off-outline","tags":["home automation","lightbulbs off outline","bulb multiple off outline","bulbs off outline"]},{"name":"mdi:lightbulb-multiple-outline","tags":["home automation","lightbulbs outline","bulb multiple outline","bulbs outline"]},{"name":"mdi:lightbulb-night","tags":["home automation","night light","nite light","lightbulb moon star"]},{"name":"mdi:lightbulb-night-outline","tags":["home automation","night light outline","nite light outline","lightbulb moon star outline"]},{"name":"mdi:lightbulb-off","tags":["home automation","bulb off"]},{"name":"mdi:lightbulb-off-outline","tags":["home automation","bulb off outline"]},{"name":"mdi:lightbulb-on","tags":["home automation","idea","bulb on","lightbulb dimmer 100"]},{"name":"mdi:lightbulb-on-10","tags":["home automation","lightbulb dimmer 10"]},{"name":"mdi:lightbulb-on-20","tags":["home automation","lightbulb dimmer 20"]},{"name":"mdi:lightbulb-on-30","tags":["home automation","lightbulb dimmer 30"]},{"name":"mdi:lightbulb-on-40","tags":["home automation","lightbulb dimmer 40"]},{"name":"mdi:lightbulb-on-50","tags":["home automation","lightbulb dimmer 50"]},{"name":"mdi:lightbulb-on-60","tags":["home automation","lightbulb dimmer 60"]},{"name":"mdi:lightbulb-on-70","tags":["home automation","lightbulb dimmer 70"]},{"name":"mdi:lightbulb-on-80","tags":["home automation","lightbulb dimmer 80"]},{"name":"mdi:lightbulb-on-90","tags":["home automation","lightbulb dimmer 90"]},{"name":"mdi:lightbulb-on-outline","tags":["home automation","idea","bulb on outline"]},{"name":"mdi:lightbulb-outline","tags":["home automation","idea","bulb outline"]},{"name":"mdi:lightbulb-question","tags":["home automation","lightbulb help"]},{"name":"mdi:lightbulb-question-outline","tags":["home automation","lightbulb help outline"]},{"name":"mdi:lightbulb-spot","tags":["home automation","lightbulb halogen","lightbulb gu10"]},{"name":"mdi:lightbulb-spot-off","tags":["home automation","lightbulb halogen off","lightbulb gu10 off"]},{"name":"mdi:lightbulb-variant","tags":["home automation","lightbulb edison","lightbulb filament"]},{"name":"mdi:lightbulb-variant-outline","tags":["home automation","lightbulb edison outline","lightbulb filament outline"]},{"name":"mdi:lighthouse","tags":["beacon"]},{"name":"mdi:lighthouse-on","tags":["beacon"]},{"name":"mdi:lightning-bolt","tags":["home automation","weather","thunder","storm","energy","electricity"]},{"name":"mdi:lightning-bolt-circle","tags":["home automation","weather","amp","offline bolt","flash circle","electricity circle","energy circle","thunder circle","storm circle"]},{"name":"mdi:lightning-bolt-outline","tags":["home automation","weather","thunder outline","storm outline","energy outline","electricity outline"]},{"name":"mdi:line-scan","tags":[]},{"name":"mdi:lingerie","tags":["clothing","underwear","bra","panties"]},{"name":"mdi:link","tags":["insert link"]},{"name":"mdi:link-box","tags":[]},{"name":"mdi:link-box-outline","tags":[]},{"name":"mdi:link-box-variant","tags":[]},{"name":"mdi:link-box-variant-outline","tags":[]},{"name":"mdi:link-circle","tags":[]},{"name":"mdi:link-circle-outline","tags":[]},{"name":"mdi:link-edit","tags":[]},{"name":"mdi:link-lock","tags":["lock","block chain"]},{"name":"mdi:link-off","tags":[]},{"name":"mdi:link-plus","tags":["link add"]},{"name":"mdi:link-variant","tags":[]},{"name":"mdi:link-variant-minus","tags":[]},{"name":"mdi:link-variant-off","tags":[]},{"name":"mdi:link-variant-plus","tags":[]},{"name":"mdi:link-variant-remove","tags":[]},{"name":"mdi:linkedin","tags":["brand / logo","social media"]},{"name":"mdi:linux","tags":["animal","brand / logo","tux"]},{"name":"mdi:linux-mint","tags":["brand / logo"]},{"name":"mdi:lipstick","tags":["health / beauty"]},{"name":"mdi:liquid-spot","tags":["automotive","medical / hospital","ink spot","puddle","water","blood","spill","oil","dirty"]},{"name":"mdi:liquor","tags":["food / drink","booze","alcohol","beverages","whiskey","rum","wine","tequila","beer","spirits"]},{"name":"mdi:list-box","tags":["form"]},{"name":"mdi:list-box-outline","tags":["form outline"]},{"name":"mdi:list-status","tags":["text / content / format"]},{"name":"mdi:litecoin","tags":["banking","brand / logo","currency"]},{"name":"mdi:loading","tags":[]},{"name":"mdi:location-enter","tags":["home automation","presence enter"]},{"name":"mdi:location-exit","tags":["home automation","presence exit"]},{"name":"mdi:lock","tags":["lock","home automation","automotive","https","password","secure","protected","encryption"]},{"name":"mdi:lock-alert","tags":["lock","alert / error","home automation","lock warning","password alert","encryption alert","password warning","encryption warning"]},{"name":"mdi:lock-alert-outline","tags":["home automation","alert / error","lock","lock warning outline","password alert outline","encryption alert outline","password warning outline","encryption warning outline"]},{"name":"mdi:lock-check","tags":["lock","password check","password secure","encryption check","encryption secure","password verified","encryption verified"]},{"name":"mdi:lock-check-outline","tags":["lock","password check outline","password secure outline","encryption check outline","encryption secure outline","password verified outline","encryption verified outline"]},{"name":"mdi:lock-clock","tags":["lock","date / time","confidential mode","password clock","password expiration","encryption expiration"]},{"name":"mdi:lock-minus","tags":["lock","password minus","encryption minus"]},{"name":"mdi:lock-minus-outline","tags":["lock","password minus outline","encryption minus"]},{"name":"mdi:lock-off","tags":["lock","password off","not protected","unsecure","encryption off"]},{"name":"mdi:lock-off-outline","tags":["lock","password off outline","unsecure outline","not protected outline","encryption off outline"]},{"name":"mdi:lock-open","tags":["lock","home automation","automotive","unlocked","decrypted"]},{"name":"mdi:lock-open-alert","tags":["alert / error","home automation","lock","unlocked alert","decrypted alert","lock open warning","unlocked warning","decrypted warning"]},{"name":"mdi:lock-open-alert-outline","tags":["home automation","alert / error","lock","unlocked alert outline","lock open warning outline","decrypted alert outline","unlocked warning outline","decrypted warning outline"]},{"name":"mdi:lock-open-check","tags":["lock","unlocked check","decrypted check"]},{"name":"mdi:lock-open-check-outline","tags":["lock","unlocked check outline","decrypted check outline"]},{"name":"mdi:lock-open-minus","tags":["lock","unlocked minus","decrypted minus"]},{"name":"mdi:lock-open-minus-outline","tags":["lock","unlocked minus outline","decrypted minus outline"]},{"name":"mdi:lock-open-outline","tags":["lock","home automation","automotive","unlocked outline","decrypted outline"]},{"name":"mdi:lock-open-plus","tags":["lock","unlocked plus","decrypted plus","lock open add","unlocked add","decrypted add"]},{"name":"mdi:lock-open-plus-outline","tags":["lock","unlocked plus outline","lock open add outline","unlocked add outline","decrypted plus outline","decrypted add outline"]},{"name":"mdi:lock-open-remove","tags":["lock","unlocked remove","decrypted remove"]},{"name":"mdi:lock-open-remove-outline","tags":["lock","unlocked remove outline","decrypted remove outline"]},{"name":"mdi:lock-open-variant","tags":["lock","home automation","unlocked variant","decrypted variant"]},{"name":"mdi:lock-open-variant-outline","tags":["lock","home automation","unlocked variant outline","decrypted variant outline"]},{"name":"mdi:lock-outline","tags":["lock","home automation","automotive","password outline","secure outline","https outline","protected outline","encryption outline"]},{"name":"mdi:lock-pattern","tags":[]},{"name":"mdi:lock-percent","tags":["lock rate"]},{"name":"mdi:lock-percent-open","tags":["lock rate open"]},{"name":"mdi:lock-percent-open-outline","tags":["lock rate open outline"]},{"name":"mdi:lock-percent-open-variant","tags":["lock rate open variant"]},{"name":"mdi:lock-percent-open-variant-outline","tags":["lock rate open variant outline"]},{"name":"mdi:lock-percent-outline","tags":["lock rate outline"]},{"name":"mdi:lock-plus","tags":["lock","enhanced encryption","lock add","encryption add","password add","password plus","encryption plus"]},{"name":"mdi:lock-plus-outline","tags":["lock","lock add outline","password plus outline","password add outline","encryption plus outline","encryption add outline"]},{"name":"mdi:lock-question","tags":["lock","forgot password","password question","encryption question"]},{"name":"mdi:lock-remove","tags":["lock","password remove","encryption remove"]},{"name":"mdi:lock-remove-outline","tags":["lock","password remove outline","encryption remove outline"]},{"name":"mdi:lock-reset","tags":["lock","password reset","encryption reset"]},{"name":"mdi:lock-smart","tags":["home automation"]},{"name":"mdi:locker","tags":[]},{"name":"mdi:locker-multiple","tags":["lockers"]},{"name":"mdi:login","tags":["log in","sign in"]},{"name":"mdi:login-variant","tags":["log in variant","sign in variant"]},{"name":"mdi:logout","tags":["log out","sign out"]},{"name":"mdi:logout-variant","tags":["log out variant","sign out variant"]},{"name":"mdi:longitude","tags":["navigation","geographic information system"]},{"name":"mdi:looks","tags":["weather","color","rainbow"]},{"name":"mdi:lotion","tags":["medical / hospital","health / beauty"]},{"name":"mdi:lotion-outline","tags":["medical / hospital","health / beauty"]},{"name":"mdi:lotion-plus","tags":["medical / hospital","hand sanitizer"]},{"name":"mdi:lotion-plus-outline","tags":["medical / hospital","hand sanitizer outline"]},{"name":"mdi:loupe","tags":["zoom plus","circle plus outline","magnify"]},{"name":"mdi:lumx","tags":["brand / logo"]},{"name":"mdi:lungs","tags":["medical / hospital"]},{"name":"mdi:mace","tags":["gaming / rpg"]},{"name":"mdi:magazine-pistol","tags":["ammunition pistol"]},{"name":"mdi:magazine-rifle","tags":["ammunition rifle"]},{"name":"mdi:magic-staff","tags":["gaming / rpg","staff shimmer","magic wand"]},{"name":"mdi:magnet","tags":[]},{"name":"mdi:magnet-on","tags":[]},{"name":"mdi:magnify","tags":["geographic information system","search"]},{"name":"mdi:magnify-close","tags":[]},{"name":"mdi:magnify-expand","tags":["geographic information system","search expand"]},{"name":"mdi:magnify-minus","tags":["zoom out","search minus"]},{"name":"mdi:magnify-minus-cursor","tags":["zoom out cursor"]},{"name":"mdi:magnify-minus-outline","tags":["geographic information system","zoom out outline","search minus outline"]},{"name":"mdi:magnify-plus","tags":["zoom in","magnify add","search plus","search add"]},{"name":"mdi:magnify-plus-cursor","tags":["zoom in cursor","magnify add cursor"]},{"name":"mdi:magnify-plus-outline","tags":["geographic information system","zoom in outline","magnify add outline","search plus outline","search add outline"]},{"name":"mdi:magnify-remove-cursor","tags":[]},{"name":"mdi:magnify-remove-outline","tags":["geographic information system"]},{"name":"mdi:magnify-scan","tags":[]},{"name":"mdi:mail","tags":[]},{"name":"mdi:mailbox","tags":[]},{"name":"mdi:mailbox-open","tags":[]},{"name":"mdi:mailbox-open-outline","tags":[]},{"name":"mdi:mailbox-open-up","tags":[]},{"name":"mdi:mailbox-open-up-outline","tags":[]},{"name":"mdi:mailbox-outline","tags":[]},{"name":"mdi:mailbox-up","tags":[]},{"name":"mdi:mailbox-up-outline","tags":[]},{"name":"mdi:manjaro","tags":["brand / logo"]},{"name":"mdi:map","tags":["navigation","geographic information system"]},{"name":"mdi:map-check","tags":["navigation","geographic information system","map tick"]},{"name":"mdi:map-check-outline","tags":["navigation","geographic information system","map tick outline"]},{"name":"mdi:map-clock","tags":["navigation","geographic information system","date / time","timezone"]},{"name":"mdi:map-clock-outline","tags":["navigation","geographic information system","date / time","timezone outline"]},{"name":"mdi:map-legend","tags":["navigation","geographic information system"]},{"name":"mdi:map-marker","tags":["navigation","geographic information system","location","address marker","location on","place","room"]},{"name":"mdi:map-marker-account","tags":["navigation","account / user"]},{"name":"mdi:map-marker-account-outline","tags":["navigation","account / user"]},{"name":"mdi:map-marker-alert","tags":["navigation","alert / error","geographic information system","location alert","location warning"]},{"name":"mdi:map-marker-alert-outline","tags":["navigation","alert / error","geographic information system","location alert outline","location warning outline"]},{"name":"mdi:map-marker-check","tags":["navigation","geographic information system","map marker tick","where to vote","location check"]},{"name":"mdi:map-marker-check-outline","tags":["navigation","geographic information system","location check outline","where to vote outline"]},{"name":"mdi:map-marker-circle","tags":["navigation","geographic information system","explore nearby","location circle"]},{"name":"mdi:map-marker-distance","tags":["navigation","geographic information system","location distance"]},{"name":"mdi:map-marker-down","tags":["navigation","geographic information system","location down"]},{"name":"mdi:map-marker-left","tags":["navigation","geographic information system","location left"]},{"name":"mdi:map-marker-left-outline","tags":["navigation","geographic information system","location left outline"]},{"name":"mdi:map-marker-minus","tags":["navigation","geographic information system","location minus"]},{"name":"mdi:map-marker-minus-outline","tags":["geographic information system","navigation","location minus outline"]},{"name":"mdi:map-marker-multiple","tags":["navigation","geographic information system","map markers","location multiple","locations"]},{"name":"mdi:map-marker-multiple-outline","tags":["navigation","geographic information system","locations outline","location multiple outline","map markers outline"]},{"name":"mdi:map-marker-off","tags":["navigation","geographic information system","location off"]},{"name":"mdi:map-marker-off-outline","tags":["navigation","geographic information system","location off outline"]},{"name":"mdi:map-marker-outline","tags":["navigation","geographic information system","location outline","address marker outline","location on outline","place outline"]},{"name":"mdi:map-marker-path","tags":["navigation","geographic information system","location path"]},{"name":"mdi:map-marker-plus","tags":["navigation","geographic information system","location plus","map marker add","location add"]},{"name":"mdi:map-marker-plus-outline","tags":["geographic information system","navigation","map marker add outline","location plus outline","location add outline"]},{"name":"mdi:map-marker-question","tags":["navigation","geographic information system","location question"]},{"name":"mdi:map-marker-question-outline","tags":["navigation","geographic information system","location question outline"]},{"name":"mdi:map-marker-radius","tags":["navigation","geographic information system","home automation","location radius"]},{"name":"mdi:map-marker-radius-outline","tags":["navigation","geographic information system","home automation","location radius outline"]},{"name":"mdi:map-marker-remove","tags":["navigation","geographic information system","location remove"]},{"name":"mdi:map-marker-remove-outline","tags":["geographic information system","navigation","location remove outline"]},{"name":"mdi:map-marker-remove-variant","tags":["navigation","geographic information system","location remove variant outline"]},{"name":"mdi:map-marker-right","tags":["navigation","geographic information system","location right"]},{"name":"mdi:map-marker-right-outline","tags":["navigation","geographic information system","location right outline"]},{"name":"mdi:map-marker-star","tags":["navigation","map marker favorite","location star","location favorite"]},{"name":"mdi:map-marker-star-outline","tags":["navigation","map marker favorite outline","location star outline","location favorite outline"]},{"name":"mdi:map-marker-up","tags":["navigation","geographic information system","location up"]},{"name":"mdi:map-minus","tags":["navigation","geographic information system"]},{"name":"mdi:map-outline","tags":["navigation","geographic information system"]},{"name":"mdi:map-plus","tags":["navigation","geographic information system","map add"]},{"name":"mdi:map-search","tags":["navigation","geographic information system"]},{"name":"mdi:map-search-outline","tags":["navigation","geographic information system"]},{"name":"mdi:mapbox","tags":["brand / logo"]},{"name":"mdi:margin","tags":[]},{"name":"mdi:marker","tags":["text / content / format","highlighter"]},{"name":"mdi:marker-cancel","tags":["text / content / format"]},{"name":"mdi:marker-check","tags":["beenhere","marker tick"]},{"name":"mdi:mastodon","tags":["brand / logo"]},{"name":"mdi:material-design","tags":["brand / logo"]},{"name":"mdi:material-ui","tags":["brand / logo"]},{"name":"mdi:math-compass","tags":["math","drawing / art","navigation","maths compass"]},{"name":"mdi:math-cos","tags":["math","math cosine","maths cos"]},{"name":"mdi:math-integral","tags":["math"]},{"name":"mdi:math-integral-box","tags":["math"]},{"name":"mdi:math-log","tags":["math"]},{"name":"mdi:math-norm","tags":["math","developer / languages","code or","parallel"]},{"name":"mdi:math-norm-box","tags":["math","developer / languages","code or box","parallel box"]},{"name":"mdi:math-sin","tags":["math","math sine","maths sin"]},{"name":"mdi:math-tan","tags":["math","math tangent","maths tan"]},{"name":"mdi:matrix","tags":[]},{"name":"mdi:medal","tags":["gaming / rpg","sport","award"]},{"name":"mdi:medal-outline","tags":["sport"]},{"name":"mdi:medical-bag","tags":["medical / hospital","first aid kit","medicine"]},{"name":"mdi:medical-cotton-swab","tags":["medical / hospital","covid test","medicine"]},{"name":"mdi:medication","tags":["health / beauty","medical / hospital","pill bottle","medicine bottle","bottle plus"]},{"name":"mdi:medication-outline","tags":["health / beauty","medical / hospital","pill bottle outline","medicine bottle outline","bottle plus outline"]},{"name":"mdi:meditation","tags":["sport","people / family","human meditation"]},{"name":"mdi:memory","tags":["chip"]},{"name":"mdi:memory-arrow-down","tags":["chip arrow down"]},{"name":"mdi:menorah","tags":["religion","holiday","candelabrum","candelabra","candle"]},{"name":"mdi:menorah-fire","tags":["religion","holiday","menorah flame","candle flame","candelabra flame","candelabra fire","candle fire","candelabrum fire","candelabrum flame"]},{"name":"mdi:menu","tags":["hamburger menu"]},{"name":"mdi:menu-close","tags":["navigation","hamburger close"]},{"name":"mdi:menu-down","tags":["arrow","arrow drop down","caret down"]},{"name":"mdi:menu-down-outline","tags":["arrow","caret down outline"]},{"name":"mdi:menu-left","tags":["arrow","arrow left"]},{"name":"mdi:menu-left-outline","tags":[]},{"name":"mdi:menu-open","tags":["hamburger open"]},{"name":"mdi:menu-right","tags":["arrow","arrow right"]},{"name":"mdi:menu-right-outline","tags":[]},{"name":"mdi:menu-swap","tags":["arrow"]},{"name":"mdi:menu-swap-outline","tags":["arrow"]},{"name":"mdi:menu-up","tags":["arrow","arrow drop up","caret up"]},{"name":"mdi:menu-up-outline","tags":["arrow","caret up outline"]},{"name":"mdi:merge","tags":[]},{"name":"mdi:message","tags":["chat bubble"]},{"name":"mdi:message-alert","tags":["alert / error","feedback","message warning","announcement","sms failed"]},{"name":"mdi:message-alert-outline","tags":["alert / error","announcement outline","feedback outline","message warning outline","sms failed outline"]},{"name":"mdi:message-arrow-left","tags":[]},{"name":"mdi:message-arrow-left-outline","tags":[]},{"name":"mdi:message-arrow-right","tags":[]},{"name":"mdi:message-arrow-right-outline","tags":[]},{"name":"mdi:message-badge","tags":["notification","message unread","message notification"]},{"name":"mdi:message-badge-outline","tags":["notification","message unread outline","message notification outline"]},{"name":"mdi:message-bookmark","tags":[]},{"name":"mdi:message-bookmark-outline","tags":[]},{"name":"mdi:message-bulleted","tags":["speaker notes"]},{"name":"mdi:message-bulleted-off","tags":["speaker notes off"]},{"name":"mdi:message-check","tags":[]},{"name":"mdi:message-check-outline","tags":[]},{"name":"mdi:message-cog","tags":["settings"]},{"name":"mdi:message-cog-outline","tags":["settings"]},{"name":"mdi:message-draw","tags":["rate review"]},{"name":"mdi:message-fast","tags":[]},{"name":"mdi:message-fast-outline","tags":[]},{"name":"mdi:message-flash","tags":["message quick"]},{"name":"mdi:message-flash-outline","tags":["message quick outline"]},{"name":"mdi:message-image","tags":["mms"]},{"name":"mdi:message-image-outline","tags":[]},{"name":"mdi:message-lock","tags":["lock","message secure"]},{"name":"mdi:message-lock-outline","tags":["lock"]},{"name":"mdi:message-minus","tags":[]},{"name":"mdi:message-minus-outline","tags":[]},{"name":"mdi:message-off","tags":[]},{"name":"mdi:message-off-outline","tags":[]},{"name":"mdi:message-outline","tags":["chat bubble outline"]},{"name":"mdi:message-plus","tags":["message add"]},{"name":"mdi:message-plus-outline","tags":[]},{"name":"mdi:message-processing","tags":["sms","textsms"]},{"name":"mdi:message-processing-outline","tags":[]},{"name":"mdi:message-question","tags":[]},{"name":"mdi:message-question-outline","tags":[]},{"name":"mdi:message-reply","tags":["mode comment"]},{"name":"mdi:message-reply-outline","tags":[]},{"name":"mdi:message-reply-text","tags":["comment","insert comment"]},{"name":"mdi:message-reply-text-outline","tags":[]},{"name":"mdi:message-settings","tags":["settings"]},{"name":"mdi:message-settings-outline","tags":["settings"]},{"name":"mdi:message-star","tags":[]},{"name":"mdi:message-star-outline","tags":[]},{"name":"mdi:message-text","tags":["chat"]},{"name":"mdi:message-text-clock","tags":["date / time"]},{"name":"mdi:message-text-clock-outline","tags":["date / time"]},{"name":"mdi:message-text-fast","tags":[]},{"name":"mdi:message-text-fast-outline","tags":[]},{"name":"mdi:message-text-lock","tags":["lock","message text secure"]},{"name":"mdi:message-text-lock-outline","tags":["lock"]},{"name":"mdi:message-text-outline","tags":[]},{"name":"mdi:message-video","tags":["video / movie","voice chat"]},{"name":"mdi:meteor","tags":["brand / logo"]},{"name":"mdi:meter-electric","tags":["home automation","power meter","electricity"]},{"name":"mdi:meter-electric-outline","tags":["home automation","power meter outline","electricity outline"]},{"name":"mdi:meter-gas","tags":["home automation","natural gas"]},{"name":"mdi:meter-gas-outline","tags":["home automation","natural gas outline"]},{"name":"mdi:metronome","tags":["music","tempo","bpm","beats per minute"]},{"name":"mdi:metronome-tick","tags":["music","tempo tick","bpm tick","beats per minute tick"]},{"name":"mdi:micro-sd","tags":[]},{"name":"mdi:microphone","tags":["music","keyboard voice"]},{"name":"mdi:microphone-message","tags":["tts","text to speech"]},{"name":"mdi:microphone-message-off","tags":["tts off","text to speech off"]},{"name":"mdi:microphone-minus","tags":["microphone remove"]},{"name":"mdi:microphone-off","tags":["music","mic off"]},{"name":"mdi:microphone-outline","tags":["music","mic none"]},{"name":"mdi:microphone-plus","tags":["microphone add"]},{"name":"mdi:microphone-question","tags":["audio","music","microphone help"]},{"name":"mdi:microphone-question-outline","tags":["audio","music","microphone help outline"]},{"name":"mdi:microphone-settings","tags":["settings","settings voice"]},{"name":"mdi:microphone-variant","tags":["music"]},{"name":"mdi:microphone-variant-off","tags":["music"]},{"name":"mdi:microscope","tags":["science"]},{"name":"mdi:microsoft","tags":["brand / logo"]},{"name":"mdi:microsoft-access","tags":["brand / logo"]},{"name":"mdi:microsoft-azure","tags":["brand / logo"]},{"name":"mdi:microsoft-azure-devops","tags":["brand / logo"]},{"name":"mdi:microsoft-bing","tags":["brand / logo"]},{"name":"mdi:microsoft-dynamics-365","tags":["brand / logo"]},{"name":"mdi:microsoft-edge","tags":["brand / logo","microsoft edge"]},{"name":"mdi:microsoft-excel","tags":["brand / logo"]},{"name":"mdi:microsoft-internet-explorer","tags":["brand / logo"]},{"name":"mdi:microsoft-office","tags":["brand / logo"]},{"name":"mdi:microsoft-onedrive","tags":["brand / logo"]},{"name":"mdi:microsoft-onenote","tags":["brand / logo"]},{"name":"mdi:microsoft-outlook","tags":["brand / logo"]},{"name":"mdi:microsoft-powerpoint","tags":["brand / logo"]},{"name":"mdi:microsoft-sharepoint","tags":["brand / logo"]},{"name":"mdi:microsoft-teams","tags":["brand / logo"]},{"name":"mdi:microsoft-visual-studio","tags":["brand / logo","visualstudio"]},{"name":"mdi:microsoft-visual-studio-code","tags":["developer / languages","brand / logo","vs code"]},{"name":"mdi:microsoft-windows","tags":["brand / logo","gaming / rpg","microsoft windows"]},{"name":"mdi:microsoft-windows-classic","tags":["brand / logo"]},{"name":"mdi:microsoft-word","tags":["brand / logo"]},{"name":"mdi:microsoft-xbox","tags":["social media","brand / logo","gaming / rpg","xbox live","microsoft"]},{"name":"mdi:microsoft-xbox-controller","tags":["gaming / rpg","microsoft xbox gamepad"]},{"name":"mdi:microsoft-xbox-controller-battery-alert","tags":["battery","gaming / rpg","alert / error","xbox controller battery warning","microsoft xbox gamepad battery alert"]},{"name":"mdi:microsoft-xbox-controller-battery-charging","tags":["gaming / rpg","battery","microsoft xbox gamepad battery charging"]},{"name":"mdi:microsoft-xbox-controller-battery-empty","tags":["battery","gaming / rpg","microsoft xbox gamepad battery empty"]},{"name":"mdi:microsoft-xbox-controller-battery-full","tags":["battery","gaming / rpg","microsoft xbox gamepad battery full"]},{"name":"mdi:microsoft-xbox-controller-battery-low","tags":["battery","gaming / rpg","microsoft xbox gamepad battery low"]},{"name":"mdi:microsoft-xbox-controller-battery-medium","tags":["battery","gaming / rpg","microsoft xbox gamepad battery medium"]},{"name":"mdi:microsoft-xbox-controller-battery-unknown","tags":["battery","gaming / rpg","microsoft xbox gamepad battery unknown"]},{"name":"mdi:microsoft-xbox-controller-menu","tags":["gaming / rpg"]},{"name":"mdi:microsoft-xbox-controller-off","tags":["gaming / rpg","microsoft xbox gamepad off"]},{"name":"mdi:microsoft-xbox-controller-view","tags":["gaming / rpg"]},{"name":"mdi:microwave","tags":["home automation","food / drink","microwave oven"]},{"name":"mdi:microwave-off","tags":["home automation"]},{"name":"mdi:middleware","tags":["arrow"]},{"name":"mdi:middleware-outline","tags":["arrow"]},{"name":"mdi:midi","tags":["brand / logo","music"]},{"name":"mdi:midi-port","tags":["music"]},{"name":"mdi:mine","tags":[]},{"name":"mdi:minecraft","tags":["brand / logo","microsoft minecraft"]},{"name":"mdi:mini-sd","tags":[]},{"name":"mdi:minidisc","tags":[]},{"name":"mdi:minus","tags":["math","remove","horizontal line","minimize"]},{"name":"mdi:minus-box","tags":["math","form","indeterminate check box"]},{"name":"mdi:minus-box-multiple","tags":["form","library minus"]},{"name":"mdi:minus-box-multiple-outline","tags":["form","library minus outline"]},{"name":"mdi:minus-box-outline","tags":["math","form","checkbox indeterminate outline"]},{"name":"mdi:minus-circle","tags":["transportation + road","medical / hospital","form","do not disturb on","remove circle","do not enter","pill tablet","medicine","pharmaceutical"]},{"name":"mdi:minus-circle-multiple","tags":["form","coins minus"]},{"name":"mdi:minus-circle-multiple-outline","tags":["form","coins minus outline"]},{"name":"mdi:minus-circle-off","tags":["do not disturb off","remove circle off","do not enter off"]},{"name":"mdi:minus-circle-off-outline","tags":["do not disturb off outline","remove circle off outline","do not enter off outline"]},{"name":"mdi:minus-circle-outline","tags":["transportation + road","medical / hospital","form","remove circle outline","do not enter outline","do not disturb outline","pill tablet outline","medicine outline","pharmaceutical"]},{"name":"mdi:minus-network","tags":[]},{"name":"mdi:minus-network-outline","tags":[]},{"name":"mdi:minus-thick","tags":[]},{"name":"mdi:mirror","tags":["home automation"]},{"name":"mdi:mirror-rectangle","tags":["home automation"]},{"name":"mdi:mirror-variant","tags":["home automation"]},{"name":"mdi:mixed-martial-arts","tags":["sport","mma","glove"]},{"name":"mdi:mixed-reality","tags":[]},{"name":"mdi:molecule","tags":["science"]},{"name":"mdi:molecule-co","tags":["home automation","science","carbon monoxide","gas co"]},{"name":"mdi:molecule-co2","tags":["science","home automation","periodic table carbon dioxide","gas co2"]},{"name":"mdi:monitor","tags":["device / tech","desktop windows"]},{"name":"mdi:monitor-account","tags":["account / user","device / tech","teleconference","virtual meeting","video chat"]},{"name":"mdi:monitor-arrow-down","tags":["device / tech","monitor download"]},{"name":"mdi:monitor-arrow-down-variant","tags":["device / tech","monitor download"]},{"name":"mdi:monitor-cellphone","tags":["cellphone / phone","device / tech","monitor mobile phone","monitor smartphone"]},{"name":"mdi:monitor-cellphone-star","tags":["cellphone / phone","device / tech","important devices","monitor mobile phone star","monitor smartphone star","monitor cellphone favorite"]},{"name":"mdi:monitor-dashboard","tags":["device / tech"]},{"name":"mdi:monitor-edit","tags":["edit / modify"]},{"name":"mdi:monitor-eye","tags":[]},{"name":"mdi:monitor-lock","tags":["device / tech","lock"]},{"name":"mdi:monitor-multiple","tags":["device / tech","monitors"]},{"name":"mdi:monitor-off","tags":["device / tech"]},{"name":"mdi:monitor-screenshot","tags":["device / tech"]},{"name":"mdi:monitor-share","tags":[]},{"name":"mdi:monitor-shimmer","tags":["device / tech","monitor clean"]},{"name":"mdi:monitor-small","tags":["device / tech","monitor crt"]},{"name":"mdi:monitor-speaker","tags":["device / tech"]},{"name":"mdi:monitor-speaker-off","tags":["device / tech"]},{"name":"mdi:monitor-star","tags":["device / tech","monitor favorite"]},{"name":"mdi:monitor-vertical","tags":[]},{"name":"mdi:moon-first-quarter","tags":["weather"]},{"name":"mdi:moon-full","tags":["weather"]},{"name":"mdi:moon-last-quarter","tags":["weather"]},{"name":"mdi:moon-new","tags":["weather"]},{"name":"mdi:moon-waning-crescent","tags":["weather"]},{"name":"mdi:moon-waning-gibbous","tags":["weather"]},{"name":"mdi:moon-waxing-crescent","tags":["weather"]},{"name":"mdi:moon-waxing-gibbous","tags":["weather"]},{"name":"mdi:moped","tags":["transportation + road","transportation + other","scooter","vespa","delivery dining"]},{"name":"mdi:moped-electric","tags":["transportation + road","scooter electric","vespa electric","delivery dining electric"]},{"name":"mdi:moped-electric-outline","tags":["transportation + road","scooter electric outline","vespa electric outline","delivery dining electric outline"]},{"name":"mdi:moped-outline","tags":["transportation + road","scooter outline","vespa outline","delivery dining outline"]},{"name":"mdi:more","tags":[]},{"name":"mdi:mortar-pestle","tags":[]},{"name":"mdi:mortar-pestle-plus","tags":["medical / hospital","chemist","local pharmacy","mortar pestle","pharmaceutical"]},{"name":"mdi:mosque","tags":["religion","islam","muslim"]},{"name":"mdi:mosque-outline","tags":["places","religion","islam","muslim"]},{"name":"mdi:mother-heart","tags":["people / family"]},{"name":"mdi:mother-nurse","tags":["medical / hospital","people / family","breast feed"]},{"name":"mdi:motion","tags":[]},{"name":"mdi:motion-outline","tags":[]},{"name":"mdi:motion-pause","tags":["video / movie"]},{"name":"mdi:motion-pause-outline","tags":["video / movie"]},{"name":"mdi:motion-play","tags":["video / movie"]},{"name":"mdi:motion-play-outline","tags":["video / movie"]},{"name":"mdi:motion-sensor","tags":["home automation","motion detector"]},{"name":"mdi:motion-sensor-off","tags":["home automation"]},{"name":"mdi:motorbike","tags":["transportation + road","sport","motorcycle"]},{"name":"mdi:motorbike-electric","tags":["transportation + road","motorcycle electric"]},{"name":"mdi:motorbike-off","tags":["transportation + road","motorcycle off"]},{"name":"mdi:mouse","tags":[]},{"name":"mdi:mouse-bluetooth","tags":[]},{"name":"mdi:mouse-left-click","tags":[]},{"name":"mdi:mouse-left-click-outline","tags":[]},{"name":"mdi:mouse-move-down","tags":[]},{"name":"mdi:mouse-move-up","tags":[]},{"name":"mdi:mouse-move-vertical","tags":[]},{"name":"mdi:mouse-off","tags":[]},{"name":"mdi:mouse-outline","tags":[]},{"name":"mdi:mouse-right-click","tags":[]},{"name":"mdi:mouse-right-click-outline","tags":[]},{"name":"mdi:mouse-scroll-wheel","tags":[]},{"name":"mdi:mouse-variant","tags":[]},{"name":"mdi:mouse-variant-off","tags":[]},{"name":"mdi:move-resize","tags":[]},{"name":"mdi:move-resize-variant","tags":[]},{"name":"mdi:movie","tags":["video / movie","slate","clapperboard","film","movie creation"]},{"name":"mdi:movie-check","tags":["video / movie","slate check","clapperboard check","film check"]},{"name":"mdi:movie-check-outline","tags":["video / movie","slate check outline","clapperboard check outline","film check outline"]},{"name":"mdi:movie-cog","tags":["video / movie","settings","slate cog","clapperboard cog","film cog"]},{"name":"mdi:movie-cog-outline","tags":["video / movie","settings","slate cog outline","clapperboard cog outline","film cog outline"]},{"name":"mdi:movie-edit","tags":["video / movie","edit / modify","slate edit","clapperboard edit","film edit"]},{"name":"mdi:movie-edit-outline","tags":["video / movie","edit / modify","slate edit outline","clapperboard edit outline","film edit outline"]},{"name":"mdi:movie-filter","tags":["video / movie"]},{"name":"mdi:movie-filter-outline","tags":["video / movie"]},{"name":"mdi:movie-minus","tags":["video / movie","slate minus","clapperboard minus","film minus"]},{"name":"mdi:movie-minus-outline","tags":["video / movie","slate minus outline","clapperboard minus outline","film minus outline"]},{"name":"mdi:movie-off","tags":["video / movie","slate off","clapperboard off","film off"]},{"name":"mdi:movie-off-outline","tags":["video / movie","slate off outline","clapperboard off outline","film off outline"]},{"name":"mdi:movie-open","tags":["video / movie","slate open","clapperboard open","film open","movie creation"]},{"name":"mdi:movie-open-check","tags":["video / movie","slate open check","clapperboard open check","film open check"]},{"name":"mdi:movie-open-check-outline","tags":["video / movie","slate open check outline","clapperboard open check outline","film open check outline"]},{"name":"mdi:movie-open-cog","tags":["video / movie","settings","slate open cog","clapperboard open cog","film open cog"]},{"name":"mdi:movie-open-cog-outline","tags":["video / movie","settings","slate open cog outline","clapperboard open cog outline","film open cog outline"]},{"name":"mdi:movie-open-edit","tags":["video / movie","edit / modify","slate open edit","clapperboard open edit","film open edit"]},{"name":"mdi:movie-open-edit-outline","tags":["video / movie","edit / modify","slate open edit outline","clapperboard open edit outline","film open edit outline"]},{"name":"mdi:movie-open-minus","tags":["video / movie","slate open minus","clapperboard open minus","film open minus"]},{"name":"mdi:movie-open-minus-outline","tags":["video / movie","slate open minus outline","clapperboard open minus outline","film open minus outline"]},{"name":"mdi:movie-open-off","tags":["video / movie","slate open off","clapperboard open off","film open off"]},{"name":"mdi:movie-open-off-outline","tags":["video / movie","slate open off outline","clapperboard open off outline","film open off outline"]},{"name":"mdi:movie-open-outline","tags":["video / movie","slate open outline","clapperboard open outline","film open outline","movie creation"]},{"name":"mdi:movie-open-play","tags":["video / movie","slate open play","clapperboard open play","film open play"]},{"name":"mdi:movie-open-play-outline","tags":["video / movie","slate open play outline","clapperboard open play outline","film open play outline"]},{"name":"mdi:movie-open-plus","tags":["video / movie","clapperboard open plus","slate open plus","flim open plus"]},{"name":"mdi:movie-open-plus-outline","tags":["video / movie","slate open plus outline","clapperboard open plus outline","film open plus outline"]},{"name":"mdi:movie-open-remove","tags":["video / movie","slate open remove","clapperboard open remove","film open remove"]},{"name":"mdi:movie-open-remove-outline","tags":["video / movie","slate open remove outline","clapperboard open remove outline","film open remove outline"]},{"name":"mdi:movie-open-settings","tags":["video / movie","settings","slate open settings","clapperboard open settings","film open settings"]},{"name":"mdi:movie-open-settings-outline","tags":["video / movie","settings","slate open settings outline","clapperboard open settings outline","film open settings outline"]},{"name":"mdi:movie-open-star","tags":["video / movie","slate open star","clapperboard open star","film open star","movie open favorite"]},{"name":"mdi:movie-open-star-outline","tags":["video / movie","slate open star outline","clapperboard open star outline","film open star outline","movie open favorite outline"]},{"name":"mdi:movie-outline","tags":["video / movie","slate outline","clapperboard outline","film outline"]},{"name":"mdi:movie-play","tags":["video / movie","slate play","clapperboard play","film play"]},{"name":"mdi:movie-play-outline","tags":["video / movie","slate play outline","clapperboard play outline","film play outline"]},{"name":"mdi:movie-plus","tags":["video / movie","slate plus","clapperboard plus","film plus"]},{"name":"mdi:movie-plus-outline","tags":["video / movie","slate plus outline","clapperboard plus outline","film plus outline"]},{"name":"mdi:movie-remove","tags":["video / movie","slate remove","clapperboard remove","film remove"]},{"name":"mdi:movie-remove-outline","tags":["video / movie","slate remove outline","clapperboard remove outline","film remove outline"]},{"name":"mdi:movie-roll","tags":["video / movie","film reel"]},{"name":"mdi:movie-search","tags":["video / movie"]},{"name":"mdi:movie-search-outline","tags":["video / movie"]},{"name":"mdi:movie-settings","tags":["video / movie","settings","slate settings","clapperboard settings","film settings"]},{"name":"mdi:movie-settings-outline","tags":["video / movie","settings","slate settings outline","clapperboard settings outline","film settings outline"]},{"name":"mdi:movie-star","tags":["video / movie","slate star","clapperboard star","film star","movie favorite"]},{"name":"mdi:movie-star-outline","tags":["video / movie","slate star outline","clapperboard star outline","film star outline","movie favorite outline"]},{"name":"mdi:mower","tags":["hardware / tools","home automation"]},{"name":"mdi:mower-bag","tags":["hardware / tools","home automation"]},{"name":"mdi:mower-bag-on","tags":["hardware / tools","home automation"]},{"name":"mdi:mower-on","tags":["hardware / tools","home automation"]},{"name":"mdi:muffin","tags":["food / drink"]},{"name":"mdi:multicast","tags":["multiplex","broadcast"]},{"name":"mdi:multimedia","tags":["audio","video / movie","photography","audio","video","image","music","movie","picture"]},{"name":"mdi:multiplication","tags":["math"]},{"name":"mdi:multiplication-box","tags":["math"]},{"name":"mdi:mushroom","tags":["nature","food / drink","agriculture","fungus"]},{"name":"mdi:mushroom-off","tags":["food / drink","nature","agriculture"]},{"name":"mdi:mushroom-off-outline","tags":["food / drink","nature","agriculture"]},{"name":"mdi:mushroom-outline","tags":["nature","food / drink","agriculture","fungus outline"]},{"name":"mdi:music","tags":["audio","music"]},{"name":"mdi:music-accidental-double-flat","tags":["music"]},{"name":"mdi:music-accidental-double-sharp","tags":["music"]},{"name":"mdi:music-accidental-flat","tags":["music"]},{"name":"mdi:music-accidental-natural","tags":["music"]},{"name":"mdi:music-accidental-sharp","tags":["music"]},{"name":"mdi:music-box","tags":["audio","music"]},{"name":"mdi:music-box-multiple","tags":["music","library music"]},{"name":"mdi:music-box-multiple-outline","tags":["music","library music outline"]},{"name":"mdi:music-box-outline","tags":["audio","music"]},{"name":"mdi:music-circle","tags":["audio","music","note circle"]},{"name":"mdi:music-circle-outline","tags":["music","audio","note circle outline"]},{"name":"mdi:music-clef-alto","tags":["music","music c clef","music clef tenor","music clef soprano","music clef baritone"]},{"name":"mdi:music-clef-bass","tags":["music","music f clef"]},{"name":"mdi:music-clef-treble","tags":["music","music g clef"]},{"name":"mdi:music-note","tags":["audio","music"]},{"name":"mdi:music-note-bluetooth","tags":["audio","music"]},{"name":"mdi:music-note-bluetooth-off","tags":["audio","music"]},{"name":"mdi:music-note-eighth","tags":["audio","music"]},{"name":"mdi:music-note-eighth-dotted","tags":["music"]},{"name":"mdi:music-note-half","tags":["audio","music"]},{"name":"mdi:music-note-half-dotted","tags":["music"]},{"name":"mdi:music-note-minus","tags":[]},{"name":"mdi:music-note-off","tags":["audio","music"]},{"name":"mdi:music-note-off-outline","tags":["music"]},{"name":"mdi:music-note-outline","tags":["music"]},{"name":"mdi:music-note-plus","tags":["audio","music","music note add"]},{"name":"mdi:music-note-quarter","tags":["audio","music"]},{"name":"mdi:music-note-quarter-dotted","tags":["music"]},{"name":"mdi:music-note-sixteenth","tags":["audio","music"]},{"name":"mdi:music-note-sixteenth-dotted","tags":["music"]},{"name":"mdi:music-note-whole","tags":["audio","music"]},{"name":"mdi:music-note-whole-dotted","tags":["music"]},{"name":"mdi:music-off","tags":["audio","music"]},{"name":"mdi:music-rest-eighth","tags":["music"]},{"name":"mdi:music-rest-half","tags":["music"]},{"name":"mdi:music-rest-quarter","tags":["music"]},{"name":"mdi:music-rest-sixteenth","tags":["music"]},{"name":"mdi:music-rest-whole","tags":["music"]},{"name":"mdi:mustache","tags":[]},{"name":"mdi:nail","tags":["hardware / tools"]},{"name":"mdi:nas","tags":["network attached storage"]},{"name":"mdi:nativescript","tags":["brand / logo"]},{"name":"mdi:nature","tags":["nature","agriculture","plant"]},{"name":"mdi:nature-outline","tags":["nature"]},{"name":"mdi:nature-people","tags":["account / user","nature","plant"]},{"name":"mdi:nature-people-outline","tags":["account / user","nature"]},{"name":"mdi:navigation","tags":["navigation","arrow compass"]},{"name":"mdi:navigation-outline","tags":["navigation"]},{"name":"mdi:navigation-variant","tags":["navigation"]},{"name":"mdi:navigation-variant-outline","tags":["navigation"]},{"name":"mdi:near-me","tags":[]},{"name":"mdi:necklace","tags":["clothing"]},{"name":"mdi:needle","tags":["medical / hospital","syringe","injection","medicine","shot","drug","immunization","pharmaceutical"]},{"name":"mdi:needle-off","tags":["medical / hospital","syringe off","injection off","medicine off","shot off","drug off","immunization off","pharmaceutical off"]},{"name":"mdi:netflix","tags":["brand / logo"]},{"name":"mdi:network","tags":[]},{"name":"mdi:network-off","tags":[]},{"name":"mdi:network-off-outline","tags":[]},{"name":"mdi:network-outline","tags":[]},{"name":"mdi:network-pos","tags":["banking","network point of sale","network cash box"]},{"name":"mdi:network-strength-1","tags":["cellphone / phone"]},{"name":"mdi:network-strength-1-alert","tags":["cellphone / phone","alert / error","network strength 1 warning"]},{"name":"mdi:network-strength-2","tags":["cellphone / phone"]},{"name":"mdi:network-strength-2-alert","tags":["cellphone / phone","alert / error","network strength 2 warning"]},{"name":"mdi:network-strength-3","tags":["cellphone / phone"]},{"name":"mdi:network-strength-3-alert","tags":["cellphone / phone","alert / error","network strength 3 warning"]},{"name":"mdi:network-strength-4","tags":["cellphone / phone"]},{"name":"mdi:network-strength-4-alert","tags":["cellphone / phone","alert / error","network strength 4 warning"]},{"name":"mdi:network-strength-4-cog","tags":["settings","network strength 4 settings","data settings"]},{"name":"mdi:network-strength-off","tags":["cellphone / phone"]},{"name":"mdi:network-strength-off-outline","tags":["cellphone / phone"]},{"name":"mdi:network-strength-outline","tags":["cellphone / phone","network strength 0"]},{"name":"mdi:new-box","tags":["fiber new"]},{"name":"mdi:newspaper","tags":[]},{"name":"mdi:newspaper-check","tags":[]},{"name":"mdi:newspaper-minus","tags":[]},{"name":"mdi:newspaper-plus","tags":[]},{"name":"mdi:newspaper-remove","tags":[]},{"name":"mdi:newspaper-variant","tags":[]},{"name":"mdi:newspaper-variant-multiple","tags":[]},{"name":"mdi:newspaper-variant-multiple-outline","tags":[]},{"name":"mdi:newspaper-variant-outline","tags":[]},{"name":"mdi:nfc","tags":["brand / logo","near field communication"]},{"name":"mdi:nfc-search-variant","tags":[]},{"name":"mdi:nfc-tap","tags":["near field communication tap"]},{"name":"mdi:nfc-variant","tags":["home automation","near field communication variant"]},{"name":"mdi:nfc-variant-off","tags":["home automation","near field communication off"]},{"name":"mdi:ninja","tags":[]},{"name":"mdi:nintendo-game-boy","tags":["gaming / rpg"]},{"name":"mdi:nintendo-switch","tags":["brand / logo","nintendo switch online"]},{"name":"mdi:nintendo-wii","tags":["brand / logo","gaming / rpg","nintendo wii"]},{"name":"mdi:nintendo-wiiu","tags":["brand / logo","gaming / rpg","nintendo wiiu"]},{"name":"mdi:nix","tags":["developer / languages","brand / logo"]},{"name":"mdi:nodejs","tags":["brand / logo"]},{"name":"mdi:noodles","tags":["food / drink","food ramen","asian noodles"]},{"name":"mdi:not-equal","tags":[]},{"name":"mdi:not-equal-variant","tags":["math"]},{"name":"mdi:note","tags":["paper","sticky note","post it note"]},{"name":"mdi:note-alert","tags":["alert / error","paper alert","sticky note alert","post it note alert"]},{"name":"mdi:note-alert-outline","tags":["alert / error","paper alert outline","post it note alert outline","sticky note alert outline"]},{"name":"mdi:note-check","tags":["paper check","sticky note check","post it note check"]},{"name":"mdi:note-check-outline","tags":["paper check outline","sticky note check outline","post it note check outline"]},{"name":"mdi:note-edit","tags":["edit / modify","paper edit","sticky note edit","post it note edit"]},{"name":"mdi:note-edit-outline","tags":["edit / modify","paper edit outline","sticky note edit outline","post it note edit outline"]},{"name":"mdi:note-minus","tags":["paper minus","sticky note minus","post it note minus"]},{"name":"mdi:note-minus-outline","tags":["paper minus outline","sticky note minus outline","post it note minus outline"]},{"name":"mdi:note-multiple","tags":["notes","papers","sticky notes","post it notes"]},{"name":"mdi:note-multiple-outline","tags":["notes outline","papers outline","sticky notes outline","post it notes outline"]},{"name":"mdi:note-off","tags":["paper off","sticky note off","post it note off"]},{"name":"mdi:note-off-outline","tags":["paper off outline","sticky note off outline","post it note off outline"]},{"name":"mdi:note-outline","tags":["paper outline","sticky note outline","post it note outline"]},{"name":"mdi:note-plus","tags":["note add","paper plus","paper add","sticky note plus","sticky note add","post it note plus","post it note add"]},{"name":"mdi:note-plus-outline","tags":["note add outline","paper plus outline","paper add outline","sticky note plus outline","sticky note add outline","post it note plus outline","post it note add outline"]},{"name":"mdi:note-remove","tags":["paper remove","sticky note remove","post it note remove"]},{"name":"mdi:note-remove-outline","tags":[]},{"name":"mdi:note-search","tags":["paper search","sticky note search","post it note search"]},{"name":"mdi:note-search-outline","tags":["paper search outline","sticky note search outline","post it note search outline"]},{"name":"mdi:note-text","tags":["paper text","sticky note text","post it note text"]},{"name":"mdi:note-text-outline","tags":["paper text outline","sticky note text outline","post it note text outline"]},{"name":"mdi:notebook","tags":["journal","planner","diary"]},{"name":"mdi:notebook-check","tags":[]},{"name":"mdi:notebook-check-outline","tags":[]},{"name":"mdi:notebook-edit","tags":["edit / modify"]},{"name":"mdi:notebook-edit-outline","tags":["edit / modify"]},{"name":"mdi:notebook-heart","tags":["notebook favorite","notebook love"]},{"name":"mdi:notebook-heart-outline","tags":["notebook favorite outline","notebook love outline"]},{"name":"mdi:notebook-minus","tags":[]},{"name":"mdi:notebook-minus-outline","tags":[]},{"name":"mdi:notebook-multiple","tags":["journal multiple","planner multiple"]},{"name":"mdi:notebook-outline","tags":["journal outline","planner outline"]},{"name":"mdi:notebook-plus","tags":[]},{"name":"mdi:notebook-plus-outline","tags":[]},{"name":"mdi:notebook-remove","tags":[]},{"name":"mdi:notebook-remove-outline","tags":[]},{"name":"mdi:notification-clear-all","tags":["notification"]},{"name":"mdi:npm","tags":["brand / logo"]},{"name":"mdi:nuke","tags":["nuclear","atomic bomb"]},{"name":"mdi:null","tags":[]},{"name":"mdi:numeric","tags":["alpha / numeric","numbers","1 2 3","one two three","123"]},{"name":"mdi:numeric-0","tags":["alpha / numeric","number 0","numeric zero"]},{"name":"mdi:numeric-0-box","tags":["alpha / numeric","numeric zero box","number 0 box"]},{"name":"mdi:numeric-0-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-0-box-multiple-outline","tags":["alpha / numeric","numeric zero box multiple outline","numeric 0 boxes outline","number 0 box multiple outline"]},{"name":"mdi:numeric-0-box-outline","tags":["alpha / numeric","numeric zero box outline","number 0 box outline"]},{"name":"mdi:numeric-0-circle","tags":["alpha / numeric","numeric zero circle","number 0 circle","number zero circle"]},{"name":"mdi:numeric-0-circle-outline","tags":["alpha / numeric","numeric zero circle outline","number 0 circle outline","number zero circle outline"]},{"name":"mdi:numeric-1","tags":["alpha / numeric","number 1","numeric one"]},{"name":"mdi:numeric-1-box","tags":["alpha / numeric","looks one","numeric one box","number 1 box"]},{"name":"mdi:numeric-1-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-1-box-multiple-outline","tags":["alpha / numeric","filter 1","numeric one box multiple outline","numeric 1 boxes outline","number 1 box multiple outline"]},{"name":"mdi:numeric-1-box-outline","tags":["alpha / numeric","numeric one box outline","number 1 box outline"]},{"name":"mdi:numeric-1-circle","tags":["alpha / numeric","numeric one circle","number 1 circle","number one circle"]},{"name":"mdi:numeric-1-circle-outline","tags":["alpha / numeric","numeric one circle outline","number 1 circle outline","number one circle outline"]},{"name":"mdi:numeric-10","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box-multiple-outline","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-box-outline","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-circle","tags":["alpha / numeric"]},{"name":"mdi:numeric-10-circle-outline","tags":["alpha / numeric"]},{"name":"mdi:numeric-2","tags":["alpha / numeric","number 2","numeric two"]},{"name":"mdi:numeric-2-box","tags":["alpha / numeric","looks two","numeric two box","number 2 box"]},{"name":"mdi:numeric-2-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-2-box-multiple-outline","tags":["alpha / numeric","filter 2","numeric two box multiple outline","numeric 2 boxes outline","number 2 box multiple outline"]},{"name":"mdi:numeric-2-box-outline","tags":["alpha / numeric","numeric two box outline","number 2 box outline"]},{"name":"mdi:numeric-2-circle","tags":["alpha / numeric","numeric two circle","number 2 circle","number two circle"]},{"name":"mdi:numeric-2-circle-outline","tags":["alpha / numeric","numeric two circle outline","number 2 circle outline","number two circle outline"]},{"name":"mdi:numeric-3","tags":["alpha / numeric","number 3","numeric three"]},{"name":"mdi:numeric-3-box","tags":["alpha / numeric","looks 3","numeric three box","number 3 box"]},{"name":"mdi:numeric-3-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-3-box-multiple-outline","tags":["alpha / numeric","filter 3","numeric three box multiple outline","numeric 3 boxes outline","number 3 box multiple outline"]},{"name":"mdi:numeric-3-box-outline","tags":["alpha / numeric","numeric three box outline","number 3 box outline"]},{"name":"mdi:numeric-3-circle","tags":["alpha / numeric","numeric three circle","number 3 circle","number three circle"]},{"name":"mdi:numeric-3-circle-outline","tags":["alpha / numeric","numeric three circle outline","number 3 circle outline","number three circle outline"]},{"name":"mdi:numeric-4","tags":["alpha / numeric","number 4","numeric four"]},{"name":"mdi:numeric-4-box","tags":["alpha / numeric","looks 4","numeric four box","number 4 box"]},{"name":"mdi:numeric-4-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-4-box-multiple-outline","tags":["alpha / numeric","filter 4","numeric four box multiple outline","numeric 4 boxes outline","number 4 box multiple outline"]},{"name":"mdi:numeric-4-box-outline","tags":["alpha / numeric","numeric four box outline","number 4 box outline"]},{"name":"mdi:numeric-4-circle","tags":["alpha / numeric","numeric four circle","number 4 circle","number four circle"]},{"name":"mdi:numeric-4-circle-outline","tags":["alpha / numeric","numeric four circle outline","number 4 circle outline","number four circle outline"]},{"name":"mdi:numeric-5","tags":["alpha / numeric","number 5","numeric five"]},{"name":"mdi:numeric-5-box","tags":["alpha / numeric","looks 5","numeric five box","number 5 box"]},{"name":"mdi:numeric-5-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-5-box-multiple-outline","tags":["alpha / numeric","filter 5","numeric five box multiple outline","numeric 5 boxes outline","number 5 box multiple outline"]},{"name":"mdi:numeric-5-box-outline","tags":["alpha / numeric","numeric five box outline","number 5 box outline"]},{"name":"mdi:numeric-5-circle","tags":["alpha / numeric","numeric five circle","number 5 circle","number five circle"]},{"name":"mdi:numeric-5-circle-outline","tags":["alpha / numeric","numeric five circle outline","number 5 circle outline","number five circle outline"]},{"name":"mdi:numeric-6","tags":["alpha / numeric","number 6","numeric six"]},{"name":"mdi:numeric-6-box","tags":["alpha / numeric","looks 6","numeric six box","number 6 box"]},{"name":"mdi:numeric-6-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-6-box-multiple-outline","tags":["alpha / numeric","filter 6","numeric six box multiple outline","numeric 6 boxes outline","number 6 box multiple outline"]},{"name":"mdi:numeric-6-box-outline","tags":["alpha / numeric","numeric six box outline","number 6 box outline"]},{"name":"mdi:numeric-6-circle","tags":["alpha / numeric","numeric six circle","number 6 circle","number six circle"]},{"name":"mdi:numeric-6-circle-outline","tags":["alpha / numeric","numeric six circle outline","number 6 circle outline","number six circle outline"]},{"name":"mdi:numeric-7","tags":["alpha / numeric","number 7","numeric seven"]},{"name":"mdi:numeric-7-box","tags":["alpha / numeric","numeric seven box","number 7 box"]},{"name":"mdi:numeric-7-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-7-box-multiple-outline","tags":["alpha / numeric","filter 7","numeric seven box multiple outline","numeric 7 boxes outline","number 7 box multiple outline"]},{"name":"mdi:numeric-7-box-outline","tags":["alpha / numeric","numeric seven box outline","number 7 box outline"]},{"name":"mdi:numeric-7-circle","tags":["alpha / numeric","numeric seven circle","number 7 circle","number seven circle"]},{"name":"mdi:numeric-7-circle-outline","tags":["alpha / numeric","numeric seven circle outline","number 7 circle outline","number seven circle outline"]},{"name":"mdi:numeric-8","tags":["alpha / numeric","number 8","numeric eight"]},{"name":"mdi:numeric-8-box","tags":["alpha / numeric","numeric eight box","number 8 box"]},{"name":"mdi:numeric-8-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-8-box-multiple-outline","tags":["alpha / numeric","filter 8","numeric eight box multiple outline","numeric 8 boxes outline","number 8 box multiple outline"]},{"name":"mdi:numeric-8-box-outline","tags":["alpha / numeric","numeric eight box outline","number 8 box outline"]},{"name":"mdi:numeric-8-circle","tags":["alpha / numeric","numeric eight circle","number 8 circle","number eight circle"]},{"name":"mdi:numeric-8-circle-outline","tags":["alpha / numeric","numeric eight circle outline","number 8 circle outline","number eight circle outline"]},{"name":"mdi:numeric-9","tags":["alpha / numeric","number 9","numeric nine"]},{"name":"mdi:numeric-9-box","tags":["alpha / numeric","numeric nine box","number 9 box"]},{"name":"mdi:numeric-9-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-9-box-multiple-outline","tags":["alpha / numeric","filter 9","numeric nine box multiple outline","numeric 9 boxes outline","number 9 box multiple outline"]},{"name":"mdi:numeric-9-box-outline","tags":["alpha / numeric","numeric nine box outline","number 9 box outline"]},{"name":"mdi:numeric-9-circle","tags":["alpha / numeric","numeric nine circle","number 9 circle","number nine circle"]},{"name":"mdi:numeric-9-circle-outline","tags":["alpha / numeric","numeric nine circle outline","number 9 circle outline","number nine circle outline"]},{"name":"mdi:numeric-9-plus","tags":["alpha / numeric"]},{"name":"mdi:numeric-9-plus-box","tags":["alpha / numeric","numeric nine plus box","number 9 plus box"]},{"name":"mdi:numeric-9-plus-box-multiple","tags":["alpha / numeric"]},{"name":"mdi:numeric-9-plus-box-multiple-outline","tags":["alpha / numeric","filter 9 plus","numeric nine plus box multiple outline","numeric 9 plus boxes outline","number 9 plus box multiple outline"]},{"name":"mdi:numeric-9-plus-box-outline","tags":["alpha / numeric","numeric nine plus box outline","number 9 plus box outline"]},{"name":"mdi:numeric-9-plus-circle","tags":["alpha / numeric","numeric nine plus circle","number 9 plus circle","number nine plus circle"]},{"name":"mdi:numeric-9-plus-circle-outline","tags":["alpha / numeric","numeric nine plus circle outline","number 9 plus circle outline","number nine plus circle outline"]},{"name":"mdi:numeric-negative-1","tags":["alpha / numeric","decrement","minus one"]},{"name":"mdi:numeric-off","tags":["alpha / numeric","numbers off","123 off","one two three off"]},{"name":"mdi:numeric-positive-1","tags":["alpha / numeric","increment","plus one"]},{"name":"mdi:nut","tags":["hardware / tools"]},{"name":"mdi:nutrition","tags":["food / drink"]},{"name":"mdi:nuxt","tags":["developer / languages","brand / logo"]},{"name":"mdi:oar","tags":[]},{"name":"mdi:ocarina","tags":["music","gaming / rpg"]},{"name":"mdi:oci","tags":["developer / languages","brand / logo","open container initiative"]},{"name":"mdi:ocr","tags":["optical character recognition"]},{"name":"mdi:octagon","tags":["shape","transportation + road","stop"]},{"name":"mdi:octagon-outline","tags":["shape","transportation + road","stop outline"]},{"name":"mdi:octagram","tags":["shape","starburst"]},{"name":"mdi:octagram-edit","tags":["shape","starburst edit"]},{"name":"mdi:octagram-edit-outline","tags":["shape","starburst edit outline"]},{"name":"mdi:octagram-minus","tags":["shape","starburst plus"]},{"name":"mdi:octagram-minus-outline","tags":["shape","starburst minus outline"]},{"name":"mdi:octagram-outline","tags":["shape","starburst outline"]},{"name":"mdi:octagram-plus","tags":["shape","starburst plus"]},{"name":"mdi:octagram-plus-outline","tags":[]},{"name":"mdi:octahedron","tags":["shape"]},{"name":"mdi:octahedron-off","tags":["shape"]},{"name":"mdi:odnoklassniki","tags":["brand / logo","ok ru"]},{"name":"mdi:offer","tags":[]},{"name":"mdi:office-building","tags":["places"]},{"name":"mdi:office-building-cog","tags":["settings","places","office building settings"]},{"name":"mdi:office-building-cog-outline","tags":["settings","places","office building settings outline"]},{"name":"mdi:office-building-marker","tags":["navigation","places","office building location"]},{"name":"mdi:office-building-marker-outline","tags":["navigation","places","office building location outline"]},{"name":"mdi:office-building-minus","tags":[]},{"name":"mdi:office-building-minus-outline","tags":[]},{"name":"mdi:office-building-outline","tags":["places"]},{"name":"mdi:office-building-plus","tags":[]},{"name":"mdi:office-building-plus-outline","tags":[]},{"name":"mdi:office-building-remove","tags":[]},{"name":"mdi:office-building-remove-outline","tags":[]},{"name":"mdi:oil","tags":["automotive"]},{"name":"mdi:oil-lamp","tags":["wish","genie lamp"]},{"name":"mdi:oil-level","tags":["automotive"]},{"name":"mdi:oil-temperature","tags":["automotive"]},{"name":"mdi:om","tags":["religion","religion hindu","hinduism"]},{"name":"mdi:omega","tags":["ohm","electrical resistance"]},{"name":"mdi:one-up","tags":["gaming / rpg","1up","extra life"]},{"name":"mdi:onepassword","tags":["brand / logo","1password"]},{"name":"mdi:opacity","tags":[]},{"name":"mdi:open-in-app","tags":["open in browser"]},{"name":"mdi:open-in-new","tags":["external link"]},{"name":"mdi:open-source-initiative","tags":["brand / logo"]},{"name":"mdi:openid","tags":["brand / logo"]},{"name":"mdi:opera","tags":["brand / logo"]},{"name":"mdi:orbit","tags":["science"]},{"name":"mdi:orbit-variant","tags":["photography","camera flip"]},{"name":"mdi:order-alphabetical-ascending","tags":["text / content / format"]},{"name":"mdi:order-alphabetical-descending","tags":["text / content / format"]},{"name":"mdi:order-bool-ascending","tags":["text / content / format"]},{"name":"mdi:order-bool-ascending-variant","tags":["text / content / format","order checkbox ascending"]},{"name":"mdi:order-bool-descending","tags":["text / content / format","order checkbox descending"]},{"name":"mdi:order-bool-descending-variant","tags":["text / content / format"]},{"name":"mdi:order-numeric-ascending","tags":["text / content / format"]},{"name":"mdi:order-numeric-descending","tags":["text / content / format"]},{"name":"mdi:origin","tags":["brand / logo"]},{"name":"mdi:ornament","tags":["holiday"]},{"name":"mdi:ornament-variant","tags":["holiday"]},{"name":"mdi:outdoor-lamp","tags":["home automation","outdoor light"]},{"name":"mdi:overscan","tags":["fullscreen"]},{"name":"mdi:owl","tags":["animal","holiday"]},{"name":"mdi:pac-man","tags":["gaming / rpg"]},{"name":"mdi:package","tags":["box"]},{"name":"mdi:package-check","tags":["package delivered"]},{"name":"mdi:package-down","tags":["archive","box down","this side down"]},{"name":"mdi:package-up","tags":["unarchive","box up","this side up"]},{"name":"mdi:package-variant","tags":["box variant"]},{"name":"mdi:package-variant-closed","tags":["box variant closed"]},{"name":"mdi:package-variant-closed-check","tags":["package variant closed delivered"]},{"name":"mdi:package-variant-closed-minus","tags":["package variant closed subtract","box variant closed minus","box variant closed subtract"]},{"name":"mdi:package-variant-closed-plus","tags":["box variant closed plus","package variant closed add","box variant closed add"]},{"name":"mdi:package-variant-closed-remove","tags":["box variant closed remove"]},{"name":"mdi:package-variant-minus","tags":["box variant minus","package variant subtract","box variant subtract"]},{"name":"mdi:package-variant-plus","tags":["box variant plus","package variant add","box variant add"]},{"name":"mdi:package-variant-remove","tags":["box variant remove"]},{"name":"mdi:page-first","tags":["first page","chevron left first"]},{"name":"mdi:page-last","tags":["last page","chevron right last"]},{"name":"mdi:page-layout-body","tags":[]},{"name":"mdi:page-layout-footer","tags":[]},{"name":"mdi:page-layout-header","tags":[]},{"name":"mdi:page-layout-header-footer","tags":["page layout marginals"]},{"name":"mdi:page-layout-sidebar-left","tags":[]},{"name":"mdi:page-layout-sidebar-right","tags":[]},{"name":"mdi:page-next","tags":["read more"]},{"name":"mdi:page-next-outline","tags":["read more outline"]},{"name":"mdi:page-previous","tags":[]},{"name":"mdi:page-previous-outline","tags":[]},{"name":"mdi:pail","tags":["bucket"]},{"name":"mdi:pail-minus","tags":["bucket minus"]},{"name":"mdi:pail-minus-outline","tags":["bucket minus outline"]},{"name":"mdi:pail-off","tags":["bucket off"]},{"name":"mdi:pail-off-outline","tags":["bucket off outline"]},{"name":"mdi:pail-outline","tags":["bucket outline"]},{"name":"mdi:pail-plus","tags":["bucket plus"]},{"name":"mdi:pail-plus-outline","tags":["bucket plus outline"]},{"name":"mdi:pail-remove","tags":["bucket remove"]},{"name":"mdi:pail-remove-outline","tags":["bucket remove outline"]},{"name":"mdi:palette","tags":["color","drawing / art","color lens","colour lens","paint","art","color"]},{"name":"mdi:palette-advanced","tags":["color","drawing / art","paint"]},{"name":"mdi:palette-outline","tags":["drawing / art","color","geographic information system","paint outline"]},{"name":"mdi:palette-swatch","tags":["drawing / art","color","style","paint","material"]},{"name":"mdi:palette-swatch-outline","tags":["drawing / art","color","style outline","paint outline"]},{"name":"mdi:palette-swatch-variant","tags":["drawing / art","color","style","paint","material"]},{"name":"mdi:palm-tree","tags":["nature"]},{"name":"mdi:pan","tags":[]},{"name":"mdi:pan-bottom-left","tags":["pan down left"]},{"name":"mdi:pan-bottom-right","tags":["pan down right"]},{"name":"mdi:pan-down","tags":[]},{"name":"mdi:pan-horizontal","tags":[]},{"name":"mdi:pan-left","tags":[]},{"name":"mdi:pan-right","tags":[]},{"name":"mdi:pan-top-left","tags":["pan up left"]},{"name":"mdi:pan-top-right","tags":["pan up right"]},{"name":"mdi:pan-up","tags":[]},{"name":"mdi:pan-vertical","tags":[]},{"name":"mdi:panda","tags":["animal","emoji panda","emoticon panda"]},{"name":"mdi:pandora","tags":["brand / logo"]},{"name":"mdi:panorama","tags":["photography"]},{"name":"mdi:panorama-fisheye","tags":["panorama fish eye"]},{"name":"mdi:panorama-horizontal","tags":["photography"]},{"name":"mdi:panorama-horizontal-outline","tags":["photography"]},{"name":"mdi:panorama-outline","tags":["photography"]},{"name":"mdi:panorama-sphere","tags":["photography","panorama 360"]},{"name":"mdi:panorama-sphere-outline","tags":["photography","panorama 360 outline"]},{"name":"mdi:panorama-variant","tags":["photography","panorama vr","image vr","picture vr","picture 360","image 360"]},{"name":"mdi:panorama-variant-outline","tags":["photography","panorama vr outline","image vr outline","picture vr outline","picture 360 outline","image 360 outline"]},{"name":"mdi:panorama-vertical","tags":["photography"]},{"name":"mdi:panorama-vertical-outline","tags":["photography"]},{"name":"mdi:panorama-wide-angle","tags":["photography"]},{"name":"mdi:panorama-wide-angle-outline","tags":["photography"]},{"name":"mdi:paper-cut-vertical","tags":[]},{"name":"mdi:paper-roll","tags":["home automation","printer","lavatory roll","bathroom tissue","toilet paper","kitchen roll","paper towels","receipt roll"]},{"name":"mdi:paper-roll-outline","tags":["home automation","printer","lavatory roll outline","bathroom tissue outline","kitchen roll outline","paper towels outline","toilet paper outline","receipt roll outline"]},{"name":"mdi:paperclip","tags":["attachment vertical","attach file"]},{"name":"mdi:paperclip-check","tags":["paperclip tick","attachment check","attachment tick"]},{"name":"mdi:paperclip-lock","tags":["lock","attachment lock"]},{"name":"mdi:paperclip-minus","tags":["paperclip subtract","attachment minus","attachment subtract"]},{"name":"mdi:paperclip-off","tags":["attachment off"]},{"name":"mdi:paperclip-plus","tags":["paperclip add","attachment plus","attachment add"]},{"name":"mdi:paperclip-remove","tags":["attachment remove"]},{"name":"mdi:parachute","tags":["transportation + flying"]},{"name":"mdi:parachute-outline","tags":["transportation + flying"]},{"name":"mdi:paragliding","tags":["sport","parasail","paraglide"]},{"name":"mdi:parking","tags":["places","car park","local parking"]},{"name":"mdi:party-popper","tags":["holiday","celebration"]},{"name":"mdi:passport","tags":[]},{"name":"mdi:passport-alert","tags":[]},{"name":"mdi:passport-biometric","tags":["passport electronic"]},{"name":"mdi:passport-cancel","tags":[]},{"name":"mdi:passport-check","tags":[]},{"name":"mdi:passport-minus","tags":[]},{"name":"mdi:passport-plus","tags":[]},{"name":"mdi:passport-remove","tags":[]},{"name":"mdi:pasta","tags":["food / drink","food italian","spaghetti"]},{"name":"mdi:patio-heater","tags":["home automation"]},{"name":"mdi:patreon","tags":["brand / logo"]},{"name":"mdi:pause","tags":["home automation"]},{"name":"mdi:pause-box","tags":["audio","music"]},{"name":"mdi:pause-box-outline","tags":["audio","music"]},{"name":"mdi:pause-circle","tags":["pause circle filled"]},{"name":"mdi:pause-circle-outline","tags":[]},{"name":"mdi:pause-octagon","tags":["stop pause"]},{"name":"mdi:pause-octagon-outline","tags":["stop pause outline"]},{"name":"mdi:paw","tags":["animal","nature","pets"]},{"name":"mdi:paw-off","tags":["animal"]},{"name":"mdi:paw-off-outline","tags":["animal"]},{"name":"mdi:paw-outline","tags":["animal"]},{"name":"mdi:peace","tags":[]},{"name":"mdi:peanut","tags":["food / drink","agriculture","allergen","food allergy"]},{"name":"mdi:peanut-off","tags":["food / drink","agriculture","allergen off","food allergy off"]},{"name":"mdi:peanut-off-outline","tags":["food / drink","agriculture","allergen off outline","food allergy off outline"]},{"name":"mdi:peanut-outline","tags":["food / drink","agriculture","allergen outline","food allergy outline"]},{"name":"mdi:pen","tags":["drawing / art"]},{"name":"mdi:pen-lock","tags":["lock"]},{"name":"mdi:pen-minus","tags":[]},{"name":"mdi:pen-off","tags":[]},{"name":"mdi:pen-plus","tags":["pen add"]},{"name":"mdi:pen-remove","tags":[]},{"name":"mdi:pencil","tags":["drawing / art","edit / modify","edit","create","mode edit"]},{"name":"mdi:pencil-box","tags":["drawing / art","edit box"]},{"name":"mdi:pencil-box-multiple","tags":["edit / modify","library edit"]},{"name":"mdi:pencil-box-multiple-outline","tags":["edit / modify","library edit outline"]},{"name":"mdi:pencil-box-outline","tags":["drawing / art","edit box outline"]},{"name":"mdi:pencil-circle","tags":["drawing / art","edit circle"]},{"name":"mdi:pencil-circle-outline","tags":["drawing / art","edit circle outline"]},{"name":"mdi:pencil-lock","tags":["lock"]},{"name":"mdi:pencil-lock-outline","tags":["lock"]},{"name":"mdi:pencil-minus","tags":[]},{"name":"mdi:pencil-minus-outline","tags":[]},{"name":"mdi:pencil-off","tags":["edit off"]},{"name":"mdi:pencil-off-outline","tags":["edit off outline"]},{"name":"mdi:pencil-outline","tags":["drawing / art","edit / modify","edit outline","create outline","mode edit outline"]},{"name":"mdi:pencil-plus","tags":["pencil add"]},{"name":"mdi:pencil-plus-outline","tags":["pencil add outline"]},{"name":"mdi:pencil-remove","tags":[]},{"name":"mdi:pencil-remove-outline","tags":[]},{"name":"mdi:pencil-ruler","tags":["drawing / art","design"]},{"name":"mdi:pencil-ruler-outline","tags":["drawing / art"]},{"name":"mdi:penguin","tags":["animal","emoji penguin","emoticon penguin","linux"]},{"name":"mdi:pentagon","tags":["shape"]},{"name":"mdi:pentagon-outline","tags":["shape"]},{"name":"mdi:pentagram","tags":[]},{"name":"mdi:percent","tags":["math","shopping","discount","sale"]},{"name":"mdi:percent-box","tags":["math","shopping","discount box","sale box"]},{"name":"mdi:percent-box-outline","tags":["math","shopping","discount box outline","sale box outline"]},{"name":"mdi:percent-circle","tags":["math","shopping","discount circle","sale circle"]},{"name":"mdi:percent-circle-outline","tags":["math","shopping","discount circle outline","sale circle outline"]},{"name":"mdi:percent-outline","tags":["math","shopping","discount outline","sale outline"]},{"name":"mdi:periodic-table","tags":["science"]},{"name":"mdi:perspective-less","tags":["math","perspective decrease"]},{"name":"mdi:perspective-more","tags":["math","perspective increase"]},{"name":"mdi:ph","tags":["science","home automation","acid","base","potential of hydrogen","power of hydrogen"]},{"name":"mdi:phone","tags":["cellphone / phone","call","local phone","telephone"]},{"name":"mdi:phone-alert","tags":["cellphone / phone","alert / error"]},{"name":"mdi:phone-alert-outline","tags":["cellphone / phone","alert / error"]},{"name":"mdi:phone-bluetooth","tags":["cellphone / phone","phone bluetooth speaker","telephone bluetooth"]},{"name":"mdi:phone-bluetooth-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-cancel","tags":["cellphone / phone","phone block"]},{"name":"mdi:phone-cancel-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-check","tags":["cellphone / phone"]},{"name":"mdi:phone-check-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-classic","tags":["cellphone / phone"]},{"name":"mdi:phone-classic-off","tags":[]},{"name":"mdi:phone-clock","tags":["cellphone / phone","date / time","phone schedule","phone time"]},{"name":"mdi:phone-dial","tags":["cellphone / phone","phone keypad"]},{"name":"mdi:phone-dial-outline","tags":["cellphone / phone","phone keypad outline"]},{"name":"mdi:phone-forward","tags":["cellphone / phone","phone forwarded","telephone forward"]},{"name":"mdi:phone-forward-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-hangup","tags":["cellphone / phone","call end","telephone hangup"]},{"name":"mdi:phone-hangup-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-in-talk","tags":["cellphone / phone","telephone in talk"]},{"name":"mdi:phone-in-talk-outline","tags":["cellphone / phone","telephone in talk outline"]},{"name":"mdi:phone-incoming","tags":["cellphone / phone","telephone incoming"]},{"name":"mdi:phone-incoming-outgoing","tags":["cellphone / phone"]},{"name":"mdi:phone-incoming-outgoing-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-incoming-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-lock","tags":["cellphone / phone","lock","telephone locked","phone locked","telephone lock"]},{"name":"mdi:phone-lock-outline","tags":["cellphone / phone","lock"]},{"name":"mdi:phone-log","tags":["cellphone / phone"]},{"name":"mdi:phone-log-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-message","tags":["cellphone / phone"]},{"name":"mdi:phone-message-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-minus","tags":["cellphone / phone"]},{"name":"mdi:phone-minus-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-missed","tags":["cellphone / phone"]},{"name":"mdi:phone-missed-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-off","tags":["cellphone / phone"]},{"name":"mdi:phone-off-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-outgoing","tags":["cellphone / phone"]},{"name":"mdi:phone-outgoing-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-outline","tags":["cellphone / phone","telephone outline","call outline"]},{"name":"mdi:phone-paused","tags":["cellphone / phone"]},{"name":"mdi:phone-paused-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-plus","tags":["cellphone / phone","add call"]},{"name":"mdi:phone-plus-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-refresh","tags":["cellphone / phone","phone redial"]},{"name":"mdi:phone-refresh-outline","tags":["cellphone / phone","phone redial outline"]},{"name":"mdi:phone-remove","tags":["cellphone / phone"]},{"name":"mdi:phone-remove-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-return","tags":["cellphone / phone"]},{"name":"mdi:phone-return-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-ring","tags":["cellphone / phone"]},{"name":"mdi:phone-ring-outline","tags":["cellphone / phone"]},{"name":"mdi:phone-rotate-landscape","tags":["cellphone / phone"]},{"name":"mdi:phone-rotate-portrait","tags":["cellphone / phone"]},{"name":"mdi:phone-settings","tags":["settings","cellphone / phone","settings phone"]},{"name":"mdi:phone-settings-outline","tags":["cellphone / phone","settings"]},{"name":"mdi:phone-sync","tags":["cellphone / phone","phone redial"]},{"name":"mdi:phone-sync-outline","tags":["cellphone / phone","phone redial outline"]},{"name":"mdi:phone-voip","tags":["cellphone / phone"]},{"name":"mdi:pi","tags":["math"]},{"name":"mdi:pi-box","tags":["math"]},{"name":"mdi:pi-hole","tags":["brand / logo"]},{"name":"mdi:piano","tags":["music"]},{"name":"mdi:piano-off","tags":["music"]},{"name":"mdi:pickaxe","tags":[]},{"name":"mdi:picture-in-picture-bottom-right","tags":[]},{"name":"mdi:picture-in-picture-bottom-right-outline","tags":[]},{"name":"mdi:picture-in-picture-top-right","tags":[]},{"name":"mdi:picture-in-picture-top-right-outline","tags":[]},{"name":"mdi:pier","tags":["places","transportation + water"]},{"name":"mdi:pier-crane","tags":["transportation + water","places"]},{"name":"mdi:pig","tags":["animal","agriculture","emoji pig","emoticon pig"]},{"name":"mdi:pig-variant","tags":["animal","agriculture"]},{"name":"mdi:pig-variant-outline","tags":["agriculture","animal"]},{"name":"mdi:piggy-bank","tags":["banking"]},{"name":"mdi:piggy-bank-outline","tags":["banking"]},{"name":"mdi:pill","tags":["medical / hospital","medicine","capsule","drug","pharmaceutical"]},{"name":"mdi:pill-multiple","tags":["medical / hospital","medicine","medication","drugs"]},{"name":"mdi:pill-off","tags":["medical / hospital","medicine off","capsule off","drug off","pharmaceutical off"]},{"name":"mdi:pillar","tags":["historic","column"]},{"name":"mdi:pin","tags":["keep"]},{"name":"mdi:pin-off","tags":["keep off"]},{"name":"mdi:pin-off-outline","tags":["keep off outline"]},{"name":"mdi:pin-outline","tags":["keep outline"]},{"name":"mdi:pine-tree","tags":["holiday","nature","places","agriculture","forest","plant"]},{"name":"mdi:pine-tree-box","tags":["holiday","nature","agriculture","plant"]},{"name":"mdi:pine-tree-fire","tags":["nature","agriculture","wildfire","controlled burn"]},{"name":"mdi:pine-tree-variant","tags":["nature","places","agriculture"]},{"name":"mdi:pine-tree-variant-outline","tags":["places","nature","agriculture"]},{"name":"mdi:pinterest","tags":["brand / logo"]},{"name":"mdi:pinwheel","tags":["toys"]},{"name":"mdi:pinwheel-outline","tags":["toys outline"]},{"name":"mdi:pipe","tags":["home automation"]},{"name":"mdi:pipe-disconnected","tags":["home automation"]},{"name":"mdi:pipe-leak","tags":["home automation"]},{"name":"mdi:pipe-valve","tags":["home automation"]},{"name":"mdi:pipe-wrench","tags":["hardware / tools","monkey wrench"]},{"name":"mdi:pirate","tags":[]},{"name":"mdi:pistol","tags":["gun"]},{"name":"mdi:piston","tags":["automotive"]},{"name":"mdi:pitchfork","tags":["hardware / tools"]},{"name":"mdi:pizza","tags":["food / drink","places","pizzeria","local pizza"]},{"name":"mdi:plane-car","tags":["transportation + flying","transportation + road","airport shuttle","airport taxi","airplane car"]},{"name":"mdi:plane-train","tags":["transportation + flying","transportation + other","airport shuttle","airplane train"]},{"name":"mdi:play","tags":["home automation","play arrow"]},{"name":"mdi:play-box","tags":[]},{"name":"mdi:play-box-edit-outline","tags":[]},{"name":"mdi:play-box-lock","tags":["video / movie","lock"]},{"name":"mdi:play-box-lock-open","tags":["video / movie","lock"]},{"name":"mdi:play-box-lock-open-outline","tags":["video / movie","lock"]},{"name":"mdi:play-box-lock-outline","tags":["video / movie","lock"]},{"name":"mdi:play-box-multiple","tags":[]},{"name":"mdi:play-box-multiple-outline","tags":[]},{"name":"mdi:play-box-outline","tags":["slideshow"]},{"name":"mdi:play-circle","tags":["play circle filled"]},{"name":"mdi:play-circle-outline","tags":[]},{"name":"mdi:play-network","tags":["media network"]},{"name":"mdi:play-network-outline","tags":["media network outline"]},{"name":"mdi:play-outline","tags":[]},{"name":"mdi:play-pause","tags":["home automation"]},{"name":"mdi:play-protected-content","tags":[]},{"name":"mdi:play-speed","tags":[]},{"name":"mdi:playlist-check","tags":["subscriptions","playlist add check","playlist tick"]},{"name":"mdi:playlist-edit","tags":["edit / modify"]},{"name":"mdi:playlist-minus","tags":[]},{"name":"mdi:playlist-music","tags":["music","playlist note","queue music"]},{"name":"mdi:playlist-music-outline","tags":["music","playlist note outline","queue music outline"]},{"name":"mdi:playlist-play","tags":[]},{"name":"mdi:playlist-plus","tags":["playlist add"]},{"name":"mdi:playlist-remove","tags":[]},{"name":"mdi:playlist-star","tags":["playlist favorite"]},{"name":"mdi:plex","tags":["brand / logo"]},{"name":"mdi:pliers","tags":["hardware / tools"]},{"name":"mdi:plus","tags":["math","add"]},{"name":"mdi:plus-box","tags":["math","add box"]},{"name":"mdi:plus-box-multiple","tags":["add to photos","library add","queue","library plus"]},{"name":"mdi:plus-box-multiple-outline","tags":[]},{"name":"mdi:plus-box-outline","tags":["math"]},{"name":"mdi:plus-circle","tags":["add circle"]},{"name":"mdi:plus-circle-multiple","tags":["coins plus"]},{"name":"mdi:plus-circle-multiple-outline","tags":["control point duplicate","plus circles outline","coins plus outline"]},{"name":"mdi:plus-circle-outline","tags":["add circle outline","control point","circles add"]},{"name":"mdi:plus-lock","tags":["lock","plus secure"]},{"name":"mdi:plus-lock-open","tags":["lock"]},{"name":"mdi:plus-minus","tags":["math"]},{"name":"mdi:plus-minus-box","tags":["math"]},{"name":"mdi:plus-minus-variant","tags":["math"]},{"name":"mdi:plus-network","tags":["add network"]},{"name":"mdi:plus-network-outline","tags":["add network outline"]},{"name":"mdi:plus-outline","tags":[]},{"name":"mdi:plus-thick","tags":["math","add thick","add bold","plus bold"]},{"name":"mdi:pocket","tags":[]},{"name":"mdi:podcast","tags":[]},{"name":"mdi:podium","tags":["sport"]},{"name":"mdi:podium-bronze","tags":["sport","podium third"]},{"name":"mdi:podium-gold","tags":["sport","podium first"]},{"name":"mdi:podium-silver","tags":["sport","podium second"]},{"name":"mdi:point-of-sale","tags":[]},{"name":"mdi:pokeball","tags":["gaming / rpg"]},{"name":"mdi:pokemon-go","tags":["gaming / rpg","brand / logo"]},{"name":"mdi:poker-chip","tags":["gaming / rpg","casino chip","gambling chip"]},{"name":"mdi:polaroid","tags":[]},{"name":"mdi:police-badge","tags":[]},{"name":"mdi:police-badge-outline","tags":[]},{"name":"mdi:police-station","tags":["places"]},{"name":"mdi:poll","tags":["bar chart","report","performance","analytics"]},{"name":"mdi:polo","tags":["sport"]},{"name":"mdi:polymer","tags":["brand / logo","developer / languages"]},{"name":"mdi:pool","tags":["places","home automation","swimming pool"]},{"name":"mdi:pool-thermometer","tags":["home automation","pool temperature"]},{"name":"mdi:popcorn","tags":["food / drink"]},{"name":"mdi:post","tags":["blog"]},{"name":"mdi:post-lamp","tags":["home automation","post light"]},{"name":"mdi:post-outline","tags":["blog outline"]},{"name":"mdi:postage-stamp","tags":[]},{"name":"mdi:pot","tags":["food / drink","holiday"]},{"name":"mdi:pot-mix","tags":["food / drink","holiday"]},{"name":"mdi:pot-mix-outline","tags":["food / drink","holiday"]},{"name":"mdi:pot-outline","tags":["food / drink","holiday"]},{"name":"mdi:pot-steam","tags":["food / drink","holiday"]},{"name":"mdi:pot-steam-outline","tags":["food / drink","holiday"]},{"name":"mdi:pound","tags":["hashtag"]},{"name":"mdi:pound-box","tags":["hashtag box"]},{"name":"mdi:pound-box-outline","tags":["hashtag box outline"]},{"name":"mdi:power","tags":["home automation","power settings new","shutdown"]},{"name":"mdi:power-cycle","tags":[]},{"name":"mdi:power-off","tags":[]},{"name":"mdi:power-on","tags":[]},{"name":"mdi:power-plug","tags":["home automation"]},{"name":"mdi:power-plug-battery","tags":["home automation","battery","battery backup"]},{"name":"mdi:power-plug-battery-outline","tags":["home automation","battery","battery backup outline"]},{"name":"mdi:power-plug-off","tags":["home automation","power off"]},{"name":"mdi:power-plug-off-outline","tags":["home automation"]},{"name":"mdi:power-plug-outline","tags":["home automation"]},{"name":"mdi:power-settings","tags":["settings","settings power"]},{"name":"mdi:power-sleep","tags":[]},{"name":"mdi:power-socket","tags":["home automation","plug socket"]},{"name":"mdi:power-socket-au","tags":["home automation","plug socket au","power socket type i","power socket cn","power socket ar","power socket nz","power socket pg","power socket australia","power socket china","power socket argentina","power socket new zealand","power socket papua new guinea"]},{"name":"mdi:power-socket-ch","tags":["home automation","plug socket ch","power socket type j","plug socket type j","power socket switzerland","plug socket switzerland"]},{"name":"mdi:power-socket-de","tags":["home automation"]},{"name":"mdi:power-socket-eu","tags":["home automation","plug socket eu","power socket europe"]},{"name":"mdi:power-socket-fr","tags":["home automation"]},{"name":"mdi:power-socket-it","tags":[]},{"name":"mdi:power-socket-jp","tags":["home automation"]},{"name":"mdi:power-socket-uk","tags":["home automation","plug socket uk","power socket type g","power socket ie","power socket hk","power socket my","power socket cy","power socket mt","power socket sg","power socket united kingdom","power socket ireland","power socket hong kong","power socket malaysia","power socket cyprus","power socket malta","power socket singapore"]},{"name":"mdi:power-socket-us","tags":["home automation","plug socket us","power socket ca","power socket mx","power socket type b","power socket united states","power socket japan","power socket canada","power socket mexico"]},{"name":"mdi:power-standby","tags":[]},{"name":"mdi:powershell","tags":[]},{"name":"mdi:prescription","tags":["medical / hospital"]},{"name":"mdi:presentation","tags":[]},{"name":"mdi:presentation-play","tags":[]},{"name":"mdi:pretzel","tags":["food / drink"]},{"name":"mdi:printer","tags":["printer","home automation","local printshop","local print shop"]},{"name":"mdi:printer-3d","tags":["printer","home automation"]},{"name":"mdi:printer-3d-nozzle","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-alert","tags":["alert / error","printer"]},{"name":"mdi:printer-3d-nozzle-alert-outline","tags":["alert / error","printer"]},{"name":"mdi:printer-3d-nozzle-heat","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-heat-outline","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-off","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-off-outline","tags":["printer"]},{"name":"mdi:printer-3d-nozzle-outline","tags":["printer"]},{"name":"mdi:printer-3d-off","tags":["printer"]},{"name":"mdi:printer-alert","tags":["printer","home automation","alert / error","printer warning","paper jam"]},{"name":"mdi:printer-check","tags":["printer"]},{"name":"mdi:printer-eye","tags":["printer","printer preview","printer view"]},{"name":"mdi:printer-off","tags":["printer"]},{"name":"mdi:printer-off-outline","tags":["printer"]},{"name":"mdi:printer-outline","tags":["printer"]},{"name":"mdi:printer-pos","tags":["printer","printer point of sale","printer receipt"]},{"name":"mdi:printer-pos-alert","tags":["alert / error","printer","printer point of sale alert","printer receipt alert"]},{"name":"mdi:printer-pos-alert-outline","tags":["printer","alert / error","printer point of sale alert outline","printer receipt alert outline"]},{"name":"mdi:printer-pos-cancel","tags":["printer","printer point of sale cancel","printer receipt cancel"]},{"name":"mdi:printer-pos-cancel-outline","tags":["printer","printer point of sale cancel outline","printer receipt cancel outline"]},{"name":"mdi:printer-pos-check","tags":["printer","printer point of sale check","printer receipt check"]},{"name":"mdi:printer-pos-check-outline","tags":["printer","printer point of sale check outline","printer receipt check outline"]},{"name":"mdi:printer-pos-cog","tags":["printer","printer point of sale cog","printer receipt cog"]},{"name":"mdi:printer-pos-cog-outline","tags":["printer","printer point of sale cog outline","printer receipt cog outline"]},{"name":"mdi:printer-pos-edit","tags":["printer","printer point of sale edit","printer receipt edit"]},{"name":"mdi:printer-pos-edit-outline","tags":["printer","printer point of sale edit outline","printer receipt edit outline"]},{"name":"mdi:printer-pos-minus","tags":["printer","printer point of sale minus","printer receipt minus"]},{"name":"mdi:printer-pos-minus-outline","tags":["printer","printer point of sale minus outline","printer receipt minus outline"]},{"name":"mdi:printer-pos-network","tags":["printer","printer point of sale network","printer receipt network"]},{"name":"mdi:printer-pos-network-outline","tags":["printer","printer point of sale network outline","printer receipt network outline"]},{"name":"mdi:printer-pos-off","tags":["printer","printer point of sale off","printer receipt off"]},{"name":"mdi:printer-pos-off-outline","tags":["printer","printer point of sale off outline","printer receipt off outline"]},{"name":"mdi:printer-pos-outline","tags":["printer","printer point of sale outline","printer receipt outline"]},{"name":"mdi:printer-pos-pause","tags":["printer","printer point of sale pause","printer receipt pause"]},{"name":"mdi:printer-pos-pause-outline","tags":["printer","printer point of sale pause outline","printer receipt pause outline"]},{"name":"mdi:printer-pos-play","tags":["printer","printer point of sale play","printer receipt play"]},{"name":"mdi:printer-pos-play-outline","tags":["printer","printer point of sale play outline","printer receipt play outline"]},{"name":"mdi:printer-pos-plus","tags":["printer","printer point of sale plus","printer receipt plus"]},{"name":"mdi:printer-pos-plus-outline","tags":["printer","printer point of sale plus outline","printer receipt plus outline"]},{"name":"mdi:printer-pos-refresh","tags":["printer","printer point of sale refresh","printer receipt refresh"]},{"name":"mdi:printer-pos-refresh-outline","tags":["printer","printer point of sale refresh outline","printer receipt refresh outline"]},{"name":"mdi:printer-pos-remove","tags":["printer","printer point of sale remove","printer receipt remove"]},{"name":"mdi:printer-pos-remove-outline","tags":["printer","printer point of sale remove outline","printer receipt remove outline"]},{"name":"mdi:printer-pos-star","tags":["printer","printer point of sale star","printer receipt star","printer favorite","printer primary"]},{"name":"mdi:printer-pos-star-outline","tags":["printer","printer point of sale star outline","printer receipt star outline"]},{"name":"mdi:printer-pos-stop","tags":["printer","printer point of sale stop","printer receipt stop"]},{"name":"mdi:printer-pos-stop-outline","tags":["printer","printer point of sale stop outline","printer receipt stop outline"]},{"name":"mdi:printer-pos-sync","tags":["printer","printer point of sale sync","printer receipt sync"]},{"name":"mdi:printer-pos-sync-outline","tags":["printer","printer point of sale sync outline","printer receipt sync outline"]},{"name":"mdi:printer-pos-wrench","tags":["printer","printer point of sale wrench","printer receipt wrench"]},{"name":"mdi:printer-pos-wrench-outline","tags":["printer","printer point of sale wrench outline","printer receipt wrench outline"]},{"name":"mdi:printer-search","tags":["printer","printer preview","printer magnify"]},{"name":"mdi:printer-settings","tags":["settings","printer"]},{"name":"mdi:printer-wireless","tags":["printer"]},{"name":"mdi:priority-high","tags":[]},{"name":"mdi:priority-low","tags":["low priority"]},{"name":"mdi:professional-hexagon","tags":[]},{"name":"mdi:progress-alert","tags":["alert / error","progress warning"]},{"name":"mdi:progress-check","tags":["progress tick"]},{"name":"mdi:progress-clock","tags":["date / time"]},{"name":"mdi:progress-close","tags":[]},{"name":"mdi:progress-download","tags":[]},{"name":"mdi:progress-helper","tags":[]},{"name":"mdi:progress-pencil","tags":[]},{"name":"mdi:progress-question","tags":[]},{"name":"mdi:progress-star","tags":[]},{"name":"mdi:progress-star-four-points","tags":["progress auto"]},{"name":"mdi:progress-tag","tags":[]},{"name":"mdi:progress-upload","tags":[]},{"name":"mdi:progress-wrench","tags":["hardware / tools","progress spanner"]},{"name":"mdi:projector","tags":["device / tech","home automation"]},{"name":"mdi:projector-off","tags":["device / tech","home automation"]},{"name":"mdi:projector-screen","tags":["device / tech","home automation"]},{"name":"mdi:projector-screen-off","tags":["home automation"]},{"name":"mdi:projector-screen-off-outline","tags":["home automation"]},{"name":"mdi:projector-screen-outline","tags":["home automation"]},{"name":"mdi:projector-screen-variant","tags":["home automation"]},{"name":"mdi:projector-screen-variant-off","tags":["home automation"]},{"name":"mdi:projector-screen-variant-off-outline","tags":["home automation"]},{"name":"mdi:projector-screen-variant-outline","tags":["home automation"]},{"name":"mdi:propane-tank","tags":[]},{"name":"mdi:propane-tank-outline","tags":[]},{"name":"mdi:protocol","tags":[]},{"name":"mdi:publish","tags":[]},{"name":"mdi:publish-off","tags":["arrow","publish disabled"]},{"name":"mdi:pulse","tags":["medical / hospital","vitals"]},{"name":"mdi:pump","tags":[]},{"name":"mdi:pump-off","tags":[]},{"name":"mdi:pumpkin","tags":["holiday"]},{"name":"mdi:purse","tags":[]},{"name":"mdi:purse-outline","tags":[]},{"name":"mdi:puzzle","tags":["gaming / rpg","extension","jigsaw"]},{"name":"mdi:puzzle-check","tags":["gaming / rpg"]},{"name":"mdi:puzzle-check-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-edit","tags":["gaming / rpg","edit / modify"]},{"name":"mdi:puzzle-edit-outline","tags":["gaming / rpg","edit / modify"]},{"name":"mdi:puzzle-heart","tags":["gaming / rpg"]},{"name":"mdi:puzzle-heart-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-minus","tags":["gaming / rpg"]},{"name":"mdi:puzzle-minus-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-outline","tags":["gaming / rpg","jigsaw outline","extension outline"]},{"name":"mdi:puzzle-plus","tags":["gaming / rpg"]},{"name":"mdi:puzzle-plus-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-remove","tags":["gaming / rpg"]},{"name":"mdi:puzzle-remove-outline","tags":["gaming / rpg"]},{"name":"mdi:puzzle-star","tags":["gaming / rpg","puzzle favorite"]},{"name":"mdi:puzzle-star-outline","tags":["gaming / rpg","puzzle favorite outline"]},{"name":"mdi:pyramid","tags":["shape"]},{"name":"mdi:pyramid-off","tags":["shape"]},{"name":"mdi:qi","tags":["brand / logo"]},{"name":"mdi:qqchat","tags":["brand / logo"]},{"name":"mdi:qrcode","tags":[]},{"name":"mdi:qrcode-edit","tags":["edit / modify"]},{"name":"mdi:qrcode-minus","tags":[]},{"name":"mdi:qrcode-plus","tags":[]},{"name":"mdi:qrcode-remove","tags":[]},{"name":"mdi:qrcode-scan","tags":[]},{"name":"mdi:quadcopter","tags":["drone"]},{"name":"mdi:quality-high","tags":["video / movie","high quality","hq"]},{"name":"mdi:quality-low","tags":["low quality","lq"]},{"name":"mdi:quality-medium","tags":["medium quality","mq"]},{"name":"mdi:queue-first-in-last-out","tags":[]},{"name":"mdi:quora","tags":[]},{"name":"mdi:rabbit","tags":["animal","nature","bunny","hare"]},{"name":"mdi:rabbit-variant","tags":["animal","holiday","nature","bunny","easter","hare","cruelty free"]},{"name":"mdi:rabbit-variant-outline","tags":["animal","holiday","nature","easter outline","bunny outline","hare outline","cruelty free outline"]},{"name":"mdi:racing-helmet","tags":["sport"]},{"name":"mdi:racquetball","tags":["sport","lacrosse","squash"]},{"name":"mdi:radar","tags":["track changes"]},{"name":"mdi:radiator","tags":["home automation","heater"]},{"name":"mdi:radiator-disabled","tags":["home automation","heater disabled"]},{"name":"mdi:radiator-off","tags":["home automation","heater off"]},{"name":"mdi:radio","tags":["audio","device / tech"]},{"name":"mdi:radio-am","tags":["audio"]},{"name":"mdi:radio-fm","tags":["audio"]},{"name":"mdi:radio-handheld","tags":["device / tech"]},{"name":"mdi:radio-off","tags":[]},{"name":"mdi:radio-tower","tags":[]},{"name":"mdi:radioactive","tags":["science","radiation"]},{"name":"mdi:radioactive-circle","tags":["science","radiation circle"]},{"name":"mdi:radioactive-circle-outline","tags":["science","radiation circle outline"]},{"name":"mdi:radioactive-off","tags":["science","radiation off"]},{"name":"mdi:radiobox-blank","tags":["form","radio button unchecked"]},{"name":"mdi:radiobox-indeterminate-variant","tags":["form","radio button indeterminate","radiobox intermediate variant"]},{"name":"mdi:radiobox-marked","tags":["form","radio button checked","record"]},{"name":"mdi:radiology-box","tags":["medical / hospital","x ray box"]},{"name":"mdi:radiology-box-outline","tags":["medical / hospital","x ray box outline"]},{"name":"mdi:radius","tags":["math","circle radius","sphere radius"]},{"name":"mdi:radius-outline","tags":["math","circle radius outline","sphere radius outline"]},{"name":"mdi:railroad-light","tags":["transportation + other","railroad crossing light","train crossing light","level crossing signals"]},{"name":"mdi:rake","tags":["hardware / tools"]},{"name":"mdi:raspberry-pi","tags":["raspberrypi"]},{"name":"mdi:raw","tags":["photography"]},{"name":"mdi:raw-off","tags":["photography"]},{"name":"mdi:ray-end","tags":[]},{"name":"mdi:ray-end-arrow","tags":[]},{"name":"mdi:ray-start","tags":[]},{"name":"mdi:ray-start-arrow","tags":[]},{"name":"mdi:ray-start-end","tags":[]},{"name":"mdi:ray-start-vertex-end","tags":[]},{"name":"mdi:ray-vertex","tags":[]},{"name":"mdi:razor-double-edge","tags":["health / beauty","hardware / tools"]},{"name":"mdi:razor-single-edge","tags":["hardware / tools"]},{"name":"mdi:react","tags":["brand / logo","developer / languages"]},{"name":"mdi:read","tags":[]},{"name":"mdi:receipt","tags":["banking","cloth","fabric","swatch"]},{"name":"mdi:receipt-clock","tags":["receipt pending"]},{"name":"mdi:receipt-clock-outline","tags":["receipt pending"]},{"name":"mdi:receipt-outline","tags":["banking","cloth outline","fabric outline","swatch outline"]},{"name":"mdi:receipt-send","tags":[]},{"name":"mdi:receipt-send-outline","tags":[]},{"name":"mdi:receipt-text","tags":["banking"]},{"name":"mdi:receipt-text-arrow-left","tags":["banking"]},{"name":"mdi:receipt-text-arrow-left-outline","tags":["banking"]},{"name":"mdi:receipt-text-arrow-right","tags":["banking"]},{"name":"mdi:receipt-text-arrow-right-outline","tags":["banking"]},{"name":"mdi:receipt-text-check","tags":["banking"]},{"name":"mdi:receipt-text-check-outline","tags":["banking"]},{"name":"mdi:receipt-text-clock","tags":["banking"]},{"name":"mdi:receipt-text-clock-outline","tags":["banking"]},{"name":"mdi:receipt-text-edit","tags":["banking"]},{"name":"mdi:receipt-text-edit-outline","tags":["banking"]},{"name":"mdi:receipt-text-minus","tags":["banking"]},{"name":"mdi:receipt-text-minus-outline","tags":["banking"]},{"name":"mdi:receipt-text-outline","tags":["banking","invoice outline"]},{"name":"mdi:receipt-text-plus","tags":["banking","receipt text add"]},{"name":"mdi:receipt-text-plus-outline","tags":["banking","receipt text add"]},{"name":"mdi:receipt-text-remove","tags":["banking"]},{"name":"mdi:receipt-text-remove-outline","tags":["banking"]},{"name":"mdi:receipt-text-send","tags":["banking"]},{"name":"mdi:receipt-text-send-outline","tags":["banking"]},{"name":"mdi:record","tags":["home automation","fiber manual record"]},{"name":"mdi:record-circle","tags":[]},{"name":"mdi:record-circle-outline","tags":[]},{"name":"mdi:record-player","tags":["home automation"]},{"name":"mdi:record-rec","tags":["home automation"]},{"name":"mdi:rectangle","tags":["shape"]},{"name":"mdi:rectangle-outline","tags":["shape"]},{"name":"mdi:recycle","tags":[]},{"name":"mdi:recycle-variant","tags":[]},{"name":"mdi:reddit","tags":["social media","brand / logo"]},{"name":"mdi:redhat","tags":["brand / logo"]},{"name":"mdi:redo","tags":["arrow"]},{"name":"mdi:redo-variant","tags":["arrow"]},{"name":"mdi:reflect-horizontal","tags":[]},{"name":"mdi:reflect-vertical","tags":[]},{"name":"mdi:refresh","tags":["arrow","loop"]},{"name":"mdi:refresh-auto","tags":["automotive","auto start","automatic start","auto stop","automatic stop","automatic","refresh automatic"]},{"name":"mdi:refresh-circle","tags":[]},{"name":"mdi:regex","tags":["regular expression"]},{"name":"mdi:registered-trademark","tags":[]},{"name":"mdi:reiterate","tags":["arrow"]},{"name":"mdi:relation-many-to-many","tags":["database"]},{"name":"mdi:relation-many-to-one","tags":["database"]},{"name":"mdi:relation-many-to-one-or-many","tags":["database"]},{"name":"mdi:relation-many-to-only-one","tags":["database"]},{"name":"mdi:relation-many-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-many-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-one-or-many-to-many","tags":["database"]},{"name":"mdi:relation-one-or-many-to-one","tags":["database"]},{"name":"mdi:relation-one-or-many-to-one-or-many","tags":["database"]},{"name":"mdi:relation-one-or-many-to-only-one","tags":["database"]},{"name":"mdi:relation-one-or-many-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-one-or-many-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-one-to-many","tags":["database"]},{"name":"mdi:relation-one-to-one","tags":["database"]},{"name":"mdi:relation-one-to-one-or-many","tags":["database"]},{"name":"mdi:relation-one-to-only-one","tags":["database"]},{"name":"mdi:relation-one-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-one-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-only-one-to-many","tags":["database"]},{"name":"mdi:relation-only-one-to-one","tags":["database"]},{"name":"mdi:relation-only-one-to-one-or-many","tags":["database"]},{"name":"mdi:relation-only-one-to-only-one","tags":["database"]},{"name":"mdi:relation-only-one-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-only-one-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-many","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-one","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-one-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-only-one","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-many-to-zero-or-one","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-many","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-one","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-one-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-only-one","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-zero-or-many","tags":["database"]},{"name":"mdi:relation-zero-or-one-to-zero-or-one","tags":["database"]},{"name":"mdi:relative-scale","tags":["image aspect ratio"]},{"name":"mdi:reload","tags":["automotive","arrow","car engine start","loop","rotate clockwise"]},{"name":"mdi:reload-alert","tags":["alert / error"]},{"name":"mdi:reminder","tags":[]},{"name":"mdi:remote","tags":["home automation","settings remote"]},{"name":"mdi:remote-desktop","tags":[]},{"name":"mdi:remote-off","tags":[]},{"name":"mdi:remote-tv","tags":["device / tech"]},{"name":"mdi:remote-tv-off","tags":["device / tech"]},{"name":"mdi:rename","tags":["edit / modify"]},{"name":"mdi:rename-box","tags":["edit / modify"]},{"name":"mdi:rename-box-outline","tags":["edit / modify"]},{"name":"mdi:rename-outline","tags":["edit / modify"]},{"name":"mdi:reorder-horizontal","tags":[]},{"name":"mdi:reorder-vertical","tags":[]},{"name":"mdi:repeat","tags":["arrow","repost"]},{"name":"mdi:repeat-off","tags":[]},{"name":"mdi:repeat-once","tags":["repeat one"]},{"name":"mdi:repeat-variant","tags":["arrow","twitter retweet","repost"]},{"name":"mdi:replay","tags":[]},{"name":"mdi:reply","tags":["arrow"]},{"name":"mdi:reply-all","tags":["arrow"]},{"name":"mdi:reply-all-outline","tags":["arrow"]},{"name":"mdi:reply-circle","tags":["arrow"]},{"name":"mdi:reply-outline","tags":["arrow"]},{"name":"mdi:reproduction","tags":["medical / hospital"]},{"name":"mdi:resistor","tags":[]},{"name":"mdi:resistor-nodes","tags":[]},{"name":"mdi:resize","tags":[]},{"name":"mdi:resize-bottom-right","tags":["drag"]},{"name":"mdi:responsive","tags":[]},{"name":"mdi:restart","tags":[]},{"name":"mdi:restart-alert","tags":["alert / error"]},{"name":"mdi:restart-off","tags":[]},{"name":"mdi:restore","tags":["arrow","loop","rotate counter clockwise"]},{"name":"mdi:restore-alert","tags":["alert / error"]},{"name":"mdi:rewind","tags":["fast rewind"]},{"name":"mdi:rewind-10","tags":[]},{"name":"mdi:rewind-15","tags":[]},{"name":"mdi:rewind-30","tags":[]},{"name":"mdi:rewind-45","tags":[]},{"name":"mdi:rewind-5","tags":[]},{"name":"mdi:rewind-60","tags":[]},{"name":"mdi:rewind-outline","tags":[]},{"name":"mdi:rhombus","tags":["shape","diamond"]},{"name":"mdi:rhombus-medium","tags":["shape"]},{"name":"mdi:rhombus-medium-outline","tags":["shape"]},{"name":"mdi:rhombus-outline","tags":["shape","diamond outline"]},{"name":"mdi:rhombus-split","tags":["shape","collection"]},{"name":"mdi:rhombus-split-outline","tags":["shape"]},{"name":"mdi:ribbon","tags":[]},{"name":"mdi:rice","tags":["food / drink"]},{"name":"mdi:rickshaw","tags":["transportation + road","transportation + other"]},{"name":"mdi:rickshaw-electric","tags":["transportation + road","transportation + other"]},{"name":"mdi:ring","tags":[]},{"name":"mdi:rivet","tags":["hardware / tools"]},{"name":"mdi:road","tags":["transportation + road"]},{"name":"mdi:road-variant","tags":["transportation + road"]},{"name":"mdi:robber","tags":[]},{"name":"mdi:robot","tags":["home automation","emoji robot","emoticon robot"]},{"name":"mdi:robot-angry","tags":["emoji robot angry","emoticon robot angry"]},{"name":"mdi:robot-angry-outline","tags":["emoji robot angry outline","emoticon robot angry outline"]},{"name":"mdi:robot-confused","tags":["emoji robot confused","emoticon robot confused"]},{"name":"mdi:robot-confused-outline","tags":["emoji robot confused outline","emoticon robot confused outline"]},{"name":"mdi:robot-dead","tags":["emoji robot dead","emoticon robot dead"]},{"name":"mdi:robot-dead-outline","tags":["emoji robot dead outline","emoticon robot dead outline"]},{"name":"mdi:robot-excited","tags":["emoticon robot excited","emoji robot excited"]},{"name":"mdi:robot-excited-outline","tags":["emoji robot excited outline","emoticon robot excited outline"]},{"name":"mdi:robot-happy","tags":["emoji robot happy","emoticon robot happy"]},{"name":"mdi:robot-happy-outline","tags":["emoji robot happy outline","emoticon robot happy outline"]},{"name":"mdi:robot-industrial","tags":["autonomous","assembly"]},{"name":"mdi:robot-industrial-outline","tags":[]},{"name":"mdi:robot-love","tags":["emoji robot love","emoticon robot love"]},{"name":"mdi:robot-love-outline","tags":[]},{"name":"mdi:robot-mower","tags":["home automation","lawn mower"]},{"name":"mdi:robot-mower-outline","tags":["home automation","lawn mower outline"]},{"name":"mdi:robot-off","tags":["emoji robot off","emoticon robot off"]},{"name":"mdi:robot-off-outline","tags":[]},{"name":"mdi:robot-outline","tags":["emoji robot outline","emoticon robot outline"]},{"name":"mdi:robot-vacuum","tags":["device / tech","home automation","roomba"]},{"name":"mdi:robot-vacuum-alert","tags":["alert / error","home automation","robot vacuum error"]},{"name":"mdi:robot-vacuum-off","tags":["home automation"]},{"name":"mdi:robot-vacuum-variant","tags":["home automation","neato"]},{"name":"mdi:robot-vacuum-variant-alert","tags":["alert / error","home automation","robot vacuum variant error"]},{"name":"mdi:robot-vacuum-variant-off","tags":["home automation"]},{"name":"mdi:rocket","tags":["transportation + flying","science"]},{"name":"mdi:rocket-launch","tags":["science","transportation + flying"]},{"name":"mdi:rocket-launch-outline","tags":["science","transportation + flying"]},{"name":"mdi:rocket-outline","tags":["science","transportation + flying"]},{"name":"mdi:rodent","tags":["animal","mouse","rat"]},{"name":"mdi:roller-shade","tags":["home automation","blinds open","window open"]},{"name":"mdi:roller-shade-closed","tags":["home automation","blinds closed","window closed"]},{"name":"mdi:roller-skate","tags":["sport"]},{"name":"mdi:roller-skate-off","tags":["sport"]},{"name":"mdi:rollerblade","tags":["sport"]},{"name":"mdi:rollerblade-off","tags":["sport"]},{"name":"mdi:rollupjs","tags":["brand / logo","developer / languages","rollup js"]},{"name":"mdi:rolodex","tags":[]},{"name":"mdi:rolodex-outline","tags":[]},{"name":"mdi:roman-numeral-1","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-10","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-2","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-3","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-4","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-5","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-6","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-7","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-8","tags":["alpha / numeric"]},{"name":"mdi:roman-numeral-9","tags":["alpha / numeric"]},{"name":"mdi:room-service","tags":["call bell"]},{"name":"mdi:room-service-outline","tags":["call bell outline"]},{"name":"mdi:rotate-360","tags":["arrow"]},{"name":"mdi:rotate-3d","tags":[]},{"name":"mdi:rotate-3d-variant","tags":["3d rotation"]},{"name":"mdi:rotate-left","tags":["arrow","arrow rotate left"]},{"name":"mdi:rotate-left-variant","tags":[]},{"name":"mdi:rotate-orbit","tags":["gyro","accelerometer"]},{"name":"mdi:rotate-right","tags":["arrow","arrow rotate right"]},{"name":"mdi:rotate-right-variant","tags":[]},{"name":"mdi:rounded-corner","tags":[]},{"name":"mdi:router","tags":[]},{"name":"mdi:router-network","tags":[]},{"name":"mdi:router-network-wireless","tags":["device / tech","wireless router"]},{"name":"mdi:router-wireless","tags":[]},{"name":"mdi:router-wireless-off","tags":[]},{"name":"mdi:router-wireless-settings","tags":["settings"]},{"name":"mdi:routes","tags":["sign routes"]},{"name":"mdi:routes-clock","tags":["date / time"]},{"name":"mdi:rowing","tags":["sport","transportation + water","people / family","human rowing"]},{"name":"mdi:rss","tags":["rss feed"]},{"name":"mdi:rss-box","tags":["rss feed box"]},{"name":"mdi:rss-off","tags":[]},{"name":"mdi:rug","tags":["home automation","carpet"]},{"name":"mdi:rugby","tags":["sport","rugby ball"]},{"name":"mdi:ruler","tags":["hardware / tools","drawing / art"]},{"name":"mdi:ruler-square","tags":["hardware / tools","drawing / art","square","carpentry","architecture"]},{"name":"mdi:ruler-square-compass","tags":["hardware / tools","mason","masonic","freemasonry"]},{"name":"mdi:run","tags":["sport","people / family","directions run","human run"]},{"name":"mdi:run-fast","tags":["home automation","sport","people / family","velocity","human run fast"]},{"name":"mdi:rv-truck","tags":["transportation + road","recreational vehicle","campervan"]},{"name":"mdi:sack","tags":["gaming / rpg"]},{"name":"mdi:sack-outline","tags":[]},{"name":"mdi:sack-percent","tags":[]},{"name":"mdi:safe","tags":["banking"]},{"name":"mdi:safe-square","tags":[]},{"name":"mdi:safe-square-outline","tags":[]},{"name":"mdi:safety-goggles","tags":["science","safety glasses"]},{"name":"mdi:sail-boat","tags":["sport","transportation + water","sailing","boat"]},{"name":"mdi:sail-boat-sink","tags":["transportation + water","sail boat crash","sail boat wreck"]},{"name":"mdi:sale","tags":["shopping","discount"]},{"name":"mdi:sale-outline","tags":["shopping","discount outline"]},{"name":"mdi:salesforce","tags":["brand / logo"]},{"name":"mdi:sass","tags":["brand / logo","developer / languages"]},{"name":"mdi:satellite","tags":[]},{"name":"mdi:satellite-uplink","tags":[]},{"name":"mdi:satellite-variant","tags":[]},{"name":"mdi:sausage","tags":["food / drink"]},{"name":"mdi:sausage-off","tags":["food / drink"]},{"name":"mdi:saw-blade","tags":["hardware / tools"]},{"name":"mdi:sawtooth-wave","tags":["audio"]},{"name":"mdi:saxophone","tags":["music"]},{"name":"mdi:scale","tags":["food / drink","science"]},{"name":"mdi:scale-balance","tags":["science","justice","legal"]},{"name":"mdi:scale-bathroom","tags":["home automation","medical / hospital"]},{"name":"mdi:scale-off","tags":["science"]},{"name":"mdi:scale-unbalanced","tags":[]},{"name":"mdi:scan-helper","tags":[]},{"name":"mdi:scanner","tags":["device / tech"]},{"name":"mdi:scanner-off","tags":["device / tech"]},{"name":"mdi:scatter-plot","tags":[]},{"name":"mdi:scatter-plot-outline","tags":[]},{"name":"mdi:scent","tags":["aroma","fragrance","smell","odor"]},{"name":"mdi:scent-off","tags":["aroma off","smell off","fragrance off","odor off"]},{"name":"mdi:school","tags":["graduation cap","university","college","academic cap","education","learn"]},{"name":"mdi:school-outline","tags":["academic cap outline","college outline","graduation cap outline","university outline","education outline","learn outline"]},{"name":"mdi:scissors-cutting","tags":[]},{"name":"mdi:scooter","tags":["transportation + other"]},{"name":"mdi:scooter-electric","tags":["transportation + other"]},{"name":"mdi:scoreboard","tags":["sport"]},{"name":"mdi:scoreboard-outline","tags":["sport"]},{"name":"mdi:screen-rotation","tags":[]},{"name":"mdi:screen-rotation-lock","tags":["lock","screen lock rotation"]},{"name":"mdi:screw-flat-top","tags":["hardware / tools"]},{"name":"mdi:screw-lag","tags":["hardware / tools"]},{"name":"mdi:screw-machine-flat-top","tags":["hardware / tools"]},{"name":"mdi:screw-machine-round-top","tags":["hardware / tools"]},{"name":"mdi:screw-round-top","tags":["hardware / tools"]},{"name":"mdi:screwdriver","tags":["hardware / tools"]},{"name":"mdi:script","tags":["gaming / rpg","scroll"]},{"name":"mdi:script-outline","tags":["gaming / rpg","scroll outline"]},{"name":"mdi:script-text","tags":["gaming / rpg","scroll text"]},{"name":"mdi:script-text-key","tags":[]},{"name":"mdi:script-text-key-outline","tags":[]},{"name":"mdi:script-text-outline","tags":["gaming / rpg","scroll text outline"]},{"name":"mdi:script-text-play","tags":[]},{"name":"mdi:script-text-play-outline","tags":[]},{"name":"mdi:sd","tags":["sd card","sd storage"]},{"name":"mdi:seal","tags":["ribbon","prize","award"]},{"name":"mdi:seal-variant","tags":["ribbon","prize","award"]},{"name":"mdi:search-web","tags":["search globe","global search","internet search"]},{"name":"mdi:seat","tags":["home automation","event seat","chair","chair accent","home theater","home theatre"]},{"name":"mdi:seat-flat","tags":["airline seat flat"]},{"name":"mdi:seat-flat-angled","tags":["airline seat flat angled"]},{"name":"mdi:seat-individual-suite","tags":["airline seat individual suite"]},{"name":"mdi:seat-legroom-extra","tags":["airline seat legroom extra"]},{"name":"mdi:seat-legroom-normal","tags":["airline seat legroom normal"]},{"name":"mdi:seat-legroom-reduced","tags":["airline seat legroom reduced"]},{"name":"mdi:seat-outline","tags":["home automation","event seat outline","chair outline","chair accent outline","home theater","home theatre"]},{"name":"mdi:seat-passenger","tags":[]},{"name":"mdi:seat-recline-extra","tags":["airline seat recline extra"]},{"name":"mdi:seat-recline-normal","tags":["airline seat recline normal"]},{"name":"mdi:seatbelt","tags":["automotive","seat belt","safety belt"]},{"name":"mdi:security","tags":["shield","uac","user access control","administrator"]},{"name":"mdi:security-network","tags":["shield network","uac network","administrator network"]},{"name":"mdi:seed","tags":["agriculture","nature","food / drink"]},{"name":"mdi:seed-off","tags":["nature","food / drink","agriculture"]},{"name":"mdi:seed-off-outline","tags":["nature","food / drink","agriculture"]},{"name":"mdi:seed-outline","tags":["agriculture","nature","food / drink"]},{"name":"mdi:seed-plus","tags":["agriculture","nature","seed add"]},{"name":"mdi:seed-plus-outline","tags":["agriculture","nature","seed add outline"]},{"name":"mdi:seesaw","tags":["playground seesaw"]},{"name":"mdi:segment","tags":[]},{"name":"mdi:select","tags":[]},{"name":"mdi:select-all","tags":[]},{"name":"mdi:select-arrow-down","tags":[]},{"name":"mdi:select-arrow-up","tags":[]},{"name":"mdi:select-color","tags":["color","select colour"]},{"name":"mdi:select-compare","tags":[]},{"name":"mdi:select-drag","tags":[]},{"name":"mdi:select-group","tags":[]},{"name":"mdi:select-inverse","tags":["selection invert"]},{"name":"mdi:select-marker","tags":["navigation","select location"]},{"name":"mdi:select-multiple","tags":[]},{"name":"mdi:select-multiple-marker","tags":["navigation","select multiple location"]},{"name":"mdi:select-off","tags":[]},{"name":"mdi:select-place","tags":[]},{"name":"mdi:select-remove","tags":[]},{"name":"mdi:select-search","tags":[]},{"name":"mdi:selection","tags":[]},{"name":"mdi:selection-drag","tags":[]},{"name":"mdi:selection-ellipse","tags":[]},{"name":"mdi:selection-ellipse-arrow-inside","tags":[]},{"name":"mdi:selection-ellipse-remove","tags":[]},{"name":"mdi:selection-marker","tags":["navigation","selection location"]},{"name":"mdi:selection-multiple","tags":[]},{"name":"mdi:selection-multiple-marker","tags":["navigation","selection multiple location"]},{"name":"mdi:selection-off","tags":[]},{"name":"mdi:selection-remove","tags":[]},{"name":"mdi:selection-search","tags":[]},{"name":"mdi:semantic-web","tags":["developer / languages","brand / logo","rdf","resource description framework","owl","web ontology language","w3c"]},{"name":"mdi:send","tags":["paper airplane","paper plane"]},{"name":"mdi:send-check","tags":[]},{"name":"mdi:send-check-outline","tags":[]},{"name":"mdi:send-circle","tags":[]},{"name":"mdi:send-circle-outline","tags":[]},{"name":"mdi:send-clock","tags":["date / time"]},{"name":"mdi:send-clock-outline","tags":["date / time"]},{"name":"mdi:send-lock","tags":["lock","send secure"]},{"name":"mdi:send-lock-outline","tags":["lock"]},{"name":"mdi:send-outline","tags":["paper airplane outline","paper plane outline"]},{"name":"mdi:send-variant","tags":["paper plane variant","paper airplane variant"]},{"name":"mdi:send-variant-clock","tags":[]},{"name":"mdi:send-variant-clock-outline","tags":[]},{"name":"mdi:send-variant-outline","tags":["paper airplane variant outline","paper plane variant outline"]},{"name":"mdi:serial-port","tags":["vga"]},{"name":"mdi:server","tags":["storage"]},{"name":"mdi:server-minus","tags":["server remove"]},{"name":"mdi:server-minus-outline","tags":["server remove outline"]},{"name":"mdi:server-network","tags":[]},{"name":"mdi:server-network-off","tags":[]},{"name":"mdi:server-network-outline","tags":[]},{"name":"mdi:server-off","tags":[]},{"name":"mdi:server-outline","tags":[]},{"name":"mdi:server-plus","tags":["server add"]},{"name":"mdi:server-plus-outline","tags":["server add outline"]},{"name":"mdi:server-remove","tags":[]},{"name":"mdi:server-security","tags":["server shield"]},{"name":"mdi:set-all","tags":["database","set union","set or","full outer join","sql full outer join"]},{"name":"mdi:set-center","tags":["database","set centre","set intersection","set and","inner join","sql inner join"]},{"name":"mdi:set-center-right","tags":["database","set centre right","outer join right","sql right outer join"]},{"name":"mdi:set-left","tags":["database","difference left"]},{"name":"mdi:set-left-center","tags":["database","set left centre","outer join left","sql left outer join"]},{"name":"mdi:set-left-right","tags":["database","exclusion","set xor"]},{"name":"mdi:set-merge","tags":[]},{"name":"mdi:set-none","tags":["database","set null","set not","venn diagram"]},{"name":"mdi:set-right","tags":["database","difference right"]},{"name":"mdi:set-split","tags":[]},{"name":"mdi:set-square","tags":["hardware / tools"]},{"name":"mdi:set-top-box","tags":["home automation"]},{"name":"mdi:settings-helper","tags":["settings"]},{"name":"mdi:shaker","tags":["food / drink","pepper","fish food"]},{"name":"mdi:shaker-outline","tags":["food / drink","salt","fish food outline"]},{"name":"mdi:shape","tags":["shape","category","theme"]},{"name":"mdi:shape-circle-plus","tags":["shape","shape circle add"]},{"name":"mdi:shape-outline","tags":["shape","theme outline","category outline"]},{"name":"mdi:shape-oval-plus","tags":[]},{"name":"mdi:shape-plus","tags":["shape","shape add","category plus"]},{"name":"mdi:shape-plus-outline","tags":["shape","shape add outline","category plus outline"]},{"name":"mdi:shape-polygon-plus","tags":["shape","shape polygon add"]},{"name":"mdi:shape-rectangle-plus","tags":["shape","shape rectangle add"]},{"name":"mdi:shape-square-plus","tags":["shape","shape square add"]},{"name":"mdi:shape-square-rounded-plus","tags":[]},{"name":"mdi:share","tags":["arrow","forward"]},{"name":"mdi:share-all","tags":[]},{"name":"mdi:share-all-outline","tags":[]},{"name":"mdi:share-circle","tags":["arrow"]},{"name":"mdi:share-off","tags":["arrow","forward off"]},{"name":"mdi:share-off-outline","tags":["arrow","forward off outline"]},{"name":"mdi:share-outline","tags":["arrow","forward outline"]},{"name":"mdi:share-variant","tags":[]},{"name":"mdi:share-variant-outline","tags":[]},{"name":"mdi:shark","tags":["animal","jaws"]},{"name":"mdi:shark-fin","tags":["animal"]},{"name":"mdi:shark-fin-outline","tags":["animal"]},{"name":"mdi:shark-off","tags":["animal","jaws off"]},{"name":"mdi:sheep","tags":["animal","agriculture","emoji sheep","emoticon sheep"]},{"name":"mdi:shield","tags":["gaming / rpg"]},{"name":"mdi:shield-account","tags":["account / user","home automation","security account","shield user","shield person","alarm arm home"]},{"name":"mdi:shield-account-outline","tags":["account / user","home automation","security account outline","shield user outline","shield person outline","alarm arm home outline"]},{"name":"mdi:shield-account-variant","tags":["account / user"]},{"name":"mdi:shield-account-variant-outline","tags":["account / user"]},{"name":"mdi:shield-airplane","tags":["transportation + flying","shield aeroplane","shield plane","plane shield"]},{"name":"mdi:shield-airplane-outline","tags":["transportation + flying","shield aeroplane outline","shield plane outline"]},{"name":"mdi:shield-alert","tags":["alert / error","shield warning"]},{"name":"mdi:shield-alert-outline","tags":["alert / error","shield warning outline"]},{"name":"mdi:shield-bug","tags":["antivirus"]},{"name":"mdi:shield-bug-outline","tags":["antivirus outline"]},{"name":"mdi:shield-car","tags":["automotive","car security","car insurance"]},{"name":"mdi:shield-check","tags":["account / user","verified user","shield tick","verified"]},{"name":"mdi:shield-check-outline","tags":["shield tick outline"]},{"name":"mdi:shield-cross","tags":["gaming / rpg","religion","shield templar","shield christianity"]},{"name":"mdi:shield-cross-outline","tags":["gaming / rpg","religion","shield templar outline","shield christianity outline"]},{"name":"mdi:shield-crown","tags":["gaming / rpg","administrator"]},{"name":"mdi:shield-crown-outline","tags":["gaming / rpg","administrator outline"]},{"name":"mdi:shield-edit","tags":["edit / modify"]},{"name":"mdi:shield-edit-outline","tags":["edit / modify"]},{"name":"mdi:shield-half","tags":[]},{"name":"mdi:shield-half-full","tags":[]},{"name":"mdi:shield-home","tags":["home automation","security home","shield house","alarm arm home"]},{"name":"mdi:shield-home-outline","tags":["home automation","shield house outline","alarm arm home"]},{"name":"mdi:shield-key","tags":[]},{"name":"mdi:shield-key-outline","tags":[]},{"name":"mdi:shield-link-variant","tags":[]},{"name":"mdi:shield-link-variant-outline","tags":[]},{"name":"mdi:shield-lock","tags":["lock","home automation","security lock","alarm arm away"]},{"name":"mdi:shield-lock-open","tags":["home automation","lock","shield unlocked"]},{"name":"mdi:shield-lock-open-outline","tags":["home automation","lock","shield unlocked outline"]},{"name":"mdi:shield-lock-outline","tags":["lock","home automation","alarm arm away outline","security lock outline"]},{"name":"mdi:shield-moon","tags":["home automation","alarm arm night"]},{"name":"mdi:shield-moon-outline","tags":["home automation","alarm arm night outline"]},{"name":"mdi:shield-off","tags":["security off"]},{"name":"mdi:shield-off-outline","tags":[]},{"name":"mdi:shield-outline","tags":["gaming / rpg"]},{"name":"mdi:shield-plus","tags":["shield add"]},{"name":"mdi:shield-plus-outline","tags":["shield add outline"]},{"name":"mdi:shield-refresh","tags":[]},{"name":"mdi:shield-refresh-outline","tags":[]},{"name":"mdi:shield-remove","tags":[]},{"name":"mdi:shield-remove-outline","tags":[]},{"name":"mdi:shield-search","tags":[]},{"name":"mdi:shield-star","tags":["badge","shield favorite"]},{"name":"mdi:shield-star-outline","tags":["badge outline","shield favorite outline"]},{"name":"mdi:shield-sun","tags":["weather","sun protection"]},{"name":"mdi:shield-sun-outline","tags":["weather","sun protection outline"]},{"name":"mdi:shield-sword","tags":["gaming / rpg","moderator"]},{"name":"mdi:shield-sword-outline","tags":["gaming / rpg","moderator outline"]},{"name":"mdi:shield-sync","tags":[]},{"name":"mdi:shield-sync-outline","tags":[]},{"name":"mdi:shimmer","tags":["sparkles"]},{"name":"mdi:ship-wheel","tags":["transportation + water","voyager","helm"]},{"name":"mdi:shipping-pallet","tags":[]},{"name":"mdi:shoe-ballet","tags":["sport","clothing","slippers ballet"]},{"name":"mdi:shoe-cleat","tags":["sport","clothing"]},{"name":"mdi:shoe-formal","tags":["clothing"]},{"name":"mdi:shoe-heel","tags":["clothing"]},{"name":"mdi:shoe-print","tags":["footprints"]},{"name":"mdi:shoe-sneaker","tags":["sport","clothing","shoe running"]},{"name":"mdi:shopping","tags":["shopping","local mall","marketplace"]},{"name":"mdi:shopping-music","tags":["shopping"]},{"name":"mdi:shopping-outline","tags":["shopping","local mall outline","marketplace outline"]},{"name":"mdi:shopping-search","tags":["shopping"]},{"name":"mdi:shopping-search-outline","tags":["shopping"]},{"name":"mdi:shore","tags":[]},{"name":"mdi:shovel","tags":["hardware / tools","gardening"]},{"name":"mdi:shovel-off","tags":["hardware / tools"]},{"name":"mdi:shower","tags":["home automation","bathtub","bathroom"]},{"name":"mdi:shower-head","tags":["home automation","bathroom"]},{"name":"mdi:shredder","tags":[]},{"name":"mdi:shuffle","tags":["arrow"]},{"name":"mdi:shuffle-disabled","tags":["arrow"]},{"name":"mdi:shuffle-variant","tags":["arrow"]},{"name":"mdi:shuriken","tags":["ninja star"]},{"name":"mdi:sickle","tags":["hardware / tools"]},{"name":"mdi:sigma","tags":["math","summation"]},{"name":"mdi:sigma-lower","tags":[]},{"name":"mdi:sign-caution","tags":["transportation + road","barrier"]},{"name":"mdi:sign-direction","tags":["milestone"]},{"name":"mdi:sign-direction-minus","tags":["milestone minus"]},{"name":"mdi:sign-direction-plus","tags":["milestone plus","sign direction add","milestone add"]},{"name":"mdi:sign-direction-remove","tags":["milestone remove"]},{"name":"mdi:sign-language","tags":[]},{"name":"mdi:sign-language-outline","tags":[]},{"name":"mdi:sign-pole","tags":[]},{"name":"mdi:sign-real-estate","tags":[]},{"name":"mdi:sign-text","tags":[]},{"name":"mdi:sign-yield","tags":["transportation + road","give way"]},{"name":"mdi:signal","tags":["cellphone / phone"]},{"name":"mdi:signal-2g","tags":["cellphone / phone"]},{"name":"mdi:signal-3g","tags":["cellphone / phone"]},{"name":"mdi:signal-4g","tags":["cellphone / phone"]},{"name":"mdi:signal-5g","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-1","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-2","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-3","tags":["cellphone / phone"]},{"name":"mdi:signal-cellular-outline","tags":["cellphone / phone","signal cellular 0"]},{"name":"mdi:signal-distance-variant","tags":[]},{"name":"mdi:signal-hspa","tags":["cellphone / phone"]},{"name":"mdi:signal-hspa-plus","tags":["cellphone / phone"]},{"name":"mdi:signal-off","tags":["cellphone / phone"]},{"name":"mdi:signal-variant","tags":[]},{"name":"mdi:signature","tags":["form"]},{"name":"mdi:signature-freehand","tags":["form"]},{"name":"mdi:signature-image","tags":["form"]},{"name":"mdi:signature-text","tags":["form"]},{"name":"mdi:silo","tags":["agriculture","farm"]},{"name":"mdi:silo-outline","tags":["agriculture","farm outline"]},{"name":"mdi:silverware","tags":["food / drink","local dining","restaurant menu","local restaurant","cutlery"]},{"name":"mdi:silverware-clean","tags":["food / drink","silverware shimmer","cutlery clean"]},{"name":"mdi:silverware-fork","tags":["food / drink","cutlery fork"]},{"name":"mdi:silverware-fork-knife","tags":["food / drink","restaurant","fortnite","cutlery fork knife","place setting"]},{"name":"mdi:silverware-spoon","tags":["food / drink","cutlery spoon"]},{"name":"mdi:silverware-variant","tags":["food / drink","places","cutlery variant"]},{"name":"mdi:sim","tags":["cellphone / phone","sim card","subscriber identity module","subscriber identification module"]},{"name":"mdi:sim-alert","tags":["alert / error","cellphone / phone","sim warning","sim card alert"]},{"name":"mdi:sim-alert-outline","tags":["cellphone / phone","alert / error"]},{"name":"mdi:sim-off","tags":["cellphone / phone","signal cellular no sim"]},{"name":"mdi:sim-off-outline","tags":["cellphone / phone"]},{"name":"mdi:sim-outline","tags":["cellphone / phone","sim card outline","subscriber identity module outline","subscriber identification module outline"]},{"name":"mdi:simple-icons","tags":["brand / logo"]},{"name":"mdi:sina-weibo","tags":["brand / logo"]},{"name":"mdi:sine-wave","tags":["audio","alternating current","current ac","wave","analog","frequency","amplitude"]},{"name":"mdi:sitemap","tags":["workflow","flowchart"]},{"name":"mdi:sitemap-outline","tags":["workflow outline","flowchart outline"]},{"name":"mdi:size-l","tags":["size large"]},{"name":"mdi:size-m","tags":["size medium"]},{"name":"mdi:size-s","tags":["size small"]},{"name":"mdi:size-xl","tags":["size extra large"]},{"name":"mdi:size-xs","tags":["size extra small"]},{"name":"mdi:size-xxl","tags":["size extra extra large"]},{"name":"mdi:size-xxs","tags":["size extra extra small"]},{"name":"mdi:size-xxxl","tags":[]},{"name":"mdi:skate","tags":["sport","ice skate"]},{"name":"mdi:skate-off","tags":["sport"]},{"name":"mdi:skateboard","tags":["sport"]},{"name":"mdi:skateboarding","tags":["sport","people / family","human skateboarding"]},{"name":"mdi:skew-less","tags":["math","skew decrease"]},{"name":"mdi:skew-more","tags":["math","skew increase"]},{"name":"mdi:ski","tags":["sport","people / family","human ski"]},{"name":"mdi:ski-cross-country","tags":["sport","people / family","nordic walking","human ski cross country"]},{"name":"mdi:ski-water","tags":["sport","people / family","transportation + water","human ski water"]},{"name":"mdi:skip-backward","tags":["home automation","title backward","previous title"]},{"name":"mdi:skip-backward-outline","tags":[]},{"name":"mdi:skip-forward","tags":["home automation","title forward","next title"]},{"name":"mdi:skip-forward-outline","tags":[]},{"name":"mdi:skip-next","tags":["home automation"]},{"name":"mdi:skip-next-circle","tags":[]},{"name":"mdi:skip-next-circle-outline","tags":[]},{"name":"mdi:skip-next-outline","tags":[]},{"name":"mdi:skip-previous","tags":["home automation"]},{"name":"mdi:skip-previous-circle","tags":[]},{"name":"mdi:skip-previous-circle-outline","tags":[]},{"name":"mdi:skip-previous-outline","tags":[]},{"name":"mdi:skull","tags":["holiday","gaming / rpg"]},{"name":"mdi:skull-crossbones","tags":["gaming / rpg","holiday","jolly roger"]},{"name":"mdi:skull-crossbones-outline","tags":["gaming / rpg","holiday","jolly roger outline"]},{"name":"mdi:skull-outline","tags":["holiday","gaming / rpg"]},{"name":"mdi:skull-scan","tags":["medical / hospital","x ray","radiology"]},{"name":"mdi:skull-scan-outline","tags":["medical / hospital","x ray outline","radiology outline"]},{"name":"mdi:skype","tags":["brand / logo","microsoft skype"]},{"name":"mdi:skype-business","tags":["brand / logo"]},{"name":"mdi:slack","tags":["brand / logo"]},{"name":"mdi:slash-forward","tags":["math","divide","division"]},{"name":"mdi:slash-forward-box","tags":["math","divide box","division box"]},{"name":"mdi:sledding","tags":["sport","people / family","human sledding"]},{"name":"mdi:sleep","tags":[]},{"name":"mdi:sleep-off","tags":[]},{"name":"mdi:slide","tags":["playground slide"]},{"name":"mdi:slope-downhill","tags":[]},{"name":"mdi:slope-uphill","tags":[]},{"name":"mdi:slot-machine","tags":["casino","gambling"]},{"name":"mdi:slot-machine-outline","tags":["casino outline","gambling outline"]},{"name":"mdi:smart-card","tags":["account / user"]},{"name":"mdi:smart-card-off","tags":["account / user"]},{"name":"mdi:smart-card-off-outline","tags":["account / user"]},{"name":"mdi:smart-card-outline","tags":["account / user"]},{"name":"mdi:smart-card-reader","tags":["account / user"]},{"name":"mdi:smart-card-reader-outline","tags":["account / user"]},{"name":"mdi:smog","tags":[]},{"name":"mdi:smoke","tags":["smog","fire"]},{"name":"mdi:smoke-detector","tags":["device / tech","home automation","nest protect","subwoofer"]},{"name":"mdi:smoke-detector-alert","tags":["home automation","alert / error"]},{"name":"mdi:smoke-detector-alert-outline","tags":["home automation","alert / error"]},{"name":"mdi:smoke-detector-off","tags":["home automation"]},{"name":"mdi:smoke-detector-off-outline","tags":["home automation"]},{"name":"mdi:smoke-detector-outline","tags":["home automation"]},{"name":"mdi:smoke-detector-variant","tags":["home automation"]},{"name":"mdi:smoke-detector-variant-alert","tags":["home automation","alert / error"]},{"name":"mdi:smoke-detector-variant-off","tags":["home automation"]},{"name":"mdi:smoking","tags":["automotive","cigarette","smoking area","smoking rooms"]},{"name":"mdi:smoking-off","tags":["no smoking","cigarette off","smoke free"]},{"name":"mdi:smoking-pipe","tags":[]},{"name":"mdi:smoking-pipe-off","tags":[]},{"name":"mdi:snail","tags":["animal","gastropod"]},{"name":"mdi:snake","tags":["animal","reptile"]},{"name":"mdi:snapchat","tags":["brand / logo"]},{"name":"mdi:snowboard","tags":["sport","people / family","human snowboard"]},{"name":"mdi:snowflake","tags":["weather","holiday","automotive","power hibernate"]},{"name":"mdi:snowflake-alert","tags":["weather","alert / error","home automation","cold alert","snow advisory","freeze advisory"]},{"name":"mdi:snowflake-check","tags":["weather","snowflake approve"]},{"name":"mdi:snowflake-melt","tags":["weather","defrost"]},{"name":"mdi:snowflake-off","tags":["weather"]},{"name":"mdi:snowflake-thermometer","tags":["weather","home automation","frost point","freezing point","snowflake temperature"]},{"name":"mdi:snowflake-variant","tags":["holiday","weather"]},{"name":"mdi:snowman","tags":["holiday"]},{"name":"mdi:snowmobile","tags":["transportation + other","sport"]},{"name":"mdi:snowshoeing","tags":["sport"]},{"name":"mdi:soccer","tags":["sport","football"]},{"name":"mdi:soccer-field","tags":["sport","football pitch"]},{"name":"mdi:social-distance-2-meters","tags":["medical / hospital"]},{"name":"mdi:social-distance-6-feet","tags":["medical / hospital"]},{"name":"mdi:sofa","tags":["home automation","couch","living room","family room"]},{"name":"mdi:sofa-outline","tags":["home automation","couch outline","living room outline","family room outline"]},{"name":"mdi:sofa-single","tags":["home automation","loveseat","love seat","couch","chair accent","living room","family room"]},{"name":"mdi:sofa-single-outline","tags":["home automation","loveseat outline","love seat outline","couch outline","chair accent outline","living room outline","family room outline"]},{"name":"mdi:solar-panel","tags":["home automation","solar energy","solar electricity"]},{"name":"mdi:solar-panel-large","tags":["home automation","solar panel energy","solar panel electricity"]},{"name":"mdi:solar-power","tags":["home automation","solar energy","solar electricity"]},{"name":"mdi:solar-power-variant","tags":["home automation","solar energy","solar electricity"]},{"name":"mdi:solar-power-variant-outline","tags":["home automation","solar energy outline","solar electricity outline"]},{"name":"mdi:soldering-iron","tags":[]},{"name":"mdi:solid","tags":[]},{"name":"mdi:sony-playstation","tags":["brand / logo","gaming / rpg","sony playstation","playstation network"]},{"name":"mdi:sort","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-ascending","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-ascending-variant","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-descending","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-descending-variant","tags":["text / content / format"]},{"name":"mdi:sort-alphabetical-variant","tags":["text / content / format","sort by alpha","sort alphabetically"]},{"name":"mdi:sort-ascending","tags":["text / content / format"]},{"name":"mdi:sort-bool-ascending","tags":["text / content / format"]},{"name":"mdi:sort-bool-ascending-variant","tags":["text / content / format","sort checkbox ascending"]},{"name":"mdi:sort-bool-descending","tags":["text / content / format"]},{"name":"mdi:sort-bool-descending-variant","tags":["text / content / format","sort checkbox descending"]},{"name":"mdi:sort-calendar-ascending","tags":["text / content / format","date / time","sort date ascending"]},{"name":"mdi:sort-calendar-descending","tags":["text / content / format","date / time","sort date descending"]},{"name":"mdi:sort-clock-ascending","tags":["text / content / format","date / time","sort time ascending"]},{"name":"mdi:sort-clock-ascending-outline","tags":["text / content / format","date / time","sort time ascending outline"]},{"name":"mdi:sort-clock-descending","tags":["text / content / format","date / time","sort time descending"]},{"name":"mdi:sort-clock-descending-outline","tags":["text / content / format","date / time","sort time descending outline"]},{"name":"mdi:sort-descending","tags":["text / content / format"]},{"name":"mdi:sort-numeric-ascending","tags":["text / content / format"]},{"name":"mdi:sort-numeric-ascending-variant","tags":["text / content / format"]},{"name":"mdi:sort-numeric-descending","tags":["text / content / format"]},{"name":"mdi:sort-numeric-descending-variant","tags":["text / content / format"]},{"name":"mdi:sort-numeric-variant","tags":["text / content / format","sort numerically"]},{"name":"mdi:sort-reverse-variant","tags":["text / content / format"]},{"name":"mdi:sort-variant","tags":["text / content / format"]},{"name":"mdi:sort-variant-lock","tags":["text / content / format","lock"]},{"name":"mdi:sort-variant-lock-open","tags":["text / content / format","lock"]},{"name":"mdi:sort-variant-off","tags":["text / content / format"]},{"name":"mdi:sort-variant-remove","tags":["text / content / format"]},{"name":"mdi:soundbar","tags":["home automation","speaker bar"]},{"name":"mdi:soundcloud","tags":["brand / logo"]},{"name":"mdi:source-branch","tags":["developer / languages"]},{"name":"mdi:source-branch-check","tags":["developer / languages"]},{"name":"mdi:source-branch-minus","tags":["developer / languages"]},{"name":"mdi:source-branch-plus","tags":["developer / languages"]},{"name":"mdi:source-branch-refresh","tags":["developer / languages"]},{"name":"mdi:source-branch-remove","tags":["developer / languages"]},{"name":"mdi:source-branch-sync","tags":["developer / languages"]},{"name":"mdi:source-commit","tags":[]},{"name":"mdi:source-commit-end","tags":[]},{"name":"mdi:source-commit-end-local","tags":[]},{"name":"mdi:source-commit-local","tags":[]},{"name":"mdi:source-commit-next-local","tags":[]},{"name":"mdi:source-commit-start","tags":[]},{"name":"mdi:source-commit-start-next-local","tags":[]},{"name":"mdi:source-fork","tags":["developer / languages"]},{"name":"mdi:source-merge","tags":["developer / languages"]},{"name":"mdi:source-pull","tags":["developer / languages"]},{"name":"mdi:source-repository","tags":["developer / languages"]},{"name":"mdi:source-repository-multiple","tags":["developer / languages","source repositories"]},{"name":"mdi:soy-sauce","tags":["food / drink","soya sauce"]},{"name":"mdi:soy-sauce-off","tags":[]},{"name":"mdi:spa","tags":["nature","flower lotus","plant"]},{"name":"mdi:spa-outline","tags":["nature","flower lotus outline","plant"]},{"name":"mdi:space-invaders","tags":["gaming / rpg"]},{"name":"mdi:space-station","tags":[]},{"name":"mdi:spade","tags":["hardware / tools"]},{"name":"mdi:speaker","tags":["audio","home automation"]},{"name":"mdi:speaker-bluetooth","tags":["audio"]},{"name":"mdi:speaker-message","tags":["home automation","audio","text to speech"]},{"name":"mdi:speaker-multiple","tags":["audio","speakers"]},{"name":"mdi:speaker-off","tags":["audio","home automation"]},{"name":"mdi:speaker-pause","tags":["audio","music"]},{"name":"mdi:speaker-play","tags":["audio","music"]},{"name":"mdi:speaker-stop","tags":["audio","music"]},{"name":"mdi:speaker-wireless","tags":["audio","home automation"]},{"name":"mdi:spear","tags":["gaming / rpg","staff","fishing"]},{"name":"mdi:speedometer","tags":["automotive"]},{"name":"mdi:speedometer-medium","tags":["automotive"]},{"name":"mdi:speedometer-slow","tags":["automotive"]},{"name":"mdi:spellcheck","tags":[]},{"name":"mdi:sphere","tags":["shape"]},{"name":"mdi:sphere-off","tags":["shape"]},{"name":"mdi:spider","tags":["holiday","nature","animal","arachnid","bug"]},{"name":"mdi:spider-outline","tags":["animal","holiday","nature","arachnid outline"]},{"name":"mdi:spider-thread","tags":["holiday","nature","animal","arachnid thread","bug"]},{"name":"mdi:spider-web","tags":["holiday","cobweb","arachnid web"]},{"name":"mdi:spirit-level","tags":["hardware / tools"]},{"name":"mdi:spoon-sugar","tags":["food / drink"]},{"name":"mdi:spotify","tags":["brand / logo"]},{"name":"mdi:spotlight","tags":["home automation"]},{"name":"mdi:spotlight-beam","tags":["home automation"]},{"name":"mdi:spray","tags":["agriculture","drawing / art","color","paint","aerosol"]},{"name":"mdi:spray-bottle","tags":["cleaning"]},{"name":"mdi:sprinkler","tags":["home automation","agriculture","irrigation"]},{"name":"mdi:sprinkler-fire","tags":["home automation","agriculture","sprinkler mist","mister","sprinkler head"]},{"name":"mdi:sprinkler-variant","tags":["home automation","agriculture","irrigation"]},{"name":"mdi:sprout","tags":["agriculture","nature","seedling","plant","ecology","environment"]},{"name":"mdi:sprout-outline","tags":["agriculture","nature","seedling outline","plant outline","ecology outline","environment outline"]},{"name":"mdi:square","tags":["shape"]},{"name":"mdi:square-circle","tags":["food / drink","vegetarian","lacto vegetarian"]},{"name":"mdi:square-circle-outline","tags":[]},{"name":"mdi:square-edit-outline","tags":["edit / modify"]},{"name":"mdi:square-medium","tags":["shape"]},{"name":"mdi:square-medium-outline","tags":["shape"]},{"name":"mdi:square-off","tags":[]},{"name":"mdi:square-off-outline","tags":[]},{"name":"mdi:square-opacity","tags":["drawing / art","shape","square transparent"]},{"name":"mdi:square-outline","tags":["shape"]},{"name":"mdi:square-root","tags":["math"]},{"name":"mdi:square-root-box","tags":[]},{"name":"mdi:square-rounded","tags":[]},{"name":"mdi:square-rounded-badge","tags":["shape","notification","app badge","push notification"]},{"name":"mdi:square-rounded-badge-outline","tags":["shape","notification","app badge outline","push notification outline"]},{"name":"mdi:square-rounded-outline","tags":[]},{"name":"mdi:square-small","tags":["bullet"]},{"name":"mdi:square-wave","tags":["audio"]},{"name":"mdi:squeegee","tags":[]},{"name":"mdi:ssh","tags":[]},{"name":"mdi:stack-exchange","tags":["brand / logo","stackexchange"]},{"name":"mdi:stack-overflow","tags":["brand / logo","stackoverflow"]},{"name":"mdi:stackpath","tags":["brand / logo"]},{"name":"mdi:stadium","tags":["sport","places","arena"]},{"name":"mdi:stadium-outline","tags":["sport","places","arena outline"]},{"name":"mdi:stadium-variant","tags":["places","sport","arena"]},{"name":"mdi:stairs","tags":["transportation + other"]},{"name":"mdi:stairs-box","tags":[]},{"name":"mdi:stairs-down","tags":["transportation + other"]},{"name":"mdi:stairs-up","tags":["transportation + other"]},{"name":"mdi:stamper","tags":[]},{"name":"mdi:standard-definition","tags":["video / movie"]},{"name":"mdi:star","tags":["shape","grade","star rate","favorite"]},{"name":"mdi:star-box","tags":["favorite box"]},{"name":"mdi:star-box-multiple","tags":["favorite box multiple"]},{"name":"mdi:star-box-multiple-outline","tags":["favorite box multiple outline"]},{"name":"mdi:star-box-outline","tags":["favorite box outline"]},{"name":"mdi:star-check","tags":["shape","favorite check"]},{"name":"mdi:star-check-outline","tags":["shape","favorite check outline"]},{"name":"mdi:star-circle","tags":["shape","stars","favorite circle"]},{"name":"mdi:star-circle-outline","tags":["shape","feature highlight","favorite circle outline"]},{"name":"mdi:star-cog","tags":["settings","favorite cog"]},{"name":"mdi:star-cog-outline","tags":["settings","favorite cog outline"]},{"name":"mdi:star-crescent","tags":["religion","islam","religion islamic","religion muslim"]},{"name":"mdi:star-david","tags":["religion","jewish","religion judaic","judaism","magen david"]},{"name":"mdi:star-face","tags":["gaming / rpg","favorite face","emoji star","emoticon star"]},{"name":"mdi:star-four-points","tags":["shape"]},{"name":"mdi:star-four-points-box","tags":["shape","auto box"]},{"name":"mdi:star-four-points-box-outline","tags":["shape","auto box outline"]},{"name":"mdi:star-four-points-circle","tags":["shape","auto circle"]},{"name":"mdi:star-four-points-circle-outline","tags":["shape","auto circle outline"]},{"name":"mdi:star-four-points-outline","tags":["shape"]},{"name":"mdi:star-four-points-small","tags":["shape"]},{"name":"mdi:star-half","tags":["shape","favorite half"]},{"name":"mdi:star-half-full","tags":["favorite half full"]},{"name":"mdi:star-minus","tags":["shape","favorite minus"]},{"name":"mdi:star-minus-outline","tags":["shape","favorite minus outline"]},{"name":"mdi:star-off","tags":["favorite off"]},{"name":"mdi:star-off-outline","tags":["favorite off outline"]},{"name":"mdi:star-outline","tags":["shape","star border","favorite outline"]},{"name":"mdi:star-plus","tags":["shape","favorite plus","star add","favorite add"]},{"name":"mdi:star-plus-outline","tags":["shape","star add outline","favorite plus outline","favorite add outline"]},{"name":"mdi:star-remove","tags":["shape","favorite remove"]},{"name":"mdi:star-remove-outline","tags":["shape","favorite remove outline"]},{"name":"mdi:star-settings","tags":["settings","favorite settings"]},{"name":"mdi:star-settings-outline","tags":["settings","favorite settings outline"]},{"name":"mdi:star-shooting","tags":["favorite shooting"]},{"name":"mdi:star-shooting-outline","tags":["favorite shooting outline"]},{"name":"mdi:star-three-points","tags":["shape"]},{"name":"mdi:star-three-points-outline","tags":["shape"]},{"name":"mdi:state-machine","tags":[]},{"name":"mdi:steam","tags":["brand / logo","gaming / rpg"]},{"name":"mdi:steering","tags":["automotive","search hands free"]},{"name":"mdi:steering-off","tags":["automotive","search hands free off"]},{"name":"mdi:step-backward","tags":[]},{"name":"mdi:step-backward-2","tags":["frame backward"]},{"name":"mdi:step-forward","tags":[]},{"name":"mdi:step-forward-2","tags":["frame forward"]},{"name":"mdi:stethoscope","tags":["medical / hospital"]},{"name":"mdi:sticker","tags":[]},{"name":"mdi:sticker-alert","tags":["alert / error"]},{"name":"mdi:sticker-alert-outline","tags":["alert / error"]},{"name":"mdi:sticker-check","tags":[]},{"name":"mdi:sticker-check-outline","tags":[]},{"name":"mdi:sticker-circle-outline","tags":[]},{"name":"mdi:sticker-emoji","tags":["emoji"]},{"name":"mdi:sticker-minus","tags":[]},{"name":"mdi:sticker-minus-outline","tags":[]},{"name":"mdi:sticker-outline","tags":[]},{"name":"mdi:sticker-plus","tags":[]},{"name":"mdi:sticker-plus-outline","tags":[]},{"name":"mdi:sticker-remove","tags":[]},{"name":"mdi:sticker-remove-outline","tags":[]},{"name":"mdi:sticker-text","tags":[]},{"name":"mdi:sticker-text-outline","tags":[]},{"name":"mdi:stocking","tags":["holiday"]},{"name":"mdi:stomach","tags":["medical / hospital"]},{"name":"mdi:stool","tags":[]},{"name":"mdi:stool-outline","tags":[]},{"name":"mdi:stop","tags":[]},{"name":"mdi:stop-circle","tags":[]},{"name":"mdi:stop-circle-outline","tags":[]},{"name":"mdi:storage-tank","tags":["propane tank","gas tank"]},{"name":"mdi:storage-tank-outline","tags":["propane tank outline","gas tank outline"]},{"name":"mdi:store","tags":["places","shopping","shop","store mall directory"]},{"name":"mdi:store-24-hour","tags":["places","shopping","local convenience store","shop 24 hour"]},{"name":"mdi:store-alert","tags":["places","shopping","alert / error","shop alert"]},{"name":"mdi:store-alert-outline","tags":["places","shopping","alert / error","shop alert outline"]},{"name":"mdi:store-check","tags":["shopping","places","shop check","shop complete","store complete"]},{"name":"mdi:store-check-outline","tags":["shopping","places","shop complete","store complete outline","shop check outline"]},{"name":"mdi:store-clock","tags":["places","shopping","store schedule","store hours","shop clock","shop hours","shop schedule","store time","shop time"]},{"name":"mdi:store-clock-outline","tags":["places","shopping","date / time","shop clock outline","store hours outline","shop hours outline","store time outline","shop time outline","store schedule outline","shop schedule outline"]},{"name":"mdi:store-cog","tags":["places","shopping","settings","store settings","shop settings"]},{"name":"mdi:store-cog-outline","tags":["places","shopping","settings","store settings outline","shop settings outline","shop cog outline"]},{"name":"mdi:store-edit","tags":["places","shopping","edit / modify","shop edit"]},{"name":"mdi:store-edit-outline","tags":["places","shopping","edit / modify","shop edit outline"]},{"name":"mdi:store-marker","tags":["places","shopping","navigation","store location","shop marker","shop location"]},{"name":"mdi:store-marker-outline","tags":["places","shopping","navigation","store location outline","shop marker outline","shop location outline"]},{"name":"mdi:store-minus","tags":["places","shopping","shop minus"]},{"name":"mdi:store-minus-outline","tags":["places","shopping","shop minus outline"]},{"name":"mdi:store-off","tags":["places","shopping","shop off"]},{"name":"mdi:store-off-outline","tags":["places","shopping","shop off outline"]},{"name":"mdi:store-outline","tags":["places","shopping","shop outline","store mall directory outline"]},{"name":"mdi:store-plus","tags":["places","shopping","shop plus"]},{"name":"mdi:store-plus-outline","tags":["places","shopping","shop plus outline"]},{"name":"mdi:store-remove","tags":["places","shopping","shop remove","store delete","shop delete"]},{"name":"mdi:store-remove-outline","tags":["places","shopping","shop remove outline","store delete outline","shop delete outline"]},{"name":"mdi:store-search","tags":["places","shopping","shop search","store find","shop find","store locator","shop locator","store look up","shop look up"]},{"name":"mdi:store-search-outline","tags":["places","shopping","store find outline","shop search outline","shop find outline","store locator outline","shop locator outline","store look up outline","shop look up outline"]},{"name":"mdi:store-settings","tags":["places","shopping","settings","shop settings"]},{"name":"mdi:store-settings-outline","tags":["places","shopping","settings","shop settings outline"]},{"name":"mdi:storefront","tags":["places","awning"]},{"name":"mdi:storefront-check","tags":[]},{"name":"mdi:storefront-check-outline","tags":[]},{"name":"mdi:storefront-edit","tags":["edit / modify"]},{"name":"mdi:storefront-edit-outline","tags":["edit / modify"]},{"name":"mdi:storefront-minus","tags":[]},{"name":"mdi:storefront-minus-outline","tags":[]},{"name":"mdi:storefront-outline","tags":["shopping","places","awning"]},{"name":"mdi:storefront-plus","tags":[]},{"name":"mdi:storefront-plus-outline","tags":[]},{"name":"mdi:storefront-remove","tags":[]},{"name":"mdi:storefront-remove-outline","tags":[]},{"name":"mdi:stove","tags":["food / drink","home automation","cooker","oven"]},{"name":"mdi:strategy","tags":["sport","football play"]},{"name":"mdi:stretch-to-page","tags":["text / content / format","arrow"]},{"name":"mdi:stretch-to-page-outline","tags":["text / content / format","arrow"]},{"name":"mdi:string-lights","tags":["home automation","italian lights","christmas lights","fairy lights"]},{"name":"mdi:string-lights-off","tags":["home automation","italian lights off","christmas lights off","fairy lights off"]},{"name":"mdi:subdirectory-arrow-left","tags":["arrow"]},{"name":"mdi:subdirectory-arrow-right","tags":["arrow"]},{"name":"mdi:submarine","tags":[]},{"name":"mdi:subtitles","tags":[]},{"name":"mdi:subtitles-outline","tags":[]},{"name":"mdi:subway","tags":["transportation + other","metro","tube","underground"]},{"name":"mdi:subway-alert-variant","tags":["alert / error","transportation + other","subway warning variant"]},{"name":"mdi:subway-variant","tags":["transportation + other","metro variant","tube variant","underground variant","directions subway","directions transit"]},{"name":"mdi:summit","tags":["peak"]},{"name":"mdi:sun-angle","tags":["weather","solar angle"]},{"name":"mdi:sun-angle-outline","tags":["weather","solar angle outline"]},{"name":"mdi:sun-clock","tags":["weather","home automation","sun schedule","sun time","time of day"]},{"name":"mdi:sun-clock-outline","tags":["weather","home automation","date / time","sun schedule outline","sun time outline","time of day outline"]},{"name":"mdi:sun-compass","tags":["weather","home automation","navigation","sun azimuth","solar compass","solar asimuth"]},{"name":"mdi:sun-snowflake","tags":["weather","home automation","hot cold","heat cool"]},{"name":"mdi:sun-snowflake-variant","tags":["home automation","weather","hot cold","heat cool"]},{"name":"mdi:sun-thermometer","tags":["weather","home automation","heat index","sun temperature","day temperature","external temperature","outdoor temperature"]},{"name":"mdi:sun-thermometer-outline","tags":["home automation","weather","external temperature","outside temperature","heat index","day temperature"]},{"name":"mdi:sun-wireless","tags":["home automation","weather","weather sun wireless","illuminance","uv ray","ultraviolet"]},{"name":"mdi:sun-wireless-outline","tags":["home automation","weather","weather sun wireless outline","illuminance outline","uv ray outline","ultraviolet outline"]},{"name":"mdi:sunglasses","tags":["clothing"]},{"name":"mdi:surfing","tags":[]},{"name":"mdi:surround-sound","tags":["audio"]},{"name":"mdi:surround-sound-2-0","tags":["audio","stereo"]},{"name":"mdi:surround-sound-2-1","tags":[]},{"name":"mdi:surround-sound-3-1","tags":["audio"]},{"name":"mdi:surround-sound-5-1","tags":["audio"]},{"name":"mdi:surround-sound-5-1-2","tags":[]},{"name":"mdi:surround-sound-7-1","tags":["audio"]},{"name":"mdi:svg","tags":["brand / logo"]},{"name":"mdi:swap-horizontal","tags":["arrow","arrow left right","transfer","exchange","switch"]},{"name":"mdi:swap-horizontal-bold","tags":["arrow","arrow left right bold"]},{"name":"mdi:swap-horizontal-circle","tags":["arrow"]},{"name":"mdi:swap-horizontal-circle-outline","tags":["arrow"]},{"name":"mdi:swap-horizontal-hidden","tags":["arrow"]},{"name":"mdi:swap-horizontal-variant","tags":["arrow"]},{"name":"mdi:swap-vertical","tags":["arrow","import export","arrow up down"]},{"name":"mdi:swap-vertical-bold","tags":["arrow","arrow up down bold","import export bold"]},{"name":"mdi:swap-vertical-circle","tags":["arrow"]},{"name":"mdi:swap-vertical-circle-outline","tags":["arrow"]},{"name":"mdi:swap-vertical-variant","tags":["arrow","swap calls"]},{"name":"mdi:swim","tags":["sport"]},{"name":"mdi:switch","tags":[]},{"name":"mdi:sword","tags":["gaming / rpg"]},{"name":"mdi:sword-cross","tags":["gaming / rpg"]},{"name":"mdi:syllabary-hangul","tags":["alpha / numeric","writing system hangul"]},{"name":"mdi:syllabary-hiragana","tags":["alpha / numeric","writing system hiragana"]},{"name":"mdi:syllabary-katakana","tags":["alpha / numeric","writing system katakana"]},{"name":"mdi:syllabary-katakana-halfwidth","tags":["alpha / numeric","writing system katakana half width"]},{"name":"mdi:symbol","tags":[]},{"name":"mdi:symfony","tags":["brand / logo"]},{"name":"mdi:synagogue","tags":["places","religion","shul","temple","jewish"]},{"name":"mdi:synagogue-outline","tags":["places","religion","temple outline","shul outline","jewish outline"]},{"name":"mdi:sync","tags":["loop","counterclockwise arrows","circular arrows","circle arrows"]},{"name":"mdi:sync-alert","tags":["alert / error","sync warning","sync problem"]},{"name":"mdi:sync-circle","tags":[]},{"name":"mdi:sync-off","tags":["sync disabled"]},{"name":"mdi:tab","tags":[]},{"name":"mdi:tab-minus","tags":[]},{"name":"mdi:tab-plus","tags":["tab add"]},{"name":"mdi:tab-remove","tags":[]},{"name":"mdi:tab-search","tags":["tab find"]},{"name":"mdi:tab-unselected","tags":[]},{"name":"mdi:table","tags":["text / content / format"]},{"name":"mdi:table-account","tags":["account / user","table user"]},{"name":"mdi:table-alert","tags":["alert / error"]},{"name":"mdi:table-arrow-down","tags":["table download"]},{"name":"mdi:table-arrow-left","tags":["table import"]},{"name":"mdi:table-arrow-right","tags":["table share","table export"]},{"name":"mdi:table-arrow-up","tags":["table upload"]},{"name":"mdi:table-border","tags":["text / content / format"]},{"name":"mdi:table-cancel","tags":[]},{"name":"mdi:table-chair","tags":["home automation","restaurant","kitchen","dining","dining room"]},{"name":"mdi:table-check","tags":[]},{"name":"mdi:table-clock","tags":["date / time"]},{"name":"mdi:table-cog","tags":["settings","table settings"]},{"name":"mdi:table-column","tags":["text / content / format"]},{"name":"mdi:table-column-plus-after","tags":["text / content / format","table column add after"]},{"name":"mdi:table-column-plus-before","tags":["text / content / format","table column add before"]},{"name":"mdi:table-column-remove","tags":["text / content / format"]},{"name":"mdi:table-column-width","tags":["text / content / format"]},{"name":"mdi:table-edit","tags":["edit / modify","text / content / format"]},{"name":"mdi:table-eye","tags":[]},{"name":"mdi:table-eye-off","tags":[]},{"name":"mdi:table-filter","tags":[]},{"name":"mdi:table-furniture","tags":["home automation","kitchen","dining room"]},{"name":"mdi:table-headers-eye","tags":[]},{"name":"mdi:table-headers-eye-off","tags":[]},{"name":"mdi:table-heart","tags":["table favorite"]},{"name":"mdi:table-key","tags":[]},{"name":"mdi:table-large","tags":["text / content / format","geographic information system"]},{"name":"mdi:table-large-plus","tags":["text / content / format","geographic information system","table large add"]},{"name":"mdi:table-large-remove","tags":["text / content / format","geographic information system"]},{"name":"mdi:table-lock","tags":["lock"]},{"name":"mdi:table-merge-cells","tags":["text / content / format"]},{"name":"mdi:table-minus","tags":[]},{"name":"mdi:table-multiple","tags":[]},{"name":"mdi:table-network","tags":[]},{"name":"mdi:table-of-contents","tags":["toc"]},{"name":"mdi:table-off","tags":[]},{"name":"mdi:table-picnic","tags":[]},{"name":"mdi:table-pivot","tags":["text / content / format"]},{"name":"mdi:table-plus","tags":["text / content / format","table add"]},{"name":"mdi:table-question","tags":["table help"]},{"name":"mdi:table-refresh","tags":[]},{"name":"mdi:table-remove","tags":["text / content / format"]},{"name":"mdi:table-row","tags":["text / content / format"]},{"name":"mdi:table-row-height","tags":["text / content / format"]},{"name":"mdi:table-row-plus-after","tags":["text / content / format","table row add after"]},{"name":"mdi:table-row-plus-before","tags":["text / content / format","table row add before"]},{"name":"mdi:table-row-remove","tags":["text / content / format"]},{"name":"mdi:table-search","tags":[]},{"name":"mdi:table-settings","tags":["settings"]},{"name":"mdi:table-split-cell","tags":["text / content / format"]},{"name":"mdi:table-star","tags":["table favorite"]},{"name":"mdi:table-sync","tags":[]},{"name":"mdi:table-tennis","tags":["sport","ping pong","whiff whaff"]},{"name":"mdi:tablet","tags":["device / tech"]},{"name":"mdi:tablet-cellphone","tags":["cellphone / phone","device / tech","mobile devices","tablet mobile phone","tablet smartphone"]},{"name":"mdi:tablet-dashboard","tags":["device / tech"]},{"name":"mdi:taco","tags":["food / drink"]},{"name":"mdi:tag","tags":["local offer"]},{"name":"mdi:tag-arrow-down","tags":[]},{"name":"mdi:tag-arrow-down-outline","tags":[]},{"name":"mdi:tag-arrow-left","tags":[]},{"name":"mdi:tag-arrow-left-outline","tags":[]},{"name":"mdi:tag-arrow-right","tags":[]},{"name":"mdi:tag-arrow-right-outline","tags":[]},{"name":"mdi:tag-arrow-up","tags":[]},{"name":"mdi:tag-arrow-up-outline","tags":[]},{"name":"mdi:tag-check","tags":["tag approve"]},{"name":"mdi:tag-check-outline","tags":["tag approve outline"]},{"name":"mdi:tag-edit","tags":[]},{"name":"mdi:tag-edit-outline","tags":[]},{"name":"mdi:tag-faces","tags":["tag emoji","tag emoticon"]},{"name":"mdi:tag-heart","tags":["loyalty"]},{"name":"mdi:tag-heart-outline","tags":[]},{"name":"mdi:tag-hidden","tags":[]},{"name":"mdi:tag-minus","tags":[]},{"name":"mdi:tag-minus-outline","tags":[]},{"name":"mdi:tag-multiple","tags":["tags"]},{"name":"mdi:tag-multiple-outline","tags":[]},{"name":"mdi:tag-off","tags":[]},{"name":"mdi:tag-off-outline","tags":[]},{"name":"mdi:tag-outline","tags":[]},{"name":"mdi:tag-plus","tags":["tag add"]},{"name":"mdi:tag-plus-outline","tags":[]},{"name":"mdi:tag-remove","tags":[]},{"name":"mdi:tag-remove-outline","tags":[]},{"name":"mdi:tag-search","tags":["tag find"]},{"name":"mdi:tag-search-outline","tags":["tag find outline"]},{"name":"mdi:tag-text","tags":[]},{"name":"mdi:tag-text-outline","tags":[]},{"name":"mdi:tailwind","tags":["brand / logo"]},{"name":"mdi:tally-mark-1","tags":["math","counting 1","one"]},{"name":"mdi:tally-mark-2","tags":["math","counting 2","two"]},{"name":"mdi:tally-mark-3","tags":["math","counting 3","three"]},{"name":"mdi:tally-mark-4","tags":["math","counting 4","four"]},{"name":"mdi:tally-mark-5","tags":["math","counting 5","five"]},{"name":"mdi:tangram","tags":["gaming / rpg","puzzle"]},{"name":"mdi:tank","tags":[]},{"name":"mdi:tanker-truck","tags":["transportation + road","fuel truck","oil truck","water truck","tanker"]},{"name":"mdi:tape-drive","tags":[]},{"name":"mdi:tape-measure","tags":["hardware / tools","measuring tape"]},{"name":"mdi:target","tags":["registration mark"]},{"name":"mdi:target-account","tags":["account / user","crosshairs account","target user"]},{"name":"mdi:target-variant","tags":["registration mark"]},{"name":"mdi:taxi","tags":["transportation + road","navigation","local taxi","cab"]},{"name":"mdi:tea","tags":["food / drink"]},{"name":"mdi:tea-outline","tags":["food / drink"]},{"name":"mdi:teamviewer","tags":["brand / logo"]},{"name":"mdi:teddy-bear","tags":["holiday","home automation","child toy","children toy","kids room","childrens room","play room"]},{"name":"mdi:telescope","tags":["science"]},{"name":"mdi:television","tags":["device / tech","home automation","tv"]},{"name":"mdi:television-ambient-light","tags":["home automation"]},{"name":"mdi:television-box","tags":["tv box","tv guide"]},{"name":"mdi:television-classic","tags":["device / tech","home automation","tv classic"]},{"name":"mdi:television-classic-off","tags":["device / tech","home automation","tv classic off"]},{"name":"mdi:television-guide","tags":["device / tech","home automation"]},{"name":"mdi:television-off","tags":["device / tech","home automation","tv off"]},{"name":"mdi:television-pause","tags":["device / tech"]},{"name":"mdi:television-play","tags":["device / tech"]},{"name":"mdi:television-shimmer","tags":["device / tech","television clean"]},{"name":"mdi:television-speaker","tags":["audio","video / movie"]},{"name":"mdi:television-speaker-off","tags":["audio","video / movie"]},{"name":"mdi:television-stop","tags":["device / tech"]},{"name":"mdi:temperature-celsius","tags":["weather","temperature centigrade"]},{"name":"mdi:temperature-fahrenheit","tags":["weather"]},{"name":"mdi:temperature-kelvin","tags":["weather"]},{"name":"mdi:temple-buddhist","tags":["places","religion"]},{"name":"mdi:temple-buddhist-outline","tags":["places","religion"]},{"name":"mdi:temple-hindu","tags":["places","religion"]},{"name":"mdi:temple-hindu-outline","tags":["places","religion"]},{"name":"mdi:tennis","tags":["sport","tennis racquet","tennis racket"]},{"name":"mdi:tennis-ball","tags":["sport"]},{"name":"mdi:tennis-ball-outline","tags":["sport"]},{"name":"mdi:tent","tags":["camping","holiday"]},{"name":"mdi:terraform","tags":["brand / logo"]},{"name":"mdi:terrain","tags":["nature"]},{"name":"mdi:test-tube","tags":["science"]},{"name":"mdi:test-tube-empty","tags":["science"]},{"name":"mdi:test-tube-off","tags":["science"]},{"name":"mdi:text","tags":["text / content / format","notes"]},{"name":"mdi:text-account","tags":["account / user","biography","text user"]},{"name":"mdi:text-box","tags":["files / folders","drive document","file document box"]},{"name":"mdi:text-box-check","tags":["files / folders","file document box tick","file document box check"]},{"name":"mdi:text-box-check-outline","tags":["files / folders","file document box tick outline","file document box check outline"]},{"name":"mdi:text-box-edit","tags":["files / folders","edit / modify"]},{"name":"mdi:text-box-edit-outline","tags":["files / folders","edit / modify"]},{"name":"mdi:text-box-minus","tags":["files / folders","file document box minus"]},{"name":"mdi:text-box-minus-outline","tags":["files / folders","file document box minus outline"]},{"name":"mdi:text-box-multiple","tags":["files / folders","file document boxes","file document box multiple"]},{"name":"mdi:text-box-multiple-outline","tags":["files / folders","file document boxes outline","file document box multiple outline"]},{"name":"mdi:text-box-outline","tags":["files / folders","file document box outline"]},{"name":"mdi:text-box-plus","tags":["files / folders","file document box plus"]},{"name":"mdi:text-box-plus-outline","tags":["files / folders","file document box plus outline"]},{"name":"mdi:text-box-remove","tags":["files / folders","file document box remove"]},{"name":"mdi:text-box-remove-outline","tags":["files / folders","file document box remove outline"]},{"name":"mdi:text-box-search","tags":["files / folders","file document box search"]},{"name":"mdi:text-box-search-outline","tags":["files / folders","file document box search outline"]},{"name":"mdi:text-long","tags":["text subject"]},{"name":"mdi:text-recognition","tags":[]},{"name":"mdi:text-search","tags":["notes search"]},{"name":"mdi:text-search-variant","tags":["notes search variant"]},{"name":"mdi:text-shadow","tags":[]},{"name":"mdi:text-short","tags":[]},{"name":"mdi:texture","tags":[]},{"name":"mdi:texture-box","tags":["math","surface area"]},{"name":"mdi:theater","tags":["places","home automation","cinema","theatre"]},{"name":"mdi:theme-light-dark","tags":["weather","sun moon stars"]},{"name":"mdi:thermometer","tags":["weather","home automation","automotive","temperature"]},{"name":"mdi:thermometer-alert","tags":["home automation","weather","alert / error","thermometer warning","temperature alert","temperature warning"]},{"name":"mdi:thermometer-auto","tags":["home automation","weather","temperature auto"]},{"name":"mdi:thermometer-bluetooth","tags":["weather","home automation","automotive","temperature bluetooth"]},{"name":"mdi:thermometer-check","tags":["weather","home automation","thermometer approve","temperature check","temperature approve"]},{"name":"mdi:thermometer-chevron-down","tags":["home automation","weather","temperature chevron down","temperature decrease","thermometer decrease"]},{"name":"mdi:thermometer-chevron-up","tags":["home automation","weather","temperature chevron up","temperature increase","thermometer increase"]},{"name":"mdi:thermometer-high","tags":["home automation","weather","temperature high"]},{"name":"mdi:thermometer-lines","tags":["weather","home automation","temperature lines"]},{"name":"mdi:thermometer-low","tags":["home automation","weather","temperature low"]},{"name":"mdi:thermometer-minus","tags":["home automation","weather","temperature minus","thermometer decrease","temperature decrease"]},{"name":"mdi:thermometer-off","tags":["weather","home automation","temperature off"]},{"name":"mdi:thermometer-plus","tags":["home automation","weather","thermometer add","thermometer increase","temperature plus","temperature add","temperature increase"]},{"name":"mdi:thermometer-probe","tags":[]},{"name":"mdi:thermometer-probe-off","tags":[]},{"name":"mdi:thermometer-water","tags":["weather","home automation","dew point","water temperature","boiling point"]},{"name":"mdi:thermostat","tags":["device / tech","home automation","nest"]},{"name":"mdi:thermostat-auto","tags":["home automation"]},{"name":"mdi:thermostat-box","tags":["home automation","device / tech"]},{"name":"mdi:thermostat-box-auto","tags":["home automation"]},{"name":"mdi:thermostat-cog","tags":[]},{"name":"mdi:thought-bubble","tags":["comic bubble","thinking"]},{"name":"mdi:thought-bubble-outline","tags":["comic thought bubble outline","thinking outline","think outline"]},{"name":"mdi:thumb-down","tags":["dislike","thumbs down"]},{"name":"mdi:thumb-down-outline","tags":["dislike outline","thumbs down outline"]},{"name":"mdi:thumb-up","tags":["like","thumbs up"]},{"name":"mdi:thumb-up-outline","tags":["like outline","thumbs up outline"]},{"name":"mdi:thumbs-up-down","tags":["like dislike"]},{"name":"mdi:thumbs-up-down-outline","tags":["like dislike outline"]},{"name":"mdi:ticket","tags":["local activity","local play","local attraction"]},{"name":"mdi:ticket-account","tags":["account / user","ticket user"]},{"name":"mdi:ticket-confirmation","tags":["confirmation number"]},{"name":"mdi:ticket-confirmation-outline","tags":["confirmation number outline"]},{"name":"mdi:ticket-outline","tags":[]},{"name":"mdi:ticket-percent","tags":["coupon","voucher"]},{"name":"mdi:ticket-percent-outline","tags":["coupon outline","voucher outline"]},{"name":"mdi:tie","tags":["clothing"]},{"name":"mdi:tilde","tags":[]},{"name":"mdi:tilde-off","tags":[]},{"name":"mdi:timelapse","tags":["date / time"]},{"name":"mdi:timeline","tags":[]},{"name":"mdi:timeline-alert","tags":["alert / error"]},{"name":"mdi:timeline-alert-outline","tags":["alert / error"]},{"name":"mdi:timeline-check","tags":[]},{"name":"mdi:timeline-check-outline","tags":[]},{"name":"mdi:timeline-clock","tags":["date / time"]},{"name":"mdi:timeline-clock-outline","tags":["date / time"]},{"name":"mdi:timeline-minus","tags":[]},{"name":"mdi:timeline-minus-outline","tags":[]},{"name":"mdi:timeline-outline","tags":[]},{"name":"mdi:timeline-plus","tags":[]},{"name":"mdi:timeline-plus-outline","tags":[]},{"name":"mdi:timeline-question","tags":["timeline help"]},{"name":"mdi:timeline-question-outline","tags":["timeline help outline"]},{"name":"mdi:timeline-remove","tags":[]},{"name":"mdi:timeline-remove-outline","tags":[]},{"name":"mdi:timeline-text","tags":[]},{"name":"mdi:timeline-text-outline","tags":[]},{"name":"mdi:timer","tags":["sport","date / time","stopwatch"]},{"name":"mdi:timer-10","tags":["date / time","timer ten"]},{"name":"mdi:timer-3","tags":["date / time","timer three"]},{"name":"mdi:timer-alert","tags":["date / time","alert / error","stopwatch alert"]},{"name":"mdi:timer-alert-outline","tags":["date / time","alert / error","stopwatch alert outline"]},{"name":"mdi:timer-cancel","tags":["date / time","stopwatch cancel"]},{"name":"mdi:timer-cancel-outline","tags":["date / time","stopwatch cancel outline"]},{"name":"mdi:timer-check","tags":["date / time","stopwatch check","timer tick","stopwatch tick"]},{"name":"mdi:timer-check-outline","tags":["date / time","timer tick outline","stopwatch check outline","stopwatch tick outline"]},{"name":"mdi:timer-cog","tags":["date / time","settings","timer settings"]},{"name":"mdi:timer-cog-outline","tags":["date / time","settings","timer settings outline"]},{"name":"mdi:timer-edit","tags":["date / time","edit / modify","stopwatch edit"]},{"name":"mdi:timer-edit-outline","tags":["date / time","edit / modify","stopwatch edit outline"]},{"name":"mdi:timer-lock","tags":["date / time","lock","stopwatch lock","timer secure","stopwatch secure"]},{"name":"mdi:timer-lock-open","tags":["date / time","lock","stopwatch lock open"]},{"name":"mdi:timer-lock-open-outline","tags":["date / time","lock","stopwatch lock open outline"]},{"name":"mdi:timer-lock-outline","tags":["date / time","lock","stopwatch lock outline","stopwatch secure outline","timer secure outline"]},{"name":"mdi:timer-marker","tags":["date / time","navigation","stopwatch marker","timer location","stopwatch location"]},{"name":"mdi:timer-marker-outline","tags":["date / time","navigation","stopwatch marker outline","timer location outline","stopwatch location outline"]},{"name":"mdi:timer-minus","tags":["date / time","timer subtract","stopwatch minus","stopwatch subtract"]},{"name":"mdi:timer-minus-outline","tags":["date / time","timer subtract outline","stopwatch minus outline","stopwatch subtract outline"]},{"name":"mdi:timer-music","tags":["date / time","music","stopwatch music"]},{"name":"mdi:timer-music-outline","tags":["date / time","music","stopwatch music outline"]},{"name":"mdi:timer-off","tags":["date / time","stopwatch off"]},{"name":"mdi:timer-off-outline","tags":["date / time","stopwatch off outline"]},{"name":"mdi:timer-outline","tags":["date / time","sport","stopwatch outline"]},{"name":"mdi:timer-pause","tags":["date / time","stopwatch pause"]},{"name":"mdi:timer-pause-outline","tags":["date / time","stopwatch pause outline"]},{"name":"mdi:timer-play","tags":["date / time","timer start","stopwatch play","stopwatch start"]},{"name":"mdi:timer-play-outline","tags":["date / time","timer start outline","stopwatch play outline","stopwatch start outline"]},{"name":"mdi:timer-plus","tags":["date / time","timer add","stopwatch plus","stopwatch add"]},{"name":"mdi:timer-plus-outline","tags":["date / time","timer add outline","stopwatch plus outline","stopwatch add outline"]},{"name":"mdi:timer-refresh","tags":["date / time","stopwatch refresh"]},{"name":"mdi:timer-refresh-outline","tags":["date / time","stopwatch refresh outline"]},{"name":"mdi:timer-remove","tags":["date / time","stopwatch remove"]},{"name":"mdi:timer-remove-outline","tags":["date / time","stopwatch remove outline"]},{"name":"mdi:timer-sand","tags":["date / time","hourglass"]},{"name":"mdi:timer-sand-complete","tags":["date / time","hourglass complete"]},{"name":"mdi:timer-sand-empty","tags":["date / time","hourglass empty"]},{"name":"mdi:timer-sand-full","tags":["date / time","hourglass full"]},{"name":"mdi:timer-sand-paused","tags":["date / time","hourglass paused"]},{"name":"mdi:timer-settings","tags":["date / time","settings"]},{"name":"mdi:timer-settings-outline","tags":["date / time","settings"]},{"name":"mdi:timer-star","tags":["date / time","timer favorite","stopwatch star","stopwatch favorite"]},{"name":"mdi:timer-star-outline","tags":["date / time","timer favorite outline","stopwatch star outline","stopwatch favorite outline"]},{"name":"mdi:timer-stop","tags":["date / time","stopwatch stop"]},{"name":"mdi:timer-stop-outline","tags":["date / time","stopwatch stop outline"]},{"name":"mdi:timer-sync","tags":["date / time","stopwatch sync"]},{"name":"mdi:timer-sync-outline","tags":["date / time","stopwatch sync outline"]},{"name":"mdi:timetable","tags":["date / time"]},{"name":"mdi:tire","tags":["automotive","agriculture","tyre","wheel"]},{"name":"mdi:toaster","tags":["home automation"]},{"name":"mdi:toaster-off","tags":["home automation"]},{"name":"mdi:toaster-oven","tags":["home automation","food / drink"]},{"name":"mdi:toggle-switch","tags":[]},{"name":"mdi:toggle-switch-off","tags":[]},{"name":"mdi:toggle-switch-off-outline","tags":[]},{"name":"mdi:toggle-switch-outline","tags":[]},{"name":"mdi:toggle-switch-variant","tags":["home automation","light switch on"]},{"name":"mdi:toggle-switch-variant-off","tags":["home automation","light switch off","rocker switch off"]},{"name":"mdi:toilet","tags":["home automation","bathroom","lavatory","bidet"]},{"name":"mdi:toolbox","tags":["hardware / tools"]},{"name":"mdi:toolbox-outline","tags":["hardware / tools","service toolbox"]},{"name":"mdi:tools","tags":["hardware / tools","wrench","screwdriver"]},{"name":"mdi:tooltip","tags":["tooltip"]},{"name":"mdi:tooltip-account","tags":["account / user","tooltip","tooltip user","tooltip person","account location"]},{"name":"mdi:tooltip-cellphone","tags":["cellphone / phone","tooltip","cellphone location","cellphone gps","find my phone"]},{"name":"mdi:tooltip-check","tags":["tooltip"]},{"name":"mdi:tooltip-check-outline","tags":["tooltip"]},{"name":"mdi:tooltip-edit","tags":["tooltip","edit / modify"]},{"name":"mdi:tooltip-edit-outline","tags":["edit / modify","tooltip"]},{"name":"mdi:tooltip-image","tags":["tooltip"]},{"name":"mdi:tooltip-image-outline","tags":["tooltip"]},{"name":"mdi:tooltip-minus","tags":["tooltip"]},{"name":"mdi:tooltip-minus-outline","tags":["tooltip"]},{"name":"mdi:tooltip-outline","tags":["tooltip"]},{"name":"mdi:tooltip-plus","tags":["tooltip","tooltip add"]},{"name":"mdi:tooltip-plus-outline","tags":["tooltip","tooltip outline plus","tooltip add outline"]},{"name":"mdi:tooltip-question","tags":["tooltip","tooltip help"]},{"name":"mdi:tooltip-question-outline","tags":["tooltip","tooltip help outline"]},{"name":"mdi:tooltip-remove","tags":["tooltip"]},{"name":"mdi:tooltip-remove-outline","tags":["tooltip"]},{"name":"mdi:tooltip-text","tags":["tooltip"]},{"name":"mdi:tooltip-text-outline","tags":["tooltip"]},{"name":"mdi:tooth","tags":["medical / hospital","dentist"]},{"name":"mdi:tooth-outline","tags":["medical / hospital"]},{"name":"mdi:toothbrush","tags":["medical / hospital","dentist","oral hygiene"]},{"name":"mdi:toothbrush-electric","tags":["medical / hospital","dentist","oral hygiene"]},{"name":"mdi:toothbrush-paste","tags":["medical / hospital","dentist","oral hygiene"]},{"name":"mdi:torch","tags":["sport","olympics"]},{"name":"mdi:tortoise","tags":["animal","turtle","reptile"]},{"name":"mdi:toslink","tags":["audio","optical audio"]},{"name":"mdi:touch-text-outline","tags":[]},{"name":"mdi:tournament","tags":["gaming / rpg","sport","bracket"]},{"name":"mdi:tow-truck","tags":["transportation + road","auto towing","truck"]},{"name":"mdi:tower-beach","tags":[]},{"name":"mdi:tower-fire","tags":[]},{"name":"mdi:town-hall","tags":["places","school"]},{"name":"mdi:toy-brick","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-marker","tags":["navigation","lego","plugin","extension","lego location","toy brick location"]},{"name":"mdi:toy-brick-marker-outline","tags":["navigation","extension outline","lego location outline","toy brick location outline","plugin outline","lego outline"]},{"name":"mdi:toy-brick-minus","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-minus-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-plus","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-plus-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-remove","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-remove-outline","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-search","tags":["lego","plugin","extension"]},{"name":"mdi:toy-brick-search-outline","tags":["lego","plugin","extension"]},{"name":"mdi:track-light","tags":["home automation"]},{"name":"mdi:track-light-off","tags":[]},{"name":"mdi:trackpad","tags":[]},{"name":"mdi:trackpad-lock","tags":["lock"]},{"name":"mdi:tractor","tags":["agriculture","transportation + road","farm"]},{"name":"mdi:tractor-variant","tags":["agriculture","agriculture"]},{"name":"mdi:trademark","tags":["tm"]},{"name":"mdi:traffic-cone","tags":["transportation + road"]},{"name":"mdi:traffic-light","tags":["transportation + road","traffic signal","stop light"]},{"name":"mdi:traffic-light-outline","tags":["transportation + road","traffic signal outline","stop light outline"]},{"name":"mdi:train","tags":["navigation","transportation + other","directions railway","locomotive","railroad"]},{"name":"mdi:train-bus","tags":[]},{"name":"mdi:train-car","tags":["transportation + other","commute","transportation","travel"]},{"name":"mdi:train-car-autorack","tags":["transportation + other"]},{"name":"mdi:train-car-box","tags":["transportation + other"]},{"name":"mdi:train-car-box-full","tags":["transportation + other"]},{"name":"mdi:train-car-box-open","tags":["transportation + other"]},{"name":"mdi:train-car-caboose","tags":["transportation + other"]},{"name":"mdi:train-car-centerbeam","tags":["transportation + other"]},{"name":"mdi:train-car-centerbeam-full","tags":["transportation + other"]},{"name":"mdi:train-car-container","tags":["transportation + other"]},{"name":"mdi:train-car-flatbed","tags":["transportation + other"]},{"name":"mdi:train-car-flatbed-car","tags":["transportation + other"]},{"name":"mdi:train-car-flatbed-tank","tags":["transportation + other"]},{"name":"mdi:train-car-gondola","tags":["transportation + other"]},{"name":"mdi:train-car-gondola-full","tags":["transportation + other"]},{"name":"mdi:train-car-hopper","tags":["transportation + other"]},{"name":"mdi:train-car-hopper-covered","tags":["transportation + other"]},{"name":"mdi:train-car-hopper-full","tags":["transportation + other"]},{"name":"mdi:train-car-intermodal","tags":["transportation + other"]},{"name":"mdi:train-car-passenger","tags":["transportation + other"]},{"name":"mdi:train-car-passenger-door","tags":["transportation + other"]},{"name":"mdi:train-car-passenger-door-open","tags":["transportation + other"]},{"name":"mdi:train-car-passenger-variant","tags":["transportation + other"]},{"name":"mdi:train-car-tank","tags":["transportation + other"]},{"name":"mdi:train-variant","tags":["transportation + other","locomotive variant","railroad variant"]},{"name":"mdi:tram","tags":["navigation","transportation + other"]},{"name":"mdi:tram-side","tags":["transportation + other"]},{"name":"mdi:transcribe","tags":[]},{"name":"mdi:transcribe-close","tags":[]},{"name":"mdi:transfer","tags":["banking"]},{"name":"mdi:transfer-down","tags":["arrow"]},{"name":"mdi:transfer-left","tags":["arrow"]},{"name":"mdi:transfer-right","tags":["arrow"]},{"name":"mdi:transfer-up","tags":["arrow"]},{"name":"mdi:transit-connection","tags":["transportation + other","navigation"]},{"name":"mdi:transit-connection-horizontal","tags":["transportation + other"]},{"name":"mdi:transit-connection-variant","tags":["transportation + other","navigation"]},{"name":"mdi:transit-detour","tags":["transportation + other","navigation"]},{"name":"mdi:transit-skip","tags":["transportation + other"]},{"name":"mdi:transit-transfer","tags":["transportation + other","navigation","transfer within a station"]},{"name":"mdi:transition","tags":["animation","motion","translate"]},{"name":"mdi:transition-masked","tags":["masked transitions"]},{"name":"mdi:translate","tags":["language"]},{"name":"mdi:translate-off","tags":[]},{"name":"mdi:translate-variant","tags":["developer / languages","spoken language"]},{"name":"mdi:transmission-tower","tags":["home automation","pylon","powerline","electricity","energy","power","grid"]},{"name":"mdi:transmission-tower-export","tags":["home automation","power from grid","energy from grid","electricity from grid"]},{"name":"mdi:transmission-tower-import","tags":["home automation","power to grid","energy to grid","electricity to grid","return to grid"]},{"name":"mdi:transmission-tower-off","tags":["home automation","powerline off","pylon off","grid off"]},{"name":"mdi:trash-can","tags":["delete","rubbish bin","trashcan","garbage can"]},{"name":"mdi:trash-can-outline","tags":["delete outline","rubbish bin outline","trashcan outline","garbage can outline"]},{"name":"mdi:tray","tags":["queue","printer","inbox"]},{"name":"mdi:tray-alert","tags":["alert / error","queue","printer","inbox"]},{"name":"mdi:tray-arrow-down","tags":["arrow","tray download"]},{"name":"mdi:tray-arrow-up","tags":["arrow","tray upload"]},{"name":"mdi:tray-full","tags":["queue","printer","inbox"]},{"name":"mdi:tray-minus","tags":["queue","printer","inbox"]},{"name":"mdi:tray-plus","tags":["queue","printer","inbox"]},{"name":"mdi:tray-remove","tags":["queue","printer","inbox"]},{"name":"mdi:treasure-chest","tags":["gaming / rpg","shopping","lock","jewelry box","jewel case"]},{"name":"mdi:treasure-chest-outline","tags":["gaming / rpg","lock","shopping","jewel case outline","jewelry box outline"]},{"name":"mdi:tree","tags":["nature","agriculture","plant"]},{"name":"mdi:tree-outline","tags":["nature","agriculture","plant"]},{"name":"mdi:trello","tags":["brand / logo"]},{"name":"mdi:trending-down","tags":[]},{"name":"mdi:trending-neutral","tags":["trending flat"]},{"name":"mdi:trending-up","tags":[]},{"name":"mdi:triangle","tags":["shape"]},{"name":"mdi:triangle-down","tags":["shape"]},{"name":"mdi:triangle-down-outline","tags":["shape"]},{"name":"mdi:triangle-outline","tags":["shape"]},{"name":"mdi:triangle-small-down","tags":["shape","trending down variant"]},{"name":"mdi:triangle-small-up","tags":["shape","trending up variant"]},{"name":"mdi:triangle-wave","tags":["audio"]},{"name":"mdi:triforce","tags":["gaming / rpg","zelda"]},{"name":"mdi:trophy","tags":["sport","achievement"]},{"name":"mdi:trophy-award","tags":["sport","achievement award"]},{"name":"mdi:trophy-broken","tags":["sport"]},{"name":"mdi:trophy-outline","tags":["sport","achievement outline"]},{"name":"mdi:trophy-variant","tags":["sport","achievement variant"]},{"name":"mdi:trophy-variant-outline","tags":["sport","achievement variant outline"]},{"name":"mdi:truck","tags":["transportation + road","lorry","local shipping","courier"]},{"name":"mdi:truck-alert","tags":["transportation + road","alert / error","truck error"]},{"name":"mdi:truck-alert-outline","tags":["transportation + road","alert / error","truck error outline"]},{"name":"mdi:truck-cargo-container","tags":["transportation + road","truck shipping"]},{"name":"mdi:truck-check","tags":["transportation + road","truck tick","lorry check","courier check"]},{"name":"mdi:truck-check-outline","tags":["transportation + road"]},{"name":"mdi:truck-delivery","tags":["transportation + road","lorry delivery"]},{"name":"mdi:truck-delivery-outline","tags":["transportation + road"]},{"name":"mdi:truck-fast","tags":["transportation + road","lorry fast","courier fast"]},{"name":"mdi:truck-fast-outline","tags":["transportation + road"]},{"name":"mdi:truck-flatbed","tags":["automotive","transportation + road","truck flatbed tow"]},{"name":"mdi:truck-minus","tags":["transportation + road","truck subtract"]},{"name":"mdi:truck-minus-outline","tags":["transportation + road","truck subtract outline"]},{"name":"mdi:truck-off-road","tags":["transportation + other"]},{"name":"mdi:truck-off-road-off","tags":["transportation + other"]},{"name":"mdi:truck-outline","tags":["transportation + road"]},{"name":"mdi:truck-plus","tags":["transportation + road","medical / hospital","truck add"]},{"name":"mdi:truck-plus-outline","tags":["transportation + road","medical / hospital","truck add outline"]},{"name":"mdi:truck-remove","tags":["transportation + road"]},{"name":"mdi:truck-remove-outline","tags":["transportation + road"]},{"name":"mdi:truck-snowflake","tags":["transportation + road","truck refrigerator","truck freezer"]},{"name":"mdi:truck-trailer","tags":["transportation + road"]},{"name":"mdi:trumpet","tags":["music"]},{"name":"mdi:tshirt-crew","tags":["clothing","t shirt crew"]},{"name":"mdi:tshirt-crew-outline","tags":["clothing","t shirt crew outline"]},{"name":"mdi:tshirt-v","tags":["clothing","t shirt v"]},{"name":"mdi:tshirt-v-outline","tags":["clothing","t shirt v outline"]},{"name":"mdi:tsunami","tags":["nature","weather"]},{"name":"mdi:tumble-dryer","tags":["home automation","laundry room"]},{"name":"mdi:tumble-dryer-alert","tags":["home automation","alert / error","laundry room alert"]},{"name":"mdi:tumble-dryer-off","tags":["home automation","laundry room off"]},{"name":"mdi:tune","tags":["settings","audio","mixer settings","equaliser","settings"]},{"name":"mdi:tune-variant","tags":["audio","settings","settings","equalizer","slider"]},{"name":"mdi:tune-vertical","tags":["settings","audio","equaliser vertical","instant mix","settings vertical","mixer settings vertical"]},{"name":"mdi:tune-vertical-variant","tags":["audio","settings","settings vertical","equalizer vertical","slider vertical"]},{"name":"mdi:tunnel","tags":["transportation + road","transportation + other"]},{"name":"mdi:tunnel-outline","tags":["transportation + road","transportation + other"]},{"name":"mdi:turbine","tags":["transportation + flying","jet engine","wind turbine"]},{"name":"mdi:turkey","tags":["animal","holiday","agriculture","thanksgiving"]},{"name":"mdi:turnstile","tags":[]},{"name":"mdi:turnstile-outline","tags":[]},{"name":"mdi:turtle","tags":["animal","reptile"]},{"name":"mdi:twitch","tags":["social media","brand / logo"]},{"name":"mdi:twitter","tags":["brand / logo","social media"]},{"name":"mdi:two-factor-authentication","tags":[]},{"name":"mdi:typewriter","tags":[]},{"name":"mdi:ubisoft","tags":["brand / logo","gaming / rpg","uplay"]},{"name":"mdi:ubuntu","tags":["brand / logo"]},{"name":"mdi:ufo","tags":["unidentified flying object","alien"]},{"name":"mdi:ufo-outline","tags":["unidentified flying object outline","alien"]},{"name":"mdi:ultra-high-definition","tags":["video / movie","uhd"]},{"name":"mdi:umbraco","tags":["brand / logo"]},{"name":"mdi:umbrella","tags":["weather"]},{"name":"mdi:umbrella-beach","tags":["weather"]},{"name":"mdi:umbrella-beach-outline","tags":["weather"]},{"name":"mdi:umbrella-closed","tags":["weather"]},{"name":"mdi:umbrella-closed-outline","tags":["weather"]},{"name":"mdi:umbrella-closed-variant","tags":["weather"]},{"name":"mdi:umbrella-outline","tags":["weather"]},{"name":"mdi:underwear-outline","tags":["clothing","briefs outline"]},{"name":"mdi:undo","tags":["arrow"]},{"name":"mdi:undo-variant","tags":["arrow"]},{"name":"mdi:unfold-less-horizontal","tags":["chevron down up","collapse horizontal"]},{"name":"mdi:unfold-less-vertical","tags":["chevron right left","collapse vertical"]},{"name":"mdi:unfold-more-horizontal","tags":["chevron up down","expand horizontal"]},{"name":"mdi:unfold-more-vertical","tags":["chevron left right","expand vertical"]},{"name":"mdi:ungroup","tags":[]},{"name":"mdi:unicode","tags":["developer / languages","brand / logo"]},{"name":"mdi:unicorn","tags":["animal","fantasy"]},{"name":"mdi:unicorn-variant","tags":["animal","fantasy variant"]},{"name":"mdi:unicycle","tags":["sport","transportation + other"]},{"name":"mdi:unity","tags":["brand / logo","gaming / rpg"]},{"name":"mdi:unreal","tags":["brand / logo","gaming / rpg","unreal engine"]},{"name":"mdi:update","tags":["date / time","clockwise","clock arrow"]},{"name":"mdi:upload","tags":["file upload"]},{"name":"mdi:upload-box","tags":[]},{"name":"mdi:upload-box-outline","tags":[]},{"name":"mdi:upload-circle","tags":[]},{"name":"mdi:upload-circle-outline","tags":["files / folders"]},{"name":"mdi:upload-lock","tags":["lock"]},{"name":"mdi:upload-lock-outline","tags":["lock"]},{"name":"mdi:upload-multiple","tags":["uploads"]},{"name":"mdi:upload-multiple-outline","tags":[]},{"name":"mdi:upload-network","tags":[]},{"name":"mdi:upload-network-outline","tags":[]},{"name":"mdi:upload-off","tags":[]},{"name":"mdi:upload-off-outline","tags":[]},{"name":"mdi:upload-outline","tags":["file upload outline"]},{"name":"mdi:usb","tags":[]},{"name":"mdi:usb-c-port","tags":[]},{"name":"mdi:usb-flash-drive","tags":[]},{"name":"mdi:usb-flash-drive-outline","tags":[]},{"name":"mdi:usb-port","tags":[]},{"name":"mdi:vacuum","tags":["home automation","vacuum cleaner"]},{"name":"mdi:vacuum-outline","tags":["home automation","vacuum cleaner outline"]},{"name":"mdi:valve","tags":["home automation"]},{"name":"mdi:valve-closed","tags":["home automation"]},{"name":"mdi:valve-open","tags":["home automation"]},{"name":"mdi:van-passenger","tags":["transportation + road"]},{"name":"mdi:van-utility","tags":["transportation + road","van candy"]},{"name":"mdi:vanish","tags":[]},{"name":"mdi:vanish-quarter","tags":[]},{"name":"mdi:vanity-light","tags":["home automation"]},{"name":"mdi:variable","tags":["developer / languages","math"]},{"name":"mdi:variable-box","tags":["developer / languages"]},{"name":"mdi:vector-arrange-above","tags":["vector","arrange","geographic information system"]},{"name":"mdi:vector-arrange-below","tags":["vector","arrange","geographic information system"]},{"name":"mdi:vector-bezier","tags":["vector"]},{"name":"mdi:vector-circle","tags":["vector","geographic information system"]},{"name":"mdi:vector-circle-variant","tags":["vector"]},{"name":"mdi:vector-combine","tags":["vector","geographic information system"]},{"name":"mdi:vector-curve","tags":["vector","geographic information system","bezier"]},{"name":"mdi:vector-difference","tags":["vector","geographic information system"]},{"name":"mdi:vector-difference-ab","tags":["vector","geographic information system"]},{"name":"mdi:vector-difference-ba","tags":["vector","geographic information system"]},{"name":"mdi:vector-ellipse","tags":["vector","geographic information system"]},{"name":"mdi:vector-intersection","tags":["vector","geographic information system"]},{"name":"mdi:vector-line","tags":["vector","geographic information system"]},{"name":"mdi:vector-link","tags":["vector","geographic information system"]},{"name":"mdi:vector-point","tags":["vector"]},{"name":"mdi:vector-point-edit","tags":["vector","edit / modify"]},{"name":"mdi:vector-point-minus","tags":["vector"]},{"name":"mdi:vector-point-plus","tags":["vector","vector point add"]},{"name":"mdi:vector-point-select","tags":["vector","geographic information system"]},{"name":"mdi:vector-polygon","tags":["vector","geographic information system"]},{"name":"mdi:vector-polygon-variant","tags":["vector"]},{"name":"mdi:vector-polyline","tags":["vector","geographic information system"]},{"name":"mdi:vector-polyline-edit","tags":["edit / modify"]},{"name":"mdi:vector-polyline-minus","tags":[]},{"name":"mdi:vector-polyline-plus","tags":[]},{"name":"mdi:vector-polyline-remove","tags":[]},{"name":"mdi:vector-radius","tags":["vector","geographic information system"]},{"name":"mdi:vector-rectangle","tags":["vector","geographic information system"]},{"name":"mdi:vector-selection","tags":["vector","geographic information system"]},{"name":"mdi:vector-square","tags":["vector","geographic information system","mdi"]},{"name":"mdi:vector-square-close","tags":["vector"]},{"name":"mdi:vector-square-edit","tags":["vector","edit / modify"]},{"name":"mdi:vector-square-minus","tags":["vector","vector square subtract"]},{"name":"mdi:vector-square-open","tags":["vector"]},{"name":"mdi:vector-square-plus","tags":["vector","vector square add"]},{"name":"mdi:vector-square-remove","tags":["vector","vector square delete"]},{"name":"mdi:vector-triangle","tags":["vector","geographic information system"]},{"name":"mdi:vector-union","tags":["vector","geographic information system"]},{"name":"mdi:vhs","tags":["video / movie","video home system","vhs cassette","vhs tape"]},{"name":"mdi:vibrate","tags":["vibration"]},{"name":"mdi:vibrate-off","tags":[]},{"name":"mdi:video","tags":["video / movie","home automation","videocam"]},{"name":"mdi:video-2d","tags":["video / movie"]},{"name":"mdi:video-3d","tags":["video / movie"]},{"name":"mdi:video-3d-off","tags":["video / movie"]},{"name":"mdi:video-3d-variant","tags":["video / movie"]},{"name":"mdi:video-4k-box","tags":["video / movie","4k"]},{"name":"mdi:video-account","tags":["account / user","video / movie","video user"]},{"name":"mdi:video-box","tags":["video / movie"]},{"name":"mdi:video-box-off","tags":["video / movie"]},{"name":"mdi:video-check","tags":["video / movie"]},{"name":"mdi:video-check-outline","tags":["video / movie"]},{"name":"mdi:video-high-definition","tags":["video / movie"]},{"name":"mdi:video-image","tags":["video / movie"]},{"name":"mdi:video-input-antenna","tags":["video / movie","settings input antenna"]},{"name":"mdi:video-input-component","tags":["video / movie","video input composite","settings input component","settings input composite","video input ypbpr","rca"]},{"name":"mdi:video-input-hdmi","tags":["video / movie","settings input hdmi"]},{"name":"mdi:video-input-scart","tags":["video / movie"]},{"name":"mdi:video-input-svideo","tags":["video / movie","settings input svideo"]},{"name":"mdi:video-marker","tags":["video / movie","navigation","video location"]},{"name":"mdi:video-marker-outline","tags":["video / movie","navigation","video location outline"]},{"name":"mdi:video-minus","tags":["video / movie","video remove"]},{"name":"mdi:video-minus-outline","tags":["video / movie"]},{"name":"mdi:video-off","tags":["video / movie","home automation","videocam off"]},{"name":"mdi:video-off-outline","tags":["video / movie","videocam off outline"]},{"name":"mdi:video-outline","tags":["video / movie","videocam outline"]},{"name":"mdi:video-plus","tags":["video / movie","video call","video add"]},{"name":"mdi:video-plus-outline","tags":["video / movie"]},{"name":"mdi:video-stabilization","tags":["video / movie","video stabilisation"]},{"name":"mdi:video-standard-definition","tags":["video / movie","video sd","video quality sd"]},{"name":"mdi:video-switch","tags":["video / movie","switch video"]},{"name":"mdi:video-switch-outline","tags":["video / movie"]},{"name":"mdi:video-vintage","tags":["video / movie","video film","video classic"]},{"name":"mdi:video-wireless","tags":["video / movie"]},{"name":"mdi:video-wireless-outline","tags":["video / movie"]},{"name":"mdi:view-agenda","tags":["view"]},{"name":"mdi:view-agenda-outline","tags":["view"]},{"name":"mdi:view-array","tags":["view"]},{"name":"mdi:view-array-outline","tags":["view"]},{"name":"mdi:view-carousel","tags":["view"]},{"name":"mdi:view-carousel-outline","tags":["view"]},{"name":"mdi:view-column","tags":["view"]},{"name":"mdi:view-column-outline","tags":["view"]},{"name":"mdi:view-comfy","tags":["view"]},{"name":"mdi:view-comfy-outline","tags":["view"]},{"name":"mdi:view-compact","tags":["view"]},{"name":"mdi:view-compact-outline","tags":["view"]},{"name":"mdi:view-dashboard","tags":["view"]},{"name":"mdi:view-dashboard-edit","tags":["view","edit / modify"]},{"name":"mdi:view-dashboard-edit-outline","tags":["view","edit / modify"]},{"name":"mdi:view-dashboard-outline","tags":["view"]},{"name":"mdi:view-dashboard-variant","tags":["view"]},{"name":"mdi:view-dashboard-variant-outline","tags":["view"]},{"name":"mdi:view-day","tags":["view"]},{"name":"mdi:view-day-outline","tags":["view"]},{"name":"mdi:view-gallery","tags":["view"]},{"name":"mdi:view-gallery-outline","tags":["view"]},{"name":"mdi:view-grid","tags":["view"]},{"name":"mdi:view-grid-compact","tags":[]},{"name":"mdi:view-grid-outline","tags":["view"]},{"name":"mdi:view-grid-plus","tags":["view","view grid add"]},{"name":"mdi:view-grid-plus-outline","tags":["view"]},{"name":"mdi:view-headline","tags":["view"]},{"name":"mdi:view-list","tags":["view"]},{"name":"mdi:view-list-outline","tags":["view"]},{"name":"mdi:view-module","tags":["view"]},{"name":"mdi:view-module-outline","tags":["view"]},{"name":"mdi:view-parallel","tags":["view"]},{"name":"mdi:view-parallel-outline","tags":["view"]},{"name":"mdi:view-quilt","tags":["view"]},{"name":"mdi:view-quilt-outline","tags":["view"]},{"name":"mdi:view-sequential","tags":["view"]},{"name":"mdi:view-sequential-outline","tags":["view"]},{"name":"mdi:view-split-horizontal","tags":["view"]},{"name":"mdi:view-split-vertical","tags":["view"]},{"name":"mdi:view-stream","tags":["view"]},{"name":"mdi:view-stream-outline","tags":["view"]},{"name":"mdi:view-week","tags":["view"]},{"name":"mdi:view-week-outline","tags":["view"]},{"name":"mdi:vimeo","tags":["brand / logo"]},{"name":"mdi:violin","tags":["music"]},{"name":"mdi:virtual-reality","tags":["vr"]},{"name":"mdi:virus","tags":["science","medical / hospital"]},{"name":"mdi:virus-off","tags":["science"]},{"name":"mdi:virus-off-outline","tags":["science"]},{"name":"mdi:virus-outline","tags":["science","medical / hospital"]},{"name":"mdi:vlc","tags":["brand / logo"]},{"name":"mdi:voicemail","tags":[]},{"name":"mdi:volcano","tags":["nature","eruption"]},{"name":"mdi:volcano-outline","tags":["nature","eruption outline"]},{"name":"mdi:volleyball","tags":["sport"]},{"name":"mdi:volume-equal","tags":["audio"]},{"name":"mdi:volume-high","tags":["audio","home automation","cellphone / phone","audio","speaker","speakerphone"]},{"name":"mdi:volume-low","tags":["audio","home automation","cellphone / phone","audio","speaker"]},{"name":"mdi:volume-medium","tags":["audio","home automation","cellphone / phone","audio","speaker"]},{"name":"mdi:volume-minus","tags":["audio","home automation","cellphone / phone","volume decrease"]},{"name":"mdi:volume-mute","tags":["audio","cellphone / phone"]},{"name":"mdi:volume-off","tags":["audio","home automation","cellphone / phone","mute","audio off","speaker off","speakerphone off"]},{"name":"mdi:volume-plus","tags":["audio","home automation","cellphone / phone","volume increase"]},{"name":"mdi:volume-source","tags":["cellphone / phone","audio"]},{"name":"mdi:volume-variant-off","tags":["audio","cellphone / phone"]},{"name":"mdi:volume-vibrate","tags":["cellphone / phone","audio"]},{"name":"mdi:vote","tags":["how to vote"]},{"name":"mdi:vote-outline","tags":["how to vote outline"]},{"name":"mdi:vpn","tags":["virtual private network"]},{"name":"mdi:vuejs","tags":["brand / logo","developer / languages","vue js"]},{"name":"mdi:vuetify","tags":["brand / logo"]},{"name":"mdi:walk","tags":["sport","transportation + other","people / family","directions walk","walker","walking","human walk"]},{"name":"mdi:wall","tags":["bricks"]},{"name":"mdi:wall-fire","tags":["device / tech","firewall"]},{"name":"mdi:wall-sconce","tags":["home automation"]},{"name":"mdi:wall-sconce-flat","tags":["home automation","ceiling light flat","pot light flat"]},{"name":"mdi:wall-sconce-flat-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-flat-variant","tags":["home automation","pot light flat variant"]},{"name":"mdi:wall-sconce-flat-variant-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-round","tags":["home automation","pot light round"]},{"name":"mdi:wall-sconce-round-outline","tags":["home automation"]},{"name":"mdi:wall-sconce-round-variant","tags":["home automation","pot light round variant"]},{"name":"mdi:wall-sconce-round-variant-outline","tags":["home automation"]},{"name":"mdi:wallet","tags":["currency","banking","account balance wallet"]},{"name":"mdi:wallet-bifold","tags":["currency","banking"]},{"name":"mdi:wallet-bifold-outline","tags":["banking","currency"]},{"name":"mdi:wallet-giftcard","tags":["shopping","banking","card giftcard","redeem"]},{"name":"mdi:wallet-membership","tags":["card membership"]},{"name":"mdi:wallet-outline","tags":["currency","banking","account balance wallet outline"]},{"name":"mdi:wallet-plus","tags":["banking","wallet add"]},{"name":"mdi:wallet-plus-outline","tags":["banking","wallet add outline"]},{"name":"mdi:wallet-travel","tags":["card travel"]},{"name":"mdi:wallpaper","tags":[]},{"name":"mdi:wan","tags":["wide area network"]},{"name":"mdi:wardrobe","tags":["home automation","closet"]},{"name":"mdi:wardrobe-outline","tags":["home automation","closet outline"]},{"name":"mdi:warehouse","tags":["places"]},{"name":"mdi:washing-machine","tags":["home automation","laundrette","local laundry service","laundry room","washer"]},{"name":"mdi:washing-machine-alert","tags":["home automation","alert / error","laundry room alert","washer alert"]},{"name":"mdi:washing-machine-off","tags":["home automation","laundry room off","washer off"]},{"name":"mdi:watch","tags":["device / tech"]},{"name":"mdi:watch-export","tags":["device / tech"]},{"name":"mdi:watch-export-variant","tags":["device / tech"]},{"name":"mdi:watch-import","tags":["device / tech"]},{"name":"mdi:watch-import-variant","tags":["device / tech"]},{"name":"mdi:watch-variant","tags":["device / tech"]},{"name":"mdi:watch-vibrate","tags":["device / tech"]},{"name":"mdi:watch-vibrate-off","tags":["device / tech"]},{"name":"mdi:water","tags":["home automation","health / beauty","food / drink","weather","agriculture","drop","blood","water drop","trans fat","ink"]},{"name":"mdi:water-alert","tags":["alert / error","agriculture","drop alert","blood alert","ink alert"]},{"name":"mdi:water-alert-outline","tags":["alert / error","agriculture","drop alert outline","blood alert outline","ink alert outline"]},{"name":"mdi:water-boiler","tags":["home automation","water heater","gas water boiler","electric water boiler","gas water heater","electric water heater"]},{"name":"mdi:water-boiler-alert","tags":["home automation","alert / error","water heater alert","water boiler error","water heater error"]},{"name":"mdi:water-boiler-auto","tags":["home automation","water heater auto"]},{"name":"mdi:water-boiler-off","tags":["home automation","water heater off"]},{"name":"mdi:water-check","tags":["drop check","blood check","ink check"]},{"name":"mdi:water-check-outline","tags":["drop check outline","blood check outline","ink check outline"]},{"name":"mdi:water-circle","tags":["home automation","drop circle","blood circle","ink circle"]},{"name":"mdi:water-minus","tags":["drop minus","blood minus","ink minus"]},{"name":"mdi:water-minus-outline","tags":["drop minus outline","blood minus outline","ink minus outline"]},{"name":"mdi:water-off","tags":["format color reset","trans fat off","blood off","ink off"]},{"name":"mdi:water-off-outline","tags":["drop off outline","blood off outline","trans fat off outline","ink off outline"]},{"name":"mdi:water-opacity","tags":["home automation","drawing / art","weather","water transparent","water saver","blood saver","blood transparent","oil saver","oil transparent","drop transparent","drop saver"]},{"name":"mdi:water-outline","tags":["home automation","weather","drop outline","blood outline","water drop outline","ink outline"]},{"name":"mdi:water-percent","tags":["weather","home automation","nature","humidity","ink percent"]},{"name":"mdi:water-percent-alert","tags":["alert / error","nature","humidity alert","ink percent alert"]},{"name":"mdi:water-plus","tags":["drop plus","blood plus","ink plus"]},{"name":"mdi:water-plus-outline","tags":["drop plus outline","blood plus outline","ink plus outline"]},{"name":"mdi:water-polo","tags":["sport"]},{"name":"mdi:water-pump","tags":["agriculture","home automation","tap","kitchen tap","faucet"]},{"name":"mdi:water-pump-off","tags":["agriculture","home automation","tap off","kitchen tap off","faucet off"]},{"name":"mdi:water-remove","tags":["drop remove","blood remove","ink remove"]},{"name":"mdi:water-remove-outline","tags":["drop remove outline","blood remove outline","ink remove outline"]},{"name":"mdi:water-sync","tags":["agriculture","water recycle","water reuse"]},{"name":"mdi:water-thermometer","tags":["weather","home automation","boil point","water temperature","dew point"]},{"name":"mdi:water-thermometer-outline","tags":["weather","home automation","dew point outline","water temperature outline","boil point outline"]},{"name":"mdi:water-well","tags":[]},{"name":"mdi:water-well-outline","tags":[]},{"name":"mdi:waterfall","tags":["home automation","nature"]},{"name":"mdi:watering-can","tags":["agriculture","watering pot"]},{"name":"mdi:watering-can-outline","tags":["agriculture","watering pot outline"]},{"name":"mdi:watermark","tags":["branding watermark"]},{"name":"mdi:wave","tags":["transportation + water","water"]},{"name":"mdi:wave-arrow-down","tags":[]},{"name":"mdi:wave-arrow-up","tags":[]},{"name":"mdi:wave-undercurrent","tags":[]},{"name":"mdi:waveform","tags":["audio"]},{"name":"mdi:waves","tags":["weather","transportation + water","agriculture","ocean","lake","flood","water"]},{"name":"mdi:waves-arrow-left","tags":["nature","weather","tide in","water flow"]},{"name":"mdi:waves-arrow-right","tags":["nature","weather","tide out","water flow"]},{"name":"mdi:waves-arrow-up","tags":["nature","weather","water evaporation","humidity","sea level rise","ocean level rise","climate change"]},{"name":"mdi:waze","tags":["brand / logo"]},{"name":"mdi:weather-cloudy","tags":["weather","cloud","agriculture"]},{"name":"mdi:weather-cloudy-alert","tags":["weather","alert / error","cloud"]},{"name":"mdi:weather-cloudy-arrow-right","tags":["weather","cloud"]},{"name":"mdi:weather-cloudy-clock","tags":["weather","cloud","weather history","weather time","weather date"]},{"name":"mdi:weather-dust","tags":["weather","agriculture","dust storm","windy"]},{"name":"mdi:weather-fog","tags":["weather","agriculture","weather mist"]},{"name":"mdi:weather-hail","tags":["weather","agriculture"]},{"name":"mdi:weather-hazy","tags":["weather","agriculture"]},{"name":"mdi:weather-hurricane","tags":["weather","nature","agriculture","cyclone"]},{"name":"mdi:weather-hurricane-outline","tags":["weather","nature","agriculture","cyclone outline"]},{"name":"mdi:weather-lightning","tags":["weather","agriculture","weather storm","weather thunder","weather flash"]},{"name":"mdi:weather-lightning-rainy","tags":["weather","weather thunder rainy","weather storm"]},{"name":"mdi:weather-moonset","tags":["weather"]},{"name":"mdi:weather-moonset-down","tags":["weather"]},{"name":"mdi:weather-moonset-up","tags":["weather","moonrise"]},{"name":"mdi:weather-night","tags":["weather","holiday","moon and stars","night sky","weather night outline"]},{"name":"mdi:weather-night-partly-cloudy","tags":["weather","cloud"]},{"name":"mdi:weather-partly-cloudy","tags":["weather","cloud","weather partlycloudy"]},{"name":"mdi:weather-partly-lightning","tags":["weather"]},{"name":"mdi:weather-partly-rainy","tags":["weather"]},{"name":"mdi:weather-partly-snowy","tags":["weather"]},{"name":"mdi:weather-partly-snowy-rainy","tags":["weather"]},{"name":"mdi:weather-pouring","tags":["weather","agriculture","weather heavy rain"]},{"name":"mdi:weather-rainy","tags":["weather","agriculture","weather drizzle","weather spitting"]},{"name":"mdi:weather-snowy","tags":["weather"]},{"name":"mdi:weather-snowy-heavy","tags":["weather","flurries"]},{"name":"mdi:weather-snowy-rainy","tags":["weather","weather sleet"]},{"name":"mdi:weather-sunny","tags":["weather"]},{"name":"mdi:weather-sunny-alert","tags":["weather","alert / error","home automation","heat alert","heat advisory","sun advisory"]},{"name":"mdi:weather-sunny-off","tags":["weather"]},{"name":"mdi:weather-sunset","tags":["weather"]},{"name":"mdi:weather-sunset-down","tags":["weather"]},{"name":"mdi:weather-sunset-up","tags":["weather","sunrise"]},{"name":"mdi:weather-tornado","tags":["weather"]},{"name":"mdi:weather-windy","tags":["weather"]},{"name":"mdi:weather-windy-variant","tags":["weather"]},{"name":"mdi:web","tags":["geographic information system","language","globe","internet","world wide web"]},{"name":"mdi:web-box","tags":["geographic information system","language box","globe box","internet box"]},{"name":"mdi:web-cancel","tags":[]},{"name":"mdi:web-check","tags":[]},{"name":"mdi:web-clock","tags":["date / time"]},{"name":"mdi:web-minus","tags":[]},{"name":"mdi:web-off","tags":[]},{"name":"mdi:web-plus","tags":[]},{"name":"mdi:web-refresh","tags":[]},{"name":"mdi:web-remove","tags":[]},{"name":"mdi:web-sync","tags":[]},{"name":"mdi:webcam","tags":["video / movie","home automation","web camera"]},{"name":"mdi:webcam-off","tags":[]},{"name":"mdi:webhook","tags":[]},{"name":"mdi:webpack","tags":["brand / logo","developer / languages"]},{"name":"mdi:webrtc","tags":["brand / logo"]},{"name":"mdi:wechat","tags":["brand / logo"]},{"name":"mdi:weight","tags":[]},{"name":"mdi:weight-gram","tags":[]},{"name":"mdi:weight-kilogram","tags":["weight kg"]},{"name":"mdi:weight-lifter","tags":["sport","people / family","crossfit","gym","fitness center","human barbell"]},{"name":"mdi:weight-pound","tags":["weight lb"]},{"name":"mdi:whatsapp","tags":["brand / logo"]},{"name":"mdi:wheel-barrow","tags":["hardware / tools"]},{"name":"mdi:wheelchair","tags":["medical / hospital","people / family","accessible","isa","international symbol of access"]},{"name":"mdi:wheelchair-accessibility","tags":["medical / hospital","accessible"]},{"name":"mdi:whistle","tags":["sport"]},{"name":"mdi:whistle-outline","tags":["sport"]},{"name":"mdi:white-balance-auto","tags":["photography","wb auto"]},{"name":"mdi:white-balance-incandescent","tags":["photography","wb incandescent"]},{"name":"mdi:white-balance-iridescent","tags":["photography","wb iridescent"]},{"name":"mdi:white-balance-sunny","tags":["photography","weather","wb sunny"]},{"name":"mdi:widgets","tags":[]},{"name":"mdi:widgets-outline","tags":[]},{"name":"mdi:wifi","tags":[]},{"name":"mdi:wifi-alert","tags":["alert / error"]},{"name":"mdi:wifi-arrow-down","tags":[]},{"name":"mdi:wifi-arrow-left","tags":[]},{"name":"mdi:wifi-arrow-left-right","tags":[]},{"name":"mdi:wifi-arrow-right","tags":[]},{"name":"mdi:wifi-arrow-up","tags":[]},{"name":"mdi:wifi-arrow-up-down","tags":[]},{"name":"mdi:wifi-cancel","tags":[]},{"name":"mdi:wifi-check","tags":[]},{"name":"mdi:wifi-cog","tags":["settings"]},{"name":"mdi:wifi-lock","tags":["lock"]},{"name":"mdi:wifi-lock-open","tags":["lock"]},{"name":"mdi:wifi-marker","tags":["navigation","wifi location"]},{"name":"mdi:wifi-minus","tags":[]},{"name":"mdi:wifi-off","tags":[]},{"name":"mdi:wifi-plus","tags":[]},{"name":"mdi:wifi-refresh","tags":[]},{"name":"mdi:wifi-remove","tags":[]},{"name":"mdi:wifi-settings","tags":["settings"]},{"name":"mdi:wifi-star","tags":["wifi favourite","network favourite","wifi favorite","network favorite"]},{"name":"mdi:wifi-strength-1","tags":[]},{"name":"mdi:wifi-strength-1-alert","tags":["alert / error","wifi strength 1 warning"]},{"name":"mdi:wifi-strength-1-lock","tags":["lock"]},{"name":"mdi:wifi-strength-1-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-2","tags":[]},{"name":"mdi:wifi-strength-2-alert","tags":["alert / error","wifi strength 2 warning"]},{"name":"mdi:wifi-strength-2-lock","tags":["lock"]},{"name":"mdi:wifi-strength-2-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-3","tags":[]},{"name":"mdi:wifi-strength-3-alert","tags":["alert / error","wifi strength 3 warning"]},{"name":"mdi:wifi-strength-3-lock","tags":["lock"]},{"name":"mdi:wifi-strength-3-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-4","tags":[]},{"name":"mdi:wifi-strength-4-alert","tags":["alert / error","wifi strength 4 warning"]},{"name":"mdi:wifi-strength-4-lock","tags":["lock"]},{"name":"mdi:wifi-strength-4-lock-open","tags":["lock"]},{"name":"mdi:wifi-strength-alert-outline","tags":["alert / error","wifi strength warning outline","wifi strength 0 alert","wifi strength 0 warning"]},{"name":"mdi:wifi-strength-lock-open-outline","tags":["lock"]},{"name":"mdi:wifi-strength-lock-outline","tags":["lock","wifi strength 0 lock"]},{"name":"mdi:wifi-strength-off","tags":[]},{"name":"mdi:wifi-strength-off-outline","tags":[]},{"name":"mdi:wifi-strength-outline","tags":["wifi strength 0"]},{"name":"mdi:wifi-sync","tags":[]},{"name":"mdi:wikipedia","tags":["brand / logo"]},{"name":"mdi:wind-power","tags":["home automation","wind energy","wind electricity"]},{"name":"mdi:wind-power-outline","tags":["home automation","wind energy outline","wind electricity outline"]},{"name":"mdi:wind-turbine","tags":["home automation","wind power","wind electricity"]},{"name":"mdi:wind-turbine-alert","tags":["home automation","alert / error","wind power alert","wind turbine warning"]},{"name":"mdi:wind-turbine-check","tags":["home automation","wind power check","wind turbine success","wind power success"]},{"name":"mdi:window-close","tags":["cancel","close"]},{"name":"mdi:window-closed","tags":["home automation"]},{"name":"mdi:window-closed-variant","tags":["home automation"]},{"name":"mdi:window-maximize","tags":[]},{"name":"mdi:window-minimize","tags":[]},{"name":"mdi:window-open","tags":["home automation"]},{"name":"mdi:window-open-variant","tags":["home automation"]},{"name":"mdi:window-restore","tags":[]},{"name":"mdi:window-shutter","tags":["home automation"]},{"name":"mdi:window-shutter-alert","tags":["home automation","alert / error"]},{"name":"mdi:window-shutter-auto","tags":["home automation"]},{"name":"mdi:window-shutter-cog","tags":["home automation","settings","window shutter settings"]},{"name":"mdi:window-shutter-open","tags":["home automation"]},{"name":"mdi:window-shutter-settings","tags":["home automation","settings"]},{"name":"mdi:windsock","tags":["weather"]},{"name":"mdi:wiper","tags":[]},{"name":"mdi:wiper-wash","tags":["automotive","wiper fluid","washer fluid"]},{"name":"mdi:wiper-wash-alert","tags":["alert / error","automotive","wiper fluid alert","washer fluid alert","wiper fluid low","washer fluid low"]},{"name":"mdi:wizard-hat","tags":["clothing","gaming / rpg"]},{"name":"mdi:wordpress","tags":["brand / logo"]},{"name":"mdi:wrap","tags":[]},{"name":"mdi:wrap-disabled","tags":["unwrap"]},{"name":"mdi:wrench","tags":["hardware / tools","build","spanner"]},{"name":"mdi:wrench-check","tags":[]},{"name":"mdi:wrench-check-outline","tags":[]},{"name":"mdi:wrench-clock","tags":["date / time","hardware / tools","scheduled maintenance","wrench time","tool time","tool clock"]},{"name":"mdi:wrench-clock-outline","tags":["date / time"]},{"name":"mdi:wrench-cog","tags":["settings","wrench settings"]},{"name":"mdi:wrench-cog-outline","tags":["settings","wrench settings outline"]},{"name":"mdi:wrench-outline","tags":["hardware / tools","build outline","spanner outline"]},{"name":"mdi:xamarin","tags":["brand / logo","microsoft xamarin"]},{"name":"mdi:xml","tags":["developer / languages","code"]},{"name":"mdi:xmpp","tags":["brand / logo"]},{"name":"mdi:yahoo","tags":["brand / logo"]},{"name":"mdi:yeast","tags":[]},{"name":"mdi:yin-yang","tags":["taoism"]},{"name":"mdi:yoga","tags":["sport"]},{"name":"mdi:youtube","tags":["brand / logo","social media","video youtube","youtube play"]},{"name":"mdi:youtube-gaming","tags":["brand / logo"]},{"name":"mdi:youtube-studio","tags":["brand / logo","youtube creator studio"]},{"name":"mdi:youtube-subscription","tags":["brand / logo"]},{"name":"mdi:youtube-tv","tags":["brand / logo"]},{"name":"mdi:yurt","tags":[]},{"name":"mdi:z-wave","tags":["home automation","brand / logo","zwave"]},{"name":"mdi:zend","tags":["developer / languages","brand / logo"]},{"name":"mdi:zigbee","tags":["home automation","brand / logo"]},{"name":"mdi:zip-box","tags":["files / folders","compressed file"]},{"name":"mdi:zip-box-outline","tags":["files / folders","compressed file outline"]},{"name":"mdi:zip-disk","tags":[]},{"name":"mdi:zodiac-aquarius","tags":["horoscope aquarius"]},{"name":"mdi:zodiac-aries","tags":["horoscope aries"]},{"name":"mdi:zodiac-cancer","tags":["horoscope cancer"]},{"name":"mdi:zodiac-capricorn","tags":["horoscope capricorn"]},{"name":"mdi:zodiac-gemini","tags":["horoscope gemini"]},{"name":"mdi:zodiac-leo","tags":["horoscope leo"]},{"name":"mdi:zodiac-libra","tags":["horoscope libra"]},{"name":"mdi:zodiac-pisces","tags":["horoscope pisces"]},{"name":"mdi:zodiac-sagittarius","tags":["horoscope sagittarius"]},{"name":"mdi:zodiac-scorpio","tags":["horoscope scorpio"]},{"name":"mdi:zodiac-taurus","tags":["horoscope taurus"]},{"name":"mdi:zodiac-virgo","tags":["horoscope virgo"]}]
diff --git a/ui-ngx/src/karma.conf.js b/ui-ngx/src/karma.conf.js
deleted file mode 100644
index c805ae4b81..0000000000
--- a/ui-ngx/src/karma.conf.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function(config) {
-  config.set({
-    basePath: "",
-    frameworks: ["jasmine", "@angular-devkit/build-angular"],
-    plugins: [
-      require("karma-jasmine"),
-      require("karma-chrome-launcher"),
-      require("karma-jasmine-html-reporter"),
-      require("karma-coverage-istanbul-reporter"),
-      require("@angular-devkit/build-angular/plugins/karma"),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require("path").join(__dirname, "../coverage/tb-license-server"),
-      reports: ["html", "lcovonly", "text-summary"],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ["progress", "kjhtml"],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ["Chrome"],
-    singleRun: false,
-    restartOnFileChange: true,
-  });
-};
diff --git a/ui-ngx/src/main.ts b/ui-ngx/src/main.ts
index ed9283d1ca..2fdf60da0c 100644
--- a/ui-ngx/src/main.ts
+++ b/ui-ngx/src/main.ts
@@ -22,6 +22,11 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from '@app/app.module';
 import { environment } from '@env/environment';
 
+import $ from 'jquery';
+
+(window as any).jQuery = $;
+(window as any).$ = $;
+
 if (environment.production) {
   enableProdMode();
 }
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 969cb431e6..37068909e0 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -15,8 +15,8 @@
  */
 /* You can add global styles to this file, and also import other style files */
 
-@import '~typeface-roboto/index.css';
-@import '~font-awesome/css/font-awesome.min.css';
+@import 'typeface-roboto/index.css';
+@import 'font-awesome/css/font-awesome.min.css';
 @import 'theme.scss';
 @import './scss/constants';
 @import './scss/animations';
@@ -74,7 +74,7 @@ body {
   line-height: normal;
 }
 
-a:not(.mat-mdc-button-base) {
+a:not(.mat-mdc-button-base):not(.mdc-tab) {
   font-weight: 400;
   color: #106cc8;
   text-decoration: none;
@@ -85,7 +85,7 @@ a:not(.mat-mdc-button-base) {
 
 a:hover,
 a:focus {
-  &:not(.mat-mdc-button-base) {
+  &:not(.mat-mdc-button-base):not(.mdc-tab) {
     border-bottom: 1px solid #4054b2;
   }
 }
@@ -314,40 +314,6 @@ pre.tb-highlight {
   z-index: 0;
 }
 
-mat-label {
-  &.tb-title {
-    font-size: 13px;
-    font-weight: 400;
-    color: #666;
-    pointer-events: none;
-
-    &.no-padding {
-      padding-bottom: 0;
-    }
-
-    &.tb-required::after {
-      font-size: 13px;
-      color: rgba(0, 0, 0, .54);
-      vertical-align: top;
-      content: " *";
-    }
-
-    &.tb-error {
-      color: rgb(221, 44, 0);
-
-      &.tb-required::after {
-        color: rgb(221, 44, 0);
-      }
-    }
-  }
-}
-
-mat-icon {
-  &.tb-error {
-    color: rgb(221, 44, 0);
-  }
-}
-
 .tb-error-messages {
   height: 24px; //30px
   margin-top: -6px;
@@ -518,6 +484,40 @@ mat-icon {
     letter-spacing: .01em;
   }
 
+  mat-label {
+    &.tb-title {
+      font-size: 13px;
+      font-weight: 400;
+      color: #666;
+      pointer-events: none;
+
+      &.no-padding {
+        padding-bottom: 0;
+      }
+
+      &.tb-required::after {
+        font-size: 13px;
+        color: rgba(0, 0, 0, .54);
+        vertical-align: top;
+        content: " *";
+      }
+
+      &.tb-error {
+        color: rgb(221, 44, 0);
+
+        &.tb-required::after {
+          color: rgb(221, 44, 0);
+        }
+      }
+    }
+  }
+
+  mat-icon {
+    &.tb-error {
+      color: rgb(221, 44, 0);
+    }
+  }
+
   .mat-mdc-tooltip {
     white-space: pre-line;
   }
@@ -573,7 +573,7 @@ mat-icon {
 
   button.mat-mdc-menu-item {
     overflow: hidden;
-    .mdc-list-item__primary-text {
+    .mat-mdc-menu-item-text {
       flex: 1;
       .tb-alt-text {
         float: right;
@@ -705,6 +705,12 @@ mat-icon {
     table-layout: auto;
     border-collapse: separate;
     margin: 0;
+    .mat-mdc-header-row {
+      height: 56px;
+    }
+    .mat-mdc-footer-row, .mat-mdc-row {
+      height: 52px;
+    }
   }
 
   .tb-table-widget {
@@ -730,14 +736,6 @@ mat-icon {
     content: none;
   }
 
-  .mat-mdc-header-row {
-    height: 60px;
-  }
-
-  .mat-mdc-footer-row, .mat-mdc-row {
-    height: 52px;
-  }
-
   .mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row {
     min-height: auto;
   }
@@ -1049,6 +1047,9 @@ mat-icon {
         margin-bottom: 0;
         padding: 8px;
       }
+      .mdc-dialog__surface {
+        display: block;
+      }
     }
   }
 
@@ -1267,3 +1268,11 @@ mat-icon {
     white-space: nowrap;
   }
 }
+
+/***************
+ * TAILWIND CSS
+ ***************/
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/ui-ngx/src/test.ts b/ui-ngx/src/test.ts
deleted file mode 100644
index 5e40c578ba..0000000000
--- a/ui-ngx/src/test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-}
-);
diff --git a/ui-ngx/src/theme-overwrites.scss b/ui-ngx/src/theme-overwrites.scss
index bd3e0e7457..1f336b75f1 100644
--- a/ui-ngx/src/theme-overwrites.scss
+++ b/ui-ngx/src/theme-overwrites.scss
@@ -18,6 +18,7 @@
 @mixin theme-overwrites($primary, $config-or-theme) {
   @include _mat-form-field-overwrites($primary, $config-or-theme);
   @include _mat-button-overwrites($primary, $config-or-theme);
+  @include _mat-icon-overwrites();
 }
 
 @mixin _mat-form-field-overwrites($primary, $config-or-theme) {
@@ -31,7 +32,7 @@
         position: absolute;
         left: 0;
         top: 0;
-        background-color: mat.get-color-from-palette($primary);
+        background-color: mat.m2-get-color-from-palette($primary);
       }
       background-color: transparent;
     }
@@ -64,8 +65,14 @@
     .mat-mdc-outlined-button {
       --mdc-outlined-button-outline-color: inherit;
       &:not(:disabled) {
-        border-color: var(--mdc-outlined-button-outline-color, inherit);
+        border-color: inherit;
       }
     }
   }
 }
+
+@mixin _mat-icon-overwrites() {
+  .mat-icon, .mat-icon.mat-primary, .mat-icon.mat-accent, .mat-icon.mat-warn {
+    color: var(--mat-icon-color);
+  }
+}
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index d84082f783..70a877a441 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -54,20 +54,20 @@ $tb-mat-indigo: (
   )
 );
 
-$tb-primary: mat.define-palette($tb-mat-indigo);
-$tb-accent: mat.define-palette(mat.$deep-orange-palette);
+$tb-primary: mat.m2-define-palette($tb-mat-indigo);
+$tb-accent: mat.m2-define-palette(mat.$m2-deep-orange-palette);
 
-$background: (background: map_get(mat.$grey-palette, 200));
+$background: (background: map_get(mat.$m2-grey-palette, 200));
 
-$tb-theme-background: map_merge(mat.$light-theme-background-palette, $background);
+$tb-theme-background: map_merge(mat.$m2-light-theme-background-palette, $background);
 
-$tb-mat-theme: mat.define-light-theme((
+$tb-mat-theme: mat.m2-define-light-theme((
   color: (
     primary: $tb-primary,
     accent: $tb-accent
   ),
-  typography: mat.define-typography-config(
-    $button: mat.define-typography-level(14px, 36px, 500, $letter-spacing: 0.03125em)
+  typography: mat.m2-define-typography-config(
+    $button: mat.m2-define-typography-level(14px, 36px, 500, $letter-spacing: 0.03125em)
   ),
   density: 0
 ));
@@ -77,8 +77,8 @@ $color: map_merge($color, (background: $tb-theme-background));
 $tb-mat-theme: map_merge($tb-mat-theme, (color: $color));
 $tb-theme: map_merge($tb-mat-theme, $color);
 
-$primary: mat.get-color-from-palette($tb-primary);
-$accent: mat.get-color-from-palette($tb-accent);
+$primary: mat.m2-get-color-from-palette($tb-primary);
+$accent: mat.m2-get-color-from-palette($tb-accent);
 
 $tb-dark-mat-indigo: (
   50: #e8eaf6,
@@ -113,7 +113,7 @@ $tb-dark-mat-indigo: (
   )
 );
 
-$tb-dark-primary: mat.define-palette($tb-dark-mat-indigo);
+$tb-dark-primary: mat.m2-define-palette($tb-dark-mat-indigo);
 
 $tb-dark-theme-background: (
   status-bar: black,
@@ -130,15 +130,15 @@ $tb-dark-theme-background: (
   disabled-button-toggle: black,
   unselected-chip: map_get($tb-dark-mat-indigo, 700),
   disabled-list-option: black,
-  tooltip: map_get(mat.$grey-palette, 700),
+  tooltip: map_get(mat.$m2-grey-palette, 700),
 );
 
-$tb-dark-theme: mat.define-dark-theme((
+$tb-dark-theme: mat.m2-define-dark-theme((
   color: (
     primary: $tb-dark-primary,
     accent: $tb-accent
   ),
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
   density: 0
 ));
 
@@ -156,32 +156,32 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
 
   mat-fab-toolbar {
     .mat-fab-toolbar-background {
-      background: mat.get-color-from-palette($background, app-bar);
-      color: mat.get-color-from-palette($foreground, text);
+      background: mat.m2-get-color-from-palette($background, app-bar);
+      color: mat.m2-get-color-from-palette($foreground, text);
     }
     &.mat-primary {
       .mat-fab-toolbar-background {
-        background: mat.get-color-from-palette($primary);
-        color: mat.get-color-from-palette($primary, default-contrast);
+        background: mat.m2-get-color-from-palette($primary);
+        color: mat.m2-get-color-from-palette($primary, default-contrast);
       }
     }
     &.mat-accent {
       .mat-fab-toolbar-background {
-        background: mat.get-color-from-palette($accent);
-        color: mat.get-color-from-palette($accent, default-contrast);
+        background: mat.m2-get-color-from-palette($accent);
+        color: mat.m2-get-color-from-palette($accent, default-contrast);
       }
     }
     &.mat-warn {
       .mat-fab-toolbar-background {
-        background: mat.get-color-from-palette($warn);
-        color: mat.get-color-from-palette($warn, default-contrast);
+        background: mat.m2-get-color-from-palette($warn);
+        color: mat.m2-get-color-from-palette($warn, default-contrast);
       }
     }
   }
 }
 
 @mixin _mat-toolbar-inverse-color($palette) {
-  background: mat.get-color-from-palette($palette, default-contrast);
+  background: mat.m2-get-color-from-palette($palette, default-contrast);
   color: rgba(black, 0.87);
 }
 
@@ -194,8 +194,8 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
 
   mat-fab-toolbar {
     .mat-fab-toolbar-background {
-      background: mat.get-color-from-palette($background, app-bar);
-      color: mat.get-color-from-palette($foreground, text);
+      background: mat.m2-get-color-from-palette($background, app-bar);
+      color: mat.m2-get-color-from-palette($foreground, text);
     }
     &.mat-primary {
       .mat-fab-toolbar-background {
@@ -207,15 +207,15 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
         @include _mat-toolbar-inverse-color($primary);
         button.mat-mdc-icon-button {
           .mat-icon {
-            color: mat.get-color-from-palette($primary);
+            color: mat.m2-get-color-from-palette($primary);
           }
         }
       }
     }
     .mat-mdc-fab {
       &.mat-primary {
-        background: mat.get-color-from-palette($primary, default-contrast);
-        color: mat.get-color-from-palette($primary);
+        background: mat.m2-get-color-from-palette($primary, default-contrast);
+        color: mat.m2-get-color-from-palette($primary);
       }
     }
   }
@@ -228,7 +228,7 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
 
   mat-toolbar{
     &.mat-hue-3 {
-      background-color: mat.get-color-from-palette($primary, 'A100');
+      background-color: mat.m2-get-color-from-palette($primary, 'A100');
     }
   }
 
diff --git a/ui-ngx/src/theme/datepicker-theme.scss b/ui-ngx/src/theme/datepicker-theme.scss
index 554bca8b2a..f32de2165e 100644
--- a/ui-ngx/src/theme/datepicker-theme.scss
+++ b/ui-ngx/src/theme/datepicker-theme.scss
@@ -21,8 +21,8 @@ $mat-datetimepicker-selected-today-box-shadow-width: 1px;
 
   $primary: map-get($theme, primary);
 
-  $primary-color: mat.get-color-from-palette($primary);
-  $primary-contrast: mat.get-color-from-palette($primary, default-contrast);
+  $primary-color: mat.m2-get-color-from-palette($primary);
+  $primary-contrast: mat.m2-get-color-from-palette($primary, default-contrast);
 
   .mat-datetimepicker-calendar-header {
     background-color: $primary-color;
diff --git a/ui-ngx/src/tsconfig.app.json b/ui-ngx/src/tsconfig.app.json
index 84be0c97d7..7a029aa8c7 100644
--- a/ui-ngx/src/tsconfig.app.json
+++ b/ui-ngx/src/tsconfig.app.json
@@ -6,7 +6,9 @@
        "react", "react-dom", "raphael", "canvas-gauges", "systemjs"]
   },
   "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true
+    "fullTemplateTypeCheck": true,
+    "supportTestBed": true,
+    "supportJitMode": true
   },
   "files": [
     "main.ts",
diff --git a/ui-ngx/src/tsconfig.spec.json b/ui-ngx/src/tsconfig.spec.json
deleted file mode 100644
index de7733630e..0000000000
--- a/ui-ngx/src/tsconfig.spec.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
diff --git a/ui-ngx/src/tslint.json b/ui-ngx/src/tslint.json
deleted file mode 100644
index 839fcd0d77..0000000000
--- a/ui-ngx/src/tslint.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "extends": "../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "tb",
-      "kebab-case"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "tb",
-      "kebab-case"
-    ]
-  }
-}
diff --git a/ui-ngx/src/typings/rawloader.typings.d.ts b/ui-ngx/src/typings/rawloader.typings.d.ts
index 66b312befd..9bd5c14fb3 100644
--- a/ui-ngx/src/typings/rawloader.typings.d.ts
+++ b/ui-ngx/src/typings/rawloader.typings.d.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-declare module '!raw-loader!*' {
-  const contents: string;
-  export = contents;
+declare module '*.raw' {
+  const content: string;
+  export default content;
 }
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
new file mode 100644
index 0000000000..f459324348
--- /dev/null
+++ b/ui-ngx/tailwind.config.js
@@ -0,0 +1,181 @@
+/*
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  important: ".tb-default",
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    screens: {
+      'xs': {
+        max: '599px'
+      },
+      'sm': {
+        min: '600px',
+        max: '959px'
+      },
+      'md': {
+        min: '960px',
+        max: '1279px'
+      },
+      'md-lg': {
+        min: '960px',
+        max: '1819px'
+      },
+      'lg': {
+        min: '1280px',
+        max: '1919px'
+      },
+      'xl': {
+        min: '1920px',
+        max: '5000px'
+      },
+      'lt-sm': {
+        max: '599px'
+      },
+      'lt-md': {
+        max: '959px'
+      },
+      'lt-lg': {
+        max: '1279px'
+      },
+      'lt-xl': {
+        max: '1919px'
+      },
+      'gt-xs': {
+        min: '600px'
+      },
+      'gt-sm': {
+        min: '960px'
+      },
+      'gt-md': {
+        min: '1280px'
+      },
+      'gt-xmd': {
+        min: '1600px'
+      },
+      'gt-md-lg': {
+        min: '1820px'
+      },
+      'gt-lg': {
+        min: '1920px'
+      },
+      'gt-xl': {
+        min: '1920px'
+      }
+    },
+    extend: {
+      flexBasis: {
+        '7.5': '1.875rem',
+        '25': '6.25rem',
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
+      },
+      flex: {
+        full: '1 1 100%'
+      },
+      gap: {
+        '0.75': '0.1875rem',
+        '1.25': '0.3125rem',
+        '3.75': '0.9375rem',
+        '6.25': '1.5625rem'
+      },
+      minHeight: {
+        '19': '4.75rem'
+      },
+      minWidth: {
+        '7.5': '1.875rem',
+        '25': '6.25rem',
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
+      },
+      maxWidth: {
+        '5%': '5%',
+        '8%': '8%',
+        '10%': '10%',
+        '15%': '15%',
+        '17%': '17%',
+        '20%': '20%',
+        '23%': '23%',
+        '25%': '25%',
+        '26%': '26%',
+        '30%': '30%',
+        '33%': '33%',
+        '35%': '35%',
+        '37%': '37%',
+        '40%': '40%',
+        '45%': '45%',
+        '50%': '50%',
+        '55%': '55%',
+        '60%': '60%',
+        '65%': '65%',
+        '70%': '70%',
+        '75%': '75%',
+        '80%': '80%',
+        '85%': '85%',
+        '90%': '90%',
+        '92%': '92%',
+        '95%': '95%',
+        '100%': '100%',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/6': '16.666667%',
+        '2/6': '33.333333%',
+        '4/6': '66.666667%',
+        '5/6': '83.333333%',
+        '1/12': '8.333333%',
+        '2/12': '16.666667%',
+        '4/12': '33.333333%',
+        '5/12': '41.666667%',
+        '7/12': '58.333333%',
+        '8/12': '66.666667%',
+        '10/12': '83.333333%',
+        '11/12': '91.666667%',
+        '7.5': '1.875rem',
+        '25': '6.25rem',
+        '37.5': '9.375rem',
+        '62.5': '15.625rem',
+        '72.5': '18.125rem'
+      },
+      maxHeight: {
+        '20%': '20%',
+        '30%': '30%',
+        '50%': '50%',
+        '60%': '60%',
+        '70%': '70%',
+        '80%': '80%',
+        '100%': '100%'
+      }
+    },
+  },
+  safelist: [
+    'lt-md:gap-3',
+    'md:!hidden',
+    'gap-6',
+    'gap-7',
+    'gap-10',
+    'gt-md:justify-center'
+  ],
+  corePlugins: {
+    preflight: false
+  },
+  plugins: [],
+}
+
diff --git a/ui-ngx/tsconfig.json b/ui-ngx/tsconfig.json
index 1cc4567868..61712840f4 100644
--- a/ui-ngx/tsconfig.json
+++ b/ui-ngx/tsconfig.json
@@ -6,16 +6,16 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
+    "esModuleInterop": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
     "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
     "jsx": "react",
+    "resolveJsonModule": true,
     "typeRoots": [
       "node_modules/@types",
       "src/typings"
diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock
index cc6762eb57..28b7cb2bd0 100644
--- a/ui-ngx/yarn.lock
+++ b/ui-ngx/yarn.lock
@@ -2,20 +2,12 @@
 # yarn lockfile v1
 
 
-"@aashutoshrathi/word-wrap@^1.2.3":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
-  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
-
-"@ampproject/remapping@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
-  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.1.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
-"@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
+"@ampproject/remapping@2.3.0", "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
   integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
@@ -23,256 +15,290 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@angular-builders/custom-webpack@~15.0.0":
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/@angular-builders/custom-webpack/-/custom-webpack-15.0.0.tgz#bc05c5fdc1153ae2f48417f6529034282398940d"
-  integrity sha512-i8ZQ7rJ+RTy73MivvIdNAa8sZpiDy9wHBetAEyYSlGtjaSB3lntEFtBw9edfyRkpbifw53QA/N5haOwox987/Q==
+"@angular-builders/common@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@angular-builders/common/-/common-2.0.0.tgz#76920a63c50a84669c0a786b6281ae9fbf34560d"
+  integrity sha512-O5YJc++DtJVJhqA/OomRKN2jGYzvU/YXtfrPAqcA9Is3Ob5jvV0L0JHSAjSw/KaLvk/FjBIqoRVcYdLp5LKddA==
   dependencies:
-    "@angular-devkit/architect" ">=0.1500.0 < 0.1600.0"
-    "@angular-devkit/build-angular" "^15.0.0"
-    "@angular-devkit/core" "^15.0.0"
-    lodash "^4.17.15"
+    "@angular-devkit/core" "^18.0.0"
     ts-node "^10.0.0"
     tsconfig-paths "^4.1.0"
-    webpack-merge "^5.7.3"
-
-"@angular-devkit/architect@0.1502.10", "@angular-devkit/architect@>=0.1500.0 < 0.1600.0":
-  version "0.1502.10"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1502.10.tgz#4c25ba881635937d922b18e7959b38a476badc82"
-  integrity sha512-S8lN73WYCfpEpw1Q41ZcUinw7JfDeSM8LyGs797OVshnW75QcOkOecWj/3CKR23G44IgFrHN6sqtzWxKmMxLig==
-  dependencies:
-    "@angular-devkit/core" "15.2.10"
-    rxjs "6.6.7"
-
-"@angular-devkit/build-angular@^15.0.0", "@angular-devkit/build-angular@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-15.2.10.tgz#af4080a4811461bd1cab4f3b1b10edef53f31da8"
-  integrity sha512-3pCPVEJilVwHIJC6Su1/PIEqvFfU1Lxew9yItxX4s6dud8HY+fuKrsDnao4NNMFNqCLqL4el5QbSBKnnpWH1sg==
-  dependencies:
-    "@ampproject/remapping" "2.2.0"
-    "@angular-devkit/architect" "0.1502.10"
-    "@angular-devkit/build-webpack" "0.1502.10"
-    "@angular-devkit/core" "15.2.10"
-    "@babel/core" "7.20.12"
-    "@babel/generator" "7.20.14"
-    "@babel/helper-annotate-as-pure" "7.18.6"
-    "@babel/helper-split-export-declaration" "7.18.6"
-    "@babel/plugin-proposal-async-generator-functions" "7.20.7"
-    "@babel/plugin-transform-async-to-generator" "7.20.7"
-    "@babel/plugin-transform-runtime" "7.19.6"
-    "@babel/preset-env" "7.20.2"
-    "@babel/runtime" "7.20.13"
-    "@babel/template" "7.20.7"
-    "@discoveryjs/json-ext" "0.5.7"
-    "@ngtools/webpack" "15.2.10"
+
+"@angular-builders/custom-esbuild@18.0.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@angular-builders/custom-esbuild/-/custom-esbuild-18.0.0.tgz#7da11ce47cfa0bbab1e5e07a9bdefb8a6afe8ed8"
+  integrity sha512-SdAGatJMJJjPYrdkUupdRazid3xe1sIj/CAHDdDVP094vZ9CrZs6fgcsOF17waAo6uMxrQCWmPDrTjNgR3CvMQ==
+  dependencies:
+    "@angular-builders/common" "2.0.0"
+    "@angular-devkit/architect" ">=0.1800.0 < 0.1900.0"
+    "@angular-devkit/build-angular" "^18.0.0"
+    "@angular-devkit/core" "^18.0.0"
+
+"@angular-devkit/architect@0.1802.10", "@angular-devkit/architect@>=0.1800.0 < 0.1900.0":
+  version "0.1802.10"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1802.10.tgz#1ae877263261e33a86fb3a047c3741ab09a9c599"
+  integrity sha512-/xudcHK2s4J/GcL6qyobmGaWMHQcYLSMqCaWMT+nK6I6tu9VEAj/p3R83Tzx8B/eKi31Pz499uHw9pmqdtbafg==
+  dependencies:
+    "@angular-devkit/core" "18.2.10"
+    rxjs "7.8.1"
+
+"@angular-devkit/build-angular@18.2.10", "@angular-devkit/build-angular@^18.0.0":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-18.2.10.tgz#7eab5b31856f8d3ce02e89771e3966328d13268f"
+  integrity sha512-47XgJ5fdIqlZUFWAo/XtNsh3y597DtLZWvfsnwShw6/TgyiV0rbL1Z24Rn2TCV1D/b3VhLutAIIZ/i5O5BirxQ==
+  dependencies:
+    "@ampproject/remapping" "2.3.0"
+    "@angular-devkit/architect" "0.1802.10"
+    "@angular-devkit/build-webpack" "0.1802.10"
+    "@angular-devkit/core" "18.2.10"
+    "@angular/build" "18.2.10"
+    "@babel/core" "7.25.2"
+    "@babel/generator" "7.25.0"
+    "@babel/helper-annotate-as-pure" "7.24.7"
+    "@babel/helper-split-export-declaration" "7.24.7"
+    "@babel/plugin-transform-async-generator-functions" "7.25.0"
+    "@babel/plugin-transform-async-to-generator" "7.24.7"
+    "@babel/plugin-transform-runtime" "7.24.7"
+    "@babel/preset-env" "7.25.3"
+    "@babel/runtime" "7.25.0"
+    "@discoveryjs/json-ext" "0.6.1"
+    "@ngtools/webpack" "18.2.10"
+    "@vitejs/plugin-basic-ssl" "1.1.0"
     ansi-colors "4.1.3"
-    autoprefixer "10.4.13"
-    babel-loader "9.1.2"
-    babel-plugin-istanbul "6.1.1"
-    browserslist "4.21.5"
-    cacache "17.0.4"
-    chokidar "3.5.3"
-    copy-webpack-plugin "11.0.0"
-    critters "0.0.16"
-    css-loader "6.7.3"
-    esbuild-wasm "0.17.8"
-    glob "8.1.0"
-    https-proxy-agent "5.0.1"
-    inquirer "8.2.4"
-    jsonc-parser "3.2.0"
+    autoprefixer "10.4.20"
+    babel-loader "9.1.3"
+    browserslist "^4.21.5"
+    copy-webpack-plugin "12.0.2"
+    critters "0.0.24"
+    css-loader "7.1.2"
+    esbuild-wasm "0.23.0"
+    fast-glob "3.3.2"
+    http-proxy-middleware "3.0.3"
+    https-proxy-agent "7.0.5"
+    istanbul-lib-instrument "6.0.3"
+    jsonc-parser "3.3.1"
     karma-source-map-support "1.4.0"
-    less "4.1.3"
-    less-loader "11.1.0"
+    less "4.2.0"
+    less-loader "12.2.0"
     license-webpack-plugin "4.0.2"
-    loader-utils "3.2.1"
-    magic-string "0.29.0"
-    mini-css-extract-plugin "2.7.2"
-    open "8.4.1"
+    loader-utils "3.3.1"
+    magic-string "0.30.11"
+    mini-css-extract-plugin "2.9.0"
+    mrmime "2.0.0"
+    open "10.1.0"
     ora "5.4.1"
     parse5-html-rewriting-stream "7.0.0"
-    piscina "3.2.0"
-    postcss "8.4.31"
-    postcss-loader "7.0.2"
+    picomatch "4.0.2"
+    piscina "4.6.1"
+    postcss "8.4.41"
+    postcss-loader "8.1.1"
     resolve-url-loader "5.0.0"
-    rxjs "6.6.7"
-    sass "1.58.1"
-    sass-loader "13.2.0"
-    semver "7.5.3"
-    source-map-loader "4.0.1"
+    rxjs "7.8.1"
+    sass "1.77.6"
+    sass-loader "16.0.0"
+    semver "7.6.3"
+    source-map-loader "5.0.0"
     source-map-support "0.5.21"
-    terser "5.16.3"
-    text-table "0.2.0"
+    terser "5.31.6"
     tree-kill "1.2.2"
-    tslib "2.5.0"
-    webpack "5.76.1"
-    webpack-dev-middleware "6.0.1"
-    webpack-dev-server "4.11.1"
-    webpack-merge "5.8.0"
+    tslib "2.6.3"
+    vite "5.4.6"
+    watchpack "2.4.1"
+    webpack "5.94.0"
+    webpack-dev-middleware "7.4.2"
+    webpack-dev-server "5.0.4"
+    webpack-merge "6.0.1"
     webpack-subresource-integrity "5.1.0"
   optionalDependencies:
-    esbuild "0.17.8"
-
-"@angular-devkit/build-webpack@0.1502.10":
-  version "0.1502.10"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1502.10.tgz#665dfa76a0c6548821fa372356e2c9b55e8eebac"
-  integrity sha512-55b9WZIGU4DNgiIV2lkkN6iQxJrgWY5CDaNu0kJC/qazotJgBbcN/8jgBx2DD8HNE1V3iXxWk66pt1h946Po+Q==
-  dependencies:
-    "@angular-devkit/architect" "0.1502.10"
-    rxjs "6.6.7"
-
-"@angular-devkit/core@15.2.10", "@angular-devkit/core@^15.0.0":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-15.2.10.tgz#e2c1fadaaa87ae62b3f3c752fa6fafc31197151b"
-  integrity sha512-bFPm7wjvfBds9km2rCJxUhzkqe4h3h/199yJtzC1bNvwRr2LMHvtyoQAzftda+gs7Ulqac5wzUEZX/cVV3WrsA==
-  dependencies:
-    ajv "8.12.0"
-    ajv-formats "2.1.1"
-    jsonc-parser "3.2.0"
-    rxjs "6.6.7"
+    esbuild "0.23.0"
+
+"@angular-devkit/build-webpack@0.1802.10":
+  version "0.1802.10"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1802.10.tgz#cf55fd2bee8a7d86b91bfeb0c8af9c22957c6727"
+  integrity sha512-WRftK/RJ9rBDDmkx5IAtIpyNo0DJiMfgGUTuZNpNUaJfSfGeaSZYgC7o1++axMchID8pncmI3Hr8L8gaP94WQg==
+  dependencies:
+    "@angular-devkit/architect" "0.1802.10"
+    rxjs "7.8.1"
+
+"@angular-devkit/core@18.2.10", "@angular-devkit/core@^18.0.0":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-18.2.10.tgz#7565f0c7bf0fa3318d08c4a696e890ab0b670032"
+  integrity sha512-LFqiNdraBujg8e1lhuB0bkFVAoIbVbeXXwfoeROKH60OPbP8tHdgV6sFTqU7UGBKA+b+bYye70KFTG2Ys8QzKQ==
+  dependencies:
+    ajv "8.17.1"
+    ajv-formats "3.0.1"
+    jsonc-parser "3.3.1"
+    picomatch "4.0.2"
+    rxjs "7.8.1"
     source-map "0.7.4"
 
-"@angular-devkit/schematics@15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-15.2.10.tgz#72ea6ac84082995221781bcb72df3143b4ffddc3"
-  integrity sha512-EeoDs4oKFpLZNa21G/8dqBdclEc4U2piI9EeXCVTaN6z5DYXIZ0G1WtCXU8nhD+GckS47rmfZ4/3lMaXAvED+g==
+"@angular-devkit/schematics@18.2.10":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-18.2.10.tgz#2ca7dde6f8c9062c3ef8254a12edeffdd180272e"
+  integrity sha512-EIm/yCYg3ZYPsPYJxXRX5F6PofJCbNQ5rZEuQEY09vy+ZRTqGezH0qoUP5WxlYeJrjiRLYqADI9WtVNzDyaD4w==
   dependencies:
-    "@angular-devkit/core" "15.2.10"
-    jsonc-parser "3.2.0"
-    magic-string "0.29.0"
+    "@angular-devkit/core" "18.2.10"
+    jsonc-parser "3.3.1"
+    magic-string "0.30.11"
     ora "5.4.1"
-    rxjs "6.6.7"
-
-"@angular-eslint/builder@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/builder/-/builder-15.2.1.tgz#ce8c65e3b671897db75ad90b41ef4cd6efe626f0"
-  integrity sha512-7x2DANebLRl997Mj4DhZrnz5+vnSjavGGveJ0mBuU7CEsL0ZYLftdRqL0e0HtU3ksseS7xpchD6OM08nkNgySw==
-
-"@angular-eslint/bundled-angular-compiler@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-15.2.1.tgz#7c77a4a19942868d844372b5b3b562c0d630de1e"
-  integrity sha512-LO7Am8eVCr7oh6a0VmKSL7K03CnQEQhFO7Wt/YtbfYOxVjrbwmYLwJn+wZPOT7A02t/BttOD/WXuDrOWtSMQ/Q==
-
-"@angular-eslint/eslint-plugin-template@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-15.2.1.tgz#af39f66e9d971d7f7635add9cf1a396f1766fd64"
-  integrity sha512-IeiSLk6YxapFdH2z5o/O3R7VwtBd2T6fWmhLFPwDYMDknrwegnOjwswCdBplOccpUp0wqlCeGUx7LTsuzwaz7w==
-  dependencies:
-    "@angular-eslint/bundled-angular-compiler" "15.2.1"
-    "@angular-eslint/utils" "15.2.1"
-    "@typescript-eslint/type-utils" "5.48.2"
-    "@typescript-eslint/utils" "5.48.2"
-    aria-query "5.1.3"
-    axobject-query "3.1.1"
-
-"@angular-eslint/eslint-plugin@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin/-/eslint-plugin-15.2.1.tgz#616e7aa1f3aea6203e887c20749b87d08bb95d3e"
-  integrity sha512-OM7b1kS4E4CkXjkaWN+lEzawh4VxY6l7FO1Cuk4s7iv3/YpZG3rJxIZBqnFLTixwrBuqw8y4FNBzF3eDgmFAUw==
-  dependencies:
-    "@angular-eslint/utils" "15.2.1"
-    "@typescript-eslint/utils" "5.48.2"
-
-"@angular-eslint/schematics@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/schematics/-/schematics-15.2.1.tgz#f562e1b8b0824ade1cfdc5bbabab26c50510a7f1"
-  integrity sha512-0ZfBCejHWIcgy3J5kFs9sS/jqi8i5AptxggOwFySOlCLJ+CzNrktjD4jff1Zy8K/VLzY0Ci0BSZXvgWfP0k9Rg==
-  dependencies:
-    "@angular-eslint/eslint-plugin" "15.2.1"
-    "@angular-eslint/eslint-plugin-template" "15.2.1"
-    ignore "5.2.4"
+    rxjs "7.8.1"
+
+"@angular-eslint/builder@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/builder/-/builder-18.3.1.tgz#d883c3dabd1b377fd7c48380b6a7f24fdd0e6881"
+  integrity sha512-cPc7Ye9zDs5M4i+feL6vob+mh7yX5vxvOS5KQIhneUrp5e9D+IGuNFMmBLlOPpmklSc9XJBtuvI5Zjuh4z1ETw==
+
+"@angular-eslint/bundled-angular-compiler@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-18.3.1.tgz#c135fd63cd845889008e3dddda97cb9e86321b7b"
+  integrity sha512-sikmkjfsXPpPTku1aQkQ1MNNEKGBgGGRvUN/WeNS9dhCJ4dxU3O7dZctt1aQWj+W3nbuUtDiimAWF5fZHGFE2Q==
+
+"@angular-eslint/eslint-plugin-template@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-18.3.1.tgz#87c62e2e1f690020a818ee6a5db68ec6ba13fd5b"
+  integrity sha512-hBJ3+f7VSidvrtYaXH7Vp0sWvblA9jLK2c6uQzhYGWdEDUcTg7g7VI9ThW39WvMbHqkyzNE4PPOynK69cBEDGg==
+  dependencies:
+    "@angular-eslint/bundled-angular-compiler" "18.3.1"
+    "@angular-eslint/utils" "18.3.1"
+    aria-query "5.3.0"
+    axobject-query "4.1.0"
+
+"@angular-eslint/eslint-plugin@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin/-/eslint-plugin-18.3.1.tgz#eca937e08c25d45a46ebf7b11ab99ad5ac9548eb"
+  integrity sha512-MP4Nm+SHboF8KdnN0KpPEGAaTTzDLPm3+S/4W3Mg8onqWCyadyd4mActh9mK/pvCj8TVlb/SW1zeTtdMYhwonw==
+  dependencies:
+    "@angular-eslint/bundled-angular-compiler" "18.3.1"
+    "@angular-eslint/utils" "18.3.1"
+
+"@angular-eslint/schematics@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/schematics/-/schematics-18.3.1.tgz#8126bc8dff65543c27a4cffd6e6726a8148ea468"
+  integrity sha512-BTsQHDu7LjvXannJTb5BqMPCFIHRNN94eRyb60VfjJxB/ZFtsbAQDFFOi5lEZsRsd4mBeUMuL9mW4IMcPtUQ9Q==
+  dependencies:
+    "@angular-eslint/eslint-plugin" "18.3.1"
+    "@angular-eslint/eslint-plugin-template" "18.3.1"
+    ignore "5.3.2"
+    semver "7.6.3"
     strip-json-comments "3.1.1"
-    tmp "0.2.1"
 
-"@angular-eslint/template-parser@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/template-parser/-/template-parser-15.2.1.tgz#dbe4978afdcea81b9d5cac3d672c20de5821dc54"
-  integrity sha512-ViCi79gC2aKJecmYLkOT+QlT5WMRNXeYz0Dr9Pr8qXzIbY0oAWE7nOT5jkXwQ9oUk+ybtGCWHma5JVJWVJsIog==
+"@angular-eslint/template-parser@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/template-parser/-/template-parser-18.3.1.tgz#695d8f75c6d653b93a396b35ab35e380d3936245"
+  integrity sha512-JUUkfWH1G+u/Uk85ZYvJSt/qwN/Ko+jlXFtzBEcknJZsTWTwBcp36v77gPZe5FmKSziJZpyPUd+7Kiy6tuSCTw==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "15.2.1"
-    eslint-scope "^7.0.0"
+    "@angular-eslint/bundled-angular-compiler" "18.3.1"
+    eslint-scope "^8.0.2"
 
-"@angular-eslint/utils@15.2.1":
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/utils/-/utils-15.2.1.tgz#b286fddb1b8b43d96b91009237da7f74d9e64dda"
-  integrity sha512-++FneAJHxJqcSu0igVN6uOkSoHxlzgLoMBswuovYJy3UKwm33/T6WFku8++753Ca/JucIoR1gdUfO7SoSspMDg==
+"@angular-eslint/utils@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/utils/-/utils-18.3.1.tgz#475df68e8ffff6137d452d1aca7f097798514452"
+  integrity sha512-sd9niZI7h9H2FQ7OLiQsLFBhjhRQTASh+Q0+4+hyjv9idbSHBJli8Gsi2fqj9zhtMKpAZFTrWzuLUpubJ9UYbA==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "15.2.1"
-    "@typescript-eslint/utils" "5.48.2"
+    "@angular-eslint/bundled-angular-compiler" "18.3.1"
 
-"@angular/animations@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-15.2.10.tgz#c9194ba9a2b9b4e466e9c76e18591cde096a28e8"
-  integrity sha512-yxfN8qQpMaukRU5LjFkJBmy85rqrOp86tYVCsf+hmPEFRiXBMUj6xYLeCMcpk3Mt1JtnWGBR34ivGx+7bNeAow==
+"@angular/animations@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-18.2.6.tgz#7e95432792c1282cf76a2c81df1ab03d76b5b747"
+  integrity sha512-vy9wy+Q9beiRxkEO8wNxFQ63AqAujGvk8AUHepxxIT7QNNc512TNKz8uH+feWDPO38Dm2obwYQHMGzs3WO7pUA==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/cdk@^15.2.9":
-  version "15.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-15.2.9.tgz#e22df07b296fec6dccf66d569c3acc3c504c2058"
-  integrity sha512-koaM07N1AIQ5oHU27l0/FoQSSoYAwlAYwVZ4Di3bYrJsTBNCN2Xsby7wI8gZxdepMnV4Fe9si382BDBov+oO4Q==
+"@angular/build@18.2.10":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@angular/build/-/build-18.2.10.tgz#98eb7f1ced225483693280964482e617eba3eb1b"
+  integrity sha512-YFBKvAyC5sH17yRYcx7VHCtJ4KUg7xCjCQ4Pe16kiTvW6vuYsgU6Btyti0Qgewd7XaWpTM8hk8N6hE4Z0hpflw==
+  dependencies:
+    "@ampproject/remapping" "2.3.0"
+    "@angular-devkit/architect" "0.1802.10"
+    "@babel/core" "7.25.2"
+    "@babel/helper-annotate-as-pure" "7.24.7"
+    "@babel/helper-split-export-declaration" "7.24.7"
+    "@babel/plugin-syntax-import-attributes" "7.24.7"
+    "@inquirer/confirm" "3.1.22"
+    "@vitejs/plugin-basic-ssl" "1.1.0"
+    browserslist "^4.23.0"
+    critters "0.0.24"
+    esbuild "0.23.0"
+    fast-glob "3.3.2"
+    https-proxy-agent "7.0.5"
+    listr2 "8.2.4"
+    lmdb "3.0.13"
+    magic-string "0.30.11"
+    mrmime "2.0.0"
+    parse5-html-rewriting-stream "7.0.0"
+    picomatch "4.0.2"
+    piscina "4.6.1"
+    rollup "4.22.4"
+    sass "1.77.6"
+    semver "7.6.3"
+    vite "5.4.6"
+    watchpack "2.4.1"
+
+"@angular/cdk@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-18.2.6.tgz#159bd04ffabbe970eaa5dcd758163ed382c04975"
+  integrity sha512-Gfq/iv4zhlKYpdQkDaBRwxI71NHNUHM1Cs1XhnZ0/oFct5HXvSv1RHRGTKqBJLLACaAPzZKXJ/UglLoyO5CNiQ==
   dependencies:
     tslib "^2.3.0"
   optionalDependencies:
     parse5 "^7.1.2"
 
-"@angular/cli@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-15.2.10.tgz#4035a64510e11894be2ff695e48ee0ef6badb494"
-  integrity sha512-/TSnm/ZQML6A4lvunyN2tjTB5utuvk3d1Pnfyehp/FXtV6YfZm6+EZrOpKkKPCxTuAgW6c9KK4yQtt3RuNVpwQ==
-  dependencies:
-    "@angular-devkit/architect" "0.1502.10"
-    "@angular-devkit/core" "15.2.10"
-    "@angular-devkit/schematics" "15.2.10"
-    "@schematics/angular" "15.2.10"
+"@angular/cli@18.2.10":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-18.2.10.tgz#29ab1344bb496122b2689ebbb862f2b44fb31848"
+  integrity sha512-qW/F3XVZMzzenFzbn+7FGpw8GOt9qW8UxBtYya7gUNdWlcsgGUk+ZaGC2OLbfI5gX6pchW4TOPMsDSMeaCEI2Q==
+  dependencies:
+    "@angular-devkit/architect" "0.1802.10"
+    "@angular-devkit/core" "18.2.10"
+    "@angular-devkit/schematics" "18.2.10"
+    "@inquirer/prompts" "5.3.8"
+    "@listr2/prompt-adapter-inquirer" "2.0.15"
+    "@schematics/angular" "18.2.10"
     "@yarnpkg/lockfile" "1.1.0"
-    ansi-colors "4.1.3"
-    ini "3.0.1"
-    inquirer "8.2.4"
-    jsonc-parser "3.2.0"
-    npm-package-arg "10.1.0"
-    npm-pick-manifest "8.0.1"
-    open "8.4.1"
-    ora "5.4.1"
-    pacote "15.1.0"
-    resolve "1.22.1"
-    semver "7.5.3"
+    ini "4.1.3"
+    jsonc-parser "3.3.1"
+    listr2 "8.2.4"
+    npm-package-arg "11.0.3"
+    npm-pick-manifest "9.1.0"
+    pacote "18.0.6"
+    resolve "1.22.8"
+    semver "7.6.3"
     symbol-observable "4.0.0"
-    yargs "17.6.2"
+    yargs "17.7.2"
 
-"@angular/common@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-15.2.10.tgz#897923023c8ca4a361ce218bdee9a3f09060df75"
-  integrity sha512-jdBn3fctkqoNrJn9VLsUHpcCEhCxWSczdsR+BBbD6T0oLl6vMrAVNjPwfBejnlgfWN1KoRU9kgOYsMxa5apIWQ==
+"@angular/common@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-18.2.6.tgz#f5b57bf0e9b66a5b25526877d193227a53cad539"
+  integrity sha512-89793ow+wrI1c7C6kyMbnweLNIZHzXthosxAEjipRZGBrqBYjvTtkE45Fl+5yBa3JO7bAhyGkUnEoyvWtZIAEA==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/compiler-cli@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-15.2.10.tgz#e51013aa0f3da303fc74f8e1948c550d8e74ead5"
-  integrity sha512-mCFIxrs60XicKfA2o42hA7LrQvhybi9BQveWuZn/2iIEOXx7R62Iemz8E21pLWftAZHGxEW3NECfBrY1d3gVmA==
+"@angular/compiler-cli@18.2.9":
+  version "18.2.9"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-18.2.9.tgz#637f40e0fbb210ccd8d4ff464ddb6628ffa0fc46"
+  integrity sha512-4iMoRvyMmq/fdI/4Gob9HKjL/jvTlCjbS4kouAYHuGO9w9dmUhi1pY1z+mALtCEl9/Q8CzU2W8e5cU2xtV4nVg==
   dependencies:
-    "@babel/core" "7.19.3"
+    "@babel/core" "7.25.2"
     "@jridgewell/sourcemap-codec" "^1.4.14"
-    chokidar "^3.0.0"
+    chokidar "^4.0.0"
     convert-source-map "^1.5.1"
-    dependency-graph "^0.11.0"
-    magic-string "^0.27.0"
-    reflect-metadata "^0.1.2"
+    reflect-metadata "^0.2.0"
     semver "^7.0.0"
     tslib "^2.3.0"
     yargs "^17.2.1"
 
-"@angular/compiler@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-15.2.10.tgz#bd78f327d12eb5978f9dd05440aa23d4b5b925a9"
-  integrity sha512-M0XkeU0O73UlJZwDvOyp8/apetz9UKj78eTFDseMYJDLcxe6MpkbkxqpsGZnKYDj7LIep8PmCAKEkhtenE82zw==
+"@angular/compiler@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-18.2.6.tgz#e0c847b1f4d5e4e1d6bbaee471246a8d2e6a656b"
+  integrity sha512-3tX2/Qw+bZ8XzKitviH8jzNGyY0uohhehhBB57OJOCc+yr4ojy/7SYFnun1lSsRnDztdCE461641X4iQLCQ94w==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/core@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-15.2.10.tgz#93c1e0d460d21711654c578d2709a402e1822023"
-  integrity sha512-meGGidnitQJGDxYd9/LrqYiVlId+vGaLoiLgJdKBz+o2ZO6OmXQGuNw2VBqf17/Cc0/UjzrOY7+kILNFKkk/WQ==
+"@angular/core@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-18.2.6.tgz#d6d251fae36684ce49759e41e6456c6996271f4a"
+  integrity sha512-PjFad2j4YBwLVTw+0Te8CJCa/tV0W8caTHG8aOjj3ObdL6ihGI+FKnwerLc9RVzDFd14BOO4C6/+LbOQAh3Ltw==
   dependencies:
     tslib "^2.3.0"
 
@@ -283,562 +309,378 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/forms@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-15.2.10.tgz#09308e887df2fa4d349300c9d1f05cadfb3872b3"
-  integrity sha512-NIntGsNcN6o8L1txsbWXOf6f3K/CUBizdKsxsYVYGJIXEW5qU6UnWmfAZffNNXsT/XvbgUCjgDwT0cAwcqZPuQ==
+"@angular/forms@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-18.2.6.tgz#39dff9354a7228e30e220c1d5a147abd4a881f53"
+  integrity sha512-quGkUqTxlBaLB8C/RnpfFG57fdmNF5RQ+368N89Ma++2lpIsVAHaGZZn4yOyo3wNYaM2jBxNqaYxOzZNUl5Tig==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/language-service@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-15.2.10.tgz#829a802aaf40bfab21d71463023a3b517500ffa9"
-  integrity sha512-G0g0teF4pBqLTgfyLcoBl55g91sCZvBK+V4VgTD/hXGpXyMNlNpOsgECSMliGQoJlsRLEugFsSlBNqy7CRoBtw==
-
-"@angular/material@^15.2.9":
-  version "15.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-15.2.9.tgz#d49f18660053bf9eae008e4738ebc65334a28491"
-  integrity sha512-emuFF/7+91Jq+6kVCl3FiVoFLtAZoh+woFQWNuK8nhx0HmD4ckLFI8d9a6ERYR3zRuKhq5deSRE2kYsfpjrrsQ==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/auto-init" "15.0.0-canary.684e33d25.0"
-    "@material/banner" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/button" "15.0.0-canary.684e33d25.0"
-    "@material/card" "15.0.0-canary.684e33d25.0"
-    "@material/checkbox" "15.0.0-canary.684e33d25.0"
-    "@material/chips" "15.0.0-canary.684e33d25.0"
-    "@material/circular-progress" "15.0.0-canary.684e33d25.0"
-    "@material/data-table" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dialog" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/drawer" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/fab" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/floating-label" "15.0.0-canary.684e33d25.0"
-    "@material/form-field" "15.0.0-canary.684e33d25.0"
-    "@material/icon-button" "15.0.0-canary.684e33d25.0"
-    "@material/image-list" "15.0.0-canary.684e33d25.0"
-    "@material/layout-grid" "15.0.0-canary.684e33d25.0"
-    "@material/line-ripple" "15.0.0-canary.684e33d25.0"
-    "@material/linear-progress" "15.0.0-canary.684e33d25.0"
-    "@material/list" "15.0.0-canary.684e33d25.0"
-    "@material/menu" "15.0.0-canary.684e33d25.0"
-    "@material/menu-surface" "15.0.0-canary.684e33d25.0"
-    "@material/notched-outline" "15.0.0-canary.684e33d25.0"
-    "@material/radio" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/segmented-button" "15.0.0-canary.684e33d25.0"
-    "@material/select" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/slider" "15.0.0-canary.684e33d25.0"
-    "@material/snackbar" "15.0.0-canary.684e33d25.0"
-    "@material/switch" "15.0.0-canary.684e33d25.0"
-    "@material/tab" "15.0.0-canary.684e33d25.0"
-    "@material/tab-bar" "15.0.0-canary.684e33d25.0"
-    "@material/tab-indicator" "15.0.0-canary.684e33d25.0"
-    "@material/tab-scroller" "15.0.0-canary.684e33d25.0"
-    "@material/textfield" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tooltip" "15.0.0-canary.684e33d25.0"
-    "@material/top-app-bar" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
+"@angular/language-service@18.2.9":
+  version "18.2.9"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-18.2.9.tgz#f24f5e7e53036f6c9c4968113a3ea9ea827048f7"
+  integrity sha512-vC9la5VpvfX27ept36rlc42nGxDak7YfbWtSoZUageyZJUWyIEAvW8rNNPEvoO86RLi011/HmyyIr2GSQLKvxA==
+
+"@angular/material@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-18.2.6.tgz#bbecf3e6f08af7acc35ab78986c49b2e875ecbab"
+  integrity sha512-ObxC/vomSb9QF3vIztuiInQzws+D6u09Dhfx6uNFjtyICqxEFpF7+Qx7QVDWrsuXOgxZTKgacK8f46iV8hWUfg==
+  dependencies:
     tslib "^2.3.0"
 
-"@angular/platform-browser-dynamic@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-15.2.10.tgz#cc9ad3dcded6cb945ee8c4eef14db081dc6c3dfd"
-  integrity sha512-JHP6W+FX715Qv7DhqvfZLuBZXSDJrboiQsR06gUAgDSjAUyhbqmpVg/2YOtgeWpPkzNDtXdPU2PhcRdIv5J3Yg==
+"@angular/platform-browser-dynamic@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-18.2.6.tgz#1064a446588ce4887fa76efe4b5be75f0d1b70fe"
+  integrity sha512-kGBU3FNc+DF9r33hwHZqiWoZgQbCDdEIucU0NCLCIg0Hw6/Q9Hr2ndjxQI+WynCPg0JeBn34jpouvpeJer3YDQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/platform-browser@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-15.2.10.tgz#ca5a904b4da9e0cf719414db89514ee4221cb93d"
-  integrity sha512-9tbgVGSJqwfrOzT8aA/kWBLNhJSQ9gUg0CJxwFBSJm8VkBUJrszoBlDsnSvlxx8/W2ejNULKHFTXeUzq0O/+RQ==
+"@angular/platform-browser@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-18.2.6.tgz#c6b7497e82f481ece1b6e54db633d16a8099572d"
+  integrity sha512-RA8UMiYNLga+QMwpKcDw1357gYPfPyY/rmLeezMak//BbsENFYQOJ4Z6DBOBNiPlHxmBsUJMGaKdlpQhfCROyQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/router@^15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-15.2.10.tgz#a5d32d769b930e905582ed6c7aa8122e63655738"
-  integrity sha512-LmuqEg0iIXSw7bli6HKJ19cbxP91v37GtRwbGKswyLihqzTgvjBYpvcfMnB5FRQ5LWkTwq5JclkX03dZw290Yg==
+"@angular/router@18.2.6":
+  version "18.2.6"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-18.2.6.tgz#3762c8aa28a2c265f337d92da1c40d00a8587d7c"
+  integrity sha512-t57Sqja8unHhZlPr+4CWnQacuox2M4p2pMHps+31wt337qH6mKf4jqDmK0dE/MFdRyKjT2a2E/2NwtxXxcWNuw==
   dependencies:
     tslib "^2.3.0"
 
-"@assemblyscript/loader@^0.10.1":
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/@assemblyscript/loader/-/loader-0.10.1.tgz#70e45678f06c72fa2e350e8553ec4a4d72b92e06"
-  integrity sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==
+"@antfu/install-pkg@^0.4.0":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@antfu/install-pkg/-/install-pkg-0.4.1.tgz#d1d7f3be96ecdb41581629cafe8626d1748c0cf1"
+  integrity sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==
+  dependencies:
+    package-manager-detector "^0.2.0"
+    tinyexec "^0.3.0"
+
+"@antfu/utils@^0.7.10":
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.10.tgz#ae829f170158e297a9b6a28f161a8e487d00814d"
+  integrity sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
 
-"@auth0/angular-jwt@^5.1.2":
+"@auth0/angular-jwt@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@auth0/angular-jwt/-/angular-jwt-5.2.0.tgz#3a734be51f7f4b1bb85ac2535e987b7e6e706481"
   integrity sha512-9FS2L0QwGNlxA/zgeehCcsR9CZscouyXkoIj1fODM36A8BLfdzg9k9DWAXUQ2Drjk0AypGAFzeNZR4vsLMhdeQ==
   dependencies:
     tslib "^2.0.0"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.23.5":
-  version "7.23.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
-  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.24.7", "@babel/code-frame@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.25.7.tgz#438f2c524071531d643c6f0188e1e28f130cebc7"
+  integrity sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==
   dependencies:
-    "@babel/highlight" "^7.23.4"
-    chalk "^2.4.2"
+    "@babel/highlight" "^7.25.7"
+    picocolors "^1.0.0"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.23.5":
-  version "7.23.5"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
-  integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
-
-"@babel/core@7.19.3":
-  version "7.19.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.3.tgz#2519f62a51458f43b682d61583c3810e7dcee64c"
-  integrity sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==
-  dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.3"
-    "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-module-transforms" "^7.19.0"
-    "@babel/helpers" "^7.19.0"
-    "@babel/parser" "^7.19.3"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.3"
-    "@babel/types" "^7.19.3"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.1"
-    semver "^6.3.0"
-
-"@babel/core@7.20.12":
-  version "7.20.12"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
-  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
-  dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helpers" "^7.20.7"
-    "@babel/parser" "^7.20.7"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.12"
-    "@babel/types" "^7.20.7"
-    convert-source-map "^1.7.0"
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.2", "@babel/compat-data@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.7.tgz#b8479fe0018ef0ac87b6b7a5c6916fcd67ae2c9c"
+  integrity sha512-9ickoLz+hcXCeh7jrcin+/SLWm+GkxE2kTvoYyp38p4WkdFXfQJxDFGWp/YHjiKLPx06z2A7W8XKuqbReXDzsw==
+
+"@babel/core@7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
+  integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.0"
+    "@babel/helper-compilation-targets" "^7.25.2"
+    "@babel/helper-module-transforms" "^7.25.2"
+    "@babel/helpers" "^7.25.0"
+    "@babel/parser" "^7.25.0"
+    "@babel/template" "^7.25.0"
+    "@babel/traverse" "^7.25.2"
+    "@babel/types" "^7.25.2"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
-    semver "^6.3.0"
+    json5 "^2.2.3"
+    semver "^6.3.1"
 
-"@babel/core@^7.12.3":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.0.tgz#56cbda6b185ae9d9bed369816a8f4423c5f2ff1b"
-  integrity sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==
+"@babel/core@^7.23.9":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.7.tgz#1b3d144157575daf132a3bc80b2b18e6e3ca6ece"
+  integrity sha512-yJ474Zv3cwiSOO9nXJuqzvwEeM+chDuQ8GJirw+pZ91sCGCyOZ3dJkVE09fTV0VEVzXyLWhh3G/AolYTPX7Mow==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.23.5"
-    "@babel/generator" "^7.23.6"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helpers" "^7.24.0"
-    "@babel/parser" "^7.24.0"
-    "@babel/template" "^7.24.0"
-    "@babel/traverse" "^7.24.0"
-    "@babel/types" "^7.24.0"
+    "@babel/code-frame" "^7.25.7"
+    "@babel/generator" "^7.25.7"
+    "@babel/helper-compilation-targets" "^7.25.7"
+    "@babel/helper-module-transforms" "^7.25.7"
+    "@babel/helpers" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/template" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@7.20.14":
-  version "7.20.14"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.14.tgz#9fa772c9f86a46c6ac9b321039400712b96f64ce"
-  integrity sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==
+"@babel/generator@7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
+  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
   dependencies:
-    "@babel/types" "^7.20.7"
-    "@jridgewell/gen-mapping" "^0.3.2"
+    "@babel/types" "^7.25.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.19.3", "@babel/generator@^7.20.7", "@babel/generator@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
-  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
+"@babel/generator@^7.25.0", "@babel/generator@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.7.tgz#de86acbeb975a3e11ee92dd52223e6b03b479c56"
+  integrity sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==
   dependencies:
-    "@babel/types" "^7.23.6"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
+    "@babel/types" "^7.25.7"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
 
-"@babel/helper-annotate-as-pure@7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
-  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+"@babel/helper-annotate-as-pure@7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
+  integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.24.7"
 
-"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
-  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+"@babel/helper-annotate-as-pure@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.7.tgz#63f02dbfa1f7cb75a9bdb832f300582f30bb8972"
+  integrity sha512-4xwU8StnqnlIhhioZf1tqnVWeQ9pvH/ujS8hRfw/WOza+/a+1qv69BWNy+oY231maTCWgKWhfBU7kDpsds6zAA==
   dependencies:
-    "@babel/types" "^7.22.5"
+    "@babel/types" "^7.25.7"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
-  integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.7.tgz#d721650c1f595371e0a23ee816f1c3c488c0d622"
+  integrity sha512-12xfNeKNH7jubQNm7PAkzlLwEmCs1tfuX3UjIw6vP6QXi+leKh6+LyC/+Ed4EIQermwd58wsyh070yjDHFlNGg==
   dependencies:
-    "@babel/types" "^7.22.15"
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.19.3", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
-  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.2", "@babel/helper-compilation-targets@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.7.tgz#11260ac3322dda0ef53edfae6e97b961449f5fa4"
+  integrity sha512-DniTEax0sv6isaw6qSQSfV4gVRNtw2rte8HHM45t9ZR0xILaufBRNkpMifCRiAPyvL4ACD6v0gfCwCmtOQaV4A==
   dependencies:
-    "@babel/compat-data" "^7.23.5"
-    "@babel/helper-validator-option" "^7.23.5"
-    browserslist "^4.22.2"
+    "@babel/compat-data" "^7.25.7"
+    "@babel/helper-validator-option" "^7.25.7"
+    browserslist "^4.24.0"
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.0.tgz#fc7554141bdbfa2d17f7b4b80153b9b090e5d158"
-  integrity sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-member-expression-to-functions" "^7.23.0"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
+"@babel/helper-create-class-features-plugin@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.7.tgz#5d65074c76cae75607421c00d6bd517fe1892d6b"
+  integrity sha512-bD4WQhbkx80mAyj/WCm4ZHcF4rDxkoLFO6ph8/5/mQ3z4vAzltQXAmbc7GvVJx5H+lk5Mi5EmbTeox5nMGCsbw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.7"
+    "@babel/helper-member-expression-to-functions" "^7.25.7"
+    "@babel/helper-optimise-call-expression" "^7.25.7"
+    "@babel/helper-replace-supers" "^7.25.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
     semver "^6.3.1"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
-  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.7.tgz#dcb464f0e2cdfe0c25cc2a0a59c37ab940ce894e"
+  integrity sha512-byHhumTj/X47wJ6C6eLpK7wW/WBEcnUeb7D0FNc/jFQnQVw7DOso3Zz5u9x/zLrFVkHa89ZGDbkAa1D54NdrCQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    regexpu-core "^5.3.1"
+    "@babel/helper-annotate-as-pure" "^7.25.7"
+    regexpu-core "^6.1.1"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
-  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+"@babel/helper-define-polyfill-provider@^0.6.2":
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz#18594f789c3594acb24cfdb4a7f7b7d2e8bd912d"
+  integrity sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
     debug "^4.1.1"
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
-    semver "^6.1.2"
-
-"@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
-  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
-
-"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
-  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.23.0"
-
-"@babel/helper-hoist-variables@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
-  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
-  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
-  dependencies:
-    "@babel/types" "^7.23.0"
-
-"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
-  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
-  dependencies:
-    "@babel/types" "^7.22.15"
-
-"@babel/helper-module-transforms@^7.19.0", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
-  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-module-imports" "^7.22.15"
-    "@babel/helper-simple-access" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/helper-validator-identifier" "^7.22.20"
-
-"@babel/helper-optimise-call-expression@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
-  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
-  integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
-
-"@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
-  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-wrap-function" "^7.22.20"
-
-"@babel/helper-replace-supers@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
-  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-member-expression-to-functions" "^7.22.15"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
 
-"@babel/helper-simple-access@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
-  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.20.0", "@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
-  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-split-export-declaration@7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
-  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-split-export-declaration@^7.22.6":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
-  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-string-parser@^7.23.4":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
-  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
-
-"@babel/helper-validator-identifier@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
-  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
-
-"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.23.5":
-  version "7.23.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
-  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
-
-"@babel/helper-wrap-function@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
-  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
-  dependencies:
-    "@babel/helper-function-name" "^7.22.5"
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.22.19"
-
-"@babel/helpers@^7.19.0", "@babel/helpers@^7.20.7", "@babel/helpers@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.0.tgz#a3dd462b41769c95db8091e49cfe019389a9409b"
-  integrity sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==
-  dependencies:
-    "@babel/template" "^7.24.0"
-    "@babel/traverse" "^7.24.0"
-    "@babel/types" "^7.24.0"
-
-"@babel/highlight@^7.23.4":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
-  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.22.20"
+"@babel/helper-member-expression-to-functions@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.7.tgz#541a33b071f0355a63a0fa4bdf9ac360116b8574"
+  integrity sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA==
+  dependencies:
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.24.7", "@babel/helper-module-imports@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz#dba00d9523539152906ba49263e36d7261040472"
+  integrity sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==
+  dependencies:
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/helper-module-transforms@^7.25.2", "@babel/helper-module-transforms@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.7.tgz#2ac9372c5e001b19bc62f1fe7d96a18cb0901d1a"
+  integrity sha512-k/6f8dKG3yDz/qCwSM+RKovjMix563SLxQFo0UhRNo239SP6n9u5/eLtKD6EAjwta2JHJ49CsD8pms2HdNiMMQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.7"
+    "@babel/helper-simple-access" "^7.25.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+
+"@babel/helper-optimise-call-expression@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.7.tgz#1de1b99688e987af723eed44fa7fc0ee7b97d77a"
+  integrity sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng==
+  dependencies:
+    "@babel/types" "^7.25.7"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.24.8", "@babel/helper-plugin-utils@^7.25.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.7.tgz#8ec5b21812d992e1ef88a9b068260537b6f0e36c"
+  integrity sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==
+
+"@babel/helper-remap-async-to-generator@^7.24.7", "@babel/helper-remap-async-to-generator@^7.25.0", "@babel/helper-remap-async-to-generator@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.7.tgz#9efdc39df5f489bcd15533c912b6c723a0a65021"
+  integrity sha512-kRGE89hLnPfcz6fTrlNU+uhgcwv0mBE4Gv3P9Ke9kLVJYpi4AMVVEElXvB5CabrPZW4nCM8P8UyyjrzCM0O2sw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.7"
+    "@babel/helper-wrap-function" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+
+"@babel/helper-replace-supers@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.7.tgz#38cfda3b6e990879c71d08d0fef9236b62bd75f5"
+  integrity sha512-iy8JhqlUW9PtZkd4pHM96v6BdJ66Ba9yWSE4z0W4TvSZwLBPkyDsiIU3ENe4SmrzRBs76F7rQXTy1lYC49n6Lw==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.7"
+    "@babel/helper-optimise-call-expression" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+
+"@babel/helper-simple-access@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.25.7.tgz#5eb9f6a60c5d6b2e0f76057004f8dacbddfae1c0"
+  integrity sha512-FPGAkJmyoChQeM+ruBGIDyrT2tKfZJO8NcxdC+CWNJi7N8/rZpSxK7yvBJ5O/nF1gfu5KzN7VKG3YVSLFfRSxQ==
+  dependencies:
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.7.tgz#382831c91038b1a6d32643f5f49505b8442cb87c"
+  integrity sha512-pPbNbchZBkPMD50K0p3JGcFMNLVUCuU/ABybm/PGNj4JiHrpmNyqqCphBk4i19xXtNV0JhldQJJtbSW5aUvbyA==
+  dependencies:
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/helper-split-export-declaration@7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz#83949436890e07fa3d6873c61a96e3bbf692d856"
+  integrity sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==
+  dependencies:
+    "@babel/types" "^7.24.7"
+
+"@babel/helper-string-parser@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz#d50e8d37b1176207b4fe9acedec386c565a44a54"
+  integrity sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==
+
+"@babel/helper-validator-identifier@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz#77b7f60c40b15c97df735b38a66ba1d7c3e93da5"
+  integrity sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==
+
+"@babel/helper-validator-option@^7.24.8", "@babel/helper-validator-option@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.7.tgz#97d1d684448228b30b506d90cace495d6f492729"
+  integrity sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==
+
+"@babel/helper-wrap-function@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.7.tgz#9f6021dd1c4fdf4ad515c809967fc4bac9a70fe7"
+  integrity sha512-MA0roW3JF2bD1ptAaJnvcabsVlNQShUaThyJbCDD4bCp8NEgiFvpoqRI2YS22hHlc2thjO/fTg2ShLMC3jygAg==
+  dependencies:
+    "@babel/template" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/helpers@^7.25.0", "@babel/helpers@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.7.tgz#091b52cb697a171fe0136ab62e54e407211f09c2"
+  integrity sha512-Sv6pASx7Esm38KQpF/U/OXLwPPrdGHNKoeblRxgZRLXnAtnkEe4ptJPDtAZM7fBLadbc1Q07kQpSiGQ0Jg6tRA==
+  dependencies:
+    "@babel/template" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/highlight@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.7.tgz#20383b5f442aa606e7b5e3043b0b1aafe9f37de5"
+  integrity sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.7"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
+    picocolors "^1.0.0"
 
-"@babel/parser@^7.14.7", "@babel/parser@^7.19.3", "@babel/parser@^7.20.7", "@babel/parser@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
-  integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
-
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz#5cd1c87ba9380d0afb78469292c954fee5d2411a"
-  integrity sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.23.3.tgz#f6652bb16b94f8f9c20c50941e16e9756898dc5d"
-  integrity sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/plugin-transform-optional-chaining" "^7.23.3"
-
-"@babel/plugin-proposal-async-generator-functions@7.20.7", "@babel/plugin-proposal-async-generator-functions@^7.20.1":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
-  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-proposal-class-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
-  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-proposal-class-static-block@^7.18.6":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
-  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
-"@babel/plugin-proposal-dynamic-import@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
-  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
-  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-proposal-json-strings@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
-  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
-  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
-  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-proposal-numeric-separator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
-  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
+"@babel/parser@^7.23.9", "@babel/parser@^7.25.0", "@babel/parser@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.7.tgz#99b927720f4ddbfeb8cd195a363ed4532f87c590"
+  integrity sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/types" "^7.25.7"
 
-"@babel/plugin-proposal-object-rest-spread@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
-  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.3":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.7.tgz#93969ac50ef4d68b2504b01b758af714e4cbdd64"
+  integrity sha512-UV9Lg53zyebzD1DwQoT9mzkEKa922LNUp5YkTJ6Uta0RbyXaQNUgcvSt7qIu1PpPzVb6rd10OVNTzkyBGeVmxQ==
   dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
-  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.7.tgz#a338d611adb9dcd599b8b1efa200c88ebeffe046"
+  integrity sha512-GDDWeVLNxRIkQTnJn2pDOM1pkCgYdSqPeT1a9vh9yIqu2uzzgw1zcqEb+IJOhy+dTBMlNdThrDIksr2o09qrrQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-proposal-optional-chaining@^7.18.9":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
-  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.7.tgz#c5f755e911dfac7ef6957300c0f9c4a8c18c06f4"
+  integrity sha512-wxyWg2RYaSUYgmd9MR0FyRGyeOMQE/Uzr1wzd/g5cf5bwi9A4v6HFdDm7y1MgDtod/fLOSTZY6jDgV0xU9d5bA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-proposal-private-methods@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
-  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.7.tgz#3b7ea04492ded990978b6deaa1dfca120ad4455a"
+  integrity sha512-Xwg6tZpLxc4iQjorYsyGMyfJE7nP5MV8t/Ka58BgiA7Jw0fRqQNcANlLfdJ/yvBt9z9LD2We+BEkT7vLqZRWng==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.7"
+    "@babel/plugin-transform-optional-chaining" "^7.25.7"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.21.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
-  integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.7.tgz#9622b1d597a703aa3a921e6f58c9c2d9a028d2c5"
+  integrity sha512-UVATLMidXrnH+GMUIuxq55nejlj02HP7F5ETyBONzP6G87fPBogG4CH6kxrSrdIuAjdwNO9VzyaYsrZPscWUrw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
-  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
@@ -875,12 +717,33 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-assertions@^7.20.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz#9c05a7f592982aff1a2768260ad84bcd3f0c77fc"
-  integrity sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==
+"@babel/plugin-syntax-import-assertions@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.7.tgz#8ce248f9f4ed4b7ed4cb2e0eb4ed9efd9f52921f"
+  integrity sha512-ZvZQRmME0zfJnDQnVBKYzHxXT7lYBB3Revz1GuS7oLXWMgqUPX4G+DDbT30ICClht9WKV34QVrZhSw6WdklwZQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-syntax-import-attributes@7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.7.tgz#b4f9ea95a79e6912480c4b626739f86a076624ca"
+  integrity sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
+"@babel/plugin-syntax-import-attributes@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.7.tgz#d78dd0499d30df19a598e63ab895e21b909bc43f"
+  integrity sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-syntax-import-meta@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
@@ -945,319 +808,461 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-arrow-functions@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz#94c6dcfd731af90f27a79509f9ab7fb2120fc38b"
-  integrity sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-async-to-generator@7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
-  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
+"@babel/plugin-transform-arrow-functions@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.7.tgz#1b9ed22e6890a0e9ff470371c73b8c749bcec386"
+  integrity sha512-EJN2mKxDwfOUCPxMO6MUI58RN3ganiRAG/MS/S3HfB6QFNjroAMelQo/gybyYq97WerCBAZoyrAoW8Tzdq2jWg==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-async-to-generator@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz#d1f513c7a8a506d43f47df2bf25f9254b0b051fa"
-  integrity sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==
+"@babel/plugin-transform-async-generator-functions@7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.0.tgz#b785cf35d73437f6276b1e30439a57a50747bddf"
+  integrity sha512-uaIi2FdqzjpAMvVqvB51S42oC2JEVgh0LDsGfZVDysWE8LrJtQC2jvKmOqEYThKyB7bDEb7BP1GYWDm7tABA0Q==
   dependencies:
-    "@babel/helper-module-imports" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-remap-async-to-generator" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-remap-async-to-generator" "^7.25.0"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/traverse" "^7.25.0"
 
-"@babel/plugin-transform-block-scoped-functions@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.23.3.tgz#fe1177d715fb569663095e04f3598525d98e8c77"
-  integrity sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==
+"@babel/plugin-transform-async-generator-functions@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.7.tgz#af61a02b30d7bff5108c63bd39ac7938403426d7"
+  integrity sha512-4B6OhTrwYKHYYgcwErvZjbmH9X5TxQBsaBHdzEIB4l71gR5jh/tuHGlb9in47udL2+wVUcOz5XXhhfhVJwEpEg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-remap-async-to-generator" "^7.25.7"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/traverse" "^7.25.7"
 
-"@babel/plugin-transform-block-scoping@^7.20.2":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz#b2d38589531c6c80fbe25e6b58e763622d2d3cf5"
-  integrity sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==
+"@babel/plugin-transform-async-to-generator@7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz#72a3af6c451d575842a7e9b5a02863414355bdcc"
+  integrity sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-remap-async-to-generator" "^7.24.7"
 
-"@babel/plugin-transform-classes@^7.20.2":
-  version "7.23.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz#d08ae096c240347badd68cdf1b6d1624a6435d92"
-  integrity sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==
+"@babel/plugin-transform-async-to-generator@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.7.tgz#a44c7323f8d4285a6c568dd43c5c361d6367ec52"
+  integrity sha512-ZUCjAavsh5CESCmi/xCpX1qcCaAglzs/7tmuvoFnJgA1dM7gQplsguljoTg+Ru8WENpX89cQyAtWoaE0I3X3Pg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-module-imports" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-remap-async-to-generator" "^7.25.7"
+
+"@babel/plugin-transform-block-scoped-functions@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.7.tgz#e0b8843d5571719a2f1bf7e284117a3379fcc17c"
+  integrity sha512-xHttvIM9fvqW+0a3tZlYcZYSBpSWzGBFIt/sYG3tcdSzBB8ZeVgz2gBP7Df+sM0N1850jrviYSSeUuc+135dmQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-block-scoping@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.7.tgz#6dab95e98adf780ceef1b1c3ab0e55cd20dd410a"
+  integrity sha512-ZEPJSkVZaeTFG/m2PARwLZQ+OG0vFIhPlKHK/JdIMy8DbRJ/htz6LRrTFtdzxi9EHmcwbNPAKDnadpNSIW+Aow==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-class-properties@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.7.tgz#a389cfca7a10ac80e3ff4c75fca08bd097ad1523"
+  integrity sha512-mhyfEW4gufjIqYFo9krXHJ3ElbFLIze5IDp+wQTxoPd+mwFb1NxatNAwmv8Q8Iuxv7Zc+q8EkiMQwc9IhyGf4g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-class-static-block@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.25.7.tgz#d2cf3c812e3b3162d56aadf4566f45c30538cb2c"
+  integrity sha512-rvUUtoVlkDWtDWxGAiiQj0aNktTPn3eFynBcMC2IhsXweehwgdI9ODe+XjWw515kEmv22sSOTp/rxIRuTiB7zg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.7.tgz#5103206cf80d02283bbbd044509ea3b65d0906bb"
+  integrity sha512-9j9rnl+YCQY0IGoeipXvnk3niWicIB6kCsWRGLwX241qSXpbA4MKxtp/EdvFxsc4zI5vqfLxzOd0twIJ7I99zg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.7"
+    "@babel/helper-compilation-targets" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-replace-supers" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz#652e69561fcc9d2b50ba4f7ac7f60dcf65e86474"
-  integrity sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==
+"@babel/plugin-transform-computed-properties@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.7.tgz#7f621f0aa1354b5348a935ab12e3903842466f65"
+  integrity sha512-QIv+imtM+EtNxg/XBKL3hiWjgdLjMOmZ+XzQwSgmBfKbfxUjBzGgVPklUuE55eq5/uVoh8gg3dqlrwR/jw3ZeA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/template" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/template" "^7.25.7"
 
-"@babel/plugin-transform-destructuring@^7.20.2":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz#8c9ee68228b12ae3dff986e56ed1ba4f3c446311"
-  integrity sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==
+"@babel/plugin-transform-destructuring@^7.24.8":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.7.tgz#f6f26a9feefb5aa41fd45b6f5838901b5333d560"
+  integrity sha512-xKcfLTlJYUczdaM1+epcdh1UGewJqr9zATgrNHcLBcV2QmfvPPEixo/sK/syql9cEmbr7ulu5HMFG5vbbt/sEA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.23.3.tgz#3f7af6054882ede89c378d0cf889b854a993da50"
-  integrity sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==
+"@babel/plugin-transform-dotall-regex@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.7.tgz#9d775c4a3ff1aea64045300fcd4309b4a610ef02"
+  integrity sha512-kXzXMMRzAtJdDEgQBLF4oaiT6ZCU3oWHgpARnTKDAqPkDJ+bs3NrZb310YYevR5QlRo3Kn7dzzIdHbZm1VzJdQ==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.23.3.tgz#664706ca0a5dfe8d066537f99032fc1dc8b720ce"
-  integrity sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==
+"@babel/plugin-transform-duplicate-keys@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.7.tgz#fbba7d1155eab76bd4f2a038cbd5d65883bd7a93"
+  integrity sha512-by+v2CjoL3aMnWDOyCIg+yxU9KXSRa9tN6MbqggH5xvymmr9p4AMjYkNlQy4brMceBnUyHZ9G8RnpvT8wP7Cfg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-exponentiation-operator@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.23.3.tgz#ea0d978f6b9232ba4722f3dbecdd18f450babd18"
-  integrity sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.7.tgz#102b31608dcc22c08fbca1894e104686029dc141"
+  integrity sha512-HvS6JF66xSS5rNKXLqkk7L9c/jZ/cdIVIcoPVrnl8IsVpLggTjXs8OWekbLHs/VtYDDh5WXnQyeE3PPUGm22MA==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-for-of@^7.18.8":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz#81c37e24171b37b370ba6aaffa7ac86bcb46f94e"
-  integrity sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==
+"@babel/plugin-transform-dynamic-import@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.7.tgz#31905ab2cfa94dcf1b1f8ce66096720b2908e518"
+  integrity sha512-UvcLuual4h7/GfylKm2IAA3aph9rwvAM2XBA0uPKU3lca+Maai4jBjjEVUS568ld6kJcgbouuumCBhMd/Yz17w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-transform-function-name@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz#8f424fcd862bf84cb9a1a6b42bc2f47ed630f8dc"
-  integrity sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==
+"@babel/plugin-transform-exponentiation-operator@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.7.tgz#5961a3a23a398faccd6cddb34a2182807d75fb5f"
+  integrity sha512-yjqtpstPfZ0h/y40fAXRv2snciYr0OAoMXY/0ClC7tm4C/nG5NJKmIItlaYlLbIVAWNfrYuy9dq1bE0SbX0PEg==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-literals@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz#8214665f00506ead73de157eba233e7381f3beb4"
-  integrity sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==
+"@babel/plugin-transform-export-namespace-from@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.7.tgz#beb2679db6fd3bdfe6ad6de2c8cac84a86ef2da1"
+  integrity sha512-h3MDAP5l34NQkkNulsTNyjdaR+OiB0Im67VU//sFupouP8Q6m9Spy7l66DcaAQxtmCqGdanPByLsnwFttxKISQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-member-expression-literals@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.23.3.tgz#e37b3f0502289f477ac0e776b05a833d853cabcc"
-  integrity sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==
+"@babel/plugin-transform-for-of@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.7.tgz#0acfea0f27aa290818b5b48a5a44b3f03fc13669"
+  integrity sha512-n/TaiBGJxYFWvpJDfsxSj9lEEE44BFM1EPGz4KEiTipTgkoFVVcCmzAL3qA7fdQU96dpo4gGf5HBx/KnDvqiHw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.7"
 
-"@babel/plugin-transform-modules-amd@^7.19.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.3.tgz#e19b55436a1416829df0a1afc495deedfae17f7d"
-  integrity sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==
+"@babel/plugin-transform-function-name@^7.25.1":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.7.tgz#7e394ccea3693902a8b50ded8b6ae1fa7b8519fd"
+  integrity sha512-5MCTNcjCMxQ63Tdu9rxyN6cAWurqfrDZ76qvVPrGYdBxIj+EawuuxTu/+dgJlhK5eRz3v1gLwp6XwS8XaX2NiQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
 
-"@babel/plugin-transform-modules-commonjs@^7.19.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz#661ae831b9577e52be57dd8356b734f9700b53b4"
-  integrity sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==
+"@babel/plugin-transform-json-strings@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.7.tgz#6626433554aff4bd6f76a2c621a1f40e802dfb0a"
+  integrity sha512-Ot43PrL9TEAiCe8C/2erAjXMeVSnE/BLEx6eyrKLNFCCw5jvhTHKyHxdI1pA0kz5njZRYAnMO2KObGqOCRDYSA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.6":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz#105d3ed46e4a21d257f83a2f9e2ee4203ceda6be"
-  integrity sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==
+"@babel/plugin-transform-literals@^7.25.2":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.7.tgz#70cbdc742f2cfdb1a63ea2cbd018d12a60b213c3"
+  integrity sha512-fwzkLrSu2fESR/cm4t6vqd7ebNIopz2QHGtjoU+dswQo/P6lwAG04Q98lliE3jkz/XqnbGFLnUcE0q0CVUf92w==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-modules-umd@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.23.3.tgz#5d4395fccd071dfefe6585a4411aa7d6b7d769e9"
-  integrity sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==
+"@babel/plugin-transform-logical-assignment-operators@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.7.tgz#93847feb513a1f191c5f5d903d991a0ee24fe99b"
+  integrity sha512-iImzbA55BjiovLyG2bggWS+V+OLkaBorNvc/yJoeeDQGztknRnDdYfp2d/UPmunZYEnZi6Lg8QcTmNMHOB0lGA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
-  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
+"@babel/plugin-transform-member-expression-literals@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.7.tgz#0a36c3fbd450cc9e6485c507f005fa3d1bc8fca5"
+  integrity sha512-Std3kXwpXfRV0QtQy5JJcRpkqP8/wG4XL7hSKZmGlxPlDqmpXtEPRmhF7ztnlTCtUN3eXRUJp+sBEZjaIBVYaw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-new-target@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.23.3.tgz#5491bb78ed6ac87e990957cea367eab781c4d980"
-  integrity sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==
+"@babel/plugin-transform-modules-amd@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.7.tgz#bb4e543b5611f6c8c685a2fd485408713a3adf3d"
+  integrity sha512-CgselSGCGzjQvKzghCvDTxKHP3iooenLpJDO842ehn5D2G5fJB222ptnDwQho0WjEvg7zyoxb9P+wiYxiJX5yA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-object-super@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.23.3.tgz#81fdb636dcb306dd2e4e8fd80db5b2362ed2ebcd"
-  integrity sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==
+"@babel/plugin-transform-modules-commonjs@^7.24.8":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.7.tgz#173f0c791bb7407c092ce6d77ee90eb3f2d1d2fd"
+  integrity sha512-L9Gcahi0kKFYXvweO6n0wc3ZG1ChpSFdgG+eV1WYZ3/dGbJK7vvk91FgGgak8YwRgrCuihF8tE/Xg07EkL5COg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
+    "@babel/helper-module-transforms" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-simple-access" "^7.25.7"
 
-"@babel/plugin-transform-optional-chaining@^7.23.3":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz#6acf61203bdfc4de9d4e52e64490aeb3e52bd017"
-  integrity sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==
+"@babel/plugin-transform-modules-systemjs@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.7.tgz#8b14d319a177cc9c85ef8b0512afd429d9e2e60b"
+  integrity sha512-t9jZIvBmOXJsiuyOwhrIGs8dVcD6jDyg2icw1VL4A/g+FnWyJKwUfSSU2nwJuMV2Zqui856El9u+ElB+j9fV1g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+
+"@babel/plugin-transform-modules-umd@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.7.tgz#00ee7a7e124289549381bfb0e24d87fd7f848367"
+  integrity sha512-p88Jg6QqsaPh+EB7I9GJrIqi1Zt4ZBHUQtjw3z1bzEXcLh6GfPqzZJ6G+G1HBGKUNukT58MnKG7EN7zXQBCODw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.7.tgz#a2f3f6d7f38693b462542951748f0a72a34d196d"
+  integrity sha512-BtAT9LzCISKG3Dsdw5uso4oV1+v2NlVXIIomKJgQybotJY3OwCwJmkongjHgwGKoZXd0qG5UZ12JUlDQ07W6Ow==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-new-target@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.7.tgz#52b2bde523b76c548749f38dc3054f1f45e82bc9"
+  integrity sha512-CfCS2jDsbcZaVYxRFo2qtavW8SpdzmBXC2LOI4oO0rP+JSRDxxF3inF4GcPsLgfb5FjkhXG5/yR/lxuRs2pySA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-nullish-coalescing-operator@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.7.tgz#0af84b86d4332654c43cf028dbdcf878b00ac168"
+  integrity sha512-FbuJ63/4LEL32mIxrxwYaqjJxpbzxPVQj5a+Ebrc8JICV6YX8nE53jY+K0RZT3um56GoNWgkS2BQ/uLGTjtwfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-transform-numeric-separator@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.7.tgz#a516b78f894d1c08283f39d809b2048fd2f29448"
+  integrity sha512-8CbutzSSh4hmD+jJHIA8vdTNk15kAzOnFLVVgBSMGr28rt85ouT01/rezMecks9pkU939wDInImwCKv4ahU4IA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-transform-object-rest-spread@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.7.tgz#fa0916521be96fd434e2db59780b24b308c6d169"
+  integrity sha512-1JdVKPhD7Y5PvgfFy0Mv2brdrolzpzSoUq2pr6xsR+m+3viGGeHEokFKsCgOkbeFOQxfB1Vt2F0cPJLRpFI4Zg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.25.7"
+
+"@babel/plugin-transform-object-super@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.7.tgz#582a9cea8cf0a1e02732be5b5a703a38dedf5661"
+  integrity sha512-pWT6UXCEW3u1t2tcAGtE15ornCBvopHj9Bps9D2DsH15APgNVOTwwczGckX+WkAvBmuoYKRCFa4DK+jM8vh5AA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-replace-supers" "^7.25.7"
+
+"@babel/plugin-transform-optional-catch-binding@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.7.tgz#400e2d891f9288f5231694234696aa67164e4913"
+  integrity sha512-m9obYBA39mDPN7lJzD5WkGGb0GO54PPLXsbcnj1Hyeu8mSRz7Gb4b1A6zxNX32ZuUySDK4G6it8SDFWD1nCnqg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-transform-optional-chaining@^7.24.8", "@babel/plugin-transform-optional-chaining@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.7.tgz#b7f7c9321aa1d8414e67799c28d87c23682e4d68"
+  integrity sha512-h39agClImgPWg4H8mYVAbD1qP9vClFbEjqoJmt87Zen8pjqK8FTPUwrOXAvqu5soytwxrLMd2fx2KSCp2CHcNg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.7"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz#83ef5d1baf4b1072fa6e54b2b0999a7b2527e2af"
-  integrity sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==
+"@babel/plugin-transform-parameters@^7.24.7", "@babel/plugin-transform-parameters@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.7.tgz#80c38b03ef580f6d6bffe1c5254bb35986859ac7"
+  integrity sha512-FYiTvku63me9+1Nz7TOx4YMtW3tWXzfANZtrzHhUZrz4d47EEtMQhzFoZWESfXuAMMT5mwzD4+y1N8ONAX6lMQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-property-literals@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.23.3.tgz#54518f14ac4755d22b92162e4a852d308a560875"
-  integrity sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==
+"@babel/plugin-transform-private-methods@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.7.tgz#c790a04f837b4bd61d6b0317b43aa11ff67dce80"
+  integrity sha512-KY0hh2FluNxMLwOCHbxVOKfdB5sjWG4M183885FmaqWWiGMhRZq4DQRKH6mHdEucbJnyDyYiZNwNG424RymJjA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-regenerator@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.23.3.tgz#141afd4a2057298602069fce7f2dc5173e6c561c"
-  integrity sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==
+"@babel/plugin-transform-private-property-in-object@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.7.tgz#aff877efd05b57c4ad04611d8de97bf155a53369"
+  integrity sha512-LzA5ESzBy7tqj00Yjey9yWfs3FKy4EmJyKOSWld144OxkTji81WWnUT8nkLUn+imN/zHL8ZQlOu/MTUAhHaX3g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-annotate-as-pure" "^7.25.7"
+    "@babel/helper-create-class-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.7.tgz#a8612b4ea4e10430f00012ecf0155662c7d6550d"
+  integrity sha512-lQEeetGKfFi0wHbt8ClQrUSUMfEeI3MMm74Z73T9/kuz990yYVtfofjf3NuA42Jy3auFOpbjDyCSiIkTs1VIYw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-regenerator@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.7.tgz#6eb006e6d26f627bc2f7844a9f19770721ad6f3e"
+  integrity sha512-mgDoQCRjrY3XK95UuV60tZlFCQGXEtMg8H+IsW72ldw1ih1jZhzYXbJvghmAEpg5UVhhnCeia1CkGttUvCkiMQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.7"
     regenerator-transform "^0.15.2"
 
-"@babel/plugin-transform-reserved-words@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.23.3.tgz#4130dcee12bd3dd5705c587947eb715da12efac8"
-  integrity sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==
+"@babel/plugin-transform-reserved-words@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.7.tgz#dc56b25e02afaabef3ce0c5b06b0916e8523e995"
+  integrity sha512-3OfyfRRqiGeOvIWSagcwUTVk2hXBsr/ww7bLn6TRTuXnexA+Udov2icFOxFX9abaj4l96ooYkcNN1qi2Zvqwng==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-runtime@7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz#9d2a9dbf4e12644d6f46e5e75bfbf02b5d6e9194"
-  integrity sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==
+"@babel/plugin-transform-runtime@7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.7.tgz#00a5bfaf8c43cf5c8703a8a6e82b59d9c58f38ca"
+  integrity sha512-YqXjrk4C+a1kZjewqt+Mmu2UuV1s07y8kqcUf4qYLnoqemhR4gRQikhdAhSVJioMjVTu6Mo6pAbaypEA3jY6fw==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    semver "^6.3.0"
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.7"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.1"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    semver "^6.3.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz#97d82a39b0e0c24f8a981568a8ed851745f59210"
-  integrity sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==
+"@babel/plugin-transform-shorthand-properties@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.7.tgz#92690a9c671915602d91533c278cc8f6bf12275f"
+  integrity sha512-uBbxNwimHi5Bv3hUccmOFlUy3ATO6WagTApenHz9KzoIdn0XeACdB12ZJ4cjhuB2WSi80Ez2FWzJnarccriJeA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-spread@^7.19.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz#41d17aacb12bde55168403c6f2d6bdca563d362c"
-  integrity sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==
+"@babel/plugin-transform-spread@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.7.tgz#df83e899a9fc66284ee601a7b738568435b92998"
+  integrity sha512-Mm6aeymI0PBh44xNIv/qvo8nmbkpZze1KvR8MkEqbIREDxoiWTi18Zr2jryfRMwDfVZF9foKh060fWgni44luw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.7"
 
-"@babel/plugin-transform-sticky-regex@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz#dec45588ab4a723cb579c609b294a3d1bd22ff04"
-  integrity sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==
+"@babel/plugin-transform-sticky-regex@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.7.tgz#341c7002bef7f29037be7fb9684e374442dd0d17"
+  integrity sha512-ZFAeNkpGuLnAQ/NCsXJ6xik7Id+tHuS+NT+ue/2+rn/31zcdnupCdmunOizEaP0JsUmTFSTOPoQY7PkK2pttXw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-template-literals@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.23.3.tgz#5f0f028eb14e50b5d0f76be57f90045757539d07"
-  integrity sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==
+"@babel/plugin-transform-template-literals@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.7.tgz#e566c581bb16d8541dd8701093bb3457adfce16b"
+  integrity sha512-SI274k0nUsFFmyQupiO7+wKATAmMFf8iFgq2O+vVFXZ0SV9lNfT1NGzBEhjquFmD8I9sqHLguH+gZVN3vww2AA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.9":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz#9dfab97acc87495c0c449014eb9c547d8966bca4"
-  integrity sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==
+"@babel/plugin-transform-typeof-symbol@^7.24.8":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.7.tgz#debb1287182efd20488f126be343328c679b66eb"
+  integrity sha512-OmWmQtTHnO8RSUbL0NTdtpbZHeNTnm68Gj5pA4Y2blFNh+V4iZR68V1qL9cI37J21ZN7AaCnkfdHtLExQPf2uA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.23.3.tgz#1f66d16cab01fab98d784867d24f70c1ca65b925"
-  integrity sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==
+"@babel/plugin-transform-unicode-escapes@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.7.tgz#973592b6d13a914794e1de8cf1383e50e0f87f81"
+  integrity sha512-BN87D7KpbdiABA+t3HbVqHzKWUDN3dymLaTnPFAMyc8lV+KN3+YzNhVRNdinaCPA4AUqx7ubXbQ9shRjYBl3SQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-unicode-regex@^7.18.6":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz#26897708d8f42654ca4ce1b73e96140fbad879dc"
-  integrity sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==
+"@babel/plugin-transform-unicode-property-regex@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.7.tgz#25349197cce964b1343f74fa7cfdf791a1b1919e"
+  integrity sha512-IWfR89zcEPQGB/iB408uGtSPlQd3Jpq11Im86vUgcmSTcoWAiQMCTOa2K2yNNqFJEBVICKhayctee65Ka8OB0w==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/preset-env@7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
-  dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+"@babel/plugin-transform-unicode-regex@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.7.tgz#f93a93441baf61f713b6d5552aaa856bfab34809"
+  integrity sha512-8JKfg/hiuA3qXnlLx8qtv5HWRbgyFx2hMMtpDDuU2rTckpKkGu4ycK5yYHwuEa16/quXfoxHBIApEsNyMWnt0g==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.7.tgz#d1b3295d29e0f8f4df76abc909ad1ebee919560c"
+  integrity sha512-YRW8o9vzImwmh4Q3Rffd09bH5/hvY0pxg+1H1i0f7APoUeg12G7+HhLj9ZFNIrYkgBXhIijPJ+IXypN0hLTIbw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
+
+"@babel/preset-env@7.25.3":
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.25.3.tgz#0bf4769d84ac51d1073ab4a86f00f30a3a83c67c"
+  integrity sha512-QsYW7UeAaXvLPX9tdVliMJE7MD7M6MLYVTovRTIwhoYQVFHR1rM4wO8wqAezYi3/BpSD+NzVCZ69R6smWiIi8g==
+  dependencies:
+    "@babel/compat-data" "^7.25.2"
+    "@babel/helper-compilation-targets" "^7.25.2"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-validator-option" "^7.24.8"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.3"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.0"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.0"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.7"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.0"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-assertions" "^7.24.7"
+    "@babel/plugin-syntax-import-attributes" "^7.24.7"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -1267,128 +1272,153 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
-
-"@babel/preset-modules@^0.1.5":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6.tgz#31bcdd8f19538437339d17af00d177d854d9d458"
-  integrity sha512-ID2yj6K/4lKfhuU3+EX4UvNbIt7eACFbHmNUjzA+ep+B5971CknnA/9DEWKbRokfbbtblxxxXFJJrH47UEAMVg==
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.24.7"
+    "@babel/plugin-transform-async-generator-functions" "^7.25.0"
+    "@babel/plugin-transform-async-to-generator" "^7.24.7"
+    "@babel/plugin-transform-block-scoped-functions" "^7.24.7"
+    "@babel/plugin-transform-block-scoping" "^7.25.0"
+    "@babel/plugin-transform-class-properties" "^7.24.7"
+    "@babel/plugin-transform-class-static-block" "^7.24.7"
+    "@babel/plugin-transform-classes" "^7.25.0"
+    "@babel/plugin-transform-computed-properties" "^7.24.7"
+    "@babel/plugin-transform-destructuring" "^7.24.8"
+    "@babel/plugin-transform-dotall-regex" "^7.24.7"
+    "@babel/plugin-transform-duplicate-keys" "^7.24.7"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.0"
+    "@babel/plugin-transform-dynamic-import" "^7.24.7"
+    "@babel/plugin-transform-exponentiation-operator" "^7.24.7"
+    "@babel/plugin-transform-export-namespace-from" "^7.24.7"
+    "@babel/plugin-transform-for-of" "^7.24.7"
+    "@babel/plugin-transform-function-name" "^7.25.1"
+    "@babel/plugin-transform-json-strings" "^7.24.7"
+    "@babel/plugin-transform-literals" "^7.25.2"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.24.7"
+    "@babel/plugin-transform-member-expression-literals" "^7.24.7"
+    "@babel/plugin-transform-modules-amd" "^7.24.7"
+    "@babel/plugin-transform-modules-commonjs" "^7.24.8"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.0"
+    "@babel/plugin-transform-modules-umd" "^7.24.7"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.24.7"
+    "@babel/plugin-transform-new-target" "^7.24.7"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.24.7"
+    "@babel/plugin-transform-numeric-separator" "^7.24.7"
+    "@babel/plugin-transform-object-rest-spread" "^7.24.7"
+    "@babel/plugin-transform-object-super" "^7.24.7"
+    "@babel/plugin-transform-optional-catch-binding" "^7.24.7"
+    "@babel/plugin-transform-optional-chaining" "^7.24.8"
+    "@babel/plugin-transform-parameters" "^7.24.7"
+    "@babel/plugin-transform-private-methods" "^7.24.7"
+    "@babel/plugin-transform-private-property-in-object" "^7.24.7"
+    "@babel/plugin-transform-property-literals" "^7.24.7"
+    "@babel/plugin-transform-regenerator" "^7.24.7"
+    "@babel/plugin-transform-reserved-words" "^7.24.7"
+    "@babel/plugin-transform-shorthand-properties" "^7.24.7"
+    "@babel/plugin-transform-spread" "^7.24.7"
+    "@babel/plugin-transform-sticky-regex" "^7.24.7"
+    "@babel/plugin-transform-template-literals" "^7.24.7"
+    "@babel/plugin-transform-typeof-symbol" "^7.24.8"
+    "@babel/plugin-transform-unicode-escapes" "^7.24.7"
+    "@babel/plugin-transform-unicode-property-regex" "^7.24.7"
+    "@babel/plugin-transform-unicode-regex" "^7.24.7"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.24.7"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.4"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.37.1"
+    semver "^6.3.1"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/regjsgen@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
-  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-
-"@babel/runtime@7.20.13":
-  version "7.20.13"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
-  integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
+"@babel/runtime@7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
   dependencies:
-    regenerator-runtime "^0.13.11"
+    regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
-  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.25.0", "@babel/runtime@^7.25.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
-  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-
-"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.15", "@babel/template@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
-  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
-  dependencies:
-    "@babel/code-frame" "^7.23.5"
-    "@babel/parser" "^7.24.0"
-    "@babel/types" "^7.24.0"
-
-"@babel/traverse@^7.19.3", "@babel/traverse@^7.20.12", "@babel/traverse@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
-  integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
-  dependencies:
-    "@babel/code-frame" "^7.23.5"
-    "@babel/generator" "^7.23.6"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.24.0"
-    "@babel/types" "^7.24.0"
+"@babel/template@^7.25.0", "@babel/template@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
+  integrity sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==
+  dependencies:
+    "@babel/code-frame" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/types" "^7.25.7"
+
+"@babel/traverse@^7.25.0", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.7.tgz#83e367619be1cab8e4f2892ef30ba04c26a40fa8"
+  integrity sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==
+  dependencies:
+    "@babel/code-frame" "^7.25.7"
+    "@babel/generator" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/template" "^7.25.7"
+    "@babel/types" "^7.25.7"
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.18.6", "@babel/types@^7.19.3", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.24.0", "@babel/types@^7.4.4":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
-  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
+"@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.7", "@babel/types@^7.4.4":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.7.tgz#1b7725c1d3a59f328cb700ce704c46371e6eef9b"
+  integrity sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==
   dependencies:
-    "@babel/helper-string-parser" "^7.23.4"
-    "@babel/helper-validator-identifier" "^7.22.20"
+    "@babel/helper-string-parser" "^7.25.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
     to-fast-properties "^2.0.0"
 
-"@braintree/sanitize-url@^6.0.0":
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
-  integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
+"@braintree/sanitize-url@^7.0.1":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-7.1.0.tgz#048e48aab4f1460e3121e22aa62459d16653dc85"
+  integrity sha512-o+UlMLt49RvtCASlOMW0AkHnabN9wR9rwCCherxO0yG4Npy34GkvrAqdXQvrhNs+jh+gkK8gB8Lf05qL/O7KWg==
 
-"@colors/colors@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
-  integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
+"@chevrotain/cst-dts-gen@11.0.3":
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz#5e0863cc57dc45e204ccfee6303225d15d9d4783"
+  integrity sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==
+  dependencies:
+    "@chevrotain/gast" "11.0.3"
+    "@chevrotain/types" "11.0.3"
+    lodash-es "4.17.21"
+
+"@chevrotain/gast@11.0.3":
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/@chevrotain/gast/-/gast-11.0.3.tgz#e84d8880323fe8cbe792ef69ce3ffd43a936e818"
+  integrity sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==
+  dependencies:
+    "@chevrotain/types" "11.0.3"
+    lodash-es "4.17.21"
+
+"@chevrotain/regexp-to-ast@11.0.3":
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz#11429a81c74a8e6a829271ce02fc66166d56dcdb"
+  integrity sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==
+
+"@chevrotain/types@11.0.3":
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/@chevrotain/types/-/types-11.0.3.tgz#f8a03914f7b937f594f56eb89312b3b8f1c91848"
+  integrity sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==
+
+"@chevrotain/utils@11.0.3":
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/@chevrotain/utils/-/utils-11.0.3.tgz#e39999307b102cff3645ec4f5b3665f5297a2224"
+  integrity sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==
 
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
@@ -1397,241 +1427,697 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@date-io/core@1.3.7", "@date-io/core@1.x", "@date-io/core@^1.3.7":
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.7.tgz#c65d2979ee7696c0551d8f24df618b21b83cde4a"
-  integrity sha512-oHFBOjQskqrFngyDnJPOM1o4FVpKPyNe/aDtkj1HQEfCe7BV3cggwuTll0AOchNdiYY0yJEVyUl8Vi63HZxfBA==
+"@discoveryjs/json-ext@0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.6.1.tgz#593da7a17a31a72a874e313677183334a49b01c9"
+  integrity sha512-boghen8F0Q8D+0/Q1/1r6DUEieUJ8w2a1gIknExMSHBsJFOr2+0KUfHiVYBvucPwl3+RU5PFBK833FjFCh3BhA==
 
-"@date-io/date-fns@1.3.7":
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.7.tgz#723034fd1a71721331a951b35a2162f00cc86a3a"
-  integrity sha512-7TqK8xhCrWVY6L3/o/DfTXtJq7HV4KMiiQ6WPsR/mmvWXPrH5AFvjEAPJoFLBYEtX5KqpXbp5lRDwVlH9ZSVQw==
+"@emotion/babel-plugin@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
+  integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.2.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+  version "11.13.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
   dependencies:
-    "@date-io/core" "^1.3.7"
+    "@emotion/memoize" "^0.9.0"
 
-"@discoveryjs/json-ext@0.5.7":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
-  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+"@emotion/react@11.13.3":
+  version "11.13.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
+  integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/cache" "^11.13.0"
+    "@emotion/serialize" "^1.3.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
+  integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
-"@es-joy/jsdoccomment@~0.42.0":
-  version "0.42.0"
-  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.42.0.tgz#59e878708336aaee88c2b34c894f73dbf77ae2b0"
-  integrity sha512-R1w57YlVA6+YE01wch3GPYn6bCsrOV3YW/5oGGE2tmX6JcL9Nr+b5IikrjMPF+v9CV3ay+obImEdsDhovhJrzw==
+"@emotion/styled@11.13.0":
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.13.0.tgz#633fd700db701472c7a5dbef54d6f9834e9fb190"
+  integrity sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
+  integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
+
+"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.1.tgz#b3adbb43de12ee2149541c4f1337d2eb7774f0ad"
+  integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
+"@es-joy/jsdoccomment@~0.48.0":
+  version "0.48.0"
+  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.48.0.tgz#5d9dc1a295cf5d1ed224dffafb4800d5c7206c27"
+  integrity sha512-G6QUWIcC+KvSwXNsJyDTHvqUdNoAVJPPgkc3+Uk4WBKqZvoXhlvazOgm9aL0HwihJLQf0l+tOE2UFzXBqCqgDw==
   dependencies:
     comment-parser "1.4.1"
-    esquery "^1.5.0"
-    jsdoc-type-pratt-parser "~4.0.0"
-
-"@esbuild/android-arm64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.8.tgz#b3d5b65a3b2e073a6c7ee36b1f3c30c8f000315b"
-  integrity sha512-oa/N5j6v1svZQs7EIRPqR8f+Bf8g6HBDjD/xHC02radE/NjKHK7oQmtmLxPs1iVwYyvE+Kolo6lbpfEQ9xnhxQ==
-
-"@esbuild/android-arm@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.8.tgz#c41e496af541e175369d48164d0cf01a5f656cf6"
-  integrity sha512-0/rb91GYKhrtbeglJXOhAv9RuYimgI8h623TplY2X+vA4EXnk3Zj1fXZreJ0J3OJJu1bwmb0W7g+2cT/d8/l/w==
-
-"@esbuild/android-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.8.tgz#080fa67c29be77f5a3ca5ee4cc78d5bf927e3a3b"
-  integrity sha512-bTliMLqD7pTOoPg4zZkXqCDuzIUguEWLpeqkNfC41ODBHwoUgZ2w5JBeYimv4oP6TDVocoYmEhZrCLQTrH89bg==
-
-"@esbuild/darwin-arm64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.8.tgz#053622bf9a82f43d5c075b7818e02618f7b4a397"
-  integrity sha512-ghAbV3ia2zybEefXRRm7+lx8J/rnupZT0gp9CaGy/3iolEXkJ6LYRq4IpQVI9zR97ID80KJVoUlo3LSeA/sMAg==
-
-"@esbuild/darwin-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.8.tgz#8a1aadb358d537d8efad817bb1a5bff91b84734b"
-  integrity sha512-n5WOpyvZ9TIdv2V1K3/iIkkJeKmUpKaCTdun9buhGRWfH//osmUjlv4Z5mmWdPWind/VGcVxTHtLfLCOohsOXw==
-
-"@esbuild/freebsd-arm64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.8.tgz#e6738d0081ba0721a5c6c674e84c6e7fcea61989"
-  integrity sha512-a/SATTaOhPIPFWvHZDoZYgxaZRVHn0/LX1fHLGfZ6C13JqFUZ3K6SMD6/HCtwOQ8HnsNaEeokdiDSFLuizqv5A==
-
-"@esbuild/freebsd-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.8.tgz#1855e562f2b730f4483f6e94086e9e2597feb4c3"
-  integrity sha512-xpFJb08dfXr5+rZc4E+ooZmayBW6R3q59daCpKZ/cDU96/kvDM+vkYzNeTJCGd8rtO6fHWMq5Rcv/1cY6p6/0Q==
-
-"@esbuild/linux-arm64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.8.tgz#481da38952721a3fdb77c17a36ceaacc4270b5c5"
-  integrity sha512-v3iwDQuDljLTxpsqQDl3fl/yihjPAyOguxuloON9kFHYwopeJEf1BkDXODzYyXEI19gisEsQlG1bM65YqKSIww==
-
-"@esbuild/linux-arm@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.8.tgz#18127072b270bb6321c6d11be20bfd30e0d6ad17"
-  integrity sha512-6Ij8gfuGszcEwZpi5jQIJCVIACLS8Tz2chnEBfYjlmMzVsfqBP1iGmHQPp7JSnZg5xxK9tjCc+pJ2WtAmPRFVA==
-
-"@esbuild/linux-ia32@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.8.tgz#ee400af7b3bc69e8ca2e593ca35156ffb9abd54f"
-  integrity sha512-8svILYKhE5XetuFk/B6raFYIyIqydQi+GngEXJgdPdI7OMKUbSd7uzR02wSY4kb53xBrClLkhH4Xs8P61Q2BaA==
-
-"@esbuild/linux-loong64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.8.tgz#8c509d8a454693d39824b83b3f66c400872fce82"
-  integrity sha512-B6FyMeRJeV0NpyEOYlm5qtQfxbdlgmiGdD+QsipzKfFky0K5HW5Td6dyK3L3ypu1eY4kOmo7wW0o94SBqlqBSA==
-
-"@esbuild/linux-mips64el@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.8.tgz#f2b0d36e63fb26bc3f95b203b6a80638292101ca"
-  integrity sha512-CCb67RKahNobjm/eeEqeD/oJfJlrWyw29fgiyB6vcgyq97YAf3gCOuP6qMShYSPXgnlZe/i4a8WFHBw6N8bYAA==
-
-"@esbuild/linux-ppc64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.8.tgz#1e628be003e036e90423716028cc884fe5ba25bd"
-  integrity sha512-bytLJOi55y55+mGSdgwZ5qBm0K9WOCh0rx+vavVPx+gqLLhxtSFU0XbeYy/dsAAD6xECGEv4IQeFILaSS2auXw==
-
-"@esbuild/linux-riscv64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.8.tgz#419a815cb4c3fb9f1b78ef5295f5b48b8bf6427a"
-  integrity sha512-2YpRyQJmKVBEHSBLa8kBAtbhucaclb6ex4wchfY0Tj3Kg39kpjeJ9vhRU7x4mUpq8ISLXRXH1L0dBYjAeqzZAw==
-
-"@esbuild/linux-s390x@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.8.tgz#291c49ae5c3d11d226352755c0835911fe1a9e5c"
-  integrity sha512-QgbNY/V3IFXvNf11SS6exkpVcX0LJcob+0RWCgV9OiDAmVElnxciHIisoSix9uzYzScPmS6dJFbZULdSAEkQVw==
-
-"@esbuild/linux-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.8.tgz#03199d91c76faf80bd54104f5cbf0a489bc39f6a"
-  integrity sha512-mM/9S0SbAFDBc4OPoyP6SEOo5324LpUxdpeIUUSrSTOfhHU9hEfqRngmKgqILqwx/0DVJBzeNW7HmLEWp9vcOA==
-
-"@esbuild/netbsd-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.8.tgz#b436d767e1b21852f9ed212e2bb57f77203b0ae2"
-  integrity sha512-eKUYcWaWTaYr9zbj8GertdVtlt1DTS1gNBWov+iQfWuWyuu59YN6gSEJvFzC5ESJ4kMcKR0uqWThKUn5o8We6Q==
-
-"@esbuild/openbsd-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.8.tgz#d1481d8539e21d4729cd04a0450a26c2c8789e89"
-  integrity sha512-Vc9J4dXOboDyMXKD0eCeW0SIeEzr8K9oTHJU+Ci1mZc5njPfhKAqkRt3B/fUNU7dP+mRyralPu8QUkiaQn7iIg==
-
-"@esbuild/sunos-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.8.tgz#2cfb8126e079b2c00fd1bf095541e9f5c47877e4"
-  integrity sha512-0xvOTNuPXI7ft1LYUgiaXtpCEjp90RuBBYovdd2lqAFxje4sEucurg30M1WIm03+3jxByd3mfo+VUmPtRSVuOw==
-
-"@esbuild/win32-arm64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.8.tgz#7c6ecfd097ca23b82119753bf7072bbaefe51e3a"
-  integrity sha512-G0JQwUI5WdEFEnYNKzklxtBheCPkuDdu1YrtRrjuQv30WsYbkkoixKxLLv8qhJmNI+ATEWquZe/N0d0rpr55Mg==
-
-"@esbuild/win32-ia32@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.8.tgz#cffec63c3cb0ef8563a04df4e09fa71056171d00"
-  integrity sha512-Fqy63515xl20OHGFykjJsMnoIWS+38fqfg88ClvPXyDbLtgXal2DTlhb1TfTX34qWi3u4I7Cq563QcHpqgLx8w==
-
-"@esbuild/win32-x64@0.17.8":
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.8.tgz#200a0965cf654ac28b971358ecdca9cc5b44c335"
-  integrity sha512-1iuezdyDNngPnz8rLRDO2C/ZZ/emJLb72OsZeqQ6gL6Avko/XCXZw+NuxBSNhBAP13Hie418V7VMt9et1FMvpg==
-
-"@eslint-community/eslint-utils@^4.2.0":
+    esquery "^1.6.0"
+    jsdoc-type-pratt-parser "~4.1.0"
+
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
+
+"@esbuild/aix-ppc64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.23.0.tgz#145b74d5e4a5223489cabdc238d8dad902df5259"
+  integrity sha512-3sG8Zwa5fMcA9bgqB8AfWPQ+HFke6uD3h1s3RIwUNK8EG7a4buxvuFTs3j1IMs2NXAk9F30C/FF4vxRgQCcmoQ==
+
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
+
+"@esbuild/android-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.23.0.tgz#453bbe079fc8d364d4c5545069e8260228559832"
+  integrity sha512-EuHFUYkAVfU4qBdyivULuu03FhJO4IJN9PGuABGrFy4vUuzk91P2d+npxHcFdpUnfYKy0PuV+n6bKIpHOB3prQ==
+
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
+
+"@esbuild/android-arm@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.23.0.tgz#26c806853aa4a4f7e683e519cd9d68e201ebcf99"
+  integrity sha512-+KuOHTKKyIKgEEqKbGTK8W7mPp+hKinbMBeEnNzjJGyFcWsfrXjSTNluJHCY1RqhxFurdD8uNXQDei7qDlR6+g==
+
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
+
+"@esbuild/android-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.23.0.tgz#1e51af9a6ac1f7143769f7ee58df5b274ed202e6"
+  integrity sha512-WRrmKidLoKDl56LsbBMhzTTBxrsVwTKdNbKDalbEZr0tcsBgCLbEtoNthOW6PX942YiYq8HzEnb4yWQMLQuipQ==
+
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+
+"@esbuild/darwin-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.23.0.tgz#d996187a606c9534173ebd78c58098a44dd7ef9e"
+  integrity sha512-YLntie/IdS31H54Ogdn+v50NuoWF5BDkEUFpiOChVa9UnKpftgwzZRrI4J132ETIi+D8n6xh9IviFV3eXdxfow==
+
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
+
+"@esbuild/darwin-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.23.0.tgz#30c8f28a7ef4e32fe46501434ebe6b0912e9e86c"
+  integrity sha512-IMQ6eme4AfznElesHUPDZ+teuGwoRmVuuixu7sv92ZkdQcPbsNHzutd+rAfaBKo8YK3IrBEi9SLLKWJdEvJniQ==
+
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
+
+"@esbuild/freebsd-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.0.tgz#30f4fcec8167c08a6e8af9fc14b66152232e7fb4"
+  integrity sha512-0muYWCng5vqaxobq6LB3YNtevDFSAZGlgtLoAc81PjUfiFz36n4KMpwhtAd4he8ToSI3TGyuhyx5xmiWNYZFyw==
+
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
+
+"@esbuild/freebsd-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.23.0.tgz#1003a6668fe1f5d4439e6813e5b09a92981bc79d"
+  integrity sha512-XKDVu8IsD0/q3foBzsXGt/KjD/yTKBCIwOHE1XwiXmrRwrX6Hbnd5Eqn/WvDekddK21tfszBSrE/WMaZh+1buQ==
+
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
+
+"@esbuild/linux-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.23.0.tgz#3b9a56abfb1410bb6c9138790f062587df3e6e3a"
+  integrity sha512-j1t5iG8jE7BhonbsEg5d9qOYcVZv/Rv6tghaXM/Ug9xahM0nX/H2gfu6X6z11QRTMT6+aywOMA8TDkhPo8aCGw==
+
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
+
+"@esbuild/linux-arm@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.23.0.tgz#237a8548e3da2c48cd79ae339a588f03d1889aad"
+  integrity sha512-SEELSTEtOFu5LPykzA395Mc+54RMg1EUgXP+iw2SJ72+ooMwVsgfuwXo5Fn0wXNgWZsTVHwY2cg4Vi/bOD88qw==
+
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
+
+"@esbuild/linux-ia32@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.23.0.tgz#4269cd19cb2de5de03a7ccfc8855dde3d284a238"
+  integrity sha512-P7O5Tkh2NbgIm2R6x1zGJJsnacDzTFcRWZyTTMgFdVit6E98LTxO+v8LCCLWRvPrjdzXHx9FEOA8oAZPyApWUA==
+
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
+
+"@esbuild/linux-loong64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.23.0.tgz#82b568f5658a52580827cc891cb69d2cb4f86280"
+  integrity sha512-InQwepswq6urikQiIC/kkx412fqUZudBO4SYKu0N+tGhXRWUqAx+Q+341tFV6QdBifpjYgUndV1hhMq3WeJi7A==
+
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
+
+"@esbuild/linux-mips64el@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.23.0.tgz#9a57386c926262ae9861c929a6023ed9d43f73e5"
+  integrity sha512-J9rflLtqdYrxHv2FqXE2i1ELgNjT+JFURt/uDMoPQLcjWQA5wDKgQA4t/dTqGa88ZVECKaD0TctwsUfHbVoi4w==
+
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
+
+"@esbuild/linux-ppc64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.23.0.tgz#f3a79fd636ba0c82285d227eb20ed8e31b4444f6"
+  integrity sha512-cShCXtEOVc5GxU0fM+dsFD10qZ5UpcQ8AM22bYj0u/yaAykWnqXJDpd77ublcX6vdDsWLuweeuSNZk4yUxZwtw==
+
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
+
+"@esbuild/linux-riscv64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.23.0.tgz#f9d2ef8356ce6ce140f76029680558126b74c780"
+  integrity sha512-HEtaN7Y5UB4tZPeQmgz/UhzoEyYftbMXrBCUjINGjh3uil+rB/QzzpMshz3cNUxqXN7Vr93zzVtpIDL99t9aRw==
+
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
+
+"@esbuild/linux-s390x@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.23.0.tgz#45390f12e802201f38a0229e216a6aed4351dfe8"
+  integrity sha512-WDi3+NVAuyjg/Wxi+o5KPqRbZY0QhI9TjrEEm+8dmpY9Xir8+HE/HNx2JoLckhKbFopW0RdO2D72w8trZOV+Wg==
+
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
+
+"@esbuild/linux-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.23.0.tgz#c8409761996e3f6db29abcf9b05bee8d7d80e910"
+  integrity sha512-a3pMQhUEJkITgAw6e0bWA+F+vFtCciMjW/LPtoj99MhVt+Mfb6bbL9hu2wmTZgNd994qTAEw+U/r6k3qHWWaOQ==
+
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
+
+"@esbuild/netbsd-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.23.0.tgz#ba70db0114380d5f6cfb9003f1d378ce989cd65c"
+  integrity sha512-cRK+YDem7lFTs2Q5nEv/HHc4LnrfBCbH5+JHu6wm2eP+d8OZNoSMYgPZJq78vqQ9g+9+nMuIsAO7skzphRXHyw==
+
+"@esbuild/openbsd-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.0.tgz#72fc55f0b189f7a882e3cf23f332370d69dfd5db"
+  integrity sha512-suXjq53gERueVWu0OKxzWqk7NxiUWSUlrxoZK7usiF50C6ipColGR5qie2496iKGYNLhDZkPxBI3erbnYkU0rQ==
+
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
+
+"@esbuild/openbsd-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.23.0.tgz#b6ae7a0911c18fe30da3db1d6d17a497a550e5d8"
+  integrity sha512-6p3nHpby0DM/v15IFKMjAaayFhqnXV52aEmv1whZHX56pdkK+MEaLoQWj+H42ssFarP1PcomVhbsR4pkz09qBg==
+
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
+
+"@esbuild/sunos-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.23.0.tgz#58f0d5e55b9b21a086bfafaa29f62a3eb3470ad8"
+  integrity sha512-BFelBGfrBwk6LVrmFzCq1u1dZbG4zy/Kp93w2+y83Q5UGYF1d8sCzeLI9NXjKyujjBBniQa8R8PzLFAUrSM9OA==
+
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
+
+"@esbuild/win32-arm64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.23.0.tgz#b858b2432edfad62e945d5c7c9e5ddd0f528ca6d"
+  integrity sha512-lY6AC8p4Cnb7xYHuIxQ6iYPe6MfO2CC43XXKo9nBXDb35krYt7KGhQnOkRGar5psxYkircpCqfbNDB4uJbS2jQ==
+
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
+
+"@esbuild/win32-ia32@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.23.0.tgz#167ef6ca22a476c6c0c014a58b4f43ae4b80dec7"
+  integrity sha512-7L1bHlOTcO4ByvI7OXVI5pNN6HSu6pUQq9yodga8izeuB1KcT2UkHaH6118QJwopExPn0rMHIseCTx1CRo/uNA==
+
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
+
+"@esbuild/win32-x64@0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.23.0.tgz#db44a6a08520b5f25bbe409f34a59f2d4bcc7ced"
+  integrity sha512-Arm+WgUFLUATuoxCJcahGuk6Yj9Pzxd6l11Zb/2aAuv5kWWvvfhLFo2fni4uSK5vzlUdCGZ/BdV5tH8klj8p8g==
+
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
   integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
-  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.11.0":
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.1.tgz#a547badfc719eb3e5f4b556325e542fbe9d7a18f"
+  integrity sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==
 
-"@eslint/eslintrc@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
-  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+"@eslint/config-array@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.18.0.tgz#37d8fe656e0d5e3dbaea7758ea56540867fd074d"
+  integrity sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==
+  dependencies:
+    "@eslint/object-schema" "^2.1.4"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/core@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.7.0.tgz#a1bb4b6a4e742a5ff1894b7ee76fbf884ec72bd3"
+  integrity sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==
+
+"@eslint/eslintrc@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.1.0.tgz#dbd3482bfd91efa663cbe7aa1f506839868207b6"
+  integrity sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.6.0"
-    globals "^13.19.0"
+    espree "^10.0.1"
+    globals "^14.0.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.57.0":
-  version "8.57.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
-  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+"@eslint/js@9.13.0":
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.13.0.tgz#c5f89bcd57eb54d5d4fa8b77693e9c28dc97e547"
+  integrity sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==
+
+"@eslint/object-schema@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
+  integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
+
+"@eslint/plugin-kit@^0.2.0":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.2.1.tgz#cd14fe2db79fa639839dfef4105e83bad1814482"
+  integrity sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==
+  dependencies:
+    levn "^0.4.1"
+
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
+  integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/react-dom@^2.1.1":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
 "@flowjs/flow.js@^2.14.1":
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/@flowjs/flow.js/-/flow.js-2.14.1.tgz#267d9f9d0958f32267ea5815c2a7cc09b9219304"
   integrity sha512-99DWlPnksOOS8uHfo+bhSjvs8d2MfLTB/22JBDC2ONwz/OCdP+gL/iiM4puMSTE2wH4A2/+J0eMc7pKwusXunw==
 
-"@flowjs/ngx-flow@~0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@flowjs/ngx-flow/-/ngx-flow-0.6.0.tgz#4c1568b53c30e0a14e0f5093ec9a4032d048f167"
-  integrity sha512-oWgOQSpfrzDuR6eG98/jkK523xxCb8OIWSbWM1/87KJZzUJBzuO0jQIZspVxURjQGTNOoFl8cl9P6iNXnvBgPg==
+"@flowjs/ngx-flow@~0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@flowjs/ngx-flow/-/ngx-flow-0.8.1.tgz#81478914b1aaa6912e18820217fb1aa1a02b4ce0"
+  integrity sha512-PKQp2/v2OeKNXmtyoITaZrYvciKkvj7sF/Gn/Xt0s7GZMSumhCw0Ug4b3z++a2WJV4eqeYVOQ/092Om6E6Mu8A==
   dependencies:
     tslib "^2.2.0"
 
-"@geoman-io/leaflet-geoman-free@2.14.2":
-  version "2.14.2"
-  resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.14.2.tgz#c84c2115c263f34d11dc0b43859551639fe3d56b"
-  integrity sha512-6lIyG8RvSVdFjVjiQgBPyNASjymSyqzsiUeBW0pA+q41lB5fAg4SDC6SfJvWdEyDHa81Jb5FWjUkCc9O+u0gbg==
+"@fortawesome/fontawesome-common-types@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
+  integrity sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==
+
+"@fortawesome/fontawesome-svg-core@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
+  integrity sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
+"@geoman-io/leaflet-geoman-free@2.17.0":
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.17.0.tgz#9c8fce5c7a85e5d7ece3a7e5d0b82dbf2329bd81"
+  integrity sha512-vAY9tKB2I/Ui8d3QUBuebWnunI2sGjsfAUTXMMcf5UpISvPz67io4hpbKXid9GNsW6P4LGv1+ZzrmkpM78GzHA==
   dependencies:
     "@turf/boolean-contains" "^6.5.0"
     "@turf/kinks" "^6.5.0"
     "@turf/line-intersect" "^6.5.0"
     "@turf/line-split" "^6.5.0"
     lodash "4.17.21"
-    polygon-clipping "0.15.3"
+    polyclip-ts "^0.16.5"
 
-"@humanwhocodes/config-array@^0.11.14":
-  version "0.11.14"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
-  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+"@humanfs/core@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.0.tgz#08db7a8c73bb07673d9ebd925f2dad746411fcec"
+  integrity sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==
+
+"@humanfs/node@^0.16.5":
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/@humanfs/node/-/node-0.16.5.tgz#a9febb7e7ad2aff65890fdc630938f8d20aa84ba"
+  integrity sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==
   dependencies:
-    "@humanwhocodes/object-schema" "^2.0.2"
-    debug "^4.3.1"
-    minimatch "^3.0.5"
+    "@humanfs/core" "^0.19.0"
+    "@humanwhocodes/retry" "^0.3.0"
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
-  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
+"@humanwhocodes/retry@^0.3.0", "@humanwhocodes/retry@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.1.tgz#c72a5c76a9fbaf3488e231b13dc52c0da7bab42a"
+  integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
 
-"@iplab/ngx-color-picker@^15.0.2":
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/@iplab/ngx-color-picker/-/ngx-color-picker-15.1.0.tgz#7520cb4c58f06ec68006b103214f9a649d14b15f"
-  integrity sha512-pL/GxDcMQpOe5CVoRa2iNgpnYS4N+S6Gr/7RkCnOJsWEm+OOcf4K4X2BxhKZK+uF6jBFata+u8pwJv9VgCitnQ==
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
+"@iconify/utils@^2.1.32":
+  version "2.1.33"
+  resolved "https://registry.yarnpkg.com/@iconify/utils/-/utils-2.1.33.tgz#cbf7242a52fd0ec58c42d37d28e4406b5327e8c0"
+  integrity sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==
+  dependencies:
+    "@antfu/install-pkg" "^0.4.0"
+    "@antfu/utils" "^0.7.10"
+    "@iconify/types" "^2.0.0"
+    debug "^4.3.6"
+    kolorist "^1.8.0"
+    local-pkg "^0.5.0"
+    mlly "^1.7.1"
+
+"@inquirer/checkbox@^2.4.7":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/checkbox/-/checkbox-2.5.0.tgz#41c5c9dd332c0a8fa159be23982ce080d0b199d4"
+  integrity sha512-sMgdETOfi2dUHT8r7TT1BTKOwNvdDGFDXYWtQ2J69SvlYNntk9I/gJe7r5yvMwwsuKnYbuRs3pNhx4tgNck5aA==
   dependencies:
-    tslib "^2.3.0"
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/figures" "^1.0.5"
+    "@inquirer/type" "^1.5.3"
+    ansi-escapes "^4.3.2"
+    yoctocolors-cjs "^2.1.2"
+
+"@inquirer/confirm@3.1.22":
+  version "3.1.22"
+  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-3.1.22.tgz#23990624c11f60c6f7a5b0558c7505c35076a037"
+  integrity sha512-gsAKIOWBm2Q87CDfs9fEo7wJT3fwWIJfnDGMn9Qy74gBnNFOACDNfhUzovubbJjWnKLGBln7/NcSmZwj5DuEXg==
+  dependencies:
+    "@inquirer/core" "^9.0.10"
+    "@inquirer/type" "^1.5.2"
+
+"@inquirer/confirm@^3.1.22":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-3.2.0.tgz#6af1284670ea7c7d95e3f1253684cfbd7228ad6a"
+  integrity sha512-oOIwPs0Dvq5220Z8lGL/6LHRTEr9TgLHmiI99Rj1PJ1p1czTys+olrgBqZk4E2qC0YTzeHprxSQmoHioVdJ7Lw==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
+
+"@inquirer/core@^9.0.10", "@inquirer/core@^9.1.0":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-9.2.1.tgz#677c49dee399c9063f31e0c93f0f37bddc67add1"
+  integrity sha512-F2VBt7W/mwqEU4bL0RnHNZmC/OxzNx9cOYxHqnXX3MP6ruYvZUZAW9imgN9+h/uBT/oP8Gh888J2OZSbjSeWcg==
+  dependencies:
+    "@inquirer/figures" "^1.0.6"
+    "@inquirer/type" "^2.0.0"
+    "@types/mute-stream" "^0.0.4"
+    "@types/node" "^22.5.5"
+    "@types/wrap-ansi" "^3.0.0"
+    ansi-escapes "^4.3.2"
+    cli-width "^4.1.0"
+    mute-stream "^1.0.0"
+    signal-exit "^4.1.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^6.2.0"
+    yoctocolors-cjs "^2.1.2"
+
+"@inquirer/editor@^2.1.22":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/editor/-/editor-2.2.0.tgz#a41eb7b151bd9a6bc3c0b69219d02d82547bc387"
+  integrity sha512-9KHOpJ+dIL5SZli8lJ6xdaYLPPzB8xB9GZItg39MBybzhxA16vxmszmQFrRwbOA918WA2rvu8xhDEg/p6LXKbw==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
+    external-editor "^3.1.0"
+
+"@inquirer/expand@^2.1.22":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/expand/-/expand-2.3.0.tgz#afc44aee303315a85563e9d0275e658f0ee0e701"
+  integrity sha512-qnJsUcOGCSG1e5DTOErmv2BPQqrtT6uzqn1vI/aYGiPKq+FgslGZmtdnXbhuI7IlT7OByDoEEqdnhUnVR2hhLw==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
+    yoctocolors-cjs "^2.1.2"
 
-"@istanbuljs/load-nyc-config@^1.0.0":
+"@inquirer/figures@^1.0.5", "@inquirer/figures@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.6.tgz#1a562f916da39888c56b65b78259d2261bd7d40b"
+  integrity sha512-yfZzps3Cso2UbM7WlxKwZQh2Hs6plrbjs1QnzQDZhK2DgyCo6D8AaHps9olkNcUFlcYERMqU3uJSp1gmy3s/qQ==
+
+"@inquirer/input@^2.2.9":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/input/-/input-2.3.0.tgz#9b99022f53780fecc842908f3f319b52a5a16865"
+  integrity sha512-XfnpCStx2xgh1LIRqPXrTNEEByqQWoxsWYzNRSEUxJ5c6EQlhMogJ3vHKu8aXuTacebtaZzMAHwEL0kAflKOBw==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
+
+"@inquirer/number@^1.0.10":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
-  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  resolved "https://registry.yarnpkg.com/@inquirer/number/-/number-1.1.0.tgz#4dac004021ea67c89552a261564f103a494cac96"
+  integrity sha512-ilUnia/GZUtfSZy3YEErXLJ2Sljo/mf9fiKc08n18DdwdmDbOzRcTv65H1jjDvlsAuvdFXf4Sa/aL7iw/NanVA==
   dependencies:
-    camelcase "^5.3.1"
-    find-up "^4.1.0"
-    get-package-type "^0.1.0"
-    js-yaml "^3.13.1"
-    resolve-from "^5.0.0"
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
 
-"@istanbuljs/schema@^0.1.2":
+"@inquirer/password@^2.1.22":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/password/-/password-2.2.0.tgz#0b6f26336c259c8a9e5f5a3f2e1a761564f764ba"
+  integrity sha512-5otqIpgsPYIshqhgtEwSspBQE40etouR8VIxzpJkv9i0dVHIpyhiivbkH9/dGiMLdyamT54YRdGJLfl8TFnLHg==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
+    ansi-escapes "^4.3.2"
+
+"@inquirer/prompts@5.3.8":
+  version "5.3.8"
+  resolved "https://registry.yarnpkg.com/@inquirer/prompts/-/prompts-5.3.8.tgz#f394050d95076c2f1b046be324f06f619b257c3e"
+  integrity sha512-b2BudQY/Si4Y2a0PdZZL6BeJtl8llgeZa7U2j47aaJSCeAl1e4UI7y8a9bSkO3o/ZbZrgT5muy/34JbsjfIWxA==
+  dependencies:
+    "@inquirer/checkbox" "^2.4.7"
+    "@inquirer/confirm" "^3.1.22"
+    "@inquirer/editor" "^2.1.22"
+    "@inquirer/expand" "^2.1.22"
+    "@inquirer/input" "^2.2.9"
+    "@inquirer/number" "^1.0.10"
+    "@inquirer/password" "^2.1.22"
+    "@inquirer/rawlist" "^2.2.4"
+    "@inquirer/search" "^1.0.7"
+    "@inquirer/select" "^2.4.7"
+
+"@inquirer/rawlist@^2.2.4":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/rawlist/-/rawlist-2.3.0.tgz#6b2c0da39c1cd855af5608b2d627681cdac7277d"
+  integrity sha512-zzfNuINhFF7OLAtGHfhwOW2TlYJyli7lOUoJUXw/uyklcwalV6WRXBXtFIicN8rTRK1XTiPWB4UY+YuW8dsnLQ==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/type" "^1.5.3"
+    yoctocolors-cjs "^2.1.2"
+
+"@inquirer/search@^1.0.7":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/search/-/search-1.1.0.tgz#665928cac2326b9501ddafbb8606ce4823b3106b"
+  integrity sha512-h+/5LSj51dx7hp5xOn4QFnUaKeARwUCLs6mIhtkJ0JYPBLmEYjdHSYh7I6GrLg9LwpJ3xeX0FZgAG1q0QdCpVQ==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/figures" "^1.0.5"
+    "@inquirer/type" "^1.5.3"
+    yoctocolors-cjs "^2.1.2"
+
+"@inquirer/select@^2.4.7":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/select/-/select-2.5.0.tgz#345c6908ecfaeef3d84ddd2f9feb2f487c558efb"
+  integrity sha512-YmDobTItPP3WcEI86GvPo+T2sRHkxxOq/kXmsBjHS5BVXUgvgZ5AfJjkvQvZr03T81NnI3KrrRuMzeuYUQRFOA==
+  dependencies:
+    "@inquirer/core" "^9.1.0"
+    "@inquirer/figures" "^1.0.5"
+    "@inquirer/type" "^1.5.3"
+    ansi-escapes "^4.3.2"
+    yoctocolors-cjs "^2.1.2"
+
+"@inquirer/type@^1.5.1", "@inquirer/type@^1.5.2", "@inquirer/type@^1.5.3":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-1.5.5.tgz#303ea04ce7ad2e585b921b662b3be36ef7b4f09b"
+  integrity sha512-MzICLu4yS7V8AA61sANROZ9vT1H3ooca5dSmI1FjZkzq7o/koMsRfQSzRtFo+F3Ao4Sf1C0bpLKejpKB/+j6MA==
+  dependencies:
+    mute-stream "^1.0.0"
+
+"@inquirer/type@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-2.0.0.tgz#08fa513dca2cb6264fe1b0a2fabade051444e3f6"
+  integrity sha512-XvJRx+2KR3YXyYtPUUy+qd9i7p+GO9Ko6VIIpWlBrpWwXDv8WLFeHTxz35CfQFUiBMLXlGHhGzys7lqit9gWag==
+  dependencies:
+    mute-stream "^1.0.0"
+
+"@iplab/ngx-color-picker@^18.0.1":
+  version "18.0.1"
+  resolved "https://registry.yarnpkg.com/@iplab/ngx-color-picker/-/ngx-color-picker-18.0.1.tgz#d3e53f548a618ed6d8eda95c0887d0c742ae8bd3"
+  integrity sha512-FVRN75gsETJS11I4wd6vRZIHHYVV729EbUcb1Uohco3gmKJ461GW0EiLnpUfODcNDHG30A7Xwf++HkU3coIadg==
+  dependencies:
+    tslib "^2.3.0"
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/schema@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
@@ -1641,14 +2127,6 @@
   resolved "https://registry.yarnpkg.com/@jcubic/lily/-/lily-0.3.0.tgz#00b229aab69fe094a57fd37f27d32dd4f380c1d1"
   integrity sha512-4z6p4jLGSthc8gQ7wu4nHfGYn/IgCKFr+7hjuf80VdXUs7sm029mZGGDpS8sb29PVZWUBvMMTBCVGFhH2nN4Vw==
 
-"@jridgewell/gen-mapping@^0.1.0":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
-  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.0"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-
 "@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
@@ -1663,12 +2141,12 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
   integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
 
-"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.2.1":
+"@jridgewell/set-array@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
   integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
-"@jridgewell/source-map@^0.3.2", "@jridgewell/source-map@^0.3.3":
+"@jridgewell/source-map@^0.3.3":
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
   integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
@@ -1676,10 +2154,10 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.14":
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
 "@jridgewell/trace-mapping@0.3.9":
   version "0.3.9"
@@ -1689,7 +2167,7 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -1697,875 +2175,373 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@leichtgewicht/ip-codec@^2.0.1":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
-  integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
-
-"@mat-datetimepicker/core@~11.0.3":
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-11.0.3.tgz#8a3958a603d1d2ed8ddc443f0b10e89f1b8d16d6"
-  integrity sha512-1M9sPoB3TfRb8hREDnv5R6uTi0iMlaY6oskxew0a+HVNTzZOBhwWWdKnlect8u+pXCmRBZI0QdMwx8nazeBdnA==
-  dependencies:
-    tslib "^2.4.0"
-
-"@material-ui/core@4.12.3":
-  version "4.12.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
-  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.4"
-    "@material-ui/system" "^4.12.1"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.2"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    hoist-non-react-statics "^3.3.2"
-    popper.js "1.16.1-lts"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-    react-transition-group "^4.4.0"
-
-"@material-ui/icons@4.11.2":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
-  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-
-"@material-ui/pickers@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"
-  integrity sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==
-  dependencies:
-    "@babel/runtime" "^7.6.0"
-    "@date-io/core" "1.x"
-    "@types/styled-jsx" "^2.2.8"
-    clsx "^1.0.2"
-    react-transition-group "^4.0.0"
-    rifm "^0.7.0"
-
-"@material-ui/styles@^4.11.4":
-  version "4.11.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
-  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    csstype "^2.5.2"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.5.1"
-    jss-plugin-camel-case "^10.5.1"
-    jss-plugin-default-unit "^10.5.1"
-    jss-plugin-global "^10.5.1"
-    jss-plugin-nested "^10.5.1"
-    jss-plugin-props-sort "^10.5.1"
-    jss-plugin-rule-value-function "^10.5.1"
-    jss-plugin-vendor-prefixer "^10.5.1"
-    prop-types "^15.7.2"
-
-"@material-ui/system@^4.12.1":
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
-  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    csstype "^2.5.2"
-    prop-types "^15.7.2"
-
-"@material-ui/types@5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
-
-"@material-ui/utils@^4.11.2", "@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
-"@material/animation@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-15.0.0-canary.684e33d25.0.tgz#d42ecdd31da5635ff5b44a53c6fc8746de7f5a5a"
-  integrity sha512-5osi1z4JQIXcklPALbH/zTfOm2pDzHt9Fxm7ZyURy250xIZj6QjULRzPTnzOhC2ropfix9ra2Cfggbf0dcRbEQ==
-  dependencies:
-    tslib "^2.1.0"
-
-"@material/auto-init@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/auto-init/-/auto-init-15.0.0-canary.684e33d25.0.tgz#39caf04e5647b6d73a63f8d90a744a92d3394f31"
-  integrity sha512-OigQTmrVzkcGvxNjOaIe5oItTFPgrO9xLewvharDI6m6yvO1z7OBnkcW+sFN6ggLNYNxd0O1u9v64vMsmeDABQ==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/banner@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/banner/-/banner-15.0.0-canary.684e33d25.0.tgz#9e6e56f0fd1f572a046ea0dfe3fafa181a5e6c84"
-  integrity sha512-PqtGp3KWzdu58rWv/DIvSfe38m5YKOBbAAbBinSvgadBb/da+IE1t5F7YPNKE1T5lJsQBGVUYx6QBIeXm+aI/A==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/button" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/base@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/base/-/base-15.0.0-canary.684e33d25.0.tgz#fe9b3e01f7dc1ed064e06bfb0f8b072d0d7c7d10"
-  integrity sha512-oOaqb/SfjWwTKsdJUZmeh/Qrs41nIJI0N+zELsxnvbGjSIN1ZMAKYZFPMahqvC68OJ6+5CvJM8PoTNs5l+B8IQ==
-  dependencies:
-    tslib "^2.1.0"
-
-"@material/button@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/button/-/button-15.0.0-canary.684e33d25.0.tgz#714aaa80ceb73fef2852dd9b25bfe634076e957c"
-  integrity sha512-Nkekk4edeX+ObVOa7UlwavaHdmckPV5wU4SAJf3iA3R61cmz+KsgAgpzfcwv5WfNhIlc2nLu8QYEecpHdo9d/w==
-  dependencies:
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/card@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/card/-/card-15.0.0-canary.684e33d25.0.tgz#68c4007746a93422c9a010d27dcf25d7176edd72"
-  integrity sha512-xhyB7XX5KkEiCEqwSPkl58ZGYL6xFdnY62zimyBXJRG/Eaa0Swj3kW20hVCpt4f7c9Zmp8Se27rg8vnKmhvO3g==
-  dependencies:
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/checkbox@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/checkbox/-/checkbox-15.0.0-canary.684e33d25.0.tgz#2b48a55415eab10ce73ba87af8f5c2e77eeb1851"
-  integrity sha512-NFpM3TS924PmVsk2KQLNU95OYCf8ZwYgzeqfnAexU0bEfjUJXINBun2Go0AaeOUMjuvWUe+byjrXgv8SFYbMUA==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/chips@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/chips/-/chips-15.0.0-canary.684e33d25.0.tgz#81929e0c18ab58a8eb0682ead9d37352b8b583a3"
-  integrity sha512-z4ajQ4NnsAQ/Si9tZ4xmxzjj2Qb+vW++4QjCjjjwAGIZbCe0xglAnMh2t66XLJUxt7RoKZuZVEO7ZqcFZpvJFQ==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/checkbox" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    safevalues "^0.3.4"
-    tslib "^2.1.0"
-
-"@material/circular-progress@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/circular-progress/-/circular-progress-15.0.0-canary.684e33d25.0.tgz#8484ce2b53d074b48b6851f60758c2fac9496a89"
-  integrity sha512-G6qD0nGNtEUwWnAMJuA9INYFpZoKtx7KFjBaPF4Ol2YLHtmShALNAYyn54TMAK8AZ2IpW08PXjGS7Ye88vrdEQ==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/progress-indicator" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/data-table@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/data-table/-/data-table-15.0.0-canary.684e33d25.0.tgz#4c384fc74500aa4733ce3fe668a928007ef3b1c9"
-  integrity sha512-+wDw1DDDFfAsKAMzs84f/5GCjux39zjNfW8tL4wFbkWNwewmQrG9zaQMJhBpVOtLCrM8Gj6SOgOANqgqoCjvGg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/checkbox" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/icon-button" "15.0.0-canary.684e33d25.0"
-    "@material/linear-progress" "15.0.0-canary.684e33d25.0"
-    "@material/list" "15.0.0-canary.684e33d25.0"
-    "@material/menu" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/select" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@jsonjoy.com/base64@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jsonjoy.com/base64/-/base64-1.1.2.tgz#cf8ea9dcb849b81c95f14fc0aaa151c6b54d2578"
+  integrity sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==
 
-"@material/density@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/density/-/density-15.0.0-canary.684e33d25.0.tgz#9af1ea0e8942341f76f032d42a4cd132050a007e"
-  integrity sha512-661yEVRMGrlq6S6WuSbPRO+ZwpdUOg2glCc7y96doM6itSLOa3UEAldjOLfsYZVB74GnKCiuDp//QmfoRyYTfA==
+"@jsonjoy.com/json-pack@^1.0.3":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz#33ca57ee29d12feef540f2139225597469dec894"
+  integrity sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==
   dependencies:
-    tslib "^2.1.0"
+    "@jsonjoy.com/base64" "^1.1.1"
+    "@jsonjoy.com/util" "^1.1.2"
+    hyperdyperid "^1.2.0"
+    thingies "^1.20.0"
 
-"@material/dialog@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/dialog/-/dialog-15.0.0-canary.684e33d25.0.tgz#141164d6bdbf542f7224b172df40a79f2e562aa8"
-  integrity sha512-szn0dHnfeQTSOC6SSRSGAzX6Tnx+4NnSMUwNkXm+3bwjds8ZVK26+DXwLrP5f3ID5F1K5sFsRf2INo5/TNTHyQ==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/button" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/icon-button" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@jsonjoy.com/util@^1.1.2", "@jsonjoy.com/util@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@jsonjoy.com/util/-/util-1.3.0.tgz#e5623885bb5e0c48c1151e4dae422fb03a5887a1"
+  integrity sha512-Cebt4Vk7k1xHy87kHY7KSPLT77A7Ev7IfOblyLZhtYEhrdQ6fX4EoLq3xOQ3O/DRMEh2ok5nyC180E+ABS8Wmw==
 
-"@material/dom@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-15.0.0-canary.684e33d25.0.tgz#1487f4a0187aa8fb12819533537218888c2594eb"
-  integrity sha512-7pEJLYov+tGgfuD8mZxoVU6rWtPI8ppjTAhz+F27Hz9FG0JETMWTKpDPBXLnKvX7vhIxL83GvZ9geNHCe8Hfog==
+"@leichtgewicht/ip-codec@^2.0.1":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
+  integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
+
+"@listr2/prompt-adapter-inquirer@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-2.0.15.tgz#45f13178b13327a28a220057a34a886cab18218e"
+  integrity sha512-MZrGem/Ujjd4cPTLYDfCZK2iKKeiO/8OX13S6jqxldLs0Prf2aGqVlJ77nMBqMv7fzqgXEgjrNHLXcKR8l9lOg==
+  dependencies:
+    "@inquirer/type" "^1.5.1"
+
+"@lmdb/lmdb-darwin-arm64@3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.0.13.tgz#b09af72bde5a9933abfab34dc5c10e5b6c16d4a5"
+  integrity sha512-uiKPB0Fv6WEEOZjruu9a6wnW/8jrjzlZbxXscMB8kuCJ1k6kHpcBnuvaAWcqhbI7rqX5GKziwWEdD+wi2gNLfA==
+
+"@lmdb/lmdb-darwin-x64@3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.0.13.tgz#bc27aadf475954254b787ef609a9f598adc8ac6b"
+  integrity sha512-bEVIIfK5mSQoG1R19qA+fJOvCB+0wVGGnXHT3smchBVahYBdlPn2OsZZKzlHWfb1E+PhLBmYfqB5zQXFP7hJig==
+
+"@lmdb/lmdb-linux-arm64@3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.0.13.tgz#fd49c447e1e8304fc4101bb7e6b641f08d69ac28"
+  integrity sha512-afbVrsMgZ9dUTNUchFpj5VkmJRxvht/u335jUJ7o23YTbNbnpmXif3VKQGCtnjSh+CZaqm6N3CPG8KO3zwyZ1Q==
+
+"@lmdb/lmdb-linux-arm@3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.0.13.tgz#14ebce383cbc9d51cbe12581dfec3ef8ffc6b685"
+  integrity sha512-Yml1KlMzOnXj/tnW7yX8U78iAzTk39aILYvCPbqeewAq1kSzl+w59k/fiVkTBfvDi/oW/5YRxL+Fq+Y1Fr1r2Q==
+
+"@lmdb/lmdb-linux-x64@3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.0.13.tgz#49b9bfcd52df55ccc9e466cf27c0651e5434b320"
+  integrity sha512-vOtxu0xC0SLdQ2WRXg8Qgd8T32ak4SPqk5zjItRszrJk2BdeXqfGxBJbP7o4aOvSPSmSSv46Lr1EP4HXU8v7Kg==
+
+"@lmdb/lmdb-win32-x64@3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.0.13.tgz#93bcd6dc24afd1cc60dd88a65b9e4fab32dcf397"
+  integrity sha512-UCrMJQY/gJnOl3XgbWRZZUvGGBuKy6i0YNSptgMzHBjs+QYDYR1Mt/RLTOPy4fzzves65O1EDmlL//OzEqoLlA==
+
+"@mat-datetimepicker/core@~14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-14.0.0.tgz#1776ae74c3ff94b2bf4e1c6c01c9366c8ab876b5"
+  integrity sha512-jds4b/BPdu1Yy90y6lyucGfLxq3DKutvDLYTt4+YdSItMHu6vfkclAxllky0Qb1ANlNrFQAOdfNOCUIGTnnWag==
   dependencies:
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    tslib "^2.6.3"
 
-"@material/drawer@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/drawer/-/drawer-15.0.0-canary.684e33d25.0.tgz#c56dc67a441030cb4cdef2030309d34c1d5266cc"
-  integrity sha512-/KMckLf1PYU/H3PXnS4e0aFl03qG3JlSv4LGgX6juJufcONqGTl/m63EMO/L/eUy6H1CRrXmVDjik/jzHLyDhg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/list" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@mdi/svg@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-7.4.47.tgz#f8e5516aae129764a76d1bb2f27e55bee03e6e90"
+  integrity sha512-WQ2gDll12T9WD34fdRFgQVgO8bag3gavrAgJ0frN4phlwdJARpE6gO1YvLEMJR0KKgoc+/Ea/A0Pp11I00xBvw==
 
-"@material/elevation@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-15.0.0-canary.684e33d25.0.tgz#99ad187917d06a8480f780089d254864589c7d05"
-  integrity sha512-WDF8SsRtq3rXUbVVbd9K4DUijIPH0bUFSOreVYxudpuxAfTlDS5+aeS1EK9UIBFYLuba4u5wVT2tDv6e1RTfrQ==
+"@mermaid-js/parser@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@mermaid-js/parser/-/parser-0.3.0.tgz#7a28714599f692f93df130b299fa1aadc9f9c8ab"
+  integrity sha512-HsvL6zgE5sUPGgkIDlmAWR1HTNHz2Iy11BAWPTa4Jjabkpguy4Ze2gzfLrg6pdRuBvFwgUYyxiaNqZwrEEXepA==
   dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/fab@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/fab/-/fab-15.0.0-canary.684e33d25.0.tgz#12033d67712a04d25cb46e1646155a1a922e3cb8"
-  integrity sha512-KCu87rWOKEAe9vZcAm6K8XazYSWPNjMG+OhrbPjHW6bCO7as1YCgtmkBkhff7csY/rFmcVpIy884xtUfLmSudQ==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    langium "3.0.0"
 
-"@material/feature-targeting@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-15.0.0-canary.684e33d25.0.tgz#73247e0bcd25b0313a6f783ce8d0db3eb1d9b27a"
-  integrity sha512-HyH1erNTSjS63sigNSUMaCd0nJhTNdDFeC+myrxwtDaQm+uYJ8troCNtQM3g6mx0XATNtX5aTOoPmrM6yVVi1A==
+"@messageformat/core@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@messageformat/core/-/core-3.4.0.tgz#2814c23383dec7bddf535d54f2a03e410165ca9f"
+  integrity sha512-NgCFubFFIdMWJGN5WuQhHCNmzk7QgiVfrViFxcS99j7F5dDS5EP6raR54I+2ydhe4+5/XTn/YIEppFaqqVWHsw==
   dependencies:
-    tslib "^2.1.0"
-
-"@material/floating-label@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/floating-label/-/floating-label-15.0.0-canary.684e33d25.0.tgz#69565b508f4e9d19a9be589ccf495596c8102a07"
-  integrity sha512-f7TPp6bKpGvV3sYYiZHSGlrixXKkXXITW3Esp7KB9jRq42c0H82novmdwvY0eTef4ootmA2JEysr78KQfHBUPg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/focus-ring@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/focus-ring/-/focus-ring-15.0.0-canary.684e33d25.0.tgz#e47985e7a8b6a696db2354670a427a4fd34f30a5"
-  integrity sha512-ikw2RVUfgzXChpWIzPH1VzRvTjYb5ZKj4H+CZf7jqPUXMstFOZg90Bp7ARLZHqYiyNMuUq3zUTHozS6iHorSqg==
-  dependencies:
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-
-"@material/form-field@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/form-field/-/form-field-15.0.0-canary.684e33d25.0.tgz#033930402e9766c2c6249caa6e1295557af61a36"
-  integrity sha512-vpF9N/uq5no/7+8GAbEH0868FhOuBgxAWRr1Sfb+jthKfBr8OS/wPU/AHzZHdHdAm7PQynbeOXfDsX2dI//PDA==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/icon-button@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-15.0.0-canary.684e33d25.0.tgz#b1f1adba5f2947c3bb31795df2921fa2e7d1f862"
-  integrity sha512-wMI+XGzmIN/o2ePBKg2hLyx7H4pXCRAyyIKMQS1FMp1UKa2tYmiHVX/V8skhKwCqxg3i6Ls/LxMjfPxTR18WvQ==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    "@messageformat/date-skeleton" "^1.0.0"
+    "@messageformat/number-skeleton" "^1.0.0"
+    "@messageformat/parser" "^5.1.0"
+    "@messageformat/runtime" "^3.0.1"
+    make-plural "^7.0.0"
+    safe-identifier "^0.4.1"
 
-"@material/image-list@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/image-list/-/image-list-15.0.0-canary.684e33d25.0.tgz#d137369feea3011287906a6291784d692e701cdd"
-  integrity sha512-Ol+uaHYBe5R/cgzlfh5ONnMVX0wO6fV74JMUcQCQlxP6lXau/edARo4tkRc7A7UJUkU3VRv0EpEjLoCRNUPGaA==
-  dependencies:
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@messageformat/date-skeleton@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@messageformat/date-skeleton/-/date-skeleton-1.1.0.tgz#3bad068cbf5873d14592cfc7a73dd4d8615e2739"
+  integrity sha512-rmGAfB1tIPER+gh3p/RgA+PVeRE/gxuQ2w4snFWPF5xtb5mbWR7Cbw7wCOftcUypbD6HVoxrVdyyghPm3WzP5A==
 
-"@material/layout-grid@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/layout-grid/-/layout-grid-15.0.0-canary.684e33d25.0.tgz#4c9f3c2eee650f4ef2971a4c0facf7c7bc21f5f0"
-  integrity sha512-ALXE1mqFNb/RB2lVRQ3/r1Aufw2mFZnOjRE+boYDVepmAG/xWyPCyaGoavELJF5l4GAb0tXi8wA/8HeGbLOpuA==
-  dependencies:
-    tslib "^2.1.0"
+"@messageformat/number-skeleton@^1.0.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@messageformat/number-skeleton/-/number-skeleton-1.2.0.tgz#e7c245c41a1b2722bc59dad68f4d454f761bc9b4"
+  integrity sha512-xsgwcL7J7WhlHJ3RNbaVgssaIwcEyFkBqxHdcdaiJzwTZAWEOD8BuUFxnxV9k5S0qHN3v/KzUpq0IUpjH1seRg==
 
-"@material/line-ripple@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/line-ripple/-/line-ripple-15.0.0-canary.684e33d25.0.tgz#df4601a780dae919ffb9d2bec05fa189238c9d67"
-  integrity sha512-7hRx8C/e9i0P6pgQpNOMfTwSS2r1fwEvBL72QDVGLtLuoKKwsjjgP6Z0Jat/GeHJe87u9LQvGBoD4upt+of/HA==
+"@messageformat/parser@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@messageformat/parser/-/parser-5.1.0.tgz#05e4851c782d633ad735791dd0a68ee65d2a7201"
+  integrity sha512-jKlkls3Gewgw6qMjKZ9SFfHUpdzEVdovKFtW1qRhJ3WI4FW5R/NnGDqr8SDGz+krWDO3ki94boMmQvGke1HwUQ==
   dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/linear-progress@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/linear-progress/-/linear-progress-15.0.0-canary.684e33d25.0.tgz#7093199c8bb946bc15b677c968a43f8f032f546f"
-  integrity sha512-iJclt7mKmcMk6pqD7ocXKfCWZhqBoODp7N593jYlxVpTJuEz2wiVAjZUDn/YGj/Uz3CRH+2YFfOiLr9pwWjhDg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/progress-indicator" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/list@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/list/-/list-15.0.0-canary.684e33d25.0.tgz#2f12ac6250f9da19843ed122f3c6d87ca403dbc1"
-  integrity sha512-rQ+FCSdzmwTcT00IYE0uRV3CS4oGSccKFl9hkcF+aHFW61L7ORh/SCGUDPrEfQFrFkMn5f8qroVJjpUAMXBz4g==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/menu-surface@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/menu-surface/-/menu-surface-15.0.0-canary.684e33d25.0.tgz#c397ec61703a1e6b24ce2751e959b5526c909ba9"
-  integrity sha512-RVO5GAYcfWPaKwxsF/NhUAmrYXQCQBKvRQW0TIlbmAJz6lcFeTs6YZqF3u1C7qrL3ZQGz+sur/7ywj6QU0oMow==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/menu@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/menu/-/menu-15.0.0-canary.684e33d25.0.tgz#1fca04a5baa2514e850db82a218ebcc65ed8c0fe"
-  integrity sha512-r7wzDLSGSI9629/mfpvsMzkVxpmV75kcD3IrW0Pcu6/Bv/1xi0EvjcUXzNJJoQlwN4Zj35Ymz/PCjZkIDIz68Q==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/list" "15.0.0-canary.684e33d25.0"
-    "@material/menu-surface" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/notched-outline@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/notched-outline/-/notched-outline-15.0.0-canary.684e33d25.0.tgz#c18b48d8a9d5153717e1dcb13ac51fcec8ca8489"
-  integrity sha512-9YHcBkvJLPVYzkHcWoTpBZAFrEd+j1hjhGxLhh0LuNrZe8VroUkZD1TTnUAPHRG3os6EqEWWaKb0RN+aPIF2yQ==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/floating-label" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    moo "^0.5.1"
 
-"@material/progress-indicator@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-15.0.0-canary.684e33d25.0.tgz#260f87b3c300d917c84d610477c6dfa8fafcbf1a"
-  integrity sha512-c0icji4faeNWUoqGENGC7Hav0Puxh0RwXIDVizffaUxKIGbajpIp5+4Zop73fK/xFLGMB/npg7TbP+aCGjQ3fw==
+"@messageformat/runtime@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@messageformat/runtime/-/runtime-3.0.1.tgz#94d1f6c43265c28ef7aed98ecfcc0968c6c849ac"
+  integrity sha512-6RU5ol2lDtO8bD9Yxe6CZkl0DArdv0qkuoZC+ZwowU+cdRlVE1157wjCmlA5Rsf1Xc/brACnsZa5PZpEDfTFFg==
   dependencies:
-    tslib "^2.1.0"
-
-"@material/radio@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/radio/-/radio-15.0.0-canary.684e33d25.0.tgz#7a2846124c1e78d6a513aee8ca3bafbe3ffcf1a9"
-  integrity sha512-U3Eh8sNUA8trDla1Bq8Bo02foxYvtoewaKeF8A8tAju81XZ4jRiftfOsOWZDZEHCVbbCB2QwvutvFlnay5n+Aw==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/ripple@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-15.0.0-canary.684e33d25.0.tgz#1adb32e4f6dacbb9e65d26fb1a6194f25e8db6f0"
-  integrity sha512-RyePu7SjIm/OuyyEieZ/gxiPYkNZOZHeid72WRcN9ofdlljj2pifcdPvcfZA+v/DMS33xo5GjG2L/Qj6ClWrKw==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    make-plural "^7.0.0"
 
-"@material/rtl@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-15.0.0-canary.684e33d25.0.tgz#89f69a1ec2c9cc9054d38a778b5acd8346d69385"
-  integrity sha512-NqdJl8Ayupp1Th+vCNCpVQHbUFOuF7TCte9LD1norTIBUF/QizIxWby2W5uUEiPbnh5j9PmE1CJtfLwKun3pcw==
-  dependencies:
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz#9edec61b22c3082018a79f6d1c30289ddf3d9d11"
+  integrity sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==
 
-"@material/segmented-button@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/segmented-button/-/segmented-button-15.0.0-canary.684e33d25.0.tgz#1ea1409ca726f0a647670314fad408bc6a580241"
-  integrity sha512-bEGgg8vgXNLyukyV8HRjFMuQ6t6nm5LQ4Pgm22um61Yc8qyi0BOqV41OR4SVdUrUqZxh1aVD+p+4NN03+LfQXw==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/touch-target" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz#33677a275204898ad8acbf62734fc4dc0b6a4855"
+  integrity sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==
 
-"@material/select@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/select/-/select-15.0.0-canary.684e33d25.0.tgz#e5e2feef48fed1314509ec5f206b311d2617ed6f"
-  integrity sha512-kf178/2TeEinTv0mgmSBcmmExQ2h7a7dtR1E3WuqQgisJ/R6+zVLMkC2CnfIyzxYX2vkuUTG0ue3Reh/6XiqSg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/floating-label" "15.0.0-canary.684e33d25.0"
-    "@material/line-ripple" "15.0.0-canary.684e33d25.0"
-    "@material/list" "15.0.0-canary.684e33d25.0"
-    "@material/menu" "15.0.0-canary.684e33d25.0"
-    "@material/menu-surface" "15.0.0-canary.684e33d25.0"
-    "@material/notched-outline" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz#19edf7cdc2e7063ee328403c1d895a86dd28f4bb"
+  integrity sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==
 
-"@material/shape@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/shape/-/shape-15.0.0-canary.684e33d25.0.tgz#3e2ac86b9bff64a87c145d46178baca51e6cc99f"
-  integrity sha512-aEelpaTFmpnCji3TUGP9bVCS/bRVjUmLTHBPZtuu1gOrUVVtJ6kYOg73dZNJF+XOoNL2yOX/LRcKwsop29tptA==
-  dependencies:
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz#94fb0543ba2e28766c3fc439cabbe0440ae70159"
+  integrity sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==
 
-"@material/slider@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/slider/-/slider-15.0.0-canary.684e33d25.0.tgz#262bef7c33648a5381390c6df751adc3f5675c0d"
-  integrity sha512-WVyK+2pSNSZmj07M2K/a3TADoQ9FBCndfNC/vE7/wGIg4dddJJK5KvQ+yruf9R2cSzTL/S1sZ5WpyyeM8E9HTw==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz#4a0609ab5fe44d07c9c60a11e4484d3c38bbd6e3"
+  integrity sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==
 
-"@material/snackbar@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/snackbar/-/snackbar-15.0.0-canary.684e33d25.0.tgz#43734efbe42905c91c773cc95bfb9087c7e162c7"
-  integrity sha512-itO+DCkOannZzR1/cCHcqAm7ifhuFvXmDItNoA8qLEcAyJDJJRkhpwj3XQ01yuo9gBFcSctp7Txt7e+Hncm/Jg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/button" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/icon-button" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz#0aa5502d547b57abfc4ac492de68e2006e417242"
+  integrity sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==
+
+"@mui/base@5.0.0-beta.58":
+  version "5.0.0-beta.58"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.58.tgz#66ae4e1aaef8cfd9ae81bd55a70ce76b02eb5d3e"
+  integrity sha512-P0E7ZrxOuyYqBvVv9w8k7wm+Xzx/KRu+BGgFcR2htTsGCpJNQJCSUXNUZ50MUmSU9hzqhwbQWNXhV1MBTl6F7A==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@floating-ui/react-dom" "^2.1.1"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "6.0.0-rc.0"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
 
-"@material/switch@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/switch/-/switch-15.0.0-canary.684e33d25.0.tgz#cd10b954efc49197bd1beec279c23cf26b96eb03"
-  integrity sha512-Jxi0gl92yvvZZsAPxvVHzXx2ga+T/djMow98jvEczmpUorWnAhgiCr9CsSSRoosahWyRB8NLZOxUQrACxvffjw==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    safevalues "^0.3.4"
-    tslib "^2.1.0"
+"@mui/core-downloads-tracker@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.2.tgz#a15eb14d433100f734e56929f842c2ccc7cab691"
+  integrity sha512-1oE4U38/TtzLWRYWEm/m70dUbpcvBx0QvDVg6NtpOmSNQC1Mbx0X/rNvYDdZnn8DIsAiVQ+SZ3am6doSswUQ4g==
+
+"@mui/icons-material@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.1.2.tgz#3e4537c312687afbdd2fd289d5412731d5da3d11"
+  integrity sha512-7NNcjW5JoT9jHagrVbARA1o41vQY2xezDamtke+mEKKZmsJyejfRBOacSrPDfjZQ//lyhIjNKyzAwisxYJR47w==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+
+"@mui/lab@6.0.0-beta.10":
+  version "6.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-6.0.0-beta.10.tgz#cf6dce21e8491aa00facc0d6b1cd357bfb2ed58e"
+  integrity sha512-eqCBz5SZS8Un9To3UcjH01AxkOOgvme/g0ZstFC8Nz1Kg5/EJMA0ByhKS5AvUMzUKrv0FXMdbuPqbBvF3bVrXg==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/base" "5.0.0-beta.58"
+    "@mui/system" "^6.1.1"
+    "@mui/types" "^7.2.17"
+    "@mui/utils" "^6.1.1"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
 
-"@material/tab-bar@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/tab-bar/-/tab-bar-15.0.0-canary.684e33d25.0.tgz#621ca40d8ed36bf7213074c5737640ce49984480"
-  integrity sha512-SW/cMaDsIGGkM1ag3A7GJRlmr8eXmObWsvitQJzh6Azr5zzZtSI+GQygkMesAEE1gbpqOVN8d40rh3H7VVIAcA==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/tab" "15.0.0-canary.684e33d25.0"
-    "@material/tab-indicator" "15.0.0-canary.684e33d25.0"
-    "@material/tab-scroller" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@mui/material@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.1.2.tgz#9f47bfa6adcf3b8245799cbf4c027e3cb949bcc6"
+  integrity sha512-5TtHeAVX9D5d2LYfB1GAUn29BcVETVsrQ76Dwb2SpAfQGW3JVy4deJCAd0RrIkI3eEUrsl0E4xuBdreszxdTTg==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/core-downloads-tracker" "^6.1.2"
+    "@mui/system" "^6.1.2"
+    "@mui/types" "^7.2.17"
+    "@mui/utils" "^6.1.2"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+    react-transition-group "^4.4.5"
 
-"@material/tab-indicator@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/tab-indicator/-/tab-indicator-15.0.0-canary.684e33d25.0.tgz#305c4461a45394619c9f89efca616816d21035b1"
-  integrity sha512-kKICqSPqOlaf0lzaFFCmuOqPXJC+cK48Qmsc+m5o6fJhkmuZRCYpIwB2JeP+uZSOq/bTH+SrPtCtnVlgWg6ksA==
+"@mui/private-theming@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.1.2.tgz#1e093c7194dd9f8a511179e0e5c5b10798a4bfae"
+  integrity sha512-S8WcjZdNdi++8UhrrY8Lton5h/suRiQexvdTfdcPAlbajlvgM+kx+uJstuVIEyTb3gMkxzIZep87knZ0tqcR0g==
   dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    "@babel/runtime" "^7.25.6"
+    "@mui/utils" "^6.1.2"
+    prop-types "^15.8.1"
 
-"@material/tab-scroller@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/tab-scroller/-/tab-scroller-15.0.0-canary.684e33d25.0.tgz#ffe730dcca4fa1831fb541e9cdee9c566fff14ab"
-  integrity sha512-H6EU/TSiK/M2DyyORX5GEtXD9rKYxTMHC2VxsNWARPMFJGzgeW2ugYkFv+rKI1/c0bs0CJ4e+qFnOlBsQXZvyQ==
+"@mui/styled-engine@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.1.2.tgz#bef156ac2e47a67d49982ddb5fa4211974740a26"
+  integrity sha512-uKOfWkR23X39xj7th2nyTcCHqInTAXtUnqD3T5qRVdJcOPvu1rlgTleTwJC/FJvWZJBU6ieuTWDhbcx5SNViHQ==
   dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/tab" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/tab@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/tab/-/tab-15.0.0-canary.684e33d25.0.tgz#73b12b8e6916b1d0befc7dd64f0f43ae45ea2f20"
-  integrity sha512-WQL3wj9syHNcfe8KbgGGUcA34M8C/xZ+n0Fkkh8Kk6puVwaU+xqUNihsxPY6YzKpmh4PZ4oJaBdiN8zvFT1zqQ==
-  dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/focus-ring" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/tab-indicator" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@material/textfield@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/textfield/-/textfield-15.0.0-canary.684e33d25.0.tgz#ae3dcca57aa80a81a1fec6ae88877f6274d9ab6d"
-  integrity sha512-OvgpDXjvpyJTtAWskO69IDybFvDNzr9w2PN/Fk7yFm+uNVupaWz1Ew8lZ4gGslaTNSVmh2XcsvmzxcLINSiiNg==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/density" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/floating-label" "15.0.0-canary.684e33d25.0"
-    "@material/line-ripple" "15.0.0-canary.684e33d25.0"
-    "@material/notched-outline" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    "@babel/runtime" "^7.25.6"
+    "@emotion/cache" "^11.13.1"
+    "@emotion/sheet" "^1.4.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
 
-"@material/theme@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-15.0.0-canary.684e33d25.0.tgz#0fa6faa4fbe6f17607e2313c826e5edfecce052a"
-  integrity sha512-AZxaXXAvRKzAi20RlMxzt2U5UmkCWyv7DMWEBXsxtG5Tk54mi1HsbVUp3fxDPTlmL7Pq8p1/DESg/o7TgRCVlw==
-  dependencies:
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@mui/styles@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-6.1.2.tgz#24bc654cdb0aae369348453ee8d25e3a9c1ace56"
+  integrity sha512-fsQkTCyyBnjsmy7CM0LG95PJZAhTsmoC/iNk4ihVYmdubMQEeGXzeAWL8E6QBChCnANmjZwm2h5ENyLnCUUuzg==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@emotion/hash" "^0.9.2"
+    "@mui/private-theming" "^6.1.2"
+    "@mui/types" "^7.2.17"
+    "@mui/utils" "^6.1.2"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.10.0"
+    jss-plugin-camel-case "^10.10.0"
+    jss-plugin-default-unit "^10.10.0"
+    jss-plugin-global "^10.10.0"
+    jss-plugin-nested "^10.10.0"
+    jss-plugin-props-sort "^10.10.0"
+    jss-plugin-rule-value-function "^10.10.0"
+    jss-plugin-vendor-prefixer "^10.10.0"
+    prop-types "^15.8.1"
 
-"@material/tokens@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/tokens/-/tokens-15.0.0-canary.684e33d25.0.tgz#ebfec227b7f1ed9db35227b199a24765d1882356"
-  integrity sha512-wVwbQOTCXDPKYPdHQHLr026y36MMFelID1CmbfRk6mSol4O8yE9U0fXcShfRDW8Qo5E3X31w9c2A6T3neJY7wQ==
-  dependencies:
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-
-"@material/tooltip@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/tooltip/-/tooltip-15.0.0-canary.684e33d25.0.tgz#981a20a010a7c41064f1a655f3f2482588585ed5"
-  integrity sha512-dtm26QjxyQdinc8btgz6yys07b7bUW4FZgNF2EBPeGrICrPg7jf+JEvDziz5g8VMaTBQLOQRSCGy0MKuRlOjLw==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/button" "15.0.0-canary.684e33d25.0"
-    "@material/dom" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/tokens" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    safevalues "^0.3.4"
-    tslib "^2.1.0"
+"@mui/system@6.1.2", "@mui/system@^6.1.1", "@mui/system@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.1.2.tgz#28840b04c6fc70780620759d67de2c20bdc7d1c7"
+  integrity sha512-mzW7F1ZMIYS1aLON48Nrk9c65OrVEVQ+R4lUcTWs1lCSul0VGK23eo4dmY0NX5PS7Oe4xz3P5B9tQZZ7SYgxcg==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/private-theming" "^6.1.2"
+    "@mui/styled-engine" "^6.1.2"
+    "@mui/types" "^7.2.17"
+    "@mui/utils" "^6.1.2"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
 
-"@material/top-app-bar@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/top-app-bar/-/top-app-bar-15.0.0-canary.684e33d25.0.tgz#3f5084d6c1f7fbaa791f23ddabc8c13dd4548465"
-  integrity sha512-1M+oupUxflfW7u81P1XlxoLZB8bLzwtpKofIfDNRbEsiKhlLTERJR3Yak3BGE9xakNMysAaBHlkb5MrN5bNPFw==
-  dependencies:
-    "@material/animation" "15.0.0-canary.684e33d25.0"
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/elevation" "15.0.0-canary.684e33d25.0"
-    "@material/ripple" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/shape" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    "@material/typography" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+"@mui/types@^7.2.15", "@mui/types@^7.2.17":
+  version "7.2.17"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.17.tgz#329826062d4079de5ea2b97007575cebbba1fdbc"
+  integrity sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==
 
-"@material/touch-target@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-15.0.0-canary.684e33d25.0.tgz#4fed9c020cbd8d813b8c01f8590652b7c719cba7"
-  integrity sha512-zdE69Slg8+T7sTn1OwqZ6H7WBYac9mxJ/JlJqfTqthzIjZRcCxBSYymQJcDHjsrPnUojOtr9U4Tpm5YZ96TEkQ==
+"@mui/utils@6.0.0-rc.0":
+  version "6.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.0.0-rc.0.tgz#208c12c919b5cd1731f9d14784c05c35294a893e"
+  integrity sha512-tBp0ILEXDL0bbDDT8PnZOjCqSm5Dfk2N0Z45uzRw+wVl6fVvloC9zw8avl+OdX1Bg3ubs/ttKn8nRNv17bpM5A==
   dependencies:
-    "@material/base" "15.0.0-canary.684e33d25.0"
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/rtl" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
+    "@babel/runtime" "^7.25.0"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
 
-"@material/typography@15.0.0-canary.684e33d25.0":
-  version "15.0.0-canary.684e33d25.0"
-  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-15.0.0-canary.684e33d25.0.tgz#d2bd2cf9054206337b0b59a633e0dce8f8e3563b"
-  integrity sha512-aVnvgMwcfNa/K4wujzpKDIxjGl2hbkEL+m+OKDSQqWYjKcP9QrbzCXJruJBqxrBoPRHLbqo47k5f9uT8raSgjw==
+"@mui/utils@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
+  integrity sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==
   dependencies:
-    "@material/feature-targeting" "15.0.0-canary.684e33d25.0"
-    "@material/theme" "15.0.0-canary.684e33d25.0"
-    tslib "^2.1.0"
-
-"@mdi/svg@^7.2.96":
-  version "7.4.47"
-  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-7.4.47.tgz#f8e5516aae129764a76d1bb2f27e55bee03e6e90"
-  integrity sha512-WQ2gDll12T9WD34fdRFgQVgO8bag3gavrAgJ0frN4phlwdJARpE6gO1YvLEMJR0KKgoc+/Ea/A0Pp11I00xBvw==
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
 
-"@messageformat/core@^3.1.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@messageformat/core/-/core-3.3.0.tgz#31edd52a5f7d017adad85c929809f07741dcfd3f"
-  integrity sha512-YcXd3remTDdeMxAlbvW6oV9d/01/DZ8DHUFwSttO3LMzIZj3iO0NRw+u1xlsNNORFI+u0EQzD52ZX3+Udi0T3g==
+"@mui/utils@^6.1.1", "@mui/utils@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.1.2.tgz#3717cd9373324a92e48c34f74385350104be652c"
+  integrity sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==
   dependencies:
-    "@messageformat/date-skeleton" "^1.0.0"
-    "@messageformat/number-skeleton" "^1.0.0"
-    "@messageformat/parser" "^5.1.0"
-    "@messageformat/runtime" "^3.0.1"
-    make-plural "^7.0.0"
-    safe-identifier "^0.4.1"
-
-"@messageformat/date-skeleton@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@messageformat/date-skeleton/-/date-skeleton-1.0.1.tgz#980b8babe21a11433b6e1e8f6dc8c4cae4f5f56b"
-  integrity sha512-jPXy8fg+WMPIgmGjxSlnGJn68h/2InfT0TNSkVx0IGXgp4ynnvYkbZ51dGWmGySEK+pBiYUttbQdu5XEqX5CRg==
-
-"@messageformat/number-skeleton@^1.0.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@messageformat/number-skeleton/-/number-skeleton-1.2.0.tgz#e7c245c41a1b2722bc59dad68f4d454f761bc9b4"
-  integrity sha512-xsgwcL7J7WhlHJ3RNbaVgssaIwcEyFkBqxHdcdaiJzwTZAWEOD8BuUFxnxV9k5S0qHN3v/KzUpq0IUpjH1seRg==
+    "@babel/runtime" "^7.25.6"
+    "@mui/types" "^7.2.17"
+    "@types/prop-types" "^15.7.13"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
+"@mui/x-date-pickers@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-7.18.0.tgz#264158195aeeaf32a00519718f6c67c165b06711"
+  integrity sha512-12tXIoMj9vpS8fS/bS3kWPCoVrH38vNGCxgplI0vOnUrN9rJuYJz3agLPJe1S0xciTw+9W8ZSe3soaW+owoz1Q==
+  dependencies:
+    "@babel/runtime" "^7.25.6"
+    "@mui/utils" "^5.16.6"
+    "@mui/x-internals" "7.18.0"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
 
-"@messageformat/parser@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@messageformat/parser/-/parser-5.1.0.tgz#05e4851c782d633ad735791dd0a68ee65d2a7201"
-  integrity sha512-jKlkls3Gewgw6qMjKZ9SFfHUpdzEVdovKFtW1qRhJ3WI4FW5R/NnGDqr8SDGz+krWDO3ki94boMmQvGke1HwUQ==
+"@mui/x-internals@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-internals/-/x-internals-7.18.0.tgz#f079968d4f7ea93e63be9faf6ba8558d6f12923b"
+  integrity sha512-lzCHOWIR0cAIY1bGrWSprYerahbnH5C31ql/2OWCEjcngL2NAV1M6oKI2Vp4HheqzJ822c60UyWyapvyjSzY/A==
   dependencies:
-    moo "^0.5.1"
+    "@babel/runtime" "^7.25.6"
+    "@mui/utils" "^5.16.6"
 
-"@messageformat/runtime@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@messageformat/runtime/-/runtime-3.0.1.tgz#94d1f6c43265c28ef7aed98ecfcc0968c6c849ac"
-  integrity sha512-6RU5ol2lDtO8bD9Yxe6CZkl0DArdv0qkuoZC+ZwowU+cdRlVE1157wjCmlA5Rsf1Xc/brACnsZa5PZpEDfTFFg==
+"@nghedgehog/core@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@nghedgehog/core/-/core-0.0.4.tgz#4e3231847d0dac557a2e2dbdf1e3a52b106dd57c"
+  integrity sha512-5yl2ji0nBG/J8cI57ewxgE5Fl2pCXKL+QOCKUghvbfIgRZJ0sSA4TMQtt57x3/U6ymFoVHFw4vEPe3Vk2DABIg==
   dependencies:
-    make-plural "^7.0.0"
+    tslib "^2.3.0"
 
-"@ngrx/effects@^15.4.0":
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-15.4.0.tgz#31e80aa2ef13953772607b9c6dcb12efce2e1da5"
-  integrity sha512-/8gHhOM9aeGaw8OG2LLwi4I4p84xzG0EU9TqWrvQcW74wn8sFZONjLvUte5YOzJ5502PPFFrfXSOc+lHnVAJUA==
+"@ngrx/effects@^18.0.2":
+  version "18.0.2"
+  resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-18.0.2.tgz#5ef20346f486e733f962dfb8f7c577a1e476eae1"
+  integrity sha512-YojXcOD9Lsq4kl2HCjENccyUM/mOlgBdtddsg9j/ojzSUgu3ZuBVKLN3atrL2TJYkbMX1MN0RzafSkL3TPGFIA==
   dependencies:
+    "@ngrx/operators" "18.0.1"
     tslib "^2.0.0"
 
-"@ngrx/store-devtools@^15.4.0":
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-15.4.0.tgz#39c1a31f813dc4328ed0fb826843845c83422c2d"
-  integrity sha512-AqWRprSyS3u/vZlpsBOPMW1/0TZS2LE13/KpZedEY+RMCW+mi53esqgrdNGOB3Wr4vrI82Ar9fgaIm4TQO6LPg==
+"@ngrx/operators@18.0.1":
+  version "18.0.1"
+  resolved "https://registry.yarnpkg.com/@ngrx/operators/-/operators-18.0.1.tgz#fd127dce1bccb27824b77149fbb4f8b56d2ad8a9"
+  integrity sha512-M+QMrHNKgcuiLaRGZxJ4aQi5/OCRfKC4+T/63dsHyLFZ53/FFpF6a/ytSO1Q+tzOplZ5o99S+i8FVaZqNQ3LmQ==
+  dependencies:
+    tslib "^2.3.0"
+
+"@ngrx/store-devtools@^18.0.2":
+  version "18.0.2"
+  resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-18.0.2.tgz#81d61f8ea869651163c58226fdec3e02dfcf9bbf"
+  integrity sha512-NcfVGUOGNvl1luV+Lt8KDqqwuwNYYaSbEuGi4mq70Hb4ws3sO6BFL9v+AeHLCQ51vKccL/cYqDNMYe4QMD7UaA==
   dependencies:
     tslib "^2.0.0"
 
-"@ngrx/store@^15.4.0":
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-15.4.0.tgz#185ee18e5c4147c7db60fd3b223cc429f826d514"
-  integrity sha512-OvCuNBHL8mAUnRTS6QSFm+IunspsYNu2cCwDovBNn7EGhxRuGihBeNoX47jCqWPHBFtokj4BlatDfpJ/yCh4xQ==
+"@ngrx/store@^18.0.2":
+  version "18.0.2"
+  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-18.0.2.tgz#be885154531f52ce6fe0bcd1a6790c75544b42ea"
+  integrity sha512-ajwv0+njsO4vzArp9esnFvs1wyUb1U1W8E8LSCKrcW2hWWo9o1Pezj+JRsdQwatxHfrrPFuTDyajsl6GQM/JSA==
   dependencies:
     tslib "^2.0.0"
 
-"@ngtools/webpack@15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-15.2.10.tgz#8118450206ae9398d81ca2eebe1b369321ac5583"
-  integrity sha512-ZExB4rKh/Saad31O/Ofd2XvRuILuCNTYs0+qJL697Be2pzeewvzBhE4Xe1Mm7Jg13aWSPeuIdzSGOqCdwxxxFQ==
+"@ngtools/webpack@18.2.10":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-18.2.10.tgz#6fd94d33a9de0b5f48f8b900a9d32e4f8c89872e"
+  integrity sha512-CGYr8rdM5ntdb4kLUAhrLBPrhJQ4KBPo3KMT6qJE/S+jJJn5zHzedpuGFOCVhC1Siw+n1pOBSI8leTRJIW/eCQ==
 
-"@ngx-translate/core@^14.0.0":
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-14.0.0.tgz#af421d0e1a28376843f0fed375cd2fae7630a5ff"
-  integrity sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==
-  dependencies:
-    tslib "^2.3.0"
+"@ngx-translate/core@^15.0.0":
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-15.0.0.tgz#0fe55b9bd47e75b03d1123658f15fb7b5a534f3c"
+  integrity sha512-Am5uiuR0bOOxyoercDnAA3rJVizo4RRqJHo8N3RqJ+XfzVP/I845yEnMADykOHvM6HkVm4SZSnJBOiz0Anx5BA==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -2580,7 +2556,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -2588,31 +2564,43 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@npmcli/agent@^2.0.0":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@npmcli/agent/-/agent-2.2.2.tgz#967604918e62f620a648c7975461c9c9e74fc5d5"
+  integrity sha512-OrcNPXdpSl9UX7qPVRWbmWMCSXrcDa2M9DvrbOTj7ao1S4PlqVFYv9/yLKMkrJKZ/V5A/kDBC690or307i26Og==
+  dependencies:
+    agent-base "^7.1.0"
+    http-proxy-agent "^7.0.0"
+    https-proxy-agent "^7.0.1"
+    lru-cache "^10.0.1"
+    socks-proxy-agent "^8.0.3"
+
 "@npmcli/fs@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-3.1.0.tgz#233d43a25a91d68c3a863ba0da6a3f00924a173e"
-  integrity sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-3.1.1.tgz#59cdaa5adca95d135fc00f2bb53f5771575ce726"
+  integrity sha512-q9CRWjpHCMIh5sVyefoD1cA7PkvILqCZsnSOEUUivORLjxCO/Irmue2DprETiNgEqktDBZaM1Bi+jrarx1XdCg==
   dependencies:
     semver "^7.3.5"
 
-"@npmcli/git@^4.0.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-4.1.0.tgz#ab0ad3fd82bc4d8c1351b6c62f0fa56e8fe6afa6"
-  integrity sha512-9hwoB3gStVfa0N31ymBmrX+GuDGdVA/QWShZVqE0HK2Af+7QGGrCTbZia/SW0ImUTjTne7SP91qxDmtXvDHRPQ==
-  dependencies:
-    "@npmcli/promise-spawn" "^6.0.0"
-    lru-cache "^7.4.4"
-    npm-pick-manifest "^8.0.0"
-    proc-log "^3.0.0"
+"@npmcli/git@^5.0.0":
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-5.0.8.tgz#8ba3ff8724192d9ccb2735a2aa5380a992c5d3d1"
+  integrity sha512-liASfw5cqhjNW9UFd+ruwwdEf/lbOAQjLL2XY2dFW/bkJheXDYZgOyul/4gVvEV4BWkTXjYGmDqMw9uegdbJNQ==
+  dependencies:
+    "@npmcli/promise-spawn" "^7.0.0"
+    ini "^4.1.3"
+    lru-cache "^10.0.1"
+    npm-pick-manifest "^9.0.0"
+    proc-log "^4.0.0"
     promise-inflight "^1.0.1"
     promise-retry "^2.0.1"
     semver "^7.3.5"
-    which "^3.0.0"
+    which "^4.0.0"
 
 "@npmcli/installed-package-contents@^2.0.1":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/installed-package-contents/-/installed-package-contents-2.0.2.tgz#bfd817eccd9e8df200919e73f57f9e3d9e4f9e33"
-  integrity sha512-xACzLPhnfD51GKvTOOuNX2/V4G4mz9/1I2MfDoye9kBM3RYe5g2YbscsaGoTlaWqkxeiapBWyseULVKpSVHtKQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/installed-package-contents/-/installed-package-contents-2.1.0.tgz#63048e5f6e40947a3a88dcbcb4fd9b76fdd37c17"
+  integrity sha512-c8UuGLeZpm69BryRykLuKRyKFZYJsZSCT4aVY5ds4omyZqJ172ApzgfKJ5eV/r3HgLdUYgFVe54KSFVjKoe27w==
   dependencies:
     npm-bundled "^3.0.0"
     npm-normalize-package-bin "^3.0.0"
@@ -2622,66 +2610,308 @@
   resolved "https://registry.yarnpkg.com/@npmcli/node-gyp/-/node-gyp-3.0.0.tgz#101b2d0490ef1aa20ed460e4c0813f0db560545a"
   integrity sha512-gp8pRXC2oOxu0DUE1/M3bYtb1b3/DbJ5aM113+XJBgfXdussRAsX0YOrOhdd8WvnAR6auDBvJomGAkLKA5ydxA==
 
-"@npmcli/promise-spawn@^6.0.0", "@npmcli/promise-spawn@^6.0.1":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-6.0.2.tgz#c8bc4fa2bd0f01cb979d8798ba038f314cfa70f2"
-  integrity sha512-gGq0NJkIGSwdbUt4yhdF8ZrmkGKVz9vAdVzpOfnom+V8PLSmSOVhZwbNvZZS1EYcJN5hzzKBxmmVVAInM6HQLg==
+"@npmcli/package-json@^5.0.0", "@npmcli/package-json@^5.1.0":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/package-json/-/package-json-5.2.1.tgz#df69477b1023b81ff8503f2b9db4db4faea567ed"
+  integrity sha512-f7zYC6kQautXHvNbLEWgD/uGu1+xCn9izgqBfgItWSx22U0ZDekxN08A1vM8cTxj/cRVe0Q94Ode+tdoYmIOOQ==
   dependencies:
-    which "^3.0.0"
+    "@npmcli/git" "^5.0.0"
+    glob "^10.2.2"
+    hosted-git-info "^7.0.0"
+    json-parse-even-better-errors "^3.0.0"
+    normalize-package-data "^6.0.0"
+    proc-log "^4.0.0"
+    semver "^7.5.3"
 
-"@npmcli/run-script@^6.0.0":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-6.0.2.tgz#a25452d45ee7f7fb8c16dfaf9624423c0c0eb885"
-  integrity sha512-NCcr1uQo1k5U+SYlnIrbAh3cxy+OQT1VtqiAbxdymSlptbzBb62AjH2xXgjNCoP073hoa1CfCAcwoZ8k96C4nA==
+"@npmcli/promise-spawn@^7.0.0":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-7.0.2.tgz#1d53d34ffeb5d151bfa8ec661bcccda8bbdfd532"
+  integrity sha512-xhfYPXoV5Dy4UkY0D+v2KkwvnDfiA/8Mt3sWCGI/hM03NsYIH8ZaG6QzS9x7pje5vHZBZJ2v6VRFVTWACnqcmQ==
+  dependencies:
+    which "^4.0.0"
+
+"@npmcli/redact@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/redact/-/redact-2.0.1.tgz#95432fd566e63b35c04494621767a4312c316762"
+  integrity sha512-YgsR5jCQZhVmTJvjduTOIHph0L73pK8xwMVaDY0PatySqVM9AZj93jpoXYSJqfHFxFkN9dmqTw6OiqExsS3LPw==
+
+"@npmcli/run-script@^8.0.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-8.1.0.tgz#a563e5e29b1ca4e648a6b1bbbfe7220b4bfe39fc"
+  integrity sha512-y7efHHwghQfk28G2z3tlZ67pLG0XdfYbcVG26r7YIXALRsrVQcTq4/tdenSmdOrEsNahIYA/eh8aEVROWGFUDg==
   dependencies:
     "@npmcli/node-gyp" "^3.0.0"
-    "@npmcli/promise-spawn" "^6.0.0"
-    node-gyp "^9.0.0"
-    read-package-json-fast "^3.0.0"
-    which "^3.0.0"
+    "@npmcli/package-json" "^5.0.0"
+    "@npmcli/promise-spawn" "^7.0.0"
+    node-gyp "^10.0.0"
+    proc-log "^4.0.0"
+    which "^4.0.0"
+
+"@one-ini/wasm@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@one-ini/wasm/-/wasm-0.1.1.tgz#6013659736c9dbfccc96e8a9c2b3de317df39323"
+  integrity sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pkgr/core@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
+  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
+
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@schematics/angular@15.2.10":
-  version "15.2.10"
-  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-15.2.10.tgz#fa6c05f37ba82422abd6b3f13a2fc78ec7a4eb3d"
-  integrity sha512-eLdyP+T1TueNQ8FCP7sP+tt8z+YQ1BINsJsyAyoJT/XZjcCV7LUxgDIU94/kuvIotmJ2xTuFWHFPfAY+CN3duQ==
+"@rc-component/portal@^1.1.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.2.tgz#55db1e51d784e034442e9700536faaa6ab63fc71"
+  integrity sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    classnames "^2.3.2"
+    rc-util "^5.24.4"
+
+"@rc-component/trigger@^2.1.1":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@rc-component/trigger/-/trigger-2.2.3.tgz#b47e945115e2d0a7f7e067dbb9ed76c91c1b4385"
+  integrity sha512-X1oFIpKoXAMXNDYCviOmTfuNuYxE4h5laBsyCqVAVMjNHxoF3/uiyA7XdegK1XbCvBbCZ6P6byWrEoDRpKL8+A==
   dependencies:
-    "@angular-devkit/core" "15.2.10"
-    "@angular-devkit/schematics" "15.2.10"
-    jsonc-parser "3.2.0"
+    "@babel/runtime" "^7.23.2"
+    "@rc-component/portal" "^1.1.0"
+    classnames "^2.3.2"
+    rc-motion "^2.0.0"
+    rc-resize-observer "^1.3.1"
+    rc-util "^5.38.0"
 
-"@sigstore/bundle@^1.1.0":
+"@rollup/rollup-android-arm-eabi@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz#8b613b9725e8f9479d142970b106b6ae878610d5"
+  integrity sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==
+
+"@rollup/rollup-android-arm-eabi@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz#1661ff5ea9beb362795304cb916049aba7ac9c54"
+  integrity sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==
+
+"@rollup/rollup-android-arm64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz#654ca1049189132ff602bfcf8df14c18da1f15fb"
+  integrity sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==
+
+"@rollup/rollup-android-arm64@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz#2ffaa91f1b55a0082b8a722525741aadcbd3971e"
+  integrity sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==
+
+"@rollup/rollup-darwin-arm64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz#6d241d099d1518ef0c2205d96b3fa52e0fe1954b"
+  integrity sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==
+
+"@rollup/rollup-darwin-arm64@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz#627007221b24b8cc3063703eee0b9177edf49c1f"
+  integrity sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==
+
+"@rollup/rollup-darwin-x64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz#42bd19d292a57ee11734c980c4650de26b457791"
+  integrity sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==
+
+"@rollup/rollup-darwin-x64@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz#0605506142b9e796c370d59c5984ae95b9758724"
+  integrity sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz#f23555ee3d8fe941c5c5fd458cd22b65eb1c2232"
+  integrity sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz#62dfd196d4b10c0c2db833897164d2d319ee0cbb"
+  integrity sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==
+
+"@rollup/rollup-linux-arm-musleabihf@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz#f3bbd1ae2420f5539d40ac1fde2b38da67779baa"
+  integrity sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==
+
+"@rollup/rollup-linux-arm-musleabihf@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz#53ce72aeb982f1f34b58b380baafaf6a240fddb3"
+  integrity sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==
+
+"@rollup/rollup-linux-arm64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz#7abe900120113e08a1f90afb84c7c28774054d15"
+  integrity sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==
+
+"@rollup/rollup-linux-arm64-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz#1632990f62a75c74f43e4b14ab3597d7ed416496"
+  integrity sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==
+
+"@rollup/rollup-linux-arm64-musl@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz#9e655285c8175cd44f57d6a1e8e5dedfbba1d820"
+  integrity sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==
+
+"@rollup/rollup-linux-arm64-musl@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz#8c03a996efb41e257b414b2e0560b7a21f2d9065"
+  integrity sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz#9a79ae6c9e9d8fe83d49e2712ecf4302db5bef5e"
+  integrity sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz#5b98729628d5bcc8f7f37b58b04d6845f85c7b5d"
+  integrity sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==
+
+"@rollup/rollup-linux-riscv64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz#67ac70eca4ace8e2942fabca95164e8874ab8128"
+  integrity sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==
+
+"@rollup/rollup-linux-riscv64-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz#48e42e41f4cabf3573cfefcb448599c512e22983"
+  integrity sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==
+
+"@rollup/rollup-linux-s390x-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz#9f883a7440f51a22ed7f99e1d070bd84ea5005fc"
+  integrity sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==
+
+"@rollup/rollup-linux-s390x-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz#e0b4f9a966872cb7d3e21b9e412a4b7efd7f0b58"
+  integrity sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==
+
+"@rollup/rollup-linux-x64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz#70116ae6c577fe367f58559e2cffb5641a1dd9d0"
+  integrity sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==
+
+"@rollup/rollup-linux-x64-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz#78144741993100f47bd3da72fce215e077ae036b"
+  integrity sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==
+
+"@rollup/rollup-linux-x64-musl@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz#f473f88219feb07b0b98b53a7923be716d1d182f"
+  integrity sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==
+
+"@rollup/rollup-linux-x64-musl@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz#d9fe32971883cd1bd858336bd33a1c3ca6146127"
+  integrity sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==
+
+"@rollup/rollup-win32-arm64-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz#4349482d17f5d1c58604d1c8900540d676f420e0"
+  integrity sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==
+
+"@rollup/rollup-win32-arm64-msvc@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz#71fa3ea369316db703a909c790743972e98afae5"
+  integrity sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz#a6fc39a15db618040ec3c2a24c1e26cb5f4d7422"
+  integrity sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==
+
+"@rollup/rollup-win32-ia32-msvc@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz#653f5989a60658e17d7576a3996deb3902e342e2"
+  integrity sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==
+
+"@rollup/rollup-win32-x64-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz#3dd5d53e900df2a40841882c02e56f866c04d202"
+  integrity sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==
+
+"@rollup/rollup-win32-x64-msvc@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz#0574d7e87b44ee8511d08cc7f914bcb802b70818"
+  integrity sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==
+
+"@rtsao/scc@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@sigstore/bundle/-/bundle-1.1.0.tgz#17f8d813b09348b16eeed66a8cf1c3d6bd3d04f1"
-  integrity sha512-PFutXEy0SmQxYI4texPw3dd2KewuNqv7OuK1ZFtY2fM754yhvG2KdgwIhRnoEE2uHdtdGNQ8s0lb94dW9sELog==
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@schematics/angular@18.2.10":
+  version "18.2.10"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-18.2.10.tgz#8ef1e67d266c334e71bac38cdef4cefab141f244"
+  integrity sha512-2pDHT4aSzfs8Up4RQmHHuFd5FeuUebS1ZJwyt46MfXzRMFtzUZV/JKsIvDqyMwnkvFfLvgJyTCkl8JGw5jQObg==
   dependencies:
-    "@sigstore/protobuf-specs" "^0.2.0"
+    "@angular-devkit/core" "18.2.10"
+    "@angular-devkit/schematics" "18.2.10"
+    jsonc-parser "3.3.1"
 
-"@sigstore/protobuf-specs@^0.2.0":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@sigstore/protobuf-specs/-/protobuf-specs-0.2.1.tgz#be9ef4f3c38052c43bd399d3f792c97ff9e2277b"
-  integrity sha512-XTWVxnWJu+c1oCshMLwnKvz8ZQJJDVOlciMfgpJBQbThVjKTCG8dwyhgLngBD2KN0ap9F/gOV8rFDEx8uh7R2A==
+"@sigstore/bundle@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@sigstore/bundle/-/bundle-2.3.2.tgz#ad4dbb95d665405fd4a7a02c8a073dbd01e4e95e"
+  integrity sha512-wueKWDk70QixNLB363yHc2D2ItTgYiMTdPwK8D9dKQMR3ZQ0c35IxP5xnwQ8cNLoCgCRcHf14kE+CLIvNX1zmA==
+  dependencies:
+    "@sigstore/protobuf-specs" "^0.3.2"
 
-"@sigstore/sign@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@sigstore/sign/-/sign-1.0.0.tgz#6b08ebc2f6c92aa5acb07a49784cb6738796f7b4"
-  integrity sha512-INxFVNQteLtcfGmcoldzV6Je0sbbfh9I16DM4yJPw3j5+TFP8X6uIiA18mvpEa9yyeycAKgPmOA3X9hVdVTPUA==
+"@sigstore/core@^1.0.0", "@sigstore/core@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@sigstore/core/-/core-1.1.0.tgz#5583d8f7ffe599fa0a89f2bf289301a5af262380"
+  integrity sha512-JzBqdVIyqm2FRQCulY6nbQzMpJJpSiJ8XXWMhtOX9eKgaXXpfNOF53lzQEjIydlStnd/eFtuC1dW4VYdD93oRg==
+
+"@sigstore/protobuf-specs@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@sigstore/protobuf-specs/-/protobuf-specs-0.3.2.tgz#5becf88e494a920f548d0163e2978f81b44b7d6f"
+  integrity sha512-c6B0ehIWxMI8wiS/bj6rHMPqeFvngFV7cDU/MY+B16P9Z3Mp9k8L93eYZ7BYzSickzuqAQqAq0V956b3Ju6mLw==
+
+"@sigstore/sign@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@sigstore/sign/-/sign-2.3.2.tgz#d3d01e56d03af96fd5c3a9b9897516b1233fc1c4"
+  integrity sha512-5Vz5dPVuunIIvC5vBb0APwo7qKA4G9yM48kPWJT+OEERs40md5GoUR1yedwpekWZ4m0Hhw44m6zU+ObsON+iDA==
+  dependencies:
+    "@sigstore/bundle" "^2.3.2"
+    "@sigstore/core" "^1.0.0"
+    "@sigstore/protobuf-specs" "^0.3.2"
+    make-fetch-happen "^13.0.1"
+    proc-log "^4.2.0"
+    promise-retry "^2.0.1"
+
+"@sigstore/tuf@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@sigstore/tuf/-/tuf-2.3.4.tgz#da1d2a20144f3b87c0172920cbc8dcc7851ca27c"
+  integrity sha512-44vtsveTPUpqhm9NCrbU8CWLe3Vck2HO1PNLw7RIajbB7xhtn5RBPm1VNSCMwqGYHhDsBJG8gDF0q4lgydsJvw==
   dependencies:
-    "@sigstore/bundle" "^1.1.0"
-    "@sigstore/protobuf-specs" "^0.2.0"
-    make-fetch-happen "^11.0.1"
+    "@sigstore/protobuf-specs" "^0.3.2"
+    tuf-js "^2.2.1"
 
-"@sigstore/tuf@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@sigstore/tuf/-/tuf-1.0.3.tgz#2a65986772ede996485728f027b0514c0b70b160"
-  integrity sha512-2bRovzs0nJZFlCN3rXirE4gwxCn97JNjMmwpecqlbgV9WcxX7WRuIrgzx/X7Ib7MYRbyUTpBYE0s2x6AmZXnlg==
+"@sigstore/verify@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@sigstore/verify/-/verify-1.2.1.tgz#c7e60241b432890dcb8bd8322427f6062ef819e1"
+  integrity sha512-8iKx79/F73DKbGfRf7+t4dqrc0bRr0thdPrxAtCKWRm/F0tG71i6O1rvlnScncJLLBZHn3h8M3c1BSUAb9yu8g==
   dependencies:
-    "@sigstore/protobuf-specs" "^0.2.0"
-    tuf-js "^1.1.7"
+    "@sigstore/bundle" "^2.3.2"
+    "@sigstore/core" "^1.1.0"
+    "@sigstore/protobuf-specs" "^0.3.2"
 
-"@socket.io/component-emitter@~3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
-  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+"@sindresorhus/merge-streams@^2.1.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
+  integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
 
 "@svgdotjs/svg.filter.js@^3.0.8":
   version "3.0.8"
@@ -2690,10 +2920,10 @@
   dependencies:
     "@svgdotjs/svg.js" "^3.1.1"
 
-"@svgdotjs/svg.js@^3.0.16", "@svgdotjs/svg.js@^3.1.1", "@svgdotjs/svg.js@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@svgdotjs/svg.js/-/svg.js-3.2.0.tgz#6baa8cef6778a93818ac18faa2055222e60aa644"
-  integrity sha512-Tr8p+QVP7y+QT1GBlq1Tt57IvedVH8zCPoYxdHLX0Oof3a/PqnC/tXAkVufv1JQJfsDHlH/UrjcDfgxSofqSNA==
+"@svgdotjs/svg.js@^3.0.16", "@svgdotjs/svg.js@^3.1.1", "@svgdotjs/svg.js@^3.2.4":
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz#4716be92a64c66b29921b63f7235fcfb953fb13a"
+  integrity sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==
 
 "@svgdotjs/svg.panzoom.js@^2.1.2":
   version "2.1.2"
@@ -2702,23 +2932,18 @@
   dependencies:
     "@svgdotjs/svg.js" "^3.0.16"
 
-"@tinymce/tinymce-angular@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-angular/-/tinymce-angular-7.0.0.tgz#010de497d5774a8bdc5d5936bf4fb976adf05f56"
-  integrity sha512-IKNaG/ihlxE1XCfq6lzULbnsqZO9KNJtlpu5jo6JDJDL9zcFzj/N2A16Kk7rTj1yfmDoB1IXAk/BpMOvgDY8cg==
+"@tinymce/tinymce-angular@^8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-angular/-/tinymce-angular-8.0.1.tgz#a17b4a5bef87d563e63dc442ffeb4b82d2137da3"
+  integrity sha512-m0/ne5nL00YeZ7wCyhBVwKUbvS8fQZ+S+T5pinqTIqTUKpcfIC2+BIKqzUpS+niiRCowFoZl5eVlI5zdFN9/0A==
   dependencies:
-    tinymce "^6.0.0 || ^5.5.0"
+    tinymce "^7.0.0 || ^6.0.0 || ^5.5.0"
     tslib "^2.3.0"
 
-"@tootallnate/once@2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
-  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
-
 "@tsconfig/node10@^1.0.7":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
-  integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.11.tgz#6ee46400685f130e278128c7b38b7e031ff5b2f2"
+  integrity sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==
 
 "@tsconfig/node12@^1.0.7":
   version "1.0.11"
@@ -2735,20 +2960,30 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
   integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
 
-"@tufjs/canonical-json@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz#eade9fd1f537993bc1f0949f3aea276ecc4fab31"
-  integrity sha512-QTnf++uxunWvG2z3UFNzAoQPHxnSXOwtaI3iJ+AohhV+5vONuArPjJE7aPXPVXfXJsqrVbZBu9b81AJoSd09IQ==
+"@tufjs/canonical-json@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz#a52f61a3d7374833fca945b2549bc30a2dd40d0a"
+  integrity sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==
 
-"@tufjs/models@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@tufjs/models/-/models-1.0.4.tgz#5a689630f6b9dbda338d4b208019336562f176ef"
-  integrity sha512-qaGV9ltJP0EO25YfFUPhxRVK0evXFIAGicsVXuRim4Ed9cjPxYhNnNJ49SFmbeLgtxpslIkX317IgpfcHPVj/A==
+"@tufjs/models@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@tufjs/models/-/models-2.0.1.tgz#e429714e753b6c2469af3212e7f320a6973c2812"
+  integrity sha512-92F7/SFyufn4DXsha9+QfKnN03JGqtMFMXgSHbZOo8JG59WkTni7UzAouNQDf7AuP9OAMxVOPQcqG3sB7w+kkg==
   dependencies:
-    "@tufjs/canonical-json" "1.0.0"
-    minimatch "^9.0.0"
+    "@tufjs/canonical-json" "2.0.0"
+    minimatch "^9.0.4"
+
+"@turf/bbox@*":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-7.1.0.tgz#45a9287c084f7b79577ee88b7b539d83562b923b"
+  integrity sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@turf/meta" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
 
-"@turf/bbox@*", "@turf/bbox@^6.5.0":
+"@turf/bbox@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-6.5.0.tgz#bec30a744019eae420dac9ea46fb75caa44d8dc5"
   integrity sha512-RBbLaao5hXTYyyg577iuMtDB8ehxMlUqHEJiMs8jT1GHkFhr6sYre3lmLsPeYEi/ZKj5TP5tt7fkzNdJ4GIVyw==
@@ -2812,6 +3047,14 @@
   resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e"
   integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==
 
+"@turf/helpers@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-7.1.0.tgz#eb734e291c9c205822acdd289fe20e91c3cb1641"
+  integrity sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==
+  dependencies:
+    "@types/geojson" "^7946.0.10"
+    tslib "^2.6.2"
+
 "@turf/invariant@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-6.5.0.tgz#970afc988023e39c7ccab2341bd06979ddc7463f"
@@ -2869,6 +3112,14 @@
   dependencies:
     "@turf/helpers" "^6.5.0"
 
+"@turf/meta@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-7.1.0.tgz#b2af85afddd0ef08aeae8694a12370a4f06b6d13"
+  integrity sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+
 "@turf/nearest-point-on-line@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/nearest-point-on-line/-/nearest-point-on-line-6.5.0.tgz#8e1cd2cdc0b5acaf4c8d8b3b33bb008d3cb99e7b"
@@ -2898,7 +3149,7 @@
     "@turf/helpers" "^6.5.0"
     "@turf/meta" "^6.5.0"
 
-"@types/ace-diff@^2.1.1":
+"@types/ace-diff@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@types/ace-diff/-/ace-diff-2.1.4.tgz#0bf9952c9b23fb3cb6f5cf96f1e8bbed8f603fcd"
   integrity sha512-Jd9J35hi9PdsQzAAXWzPlXTuxRxnxuaNBMzBNts3EUDoQ8yuWp4Y36GjPASke8D6yVwKrapOnAaVp3km/CxPRw==
@@ -2911,19 +3162,19 @@
     "@types/connect" "*"
     "@types/node" "*"
 
-"@types/bonjour@^3.5.9":
+"@types/bonjour@^3.5.13":
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.13.tgz#adf90ce1a105e81dd1f9c61fdc5afda1bfb92956"
   integrity sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==
   dependencies:
     "@types/node" "*"
 
-"@types/canvas-gauges@^2.1.4":
+"@types/canvas-gauges@^2.1.8":
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/@types/canvas-gauges/-/canvas-gauges-2.1.8.tgz#5bdd199c598fd45f8618127bec2e2f4e49d7477f"
   integrity sha512-sbxlEPEPnEYfvzC/yPIJZNkxKfAJaI45dxnQrkg3g2l3+1lWX6lwduRo8+hrsDw7VdJ5ijuRi1sQ7XBFu1R2qg==
 
-"@types/connect-history-api-fallback@^1.3.5":
+"@types/connect-history-api-fallback@^1.5.4":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz#7de71645a103056b48ac3ce07b3520b819c1d5b3"
   integrity sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==
@@ -2938,55 +3189,47 @@
   dependencies:
     "@types/node" "*"
 
-"@types/cookie@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
-  integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
-
-"@types/cors@^2.8.12":
-  version "2.8.17"
-  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.17.tgz#5d718a5e494a8166f569d986794e49c48b216b2b"
-  integrity sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==
-  dependencies:
-    "@types/node" "*"
-
-"@types/eslint-scope@^3.7.3":
-  version "3.7.7"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
-  integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*":
-  version "8.56.5"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.5.tgz#94b88cab77588fcecdd0771a6d576fa1c0af9d02"
-  integrity sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
-
-"@types/estree@*":
+"@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/estree@^0.0.51":
-  version "0.0.51"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
-  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+"@types/estree@1.0.6", "@types/estree@^1.0.5", "@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.0.tgz#91f06cda1049e8f17eeab364798ed79c97488a1c"
+  integrity sha512-AbXMTZGt40T+KON9/Fdxx0B2WK5hsgxcfXJLr5bFpZ7b4JCex2WyQPTEKdXqfHiY5nKKBScZ7yCoO6Pvgxfvnw==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+    "@types/send" "*"
 
-"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.33":
-  version "4.17.43"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz#10d8444be560cb789c4735aea5eac6e5af45df54"
-  integrity sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==
+"@types/express-serve-static-core@^4.17.33":
+  version "4.19.6"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267"
+  integrity sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
     "@types/range-parser" "*"
     "@types/send" "*"
 
-"@types/express@*", "@types/express@^4.17.13":
+"@types/express@*":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-5.0.0.tgz#13a7d1f75295e90d19ed6e74cab3678488eaa96c"
+  integrity sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^5.0.0"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
+"@types/express@^4.17.21":
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.21.tgz#c26d4a151e60efe0084b23dc3369ebc631ed192d"
   integrity sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==
@@ -2996,19 +3239,19 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/flot@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@types/flot/-/flot-0.0.32.tgz#2ab260f2958dcab1acfb5c24b87898f1d22417d8"
-  integrity sha512-aturel4TWMY86N4Pkpc9pSoUd/p8c3BjGj4fTDkaZIpkRPzLH1VXZCAKGUywcFkTqgZMhPJFPWxd4pl87y8h/w==
+"@types/flot@^0.0.36":
+  version "0.0.36"
+  resolved "https://registry.yarnpkg.com/@types/flot/-/flot-0.0.36.tgz#59961afa913561236ed7dd2f2c710de0695ec3e2"
+  integrity sha512-xRo4MUIMnRPGXJCuQXAWvo+uKRmziRGHAy9LQHsLgbKanknpe5z3EThqVuYkVCC6ZWPZ/8pllBXnzQmGzFkJ/Q==
   dependencies:
     "@types/jquery" "*"
 
-"@types/flowjs@^2.13.9":
-  version "2.13.13"
-  resolved "https://registry.yarnpkg.com/@types/flowjs/-/flowjs-2.13.13.tgz#91bb164ad4d63be6b9ad569171122c761526dc4b"
-  integrity sha512-wDAWxKbtsCXzlIqKMyy+lN3co9PIhJyQBRvx0tUefG0FDRAdFd4hvL8RFyLj8NxvBNoORWZ2exzNH5Gg+QpaAQ==
+"@types/flowjs@^2.13.14":
+  version "2.13.14"
+  resolved "https://registry.yarnpkg.com/@types/flowjs/-/flowjs-2.13.14.tgz#62cdd8d5d8e0222e505e4a140e73cd385c0a496c"
+  integrity sha512-OlZFH9hbOq5B+GeBjcM3UvvSailseRT+sKoi9jyFFczvvS1n1LTiTKJysDSLVWnUvGD+tsn7kxb6eC2uaJD+Zw==
 
-"@types/geojson@*":
+"@types/geojson@*", "@types/geojson@^7946.0.10":
   version "7946.0.14"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
   integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
@@ -3018,7 +3261,7 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
   integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
 
-"@types/hammerjs@^2.0.40":
+"@types/hammerjs@^2.0.45":
   version "2.0.45"
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.45.tgz#ffa764bb68a66c08db6efb9c816eb7be850577b1"
   integrity sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==
@@ -3028,43 +3271,26 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
   integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
 
-"@types/http-proxy@^1.17.8":
-  version "1.17.14"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.14.tgz#57f8ccaa1c1c3780644f8a94f9c6b5000b5e2eec"
-  integrity sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==
+"@types/http-proxy@^1.17.15", "@types/http-proxy@^1.17.8":
+  version "1.17.15"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.15.tgz#12118141ce9775a6499ecb4c01d02f90fc839d36"
+  integrity sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==
   dependencies:
     "@types/node" "*"
 
-"@types/jasmine@*":
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-5.1.4.tgz#0de3f6ca753e10d1600ce1864ae42cfd47cf9924"
-  integrity sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==
-
-"@types/jasmine@~3.10.2":
-  version "3.10.18"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.10.18.tgz#d442369fd2d06d5b2c607fae51c257b2f9caa94e"
-  integrity sha512-jOk52a1Kz+1oU5fNWwAcNe64/GsE7r/Q6ronwDox0D3ETo/cr4ICMQyeXrj7G6FPW1n8YjRoAZA2F0XBr6GicQ==
-
-"@types/jasminewd2@^2.0.10":
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.13.tgz#0b60c1fcd06277ea97efbbad5a02e0c1a4a8996a"
-  integrity sha512-aJ3wj8tXMpBrzQ5ghIaqMisD8C3FIrcO6sDKHqFbuqAsI7yOxj0fA7MrRCPLZHIVUjERIwsMmGn/vB0UQ9u0Hg==
-  dependencies:
-    "@types/jasmine" "*"
-
-"@types/jquery@*", "@types/jquery@^3.5.29", "@types/jquery@^3.5.30":
-  version "3.5.30"
-  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.30.tgz#888d584cbf844d3df56834b69925085038fd80f7"
-  integrity sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==
+"@types/jquery@*", "@types/jquery@^3.5.29", "@types/jquery@^3.5.31":
+  version "3.5.31"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.31.tgz#3605df86427f6c4e6b5b5a470ba180f74107cffa"
+  integrity sha512-rf/iB+cPJ/YZfMwr+FVuQbm7IaWC4y3FVYfVDxRGqmUCFjjPII0HWaP0vTPJGp6m4o13AXySCcMbWfrWtBFAKw==
   dependencies:
     "@types/sizzle" "*"
 
-"@types/js-beautify@^1.13.3":
+"@types/js-beautify@^1.14.3":
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/@types/js-beautify/-/js-beautify-1.14.3.tgz#6ced76f79935e37e0d613110dea369881d93c1ff"
   integrity sha512-FMbQHz+qd9DoGvgLHxeqqVPaNRffpIu5ZjozwV8hf9JAGpIOzuAf4wGbRSo8LNITHqGjmmVjaMggTT5P4v4IHg==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@^7.0.15", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -3102,34 +3328,17 @@
   dependencies:
     "@types/leaflet" "*"
 
-"@types/leaflet@*":
-  version "1.9.8"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.8.tgz#32162a8eaf305c63267e99470b9603b5883e63e8"
-  integrity sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==
-  dependencies:
-    "@types/geojson" "*"
-
-"@types/leaflet@1.8.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.8.0.tgz#dc92d3e868fb6d5067b4b59fa08cd4441f84fabe"
-  integrity sha512-+sXFmiJTFdhaXXIGFlV5re9AdqtAODoXbGAvxx02e5SHXL3ir7ClP5J7pahO8VmzKY3dth4RUS1nf2BTT+DW1A==
+"@types/leaflet@*", "@types/leaflet@1.9.12":
+  version "1.9.12"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6"
+  integrity sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==
   dependencies:
     "@types/geojson" "*"
 
-"@types/lodash@^4.14.192":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
-  integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
-
-"@types/marked@^4.0.8":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.3.2.tgz#e2e0ad02ebf5626bd215c5bae2aff6aff0ce9eac"
-  integrity sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==
-
-"@types/mime@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.4.tgz#2198ac274de6017b44d941e00261d5bc6a0e0a45"
-  integrity sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==
+"@types/lodash@^4.17.10":
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.10.tgz#64f3edf656af2fe59e7278b73d3e62404144a6e6"
+  integrity sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==
 
 "@types/mime@^1":
   version "1.3.5"
@@ -3141,6 +3350,13 @@
   resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.15.tgz#f144a0c539a4cef553a631824651d48267e53c86"
   integrity sha512-qL0hyIMNPow317QWW/63RvL1x5MVMV+Ru3NaY9f/CuEpCqrmb7WeuK2071ZY5hczOnm38qExWM2i2WtkXLSqFw==
 
+"@types/mute-stream@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@types/mute-stream/-/mute-stream-0.0.4.tgz#77208e56a08767af6c5e1237be8888e2f255c478"
+  integrity sha512-CPM9nzrCPPJHQNA9keH9CVkVI+WR5kMa+7XEs5jcGQ0VoAGnLv242w8lIVgwAEfmE4oufJRaTc9PNLQl0ioAow==
+  dependencies:
+    "@types/node" "*"
+
 "@types/node-forge@^1.3.0":
   version "1.3.11"
   resolved "https://registry.yarnpkg.com/@types/node-forge/-/node-forge-1.3.11.tgz#0972ea538ddb0f4d9c2fa0ec5db5724773a604da"
@@ -3148,12 +3364,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@>=10.0.0":
-  version "20.11.28"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.28.tgz#4fd5b2daff2e580c12316e457473d68f15ee6f66"
-  integrity sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==
+"@types/node@*", "@types/node@^22.5.5":
+  version "22.7.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.4.tgz#e35d6f48dca3255ce44256ddc05dee1c23353fcc"
+  integrity sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==
   dependencies:
-    undici-types "~5.26.4"
+    undici-types "~6.19.2"
 
 "@types/node@~18.15.11":
   version "18.15.13"
@@ -3165,73 +3381,52 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/prop-types@*":
-  version "15.7.11"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
-  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
-
-"@types/q@^0.0.32":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
-  integrity sha512-qYi3YV9inU/REEfxwVcGZzbS3KG/Xs90lv0Pr+lDtuVjBPGd1A+eciXzVSaRvLify132BfcvhvEjeVahrUl0Ug==
+"@types/prop-types@*", "@types/prop-types@^15.7.12", "@types/prop-types@^15.7.13":
+  version "15.7.13"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
+  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
 "@types/qs@*":
-  version "6.9.12"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.12.tgz#afa96b383a3a6fdc859453a1892d41b607fc7756"
-  integrity sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg==
+  version "6.9.16"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.16.tgz#52bba125a07c0482d26747d5d4947a64daf8f794"
+  integrity sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==
 
 "@types/range-parser@*":
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/raphael@^2.3.2":
+"@types/raphael@^2.3.9":
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/@types/raphael/-/raphael-2.3.9.tgz#d53bb8930431524f42987a8a19815c0d42a61eb5"
   integrity sha512-K1dZwoLNvEN+mvleFU/t2swG9Z4SE5Vub7dA5wDYojH0bVTQ8ZAP+lNsl91t1njdu/B+roSEL4QXC67I7Hpiag==
 
-"@types/react-dom@17.0.11":
-  version "17.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
-  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
+"@types/react-dom@18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0":
-  version "4.4.10"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
-  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
+"@types/react-transition-group@^4.4.11":
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.37":
-  version "17.0.37"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
-  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
+"@types/react@*", "@types/react@18.3.10":
+  version "18.3.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.10.tgz#6edc26dc22ff8c9c226d3c7bf8357b013c842219"
+  integrity sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/retry@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
-  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
-
-"@types/scheduler@*":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
-"@types/selenium-webdriver@^3.0.0":
-  version "3.0.26"
-  resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.26.tgz#fc7d87d580affa2e52685b2e881bc201819a5836"
-  integrity sha512-dyIGFKXfUFiwkMfNGn1+F6b80ZjR3uSYv1j6xVJSDlft5waZ2cwkHW4e7zNzvq7hiEackcgvBpmnXZrI1GltPg==
-
-"@types/semver@^7.3.12":
-  version "7.5.8"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
-  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+"@types/retry@0.12.2":
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.2.tgz#ed279a64fa438bb69f2480eda44937912bb7480a"
+  integrity sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==
 
 "@types/send@*":
   version "0.17.4"
@@ -3241,331 +3436,268 @@
     "@types/mime" "^1"
     "@types/node" "*"
 
-"@types/serve-index@^1.9.1":
+"@types/serve-index@^1.9.4":
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.4.tgz#e6ae13d5053cb06ed36392110b4f9a49ac4ec898"
   integrity sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==
   dependencies:
     "@types/express" "*"
 
-"@types/serve-static@*", "@types/serve-static@^1.13.10":
-  version "1.15.5"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.5.tgz#15e67500ec40789a1e8c9defc2d32a896f05b033"
-  integrity sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==
+"@types/serve-static@*", "@types/serve-static@^1.15.5":
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
+  integrity sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==
   dependencies:
     "@types/http-errors" "*"
-    "@types/mime" "*"
     "@types/node" "*"
+    "@types/send" "*"
 
 "@types/sizzle@*":
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627"
   integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==
 
-"@types/sockjs@^0.3.33":
+"@types/sockjs@^0.3.36":
   version "0.3.36"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.36.tgz#ce322cf07bcc119d4cbf7f88954f3a3bd0f67535"
   integrity sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==
   dependencies:
     "@types/node" "*"
 
-"@types/styled-jsx@^2.2.8":
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.9.tgz#e50b3f868c055bcbf9bc353eca6c10fdad32a53f"
-  integrity sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==
-  dependencies:
-    "@types/react" "*"
-
-"@types/systemjs@6.13.1":
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/@types/systemjs/-/systemjs-6.13.1.tgz#fccf8049fdf328bca4cfbad3a9cc7bf088b45048"
-  integrity sha512-Jxo2/uif1WpkabfyvWpFmPWFPDdwKUmyL7xWzjtxNALEu2pgce+eISjbf0Vr+SsK/D9savO5kTRcf+COLK5eiQ==
+"@types/systemjs@6.15.1":
+  version "6.15.1"
+  resolved "https://registry.yarnpkg.com/@types/systemjs/-/systemjs-6.15.1.tgz#dae1ec2fbe66af7c6ca1a110e2c9ca6b85135eec"
+  integrity sha512-MfDFIN+jRQOX1JRBrbbb72tsFJnK0n7mtLC+L2Y3t7As/vFxJiFGA/09FE+6ssFheHAibd8Q3gs959c+Sgf/9A==
 
-"@types/tinycolor2@^1.4.3":
+"@types/tinycolor2@^1.4.6":
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.6.tgz#670cbc0caf4e58dd61d1e3a6f26386e473087f06"
   integrity sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==
 
-"@types/tooltipster@^0.0.31":
-  version "0.0.31"
-  resolved "https://registry.yarnpkg.com/@types/tooltipster/-/tooltipster-0.0.31.tgz#db6c78b5ad709fe5dc9c78cf15a6a2068b4f72b0"
-  integrity sha512-tDAxe2Q67VoQyeEW6oweNDfw4nNmodFGkHdPQdeBCCusf2d3qFbDLFkYnntgSwcD00Fkhh8mSguaP6w5muvZpg==
+"@types/tooltipster@^0.0.35":
+  version "0.0.35"
+  resolved "https://registry.yarnpkg.com/@types/tooltipster/-/tooltipster-0.0.35.tgz#16aaa68716d51a5542857806f3ae13abb3c69067"
+  integrity sha512-vYbL732eEigtw16rBHvOBUGUY5gk0ZGcE5Y08PAcHi/Pg4eZrIvRQ3FNP03Z/apobm97ByaXuTp3PV4TAsqRgQ==
   dependencies:
     "@types/jquery" "*"
 
-"@types/ws@^8.5.1":
-  version "8.5.10"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787"
-  integrity sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==
-  dependencies:
-    "@types/node" "*"
-
-"@typescript-eslint/eslint-plugin@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.0.tgz#52c8a7a4512f10e7249ca1e2e61f81c62c34365c"
-  integrity sha512-itag0qpN6q2UMM6Xgk6xoHa0D0/P+M17THnr4SVgqn9Rgam5k/He33MA7/D7QoJcdMxHFyX7U9imaBonAX/6qA==
-  dependencies:
-    "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.57.0"
-    "@typescript-eslint/type-utils" "5.57.0"
-    "@typescript-eslint/utils" "5.57.0"
-    debug "^4.3.4"
-    grapheme-splitter "^1.0.4"
-    ignore "^5.2.0"
-    natural-compare-lite "^1.4.0"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/parser@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.57.0.tgz#f675bf2cd1a838949fd0de5683834417b757e4fa"
-  integrity sha512-orrduvpWYkgLCyAdNtR1QIWovcNZlEm6yL8nwH/eTxWLd8gsP+25pdLHYzL2QdkqrieaDwLpytHqycncv0woUQ==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.57.0"
-    "@typescript-eslint/types" "5.57.0"
-    "@typescript-eslint/typescript-estree" "5.57.0"
-    debug "^4.3.4"
+"@types/wrap-ansi@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz#18b97a972f94f60a679fd5c796d96421b9abb9fd"
+  integrity sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==
 
-"@typescript-eslint/scope-manager@5.48.2":
-  version "5.48.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.48.2.tgz#bb7676cb78f1e94921eaab637a4b5d596f838abc"
-  integrity sha512-zEUFfonQid5KRDKoI3O+uP1GnrFd4tIHlvs+sTJXiWuypUWMuDaottkJuR612wQfOkjYbsaskSIURV9xo4f+Fw==
+"@types/ws@^8.5.10":
+  version "8.5.12"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
+  integrity sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==
   dependencies:
-    "@typescript-eslint/types" "5.48.2"
-    "@typescript-eslint/visitor-keys" "5.48.2"
+    "@types/node" "*"
 
-"@typescript-eslint/scope-manager@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.57.0.tgz#79ccd3fa7bde0758059172d44239e871e087ea36"
-  integrity sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw==
-  dependencies:
-    "@typescript-eslint/types" "5.57.0"
-    "@typescript-eslint/visitor-keys" "5.57.0"
+"@typescript-eslint/eslint-plugin@^8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz#c3f087d20715fa94310b30666c08b3349e0ab084"
+  integrity sha512-KhGn2LjW1PJT2A/GfDpiyOfS4a8xHQv2myUagTM5+zsormOmBlYsnQ6pobJ8XxJmh6hnHwa2Mbe3fPrDJoDhbA==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.11.0"
+    "@typescript-eslint/type-utils" "8.11.0"
+    "@typescript-eslint/utils" "8.11.0"
+    "@typescript-eslint/visitor-keys" "8.11.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/type-utils@5.48.2":
-  version "5.48.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.48.2.tgz#7d3aeca9fa37a7ab7e3d9056a99b42f342c48ad7"
-  integrity sha512-QVWx7J5sPMRiOMJp5dYshPxABRoZV1xbRirqSk8yuIIsu0nvMTZesKErEA3Oix1k+uvsk8Cs8TGJ6kQ0ndAcew==
+"@typescript-eslint/parser@^8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.11.0.tgz#2ad1481388dc1c937f50b2d138c9ca57cc6c5cce"
+  integrity sha512-lmt73NeHdy1Q/2ul295Qy3uninSqi6wQI18XwSpm8w0ZbQXUpjCAWP1Vlv/obudoBiIjJVjlztjQ+d/Md98Yxg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.48.2"
-    "@typescript-eslint/utils" "5.48.2"
+    "@typescript-eslint/scope-manager" "8.11.0"
+    "@typescript-eslint/types" "8.11.0"
+    "@typescript-eslint/typescript-estree" "8.11.0"
+    "@typescript-eslint/visitor-keys" "8.11.0"
     debug "^4.3.4"
-    tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.57.0.tgz#98e7531c4e927855d45bd362de922a619b4319f2"
-  integrity sha512-kxXoq9zOTbvqzLbdNKy1yFrxLC6GDJFE2Yuo3KqSwTmDOFjUGeWSakgoXT864WcK5/NAJkkONCiKb1ddsqhLXQ==
+"@typescript-eslint/scope-manager@8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz#9d399ce624118966732824878bc9a83593a30405"
+  integrity sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.57.0"
-    "@typescript-eslint/utils" "5.57.0"
-    debug "^4.3.4"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/types@5.48.2":
-  version "5.48.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.48.2.tgz#635706abb1ec164137f92148f06f794438c97b8e"
-  integrity sha512-hE7dA77xxu7ByBc6KCzikgfRyBCTst6dZQpwaTy25iMYOnbNljDT4hjhrGEJJ0QoMjrfqrx+j1l1B9/LtKeuqA==
-
-"@typescript-eslint/types@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.57.0.tgz#727bfa2b64c73a4376264379cf1f447998eaa132"
-  integrity sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ==
+    "@typescript-eslint/types" "8.11.0"
+    "@typescript-eslint/visitor-keys" "8.11.0"
 
-"@typescript-eslint/typescript-estree@5.48.2":
-  version "5.48.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.2.tgz#6e206b462942b32383582a6c9251c05021cc21b0"
-  integrity sha512-bibvD3z6ilnoVxUBFEgkO0k0aFvUc4Cttt0dAreEr+nrAHhWzkO83PEVVuieK3DqcgL6VAK5dkzK8XUVja5Zcg==
+"@typescript-eslint/type-utils@8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.11.0.tgz#b7f9e6120c1ddee8a1a07615646642ad85fc91b5"
+  integrity sha512-ItiMfJS6pQU0NIKAaybBKkuVzo6IdnAhPFZA/2Mba/uBjuPQPet/8+zh5GtLHwmuFRShZx+8lhIs7/QeDHflOg==
   dependencies:
-    "@typescript-eslint/types" "5.48.2"
-    "@typescript-eslint/visitor-keys" "5.48.2"
+    "@typescript-eslint/typescript-estree" "8.11.0"
+    "@typescript-eslint/utils" "8.11.0"
     debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/types@8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.11.0.tgz#7c766250502097f49bbc2e651132e6bf489e20b8"
+  integrity sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==
 
-"@typescript-eslint/typescript-estree@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.57.0.tgz#ebcd0ee3e1d6230e888d88cddf654252d41e2e40"
-  integrity sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw==
+"@typescript-eslint/typescript-estree@8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz#35fe5d3636fc5727c52429393415412e552e222b"
+  integrity sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==
   dependencies:
-    "@typescript-eslint/types" "5.57.0"
-    "@typescript-eslint/visitor-keys" "5.57.0"
+    "@typescript-eslint/types" "8.11.0"
+    "@typescript-eslint/visitor-keys" "8.11.0"
     debug "^4.3.4"
-    globby "^11.1.0"
+    fast-glob "^3.3.2"
     is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/utils@5.48.2":
-  version "5.48.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.48.2.tgz#3777a91dcb22b8499a25519e06eef2e9569295a3"
-  integrity sha512-2h18c0d7jgkw6tdKTlNaM7wyopbLRBiit8oAxoP89YnuBOzCZ8g8aBCaCqq7h208qUTroL7Whgzam7UY3HVLow==
-  dependencies:
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.48.2"
-    "@typescript-eslint/types" "5.48.2"
-    "@typescript-eslint/typescript-estree" "5.48.2"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-    semver "^7.3.7"
-
-"@typescript-eslint/utils@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.57.0.tgz#eab8f6563a2ac31f60f3e7024b91bf75f43ecef6"
-  integrity sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.57.0"
-    "@typescript-eslint/types" "5.57.0"
-    "@typescript-eslint/typescript-estree" "5.57.0"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
-
-"@typescript-eslint/visitor-keys@5.48.2":
-  version "5.48.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.2.tgz#c247582a0bcce467461d7b696513bf9455000060"
-  integrity sha512-z9njZLSkwmjFWUelGEwEbdf4NwKvfHxvGC0OcGN1Hp/XNDIcJ7D5DpPNPv6x6/mFvc1tQHsaWmpD/a4gOvvCJQ==
-  dependencies:
-    "@typescript-eslint/types" "5.48.2"
-    eslint-visitor-keys "^3.3.0"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
 
-"@typescript-eslint/visitor-keys@5.57.0":
-  version "5.57.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.57.0.tgz#e2b2f4174aff1d15eef887ce3d019ecc2d7a8ac1"
-  integrity sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g==
+"@typescript-eslint/utils@8.11.0", "@typescript-eslint/utils@^8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.11.0.tgz#4480d1e9f2bb18ea3510c79f870a1aefc118103d"
+  integrity sha512-CYiX6WZcbXNJV7UNB4PLDIBtSdRmRI/nb0FMyqHPTQD1rMjA0foPLaPUV39C/MxkTd/QKSeX+Gb34PPsDVC35g==
   dependencies:
-    "@typescript-eslint/types" "5.57.0"
-    eslint-visitor-keys "^3.3.0"
-
-"@ungap/structured-clone@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
-  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.11.0"
+    "@typescript-eslint/types" "8.11.0"
+    "@typescript-eslint/typescript-estree" "8.11.0"
 
-"@webassemblyjs/ast@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
-  integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==
+"@typescript-eslint/visitor-keys@8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz#273de1cbffe63d9f9cd7dfc20b5a5af66310cb92"
+  integrity sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==
   dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-
-"@webassemblyjs/floating-point-hex-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
-  integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
-
-"@webassemblyjs/helper-api-error@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
-  integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
-
-"@webassemblyjs/helper-buffer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
-  integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
+    "@typescript-eslint/types" "8.11.0"
+    eslint-visitor-keys "^3.4.3"
 
-"@webassemblyjs/helper-numbers@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
-  integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==
-  dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
+"@vitejs/plugin-basic-ssl@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz#8b840305a6b48e8764803435ec0c716fa27d3802"
+  integrity sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==
+
+"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
+  integrity sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
+"@webassemblyjs/helper-buffer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz#6df20d272ea5439bf20ab3492b7fb70e9bfcb3f6"
+  integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==
+
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/helper-wasm-bytecode@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
-  integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
 
-"@webassemblyjs/helper-wasm-section@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
-  integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==
+"@webassemblyjs/helper-wasm-section@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz#3da623233ae1a60409b509a52ade9bc22a37f7bf"
+  integrity sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.12.1"
 
-"@webassemblyjs/ieee754@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
-  integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
-  integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
   dependencies:
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/utf8@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
-  integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
-
-"@webassemblyjs/wasm-edit@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
-  integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/helper-wasm-section" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-opt" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    "@webassemblyjs/wast-printer" "1.11.1"
-
-"@webassemblyjs/wasm-gen@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
-  integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wasm-opt@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
-  integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-
-"@webassemblyjs/wasm-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
-  integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wast-printer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
-  integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
+"@webassemblyjs/wasm-edit@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz#9f9f3ff52a14c980939be0ef9d5df9ebc678ae3b"
+  integrity sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-opt" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+    "@webassemblyjs/wast-printer" "1.12.1"
+
+"@webassemblyjs/wasm-gen@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz#a6520601da1b5700448273666a71ad0a45d78547"
+  integrity sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wasm-opt@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz#9e6e81475dfcfb62dab574ac2dda38226c232bc5"
+  integrity sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-buffer" "1.12.1"
+    "@webassemblyjs/wasm-gen" "1.12.1"
+    "@webassemblyjs/wasm-parser" "1.12.1"
+
+"@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz#c47acb90e6f083391e3fa61d113650eea1e95937"
+  integrity sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
+"@webassemblyjs/wast-printer@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz#bcecf661d7d1abdaf989d8341a4833e33e2b31ac"
+  integrity sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==
+  dependencies:
+    "@webassemblyjs/ast" "1.12.1"
     "@xtuc/long" "4.2.2"
 
 "@xtuc/ieee754@^1.2.0":
@@ -3583,15 +3715,10 @@
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
 
-abab@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
-  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
-
-abbrev@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+abbrev@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf"
+  integrity sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==
 
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
@@ -3601,10 +3728,10 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-ace-builds@1.4.13, ace-builds@^1.4.13:
-  version "1.4.13"
-  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.13.tgz#186f42d3849ebcc6a48b93088a058489897514c1"
-  integrity sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ==
+ace-builds@1.36.2, ace-builds@^1.32.8:
+  version "1.36.2"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.36.2.tgz#9499bd59e839a335ac4850e74549ca8d849dc554"
+  integrity sha512-eqqfbGwx/GKjM/EnFu4QtQ+d2NNBu84MGgxoG8R5iyFpcVeQ4p9YlTL+ZzdEJqhdkASqoqOxCSNNGyB6lvMm+A==
 
 ace-diff@^3.0.3:
   version "3.0.3"
@@ -3613,10 +3740,10 @@ ace-diff@^3.0.3:
   dependencies:
     diff-match-patch "^1.0.5"
 
-acorn-import-assertions@^1.7.6:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
-  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+acorn-import-attributes@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
+  integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
@@ -3624,14 +3751,16 @@ acorn-jsx@^5.3.2:
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn-walk@^8.1.1:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa"
-  integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
+  integrity sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==
+  dependencies:
+    acorn "^8.11.0"
 
-acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
-  version "8.11.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
-  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+acorn@^8.11.0, acorn@^8.11.3, acorn@^8.12.0, acorn@^8.4.1, acorn@^8.7.1, acorn@^8.8.2:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
 
 adjust-sourcemap-loader@^4.0.0:
   version "4.0.0"
@@ -3641,31 +3770,12 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-adm-zip@^0.5.2:
-  version "0.5.12"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.5.12.tgz#87786328e91d54b37358d8a50f954c4cd73ba60b"
-  integrity sha512-6TVU49mK6KZb4qG6xWaaM4C7sA/sgUMLy/JYMOzkcp3BvVLpW0fXDFQiIzAuxFCt/2+xD7fNIiPFAoLZPhVNLQ==
-
-agent-base@6, agent-base@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
-  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
-  dependencies:
-    debug "4"
-
-agent-base@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
-  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
-  dependencies:
-    es6-promisify "^5.0.0"
-
-agentkeepalive@^4.2.1:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.5.0.tgz#2673ad1389b3c418c5a20c5d7364f93ca04be923"
-  integrity sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==
+agent-base@^7.0.2, agent-base@^7.1.0, agent-base@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
   dependencies:
-    humanize-ms "^1.2.1"
+    debug "^4.3.4"
 
 aggregate-error@^3.0.0:
   version "3.1.0"
@@ -3675,7 +3785,14 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-ajv-formats@2.1.1, ajv-formats@^2.1.1:
+ajv-formats@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-3.0.1.tgz#3d5dc762bca17679c3c2ea7e90ad6b7532309578"
+  integrity sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==
+  dependencies:
+    ajv "^8.0.0"
+
+ajv-formats@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
   integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
@@ -3694,17 +3811,17 @@ ajv-keywords@^5.1.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@8.12.0, ajv@^8.0.0, ajv@^8.9.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
-  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+ajv@8.17.1, ajv@^8.0.0, ajv@^8.9.0:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
   dependencies:
-    fast-deep-equal "^3.1.1"
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
-    uri-js "^4.2.2"
 
-ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3714,17 +3831,17 @@ ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-angular-gridster2@~15.0.4:
-  version "15.0.4"
-  resolved "https://registry.yarnpkg.com/angular-gridster2/-/angular-gridster2-15.0.4.tgz#aca1a3df0ba5776d2f053cbbdce48ad73019b438"
-  integrity sha512-5BUUn4ihar8pLdN2YwILygZBPk3v94GQzSML6eYdg5o2USPCRuqXyFznYjiMWJRGrcLrzZYdcKULR+LB/1+tfQ==
+angular-gridster2@~18.0.1:
+  version "18.0.1"
+  resolved "https://registry.yarnpkg.com/angular-gridster2/-/angular-gridster2-18.0.1.tgz#ad04eff2c05aa693fe892ee66b6aa5e956e4dd13"
+  integrity sha512-+Nar4lkRGl5kgmU+WFi5d57F7X4jbehRzBZ+JQifVZKtGA1OYKzBYA2Wd1ZQP246oHXakl14BBkxTu8hLer0Cg==
   dependencies:
     tslib "^2.4.0"
 
-angular2-hotkeys@^13.1.0:
-  version "13.4.0"
-  resolved "https://registry.yarnpkg.com/angular2-hotkeys/-/angular2-hotkeys-13.4.0.tgz#a96676466936556655cd64f92e1f5cd3aeac8e10"
-  integrity sha512-WvkouvdXtTYw3tpuaoEVF+ue41pvI2XSa8m4tVRPLzAblT/f7PG0uQO4npyjVw3oDIc7qnFkQR+oqGl1KM1eow==
+angular2-hotkeys@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/angular2-hotkeys/-/angular2-hotkeys-16.0.1.tgz#8fb46c6039240b28481d49d507c9a3d1b1efc957"
+  integrity sha512-AyjUrBaWKtr7xRfFybazkzeWo6PTooDnmr9QqD962AcJKW4mH3lh1L8roZLJtocCkODHQOaCEVldM4MTDyR0VA==
   dependencies:
     "@types/mousetrap" "^1.6.9"
     mousetrap "^1.6.5"
@@ -3735,32 +3852,34 @@ ansi-colors@4.1.3:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
   integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
 
-ansi-escapes@^4.2.1:
+ansi-escapes@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
   integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
   dependencies:
     type-fest "^0.21.3"
 
+ansi-escapes@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-7.0.0.tgz#00fc19f491bbb18e1d481b97868204f92109bfe7"
+  integrity sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==
+  dependencies:
+    environment "^1.0.0"
+
 ansi-html-community@^0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
   integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
 
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
 
 ansi-styles@^3.2.1:
   version "3.2.1"
@@ -3776,11 +3895,21 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^6.0.0, ansi-styles@^6.1.0, ansi-styles@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 ansidec@^0.3.4:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/ansidec/-/ansidec-0.3.4.tgz#e12d267d6b1f122d2da5b98fe0de1f98d14ac62b"
   integrity sha512-Ydgbey4zqUmmNN2i2OVeVHXig3PxHRbok2X6B2Sogmb92JzZUFfTL806dT7os6tBL1peXItfeFt76CP3zsoXUg==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -3789,30 +3918,22 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aproba@^1.0.3 || ^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
-  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
-
 are-docs-informative@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/are-docs-informative/-/are-docs-informative-0.0.2.tgz#387f0e93f5d45280373d387a59d34c96db321963"
   integrity sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==
 
-are-we-there-yet@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz#679df222b278c64f2cdba1175cdc00b0d96164bd"
-  integrity sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^3.6.0"
-
 arg@^4.1.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
-argparse@^1.0.7, argparse@^1.0.9:
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -3824,12 +3945,12 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
-  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+aria-query@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
   dependencies:
-    deep-equal "^2.0.5"
+    dequal "^2.0.3"
 
 array-back@^3.0.1, array-back@^3.1.0:
   version "3.1.0"
@@ -3841,7 +3962,7 @@ array-back@^4.0.1, array-back@^4.0.2:
   resolved "https://registry.yarnpkg.com/array-back/-/array-back-4.0.2.tgz#8004e999a6274586beeb27342168652fdb89fa1e"
   integrity sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==
 
-array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
+array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
   integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
@@ -3854,54 +3975,28 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
-array-includes@^3.1.7:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
-  integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    get-intrinsic "^1.2.1"
-    is-string "^1.0.7"
-
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
-  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
-
-array.prototype.filter@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.3.tgz#423771edeb417ff5914111fff4277ea0624c0d0e"
-  integrity sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==
+array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    es-array-method-boxes-properly "^1.0.0"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
     is-string "^1.0.7"
 
-array.prototype.findlastindex@^1.2.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.4.tgz#d1c50f0b3a9da191981ff8942a0aedd82794404f"
-  integrity sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
   dependencies:
-    call-bind "^1.0.5"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
+    es-abstract "^1.23.2"
     es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
     es-shim-unscopables "^1.0.2"
 
 array.prototype.flat@^1.3.2:
@@ -3938,23 +4033,6 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
-arrify@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
-
-asn1@~0.2.3:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
-  integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
-
 async@~2.6.3:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -3977,16 +4055,16 @@ attr-accept@^2.2.2:
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
-autoprefixer@10.4.13:
-  version "10.4.13"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
-  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
+autoprefixer@10.4.20, autoprefixer@^10.4.20:
+  version "10.4.20"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
   dependencies:
-    browserslist "^4.21.4"
-    caniuse-lite "^1.0.30001426"
-    fraction.js "^4.2.0"
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
+    fraction.js "^4.3.7"
     normalize-range "^0.1.2"
-    picocolors "^1.0.0"
+    picocolors "^1.0.1"
     postcss-value-parser "^4.2.0"
 
 available-typed-arrays@^1.0.7:
@@ -3996,65 +4074,51 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
-
-aws4@^1.8.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
-  integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
-
-axobject-query@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
-  integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
-  dependencies:
-    deep-equal "^2.0.5"
+axobject-query@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
 
-babel-loader@9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
-  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
+babel-loader@9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.3.tgz#3d0e01b4e69760cc694ee306fe16d358aa1c6f9a"
+  integrity sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==
   dependencies:
-    find-cache-dir "^3.3.2"
+    find-cache-dir "^4.0.0"
     schema-utils "^4.0.0"
 
-babel-plugin-istanbul@6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
-  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@istanbuljs/load-nyc-config" "^1.0.0"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-instrument "^5.0.4"
-    test-exclude "^6.0.0"
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
-  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
+  integrity sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==
   dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    semver "^6.1.1"
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.2"
+    semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
-  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+babel-plugin-polyfill-corejs3@^0.10.1, babel-plugin-polyfill-corejs3@^0.10.4:
+  version "0.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7"
+  integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    core-js-compat "^3.25.1"
+    "@babel/helper-define-polyfill-provider" "^0.6.2"
+    core-js-compat "^3.38.0"
 
-babel-plugin-polyfill-regenerator@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
-  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz#addc47e240edd1da1058ebda03021f382bba785e"
+  integrity sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    "@babel/helper-define-polyfill-provider" "^0.6.2"
 
 balanced-match@^1.0.0:
   version "1.0.2"
@@ -4066,33 +4130,26 @@ base64-arraybuffer@^1.0.2:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
   integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
 
-base64-js@^1.2.0, base64-js@^1.3.1:
+base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-base64id@2.0.0, base64id@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6"
-  integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==
-
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==
-  dependencies:
-    tweetnacl "^0.14.3"
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bignumber.js@^9.1.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
+  integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
+
 binary-extensions@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
@@ -4107,17 +4164,10 @@ bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-blocking-proxy@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/blocking-proxy/-/blocking-proxy-1.0.1.tgz#81d6fd1fe13a4c0d6957df7f91b75e98dac40cb2"
-  integrity sha512-KE8NFMZr3mN2E0HcvCgRtX7DjhiIQrwle+nSVJVC/yqFb9+xznHl2ZcoBp2L9qzkI4t4cBFJ1efXF8Dwi132RA==
-  dependencies:
-    minimist "^1.2.0"
-
-body-parser@1.20.2, body-parser@^1.19.0:
-  version "1.20.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
-  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.5"
@@ -4127,12 +4177,12 @@ body-parser@1.20.2, body-parser@^1.19.0:
     http-errors "2.0.0"
     iconv-lite "0.4.24"
     on-finished "2.4.1"
-    qs "6.11.0"
+    qs "6.13.0"
     raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
 
-bonjour-service@^1.0.11:
+bonjour-service@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.2.1.tgz#eb41b3085183df3321da1264719fbada12478d02"
   integrity sha512-oSzCS2zV14bh2kji6vNe7vrpJYCHGvcZnlffFQ1MEoX/WOeQ/teD8SYWKR942OI3INjq8OMNJlbPK5LLLUxFDw==
@@ -4160,39 +4210,22 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-browserslist@4.21.5:
-  version "4.21.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
-  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
-  dependencies:
-    caniuse-lite "^1.0.30001449"
-    electron-to-chromium "^1.4.284"
-    node-releases "^2.0.8"
-    update-browserslist-db "^1.0.10"
-
-browserslist@^4.14.5, browserslist@^4.21.4, browserslist@^4.22.2, browserslist@^4.22.3:
-  version "4.23.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
-  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    caniuse-lite "^1.0.30001587"
-    electron-to-chromium "^1.4.668"
-    node-releases "^2.0.14"
-    update-browserslist-db "^1.0.13"
+    fill-range "^7.1.1"
 
-browserstack@^1.5.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.6.1.tgz#e051f9733ec3b507659f395c7a4765a1b1e358b3"
-  integrity sha512-GxtFjpIaKdbAyzHfFDKixKO8IBT7wR3NjbzrGc78nNs/Ciys9wU3/nBtsqsWv5nDSrdI5tz0peKuzCPuNXNUiw==
+browserslist@^4.21.10, browserslist@^4.21.5, browserslist@^4.23.0, browserslist@^4.23.3, browserslist@^4.24.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
+  integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
   dependencies:
-    https-proxy-agent "^2.2.1"
+    caniuse-lite "^1.0.30001663"
+    electron-to-chromium "^1.5.28"
+    node-releases "^2.0.18"
+    update-browserslist-db "^1.1.0"
 
 buffer-from@^1.0.0:
   version "1.1.2"
@@ -4207,17 +4240,12 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-builtin-modules@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
-  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
-
-builtins@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/builtins/-/builtins-5.0.1.tgz#87f6db9ab0458be728564fa81d876d8d74552fa9"
-  integrity sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==
+bundle-name@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-4.1.0.tgz#f3b96b34160d6431a19d7688135af7cfb8797889"
+  integrity sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==
   dependencies:
-    semver "^7.0.0"
+    run-applescript "^7.0.0"
 
 bytes@3.0.0:
   version "3.0.0"
@@ -4229,21 +4257,20 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-cacache@17.0.4, cacache@^16.1.0, cacache@^17.0.0:
-  version "17.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-17.0.4.tgz#5023ed892ba8843e3b7361c26d0ada37e146290c"
-  integrity sha512-Z/nL3gU+zTUjz5pCA5vVjYM8pmaw2kxM7JEiE0fv3w77Wj+sFbi70CrBruUWH0uNcEdvLDixFpgA2JM4F4DBjA==
+cacache@^18.0.0:
+  version "18.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-18.0.4.tgz#4601d7578dadb59c66044e157d02a3314682d6a5"
+  integrity sha512-B+L5iIa9mgcjLbliir2th36yEwPftrzteHYujzsx3dFP/31GCHcIeS8f5MGd80odLOjaOvSpU3EEAmRQptkxLQ==
   dependencies:
     "@npmcli/fs" "^3.1.0"
     fs-minipass "^3.0.0"
-    glob "^8.0.1"
-    lru-cache "^7.7.1"
-    minipass "^4.0.0"
-    minipass-collect "^1.0.2"
+    glob "^10.2.2"
+    lru-cache "^10.0.1"
+    minipass "^7.0.3"
+    minipass-collect "^2.0.1"
     minipass-flush "^1.0.5"
     minipass-pipeline "^1.2.4"
     p-map "^4.0.0"
-    promise-inflight "^1.0.1"
     ssri "^10.0.0"
     tar "^6.1.11"
     unique-filename "^3.0.0"
@@ -4264,37 +4291,26 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^5.0.0, camelcase@^5.3.1:
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+camelcase@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001587:
-  version "1.0.30001599"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz#571cf4f3f1506df9bf41fcbb6d10d5d017817bce"
-  integrity sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==
+caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001663:
+  version "1.0.30001666"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz#112d77e80f1762f62a1b71ba92164e0cb3f3dd13"
+  integrity sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==
 
 canvas-gauges@^2.1.7:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/canvas-gauges/-/canvas-gauges-2.1.7.tgz#9f8d96960a19c64879083e72e66b773ed1ec8079"
   integrity sha512-z9cXBVTZdaUIOh32g21NU8gwxEeaxpEMvkZr9t8Y0QDbZiCDq05SJ17aIt+DM12oTJAlWGluN21D+bQ0NCv5GA==
 
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
-
-chalk@^1.1.1, chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -4304,7 +4320,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -4317,22 +4333,26 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chokidar@3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+chevrotain-allstar@~0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/chevrotain-allstar/-/chevrotain-allstar-0.3.1.tgz#b7412755f5d83cc139ab65810cdb00d8db40e6ca"
+  integrity sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==
   dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
+    lodash-es "^4.17.21"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.5.1, chokidar@^3.5.3:
+chevrotain@~11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/chevrotain/-/chevrotain-11.0.3.tgz#88ffc1fb4b5739c715807eaeedbbf200e202fc1b"
+  integrity sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==
+  dependencies:
+    "@chevrotain/cst-dts-gen" "11.0.3"
+    "@chevrotain/gast" "11.0.3"
+    "@chevrotain/regexp-to-ast" "11.0.3"
+    "@chevrotain/types" "11.0.3"
+    "@chevrotain/utils" "11.0.3"
+    lodash-es "4.17.21"
+
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -4347,22 +4367,29 @@ chokidar@3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chokidar@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.1.tgz#4a6dff66798fb0f72a94f616abbd7e1a19f31d41"
+  integrity sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==
+  dependencies:
+    readdirp "^4.0.1"
+
 chownr@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
 chrome-trace-event@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
-  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+ci-info@^3.7.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
-classnames@2.x, classnames@^2.2.1, classnames@^2.2.6:
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.6, classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -4379,15 +4406,30 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-cursor@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-5.0.0.tgz#24a4831ecf5a6b01ddeb32fb71a4b2088b0dce38"
+  integrity sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==
+  dependencies:
+    restore-cursor "^5.0.0"
+
 cli-spinners@^2.5.0:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
   integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
 
-cli-width@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
-  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+cli-truncate@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
+  integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^7.0.0"
+
+cli-width@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
+  integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==
 
 clipboard@^2.0.11:
   version "2.0.11"
@@ -4407,15 +4449,6 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -4439,10 +4472,10 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.0.2, clsx@^1.0.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 color-convert@^1.9.0:
   version "1.9.3"
@@ -4468,22 +4501,12 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-support@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
-  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
-colorette@^2.0.10:
+colorette@^2.0.10, colorette@^2.0.20:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-colors@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
-combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
+combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -4515,11 +4538,21 @@ commander@7:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -4530,10 +4563,10 @@ comment-parser@1.4.1:
   resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.4.1.tgz#bdafead37961ac079be11eb7ec65c4d021eaf9cc"
   integrity sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==
 
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+common-path-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
+  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
 
 compressible@~2.0.16:
   version "2.0.18"
@@ -4542,13 +4575,13 @@ compressible@~2.0.16:
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
-compression-webpack-plugin@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-10.0.0.tgz#3496af1b0dc792e13efc474498838dbff915c823"
-  integrity sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==
+compression-webpack-plugin@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-11.1.0.tgz#ee340d2029cf99ccecdea9ad1410b377d15b48b3"
+  integrity sha512-zDOQYp10+upzLxW+VRSjEpRRwBXJdsb5lBMlRxx1g8hckIFBpe3DTI0en2w7h+beuq89576RVzfiXrkdPGrHhA==
   dependencies:
-    schema-utils "^4.0.0"
-    serialize-javascript "^6.0.0"
+    schema-utils "^4.2.0"
+    serialize-javascript "^6.0.2"
 
 compression@^1.7.4:
   version "1.7.4"
@@ -4568,6 +4601,11 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+confbox@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.7.tgz#ccfc0a2bcae36a84838e83a3b7f770fb17d6c579"
+  integrity sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==
+
 config-chain@^1.1.13:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
@@ -4581,21 +4619,6 @@ connect-history-api-fallback@^2.0.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
   integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
 
-connect@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
-  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
-  dependencies:
-    debug "2.6.9"
-    finalhandler "1.1.2"
-    parseurl "~1.3.3"
-    utils-merge "1.0.1"
-
-console-control-strings@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
-
 content-disposition@0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -4608,7 +4631,7 @@ content-type@~1.0.4, content-type@~1.0.5:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
-convert-source-map@^1.5.1, convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
@@ -4623,15 +4646,10 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
-  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
-
-cookie@~0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
-  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+cookie@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
 copy-anything@^2.0.1:
   version "2.0.6"
@@ -4640,48 +4658,35 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.14.1"
 
-copy-webpack-plugin@11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"
-  integrity sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==
+copy-webpack-plugin@12.0.2:
+  version "12.0.2"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-12.0.2.tgz#935e57b8e6183c82f95bd937df658a59f6a2da28"
+  integrity sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==
   dependencies:
-    fast-glob "^3.2.11"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.1"
-    globby "^13.1.1"
+    globby "^14.0.0"
     normalize-path "^3.0.0"
-    schema-utils "^4.0.0"
-    serialize-javascript "^6.0.0"
+    schema-utils "^4.2.0"
+    serialize-javascript "^6.0.2"
 
-core-js-compat@^3.25.1:
-  version "3.36.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.36.0.tgz#087679119bc2fdbdefad0d45d8e5d307d45ba190"
-  integrity sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==
+core-js-compat@^3.37.1, core-js-compat@^3.38.0:
+  version "3.38.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.38.1.tgz#2bc7a298746ca5a7bcb9c164bcb120f2ebc09a09"
+  integrity sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==
   dependencies:
-    browserslist "^4.22.3"
-
-core-js@^3.29.1:
-  version "3.36.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.0.tgz#e752fa0b0b462a0787d56e9d73f80b0f7c0dde68"
-  integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
+    browserslist "^4.23.3"
 
-core-util-is@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
+core-js@^3.38.1:
+  version "3.38.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.38.1.tgz#aa375b79a286a670388a1a363363d53677c0383e"
+  integrity sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==
 
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cors@~2.8.5:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
-  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
-  dependencies:
-    object-assign "^4"
-    vary "^1"
-
 cose-base@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-1.0.3.tgz#650334b41b869578a543358b80cda7e0abe0a60a"
@@ -4707,46 +4712,46 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-coveralls-next@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/coveralls-next/-/coveralls-next-4.2.0.tgz#821fb802f98284a3c11c96577b7fd0eaf4d4473e"
-  integrity sha512-zg41a/4QDSASPtlV6gp+6owoU43U5CguxuPZR3nPZ26M5ZYdEK3MdUe7HwE+AnCZPkucudfhqqJZehCNkz2rYg==
+cosmiconfig@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d"
+  integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
+coveralls-next@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/coveralls-next/-/coveralls-next-4.2.1.tgz#6cf872710e4594d2912fb0196a48dbfee061c6b5"
+  integrity sha512-O/SBGZsCryt+6Q3NuJHENyQYaucTEV9qp0KGaed+y42PUh+GuF949LRLHKZbxWwOIc1tV8bJRIVWlfbZ8etEwQ==
   dependencies:
     form-data "4.0.0"
     js-yaml "4.1.0"
     lcov-parse "1.0.0"
     log-driver "1.2.7"
-    minimist "1.2.7"
+    minimist "1.2.8"
 
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
-critters@0.0.16:
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.16.tgz#ffa2c5561a65b43c53b940036237ce72dcebfe93"
-  integrity sha512-JwjgmO6i3y6RWtLYmXwO5jMd+maZt8Tnfu7VVISmEWyQqfLpB8soBswf8/2bu6SBXxtKA68Al3c+qIG1ApT68A==
+critters@0.0.24:
+  version "0.0.24"
+  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.24.tgz#d20b16c28908d2dae4b9cd4851d4d2c93de98a0b"
+  integrity sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q==
   dependencies:
     chalk "^4.1.0"
-    css-select "^4.2.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    postcss "^8.3.7"
-    pretty-bytes "^5.3.0"
-
-cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+    css-select "^5.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.2"
+    htmlparser2 "^8.0.2"
+    postcss "^8.4.23"
+    postcss-media-query-parser "^0.2.3"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -4762,29 +4767,29 @@ css-line-break@^2.1.0:
   dependencies:
     utrie "^1.0.2"
 
-css-loader@6.7.3:
-  version "6.7.3"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
-  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
+css-loader@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-7.1.2.tgz#64671541c6efe06b0e22e750503106bdd86880f8"
+  integrity sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==
   dependencies:
     icss-utils "^5.1.0"
-    postcss "^8.4.19"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
+    postcss "^8.4.33"
+    postcss-modules-extract-imports "^3.1.0"
+    postcss-modules-local-by-default "^4.0.5"
+    postcss-modules-scope "^3.2.0"
     postcss-modules-values "^4.0.0"
     postcss-value-parser "^4.2.0"
-    semver "^7.3.8"
+    semver "^7.5.4"
 
-css-select@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
-  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^6.0.1"
-    domhandler "^4.3.1"
-    domutils "^2.8.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
     nth-check "^2.0.1"
 
 css-vendor@^2.0.8:
@@ -4795,7 +4800,7 @@ css-vendor@^2.0.8:
     "@babel/runtime" "^7.8.3"
     is-in-browser "^1.0.2"
 
-css-what@^6.0.1:
+css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
@@ -4805,21 +4810,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^2.5.2:
-  version "2.6.21"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
-  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
-
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-custom-event@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
-  integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
-
 cytoscape-cose-bilkent@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz#762fa121df9930ffeb51a495d87917c570ac209b"
@@ -4827,20 +4822,24 @@ cytoscape-cose-bilkent@^4.1.0:
   dependencies:
     cose-base "^1.0.0"
 
-cytoscape-fcose@^2.1.0:
+cytoscape-fcose@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz#e4d6f6490df4fab58ae9cea9e5c3ab8d7472f471"
   integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
   dependencies:
     cose-base "^2.2.0"
 
-cytoscape@^3.23.0:
-  version "3.28.1"
-  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.28.1.tgz#f32c3e009bdf32d47845a16a4cd2be2bbc01baf7"
-  integrity sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==
+cytoscape@^3.29.2:
+  version "3.30.2"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.30.2.tgz#94149707fb6547a55e3b44f03ffe232706212161"
+  integrity sha512-oICxQsjW8uSaRmn4UK/jkczKOqTrVqt5/1WL0POiJUT2EKNc9STM4hYFHv917yu55aTBMFNRzymlJhVAiWPCxw==
+
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
   dependencies:
-    heap "^0.2.6"
-    lodash "^4.17.21"
+    internmap "^1.0.0"
 
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.4"
@@ -4958,6 +4957,11 @@ d3-hierarchy@3:
   dependencies:
     d3-color "1 - 3"
 
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 "d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
@@ -4978,6 +4982,14 @@ d3-random@3:
   resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
   integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
 
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
 d3-scale-chromatic@3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
@@ -5009,6 +5021,13 @@ d3-shape@3:
   dependencies:
     d3-path "^3.1.0"
 
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
 "d3-time-format@2 - 4", d3-time-format@4:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
@@ -5050,7 +5069,7 @@ d3-zoom@3:
     d3-selection "2 - 3"
     d3-transition "2 - 3"
 
-d3@^7.4.0, d3@^7.8.2:
+d3@^7.8.2, d3@^7.9.0:
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/d3/-/d3-7.9.0.tgz#579e7acb3d749caf8860bd1741ae8d371070cd5d"
   integrity sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==
@@ -5086,20 +5105,18 @@ d3@^7.4.0, d3@^7.8.2:
     d3-transition "3"
     d3-zoom "3"
 
-dagre-d3-es@7.0.9:
-  version "7.0.9"
-  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.9.tgz#aca12fccd9d09955a4430029ba72ee6934542a8d"
-  integrity sha512-rYR4QfVmy+sR44IBDvVtcAmOReGBvRCWDpO2QjYwqgh9yijw6eSHBqaPG/LIOEy7aBsniLvtMW6pg19qJhq60w==
+dagre-d3-es@7.0.10:
+  version "7.0.10"
+  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz#19800d4be674379a3cd8c86a8216a2ac6827cadc"
+  integrity sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==
   dependencies:
     d3 "^7.8.2"
     lodash-es "^4.17.21"
 
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==
-  dependencies:
-    assert-plus "^1.0.0"
+data-uri-to-buffer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
+  integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
 
 data-view-buffer@^1.0.1:
   version "1.0.1"
@@ -5128,25 +5145,10 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-date-fns@2.0.0-alpha.27:
-  version "2.0.0-alpha.27"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c"
-  integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==
-
-date-format@^4.0.14:
-  version "4.0.14"
-  resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
-  integrity sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==
-
-dayjs@1.11.4:
-  version "1.11.4"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
-  integrity sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==
-
-dayjs@^1.11.5, dayjs@^1.11.7:
-  version "1.11.10"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
-  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+dayjs@1.11.13, dayjs@^1.11.10, dayjs@^1.11.5:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
 
 debug@2.6.9:
   version "2.6.9"
@@ -5155,14 +5157,14 @@ debug@2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.6:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
   dependencies:
-    ms "2.1.2"
+    ms "^2.1.3"
 
-debug@^3.1.0, debug@^3.2.7:
+debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -5174,30 +5176,6 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-deep-equal@^2.0.5:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
-  integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.5"
-    es-get-iterator "^1.1.3"
-    get-intrinsic "^1.2.2"
-    is-arguments "^1.1.1"
-    is-array-buffer "^3.0.2"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    isarray "^2.0.5"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.1"
-    side-channel "^1.0.4"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.13"
-
 deep-extend@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -5213,6 +5191,19 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+default-browser-id@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-5.0.0.tgz#a1d98bf960c15082d8a3fa69e83150ccccc3af26"
+  integrity sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==
+
+default-browser@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-5.2.1.tgz#7b7ba61204ff3e425b556869ae6d3e9d9f1712cf"
+  integrity sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==
+  dependencies:
+    bundle-name "^4.1.0"
+    default-browser-id "^5.0.0"
+
 default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
@@ -5236,12 +5227,12 @@ define-data-property@^1.0.1, define-data-property@^1.1.4:
     es-errors "^1.3.0"
     gopd "^1.0.1"
 
-define-lazy-prop@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
-  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+define-lazy-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
 
-define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
+define-properties@^1.2.0, define-properties@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
   integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
@@ -5250,19 +5241,6 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-del@^2.2.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
-  integrity sha512-Z4fzpbIRjOu7lO5jCETSWoqUDVe0IPOlfugBsF6suen2LKDlVb4QZpKEM9P+buNJ4KI1eN7I083w/pbKUpsrWQ==
-  dependencies:
-    globby "^5.0.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-    rimraf "^2.2.8"
-
 delaunator@5:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
@@ -5280,11 +5258,6 @@ delegate@^3.1.2:
   resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
   integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
-
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -5295,25 +5268,30 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
-dependency-graph@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
-  integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-libc@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
 detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
-di@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
-  integrity sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 diff-match-patch@^1.0.5:
   version "1.0.5"
@@ -5330,21 +5308,19 @@ dijkstrajs@^1.0.1:
   resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz#4c8dbdea1f0f6478bff94d9c49c784d623e4fc23"
   integrity sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==
 
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
-directory-tree@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/directory-tree/-/directory-tree-3.5.1.tgz#004d599c2478d752e7906e3a922b09c7ee2f03e2"
-  integrity sha512-HqjZ49fDzUnKYUhHxVw9eKBqbQ+lL0v4kSBInlDlaktmLtGoV9tC54a6A0ZfYeIrkMHWTE6MwwmUXP477+UEKQ==
+directory-tree@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/directory-tree/-/directory-tree-3.5.2.tgz#bdc4948ec6b357cb1afdf63c719acc8d9e42ce30"
+  integrity sha512-DsOqeZEHkZnZrVOJG3mE/J9M6J8PulImiC6I1ZpoprVlfno8GvLOPDMkxiJihklLK7B9aVudG463L1+S/kzjiw==
   dependencies:
     command-line-args "^5.2.0"
     command-line-usage "^6.1.1"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-packet@^5.2.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
@@ -5359,18 +5335,6 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
-dom-align@^1.7.0:
-  version "1.12.4"
-  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.4.tgz#3503992eb2a7cfcb2ed3b2a6d21e0b9c00d54511"
-  integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==
-
 dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
@@ -5379,116 +5343,108 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dom-serialize@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
-  integrity sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==
-  dependencies:
-    custom-event "~1.0.0"
-    ent "~2.2.0"
-    extend "^3.0.0"
-    void-elements "^2.0.0"
-
-dom-serializer@^1.0.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
-  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
   dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.0"
-    entities "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
-domhandler@^4.2.0, domhandler@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
-  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
   dependencies:
-    domelementtype "^2.2.0"
+    domelementtype "^2.3.0"
 
-dompurify@2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.3.tgz#f4133af0e6a50297fc8874e2eaedc13a3c308c03"
-  integrity sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==
+dompurify@^3.0.11:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.7.tgz#711a8c96479fb6ced93453732c160c3c72418a6a"
+  integrity sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==
 
-domutils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
-  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
   dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
 
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 "echarts@https://github.com/thingsboard/echarts/archive/5.5.0-TB.tar.gz":
   version "5.5.0-TB"
-  resolved "https://github.com/thingsboard/echarts/archive/5.5.0-TB.tar.gz#d1017728576b3fd65532eb17e503d1349f7feaed"
+  resolved "https://github.com/thingsboard/echarts/archive/5.5.0-TB.tar.gz#0b707b5cd2ae4699e9ced8b07ca49cb70189ae2a"
   dependencies:
     tslib "2.3.0"
     zrender "5.5.0"
 
-editorconfig@^0.15.3:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
-  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+editorconfig@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-1.0.4.tgz#040c9a8e9a6c5288388b87c2db07028aa89f53a3"
+  integrity sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==
   dependencies:
-    commander "^2.19.0"
-    lru-cache "^4.1.5"
-    semver "^5.6.0"
-    sigmund "^1.0.1"
+    "@one-ini/wasm" "0.1.1"
+    commander "^10.0.0"
+    minimatch "9.0.1"
+    semver "^7.5.3"
 
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.4.284, electron-to-chromium@^1.4.668:
-  version "1.4.708"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.708.tgz#d54d3b47cb44ae6b190067439c42135456907893"
-  integrity sha512-iWgEEvREL4GTXXHKohhh33+6Y8XkPI5eHihDmm8zUk5Zo7HICEW+wI/j5kJ2tbuNUCXJ/sNXa03ajW635DiJXA==
+electron-to-chromium@^1.5.28:
+  version "1.5.31"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.31.tgz#b1478418769dec72ea70d9fdf147a81491857f10"
+  integrity sha512-QcDoBbQeYt0+3CWcK/rEbuHvwpbT/8SV9T3OSgs6cX1FlcUAkgrkqbg9zLnDrMM/rLamzQwal4LYFCiWk861Tg==
 
-elkjs@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.8.2.tgz#c37763c5a3e24e042e318455e0147c912a7c248e"
-  integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+emoji-regex@^10.3.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-toolkit@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-7.0.1.tgz#4ea2a78fe4b40c7cdbe7ef5725c7011299932f09"
-  integrity sha512-l5aJyAhpC5s4mDuoVuqt4SzVjwIsIvakPh4ZGJJE4KWuWFCEHaXacQFkStVdD9zbRR+/BbRXob7u99o0lQFr8A==
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+"emoji-toolkit@>= 8.0.0 < 10.0.0":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-9.0.1.tgz#b3da51a4d9b1e89608b6a8506a5df6dbc3125495"
+  integrity sha512-sMMNqKNLVHXJfIKoPbrRJwtYuysVNC9GlKetr72zE3SSVbHqoeDLWVrxP0uM0AE0qvdl3hbUk+tJhhwXZrDHaw==
 
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-encode-utf8@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
-  integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
 encoding@^0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
@@ -5496,55 +5452,29 @@ encoding@^0.1.13:
   dependencies:
     iconv-lite "^0.6.2"
 
-engine.io-parser@~5.2.1:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.2.tgz#37b48e2d23116919a3453738c5720455e64e1c49"
-  integrity sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==
-
-engine.io@~6.5.2:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.5.4.tgz#6822debf324e781add2254e912f8568508850cdc"
-  integrity sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==
-  dependencies:
-    "@types/cookie" "^0.4.1"
-    "@types/cors" "^2.8.12"
-    "@types/node" ">=10.0.0"
-    accepts "~1.3.4"
-    base64id "2.0.0"
-    cookie "~0.4.1"
-    cors "~2.8.5"
-    debug "~4.3.1"
-    engine.io-parser "~5.2.1"
-    ws "~8.11.0"
-
-enhanced-resolve@^5.10.0:
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz#65ec88778083056cb32487faa9aef82ed0864787"
-  integrity sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==
+enhanced-resolve@^5.17.1:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-ent@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
-  integrity sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==
-
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
-entities@^4.3.0, entities@^4.4.0:
+entities@^4.2.0, entities@^4.3.0, entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-env-paths@^2.2.0:
+env-paths@^2.2.0, env-paths@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
+environment@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
+  integrity sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
+
 err-code@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
@@ -5562,59 +5492,12 @@ error-ex@^1.3.1:
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
-    is-arrayish "^0.2.1"
-
-es-abstract@^1.22.1, es-abstract@^1.22.3:
-  version "1.22.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.5.tgz#1417df4e97cc55f09bf7e58d1e614bc61cb8df46"
-  integrity sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==
-  dependencies:
-    array-buffer-byte-length "^1.0.1"
-    arraybuffer.prototype.slice "^1.0.3"
-    available-typed-arrays "^1.0.7"
-    call-bind "^1.0.7"
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    es-set-tostringtag "^2.0.3"
-    es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.6"
-    get-intrinsic "^1.2.4"
-    get-symbol-description "^1.0.2"
-    globalthis "^1.0.3"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
-    has-proto "^1.0.3"
-    has-symbols "^1.0.3"
-    hasown "^2.0.1"
-    internal-slot "^1.0.7"
-    is-array-buffer "^3.0.4"
-    is-callable "^1.2.7"
-    is-negative-zero "^2.0.3"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.3"
-    is-string "^1.0.7"
-    is-typed-array "^1.1.13"
-    is-weakref "^1.0.2"
-    object-inspect "^1.13.1"
-    object-keys "^1.1.1"
-    object.assign "^4.1.5"
-    regexp.prototype.flags "^1.5.2"
-    safe-array-concat "^1.1.0"
-    safe-regex-test "^1.0.3"
-    string.prototype.trim "^1.2.8"
-    string.prototype.trimend "^1.0.7"
-    string.prototype.trimstart "^1.0.7"
-    typed-array-buffer "^1.0.2"
-    typed-array-byte-length "^1.0.1"
-    typed-array-byte-offset "^1.0.2"
-    typed-array-length "^1.0.5"
-    unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.14"
+    is-arrayish "^0.2.1"
 
-es-abstract@^1.23.0:
-  version "1.23.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.2.tgz#693312f3940f967b8dd3eebacb590b01712622e0"
-  integrity sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==
+es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2:
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
   dependencies:
     array-buffer-byte-length "^1.0.1"
     arraybuffer.prototype.slice "^1.0.3"
@@ -5655,19 +5538,14 @@ es-abstract@^1.23.0:
     safe-regex-test "^1.0.3"
     string.prototype.trim "^1.2.9"
     string.prototype.trimend "^1.0.8"
-    string.prototype.trimstart "^1.0.7"
+    string.prototype.trimstart "^1.0.8"
     typed-array-buffer "^1.0.2"
     typed-array-byte-length "^1.0.1"
     typed-array-byte-offset "^1.0.2"
-    typed-array-length "^1.0.5"
+    typed-array-length "^1.0.6"
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.15"
 
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-
 es-define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
@@ -5675,30 +5553,15 @@ es-define-property@^1.0.0:
   dependencies:
     get-intrinsic "^1.2.4"
 
-es-errors@^1.0.0, es-errors@^1.2.1, es-errors@^1.3.0:
+es-errors@^1.2.1, es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-get-iterator@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
-  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    has-symbols "^1.0.3"
-    is-arguments "^1.1.1"
-    is-map "^2.0.2"
-    is-set "^2.0.2"
-    is-string "^1.0.7"
-    isarray "^2.0.5"
-    stop-iteration-iterator "^1.0.0"
-
-es-module-lexer@^0.9.0:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
-  integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
+es-module-lexer@^1.2.1, es-module-lexer@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
 
 es-object-atoms@^1.0.0:
   version "1.0.0"
@@ -5732,62 +5595,81 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es6-promise@^4.0.3:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
-  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==
-  dependencies:
-    es6-promise "^4.0.3"
+esbuild-wasm@0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.23.0.tgz#7b09c7bc669b702b440aeb3d5c9210f96766e1b2"
+  integrity sha512-6jP8UmWy6R6TUUV8bMuC3ZyZ6lZKI56x0tkxyCIqWwRRJ/DgeQKneh/Oid5EoGoPFLrGNkz47ZEtWAYuiY/u9g==
 
-esbuild-wasm@0.17.8:
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.17.8.tgz#c2348306430c27613ee3cc9a955cdd54df29137a"
-  integrity sha512-zCmpxv95E0FuCmvdw1K836UHnj4EdiQnFfjTby35y3LAjRPtXMj3sbHDRHjbD8Mqg5lTwq3knacr/1qIFU51CQ==
-
-esbuild@0.17.8:
-  version "0.17.8"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.8.tgz#f7f799abc7cdce3f0f2e3e0c01f120d4d55193b4"
-  integrity sha512-g24ybC3fWhZddZK6R3uD2iF/RIPnRpwJAqLov6ouX3hMbY4+tKolP0VMF3zuIYCaXun+yHwS5IPQ91N2BT191g==
+esbuild@0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.23.0.tgz#de06002d48424d9fdb7eb52dbe8e95927f852599"
+  integrity sha512-1lvV17H2bMYda/WaFb2jLPeHU3zml2k4/yagNMG8Q/YtfMjCwEUZa2eXXMgZTVSL5q1n4H7sQ0X6CdJDqqeCFA==
   optionalDependencies:
-    "@esbuild/android-arm" "0.17.8"
-    "@esbuild/android-arm64" "0.17.8"
-    "@esbuild/android-x64" "0.17.8"
-    "@esbuild/darwin-arm64" "0.17.8"
-    "@esbuild/darwin-x64" "0.17.8"
-    "@esbuild/freebsd-arm64" "0.17.8"
-    "@esbuild/freebsd-x64" "0.17.8"
-    "@esbuild/linux-arm" "0.17.8"
-    "@esbuild/linux-arm64" "0.17.8"
-    "@esbuild/linux-ia32" "0.17.8"
-    "@esbuild/linux-loong64" "0.17.8"
-    "@esbuild/linux-mips64el" "0.17.8"
-    "@esbuild/linux-ppc64" "0.17.8"
-    "@esbuild/linux-riscv64" "0.17.8"
-    "@esbuild/linux-s390x" "0.17.8"
-    "@esbuild/linux-x64" "0.17.8"
-    "@esbuild/netbsd-x64" "0.17.8"
-    "@esbuild/openbsd-x64" "0.17.8"
-    "@esbuild/sunos-x64" "0.17.8"
-    "@esbuild/win32-arm64" "0.17.8"
-    "@esbuild/win32-ia32" "0.17.8"
-    "@esbuild/win32-x64" "0.17.8"
-
-escalade@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
-  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+    "@esbuild/aix-ppc64" "0.23.0"
+    "@esbuild/android-arm" "0.23.0"
+    "@esbuild/android-arm64" "0.23.0"
+    "@esbuild/android-x64" "0.23.0"
+    "@esbuild/darwin-arm64" "0.23.0"
+    "@esbuild/darwin-x64" "0.23.0"
+    "@esbuild/freebsd-arm64" "0.23.0"
+    "@esbuild/freebsd-x64" "0.23.0"
+    "@esbuild/linux-arm" "0.23.0"
+    "@esbuild/linux-arm64" "0.23.0"
+    "@esbuild/linux-ia32" "0.23.0"
+    "@esbuild/linux-loong64" "0.23.0"
+    "@esbuild/linux-mips64el" "0.23.0"
+    "@esbuild/linux-ppc64" "0.23.0"
+    "@esbuild/linux-riscv64" "0.23.0"
+    "@esbuild/linux-s390x" "0.23.0"
+    "@esbuild/linux-x64" "0.23.0"
+    "@esbuild/netbsd-x64" "0.23.0"
+    "@esbuild/openbsd-arm64" "0.23.0"
+    "@esbuild/openbsd-x64" "0.23.0"
+    "@esbuild/sunos-x64" "0.23.0"
+    "@esbuild/win32-arm64" "0.23.0"
+    "@esbuild/win32-ia32" "0.23.0"
+    "@esbuild/win32-x64" "0.23.0"
+
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
+
+escalade@^3.1.1, escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
@@ -5806,57 +5688,69 @@ eslint-import-resolver-node@^0.3.9:
     is-core-module "^2.13.0"
     resolve "^1.22.4"
 
-eslint-module-utils@^2.8.0:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
-  integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
+eslint-module-utils@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
   dependencies:
     debug "^3.2.7"
 
 eslint-plugin-import@latest:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
-  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
   dependencies:
-    array-includes "^3.1.7"
-    array.prototype.findlastindex "^1.2.3"
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
     array.prototype.flat "^1.3.2"
     array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.9"
-    eslint-module-utils "^2.8.0"
-    hasown "^2.0.0"
-    is-core-module "^2.13.1"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.fromentries "^2.0.7"
-    object.groupby "^1.0.1"
-    object.values "^1.1.7"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
     semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
     tsconfig-paths "^3.15.0"
 
 eslint-plugin-jsdoc@latest:
-  version "48.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.1.tgz#9334a05555a95fdc192980627142177963b668b4"
-  integrity sha512-iUvbcyDZSO/9xSuRv2HQBw++8VkV/pt3UWtX9cpPH0l7GKPq78QC/6+PmyQHHvNZaTjAce6QVciEbnc6J/zH5g==
+  version "50.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.3.1.tgz#4b56340a3ef55df9957dede430c6338c717dc0dc"
+  integrity sha512-SY9oUuTMr6aWoJggUS40LtMjsRzJPB5ZT7F432xZIHK3EfHF+8i48GbUBpwanrtlL9l1gILNTHK9o8gEhYLcKA==
   dependencies:
-    "@es-joy/jsdoccomment" "~0.42.0"
+    "@es-joy/jsdoccomment" "~0.48.0"
     are-docs-informative "^0.0.2"
     comment-parser "1.4.1"
-    debug "^4.3.4"
+    debug "^4.3.6"
     escape-string-regexp "^4.0.0"
-    esquery "^1.5.0"
-    is-builtin-module "^3.2.1"
-    semver "^7.6.0"
+    espree "^10.1.0"
+    esquery "^1.6.0"
+    parse-imports "^2.1.1"
+    semver "^7.6.3"
     spdx-expression-parse "^4.0.0"
+    synckit "^0.9.1"
 
 eslint-plugin-prefer-arrow@latest:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.3.tgz#e7fbb3fa4cd84ff1015b9c51ad86550e55041041"
   integrity sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==
 
-eslint-scope@5.1.1, eslint-scope@^5.1.1:
+eslint-plugin-tailwindcss@^3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz#6bf9403e77a5f3f930fb3444a3e22b29cd0fee07"
+  integrity sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==
+  dependencies:
+    fast-glob "^3.2.5"
+    postcss "^8.4.4"
+
+eslint-scope@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -5864,93 +5758,78 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.0.0, eslint-scope@^7.2.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
-  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+eslint-scope@^8.0.2, eslint-scope@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.1.0.tgz#70214a174d4cbffbc3e8a26911d8bf51b9ae9d30"
+  integrity sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.37.0:
-  version "8.57.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
-  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+eslint-visitor-keys@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz#1f785cc5e81eb7534523d85922248232077d2f8c"
+  integrity sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==
+
+eslint@~9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.13.0.tgz#7659014b7dda1ff876ecbd990f726e11c61596e6"
+  integrity sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.4"
-    "@eslint/js" "8.57.0"
-    "@humanwhocodes/config-array" "^0.11.14"
+    "@eslint-community/regexpp" "^4.11.0"
+    "@eslint/config-array" "^0.18.0"
+    "@eslint/core" "^0.7.0"
+    "@eslint/eslintrc" "^3.1.0"
+    "@eslint/js" "9.13.0"
+    "@eslint/plugin-kit" "^0.2.0"
+    "@humanfs/node" "^0.16.5"
     "@humanwhocodes/module-importer" "^1.0.1"
-    "@nodelib/fs.walk" "^1.2.8"
-    "@ungap/structured-clone" "^1.2.0"
+    "@humanwhocodes/retry" "^0.3.1"
+    "@types/estree" "^1.0.6"
+    "@types/json-schema" "^7.0.15"
     ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
-    doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.2.2"
-    eslint-visitor-keys "^3.4.3"
-    espree "^9.6.1"
-    esquery "^1.4.2"
+    eslint-scope "^8.1.0"
+    eslint-visitor-keys "^4.1.0"
+    espree "^10.2.0"
+    esquery "^1.5.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
+    file-entry-cache "^8.0.0"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    globals "^13.19.0"
-    graphemer "^1.4.0"
     ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
-    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.3"
-    strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-espree@^9.6.0, espree@^9.6.1:
-  version "9.6.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
-  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+espree@^10.0.1, espree@^10.1.0, espree@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.2.0.tgz#f4bcead9e05b0615c968e85f83816bc386a45df6"
+  integrity sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==
   dependencies:
-    acorn "^8.9.0"
+    acorn "^8.12.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.4.1"
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+    eslint-visitor-keys "^4.1.0"
 
-esquery@^1.4.2, esquery@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
-  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+esquery@^1.5.0, esquery@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -5986,16 +5865,16 @@ eve-raphael@0.5.0:
   resolved "https://registry.yarnpkg.com/eve-raphael/-/eve-raphael-0.5.0.tgz#17c754b792beef3fa6684d79cf5a47c63c4cda30"
   integrity sha512-jrxnPsCGqng1UZuEp9DecX/AuSyAszATSjf4oEcRxvfxa1Oux4KkIPKBAAWWnpdwfARtr+Q0o9aPYWjsROD7ug==
 
-eventemitter-asyncresource@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eventemitter-asyncresource/-/eventemitter-asyncresource-1.0.0.tgz#734ff2e44bf448e627f7748f905d6bdd57bdb65b"
-  integrity sha512-39F7TBIV0G7gTelxwbEqnwhp90eqCPON1k0NwNfwhgKn4Co4ybUbj2pECcXT0B3ztRKZ7Pw1JujUUgmQJHcVAQ==
-
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
+eventemitter3@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -6016,59 +5895,49 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-exit@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
-
 exponential-backoff@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"
   integrity sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==
 
 express@^4.17.3:
-  version "4.18.3"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.3.tgz#6870746f3ff904dee1819b82e4b51509afffb0d4"
-  integrity sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
+  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.2"
+    body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.5.0"
+    cookie "0.6.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.2.0"
+    finalhandler "1.3.1"
     fresh "0.5.2"
     http-errors "2.0.0"
-    merge-descriptors "1.0.1"
+    merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
+    path-to-regexp "0.1.10"
     proxy-addr "~2.0.7"
-    qs "6.11.0"
+    qs "6.13.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.18.0"
-    serve-static "1.15.0"
+    send "0.19.0"
+    serve-static "1.16.2"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@^3.0.0, extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-external-editor@^3.0.3:
+external-editor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
   integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
@@ -6077,22 +5946,12 @@ external-editor@^3.0.3:
     iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==
-
-extsprintf@^1.2.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
-  integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
-
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.0:
+fast-glob@3.3.2, fast-glob@^3.2.5, fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -6113,6 +5972,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-uri@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.2.tgz#d78b298cf70fd3b752fd951175a3da6a7b48f024"
+  integrity sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@@ -6127,68 +5991,55 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
-figures@^3.0.0:
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
-  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
   dependencies:
-    escape-string-regexp "^1.0.5"
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
 
-file-entry-cache@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
-  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
   dependencies:
-    flat-cache "^3.0.4"
+    flat-cache "^4.0.0"
 
-file-selector@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.4.0.tgz#59ec4f27aa5baf0841e9c6385c8386bef4d18b17"
-  integrity sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
   dependencies:
-    tslib "^2.0.3"
+    tslib "^2.4.0"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
-finalhandler@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
-  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
   dependencies:
     debug "2.6.9"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     on-finished "2.4.1"
     parseurl "~1.3.3"
     statuses "2.0.1"
     unpipe "~1.0.0"
 
-find-cache-dir@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
-  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+find-cache-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-4.0.0.tgz#a30ee0448f81a3990708f6453633c733e2f6eec2"
+  integrity sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==
   dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
+    common-path-prefix "^3.0.0"
+    pkg-dir "^7.0.0"
 
 find-replace@^3.0.0:
   version "3.0.0"
@@ -6197,7 +6048,12 @@ find-replace@^3.0.0:
   dependencies:
     array-back "^3.0.1"
 
-find-up@^4.0.0, find-up@^4.1.0:
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
+find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -6213,6 +6069,14 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+find-up@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-6.3.0.tgz#2abab3d3280b2dc7ac10199ef324c4e002c8c790"
+  integrity sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==
+  dependencies:
+    locate-path "^7.1.0"
+    path-exists "^5.0.0"
+
 find-yarn-workspace-root@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
@@ -6220,21 +6084,20 @@ find-yarn-workspace-root@^2.0.0:
   dependencies:
     micromatch "^4.0.2"
 
-flat-cache@^3.0.4:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
-  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
   dependencies:
     flatted "^3.2.9"
-    keyv "^4.5.3"
-    rimraf "^3.0.2"
+    keyv "^4.5.4"
 
 flat@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
-flatted@^3.2.7, flatted@^3.2.9:
+flatted@^3.2.9:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
@@ -6248,9 +6111,9 @@ flatted@^3.2.7, flatted@^3.2.9:
   resolved "https://github.com/thingsboard/flot.git#c2734540477d8b261d04ee18d4d38af3b0ecb81b"
 
 follow-redirects@^1.0.0:
-  version "1.15.6"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
-  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 font-awesome@^4.7.0:
   version "4.7.0"
@@ -6264,10 +6127,13 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
 
 form-data@4.0.0:
   version "4.0.0"
@@ -6278,21 +6144,19 @@ form-data@4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
   dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
+    fetch-blob "^3.1.2"
 
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.2.0:
+fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
@@ -6302,15 +6166,6 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -6335,17 +6190,12 @@ fs-minipass@^3.0.0:
   dependencies:
     minipass "^7.0.3"
 
-fs-monkey@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.5.tgz#fe450175f0db0d7ea758102e1d84096acb925788"
-  integrity sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -6370,20 +6220,6 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-gauge@^4.0.3:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"
-  integrity sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==
-  dependencies:
-    aproba "^1.0.3 || ^2.0.0"
-    color-support "^1.1.3"
-    console-control-strings "^1.1.0"
-    has-unicode "^2.0.1"
-    signal-exit "^3.0.7"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-    wide-align "^1.1.5"
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -6405,7 +6241,12 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+get-east-asian-width@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz#5e6ebd9baee6fb8b7b6bd505221065f0cd91f64e"
+  integrity sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
   integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
@@ -6416,11 +6257,6 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
-get-package-type@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
-  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
-
 get-stream@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
@@ -6435,13 +6271,6 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==
-  dependencies:
-    assert-plus "^1.0.0"
-
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -6461,18 +6290,19 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@8.1.0, glob@^8.0.1, glob@^8.0.3:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
-  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+glob@^10.2.2, glob@^10.3.10, glob@^10.3.3, glob@^10.3.7:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
   dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^5.0.1"
-    once "^1.3.0"
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
 
-glob@^7.0.3, glob@^7.0.6, glob@^7.1.3, glob@^7.1.4, glob@^7.1.7:
+glob@^7.1.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -6489,54 +6319,30 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0:
-  version "13.24.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
-  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
-  dependencies:
-    type-fest "^0.20.2"
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
 
 globalthis@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
-  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
-  dependencies:
-    define-properties "^1.1.3"
-
-globby@^11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
-  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
   dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.2.9"
-    ignore "^5.2.0"
-    merge2 "^1.4.1"
-    slash "^3.0.0"
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
 
-globby@^13.1.1:
-  version "13.2.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
-  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
+globby@^14.0.0:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-14.0.2.tgz#06554a54ccfe9264e5a9ff8eded46aa1e306482f"
+  integrity sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==
   dependencies:
-    dir-glob "^3.0.1"
-    fast-glob "^3.3.0"
+    "@sindresorhus/merge-streams" "^2.1.0"
+    fast-glob "^3.3.2"
     ignore "^5.2.4"
-    merge2 "^1.4.1"
-    slash "^4.0.0"
-
-globby@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
-  integrity sha512-HJRTIH2EeH44ka+LWig+EqT2ONSYpVlNfx6pyd592/VF1TbfljJ7elwie7oSwcViLGqOdWocSdu2txwBF9bjmQ==
-  dependencies:
-    array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
+    path-type "^5.0.0"
+    slash "^5.1.0"
+    unicorn-magic "^0.1.0"
 
 good-listener@^1.2.2:
   version "1.2.2"
@@ -6552,21 +6358,21 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
-
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+hachure-fill@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
+  integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
+
 hammerjs@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
@@ -6577,26 +6383,6 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==
-
-har-validator@~5.1.3:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
-  dependencies:
-    ajv "^6.12.3"
-    har-schema "^2.0.0"
-
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
-  dependencies:
-    ansi-regex "^2.0.0"
-
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -6636,11 +6422,6 @@ has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   dependencies:
     has-symbols "^1.0.3"
 
-has-unicode@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
-
 hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
@@ -6648,38 +6429,19 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-hdr-histogram-js@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/hdr-histogram-js/-/hdr-histogram-js-2.0.3.tgz#0b860534655722b6e3f3e7dca7b78867cf43dcb5"
-  integrity sha512-Hkn78wwzWHNCp2uarhzQ2SGFLU3JY8SBDDd3TAABK4fc30wm+MuPOrg5QVFVfkKOQd6Bfz3ukJEI+q9sXEkK1g==
-  dependencies:
-    "@assemblyscript/loader" "^0.10.1"
-    base64-js "^1.2.0"
-    pako "^1.0.3"
-
-hdr-histogram-percentiles-obj@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz#9409f4de0c2dda78e61de2d9d78b1e9f3cba283c"
-  integrity sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==
-
-heap@^0.2.6:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
-  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
-
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     react-is "^16.7.0"
 
-hosted-git-info@^6.0.0:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-6.1.1.tgz#629442c7889a69c05de604d52996b74fe6f26d58"
-  integrity sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==
+hosted-git-info@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-7.0.2.tgz#9b751acac097757667f30114607ef7b661ff4f17"
+  integrity sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==
   dependencies:
-    lru-cache "^7.5.1"
+    lru-cache "^10.0.1"
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -6691,16 +6453,11 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-html-entities@^2.3.2:
+html-entities@^2.4.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
   integrity sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==
 
-html-escaper@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
-  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
-
 html2canvas@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
@@ -6709,7 +6466,17 @@ html2canvas@^1.4.1:
     css-line-break "^2.1.0"
     text-segmentation "^1.0.3"
 
-http-cache-semantics@^4.1.0, http-cache-semantics@^4.1.1:
+htmlparser2@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
+http-cache-semantics@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
   integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
@@ -6745,14 +6512,25 @@ http-parser-js@>=0.5.1:
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
   integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
 
-http-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
-  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+http-proxy-agent@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
+  integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
   dependencies:
-    "@tootallnate/once" "2"
-    agent-base "6"
-    debug "4"
+    agent-base "^7.1.0"
+    debug "^4.3.4"
+
+http-proxy-middleware@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-3.0.3.tgz#dc1313c75bd00d81e103823802551ee30130ebd1"
+  integrity sha512-usY0HG5nyDUwtqpiZdETNbmKtw3QQ1jwYFZ9wi5iHzX2BcILwQKtYDJPo7XHTsu5Z0B2Hj3W9NNnbd+AjFWjqg==
+  dependencies:
+    "@types/http-proxy" "^1.17.15"
+    debug "^4.3.6"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.3"
+    is-plain-object "^5.0.0"
+    micromatch "^4.0.8"
 
 http-proxy-middleware@^2.0.3:
   version "2.0.6"
@@ -6774,47 +6552,28 @@ http-proxy@^1.18.1:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
-https-proxy-agent@5.0.1, https-proxy-agent@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
-  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+https-proxy-agent@7.0.5, https-proxy-agent@^7.0.1:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
+  integrity sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==
   dependencies:
-    agent-base "6"
+    agent-base "^7.0.2"
     debug "4"
 
-https-proxy-agent@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
-  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
-  dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
-
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-humanize-ms@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
-  integrity sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==
-  dependencies:
-    ms "^2.0.0"
+hyperdyperid@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hyperdyperid/-/hyperdyperid-1.2.0.tgz#59668d323ada92228d2a869d3e474d5a33b69e6b"
+  integrity sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==
 
 hyphenate-style-name@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
+  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
 
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
@@ -6840,22 +6599,17 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore-walk@^6.0.0:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-6.0.4.tgz#89950be94b4f522225eb63a13c56badb639190e9"
-  integrity sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==
+ignore-walk@^6.0.4:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-6.0.5.tgz#ef8d61eab7da169078723d1f82833b36e200b0dd"
+  integrity sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==
   dependencies:
     minimatch "^9.0.0"
 
-ignore@5.2.4:
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
-  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
-
-ignore@^5.2.0, ignore@^5.2.4:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
-  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+ignore@5.3.2, ignore@^5.2.0, ignore@^5.2.4, ignore@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
 image-size@~0.5.0:
   version "0.5.5"
@@ -6868,11 +6622,11 @@ immediate@~3.0.5:
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
 immutable@^4.0.0:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
-  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
 
-import-fresh@^3.2.1:
+import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -6908,38 +6662,17 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
-ini@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-3.0.1.tgz#c76ec81007875bc44d544ff7a11a55d12294102d"
-  integrity sha512-it4HyVAUTKBc6m8e1iXWvXSTdndF7HbdN713+kvLrymxTaU4AUBWrJ4vEooP+V7fexnVD3LKcBshjGGPefSMUQ==
+ini@4.1.3, ini@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
+  integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
 
 ini@^1.3.4:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-inquirer@8.2.4:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.4.tgz#ddbfe86ca2f67649a67daa6f1051c128f684f0b4"
-  integrity sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^4.1.1"
-    cli-cursor "^3.1.0"
-    cli-width "^3.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.21"
-    mute-stream "0.0.8"
-    ora "^5.4.1"
-    run-async "^2.4.0"
-    rxjs "^7.5.5"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-    through "^2.3.6"
-    wrap-ansi "^7.0.0"
-
-internal-slot@^1.0.4, internal-slot@^1.0.7:
+internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
   integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
@@ -6953,6 +6686,11 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 ip-address@^9.0.5:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-9.0.5.tgz#117a960819b08780c3bd1f14ef3c1cc1d3f3ea5a"
@@ -6966,20 +6704,12 @@ ipaddr.js@1.9.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-ipaddr.js@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.1.0.tgz#2119bc447ff8c257753b196fc5f1ce08a4cdf39f"
-  integrity sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==
-
-is-arguments@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
+ipaddr.js@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.2.0.tgz#d33fa7bac284f4de7af949638c9d68157c6b92e8"
+  integrity sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==
 
-is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
   integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
@@ -7014,31 +6744,17 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-builtin-module@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz#f03271717d8654cfcaf07ab0463faa3571581169"
-  integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==
-  dependencies:
-    builtin-modules "^3.3.0"
-
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-ci@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
-  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
-  dependencies:
-    ci-info "^2.0.0"
-
-is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.8.1, is-core-module@^2.9.0:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
-  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+is-core-module@^2.13.0, is-core-module@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
+  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
   dependencies:
-    hasown "^2.0.0"
+    hasown "^2.0.2"
 
 is-data-view@^1.0.1:
   version "1.0.1"
@@ -7047,18 +6763,23 @@ is-data-view@^1.0.1:
   dependencies:
     is-typed-array "^1.1.13"
 
-is-date-object@^1.0.1, is-date-object@^1.0.5:
+is-date-object@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-docker@^2.0.0, is-docker@^2.1.1:
+is-docker@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
+is-docker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -7069,6 +6790,18 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
+is-fullwidth-code-point@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz#9609efced7c2f97da7b60145ef481c787c7ba704"
+  integrity sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==
+  dependencies:
+    get-east-asian-width "^1.0.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -7081,6 +6814,13 @@ is-in-browser@^1.0.2, is-in-browser@^1.1.3:
   resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
   integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
 
+is-inside-container@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+  dependencies:
+    is-docker "^3.0.0"
+
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
@@ -7091,16 +6831,16 @@ is-lambda@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
   integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
-is-map@^2.0.2, is-map@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
-  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
-
 is-negative-zero@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
   integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
+is-network-error@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-network-error/-/is-network-error-1.1.0.tgz#d26a760e3770226d11c169052f266a4803d9c997"
+  integrity sha512-tUdRRAnhT+OtCZR/LxZelH/C7QtjtFrTu5tXCA8pl55eTUElUHT+GPYV8MBMBvea/j+NxQqVt3LbWMRir7Gx9g==
+
 is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@@ -7113,30 +6853,6 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-path-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
-  integrity sha512-cnS56eR9SPAscL77ik76ATVqoPARTqPIVkMDVxRaWH06zT+6+CzIroYRJ0VVvm0Z1zfAvxvz9i/D3Ppjaqt5Nw==
-
-is-path-in-cwd@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
-  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
-  dependencies:
-    is-path-inside "^1.0.0"
-
-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
-  integrity sha512-qhsCR/Esx4U4hg/9I19OVUAJkGWtjRYHMRgUMZE2TDdj+Ag+kttZanLupfddNyglzz50cUlmWzUaI37GDfNx/g==
-  dependencies:
-    path-is-inside "^1.0.1"
-
-is-path-inside@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
-  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
-
 is-plain-obj@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
@@ -7149,6 +6865,11 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -7157,11 +6878,6 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-set@^2.0.2, is-set@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
-  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
-
 is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
@@ -7195,21 +6911,11 @@ is-typed-array@^1.1.13:
   dependencies:
     which-typed-array "^1.1.14"
 
-is-typedarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
-
 is-unicode-supported@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
   integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
 
-is-weakmap@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
-  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
-
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -7217,26 +6923,25 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
-is-weakset@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
-  integrity sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==
-  dependencies:
-    call-bind "^1.0.7"
-    get-intrinsic "^1.2.4"
-
 is-what@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
   integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
 
-is-wsl@^2.1.1, is-wsl@^2.2.0:
+is-wsl@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
   dependencies:
     is-docker "^2.0.0"
 
+is-wsl@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-3.1.0.tgz#e1c657e39c10090afcbedec61720f6b924c3cbd2"
+  integrity sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==
+  dependencies:
+    is-inside-container "^1.0.0"
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -7247,110 +6952,45 @@ isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
-isbinaryfile@^4.0.8:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
-  integrity sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isexe@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-3.1.1.tgz#4a407e2bd78ddfb14bea0c27c6f7072dde775f0d"
+  integrity sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==
+
 isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
-
-istanbul-lib-coverage@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
-  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
-
-istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+istanbul-lib-coverage@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
   integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
 
-istanbul-lib-instrument@^5.0.4:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
-  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+istanbul-lib-instrument@6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz#fa15401df6c15874bcb2105f773325d78c666765"
+  integrity sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==
   dependencies:
-    "@babel/core" "^7.12.3"
-    "@babel/parser" "^7.14.7"
-    "@istanbuljs/schema" "^0.1.2"
+    "@babel/core" "^7.23.9"
+    "@babel/parser" "^7.23.9"
+    "@istanbuljs/schema" "^0.1.3"
     istanbul-lib-coverage "^3.2.0"
-    semver "^6.3.0"
-
-istanbul-lib-report@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d"
-  integrity sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==
-  dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    make-dir "^4.0.0"
-    supports-color "^7.1.0"
-
-istanbul-lib-source-maps@^3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
-  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
-  dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    rimraf "^2.6.3"
-    source-map "^0.6.1"
-
-istanbul-reports@^3.0.2:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
-  integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
-  dependencies:
-    html-escaper "^2.0.0"
-    istanbul-lib-report "^3.0.0"
-
-jasmine-core@^3.6.0:
-  version "3.99.1"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.99.1.tgz#5bfa4b2d76618868bfac4c8ff08bb26fffa4120d"
-  integrity sha512-Hu1dmuoGcZ7AfyynN3LsfruwMbxMALMka+YtZeGoLuDEySVmVAPaonkNoBRIw/ectu8b9tVQCJNgp4a4knp+tg==
-
-jasmine-core@~2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-2.8.0.tgz#bcc979ae1f9fd05701e45e52e65d3a5d63f1a24e"
-  integrity sha512-SNkOkS+/jMZvLhuSx1fjhcNWUC/KG6oVyFUGkSBEr9n1axSNduWU8GlI7suaHXr4yxjet6KjrUZxUTE5WzzWwQ==
-
-jasmine-core@~3.10.1:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.10.1.tgz#7aa6fa2b834a522315c651a128d940eca553989a"
-  integrity sha512-ooZWSDVAdh79Rrj4/nnfklL3NQVra0BcuhcuWoAwwi+znLDoUeH87AFfeX8s+YeYi6xlv5nveRyaA1v7CintfA==
-
-jasmine-spec-reporter@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/jasmine-spec-reporter/-/jasmine-spec-reporter-7.0.0.tgz#94b939448e63d4e2bd01668142389f20f0a8ea49"
-  integrity sha512-OtC7JRasiTcjsaCBPtMO0Tl8glCejM4J4/dNuOJdA8lBjz4PmWjYQ6pzb0uzpBNAWJMDudYuj9OdXJWqM2QTJg==
-  dependencies:
-    colors "1.4.0"
+    semver "^7.5.4"
 
-jasmine@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/jasmine/-/jasmine-2.8.0.tgz#6b089c0a11576b1f16df11b80146d91d4e8b8a3e"
-  integrity sha512-KbdGQTf5jbZgltoHs31XGiChAPumMSY64OZMWLNYnEnMfG5uwGBhffePwuskexjT+/Jea/gU3qAU8344hNohSw==
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
   dependencies:
-    exit "^0.1.2"
-    glob "^7.0.6"
-    jasmine-core "~2.8.0"
-
-jasminewd2@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.2.0.tgz#e37cf0b17f199cce23bea71b2039395246b4ec4e"
-  integrity sha512-Rn0nZe4rfDhzA63Al3ZGh0E+JTmM6ESZYXJGKuqKGZObsAB9fwXPD03GjtIEvJBDOhN94T5MzbwZSqzFHSQPzg==
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
 
 jest-worker@^27.4.5:
   version "27.5.1"
@@ -7361,17 +7001,23 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jquery.terminal@^2.35.3:
-  version "2.39.0"
-  resolved "https://registry.yarnpkg.com/jquery.terminal/-/jquery.terminal-2.39.0.tgz#defc2062dadebc41f0b97eebbfd0e5b4cd165616"
-  integrity sha512-5uOeJY8dxVJPdeGlaUuRFAcPlw3GzSxLLTmCSaqP9vJhSAu3Amgkr7e7LZxBvup8oQDYF8jRjQSvtIrkn1XsWw==
+jiti@^1.20.0, jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+
+jquery.terminal@^2.43.1:
+  version "2.43.1"
+  resolved "https://registry.yarnpkg.com/jquery.terminal/-/jquery.terminal-2.43.1.tgz#07f022d8853dd0fd8641f989623a30086b4381bb"
+  integrity sha512-TcezgCLdtAn0dTzPXK6kdnzJV4k9vcdTVxt7l0teFV+7LGWRCFIhs49U3WeNKU0aereFtlR5N5qrSWBGqPlw0A==
   dependencies:
     "@jcubic/lily" "^0.3.0"
     "@types/jquery" "^3.5.29"
     ansidec "^0.3.4"
-    coveralls-next "^4.2.0"
+    coveralls-next "^4.2.1"
     iconv-lite "^0.6.3"
     jquery "^3.7.1"
+    node-fetch "^3.3.2"
     prismjs "^1.27.0"
     wcwidth "^1.0.1"
   optionalDependencies:
@@ -7382,15 +7028,21 @@ jquery@>=1.9.1, jquery@^3.5.0, jquery@^3.7.1:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
   integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
 
-js-beautify@1.14.7:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.7.tgz#9206296de33f86dc106d3e50a35b7cf8729703b2"
-  integrity sha512-5SOX1KXPFKx+5f6ZrPsIPEY7NwKeQz47n3jm2i+XeHx9MoRsfQenlOP13FQhWvg8JRS0+XLO6XYUQ2GX+q+T9A==
+js-beautify@1.15.1:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.15.1.tgz#4695afb508c324e1084ee0b952a102023fc65b64"
+  integrity sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==
   dependencies:
     config-chain "^1.1.13"
-    editorconfig "^0.15.3"
-    glob "^8.0.3"
-    nopt "^6.0.0"
+    editorconfig "^1.0.4"
+    glob "^10.3.3"
+    js-cookie "^3.0.5"
+    nopt "^7.2.0"
+
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -7404,38 +7056,25 @@ js-yaml@4.1.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-js-yaml@^3.13.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
-  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 jsbn@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
   integrity sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
 
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
-
-jsdoc-type-pratt-parser@~4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.0.0.tgz#136f0571a99c184d84ec84662c45c29ceff71114"
-  integrity sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==
+jsdoc-type-pratt-parser@~4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz#ff6b4a3f339c34a6c188cbf50a16087858d22113"
+  integrity sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==
 
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
+jsesc@^3.0.2, jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
 
 json-buffer@3.0.1:
   version "3.0.1"
@@ -7448,9 +7087,9 @@ json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-parse-even-better-errors@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz#02bb29fb5da90b5444581749c22cedd3597c6cb0"
-  integrity sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz#b43d35e89c0f3be6b5fbbe9dc6c82467b30c28da"
+  integrity sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==
 
 json-schema-defaults@^0.4.0:
   version "0.4.0"
@@ -7469,20 +7108,20 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
-json-schema@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
-  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
-
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
+json-stable-stringify@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz#52d4361b47d49168bcc4e564189a42e5a7439454"
+  integrity sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==
+  dependencies:
+    call-bind "^1.0.5"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.1"
 
 json5@^1.0.2:
   version "1.0.2"
@@ -7491,22 +7130,15 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
+json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsonc-parser@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
-  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==
-  optionalDependencies:
-    graceful-fs "^4.1.6"
+jsonc-parser@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.3.1.tgz#f2a524b4f7fd11e3d791e559977ad60b98b798b4"
+  integrity sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==
 
 jsonfile@^6.0.1:
   version "6.1.0"
@@ -7517,22 +7149,17 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
+
 jsonparse@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
-jsprim@^1.2.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
-  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.4.0"
-    verror "1.10.0"
-
-jss-plugin-camel-case@^10.5.1:
+jss-plugin-camel-case@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c"
   integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==
@@ -7541,7 +7168,7 @@ jss-plugin-camel-case@^10.5.1:
     hyphenate-style-name "^1.0.3"
     jss "10.10.0"
 
-jss-plugin-default-unit@^10.5.1:
+jss-plugin-default-unit@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293"
   integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==
@@ -7549,7 +7176,7 @@ jss-plugin-default-unit@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.10.0"
 
-jss-plugin-global@^10.5.1:
+jss-plugin-global@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd"
   integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==
@@ -7557,7 +7184,7 @@ jss-plugin-global@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.10.0"
 
-jss-plugin-nested@^10.5.1:
+jss-plugin-nested@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219"
   integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==
@@ -7566,7 +7193,7 @@ jss-plugin-nested@^10.5.1:
     jss "10.10.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-props-sort@^10.5.1:
+jss-plugin-props-sort@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7"
   integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==
@@ -7574,7 +7201,7 @@ jss-plugin-props-sort@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.10.0"
 
-jss-plugin-rule-value-function@^10.5.1:
+jss-plugin-rule-value-function@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b"
   integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==
@@ -7583,7 +7210,7 @@ jss-plugin-rule-value-function@^10.5.1:
     jss "10.10.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-vendor-prefixer@^10.5.1:
+jss-plugin-vendor-prefixer@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7"
   integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==
@@ -7592,7 +7219,7 @@ jss-plugin-vendor-prefixer@^10.5.1:
     css-vendor "^2.0.8"
     jss "10.10.0"
 
-jss@10.10.0, jss@^10.5.1:
+jss@10.10.0, jss@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
   integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==
@@ -7609,14 +7236,14 @@ jstree-bootstrap-theme@^1.0.1:
   dependencies:
     jquery ">=1.9.1"
 
-jstree@^3.3.15:
-  version "3.3.16"
-  resolved "https://registry.yarnpkg.com/jstree/-/jstree-3.3.16.tgz#43e3a8a1ee270ddff514317250d5e85b95d63c52"
-  integrity sha512-yeeIJffi2WAqyMeHufXj/Ozy7GqgKdDkxfN8L8lwbG0h1cw/TgDafWmyhroH4AKgDSk9yW1W6jiJZu4zXAqzXw==
+jstree@^3.3.17:
+  version "3.3.17"
+  resolved "https://registry.yarnpkg.com/jstree/-/jstree-3.3.17.tgz#aa7f22ee504ba7f63f8942c3d71c62ff21f756cf"
+  integrity sha512-V0Pl1B6BIaxHUQMiWkol37QlhlBKoZA9RUeUmm95+UnV2QeZsj2QP1sOQl/m2EIOyZXOOxOHvR0SYZLSDC7EFw==
   dependencies:
     jquery "^3.5.0"
 
-jszip@^3.1.3, jszip@^3.10.1:
+jszip@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
   integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
@@ -7626,36 +7253,6 @@ jszip@^3.1.3, jszip@^3.10.1:
     readable-stream "~2.3.6"
     setimmediate "^1.0.5"
 
-karma-chrome-launcher@~3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz#baca9cc071b1562a1db241827257bfe5cab597ea"
-  integrity sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==
-  dependencies:
-    which "^1.2.1"
-
-karma-coverage-istanbul-reporter@~3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-3.0.3.tgz#f3b5303553aadc8e681d40d360dfdc19bc7e9fe9"
-  integrity sha512-wE4VFhG/QZv2Y4CdAYWDbMmcAHeS926ZIji4z+FkB2aF/EposRb6DP6G5ncT/wXhqUfAb/d7kZrNKPonbvsATw==
-  dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^3.0.6"
-    istanbul-reports "^3.0.2"
-    minimatch "^3.0.4"
-
-karma-jasmine-html-reporter@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz#52c489a74d760934a1089bfa5ea4a8fcb84cc28b"
-  integrity sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==
-
-karma-jasmine@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-4.0.2.tgz#386db2a3e1acc0af5265c711f673f78f1e4938de"
-  integrity sha512-ggi84RMNQffSDmWSyyt4zxzh2CQGwsxvYYsprgyR1j8ikzIduEdOlcLvXjZGwXG/0j41KUXOWsUCBfbEHPWP9g==
-  dependencies:
-    jasmine-core "^3.6.0"
-
 karma-source-map-support@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz#58526ceccf7e8730e56effd97a4de8d712ac0d6b"
@@ -7663,51 +7260,21 @@ karma-source-map-support@1.4.0:
   dependencies:
     source-map-support "^0.5.5"
 
-karma@~6.3.9:
-  version "6.3.20"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-6.3.20.tgz#12f5c3b0e68f204607cb0a3a78d4751b42ef61a8"
-  integrity sha512-HRNQhMuKOwKpjYlWiJP0DUrJOh+QjaI/DTaD8b9rEm4Il3tJ8MijutVZH4ts10LuUFst/CedwTS6vieCN8yTSw==
-  dependencies:
-    "@colors/colors" "1.5.0"
-    body-parser "^1.19.0"
-    braces "^3.0.2"
-    chokidar "^3.5.1"
-    connect "^3.7.0"
-    di "^0.0.1"
-    dom-serialize "^2.2.1"
-    glob "^7.1.7"
-    graceful-fs "^4.2.6"
-    http-proxy "^1.18.1"
-    isbinaryfile "^4.0.8"
-    lodash "^4.17.21"
-    log4js "^6.4.1"
-    mime "^2.5.2"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.5"
-    qjobs "^1.2.0"
-    range-parser "^1.2.1"
-    rimraf "^3.0.2"
-    socket.io "^4.4.1"
-    source-map "^0.6.1"
-    tmp "^0.2.1"
-    ua-parser-js "^0.7.30"
-    yargs "^16.1.1"
-
-katex@^0.16.0:
-  version "0.16.9"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.9.tgz#bc62d8f7abfea6e181250f85a56e4ef292dcb1fa"
-  integrity sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==
+katex@^0.16.0, katex@^0.16.9:
+  version "0.16.11"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.11.tgz#4bc84d5584f996abece5f01c6ad11304276a33f5"
+  integrity sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==
   dependencies:
     commander "^8.3.0"
 
-keyv@^4.5.3:
+keyv@^4.5.4:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
   integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
   dependencies:
     json-buffer "3.0.1"
 
-khroma@^2.0.0:
+khroma@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.1.0.tgz#45f2ce94ce231a437cf5b63c2e886e6eb42bbbb1"
   integrity sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==
@@ -7724,10 +7291,29 @@ klaw-sync@^6.0.0:
   dependencies:
     graceful-fs "^4.1.11"
 
-klona@^2.0.4, klona@^2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
-  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
+kolorist@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
+  integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
+
+langium@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/langium/-/langium-3.0.0.tgz#4938294eb57c59066ef955070ac4d0c917b26026"
+  integrity sha512-+Ez9EoiByeoTu/2BXmEaZ06iPNXM6thWJp02KfBO/raSMyCJ4jw7AkWWa+zBCTm0+Tw1Fj9FOxdqSskyN5nAwg==
+  dependencies:
+    chevrotain "~11.0.3"
+    chevrotain-allstar "~0.3.0"
+    vscode-languageserver "~9.0.1"
+    vscode-languageserver-textdocument "~1.0.11"
+    vscode-uri "~3.0.8"
+
+launch-editor@^2.6.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.9.1.tgz#253f173bd441e342d4344b4dae58291abb425047"
+  integrity sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.8.1"
 
 layout-base@^1.0.0:
   version "1.0.2"
@@ -7751,10 +7337,10 @@ leaflet-polylinedecorator@1.6.0:
   dependencies:
     leaflet-rotatedmarker "^0.2.0"
 
-leaflet-providers@1.13.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-1.13.0.tgz#10c843a23d5823a65096d40ad53f27029e13434b"
-  integrity sha512-f/sN5wdgBbVA2jcCYzScIfYNxKdn2wBJP9bu+5cRX9Xj6g8Bt1G9Sr8WgJAt/ckIFIc3LVVxCBNFpSCfTuUElg==
+leaflet-providers@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-2.0.0.tgz#dfdab9ca2dccc57c79e1462bc3dd20f78910afcb"
+  integrity sha512-CWwKEnHd66Qsx0m4o5q5ZOa60s00B91pMxnlr4Y22msubfs7dhbZhdMIz8bvZQkrZqi67ppI1fsZRS6vtrLcOA==
 
 leaflet-rotatedmarker@^0.2.0:
   version "0.2.0"
@@ -7771,22 +7357,20 @@ leaflet.markercluster@1.5.3:
   resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
   integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
 
-leaflet@1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
-  integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
+leaflet@1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
 
-less-loader@11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-11.1.0.tgz#a452384259bdf8e4f6d5fdcc39543609e6313f82"
-  integrity sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==
-  dependencies:
-    klona "^2.0.4"
+less-loader@12.2.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-12.2.0.tgz#e1e94522f6abe9e064ef396c29a3151bc6c1b6cc"
+  integrity sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==
 
-less@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
-  integrity sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==
+less@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
+  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
   dependencies:
     copy-anything "^2.0.1"
     parse-node-version "^1.0.1"
@@ -7808,10 +7392,10 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-libphonenumber-js@^1.10.4:
-  version "1.10.58"
-  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.58.tgz#2015877bd47fd3d32d9fbfcedd75df35be230c9a"
-  integrity sha512-53A0IpJFL9LdHbpeatwizf8KSwPICrqn9H0g3Y7WQ+Jgeu9cQ4Ew3WrRtrLBu/CX2lXd5+rgT01/tGlkbkzOjw==
+libphonenumber-js@^1.11.10:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.11.10.tgz#d9ccd71a227bfb9775eb0516744c26d8c0f4b057"
+  integrity sha512-yHEtzDlG2VbhuxMIo/sAUY+lyL5YThqD+gHT3YyelaRWRQv1VeyEk94jDvviRT4PYmLJR9cHxvtrx9h2f4OAIQ==
 
 license-webpack-plugin@4.0.2:
   version "4.0.2"
@@ -7827,20 +7411,60 @@ lie@~3.3.0:
   dependencies:
     immediate "~3.0.5"
 
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
+  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+listr2@8.2.4:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.2.4.tgz#486b51cbdb41889108cb7e2c90eeb44519f5a77f"
+  integrity sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==
+  dependencies:
+    cli-truncate "^4.0.0"
+    colorette "^2.0.20"
+    eventemitter3 "^5.0.1"
+    log-update "^6.1.0"
+    rfdc "^1.4.1"
+    wrap-ansi "^9.0.0"
+
+lmdb@3.0.13:
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-3.0.13.tgz#5f326ac13cd60c239c481c42b601ebae39935026"
+  integrity sha512-UGe+BbaSUQtAMZobTb4nHvFMrmvuAQKSeaqAX2meTEQjfsbpl5sxdHD8T72OnwD4GU9uwNhYXIVe4QGs8N9Zyw==
+  dependencies:
+    msgpackr "^1.10.2"
+    node-addon-api "^6.1.0"
+    node-gyp-build-optional-packages "5.2.2"
+    ordered-binary "^1.4.1"
+    weak-lru-cache "^1.2.2"
+  optionalDependencies:
+    "@lmdb/lmdb-darwin-arm64" "3.0.13"
+    "@lmdb/lmdb-darwin-x64" "3.0.13"
+    "@lmdb/lmdb-linux-arm" "3.0.13"
+    "@lmdb/lmdb-linux-arm64" "3.0.13"
+    "@lmdb/lmdb-linux-x64" "3.0.13"
+    "@lmdb/lmdb-win32-x64" "3.0.13"
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.1.tgz#4fb104b599daafd82ef3e1a41fb9265f87e1f576"
-  integrity sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==
+loader-utils@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.3.1.tgz#735b9a19fd63648ca7adbd31c2327dfe281304e5"
+  integrity sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==
 
 loader-utils@^2.0.0:
   version "2.0.4"
@@ -7851,6 +7475,14 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+local-pkg@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"
+  integrity sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==
+  dependencies:
+    mlly "^1.4.2"
+    pkg-types "^1.0.3"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -7865,7 +7497,14 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
+locate-path@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-7.2.0.tgz#69cb1779bd90b35ab1e771e1f2f89a202c2a8a8a"
+  integrity sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
+  dependencies:
+    p-locate "^6.0.0"
+
+lodash-es@4.17.21, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -7895,7 +7534,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@4.17.21, lodash@^4.0.1, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21:
+lodash@4.17.21, lodash@^4.0.1, lodash@^4.17.14:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7913,16 +7552,16 @@ log-symbols@^4.1.0:
     chalk "^4.1.0"
     is-unicode-supported "^0.1.0"
 
-log4js@^6.4.1:
-  version "6.9.1"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-6.9.1.tgz#aba5a3ff4e7872ae34f8b4c533706753709e38b6"
-  integrity sha512-1somDdy9sChrr9/f4UlzhdaGfDR2c/SaD2a4T7qEkG4jTS57/B3qmnjLYePwQ8cqWnUHZI0iAKxMBpCZICiZ2g==
+log-update@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.1.0.tgz#1a04ff38166f94647ae1af562f4bd6a15b1b7cd4"
+  integrity sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==
   dependencies:
-    date-format "^4.0.14"
-    debug "^4.3.4"
-    flatted "^3.2.7"
-    rfdc "^1.3.0"
-    streamroller "^3.1.5"
+    ansi-escapes "^7.0.0"
+    cli-cursor "^5.0.0"
+    slice-ansi "^7.1.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
 
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
@@ -7931,13 +7570,10 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lru-cache@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+lru-cache@^10.0.1, lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
 lru-cache@^5.1.1:
   version "5.1.1"
@@ -7946,31 +7582,12 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
-lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
-  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
-
-magic-string@0.29.0:
-  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.29.0.tgz#f034f79f8c43dba4ae1730ffb5e8c4e084b16cf3"
-  integrity sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.13"
-
-magic-string@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
-  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+magic-string@0.30.11:
+  version "0.30.11"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
+  integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
   dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.13"
+    "@jridgewell/sourcemap-codec" "^1.5.0"
 
 make-dir@^2.1.0:
   version "2.1.0"
@@ -7980,146 +7597,123 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
-  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
-  dependencies:
-    semver "^6.0.0"
-
-make-dir@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
-  integrity sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==
-  dependencies:
-    semver "^7.5.3"
-
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
-make-fetch-happen@^10.0.3:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz#f5e3835c5e9817b617f2770870d9492d28678164"
-  integrity sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==
-  dependencies:
-    agentkeepalive "^4.2.1"
-    cacache "^16.1.0"
-    http-cache-semantics "^4.1.0"
-    http-proxy-agent "^5.0.0"
-    https-proxy-agent "^5.0.0"
-    is-lambda "^1.0.1"
-    lru-cache "^7.7.1"
-    minipass "^3.1.6"
-    minipass-collect "^1.0.2"
-    minipass-fetch "^2.0.3"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    negotiator "^0.6.3"
-    promise-retry "^2.0.1"
-    socks-proxy-agent "^7.0.0"
-    ssri "^9.0.0"
-
-make-fetch-happen@^11.0.0, make-fetch-happen@^11.0.1, make-fetch-happen@^11.1.1:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-11.1.1.tgz#85ceb98079584a9523d4bf71d32996e7e208549f"
-  integrity sha512-rLWS7GCSTcEujjVBs2YqG7Y4643u8ucvCJeSRqiLYhesrDuzeuFIk37xREzAsfQaqzl8b9rNCE4m6J8tvX4Q8w==
+make-fetch-happen@^13.0.0, make-fetch-happen@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-13.0.1.tgz#273ba2f78f45e1f3a6dca91cede87d9fa4821e36"
+  integrity sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==
   dependencies:
-    agentkeepalive "^4.2.1"
-    cacache "^17.0.0"
+    "@npmcli/agent" "^2.0.0"
+    cacache "^18.0.0"
     http-cache-semantics "^4.1.1"
-    http-proxy-agent "^5.0.0"
-    https-proxy-agent "^5.0.0"
     is-lambda "^1.0.1"
-    lru-cache "^7.7.1"
-    minipass "^5.0.0"
+    minipass "^7.0.2"
     minipass-fetch "^3.0.0"
     minipass-flush "^1.0.5"
     minipass-pipeline "^1.2.4"
     negotiator "^0.6.3"
+    proc-log "^4.2.0"
     promise-retry "^2.0.1"
-    socks-proxy-agent "^7.0.0"
     ssri "^10.0.0"
 
 make-plural@^7.0.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-7.3.0.tgz#2889dbafca2fb097037c47967d3e3afa7e48a52c"
-  integrity sha512-/K3BC0KIsO+WK2i94LkMPv3wslMrazrQhfi5We9fMbLlLjzoOSJWr7TAdupLlDWaJcWxwoNosBkhFDejiu5VDw==
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-7.4.0.tgz#fa6990dd550dea4de6b20163f74e5ed83d8a8d6d"
+  integrity sha512-4/gC9KVNTV6pvYg2gFeQYTW3mWaoJt7WZE5vrp1KnQDgW92JtYZnzmZT81oj/dUTqAIu0ufI2x3dkgu3bB1tYg==
 
-marked@^4.0.17:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
-  integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
+marked@^13.0.2:
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-13.0.3.tgz#5c5b4a5d0198060c7c9bc6ef9420a7fed30f822d"
+  integrity sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==
+
+marked@~12.0.2:
+  version "12.0.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-12.0.2.tgz#b31578fe608b599944c69807b00f18edab84647e"
+  integrity sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==
 
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-memfs@^3.4.12, memfs@^3.4.3:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
-  integrity sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ==
+memfs@^4.6.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-4.12.0.tgz#76570478aee461695fb3336ca3356a7a8cfc26cc"
+  integrity sha512-74wDsex5tQDSClVkeK1vtxqYCAgCoXxx+K4NSHzgU/muYVYByFqa+0RnrPO9NM6naWm1+G9JmZ0p6QHhXmeYfA==
   dependencies:
-    fs-monkey "^1.0.4"
+    "@jsonjoy.com/json-pack" "^1.0.3"
+    "@jsonjoy.com/util" "^1.3.0"
+    tree-dump "^1.0.1"
+    tslib "^2.0.0"
 
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
 
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0, merge2@^1.4.1:
+merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@^9.1.2:
-  version "9.4.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.4.3.tgz#62cf210c246b74972ea98c19837519b6f03427f2"
-  integrity sha512-TLkQEtqhRSuEHSE34lh5bCa94KATCyluAXmFnNI2PRZwOpXFeqiJWwZl+d2CcemE1RS6QbbueSSq9QIg8Uxcyw==
+"mermaid@>= 10.6.0 < 12.0.0":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-11.2.1.tgz#b168c6f862268f77a0d3559926b193926ddc60bc"
+  integrity sha512-F8TEaLVVyxTUmvKswVFyOkjPrlJA5h5vNR1f7ZnSWSpqxgEZG1hggtn/QCa7znC28bhlcrNh10qYaIiill7q4A==
   dependencies:
-    "@braintree/sanitize-url" "^6.0.0"
-    cytoscape "^3.23.0"
+    "@braintree/sanitize-url" "^7.0.1"
+    "@iconify/utils" "^2.1.32"
+    "@mermaid-js/parser" "^0.3.0"
+    cytoscape "^3.29.2"
     cytoscape-cose-bilkent "^4.1.0"
-    cytoscape-fcose "^2.1.0"
-    d3 "^7.4.0"
-    dagre-d3-es "7.0.9"
-    dayjs "^1.11.7"
-    dompurify "2.4.3"
-    elkjs "^0.8.2"
-    khroma "^2.0.0"
+    cytoscape-fcose "^2.2.0"
+    d3 "^7.9.0"
+    d3-sankey "^0.12.3"
+    dagre-d3-es "7.0.10"
+    dayjs "^1.11.10"
+    dompurify "^3.0.11"
+    katex "^0.16.9"
+    khroma "^2.1.0"
     lodash-es "^4.17.21"
-    non-layered-tidy-tree-layout "^2.0.2"
-    stylis "^4.1.2"
+    marked "^13.0.2"
+    roughjs "^4.6.6"
+    stylis "^4.3.1"
     ts-dedent "^2.2.0"
-    uuid "^9.0.0"
-    web-worker "^1.2.0"
+    uuid "^9.0.1"
 
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-micromatch@^4.0.2, micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
-mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
+"mime-db@>= 1.43.0 < 2":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
+  integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
+
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -8131,81 +7725,66 @@ mime@1.6.0, mime@^1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.5.2:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
-  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mini-css-extract-plugin@2.7.2:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz#e049d3ea7d3e4e773aad585c6cb329ce0c7b72d7"
-  integrity sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==
+mimic-function@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-function/-/mimic-function-5.0.1.tgz#acbe2b3349f99b9deaca7fb70e48b83e94e67076"
+  integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
+
+mini-css-extract-plugin@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.0.tgz#c73a1327ccf466f69026ac22a8e8fd707b78a235"
+  integrity sha512-Zs1YsZVfemekSZG+44vBsYTLQORkPMwnlv+aehcxK/NLKC+EGhDB39/YePYYqx/sTk6NnYpuqikhSn7+JIevTA==
   dependencies:
     schema-utils "^4.0.0"
+    tapable "^2.2.1"
 
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^5.0.1:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
-  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@^9.0.0:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+minimatch@^9.0.0, minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
-  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
-
-minimist@^1.2.0, minimist@^1.2.6:
+minimist@1.2.8, minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-fetch@^2.0.3:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-2.1.2.tgz#95560b50c472d81a3bc76f20ede80eaed76d8add"
-  integrity sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==
+minipass-collect@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-2.0.1.tgz#1621bc77e12258a12c60d34e2276ec5c20680863"
+  integrity sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==
   dependencies:
-    minipass "^3.1.6"
-    minipass-sized "^1.0.3"
-    minizlib "^2.1.2"
-  optionalDependencies:
-    encoding "^0.1.13"
+    minipass "^7.0.3"
 
 minipass-fetch@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-3.0.4.tgz#4d4d9b9f34053af6c6e597a64be8e66e42bf45b7"
-  integrity sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-3.0.5.tgz#f0f97e40580affc4a35cc4a1349f05ae36cb1e4c"
+  integrity sha512-2N8elDQAtSnFV0Dk7gt15KHsS0Fyz6CbYZ360h0WTYV1Ty46li3rAXVOQj1THMNLdmrD9Vt5pBPtWtVkpwGBqg==
   dependencies:
     minipass "^7.0.3"
     minipass-sized "^1.0.3"
@@ -8220,14 +7799,6 @@ minipass-flush@^1.0.5:
   dependencies:
     minipass "^3.0.0"
 
-minipass-json-stream@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz#7edbb92588fbfc2ff1db2fc10397acb7b6b44aa7"
-  integrity sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==
-  dependencies:
-    jsonparse "^1.3.1"
-    minipass "^3.0.0"
-
 minipass-pipeline@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
@@ -8242,27 +7813,22 @@ minipass-sized@^1.0.3:
   dependencies:
     minipass "^3.0.0"
 
-minipass@^3.0.0, minipass@^3.1.1, minipass@^3.1.6:
+minipass@^3.0.0:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
   integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
   dependencies:
     yallist "^4.0.0"
 
-minipass@^4.0.0:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.8.tgz#f0010f64393ecfc1d1ccb5f582bcaf45f48e1a3a"
-  integrity sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==
-
 minipass@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
   integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
 
-minipass@^7.0.3:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
-  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.2, minipass@^7.0.3, minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
 minizlib@^2.1.1, minizlib@^2.1.2:
   version "2.1.2"
@@ -8272,26 +7838,29 @@ minizlib@^2.1.1, minizlib@^2.1.2:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
-mkdirp@^0.5.5:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
-  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
-  dependencies:
-    minimist "^1.2.6"
-
 mkdirp@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment-timezone@^0.5.42:
+mlly@^1.4.2, mlly@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.7.1.tgz#e0336429bb0731b6a8e887b438cbdae522c8f32f"
+  integrity sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==
+  dependencies:
+    acorn "^8.11.3"
+    pathe "^1.1.2"
+    pkg-types "^1.1.1"
+    ufo "^1.5.3"
+
+moment-timezone@^0.5.45:
   version "0.5.45"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.45.tgz#cb685acd56bac10e69d93c536366eb65aa6bcf5c"
   integrity sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==
   dependencies:
     moment "^2.29.4"
 
-moment@^2.29.4:
+moment@^2.29.4, moment@^2.30.1:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
@@ -8306,21 +7875,42 @@ mousetrap@^1.6.5:
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
   integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
 
+mrmime@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.0.tgz#151082a6e06e59a9a39b46b3e14d5cfe92b3abb4"
+  integrity sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
+ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+msgpackr-extract@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz#e9d87023de39ce714872f9e9504e3c1996d61012"
+  integrity sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==
+  dependencies:
+    node-gyp-build-optional-packages "5.2.2"
+  optionalDependencies:
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-darwin-x64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-arm" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-arm64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.3"
+
+msgpackr@^1.10.2:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.11.0.tgz#8321d52333048cadc749f56385e3231e65337091"
+  integrity sha512-I8qXuuALqJe5laEBYoFykChhSXLikZmUhccjGsPuSJ/7uPip2TJ7lwdIQwWSAi0jGZDXv4WOP8Qg65QZRuXxXw==
+  optionalDependencies:
+    msgpackr-extract "^3.0.2"
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -8329,21 +7919,25 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
-mute-stream@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+mute-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-1.0.0.tgz#e31bd9fe62f0aed23520aa4324ea6671531e013e"
+  integrity sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==
+
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
 
-nanoid@^3.3.6, nanoid@^3.3.7:
+nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
-natural-compare-lite@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
-  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -8374,12 +7968,12 @@ ngrx-store-freeze@^0.2.4:
   dependencies:
     deep-freeze-strict "^1.1.1"
 
-ngx-clipboard@^15.1.0:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/ngx-clipboard/-/ngx-clipboard-15.1.0.tgz#9dd5a32d7f42249f519919a7aae34f5e83cec8f5"
-  integrity sha512-dUJl1cNtdkCqL953oAhP7wmUPFrqW2aDg5OPhwPU9R3cLEdQgU2NbsHEUz4zaPyEopTXu8SR37onVm1Ep8qOHg==
+ngx-clipboard@^16.0.0:
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-clipboard/-/ngx-clipboard-16.0.0.tgz#bb97584d33e8009420b8d7f83b185f68ca06869f"
+  integrity sha512-rZ/Eo1PqiKMiyF8tdjhmUkoUu68f7OzBJ7YH1YFeh2RAaNrerTaW8XfFOzppSckjFQqA1fwGSYuTTJlDhDag5w==
   dependencies:
-    ngx-window-token ">=6.0.0"
+    ngx-window-token ">=7.0.0"
     tslib "^2.0.0"
 
 ngx-daterangepicker-material@^6.0.4:
@@ -8390,56 +7984,57 @@ ngx-daterangepicker-material@^6.0.4:
     dayjs "^1.11.5"
     tslib "^2.0.0"
 
-ngx-drag-drop@^15.0.1:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/ngx-drag-drop/-/ngx-drag-drop-15.1.0.tgz#ddc208202ea6576e27c5362b87e87e9a4b081877"
-  integrity sha512-ZTAMrKMv7Fqdybvt+2sEtbT0LlOwsaFCNwFQ/CnKXrXEBkbs5K1jx2rN8HXx9BMlVAfa4ovOmtkJXtx/9XYqrA==
+ngx-drag-drop@^18.0.2:
+  version "18.0.2"
+  resolved "https://registry.yarnpkg.com/ngx-drag-drop/-/ngx-drag-drop-18.0.2.tgz#a8d805db20d75ad450db75f65d26fafdf0e2ec97"
+  integrity sha512-I2u5hhUGysRfAhxFCReG9DVUGnPZpu5r3qXZuU9dS22PfzriwtkGrBeD/pgGlUB1BREZd77fb8tY6okpUTvIBw==
   dependencies:
     tslib "^2.3.0"
 
-"ngx-flowchart@https://github.com/thingsboard/ngx-flowchart.git#release/2.0.0":
-  version "2.0.0"
-  resolved "https://github.com/thingsboard/ngx-flowchart.git#354c6e86ef488ef974b2797336065fc4918b6dbb"
+"ngx-flowchart@https://github.com/thingsboard/ngx-flowchart.git#release/3.0.0":
+  version "3.0.0"
+  resolved "https://github.com/thingsboard/ngx-flowchart.git#0160a1356129c2a3d4dcf7e064e4ba0a39ff668d"
   dependencies:
     tslib "^2.3.0"
 
-ngx-hm-carousel@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-hm-carousel/-/ngx-hm-carousel-3.0.0.tgz#0f49e8acdc79ca85f021476abc33ccac44929b29"
-  integrity sha512-t9lZLtLZ7FhbRS+s9R8sZwGGK4QWy8Yh3jZMwylnQKCrG6GgSEp8Ed1gttWjjJsatZ5i3hRi7fsXvxgkohyk7Q==
+ngx-hm-carousel@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-hm-carousel/-/ngx-hm-carousel-18.0.0.tgz#f5982b0c39bd5559e92081ae2c006221e6a2319e"
+  integrity sha512-ZxzlTBuMdm3PyO1E41q/XxNRNjXTTjEYL/L+1rlHa/T7v2+2UAgqz2RmjDWpGAVRUQUdZ+aaS7JJau65zrrYdg==
   dependencies:
-    "@types/hammerjs" "^2.0.40"
+    "@nghedgehog/core" "^0.0.4"
+    "@types/hammerjs" "^2.0.45"
     hammerjs "^2.0.8"
-    tslib "^2.3.1"
+    tslib "^2.3.0"
 
-ngx-markdown@^15.1.2:
-  version "15.1.2"
-  resolved "https://registry.yarnpkg.com/ngx-markdown/-/ngx-markdown-15.1.2.tgz#e78ffc5f96a79e4775b9cdf09f10d5b1401b5317"
-  integrity sha512-mAUORpUnHCV4tnxEHV4oS5YEdIaolUclulCblUrvAEU3AEND8MMTxlwHujqVC2M398/aKH0SBSrjLzDbMUJCoQ==
+ngx-markdown@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/ngx-markdown/-/ngx-markdown-18.1.0.tgz#940dde1bf1a5bd9450343aed2387006329b5e27d"
+  integrity sha512-n4HFSm5oqVMXFuD+WXIVkI6NyxD8Oubr4B3c9U1J7Ptr6t9DVnkNBax3yxWc+8Wli+FXTuGEnDXzB3sp7E9paA==
   dependencies:
     tslib "^2.3.0"
   optionalDependencies:
     clipboard "^2.0.11"
-    emoji-toolkit "^7.0.0"
+    emoji-toolkit ">= 8.0.0 < 10.0.0"
     katex "^0.16.0"
-    mermaid "^9.1.2"
+    mermaid ">= 10.6.0 < 12.0.0"
     prismjs "^1.28.0"
 
-ngx-sharebuttons@^12.0.0:
-  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-sharebuttons/-/ngx-sharebuttons-12.0.0.tgz#f9080254f5bcec980e784c83e957c4bc0a1b22a2"
-  integrity sha512-N4tkoNSPARCRD8nE1mMwfQ2vXBlAu1MQZ33KAC5JBxqRlu8+Bu9dGZZO3/Wqq2fmY+shvVmjFKb9wF528dmKNA==
+ngx-sharebuttons@^15.0.3:
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/ngx-sharebuttons/-/ngx-sharebuttons-15.0.3.tgz#80b87936c7dfa3492beba754cb9b3b53da2acd75"
+  integrity sha512-wArI5Pbg1xORycjzE5yIeNiC7akG/Unz7HwjIaWCHCCvyh4RmHOz8xv4AE/O8/0hDVWFNfyATc6byuzBYRrmDw==
   dependencies:
-    tslib "^2.0.0"
+    tslib "^2.3.0"
 
-ngx-translate-messageformat-compiler@^6.2.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/ngx-translate-messageformat-compiler/-/ngx-translate-messageformat-compiler-6.5.1.tgz#dfb51a83df5ec41bb6c3fff3b2e3f640ecb4a324"
-  integrity sha512-jJHlEYfE6myYQsILhXHNp2QIOgP3B19BE+NFN9H2a9sgqWgV/CoHBzhEvnt0suf1og/drgHFSkugp5N0Im0xHg==
+ngx-translate-messageformat-compiler@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-translate-messageformat-compiler/-/ngx-translate-messageformat-compiler-7.0.0.tgz#edcc412f26a8ccc43fc0fff94fa56f32fb1a2ce3"
+  integrity sha512-nWklMQ9kzRsCCFemfmzGHsvuD+MnAx1/bCLUCyEun0Xrgvph+TpMh59QczslO47swSzWJt/iF8QLVn3Vori/KA==
   dependencies:
     tslib "^2.5.0"
 
-ngx-window-token@>=6.0.0:
+ngx-window-token@>=7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-7.0.0.tgz#2e1bc76846411a388188b802154e4841d3e27856"
   integrity sha512-5+XfRVSY7Dciu8xyCNMkOlH2UfwR9W2P1Pirz7caaZgOZDjFbL8aEO2stjfJJm2FFf1D6dlVHNzhLWGk9HGkqA==
@@ -8454,67 +8049,81 @@ nice-napi@^1.0.2:
     node-addon-api "^3.0.0"
     node-gyp-build "^4.2.2"
 
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
 node-addon-api@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
   integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==
 
+node-addon-api@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
+  integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
+
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-fetch@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b"
+  integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 node-forge@^1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
+node-gyp-build-optional-packages@5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz#522f50c2d53134d7f3a76cd7255de4ab6c96a3a4"
+  integrity sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==
+  dependencies:
+    detect-libc "^2.0.1"
+
 node-gyp-build@^4.2.2:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.8.0.tgz#3fee9c1731df4581a3f9ead74664369ff00d26dd"
-  integrity sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.8.2.tgz#4f802b71c1ab2ca16af830e6c1ea7dd1ad9496fa"
+  integrity sha512-IRUxE4BVsHWXkV/SFOut4qTlagw2aM8T5/vnTsmrHJvVoKueJHRc/JaFND7QDDc61kLYUJ6qlZM3sqTSyx2dTw==
 
-node-gyp@^9.0.0:
-  version "9.4.1"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-9.4.1.tgz#8a1023e0d6766ecb52764cc3a734b36ff275e185"
-  integrity sha512-OQkWKbjQKbGkMf/xqI1jjy3oCTgMKJac58G2+bjZb3fza6gW2YrCSdMQYaoTb70crvE//Gngr4f0AgVHmqHvBQ==
+node-gyp@^10.0.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-10.2.0.tgz#80101c4aa4f7ab225f13fcc8daaaac4eb1a8dd86"
+  integrity sha512-sp3FonBAaFe4aYTcFdZUn2NYkbP7xroPGYvQmP4Nl5PxamznItBnNCgjrVTKrEfQynInMsJvZrdmqUnysCJ8rw==
   dependencies:
     env-paths "^2.2.0"
     exponential-backoff "^3.1.1"
-    glob "^7.1.4"
+    glob "^10.3.10"
     graceful-fs "^4.2.6"
-    make-fetch-happen "^10.0.3"
-    nopt "^6.0.0"
-    npmlog "^6.0.0"
-    rimraf "^3.0.2"
+    make-fetch-happen "^13.0.0"
+    nopt "^7.0.0"
+    proc-log "^4.1.0"
     semver "^7.3.5"
-    tar "^6.1.2"
-    which "^2.0.2"
-
-node-releases@^2.0.14, node-releases@^2.0.8:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
-  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+    tar "^6.2.1"
+    which "^4.0.0"
 
-non-layered-tidy-tree-layout@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
-  integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
+node-releases@^2.0.18:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
+  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
 
-nopt@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
-  integrity sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==
+nopt@^7.0.0, nopt@^7.2.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.1.tgz#1cac0eab9b8e97c9093338446eddd40b2c8ca1e7"
+  integrity sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==
   dependencies:
-    abbrev "^1.0.0"
+    abbrev "^2.0.0"
 
-normalize-package-data@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-5.0.0.tgz#abcb8d7e724c40d88462b84982f7cbf6859b4588"
-  integrity sha512-h9iPVIfrVZ9wVYQnxFgtw1ugSvGEMOlyPWWtm8BMJhnwyEL/FLbYbTY3V3PpjI/BUK67n9PEWDu6eHzu1fB15Q==
+normalize-package-data@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-6.0.2.tgz#a7bc22167fe24025412bcff0a9651eb768b03506"
+  integrity sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==
   dependencies:
-    hosted-git-info "^6.0.0"
-    is-core-module "^2.8.1"
+    hosted-git-info "^7.0.0"
     semver "^7.3.5"
     validate-npm-package-license "^3.0.4"
 
@@ -8529,9 +8138,9 @@ normalize-range@^0.1.2:
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
 npm-bundled@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-3.0.0.tgz#7e8e2f8bb26b794265028491be60321a25a39db7"
-  integrity sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-3.0.1.tgz#cca73e15560237696254b10170d8f86dad62da25"
+  integrity sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==
   dependencies:
     npm-normalize-package-bin "^3.0.0"
 
@@ -8547,55 +8156,46 @@ npm-normalize-package-bin@^3.0.0:
   resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz#25447e32a9a7de1f51362c61a559233b89947832"
   integrity sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==
 
-npm-package-arg@10.1.0, npm-package-arg@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-10.1.0.tgz#827d1260a683806685d17193073cc152d3c7e9b1"
-  integrity sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==
+npm-package-arg@11.0.3, npm-package-arg@^11.0.0:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-11.0.3.tgz#dae0c21199a99feca39ee4bfb074df3adac87e2d"
+  integrity sha512-sHGJy8sOC1YraBywpzQlIKBE4pBbGbiF95U6Auspzyem956E0+FtDtsx1ZxlOJkQCZ1AFXAY/yuvtFYrOxF+Bw==
   dependencies:
-    hosted-git-info "^6.0.0"
-    proc-log "^3.0.0"
+    hosted-git-info "^7.0.0"
+    proc-log "^4.0.0"
     semver "^7.3.5"
     validate-npm-package-name "^5.0.0"
 
-npm-packlist@^7.0.0:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-7.0.4.tgz#033bf74110eb74daf2910dc75144411999c5ff32"
-  integrity sha512-d6RGEuRrNS5/N84iglPivjaJPxhDbZmlbTwTDX2IbcRHG5bZCdtysYMhwiPvcF4GisXHGn7xsxv+GQ7T/02M5Q==
-  dependencies:
-    ignore-walk "^6.0.0"
-
-npm-pick-manifest@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-8.0.1.tgz#c6acd97d1ad4c5dbb80eac7b386b03ffeb289e5f"
-  integrity sha512-mRtvlBjTsJvfCCdmPtiu2bdlx8d/KXtF7yNXNWe7G0Z36qWA9Ny5zXsI2PfBZEv7SXgoxTmNaTzGSbbzDZChoA==
+npm-packlist@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-8.0.2.tgz#5b8d1d906d96d21c85ebbeed2cf54147477c8478"
+  integrity sha512-shYrPFIS/JLP4oQmAwDyk5HcyysKW8/JLTEA32S0Z5TzvpaeeX2yMFfoK1fjEBnCBvVyIB/Jj/GBFdm0wsgzbA==
   dependencies:
-    npm-install-checks "^6.0.0"
-    npm-normalize-package-bin "^3.0.0"
-    npm-package-arg "^10.0.0"
-    semver "^7.3.5"
+    ignore-walk "^6.0.4"
 
-npm-pick-manifest@^8.0.0:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-8.0.2.tgz#2159778d9c7360420c925c1a2287b5a884c713aa"
-  integrity sha512-1dKY+86/AIiq1tkKVD3l0WI+Gd3vkknVGAggsFeBkTvbhMQ1OND/LKkYv4JtXPKUJ8bOTCyLiqEg2P6QNdK+Gg==
+npm-pick-manifest@9.1.0, npm-pick-manifest@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-9.1.0.tgz#83562afde52b0b07cb6244361788d319ce7e8636"
+  integrity sha512-nkc+3pIIhqHVQr085X9d2JzPzLyjzQS96zbruppqC9aZRm/x8xx6xhI98gHtsfELP2bE+loHq8ZaHFHhe+NauA==
   dependencies:
     npm-install-checks "^6.0.0"
     npm-normalize-package-bin "^3.0.0"
-    npm-package-arg "^10.0.0"
+    npm-package-arg "^11.0.0"
     semver "^7.3.5"
 
-npm-registry-fetch@^14.0.0:
-  version "14.0.5"
-  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-14.0.5.tgz#fe7169957ba4986a4853a650278ee02e568d115d"
-  integrity sha512-kIDMIo4aBm6xg7jOttupWZamsZRkAqMqwqqbVXnUqstY5+tapvv6bkH/qMR76jdgV+YljEUCyWx3hRYMrJiAgA==
+npm-registry-fetch@^17.0.0:
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-17.1.0.tgz#fb69e8e762d456f08bda2f5f169f7638fb92beb1"
+  integrity sha512-5+bKQRH0J1xG1uZ1zMNvxW0VEyoNWgJpY9UDuluPFLKDfJ9u2JmmjmTJV1srBGQOROfdBMiVvnH2Zvpbm+xkVA==
   dependencies:
-    make-fetch-happen "^11.0.0"
-    minipass "^5.0.0"
+    "@npmcli/redact" "^2.0.0"
+    jsonparse "^1.3.1"
+    make-fetch-happen "^13.0.0"
+    minipass "^7.0.2"
     minipass-fetch "^3.0.0"
-    minipass-json-stream "^1.0.1"
     minizlib "^2.1.2"
-    npm-package-arg "^10.0.0"
-    proc-log "^3.0.0"
+    npm-package-arg "^11.0.0"
+    proc-log "^4.0.0"
 
 npm-run-path@^4.0.1:
   version "4.0.1"
@@ -8604,16 +8204,6 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^6.0.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-6.0.2.tgz#c8166017a42f2dea92d6453168dd865186a70830"
-  integrity sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==
-  dependencies:
-    are-we-there-yet "^3.0.0"
-    console-control-strings "^1.1.0"
-    gauge "^4.0.3"
-    set-blocking "^2.0.0"
-
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
@@ -8621,35 +8211,27 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-inspect@^1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
-  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-is@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
-  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
 
 object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.4, object.assign@^4.1.5:
+object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
   integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
@@ -8659,34 +8241,33 @@ object.assign@^4.1.4, object.assign@^4.1.5:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.fromentries@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
-  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
 
-object.groupby@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.2.tgz#494800ff5bab78fd0eff2835ec859066e00192ec"
-  integrity sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
   dependencies:
-    array.prototype.filter "^1.0.3"
-    call-bind "^1.0.5"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
-    es-errors "^1.0.0"
+    es-abstract "^1.23.2"
 
-object.values@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
-  integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
+object.values@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 objectpath@^2.0.0:
   version "2.0.0"
@@ -8698,20 +8279,13 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
-on-finished@2.4.1:
+on-finished@2.4.1, on-finished@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
   integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
   dependencies:
     ee-first "1.1.1"
 
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==
-  dependencies:
-    ee-first "1.1.1"
-
 on-headers@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
@@ -8731,14 +8305,22 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
-open@8.4.1:
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/open/-/open-8.4.1.tgz#2ab3754c07f5d1f99a7a8d6a82737c95e3101cff"
-  integrity sha512-/4b7qZNhv6Uhd7jjnREh1NjnPxlTq+XNWPG88Ydkj5AILcA5m3ajvcg57pB24EQjKv0dK62XnDqk9c/hkIG5Kg==
+onetime@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-7.0.0.tgz#9f16c92d8c9ef5120e3acd9dd9957cceecc1ab60"
+  integrity sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==
+  dependencies:
+    mimic-function "^5.0.0"
+
+open@10.1.0, open@^10.0.3:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-10.1.0.tgz#a7795e6e5d519abe4286d9937bb24b51122598e1"
+  integrity sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==
   dependencies:
-    define-lazy-prop "^2.0.0"
-    is-docker "^2.1.1"
-    is-wsl "^2.2.0"
+    default-browser "^5.2.1"
+    define-lazy-prop "^3.0.0"
+    is-inside-container "^1.0.0"
+    is-wsl "^3.1.0"
 
 open@^7.4.2:
   version "7.4.2"
@@ -8748,28 +8330,19 @@ open@^7.4.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
-open@^8.0.9:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
-  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
-  dependencies:
-    define-lazy-prop "^2.0.0"
-    is-docker "^2.1.1"
-    is-wsl "^2.2.0"
-
 optionator@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
-  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
   dependencies:
-    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
+    word-wrap "^1.2.5"
 
-ora@5.4.1, ora@^5.4.1:
+ora@5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
   integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
@@ -8784,7 +8357,12 @@ ora@5.4.1, ora@^5.4.1:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+ordered-binary@^1.4.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.5.2.tgz#2007072bcc4cb3454e250ca8ecc994f092ca03dc"
+  integrity sha512-JTo+4+4Fw7FreyAvlSLjb1BBVaxEQAacmjD3jjuyPZclpbEghTvQZbXBb2qPd2LeIMxiHwXBZUcpmG2Gl/mDEA==
+
+os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
@@ -8803,6 +8381,13 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
+p-limit@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
+  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
+  dependencies:
+    yocto-queue "^1.0.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -8817,6 +8402,13 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-locate@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-6.0.0.tgz#3da9a49d4934b901089dca3302fa65dc5a05c04f"
+  integrity sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
+  dependencies:
+    p-limit "^4.0.0"
+
 p-map@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
@@ -8824,12 +8416,13 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
-p-retry@^4.5.0:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
-  integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==
+p-retry@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-6.2.0.tgz#8d6df01af298750009691ce2f9b3ad2d5968f3bd"
+  integrity sha512-JA6nkq6hKyWLLasXQXUrO4z8BUZGUt/LjlJxx8Gb2+2ntodU/SS63YZ8b0LUTbQ8ZB9iwOfhEPhg4ykKnn2KsA==
   dependencies:
-    "@types/retry" "0.12.0"
+    "@types/retry" "0.12.2"
+    is-network-error "^1.0.0"
     retry "^0.13.1"
 
 p-try@^2.0.0:
@@ -8837,31 +8430,40 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pacote@15.1.0:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-15.1.0.tgz#2e0b12a4f55ffd801a8134a1ae28ef361dc3f243"
-  integrity sha512-FFcjtIl+BQNfeliSm7MZz5cpdohvUV1yjGnqgVM4UnVF7JslRY0ImXAygdaCDV0jjUADEWu4y5xsDV8brtrTLg==
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+package-manager-detector@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-0.2.0.tgz#160395cd5809181f5a047222319262b8c2d8aaea"
+  integrity sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==
+
+pacote@18.0.6:
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-18.0.6.tgz#ac28495e24f4cf802ef911d792335e378e86fac7"
+  integrity sha512-+eK3G27SMwsB8kLIuj4h1FUhHtwiEUo21Tw8wNjmvdlpOEr613edv+8FUsTj/4F/VN5ywGE19X18N7CC2EJk6A==
   dependencies:
-    "@npmcli/git" "^4.0.0"
+    "@npmcli/git" "^5.0.0"
     "@npmcli/installed-package-contents" "^2.0.1"
-    "@npmcli/promise-spawn" "^6.0.1"
-    "@npmcli/run-script" "^6.0.0"
-    cacache "^17.0.0"
+    "@npmcli/package-json" "^5.1.0"
+    "@npmcli/promise-spawn" "^7.0.0"
+    "@npmcli/run-script" "^8.0.0"
+    cacache "^18.0.0"
     fs-minipass "^3.0.0"
-    minipass "^4.0.0"
-    npm-package-arg "^10.0.0"
-    npm-packlist "^7.0.0"
-    npm-pick-manifest "^8.0.0"
-    npm-registry-fetch "^14.0.0"
-    proc-log "^3.0.0"
+    minipass "^7.0.2"
+    npm-package-arg "^11.0.0"
+    npm-packlist "^8.0.0"
+    npm-pick-manifest "^9.0.0"
+    npm-registry-fetch "^17.0.0"
+    proc-log "^4.0.0"
     promise-retry "^2.0.1"
-    read-package-json "^6.0.0"
-    read-package-json-fast "^3.0.0"
-    sigstore "^1.0.0"
+    sigstore "^2.2.0"
     ssri "^10.0.0"
     tar "^6.1.11"
 
-pako@^1.0.3, pako@~1.0.2:
+pako@~1.0.2:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@@ -8873,7 +8475,15 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-json@^5.0.0:
+parse-imports@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/parse-imports/-/parse-imports-2.2.1.tgz#0a6e8b5316beb5c9905f50eb2bbb8c64a4805642"
+  integrity sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==
+  dependencies:
+    es-module-lexer "^1.5.3"
+    slashes "^3.0.12"
+
+parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -8897,13 +8507,6 @@ parse5-html-rewriting-stream@7.0.0:
     parse5 "^7.0.0"
     parse5-sax-parser "^7.0.0"
 
-parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
-  dependencies:
-    parse5 "^6.0.1"
-
 parse5-sax-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/parse5-sax-parser/-/parse5-sax-parser-7.0.0.tgz#4c05064254f0488676aca75fb39ca069ec96dee5"
@@ -8911,11 +8514,6 @@ parse5-sax-parser@^7.0.0:
   dependencies:
     parse5 "^7.0.0"
 
-parse5@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
 parse5@^7.0.0, parse5@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
@@ -8928,46 +8526,47 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-patch-package@^6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.5.1.tgz#3e5d00c16997e6160291fee06a521c42ac99b621"
-  integrity sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==
+patch-package@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-8.0.0.tgz#d191e2f1b6e06a4624a0116bcb88edd6714ede61"
+  integrity sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==
   dependencies:
     "@yarnpkg/lockfile" "^1.1.0"
     chalk "^4.1.2"
-    cross-spawn "^6.0.5"
+    ci-info "^3.7.0"
+    cross-spawn "^7.0.3"
     find-yarn-workspace-root "^2.0.0"
     fs-extra "^9.0.0"
-    is-ci "^2.0.0"
+    json-stable-stringify "^1.0.2"
     klaw-sync "^6.0.0"
     minimist "^1.2.6"
     open "^7.4.2"
     rimraf "^2.6.3"
-    semver "^5.6.0"
+    semver "^7.5.3"
     slash "^2.0.0"
     tmp "^0.0.33"
-    yaml "^1.10.2"
+    yaml "^2.2.2"
+
+path-data-parser@0.1.0, path-data-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
+  integrity sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==
 
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
+path-exists@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
+  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
-path-is-inside@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
-
-path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
-
 path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
@@ -8978,32 +8577,50 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-to-regexp@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
+  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
 
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+path-type@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-5.0.0.tgz#14b01ed7aea7ddf9c7c3f46181d4d04f9c785bb8"
+  integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
+
+picomatch@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pify@^2.0.0:
+pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
@@ -9013,85 +8630,121 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-piscina@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/piscina/-/piscina-3.2.0.tgz#f5a1dde0c05567775690cccefe59d9223924d154"
-  integrity sha512-yn/jMdHRw+q2ZJhFhyqsmANcbF6V2QwmD84c6xRau+QpQOmtrBCoRGdvTfeuFDYXB5W2m6MfLkjkvQa9lUSmIA==
-  dependencies:
-    eventemitter-asyncresource "^1.0.0"
-    hdr-histogram-js "^2.0.1"
-    hdr-histogram-percentiles-obj "^3.0.0"
+piscina@4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/piscina/-/piscina-4.6.1.tgz#4de673b0ff84bf641b31b07b3348669383b51c9a"
+  integrity sha512-z30AwWGtQE+Apr+2WBZensP2lIvwoaMcOPkQlIEmSGMJNUvaYACylPYrQM6wSdUNJlnDVMSpLv7xTMJqlVshOA==
   optionalDependencies:
     nice-napi "^1.0.2"
 
-pkg-dir@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+pkg-dir@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-7.0.0.tgz#8f0c08d6df4476756c5ff29b3282d0bab7517d11"
+  integrity sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==
   dependencies:
-    find-up "^4.0.0"
+    find-up "^6.3.0"
+
+pkg-types@^1.0.3, pkg-types@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.2.0.tgz#d0268e894e93acff11a6279de147e83354ebd42d"
+  integrity sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==
+  dependencies:
+    confbox "^0.1.7"
+    mlly "^1.7.1"
+    pathe "^1.1.2"
 
 pngjs@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
   integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
 
-polygon-clipping@0.15.3:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.3.tgz#0215840438470ba2e9e6593625e4ea5c1087b4b7"
-  integrity sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==
+points-on-curve@0.2.0, points-on-curve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-0.2.0.tgz#7dbb98c43791859434284761330fa893cb81b4d1"
+  integrity sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==
+
+points-on-path@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/points-on-path/-/points-on-path-0.2.1.tgz#553202b5424c53bed37135b318858eacff85dd52"
+  integrity sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==
   dependencies:
-    splaytree "^3.1.0"
+    path-data-parser "0.1.0"
+    points-on-curve "0.2.0"
 
-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+polyclip-ts@^0.16.5:
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/polyclip-ts/-/polyclip-ts-0.16.5.tgz#053e073e640449f1b1a1d88471f8758779d0b030"
+  integrity sha512-ZchnG0zGZReHgEo3EYzEUi6UmfQFFzNnj6AFU+gBm+IJJ4qG9gL4CwjtCV6oi/PittUPpJLiLJxcn/AgrCBO+g==
+  dependencies:
+    bignumber.js "^9.1.0"
+    splaytree-ts "^1.0.1"
 
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
-postcss-loader@7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.0.2.tgz#b53ff44a26fba3688eee92a048c7f2d4802e23bb"
-  integrity sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.5"
-    semver "^7.3.8"
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
 
-postcss-modules-extract-imports@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
-  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-loader@8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-8.1.1.tgz#2822589e7522927344954acb55bbf26e8b195dfe"
+  integrity sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==
+  dependencies:
+    cosmiconfig "^9.0.0"
+    jiti "^1.20.0"
+    semver "^7.5.4"
+
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
+postcss-modules-extract-imports@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
 
-postcss-modules-local-by-default@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6"
-  integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==
+postcss-modules-local-by-default@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz#f1b9bd757a8edf4d8556e8d0f4f894260e3df78f"
+  integrity sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
-postcss-modules-scope@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz#32cfab55e84887c079a19bbb215e721d683ef134"
-  integrity sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==
+postcss-modules-scope@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz#a43d28289a169ce2c15c00c4e64c0858e43457d5"
+  integrity sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==
   dependencies:
     postcss-selector-parser "^6.0.4"
 
@@ -9102,36 +8755,43 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.0.16"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
-  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+postcss-nested@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+postcss@8.4.41:
+  version "8.4.41"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
   dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
 
-postcss@^8.2.14, postcss@^8.3.7, postcss@^8.4.19:
-  version "8.4.36"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.36.tgz#dba513c3c3733c44e0288a712894f8910bbaabc6"
-  integrity sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==
+postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.4, postcss@^8.4.43, postcss@^8.4.47:
+  version "8.4.47"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
+  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.1.0"
+    picocolors "^1.1.0"
+    source-map-js "^1.2.1"
 
 postinstall-prepare@^2.0.0:
   version "2.0.0"
@@ -9148,20 +8808,15 @@ prettier@^2.8.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
-pretty-bytes@^5.3.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
-  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
-
 prismjs@^1.27.0, prismjs@^1.28.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
-proc-log@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8"
-  integrity sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==
+proc-log@^4.0.0, proc-log@^4.1.0, proc-log@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-4.2.0.tgz#b6f461e4026e75fdfe228b265e9f7a00779d7034"
+  integrity sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -9181,7 +8836,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9195,27 +8850,6 @@ proto-list@~1.2.1:
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
   integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
 
-protractor@~7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/protractor/-/protractor-7.0.0.tgz#c3e263608bd72e2c2dc802b11a772711a4792d03"
-  integrity sha512-UqkFjivi4GcvUQYzqGYNe0mLzfn5jiLmO8w9nMhQoJRLhy2grJonpga2IWhI6yJO30LibWXJJtA4MOIZD2GgZw==
-  dependencies:
-    "@types/q" "^0.0.32"
-    "@types/selenium-webdriver" "^3.0.0"
-    blocking-proxy "^1.0.0"
-    browserstack "^1.5.1"
-    chalk "^1.1.3"
-    glob "^7.0.3"
-    jasmine "2.8.0"
-    jasminewd2 "^2.1.0"
-    q "1.4.1"
-    saucelabs "^1.5.0"
-    selenium-webdriver "3.6.0"
-    source-map-support "~0.4.0"
-    webdriver-js-extender "2.1.0"
-    webdriver-manager "^12.1.7"
-    yargs "^15.3.1"
-
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -9229,57 +8863,26 @@ prr@~1.0.1:
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
   integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
 
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
-
-psl@^1.1.28:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
-  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
-
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-q@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
-  integrity sha512-/CdEdaw49VZVmyIDGUQKDDT53c7qBkO6g5CefWz91Ae+l4+cRtcDYwMTXh6me4O8TMldeGHG3N2Bl84V78Ywbg==
-
-q@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
-
-qjobs@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
-  integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==
-
-qrcode@^1.5.1:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170"
-  integrity sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==
+qrcode@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.4.tgz#5cb81d86eb57c675febb08cf007fff963405da88"
+  integrity sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==
   dependencies:
     dijkstrajs "^1.0.1"
-    encode-utf8 "^1.0.3"
     pngjs "^5.0.0"
     yargs "^15.3.1"
 
-qs@6.11.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
   dependencies:
-    side-channel "^1.0.4"
-
-qs@~6.5.2:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
-  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+    side-channel "^1.0.6"
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -9335,27 +8938,16 @@ rbush@^3.0.1:
   dependencies:
     quickselect "^2.0.0"
 
-rc-align@^4.0.0:
-  version "4.0.15"
-  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.15.tgz#2bbd665cf85dfd0b0244c5a752b07565e9098577"
-  integrity sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "2.x"
-    dom-align "^1.7.0"
-    rc-util "^5.26.0"
-    resize-observer-polyfill "^1.5.1"
-
 rc-motion@^2.0.0, rc-motion@^2.0.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.0.tgz#9e18a1b8d61e528a97369cf9a7601e9b29205710"
-  integrity sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.3.tgz#b1bdaf816f1ccb3e4b3b0c531c3037a59286379e"
+  integrity sha512-rkW47ABVkic7WEB0EKJqzySpvDqwl60/tdkY7hWP7dYnh5pm0SzJpo54oW3TDUGXV5wfxXFmMkxrzRRbotQ0+w==
   dependencies:
     "@babel/runtime" "^7.11.1"
     classnames "^2.2.1"
-    rc-util "^5.21.0"
+    rc-util "^5.43.0"
 
-rc-overflow@^1.0.0:
+rc-overflow@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.3.2.tgz#72ee49e85a1308d8d4e3bd53285dc1f3e0bcce2c"
   integrity sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==
@@ -9365,7 +8957,7 @@ rc-overflow@^1.0.0:
     rc-resize-observer "^1.0.0"
     rc-util "^5.37.0"
 
-rc-resize-observer@^1.0.0:
+rc-resize-observer@^1.0.0, rc-resize-observer@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz#7bba61e6b3c604834980647cce6451914750d0cc"
   integrity sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==
@@ -9375,75 +8967,63 @@ rc-resize-observer@^1.0.0:
     rc-util "^5.38.0"
     resize-observer-polyfill "^1.5.1"
 
-rc-select@13.2.1:
-  version "13.2.1"
-  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-13.2.1.tgz#d69675f8bc72622a8f3bc024fa21bfee8d56257d"
-  integrity sha512-L2cJFAjVEeDiNVa/dlOVKE79OUb0J7sUBvWN3Viav3XHcjvv9Ovn4D8J9QhBSlDXeGuczZ81CZI3BbdHD25+Gg==
+rc-select@14.15.2:
+  version "14.15.2"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.15.2.tgz#d85fcf3a708bdf837b003feeed653347b8980ad0"
+  integrity sha512-oNoXlaFmpqXYcQDzcPVLrEqS2J9c+/+oJuGrlXeVVX/gVgrbHa5YcyiRUXRydFjyuA7GP3elRuLF7Y3Tfwltlw==
   dependencies:
     "@babel/runtime" "^7.10.1"
+    "@rc-component/trigger" "^2.1.1"
     classnames "2.x"
     rc-motion "^2.0.1"
-    rc-overflow "^1.0.0"
-    rc-trigger "^5.0.4"
-    rc-util "^5.9.8"
-    rc-virtual-list "^3.2.0"
-
-rc-trigger@^5.0.4:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.3.4.tgz#6b4b26e32825677c837d1eb4d7085035eecf9a61"
-  integrity sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    classnames "^2.2.6"
-    rc-align "^4.0.0"
-    rc-motion "^2.0.0"
-    rc-util "^5.19.2"
+    rc-overflow "^1.3.1"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.5.2"
 
-rc-util@^5.15.0, rc-util@^5.19.2, rc-util@^5.21.0, rc-util@^5.26.0, rc-util@^5.37.0, rc-util@^5.38.0, rc-util@^5.9.8:
-  version "5.39.1"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.39.1.tgz#7bca4fb55e20add0eef5c23166cd9f9e5f51a8a1"
-  integrity sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==
+rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.24.4, rc-util@^5.37.0, rc-util@^5.38.0, rc-util@^5.43.0:
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c"
+  integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==
   dependencies:
     "@babel/runtime" "^7.18.3"
     react-is "^18.2.0"
 
-rc-virtual-list@3.4.13, rc-virtual-list@^3.2.0:
-  version "3.4.13"
-  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.13.tgz#20acc934b263abcf7b7c161f50ef82281b2f7e8d"
-  integrity sha512-cPOVDmcNM7rH6ANotanMDilW/55XnFPw0Jh/GQYtrzZSy3AmWvCnqVNyNC/pgg3lfVmX2994dlzAhuUrd4jG7w==
+rc-virtual-list@3.5.2, rc-virtual-list@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.5.2.tgz#5e1028869bae900eacbae6788d4eca7210736006"
+  integrity sha512-sE2G9hTPjVmatQni8OP2Kx33+Oth6DMKm67OblBBmgMBJDJQOOFpSGH7KZ6Pm85rrI2IGxDRXZCr0QhYOH2pfQ==
   dependencies:
     "@babel/runtime" "^7.20.0"
     classnames "^2.2.6"
     rc-resize-observer "^1.0.0"
     rc-util "^5.15.0"
 
-react-ace@9.5.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-9.5.0.tgz#b6c32b70d404dd821a7e01accc2d76da667ff1f7"
-  integrity sha512-4l5FgwGh6K7A0yWVMQlPIXDItM4Q9zzXRqOae8KkCl6MkOob7sC1CzHxZdOGvV+QioKWbX2p5HcdOVUv6cAdSg==
+react-ace@12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-12.0.0.tgz#d40afc7382092109eead7227d9426f55dcc2209d"
+  integrity sha512-PstU6CSMfYIJknb4su2Fa0WgLXzq2ufQgR6fjcSWuGT1hGTHkBzuKw+SncV8PuLCdSJBJc1VehPhyeXlWByG/g==
   dependencies:
-    ace-builds "^1.4.13"
+    ace-builds "^1.32.8"
     diff-match-patch "^1.0.5"
     lodash.get "^4.4.2"
     lodash.isequal "^4.5.0"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
 
-react-dom@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.2"
 
-react-dropzone@^11.4.2:
-  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
-  integrity sha512-zxCMwhfPy1olUEbw3FLNPLhAm/HnaYH5aELIEglRbqabizKAdHs0h+WuyOpmA+v1JXn0++fpQDdNfUagWt5hJQ==
+react-dropzone@14.2.9:
+  version "14.2.9"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.9.tgz#193a33f9035e29fc91abf24e50de5d66cfa7c8c0"
+  integrity sha512-jRZsMC7h48WONsOLHcmhyn3cRWJoIPQjPApvt/sJVfnYaB3Qltn025AoRTTJaj4WdmmgmLl6tUQg1s0wOhpodQ==
   dependencies:
     attr-accept "^2.2.2"
-    file-selector "^0.4.0"
+    file-selector "^0.6.0"
     prop-types "^15.8.1"
 
 react-is@^16.13.1, react-is@^16.7.0:
@@ -9451,17 +9031,12 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
-react-is@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+react-is@^18.2.0, react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react-transition-group@^4.0.0, react-transition-group@^4.4.0:
+react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -9471,13 +9046,12 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 reactcss@^1.2.3:
   version "1.2.3"
@@ -9486,23 +9060,12 @@ reactcss@^1.2.3:
   dependencies:
     lodash "^4.0.1"
 
-read-package-json-fast@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz#394908a9725dc7a5f14e70c8e7556dff1d2b1049"
-  integrity sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==
-  dependencies:
-    json-parse-even-better-errors "^3.0.0"
-    npm-normalize-package-bin "^3.0.0"
-
-read-package-json@6.0.0, read-package-json@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-6.0.0.tgz#6a741841ad72a40e77a82b9c3c8c10e865bbc519"
-  integrity sha512-b/9jxWJ8EwogJPpv99ma+QwtqB7FSl3+V6UXS7Aaay8/5VwMY50oIFooY1UKXMWpfNCM6T/PoGqa5GD1g9xf9w==
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
   dependencies:
-    glob "^8.0.1"
-    json-parse-even-better-errors "^3.0.0"
-    normalize-package-data "^5.0.0"
-    npm-normalize-package-bin "^3.0.0"
+    pify "^2.3.0"
 
 readable-stream@^2.0.1, readable-stream@~2.3.6:
   version "2.3.8"
@@ -9517,7 +9080,7 @@ readable-stream@^2.0.1, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.6, readable-stream@^3.4.0, readable-stream@^3.6.0:
+readable-stream@^3.0.6, readable-stream@^3.4.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
   integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
@@ -9526,6 +9089,11 @@ readable-stream@^3.0.6, readable-stream@^3.4.0, readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readdirp@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.0.2.tgz#388fccb8b75665da3abffe2d8f8ed59fe74c230a"
+  integrity sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -9538,15 +9106,15 @@ reduce-flatten@^2.0.0:
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
   integrity sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==
 
-reflect-metadata@^0.1.2:
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.14.tgz#24cf721fe60677146bb77eeb0e1f9dece3d65859"
-  integrity sha512-ZhYeb6nRaXCfhnndflDK8qI6ZQ/YcWZCISRAWICW9XYqMUwjZM9Z0DveWX/ABN01oxSHwVxKQmxeYZSsm0jh5A==
+reflect-metadata@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.2.2.tgz#400c845b6cba87a21f2c65c4aeb158f4fa4d9c5b"
+  integrity sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==
 
-regenerate-unicode-properties@^10.1.0:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
-  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
+regenerate-unicode-properties@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
   dependencies:
     regenerate "^1.4.2"
 
@@ -9555,11 +9123,6 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
@@ -9577,60 +9140,39 @@ regex-parser@^2.2.11:
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.3.0.tgz#4bb61461b1a19b8b913f3960364bb57887f920ee"
   integrity sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==
 
-regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
-  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+regexp.prototype.flags@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz#b3ae40b1d2499b8350ab2c3fe6ef3845d3a96f42"
+  integrity sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==
   dependencies:
-    call-bind "^1.0.6"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
     es-errors "^1.3.0"
-    set-function-name "^2.0.1"
+    set-function-name "^2.0.2"
 
-regexpu-core@^5.3.1:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
-  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+regexpu-core@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.1.1.tgz#b469b245594cb2d088ceebc6369dceb8c00becac"
+  integrity sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==
   dependencies:
-    "@babel/regjsgen" "^0.8.0"
     regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.1.0"
-    regjsparser "^0.9.1"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.11.0"
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.1.0"
 
-regjsparser@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
-  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
-  dependencies:
-    jsesc "~0.5.0"
-
-request@^2.87.0:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+regjsparser@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.11.0.tgz#f01e6ccaba36d384fb0d00a06b78b372c8b681e8"
+  integrity sha512-vTbzVAjQDzwQdKuvj7qEq6OlAprCjE656khuGQ4QaBLg7abQ9I9ISpmLuc6inWe7zP75AECjqUa4g4sdQvOXhg==
+  dependencies:
+    jsesc "~3.0.2"
 
 require-directory@^2.1.1:
   version "2.1.1"
@@ -9662,11 +9204,6 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
 resolve-url-loader@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz#ee3142fb1f1e0d9db9524d539cfa166e9314f795"
@@ -9678,16 +9215,7 @@ resolve-url-loader@5.0.0:
     postcss "^8.2.14"
     source-map "0.6.1"
 
-resolve@1.22.1:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
-resolve@^1.14.2, resolve@^1.22.4:
+resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -9704,6 +9232,14 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+restore-cursor@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-5.1.0.tgz#0766d95699efacb14150993f55baf0953ea1ebe7"
+  integrity sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==
+  dependencies:
+    onetime "^7.0.0"
+    signal-exit "^4.1.0"
+
 retry@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
@@ -9719,41 +9255,94 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rfdc@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.1.tgz#2b6d4df52dffe8bb346992a10ea9451f24373a8f"
-  integrity sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==
-
-rifm@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
-  integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
+rfdc@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
+  integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
-rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+rimraf@^5.0.5:
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-5.0.10.tgz#23b9843d3dc92db71f96e1a2ce92e39fd2a8221c"
+  integrity sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==
   dependencies:
-    glob "^7.1.3"
+    glob "^10.3.7"
 
 robust-predicates@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
   integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
 
-run-async@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
-  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+rollup@4.22.4:
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.4.tgz#4135a6446671cd2a2453e1ad42a45d5973ec3a0f"
+  integrity sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==
+  dependencies:
+    "@types/estree" "1.0.5"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.22.4"
+    "@rollup/rollup-android-arm64" "4.22.4"
+    "@rollup/rollup-darwin-arm64" "4.22.4"
+    "@rollup/rollup-darwin-x64" "4.22.4"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.22.4"
+    "@rollup/rollup-linux-arm-musleabihf" "4.22.4"
+    "@rollup/rollup-linux-arm64-gnu" "4.22.4"
+    "@rollup/rollup-linux-arm64-musl" "4.22.4"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.22.4"
+    "@rollup/rollup-linux-riscv64-gnu" "4.22.4"
+    "@rollup/rollup-linux-s390x-gnu" "4.22.4"
+    "@rollup/rollup-linux-x64-gnu" "4.22.4"
+    "@rollup/rollup-linux-x64-musl" "4.22.4"
+    "@rollup/rollup-win32-arm64-msvc" "4.22.4"
+    "@rollup/rollup-win32-ia32-msvc" "4.22.4"
+    "@rollup/rollup-win32-x64-msvc" "4.22.4"
+    fsevents "~2.3.2"
+
+rollup@^4.20.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.24.0.tgz#c14a3576f20622ea6a5c9cad7caca5e6e9555d05"
+  integrity sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==
+  dependencies:
+    "@types/estree" "1.0.6"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.24.0"
+    "@rollup/rollup-android-arm64" "4.24.0"
+    "@rollup/rollup-darwin-arm64" "4.24.0"
+    "@rollup/rollup-darwin-x64" "4.24.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.24.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.24.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.24.0"
+    "@rollup/rollup-linux-arm64-musl" "4.24.0"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.24.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.24.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.24.0"
+    "@rollup/rollup-linux-x64-gnu" "4.24.0"
+    "@rollup/rollup-linux-x64-musl" "4.24.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.24.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.24.0"
+    "@rollup/rollup-win32-x64-msvc" "4.24.0"
+    fsevents "~2.3.2"
+
+roughjs@^4.6.6:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.6.6.tgz#1059f49a5e0c80dee541a005b20cc322b222158b"
+  integrity sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==
+  dependencies:
+    hachure-fill "^0.5.2"
+    path-data-parser "^0.1.0"
+    points-on-curve "^0.2.0"
+    points-on-path "^0.2.1"
+
+run-applescript@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-7.0.0.tgz#e5a553c2bffd620e169d276c1cd8f1b64778fbeb"
+  integrity sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==
 
 run-parallel@^1.1.9:
   version "1.2.0"
@@ -9767,21 +9356,14 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
 
-rxjs@6.6.7:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
-  dependencies:
-    tslib "^1.9.0"
-
-rxjs@^7.5.5, rxjs@~7.8.0:
+rxjs@7.8.1, rxjs@~7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
   integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
   dependencies:
     tslib "^2.1.0"
 
-safe-array-concat@^1.1.0, safe-array-concat@^1.1.2:
+safe-array-concat@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
   integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
@@ -9796,7 +9378,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -9815,61 +9397,47 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
-"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-safevalues@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/safevalues/-/safevalues-0.3.4.tgz#82e846a02b6956d7d40bf9f41e92e13fce0186db"
-  integrity sha512-LRneZZRXNgjzwG4bDQdOTSbze3fHm1EAKN/8bePxnlEZiBmkYEDggaHbuvHI9/hoqHbGfsEA7tWS9GhYHZBBsw==
-
-sass-loader@13.2.0:
-  version "13.2.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.2.0.tgz#80195050f58c9aac63b792fa52acb6f5e0f6bdc3"
-  integrity sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==
+sass-loader@16.0.0:
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-16.0.0.tgz#9b8d497e24bc176dc368df2b5b9e90b4ad24bf4e"
+  integrity sha512-n13Z+3rU9A177dk4888czcVFiC8CL9dii4qpXWUg3YIIgZEvi9TCFKjOQcbK0kJM7DJu9VucrZFddvNfYCPwtw==
   dependencies:
-    klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@1.58.1:
-  version "1.58.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.1.tgz#17ab0390076a50578ed0733f1cc45429e03405f6"
-  integrity sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==
+sass@1.77.6:
+  version "1.77.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-saucelabs@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
-  integrity sha512-jlX3FGdWvYf4Q3LFfFWS1QvPg3IGCGWxIc8QBFdPTbpTJnt/v17FHXYVAn7C8sHf1yUXo2c7yIM0isDryfYtHQ==
-  dependencies:
-    https-proxy-agent "^2.2.1"
-
-sax@>=0.6.0, sax@^1.2.4:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
-  integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
+sax@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
+  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
-schema-inspector@^2.0.2:
+schema-inspector@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/schema-inspector/-/schema-inspector-2.1.0.tgz#85096fbc78162a420262ed41b82e60ac927767b2"
   integrity sha512-3bmQVhbA01/EW8cZin4vIpqlpNU2SIy4BhKCfCgogJ3T/L76dLx3QAE+++4o+dNT33sa+SN9vOJL7iHiHFjiNg==
   dependencies:
     async "~2.6.3"
 
-schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
   integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
@@ -9878,7 +9446,7 @@ schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^4.0.0:
+schema-utils@^4.0.0, schema-utils@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
   integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
@@ -9903,17 +9471,7 @@ select@^1.1.2:
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
   integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
 
-selenium-webdriver@3.6.0, selenium-webdriver@^3.0.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc"
-  integrity sha512-WH7Aldse+2P5bbFBO4Gle/nuQOdVwpHMTL6raL3uuBj/vPG07k6uzt3aiahu352ONBr5xXh0hDlM3LhtXPOC4Q==
-  dependencies:
-    jszip "^3.1.3"
-    rimraf "^2.5.4"
-    tmp "0.0.30"
-    xml2js "^0.4.17"
-
-selfsigned@^2.1.1:
+selfsigned@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.4.1.tgz#560d90565442a3ed35b674034cec4e95dceb4ae0"
   integrity sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==
@@ -9921,34 +9479,25 @@ selfsigned@^2.1.1:
     "@types/node-forge" "^1.3.0"
     node-forge "^1"
 
-semver@7.5.3:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
-  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
-  dependencies:
-    lru-cache "^6.0.0"
+semver@7.6.3, semver@^7.0.0, semver@^7.1.1, semver@^7.3.5, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
-semver@^5.3.0, semver@^5.5.0, semver@^5.6.0:
+semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
+semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.0.0, semver@^7.1.1, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.6.0:
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
-  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
-  dependencies:
-    lru-cache "^6.0.0"
-
-send@0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
-  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
   dependencies:
     debug "2.6.9"
     depd "2.0.0"
@@ -9964,7 +9513,7 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
+serialize-javascript@^6.0.1, serialize-javascript@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
   integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
@@ -9984,15 +9533,15 @@ serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
-  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+serve-static@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
   dependencies:
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.18.0"
+    send "0.19.0"
 
 set-blocking@^2.0.0:
   version "2.0.0"
@@ -10011,7 +9560,7 @@ set-function-length@^1.2.1:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.2"
 
-set-function-name@^2.0.1:
+set-function-name@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
   integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
@@ -10043,13 +9592,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
-  dependencies:
-    shebang-regex "^1.0.0"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -10057,17 +9599,17 @@ shebang-command@^2.0.0:
   dependencies:
     shebang-regex "^3.0.0"
 
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
-
 shebang-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-side-channel@^1.0.4:
+shell-quote@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
+side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
   integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
@@ -10077,75 +9619,63 @@ side-channel@^1.0.4:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
-sigmund@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
-  integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
-
-signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-sigstore@^1.0.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/sigstore/-/sigstore-1.9.0.tgz#1e7ad8933aa99b75c6898ddd0eeebc3eb0d59875"
-  integrity sha512-0Zjz0oe37d08VeOtBIuB6cRriqXse2e8w+7yIy2XSXjshRKxbc2KkhXjL229jXSxEm7UbcjS76wcJDGQddVI9A==
+signal-exit@^4.0.1, signal-exit@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+sigstore@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/sigstore/-/sigstore-2.3.1.tgz#0755dd2cc4820f2e922506da54d3d628e13bfa39"
+  integrity sha512-8G+/XDU8wNsJOQS5ysDVO0Etg9/2uA5gR9l4ZwijjlwxBcrU6RPfwi2+jJmbP+Ap1Hlp/nVAaEO4Fj22/SL2gQ==
   dependencies:
-    "@sigstore/bundle" "^1.1.0"
-    "@sigstore/protobuf-specs" "^0.2.0"
-    "@sigstore/sign" "^1.0.0"
-    "@sigstore/tuf" "^1.0.3"
-    make-fetch-happen "^11.0.1"
+    "@sigstore/bundle" "^2.3.2"
+    "@sigstore/core" "^1.0.0"
+    "@sigstore/protobuf-specs" "^0.3.2"
+    "@sigstore/sign" "^2.3.2"
+    "@sigstore/tuf" "^2.3.4"
+    "@sigstore/verify" "^1.2.1"
 
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
-slash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
-  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+slash@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-5.1.0.tgz#be3adddcdf09ac38eebe8dcdc7b1a57a75b095ce"
+  integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
 
-smart-buffer@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
-  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+slashes@^3.0.12:
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/slashes/-/slashes-3.0.12.tgz#3d664c877ad542dc1509eaf2c50f38d483a6435a"
+  integrity sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==
 
-socket.io-adapter@~2.5.2:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.4.tgz#4fdb1358667f6d68f25343353bd99bd11ee41006"
-  integrity sha512-wDNHGXGewWAjQPt3pyeYBtpWSq9cLE5UW1ZUPL/2eGK9jtse/FpXib7epSTsz0Q0m+6sg6Y4KtcFTlah1bdOVg==
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
   dependencies:
-    debug "~4.3.4"
-    ws "~8.11.0"
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
 
-socket.io-parser@~4.2.4:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
-  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+slice-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.0.tgz#cd6b4655e298a8d1bdeb04250a433094b347b9a9"
+  integrity sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==
   dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
-    debug "~4.3.1"
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
 
-socket.io@^4.4.1:
-  version "4.7.5"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.7.5.tgz#56eb2d976aef9d1445f373a62d781a41c7add8f8"
-  integrity sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==
-  dependencies:
-    accepts "~1.3.4"
-    base64id "~2.0.0"
-    cors "~2.8.5"
-    debug "~4.3.2"
-    engine.io "~6.5.2"
-    socket.io-adapter "~2.5.2"
-    socket.io-parser "~4.2.4"
+smart-buffer@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
 sockjs@^0.3.24:
   version "0.3.24"
@@ -10156,19 +9686,19 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
-socks-proxy-agent@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz#dc069ecf34436621acb41e3efa66ca1b5fed15b6"
-  integrity sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==
+socks-proxy-agent@^8.0.3:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz#9071dca17af95f483300316f4b063578fa0db08c"
+  integrity sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==
   dependencies:
-    agent-base "^6.0.2"
-    debug "^4.3.3"
-    socks "^2.6.2"
+    agent-base "^7.1.1"
+    debug "^4.3.4"
+    socks "^2.8.3"
 
-socks@^2.6.2:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.8.1.tgz#22c7d9dd7882649043cba0eafb49ae144e3457af"
-  integrity sha512-B6w7tkwNid7ToxjZ08rQMT8M9BJAf8DKx8Ft4NivzH0zBUfd6jldGcisJn/RLgxcX3FPNDdNQCUEMMT79b+oCQ==
+socks@^2.8.3:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.8.3.tgz#1ebd0f09c52ba95a09750afe3f3f9f724a800cb5"
+  integrity sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==
   dependencies:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
@@ -10178,17 +9708,16 @@ sorted-btree@^1.8.1:
   resolved "https://registry.yarnpkg.com/sorted-btree/-/sorted-btree-1.8.1.tgz#6e6275f7955e5892bb8737149cbe495be10f426f"
   integrity sha512-395+XIP+wqNn3USkFSrNz7G3Ss/MXlZEqesxvzCRFwL14h6e8LukDHdLBePn5pwbm5OQ9vGu8mDyz2lLDIqamQ==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.1.0.tgz#9e7d5cb46f0689fb6691b30f226937558d0fa94b"
-  integrity sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
-source-map-loader@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-4.0.1.tgz#72f00d05f5d1f90f80974eda781cbd7107c125f2"
-  integrity sha512-oqXpzDIByKONVY8g1NUPOTQhe0UTU5bWUl32GSkqK2LjJj0HmwTMVKxcUip0RgAYhY1mqgOxjbQM48a0mmeNfA==
+source-map-loader@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-5.0.0.tgz#f593a916e1cc54471cfc8851b905c8a845fc7e38"
+  integrity sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==
   dependencies:
-    abab "^2.0.6"
     iconv-lite "^0.6.3"
     source-map-js "^1.0.2"
 
@@ -10200,14 +9729,7 @@ source-map-support@0.5.21, source-map-support@^0.5.5, source-map-support@~0.5.20
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@~0.4.0:
-  version "0.4.18"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
-  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
-  dependencies:
-    source-map "^0.5.6"
-
-source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0:
+source-map@0.6.1, source-map@^0.6.0, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -10217,7 +9739,7 @@ source-map@0.7.4:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
-source-map@^0.5.6:
+source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
@@ -10252,9 +9774,9 @@ spdx-expression-parse@^4.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.17"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz#887da8aa73218e51a1d917502d79863161a93f9c"
-  integrity sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==
+  version "3.0.20"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz#e44ed19ed318dd1e5888f93325cee800f0f51b89"
+  integrity sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==
 
 spdy-transport@^3.0.0:
   version "3.0.0"
@@ -10279,10 +9801,10 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-splaytree@^3.1.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/splaytree/-/splaytree-3.1.2.tgz#d1db2691665a3c69d630de98d55145a6546dc166"
-  integrity sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A==
+splaytree-ts@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/splaytree-ts/-/splaytree-ts-1.0.1.tgz#4ddcfe2684da017d02b599d53d67f6d07a90745b"
+  integrity sha512-B+VzCm33/KEchi/fzT6/3NRHm8k5+Kf37SBQO3meHHS/tK2xBnIm4ZvusQ1wUpHgKMCCqEWgXnwFXAa1nD289g==
 
 split.js@^1.6.5:
   version "1.6.5"
@@ -10299,62 +9821,33 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-sshpk@^1.7.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
-  integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
 ssri@^10.0.0:
-  version "10.0.5"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-10.0.5.tgz#e49efcd6e36385196cb515d3a2ad6c3f0265ef8c"
-  integrity sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-10.0.6.tgz#a8aade2de60ba2bce8688e3fa349bad05c7dc1e5"
+  integrity sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==
   dependencies:
     minipass "^7.0.3"
 
-ssri@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-9.0.1.tgz#544d4c357a8d7b71a19700074b6883fcb4eae057"
-  integrity sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==
-  dependencies:
-    minipass "^3.1.1"
-
 statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-"statuses@>= 1.4.0 < 2", statuses@~1.5.0:
+"statuses@>= 1.4.0 < 2":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stop-iteration-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
-  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
-  dependencies:
-    internal-slot "^1.0.4"
-
-streamroller@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-3.1.5.tgz#1263182329a45def1ffaef58d31b15d13d2ee7ff"
-  integrity sha512-KFxaM7XT+irxvdqSP1LGLgNWbYN7ay5owZ3r/8t77p+EtSUAfUgtl7be3xtqtOmGUl9K9YPO2ca8133RlTjvKw==
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
-    date-format "^4.0.14"
-    debug "^4.3.4"
-    fs-extra "^8.1.0"
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10363,7 +9856,25 @@ streamroller@^3.1.5:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string.prototype.trim@^1.2.8, string.prototype.trim@^1.2.9:
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string-width@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
+  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
+  dependencies:
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
+
+string.prototype.trim@^1.2.9:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
   integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
@@ -10373,7 +9884,7 @@ string.prototype.trim@^1.2.8, string.prototype.trim@^1.2.9:
     es-abstract "^1.23.0"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimend@^1.0.7, string.prototype.trimend@^1.0.8:
+string.prototype.trimend@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
   integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
@@ -10382,14 +9893,14 @@ string.prototype.trimend@^1.0.7, string.prototype.trimend@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
-  integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -10405,12 +9916,12 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-strip-ansi@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
-    ansi-regex "^2.0.0"
+    ansi-regex "^5.0.1"
 
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
@@ -10419,6 +9930,13 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -10434,15 +9952,28 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-stylis@^4.1.2:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
-  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
+stylis@^4.3.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.4.tgz#ca5c6c4a35c4784e4e93a2a24dc4e9fa075250a4"
+  integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
+
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -10475,10 +10006,18 @@ symbol-observable@4.0.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
   integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
 
-systemjs@6.14.1:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.14.1.tgz#95a580b91b50d0d69ff178ed4816f0ddbcea23c1"
-  integrity sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==
+synckit@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.1.tgz#febbfbb6649979450131f64735aa3f6c14575c88"
+  integrity sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
+systemjs@6.15.1:
+  version "6.15.1"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.15.1.tgz#74175b6810e27a79e1177d21db5f0e3057118cea"
+  integrity sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==
 
 table-layout@^1.0.2:
   version "1.0.2"
@@ -10490,15 +10029,43 @@ table-layout@^1.0.2:
     typical "^5.2.0"
     wordwrapjs "^4.0.0"
 
-tapable@^2.1.1, tapable@^2.2.0:
+tailwindcss@^3.4.13:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.13.tgz#3d11e5510660f99df4f1bfb2d78434666cb8f831"
+  integrity sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
+tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar@^6.1.11, tar@^6.1.2:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
+tar@^6.1.11, tar@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"
@@ -10507,7 +10074,7 @@ tar@^6.1.11, tar@^6.1.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
-terser-webpack-plugin@^5.1.3:
+terser-webpack-plugin@^5.3.10:
   version "5.3.10"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
   integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
@@ -10518,35 +10085,26 @@ terser-webpack-plugin@^5.1.3:
     serialize-javascript "^6.0.1"
     terser "^5.26.0"
 
-terser@5.16.3:
-  version "5.16.3"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.3.tgz#3266017a9b682edfe019b8ecddd2abaae7b39c6b"
-  integrity sha512-v8wWLaS/xt3nE9dgKEWhNUFP6q4kngO5B8eYFUuebsu7Dw/UNAnpUod6UHo04jSSkv8TzKHjZDSd7EXdDQAl8Q==
+terser@5.31.6:
+  version "5.31.6"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.31.6.tgz#c63858a0f0703988d0266a82fcbf2d7ba76422b1"
+  integrity sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==
   dependencies:
-    "@jridgewell/source-map" "^0.3.2"
-    acorn "^8.5.0"
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
 terser@^5.26.0:
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.29.2.tgz#c17d573ce1da1b30f21a877bffd5655dd86fdb35"
-  integrity sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==
+  version "5.34.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.34.1.tgz#af40386bdbe54af0d063e0670afd55c3105abeb6"
+  integrity sha512-FsJZ7iZLd/BXkz+4xrRTGJ26o/6VTjQytUk8b8OxkwcD2I+79VPJlz7qss1+zE7h8GNIScFqXcDyJ/KqBYZFVA==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
-test-exclude@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
-  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
-  dependencies:
-    "@istanbuljs/schema" "^0.1.2"
-    glob "^7.1.4"
-    minimatch "^3.0.4"
-
 text-segmentation@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
@@ -10554,15 +10112,29 @@ text-segmentation@^1.0.3:
   dependencies:
     utrie "^1.0.2"
 
-text-table@0.2.0, text-table@^0.2.0:
+text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+thingies@^1.20.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/thingies/-/thingies-1.21.0.tgz#e80fbe58fd6fdaaab8fad9b67bd0a5c943c445c1"
+  integrity sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==
 
 thunky@^1.0.2:
   version "1.1.0"
@@ -10584,29 +10156,15 @@ tinycolor2@^1.6.0:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
-"tinymce@^6.0.0 || ^5.5.0":
-  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.3.tgz#0025a4aaa4c24dc2a3e32e83dfda705d196fd802"
-  integrity sha512-3fCHKAeqT+xNwBVESf6iDbDV0VNwZNmfrkx9c/6Gz5iB8piMfaO6s7FvoiTrj1hf1gVbfyLTnz1DooI6DhgINQ==
-
-tinymce@~5.10.7:
-  version "5.10.9"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.9.tgz#1dfacb3231c71a688d90ff44a0b3f2e91b3b9edf"
-  integrity sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg==
-
-tmp@0.0.30:
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
-  integrity sha512-HXdTB7lvMwcb55XFfrTM8CPr/IYREk4hVBFaQ4b/6nInrluSL86hfHm7vu0luYKCfyBZp2trCjpc8caC3vVM3w==
-  dependencies:
-    os-tmpdir "~1.0.1"
+tinyexec@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.0.tgz#ed60cfce19c17799d4a241e06b31b0ec2bee69e6"
+  integrity sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==
 
-tmp@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
+tinymce@6.8.5, "tinymce@^7.0.0 || ^6.0.0 || ^5.5.0", tinymce@~6.8.5:
+  version "6.8.5"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.5.tgz#aa9a711c4e0b59d506dd281bade857d35a7b3c59"
+  integrity sha512-qAL/FxL7cwZHj4BfaF818zeJJizK9jU5IQzTcSLL4Rj5MaJdiVblEj7aDr80VCV1w9h4Lak9hlnALhq/kVtN1g==
 
 tmp@^0.0.33:
   version "0.0.33"
@@ -10615,11 +10173,6 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmp@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
-  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -10642,25 +10195,32 @@ tooltipster@^4.2.8:
   resolved "https://registry.yarnpkg.com/tooltipster/-/tooltipster-4.2.8.tgz#ad1970dd71ad853034e64e3fdd1745f7f3485071"
   integrity sha512-Znmbt5UMzaiFCRlVaRtfRZYQqxrmNlj1+3xX/aT0OiA3xkQZhXYGbLJmZPigx0YiReYZpO7Lm2XKbUxXsiU/pg==
 
-tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
-  dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
+tree-dump@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tree-dump/-/tree-dump-1.0.2.tgz#c460d5921caeb197bde71d0e9a7b479848c5b8ac"
+  integrity sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==
 
 tree-kill@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
+ts-api-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
 ts-dedent@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
-ts-node@^10.0.0, ts-node@^10.9.1:
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+ts-node@^10.0.0, ts-node@^10.9.2:
   version "10.9.2"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
   integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
@@ -10679,11 +10239,6 @@ ts-node@^10.0.0, ts-node@^10.9.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-ts-transformer-keys@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/ts-transformer-keys/-/ts-transformer-keys-0.4.4.tgz#c185508b3ae9b79236aac58f788c85ca3ac807d7"
-  integrity sha512-LrqgvaFvar01/5mbunRyeLTSIkqoC2xfcpL/90aDY6vR07DGyH+UaYGdIEsUudnlAw2Sr0pxFgdZvE0QIyI4qA==
-
 tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
@@ -10708,54 +10263,30 @@ tslib@2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tslib@2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
-  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
-
-tslib@^1.8.1, tslib@^1.9.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+tslib@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2, tslib@^2.6.3, tslib@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
-tuf-js@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/tuf-js/-/tuf-js-1.1.7.tgz#21b7ae92a9373015be77dfe0cb282a80ec3bbe43"
-  integrity sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==
+tuf-js@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tuf-js/-/tuf-js-2.2.1.tgz#fdd8794b644af1a75c7aaa2b197ddffeb2911b56"
+  integrity sha512-GwIJau9XaA8nLVbUXsN3IlFi7WmQ48gBUrl3FTkkL/XLu/POhBzfmX9hd33FNMX1qAsfl6ozO1iMmW9NC8YniA==
   dependencies:
-    "@tufjs/models" "1.0.4"
+    "@tufjs/models" "2.0.1"
     debug "^4.3.4"
-    make-fetch-happen "^11.1.1"
-
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
-  dependencies:
-    safe-buffer "^5.0.1"
+    make-fetch-happen "^13.0.1"
 
 tv4@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tv4/-/tv4-1.3.0.tgz#d020c846fadd50c855abb25ebaecc68fc10f7963"
   integrity sha512-afizzfpJgvPr+eDkREK4MxJ/+r8nEEHcmitwgnPUqpaP+FpwQyadnxNoSACbgc/b1LsZYtODGoPiFxQrgJgjvw==
 
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
-
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -10763,11 +10294,6 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-fest@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
-  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
-
 type-fest@^0.21.3:
   version "0.21.3"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
@@ -10813,10 +10339,10 @@ typed-array-byte-offset@^1.0.2:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
-typed-array-length@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.5.tgz#57d44da160296d8663fd63180a1802ebf25905d5"
-  integrity sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
   dependencies:
     call-bind "^1.0.7"
     for-each "^0.3.3"
@@ -10835,10 +10361,10 @@ typeface-roboto@^1.1.13:
   resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-1.1.13.tgz#9c4517cb91e311706c74823e857b4bac9a764ae5"
   integrity sha512-YXvbd3a1QTREoD+FJoEkl0VQNJoEjewR2H11IjVv4bp6ahuIcw0yyw/3udC4vJkHw3T3cUh85FTg8eWef3pSaw==
 
-typescript@~4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@~5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 typical@^4.0.0:
   version "4.0.0"
@@ -10850,10 +10376,10 @@ typical@^5.2.0:
   resolved "https://registry.yarnpkg.com/typical/-/typical-5.2.0.tgz#4daaac4f2b5315460804f0acf6cb69c52bb93066"
   integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==
 
-ua-parser-js@^0.7.30:
-  version "0.7.37"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.37.tgz#e464e66dac2d33a7a1251d7d7a99d6157ec27832"
-  integrity sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==
+ufo@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"
+  integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -10865,15 +10391,15 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-undici-types@~5.26.4:
-  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
-  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
+  integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
 
 unicode-match-property-ecmascript@^2.0.0:
   version "2.0.0"
@@ -10884,15 +10410,20 @@ unicode-match-property-ecmascript@^2.0.0:
     unicode-property-aliases-ecmascript "^2.0.0"
 
 unicode-match-property-value-ecmascript@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
-  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
+  integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
 
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
   integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
+unicorn-magic@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.1.0.tgz#1bb9a51c823aaf9d73a8bfcd3d1a23dde94b0ce4"
+  integrity sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==
+
 unique-filename@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-3.0.0.tgz#48ba7a5a16849f5080d26c760c86cf5cf05770ea"
@@ -10907,11 +10438,6 @@ unique-slug@^4.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
@@ -10922,13 +10448,13 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
-update-browserslist-db@^1.0.10, update-browserslist-db@^1.0.13:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
-  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+update-browserslist-db@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
   dependencies:
-    escalade "^3.1.1"
-    picocolors "^1.0.0"
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -10954,17 +10480,12 @@ utrie@^1.0.2:
   dependencies:
     base64-arraybuffer "^1.0.2"
 
-uuid@^3.3.2:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-uuid@^9.0.0:
+uuid@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
@@ -10983,32 +10504,62 @@ validate-npm-package-license@^3.0.4:
     spdx-expression-parse "^3.0.0"
 
 validate-npm-package-name@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz#f16afd48318e6f90a1ec101377fa0384cfc8c713"
-  integrity sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==
-  dependencies:
-    builtins "^5.0.0"
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz#a316573e9b49f3ccd90dbb6eb52b3f06c6d604e8"
+  integrity sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==
 
-vary@^1, vary@~1.1.2:
+vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==
+vite@5.4.6:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.6.tgz#85a93a1228a7fb5a723ca1743e337a2588ed008f"
+  integrity sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==
   dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
 
-void-elements@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
-  integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==
+vscode-jsonrpc@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz#f43dfa35fb51e763d17cd94dcca0c9458f35abf9"
+  integrity sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==
+
+vscode-languageserver-protocol@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz#864a8b8f390835572f4e13bd9f8313d0e3ac4bea"
+  integrity sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==
+  dependencies:
+    vscode-jsonrpc "8.2.0"
+    vscode-languageserver-types "3.17.5"
+
+vscode-languageserver-textdocument@~1.0.11:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz#457ee04271ab38998a093c68c2342f53f6e4a631"
+  integrity sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==
+
+vscode-languageserver-types@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz#3273676f0cf2eab40b3f44d085acbb7f08a39d8a"
+  integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==
+
+vscode-languageserver@~9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz#500aef82097eb94df90d008678b0b6b5f474015b"
+  integrity sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==
+  dependencies:
+    vscode-languageserver-protocol "3.17.5"
+
+vscode-uri@~3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
-watchpack@^2.4.0:
+watchpack@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff"
   integrity sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==
@@ -11016,6 +10567,14 @@ watchpack@^2.4.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
+watchpack@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
@@ -11030,109 +10589,72 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-web-worker@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.3.0.tgz#e5f2df5c7fe356755a5fb8f8410d4312627e6776"
-  integrity sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==
-
-webdriver-js-extender@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz#57d7a93c00db4cc8d556e4d3db4b5db0a80c3bb7"
-  integrity sha512-lcUKrjbBfCK6MNsh7xaY2UAUmZwe+/ib03AjVOpFobX4O7+83BUveSrLfU0Qsyb1DaKJdQRbuU+kM9aZ6QUhiQ==
-  dependencies:
-    "@types/selenium-webdriver" "^3.0.0"
-    selenium-webdriver "^3.0.1"
-
-webdriver-manager@^12.1.7:
-  version "12.1.9"
-  resolved "https://registry.yarnpkg.com/webdriver-manager/-/webdriver-manager-12.1.9.tgz#8d83543b92711b7217b39fef4cda958a4703d2df"
-  integrity sha512-Yl113uKm8z4m/KMUVWHq1Sjtla2uxEBtx2Ue3AmIlnlPAKloDn/Lvmy6pqWCUersVISpdMeVpAaGbNnvMuT2LQ==
-  dependencies:
-    adm-zip "^0.5.2"
-    chalk "^1.1.1"
-    del "^2.2.0"
-    glob "^7.0.3"
-    ini "^1.3.4"
-    minimist "^1.2.0"
-    q "^1.4.1"
-    request "^2.87.0"
-    rimraf "^2.5.2"
-    semver "^5.3.0"
-    xml2js "^0.4.17"
+weak-lru-cache@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz#fdbb6741f36bae9540d12f480ce8254060dccd19"
+  integrity sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==
 
-webpack-dev-middleware@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-6.0.1.tgz#fd585127ed44dab3f253daf0d98f4d58a5088cc2"
-  integrity sha512-PZPZ6jFinmqVPJZbisfggDiC+2EeGZ1ZByyMP5sOFJcPPWSexalISz+cvm+j+oYPT7FIJyxT76esjnw9DhE5sw==
-  dependencies:
-    colorette "^2.0.10"
-    memfs "^3.4.12"
-    mime-types "^2.1.31"
-    range-parser "^1.2.1"
-    schema-utils "^4.0.0"
+web-streams-polyfill@^3.0.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b"
+  integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==
 
-webpack-dev-middleware@^5.3.1:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz#efae67c2793908e7311f1d9b06f2a08dcc97e51f"
-  integrity sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==
+webpack-dev-middleware@7.4.2, webpack-dev-middleware@^7.1.0:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-7.4.2.tgz#40e265a3d3d26795585cff8207630d3a8ff05877"
+  integrity sha512-xOO8n6eggxnwYpy1NlzUKpvrjfJTvae5/D6WOK0S2LSo7vjmo5gCM1DbLUmFqrMTJP+W/0YZNctm7jasWvLuBA==
   dependencies:
     colorette "^2.0.10"
-    memfs "^3.4.3"
+    memfs "^4.6.0"
     mime-types "^2.1.31"
+    on-finished "^2.4.1"
     range-parser "^1.2.1"
     schema-utils "^4.0.0"
 
-webpack-dev-server@4.11.1:
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz#ae07f0d71ca0438cf88446f09029b92ce81380b5"
-  integrity sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==
-  dependencies:
-    "@types/bonjour" "^3.5.9"
-    "@types/connect-history-api-fallback" "^1.3.5"
-    "@types/express" "^4.17.13"
-    "@types/serve-index" "^1.9.1"
-    "@types/serve-static" "^1.13.10"
-    "@types/sockjs" "^0.3.33"
-    "@types/ws" "^8.5.1"
+webpack-dev-server@5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-5.0.4.tgz#cb6ea47ff796b9251ec49a94f24a425e12e3c9b8"
+  integrity sha512-dljXhUgx3HqKP2d8J/fUMvhxGhzjeNVarDLcbO/EWMSgRizDkxHQDZQaLFL5VJY9tRBj2Gz+rvCEYYvhbqPHNA==
+  dependencies:
+    "@types/bonjour" "^3.5.13"
+    "@types/connect-history-api-fallback" "^1.5.4"
+    "@types/express" "^4.17.21"
+    "@types/serve-index" "^1.9.4"
+    "@types/serve-static" "^1.15.5"
+    "@types/sockjs" "^0.3.36"
+    "@types/ws" "^8.5.10"
     ansi-html-community "^0.0.8"
-    bonjour-service "^1.0.11"
-    chokidar "^3.5.3"
+    bonjour-service "^1.2.1"
+    chokidar "^3.6.0"
     colorette "^2.0.10"
     compression "^1.7.4"
     connect-history-api-fallback "^2.0.0"
     default-gateway "^6.0.3"
     express "^4.17.3"
     graceful-fs "^4.2.6"
-    html-entities "^2.3.2"
+    html-entities "^2.4.0"
     http-proxy-middleware "^2.0.3"
-    ipaddr.js "^2.0.1"
-    open "^8.0.9"
-    p-retry "^4.5.0"
-    rimraf "^3.0.2"
-    schema-utils "^4.0.0"
-    selfsigned "^2.1.1"
+    ipaddr.js "^2.1.0"
+    launch-editor "^2.6.1"
+    open "^10.0.3"
+    p-retry "^6.2.0"
+    rimraf "^5.0.5"
+    schema-utils "^4.2.0"
+    selfsigned "^2.4.1"
     serve-index "^1.9.1"
     sockjs "^0.3.24"
     spdy "^4.0.2"
-    webpack-dev-middleware "^5.3.1"
-    ws "^8.4.2"
+    webpack-dev-middleware "^7.1.0"
+    ws "^8.16.0"
 
-webpack-merge@5.8.0:
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
-  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
-  dependencies:
-    clone-deep "^4.0.1"
-    wildcard "^2.0.0"
-
-webpack-merge@^5.7.3:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
-  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
+webpack-merge@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-6.0.1.tgz#50c776868e080574725abc5869bd6e4ef0a16c6a"
+  integrity sha512-hXXvrjtx2PLYx4qruKl+kyRSLc52V+cCvMxRjmKwoA+CBbbF5GfIBtR6kCvl0fYGqTUPKB+1ktVmTHqMOzgCBg==
   dependencies:
     clone-deep "^4.0.1"
     flat "^5.0.2"
-    wildcard "^2.0.0"
+    wildcard "^2.0.1"
 
 webpack-sources@^3.0.0, webpack-sources@^3.2.3:
   version "3.2.3"
@@ -11146,64 +10668,62 @@ webpack-subresource-integrity@5.1.0:
   dependencies:
     typed-assert "^1.0.8"
 
-webpack@5.76.1:
-  version "5.76.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.1.tgz#7773de017e988bccb0f13c7d75ec245f377d295c"
-  integrity sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==
+webpack@5.94.0:
+  version "5.94.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.94.0.tgz#77a6089c716e7ab90c1c67574a28da518a20970f"
+  integrity sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==
   dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.7.6"
-    browserslist "^4.14.5"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.10.0"
-    es-module-lexer "^0.9.0"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
+    graceful-fs "^4.2.11"
     json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.1.0"
+    schema-utils "^3.2.0"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
-    watchpack "^2.4.0"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
-webpack@5.77.0:
-  version "5.77.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.77.0.tgz#dea3ad16d7ea6b84aa55fa42f4eac9f30e7eb9b4"
-  integrity sha512-sbGNjBr5Ya5ss91yzjeJTLKyfiwo5C628AFjEa6WSXcZa4E+F57om3Cc8xLb1Jh0b243AWuSYRf3dn7HVeFQ9Q==
+webpack@5.95.0:
+  version "5.95.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.95.0.tgz#8fd8c454fa60dad186fbe36c400a55848307b4c0"
+  integrity sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==
   dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@types/estree" "^1.0.5"
+    "@webassemblyjs/ast" "^1.12.1"
+    "@webassemblyjs/wasm-edit" "^1.12.1"
+    "@webassemblyjs/wasm-parser" "^1.12.1"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.7.6"
-    browserslist "^4.14.5"
+    acorn-import-attributes "^1.9.5"
+    browserslist "^4.21.10"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.10.0"
-    es-module-lexer "^0.9.0"
+    enhanced-resolve "^5.17.1"
+    es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
+    graceful-fs "^4.2.11"
     json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.1.0"
+    schema-utils "^3.2.0"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
-    watchpack "^2.4.0"
+    terser-webpack-plugin "^5.3.10"
+    watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
@@ -11231,22 +10751,12 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-collection@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
-  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
-  dependencies:
-    is-map "^2.0.3"
-    is-set "^2.0.3"
-    is-weakmap "^2.0.2"
-    is-weakset "^2.0.3"
-
 which-module@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
   integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
 
-which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
   integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
@@ -11257,39 +10767,30 @@ which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15:
     gopd "^1.0.1"
     has-tostringtag "^1.0.2"
 
-which@^1.2.1, which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^2.0.1, which@^2.0.2:
+which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
-which@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-3.0.1.tgz#89f1cd0c23f629a8105ffe69b8172791c87b4be1"
-  integrity sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==
-  dependencies:
-    isexe "^2.0.0"
-
-wide-align@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
-  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
+which@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-4.0.0.tgz#cd60b5e74503a3fbcfbf6cd6b4138a8bae644c1a"
+  integrity sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==
   dependencies:
-    string-width "^1.0.2 || 2 || 3 || 4"
+    isexe "^3.1.1"
 
-wildcard@^2.0.0:
+wildcard@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
 wordwrapjs@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/wordwrapjs/-/wordwrapjs-4.0.1.tgz#d9790bccfb110a0fc7836b5ebce0937b37a8b98f"
@@ -11298,6 +10799,15 @@ wordwrapjs@^4.0.0:
     reduce-flatten "^2.0.0"
     typical "^5.2.0"
 
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -11316,33 +10826,33 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrap-ansi@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.0.tgz#1a3dc8b70d85eeb8398ddfb1e4a02cd186e58b3e"
+  integrity sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==
+  dependencies:
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-ws@^8.4.2:
-  version "8.16.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
-  integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
-
-ws@~8.11.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
-  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
-
-xml2js@^0.4.17:
-  version "0.4.23"
-  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
-  integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
-  dependencies:
-    sax ">=0.6.0"
-    xmlbuilder "~11.0.0"
-
-xmlbuilder@~11.0.0:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
-  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
+ws@^8.16.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
 y18n@^4.0.0:
   version "4.0.3"
@@ -11354,11 +10864,6 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
-
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -11369,11 +10874,16 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.2.2, yaml@^2.3.4:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
+  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -11382,20 +10892,15 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2:
-  version "20.2.9"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
-  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
-
 yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
-yargs@17.6.2:
-  version "17.6.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.6.2.tgz#2e23f2944e976339a1ee00f18c77fedee8332541"
-  integrity sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==
+yargs@17.7.2, yargs@^17.2.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
   dependencies:
     cliui "^8.0.1"
     escalade "^3.1.1"
@@ -11422,32 +10927,6 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^16.1.1:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
-yargs@^17.2.1:
-  version "17.7.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-  dependencies:
-    cliui "^8.0.1"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.1.1"
-
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
@@ -11458,12 +10937,20 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zone.js@~0.13.0:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.13.3.tgz#344c24098fa047eda6427a4c7ed486e391fd67b5"
-  integrity sha512-MKPbmZie6fASC/ps4dkmIhaT5eonHkEt6eAy80K42tAm0G2W+AahLJjbfi6X9NPdciOE9GRFTTM8u2IiF6O3ww==
-  dependencies:
-    tslib "^2.3.0"
+yocto-queue@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.1.1.tgz#fef65ce3ac9f8a32ceac5a634f74e17e5b232110"
+  integrity sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==
+
+yoctocolors-cjs@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz#f4b905a840a37506813a7acaa28febe97767a242"
+  integrity sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==
+
+zone.js@~0.14.10:
+  version "0.14.10"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.14.10.tgz#23b8b29687c6bffece996e5ee5b854050e7775c8"
+  integrity sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==
 
 zrender@5.5.0:
   version "5.5.0"